:root{
  --bg0:#120804; --bg1:#2b1207; --bg2:#4a240d; --wood:#613117; --wood2:#9a5a25;
  --panel:rgba(18,10,5,.92); --panel2:rgba(36,20,10,.94);
  --gold:#f2c36a; --gold2:#b97926; --cream:#fff0c8; --muted:#bda072;
  --line:rgba(244,194,101,.33); --glow:rgba(255,174,58,.42);
  --blue:#1765a8; --purple:#702d98; --danger:#a92d23; --good:#4ad27b;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;color:var(--cream);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 5% 92%,rgba(255,170,55,.35),transparent 18%),
    radial-gradient(circle at 75% 22%,rgba(255,165,54,.18),transparent 30%),
    linear-gradient(90deg,rgba(0,0,0,.65),transparent 15%,transparent 85%,rgba(0,0,0,.65)),
    repeating-linear-gradient(88deg,rgba(255,220,150,.025) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,#321507,#100703);
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 36px,rgba(255,214,122,.025) 37px,transparent 41px),
    radial-gradient(circle at 50% -10%,rgba(255,204,105,.14),transparent 34%);
}
body:after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 35%,rgba(0,0,0,.45));
}
.ambientGlow{position:fixed;left:-160px;bottom:-160px;width:440px;height:440px;z-index:-1;background:radial-gradient(circle,rgba(255,173,59,.42),transparent 68%);filter:blur(6px)}
.hidden{display:none!important}
button,input,select{font:inherit}
button{cursor:pointer}
.vaultTopbar{
  height:92px;display:grid;grid-template-columns:320px 1fr 320px;align-items:center;gap:16px;
  padding:12px 22px;background:linear-gradient(180deg,rgba(22,10,5,.98),rgba(9,5,3,.92));
  border-bottom:1px solid rgba(255,198,97,.28);box-shadow:0 14px 36px rgba(0,0,0,.55);
  position:sticky;top:0;z-index:50;
}
.vaultTopbar:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg,transparent,rgba(255,181,63,.55),transparent)}
.topLeftCluster,.topRightCluster{display:flex;align-items:center;gap:12px}
.topRightCluster{justify-content:flex-end}
.iconBtn,.circleBtn,.roomPlate{
  color:var(--gold);background:linear-gradient(180deg,rgba(52,28,13,.95),rgba(15,8,4,.95));
  border:1px solid rgba(255,203,105,.4);box-shadow:inset 0 1px 0 rgba(255,240,190,.12),0 8px 18px rgba(0,0,0,.38)
}
.iconBtn{width:58px;height:58px;border-radius:13px;font-size:30px}
.circleBtn{width:56px;height:56px;border-radius:50%;font-size:24px}
.circleBtn.muted{opacity:.55}
.roomPlate{
  min-width:174px;height:62px;border-radius:14px;text-align:left;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  padding:10px 14px;column-gap:10px;
}
.roomPlate span{text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:#d3a45e}
.roomPlate strong{font-family:Georgia,serif;font-size:27px;letter-spacing:.1em;line-height:1}
.roomPlate em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:24px}
.brandPlate{
  justify-self:center;min-width:480px;height:76px;display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:Georgia,serif;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 0 #4d2509,0 0 24px rgba(255,180,55,.35);
  background:linear-gradient(180deg,rgba(55,28,11,.95),rgba(13,7,3,.96));border:1px solid rgba(255,203,108,.3);
  border-radius:0 0 30px 30px;box-shadow:inset 0 1px 0 rgba(255,237,185,.12),0 14px 28px rgba(0,0,0,.42)
}
.brandWord{font-size:48px;font-weight:800;letter-spacing:.07em}
.brandSeal{width:56px;height:62px;display:grid;place-items:center;border:2px solid rgba(255,211,117,.72);border-radius:14px 14px 26px 26px;background:linear-gradient(180deg,#8d571e,#211006);font-size:38px}
main{width:min(1920px,100%);margin:0 auto;padding:18px 22px 28px}
.homePanel,.screen{min-height:calc(100vh - 128px);display:grid;place-items:center;gap:22px}
.homePanel{grid-template-columns:minmax(430px,570px) minmax(320px,520px);align-items:center}
.heroCard,.featureBoard,.woodPanel,.setupCard,.endCard,.leftCommand,.railPanel,.turnPanel,.playerRack,.currentCard{
  background:
    linear-gradient(180deg,rgba(43,23,11,.96),rgba(13,8,5,.96)),
    radial-gradient(circle at 28% 0,rgba(255,184,68,.13),transparent 44%);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,235,180,.1),inset 0 0 0 2px rgba(0,0,0,.25),0 22px 42px rgba(0,0,0,.42);
}
.heroCard,.featureBoard,.woodPanel,.setupCard,.endCard{padding:26px}
.heroCard h1,.lobbyHeader h1,.setupCard h1,.endCard h1{
  font-family:Georgia,serif;color:var(--gold);font-size:44px;margin:0 0 10px;text-shadow:0 0 20px rgba(255,181,58,.23)
}
h2,h3{font-family:Georgia,serif;color:var(--gold);margin:0 0 12px;letter-spacing:.04em}
p{line-height:1.5;color:#d9c29e}
.featureGrid{display:grid;gap:14px}
.featureGrid div{padding:15px;border-radius:14px;background:rgba(255,230,170,.06);border:1px solid rgba(255,195,94,.16)}
.featureGrid strong{display:block;color:var(--gold);font-family:Georgia,serif;font-size:18px}
.featureGrid span{display:block;color:var(--muted);margin-top:4px}
label{display:block;margin:14px 0 7px;color:#e7cb94;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.1em}
input,select{
  width:100%;color:var(--cream);background:linear-gradient(180deg,rgba(33,23,14,.96),rgba(8,6,4,.96));
  border:1px solid rgba(247,199,105,.32);border-radius:12px;padding:13px 14px;outline:none;box-shadow:inset 0 2px 8px rgba(0,0,0,.38)
}
input:focus,select:focus{border-color:rgba(255,207,108,.75);box-shadow:0 0 0 3px rgba(255,180,65,.15),inset 0 2px 8px rgba(0,0,0,.38)}
.buttonRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.primaryGameBtn,.secondaryGameBtn,.blueBtn,.purpleBtn,.dangerBtn,.ghostBtn{
  min-height:46px;border-radius:12px;padding:12px 18px;color:var(--cream);font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid rgba(255,222,146,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.35),0 10px 18px rgba(0,0,0,.28);
  transition:transform .12s ease,filter .12s ease
}
.primaryGameBtn:hover,.secondaryGameBtn:hover,.blueBtn:hover,.purpleBtn:hover,.dangerBtn:hover,.ghostBtn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.primaryGameBtn{background:linear-gradient(180deg,#d8983a,#76400d 58%,#4e2708)}
.secondaryGameBtn{background:linear-gradient(180deg,#513018,#1d1008)}
.blueBtn{width:100%;margin-top:13px;background:linear-gradient(180deg,#2d8cdb,#155183 62%,#0a2a4b);font-family:Georgia,serif;font-size:18px}
.purpleBtn{width:100%;margin-top:13px;background:linear-gradient(180deg,#9350c5,#572380 62%,#2c1048);font-family:Georgia,serif;font-size:18px}
.dangerBtn{width:100%;margin-top:13px;background:linear-gradient(180deg,#b94333,#651914)}
.ghostBtn{background:rgba(255,230,180,.05)}
.hugeBtn{font-size:18px;padding:15px 24px}
.divider{display:flex;align-items:center;gap:10px;margin:22px 0 10px;color:#a78453;text-transform:uppercase;letter-spacing:.16em;font-size:12px}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,202,101,.35),transparent)}
.smallDivider{margin:14px 0 4px}.tinyCaps{text-transform:uppercase;letter-spacing:.14em;color:#c99a55;font-size:12px;font-weight:900}.centerText{text-align:center;margin-top:16px}
.hint,.small{color:var(--muted);font-size:13px}.notice{border:1px solid rgba(255,202,95,.32);background:rgba(255,205,90,.12);padding:12px 14px;border-radius:14px;color:#ecd5a9}
.goodText{color:#6bed97;font-weight:900}.dangerText{color:#ff7167;font-weight:900}
.lobbyShell{width:min(1120px,100%)}.lobbyHeader{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px;padding:22px 26px;border-radius:22px;background:rgba(11,6,4,.55);border:1px solid var(--line)}
.bigRoomCode{font-family:Georgia,serif;color:var(--gold);font-size:48px;letter-spacing:.12em;padding:14px 18px;border-radius:16px;border:1px dashed rgba(255,214,132,.6);background:rgba(0,0,0,.18)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}.twoUp{grid-template-columns:repeat(2,minmax(310px,1fr))}.lobbyStart{display:flex;justify-content:center;margin-top:22px}
.playerList{list-style:none;padding:0;margin:0}.playerList li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,210,120,.16)}.playerList li:last-child{border-bottom:0}
.hostTag,.scoreInfo em{display:inline-block;font-style:normal;font-size:10px;color:#d9ffbf;background:rgba(67,179,70,.22);border:1px solid rgba(116,240,112,.35);border-radius:999px;padding:2px 7px;margin-left:6px}
.smallBtn{padding:7px 10px;min-height:32px;font-size:12px}
.setupShell{width:min(1200px,100%);display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}.bigReady{font-size:22px}.readyPanel{position:sticky;top:112px}
.gameScreen{padding:0}.gameHud{height:calc(100vh - 128px);min-height:760px;display:grid;grid-template-columns:340px minmax(640px,1fr) 340px;gap:16px}
.leftCommand,.rightRail,.centerBoard{min-height:0}.leftCommand{padding:20px;align-self:stretch;overflow:auto}
.rightRail{display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-height:0}.railPanel{padding:16px;min-height:0;overflow:hidden}.railPanel:nth-child(2){overflow:auto}
.centerBoard{display:flex;flex-direction:column;gap:13px;min-width:0}
.matchStrip{height:58px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.matchPill,.timerPill{height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(43,24,12,.93),rgba(13,8,5,.96));box-shadow:inset 0 1px 0 rgba(255,230,170,.08),0 12px 18px rgba(0,0,0,.24);color:#dfbd78;text-transform:uppercase;letter-spacing:.08em}
.timerPill{min-width:210px;color:var(--gold);font-family:Georgia,serif;font-size:32px}.timerPill.hot{box-shadow:0 0 30px rgba(255,165,49,.2)}.timerPill.danger{color:#ff746b;animation:pulseDanger .7s infinite alternate}.greenDot{width:10px;height:10px;border-radius:50%;background:#67e66a;box-shadow:0 0 14px #67e66a}
.pendingBanner{border:1px solid rgba(255,212,102,.44);border-radius:14px;background:rgba(255,198,71,.13);padding:10px 14px;color:#ffe2a8}
.boardAndCard{flex:1;min-height:0;display:grid;grid-template-columns:minmax(540px,1fr) 265px;gap:16px;align-items:center}
.trayTheater{display:flex;flex-direction:column;justify-content:center;gap:18px;min-width:0}
.playerRack{position:relative;padding:28px 18px 14px;background:linear-gradient(180deg,rgba(109,54,20,.92),rgba(49,24,10,.96));border-radius:18px;border-color:rgba(255,186,81,.5)}
.playerRack:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,216,127,.22);border-radius:13px;pointer-events:none}
.playerRack.activeRack{box-shadow:0 0 0 2px rgba(255,206,93,.35),0 0 38px rgba(255,167,47,.28),0 22px 42px rgba(0,0,0,.42)}
.rackNameplate{position:absolute;top:-10px;left:50%;transform:translateX(-50%);min-width:170px;text-align:center;padding:5px 16px;border-radius:8px;background:linear-gradient(180deg,#d9a34d,#8c561c);border:1px solid rgba(255,233,166,.55);box-shadow:0 4px 12px rgba(0,0,0,.35);font-family:Georgia,serif;color:#2a1405;font-size:20px;font-weight:900;text-transform:uppercase}.rackNameplate span{font-family:Inter,sans-serif;font-size:10px;background:#244d1d;color:#c8ffbd;border-radius:999px;padding:2px 6px;vertical-align:middle}
.wordRack{display:grid;grid-template-columns:repeat(12,minmax(38px,1fr));gap:7px}.previewRack{margin-top:14px}
.slotShell{text-align:center}.slotValue{font-size:11px;color:#d6ad67;margin-bottom:4px;font-weight:900}
.slotTile{width:100%;aspect-ratio:1/1.08;border-radius:10px;border:1px solid rgba(255,197,93,.32);display:grid;place-items:center;color:#ffefc6;font-family:Georgia,serif;font-size:clamp(23px,2.8vw,43px);font-weight:900;text-shadow:0 0 16px rgba(255,208,120,.55);box-shadow:inset 0 1px 0 rgba(255,246,200,.08),inset 0 -8px 20px rgba(0,0,0,.25),0 8px 14px rgba(0,0,0,.3)}
.coveredTile{color:transparent;background:
  radial-gradient(circle at center,rgba(197,124,42,.28),transparent 22%),
  linear-gradient(135deg,rgba(255,190,88,.08),transparent 38%,rgba(0,0,0,.16)),
  linear-gradient(180deg,#5d2d12,#261107);
}
.coveredTile:before{content:"✥";color:rgba(219,151,62,.32);font-size:26px;text-shadow:none}
.revealedTile{background:linear-gradient(180deg,#7b421c,#3a1a0a)}
.dotTile{font-size:46px;color:#f8dc9f}
.clickableTile{animation:pulseGold 1.1s infinite;outline:3px solid rgba(255,221,112,.7);color:#fff3ca!important}
.rackFooter{display:flex;justify-content:space-between;align-items:center;margin-top:9px}.showOwnLabel{margin:0;text-transform:none;letter-spacing:0;font-weight:600;color:#c8ac78}.showOwnLabel input{width:auto}
.gemRow{display:flex;gap:4px;flex-wrap:wrap}.gemRow span{width:10px;height:10px;transform:rotate(45deg);border:1px solid rgba(255,208,107,.35);background:rgba(0,0,0,.32)}.gemRow span.lit{background:linear-gradient(180deg,#ffd572,#bd741e);box-shadow:0 0 8px rgba(255,196,75,.65)}
.cardDock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:100%}
.currentCard,.activityCard{width:235px;min-height:330px;position:relative;overflow:hidden;padding:18px;border-radius:18px;text-align:center}
.activityCard{background:
  radial-gradient(circle at 50% 25%,rgba(255,193,74,.22),transparent 33%),
  linear-gradient(180deg,#5a2d12,#211007 70%,#0f0804);border:2px solid rgba(255,203,101,.54);box-shadow:0 0 40px rgba(255,167,44,.18),0 24px 40px rgba(0,0,0,.45)}
.activityCard:before{content:"";position:absolute;inset:-55px;background:conic-gradient(from 40deg,transparent,rgba(255,176,57,.15),transparent,rgba(255,224,130,.12),transparent);animation:slowSpin 7s linear infinite}
.activityCard>*{position:relative}.cardIcon{font-family:Georgia,serif;font-size:64px;color:var(--gold);margin:18px 0 8px;text-shadow:0 0 24px rgba(255,196,89,.55)}.activityCard h2{font-size:27px}.activityCard p{font-size:14px;color:#e6cc9f}
.cardDrawn{animation:cardDraw .75s cubic-bezier(.2,.8,.2,1)}
.deckRow{display:flex;gap:18px}.miniDeck{width:86px;height:120px;border-radius:12px;border:1px solid rgba(255,210,119,.32);display:grid;place-items:center;text-align:center;box-shadow:0 12px 22px rgba(0,0,0,.35);background:linear-gradient(180deg,#113b66,#07192b)}.grayDeck{background:linear-gradient(180deg,#444,#161616)}.miniDeck span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid rgba(255,215,132,.42);font-size:20px;font-weight:900;color:var(--gold)}.miniDeck strong{text-transform:uppercase;letter-spacing:.08em;color:#d7af69}
.hintRibbon{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(37,22,13,.95),rgba(11,7,4,.95));box-shadow:0 12px 22px rgba(0,0,0,.3)}.hintRibbon span{font-size:25px}.hintRibbon strong{font-family:Georgia,serif;text-transform:uppercase;color:var(--gold)}.hintRibbon em{font-style:normal;color:#ead0a2}
.commandTitle{font-family:Georgia,serif;color:var(--gold);font-size:28px;text-align:center;text-transform:uppercase;letter-spacing:.04em;margin:4px 0 18px}.guessInputRow{display:grid;grid-template-columns:1fr 78px;gap:10px}.dotButton{border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#513018,#181009);color:#ffe2a8;font-size:28px}.letterKeyboard{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:10px 0}.keyBtn{height:34px;border-radius:7px;background:linear-gradient(180deg,#3a2415,#120b06);border:1px solid rgba(255,205,105,.25);color:#f2d49d;font-weight:800;box-shadow:0 4px 8px rgba(0,0,0,.24)}.wideKey{grid-column:span 2}.tipBox{margin-top:14px;border:1px solid rgba(255,198,100,.24);border-radius:13px;padding:12px;background:rgba(0,0,0,.2);color:#d6b987}
.scoreCards{display:grid;gap:10px}.scoreCard{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:14px;border:1px solid rgba(255,205,110,.18);background:rgba(0,0,0,.2)}.scoreCard.activeScore{border-color:rgba(115,255,111,.5);box-shadow:0 0 18px rgba(94,255,99,.13)}.avatar{width:48px;height:48px;display:inline-grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,hsl(var(--h),60%,35%),hsl(var(--h),70%,18%));border:2px solid rgba(255,209,116,.48);font-weight:900;color:#fff1c9;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 14px rgba(0,0,0,.35)}.avatarWrap{position:relative}.crown{position:absolute;left:-6px;top:-9px;color:#ffd775;text-shadow:0 0 8px rgba(255,190,65,.5)}.scoreInfo strong{display:block;color:#f5dfb5}.scoreValue{font-family:Georgia,serif;color:var(--gold);font-size:25px;font-weight:900}
.activityLog{list-style:none;padding:0;margin:0;display:grid;gap:8px}.activityLog li{padding:8px 0;border-bottom:1px solid rgba(255,202,105,.12);color:#e2ca9e;font-size:14px}.logLetter{color:#70ee80}
.turnPanel{padding:18px;display:grid;grid-template-columns:1fr 68px;gap:12px;align-items:center}.turnPanel h2{text-transform:uppercase}.turnPanel span{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#d89430,#4d250a);border:2px solid rgba(255,220,126,.55);font-size:34px;box-shadow:0 0 20px rgba(255,176,56,.3)}.yourTurn{box-shadow:0 0 0 2px rgba(255,204,91,.25),0 0 35px rgba(255,168,54,.21)}
.toast{position:fixed;right:18px;bottom:18px;max-width:360px;z-index:100;padding:13px 16px;border-radius:14px;background:linear-gradient(180deg,#2b190e,#0d0704);border:1px solid var(--line);box-shadow:0 18px 32px rgba(0,0,0,.45);color:#ffe0a8}
dialog{background:linear-gradient(180deg,#32190b,#100804);color:var(--cream);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:650px;width:calc(100% - 24px);box-shadow:0 24px 50px rgba(0,0,0,.58)}dialog::backdrop{background:rgba(0,0,0,.6)}
.endCard{width:min(900px,100%)}
@keyframes cardDraw{0%{transform:translateY(-70px) rotate(-9deg) scale(.86);opacity:0;filter:blur(4px)}70%{transform:translateY(4px) rotate(2deg) scale(1.03);opacity:1;filter:blur(0)}100%{transform:none}}
@keyframes pulseGold{0%{box-shadow:0 0 0 0 rgba(255,208,95,.45)}70%{box-shadow:0 0 0 10px rgba(255,208,95,0)}100%{box-shadow:0 0 0 0 rgba(255,208,95,0)}}
@keyframes pulseDanger{from{filter:brightness(1)}to{filter:brightness(1.35)}}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@media (max-width:1200px){
  .vaultTopbar{grid-template-columns:240px 1fr 240px}.brandPlate{min-width:360px}.brandWord{font-size:36px}.gameHud{grid-template-columns:300px minmax(520px,1fr) 300px}
  .boardAndCard{grid-template-columns:1fr}.cardDock{flex-direction:row}.currentCard,.activityCard{width:220px;min-height:280px}.deckRow{flex-direction:column}
}
@media (max-width:900px){
  .vaultTopbar{position:static;display:flex;height:auto;flex-wrap:wrap;justify-content:center}.brandPlate{order:-1;width:100%;min-width:0}.homePanel,.twoUp,.setupShell{grid-template-columns:1fr}.gameHud{height:auto;display:flex;flex-direction:column}.leftCommand{order:2}.centerBoard{order:1}.rightRail{order:3}.boardAndCard{grid-template-columns:1fr}.wordRack{grid-template-columns:repeat(6,1fr)}.matchStrip{grid-template-columns:1fr}.timerPill{min-width:0}.cardDock{flex-direction:column}
}

/* v4 feature polish: AI, themes, tabletop, and no-typing play */
.cpuTag,.localTag{display:inline-block;font-style:normal;font-size:10px;border-radius:999px;padding:2px 7px;margin-left:6px;text-transform:uppercase;letter-spacing:.06em}
.cpuTag{color:#dff3ff;background:rgba(60,145,220,.22);border:1px solid rgba(120,205,255,.35)}
.localTag{color:#ffe6a1;background:rgba(212,143,42,.22);border:1px solid rgba(255,195,92,.35)}
.lobbyToolBox{display:grid;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,210,120,.16)}
.localAddRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.localAddRow .secondaryGameBtn{white-space:nowrap}
.settingsPanel{display:grid;gap:8px}.settingToggle{margin:8px 0 4px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.16);border:1px solid rgba(255,210,120,.12)}.settingToggle label{margin:0;text-transform:none;letter-spacing:0;display:flex;gap:9px;align-items:center}.settingToggle input{width:auto}.themeSettingGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.themeBanner,.manualBanner{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid rgba(255,210,108,.34);background:linear-gradient(180deg,rgba(97,54,17,.42),rgba(25,13,6,.52));border-radius:15px;padding:10px 13px;margin:10px 0;color:#f5d79d}.themeBanner span{color:#d1af78;font-size:13px}.themePill{color:#ffe0a0}.manualBanner{margin:0;color:#ffe8b7}
.setupShellWide{grid-template-columns:1fr 300px}.sharedSetupCard{min-width:0}.sharedSetupGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:16px}.sharedPlayerSecret{padding:16px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid rgba(255,205,105,.2)}.sharedPlayerSecret.readySecret{background:rgba(54,118,50,.14);border-color:rgba(117,240,112,.35)}.sharedPlayerSecret h2{font-size:20px;margin-bottom:12px;display:flex;gap:8px;align-items:center}.secretForm input,.secretForm select{margin-bottom:10px}
.matchStrip{height:auto;min-height:58px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}.manualControls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.manualControls .secondaryGameBtn,.manualControls .dangerBtn{margin-top:0;width:100%;font-size:12px;padding:9px 10px}.manualClickableTile{outline:3px solid rgba(93,219,255,.62);animation:pulseBlue 1.1s infinite}.manualClickableTile:after{content:"↯";color:rgba(147,232,255,.72);font-size:18px;position:absolute}.slotTile{position:relative}.cpuRack{background:linear-gradient(180deg,rgba(55,70,83,.92),rgba(24,28,31,.96))}.cpuRack .rackNameplate{background:linear-gradient(180deg,#a8d7f2,#4a6d83);color:#08141c}.aiOrb{width:120px;height:120px;margin:24px auto;display:grid;place-items:center;border-radius:50%;font-size:54px;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.25),transparent 22%),linear-gradient(180deg,#26425c,#09131f);border:2px solid rgba(151,219,255,.38);box-shadow:0 0 35px rgba(94,184,255,.25),inset 0 0 18px rgba(255,255,255,.08)}
.circleBtn.muted{filter:grayscale(.9) brightness(.7)}
@keyframes pulseBlue{0%{box-shadow:0 0 0 0 rgba(93,219,255,.38)}70%{box-shadow:0 0 0 10px rgba(93,219,255,0)}100%{box-shadow:0 0 0 0 rgba(93,219,255,0)}}
@media (max-width:900px){.themeSettingGrid,.localAddRow,.manualControls{grid-template-columns:1fr}.setupShellWide{grid-template-columns:1fr}.manualBanner,.themeBanner{align-items:flex-start;flex-direction:column}.matchStrip{grid-template-columns:1fr}}
.brandSeal{background:linear-gradient(180deg,rgba(141,87,30,.72),rgba(33,16,6,.86)),url('assets/word-vault-mark.svg') center/88% no-repeat;color:transparent;text-shadow:none}
.blueDeck,.grayDeck{background-image:linear-gradient(180deg,rgba(17,59,102,.86),rgba(7,25,43,.94)),url('assets/card-back.svg');background-size:cover;background-position:center}.grayDeck{background-image:linear-gradient(180deg,rgba(68,68,68,.85),rgba(22,22,22,.96)),url('assets/card-back.svg')}


/* v4 final: configurable visual skins and stronger responsive containment */
body[data-skin="arcade"]{--bg0:#100623;--bg1:#251078;--bg2:#fa4b9b;--wood:#5b2ee6;--wood2:#ffb82e;--panel:rgba(19,8,54,.94);--panel2:rgba(35,17,89,.94);--gold:#ffde59;--gold2:#ff6b35;--cream:#fff6ff;--muted:#d0b7ff;--line:rgba(255,222,89,.36);--glow:rgba(255,67,160,.36);--blue:#00a7ff;--purple:#d946ef;--danger:#ff4d6d;--good:#62ff9d}
body[data-skin="arcade"]{background:radial-gradient(circle at 12% 90%,rgba(255,67,160,.36),transparent 24%),radial-gradient(circle at 90% 5%,rgba(0,221,255,.28),transparent 24%),linear-gradient(160deg,#130629,#2d137c 58%,#111827)}
body[data-skin="neon"]{--bg0:#02040c;--bg1:#09101f;--bg2:#14213d;--wood:#121a34;--wood2:#1b95c9;--panel:rgba(5,8,18,.96);--panel2:rgba(12,18,38,.95);--gold:#74f5ff;--gold2:#fb39ff;--cream:#effbff;--muted:#91b3ca;--line:rgba(116,245,255,.32);--glow:rgba(90,207,255,.38);--blue:#1487ff;--purple:#b439ff;--danger:#ff375f;--good:#3affb2}
body[data-skin="neon"]{background:radial-gradient(circle at 20% 80%,rgba(251,57,255,.25),transparent 24%),radial-gradient(circle at 82% 18%,rgba(54,209,255,.24),transparent 30%),linear-gradient(180deg,#02040c,#071021 70%,#02050a)}
body[data-skin="forest"]{--bg0:#071208;--bg1:#102613;--bg2:#284b28;--wood:#27451f;--wood2:#8b6b35;--panel:rgba(8,20,10,.95);--panel2:rgba(18,34,17,.94);--gold:#dfc171;--gold2:#7f9d47;--cream:#f3efd1;--muted:#b8c69a;--line:rgba(223,193,113,.32);--glow:rgba(110,190,82,.28);--blue:#4c8fae;--purple:#7460a6;--danger:#9d3b2b;--good:#88dd75}
body[data-skin="forest"]{background:radial-gradient(circle at 10% 85%,rgba(124,181,69,.24),transparent 24%),radial-gradient(circle at 90% 8%,rgba(223,193,113,.18),transparent 24%),linear-gradient(180deg,#061006,#152a13 70%,#070b06)}
body[data-skin="candy"]{--bg0:#fff2fb;--bg1:#ffd6ee;--bg2:#b9f7ff;--wood:#ff8ac7;--wood2:#73d7ff;--panel:rgba(255,246,252,.94);--panel2:rgba(255,236,247,.95);--gold:#b14ce3;--gold2:#ff72ae;--cream:#321341;--muted:#704b7a;--line:rgba(177,76,227,.26);--glow:rgba(255,114,174,.28);--blue:#3197f6;--purple:#b14ce3;--danger:#ee4c7b;--good:#24a36b}
body[data-skin="candy"]{background:radial-gradient(circle at 15% 82%,rgba(255,114,174,.33),transparent 25%),radial-gradient(circle at 84% 14%,rgba(115,215,255,.35),transparent 26%),linear-gradient(145deg,#fff2fb,#e0fbff 62%,#fff5d7)}
body[data-skin="slate"]{--bg0:#0f1318;--bg1:#1d232b;--bg2:#28313b;--wood:#2d3744;--wood2:#64748b;--panel:rgba(17,24,32,.95);--panel2:rgba(30,38,49,.95);--gold:#d6e3f0;--gold2:#8ea2b8;--cream:#eef5fc;--muted:#a8b7c7;--line:rgba(214,227,240,.22);--glow:rgba(148,163,184,.22);--blue:#3b82f6;--purple:#8b5cf6;--danger:#ef4444;--good:#22c55e}
body[data-skin="slate"]{background:linear-gradient(180deg,#0f1318,#1a212b 72%,#080b0f)}
body[data-skin="arcade"] .brandPlate,body[data-skin="neon"] .brandPlate{border-radius:22px;text-shadow:0 0 18px var(--glow)}
body[data-skin="candy"] p,body[data-skin="candy"] .hint,body[data-skin="candy"] .featureGrid span{color:var(--muted)}
body[data-skin="candy"] input,body[data-skin="candy"] select{background:rgba(255,255,255,.74);color:#321341}
.skinDialog{max-width:820px}.skinOptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}.skinChoice{text-align:left;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;gap:2px 10px;padding:12px;border-radius:16px;background:rgba(255,230,170,.06);border:1px solid var(--line);color:var(--cream);min-height:82px}.skinChoice strong{align-self:end}.skinChoice small{color:var(--muted);overflow-wrap:anywhere}.activeSkin{outline:3px solid var(--gold)}.skinSwatch{grid-row:1/3;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.skin_wood{background:linear-gradient(135deg,#5b2b0f,#d89534)}.skin_arcade{background:linear-gradient(135deg,#4f46e5,#ff4dab,#ffde59)}.skin_neon{background:linear-gradient(135deg,#02040c,#00d5ff,#ff39fd)}.skin_forest{background:linear-gradient(135deg,#102613,#87aa46,#dfc171)}.skin_candy{background:linear-gradient(135deg,#ff8ac7,#a8ecff,#fff5a8)}.skin_slate{background:linear-gradient(135deg,#111827,#64748b,#d6e3f0)}
html{font-size:clamp(14px,1vw,16px)}
.heroCard,.featureBoard,.woodPanel,.setupCard,.endCard,.leftCommand,.railPanel,.turnPanel,.playerRack,.currentCard,.scoreCard,.activityCard,.slotShell,.matchPill,.timerPill{min-width:0;overflow-wrap:anywhere}
button,input,select{min-width:0;max-width:100%}.brandWord,.bigRoomCode,.roomPlate strong{white-space:nowrap}.scoreInfo,.rackNameplate,.activityLog li,.tipBox,.notice,.hintRibbon{min-width:0;overflow-wrap:anywhere}.activityLog li{word-break:break-word}
.wordRack{grid-template-columns:repeat(12,minmax(42px,1fr));overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}.slotShell{min-width:42px}.slotTile{min-width:0}.letterKeyboard{grid-template-columns:repeat(auto-fit,minmax(32px,1fr))}.keyBtn{min-width:0;padding:0 4px}.leftCommand,.railPanel{scrollbar-width:thin}
@media (max-width:700px){
  main{padding:12px}.vaultTopbar{gap:8px;padding:10px}.topLeftCluster,.topRightCluster{width:100%;justify-content:center;gap:8px}.iconBtn,.circleBtn{width:44px;height:44px;font-size:19px}.roomPlate{height:48px;min-width:138px;padding:7px 10px}.roomPlate strong{font-size:20px}.brandPlate{height:56px;gap:8px;border-radius:16px}.brandWord{font-size:clamp(25px,10vw,36px)}.brandSeal{width:42px;height:44px;font-size:26px}.heroCard,.featureBoard,.woodPanel,.setupCard,.endCard{padding:18px}.homePanel{grid-template-columns:1fr}.heroCard h1,.lobbyHeader h1,.setupCard h1,.endCard h1{font-size:clamp(32px,11vw,44px)}.lobbyHeader{flex-direction:column;align-items:stretch}.bigRoomCode{text-align:center;font-size:clamp(32px,12vw,48px)}.gameHud{min-height:0;gap:12px}.leftCommand{padding:16px}.rightRail{display:flex;flex-direction:column}.railPanel{max-height:none}.turnPanel{grid-template-columns:1fr}.turnPanel span{width:52px;height:52px;font-size:26px}.wordRack{grid-template-columns:repeat(6,minmax(44px,1fr))}.slotTile{height:52px;font-size:24px}.slotValue{font-size:10px}.currentCard,.activityCard{width:100%;min-height:230px}.cardDock{width:100%}.deckRow{flex-direction:row;justify-content:center}.miniDeck{width:74px;height:104px}.scoreCard{grid-template-columns:44px 1fr auto}.avatar{width:40px;height:40px}.scoreValue{font-size:21px}.hintRibbon{align-items:flex-start;flex-direction:column;padding:12px}.manualControls,.themeSettingGrid,.localAddRow{grid-template-columns:1fr}.sharedSetupGrid{grid-template-columns:1fr}.skinOptions{grid-template-columns:1fr}
}
@media (max-width:420px){.wordRack{grid-template-columns:repeat(4,minmax(52px,1fr))}.buttonRow{display:grid}.primaryGameBtn,.secondaryGameBtn,.blueBtn,.purpleBtn,.dangerBtn,.ghostBtn{width:100%;padding-left:10px;padding-right:10px}.guessInputRow{grid-template-columns:1fr 58px}.letterKeyboard{grid-template-columns:repeat(7,1fr)}.wideKey{grid-column:span 2}.featureGrid{gap:10px}.playerList li{align-items:flex-start;flex-direction:column}.scoreCard{grid-template-columns:38px 1fr}.scoreValue{grid-column:1/3;justify-self:end}}


/* v4 perfect: avatar uploads and optional round-table layout */
.playerActions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.avatarUpload{display:inline-grid;place-items:center;min-height:32px;border-radius:999px;background:rgba(255,230,180,.05);border:1px solid rgba(255,222,146,.32);color:var(--cream);font-weight:900;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}.avatarUpload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.avatarPhoto{overflow:hidden}.avatarPhoto img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}.rackNameplate{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;line-height:1.1}.rackNameplate .avatar{width:34px;height:34px;font-size:12px;flex:0 0 auto}.rackNameText{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}.layoutOptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0}.layoutChoice{text-align:left;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;gap:2px 10px;padding:12px;border-radius:16px;background:rgba(255,230,170,.06);border:1px solid var(--line);color:var(--cream);min-height:82px}.layoutChoice small{color:var(--muted);overflow-wrap:anywhere}.layoutSwatch{grid-row:1/3;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:28px;border:1px solid rgba(255,255,255,.22);background:radial-gradient(circle at 50% 50%,rgba(255,211,117,.18),rgba(0,0,0,.22))}
.roundLayout{grid-template-columns:minmax(0,1fr) minmax(210px,300px);align-items:stretch}.circleTheater{position:relative;display:block;min-height:650px;border-radius:36px;border:1px solid rgba(255,207,108,.2);background:radial-gradient(ellipse at center,rgba(255,210,105,.13),rgba(0,0,0,.12) 45%,rgba(0,0,0,.28) 100%);box-shadow:inset 0 0 38px rgba(0,0,0,.18)}.circleTheater:before{content:"";position:absolute;inset:21%;border-radius:50%;border:1px solid rgba(255,207,108,.16);background:radial-gradient(circle,rgba(0,0,0,.18),transparent 64%);pointer-events:none}.circleTheater .playerRack{position:absolute;width:min(590px,58%);margin:0;z-index:2;transition:transform .2s ease,box-shadow .2s ease}.circleTheater.seatCount2 .seat0,.circleTheater.seatCount3 .seat0,.circleTheater.seatCount4 .seat0{left:50%;bottom:12px;transform:translateX(-50%) rotate(0deg)}.circleTheater.seatCount2 .seat1{left:50%;top:18px;transform:translateX(-50%) rotate(1deg)}.circleTheater.seatCount3 .seat1{left:3%;top:70px;transform:rotate(-5deg)}.circleTheater.seatCount3 .seat2{right:3%;top:70px;transform:rotate(5deg)}.circleTheater.seatCount4 .seat1{left:2%;top:50%;transform:translateY(-50%) rotate(-7deg)}.circleTheater.seatCount4 .seat2{left:50%;top:18px;transform:translateX(-50%) rotate(1deg)}.circleTheater.seatCount4 .seat3{right:2%;top:50%;transform:translateY(-50%) rotate(7deg)}.circleTheater .activeRack{z-index:5;box-shadow:0 0 0 2px rgba(98,255,157,.3),0 22px 46px rgba(0,0,0,.46),0 0 28px rgba(98,255,157,.12)}.circleTheater .wordRack{grid-template-columns:repeat(6,minmax(42px,1fr));overflow:visible}.circleTheater .slotShell{min-width:0}.circleTheater .slotTile{height:48px;font-size:22px}.circleTheater .rackFooter{display:none}.stackedLayout .trayTheater{display:grid;gap:13px}
@media (max-width:1250px){.roundLayout{grid-template-columns:1fr}.roundLayout .cardDock{display:grid;grid-template-columns:minmax(220px,320px) 1fr;align-items:center}.circleTheater{min-height:680px}.circleTheater .playerRack{width:min(560px,64%)}}
@media (max-width:900px){.roundLayout{display:block}.circleTheater{display:grid;gap:13px;min-height:0;border-radius:0;background:transparent;border:0;box-shadow:none}.circleTheater:before{display:none}.circleTheater .playerRack{position:relative;inset:auto!important;width:100%;transform:none!important}.circleTheater .wordRack{grid-template-columns:repeat(6,minmax(44px,1fr));overflow-x:auto}.roundLayout .cardDock{display:flex}.playerActions{justify-content:flex-start}.rackNameplate{justify-content:flex-start}}
@media (max-width:420px){.rackNameplate .avatar{width:30px;height:30px}.layoutOptions{grid-template-columns:1fr}.playerActions{width:100%}.avatarUpload{width:100%}}

/* v4.1 fix: overlap-proof round-table layout and 12-card tray rows.
   This replaces the earlier absolute-positioned UNO layout with a grid seating system.
   Racks can no longer interlap/overlap when the window size or browser zoom changes. */
.circleTheater{
  position:relative;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:min-content;
  align-content:space-between;
  align-items:center;
  justify-items:center;
  gap:clamp(28px,3.2vw,56px) clamp(18px,3vw,52px);
  min-height:clamp(630px,calc(100vh - 235px),900px);
  padding:clamp(34px,3.6vw,56px) clamp(20px,3vw,46px) clamp(26px,3vw,44px);
  overflow:hidden;
}
.circleTheater .playerRack{
  position:relative!important;
  inset:auto!important;
  width:min(100%,590px)!important;
  max-width:100%;
  min-width:0;
  margin:0!important;
  padding:32px clamp(9px,1.2vw,16px) 12px;
  transform-origin:center center;
}
.circleTheater .rackNameplate{
  top:-21px;
  height:38px;
  min-height:38px;
  min-width:min(188px,82%);
  max-width:calc(100% - 28px);
  padding:3px 10px;
  border-radius:999px;
  font-size:clamp(11px,1.15vw,15px);
  line-height:1;
  overflow:hidden;
  white-space:nowrap;
}
.circleTheater .rackNameplate .avatar{
  width:29px;
  height:29px;
  font-size:11px;
  flex:0 0 auto;
}
.circleTheater .rackNameText{
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-wrap:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.circleTheater .rackNameText span{
  flex:0 0 auto;
  font-size:8px;
  line-height:1;
  padding:2px 5px;
  white-space:nowrap;
}
.circleTheater .wordRack{
  display:grid;
  grid-template-columns:repeat(12,minmax(24px,1fr))!important;
  gap:clamp(3px,.55vw,7px);
  overflow:visible!important;
  padding-bottom:0;
}
.circleTheater .slotShell{min-width:0!important;}
.circleTheater .slotValue{font-size:clamp(8px,.75vw,11px);margin-bottom:3px;}
.circleTheater .slotTile{
  width:100%;
  height:auto!important;
  min-height:clamp(32px,4vw,50px);
  aspect-ratio:1/.78;
  border-radius:clamp(6px,.8vw,10px);
  font-size:clamp(14px,1.75vw,24px);
}
.circleTheater .rackFooter{display:none!important;}

.circleTheater.seatCount2{grid-template-rows:min-content 1fr min-content;}
.circleTheater.seatCount2 .seat1{grid-column:1/-1;grid-row:1;transform:rotate(1deg)!important;}
.circleTheater.seatCount2 .seat0{grid-column:1/-1;grid-row:3;transform:rotate(0deg)!important;width:min(650px,86%)!important;}

.circleTheater.seatCount3{grid-template-rows:min-content 1fr min-content;}
.circleTheater.seatCount3 .seat1{grid-column:1;grid-row:1;justify-self:start;transform:rotate(-4deg)!important;}
.circleTheater.seatCount3 .seat2{grid-column:2;grid-row:1;justify-self:end;transform:rotate(4deg)!important;}
.circleTheater.seatCount3 .seat0{grid-column:1/-1;grid-row:3;transform:rotate(0deg)!important;width:min(660px,86%)!important;}

.circleTheater.seatCount4{grid-template-rows:min-content min-content min-content;}
.circleTheater.seatCount4 .seat2{grid-column:1/-1;grid-row:1;transform:rotate(1deg)!important;width:min(620px,76%)!important;}
.circleTheater.seatCount4 .seat1{grid-column:1;grid-row:2;justify-self:start;transform:rotate(-5deg)!important;}
.circleTheater.seatCount4 .seat3{grid-column:2;grid-row:2;justify-self:end;transform:rotate(5deg)!important;}
.circleTheater.seatCount4 .seat0{grid-column:1/-1;grid-row:3;transform:rotate(0deg)!important;width:min(660px,86%)!important;}

/* Medium widths keep the UNO feel, but reduce scale before overlap can happen. */
@media (max-width:1100px){
  .circleTheater{
    min-height:auto;
    padding:34px 16px 24px;
    gap:28px 14px;
    overflow:hidden;
  }
  .circleTheater .playerRack{width:100%!important;}
  .circleTheater.seatCount2 .seat0,
  .circleTheater.seatCount3 .seat0,
  .circleTheater.seatCount4 .seat0,
  .circleTheater.seatCount4 .seat2{width:min(100%,590px)!important;}
  .circleTheater .slotTile{min-height:36px;}
  .circleTheater .rackNameplate{font-size:11px;}
}

/* Phone/small-height fallback: no angles, no overlap, still 12 cards in one horizontal row. */
@media (max-width:760px),(max-height:720px){
  .roundLayout{display:block;}
  .circleTheater{
    display:flex!important;
    flex-direction:column;
    min-height:0;
    padding:0;
    gap:18px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .circleTheater:before{display:none;}
  .circleTheater .playerRack{
    width:100%!important;
    transform:none!important;
  }
  .circleTheater .wordRack{
    grid-template-columns:repeat(12,minmax(38px,1fr))!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    padding-bottom:8px;
  }
  .circleTheater .slotShell{min-width:38px!important;}
  .circleTheater .slotTile{min-height:42px;font-size:20px;}
  .circleTheater .rackNameplate{justify-content:center;}
}
@media (max-width:420px){
  .circleTheater .wordRack{grid-template-columns:repeat(12,minmax(38px,1fr))!important;overflow-x:auto!important;}
  .circleTheater .slotShell{min-width:38px!important;}
}


/* v4.2 precision round-table fix: fixed-ratio slots, no tray squish, no overlap.
   The round layout now behaves like long card racks around a table. Racks keep a
   consistent 12-card row and the theater scrolls/falls back instead of crushing cards. */
:root{
  --round-slot-w: clamp(34px, 3.35vw, 52px);
  --round-slot-gap: clamp(5px, .7vw, 9px);
  --round-rack-pad-x: clamp(12px, 1.1vw, 18px);
}
.slotTile{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  line-height:1;
  min-width:0;
  padding:0;
}
.slotTile .tileGlyph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  line-height:1;
  text-align:center;
  pointer-events:none;
  transform:none;
}
.coveredTile:before{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  line-height:1;
  text-align:center;
  transform:none;
}
.manualClickableTile:after{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  line-height:1;
  text-align:center;
  transform:none;
  pointer-events:none;
}
.revealedTile .tileGlyph,
.dotTile .tileGlyph{
  color:inherit;
}
.coveredTile .tileGlyph{
  color:transparent;
  text-shadow:none;
}

/* General racks keep a true 12-card line on wide layouts. */
.wordRack{
  grid-template-columns:repeat(12,minmax(42px,1fr));
}

.roundLayout{
  grid-template-columns:minmax(0,1fr) minmax(210px,300px);
}
.roundLayout .cardDock{
  min-width:0;
}
.circleTheater{
  display:grid!important;
  position:relative;
  grid-template-columns:max-content minmax(clamp(48px,7vw,130px),1fr) max-content;
  grid-template-rows:min-content minmax(180px,1fr) min-content;
  align-items:center;
  justify-items:center;
  align-content:space-between;
  gap:clamp(38px,5vw,82px) clamp(28px,4vw,86px);
  min-height:clamp(660px,calc(100vh - 215px),980px);
  padding:clamp(38px,4vw,64px) clamp(30px,4.5vw,72px) clamp(32px,3.8vw,58px);
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.circleTheater:before{
  inset:15% 10% 14%;
  border-radius:50%;
}
.circleTheater .playerRack{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  width:max-content!important;
  min-width:calc((12 * var(--round-slot-w)) + (11 * var(--round-slot-gap)) + (2 * var(--round-rack-pad-x)) + 2px)!important;
  max-width:none!important;
  padding:34px var(--round-rack-pad-x) 14px;
  transform-origin:center center;
  flex:0 0 auto;
}
.circleTheater .wordRack{
  display:grid!important;
  grid-template-columns:repeat(12,var(--round-slot-w))!important;
  gap:var(--round-slot-gap)!important;
  overflow:visible!important;
  padding-bottom:0!important;
  justify-content:center;
}
.circleTheater .slotShell{
  min-width:var(--round-slot-w)!important;
  width:var(--round-slot-w)!important;
  text-align:center;
  overflow:visible;
}
.circleTheater .slotValue{
  font-size:clamp(9px,.9vw,12px);
  height:1.1em;
  line-height:1.1;
  margin-bottom:4px;
}
.circleTheater .slotTile{
  width:var(--round-slot-w)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1.08!important;
  border-radius:clamp(7px,.8vw,11px);
  font-size:clamp(18px,2vw,27px);
}
.circleTheater .coveredTile:before{
  font-size:clamp(17px,1.95vw,27px);
}
.circleTheater .rackNameplate{
  top:-22px;
  min-width:190px;
  max-width:calc(100% - 36px);
  height:40px;
  min-height:40px;
  padding:4px 12px;
  border-radius:999px;
  overflow:hidden;
  white-space:nowrap;
}
.circleTheater .rackNameText{
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.circleTheater .rackNameText span{
  flex:0 0 auto;
  white-space:nowrap;
}
.circleTheater .rackFooter{display:none!important;}

/* 2 seats: opponent centered above, you centered below. */
.circleTheater.seatCount2 .seat1{
  grid-column:1 / -1;
  grid-row:1;
  justify-self:center;
  transform:rotate(1deg)!important;
}
.circleTheater.seatCount2 .seat0{
  grid-column:1 / -1;
  grid-row:3;
  justify-self:center;
  transform:rotate(0deg)!important;
}

/* 3 seats: exactly like the sketch: two equal top racks with table space between them, player rack at bottom. */
.circleTheater.seatCount3 .seat1{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  transform:rotate(-7deg)!important;
}
.circleTheater.seatCount3 .seat2{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  transform:rotate(7deg)!important;
}
.circleTheater.seatCount3 .seat0{
  grid-column:1 / -1;
  grid-row:3;
  justify-self:center;
  transform:rotate(0deg)!important;
}

/* 4 seats: one top, left/right middle, player bottom. */
.circleTheater.seatCount4{
  grid-template-rows:min-content min-content min-content;
}
.circleTheater.seatCount4 .seat2{
  grid-column:1 / -1;
  grid-row:1;
  justify-self:center;
  transform:rotate(1deg)!important;
}
.circleTheater.seatCount4 .seat1{
  grid-column:1;
  grid-row:2;
  justify-self:start;
  transform:rotate(-7deg)!important;
}
.circleTheater.seatCount4 .seat3{
  grid-column:3;
  grid-row:2;
  justify-self:end;
  transform:rotate(7deg)!important;
}
.circleTheater.seatCount4 .seat0{
  grid-column:1 / -1;
  grid-row:3;
  justify-self:center;
  transform:rotate(0deg)!important;
}

/* Medium screens: keep ratios; allow the theater to scroll instead of squeezing. */
@media (max-width:1250px){
  .roundLayout{grid-template-columns:1fr;}
  .roundLayout .cardDock{display:flex;}
  .circleTheater{
    min-height:640px;
    padding:38px 22px 34px;
    grid-template-columns:max-content minmax(52px,1fr) max-content;
    gap:38px 44px;
  }
}

/* Small tablets/phones: fall back to stacked round-table list with 12-card horizontal racks.
   No angles, no overlap, no crushed cards. */
@media (max-width:820px),(max-height:700px){
  :root{--round-slot-w:44px;--round-slot-gap:7px;}
  .roundLayout{display:block;}
  .circleTheater{
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
    padding:0;
    gap:18px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible!important;
  }
  .circleTheater:before{display:none;}
  .circleTheater .playerRack{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    transform:none!important;
    padding-left:12px;
    padding-right:12px;
  }
  .circleTheater .wordRack{
    grid-template-columns:repeat(12,var(--round-slot-w))!important;
    justify-content:start;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:8px!important;
  }
  .circleTheater .slotShell{
    width:var(--round-slot-w)!important;
    min-width:var(--round-slot-w)!important;
  }
  .circleTheater .slotTile{
    width:var(--round-slot-w)!important;
    font-size:22px;
  }
  .circleTheater .coveredTile:before{font-size:22px;}
  .circleTheater .rackNameplate{justify-content:center;}
}


/* v4.3 tray/spacing patch: every rack is forever 12x1, never 2x6/4x3.
   Cards keep a fixed ratio and scroll instead of being squeezed. Empty tray spaces
   are real positions but have no card and no point label. */
:root{
  --slot-w: clamp(44px, 4.1vw, 62px);
  --slot-gap: clamp(6px, .65vw, 9px);
}
.wordRack,
.previewRack,
.circleTheater .wordRack{
  display:grid!important;
  grid-template-columns:repeat(12,var(--slot-w))!important;
  gap:var(--slot-gap)!important;
  justify-content:start!important;
  align-items:start!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-x:contain;
  padding-bottom:8px!important;
  scrollbar-width:thin;
}
.slotShell,
.circleTheater .slotShell{
  width:var(--slot-w)!important;
  min-width:var(--slot-w)!important;
  text-align:center;
  overflow:visible;
}
.slotTile,
.emptySlot,
.circleTheater .slotTile{
  width:var(--slot-w)!important;
  min-width:var(--slot-w)!important;
  height:auto!important;
  aspect-ratio:1 / 1.08!important;
  box-sizing:border-box;
}
.tileGlyph,
.coveredTile:before,
.manualClickableTile:after{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  line-height:1!important;
  text-align:center!important;
}
.emptySlotShell{pointer-events:none;}
.emptySlotValue{visibility:hidden;}
.emptySlot{
  display:block;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
}
.previewRack .emptySlot{
  border-color:rgba(255,210,115,.10);
  background:rgba(0,0,0,.10);
}

/* Normal/stacked view: keep nameplates clear of point values. */
.stackedLayout .playerRack{
  padding-top:62px!important;
}
.stackedLayout .rackNameplate{
  top:12px!important;
  z-index:5;
  height:38px;
  min-height:38px;
  max-width:calc(100% - 28px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  white-space:nowrap;
}
.stackedLayout .rackNameText{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stackedLayout .slotValue{position:relative;z-index:1;}

.trayBuilderTools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 6px;
}
.miniToolBtn{padding:9px 12px!important;font-size:12px!important;}
.secretForm input[id^="secretWord_"]{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Round table uses the same one-line card math, just with its own scalable size. */
.circleTheater .wordRack{
  grid-template-columns:repeat(12,var(--round-slot-w))!important;
}
.circleTheater .slotShell,
.circleTheater .slotTile,
.circleTheater .emptySlot{
  width:var(--round-slot-w)!important;
  min-width:var(--round-slot-w)!important;
}

@media (max-width:900px){
  :root{--slot-w:44px;--slot-gap:7px;}
  .wordRack,.previewRack,.circleTheater .wordRack{
    grid-template-columns:repeat(12,var(--slot-w))!important;
    overflow-x:auto!important;
  }
}
@media (max-width:420px){
  :root{--slot-w:42px;--slot-gap:6px;}
  .wordRack,.previewRack,.circleTheater .wordRack{
    grid-template-columns:repeat(12,var(--slot-w))!important;
  }
}


/* v4.5 polish patch: slower readable feedback, official logo, balanced events. */
.logoBrandPlate{
  min-width:clamp(320px,38vw,620px);
  padding:8px 24px;
  border-radius:0 0 30px 30px;
}
.brandLogo{
  display:block;
  width:min(520px,100%);
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 2px 0 rgba(73,35,10,.85)) drop-shadow(0 0 20px rgba(255,186,69,.28));
}
@media (max-width:900px){
  .logoBrandPlate{min-width:0;width:100%;height:60px;padding:7px 14px;}
  .brandLogo{height:46px;}
}

.cardDrawn{animation:cardDrawSlow 1.9s cubic-bezier(.12,.9,.18,1.1) both!important;}
.specialCardDrawn{animation:cardDrawSlow 2.15s cubic-bezier(.12,.9,.18,1.1) both, specialCardGlow 2.9s ease-out both!important;}
.normalCardDrawn{animation:cardDrawSlow 1.75s cubic-bezier(.12,.9,.18,1.1) both!important;}
@keyframes cardDrawSlow{
  0%{opacity:0;transform:translateY(-28px) rotate(-7deg) scale(.88);filter:brightness(1.35) blur(1px)}
  42%{opacity:1;transform:translateY(8px) rotate(2deg) scale(1.05);filter:brightness(1.18)}
  72%{transform:translateY(-3px) rotate(-1deg) scale(1.015)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1);filter:none}
}
@keyframes specialCardGlow{
  0%{box-shadow:0 0 0 rgba(255,209,110,0),0 22px 42px rgba(0,0,0,.42)}
  40%{box-shadow:0 0 0 4px rgba(255,209,110,.28),0 0 44px rgba(255,191,72,.32),0 22px 42px rgba(0,0,0,.42)}
  100%{box-shadow:inset 0 1px 0 rgba(255,235,180,.1),inset 0 0 0 2px rgba(0,0,0,.25),0 22px 42px rgba(0,0,0,.42)}
}

#effectLayer{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;place-items:center;padding:20px;}
.effectBurst{
  position:relative;
  min-width:min(520px,92vw);
  max-width:min(680px,94vw);
  padding:26px 30px;
  border-radius:26px;
  border:1px solid rgba(255,229,158,.48);
  background:linear-gradient(180deg,rgba(39,22,10,.96),rgba(8,5,3,.98));
  box-shadow:inset 0 1px 0 rgba(255,244,191,.14),0 26px 80px rgba(0,0,0,.72),0 0 42px rgba(255,186,68,.24);
  text-align:center;
  overflow:hidden;
  animation:effectEnter 860ms cubic-bezier(.16,.94,.22,1.12) both;
}
.effectBurst strong{position:relative;z-index:2;display:block;font-family:Georgia,serif;font-size:clamp(24px,3.1vw,42px);color:var(--cream);line-height:1.12;text-shadow:0 3px 0 rgba(0,0,0,.35);}
.effectBurst small{position:relative;z-index:2;display:inline-block;margin-top:12px;padding:7px 12px;border-radius:999px;background:rgba(255,235,165,.10);border:1px solid rgba(255,223,143,.25);color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;}
.effectIcon{position:relative;z-index:2;margin:0 auto 12px;width:80px;height:80px;display:grid;place-items:center;border-radius:50%;font-family:Georgia,serif;font-weight:900;font-size:38px;background:rgba(255,214,128,.12);border:1px solid rgba(255,222,147,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 34px rgba(255,185,69,.22);}
.effectRing{position:absolute;inset:-40%;background:radial-gradient(circle,rgba(255,208,105,.28),transparent 54%);animation:effectRingPulse 2.45s ease-out both;}
.effect_good{border-color:rgba(124,255,166,.55);box-shadow:inset 0 1px 0 rgba(255,244,191,.14),0 26px 80px rgba(0,0,0,.72),0 0 46px rgba(88,255,142,.25)}
.effect_good .effectIcon{color:#a6ffc2;border-color:rgba(122,255,167,.55);background:rgba(55,170,91,.18)}
.effect_bad{border-color:rgba(255,111,94,.62);box-shadow:inset 0 1px 0 rgba(255,244,191,.14),0 26px 80px rgba(0,0,0,.72),0 0 46px rgba(255,90,62,.25)}
.effect_bad .effectIcon{color:#ffb0a5;border-color:rgba(255,111,94,.62);background:rgba(160,48,34,.20)}
.effect_special .effectIcon{color:#ffe08f;}
.effect_normal .effectIcon{color:#bfe7ff;}
.effectLeaving{animation:effectLeave 680ms ease-in both;}
@keyframes effectEnter{0%{opacity:0;transform:translateY(36px) scale(.86)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes effectLeave{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-20px) scale(.96)}}
@keyframes effectRingPulse{0%{opacity:0;transform:scale(.35) rotate(0deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(22deg)}}

.trayWarning{margin-top:9px;color:#ffb0a5;background:rgba(160,48,34,.18);border:1px solid rgba(255,111,94,.35);padding:9px 11px;border-radius:12px;font-size:13px;font-weight:800;}

/* Keep every tray a one-line 12-slot rack. If space is tight, scroll; never wrap or crush. */
.wordRack,.previewRack,.circleTheater .wordRack{grid-template-columns:repeat(12,var(--slot-w))!important;grid-auto-flow:column!important;grid-auto-columns:var(--slot-w)!important;}
.playerRack{overflow:visible;}
.wordRack{max-width:100%;}
.slotTile .tileGlyph{font-variant-ligatures:none;}
.keyBtn[data-letter="."]{background:linear-gradient(180deg,#9e6b27,#472509);color:#fff0c8;border-color:rgba(255,223,143,.45)}

@media (prefers-reduced-motion: reduce){.cardDrawn,.specialCardDrawn,.normalCardDrawn,.effectBurst,.effectRing,.effectLeaving{animation:none!important}}
/* v4.6 no-horizontal-scroll + slower-table readability patch.
   Goal: the play area always fits the viewport. Side panels move under the board
   before the trays get horizontal scrollbars. Trays remain 12x1, and every slot
   scales uniformly instead of being individually squeezed. */
html, body, #app, main, .screen, .gameScreen{
  max-width:100%;
  overflow-x:hidden!important;
}
*{box-sizing:border-box;}

/* Never let the page get wider than the visible window because of long grids/text. */
.gameHud,.centerBoard,.boardAndCard,.trayTheater,.circleTheater,.playerRack,.wordRack,.matchStrip,.leftCommand,.rightRail,.railPanel,.cardDock,.hintRibbon{
  min-width:0!important;
  max-width:100%!important;
}

/* The right rail should not steal space from the board on zoomed/narrow screens. */
.gameHud{
  height:auto!important;
  min-height:calc(100vh - 96px)!important;
  display:grid!important;
  grid-template-columns:minmax(270px,330px) minmax(0,1fr) minmax(270px,330px)!important;
  gap:14px!important;
  align-items:stretch;
  overflow-x:hidden!important;
}
.leftCommand{overflow-y:auto!important;overflow-x:hidden!important;}
.rightRail{overflow-x:hidden!important;}
.centerBoard{overflow:hidden!important;}

/* Put the card/deck below the trays. It was causing the play table to shrink. */
.boardAndCard,
.boardAndCard.roundLayout,
.boardAndCard.stackedLayout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:14px!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
.cardDock{
  min-height:0!important;
  display:flex!important;
  flex-direction:row!important;
  justify-content:center!important;
  align-items:center!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  overflow:hidden!important;
}
.currentCard,.activityCard{
  width:min(220px,42vw)!important;
  min-height:250px!important;
  max-width:100%!important;
}
.deckRow{flex-wrap:wrap;justify-content:center;}

/* Universal 12x1 rack: no horizontal scrollbars inside words or the play area. */
:root{
  --slot-gap-fit:clamp(3px,.42vw,8px);
}
.wordRack,
.previewRack,
.circleTheater .wordRack{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  gap:var(--slot-gap-fit)!important;
  justify-content:stretch!important;
  align-items:start!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  padding:0!important;
}
.slotShell,
.circleTheater .slotShell{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
}
.slotTile,
.emptySlot,
.circleTheater .slotTile,
.circleTheater .emptySlot{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  aspect-ratio:1 / 1.08!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
}
.slotValue{font-size:clamp(8px,.72vw,12px)!important;line-height:1.05!important;margin-bottom:3px!important;white-space:nowrap;}
.slotTile{font-size:clamp(13px,2.3vw,34px)!important;border-radius:clamp(5px,.75vw,10px)!important;}
.coveredTile:before,.tileGlyph{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  line-height:1!important;
  transform:none!important;
  text-align:center!important;
}
.coveredTile:before{font-size:clamp(13px,1.65vw,27px)!important;}

/* Stacked/default layout: names get their own reserved lane and never cover point values. */
.stackedLayout .playerRack,
.trayTheater:not(.circleTheater) .playerRack{
  padding:64px 16px 16px!important;
  overflow:visible!important;
}
.stackedLayout .rackNameplate,
.trayTheater:not(.circleTheater) .rackNameplate{
  top:12px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  min-height:38px!important;
  height:38px!important;
  max-width:calc(100% - 34px)!important;
  z-index:10!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

/* Round-table layout: seats are evenly spaced like a table sketch. No rack scroll. */
.roundLayout .trayTheater.circleTheater{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(clamp(70px,12vw,240px),.42fr) minmax(0,1fr)!important;
  grid-template-rows:auto minmax(130px,1fr) auto!important;
  gap:clamp(22px,3vw,52px) clamp(18px,4vw,90px)!important;
  align-items:center!important;
  justify-items:center!important;
  min-height:clamp(500px,calc(100vh - 280px),780px)!important;
  padding:clamp(28px,3vw,54px) clamp(18px,3vw,46px) clamp(24px,2.6vw,42px)!important;
  overflow:hidden!important;
  border-radius:34px!important;
}
.roundLayout .circleTheater:before{
  inset:18% 12%!important;
  border-radius:50%!important;
  pointer-events:none!important;
}
.roundLayout .circleTheater .playerRack{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:52px clamp(10px,1.4vw,18px) 14px!important;
  overflow:visible!important;
}
.roundLayout .circleTheater .rackNameplate{
  top:8px!important;
  height:34px!important;
  min-height:34px!important;
  max-width:calc(100% - 20px)!important;
  z-index:12!important;
}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:1 / -1!important;grid-row:1!important;width:min(760px,72%)!important;transform:rotate(1deg)!important;justify-self:center!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;width:min(860px,88%)!important;transform:none!important;justify-self:center!important;}
.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;transform:rotate(-5deg)!important;justify-self:stretch!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;transform:rotate(5deg)!important;justify-self:stretch!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;width:min(920px,78%)!important;transform:none!important;justify-self:center!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:1 / -1!important;grid-row:1!important;width:min(820px,72%)!important;transform:rotate(1deg)!important;justify-self:center!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;transform:rotate(-5deg)!important;justify-self:stretch!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;transform:rotate(5deg)!important;justify-self:stretch!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;width:min(920px,78%)!important;transform:none!important;justify-self:center!important;}

/* When zoom/window width reduces, move right-side info underneath before the board suffers. */
@media (max-width:1650px){
  .gameHud{grid-template-columns:minmax(260px,320px) minmax(0,1fr)!important;}
  .rightRail{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .rightRail .railPanel,.rightRail .turnPanel{min-height:0!important;max-height:260px;overflow:auto!important;}
}
@media (max-width:1180px){
  main{padding:10px!important;}
  .gameHud{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:hidden!important;}
  .centerBoard{order:1!important;}
  .leftCommand{order:2!important;max-height:none!important;}
  .rightRail{order:3!important;display:flex!important;flex-direction:column!important;}
  .rightRail .railPanel,.rightRail .turnPanel{max-height:none!important;}
  .matchStrip{height:auto!important;grid-template-columns:1fr!important;}
  .matchPill,.timerPill{min-width:0!important;width:100%!important;}
  .currentCard,.activityCard{width:min(210px,88vw)!important;min-height:235px!important;}
}

/* Phone / very small windows: keep all 12 cards visible in a single row by scaling the rack uniformly. */
@media (max-width:760px), (max-height:720px){
  :root{--slot-gap-fit:3px;}
  .roundLayout .trayTheater.circleTheater{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .roundLayout .circleTheater:before{display:none!important;}
  .roundLayout .circleTheater .playerRack,
  .roundLayout .circleTheater.seatCount2 .seat0,
  .roundLayout .circleTheater.seatCount2 .seat1,
  .roundLayout .circleTheater.seatCount3 .seat0,
  .roundLayout .circleTheater.seatCount3 .seat1,
  .roundLayout .circleTheater.seatCount3 .seat2,
  .roundLayout .circleTheater.seatCount4 .seat0,
  .roundLayout .circleTheater.seatCount4 .seat1,
  .roundLayout .circleTheater.seatCount4 .seat2,
  .roundLayout .circleTheater.seatCount4 .seat3{
    width:100%!important;
    transform:none!important;
    justify-self:stretch!important;
  }
  .playerRack{padding-left:8px!important;padding-right:8px!important;}
  .slotValue{font-size:8px!important;}
  .slotTile{font-size:clamp(10px,5.2vw,20px)!important;}
  .coveredTile:before{font-size:clamp(10px,4.8vw,18px)!important;}
  .cardDock{gap:10px!important;}
  .currentCard,.activityCard{width:100%!important;min-height:210px!important;}
}

@media (max-width:430px){
  main{padding:8px!important;}
  .wordRack,.previewRack,.circleTheater .wordRack{gap:2px!important;}
  .playerRack{padding-top:54px!important;}
  .rackNameplate{height:32px!important;min-height:32px!important;font-size:11px!important;}
}

/* v4.7 final tray geometry + no ghost scrolling patch.
   Cards never turn into circles, tray glyphs are centered child layers, and
   round-table seats use fixed rack widths with a real center gap instead of
   stretching/scrunching to fill the row. */
:root{
  --wv-slot: clamp(36px, 3.15vw, 58px);
  --wv-round-slot: clamp(34px, 2.85vw, 52px);
  --wv-slot-gap: clamp(5px, .55vw, 9px);
  --wv-rack-pad: clamp(12px, 1.05vw, 18px);
}

/* Board areas may shrink panels, not card geometry. */
.centerBoard,.boardAndCard,.trayTheater,.circleTheater{overflow:visible!important;}
.gameHud,.gameScreen,main,body{overflow-x:hidden!important;}

/* Universal tray: 12 x 1 forever, with fixed proportional slots. */
.wordRack,.previewRack{
  display:grid!important;
  grid-template-columns:repeat(12,var(--wv-slot))!important;
  grid-auto-flow:row!important;
  grid-auto-columns:unset!important;
  gap:var(--wv-slot-gap)!important;
  align-items:start!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  overflow:visible!important;
  padding:0!important;
}
.slotShell{
  width:var(--wv-slot)!important;
  min-width:var(--wv-slot)!important;
  max-width:var(--wv-slot)!important;
  text-align:center!important;
}
.slotTile,.emptySlot{
  width:var(--wv-slot)!important;
  min-width:var(--wv-slot)!important;
  max-width:var(--wv-slot)!important;
  aspect-ratio: .82 / 1!important;
  height:auto!important;
  min-height:calc(var(--wv-slot) * 1.18)!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  position:relative!important;
  padding:0!important;
  flex:0 0 auto!important;
}
.slotValue{
  font-size:clamp(9px,.82vw,13px)!important;
  line-height:1!important;
  margin:0 0 5px!important;
  white-space:nowrap!important;
}

/* The visible letter/dot is a centered child layer and scales down to fit. */
.slotTile .tileGlyph{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:max-content!important;
  max-width:86%!important;
  height:auto!important;
  display:block!important;
  line-height:1!important;
  text-align:center!important;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center!important;
  font-size:clamp(16px,2.15vw,34px)!important;
  font-family:Georgia,serif!important;
  font-weight:900!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}
.dotTile .tileGlyph{font-size:clamp(18px,2.45vw,38px)!important;}
.coveredTile .tileGlyph{display:none!important;}
.coveredTile:before{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  transform:translate(-50%,-50%)!important;
  line-height:1!important;
  font-size:clamp(15px,1.45vw,25px)!important;
  text-align:center!important;
}

/* Round-table seats: fixed rack widths, big spacing like the sketch. */
.roundLayout .trayTheater.circleTheater{
  --wv-slot:var(--wv-round-slot);
  display:grid!important;
  grid-template-columns:max-content minmax(clamp(90px,16vw,300px),1fr) max-content!important;
  grid-template-rows:auto minmax(220px,1fr) auto!important;
  column-gap:clamp(34px,7vw,150px)!important;
  row-gap:clamp(28px,4.2vw,72px)!important;
  align-items:center!important;
  justify-content:center!important;
  justify-items:center!important;
  min-height:clamp(560px,calc(100vh - 245px),860px)!important;
  padding:clamp(30px,3.2vw,58px) clamp(16px,2.6vw,46px) clamp(28px,3vw,54px)!important;
  overflow:visible!important;
}
.roundLayout .circleTheater .playerRack{
  width:calc((12 * var(--wv-round-slot)) + (11 * var(--wv-slot-gap)) + (2 * var(--wv-rack-pad)))!important;
  min-width:calc((12 * var(--wv-round-slot)) + (11 * var(--wv-slot-gap)) + (2 * var(--wv-rack-pad)))!important;
  max-width:calc(100vw - 28px)!important;
  justify-self:center!important;
  padding:52px var(--wv-rack-pad) 16px!important;
  overflow:visible!important;
}
.roundLayout .circleTheater .wordRack{
  grid-template-columns:repeat(12,var(--wv-round-slot))!important;
  gap:var(--wv-slot-gap)!important;
  justify-content:center!important;
  width:auto!important;
  overflow:visible!important;
}
.roundLayout .circleTheater .slotShell{
  width:var(--wv-round-slot)!important;
  min-width:var(--wv-round-slot)!important;
  max-width:var(--wv-round-slot)!important;
}
.roundLayout .circleTheater .slotTile,
.roundLayout .circleTheater .emptySlot{
  width:var(--wv-round-slot)!important;
  min-width:var(--wv-round-slot)!important;
  max-width:var(--wv-round-slot)!important;
  min-height:calc(var(--wv-round-slot) * 1.18)!important;
  border-radius:9px!important;
}
.roundLayout .circleTheater .slotTile .tileGlyph{font-size:clamp(15px,1.9vw,31px)!important;}
.roundLayout .circleTheater .coveredTile:before{font-size:clamp(14px,1.35vw,23px)!important;}

.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;transform:rotate(-5deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;transform:rotate(5deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;width:calc((12 * var(--wv-slot)) + (11 * var(--wv-slot-gap)) + (2 * var(--wv-rack-pad)))!important;}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;transform:rotate(-5deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;transform:rotate(5deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}

/* When the page is zoomed/narrow, move information panels vertically before
   reducing cards too far. */
@media (max-width:1500px){
  .gameHud{grid-template-columns:minmax(260px,320px) minmax(0,1fr)!important;}
  .rightRail{grid-column:1 / -1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
}
@media (max-width:1220px){
  :root{--wv-round-slot:clamp(31px,3vw,46px);--wv-slot:clamp(34px,3.4vw,52px);}
  .gameHud{display:flex!important;flex-direction:column!important;}
  .centerBoard{order:1!important}.leftCommand{order:2!important}.rightRail{order:3!important;display:flex!important;flex-direction:column!important;}
}
@media (max-width:930px){
  :root{--wv-round-slot:clamp(30px,5vw,44px);--wv-slot:clamp(30px,5vw,44px);--wv-slot-gap:3px;}
  .roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;padding:6px!important;min-height:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .roundLayout .circleTheater:before{display:none!important;}
  .roundLayout .circleTheater .playerRack{transform:none!important;width:calc((12 * var(--wv-round-slot)) + (11 * var(--wv-slot-gap)) + (2 * var(--wv-rack-pad)))!important;min-width:0!important;max-width:100%!important;}
}
@media (max-width:520px){
  :root{--wv-round-slot:clamp(24px,6.1vw,32px);--wv-slot:clamp(24px,6.1vw,32px);--wv-slot-gap:2px;--wv-rack-pad:6px;}
  .rackNameplate{font-size:10px!important;min-width:0!important;}
  .slotValue{font-size:7px!important;margin-bottom:3px!important;}
  .slotTile .tileGlyph{font-size:clamp(11px,5.2vw,18px)!important;}
  .coveredTile:before{font-size:clamp(10px,4.7vw,16px)!important;}
}


/* v4.8 sound/feedback polish */
.effect_card-good .effectIcon,.effect_good .effectIcon{animation:goodRewardPulse 1.4s ease-in-out infinite alternate;}
.effect_card-bad .effectIcon,.effect_bad .effectIcon{animation:badWobble 560ms ease-in-out 0s 3;}
.effect_card-special .effectIcon{animation:specialFloat 1.65s ease-in-out infinite alternate;}
.effect_card-normal .effectIcon{animation:normalCardFlipPulse 1.35s ease-in-out infinite alternate;}
@keyframes goodRewardPulse{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.08);filter:brightness(1.35)}}
@keyframes badWobble{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-5px) rotate(-4deg)}75%{transform:translateX(5px) rotate(4deg)}}
@keyframes specialFloat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(1deg)}}
@keyframes normalCardFlipPulse{from{transform:rotateY(0deg)}to{transform:rotateY(18deg)}}


/* v4.9 visible deck-to-screen turn-card animation + CPU action card overlay.
   These are fixed overlays, so they do not change board/tray sizing or cause overlap. */
.turnCardOverlay,
.cpuActionOverlay{
  position:fixed;
  inset:0;
  z-index:10020;
  pointer-events:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  perspective:1200px;
  padding:16px;
}
.deckFlash{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(var(--from-x,0),var(--from-y,210px));
  width:86px;
  height:120px;
  display:grid;
  place-items:end center;
  padding-bottom:11px;
  border-radius:13px;
  border:1px solid rgba(255,216,128,.45);
  background:linear-gradient(180deg,#123b63,#06182a);
  color:var(--gold);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.25);
  opacity:.78;
  animation:deckFlashPulse 6.2s ease both;
}
.turnCard3d{
  --card-w:min(290px,78vw);
  --card-h:min(410px,72vh);
  width:var(--card-w);
  height:var(--card-h);
  position:relative;
  transform-style:preserve-3d;
  animation:turnCardFlyIn 1.05s cubic-bezier(.14,.88,.15,1.05) both;
  filter:drop-shadow(0 34px 56px rgba(0,0,0,.68));
}
.cpuActionOverlay .turnCard3d{
  --card-w:min(330px,82vw);
  --card-h:min(300px,62vh);
  animation:cpuActionCardIn .55s cubic-bezier(.14,.88,.15,1.05) both;
}
.turnCardBack,
.turnCardFace{
  position:absolute;
  inset:0;
  border-radius:22px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:2px solid rgba(255,215,128,.58);
  box-shadow:inset 0 1px 0 rgba(255,244,194,.22), inset 0 0 0 3px rgba(0,0,0,.24);
}
.turnCardBack{
  display:grid;
  place-items:center;
  text-align:center;
  color:#f6d481;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,211,126,.22),transparent 34%),
    repeating-linear-gradient(45deg,rgba(255,214,130,.08) 0 7px,transparent 7px 14px),
    linear-gradient(160deg,#6d340f,#2a1007 62%,#100603);
}
.turnCardBack .backMark{font-size:68px;line-height:1;text-shadow:0 0 22px rgba(255,188,75,.46);}
.turnCardBack strong{font-family:Georgia,serif;font-size:28px;line-height:.84;letter-spacing:.03em;text-shadow:0 3px 0 rgba(60,25,4,.8);}
.turnCardFace{
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 24px 26px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 17%,rgba(255,221,143,.20),transparent 34%),
    linear-gradient(180deg,rgba(105,48,16,.98),rgba(45,19,8,.98));
  color:var(--cream);
}
.turnCardFace:before{content:"";position:absolute;inset:12px;border-radius:16px;border:1px solid rgba(255,223,143,.25);pointer-events:none;}
.turnCardFace .tinyCaps{position:relative;z-index:2;color:var(--gold);font-size:12px;letter-spacing:.18em;}
.turnCardIcon{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:42px;font-weight:900;background:rgba(255,219,139,.13);border:1px solid rgba(255,228,157,.42);box-shadow:0 0 28px rgba(255,190,76,.22), inset 0 1px 0 rgba(255,255,255,.12);}
.turnCardFace h2{position:relative;z-index:2;font-family:Georgia,serif;font-size:clamp(27px,4vw,42px);line-height:.96;color:#ffe096;text-shadow:0 3px 0 rgba(0,0,0,.36);margin:0;}
.turnCardFace p{position:relative;z-index:2;max-width:100%;font-size:clamp(14px,1.8vw,18px);line-height:1.28;color:#f0d7aa;margin:0;overflow-wrap:anywhere;}
.turnCard_good .turnCardFace,.turnCardOverlay .effect_good .turnCardFace{border-color:rgba(116,255,162,.66);box-shadow:0 0 50px rgba(82,255,139,.24), inset 0 1px 0 rgba(255,244,194,.22), inset 0 0 0 3px rgba(0,0,0,.24);}
.turnCard_bad .turnCardFace,.turnCardOverlay .effect_bad .turnCardFace{border-color:rgba(255,111,94,.72);box-shadow:0 0 54px rgba(255,83,57,.25), inset 0 1px 0 rgba(255,244,194,.22), inset 0 0 0 3px rgba(0,0,0,.24);}
.turnCard_special .turnCardFace{box-shadow:0 0 58px rgba(255,203,93,.28), inset 0 1px 0 rgba(255,244,194,.22), inset 0 0 0 3px rgba(0,0,0,.24);}
.turnCardReturning .turnCard3d{animation:turnCardFlyOut .82s cubic-bezier(.55,.04,.82,.35) both!important;}
.cpuActionLeaving .turnCard3d{animation:cpuActionCardOut .55s ease-in both!important;}
@keyframes turnCardFlyIn{
  0%{opacity:.98;transform:translate3d(var(--from-x,0),var(--from-y,210px),0) rotateY(0deg) rotateZ(-8deg) scale(.44);}
  34%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .35),calc(var(--from-y,210px) * .35),70px) rotateY(92deg) rotateZ(3deg) scale(.75);}
  72%{transform:translate3d(0,0,0) rotateY(181deg) rotateZ(-1deg) scale(1.04);}
  100%{opacity:1;transform:translate3d(0,0,0) rotateY(180deg) rotateZ(0deg) scale(1);}
}
@keyframes turnCardFlyOut{
  0%{opacity:1;transform:translate3d(0,0,0) rotateY(180deg) rotateZ(0deg) scale(1);}
  44%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .22),calc(var(--from-y,210px) * .22),40px) rotateY(260deg) rotateZ(5deg) scale(.86);}
  100%{opacity:0;transform:translate3d(var(--from-x,0),var(--from-y,210px),0) rotateY(360deg) rotateZ(8deg) scale(.35);}
}
@keyframes cpuActionCardIn{0%{opacity:0;transform:translateY(28px) rotateX(12deg) scale(.86)}100%{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes cpuActionCardOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-18px) scale(.96)}}
@keyframes deckFlashPulse{0%{opacity:.35;filter:brightness(1)}16%{opacity:.95;filter:brightness(1.5)}80%{opacity:.75}100%{opacity:0;filter:brightness(.9)}}
@media (max-width:680px){.turnCard3d{--card-w:min(250px,82vw);--card-h:min(356px,68vh)}.turnCardIcon{width:70px;height:70px;font-size:34px}.turnCardFace{padding:20px}.turnCardFace h2{font-size:28px}.turnCardFace p{font-size:14px}.deckFlash{width:70px;height:100px}}
@media (prefers-reduced-motion: reduce){.turnCard3d,.deckFlash{animation:none!important}.turnCardBack{display:none}.turnCardFace{transform:none!important}}

/* v4.10 board/deck/flip correction patch.
   The board gets priority over side panels, the deck lives in the table center,
   and the turn card flips face-up without mirrored/backward text. */
:root{
  --wv-board-slot:clamp(34px,3.15vw,54px);
  --wv-board-gap:clamp(5px,.48vw,8px);
  --wv-rack-pad-final:clamp(12px,1.1vw,18px);
}

/* Use vertical page flow when space is tight instead of squeezing the board. */
@media (max-width:2100px){
  .gameHud{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    gap:14px!important;
    overflow:visible!important;
  }
  .centerBoard{order:1!important;width:100%!important;overflow:visible!important;}
  .leftCommand{order:2!important;width:100%!important;max-height:none!important;overflow:visible!important;}
  .rightRail{order:3!important;width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
}
@media (max-width:1050px){.rightRail{display:flex!important;flex-direction:column!important;}}

/* Main game area: no horizontal scrollbars or squeezed side-card dock. */
.boardAndCard,
.boardAndCard.roundLayout,
.boardAndCard.stackedLayout{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
.cardDock{display:none!important;}
.centerBoard,.trayTheater,.circleTheater{min-width:0!important;max-width:100%!important;overflow:visible!important;}

/* Center deck on the board. This is the actual animation origin. */
.boardDeckSource{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  z-index:4!important;
  pointer-events:none!important;
}
.circleTheater .boardDeckSource{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}
.trayTheater:not(.circleTheater) .boardDeckSource{
  position:relative!important;
  margin:10px auto!important;
  order:2!important;
}
.boardDeckSource .miniDeck{
  width:clamp(62px,5.2vw,82px)!important;
  height:clamp(86px,7.2vw,116px)!important;
  border-radius:12px!important;
  opacity:.94!important;
  transform:none!important;
}
.boardDeckSource .grayDeck{opacity:.72!important;}
.boardDeckSource .miniDeck span{width:34px!important;height:34px!important;font-size:18px!important;}
.boardDeckSource .miniDeck strong{font-size:12px!important;}

/* Round table geometry: fixed rack widths with a real center gap, never stretched. */
.roundLayout .trayTheater.circleTheater{
  --wv-round-slot:var(--wv-board-slot)!important;
  --wv-slot-gap:var(--wv-board-gap)!important;
  display:grid!important;
  grid-template-columns:max-content minmax(clamp(120px,18vw,360px),1fr) max-content!important;
  grid-template-rows:max-content minmax(150px,1fr) max-content!important;
  align-items:center!important;
  justify-items:center!important;
  justify-content:center!important;
  column-gap:clamp(42px,7.5vw,170px)!important;
  row-gap:clamp(28px,4.5vh,70px)!important;
  min-height:clamp(500px,calc(100svh - 185px),780px)!important;
  padding:clamp(24px,3vw,48px) clamp(12px,2.2vw,42px) clamp(24px,3vw,48px)!important;
  border-radius:30px!important;
  position:relative!important;
  overflow:visible!important;
}
.roundLayout .circleTheater .playerRack{
  width:calc((12 * var(--wv-board-slot)) + (11 * var(--wv-board-gap)) + (2 * var(--wv-rack-pad-final)))!important;
  min-width:calc((12 * var(--wv-board-slot)) + (11 * var(--wv-board-gap)) + (2 * var(--wv-rack-pad-final)))!important;
  max-width:calc(100vw - 28px)!important;
  padding:clamp(46px,4.2vw,58px) var(--wv-rack-pad-final) clamp(13px,1.2vw,17px)!important;
  overflow:visible!important;
  justify-self:center!important;
}
.roundLayout .circleTheater .wordRack,
.wordRack,
.previewRack{
  grid-template-columns:repeat(12,var(--wv-board-slot))!important;
  grid-auto-flow:row!important;
  grid-auto-columns:unset!important;
  justify-content:center!important;
  gap:var(--wv-board-gap)!important;
  overflow:visible!important;
  max-width:100%!important;
}
.roundLayout .circleTheater .slotShell,
.slotShell{
  width:var(--wv-board-slot)!important;
  min-width:var(--wv-board-slot)!important;
  max-width:var(--wv-board-slot)!important;
}
.roundLayout .circleTheater .slotTile,
.roundLayout .circleTheater .emptySlot,
.slotTile,
.emptySlot{
  width:var(--wv-board-slot)!important;
  min-width:var(--wv-board-slot)!important;
  max-width:var(--wv-board-slot)!important;
  aspect-ratio:.78/1!important;
  height:auto!important;
  min-height:calc(var(--wv-board-slot) * 1.18)!important;
  border-radius:clamp(7px,.7vw,10px)!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
}
.slotTile .tileGlyph{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) scale(1)!important;
  transform-origin:center!important;
  font-size:clamp(15px,2.1vw,32px)!important;
  max-width:80%!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.coveredTile:before{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  font-size:clamp(14px,1.45vw,24px)!important;
  line-height:1!important;
}
.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;transform:rotate(-5deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;transform:rotate(5deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;transform:rotate(-5deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;transform:rotate(5deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}

@media (max-width:1100px){
  :root{--wv-board-slot:clamp(28px,4.15vw,42px);--wv-board-gap:3px;}
  .roundLayout .trayTheater.circleTheater{column-gap:clamp(20px,4vw,64px)!important;row-gap:20px!important;min-height:clamp(440px,calc(100svh - 160px),650px)!important;}
}
@media (max-width:760px){
  :root{--wv-board-slot:clamp(22px,6.1vw,34px);--wv-board-gap:2px;--wv-rack-pad-final:6px;}
  .roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;min-height:0!important;padding:8px!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .roundLayout .circleTheater:before{display:none!important;}
  .roundLayout .circleTheater .playerRack{transform:none!important;min-width:0!important;max-width:100%!important;}
  .boardDeckSource{position:relative!important;left:auto!important;top:auto!important;transform:none!important;order:2!important;}
}

/* Face-up card animation from the center deck. No mirrored text. */
.turnCardOverlay,
.cpuActionOverlay{z-index:10030!important;overflow:hidden!important;}
.turnCard3d{
  transform-style:preserve-3d!important;
  animation:wv410CardTravel 1.35s cubic-bezier(.13,.86,.16,1.02) both!important;
}
.turnCardBack,
.turnCardFace{
  transform:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.turnCardBack{opacity:1;animation:wv410BackHide 1.35s step-end both!important;}
.turnCardFace{opacity:0;animation:wv410FaceShow 1.35s step-end both!important;}
.turnCardReturning .turnCard3d{animation:wv410CardReturn .95s cubic-bezier(.55,.04,.82,.35) both!important;}
.turnCardReturning .turnCardFace{opacity:1;animation:wv410FaceHide .95s step-end both!important;}
.turnCardReturning .turnCardBack{opacity:0;animation:wv410BackShow .95s step-end both!important;}
@keyframes wv410CardTravel{
  0%{opacity:.98;transform:translate3d(var(--from-x,0),var(--from-y,0),0) rotateY(0deg) rotateZ(-8deg) scale(.42);}
  42%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .35),calc(var(--from-y,0) * .35),80px) rotateY(86deg) rotateZ(2deg) scale(.78);}
  58%{transform:translate3d(calc(var(--from-x,0) * .18),calc(var(--from-y,0) * .18),64px) rotateY(4deg) rotateZ(-1deg) scale(.93);}
  100%{opacity:1;transform:translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1);}
}
@keyframes wv410CardReturn{
  0%{opacity:1;transform:translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1);}
  42%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .22),calc(var(--from-y,0) * .22),60px) rotateY(82deg) rotateZ(4deg) scale(.84);}
  100%{opacity:0;transform:translate3d(var(--from-x,0),var(--from-y,0),0) rotateY(0deg) rotateZ(8deg) scale(.35);}
}
@keyframes wv410BackHide{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes wv410FaceShow{0%,49%{opacity:0;}50%,100%{opacity:1;}}
@keyframes wv410FaceHide{0%,42%{opacity:1;}43%,100%{opacity:0;}}
@keyframes wv410BackShow{0%,42%{opacity:0;}43%,100%{opacity:1;}}
.deckFlash{animation:deckFlashPulse 7.4s ease both!important;}
/* CPU action cards are announcements, not deck draws, so show them face-up immediately. */
.cpuActionOverlay .turnCard3d{animation:cpuActionCardIn .55s cubic-bezier(.14,.88,.15,1.05) both!important;}
.cpuActionOverlay .turnCardBack{display:none!important;}
.cpuActionOverlay .turnCardFace{opacity:1!important;animation:none!important;transform:none!important;}
.cpuActionLeaving .turnCard3d{animation:cpuActionCardOut .55s ease-in both!important;}

/* v4.11 board stability, tray geometry, centered words, and true face-up card flip.
   This final override intentionally wins over all previous patch CSS. */
:root{
  --wv-board-slot:clamp(26px,2.6vw,50px);
  --wv-board-gap:clamp(3px,.42vw,6px);
  --wv-rack-pad-final:clamp(12px,1.05vw,18px);
  --wv-rack-width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11) + (var(--wv-rack-pad-final) * 2));
}
html,body,#app,main,.gameScreen{max-width:100%!important;overflow-x:hidden!important;}
*{box-sizing:border-box;}
.gameScreen{padding-inline:clamp(6px,1vw,16px)!important;}
.gameHud{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.centerBoard{order:1!important;width:100%!important;max-width:1500px!important;margin:0 auto!important;overflow:visible!important;}
.leftCommand{order:2!important;width:min(100%,1500px)!important;margin:0 auto!important;max-height:none!important;overflow:visible!important;}
.rightRail{order:3!important;width:min(100%,1500px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
@media (max-width:1050px){.rightRail{display:flex!important;flex-direction:column!important;}}
.boardAndCard,.boardAndCard.roundLayout,.boardAndCard.stackedLayout{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}
.cardDock{display:none!important;}
.trayTheater,.circleTheater{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}

/* Center setup panel and keep setup preview as a stable 12x1 tray. */
.setupShell{grid-template-columns:1fr!important;justify-items:center!important;align-items:start!important;width:100%!important;}
.setupCard,.readyPanel{width:min(100%,820px)!important;justify-self:center!important;}
.sharedSetupGrid{width:100%!important;}
.previewRack{margin-inline:auto!important;}

/* Tray layout: 12 x 1 forever. Empty spaces reserve a slot but show no card. */
.playerRack{
  width:min(100%,calc(var(--wv-rack-width) + 22px))!important;
  max-width:100%!important;
  min-width:0!important;
  padding:clamp(52px,4vw,62px) var(--wv-rack-pad-final) clamp(14px,1.2vw,18px)!important;
  overflow:visible!important;
}
.wordRack,.previewRack,.roundLayout .circleTheater .wordRack{
  display:grid!important;
  grid-template-columns:repeat(12,var(--wv-board-slot))!important;
  grid-template-rows:auto!important;
  grid-auto-flow:row!important;
  grid-auto-columns:unset!important;
  gap:var(--wv-board-gap)!important;
  justify-content:center!important;
  align-items:start!important;
  width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11))!important;
  max-width:100%!important;
  margin-inline:auto!important;
  overflow:visible!important;
  padding:0!important;
}
.slotShell,.roundLayout .circleTheater .slotShell{
  width:var(--wv-board-slot)!important;
  min-width:var(--wv-board-slot)!important;
  max-width:var(--wv-board-slot)!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  justify-items:center!important;
  align-items:start!important;
  text-align:center!important;
  overflow:visible!important;
}
.slotValue,.roundLayout .circleTheater .slotValue{
  height:14px!important;
  line-height:1!important;
  margin:0 0 5px!important;
  font-size:clamp(8px,.8vw,12px)!important;
  font-weight:900!important;
  white-space:nowrap!important;
  color:#e0b66b!important;
  text-align:center!important;
}
.emptySlotValue{visibility:hidden!important;}
.slotTile,.emptySlot,.roundLayout .circleTheater .slotTile,.roundLayout .circleTheater .emptySlot{
  width:var(--wv-board-slot)!important;
  min-width:var(--wv-board-slot)!important;
  max-width:var(--wv-board-slot)!important;
  aspect-ratio:.72 / 1!important;
  height:auto!important;
  min-height:0!important;
  border-radius:clamp(7px,.65vw,10px)!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  padding:0!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}
.emptySlot{opacity:0!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important;}
.slotTile .tileGlyph,.roundLayout .circleTheater .slotTile .tileGlyph{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  transform:none!important;
  text-align:center!important;
  line-height:1!important;
  pointer-events:none!important;
  z-index:2!important;
}
.slotTile .tileGlyphInner{
  display:block!important;
  transform-origin:center center!important;
  font-family:Georgia,serif!important;
  font-weight:900!important;
  font-size:calc(var(--wv-board-slot) * .66)!important;
  line-height:1!important;
  max-width:86%!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.dotTile .tileGlyphInner{font-size:calc(var(--wv-board-slot) * .72)!important;}
.tileSymbol{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:rgba(219,151,62,.30)!important;font-size:calc(var(--wv-board-slot) * .38)!important;line-height:1!important;z-index:1!important;pointer-events:none!important;}
.revealedTile .tileSymbol{opacity:.15!important;}
.coveredTile .tileGlyph{display:none!important;}
.coveredTile:before{content:none!important;display:none!important;}
.coveredTile .tileSymbol{opacity:1!important;}
.rackNameplate{top:-9px!important;z-index:5!important;max-width:calc(100% - 28px)!important;min-width:clamp(150px,34%,230px)!important;}
.rackFooter{margin-top:9px!important;min-height:18px!important;}

/* Center-deck board. It is animation origin and never pushes layout. */
.boardDeckSource{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;z-index:4!important;pointer-events:none!important;}
.circleTheater .boardDeckSource{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;}
.trayTheater:not(.circleTheater) .boardDeckSource{position:relative!important;margin:12px auto!important;}
.boardDeckSource .miniDeck{width:clamp(58px,5vw,82px)!important;height:clamp(82px,7vw,116px)!important;}

/* Round-table: safe zones like the sketch. Rotation cannot crop trays. */
.roundLayout .trayTheater.circleTheater{
  --wv-board-slot:clamp(26px,2.45vw,46px);
  --wv-board-gap:clamp(3px,.36vw,5px);
  --wv-rack-pad-final:clamp(11px,.9vw,16px);
  --wv-rack-width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11) + (var(--wv-rack-pad-final) * 2));
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(clamp(100px,15vw,280px),.55fr) minmax(0,1fr)!important;
  grid-template-rows:max-content minmax(170px,1fr) max-content!important;
  column-gap:clamp(28px,6vw,140px)!important;
  row-gap:clamp(26px,4vh,64px)!important;
  align-items:center!important;
  justify-items:center!important;
  justify-content:center!important;
  min-height:clamp(560px,calc(100svh - 150px),800px)!important;
  padding:clamp(30px,3.1vw,54px) clamp(22px,3.1vw,58px) clamp(24px,2.8vw,46px)!important;
  border-radius:30px!important;
  overflow:visible!important;
}
.roundLayout .circleTheater:before{inset:22%!important;display:block!important;}
.roundLayout .circleTheater .playerRack{
  width:var(--wv-rack-width)!important;
  min-width:var(--wv-rack-width)!important;
  max-width:100%!important;
  justify-self:center!important;
  margin:0!important;
  transform-origin:center center!important;
}
.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
@media (max-width:980px){
  :root{--wv-board-slot:clamp(24px,4.7vw,38px);--wv-board-gap:3px;--wv-rack-pad-final:8px;}
  .roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;min-height:0!important;padding:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .roundLayout .circleTheater:before{display:none!important;}
  .roundLayout .circleTheater .playerRack{transform:none!important;min-width:0!important;width:min(100%,var(--wv-rack-width))!important;}
  .circleTheater .boardDeckSource{position:relative!important;left:auto!important;top:auto!important;transform:none!important;order:2!important;}
}
@media (max-width:520px){
  :root{--wv-board-slot:clamp(21px,6vw,29px);--wv-board-gap:2px;--wv-rack-pad-final:6px;}
  .slotValue{font-size:7px!important;height:10px!important;margin-bottom:3px!important;}
  .rackNameplate{font-size:10px!important;min-height:36px!important;}
  .rackNameplate .avatar{width:28px!important;height:28px!important;}
}

/* True two-sided deck-to-front turn card animation. */
.turnCardOverlay,.cpuActionOverlay{position:fixed!important;inset:0!important;z-index:10040!important;display:grid!important;place-items:center!important;pointer-events:none!important;overflow:hidden!important;perspective:1200px!important;padding:16px!important;}
.turnCard3d{--card-w:min(292px,78vw);--card-h:min(410px,72vh);width:var(--card-w)!important;height:var(--card-h)!important;position:relative!important;transform-style:preserve-3d!important;animation:wv411CardOutOfDeck 1.35s cubic-bezier(.14,.86,.16,1.02) both!important;filter:drop-shadow(0 34px 56px rgba(0,0,0,.68))!important;}
.turnCardBack,.turnCardFace{position:absolute!important;inset:0!important;border-radius:22px!important;overflow:hidden!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;opacity:1!important;animation:none!important;}
.turnCardBack{transform:rotateY(0deg)!important;}
.turnCardFace{transform:rotateY(180deg)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;text-align:center!important;}
.turnCardReturning .turnCard3d{animation:wv411CardReturnToDeck .95s cubic-bezier(.55,.04,.82,.35) both!important;}
.deckFlash{animation:deckFlashPulse 7.4s ease both!important;}
@keyframes wv411CardOutOfDeck{
  0%{opacity:.98;transform:translate3d(var(--from-x,0),var(--from-y,0),0) rotateY(0deg) rotateZ(-7deg) scale(.36);}
  36%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .38),calc(var(--from-y,0) * .38),80px) rotateY(82deg) rotateZ(2deg) scale(.78);}
  62%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .12),calc(var(--from-y,0) * .12),62px) rotateY(176deg) rotateZ(-1deg) scale(.96);}
  100%{opacity:1;transform:translate3d(0,0,0) rotateY(180deg) rotateZ(0deg) scale(1);}
}
@keyframes wv411CardReturnToDeck{
  0%{opacity:1;transform:translate3d(0,0,0) rotateY(180deg) rotateZ(0deg) scale(1);}
  45%{opacity:1;transform:translate3d(calc(var(--from-x,0) * .25),calc(var(--from-y,0) * .25),70px) rotateY(260deg) rotateZ(4deg) scale(.82);}
  100%{opacity:0;transform:translate3d(var(--from-x,0),var(--from-y,0),0) rotateY(360deg) rotateZ(7deg) scale(.34);}
}
.cpuActionOverlay .turnCard3d{--card-w:min(330px,82vw);--card-h:min(300px,62vh);animation:cpuActionCardIn .55s cubic-bezier(.14,.88,.15,1.05) both!important;transform:none!important;}
.cpuActionOverlay .turnCardBack{display:none!important;}
.cpuActionOverlay .turnCardFace{transform:none!important;opacity:1!important;}
.cpuActionLeaving .turnCard3d{animation:cpuActionCardOut .55s ease-in both!important;}


/* v4.12 surgical patch: manual-flip gameplay support, board-safe round layout, and stable keyboard/tray visibility.
   This is intentionally last so it wins over earlier experimental round-table overrides. */
.gameHud{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.centerBoard{order:1!important;width:100%!important;max-width:1500px!important;margin:0 auto!important;position:relative!important;z-index:2!important;overflow:visible!important;}
.leftCommand{order:2!important;width:min(100%,1500px)!important;margin:0 auto!important;position:relative!important;z-index:1!important;max-height:none!important;overflow-y:visible!important;overflow-x:hidden!important;}
.rightRail{order:3!important;width:min(100%,1500px)!important;margin:0 auto!important;position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:12px!important;overflow:visible!important;}
.boardAndCard,.boardAndCard.roundLayout,.boardAndCard.stackedLayout{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}
.trayTheater,.circleTheater{max-width:100%!important;min-width:0!important;}

/* Board-safe round-table: no tray can sit over the side panels because side panels are below,
   and no tray can push outside the board because the theatre owns its safe grid. */
.roundLayout .trayTheater.circleTheater{
  --wv-board-slot:clamp(24px,1.7vw,38px);
  --wv-board-gap:clamp(3px,.34vw,5px);
  --wv-rack-pad-final:clamp(10px,.85vw,15px);
  --wv-rack-width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11) + (var(--wv-rack-pad-final) * 2));
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(clamp(130px,18vw,340px),.62fr) minmax(0,1fr)!important;
  grid-template-rows:max-content minmax(190px,1fr) max-content!important;
  column-gap:clamp(34px,7vw,170px)!important;
  row-gap:clamp(28px,5vh,72px)!important;
  align-items:center!important;
  justify-items:center!important;
  padding:clamp(34px,3.5vw,62px) clamp(28px,3.6vw,70px) clamp(28px,3vw,52px)!important;
  min-height:clamp(610px,calc(100svh - 140px),840px)!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.roundLayout .circleTheater .playerRack{
  width:var(--wv-rack-width)!important;
  min-width:0!important;
  max-width:100%!important;
  justify-self:center!important;
  margin:0!important;
}
.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;justify-self:center!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;justify-self:center!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;justify-self:center!important;transform:none!important;}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:1 / -1!important;grid-row:1!important;justify-self:center!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;justify-self:center!important;transform:none!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:1 / -1!important;grid-row:1!important;justify-self:center!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;justify-self:center!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;justify-self:center!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;justify-self:center!important;transform:none!important;}

/* Keep every tray 12x1, centered, readable, and non-circular. */
.wordRack,.previewRack,.roundLayout .circleTheater .wordRack{
  display:grid!important;
  grid-template-columns:repeat(12,var(--wv-board-slot))!important;
  grid-auto-flow:row!important;
  grid-template-rows:auto!important;
  justify-content:center!important;
  align-items:start!important;
  gap:var(--wv-board-gap)!important;
  width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11))!important;
  max-width:100%!important;
  overflow:visible!important;
  margin-inline:auto!important;
  padding:0!important;
}
.slotShell,.roundLayout .circleTheater .slotShell{width:var(--wv-board-slot)!important;min-width:0!important;max-width:var(--wv-board-slot)!important;display:grid!important;justify-items:center!important;overflow:visible!important;}
.slotTile,.emptySlot,.roundLayout .circleTheater .slotTile,.roundLayout .circleTheater .emptySlot{
  width:var(--wv-board-slot)!important;
  min-width:0!important;
  max-width:var(--wv-board-slot)!important;
  aspect-ratio:.72/1!important;
  height:auto!important;
  min-height:0!important;
  border-radius:clamp(7px,.65vw,10px)!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.slotTile .tileGlyph,.roundLayout .circleTheater .slotTile .tileGlyph{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;text-align:center!important;line-height:1!important;}
.slotTile .tileGlyphInner,.roundLayout .circleTheater .slotTile .tileGlyphInner{font-size:calc(var(--wv-board-slot) * .66)!important;line-height:1!important;max-width:88%!important;display:block!important;text-align:center!important;transform:none!important;}
.dotTile .tileGlyphInner{font-size:calc(var(--wv-board-slot) * .72)!important;}
.tileSymbol{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;font-size:calc(var(--wv-board-slot) * .38)!important;line-height:1!important;}
.manualClickableTile,.clickableTile{outline:3px solid rgba(97,220,255,.72)!important;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(80,210,255,.32),inset 0 0 16px rgba(100,230,255,.10)!important;}
.pendingBanner{position:relative!important;z-index:8!important;}

@media (max-width:980px){
  .roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;min-height:0!important;padding:12px!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .roundLayout .circleTheater:before{display:none!important;}
  .roundLayout .circleTheater .playerRack{width:min(100%,var(--wv-rack-width))!important;transform:none!important;}
}
@media (max-width:560px){
  :root{--wv-board-slot:clamp(20px,6.1vw,29px);--wv-board-gap:2px;--wv-rack-pad-final:6px;}
  .roundLayout .trayTheater.circleTheater{--wv-board-slot:clamp(20px,6.1vw,29px);--wv-board-gap:2px;--wv-rack-pad-final:6px;}
  .slotValue{font-size:7px!important;height:10px!important;margin-bottom:3px!important;}
  .rackNameplate{font-size:10px!important;min-height:34px!important;}
}

/* v4.13 music + Spotify settings */
.audioOptions{margin:14px 0 20px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.18)}
.audioGrid{display:grid;grid-template-columns:minmax(130px,.55fr) minmax(190px,1fr);gap:10px 14px;align-items:center}
.audioGrid label{margin:0;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.audioGrid label.settingToggle{text-transform:none;letter-spacing:0;font-size:14px;color:var(--cream);display:flex;align-items:center;gap:8px}
.audioGrid input[type="range"]{width:100%;accent-color:#dca344}.audioGrid select,.spotifyPlaylistRow select{min-width:0;width:100%}
.audioButtonRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}.audioButtonRow button{min-height:38px}.spotifyBox{margin-top:14px;padding:12px;border:1px solid rgba(255,218,128,.22);border-radius:16px;background:rgba(255,210,120,.05)}.spotifyBox h3{margin:0 0 6px}.spotifyBox p{margin:6px 0;color:var(--muted)}.spotifyStatus{font-size:13px;color:var(--cream)!important}.spotifyPlaylistRow{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:10px;align-items:center;margin-top:12px}.softDisabled{opacity:.72}@media(max-width:680px){.audioGrid,.spotifyPlaylistRow{grid-template-columns:1fr}.audioButtonRow{display:grid;grid-template-columns:1fr}.audioButtonRow button{width:100%}}

/* v4.14 focused fixes: visible Spotify controls, no ambience loop, centered glyphs, safe board, and readable card flip. */
#audioOptions{scroll-margin-top:90px;}
#ambienceBtn{font-size:18px;}
#symbolInput.keyboardFilled{box-shadow:0 0 0 2px rgba(255,218,120,.62),0 0 22px rgba(255,190,72,.24)!important;}

/* Keep the game board visible and keep trays from floating over panels. */
.gameHud{display:flex!important;flex-direction:column!important;grid-template-columns:1fr!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:14px!important;}
.centerBoard{order:1!important;width:100%!important;max-width:min(1500px,100%)!important;margin:0 auto!important;overflow:visible!important;z-index:2!important;}
.leftCommand{order:2!important;width:min(1500px,100%)!important;margin:0 auto!important;overflow-x:hidden!important;overflow-y:visible!important;max-height:none!important;z-index:1!important;}
.rightRail{order:3!important;width:min(1500px,100%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:12px!important;overflow:visible!important;z-index:1!important;}
.boardAndCard,.boardAndCard.roundLayout,.boardAndCard.stackedLayout{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}
.cardDock{display:none!important;}
.trayTheater,.circleTheater{max-width:100%!important;min-width:0!important;overflow:visible!important;}

/* Board/card sizing: 12x1 always, centered glyphs always, no circle cards. */
:root{--wv-board-slot:clamp(28px,2.35vw,48px);--wv-board-gap:clamp(4px,.42vw,7px);--wv-rack-pad-final:clamp(11px,1vw,17px);}
.wordRack,.previewRack,.roundLayout .circleTheater .wordRack{
  display:grid!important;
  grid-template-columns:repeat(12,var(--wv-board-slot))!important;
  grid-template-rows:auto!important;
  justify-content:center!important;
  align-items:start!important;
  gap:var(--wv-board-gap)!important;
  width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11))!important;
  max-width:100%!important;
  overflow:visible!important;
  margin-inline:auto!important;
  padding:0!important;
}
.slotShell,.roundLayout .circleTheater .slotShell{width:var(--wv-board-slot)!important;max-width:var(--wv-board-slot)!important;min-width:0!important;display:grid!important;grid-template-rows:auto auto!important;justify-items:center!important;align-items:start!important;overflow:visible!important;}
.slotValue,.roundLayout .circleTheater .slotValue{height:14px!important;line-height:1!important;margin:0 0 5px!important;text-align:center!important;white-space:nowrap!important;font-size:clamp(8px,.72vw,12px)!important;}
.slotTile,.emptySlot,.roundLayout .circleTheater .slotTile,.roundLayout .circleTheater .emptySlot{width:var(--wv-board-slot)!important;min-width:0!important;max-width:var(--wv-board-slot)!important;aspect-ratio:.72/1!important;height:auto!important;min-height:0!important;border-radius:clamp(7px,.65vw,10px)!important;position:relative!important;display:block!important;overflow:hidden!important;padding:0!important;}
.emptySlot{opacity:0!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important;}
.tileSymbol{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;font-size:calc(var(--wv-board-slot) * .38)!important;line-height:1!important;color:rgba(219,151,62,.30)!important;z-index:1!important;pointer-events:none!important;}
.slotTile .tileGlyph,.roundLayout .circleTheater .slotTile .tileGlyph{position:absolute!important;inset:0!important;display:block!important;text-align:center!important;line-height:1!important;z-index:2!important;pointer-events:none!important;}
.slotTile .tileGlyphInner,.roundLayout .circleTheater .slotTile .tileGlyphInner{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%) scale(1)!important;transform-origin:center center!important;display:block!important;text-align:center!important;white-space:nowrap!important;line-height:.88!important;font-family:Georgia,serif!important;font-weight:900!important;font-size:calc(var(--wv-board-slot) * .68)!important;max-width:86%!important;}
.dotTile .tileGlyphInner{font-size:calc(var(--wv-board-slot) * .72)!important;}
.coveredTile .tileGlyph{display:none!important;}
.revealedTile .tileSymbol{opacity:.15!important;}

/* Safe round-table positioning with a real center gap. */
.roundLayout .trayTheater.circleTheater{
  --wv-board-slot:clamp(27px,2.05vw,44px);
  --wv-board-gap:clamp(3px,.34vw,6px);
  --wv-rack-pad-final:clamp(10px,.9vw,16px);
  --wv-rack-width:calc((var(--wv-board-slot) * 12) + (var(--wv-board-gap) * 11) + (var(--wv-rack-pad-final) * 2));
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(clamp(150px,19vw,380px),.68fr) minmax(0,1fr)!important;
  grid-template-rows:max-content minmax(190px,1fr) max-content!important;
  column-gap:clamp(42px,8vw,190px)!important;
  row-gap:clamp(30px,5vh,78px)!important;
  align-items:center!important;
  justify-items:center!important;
  justify-content:center!important;
  min-height:clamp(620px,calc(100svh - 145px),850px)!important;
  padding:clamp(36px,3.6vw,66px) clamp(28px,3.6vw,74px) clamp(28px,3vw,54px)!important;
  border-radius:30px!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.roundLayout .circleTheater:before{inset:23%!important;display:block!important;pointer-events:none!important;}
.roundLayout .circleTheater .playerRack{width:var(--wv-rack-width)!important;min-width:0!important;max-width:100%!important;margin:0!important;justify-self:center!important;overflow:visible!important;padding:clamp(44px,4vw,58px) var(--wv-rack-pad-final) clamp(13px,1.2vw,18px)!important;}
.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:1 / -1!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
@media(max-width:980px){.roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;min-height:0!important;padding:12px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;}.roundLayout .circleTheater:before{display:none!important;}.roundLayout .circleTheater .playerRack{width:min(100%,var(--wv-rack-width))!important;transform:none!important;}}
@media(max-width:560px){:root{--wv-board-slot:clamp(20px,6.05vw,29px);--wv-board-gap:2px;--wv-rack-pad-final:6px}.roundLayout .trayTheater.circleTheater{--wv-board-slot:clamp(20px,6.05vw,29px);--wv-board-gap:2px;--wv-rack-pad-final:6px}.slotValue{font-size:7px!important;height:10px!important;margin-bottom:3px!important}.rackNameplate{font-size:10px!important;min-height:34px!important}}

/* Center deck: current card shrinks down and remains in the middle until the turn card changes. */
.boardDeckSource{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;z-index:4!important;pointer-events:none!important;}
.circleTheater .boardDeckSource{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;}
.trayTheater:not(.circleTheater) .boardDeckSource{position:relative!important;margin:12px auto!important;}
.boardDeckSource .miniDeck{width:clamp(58px,5vw,82px)!important;height:clamp(82px,7vw,116px)!important;}
.centerTurnCardMini{width:clamp(86px,8vw,128px);min-height:clamp(110px,10vw,164px);border-radius:14px;border:1px solid rgba(255,215,128,.55);background:radial-gradient(circle at 50% 18%,rgba(255,220,140,.18),transparent 30%),linear-gradient(180deg,#6b3210,#2b1106);box-shadow:0 12px 30px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,244,194,.14);display:grid;place-items:center;text-align:center;padding:8px;color:#ffe4a0;animation:centerMiniCardPop .45s ease both;}
.centerTurnCardMini .miniCardTiny{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#d5a24e;font-weight:900;}
.centerTurnCardMini strong{font-family:Georgia,serif;font-size:clamp(13px,1.3vw,19px);line-height:1.02;text-wrap:balance;}
.centerTurnCardMini span{font-size:clamp(18px,2.2vw,30px);line-height:1;}
.emptyMiniTurnCard{opacity:.28;background:repeating-linear-gradient(45deg,rgba(255,214,130,.06) 0 7px,transparent 7px 14px),linear-gradient(160deg,#60300f,#170704);}
@keyframes centerMiniCardPop{0%{opacity:0;transform:scale(.82)}100%{opacity:1;transform:scale(1)}}

/* Reliable non-mirrored face-up card animation. JS toggles turnCardFaceUp, then shrinks overlay away while center card remains. */
.turnCardOverlay,.cpuActionOverlay{position:fixed!important;inset:0!important;z-index:10040!important;display:grid!important;place-items:center!important;pointer-events:none!important;overflow:hidden!important;perspective:1200px!important;padding:16px!important;}
.turnCard3d{--card-w:min(292px,78vw);--card-h:min(410px,72vh);width:var(--card-w)!important;height:var(--card-h)!important;position:relative!important;transform-style:preserve-3d!important;animation:wv414CardLiftFromDeck .78s cubic-bezier(.14,.86,.16,1.02) both!important;filter:drop-shadow(0 34px 56px rgba(0,0,0,.68))!important;}
.turnCardBack,.turnCardFace{position:absolute!important;inset:0!important;border-radius:22px!important;overflow:hidden!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transition:opacity .16s linear!important;}
.turnCardBack{opacity:1!important;transform:none!important;}
.turnCardFace{opacity:0!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;text-align:center!important;}
.turnCardFaceUp .turnCard3d{animation:wv414CardFlipFaceUp .72s ease both!important;}
.turnCardFaceUp .turnCardBack{opacity:0!important;}
.turnCardFaceUp .turnCardFace{opacity:1!important;}
.turnCardShrinkingToCenter .turnCard3d{animation:wv414CardShrinkToMini .9s cubic-bezier(.55,.04,.82,.35) both!important;}
.turnCardShrinkingToCenter .turnCardBack{opacity:0!important;}.turnCardShrinkingToCenter .turnCardFace{opacity:1!important;}
@keyframes wv414CardLiftFromDeck{0%{opacity:.98;transform:translate3d(var(--from-x,0),var(--from-y,0),0) rotateZ(-7deg) scale(.36)}100%{opacity:1;transform:translate3d(0,0,0) rotateZ(-1deg) scale(1)}}
@keyframes wv414CardFlipFaceUp{0%{transform:translate3d(0,0,0) rotateY(0deg) rotateZ(-1deg) scale(1)}49%{transform:translate3d(0,0,40px) rotateY(89deg) rotateZ(1deg) scale(1.03)}50%{transform:translate3d(0,0,40px) rotateY(91deg) rotateZ(1deg) scale(1.03)}100%{transform:translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1)}}
@keyframes wv414CardShrinkToMini{0%{opacity:1;transform:translate3d(0,0,0) rotateZ(0deg) scale(1)}100%{opacity:0;transform:translate3d(var(--from-x,0),var(--from-y,0),0) rotateZ(2deg) scale(.34)}}
.cpuActionOverlay .turnCard3d{--card-w:min(330px,82vw);--card-h:min(300px,62vh);animation:cpuActionCardIn .55s cubic-bezier(.14,.88,.15,1.05) both!important;transform:none!important;}
.cpuActionOverlay .turnCardBack{display:none!important;}.cpuActionOverlay .turnCardFace{opacity:1!important;transform:none!important;}

/* v4.16 Discord Activity support */
.discordActivityMode .homePanel .heroCard::after {
  content: "Discord Activity mode is active — players in this Discord Activity join the same Word Vault room automatically.";
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(153, 170, 255, 0.32);
  background: rgba(88, 101, 242, 0.16);
  color: #f3f2ff;
  font-size: 0.88rem;
  line-height: 1.35;
}
.discordActivityBadge {
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(92vw, 620px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(153, 170, 255, 0.38);
  background: linear-gradient(135deg, rgba(36, 42, 92, 0.95), rgba(88, 101, 242, 0.88));
  color: #fff;
  font-weight: 800;
  font-size: 0.86rem;
  text-align: center;
  box-shadow: 0 12px 42px rgba(0,0,0,0.38), inset 0 1px rgba(255,255,255,0.16);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.discordActivityBadge.error {
  border-color: rgba(255, 120, 120, 0.45);
  background: linear-gradient(135deg, rgba(88, 18, 18, 0.96), rgba(166, 49, 49, 0.9));
}
.discordActivityBadge.softHidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}
@media (max-width: 720px) {
  .discordActivityBadge {
    bottom: 10px;
    border-radius: 18px;
    font-size: 0.8rem;
  }
}


/* v4.17 items 4-16 only: board stability, readable card flip, center deck, 12x1 trays, manual/keyboard preservation. */
html, body { max-width:100%; overflow-x:hidden!important; }
body { --wv417-slot:clamp(24px, calc((100vw - 190px) / 15), 48px); --wv417-gap:clamp(2px,.34vw,6px); --wv417-rack-pad:clamp(7px,.85vw,16px); }
.gameHud{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;max-width:100%!important;overflow-x:hidden!important;}
.mainStage,.centerBoard,.boardAndCard,.trayTheater{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}
.boardAndCard{display:block!important;}
.cardDock{display:none!important;}
.leftCommand{order:2!important;width:min(100%,1500px)!important;margin-inline:auto!important;max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important;}
.centerBoard{order:1!important;}
.rightRail{order:3!important;width:min(100%,1500px)!important;margin-inline:auto!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(245px,1fr))!important;gap:12px!important;overflow:visible!important;}
.railPanel,.turnPanel{min-width:0!important;}

/* Always 12x1 trays. They scale as a unit; they do not scroll horizontally or wrap. */
.playerRack{box-sizing:border-box!important;max-width:100%!important;overflow:visible!important;padding-top:clamp(44px,4vw,60px)!important;}
.rackNameplate{position:absolute!important;top:10px!important;left:50%!important;transform:translateX(-50%)!important;max-width:calc(100% - 18px)!important;z-index:5!important;white-space:normal!important;text-align:center!important;line-height:1.1!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;}
.rackNameText{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.wordRack,.previewRack,.circleTheater .wordRack{--slot:var(--wv417-slot);display:grid!important;grid-template-columns:repeat(12,var(--slot))!important;grid-template-rows:auto!important;grid-auto-flow:column!important;gap:var(--wv417-gap)!important;justify-content:center!important;align-items:start!important;width:fit-content!important;max-width:100%!important;margin-inline:auto!important;overflow:visible!important;padding:0!important;}
.slotShell,.circleTheater .slotShell{width:var(--slot)!important;max-width:var(--slot)!important;min-width:0!important;display:grid!important;grid-template-rows:auto auto!important;justify-items:center!important;align-items:start!important;overflow:visible!important;text-align:center!important;}
.slotValue{height:clamp(10px,1vw,14px)!important;min-height:10px!important;margin:0 0 3px!important;font-size:clamp(7px,.75vw,11px)!important;line-height:1!important;display:grid!important;place-items:center!important;position:relative!important;z-index:3!important;}
.slotTile,.emptySlot,.circleTheater .slotTile,.circleTheater .emptySlot{width:var(--slot)!important;max-width:var(--slot)!important;min-width:0!important;aspect-ratio:.72/1!important;height:auto!important;min-height:0!important;border-radius:clamp(7px,.62vw,11px)!important;position:relative!important;display:grid!important;place-items:center!important;overflow:hidden!important;padding:0!important;box-sizing:border-box!important;}
.emptySlot{opacity:.16!important;background:rgba(0,0,0,.16)!important;border:1px dashed rgba(255,215,140,.2)!important;box-shadow:none!important;}
.slotTile .tileSymbol,.circleTheater .slotTile .tileSymbol{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;text-align:center!important;line-height:1!important;font-size:calc(var(--slot) * .34)!important;z-index:1!important;opacity:.52!important;pointer-events:none!important;}
.slotTile .tileGlyph,.circleTheater .slotTile .tileGlyph{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;text-align:center!important;line-height:1!important;z-index:2!important;pointer-events:none!important;}
.slotTile .tileGlyphInner,.circleTheater .slotTile .tileGlyphInner{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%) scale(1)!important;transform-origin:center center!important;display:block!important;text-align:center!important;white-space:nowrap!important;line-height:.86!important;font-family:Georgia,serif!important;font-weight:900!important;font-size:calc(var(--slot) * .66)!important;max-width:86%!important;max-height:80%!important;overflow:hidden!important;}
.dotTile .tileGlyphInner{font-size:calc(var(--slot) * .72)!important;}
.coveredTile .tileGlyph{display:none!important;}
.revealedTile .tileSymbol{opacity:.14!important;}

/* Centered setup preview: still 12x1 and centered. */
.setupCard,.setupPanel,.secretBuilder{max-width:min(100%,980px)!important;margin-inline:auto!important;}
.previewRack{--slot:clamp(22px, calc((100vw - 80px) / 13.8), 46px)!important;}

/* Round table safe seating: no absolute offscreen racks; deck is a real center grid item. */
.roundLayout .trayTheater.circleTheater{--slot:clamp(24px, calc((100vw - 240px) / 28), 44px);--rack-w:calc((12 * var(--slot)) + (11 * var(--wv417-gap)) + (2 * var(--wv417-rack-pad)));display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,300px) minmax(0,1fr)!important;grid-template-rows:auto minmax(150px,230px) auto!important;column-gap:clamp(36px,7vw,170px)!important;row-gap:clamp(24px,4vh,58px)!important;align-items:center!important;justify-items:center!important;justify-content:center!important;min-height:clamp(570px,calc(100svh - 150px),820px)!important;padding:clamp(28px,3vw,56px)!important;border-radius:30px!important;overflow:visible!important;position:relative!important;}
.roundLayout .circleTheater:before{grid-column:2!important;grid-row:2!important;position:absolute!important;inset:50% auto auto 50%!important;width:clamp(170px,24vw,330px)!important;height:clamp(130px,18vw,250px)!important;transform:translate(-50%,-50%)!important;display:block!important;z-index:0!important;}
.roundLayout .circleTheater .playerRack{position:relative!important;inset:auto!important;width:min(100%,var(--rack-w))!important;max-width:100%!important;min-width:0!important;margin:0!important;z-index:2!important;padding-left:var(--wv417-rack-pad)!important;padding-right:var(--wv417-rack-pad)!important;}
.roundLayout .circleTheater .wordRack{--slot:inherit!important;}
.roundLayout .circleTheater.seatCount2 .seat1{grid-column:2!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount2 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount3 .seat1{grid-column:1!important;grid-row:1!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat2{grid-column:3!important;grid-row:1!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount3 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.roundLayout .circleTheater.seatCount4 .seat2{grid-column:2!important;grid-row:1!important;transform:rotate(1deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat1{grid-column:1!important;grid-row:2!important;transform:rotate(-4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat3{grid-column:3!important;grid-row:2!important;transform:rotate(4deg)!important;}
.roundLayout .circleTheater.seatCount4 .seat0{grid-column:1 / -1!important;grid-row:3!important;transform:none!important;}
.boardDeckSource{grid-column:2!important;grid-row:2!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(8px,1.6vw,14px)!important;width:max-content!important;max-width:100%!important;z-index:3!important;pointer-events:none!important;margin:auto!important;}
.boardDeckSource .miniDeck{width:clamp(54px,5vw,78px)!important;height:clamp(78px,7vw,110px)!important;}
.centerTurnCardMini{width:clamp(78px,8vw,120px)!important;min-height:clamp(104px,10vw,156px)!important;}
.centerTurnCardMini strong{font-size:clamp(12px,1.2vw,17px)!important;}

/* Reliable center-deck, readable-front card animation. */
.wv417TurnCardOverlay,.wv417CpuActionOverlay{position:fixed!important;inset:0!important;z-index:10080!important;display:grid!important;place-items:center!important;pointer-events:none!important;overflow:hidden!important;perspective:1400px!important;padding:16px!important;}
.wv417DeckFlash{position:absolute!important;left:calc(50% + var(--from-x,0px))!important;top:calc(50% + var(--from-y,0px))!important;transform:translate(-50%,-50%)!important;width:clamp(58px,5vw,82px)!important;height:clamp(82px,7vw,116px)!important;border-radius:13px!important;display:grid!important;place-items:center!important;color:#ffe1a3!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em!important;text-transform:uppercase!important;border:1px solid rgba(255,215,127,.5)!important;background:linear-gradient(160deg,#653210,#180805)!important;box-shadow:0 0 42px rgba(255,199,94,.28)!important;animation:wv417DeckPulse 2.2s ease both!important;}
.wv417TurnCard{--card-w:min(292px,78vw);--card-h:min(410px,72vh);width:var(--card-w)!important;height:var(--card-h)!important;position:relative!important;transform:translate3d(var(--from-x,0px),var(--from-y,0px),0) rotateZ(-6deg) scale(.34)!important;transition:transform .72s cubic-bezier(.14,.86,.16,1.02), opacity .45s ease!important;filter:drop-shadow(0 34px 56px rgba(0,0,0,.68))!important;}
.wv417Lifted .wv417TurnCard{transform:translate3d(0,0,0) rotateZ(-1deg) scale(1)!important;}
.wv417TurnCardStage{position:absolute!important;inset:0!important;transform-style:preserve-3d!important;transition:transform .78s ease!important;}
.wv417TurnCardFace{position:absolute!important;inset:0!important;border-radius:22px!important;overflow:hidden!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;box-sizing:border-box!important;}
.wv417TurnCardBack{transform:rotateY(0deg)!important;display:grid!important;place-items:center!important;text-align:center!important;background:radial-gradient(circle at 50% 20%,rgba(255,219,139,.2),transparent 34%),linear-gradient(160deg,#653210,#190805)!important;border:2px solid rgba(255,215,127,.54)!important;color:#ffe4a0!important;}
.wv417TurnCardBack strong{font-family:Georgia,serif!important;font-size:clamp(30px,4vw,46px)!important;line-height:.9!important;letter-spacing:.08em!important;}
.wv417TurnCardFront{transform:rotateY(180deg)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;text-align:center!important;padding:clamp(20px,3vw,34px)!important;background:radial-gradient(circle at 50% 15%,rgba(255,227,141,.21),transparent 34%),linear-gradient(180deg,#794118,#2a1005)!important;border:2px solid rgba(255,215,127,.62)!important;color:#ffefc6!important;}
.wv417TurnCardFront h2{font-family:Georgia,serif!important;font-size:clamp(28px,4vw,43px)!important;line-height:.94!important;margin:0!important;color:#ffe096!important;text-shadow:0 3px 0 rgba(0,0,0,.35)!important;max-width:100%!important;overflow-wrap:anywhere!important;}
.wv417TurnCardFront p{font-size:clamp(14px,1.7vw,18px)!important;line-height:1.25!important;margin:0!important;max-width:100%!important;color:#f0d7aa!important;overflow-wrap:anywhere!important;}
.wv417TurnCardFront .tinyCaps{font-size:12px!important;letter-spacing:.18em!important;color:#d6a84f!important;}
.wv417FaceUp .wv417TurnCardStage{transform:rotateY(180deg)!important;}
.wv417ShrinkToCenter .wv417TurnCard{opacity:0!important;transform:translate3d(var(--from-x,0px),var(--from-y,0px),0) rotateZ(2deg) scale(.34)!important;}
.wv417CpuActionOverlay .wv417TurnCard{--card-w:min(330px,82vw);--card-h:min(300px,62vh);transform:translate3d(0,0,0) scale(1)!important;}
.wv417CpuActionOverlay .wv417TurnCardStage{transform:rotateY(180deg)!important;}
.wv417CpuActionLeaving .wv417TurnCard{opacity:0!important;transform:translateY(18px) scale(.9)!important;}
@keyframes wv417DeckPulse{0%{opacity:.25;filter:brightness(.9)}32%{opacity:.95;filter:brightness(1.45)}100%{opacity:0;filter:brightness(.9)}}

@media(max-width:1180px){body{--wv417-slot:clamp(22px, calc((100vw - 64px) / 13.6), 42px);} .roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;min-height:0!important;padding:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;} .roundLayout .circleTheater:before{display:none!important;} .roundLayout .circleTheater .playerRack{transform:none!important;width:min(100%,calc((12 * var(--wv417-slot)) + (11 * var(--wv417-gap)) + (2 * var(--wv417-rack-pad))))!important;} .boardDeckSource{order:50!important;}}
@media(max-width:620px){body{--wv417-slot:clamp(18px, calc((100vw - 38px) / 13.3), 30px);--wv417-gap:2px;--wv417-rack-pad:6px;} .playerRack{padding-left:6px!important;padding-right:6px!important;} .rackNameplate{font-size:10px!important;min-height:30px!important;} .rightRail{display:flex!important;flex-direction:column!important;} .centerTurnCardMini{width:72px!important;min-height:96px!important;} .boardDeckSource .miniDeck{width:48px!important;height:70px!important;} .wv417TurnCard{--card-w:min(250px,82vw);--card-h:min(354px,70vh);} }
@media(prefers-reduced-motion:reduce){.wv417TurnCard,.wv417TurnCardStage,.wv417DeckFlash{transition:none!important;animation:none!important}.wv417FaceUp .wv417TurnCardStage{transform:rotateY(180deg)!important}}


/* v4.18 surgical tray/letter centering patch: keep racks inside the board and center glyphs on both axes. */
.boardAndCard.stackedLayout .trayTheater,
.boardAndCard:not(.roundLayout) .trayTheater{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(14px,2.2vw,24px)!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.boardAndCard.stackedLayout .playerRack,
.boardAndCard:not(.roundLayout) .playerRack{
  width:min(100%, calc((12 * var(--wv417-slot)) + (11 * var(--wv417-gap)) + (2 * var(--wv417-rack-pad)) + 24px))!important;
  max-width:calc(100vw - 32px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:none!important;
}
.roundLayout .circleTheater .playerRack{
  max-width:min(100%, calc(100vw - 36px))!important;
}
.wordRack,.previewRack,.circleTheater .wordRack{
  margin-left:auto!important;
  margin-right:auto!important;
}
.slotTile,.roundLayout .circleTheater .slotTile{
  display:grid!important;
  place-items:center!important;
}
.slotTile .tileGlyph,.circleTheater .slotTile .tileGlyph,.roundLayout .circleTheater .slotTile .tileGlyph{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  z-index:2!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.slotTile .tileGlyphInner,.circleTheater .slotTile .tileGlyphInner,.roundLayout .circleTheater .slotTile .tileGlyphInner{
  position:static!important;
  left:auto!important;
  top:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  vertical-align:middle!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  transform:scale(var(--wv-glyph-scale,1))!important;
  transform-origin:center center!important;
  font-family:Georgia,serif!important;
  font-weight:900!important;
  font-size:calc(var(--slot, var(--wv417-slot)) * .66)!important;
}
.dotTile .tileGlyphInner,.circleTheater .dotTile .tileGlyphInner,.roundLayout .circleTheater .dotTile .tileGlyphInner{
  font-size:calc(var(--slot, var(--wv417-slot)) * .72)!important;
  line-height:1!important;
}
.tileSymbol,.slotTile .tileSymbol,.circleTheater .slotTile .tileSymbol,.roundLayout .circleTheater .slotTile .tileSymbol{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  pointer-events:none!important;
}
@media(max-width:760px){
  .boardAndCard.stackedLayout .playerRack,
  .boardAndCard:not(.roundLayout) .playerRack{max-width:calc(100vw - 18px)!important;}
}

/* v4.20 final tray/deck correction: one source of truth for rack geometry.
   Fixes cards escaping tray backgrounds, X/Y glyph centering, board clipping, and hidden card mini reveal timing. */
:root{
  --wv-final-slot:clamp(20px, calc((100vw - 96px) / 13.5), 50px);
  --wv-final-gap:clamp(2px, .42vw, 7px);
  --wv-final-pad:clamp(7px, 1vw, 18px);
  --wv-final-rack-w:calc((12 * var(--wv-final-slot)) + (11 * var(--wv-final-gap)) + (2 * var(--wv-final-pad)));
}
html,body,#app,main,.gameScreen{max-width:100%!important;overflow-x:hidden!important;}
.gameHud,.centerBoard,.boardAndCard,.trayTheater{max-width:100%!important;min-width:0!important;overflow:visible!important;}
.cardDock{display:none!important;}
.boardAndCard,.boardAndCard.stackedLayout,.boardAndCard.roundLayout{display:block!important;width:100%!important;}
.trayTheater:not(.circleTheater){
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(14px,2vw,24px)!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.playerRack,
.boardAndCard.stackedLayout .playerRack,
.boardAndCard:not(.roundLayout) .playerRack,
.roundLayout .circleTheater .playerRack{
  width:var(--wv-final-rack-w)!important;
  max-width:calc(100vw - 24px)!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--wv-final-pad)!important;
  padding-right:var(--wv-final-pad)!important;
  overflow:visible!important;
  transform-origin:center center!important;
}
.wordRack,.previewRack,.roundLayout .circleTheater .wordRack{
  --slot:var(--wv-final-slot)!important;
  --gap:var(--wv-final-gap)!important;
  display:grid!important;
  grid-template-columns:repeat(12,var(--slot))!important;
  grid-template-rows:auto!important;
  grid-auto-flow:row!important;
  gap:var(--gap)!important;
  width:calc((12 * var(--slot)) + (11 * var(--gap)))!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0!important;
  justify-content:center!important;
  align-items:start!important;
  overflow:visible!important;
}
.slotShell,.roundLayout .circleTheater .slotShell{
  width:var(--wv-final-slot)!important;
  min-width:0!important;
  max-width:var(--wv-final-slot)!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  justify-items:center!important;
  align-items:start!important;
  text-align:center!important;
  overflow:visible!important;
}
.slotValue,.roundLayout .circleTheater .slotValue{
  display:block!important;
  width:100%!important;
  height:clamp(10px,1vw,14px)!important;
  line-height:1!important;
  margin:0 0 clamp(2px,.35vw,5px)!important;
  padding:0!important;
  font-size:clamp(7px, calc(var(--wv-final-slot) * .22), 12px)!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.slotTile,.emptySlot,.roundLayout .circleTheater .slotTile,.roundLayout .circleTheater .emptySlot{
  width:var(--wv-final-slot)!important;
  min-width:0!important;
  max-width:var(--wv-final-slot)!important;
  aspect-ratio:.72/1!important;
  height:auto!important;
  min-height:0!important;
  border-radius:clamp(6px, calc(var(--wv-final-slot) * .16), 10px)!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.emptySlot{visibility:hidden!important;opacity:0!important;pointer-events:none!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;}
.tileSymbol,.slotTile .tileSymbol,.roundLayout .circleTheater .slotTile .tileSymbol{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  line-height:1!important;
  font-size:calc(var(--wv-final-slot) * .38)!important;
  z-index:1!important;
  pointer-events:none!important;
}
.slotTile .tileGlyph,.roundLayout .circleTheater .slotTile .tileGlyph{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  line-height:1!important;
  z-index:2!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.slotTile .tileGlyphInner,.roundLayout .circleTheater .slotTile .tileGlyphInner{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  transform-origin:center center!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:0!important;
  margin:0!important;
  text-align:center!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-family:Georgia,serif!important;
  font-weight:900!important;
  font-size:calc(var(--wv-final-slot) * .66)!important;
}
.dotTile .tileGlyphInner{font-size:calc(var(--wv-final-slot) * .72)!important;}
.coveredTile .tileGlyph{display:none!important;}
.revealedTile .tileSymbol{opacity:.14!important;}
.boardDeckSource{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(8px,1vw,14px)!important;
  width:max-content!important;
  max-width:100%!important;
  margin:clamp(10px,1.5vw,18px) auto!important;
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  z-index:4!important;
}
.roundLayout .trayTheater.circleTheater{
  --wv-final-slot:clamp(20px, calc((100vw - 260px) / 25), 44px);
  --wv-final-gap:clamp(2px,.35vw,6px);
  --wv-final-pad:clamp(7px,.9vw,16px);
  --wv-final-rack-w:calc((12 * var(--wv-final-slot)) + (11 * var(--wv-final-gap)) + (2 * var(--wv-final-pad)));
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,300px) minmax(0,1fr)!important;
  grid-template-rows:auto minmax(150px,230px) auto!important;
  align-items:center!important;
  justify-items:center!important;
  justify-content:center!important;
  column-gap:clamp(34px,7vw,170px)!important;
  row-gap:clamp(24px,4vh,58px)!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.roundLayout .circleTheater .boardDeckSource{grid-column:2!important;grid-row:2!important;margin:auto!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important;}
.centerTurnCardMini.currentCardWaiting.cardBackMini{background:linear-gradient(160deg,#653210,#180805)!important;color:#ffe4a0!important;border-color:rgba(255,215,127,.45)!important;}
.centerTurnCardMini.currentCardWaiting.cardBackMini strong{font-size:clamp(12px,1.1vw,17px)!important;letter-spacing:.07em!important;}
.centerTurnCardMini.currentCardWaiting.cardBackMini .miniCardTiny{opacity:.75!important;}
@media(max-width:1180px){
  :root{--wv-final-slot:clamp(18px, calc((100vw - 52px) / 13.4), 42px);--wv-final-gap:2px;--wv-final-pad:6px;}
  .roundLayout .trayTheater.circleTheater{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;min-height:0!important;padding:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .roundLayout .circleTheater:before{display:none!important;}
  .roundLayout .circleTheater .playerRack{transform:none!important;}
}
@media(max-width:560px){
  :root{--wv-final-slot:clamp(17px, calc((100vw - 36px) / 13.2), 29px);--wv-final-gap:2px;--wv-final-pad:5px;}
  .rackNameplate{font-size:10px!important;min-height:34px!important;}
}