/* Fullerene Spin — 土台はリバーシと共通（../fullerene-reversi/style.css）。ここは Spin だけの部分 */

/* ── 対局中の上の表示（レベル・揃った線・タイム） ── */
#hud { grid-template-columns: auto 1fr auto; align-items: stretch; }
.pill {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  padding: 6px 12px; border-radius: 12px; min-width: 0;
  background: var(--panel); border: 1px solid var(--panel-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill.lv { font: 700 18px var(--serif); color: var(--gold); }
.pill.lit { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 4px; position: relative; padding-bottom: 10px; }
.pill.lit b { font: 700 20px/1 var(--serif); }
.pill.lit small, .pill.time small { font-size: 11px; color: var(--ink-dim); }
.litbar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.litbar > div { height: 100%; background: linear-gradient(90deg, #ff4d4d, #ffd23f, #33d17a, #3d7bff); transition: width .3s; }
.pill.time b { font: 700 18px/1 var(--serif); }

#countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4; pointer-events: none;
  font: 800 min(36cqw, 160px)/1 var(--serif); color: #f3d58a;
  text-shadow: 0 3px 0 #9a6f22, 0 10px 30px rgba(0,0,0,.6);
}
#countdown.tick { animation: count .8s ease-out both; }
@keyframes count { from { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } to { transform: scale(.85); opacity: 0; } }

#bottom { padding-top: 24px; }
#actions .btn { min-height: 44px; padding: 0 14px; }
#actions .btn.icon { font-size: 20px; padding: 0 12px; }
#actions .btn.lock.on { border-color: var(--gold); color: #fff3cf; background: linear-gradient(#5b4517, #3a2b0c); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(233,196,106,.45); }
.btn.ad::before { content: "▶"; display: inline-block; font-size: 10px; margin-right: 6px; padding: 2px 5px; border-radius: 4px; background: var(--gold); color: #2a1d05; vertical-align: 2px; }
@media (max-width: 380px) { #actions { gap: 6px; } #actions .btn { padding: 0 10px; font-size: 14px; } }

/* ── ホーム ── */
.progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.progress .bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress .bar > div { height: 100%; background: linear-gradient(90deg, var(--emerald), var(--gold)); }
.home-bottom .btn.big.ghost { font-size: 16px; min-height: 46px; }

/* ── レベル選択 ── */
.levels { display: grid; gap: 10px; }
.levels-note { font-size: 13px; color: var(--ink-dim); }
.level-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-height: min(58dvh, 480px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.lv {
  position: relative; aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(#2a3a33, #17231e); border: 1px solid var(--panel-line);
  font: 600 clamp(11px, 3.4cqw, 14px)/1 var(--sans); font-variant-numeric: tabular-nums;
}
.lv i { font-style: normal; font-size: 9px; line-height: 1; min-height: 9px; margin-top: 2px; color: var(--emerald); }
.lv.cleared { background: linear-gradient(#245a3f, #133524); border-color: rgba(46,232,138,.45); }
.lv.next { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(233,196,106,.45); }
.lv.locked { opacity: .35; cursor: default; }
.lv:not(:disabled):hover { filter: brightness(1.15); }

/* ── レベル情報 ── */
.level-info { display: grid; gap: 10px; text-align: center; }
.li-big { font: 800 34px var(--serif); color: #f3d58a; text-shadow: 0 2px 0 #9a6f22; }
.li-big small { font: 600 13px var(--sans); color: var(--emerald); text-shadow: none; vertical-align: middle; }
.li-meta { font-size: 13px; color: var(--ink-dim); }
.cdots { display: inline-flex; gap: 3px; vertical-align: -1px; }
.cdots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 -2px 2px rgba(0,0,0,.3); }
.li-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.li-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--panel-line); }
.li-stats span { font-size: 12px; color: var(--ink-dim); }
.li-stats b { font: 700 20px var(--serif); font-variant-numeric: tabular-nums; }
.li-stats small { font-size: 12px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-note { font-size: 13px; color: var(--ink-dim); }

/* ── 結果 ── */
.res-lv { color: var(--ink-dim); font-size: 14px; }
.res-time { font: 800 44px/1.1 var(--serif); font-variant-numeric: tabular-nums; margin-top: 8px; }
.res-best { min-height: 1.4em; color: var(--silver-dim); font-size: 14px; }
.res-best.new { color: #ffc40a; font-weight: 700; font-size: 16px; animation: pop .4s cubic-bezier(.2,1.4,.4,1); }
.res-note { margin-top: 8px; font-size: 13px; color: var(--ink-dim); white-space: pre-line; }
.res-register { margin-top: 10px; width: 100%; }
#toast { white-space: pre-line; }

.rank-row.spin { grid-template-columns: 34px 1fr auto; }
#coach { top: 76px; }

/* ── ホーム: デイリーとレベル選択の 2 つ並び ── */
.home-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.home-pair .btn { min-height: 52px; }
.btn.daily { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; padding: 6px; }
.btn.daily small { font-weight: 400; font-size: 11px; color: var(--gold); }
.btn.daily.fresh { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(233,196,106,.35); }
.btn.daily.fresh::after { content: "NEW"; position: absolute; transform: translate(62px, -22px); font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 99px; background: #ff4d6d; color: #fff; }
.btn.daily { position: relative; }
.li-note { white-space: pre-line; }

/* ── 結果のシェア・列の先行解放 ── */
.share-bar { display: flex; gap: 8px; margin-top: 10px; }
.share-bar .btn { flex: 1; }
.btn.share.x { background: #000; border-color: #444; color: #fff; }
.btn.share.x::before { content: none; }
.btn.share { background: linear-gradient(#1d2a33, #0f171d); border-color: #4a5a66; }
.btn.share::before { content: "↗"; margin-right: 6px; color: var(--gold); }
.btn.row-unlock { width: 100%; }

/* ── 着せ替え ── */
.spin-skins .skin-grid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.pal { display: grid; grid-template-columns: 1fr 1fr; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.2); }
.pal i { display: block; }
.bgsw { width: 46px; height: 46px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.2); }
.skin-tile.locked .pal, .skin-tile.locked .bgsw { filter: saturate(.55) brightness(.8); }

/* ── 背景の着せ替え ── */
#stage[data-bg="space"] { background: radial-gradient(120% 70% at 50% 42%, #2b3a7a 0%, #0d1335 55%, #03050f 100%); }
#stage[data-bg="space"]::before { opacity: .9; mix-blend-mode: normal;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 72%, #cfe0ff, transparent), radial-gradient(1px 1px at 88% 64%, #fff, transparent),
    radial-gradient(1px 1px at 55% 35%, #fff, transparent), radial-gradient(1.5px 1.5px at 8% 88%, #fff, transparent),
    radial-gradient(1px 1px at 66% 90%, #cfe0ff, transparent), radial-gradient(1px 1px at 42% 8%, #fff, transparent); }
#stage[data-bg="wood"] { background: radial-gradient(120% 70% at 50% 42%, #a8743f 0%, #6b4220 55%, #2e1a0b 100%); }
#stage[data-bg="wood"]::before { opacity: .25; background-image: repeating-linear-gradient(92deg, rgba(0,0,0,.25) 0 2px, transparent 2px 9px, rgba(255,255,255,.08) 9px 10px, transparent 10px 23px); }
#stage[data-bg="sakura"] { background: radial-gradient(120% 70% at 50% 42%, #a8457a 0%, #4a1838 55%, #1a0814 100%); }
#stage[data-bg="sakura"]::before { opacity: .7; mix-blend-mode: normal;
  background-image: radial-gradient(4px 3px at 15% 20%, #ffd1e3, transparent), radial-gradient(3px 4px at 80% 30%, #ffc0d9, transparent),
    radial-gradient(4px 3px at 35% 85%, #ffd1e3, transparent), radial-gradient(3px 3px at 90% 80%, #ffe3ee, transparent),
    radial-gradient(4px 3px at 60% 12%, #ffc0d9, transparent), radial-gradient(3px 4px at 6% 60%, #ffd1e3, transparent); }
#stage[data-bg="lab"] { background: radial-gradient(120% 70% at 50% 42%, #e9eef2 0%, #b7c3cc 55%, #6f7f8b 100%); }
#stage[data-bg="lab"]::before { opacity: .35; background-image: linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px); background-size: 24px 24px; mix-blend-mode: normal; }
#stage[data-bg="lab"] .tagline, #stage[data-bg="lab"] .link { color: #2a3a44; text-shadow: none; }

/* ── 着せ替え: 質感の見本・解放数 ── */
.pal { position: relative; }
.pal .fin { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.pal .fin-matte { background: rgba(0,0,0,.12) !important; }
.pal .fin-glow { box-shadow: 0 0 14px 2px rgba(255,255,255,.55); }
.skin-count { text-align: right; font-size: 12px; color: var(--ink-dim); }
.spin-skins .skin-grid { max-height: min(48dvh, 420px); overflow-y: auto; }

/* ── ランキング（ホームから） ── */
.rank-level { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--panel-line); background: rgba(0,0,0,.35); color: var(--ink); font-size: 15px; }
.rank-sub { font-size: 13px; color: var(--ink-dim); }

/* ── 追加の背景 ── */
#stage[data-bg="deep"] { background: radial-gradient(120% 70% at 50% 30%, #0e7c9a 0%, #063a5c 55%, #010d1a 100%); }
#stage[data-bg="deep"]::before { opacity: .35; mix-blend-mode: screen;
  background-image: radial-gradient(3px 3px at 20% 80%, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 24% 70%, rgba(255,255,255,.6), transparent),
    radial-gradient(4px 4px at 75% 85%, rgba(255,255,255,.6), transparent), radial-gradient(2px 2px at 78% 72%, rgba(255,255,255,.6), transparent),
    linear-gradient(170deg, rgba(255,255,255,.12), transparent 40%); }
#stage[data-bg="dusk"] { background: linear-gradient(#ff9a5a 0%, #c2456b 45%, #2b1a4a 100%); }
#stage[data-bg="dusk"]::before { opacity: .15; }
#stage[data-bg="snow"] { background: radial-gradient(120% 70% at 50% 42%, #ffffff 0%, #cfe3f5 55%, #7f9fbf 100%); }
#stage[data-bg="snow"]::before { opacity: .8; mix-blend-mode: normal;
  background-image: radial-gradient(3px 3px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 60%, #fff, transparent), radial-gradient(3px 3px at 70% 15%, #fff, transparent),
    radial-gradient(2px 2px at 85% 55%, #fff, transparent), radial-gradient(3px 3px at 50% 88%, #fff, transparent), radial-gradient(2px 2px at 15% 75%, #fff, transparent); }
#stage[data-bg="cyber"] { background: radial-gradient(120% 70% at 50% 42%, #0f3d2e 0%, #04170f 55%, #000 100%); }
#stage[data-bg="cyber"]::before { opacity: .5; mix-blend-mode: screen;
  background-image: linear-gradient(rgba(57,255,20,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,.12) 1px, transparent 1px); background-size: 28px 28px; }
#stage[data-bg="gold"] { background: linear-gradient(135deg, #f7e08a 0%, #c9a227 50%, #8a6a12 100%); }
#stage[data-bg="gold"]::before { opacity: .3; mix-blend-mode: multiply;
  background-image: linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px); background-size: 25% 100%; }
#stage[data-bg="snow"] .tagline, #stage[data-bg="snow"] .link, #stage[data-bg="gold"] .tagline, #stage[data-bg="gold"] .link { color: #2a3a44; text-shadow: none; }