/* =====================================================================
   DIORAMA Skate Lounge — 共通スタイル
   コンセプト: 夜のスケートパーク。コンクリート、鉄のコーピング、
   ナトリウム灯のアンバー。装飾は最小、当たり判定は最大。
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------
     DIORAMA — SKATE × STREET × GAME
     コンクリートと夜の路上。黒・白・グレーを土台に、
     DIORAMAブルーだけを差し色にする。
     ------------------------------------------------------------------ */
  --asphalt: #0e1013;   /* 路面 */
  --deck: #171a1f;      /* 面 */
  --deck-2: #1f242b;
  --coping: #39424e;    /* 鉄の縁 */
  --chalk: #f1f3f5;     /* 文字 */
  --dust: #8d96a2;      /* 補助の文字 */

  /* DIORAMAブルー。
     指定色(#0067C0)は暗い背景の文字に使うとコントラストが3.4:1しかなく読みにくい。
     そこで「面に使う色」と「暗い背景の文字に使う色」を分けている。
     色相は同じなので、ブランドの見え方は変わらない。 */
  --dio: #0067c0;        /* 面・白地の上の文字 */
  --dio-bright: #0089ff; /* 暗い背景の上の文字・数字・ゲージ（5.5:1） */
  --dio-dim: #073f73;    /* 枠線・沈めたいとき */
  --dio-glow: rgba(0, 137, 255, .28);

  /* 旧名との互換。既存の画面が壊れないよう、青に読み替える。 */
  --sodium: var(--dio-bright);
  --sodium-dim: var(--dio-dim);

  --flag: #e4483c;
  --go: #4ec98a;

  --r: 4px;
  --gap: 16px;

  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--asphalt);
  color: var(--chalk);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body { min-height: 100dvh; }

/* 名称・タイトル系のテキストは、文中の微妙な位置で折り返されると読みにくいので
   1行に収める。幅が足りない箇所（グリッドのカードなど）は省略せず、
   fit-text.js が縮小して1行のまま収める。 */
.nickname, .realname, .family-name, .qr-card-name, .title-name,
.fire-tier-name, .fire-equip-name, .member-name, .done-name, .receipt-name,
.stage-name, .result .name, .qr-card .name, .fm-summary-name, .fm-done-name,
.vc-name, .qr-family-title, .choice-card-title, .fm-card-title, .stage-title,
.reward-title, .xp-title, .equipped-title, .item-prev-title, .gx-name,
.item-info-name {
  white-space: nowrap;
}
/*
 * overflow: hidden はここでは付けない。fit-text.js の scale は
 * 「縮小して枠に収める」ためのものだが、同じ要素に overflow: hidden も
 * 付けると、レイアウト時点（transform より前）で枠を超えた分がまず
 * 切り取られてしまい、その後 scale で縮めても失った文字は戻らない
 * （9文字前後の名前が途中で消えて見えたのはこれが原因）。
 * fit-text.js の scale は枠の幅にぴったり収まるよう計算しているので、
 * 反映後は自然と枠内に収まり、clip は要らない。
 */
.item-name, .gx-cell .gx-name {
  white-space: nowrap;
}

/* モーダル表示中は背景を固定して、スクロールでposition:fixedの当たり判定が
   ズレる（特にiOS Safari）のを防ぐ。JS側でscroll位置をtopへ退避して使う。 */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* モーダル（.modal-back）は body 直下の別要素として重なるので、
   .card の中は対象にならない。開いている間は背景側のアニメーション
   （焚き火・火の粉・オーラなど、ぼかしフィルター付きで常時動き続けるもの）を
   止めて負荷を減らす。見えていない演出のために端末を働かせ続けない。 */
body.modal-open .card * {
  animation-play-state: paused !important;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--sodium);
  outline-offset: 2px;
}

/* ==================================================================
   ストリートの質感
   グラフィティ的な「汚し」ではなく、印刷物・標識・テープの質感を狙う。
   紙のざらつき、インクのかすれ、貼られたステッカー。
   ================================================================== */

/* コンクリートのざらつき。SVGのノイズを薄くかけるだけで、
   のっぺりした黒が「路面」の質感になる。 */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* ステッカー。少し傾けて貼り、影を落とす。 */
