:root{color-scheme:dark;--bg:#0d0f16;--panel:#151925f2;--line:#39415a;--accent:#ff6b5e;--gold:#ffd166;--text:#eef1f8;--muted:#9aa3b8;--bar:52px;font-family:Inter,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 0,#1c2133 0,var(--bg) 60%);color:var(--text);overscroll-behavior:none}
body{overflow:hidden}
button{font:inherit;color:inherit}
.topbar{height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(16px,calc((100vw - 1280px)/2));border-bottom:1px solid #ffffff10;background:#090b11cc}
.brand{color:var(--text);text-decoration:none;letter-spacing:.12em;font-size:13px;white-space:nowrap}
.brand b{color:var(--accent)}
.reward-line{margin:0;min-height:1.2em;font-size:13px;font-weight:700;color:var(--gold);text-align:right}
.topbar-side{display:flex;align-items:center;gap:12px;min-width:0}
/* 전체화면 단추: 게임 화면 왼쪽 위, 게임 HUD 의 코인 줄 아래 빈자리(게임 좌표 x 14 · y 80 쯤). 손가락으로 누를 수 있게 36px 이상. */
.fs-button{position:absolute;z-index:4;left:1.1%;top:11%;width:clamp(36px,4.4%,52px);aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid #ffffff38;border-radius:8px;background:#05070cb3;color:#eef1f8;cursor:pointer;touch-action:manipulation}
.fs-button svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fs-button:hover,.fs-button:focus-visible{border-color:var(--accent);outline:none}
.fs-button .fs-exit,.fs-button[aria-pressed="true"] .fs-enter{display:none}
.fs-button[aria-pressed="true"] .fs-exit{display:block}
/* 몰입 중(진짜 전체 화면 · 아이폰 고정 화면 · 홈 화면 앱 — 공통 몰입 모듈의 html.game-immersive): 위 띠도 숨기고 테두리 · 여백 없이 꽉 채운다(끄는 단추는 게임 화면 안에 있다) */
.game-immersive{--bar:0px}
.game-immersive body{background:#000}
.game-immersive .topbar{display:none}
.game-immersive main{padding:0}
.game-immersive .frame{width:min(100vw,calc(100vh*16/9));width:min(100vw,calc(100dvh*16/9));border:0;border-radius:0;box-shadow:none}
.game-immersive .reward-toast{display:block}
/* 아이폰 고정 화면(html.game-pseudo — 웹 전체 화면이 없다): 게임을 보이는 화면에 고정해 꽉 채우고, 문서를 살짝 길게 만들어
   위로 쓸어 올리면 브라우저가 주소창 · 아래 막대를 접게 한다. 게임 화면 위의 손가락은 스크롤하지 않는다(touch-action:none). */
html.game-pseudo{height:auto}
.game-pseudo body{height:auto;min-height:calc(100vh + 160px);overflow:visible}
.game-pseudo main{position:fixed;inset:0;z-index:6;height:auto;padding:0;background:#000}
.swipe-hint{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:20px;background:#000000b8;text-align:center;touch-action:pan-y}
.swipe-hint b{display:block;margin-bottom:6px;font-size:20px;color:var(--gold);animation:swipe-up 1.1s ease-in-out infinite}
.swipe-hint span{display:block;color:var(--text);font-size:13px}
.swipe-hint small{display:block;margin-top:10px;color:var(--muted);font-size:12px;line-height:1.45}
@keyframes swipe-up{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}}
.home-hint{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--gold)}
/* 앱 안 브라우저(네이버 · 카카오톡 …) 안내: 그 앱의 메뉴는 숨길 수 없어 크롬 · 사파리로 여는 단추(또는 주소 복사) */
.app-tip{display:grid;gap:6px;justify-items:center;margin:10px 0 0;padding:8px 10px;border:1px solid #ffd16655;border-radius:8px;background:#0a0c12cc;font-size:12px;line-height:1.45;color:var(--gold)}
.app-tip button{padding:6px 14px;border:1px solid var(--line);border-radius:6px;background:#1c2133;color:var(--text);font-size:12px;font-weight:800;cursor:pointer}
main{height:calc(100% - var(--bar));display:grid;place-items:center;padding:10px}
/* 게임 화면은 16:9. 남는 높이 · 너비 가운데 작은 쪽에 맞춘다. */
.frame{position:relative;aspect-ratio:16/9;width:min(100%,calc((100vh - var(--bar) - 20px)*16/9));overflow:hidden;border:1px solid #2c3348;border-radius:10px;background:#000;box-shadow:0 18px 70px #000a;touch-action:none}
canvas{display:block;width:100%;height:100%;outline:none}

.overlay{position:absolute;inset:0;display:none;place-items:center;padding:16px;background:#080a10e6;overflow:auto}
.overlay.visible{display:grid}
.panel{width:min(560px,100%);padding:26px 28px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:center}
.eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.2em;color:var(--muted)}
h1{margin:0;font-size:clamp(30px,5.2vw,54px);line-height:1;letter-spacing:.04em}
h1 span{color:var(--accent)}
.tagline{margin:10px 0 18px;font-size:12px;letter-spacing:.24em;color:var(--muted)}
.record{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:16px}
.record span{font-size:11px;letter-spacing:.18em;color:var(--muted)}
.record b{font-size:22px;color:var(--gold)}
.record small{color:var(--muted)}
.bar{height:6px;border-radius:3px;background:#0a0c12;border:1px solid #ffffff1c;overflow:hidden;margin-bottom:12px}
.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#b8433a,var(--accent));transition:width .15s linear}
.primary{width:100%;padding:13px 16px;border:0;border-radius:8px;background:var(--accent);color:#1a0d0b;font-size:16px;font-weight:900;letter-spacing:.1em;cursor:pointer}
.primary:disabled{background:#2a3044;color:var(--muted);cursor:default;letter-spacing:.02em;font-weight:700}
.primary kbd{margin-left:8px;padding:2px 6px;border-radius:4px;background:#0003;font:inherit;font-size:11px}
.load-note{min-height:1.3em;margin:8px 0 0;font-size:12px;color:var(--muted)}
.load-note.error{color:var(--accent)}
.help{display:grid;gap:6px;margin-top:14px;text-align:left;font-size:12.5px;line-height:1.45;color:#c9d0e0}
.help b{display:inline-block;min-width:46px;color:var(--gold);font-size:11px;letter-spacing:.1em}

@media(max-width:640px){.panel{padding:18px 16px}.help{font-size:12px}.reward-line{font-size:12px}}

/* 포인트 문구: 위 띠가 없는 화면(휴대폰 가로)에서는 게임 화면 위쪽에 띄운다 */
.reward-toast{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;margin:0;padding:4px 12px;border-radius:999px;background:#000b;color:var(--gold);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none}
.reward-toast:empty{display:none!important}
.back-link{display:none;margin-bottom:6px;color:var(--muted);font-size:12px;text-decoration:none}
/* 휴대폰 세로: 가로로 돌려 달라고 한다(게임은 뒤에서 그대로 불러온다) */
.rotate{display:none;position:absolute;inset:0;z-index:5;place-items:center;padding:20px;background:#080a10f5;text-align:center}
.rotate b{display:block;margin-bottom:6px;font-size:17px}
.rotate span{color:var(--muted);font-size:13px}
@media(orientation:portrait) and (max-width:820px){.rotate{display:grid}}
/* 휴대폰 가로: 위 띠를 숨기고 게임이 화면을 꽉 채운다 */
@media(orientation:landscape) and (max-height:560px){
  :root{--bar:0px}
  .topbar{display:none}
  main{padding:0}
  .frame{width:min(100vw,calc(100vh*16/9));width:min(100vw,calc(100dvh*16/9));border:0;border-radius:0}
  .reward-toast{display:block}
  .back-link{display:inline-block}
  .panel{padding:10px 16px}
  .eyebrow{display:none}
  h1{font-size:26px}
  .tagline{margin:4px 0 8px}
  .record{margin-bottom:8px}
  .primary{padding:10px 16px}
  .help{margin-top:8px}
  .help span{display:none}
  .help .help-touch{display:block}
}