/*
 * Gamefolder デザインシステム(シンセウェイブ・ネオン / 平成のゲームセンター)
 * ── 黒 × ネオンライトブルー(シアン) + マゼンタ。夕焼けグラデ + ネオングリッド床。
 *    ダーク基調で固定(この世界観はダーク前提)。配色・タイポはこのトークンに集約する。
 *    クラス名・構造は従来のままなのでビュー側の改修は不要。
 */

:root {
  --bg:#08060f; --panel:#151129; --ink:#e9ecff; --mut:#9a9ed6; --line:#2c2a55;
  /* ネオンシアン(=旧 --aqua 系の役割) */
  --aqua:#2de2ff; --aqua-deep:#7ef0ff; --aqua-soft:#1b6f86;
  /* アクセント=マゼンタ(=旧 --yellow 系の役割) */
  --yellow:#ff3caf; --yellow-deep:#ff86d2;
  --good-bg:#0e2a22; --good-line:#1f7a5a; --good-ink:#5ef2c0;
  --bad-bg:#2a0e1f; --bad-line:#7a1f4a; --bad-ink:#ff7aa8;
  --glow-cyan:0 0 6px rgba(45,226,255,.95), 0 0 18px rgba(45,226,255,.65), 0 0 34px rgba(45,226,255,.4);
  --glow-mag:0 0 6px rgba(255,60,175,1), 0 0 20px rgba(255,60,175,.7), 0 0 38px rgba(255,60,175,.45);
  --font-display:"Trebuchet MS","Segoe UI",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Courier New",monospace;
  --radius:10px; --wrap:1000px;
}

* { box-sizing:border-box; }
html { color-scheme:dark; }
body {
  margin:0; color:var(--ink); font-family:var(--font-body); line-height:1.65;
  background:var(--bg); min-height:100vh;
}
/* 背景は固定擬似要素で描く(iOS で body の background-attachment:fixed は sticky を壊すため)。
   ::before = 夕焼けの空(サンセット/サイドグロー)、::after = 奥へ伸びるネオングリッドの床。 */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% -25%, rgba(255,60,175,.38), transparent 55%),
    radial-gradient(90% 60% at 8% 0%, rgba(45,226,255,.26), transparent 60%),
    radial-gradient(90% 60% at 100% 8%, rgba(124,77,255,.26), transparent 60%),
    var(--bg);
  animation:skyPulse 5s ease-in-out infinite;
}
@keyframes skyPulse { 0%,100% { opacity:1; } 50% { opacity:.72; } }
body::after {
  content:""; position:fixed; left:-25%; right:-25%; bottom:0; height:48vh; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(45,226,255,.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,60,175,.5) 2px, transparent 2px);
  background-size:44px 44px;
  transform:perspective(300px) rotateX(66deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 6%, transparent 84%);
          mask-image:linear-gradient(to top, #000 6%, transparent 84%);
  opacity:.85; filter:drop-shadow(0 0 6px rgba(45,226,255,.5));
  animation:gridScroll 2.4s linear infinite;
}
@keyframes gridScroll { from { background-position:0 0, 0 0; } to { background-position:0 44px, 0 44px; } }
@media (prefers-reduced-motion:reduce) {
  body::before, body::after, .site-header .brand { animation:none; }
}

/* ---- タイポ ---- */
h1,h2,h3 { font-family:var(--font-display); font-weight:800; letter-spacing:.03em; line-height:1.2; text-wrap:balance; }
h1 { font-size:1.9rem; margin:0 0 .8rem;
  text-shadow:0 0 4px rgba(45,226,255,.95), 0 0 20px rgba(45,226,255,.7), 0 0 44px rgba(45,226,255,.4); }
h2 { font-size:1.35rem; margin:1.8rem 0 .7rem; }
h3 { font-size:1.15rem; margin:1.2rem 0 .5rem; }
a { color:var(--aqua-deep); text-decoration:none; }
a:hover { text-decoration:none; text-shadow:var(--glow-cyan); }
:focus-visible { outline:2px solid var(--aqua); outline-offset:2px; border-radius:4px; }

