/* 운빨 아케이드 — 화면 꾸미기 (vibeattic.com 과 같은 테마: 라이트 기본 · 다크 · 스킨 4가지) */
:root{
  --skin-h:14; --skin-s:80%; --skin-l:52%;
  --wall-a:hsl(var(--skin-h) 62% 82%);
  --wall-b:hsl(calc(var(--skin-h) + 36) 62% 88%);
  --wall-c:hsl(calc(var(--skin-h) - 32) 64% 90%);
  --dots:hsl(var(--skin-h) 60% 97% / .6);
  --glass:rgba(255,255,255,.72); --glass-hi:rgba(255,255,255,.92); --glass-line:rgba(255,255,255,.8);
  --edge:rgba(16,24,40,.12); --tint:rgba(16,24,40,.05);
  --frame:hsl(var(--skin-h) 60% 93%); --frame-line:hsl(var(--skin-h) 42% 82%);
  --surface:#FFFFFF; --surface-2:hsl(var(--skin-h) 24% 96%);
  --line:#E2E5EA; --line-2:#C9CED6;
  --ink:#10141A; --ink-2:#2A303A; --muted:#596170;
  --accent:hsl(var(--skin-h) var(--skin-s) var(--skin-l));
  --accent-ink:hsl(var(--skin-h) var(--skin-s) calc(var(--skin-l) - 10%));
  --on-accent:#FFFFFF; --accent-soft:hsl(var(--skin-h) 85% 95%);
  --warn:#E08A00; --warn-soft:rgba(224,138,0,.13); --warn-ink:#A86400;
  --close:#FF5F57; --min:#FEBC2E; --max:#28C840;
  --fade:255,255,255; --scrim:rgba(20,24,34,.45);
  --stage-dots:hsl(var(--skin-h) 30% 84% / .7);
  --shadow-sm:0 1px 2px rgba(15,18,23,.05);
  --shadow-md:0 18px 40px -24px rgba(15,18,23,.3);
  --shadow-win:0 40px 90px -36px rgba(15,25,45,.55),0 0 0 1px rgba(15,25,45,.06);
  --font-display:"Bricolage Grotesque","Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-body:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --font-pixel:"DotGothic16","Courier New",monospace;

  /* 「버그 · 건의」 버튼 · 창을 이 테마에 맞춤 */
  --va-font:var(--font-body);
  --va-card:var(--surface); --va-fill:var(--surface-2); --va-border:var(--line);
  --va-ink:var(--ink); --va-sub:var(--ink-2); --va-muted:var(--muted);
  --va-accent:var(--accent); --va-accent-ink:var(--accent-ink); --va-accent-soft:var(--accent-soft); --va-on-accent:var(--on-accent);
  --va-fab-bg:#0f172a; --va-fab-ink:#ffffff; --va-fab-border:#0f172a;
  color-scheme:light;
}
:root[data-skin="sky"]{--skin-h:212; --skin-s:80%; --skin-l:50%}
:root[data-skin="mint"]{--skin-h:165; --skin-s:80%; --skin-l:31%}
:root[data-skin="peach"]{--skin-h:14; --skin-s:80%; --skin-l:52%}
:root[data-skin="lavender"]{--skin-h:262; --skin-s:62%; --skin-l:58%}

