:root{color-scheme:dark;--ink:#f7f2dc;--muted:#b8c2b4;--panel:#213529;--line:#47654e;--accent:#ffd85a;--safe-bottom:max(18px,env(safe-area-inset-bottom));font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#101b14;color:var(--ink)}body{min-height:100vh;min-height:100dvh}button,input{font:inherit}button{min-height:44px;border:0;border-radius:12px;background:var(--accent);color:#172015;font-weight:800;padding:10px 16px;touch-action:manipulation}button:disabled{opacity:.45}.app-shell{width:min(100%,960px);height:100vh;height:100dvh;margin:auto;background:linear-gradient(#17291d,#101b14);display:flex;flex-direction:column}.topbar{height:56px;display:flex;align-items:center;gap:15px;padding:max(8px,env(safe-area-inset-top)) 16px 0}.topbar a{color:#172015;background:var(--accent);text-decoration:none;font-weight:900;border-radius:50%;display:grid;place-items:center;width:38px;height:38px}.screen{padding:16px;padding-bottom:calc(180px + var(--safe-bottom))}.status-screen{min-height:70vh;display:grid;place-content:center;text-align:center;padding-bottom:16px}.status-screen[hidden],.screen[hidden],[hidden]{display:none!important}.spinner{width:40px;height:40px;margin:auto;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}h1{font-size:clamp(1.5rem,6vw,2.3rem);margin:8px 0}h2{font-size:1rem;color:var(--muted);margin:20px 0 10px}.search input,.nickname input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#101b14;color:var(--ink);padding:10px 12px}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.character-card{position:relative;min-width:0;min-height:104px;padding:7px 4px;background:var(--panel);color:var(--ink);border:2px solid transparent;display:flex;flex-direction:column;align-items:center}.character-card img{width:68px;height:68px;object-fit:contain;image-rendering:pixelated}.character-card span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.character-card[aria-selected=true]{border-color:var(--accent);box-shadow:0 0 0 2px #101b14,0 0 0 4px var(--accent)}.character-card[aria-selected=true]::after{content:"✓";position:absolute;right:5px;top:4px;color:var(--accent)}.compact{grid-template-columns:repeat(3,minmax(0,96px))}.selection-dock{position:fixed;z-index:5;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,960px);display:grid;grid-template-columns:1fr minmax(130px,190px) auto;align-items:end;gap:10px;padding:10px 16px var(--safe-bottom);background:rgba(22,36,27,.97);border-top:1px solid var(--line)}.selected-summary{display:flex;align-items:center;min-width:0;gap:8px}.selected-summary img{width:58px;height:58px;object-fit:contain;image-rendering:pixelated}.selected-summary div{display:flex;flex-direction:column;min-width:0}.selected-summary span,.nickname{font-size:.72rem;color:var(--muted)}.selected-summary strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.form-message{grid-column:1/-1;margin:0;color:#ffdba5;font-size:.8rem}.game-screen{padding-bottom:var(--safe-bottom);display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.game-heading div{display:flex;flex-direction:column}.game-heading span{font-size:.72rem;color:var(--accent)}.canvas-wrap{position:relative;width:100%;flex:1 1 auto;min-height:160px;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:#101b14;touch-action:manipulation}.canvas-wrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.ready-panel{text-align:center;padding:20px 0}.ready-panel p{color:var(--muted)}.ready-panel #play-button{opacity:.55}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.selection-dock{grid-template-columns:1fr 1fr}.selected-summary{grid-row:1/3}.selection-dock>button{grid-column:2}.nickname{grid-column:2}.screen{padding-left:12px;padding-right:12px;padding-bottom:235px}}@media(max-width:360px){.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.character-card img{width:62px;height:62px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}