/* Forge Round 2 — Mahjong, Daily Word, Word Search, Mini Crossword
   Uses stacked-ui tokens. Calm, premium, ≥44px targets, reduced-motion aware. */

/* —— shared chrome —— */
.forge-win{
  margin:12px auto 0;max-width:340px;padding:16px;border-radius:var(--s-r-lg,16px);
  background:var(--s-surface,#fff8ec);color:var(--s-ink,#2a241c);
  box-shadow:var(--s-shadow,0 8px 24px rgba(42,36,28,.14));
  text-align:center;animation:forgeIn var(--s-dur-slow,320ms) var(--s-ease,cubic-bezier(.2,.8,.2,1));
}
.forge-win h3{margin:0 0 6px;font:700 20px/1.2 var(--s-display,Fraunces,Georgia,serif)}
.forge-win p{margin:4px 0;font:600 14px/1.4 var(--s-font,system-ui);color:var(--s-ink-2,#5c5348)}
.forge-win .forge-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.forge-win .forge-stats span{
  min-width:72px;padding:8px 10px;border-radius:var(--s-r,12px);background:var(--s-bg-2,#ebe0cc);
  font:700 13px var(--s-font,system-ui);font-variant-numeric:tabular-nums;
}
.forge-tone{
  min-height:44px;min-width:44px;border-radius:var(--s-r-pill,999px);border:1px solid var(--s-line,rgba(42,36,28,.12));
  background:var(--s-surface,#fff8ec);color:var(--s-ink,#2a241c);font:600 13px var(--s-font,system-ui);
  padding:8px 14px;cursor:pointer;touch-action:manipulation;
}
.forge-tone:focus-visible{outline:2px solid var(--s-focus,#5aa7ff);outline-offset:2px}
.forge-tone:active{transform:scale(.97)}
@keyframes forgeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .forge-win,.mj-board .tile,.wd-guesses .gcell,.ws-grid .wcell,.xc-board .xcell{animation:none!important;transition:opacity .01s!important}
}

/* —— Mahjong —— */
.mj-wrap{position:relative;overflow:auto;touch-action:manipulation;margin:0 auto;max-width:100%;-webkit-overflow-scrolling:touch}
.mj-board{position:relative;margin:0 auto;transform-origin:top left;will-change:transform}
.mj-board .tile{
  position:absolute;width:56px;height:74px;border:0;border-radius:9px;
  background:
    linear-gradient(180deg,#fffef8 0%,#f6e8c8 48%,#e6d2a0 100%);
  box-shadow:
    8px 9px 0 #5a3e14,
    8px 9px 0 1px #2e200a,
    0 14px 22px rgba(0,0,0,.42);
  font:700 16px/1.05 var(--s-display,Fraunces,Georgia,serif);color:#4a1810;
  cursor:default;padding:0;display:grid;place-items:center;
  opacity:.78;filter:brightness(.55) saturate(.6);
  transition:transform var(--s-dur,180ms) var(--s-spring,cubic-bezier(.34,1.4,.64,1)),
    box-shadow var(--s-dur,180ms) var(--s-ease),opacity var(--s-dur,180ms) var(--s-ease),filter var(--s-dur,180ms) var(--s-ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mj-board .tile::before{
  content:"";position:absolute;inset:3px;border-radius:6px;
  border:1px solid rgba(122,90,34,.28);pointer-events:none;
}
.mj-board .tile.free{opacity:1;filter:none;cursor:pointer}
.mj-board .tile.free:hover,.mj-board .tile.free:focus-visible{
  transform:translateY(-4px) scale(1.05);
  box-shadow:8px 12px 0 #5a3e14,8px 12px 0 1px #2e200a,0 20px 28px rgba(0,0,0,.45);
  z-index:80;
}
.mj-board .tile.free:focus-visible{outline:2px solid var(--s-focus,#5aa7ff);outline-offset:2px}
.mj-board .tile.sel{
  box-shadow:0 0 0 3px var(--s-accent,#e8c86a),8px 12px 0 #5a3e14,8px 12px 0 1px #2e200a,0 20px 28px rgba(0,0,0,.45);
  transform:translateY(-5px) scale(1.06);z-index:90;opacity:1;filter:none;
}
.mj-board .tile.hint{box-shadow:0 0 0 3px var(--s-good,#4e6a46),6px 7px 0 #6a4a18,0 12px 20px rgba(0,0,0,.35);animation:mjPulse 1s ease 2;filter:none;opacity:1}
.mj-board .tile.burst{animation:mjBurst .42s var(--s-ease,ease) forwards;pointer-events:none;z-index:100}
@keyframes mjPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
@keyframes mjBurst{0%{transform:scale(1.05);opacity:1}60%{transform:scale(1.35);opacity:.7}100%{transform:scale(.4);opacity:0}}
.mj-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0;align-items:center}
.mj-toolbar select,.mj-toolbar button,.mj-toolbar .tool{
  min-height:44px;border-radius:12px;padding:8px 14px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.16);color:#f4ead8;font:600 13px var(--s-font,system-ui);cursor:pointer;
  touch-action:manipulation;
}
.mj-toolbar select{background:#1a3020;color:#f4ead8}
.mj-toolbar button:focus-visible,.mj-toolbar select:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.mj-toolbar button:active{transform:scale(.97)}
body:not(.room-mahjong) .mj-toolbar select,body:not(.room-mahjong) .mj-toolbar button{
  background:var(--s-surface,#fff);color:var(--s-ink,#2a241c);border-color:var(--s-line,#e0d2b8);
}
.game.room-mahjong .mj-toolbar select{background:#1a3020;color:#f4ead8;border-color:#3a5a40}
.game.room-mahjong .mj-toolbar button,.game.room-mahjong .mj-toolbar .tool{
  background:rgba(255,255,255,.18);color:#f4ead8;border-color:rgba(255,255,255,.25);
}

/* —— Daily Word —— */
.wd-box{max-width:360px;margin:0 auto}
.wd-mode{display:flex;gap:8px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.wd-mode button{
  border:0;border-radius:999px;min-height:44px;padding:8px 16px;font:600 13px var(--s-font,system-ui);
  background:var(--s-bg-2,#e8dcc8);color:var(--s-ink,#2a241c);cursor:pointer;touch-action:manipulation;
}
.wd-mode button.on{background:var(--s-good,#6aaa64);color:#fff}
.wd-mode button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.wd-hard{display:flex;align-items:center;gap:8px;justify-content:center;font:600 13px var(--s-font,system-ui);margin:6px 0;min-height:44px}
.wd-guesses{display:grid;gap:6px;margin:8px 0}
.wd-guesses .grow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wd-guesses .gcell{
  height:54px;min-height:44px;border-radius:10px;display:grid;place-items:center;
  font:700 22px var(--s-display,Fraunces,Georgia,serif);background:var(--s-surface,#fff);
  border:2px solid #ddd2be;text-transform:uppercase;color:var(--s-ink,#2a241c);
  transition:transform var(--s-dur,180ms) var(--s-spring),background var(--s-dur),border-color var(--s-dur);
}
.wd-guesses .gcell.filled{animation:wdPop var(--s-dur-slow,320ms) var(--s-spring)}
.wd-guesses .gcell.flip{animation:wdFlip .5s var(--s-ease) forwards}
.wd-guesses .gcell.g{background:#6aaa64;color:#fff;border-color:#6aaa64}
.wd-guesses .gcell.y{background:#c9b458;color:#fff;border-color:#c9b458}
.wd-guesses .gcell.n{background:#787c7e;color:#fff;border-color:#787c7e}
.wd-guesses .gcell.shake{animation:wdShake .45s ease}
.wd-guesses .gcell.winbounce{animation:wdBounce .7s var(--s-spring)}
@keyframes wdPop{0%{transform:scale(.88)}70%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes wdFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes wdBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-10px) scale(1.05)}60%{transform:translateY(3px)}}
@keyframes wdShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.wd-keys{display:flex;flex-direction:column;gap:5px;margin-top:10px;width:100%;box-sizing:border-box}
.wd-keys .krow{display:flex;gap:4px;justify-content:stretch;width:100%}
.wd-keys b,.wd-keys button{
  background:linear-gradient(180deg,#f4ead8,#ddd0b8);border:0;border-radius:8px;min-height:50px;min-width:0;flex:1 1 0;max-width:none;
  display:grid;place-items:center;cursor:pointer;font:700 14px var(--s-font,system-ui);user-select:none;
  color:var(--s-ink,#2a241c);touch-action:manipulation;padding:0;
  box-shadow:0 2px 0 #c4b498,0 4px 10px rgba(42,36,28,.12);
}
.wd-keys b.wide,.wd-keys button.wide{flex:1.45 1 0;max-width:none;min-width:0;font-size:11px;letter-spacing:.02em}
.wd-keys b.g,.wd-keys button.g{background:#6aaa64;color:#fff}
.wd-keys b.y,.wd-keys button.y{background:#c9b458;color:#fff}
.wd-keys b.n,.wd-keys button.n{background:#787c7e;color:#fff}
.wd-keys b:focus-visible,.wd-keys button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.wd-keys b:active,.wd-keys button:active{transform:scale(.97)}
.wd-toast{text-align:center;min-height:22px;font:600 13px var(--s-font,system-ui);color:var(--s-bad,#8a3a2a);margin:4px 0}
.wd-modal-bg{position:fixed;inset:0;background:rgba(20,16,10,.45);display:grid;place-items:center;z-index:200;padding:16px}
.wd-modal{
  background:var(--s-surface,#fff8ec);color:var(--s-ink,#2a241c);border-radius:16px;padding:20px;
  max-width:340px;width:100%;box-shadow:var(--s-shadow-lift);animation:forgeIn .28s var(--s-ease);
}
.wd-modal h3{margin:0 0 8px;font:700 18px var(--s-display,Georgia,serif)}
.wd-dist{display:grid;gap:4px;margin:10px 0}
.wd-dist .bar{display:grid;grid-template-columns:20px 1fr 28px;gap:6px;align-items:center;font:600 12px var(--s-font);font-variant-numeric:tabular-nums}
.wd-dist .bar i{display:block;height:18px;border-radius:4px;background:var(--s-good,#6aaa64);min-width:4px}

/* —— Word Search —— */
.ws-box{max-width:440px;margin:0 auto}
.ws-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0;align-items:center}
.ws-bar select,.ws-bar button{
  min-height:44px;border-radius:12px;padding:8px 12px;border:1px solid var(--s-line,#e0d2b8);
  background:var(--s-surface,#fff);font:600 13px var(--s-font,system-ui);cursor:pointer;color:var(--s-ink);
  touch-action:manipulation;
}
.ws-bar select:focus-visible,.ws-bar button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.ws-grid{display:grid;gap:4px;user-select:none;touch-action:none;margin:8px auto;max-width:100%}
.ws-grid .wcell{
  aspect-ratio:1;min-width:0;min-height:44px;border:0;border-radius:10px;
  background:linear-gradient(#fff,#efe6d4);font:700 14px var(--s-display,Fraunces,Georgia,serif);
  box-shadow:0 2px 0 #d7c9b0;color:var(--s-ink,#2a241c);padding:0;cursor:pointer;
  transition:background var(--s-dur),transform var(--s-dur) var(--s-spring),box-shadow var(--s-dur);
}
.ws-grid .wcell.on{
  background:var(--s-accent,#e8c86a);transform:scale(1.06);
  box-shadow:0 0 0 2px rgba(201,162,74,.5),0 4px 10px rgba(0,0,0,.15);
}
.ws-grid .wcell.trail{background:#f0d78a}
.ws-grid .wcell.found{background:var(--s-good,#6aaa64);color:#fff;animation:wdPop .35s var(--s-spring)}
.ws-grid .wcell:focus-visible{outline:2px solid var(--s-focus);outline-offset:1px}
.ws-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0;font:600 13px var(--s-font,system-ui)}
.ws-list span{padding:8px 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:10px;background:rgba(255,255,255,.65)}
.ws-list span.got{text-decoration:line-through;opacity:.55;background:transparent}

/* —— Mini Crossword —— */
.xc-box{max-width:380px;margin:0 auto}
.xc-board{
  display:grid;grid-template-columns:repeat(5,1fr);gap:3px;max-width:300px;margin:8px auto;
  background:#cbb89a;padding:8px;border-radius:14px;box-shadow:var(--s-shadow);
}
.xc-board .xcell{
  aspect-ratio:1;min-height:52px;background:var(--s-surface,#fff);border:0;border-radius:8px;
  text-align:center;font:700 20px var(--s-display,Fraunces,Georgia,serif);color:var(--s-ink,#2a241c);
  position:relative;cursor:pointer;padding:0;touch-action:manipulation;
  transition:transform var(--s-dur) var(--s-spring),background var(--s-dur),box-shadow var(--s-dur);
}
.xc-board .xcell.blk{background:#2a241c;cursor:default;min-height:52px}
.xc-board .xcell.on{box-shadow:inset 0 0 0 3px var(--s-accent,#e8c86a)}
.xc-board .xcell.hl{background:#f5e6c0}
.xc-board .xcell.bad{color:var(--s-bad,#c43b2e);animation:wdShake .4s ease}
.xc-board .xcell.pop{animation:wdPop .32s var(--s-spring)}
.xc-board .xcell.worddone{background:#d4e8d0;box-shadow:inset 0 0 0 2px var(--s-good,#4e6a46)}
.xc-board .xcell:focus-visible{outline:2px solid var(--s-focus);outline-offset:1px}
.xc-board .xcell .num{position:absolute;top:2px;left:4px;font:700 11px var(--s-font,system-ui);color:#4a3c28}
.xc-clue{
  background:rgba(255,255,255,.82);border-radius:12px;padding:12px 14px;margin:8px 0;
  font:600 14px var(--s-font,system-ui);min-height:48px;cursor:pointer;color:var(--s-ink);
}
.xc-clue b{color:#8a6a2a;margin-right:6px}
.xc-clue:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.xc-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.xc-bar button{
  min-height:44px;border-radius:12px;padding:8px 14px;border:1px solid var(--s-line,#e0d2b8);
  background:var(--s-surface,#fff);font:600 13px var(--s-font,system-ui);cursor:pointer;touch-action:manipulation;
}
.xc-bar button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.xc-bar button:active{transform:scale(.97)}
.xc-keys{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:10px;width:100%}
.xc-keys b,.xc-keys button{
  background:var(--s-surface,#fff);border:0;border-radius:8px;min-height:46px;min-width:0;width:calc((100% - 36px) / 10);
  max-width:42px;flex:1 1 calc((100% - 36px) / 10);
  display:grid;place-items:center;cursor:pointer;font:700 12px var(--s-font,system-ui);
  box-shadow:0 2px 0 #d7c9b0;touch-action:manipulation;color:var(--s-ink);padding:0;
}
.xc-keys b:focus-visible,.xc-keys button:focus-visible{outline:2px solid var(--s-focus);outline-offset:1px}
.xc-keys b:active,.xc-keys button:active{transform:scale(.97)}

.mj-board .tile .mj-face{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* —— Round 3 · in-scope rooms only —— */
/* The header difficulty select is not used by these games; each game has its own level control. */
#play.room-words #difficulty,#play.room-wordle #difficulty,#play.room-cross #difficulty,
#play.room-anagram #difficulty,#play.room-nono #difficulty{display:none}

/* Word Search — printed-sheet grid with ink capsules */
.ws3{--ws-ink0:hsl(42 78% 58%);--ws-ink1:hsl(150 38% 52%);--ws-ink2:hsl(205 62% 60%);--ws-ink3:hsl(8 66% 64%);--ws-ink4:hsl(275 38% 64%);--ws-ink5:hsl(24 80% 60%)}
.ws3 .ws-bar{gap:8px;margin:4px 0 12px}
.ws3 .ws-sel{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--s-font);color:var(--s-ink-2)}
.ws3 .ws-seg{display:inline-flex;padding:3px;border-radius:var(--s-r-pill);background:var(--s-bg-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.ws3 .ws-seg button{min-height:40px;min-width:64px;border:0;border-radius:var(--s-r-pill);background:transparent;color:var(--s-ink-2);font:600 13px var(--s-font);cursor:pointer;padding:0 12px;transition:background var(--s-dur) var(--s-ease),color var(--s-dur) var(--s-ease),transform var(--s-dur) var(--s-ease)}
.ws3 .ws-seg button.on{background:var(--s-surface);color:var(--s-ink);box-shadow:0 2px 6px rgba(42,36,28,.16)}
.ws3 .ws-seg button:active{transform:scale(.97)}
.ws3 .ws-seg button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.ws3 .ws-sheet{
  width:max-content;max-width:100%;margin:0 auto;padding:8px;border-radius:var(--s-r-lg);box-sizing:border-box;
  background:var(--s-surface);border:1px solid var(--s-line);
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%),repeating-linear-gradient(0deg,transparent 0 23px,rgba(42,36,28,.025) 23px 24px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 0 var(--s-line),var(--s-shadow);
}
/* Scroll large word grids within their panel rather than widening the page. */
.ws3 .ws-sheet{overflow-x:auto}
.ws3 .ws-head{min-width:0;flex-wrap:wrap}
body.dark .ws3 .ws-sheet,body.oled .ws3 .ws-sheet{background-image:none}
.ws3 .ws-stack{position:relative;margin:0 auto}
.ws3 .ws-ink{position:absolute;inset:0;pointer-events:none;overflow:visible}
.ws3 .ws-ink line{stroke-linecap:round;fill:none;opacity:.55}
.ws3 .ws-ink line.ink0{stroke:var(--ws-ink0)}.ws3 .ws-ink line.ink1{stroke:var(--ws-ink1)}.ws3 .ws-ink line.ink2{stroke:var(--ws-ink2)}
.ws3 .ws-ink line.ink3{stroke:var(--ws-ink3)}.ws3 .ws-ink line.ink4{stroke:var(--ws-ink4)}.ws3 .ws-ink line.ink5{stroke:var(--ws-ink5)}
.ws3 .ws-ink line.live{stroke:var(--s-accent);opacity:.45}
.ws3 .ws-ink line.live.anchor{opacity:.7}
.ws3 .ws-ink line.fresh{stroke-dasharray:1000;stroke-dashoffset:1000;animation:wsDraw .42s var(--s-ease) forwards}
@keyframes wsDraw{to{stroke-dashoffset:0}}
.ws3 .ws-grid{position:relative;margin:0;gap:2px;touch-action:none}
#play .ws3 .ws-grid .wcell{
  width:var(--ws-sz);height:var(--ws-sz);min-height:0;aspect-ratio:auto;border-radius:50%;background:transparent;box-shadow:none;
  font:600 calc(var(--ws-sz) * .5)/1 var(--s-display);color:var(--s-ink);display:grid;place-items:center;
  transition:transform var(--s-dur) var(--s-spring),color var(--s-dur) var(--s-ease);
}
#play .ws3 .ws-grid .wcell.on{background:transparent;transform:scale(1.14);box-shadow:none;font-weight:800}
#play .ws3 .ws-grid .wcell.found{background:transparent;color:var(--s-ink);animation:none;font-weight:700}
.ws3 .ws-sheet.won .wcell{animation:wsWave .6s var(--s-spring) both}
@keyframes wsWave{0%{transform:none}40%{transform:translateY(-6px) scale(1.12)}100%{transform:none}}
.ws3 .ws-list{gap:6px 8px;margin:14px 0 6px}
.ws3 .ws-list span{min-height:36px;padding:6px 12px;gap:6px;background:var(--s-surface);border:1px solid var(--s-line);border-radius:var(--s-r-pill);font:700 12px var(--s-font);letter-spacing:.06em;color:var(--s-ink);opacity:1;transition:opacity var(--s-dur) var(--s-ease)}
.ws3 .ws-list span i{width:8px;height:8px;border-radius:50%;background:var(--s-line)}
.ws3 .ws-list span.got{text-decoration:line-through;text-decoration-thickness:2px;color:var(--s-mute);background:transparent}
.ws3 .ws-list span.ink0 i{background:var(--ws-ink0)}.ws3 .ws-list span.ink1 i{background:var(--ws-ink1)}.ws3 .ws-list span.ink2 i{background:var(--ws-ink2)}
.ws3 .ws-list span.ink3 i{background:var(--ws-ink3)}.ws3 .ws-list span.ink4 i{background:var(--ws-ink4)}.ws3 .ws-list span.ink5 i{background:var(--ws-ink5)}
.ws3 .ws-win small{font:600 10px var(--s-font);color:var(--s-mute);text-transform:uppercase;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){.ws3 .ws-ink line.fresh{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.ws3 .ws-sheet.won .wcell{animation:none}}
body.reduce .ws3 .ws-ink line.fresh{animation:none;stroke-dasharray:none;stroke-dashoffset:0}

/* Daily Word — R3 */
.wd3{--wd-g:var(--s-good);--wd-y:var(--s-warn);--wd-n:var(--s-mute)}
.wd3 .wd-head{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}
.wd3 .wd-mode{margin:0;padding:3px;border-radius:var(--s-r-pill);background:var(--s-bg-2);gap:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.wd3 .wd-mode button{min-height:40px;background:transparent;color:var(--s-ink-2);padding:0 14px;transition:background var(--s-dur) var(--s-ease),color var(--s-dur)}
.wd3 .wd-mode button.on{background:var(--s-surface);color:var(--s-ink);box-shadow:0 2px 6px rgba(42,36,28,.16)}
.wd3 .wd-mode button small{font:600 11px var(--s-font);color:var(--s-mute)}
.wd3 .wd-hardpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--s-r-pill);border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-ink-2);font:600 13px var(--s-font);cursor:pointer;touch-action:manipulation}
.wd3 .wd-hardpill i{width:26px;height:16px;border-radius:999px;background:var(--s-bg-2);position:relative;transition:background var(--s-dur) var(--s-ease)}
.wd3 .wd-hardpill i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--s-surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--s-dur) var(--s-spring)}
.wd3 .wd-hardpill.on{color:var(--s-ink)}
.wd3 .wd-hardpill.on i{background:var(--s-good)}
.wd3 .wd-hardpill.on i::after{transform:translateX(10px)}
.wd3 .wd-hardpill[aria-disabled=true]{opacity:.6}
.wd3 .wd-hardpill:focus-visible,.wd3 .wd-mode button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.wd3 .wd-toast{min-height:20px;margin:0 0 4px;color:var(--s-ink-2)}
.wd3 .wd-guesses{gap:6px;margin:4px auto 6px;max-width:320px;perspective:600px}
.wd3 .wd-guesses .grow{gap:6px}
#play .wd3 .wd-guesses .gcell{
  height:auto;aspect-ratio:1;min-height:0;border-radius:var(--s-r-sm);background:var(--s-surface);
  border:2px solid var(--s-line);box-shadow:inset 0 -2px 0 rgba(42,36,28,.05);font:700 clamp(22px,7vw,28px)/1 var(--s-display);color:var(--s-ink);
}
#play .wd3 .wd-guesses .gcell.cur{border-color:color-mix(in srgb,var(--s-ink) 16%,transparent)}
#play .wd3 .wd-guesses .gcell.has{border-color:color-mix(in srgb,var(--s-ink) 45%,transparent)}
#play .wd3 .wd-guesses .gcell.g{background:var(--wd-g);border-color:var(--wd-g);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
#play .wd3 .wd-guesses .gcell.y{background:var(--wd-y);border-color:var(--wd-y);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
#play .wd3 .wd-guesses .gcell.n{background:var(--wd-n);border-color:var(--wd-n);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.wd3 .wd-guesses .gcell.flip{animation:wdFlip .46s var(--s-ease) forwards}
.wd3 .wd-guesses .gcell.winbounce{animation:wdBounce .72s var(--s-spring) both}
.wd3 .wd-keys{gap:6px;margin-top:8px}
.wd3 .wd-keys .krow{gap:5px}
#play .wd3 .wd-keys button{
  min-height:52px;border-radius:var(--s-r-sm);background:var(--s-surface);color:var(--s-ink);font:700 15px var(--s-font);
  border:1px solid var(--s-line);box-shadow:0 2px 0 var(--s-line),0 3px 8px rgba(42,36,28,.08);
  transition:transform 90ms var(--s-ease),background var(--s-dur) var(--s-ease),color var(--s-dur);
}
#play .wd3 .wd-keys button:active{transform:translateY(1px) scale(.97);box-shadow:0 1px 0 var(--s-line)}
#play .wd3 .wd-keys button.wide{font-size:12px}
#play .wd3 .wd-keys button.g{background:var(--wd-g);color:#fff;border-color:transparent}
#play .wd3 .wd-keys button.y{background:var(--wd-y);color:#fff;border-color:transparent}
#play .wd3 .wd-keys button.n{background:var(--wd-n);color:#fff;border-color:transparent;opacity:.85}
.wd3 .wd-win h3{font-size:22px}
.wd3 .wd-reveal{display:flex;gap:6px;justify-content:center;margin:8px 0}
.wd3 .wd-reveal b{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--s-r-sm);background:var(--wd-g);color:#fff;font:700 20px var(--s-display);animation:s-pop var(--s-dur-slow) var(--s-spring) both}
.wd3 .wd-next{font:600 12px var(--s-font)!important;color:var(--s-mute)!important}
@media (max-height:760px){#play .wd3 .wd-keys button{min-height:46px}.wd3 .wd-guesses{max-width:280px}}
@media (prefers-reduced-motion:reduce){.wd3 .wd-guesses .gcell.winbounce,.wd3 .wd-reveal b{animation:none}}
body.dark .wd3,body.oled .wd3{--wd-n:color-mix(in srgb,var(--s-mute) 42%,var(--s-bg))}

/* Mini Crossword — R3 */
.xc3{max-width:380px}
.xc3 .xc-sub{text-align:center;font:600 12px var(--s-font);color:var(--s-mute);margin:0 0 6px;letter-spacing:.04em}
#play .xc3 .xc-board{
  max-width:300px;gap:0;padding:0;border-radius:var(--s-r);overflow:hidden;background:var(--s-ink);
  border:2px solid var(--s-ink);box-shadow:var(--s-shadow);
}
#play .xc3 .xc-board .xcell{
  min-height:0;border-radius:0;background:var(--s-surface);box-shadow:inset -1px -1px 0 color-mix(in srgb,var(--s-ink) 30%,transparent);
  font:600 clamp(22px,7vw,30px)/1 var(--s-display);color:var(--s-ink);display:grid;place-items:center;
  transition:background var(--s-dur) var(--s-ease),color var(--s-dur);
}
#play .xc3 .xc-board .xcell .ch{display:block;transform:translateY(3px)}
#play .xc3 .xc-board .xcell .num{top:3px;left:4px;font:700 10px var(--s-font);color:var(--s-ink-2)}
#play .xc3 .xc-board .xcell.hl{background:color-mix(in srgb,var(--s-focus) 16%,var(--s-surface))}
#play .xc3 .xc-board .xcell.on{background:var(--s-accent);box-shadow:inset -1px -1px 0 color-mix(in srgb,var(--s-ink) 30%,transparent)}
#play .xc3 .xc-board .xcell.worddone .ch{color:var(--s-good)}
#play .xc3 .xc-board .xcell.worddone{background:var(--s-surface)}
#play .xc3 .xc-board .xcell.worddone.hl{background:color-mix(in srgb,var(--s-focus) 16%,var(--s-surface))}
#play .xc3 .xc-board .xcell.worddone.on{background:var(--s-accent)}
#play .xc3 .xc-board .xcell.wrong .ch{color:var(--s-bad)}
#play .xc3 .xc-board .xcell.wrong::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;background:var(--s-bad);transform:rotate(-20deg);opacity:.7}
#play .xc3 .xc-board .xcell.rev::before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent var(--s-bad) transparent transparent;opacity:.8}
#play .xc3 .xc-board .xcell.pop .ch{animation:wdPop .3s var(--s-spring)}
#play .xc3 .xc-board.won .xcell{animation:xcWave .7s var(--s-spring) both;background:color-mix(in srgb,var(--s-good) 18%,var(--s-surface))}
#play .xc3 .xc-board.won .xcell .ch{color:var(--s-ink)}
@keyframes xcWave{0%{transform:none}35%{transform:scale(.9)}70%{transform:scale(1.04)}100%{transform:none}}
.xc3 .xc-cluebar{display:flex;align-items:stretch;gap:6px;margin:10px 0 6px}
.xc3 .xc-nav{flex:0 0 44px;min-height:52px;border:0;border-radius:var(--s-r);background:var(--s-bg-2);color:var(--s-ink);font:700 22px var(--s-font);cursor:pointer;touch-action:manipulation}
.xc3 .xc-nav:active{transform:scale(.95)}
.xc3 .xc-nav:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
#play .xc3 .xc-clue{flex:1;margin:0;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--s-focus) 14%,var(--s-surface));border-radius:var(--s-r);padding:8px 12px;min-height:52px;box-sizing:border-box;font:600 15px/1.25 var(--s-font);color:var(--s-ink)}
#play .xc3 .xc-clue b{color:var(--s-ink);margin:0;font:800 14px var(--s-font);flex:0 0 auto}
#play .xc3 .xc-clue span{flex:1}
#play .xc3 .xc-clue em{font:600 10px var(--s-font);font-style:normal;color:var(--s-mute);white-space:nowrap}
.xc3 .xc-reveal{display:flex;gap:6px;justify-content:center;margin:6px 0;animation:forgeIn var(--s-dur) var(--s-ease)}
.xc3 .xc-reveal button{min-height:44px;padding:0 14px;border-radius:var(--s-r-pill);border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-ink);font:600 13px var(--s-font);cursor:pointer}
.xc3 .xc-keys{flex-direction:column;flex-wrap:nowrap;gap:6px;margin-top:6px}
.xc3 .xc-keys .krow{display:flex;gap:5px;justify-content:center;width:100%}
#play .xc3 .xc-keys button{
  flex:1 1 0;width:auto;max-width:40px;min-height:48px;border-radius:var(--s-r-sm);background:var(--s-surface);color:var(--s-ink);
  font:700 15px var(--s-font);border:1px solid var(--s-line);box-shadow:0 2px 0 var(--s-line),0 3px 8px rgba(42,36,28,.08);
}
#play .xc3 .xc-keys button.wide{flex:1.5 1 0;max-width:62px;font-size:18px}
#play .xc3 .xc-keys button:active{transform:translateY(1px) scale(.97)}
.xc3 .xc-win small{font:600 10px var(--s-font);color:var(--s-mute);text-transform:uppercase;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){#play .xc3 .xc-board.won .xcell{animation:none}}
#play .xc3 .xc-board .xcell.on .num,#play .xc3 .xc-board .xcell.on .ch{color:#241c14}

/* —— Round 4 · shared in-game stats/options sheet (used by the in-scope rooms only) —— */
.gx-modal .wd-modal{max-width:380px;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.gx-modal h3{margin:0 0 10px}
.gx-sec{margin:0 0 12px;padding:10px;border-radius:12px;background:var(--s-bg-2,#f3ead8);border:1px solid transparent}
.gx-sec.cur{border-color:color-mix(in srgb,var(--s-accent) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--s-accent) 35%,transparent)}
.gx-sec h4{margin:0 0 8px;font:700 13px var(--s-font);color:var(--s-ink);display:flex;justify-content:space-between;align-items:baseline}
.gx-sec h4 small{font:600 10px var(--s-font);color:var(--s-mute);text-transform:uppercase;letter-spacing:.08em}
.gx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.gx-tiles span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:9px;background:var(--s-surface);font:600 9.5px var(--s-font);color:var(--s-mute);text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.15}
.gx-tiles b{font:700 16px var(--s-display,Georgia,serif);color:var(--s-ink);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.gx-note{margin:4px 0 10px;font:500 12px/1.4 var(--s-font);color:var(--s-mute)}
.gx-opts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.gx-chip{min-height:40px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-ink-2);font:600 12.5px var(--s-font);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--s-dur) var(--s-ease),color var(--s-dur)}
.gx-chip::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;opacity:.7;flex:none}
.gx-chip[aria-pressed="true"]{background:var(--s-ink);color:var(--s-surface);border-color:transparent}
.gx-chip[aria-pressed="true"]::before{content:"✓";opacity:1;display:grid;place-items:center;background:var(--s-surface);color:var(--s-ink);border-color:var(--s-surface);font:800 11px/1 var(--s-font)}
.gx-chip:focus-visible,.gx-pill:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.gx-chip:active,.gx-pill:active{transform:scale(.97)}
.gx-dist{display:grid;gap:4px;margin:6px 0 10px}
.gx-dist .bar{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:center;font:700 12px var(--s-font);font-variant-numeric:tabular-nums}
.gx-dist .bar i{display:block;height:20px;border-radius:5px;background:var(--s-mute);min-width:22px;color:#fff;font:700 11px/20px var(--s-font);font-style:normal;text-align:right;padding-right:6px;box-sizing:border-box;transition:width .5s var(--s-ease)}
.gx-dist .bar.now i{background:var(--s-good)}
.gx-pill{min-height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.18);color:inherit;font:700 11.5px var(--s-font);cursor:pointer;letter-spacing:.02em}

/* Word Search — R4: progress, hint glow */
.ws3 .ws-prog{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;max-width:420px;margin:12px auto 0;padding:0 4px;font:600 12px var(--s-font);color:var(--s-ink-2);font-variant-numeric:tabular-nums}
.ws3 .ws-prog b{font:700 15px var(--s-display);color:var(--s-ink)}
.ws3 .ws-prog i{display:block;height:8px;border-radius:999px;background:var(--s-bg-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);overflow:hidden}
.ws3 .ws-prog em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--s-accent),var(--s-good));transition:width .5s var(--s-spring)}
.ws3 .ws-prog span:last-child{color:var(--s-mute);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
#play .ws3 .ws-grid .wcell.hint{color:#241c14;background:color-mix(in srgb,var(--s-accent) 70%,var(--s-surface));box-shadow:0 0 0 2px var(--s-accent);border-radius:50%;animation:wsHint 1.3s var(--s-ease) infinite}
@keyframes wsHint{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ws3 .ws-list span.hinted{border-color:var(--s-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--s-accent) 40%,transparent)}
@media (prefers-reduced-motion:reduce){#play .ws3 .ws-grid .wcell.hint{animation:none}}

/* Daily Word — R4: stats tabs, share, high-contrast colours */
.wd3.hc{--wd-g:#f5793a;--wd-y:#4f9ee8}
.gx-modal .wd-tabs{display:flex;padding:3px;margin:0 0 10px;border-radius:var(--s-r-pill);background:var(--s-bg-2);width:max-content}
.gx-modal .wd-tabs button{min-height:36px;padding:0 16px;border:0;border-radius:var(--s-r-pill);background:transparent;color:var(--s-ink-2);font:600 13px var(--s-font);cursor:pointer}
.gx-modal .wd-tabs button[aria-selected="true"]{background:var(--s-surface);color:var(--s-ink);box-shadow:0 2px 6px rgba(42,36,28,.16)}
.gx-modal .wd-dlabel{margin:12px 0 4px;font:700 12px var(--s-font);color:var(--s-ink);text-transform:uppercase;letter-spacing:.08em}
.gx-modal .wd-count b{color:var(--s-ink);font-variant-numeric:tabular-nums}
.wd-mbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 4px}
.wd-mbtns .forge-tone{margin:0}
.wd-mbtns .wd-sharebtn{background:var(--s-good);color:#fff;border-color:transparent}
.wd3.hc .wd-mbtns .wd-sharebtn{background:#f5793a}
.wd-sharetext{width:100%;box-sizing:border-box;font:600 14px/1.3 ui-monospace,monospace;padding:10px;border-radius:10px;border:1px solid var(--s-line);background:var(--s-bg-2);color:var(--s-ink);margin:0 0 10px;resize:none}

/* Mini Crossword — R4: header, check/reveal/options rows, clue list */
.xc3 .xc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.xc3 .xc-head .xc-sub{margin:0;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc3 .xc-mode{display:inline-flex;padding:3px;border-radius:var(--s-r-pill);background:var(--s-bg-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.xc3 .xc-mode button{min-height:36px;padding:0 12px;border:0;border-radius:var(--s-r-pill);background:transparent;color:var(--s-ink-2);font:600 12.5px var(--s-font);cursor:pointer}
.xc3 .xc-mode button.on{background:var(--s-surface);color:var(--s-ink);box-shadow:0 2px 6px rgba(42,36,28,.16)}
.xc3 .xc-statbtn{min-height:36px;padding:0 12px;border-radius:var(--s-r-pill);border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-ink);font:600 12.5px var(--s-font);cursor:pointer}
.xc3 .xc-mode button:focus-visible,.xc3 .xc-statbtn:focus-visible,.xc3 .xc-reveal button:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.xc3 .xc-reveal{flex-wrap:wrap;align-items:center}
.xc3 .xc-reveal span{font:700 11px var(--s-font);color:var(--s-mute);text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
.xc3 .xc-reveal{gap:5px;margin:4px 0}
.xc3 .xc-reveal button{min-height:40px;padding:0 10px;font-size:12.5px}
.xc3 .xc-reveal button[aria-label="Close"]{width:38px;padding:0;flex:0 0 auto}
.xc3 .xc-reveal .xc-tog::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;border:1.5px solid currentColor;vertical-align:-1px;opacity:.7}
.xc3 .xc-reveal .xc-tog[aria-pressed="true"]{background:var(--s-ink);color:var(--s-surface);border-color:transparent}
.xc3 .xc-reveal .xc-tog[aria-pressed="true"]::before{content:"✓";font:800 10px/12px var(--s-font);text-align:center;background:var(--s-surface);color:var(--s-ink);border-color:var(--s-surface);opacity:1}
.gx-modal .xc-ch{margin:10px 0 6px;font:700 12px var(--s-font);text-transform:uppercase;letter-spacing:.08em;color:var(--s-mute)}
.gx-modal .xc-cl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.gx-modal .xc-cl button{width:100%;display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:baseline;text-align:left;min-height:40px;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:var(--s-bg-2);color:var(--s-ink);font:500 14px/1.3 var(--s-font);cursor:pointer}
.gx-modal .xc-cl button b{font:700 13px var(--s-font);color:var(--s-ink-2)}
.gx-modal .xc-cl button.cur{border-color:var(--s-accent);background:color-mix(in srgb,var(--s-accent) 14%,var(--s-surface))}
.gx-modal .xc-cl button.full{opacity:.62}
.gx-modal .xc-cl button:focus-visible{outline:2px solid var(--s-focus);outline-offset:1px}
.gx-chip.gx-plain{padding:0 14px}.gx-chip.gx-plain::before{display:none}

/* —— Round 5 · Daily Word archive —— */
.wd-alist{display:flex;flex-direction:column;gap:6px;max-height:min(52vh,420px);overflow:auto;margin:6px 0 12px;padding:2px}
.wd-arow{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--s-r);border:1px solid var(--s-line);background:var(--s-bg-2);color:var(--s-ink);font:600 13px var(--s-font);text-align:left;cursor:pointer}
.wd-arow:hover{background:color-mix(in srgb,var(--s-accent) 14%,var(--s-bg-2))}
.wd-arow:focus-visible{outline:2px solid var(--s-focus);outline-offset:2px}
.wd-arow span:first-child{font-variant-numeric:tabular-nums;color:var(--s-ink-2)}
.wd-arow b{font:700 12px var(--s-font);padding:4px 10px;border-radius:var(--s-r-pill)}
.wd-arow b.ok{background:#6aaa64;color:#fff}.wd-arow b.x{background:#787c7e;color:#fff}.wd-arow b.new{background:var(--s-accent);color:#241c14}
.wd3.hc .wd-arow b.ok{background:#f5793a}

/* —— Round 5: Word Search daily grid —— */
.ws3 .ws-bar .ws-daily{border-radius:var(--s-r-pill);padding:0 16px;min-height:40px;display:inline-flex;align-items:center;gap:6px}
.ws3 .ws-bar .ws-daily::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-line,#d9cbb2);transition:background var(--s-dur) var(--s-ease)}
.ws3 .ws-bar .ws-daily[aria-pressed="true"]{background:var(--s-accent);border-color:transparent;color:#241c14}
.ws3 .ws-bar .ws-daily[aria-pressed="true"]::before{background:#241c14}
.ws3.daily .ws-seg{opacity:.55}
@media (max-width:400px){.ws3 .ws-sel>span{display:none}.ws3 .ws-seg button{min-width:56px;padding:0 10px}}

/* —— Round 5: Mini Crossword word-complete shimmer —— */
#play .xc3 .xc-board .xcell.shine{overflow:hidden}
#play .xc3 .xc-board .xcell.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:xcShine .6s ease-out var(--sh,0ms) forwards;pointer-events:none}
#play .xc3 .xc-board .xcell.shine .ch{animation:xcLift .45s var(--s-spring) var(--sh,0ms) both}
@keyframes xcShine{to{transform:translateX(120%)}}
@keyframes xcLift{40%{transform:translateY(0) scale(1.18)}100%{transform:translateY(3px) scale(1)}}
body.dark #play .xc3 .xc-board .xcell.shine::after,[data-theme="dark"] #play .xc3 .xc-board .xcell.shine::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%)}
@media (prefers-reduced-motion:reduce){#play .xc3 .xc-board .xcell.shine::after,#play .xc3 .xc-board .xcell.shine .ch{animation:none}}


/* Keep intrinsically sized puzzle sheets inside the known stage width. */
#stage .ws-box{width:100%;min-width:0;box-sizing:border-box}
#stage .ws3 .ws-sheet{width:100%;max-width:100%;overflow-x:auto}
#stage .ws3 .ws-sel{min-width:0;max-width:100%}
#stage .ws3 .ws-sel select{min-width:0;max-width:100%}
#stage .ws3 .ws-prog{grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto)}

/* Let progress text wrap rather than forcing a phone-width puzzle off screen. */
#stage .ws3 .ws-prog{width:100%;max-width:100%;min-width:0;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(20px,1fr) minmax(0,1fr)}
#stage .ws3 .ws-prog span{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Narrow-phone Word Search containment.
   Keep its controls and ink sheet independently scrollable instead of letting
   intrinsically wide theme/progress/word labels widen the whole game stage. */
#play.room-words #stage .ws-box{
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  overflow-x:auto;overscroll-behavior-x:contain;
}
#play.room-words #stage .ws-bar,
#play.room-words #stage .ws-list,
#play.room-words #stage .ws-prog{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;
}
#play.room-words #stage .ws-list > span{max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:420px){
  #play.room-words #stage .ws-bar{gap:6px}
  #play.room-words #stage .ws-seg{max-width:100%;flex-wrap:wrap;justify-content:center}
  #play.room-words #stage .ws-seg button{min-width:0;padding-inline:10px}
  #play.room-words #stage .ws-sel select{max-width:min(100%,230px)}
}