@font-face { font-family: 'IBM Plex Sans'; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url(../fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url(../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url(../fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root, [data-theme="case"] {
  --bg: #5A3E8C; --bg2: #4A2F7A;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40 q15 -18 30 0 t30 0'/%3E%3Ccircle cx='170' cy='40' r='16'/%3E%3Cpath d='M150 150 l12 -30 l12 30 l-30 -18 h36 z'/%3E%3Cpath d='M40 150 l40 40 M40 190 l40 -40'/%3E%3Cpath d='M110 95 h30 v30 h-30 z'/%3E%3Cpath d='M180 200 q10 -20 25 -8'/%3E%3C/svg%3E");
  --card: #ECEBF0; --card2: #D7D5DF; --paper: #FFFFFF;
  --ink: #2D1B4A; --ink-soft: #6B4F86; --on-bg: #FFFFFF;
  --primary: #E8466B; --primary-ink: #FFFFFF; --primary-shadow: #A82446;
  --accent: #2BA08E; --accent-ink: #FFFFFF; --accent-shadow: #1B6E61;
  --btn: #FFFFFF; --btn-ink: #2D1B4A; --btn-shadow: #A9A6B6;
  --ok: #2BA08E; --warn: #F4A62A; --bad: #E63946;
  --frame: #2D1B4A;
}
[data-theme="chalk"] {
  --bg: #24443B; --bg2: #1B342D;
  --card: #F3EFE0; --card2: #E2DCC4; --ink: #1E2D2A; --ink-soft: #55665F; --on-bg: #F3EFE0;
  --primary: #F28C3A; --primary-shadow: #B05A17; --accent: #3A8FB7; --accent-shadow: #22627F;
  --btn: #FFFDF5; --btn-ink: #1E2D2A; --btn-shadow: #B3AC8F; --frame: #8B5E34;
}
[data-theme="neon"] {
  --bg: #12122B; --bg2: #0B0B1C;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%2300E0C6' stroke-opacity='.05' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40 q15 -18 30 0 t30 0'/%3E%3Ccircle cx='170' cy='40' r='16'/%3E%3Cpath d='M150 150 l12 -30 l12 30 l-30 -18 h36 z'/%3E%3Cpath d='M40 150 l40 40 M40 190 l40 -40'/%3E%3Cpath d='M110 95 h30 v30 h-30 z'/%3E%3Cpath d='M180 200 q10 -20 25 -8'/%3E%3C/svg%3E");
  --card: #22224A; --card2: #2E2E5E; --ink: #F2F0FF; --ink-soft: #A9A6D6; --on-bg: #F2F0FF;
  --primary: #FF3EA5; --primary-shadow: #A0145F; --accent: #00C2AB; --accent-shadow: #007A6B;
  --btn: #34346B; --btn-ink: #F2F0FF; --btn-shadow: #15153A; --frame: #FF3EA5;
}
[data-theme="sunny"] {
  --bg: #FFC93C; --bg2: #FFB020;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%237A4A12' stroke-opacity='.06' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40 q15 -18 30 0 t30 0'/%3E%3Ccircle cx='170' cy='40' r='16'/%3E%3Cpath d='M150 150 l12 -30 l12 30 l-30 -18 h36 z'/%3E%3Cpath d='M40 150 l40 40 M40 190 l40 -40'/%3E%3Cpath d='M110 95 h30 v30 h-30 z'/%3E%3Cpath d='M180 200 q10 -20 25 -8'/%3E%3C/svg%3E");
  --card: #FFF6DD; --card2: #FFE7A8; --ink: #3B2A1A; --ink-soft: #85694A; --on-bg: #3B2A1A;
  --primary: #FF6B35; --primary-shadow: #B8410F; --accent: #3D8BFF; --accent-shadow: #1D5BC0;
  --btn: #FFFFFF; --btn-ink: #3B2A1A; --btn-shadow: #D9A441; --frame: #3B2A1A;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--f-body); color: var(--ink);
  background: var(--pattern) repeat, radial-gradient(circle at 30% 20%, var(--bg) 0%, var(--bg2) 100%);
  background-color: var(--bg);
  user-select: none; -webkit-user-select: none;
  transition: background-color .3s;
}
input, textarea, select, button { font-family: inherit; font-size: 16px; }
input, textarea { user-select: text; -webkit-user-select: text; }
button { cursor: pointer; }
[hidden] { display: none !important; }

#app { height: 100%; position: relative; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn {
  border: 0; border-radius: 16px; padding: 12px 18px; font-weight: 600; font-size: 17px;
  background: var(--btn); color: var(--btn-ink); box-shadow: 0 4px 0 var(--btn-shadow);
  transition: transform .08s, box-shadow .08s; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-shadow); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 5px 0 var(--primary-shadow); }
.btn-primary:active { box-shadow: 0 2px 0 var(--primary-shadow); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-shadow); }
.btn-accent:active { box-shadow: 0 1px 0 var(--accent-shadow); }
.btn.big { font-size: 22px; padding: 16px 20px; border-radius: 20px; }
.btn.small { font-size: 14px; padding: 8px 12px; border-radius: 12px; box-shadow: 0 3px 0 var(--btn-shadow); }
.icon-btn { border: 0; background: rgba(255,255,255,.15); color: var(--on-bg); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex: none; }
.icon-btn svg { width: 22px; height: 22px; }
.link { background: none; border: 0; color: var(--ink-soft); text-decoration: underline; font-size: 14px; padding: 4px; }

.card { background: var(--card); border-radius: 22px; padding: 16px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.field { width: 100%; border: 3px solid var(--card2); background: var(--paper); color: #2D1B4A; border-radius: 14px; padding: 12px 14px; font-size: 18px; font-weight: 500; outline: none; }
.field:focus { border-color: var(--accent); }

/* ---------- splash ---------- */
#splash { align-items: center; justify-content: center; }
.splash-logo { width: min(70vw, 360px); border-radius: 18%; animation: pop .7s cubic-bezier(.2,1.6,.4,1) both; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
@keyframes pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- home ---------- */
.home-wrap { flex: 1; overflow-y: auto; padding: 18px 16px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 460px; width: 100%; margin: 0 auto; }
.home-logo { width: 168px; align-self: center; border-radius: 22%; box-shadow: 0 10px 24px rgba(0,0,0,.25); transform: rotate(-3deg); }
.tagline { text-align: center; color: var(--on-bg); font-family: var(--f-display); font-size: 26px; margin: -4px 0 0; }
.profile-card { display: flex; gap: 12px; align-items: center; }
.avatar-big { width: 78px; height: 78px; border: 0; background: none; padding: 0; flex: none; position: relative; }
.avatar-big .av-svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.avatar-big::after { content: '🎲'; position: absolute; right: -4px; bottom: -2px; font-size: 18px; background: var(--paper); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.profile-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.av-tweak { display: flex; gap: 6px; }
.av-tweak button { flex: 1; border: 0; border-radius: 10px; background: var(--card2); color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 0; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.join-row { display: flex; gap: 10px; padding: 10px; }
.join-row .field { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 700; }
.home-foot { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.chip { border: 0; background: rgba(255,255,255,.16); color: var(--on-bg); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.rejoin { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.rejoin span { flex: 1; }

/* ---------- sub pages ---------- */
.page-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--on-bg); }
.page-head h2 { margin: 0; font-size: 24px; font-weight: 700; }
.page-body { flex: 1; overflow-y: auto; padding: 0 16px 24px; max-width: 520px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--card2); font-weight: 600; }
.set-row:last-child { border-bottom: 0; }
.set-row small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--card2); color: var(--ink); font-size: 20px; font-weight: 700; }
.stepper output { min-width: 52px; text-align: center; font-size: 18px; font-weight: 700; }
.seg { display: flex; background: var(--card2); border-radius: 14px; padding: 4px; }
.seg button { border: 0; background: none; padding: 8px 12px; border-radius: 10px; font-weight: 600; color: var(--ink); }
.seg button.on { background: var(--paper); color: #2D1B4A; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
textarea.field { min-height: 90px; font-size: 15px; resize: vertical; }
.room-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.room-item .ri-main { flex: 1; min-width: 0; }
.room-item b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-item small { color: var(--ink-soft); }
.empty { text-align: center; color: var(--on-bg); opacity: .85; padding: 30px 10px; }

/* ---------- game ---------- */
#game { background: transparent; }
.g-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--on-bg); flex: none; }
.g-round { font-weight: 700; font-size: 13px; line-height: 1.1; text-align: center; background: rgba(0,0,0,.18); padding: 5px 8px; border-radius: 10px; flex: none; }
.g-round small { display: block; font-weight: 500; opacity: .8; font-size: 11px; }
.g-hint { flex: 1; text-align: center; font-weight: 700; font-size: 20px; letter-spacing: 1px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-hint .hl { display: inline-block; min-width: 13px; border-bottom: 3px solid currentColor; margin: 0 2px; line-height: 1.05; text-align: center; }
.g-hint .sp { display: inline-block; width: 12px; }
.g-hint .cnt { font-size: 13px; opacity: .8; margin-left: 4px; letter-spacing: 0; }
.g-hint.word { font-family: var(--f-display); font-size: 30px; letter-spacing: 2px; }
.g-hint.got { color: #7CF2B5; }
.g-hint .lbl { font-size: 12px; display: block; letter-spacing: 0; font-weight: 500; opacity: .85; font-family: var(--f-body); }
.g-timer { width: 46px; height: 46px; position: relative; flex: none; }
.g-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-timer circle { fill: none; stroke-width: 6; }
.g-timer .trk { stroke: rgba(255,255,255,.2); }
.g-timer .bar { stroke: #7CF2B5; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.g-timer.low .bar { stroke: #FF5A6E; }
.g-timer span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.g-timer.low span { animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }
.net-dot { width: 10px; height: 10px; border-radius: 50%; background: #7CF2B5; flex: none; box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
.net-dot.off { background: #FF5A6E; animation: pulse 1s infinite; }

.g-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.g-stage { flex: none; padding: 0 8px; }
.canvas-wrap { position: relative; width: 100%; max-width: calc((100vh - 330px) * 4 / 3); min-width: 260px; margin: 0 auto; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #fff; border: 4px solid var(--frame); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
#board { width: 100%; height: 100%; display: block; touch-action: none; }
.canvas-wrap.can-draw #board { cursor: crosshair; }
.stage-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(45,27,74,.82); color: #fff; text-align: center; overflow-y: auto; }
.stage-overlay.light { background: rgba(236,235,240,.95); color: #2D1B4A; }
.ov-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.ov-sub { font-size: 14px; opacity: .85; margin: 0 0 10px; }
.ov-code { font-family: var(--f-display); font-size: 44px; letter-spacing: 6px; line-height: 1; margin: 2px 0 8px; color: #E2E0EA; }
.stage-overlay.light .ov-code { color: #5A3E8C; }
.ov-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.word-choices { display: flex; flex-direction: column; gap: 8px; width: min(100%, 320px); margin: 6px auto 0; }
.word-choice { border: 0; border-radius: 14px; background: #fff; color: #2D1B4A; font-size: 19px; font-weight: 700; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 0 #A9A6B6; }
.word-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 #A9A6B6; }
.word-choice i { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; color: #fff; }
.d-easy { background: #2BA08E; } .d-medium { background: #F4A62A; } .d-hard { background: #E63946; } .d-custom { background: #5A3E8C; }
.reveal-word { font-family: var(--f-display); font-size: 40px; color: #E2E0EA; line-height: 1.1; margin: 0 0 8px; }
.gain-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; }
.gain { background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px 4px 4px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.gain .mini-av { width: 24px; height: 24px; }
.gain b.pos { color: #7CF2B5; } .gain b.neg { color: #FF8A98; }
.countdown-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); overflow: hidden; width: min(100%, 320px); margin: 10px auto 0; }
.countdown-bar div { height: 100%; background: #7CF2B5; transition: width .25s linear; }

.floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float-emoji { position: absolute; bottom: -10px; font-size: 34px; animation: floatUp 2.6s ease-out forwards; text-align: center; }
.float-emoji small { display: block; font-size: 10px; font-weight: 700; color: #fff; background: rgba(45,27,74,.75); border-radius: 6px; padding: 1px 4px; font-family: var(--f-body); }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-40px) scale(1.1); } 100% { transform: translateY(-260px) scale(1); opacity: 0; } }

/* tools */
.tools { max-width: calc((100vh - 330px) * 4 / 3); min-width: 260px; margin: 8px auto 0; background: var(--card); border-radius: 16px; padding: 6px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.tool-row { display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.tool-row::-webkit-scrollbar { display: none; }
.tool { width: 38px; height: 38px; flex: none; border: 0; border-radius: 11px; background: var(--paper); color: #2D1B4A; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.tool svg { width: 22px; height: 22px; }
.tool.on { background: var(--accent); color: #fff; transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.tool-sep { width: 2px; height: 26px; background: var(--card2); flex: none; margin: 0 2px; border-radius: 2px; }
.size-btn { width: 32px; height: 38px; flex: none; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; }
.size-btn span { background: #2D1B4A; border-radius: 50%; display: block; }
.size-btn.on { background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent); }
.swatch { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.swatch.on { transform: scale(1.18); box-shadow: 0 0 0 3px var(--accent); }
.swatch-custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.swatch-custom input { position: absolute; inset: -6px; opacity: 0; width: 50px; height: 50px; }
.stamp-btn { width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: var(--paper); font-size: 22px; display: grid; place-items: center; }
.stamp-btn.on { box-shadow: inset 0 0 0 3px var(--accent); }

/* players */
.g-players { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 4px; scrollbar-width: none; }
.g-players::-webkit-scrollbar { display: none; }
.pl { flex: none; width: 68px; background: var(--card); border-radius: 14px; padding: 5px 4px 4px; text-align: center; position: relative; box-shadow: 0 3px 0 rgba(0,0,0,.18); transition: transform .2s; }
.pl .mini-av { width: 34px; height: 34px; margin: 0 auto; display: block; }
.pl .nm { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .sc { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pl .rk { position: absolute; left: 4px; top: 3px; font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.pl.me { box-shadow: 0 0 0 3px var(--accent), 0 3px 0 rgba(0,0,0,.18); }
.pl.drawing { background: #FFF1B8; }
.pl.got { background: #C8F5DF; }
.pl.off { opacity: .45; filter: grayscale(.8); }
.pl .badge { position: absolute; right: 2px; top: 1px; font-size: 14px; }
.pl .plus { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 6px; animation: pop .4s both; }
.mini-av svg { width: 100%; height: 100%; }

/* chat */
.g-chat { flex: 1; min-height: 120px; display: flex; flex-direction: column; margin: 4px 8px 8px; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.18); position: relative; }
.chat-log { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.msg { padding: 3px 8px; border-radius: 10px; line-height: 1.3; word-wrap: break-word; position: relative; }
.msg:active { background: rgba(0,0,0,.05); }
.msg b { font-weight: 600; margin-right: 4px; }
.msg.sys { text-align: center; color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.msg.correct { background: #C8F5DF; color: #145C45; font-weight: 600; text-align: center; }
.msg.close { background: #FFE9B5; color: #7A4E00; font-weight: 600; text-align: center; }
.msg.guessed { color: #1B7A5C; }
.msg.guessed::before { content: '✓ '; }
.msg.mine { background: rgba(43,160,142,.10); }
.reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.reacts span { background: var(--paper); border-radius: 99px; padding: 0 6px; font-size: 13px; box-shadow: 0 1px 0 rgba(0,0,0,.12); color: #2D1B4A; }
.reacts span.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.react-pop { position: absolute; z-index: 5; background: var(--paper); border-radius: 99px; padding: 4px 6px; display: flex; gap: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.25); animation: pop .2s both; }
.react-pop button { border: 0; background: none; font-size: 24px; padding: 2px 4px; }
.quick-react { display: flex; gap: 2px; padding: 4px 6px 0; border-top: 2px solid var(--card2); overflow-x: auto; scrollbar-width: none; }
.quick-react button { border: 0; background: none; font-size: 22px; padding: 2px 5px; flex: none; transition: transform .1s; }
.quick-react button:active { transform: scale(1.4); }
.chat-input { display: flex; gap: 6px; padding: 6px; align-items: center; }
.chat-input input { flex: 1; min-width: 0; border: 3px solid var(--card2); border-radius: 14px; padding: 10px 12px; font-size: 16px; outline: none; background: var(--paper); color: #2D1B4A; }
.chat-input input:focus { border-color: var(--accent); }
.chat-input input:disabled { opacity: .6; }
.chat-input .send { width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--primary); color: #fff; font-size: 18px; flex: none; box-shadow: 0 3px 0 var(--primary-shadow); }
.chat-input .emo { width: 40px; height: 44px; border: 0; background: none; font-size: 24px; flex: none; }
.emoji-panel { position: absolute; left: 6px; right: 6px; bottom: 60px; background: var(--paper); border-radius: 16px; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 6; }
.emoji-panel button { border: 0; background: none; font-size: 24px; padding: 4px 0; border-radius: 8px; }
.emoji-panel button:active { background: #eee; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(20,10,35,.6); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; }
.modal-card { background: var(--card); border-radius: 24px; padding: 20px 18px; width: min(100%, 440px); max-height: 92vh; overflow-y: auto; box-shadow: 0 10px 0 rgba(0,0,0,.2); }
.modal-card h3 { margin: 0 0 10px; font-size: 24px; text-align: center; }
.modal-card p { margin: 6px 0; line-height: 1.4; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns .btn { flex: 1; }
.lb-title { font-family: var(--f-display); font-size: 40px; text-align: center; margin: 0; line-height: 1; color: var(--primary); }
.lb-sub { text-align: center; color: var(--ink-soft); margin: 2px 0 12px; font-weight: 600; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: var(--paper); color: #2D1B4A; margin-bottom: 6px; animation: slideIn .35s both; }
.lb-row .pos { width: 26px; font-weight: 700; font-size: 18px; text-align: center; }
.lb-row .mini-av { width: 36px; height: 36px; }
.lb-row .nm { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .sc { font-weight: 700; font-size: 18px; }
.lb-row .dl { font-size: 12px; font-weight: 700; color: #1B7A5C; margin-left: 4px; }
.lb-row .dl.neg { color: #C0283A; }
.lb-row.me { box-shadow: inset 0 0 0 3px var(--accent); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 8px 0 14px; }
.pod { text-align: center; width: 30%; }
.pod .mini-av { width: 54px; height: 54px; margin: 0 auto; display: block; animation: pop .6s both; }
.pod .nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .blk { border-radius: 12px 12px 4px 4px; color: #fff; font-weight: 700; font-size: 22px; display: grid; place-items: center; margin-top: 4px; }
.pod.p1 .blk { height: 90px; background: #F4B400; } .pod.p2 .blk { height: 66px; background: #9AA5B1; } .pod.p3 .blk { height: 48px; background: #C77D3A; }
.pod .sc { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-opt { border: 0; border-radius: 16px; padding: 12px; font-weight: 700; color: #fff; min-height: 80px; display: flex; align-items: flex-end; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.theme-opt.on { outline: 4px solid var(--accent); outline-offset: 2px; }
.how p b { color: var(--primary); }
.how ul { padding-left: 18px; margin: 6px 0; }
.how li { margin: 4px 0; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: #2D1B4A; color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; z-index: 60; transition: transform .3s; max-width: 90vw; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
#toast.show { transform: translateX(-50%) translateY(0); }
.spinner { width: 46px; height: 46px; border: 5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { position: fixed; inset: 0; z-index: 70; background: rgba(20,10,35,.7); display: grid; place-items: center; color: #fff; font-weight: 600; text-align: center; padding: 20px; }

/* wide / landscape: players | canvas | chat */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .g-main { display: grid; grid-template-columns: 170px 1fr 300px; gap: 10px; padding: 0 10px 10px; }
  .g-players { flex-direction: column; overflow-y: auto; padding: 0; order: 0; }
  .pl { width: 100%; display: grid; grid-template-columns: 38px 1fr; text-align: left; align-items: center; column-gap: 6px; padding: 6px 8px; }
  .pl .mini-av { grid-row: span 2; width: 38px; height: 38px; }
  .pl .rk { display: none; }
  .g-stage { padding: 0; display: flex; flex-direction: column; justify-content: center; }
  .canvas-wrap, .tools { max-width: calc((100vh - 170px) * 4 / 3); }
  .g-chat { margin: 0; }
}
@media (max-height: 640px) and (max-width: 899px) {
  .g-chat { min-height: 96px; }
  .canvas-wrap, .tools { max-width: calc((100vh - 300px) * 4 / 3); }
}

/* fixes: readable highlighted cards on dark skins, wide grid placement, keyboard-open phones */
.pl.drawing, .pl.got { color: #2D1B4A; }
.pl.drawing .sc, .pl.got .sc, .pl.drawing .rk, .pl.got .rk { color: #6B4F86; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .g-players { grid-column: 1; grid-row: 1; }
  .g-stage { grid-column: 2; grid-row: 1; }
  .g-chat { grid-column: 3; grid-row: 1; }
}
@media (max-height: 560px) and (max-width: 899px) {
  .g-players, .quick-react { display: none; }
  .canvas-wrap, .tools { max-width: calc((100vh - 190px) * 4 / 3); min-width: 200px; }
  .g-chat { min-height: 110px; }
}


/* ================= Professional pass: IBM Plex type, quieter surfaces, aligned figures ================= */
:root {
  --f-body: 'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 12px; --radius-sm: 8px;
  --lift: 0 1px 0 rgba(0,0,0,.06), 0 10px 28px -16px rgba(0,0,0,.45);
}
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; letter-spacing: .005em; }
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; letter-spacing: .01em; padding: 12px 16px; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 0 var(--btn-shadow); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--btn-shadow); }
.btn-primary { box-shadow: 0 2px 0 var(--primary-shadow); }
.btn-primary:active { box-shadow: 0 1px 0 var(--primary-shadow); }
.btn-accent { box-shadow: 0 2px 0 var(--accent-shadow); }
.btn-accent:active { box-shadow: 0 1px 0 var(--accent-shadow); }
.btn.big { font-size: 17px; padding: 15px 18px; border-radius: 10px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--f-display); font-weight: 700; }
.btn.small { font-size: 13px; padding: 8px 12px; border-radius: 7px; box-shadow: 0 2px 0 var(--btn-shadow); }
.card, .g-chat, .tools, .modal-card { border-radius: var(--radius); box-shadow: var(--lift); }
.field, .chat-input input { border-radius: var(--radius-sm); border-width: 2px; font-weight: 500; }
.icon-btn { border-radius: var(--radius-sm); }
.chip { border-radius: 6px; font-weight: 500; font-size: 13px; letter-spacing: .02em; }
.tagline { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .9; margin-top: -2px; }
.home-logo { border-radius: 18%; transform: none; box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); }
.avatar-big::after { display: none; }
.av-tweak button { border-radius: 6px; font-size: 12px; font-weight: 500; padding: 7px 0; }
.page-head h2 { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: .02em; }
.join-row .field { font-family: var(--f-mono); letter-spacing: .3em; }

.g-round { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; border-radius: 6px; }
.g-round small { font-family: var(--f-mono); letter-spacing: 0; text-transform: none; }
.g-hint { font-family: var(--f-mono); font-weight: 600; }
.g-hint.word { font-family: var(--f-display); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: .1em; }
.g-hint .lbl { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 600; }
.g-timer span { font-family: var(--f-mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.canvas-wrap { border-radius: var(--radius); border-width: 3px; }
.stage-overlay { background: rgba(32,22,52,.88); backdrop-filter: blur(2px); }
.ov-title { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: .02em; }
.ov-code { font-family: var(--f-mono); font-weight: 600; font-size: 38px; letter-spacing: .28em; padding-left: .28em; }
.reveal-word { font-family: var(--f-display); font-weight: 700; font-size: 32px; text-transform: uppercase; letter-spacing: .1em; }
.word-choice { border-radius: var(--radius-sm); font-size: 17px; font-weight: 600; box-shadow: 0 2px 0 #A9A6B6; }
.word-choice i { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; border-radius: 4px; }

.tool, .stamp-btn { border-radius: var(--radius-sm); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.tool.on { transform: none; }
.pl { border-radius: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 16px -10px rgba(0,0,0,.5); padding-top: 14px; }
.pl .nm { font-weight: 500; }
.pl .sc, .lb-row .sc, .lb-row .pos, .pod .sc, .tr-row b, .msg .pts { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl .rk { font-family: var(--f-mono); }
.pl .badge { left: 0; right: 0; top: 2px; text-align: center; font-size: 0; }
.tag { display: inline-block; font-style: normal; font-family: var(--f-display); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; color: #fff; background: #6B6880; vertical-align: middle; line-height: 1.4; }
.tag.draw { background: #A16207; } .tag.ok { background: #2B8A7E; } .tag.host { background: #5A3E8C; } .tag.off { background: #8A8798; }
.pl .rk { display: none; }
.msg.correct { font-weight: 600; }
.msg .pts { margin-left: 4px; }

.tr-list { display: flex; flex-direction: column; gap: 4px; width: min(100%, 360px); margin: 4px auto 0; text-align: left; }
.tr-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border-radius: 6px; padding: 4px 8px; font-size: 14px; }
.tr-row .mini-av { width: 22px; height: 22px; flex: none; }
.tr-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-row b { font-size: 15px; }
.tr-row b.pos { color: #7CF2B5; } .tr-row b.neg { color: #FF8A98; } .tr-row b.zero { color: rgba(255,255,255,.55); }

.lb-title { font-family: var(--f-display); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); }
.lb-sub { font-size: 13px; font-weight: 500; }
.lb-head { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 0 12px 6px; font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.lb-head span:nth-child(2) { padding-left: 46px; }
.lb-row { border-radius: var(--radius-sm); }
.lb-row .pos { font-size: 15px; }
.lb-row.top1 { background: #FFF6D6; } .lb-row.top2 { background: #F1F2F5; } .lb-row.top3 { background: #FBEDE3; }
.lb-row.top1 .pos { color: #A16207; } .lb-row.top3 .pos { color: #9A4A12; }
.theme-opt { border-radius: var(--radius-sm); font-family: var(--f-display); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.how p, .how li { font-size: 14px; }
#toast { border-radius: var(--radius-sm); font-weight: 500; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { .pl { padding-top: 6px; } .pl .badge { position: static; text-align: left; grid-column: 2; } }

.g-hint { font-family: var(--f-display); letter-spacing: .03em; }
.g-hint .hl, .g-hint .cnt { font-family: var(--f-mono); }
.pl .plus { font-family: var(--f-mono); top: 3px; border-radius: 4px; }

.gop-credit{margin:6px 0 0;text-align:center;font:500 11px/1.4 var(--f-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--on-bg);opacity:.62}