:root{--ink:#27456f;--blue:#3d7bf0;--green:#35b85a;--orange:#ff9a2e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;height:100%;overflow:hidden;background:#62b8ff;font-family:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none}
#cv{position:fixed;left:50%;top:0;transform:translateX(-50%);display:block}
#ui{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#ui[data-screen=none]{display:none}
#ui .card{display:none;pointer-events:auto;width:min(92vw,380px);max-height:94vh;overflow:auto;padding:26px 24px;border-radius:26px;text-align:center;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(30,70,150,.35),inset 0 0 0 3px #fff}
#ui[data-screen=nick] #s-nick,#ui[data-screen=menu] #s-menu,#ui[data-screen=lobby] #s-lobby,#ui[data-screen=result] #s-result,#ui[data-screen=modal] #s-modal{display:block}
#ui[data-screen=result]{background:rgba(20,40,90,.28)}
#ui[data-screen=modal]{background:rgba(20,40,90,.35)}
.logo{margin:0 0 4px;font-size:44px;letter-spacing:-1px;color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 #2f66d0,0 6px 0 #234f9f,0 10px 14px rgba(0,0,0,.25);background:none}
h2{margin:0 0 6px;font-size:28px}
.sub{margin:4px 0 14px;font-size:15px;color:#557}
.sub a{color:var(--blue);margin-left:6px;font-size:13px}
.err{min-height:18px;margin:6px 0;color:#e03a4e;font-size:13px}
.net{min-height:16px;margin:8px 0 0;font-size:12px;color:#789}
input{width:100%;padding:13px 14px;border:3px solid #cfe0fa;border-radius:14px;font:inherit;font-size:18px;text-align:center;color:var(--ink);background:#fff;outline:none;user-select:text;-webkit-user-select:text}
input:focus{border-color:var(--blue)}
.btn{display:block;width:100%;margin:10px 0 0;padding:12px 16px;border:0;border-radius:16px;font:inherit;font-weight:700;font-size:16px;color:#fff;cursor:pointer;background:var(--blue);box-shadow:0 5px 0 #2559c0,0 8px 14px rgba(0,0,0,.18);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #2559c0}
.btn.big{padding:15px 16px;font-size:19px}
.btn.green{background:var(--green);box-shadow:0 5px 0 #228f42,0 8px 14px rgba(0,0,0,.18)}
.btn.blue{background:var(--blue)}
.btn.orange{background:var(--orange);box-shadow:0 5px 0 #d97a14,0 8px 14px rgba(0,0,0,.18)}
.btn.ghost{background:#e8f0fd;color:var(--ink);box-shadow:0 4px 0 #c3d4ee;font-size:14px;padding:10px 8px}
.btn[disabled]{opacity:.5;filter:grayscale(.4)}
.row{display:flex;gap:8px;margin-top:12px}
.row input{flex:1;min-width:0}
.row .btn{width:auto;margin:0;flex:0 0 84px}
.row.small .btn{flex:1;margin:0}
.slots{display:flex;align-items:center;gap:8px;margin:14px 0}
.slot{flex:1;padding:14px 6px;border-radius:16px;background:#eef4ff;font-weight:700;min-height:74px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.slot small{font-weight:400;color:#789}
.slot.on{background:#dff7e5}
.slot.me{box-shadow:inset 0 0 0 3px var(--blue)}
.vs{font-weight:900;color:#ff6a4d;font-size:20px}
.code{font-size:30px;letter-spacing:4px;color:var(--blue)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px;text-align:left}
.stats div{background:#eef4ff;border-radius:12px;padding:8px 12px;font-size:13px;color:#557}
.stats b{display:block;font-size:20px;color:var(--ink)}
.pop{animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
#modal-body{text-align:left;font-size:14px;line-height:1.6;margin:8px 0}
#modal-body table{width:100%;border-collapse:collapse}
#modal-body td{padding:5px 4px;border-bottom:1px solid #e3ebf8}
#modal-body kbd{background:#eef4ff;border-radius:6px;padding:1px 7px;font-family:inherit;font-weight:700;border:1px solid #c8d8f2}
.win{color:#2a9d4d;font-weight:700}.loss{color:#e03a4e;font-weight:700}

#hud{position:fixed;top:8px;right:8px;display:none;gap:8px;z-index:5;flex-direction:column;align-items:flex-end}
body.playing #hud{display:flex}
.icon{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--ink);font-size:18px;font-weight:700;box-shadow:0 3px 8px rgba(0,0,0,.2)}
#emotes{display:none;gap:6px}
body.versus #emotes{display:flex}
body.versus #b-pause{display:none}
#emotes button{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.85);font-size:20px;box-shadow:0 3px 8px rgba(0,0,0,.2)}

#touch{position:fixed;left:0;right:0;bottom:0;height:150px;display:none;justify-content:space-between;align-items:center;padding:6px 10px calc(6px + env(safe-area-inset-bottom));z-index:4}
body.playing.touch #touch{display:flex}
.tgrp{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:48vw}
#touch button{width:62px;height:62px;border:0;border-radius:18px;background:rgba(255,255,255,.82);color:var(--ink);font-size:24px;font-weight:700;box-shadow:0 4px 0 rgba(40,80,150,.35);touch-action:none}
#touch button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(40,80,150,.35)}
#touch button.small{font-size:12px}
#touch button.wide{width:132px}
@media (max-width:420px){#touch button{width:54px;height:54px}#touch button.wide{width:116px}}