/* ダイヤ・購入の履歴・ログインボーナス */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */
.pk.off {
  opacity: 0.45;
  cursor: default;
}
/* Google のボタン：ブランドガイドラインどおり（白地・#747775 の枠・#1F1F1F の文字・公式の4色の G・Roboto Medium） */
.gsi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #747775;
  border-radius: 4px;
  color: #1f1f1f;
  font:
    500 15px/1 Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  letter-spacing: 0.25px;
  cursor: pointer;
}
.gsi:active {
  background: #f2f2f2;
}
.gsi-g {
  width: 20px;
  height: 20px;
  flex: none;
}
/* Apple のボタン（iOS アプリだけ）：HIG どおり白地・黒文字・Apple のロゴ。Google と同じ大きさ */
.asi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border: 0;
  border-radius: 4px;
  color: #000;
  font:
    600 16px/1 -apple-system,
    "Helvetica Neue",
    sans-serif;
  cursor: pointer;
}
.asi:active {
  background: #e6e6e6;
}
/* Apple のロゴは絵（SVG）。Apple の機種にしかない文字（U+F8FF）だと、ほかの端末で四角になる */
.asi-l {
  width: 15px;
  height: 18px;
  flex: none;
  margin-top: -2px;
}
.pk {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: #161a23;
  border: 1px solid var(--wall-hi);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.pk .spr {
  width: 36px;
  height: 36px;
}
.pk.fresh {
  border-color: var(--gold);
}
.pk .go {
  font-size: 12px;
  color: var(--torch);
}
.bankbig .gems {
  margin-left: 16px;
  font-size: 20px;
  color: var(--gem);
}
/* ダイヤの内訳（有償・無償）の下に購入履歴 */
.gembrk {
  display: grid;
  gap: 6px;
  margin: -4px 0 12px;
  font-size: 12px;
  color: var(--dim);
}
.phist {
  max-height: 50vh;
  overflow: auto;
  margin: 0 0 8px;
}
.ph {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  align-items: baseline;
}
.phd {
  color: var(--dim);
  font-size: 11px;
}
.pha {
  white-space: nowrap;
}
.lb-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 12px 0;
}
.lb-d {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: 1px solid var(--wall-hi);
  background: #1d2130;
  font-size: 10px;
  color: var(--dim);
}
.lb-d.got {
  opacity: 0.45;
}
.lb-ic {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.lb-ic .spr {
  width: 26px;
  height: 26px;
}
.lb-big {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.lb-big .spr {
  width: 72px;
  height: 72px;
}
.lb-d.now {
  border-color: var(--torch);
  background: #2a2412;
}
.lb-d.now b {
  color: var(--torch);
}
.lb-now {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px;
  margin: 0 0 12px;
  border: 1px solid var(--wall-hi);
  background: #1a1e28;
  font-size: 12px;
  color: var(--dim);
}
.btn.gembtn:hover,
.btn.gembtn:focus-visible {
  background: #1d2e44;
}
.btn.gembtn:disabled {
  opacity: 0.5;
}
.btn.gembtn:focus-visible {
  outline-color: var(--gem);
}
.btn.gembtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.btn.gembtn .gemamt {
  display: inline-flex;
  align-items: center;
}
.btn.gembtn .gi {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 4px 0 0;
  vertical-align: 0;
  position: static;
}
.btn.gembtn .gi .spr {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  position: static;
  transform: none;
}
.lb-d {
  padding: 2px 0;
}
.lb-d.now {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAV0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg9Y1JGApENfLANBNcwadHGLgiQASsiAWm6+Gls7hshJhECBClCG7dhQt3cSqC+w7mSGTQseENRBGIIBROADiCIavHs3DWAAAAAElFTkSuQmCC") !important;
  color: #241505;
}
.lb-d.got {
  opacity: 0.4;
}
.gembrk {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px calc(6.5em + 8px) !important;
  font-size: 12px;
}
.gembrk .btn {
  flex: none;
  padding: 0 10px !important;
  font-size: 12px !important;
  min-height: 0;
}
/* ===== gems-login（ダイヤ・購入の履歴・ログインボーナス）・2段目 ===== */
.pk small {
  display: block;
  font-size: 11px;
  color: var(--dim);
}
button.pk {
  cursor: pointer;
}
/* ログインボーナスもドットの札に */
.lb-d,
.lb-now {
  border: 6px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAZUlEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg0CwvDAV2advANCNIEUhBwTI+DEUmXCcYZm17wMACE7h7+zqmIn0IzYTLLciAKEVw696/fYlFmgPhcBAjzUsBQwnI0WBFIIJQOAEAqjYdOqenZDAAAAAASUVORK5CYII=") 3 fill / 6px !important;
  background: none !important;
  image-rendering: pixelated;
}
.lb-d.now b,
.lb-d.now small {
  color: #241505;
}
/* ===== gems-login（ダイヤ・購入の履歴・ログインボーナス）・3段目 ===== */
.lb-d small {
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
}
/* ===== gems-login（ダイヤ・購入の履歴・ログインボーナス）・4段目 ===== */
.lb-d b {
  font-size: 14px;
  color: var(--ink);
}
.lb-now b {
  font-size: 22px;
  color: var(--gold, #f2c85b);
}

/* 買ったあとの「ありがとう」の窓：届いた物を絵と数で並べる */
.thx {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 10px;
}
.thx-it {
  display: grid;
  justify-items: center;
  gap: 2px;
  flex: 1 1 0;
  max-width: 96px;
  padding: 8px 4px;
  background: #1b1f28;
  border: 1px solid #8a6a36;
}
.thx-pic .spr,
.thx-pic img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
.thx-nm {
  font-size: 11px;
  color: var(--dim);
  text-align: center;
}

/* 年齢の確認：生まれた年と月を選ぶ */
.age-sel {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}
.age-sel select {
  flex: 1;
  background: #11141a;
  color: var(--ink);
  border: 1px solid #8a6a36;
  padding: 8px;
  font: inherit;
}
.age-left {
  font-size: 12px;
  margin: -4px 0 8px;
}

/* プロフィール（連携のすぐあと）：項目の見出し */
.prof-h {
  margin: 12px 0 4px;
  font-size: 13px;
}
.prof-h small {
  margin-left: 8px;
  font-size: 11px;
}
/* 購入の前の最終確認（paid-gems.js の buyAsk） */
.buyask{width:100%;border-collapse:collapse;font-size:13px;line-height:1.6}.buyask th,.buyask td{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}.buyask th{white-space:nowrap;color:var(--dim,#9c917a);font-weight:400;width:5em}