/* ---- ヘッダー(固定・レスポンシブ) ---- */
.site-header { position:-webkit-sticky; position:sticky; top:0; z-index:100;
  background:var(--panel);
  background:color-mix(in srgb, #0b0920 82%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.site-header:after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--aqua),var(--yellow)); box-shadow:0 0 12px rgba(45,226,255,.6); }
.site-header nav { max-width:var(--wrap); margin:0 auto; padding:.85rem 1.3rem;
  display:flex; align-items:center; gap:.5rem 1.2rem; flex-wrap:wrap; }
.site-header .brand { font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  color:#eaffff; text-transform:uppercase; font-style:italic; letter-spacing:.08em;
  margin-right:.3rem; animation:brandPulse 1.6s ease-in-out infinite; }
@keyframes brandPulse {
  0%,100% { text-shadow:0 0 6px rgba(45,226,255,.95), 0 0 18px rgba(45,226,255,.7); }
  50% { text-shadow:0 0 10px rgba(45,226,255,1), 0 0 30px rgba(45,226,255,.95), 0 0 52px rgba(45,226,255,.6), 0 0 80px rgba(45,226,255,.35); }
}
.site-header .brand:hover { text-decoration:none; }
.site-header .brand::after { content:"_"; color:var(--yellow); text-shadow:var(--glow-mag);
  animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.site-header .spacer { flex:1; }
.site-header nav a { color:var(--mut); font-size:.86rem; white-space:nowrap; letter-spacing:.02em; }
.site-header nav a:hover { color:var(--aqua-deep); text-decoration:none; text-shadow:var(--glow-cyan); }
.site-header nav a.btn { color:#04121a; padding:.4rem 1rem; font-size:.8rem; }
.site-header nav a.btn:hover { color:#04121a; }
.site-header .user { color:var(--aqua-deep); font-weight:700; font-size:.86rem; white-space:nowrap; font-family:var(--font-mono); }
.site-header form.button_to { margin:0; display:inline; }
.site-header .linklike { color:var(--mut); font-size:.86rem; white-space:nowrap; }
@media (max-width:560px){
  .site-header nav { padding:.7rem 1rem; gap:.55rem .9rem; }
  .site-header .brand { font-size:1.2rem; width:100%; }
  .site-header .spacer { display:none; }
}

/* ---- レイアウト ---- */
.container { max-width:var(--wrap); margin:0 auto; padding:1.8rem 1.3rem 4rem; }

/* ---- フラッシュ ---- */
.flash { max-width:var(--wrap); margin:1rem auto 0; padding:.6rem 1.1rem; border-radius:var(--radius);
  border:1px solid; font-size:.9rem; }
.flash.notice { background:var(--good-bg); border-color:var(--good-line); color:var(--good-ink); box-shadow:0 0 14px rgba(94,242,192,.18); }
.flash.alert  { background:var(--bad-bg);  border-color:var(--bad-line);  color:var(--bad-ink); box-shadow:0 0 14px rgba(255,60,175,.18); }

/* ---- ボタン ---- */
.btn, input[type="submit"], button[type="submit"] {
  display:inline-block; background:linear-gradient(135deg,var(--aqua),#13b6d6); color:#04121a; border:0;
  font:inherit; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.55rem 1.2rem; border-radius:8px; cursor:pointer;
  box-shadow:0 0 12px rgba(45,226,255,.7), 0 0 30px rgba(45,226,255,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
.btn:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  text-decoration:none; filter:brightness(1.12);
  box-shadow:0 0 18px rgba(45,226,255,1), 0 0 46px rgba(45,226,255,.7), inset 0 0 0 1px rgba(255,255,255,.35); }
.btn.google, .btn.ghost { background:transparent; color:var(--aqua-deep); border:1px solid var(--aqua);
  box-shadow:inset 0 0 12px rgba(45,226,255,.12); text-shadow:var(--glow-cyan); }
.linklike { background:none; border:0; color:var(--aqua-deep); cursor:pointer; padding:0; font:inherit; }
.linklike:hover { text-shadow:var(--glow-cyan); }
.linklike.danger { color:var(--bad-ink); }

/* ---- ヒーロー(トップ) ---- */
.hero { display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:end; padding:2.4rem 0 2rem; }
.hero .eyebrow { font-family:var(--font-display); font-style:italic; font-size:.9rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--aqua-deep); text-shadow:var(--glow-cyan); margin:0 0 .8rem; }
.hero h1 { font-size:clamp(1.5rem, 6vw, 2.6rem); line-height:1.14; margin:0; white-space:nowrap;
  text-shadow:0 0 20px rgba(45,226,255,.4); }
.hero h1 .mark { position:relative; color:var(--yellow); text-shadow:var(--glow-mag); }
.hero h1 .mark::after { content:""; position:absolute; left:-1%; right:-1%; bottom:.06em; height:.3em;
  background:var(--yellow); z-index:-1; border-radius:2px; opacity:.5; box-shadow:0 0 14px var(--yellow); }
.hero p.lead { color:var(--mut); font-size:.96rem; margin:0; }
@media (max-width:900px){ .hero { grid-template-columns:1fr; gap:1rem; padding:1.6rem 0; } }

/* ---- セクション見出し ---- */
.sec { display:flex; align-items:center; gap:1rem; margin:1.6rem 0 0; }
.sec h2 { margin:0; }
.sec .rule { flex:1; height:1px; background:linear-gradient(90deg,var(--aqua),transparent);
  box-shadow:0 0 8px rgba(45,226,255,.4); }
.sec .count { font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--aqua-deep);
  font-family:var(--font-mono); }

/* ---- ゲームカード(ネオンタイル) ---- */
.game-cards { list-style:none; padding:0; margin:1.2rem 0 0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:720px){ .game-cards { grid-template-columns:1fr; } }
.game-card { border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(45,226,255,.05), transparent 45%), var(--panel);
  transition:border-color .18s, box-shadow .18s, transform .18s; }
.game-card:hover { border-color:var(--aqua);
  box-shadow:0 0 20px rgba(45,226,255,.6), 0 0 44px rgba(45,226,255,.35), inset 0 0 24px rgba(45,226,255,.08);
  transform:translateY(-3px); }
.game-card > a { display:flex; flex-direction:column; gap:.7rem; padding:1.2rem 1.2rem 1.3rem;
  color:inherit; height:100%; }
.game-card > a:hover { text-decoration:none; }
.game-card .cover { aspect-ratio:5/4; border-radius:8px; position:relative; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:flex-end; padding:.6rem;
  box-shadow:inset 0 0 34px rgba(0,0,0,.5); }
.game-card .cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.game-card .cover.g0 { background:linear-gradient(150deg,#2de2ff,#08243d); }
.game-card .cover.g1 { background:linear-gradient(150deg,#ff3caf,#2a0838); }
.game-card .cover.g2 { background:linear-gradient(150deg,#7c4dff,#0e0e34); }
.game-card .tag { position:relative; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.26rem .6rem; border-radius:5px; background:rgba(6,8,22,.72); color:var(--aqua);
  border:1px solid var(--aqua); box-shadow:var(--glow-cyan); }
.game-card .tag.new { color:var(--yellow); border-color:var(--yellow); box-shadow:var(--glow-mag); }
.game-card .cat { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--aqua-deep);
  font-weight:700; font-family:var(--font-mono); text-shadow:0 0 6px rgba(45,226,255,.4); }
.game-card h2 { font-size:1.2rem; margin:0; color:var(--ink); }
.game-card p { margin:0; font-size:.83rem; color:var(--mut); line-height:1.6; flex:1; }
.game-card .foot { display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:.65rem; margin-top:.2rem; }
.game-card .foot .plays { font-size:.74rem; color:var(--mut); font-family:var(--font-mono); }
.game-card .foot .plays b { color:var(--aqua-deep); font-weight:700; }
.game-card .foot .go { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:#04121a; background:linear-gradient(135deg,var(--aqua),#13b6d6);
  padding:.42rem 1rem; border-radius:6px; box-shadow:var(--glow-cyan); transition:filter .15s, box-shadow .15s; }
.game-card > a:hover .foot .go { filter:brightness(1.08); box-shadow:0 0 20px rgba(45,226,255,.7); }

/* ---- 詳細 / プレイ ---- */
.desc { color:var(--mut); max-width:60ch; }
.best { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--aqua);
  padding:.6rem 1rem; border-radius:var(--radius); display:inline-block; box-shadow:0 0 14px rgba(45,226,255,.15); }
.best strong { color:var(--aqua-deep); font-size:1.15rem; text-shadow:var(--glow-cyan); }
.actions { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin:1.4rem 0; }
.game-frame { border:2px solid var(--aqua); border-radius:10px; max-width:100%; width:640px;
  background:#05040c;
  box-shadow:0 0 16px rgba(45,226,255,.7), 0 0 44px rgba(45,226,255,.4), inset 0 0 20px rgba(45,226,255,.1); }
@media (max-width:680px){
  /* SP: 上部の導線・見出し・バナーを詰めて、ゲーム表示領域を最大化する */
  .container { padding:1rem .7rem 2.4rem; }
  h1 { font-size:1.4rem; line-height:1.2; margin:.2rem 0 .7rem; }
  .play-top { font-size:.84rem; margin:0 0 .7rem; }
  .play-status { padding:.5rem .8rem; font-size:.82rem; margin:0 0 .8rem; }
  /* コンテナ左右パディングぶん食い込ませて端まで使う。高さは dvh でブラウザバー変動に追従 */
  .game-frame {
    width:calc(100% + 1.4rem); margin-left:-.7rem; margin-right:-.7rem;
    height:min(74dvh, 128vw); min-height:20rem;
    border-radius:0; border-left:0; border-right:0;
  }
}

/* プレイ画面: 一覧へ戻る・記録状態バナー */
.play-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1rem; }
.play-top .back { font-weight:700; }
.play-status { display:flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:var(--radius);
  border:1px solid; font-size:.9rem; margin:0 0 1rem; }
.play-status.on  { background:var(--good-bg); border-color:var(--good-line); color:var(--good-ink); box-shadow:0 0 14px rgba(94,242,192,.2); }
.play-status.off { background:var(--bad-bg); border-color:var(--yellow); color:var(--yellow-deep); box-shadow:var(--glow-mag); }
.play-status .dot { width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto; }
.play-status.on .dot  { background:var(--good-ink); box-shadow:0 0 8px var(--good-ink); }
.play-status.off .dot { background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
.play-status a { font-weight:700; }

/* ---- フォーム ---- */
form div { margin:.7rem 0; }
label { display:block; font-size:.78rem; color:var(--aqua-deep); margin-bottom:.25rem; letter-spacing:.06em;
  text-transform:uppercase; font-family:var(--font-mono); }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width:100%; max-width:460px; padding:.6rem .75rem; border:1px solid var(--line); border-radius:8px;
  font:inherit; background:#0d0b1c; color:var(--ink); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--aqua);
  box-shadow:0 0 0 3px rgba(45,226,255,.22), 0 0 16px rgba(45,226,255,.3); }
.check label { display:inline; }
.errors { color:var(--bad-ink); background:var(--bad-bg); border:1px solid var(--bad-line);
  border-radius:var(--radius); padding:.5rem .9rem; list-style-position:inside; }
form hr { border:0; border-top:1px solid var(--line); margin:1.4rem 0; }

/* ---- テーブル / ランキング ---- */
table { border-collapse:collapse; width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; }
th, td { border-bottom:1px solid var(--line); padding:.55rem .75rem; text-align:left; font-size:.9rem; }
th { color:var(--aqua-deep); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--font-mono); background:rgba(45,226,255,.05); }
td { color:var(--ink); }
td code { font-size:.8rem; color:var(--mut); }
table.ranking td { font-family:var(--font-mono); }
table.ranking td:first-child { text-align:right; width:3rem; color:var(--mut); font-variant-numeric:tabular-nums; }
table.ranking td:last-child { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--aqua-deep); }
table.ranking tr.me { background:rgba(255,60,175,.14); box-shadow:inset 0 0 0 1px var(--yellow); }
table.ranking tr.me td { font-weight:800; color:var(--yellow-deep); }
.ops { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---- マイページ ---- */
.badges { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.badge { border:1px solid var(--aqua); border-radius:999px; padding:.4rem .9rem;
  background:rgba(45,226,255,.06); box-shadow:var(--glow-cyan);
  display:inline-flex; align-items:center; gap:.4rem; }
.badge small { color:var(--mut); font-family:var(--font-mono); }
.game-history { margin:1.4rem 0; }
.game-history h3 small { font-family:var(--font-mono); font-weight:400; font-size:.8rem; color:var(--mut); margin-left:.6rem; }

/* ---- ランキング(feature 009: ランキングハブ) ----
   既存トークン(ネオンシアン=通常 / マゼンタ=自分・1位)をそのまま使う。
   1位はマゼンタ、2位はシアン、3位はパープルで格付けを色でも伝える。 */
h1 .mark { color:var(--yellow); text-shadow:var(--glow-mag); }

.rank-hero { padding:1.4rem 0 .4rem; }
.rank-hero .eyebrow { font-family:var(--font-display); font-style:italic; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.22em; color:var(--aqua-deep); margin:0 0 .3rem;
  text-shadow:var(--glow-cyan); }
.rank-hero h1 { font-size:clamp(1.5rem, 5vw, 2.2rem); margin:0 0 .5rem; }
.rank-hero .lead { color:var(--mut); font-size:.92rem; max-width:62ch; margin:0; }
.rank-hero .lead strong { color:var(--aqua-deep); }

.sec-link { font-size:.78rem; font-weight:700; white-space:nowrap; }
.empty { color:var(--mut); background:var(--panel); border:1px dashed var(--line);
  border-radius:var(--radius); padding:1rem 1.2rem; }

/* 表彰台(1〜3位)。DOM は 1,2,3 の順のまま、表示だけ 2-1-3 に並べ替える。 */
.podium { list-style:none; padding:0; margin:1.1rem 0 1.3rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem; align-items:end; }
.podium li { display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center;
  border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:1rem .7rem .9rem; }
.podium .p1 { order:2; border-color:var(--yellow); box-shadow:var(--glow-mag); padding:1.5rem .7rem 1.3rem; }
.podium .p2 { order:1; border-color:var(--aqua); box-shadow:0 0 14px rgba(45,226,255,.35); }
.podium .p3 { order:3; border-color:#7c4dff; box-shadow:0 0 14px rgba(124,77,255,.35); }
.podium .crown { font-size:1.3rem; line-height:1; }
.podium .pos { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; color:var(--mut); }
.podium .who { font-weight:800; font-size:.98rem; word-break:break-all; line-height:1.3; }
.podium .val { font-family:var(--font-mono); font-size:1.45rem; font-weight:800; color:var(--aqua-deep);
  text-shadow:var(--glow-cyan); font-variant-numeric:tabular-nums; line-height:1.2; }
.podium .p1 .val { color:var(--yellow-deep); text-shadow:var(--glow-mag); font-size:1.75rem; }
.podium .val small { font-size:.62rem; margin-left:.15rem; color:var(--mut); text-shadow:none; }
.podium .sub { font-size:.68rem; color:var(--mut); font-family:var(--font-mono); }
.podium li.me { outline:2px dashed var(--yellow); outline-offset:3px; }

/* ランキング表の追加列(スコア/ポイントは3列目、以降は補助情報) */
table.ranking th.num, table.ranking th:nth-child(3) { text-align:right; }
table.ranking td:nth-child(3) { text-align:right; font-weight:700; color:var(--aqua-deep);
  font-variant-numeric:tabular-nums; }
table.ranking td.num { text-align:right; width:4.6rem; color:var(--mut); font-weight:400; }
table.ranking tr.me td:nth-child(3) { color:var(--yellow-deep); }
table.ranking tr.gap td { text-align:center; color:var(--mut); letter-spacing:.4em; padding:.15rem; }

.rank-sub { color:var(--mut); font-family:var(--font-mono); font-size:.85rem; margin:.1rem 0 0; }
.rank-sub b { color:var(--aqua-deep); }
.rank-sub b.mine { color:var(--yellow-deep); text-shadow:var(--glow-mag); }

.rank-note { margin:.8rem 0 0; font-size:.72rem; color:var(--mut); font-family:var(--font-mono);
  display:flex; flex-wrap:wrap; gap:.15rem .8rem; }
.rank-note b { color:var(--aqua-deep); font-weight:700; }
.rank-note .muted { opacity:.75; }

.rank-chip { display:inline-block; font-family:var(--font-mono); font-size:.74rem; color:var(--yellow-deep);
  border:1px solid var(--yellow); border-radius:999px; padding:.02rem .6rem; margin-left:.5rem;
  box-shadow:0 0 10px rgba(255,60,175,.25); white-space:nowrap; }

/* ゲーム別トップ3のカード */
.rank-cards { list-style:none; padding:0; margin:1.1rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
.rank-card { border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:1rem 1.1rem .9rem; transition:border-color .15s, box-shadow .15s; }
.rank-card:hover { border-color:var(--aqua); box-shadow:0 0 18px rgba(45,226,255,.18); }
.rank-card h3 { margin:0 0 .6rem; font-size:1.02rem; }
.rank-card .mini { list-style:none; padding:0; margin:0 0 .7rem; display:flex; flex-direction:column; gap:.28rem; }
.rank-card .mini li { display:flex; align-items:baseline; gap:.5rem; font-size:.85rem; }
.rank-card .mini .pos { width:1.2rem; text-align:right; font-family:var(--font-mono); color:var(--mut); }
.rank-card .mini li:first-child .pos { color:var(--yellow); font-weight:800; }
.rank-card .mini .who { flex:1; word-break:break-all; }
.rank-card .mini .val { font-family:var(--font-mono); color:var(--aqua-deep); font-weight:700;
  font-variant-numeric:tabular-nums; }
.rank-card .mini li.me .who { color:var(--yellow-deep); font-weight:800; }
.rank-card .foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  border-top:1px solid var(--line); padding-top:.6rem; }
.rank-card .foot .players { font-size:.74rem; color:var(--mut); font-family:var(--font-mono); }
.rank-card .foot .players b { color:var(--aqua-deep); font-weight:700; }
.rank-card .foot .go { font-size:.74rem; font-weight:800; white-space:nowrap; }

@media (max-width:560px) {
  .podium { gap:.5rem; }
  .podium li { padding:.75rem .35rem; }
  .podium .p1 { padding:1.05rem .35rem .9rem; }
  .podium .who { font-size:.8rem; }
  .podium .val { font-size:1.1rem; }
  .podium .p1 .val { font-size:1.3rem; }
  table.ranking td.num { width:3.4rem; font-size:.8rem; }
}

/* ============================================================
   UI キット(app/assets/images/*.png)の適用
   ── 配布されたネオン UI 素材を、既存クラスの「装飾」として重ねる層。
      ・素材はすべて背景画像として使う(意味は持たせない)。文字色・枠・
        フォーカスリングは上のトークンで担保するので、画像が落ちても情報は残る。
      ・角が斜めに切られた素材は background-size:100% 100% で伸ばす。中央が
        平坦な意匠なので、多少アスペクトがずれても崩れない。
      ・素材が無い/意味が合わない箇所(検索欄・ページャ・トグル)は従来の CSS のまま。
   ============================================================ */

/* ---- アイコンプレート(02〜06 / 27〜29) ---- */
.ico { display:inline-block; width:1.5em; height:1.5em; flex:0 0 auto;
  vertical-align:-.4em; background:no-repeat center/contain; }
.ico-home    { background-image:url("/assets/02_icon_home-7fa5d26f.png"); }
.ico-gamepad { background-image:url("/assets/03_icon_gamepad-09dc319a.png"); }
.ico-heart   { background-image:url("/assets/04_icon_heart-35f308ce.png"); }
.ico-trophy  { background-image:url("/assets/05_icon_trophy-e96f9f7c.png"); }
.ico-profile { background-image:url("/assets/06_icon_profile-9dc88441.png"); }
.ico-plus    { background-image:url("/assets/27_icon_plus-364c9971.png"); }

/* ---- ヘッダー: 上部バー(00) ----
   nav 自体の背景に敷く。左右端の装飾が nav の両端に来るよう 100% 100% で伸ばし、
   ロゴ・リンクが装飾に重ならないよう左右パディングを広げる。 */
.site-header nav {
  background:url("/assets/00_bar_header_top-bf11e033.png") no-repeat center/100% 100%;
  padding:.9rem 2.2rem; gap:.5rem 1.1rem;
}
.site-header:after { display:none; } /* バー画像自体が下端の見切り線を持つ */
.site-header nav a { display:inline-flex; align-items:center; gap:.4rem; }
.site-header nav .ico { width:1.5rem; height:1.5rem; }
/* バー右側にテック模様が入るので、ラベルは明るめ＋暗いハローで浮かせる */
.site-header nav a:not(.brand):not(.btn), .site-header .linklike {
  color:#cfd5ff; text-shadow:0 1px 3px rgba(4,3,12,.95), 0 0 9px rgba(4,3,12,.85); }
.site-header .user { text-shadow:0 1px 3px rgba(4,3,12,.95); }
@media (max-width:560px){
  .site-header nav { padding:.75rem 1.1rem; background-size:100% 100%; }
}

/* ---- トップ: ヒーローバナー(07) ----
   バナーは右側にコントローラの絵、左側が空いている意匠。テキストは左 56% に収め、
   左からの暗幕グラデを重ねて可読性を確保する。 */
.hero {
  grid-template-columns:1fr; align-content:center; gap:.9rem;
  margin:1.2rem 0 .4rem; padding:clamp(1.2rem,3.6vw,2.4rem) clamp(1.3rem,4vw,2.6rem);
  aspect-ratio:702/307; min-height:12rem; max-height:21rem;
  background-image:
    linear-gradient(90deg, rgba(6,4,16,.9), rgba(6,4,16,.62) 42%, rgba(6,4,16,0) 70%),
    url("/assets/07_panel_hero_banner-1fd9eb58.png");
  background-repeat:no-repeat, no-repeat;
  background-position:center, center;
  background-size:100% 100%, 100% 100%;
}
.hero > * { max-width:min(56%, 30rem); }
.hero h1 { white-space:normal; font-size:clamp(1.3rem, 4.2vw, 2.2rem); }
.hero p.lead { font-size:.88rem; }
@media (max-width:900px){
  /* SP: 絵の上に文字が乗るので、アスペクト固定をやめて暗幕を強める */
  .hero { aspect-ratio:auto; max-height:none; padding:1.4rem 1.2rem;
    background-image:
      linear-gradient(180deg, rgba(6,4,16,.82), rgba(6,4,16,.88)),
      url("/assets/07_panel_hero_banner-1fd9eb58.png");
    background-size:100% 100%, cover; }
  .hero > * { max-width:100%; }
}

/* ---- セクション見出しのチップ(30/31) ---- */
.sec .count, .sec-link {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem 1.05rem; border:0; box-shadow:none;
  background:no-repeat center/100% 100%;
}
.sec .count { background-image:url("/assets/31_frame_small_02-75770507.png"); color:var(--aqua-deep); padding:.45rem 1.6rem; }
.sec-link { background-image:url("/assets/30_frame_small_01-25754734.png"); color:var(--yellow-deep);
  text-shadow:0 0 8px rgba(255,60,175,.5); }
.sec-link:hover { text-decoration:none; filter:brightness(1.15); }
.sec-link .ico { width:1.15rem; height:1.15rem; }

/* ---- 自己ベスト帯(17) ---- */
.best { border:0; border-left:0; box-shadow:none; border-radius:0;
  padding:.9rem 1.9rem; min-height:3.1rem; display:inline-flex; align-items:center;
  flex-wrap:wrap; gap:.4rem;
  background:url("/assets/17_bar_wide_dark-0c360ad3.png") no-repeat center/100% 100%; }

/* ---- 画像ボタン(09/10) ----
   素材に ▶ / ❯ が描き込まれているので、テキスト側の絵文字は外し、
   右側に矢印ぶんのパディングを空ける。サイズは素材比(414:119)に合わせる。 */
.btn-img {
  display:inline-flex; align-items:center;
  width:13.2rem; height:3.8rem; padding:0 3.6rem 0 1.5rem;
  background:no-repeat center/100% 100%;
  font-family:var(--font-display); font-weight:800; font-size:.88rem;
  letter-spacing:.03em; line-height:1.2; border:0; cursor:pointer;
}
.btn-img:hover { text-decoration:none; filter:brightness(1.15); }
.btn-img.play  { background-image:url("/assets/09_btn_gradient_play-00374352.png"); color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.65); }
.btn-img.arrow { background-image:url("/assets/10_btn_outline_arrow-e6ab4816.png"); color:var(--aqua-deep);
  text-shadow:var(--glow-cyan); }

/* ---- フラッシュ / 記録状態(28/29) ---- */
.flash { display:flex; align-items:center; gap:.6rem; }
.flash::before { content:""; width:1.4rem; height:1.4rem; flex:0 0 auto;
  background:no-repeat center/contain; }
.flash.notice::before { background-image:url("/assets/29_icon_check-2d799ea2.png"); }
.flash.alert::before  { background-image:url("/assets/28_icon_close-7f6c6822.png"); }
/* 既存の .play-status.on/.off .dot が background ショートハンドを持つので、
   同じ詳細度(0,3,0)で上書きしないと repeat/position が初期値に戻ってしまう。 */
.play-status.on .dot, .play-status.off .dot {
  width:1.35rem; height:1.35rem; border-radius:0; box-shadow:none;
  background:no-repeat center/contain; }
.play-status.on .dot  { background-image:url("/assets/29_icon_check-2d799ea2.png"); }
.play-status.off .dot { background-image:url("/assets/28_icon_close-7f6c6822.png"); }

/* ---- ランキング: 表彰台(05 / 21〜23) ----
   1位の王冠を trophy プレートに差し替え、順位ラベルの前に色スウォッチを置く。 */
.rank-hero .eyebrow { display:flex; align-items:center; gap:.45rem; }
.rank-hero .eyebrow::before { content:""; width:1.35rem; height:1.15rem; flex:0 0 auto;
  background:url("/assets/05_icon_trophy-e96f9f7c.png") no-repeat center/contain; }
.podium .p1 .crown { font-size:0; width:2.3rem; height:1.9rem;
  background:url("/assets/05_icon_trophy-e96f9f7c.png") no-repeat center/contain;
  filter:drop-shadow(0 0 9px rgba(255,60,175,.8)); }
.podium .pos { display:inline-flex; align-items:center; gap:.35rem; }
.podium .pos::before { content:""; width:.6rem; height:.6rem; flex:0 0 auto;
  background:no-repeat center/contain; }
.podium .p1 .pos::before { background-image:url("/assets/23_swatch_pink-2ece9d98.png"); }
.podium .p2 .pos::before { background-image:url("/assets/22_swatch_cyan-49a541b7.png"); }
.podium .p3 .pos::before { background-image:url("/assets/21_swatch_purple-8f77d27c.png"); }

/* ---- 順位チップ(33) ---- */
.rank-chip { border:0; box-shadow:none; border-radius:0;
  padding:.34rem 1rem; line-height:1.4;
  background:url("/assets/33_frame_small_04-91d6385c.png") no-repeat center/100% 100%; }

/* ---- SP: 見出し行のチップは折り返す ----
   h2 + チップ2つは狭い画面で 1 行に収まらないので、見出し行と分ける。 */
@media (max-width:640px){
  .sec { flex-wrap:wrap; gap:.55rem .8rem; }
  .sec .rule { flex:1 0 1.5rem; }
  .sec .count { padding:.4rem 1.15rem; }
  .sec-link { padding:.4rem 1.05rem; }
}