:root{color-scheme:dark;--ink:#f8f1dc;--muted:#b9b2c8;--panel:#211d38;--accent:#ffcb67;--mint:#76e1c2;--danger:#ff6f78}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#332858,#11101f 68%);font-family:Inter,ui-rounded,"Noto Sans KR",system-ui,sans-serif;color:var(--ink)}
button,select,input{font:inherit}.app-shell{width:min(100vw,1040px);padding:24px}.game-frame{position:relative;overflow:hidden;border:2px solid #5c527c;border-radius:22px;background:#17142b;box-shadow:0 24px 80px #07060dbb;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%;image-rendering:auto}
.hidden{display:none!important}.hud{position:absolute;inset:14px 16px auto;display:flex;gap:10px;align-items:stretch;pointer-events:none}.hud-cluster{min-width:126px;padding:8px 13px;border:1px solid #ffffff22;border-radius:12px;background:#151329d9;backdrop-filter:blur(8px);display:flex;flex-direction:column}.hud-label{font-size:11px;color:var(--muted);letter-spacing:.08em}.hud strong{font-size:18px}.icon-button{margin-left:auto;width:44px;border:1px solid #ffffff2b;border-radius:12px;background:#151329dd;color:var(--ink);pointer-events:auto;cursor:pointer}
.screen-layer{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#17142bd9,#17142bf3);padding:32px}.panel{width:min(580px,90%);padding:34px;border:1px solid #ffffff22;border-radius:22px;background:#24203cdd;box-shadow:0 18px 60px #07060d88;text-align:center}.panel h1{font-size:clamp(38px,6vw,64px);line-height:.95;margin:0 0 12px;color:var(--accent);text-shadow:0 4px #8d4b55}.panel h2{font-size:34px;margin:0 0 10px}.panel p{color:var(--muted);line-height:1.55}.cat-mark{font-size:72px;filter:drop-shadow(0 8px 0 #8d4b55)}
.difficulty-row,.button-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.difficulty-button,.primary,.secondary{border:0;border-radius:12px;padding:12px 18px;cursor:pointer;transition:.15s transform,.15s background}.difficulty-button{color:var(--ink);background:#393253;border:1px solid #ffffff1f}.difficulty-button.selected{background:var(--mint);color:#142b28;box-shadow:0 0 0 3px #76e1c233}.primary{background:var(--accent);color:#2f2430;font-weight:800}.secondary{background:#393253;color:var(--ink)}button:hover{transform:translateY(-2px)}button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.prompt{position:absolute;left:50%;bottom:54px;translate:-50% 0;padding:9px 14px;border-radius:10px;background:#11101ddd;border:1px solid #ffffff33;font-size:14px}.toast{position:absolute;top:84px;left:50%;translate:-50% 0;padding:10px 16px;border-radius:12px;background:#17142bec;border:1px solid var(--accent);color:var(--accent);font-weight:700;animation:toastIn .2s ease-out}.debug-panel{position:absolute;right:10px;top:74px;width:290px;max-height:430px;overflow:auto;margin:0;padding:10px;background:#05050bdc;color:#8fffdc;border:1px solid #8fffdc55;font:11px/1.4 ui-monospace,monospace;white-space:pre-wrap;pointer-events:none}.controls{text-align:center;color:#9f98b2;font-size:13px;margin:12px 0 0}@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:700px){.app-shell{padding:8px}.controls{font-size:11px}.hud{inset:6px;gap:5px}.hud-cluster{min-width:0;padding:5px 8px}.hud strong{font-size:14px}.hud-label{font-size:9px}}