* { box-sizing: border-box; }
:root { color-scheme: dark; --panel: rgba(22,25,31,.88); --panel-2: rgba(38,43,52,.92); --line: rgba(255,255,255,.16); --text:#f7f4ed; --muted:#c9c1b4; }
body { margin:0; min-height:100vh; overflow-x:hidden; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:linear-gradient(135deg,rgba(242,193,78,.12),transparent 38%),linear-gradient(210deg,rgba(96,165,250,.16),transparent 44%),#11151d; }
button { border:0; cursor:pointer; font-weight:800; letter-spacing:0; transition:transform 140ms ease, opacity 140ms ease, filter 140ms ease; }
button:active { transform:translateY(1px) scale(.99); }
button:disabled { cursor:not-allowed; opacity:.45; filter:grayscale(.35); }
.wrap { width:min(980px, calc(100vw - 28px)); margin:0 auto; padding:16px 0 22px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 18px 55px rgba(0,0,0,.28); }
h1 { margin:0; font-size:clamp(1.45rem,3vw,2.3rem); letter-spacing:0; }
p { margin:0; }
.top p { margin-top:4px; color:var(--muted); font-size:.95rem; line-height:1.35; }
#restartBtn, #rewardBtn { min-height:44px; padding:0 16px; border-radius:8px; color:#19140b; background:linear-gradient(135deg,#f2c14e,#f97316); box-shadow:0 12px 28px rgba(242,193,78,.18); }
.hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:10px 0; }
.chip { min-height:56px; padding:10px 13px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); display:flex; align-items:center; justify-content:space-between; }
.chip span { color:var(--muted); font-size:.8rem; font-weight:800; }
.chip strong { color:#fff; font-size:1.25rem; }
.reward-bar { display:grid; grid-template-columns:minmax(230px,.58fr) 1fr; gap:12px; align-items:center; margin-bottom:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(17,21,29,.84); }
#rewardBtn { color:#06121f; background:linear-gradient(135deg,#60a5fa,#2dd4bf); }
.reward-note, .status { color:#ece5d8; font-weight:800; line-height:1.45; }
.stage-shell { overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:#181b22; box-shadow:0 24px 80px rgba(0,0,0,.38); }
#game-stage { width:100%; aspect-ratio:10/13; min-height:660px; }
#game-stage canvas { display:block; width:100%; height:100%; }
.status { min-height:28px; margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
@media (max-width:720px) { .wrap{width:min(100vw - 16px,680px); padding-top:8px;} .top{align-items:flex-start; padding:12px;} #restartBtn{min-height:38px; padding:0 12px;} .hud{grid-template-columns:repeat(2,minmax(0,1fr));} .chip{min-height:48px;} .reward-bar{grid-template-columns:1fr;} #game-stage{min-height:560px; aspect-ratio:9/14;} }

.play-embedded-fullscreen body, body.play-embedded-fullscreen { min-height: 100dvh; overflow: hidden; }
.play-embedded-fullscreen .wrap { width: 100vw; height: 100vh; height: 100dvh; padding: 8px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 6px; }
.play-embedded-fullscreen .top { padding: 8px 10px; }
.play-embedded-fullscreen .top p { display: none; }
.play-embedded-fullscreen h1 { font-size: clamp(1.05rem, 2.2vw, 1.45rem); }
.play-embedded-fullscreen #restartBtn, .play-embedded-fullscreen #rewardBtn { min-height: 34px; padding: 0 10px; }
.play-embedded-fullscreen .hud { margin: 0; gap: 6px; }
.play-embedded-fullscreen .chip { min-height: 38px; padding: 6px 9px; }
.play-embedded-fullscreen .chip strong { font-size: 1rem; }
.play-embedded-fullscreen .reward-bar { margin: 0; padding: 7px; gap: 8px; }
.play-embedded-fullscreen .reward-note { font-size: 0.78rem; }
.play-embedded-fullscreen .stage-shell { min-height: 0; }
.play-embedded-fullscreen #game-stage { height: 100%; min-height: 0; aspect-ratio: auto; }
.play-embedded-fullscreen .status { margin: 0; min-height: 0; padding: 7px 9px; font-size: 0.82rem; }
@media (max-width: 720px) { .play-embedded-fullscreen .wrap { padding: 6px; gap: 5px; } .play-embedded-fullscreen .top { padding: 7px 8px; } .play-embedded-fullscreen .hud { grid-template-columns: repeat(4, minmax(0, 1fr)); } .play-embedded-fullscreen .chip { min-height: 34px; padding: 5px 6px; flex-direction: column; align-items: flex-start; } .play-embedded-fullscreen .chip span { font-size: 0.68rem; } .play-embedded-fullscreen .chip strong { font-size: 0.9rem; } .play-embedded-fullscreen .reward-bar { grid-template-columns: 1fr; } .play-embedded-fullscreen .reward-note { display: none; } }