:root{ --bg:#0f1225; --panel:#171b34; --ink:#eef2ff; --muted:#cfd8ff; --accent:#7aa2ff; --ok:#3ddc97; --ng:#ff6b6b; --slot:#0b1030; --chip:#0e1230; --bar:#7aa2ff; --bar-bg:#2a335f; --gap:12px; }
body.cb{ --bg:#0d1320; --panel:#121a2a; --ink:#ffffff; --muted:#d7e1ff; --accent:#f6a21a; --ok:#1fb2a6; --ng:#d64b4b; --slot:#0e1629; --chip:#101b33; --bar:#f6a21a; --bar-bg:#3a4157; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","BIZ UDPGothic",sans-serif;color:var(--ink);background:radial-gradient(1200px 800px at 70% -10%,#1f2450,var(--bg))}
.wrap{max-width:860px;margin:28px auto;padding:0 12px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05)}
.hidden{display:none}
.muted{margin:0 0 8px;color:var(--muted)}

/* 上部：左上にコンパクト統合表示 */
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.compactStats{display:flex;flex-direction:column;gap:6px;min-width:210px}
.statline{display:flex;justify-content:space-between;gap:10px;background:var(--chip);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:6px 10px;font-weight:800}
.subline{margin-top:2px;color:var(--muted);font-size:12px;display:flex;gap:8px;align-items:baseline}
.statline span{color:var(--muted);font-size:12px}
.statline strong{font-size:18px}
.timebar{height:12px;background:var(--bar-bg);border-radius:999px;overflow:hidden}
.timebar>span{display:block;height:100%;background:var(--bar);width:100%;transition:width .2s linear}
/* 残り10秒で点滅＆注意色 */
.warn>span{animation:pulse .6s ease-in-out infinite;background:var(--ng)}
@keyframes pulse{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}

/* 問題：7要素を横一列で収める */
.numsArea{position:relative;margin:8px 0}
.puzzleRow{display:flex;gap:var(--gap);align-items:center;justify-content:center;flex-wrap:nowrap;overflow:hidden;padding:6px}
.puzzleRow::-webkit-scrollbar{display:none}
.puzzleRow{scrollbar-width:none}
.chip,.slot{width:calc((100% - (6 * var(--gap))) / 7);height:clamp(50px,10.5vw,72px)}
.chip{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:var(--chip);border:1px solid rgba(255,255,255,.14);font-weight:900;font-size:clamp(20px,5vw,32px);letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.slot{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:var(--slot);border:2px dashed rgba(255,255,255,.28);color:#fff;font-size:clamp(20px,5vw,32px);font-weight:900;cursor:pointer;user-select:none;outline:none}
.slot.selected{outline:3px solid var(--accent);border-style:solid}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}
.key{display:inline-flex;align-items:center;justify-content:center;height:64px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.18);font-size:28px;font-weight:900;cursor:pointer}
.key:disabled{opacity:.4;cursor:not-allowed}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:10px}
.btn{height:46px;padding:0 16px;border-radius:12px;background:linear-gradient(180deg,var(--accent),#4f77ff00);border:1px solid rgba(255,255,255,.2);color:#07122e;font-weight:800;font-size:16px;cursor:pointer}
.btn.ghost{background:#121638;color:#eaf1ff;border:1px solid rgba(255,255,255,.18)}
.btn.start{height:56px;font-size:20px;padding:0 28px}

.status{min-height:22px;margin-top:8px;text-align:center;color:var(--muted);font-size:15px}

/* 成功アニメーション（◯） */
.celebrate{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
.celebrate.on{display:flex}
.circle{font-size:160px;line-height:1;color:var(--ok);opacity:0;transform:scale(.5);animation:pop .6s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:scale(.5)} 40%{opacity:1;transform:scale(1.05)} 100%{opacity:.9;transform:scale(1)}}

.note{margin-top:6px;color:var(--muted);font-size:13px;text-align:center}

/* スタート/結果/カウントダウン オーバーレイ */
.overlay{position:fixed;inset:0;background:rgba(5,8,24,.84);display:flex;align-items:center;justify-content:center;z-index:10}
.overlay .card{background:var(--panel);border:1px solid rgba(255,255,255,.18);padding:24px;border-radius:16px;max-width:520px;width:90%;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.overlay h2{margin:0 0 8px}
.countdown{font-size:72px;font-weight:900;margin:6px 0 12px;letter-spacing:.05em}
.result{margin:0 0 16px;font-weight:900}

/* スマホ最適 */
@media (max-width:460px){
  :root{ --gap:6px }
  .key{height:56px;font-size:24px}
  .btn{height:44px}
  .compactStats{min-width:180px}
  .statline strong{font-size:16px}
}
.rightControls{display:flex;gap:8px;align-items:center}