:root{
  --bg:#121415; --fg:#f1ece4; --muted:#9aa0a3; --accent:#EA660D; --accent-soft:rgba(234,102,13,.18);
  --panel:rgba(18,20,21,.78); --line:rgba(255,255,255,.1);
  --body:'Noto Sans KR',-apple-system,system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}

/* entry */
#entry{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#1d2022,#0d0f10 70%);padding:24px;transition:opacity .9s}
#entry.out{opacity:0;pointer-events:none}
.entry-card{display:grid;justify-items:center;gap:18px;text-align:center;max-width:360px;width:100%}
.entry-logo{width:min(60vw,200px);height:auto;color:var(--accent)}
.entry-sub{margin:0;color:var(--muted);letter-spacing:.04em}
.nick{display:grid;gap:6px;width:100%;text-align:left;font-size:12px;color:var(--muted);letter-spacing:.1em}
.nick input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);font:400 15px var(--body);letter-spacing:.02em}
.btn-primary{width:100%;padding:14px;border-radius:999px;background:var(--accent);color:#fff;font-weight:500;letter-spacing:.12em;transition:transform .15s,filter .15s}
.btn-primary:hover{filter:brightness(1.08)}.btn-primary:active{transform:scale(.98)}
.entry-foot{margin:0;font-size:12px;color:var(--muted);line-height:1.7}

/* hud */
#hud{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(12px + var(--sat)) max(14px,var(--sar)) 12px max(14px,var(--sal));pointer-events:none}
#hud>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px)}
.brand-mark{height:30px;width:auto;color:#fff;opacity:.95}
.brand-text{display:grid;line-height:1.15}
.brand-text b{font-weight:500;letter-spacing:.04em;font-size:14px}
.brand-text small{font-size:11px;color:var(--muted);letter-spacing:.08em}
.hud-right{display:flex;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:12px;color:var(--muted);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.pill b{color:var(--fg);font-weight:500}
.pill.btn{color:var(--fg)}
.pill.btn[aria-pressed="true"]{color:var(--muted);text-decoration:line-through}

#hint{position:fixed;left:0;right:0;top:calc(72px + var(--sat));text-align:center;font-size:12px;color:var(--muted);letter-spacing:.06em;pointer-events:none;z-index:9;transition:opacity .6s;padding:0 16px}
#hint.fade{opacity:0}

.bubble{position:fixed;left:50%;top:38%;transform:translateX(-50%);z-index:12;padding:10px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:14px;letter-spacing:.02em;max-width:min(90vw,420px);text-align:center;backdrop-filter:blur(8px);animation:pop .3s ease-out}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%)}}

/* menu */
#menu{position:fixed;left:0;right:0;bottom:0;z-index:12;padding:16px max(16px,var(--sar)) calc(18px + var(--sab)) max(16px,var(--sal));
  background:linear-gradient(180deg,transparent,rgba(12,14,15,.92) 32%);display:grid;gap:10px;justify-items:center}
#menu h3{margin:0;font-weight:400;font-size:14px;letter-spacing:.14em}
#menu h3 small{font-size:11px;color:var(--muted);letter-spacing:.04em;margin-left:8px}
.boosters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;width:min(100%,720px)}
.booster{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);display:grid;gap:3px;transition:border-color .15s,background .15s}
.booster:hover{border-color:var(--accent);background:var(--accent-soft)}
.booster b{font-weight:500;font-size:14px}
.booster span{font-size:12px;color:var(--muted)}
.booster i{font-style:normal;font-size:10px;color:var(--accent);letter-spacing:.1em}
.link{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* cooling */
#cool{position:fixed;left:0;right:0;bottom:0;z-index:12;text-align:center;padding:18px 16px calc(22px + var(--sab));display:grid;gap:6px;justify-items:center;
  background:linear-gradient(180deg,transparent,rgba(12,14,15,.85) 40%)}
.timer{font-size:clamp(34px,8vw,52px);letter-spacing:.1em;font-variant-numeric:tabular-nums;font-weight:300}
#cool p{margin:0;color:var(--muted);font-size:13px;letter-spacing:.06em}
.btn-ghost{margin-top:8px;padding:10px 22px;border-radius:999px;border:1px solid var(--line);font-size:13px;letter-spacing:.12em}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

#foot{position:fixed;right:max(14px,var(--sar));bottom:calc(14px + var(--sab));z-index:11}
.btn-kakao{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#FEE500;color:#191919;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.04em;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.btn-kakao::before{content:"";width:16px;height:16px;border-radius:50%;background:#191919;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7L5.8 21l4-2.6c.7.1 1.4.2 2.2.2 5.5 0 10-3.6 10-8S17.5 3 12 3z'/></svg>") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7L5.8 21l4-2.6c.7.1 1.4.2 2.2.2 5.5 0 10-3.6 10-8S17.5 3 12 3z'/></svg>") center/contain no-repeat}
body.lying #foot{display:none}

#toast{position:fixed;left:50%;bottom:calc(90px + var(--sab));transform:translateX(-50%);z-index:20;padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:12px;color:var(--muted)}

@media (max-width:480px){ .brand-text small{display:none} .pill{padding:7px 10px;font-size:11px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}

#credit{position:fixed;left:max(14px,var(--sal));bottom:calc(14px + var(--sab));z-index:9;font-size:10px;color:var(--muted);letter-spacing:.04em;opacity:.8}
body.lying #credit{display:none}

#posterView{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:rgba(10,12,13,.78);backdrop-filter:blur(6px);padding:16px}
.poster-card{display:grid;gap:12px;justify-items:center;max-width:min(92vw,520px);max-height:100%}
.poster-card img{width:100%;max-height:min(74vh,760px);object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:default}
.poster-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}