:root[data-theme="dark"]{
  --wall-a:hsl(var(--skin-h) 38% 19%); --wall-b:hsl(calc(var(--skin-h) + 36) 34% 13%); --wall-c:hsl(calc(var(--skin-h) - 32) 32% 10%);
  --dots:hsl(var(--skin-h) 30% 70% / .07);
  --glass:rgba(22,26,36,.72); --glass-hi:rgba(28,32,44,.94); --glass-line:rgba(255,255,255,.08);
  --edge:rgba(0,0,0,.45); --tint:rgba(255,255,255,.05);
  --frame:hsl(var(--skin-h) 24% 13%); --frame-line:hsl(var(--skin-h) 20% 23%);
  --surface:#14171D; --surface-2:hsl(var(--skin-h) 12% 12%);
  --line:#252A34; --line-2:#363D4A;
  --ink:#F2F4F7; --ink-2:#D2D7DF; --muted:#9AA3B1;
  --accent:hsl(var(--skin-h) 85% 72%); --accent-ink:hsl(var(--skin-h) 85% 77%); --on-accent:#0B0D11; --accent-soft:hsl(var(--skin-h) 34% 19%);
  --warn-soft:rgba(224,138,0,.18); --warn-ink:#FFB547;
  --fade:20,23,29; --scrim:rgba(0,0,0,.6);
  --stage-dots:hsl(var(--skin-h) 20% 40% / .22);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 18px 40px -22px rgba(0,0,0,.7);
  --shadow-win:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
  --va-fab-bg:#1e2633; --va-fab-border:#2f3a4c;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  color:var(--ink);font:400 .9375rem/1.6 var(--font-body);word-break:keep-all;
  -webkit-font-smoothing:antialiased;user-select:none;overflow:hidden;
  background-color:var(--wall-a);
  background-image:
    radial-gradient(var(--dots) 1px,transparent 1.5px),
    radial-gradient(60% 70% at 12% 18%,var(--wall-b),transparent 62%),
    radial-gradient(55% 65% at 88% 28%,var(--wall-c),transparent 60%),
    linear-gradient(160deg,var(--wall-a),var(--wall-b));
  background-size:24px 24px,auto,auto,auto;
  background-attachment:fixed;
}
[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,textarea{user-select:text}
b{font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ── 메뉴 막대 (허브와 같은 유리 막대) ───────── */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--glass)}
.menubar{
  position:relative;z-index:50;flex:none;display:flex;align-items:center;gap:2px;min-height:38px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:var(--glass);border-bottom:1px solid var(--edge);font-size:.8125rem;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
}
.mb-btn{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:0;border-radius:7px;background:transparent;white-space:nowrap}
button.mb-btn:hover{background:var(--tint)}
.mb-btn svg{width:15px;height:15px;display:block;flex:none}
.brand{font-weight:700;cursor:default}
.brand .mark{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--accent);color:var(--on-accent)}
.brand .mark svg{width:14px;height:14px}
.spacer{flex:1}
.mb-ico{padding:5px 7px;color:var(--muted)}
.mb-ico:hover{color:var(--ink)}
.mb-ico[aria-expanded="true"],.mb-ico[aria-pressed="true"].tog{background:var(--tint);color:var(--ink)}
.mb-ico.off{opacity:.55}

/* 화면 설정 (톱니바퀴) */
.pop{
  position:fixed;z-index:58;top:calc(44px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));
  width:min(300px,calc(100vw - 24px));overflow:hidden;border-radius:18px;border:1px solid var(--glass-line);background:var(--glass-hi);box-shadow:var(--shadow-win);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);animation:drop .18s ease-out;
}
@keyframes drop{from{transform:translateY(-6px);opacity:.5}}
.pop-head{padding:14px 18px 10px;border-bottom:1px solid var(--edge)}
.pop-head b{font:700 1rem/1.2 var(--font-display);letter-spacing:-.01em}
.pop-body{display:grid;gap:12px;padding:14px 18px 16px}
.pop-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pop-line > span{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.skins{display:flex;gap:8px}
.skin{width:22px;height:22px;border-radius:50%;border:0;padding:0;background:var(--sw)}
.skin[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--sw)}

.segmented{display:flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:12px;background:var(--surface-2)}
.segmented button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 .8125rem/1 var(--font-body);white-space:nowrap}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.segmented.sm button{padding:6px 10px;font-size:.75rem}
:root[data-theme="dark"] .segmented button[aria-pressed="true"]{background:var(--line-2)}

/* ── 창 ───────────────────────── */
.desk{flex:1;min-height:0;display:grid;place-items:center;padding:14px max(14px,env(safe-area-inset-right,0px)) 14px max(14px,env(safe-area-inset-left,0px))}
.window{
  position:relative;display:flex;flex-direction:column;width:min(100%,1480px);height:100%;
  border-radius:20px;border:1px solid var(--frame-line);background:var(--frame);box-shadow:var(--shadow-win);overflow:hidden;
}
.titlebar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;height:44px;padding:0 14px;flex:none;border-bottom:1px solid var(--frame-line);background:var(--glass)}
.lights{display:flex;gap:8px;min-width:58px}
.lights i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.lights .l-close{background:var(--close)}
.lights .l-min{background:var(--min)}
.lights .l-max{background:var(--max)}
.win-title{margin:0;display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;font:700 .9375rem/1.2 var(--font-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.win-title .sep{color:var(--muted);font-weight:400}
.win-title #wtView{color:var(--muted);font-weight:600}
.tb-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:58px}
.counter{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--frame-line);background:var(--surface);font:600 .6875rem/1 var(--font-body);color:var(--muted);white-space:nowrap}
.counter:empty{display:none}
.counter b{font:400 .75rem/1 var(--font-pixel);letter-spacing:.04em;color:var(--accent-ink)}
.counter i{font-style:normal;color:var(--warn-ink)}