.sticker {
  display: inline-block;
  background: var(--dio);
  color: #fff;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 6px 14px;
  rotate: -2deg;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .55);
}
.sticker-outline {
  background: transparent;
  color: var(--dio-bright);
  border: 2px solid var(--dio-bright);
  box-shadow: 2px 3px 0 rgba(0, 137, 255, .25);
}

/* スタンプ。押した跡のように、枠だけで少し傾ける。 */
.stamp {
  display: inline-block;
  border: 3px solid var(--dio-bright);
  color: var(--dio-bright);
  font-weight: 800;
  letter-spacing: .2em;
  padding: 8px 16px;
  rotate: -4deg;
  opacity: .92;
}

/* 養生テープ。区切りに使うと一気にストリートの紙面になる。 */
.tape {
  position: relative;
  height: 26px;
  background: repeating-linear-gradient(
    -45deg, var(--dio) 0 12px, #0b4e91 12px 24px);
  opacity: .9;
  rotate: -.6deg;
  margin: 26px -6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
/* 端をちぎったように見せる */
.tape::before, .tape::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 10px;
  background: inherit;
}
.tape::before { left: -8px; clip-path: polygon(100% 0, 0 22%, 100% 40%, 0 62%, 100% 80%, 0 100%, 100% 100%); }
.tape::after { right: -8px; clip-path: polygon(0 0, 100% 22%, 0 40%, 100% 62%, 0 80%, 100% 100%, 0 100%); }

/* ==================================================================
   称号の色
   称号はレベルの証なので、どれも同じ青だと「上がった」ことが伝わらない。
   名前が指すものに色を合わせる。管理画面で称号の名前を変えても
   このファイルまでは追えないので、実際に運用されている称号名
   （ルーキー/シルバー/ゴールド/プラチナ/クリスタル/ルビー/サファイア/
   エメラルド/ダイヤモンド/マスター/アイコニック）にひとつずつ合わせてある。
   既定の6称号（NEW MEMBER〜DIORAMA ICON）の名残りも残してあるので、
   管理画面が既定のままの店舗でも色が付く。
   ここでは色だけを決め、貼り方（ステッカーか枠か）は各画面のCSSが持つ。
   --title-bg / --title-fg はステッカー用、--title-ink は暗い背景に文字だけ
   置くとき用。対応する称号が無いときは指定が無いので、
   これまでどおり既定のDIORAMAブルーで出る。
   文字色との対比は test/design.test.ts で実測して固定している。

   金属と宝石は、一色のベタでは「その素材」に見えない。
   実物は面の向きで明暗が変わるので、暗い縁 → 明るいハイライト → 中間、と
   斜めに色を振って、金属なら磨いた面の照り、宝石ならカットの照り返しを出す。
   色みも実物に寄せる:
   金は赤みのある山吹、銀は青みのグレー、プラチナは銀より白く彩度が低い、
   水晶は無色に近い氷の色でわずかに紫がかる、ルビーは鳩の血の暗赤、
   サファイアは群青、エメラルドは黄より青に寄った深緑、
   ダイヤは無色で、面ごとに青・紫・緑がわずかに散る。
   ================================================================== */
/* ルーキー: 若葉の緑（はじまり） */
.t-new {
  --title-bg: linear-gradient(100deg, #1f6f3f, #2b8149 50%, #246c42);
  --title-fg: #fff;
  --title-ink: #7bdc86;
}
/* シルバー: 磨いた銀。青みのグレーに白い照りが一本走る。
   プラチナと見分けが付くよう、こちらは一段暗く置く */
.t-silver {
  --title-bg: linear-gradient(100deg, #7a848f, #dbe3ea 28%, #8e98a4 46%, #b9c3cd 64%, #828c98);
  --title-fg: #0d1116;
  --title-ink: #c6d0da;
}
/* ゴールド: 赤みのある山吹。縁が沈み、中ほどが強く照る */
.t-gold {
  --title-bg: linear-gradient(100deg, #ac8020, #f7e08a 30%, #c9932a 52%, #d9a832 70%, #b0831f);
  --title-fg: #241800;
  --title-ink: #ffcf5a;
}
/* プラチナ: 銀より白く、彩度を落とす。照りも銀より穏やか */
.t-platina {
  --title-bg: linear-gradient(100deg, #9aa6b4, #fbfcfd 30%, #b3bdc9 52%, #eaf0f5 72%, #a3aebb);
  --title-fg: #131b24;
  --title-ink: #e6edf4;
}
/* クリスタル: 無色に近い氷。透けた奥がわずかに紫がかる */
.t-crystal {
  --title-bg: linear-gradient(120deg, #dff0f6, #f7fcfe 26%, #cfe4f2 48%, #e6e2f7 70%, #ddf1f7);
  --title-fg: #10303a;
  --title-ink: #bfeef6;
}
/* ルビー: 鳩の血の暗赤。縁が深く、カットの面だけ明るい */
.t-ruby {
  --title-bg: linear-gradient(115deg, #5c0a1e, #9e1030 34%, #c3183a 52%, #7d0d26 74%, #6a0b22);
  --title-fg: #fff;
  --title-ink: #ff5f6e;
}
/* サファイア: 群青。深いところから面が青く抜ける */
.t-sapphire {
  --title-bg: linear-gradient(115deg, #08205a, #123f8c 32%, #2b62c8 52%, #0d2f70 74%, #0a2662);
  --title-fg: #fff;
  --title-ink: #5b95ff;
}
/* エメラルド: 黄より青に寄った深緑。内包物のぶん濁らせる */
.t-emerald {
  --title-bg: linear-gradient(115deg, #04422f, #0a6b4f 34%, #0c7d5c 52%, #075a41 74%, #05492f);
  --title-fg: #fff;
  --title-ink: #2fd6a0;
}
/* ダイヤモンド: 無色。面ごとに青・紫・緑がわずかに散る（火）*/
.t-diamond {
  --title-bg: linear-gradient(120deg, #f3fbff, #ffffff 24%, #e2f2fb 44%, #f2e9f7 62%, #eefaf6 82%, #ffffff);
  --title-fg: #10242e;
  --title-ink: #e8fbff;
}
/* 既定の中間称号（今の運用では使っていないが、既定のままの店舗のために残す） */
.t-regular { --title-bg: var(--dio); --title-fg: #fff; --title-ink: var(--dio-bright); }
.t-local   { --title-bg: #94510a; --title-fg: #fff; --title-ink: #ffab3d; }
.t-skater  { --title-bg: #b8302a; --title-fg: #fff; --title-ink: #ff7b6f; }
/* マスター・アイコニック（≒既定のLEGEND・DIORAMA ICON）はキラキラも付く */
/* マスター: ゴールドより照りを強くした、磨き上げた金 */
.t-master {
  --title-bg: linear-gradient(100deg, #ac8020, #fbf0b8 32%, #c9932a 54%, #f3d067 74%, #b0831f);
  --title-fg: #241800;
  --title-ink: #f9e6a3;
}
.t-legend {
  --title-bg: linear-gradient(100deg, #ac8020, #fbf0b8 32%, #c9932a 54%, #f3d067 74%, #b0831f);
  --title-fg: #241800;
  --title-ink: #f9e6a3;
}
/* アイコニック: どの石でもない、玉虫色（オパールの遊色） */
.t-icon    {
  --title-bg: linear-gradient(105deg, #4c1d95, #7b1fa2 30%, #1450b8 62%, #0a6e78);
  --title-fg: #fff;
  --title-ink: #c78bff;
}

/*
 * いちばん上の2つ（マスター / アイコニック。既定なら LEGEND / DIORAMA ICON）
 * だけ、光が走るキラキラを付ける。
 * 全部を光らせると特別さが消えるので、ここは増やさない。
 * 動かすのは transform と opacity だけにして、複数が同時に出ても
 * スマートフォンで重くならないようにする（§18）。
 */
.t-master, .t-legend, .t-icon { position: relative; overflow: hidden; }
/* 斜めに走る光 */
.t-master::before, .t-legend::before, .t-icon::before {
  content: '';
  position: absolute; inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, .72) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: title-shine 3.8s ease-in-out infinite;
}
/* きらめく星。細い十字なので、端末による絵柄の違いが出ない */
.t-master::after, .t-legend::after, .t-icon::after {
  content: '';
  position: absolute; top: 14%; right: 7%;
  width: 11px; height: 11px;
  pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat;
  opacity: 0;
  animation: title-twinkle 3.8s ease-in-out infinite;
}
@keyframes title-shine {
  0%, 55% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}
@keyframes title-twinkle {
  0%, 30%, 100% { opacity: 0; transform: scale(.4) rotate(-45deg); }
  42% { opacity: .95; transform: scale(1) rotate(0deg); }
  54% { opacity: 0; transform: scale(.4) rotate(45deg); }
}

/* 見出しに使う太いタイポグラフィ。潰れるほど詰める。 */
.slab {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .92;
  text-transform: uppercase;
}

/* 数字を主役にするための扱い */
.figure {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: -.03em;
}

/* --- ワードマーク ------------------------------------------------- */
.wordmark {
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.05;
}
.wordmark .sub {
  display: block;
  color: var(--dust);
  font-weight: 600;
  letter-spacing: 0.34em;
}

/* 鉄のコーピング（水平の細い金属バー） */
.coping-rule {
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, var(--coping), #6c7784 50%, var(--coping));
  margin: 0;
}

/* --- ボタン ------------------------------------------------------- */
.btn {
  appearance: none;
  border: 1px solid var(--coping);
  background: var(--deck-2);
  color: var(--chalk);
  border-radius: var(--r);
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { border-color: #55606e; }
.btn-primary {
  background: var(--dio);
  border-color: var(--dio);
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
}
.btn-primary:hover { background: #007be6; }
.btn-danger { border-color: var(--flag); color: #ff9c94; }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-lg { padding: 18px 28px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; }

/* --- フォーム ----------------------------------------------------- */
.field { display: block; margin-bottom: 18px; }
.field > .label {
  display: block;
  font-size: 0.85rem;
  color: var(--dust);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.field .req { color: var(--sodium); margin-left: 4px; }
.input, select.input, textarea.input {
  width: 100%;
  background: var(--deck);
  border: 1px solid var(--coping);
  border-radius: var(--r);
  padding: 14px;
  font-size: 1.05rem;
}
.input:focus { border-color: var(--sodium); outline: none; }
.hint { font-size: 0.8rem; color: var(--dust); margin-top: 6px; }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--coping);
  border-radius: var(--r);
  background: var(--deck);
  cursor: pointer;
}
.check input { width: 24px; height: 24px; flex: none; accent-color: var(--sodium); }

/* ON/OFFのボタン。チェックボックスより指で押しやすく、状態も一目で分かる。 */
.toggle-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--coping);
  border-radius: var(--r);
  background: var(--deck);
  color: var(--chalk);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.toggle-btn:active { transform: translateY(1px); }
.toggle-dot {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2px solid var(--coping);
  background: var(--deck-2);
  transition: background 120ms ease, border-color 120ms ease;
}
.toggle-btn[aria-pressed="true"] {
  background: var(--dio-dim);
  border-color: var(--dio-bright);
}
.toggle-btn[aria-pressed="true"] .toggle-dot {
  background: var(--dio-bright);
  border-color: var(--dio-bright);
  box-shadow: 0 0 0 3px var(--dio-glow);
}

/* --- 通知 --------------------------------------------------------- */
.notice {
  border-left: 3px solid var(--coping);
  background: var(--deck);
  padding: 12px 14px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.notice-warn { border-left-color: var(--sodium); }
.notice-error { border-left-color: var(--flag); color: #ffc8c3; }
.notice-ok { border-left-color: var(--go); }

/* --- タグ --------------------------------------------------------- */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--coping);
  color: var(--dust);
  white-space: nowrap;
}
.tag-amber { border-color: var(--sodium-dim); color: var(--sodium); }
.tag-red { border-color: #6b2b26; color: #ff9c94; }
.tag-green { border-color: #275c43; color: var(--go); }

/* --- 金額 --------------------------------------------------------- */
.yen { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * 動きが苦手な方の設定を尊重する。
 * 演出そのものは残し、動きだけを止める。
 * 情報が消えてしまわないよう、最終状態は必ず見えるようにする。
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sticker, .stamp, .tape, .title-name, .badge.owned { rotate: 0deg !important; }
}