.win-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:clamp(272px,24%,330px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;padding:14px}
.win-body::before{content:"";position:absolute;inset:6px;border-radius:14px;border:1.5px dashed var(--frame-line);pointer-events:none}
.card{position:relative;min-height:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}

/* ── 왼쪽 칸 ─────────────────── */
.side{overflow-y:auto;display:grid;align-content:start;padding:4px 16px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sec{padding:14px 0 16px}
.sec + .sec{border-top:1px dashed var(--line)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sec-title{margin:0;display:flex;align-items:center;gap:8px;font:700 .9375rem/1.2 var(--font-display);letter-spacing:-.01em}
.sec-title::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.badge{padding:3px 9px;border-radius:999px;font:600 .6875rem/1.4 var(--font-body);color:var(--accent-ink);background:var(--accent-soft);white-space:nowrap}
.badge.warn{color:var(--warn-ink);background:var(--warn-soft)}
.link{border:0;background:none;padding:2px 4px;border-radius:6px;font:600 .75rem/1.4 var(--font-body);color:var(--muted)}
.link:hover{color:var(--accent-ink);background:var(--tint)}

input::placeholder{color:var(--muted);opacity:.7}
.field input[type=text]:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.mini{flex:1;padding:7px 0;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:600 .75rem/1.2 var(--font-body)}
.mini:hover{border-color:var(--ink-2);color:var(--ink)}

.field{display:flex;align-items:center;justify-content:space-between;gap:10px}
.field > span{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.field input[type=text]{
  width:112px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  text-align:center;font-weight:700;font-size:.8125rem;outline:none;
}
.stepper{display:flex;align-items:center;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--surface-2)}
.stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stepper button{width:32px;height:32px;border:0;background:transparent;color:var(--muted);font-size:17px;line-height:1}
.stepper button:hover{color:var(--accent-ink);background:var(--tint)}
.stepper input{width:44px;height:32px;border:0;background:transparent;text-align:center;font:500 .875rem/1 var(--font-mono);outline:none;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ── 오른쪽: 무대 ───────────────── */
.main{display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px}
.main-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.stage{
  position:relative;flex:1;min-height:0;overflow:hidden;border-radius:14px;border:1px solid var(--line);
  background-color:var(--surface-2);
  background-image:radial-gradient(var(--stage-dots) 1px,transparent 1.5px);background-size:22px 22px;
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.banner{
  position:absolute;left:50%;top:14px;transform:translate(-50%,-20px) scale(.8);opacity:0;pointer-events:none;
  max-width:calc(100% - 28px);padding:10px 22px 9px;border-radius:16px;text-align:center;
  background:var(--glass-hi);border:1px solid var(--glass-line);box-shadow:var(--shadow-md),0 0 0 1px var(--edge);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
}
.banner b{display:block;font:800 1.375rem/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner small{display:block;margin-top:2px;font-size:.8125rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner.win{background:var(--accent);border-color:transparent;box-shadow:0 18px 36px -18px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.banner.win b{color:var(--on-accent)}
.banner.win small{color:var(--on-accent);opacity:.85}
.banner.show{animation:bannerIn 1.9s ease forwards}
@keyframes bannerIn{
  0%{opacity:0;transform:translate(-50%,-24px) scale(.7)}
  10%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  18%{transform:translate(-50%,0) scale(1)}
  82%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.96)}
}

.actions{flex:none;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.go{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:200px;padding:13px 30px;border:0;border-radius:14px;
  background:var(--accent);color:var(--on-accent);font:800 1.0625rem/1.1 var(--font-display);letter-spacing:-.01em;
  box-shadow:0 14px 26px -14px var(--accent);transition:transform .08s,filter .15s,background .15s;
}
.go:hover{filter:brightness(1.06)}
.go:active{transform:translateY(1px) scale(.99)}
.go.running{background:var(--ink);color:var(--surface);box-shadow:0 14px 26px -16px rgba(15,18,23,.55)}
.go.sm{min-width:0;padding:10px 18px;border-radius:12px;font:700 .875rem/1.1 var(--font-body)}
.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(var(--fade),.65);color:var(--ink);font:600 .8125rem/1.1 var(--font-body);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ghost:hover:not(:disabled){border-color:var(--ink-2)}
.ghost:disabled{opacity:.4;cursor:default}
.actions .ghost{min-height:46px;padding:0 16px}

/* ── 창 (허브 askBox 모양) ───── */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-card{
  position:relative;width:min(440px,100%);max-height:100%;overflow-y:auto;display:grid;gap:14px;padding:24px;border-radius:22px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-win);animation:pop .26s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop{from{transform:translateY(10px) scale(.95);opacity:.4}}
.kick{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);font:700 .6875rem/1.2 var(--font-body);letter-spacing:.12em}
.modal-card h3{margin:0;font:800 1.75rem/1.2 var(--font-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.res-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.res-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.res-list .rk{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font:700 .75rem/1 var(--font-mono);color:var(--on-accent);background:var(--accent)}
.res-list .dot{flex:none;width:10px;height:10px;border-radius:50%}
.res-list b{flex:1;min-width:0;font-size:1rem;overflow-wrap:anywhere}
.res-list em{flex:none;padding:3px 8px;border-radius:6px;font-style:normal;font:700 .6875rem/1.3 var(--font-body);color:var(--accent-ink);background:var(--accent-soft)}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}

.toast{
  position:fixed;left:50%;top:calc(50px + env(safe-area-inset-top,0px));z-index:90;transform:translate(-50%,-8px);opacity:0;pointer-events:none;
  max-width:calc(100% - 32px);padding:9px 16px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-hi);color:var(--ink);
  font:600 .8125rem/1.4 var(--font-body);box-shadow:var(--shadow-win);transition:opacity .2s,transform .2s;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ═════════ 온라인: 닉네임 · 로비 · 대기방 ═════════ */
.av{--h:14;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:hsl(var(--h) 70% 52%);color:#fff;font:800 .8125rem/1 var(--font-body);box-shadow:0 0 0 2px var(--surface)}
:root[data-theme="dark"] .av{background:hsl(var(--h) 70% 60%)}
.av.xs{width:20px;height:20px;font-size:.625rem;box-shadow:none}
.av.lg{width:52px;height:52px;font-size:1.375rem;box-shadow:0 0 0 3px var(--surface),0 8px 18px -10px rgba(15,25,45,.5)}

.nick-chip{max-width:200px;font-weight:600}
.nick-chip #nickName{overflow:hidden;text-overflow:ellipsis}
.nick-chip.locked{color:var(--muted)}
.nick-chip.locked::after{content:"";width:11px;height:11px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat}

.me-card{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.me-text{min-width:0}
.me-text b{display:block;font:800 1.125rem/1.25 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.me-text small{display:block;margin-top:3px;font-size:.6875rem;line-height:1.45;color:var(--muted)}
.mini.wide{display:block;width:100%;flex:none;padding:9px 0}
.mini:disabled{opacity:.45;cursor:default;border-color:var(--line-2);color:var(--ink-2)}

.game-intro{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.game-intro li{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:12px;background:var(--surface-2)}
.game-intro .gi{font-size:20px;line-height:1.25}
.game-intro b{display:block;font:700 .8125rem/1.35 var(--font-body)}
.game-intro small{display:block;font-size:.6875rem;line-height:1.45;color:var(--muted)}

.lobby-main,.room-main{padding:16px}
.head-text{flex:1 1 260px;min-width:0}
.big-title{margin:0;font:800 1.5rem/1.15 var(--font-display);letter-spacing:-.03em}
.sub{margin:4px 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.head-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.code-join{display:flex;gap:6px}
.code-join input,.chat-form input,.nick-row input,.field.col input,.opt-row input.txt{
  border:1px solid var(--line);background:var(--surface-2);outline:none;border-radius:12px;
}
.code-join input:focus,.chat-form input:focus,.nick-row input:focus,.field.col input:focus,.opt-row input.txt:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.code-join input{width:112px;padding:9px 12px;text-align:center;font:400 1rem/1 var(--font-pixel);letter-spacing:.22em;text-transform:uppercase}
.code-join input::placeholder{font-family:var(--font-body);font-size:.8125rem;letter-spacing:0}

.room-list{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-content:start;padding:2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.room-card{
  display:grid;gap:9px;padding:14px 15px;border-radius:15px;border:1px solid var(--line);background:var(--surface);text-align:left;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.room-card:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow-md)}
.room-card.full{opacity:.55;cursor:default}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.rc-title{min-width:0;font:700 1rem/1.3 var(--font-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-meta{display:flex;align-items:center;gap:10px;font-size:.75rem;color:var(--muted);min-width:0}
.rc-meta > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-code{font:400 .8125rem/1 var(--font-pixel);letter-spacing:.14em;color:var(--accent-ink)}
.rc-count{margin-left:auto;font:500 .75rem/1 var(--font-mono);color:var(--ink-2)}
.rc-bar{height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.rc-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.empty-rooms{grid-column:1/-1;display:grid;place-items:center;gap:4px;padding:56px 16px;border:1.5px dashed var(--line-2);border-radius:16px;color:var(--muted);text-align:center;font-size:.8125rem}
.empty-rooms b{font:700 1.0625rem/1.3 var(--font-display);color:var(--ink)}

/* 대기방: 왼쪽 = 참가자 · 채팅 */
.room-body{grid-template-columns:clamp(280px,26%,340px) minmax(0,1fr)}
.room-side{display:flex;flex-direction:column;overflow:hidden;padding:14px 16px}
.room-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
.room-title{min-width:0;display:grid;gap:7px}
.room-title b{font:800 1.125rem/1.25 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.code-chip{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft);color:var(--accent-ink);font:400 .9375rem/1 var(--font-pixel);letter-spacing:.2em}
.code-chip::after{content:"링크 복사";font:600 .625rem/1 var(--font-body);letter-spacing:0;opacity:.75}
.code-chip:hover{border-style:solid}
.ghost.sm{padding:7px 11px;border-radius:10px;font-size:.75rem}
.room-side > .sec-head{flex:none;margin-bottom:6px}
.members{flex:0 1 auto;max-height:42%;min-height:44px;overflow-y:auto;list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:2px;scrollbar-width:thin}
.member{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:6px 8px;border-radius:10px}
.member.me{background:var(--surface-2)}
.member.off{opacity:.5}
.member .mn{flex:1;min-width:0;font-weight:600;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crown,.me-tag,.mt-off{flex:none;padding:2px 7px;border-radius:999px;font:700 .625rem/1.5 var(--font-body)}
.crown{color:var(--warn-ink);background:var(--warn-soft)}
.me-tag{color:var(--accent-ink);background:var(--accent-soft)}
.mt-off{color:var(--muted);background:var(--tint)}
.bot-tag{flex:none;padding:2px 7px;border-radius:999px;font:700 .625rem/1.5 var(--font-body);color:var(--ink-2);background:var(--tint)}
.sec-acts{display:inline-flex;align-items:center;gap:6px}
.bot-btn{padding:3px 9px;border-radius:999px;border:1px dashed var(--line-2);background:transparent;color:var(--ink-2);font:600 .6875rem/1.4 var(--font-body)}
.bot-btn:hover:not(:disabled){border-style:solid;border-color:var(--accent);color:var(--accent-ink)}
.bot-btn:disabled{opacity:.4;cursor:default}
.kick-btn{flex:none;padding:3px 7px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:600 .6875rem/1.3 var(--font-body)}
.kick-btn:hover{color:#E5484D;background:var(--tint)}
@media (hover:hover){.member .kick-btn{opacity:0}.member:hover .kick-btn,.kick-btn:focus-visible{opacity:1}}
.kick-confirm{flex-basis:100%;display:flex;justify-content:flex-end;gap:6px}
.kick-yes,.kick-no{padding:5px 11px;border-radius:9px;font:700 .75rem/1.2 var(--font-body)}
.kick-yes{border:0;background:#E5484D;color:#fff}
.kick-no{border:1px solid var(--line-2);background:transparent}

.chat{flex:1;min-height:150px;display:flex;flex-direction:column;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.chat .sec-head{margin-bottom:8px}
.conn{font:600 .6875rem/1.3 var(--font-body);color:var(--warn-ink)}
.msgs{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0 2px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.msg{display:flex;align-items:flex-start;gap:7px;font-size:.8125rem;line-height:1.45}
.msg .mb{min-width:0}
.msg .mb b{display:block;font:600 .6875rem/1.4 var(--font-body);color:var(--muted)}
.msg .mb span{display:block;overflow-wrap:anywhere;user-select:text}
.msg.mine .mb b{color:var(--accent-ink)}
.msg.sys{justify-content:center;align-self:stretch;padding:5px 10px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);font:600 .75rem/1.45 var(--font-body);text-align:center;overflow-wrap:anywhere}
.chat-form{flex:none;display:flex;gap:6px;margin-top:8px}
.chat-form input{flex:1;min-width:0;padding:9px 12px;font-size:.8125rem}
.chat-form .ghost{padding:9px 12px}

/* 대기방: 오른쪽 = 게임 고르기 */
.pick-view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
#modeSeg.readonly button{cursor:default}
#modeSeg.readonly button:not([aria-pressed="true"]){opacity:.45}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.game-card{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;padding:14px;border-radius:16px;
  border:1.5px solid var(--line);background:var(--surface);text-align:left;transition:border-color .15s,transform .15s,background .15s;
}
.game-card:hover:not(.static){border-color:var(--line-2);transform:translateY(-2px)}
.game-card.static{cursor:default}
.gc-icon{font-size:30px;line-height:1}
.gc-text b{display:block;font:700 .9375rem/1.3 var(--font-display);letter-spacing:-.01em}
.gc-text small{display:block;margin-top:2px;font-size:.6875rem;line-height:1.45;color:var(--muted)}
.gc-flag{display:inline-block;margin-left:6px;vertical-align:2px;padding:2px 7px;border-radius:999px;font:700 .5625rem/1.5 var(--font-body);color:var(--warn-ink);background:var(--warn-soft)}
.game-card.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.game-card.sel::after{content:"✓";position:absolute;top:9px;right:9px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);font:800 .75rem/1 var(--font-body);box-shadow:0 0 0 3px var(--surface)}
.gc-votes{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);min-height:29px}
.gc-n{font:600 .75rem/1 var(--font-mono);color:var(--ink-2)}
.game-card.lead .gc-n{color:var(--accent-ink)}
.game-card.lead .gc-n::before{content:"1위 · ";font-family:var(--font-body);font-weight:700}
.gc-faces{display:flex;padding-left:5px}
.gc-faces .av{margin-left:-5px;box-shadow:0 0 0 2px var(--surface)}

.opts{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--surface-2)}
.opts-head{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-bottom:10px}
.opts-head b{font:700 .9375rem/1.3 var(--font-display)}
.opts-head small{font-size:.75rem;color:var(--muted)}
.opts-head .badge{margin-left:auto;color:var(--muted);background:var(--tint)}
.opt-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:6px 20px}
.opt-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;min-height:40px}
.opt-row .ol{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.opt-row .ov{font:700 .8125rem/1.3 var(--font-body);color:var(--accent-ink)}
.opt-row .oh{flex-basis:100%;margin-top:-2px;font-size:.6875rem;line-height:1.4;color:var(--muted)}
.opt-row input.txt{width:120px;padding:7px 10px;text-align:center;font:700 .8125rem/1.2 var(--font-body);background:var(--surface)}
.opts .segmented,.opts .stepper{background:var(--surface)}
:root[data-theme="dark"] .opts .segmented button[aria-pressed="true"]{background:var(--line-2)}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;inset:0;margin:0;opacity:0;z-index:1;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}

.startbar{flex:none;margin-top:auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;padding-top:4px}
.start-info{margin:0;flex:1 1 200px;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.startbar .go:disabled{opacity:.45;cursor:default;filter:grayscale(.4)}
.start-warn{flex-basis:100%;text-align:left;font-size:.75rem;font-weight:600;color:var(--warn-ink)}
.wait-host{padding:10px 14px;border-radius:12px;background:var(--surface-2);font:600 .8125rem/1.3 var(--font-body);color:var(--muted)}

/* 게임 무대 */
.play-view{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.play-head{flex:none;display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.play-head .kick{font-size:.75rem;letter-spacing:.02em}
.play-rule{min-width:0;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.stage-ui{position:absolute;inset:0;pointer-events:none}
.stage-ui > *{pointer-events:auto}
.result{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(var(--fade),.3);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}}
.result-card{width:min(430px,100%);max-height:100%;overflow-y:auto;display:grid;gap:12px;padding:22px;border-radius:22px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-win);animation:pop .3s cubic-bezier(.2,1.2,.4,1)}
.result-card h3{margin:0;font:800 1.625rem/1.2 var(--font-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.me-won{margin:0;padding:9px 12px;border-radius:12px;background:var(--accent);color:var(--on-accent);font:700 .9375rem/1.3 var(--font-body);text-align:center}
.res-list .cnt{flex:none;font:500 .8125rem/1 var(--font-mono);color:var(--muted)}
.res-note{margin:0;font-size:.75rem;color:var(--muted)}
.result-card .modal-btns{align-items:center}

/* 스페이스 연타 단추 */
.mash-key{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);min-width:min(320px,calc(100% - 40px));padding:20px 30px 18px;border:0;border-radius:22px;
  background:var(--accent);color:var(--on-accent);font:800 1.375rem/1.1 var(--font-display);letter-spacing:-.01em;touch-action:manipulation;
  box-shadow:0 8px 0 var(--accent-ink),0 18px 30px -12px var(--accent);transition:transform .05s,box-shadow .05s;-webkit-tap-highlight-color:transparent;
}
.mash-key small{display:block;margin-top:5px;font:600 .75rem/1.2 var(--font-body);opacity:.85}
.mash-key.hit{transform:translate(-50%,6px);box-shadow:0 2px 0 var(--accent-ink),0 10px 20px -12px var(--accent)}
.mash-key:disabled{opacity:.5;cursor:default}

/* 레이스: 아이템 고르기 · 쓰기 */
.item-pick{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:rgba(var(--fade),.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.item-card{width:min(600px,100%);max-height:100%;overflow-y:auto;display:grid;gap:10px;padding:18px;border-radius:20px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-win);animation:pop .3s cubic-bezier(.2,1.2,.4,1)}
.item-title{font:800 1.25rem/1.2 var(--font-display);letter-spacing:-.02em}
.item-sub,.item-info{margin:0;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.item-info{font-weight:600;color:var(--ink-2)}
.item-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.item-bar i{display:block;height:100%;width:100%;border-radius:4px;background:var(--accent);transition:width .25s linear}
.item-bar i.hurry{background:#E5484D}
.item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.item-btn{display:grid;justify-items:center;align-content:start;gap:3px;padding:12px 8px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);text-align:center;transition:transform .08s,border-color .15s,opacity .15s}
.item-btn .ii{font-size:30px;line-height:1.1}
.item-btn b{font:800 .9375rem/1.2 var(--font-display)}
.item-btn small{font-size:.6875rem;line-height:1.35;color:var(--muted)}
.item-btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}
.item-btn.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}
.item-btn.off{opacity:.38}
.item-btn:disabled{cursor:default}
.item-btn{position:relative}
.item-no{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 .6875rem/1 var(--font-mono);font-style:normal}
.item-no:empty{display:none}
.item-uses{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:10px;width:min(470px,calc(100% - 24px))}
.item-use{
  position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:16px;overflow:hidden;
  background:var(--accent);color:var(--on-accent);text-align:left;touch-action:manipulation;box-shadow:0 5px 0 var(--accent-ink),0 12px 22px -12px var(--accent);transition:transform .05s,box-shadow .05s,opacity .15s;
}
.item-use kbd{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.28);font:700 .6875rem/1 var(--font-mono)}
.item-use .ii{flex:none;font-size:24px;line-height:1}
.item-use b{flex:1;min-width:0;font:800 .9375rem/1.15 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-use .uses{flex:none;display:flex;gap:4px}
.item-use .uses i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.3}
.item-use .uses i.on{opacity:1}
.item-use:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--accent-ink)}
.item-use:disabled{opacity:.6;cursor:default}
.item-use.cool::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);transform-origin:left;transform:scaleX(var(--cool,0))}
.item-use.used{background:var(--surface-2);color:var(--muted);box-shadow:none}

/* 운명의 상자: 교환 시간 */
.trade-dock{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(560px,calc(100% - 20px));display:grid;gap:6px}
.td-ask,.td-bar{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:0 10px 24px -16px rgba(15,25,45,.5)}
.td-ask{border-color:var(--accent);animation:pop .3s cubic-bezier(.2,1.2,.4,1)}
.td-txt{flex:1;min-width:0;font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}
.td-txt.muted{color:var(--muted)}
.td-bar .on{border-color:var(--accent);color:var(--accent-ink)}
.td-note{margin:0;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:.8125rem;color:var(--muted);text-align:center}
@media (max-width:520px){
  .item-card{padding:14px}
  .item-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .item-btn{padding:9px 4px}
  .item-btn .ii{font-size:24px}
  .item-btn small{display:none}
  .item-uses{gap:8px}
  .item-use{padding:9px 10px;gap:6px}
  .item-use kbd{display:none}
  .item-use b{font-size:.8125rem}
}

/* 창 속 글 · 칸 */
.modal-text{margin:0;font-size:.8125rem;line-height:1.6;color:var(--ink-2)}
.nick-row{display:flex;gap:8px}
.nick-row input{flex:1;min-width:0;padding:12px 14px;font:700 1.0625rem/1.2 var(--font-body)}
.dice{padding:0 14px;font-size:20px}
.field-note{margin:-6px 0 0;min-height:1em;font-size:.75rem;font-weight:600;color:#E5484D}
.field-note:empty{display:none}
.field.col{flex-direction:column;align-items:stretch;gap:6px}
.field.col input{padding:11px 13px;font:600 .9375rem/1.2 var(--font-body)}
.modal-btns .go:disabled{opacity:.5}

/* 크게 보기: 무대만 넓게 (메뉴 막대는 남겨서 되돌아올 수 있게) */
body.full .side,body.full .titlebar{display:none}
body.full .win-body{grid-template-columns:minmax(0,1fr)}
body.full .desk{padding:8px}

/* ── 좁은 화면 ─────────────────── */
@media (max-width:920px){
  body{overflow:auto}
  .app{height:auto;min-height:100dvh}
  .desk{display:block;padding:10px max(10px,env(safe-area-inset-right,0px)) 76px max(10px,env(safe-area-inset-left,0px))}
  .window{height:auto;border-radius:18px}
  .titlebar{height:40px;padding:0 12px}
  .win-body{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:10px}
  .win-body::before{inset:4px;border-radius:14px}
  .main{order:-1;padding:10px}
  .stage{flex:none;height:min(62vh,540px);min-height:330px}
  .side{overflow:visible}
  body.full .stage{height:calc(100dvh - 190px)}
  .lobby-main,.room-main{padding:12px}
  .room-list,.pick-view{overflow:visible}
  .room-side{overflow:visible}
  .members{max-height:none}
  .chat{min-height:0}
  .msgs{flex:none;height:260px}
}
@media (max-width:520px){
  .lights{display:none}
  .titlebar{grid-template-columns:minmax(0,1fr) auto}
  .win-title{justify-content:flex-start}
  .tb-right{min-width:0}
  .head-acts{width:100%}
  .head-acts .go{flex:1}
  .code-join{flex:1}
  .code-join input{flex:1;width:auto;min-width:0}
  #modeSeg{width:100%}
  #modeSeg button{flex:1}
  .opt-rows{grid-template-columns:minmax(0,1fr)}
  .game-grid{grid-template-columns:1fr 1fr;gap:8px}
  .game-card{padding:11px;gap:2px 9px}
  .gc-icon{font-size:24px}
  .gc-text small{display:none}
  .gc-flag{display:table;margin:3px 0 0}
  .game-card.sel::after{top:6px;right:6px;width:18px;height:18px;font-size:.625rem}
  .mash-key{bottom:14px;padding:16px 22px 14px;font-size:1.125rem}
}
@media (max-width:380px){
  .go{min-width:150px;padding:12px 22px}
}