:root{
  --bg-top:#585ab2;
  --bg-mid:#414394;
  --bg-bottom:#2d2f78;
  --panel:#4d4fa2;
  --panel-dark:#353783;
  --orange:#f69a2c;
  --orange-light:#ffc247;
  --yellow:#ffe86a;
  --cyan:#69d6ed;
  --white:#fff;
  --ink:#24244d;
  --muted:#ced1f3;
  --border:#20215f;
  --soft:#ececf5;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:#fff;
  font-family:Verdana,Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% -15%,rgba(150,153,226,.42),transparent 38%),
    linear-gradient(180deg,var(--bg-top),var(--bg-mid) 50%,var(--bg-bottom));
}
button,input{font:inherit}
button{cursor:pointer}
.shell{
  width:min(1040px,calc(100% - 20px));
  margin:0 auto;
  padding:12px 0 34px;
}
.brand{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:4px 8px 10px;
}
.logo{
  display:inline-block;
  color:var(--orange-light);
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:clamp(34px,7vw,62px);
  font-weight:900;
  line-height:.78;
  letter-spacing:-4px;
  text-shadow:0 2px 0 #8b4318,2px 3px 0 #15164b,-1px -1px 0 #fff29a;
  transform:skew(-5deg) rotate(-2deg);
}
.logo span{
  color:var(--orange);
  text-shadow:0 2px 0 #7d3021,2px 3px 0 #15164b,-1px -1px 0 #ffd676;
}
.tagline{
  margin:8px 0 0 12px;
  color:#f5dc92;
  font-size:12px;
  font-weight:bold;
}
.header-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sound-btn{
  min-height:39px;
  border:2px solid #171851;
  border-radius:9px;
  padding:7px 10px;
  color:#fff;
  background:linear-gradient(#6e70c6,#3a3c91);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #15164b;
  font-size:11px;
  font-weight:bold;
}
.sound-btn:hover{filter:brightness(1.08)}
.leave-btn{background:linear-gradient(#c96879,#864265)}
.screen{display:none}
.screen.active{display:block;animation:softIn .18s ease both}
.paper{
  border:2px solid #1b1c59;
  border-radius:12px;
  background:linear-gradient(#5557ad,#3d3f91);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 9px rgba(14,15,61,.48);
  overflow:hidden;
}
.paper:after{display:none}
.hero{
  padding:34px 28px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(#585ab3,#3d3f93);
}
.hero h1,.finish h1{
  margin:8px 0 10px;
  color:var(--orange);
  font-family:"Trebuchet MS",Verdana,sans-serif;
  font-size:clamp(31px,6vw,54px);
  letter-spacing:-2px;
  text-shadow:2px 2px 0 #20215e,0 0 2px #ffe289;
}
.scribble{
  color:var(--orange-light);
  -webkit-text-stroke:0;
  text-shadow:2px 2px 0 #20215e;
}
.hero>p{
  max-width:700px;
  margin:0 auto 24px;
  color:#e4e6ff;
  font-size:14px;
  line-height:1.45;
}
.eyebrow{
  color:#c4c7f5;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
}
.home-actions{
  max-width:720px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.host-box,.join-box{
  border:1px solid #26276a;
  border-radius:9px;
  padding:12px;
  background:rgba(31,32,104,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.join-box{text-align:left}
.join-box label{display:block;margin-bottom:6px;color:#fff;font-size:11px;font-weight:bold}
.join-row{display:flex;gap:6px}
#codeInput,.chat-input{
  width:100%;
  min-width:0;
  border:1px solid #7f809b;
  border-radius:3px;
  padding:9px 10px;
  background:#fff;
  color:#222;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.2);
}
#codeInput{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:17px;
  font-weight:bold;
}
input:focus,button:focus-visible{outline:2px solid #8ae5f5;outline-offset:2px}
.btn{
  min-height:42px;
  border:2px solid #25265f;
  border-radius:10px;
  padding:10px 16px;
  color:#fff;
  background:linear-gradient(#f3aa37,#d96d22);
  box-shadow:inset 0 1px 0 #ffe383,0 2px 0 #17184d;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 1px 0 #6f351e;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default}
.primary{background:linear-gradient(#f6b33d,#d76d22)}
.blue{background:linear-gradient(#6ed9ef,#2a94bd);text-shadow:0 1px 0 #1b5876}
.giant{min-height:70px;font-size:18px}
.wide{width:100%}
.mature-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:#e4e5ff;
  text-align:left;
  font-size:10px;
  cursor:pointer;
}
.mature-toggle input{position:absolute;opacity:0;pointer-events:none}
.mature-toggle small{display:block;margin-top:2px;color:#bfc2eb}
.toggle-art{
  position:relative;
  flex:0 0 auto;
  width:38px;
  height:20px;
  border:1px solid #1b1c57;
  border-radius:10px;
  background:#252665;
}
.toggle-art:after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ddd;
  box-shadow:0 1px 1px rgba(0,0,0,.35);
  transition:left .15s;
}
.mature-toggle input:checked+.toggle-art{background:#c96a38}
.mature-toggle input:checked+.toggle-art:after{left:20px;background:#ffe675}
.mature-toggle.compact{margin:0}
.browse-panel{margin-top:12px;padding:14px}
.browse-panel h2{margin:2px 0 0;color:var(--orange-light);font-size:21px}
.row-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.link-btn{
  border:0;
  background:none;
  color:#ffdd70;
  padding:5px;
  font-size:11px;
  font-weight:bold;
  text-decoration:underline;
}
.lobby-browser{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.lobby-card{
  position:relative;
  min-height:78px;
  padding:11px 64px 11px 12px;
  border:1px solid #1e1f5d;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(#6466b9,#46489b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 3px rgba(17,18,75,.4);
  text-align:left;
}
.lobby-card:hover{background:linear-gradient(#7072c3,#4f51a5)}
.lobby-title{display:block;color:#ffbd44;font-size:14px;font-weight:bold}
.lobby-meta{display:block;margin-top:5px;color:#e0e2ff;font-size:10px;line-height:1.4}
.join-arrow{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#7ce1f1;font-size:11px;font-weight:bold}
.mature-badge{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:8px;background:#a64971;color:#fff;font-size:8px}
.browse-foot{margin-top:10px;text-align:center;color:#c8cbef;font-size:10px}
.empty-state{
  grid-column:1/-1;
  padding:18px;
  border:1px solid #7274be;
  border-radius:7px;
  color:#d0d3f5;
  background:#393b84;
  text-align:center;
  font-size:11px;
}

.lobby-head,.game-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
  padding:0 4px;
}
.big-code{
  color:#ffad32;
  font-size:clamp(32px,6vw,48px);
  font-weight:900;
  letter-spacing:6px;
  text-shadow:2px 2px 0 #20215e;
}
.you-card{
  padding:8px 10px;
  border:1px solid #22235b;
  border-radius:8px;
  background:#45479a;
  color:#fff;
  font-size:11px;
}
.panel{padding:14px}
.panel h2,.panel h3{margin-top:0;color:#ffb63b}
.pill{
  display:inline-block;
  padding:3px 7px;
  border-radius:9px;
  background:#6264b6;
  color:#fff;
  font-size:8px;
  font-weight:bold;
  text-transform:uppercase;
}
.players{
  margin:7px 0 13px;
  max-height:220px;
  overflow:auto;
  border:1px solid #1f205b;
  background:#fff;
}
.player-row,.score-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 7px;
  border-bottom:1px solid #d9d9e3;
  background:#fff;
  color:#25254a;
  font-size:10px;
}
.player-row:nth-child(even),.score-row:nth-child(even){background:#f3f3f8}
.player-row:last-child,.score-row:last-child{border-bottom:0}
.lobby-settings{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0;
  padding:9px;
  border:1px solid #292a69;
  border-radius:7px;
  background:#363883;
  color:#fff;
  font-size:10px;
}
.center{text-align:center}
.muted{color:#c8cbef}
.error{min-height:1.2em;margin-top:8px;color:#ffd0d4;font-size:10px;font-weight:bold}
.hidden{display:none!important}
.share-note{margin-top:10px;text-align:center;color:#c8cbef;font-size:9px}
.game-layout.active{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:9px;
}
.game-top{grid-column:1/-1}
.game-top h2{
  margin:2px 0 0;
  color:#ffb13b;
  font-size:clamp(20px,3.7vw,34px);
  text-shadow:1px 1px 0 #252668;
}
.main-column{min-width:0}
.right-rail{
  grid-column:2;
  grid-row:2;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.timer-wrap{
  width:210px;
  max-width:36vw;
  padding:5px 7px;
  border:2px solid #22235d;
  border-radius:14px;
  background:#292a70;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.timer-wrap span{
  display:block;
  margin-bottom:3px;
  text-align:center;
  color:#fff;
  font-size:8px;
  font-weight:bold;
  letter-spacing:1px;
}
.timer-wrap strong{
  display:block;
  border:1px solid #a3621f;
  border-radius:8px;
  background:linear-gradient(90deg,#ffe854,#f5a632 70%,#8354b5);
  box-shadow:inset 0 1px 0 #fff8ac;
  color:#25265c;
  text-align:center;
  font-size:22px;
  line-height:28px;
}
.timer-wrap.urgent strong{animation:timerFlash .7s ease-in-out infinite}
.sentence-panel{margin-bottom:8px}
.sentence{
  min-height:88px;
  margin:3px 0 10px;
  padding:9px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:6px;
  border:1px solid #1e1f5b;
  border-radius:5px;
  background:#fff;
}
.placeholder{color:#777;font-size:11px}
.word-bank{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:8px;
  border:1px solid #1c1d58;
  border-radius:5px;
  background:#31327c;
}
.word-tile{
  min-height:29px;
  padding:5px 7px;
  border:1px solid #8f8fa1;
  border-radius:3px;
  background:linear-gradient(#fff,#e9e9ed);
  box-shadow:0 1px 1px rgba(0,0,0,.35);
  color:#20213f;
  font-size:10px;
  font-weight:bold;
  transform:rotate(var(--tilt,0deg));
}
.word-tile:not(:disabled):hover{background:linear-gradient(#fff8ce,#f5d35f)}
.word-tile.used{opacity:.22}
.word-tile.chosen{background:linear-gradient(#fff18e,#f4bd42);border-color:#b07022}
.word-pop{animation:wordPop .12s ease both}
.vote-list,.result-list{display:grid;gap:6px}
.vote-card{
  width:100%;
  padding:10px;
  border:1px solid #898aa3;
  border-radius:5px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  color:#20214a;
  text-align:left;
  font-size:11px;
}
.vote-card:not(:disabled):hover{background:#fff3c7;border-color:#d08b2d}
.vote-card:disabled{opacity:.5;cursor:default}
.result-card{
  padding:9px;
  border:1px solid #8d8da3;
  border-radius:5px;
  background:#fff;
  color:#23234a;
  font-size:10px;
}
.result-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.vote-count{color:#c35a22;font-weight:bold;white-space:nowrap}
.result-sentence{color:#36364f}
.duplicate-note{margin-top:6px;padding-top:5px;border-top:1px dotted #aaa;color:#72538e;font-size:9px;font-weight:bold}
.room-panel,.chat-panel{
  border:1px solid #14154d;
  border-radius:4px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 2px 5px rgba(15,16,65,.48);
}
.room-panel-title,.chat-title{
  min-height:24px;
  padding:4px 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #17184e;
  color:#fff;
  background:linear-gradient(#5052a3,#31327d);
  font-size:9px;
  font-weight:bold;
}
.room-code-mini{color:#ffcf53}
.compact-player-list{max-height:190px;overflow:auto}
.compact-player-list .score-row{padding:5px 6px;font-size:9px}
.chat-panel{color:#222}
.lobby-chat{margin-top:8px}
.chat-messages{
  height:150px;
  overflow:auto;
  padding:5px 6px;
  background:#fff;
  font-family:Arial,sans-serif;
  font-size:10px;
  line-height:1.35;
}
.game-chat .chat-messages{height:210px}
.chat-line{
  display:flex;
  gap:4px;
  align-items:flex-start;
  margin:1px 0;
  word-break:break-word;
}
.chat-line.mine .chat-name{color:#aa6517}
.chat-name{flex:0 0 auto;color:#393a8b;font-weight:bold}
.chat-text{color:#222}
.chat-form{
  display:flex;
  border-top:1px solid #aaa;
  background:#e7e7ef;
}
.chat-input{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:7px!important;
  font-size:10px!important;
}
.chat-send{
  width:54px;
  border:0;
  border-left:1px solid #85859a;
  color:#fff;
  background:linear-gradient(#f6ad39,#dc7423);
  font-size:9px;
  font-weight:bold;
}
.chat-error{
  min-height:14px;
  padding:2px 5px;
  background:#eeeef3;
  color:#9b1f2e;
  font-size:8px;
}
.waiting-panel{text-align:center;padding:30px!important}
.waiting-panel h2{margin:4px 0 7px;color:#ffb13b}
.finish{max-width:700px;margin:0 auto;padding:28px;text-align:center}
.round-splash{
  position:fixed;
  z-index:50;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(21,22,73,.65);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.round-splash.show{opacity:1}
.splash-card{
  max-width:660px;
  padding:20px 26px;
  border:2px solid #25265e;
  border-radius:14px;
  background:linear-gradient(#5658af,#35368a);
  box-shadow:0 5px 16px rgba(0,0,0,.45);
  text-align:center;
  transform:scale(.94);
  transition:transform .18s ease;
}
.round-splash.show .splash-card{transform:scale(1)}
.splash-round{color:#ffb63b;font-size:13px;font-weight:bold;letter-spacing:2px}
.splash-theme{margin-top:7px;color:#fff;font-size:clamp(20px,5vw,38px);font-weight:bold}
.confetti-layer{position:fixed;z-index:60;inset:0;pointer-events:none;overflow:hidden}
.confetti-piece{position:absolute;top:-30px;color:#ffb63b;font-size:17px;animation:confettiFall linear both}
.confetti-piece:nth-child(3n){color:#75dced}
.confetti-piece:nth-child(3n+1){color:#ffe95b}
.pop-in{animation:softIn .18s ease both}
.result-enter{animation:resultIn .22s ease both}
@keyframes softIn{from{opacity:0}to{opacity:1}}
@keyframes wordPop{from{transform:scale(.86)}to{transform:scale(1)}}
@keyframes resultIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes timerFlash{50%{filter:brightness(1.25)}}
@keyframes confettiFall{to{transform:translate(var(--drift),110vh) rotate(500deg);opacity:.6}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media(max-width:760px){
  .home-actions{grid-template-columns:1fr}
  .lobby-browser{grid-template-columns:1fr}
  .game-layout.active{display:block}
  .right-rail{margin-top:8px}
  .game-chat .chat-messages{height:150px}
}
@media(max-width:440px){
  .shell{width:calc(100% - 12px);padding-top:7px}
  .brand{align-items:flex-start}
  .header-actions{gap:4px}
  .sound-btn{font-size:9px;padding:6px 8px}
  .join-row{flex-direction:column}
  .lobby-head{align-items:flex-start;flex-direction:column}
  .timer-wrap{width:130px;max-width:42vw}
  .lobby-settings{align-items:flex-start;flex-direction:column}
}

.bonus-message{
  margin-top:8px;
  padding:7px 9px;
  border:1px solid #a56a21;
  border-radius:5px;
  background:linear-gradient(#fff4a8,#f0c65d);
  color:#4a3b19;
  font-size:10px;
  font-weight:bold;
  text-align:center;
}

/* V5: original-era playfield structure, timer controls, recap and selection states */
.home-notice{
  max-width:720px;
  margin:10px auto 0;
  padding:9px 11px;
  border:1px solid #d3a13b;
  border-radius:6px;
  background:#fff2a8;
  color:#4d401f;
  font-size:11px;
  font-weight:bold;
}
.timer-setting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  color:#e8e9ff;
  text-align:left;
  font-size:10px;
}
.timer-setting small{display:block;margin-top:2px;color:#bec1e8;font-weight:normal}
.timer-setting.compact{margin:0}
.game-select{
  min-width:92px;
  border:1px solid #20215c;
  border-radius:5px;
  padding:6px 24px 6px 7px;
  background:#fff;
  color:#27274e;
  font-size:10px;
  font-weight:bold;
}
.setting-summary{min-width:180px}

.timer-wrap{
  display:grid;
  grid-template-columns:auto minmax(90px,1fr) 38px;
  align-items:center;
  gap:6px;
  width:300px;
  max-width:46vw;
}
.timer-wrap span{margin:0;text-align:left}
.timer-wrap strong{
  border:0;
  background:none;
  box-shadow:none;
  color:#fff;
  text-align:right;
  font-size:18px;
  line-height:22px;
}
.timer-bar{
  position:relative;
  height:15px;
  overflow:hidden;
  border:1px solid #17184f;
  border-radius:9px;
  background:#242568;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.timer-bar i{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
  background:linear-gradient(90deg,#ffe653,#f4ab34 74%,#8a63c6);
  box-shadow:inset 0 1px 0 #fff5a0;
  transition:width .22s linear;
}
.timer-wrap.urgent .timer-bar i{background:linear-gradient(90deg,#ffd548,#ef7d38,#d64f62)}

.build-board{
  padding:12px;
  background:linear-gradient(#176cd0,#105ab9 48%,#0e52a9);
}
.build-board .row-title h3{color:#fff;margin-bottom:4px}
.build-board .muted{color:#d8e9ff}
.word-bank{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:6px 5px;
  border:0;
  background:transparent;
}
.word-bank-top{padding-bottom:9px}
.word-bank-bottom{padding-top:9px}
.word-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-height:29px;
}
.word-row .word-tile{flex:0 0 auto}
.word-tile.kind-helper{background:linear-gradient(#fff,#e9edf2)}
.word-tile.kind-theme{background:linear-gradient(#fffef0,#ece8d8)}
.word-tile.kind-wild{background:linear-gradient(#fff7ff,#eee4f1)}
.word-tile.used{visibility:hidden;opacity:0}
.sentence-strip{
  margin:3px 0;
  padding:5px 7px 7px;
  border:1px solid #164783;
  border-radius:4px;
  background:#0a4b9d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.sentence-label{
  margin-bottom:4px;
  color:#d8e8ff;
  font-size:9px;
  font-weight:bold;
}
.sentence{
  min-height:48px;
  margin:0;
  padding:7px;
  border:1px solid #8d99aa;
  border-radius:3px;
  background:linear-gradient(#eef2f6,#d7dce3);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.26);
}
.build-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:8px;
}
.small-btn{background:linear-gradient(#7275bd,#444797);text-shadow:none}
.build-actions .primary{min-width:150px}

.vote-card.selected-vote,
.vote-card.selected-vote:disabled{
  opacity:1;
  border-color:#e69a23;
  background:linear-gradient(#fff0a2,#f2c64d);
  box-shadow:inset 0 0 0 2px #fff7c7,0 1px 2px rgba(0,0,0,.3);
  color:#30284f;
  font-weight:bold;
}

.recap-board{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:5px;
  border:1px solid #1d4f63;
  border-radius:3px;
  background:#006f4d;
}
.recap-summary{
  margin-bottom:7px;
  padding:7px 9px;
  border:1px solid #2c7aa2;
  border-radius:5px;
  background:#d8f4ff;
  color:#25324d;
  font-size:10px;
  font-weight:bold;
  text-align:center;
}
.no-vote-summary{
  border-color:#b98027;
  background:#fff1ac;
  color:#59461e;
}
.recap-row{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 150px;
  align-items:stretch;
  min-height:42px;
  color:#061f25;
  background:#1abf35;
  border-bottom:1px solid rgba(0,70,30,.32);
  transform-origin:left center;
  transition:opacity .18s ease,transform .18s ease,filter .18s ease;
}
.recap-row:nth-child(even){background:#10ad2f}
.recap-row.recap-winner{background:#79ef62}
.recap-row.your-pick{box-shadow:inset 4px 0 0 #ffe337}
.recap-pending{opacity:0;transform:translateX(-12px)}
.recap-show{opacity:1;transform:none}
.recap-votes{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  background:rgba(255,255,255,.13);
}
.vote-pips{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:42px}
.vote-pips i{
  width:7px;height:7px;border-radius:50%;
  background:#ffe72e;
  border:1px solid #8e6a00;
  box-shadow:0 1px 0 rgba(255,255,255,.55);
}
.zero-votes{color:#185b31;font-size:15px;font-weight:bold}
.recap-answer{padding:5px 7px}
.recap-sentence{font-size:10px;font-weight:bold;line-height:1.25}
.recap-voters{margin-top:3px;color:#0e572b;font-size:8px}
.recap-author{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:5px 7px;
  background:rgba(29,126,178,.46);
  color:#fff;
  text-align:right;
  font-size:9px;
}
.recap-author strong{color:#fff430;font-size:12px}
.winner-medal{color:#ffe525;font-size:17px;text-shadow:0 1px 0 #8a6c00}
.your-pick-label{
  position:absolute;
  right:4px;
  bottom:2px;
  color:#fff6a4;
  font-size:7px;
  text-transform:uppercase;
}
.recap-row .duplicate-note{
  margin-top:3px;
  padding-top:2px;
  border-top:1px dotted rgba(0,78,30,.4);
  color:#18582f;
  font-size:8px;
}
.bonus-message{
  margin-top:7px;
  border-color:#8b7224;
  background:linear-gradient(#fff499,#e7c74d);
  color:#4b3d17;
}

@media(max-width:760px){
  .timer-wrap{width:210px;max-width:52vw;grid-template-columns:auto minmax(65px,1fr) 30px}
  .word-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .word-row .word-tile{
    width:100%;
    min-width:0;
    white-space:normal;
    line-height:1.05;
    text-align:center;
    transform:none!important;
  }
  .recap-row{grid-template-columns:42px minmax(0,1fr) 105px}
  .recap-author{font-size:8px}
}
@media(max-width:420px){
  .timer-wrap{width:160px;max-width:58vw;grid-template-columns:28px minmax(55px,1fr) 26px;gap:4px}
  .word-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build-actions{justify-content:stretch}
  .build-actions .btn{flex:1;min-width:0}
  .recap-row{grid-template-columns:34px minmax(0,1fr)}
  .recap-author{grid-column:1/-1;justify-content:flex-start;text-align:left;min-height:24px}
  .your-pick-label{position:static;margin-left:auto}
  .lobby-settings{gap:8px}
  .timer-setting.compact{width:100%;justify-content:space-between}
}

/* Desktop game room follows the classic layout more closely: playfield above,
   player roster + private match chat underneath. */
.game-layout.active{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.game-top{grid-column:1}
.main-column{grid-column:1;min-width:0}
.right-rail{
  grid-column:1;
  grid-row:auto;
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:6px;
  align-items:stretch;
}
.room-panel,.game-chat{min-width:0}
.compact-player-list{height:150px;max-height:150px}
.game-chat .chat-messages{height:118px}
@media(max-width:760px){
  .right-rail{display:grid;grid-template-columns:1fr}
  .compact-player-list{height:auto;max-height:150px}
  .game-chat .chat-messages{height:135px}
}


/* V6 chat separation, sentence limit and punctuation */
.main-site-chat{
  margin-top:8px;
}
.main-site-chat .chat-messages{
  height:145px;
}
.chat-self-name,
.chat-room-label{
  color:#ffcf53;
  font-size:8px;
  font-weight:normal;
}
.chat-status{
  min-height:0;
  padding:0 5px;
  background:#f3f3f7;
  color:#5f6079;
  font-size:8px;
  line-height:15px;
}
.chat-status:empty{display:none}
.chat-warning{
  display:block!important;
  background:#fff4bf;
  color:#69531a;
  border-top:1px solid #d9bd52;
}
.chat-cooldown{
  display:block!important;
  background:#ffe2a3;
  color:#794617;
  border-top:1px solid #d99739;
  font-weight:bold;
}
.chat-banned{
  display:block!important;
  background:#ffd9df;
  color:#861e31;
  border-top:1px solid #ce7583;
  font-weight:bold;
}
.chat-send:disabled,
.chat-input:disabled{
  opacity:.52;
  cursor:not-allowed;
}
.sentence-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#sentenceLimit{
  color:#b9d6ff;
  font-size:8px;
  font-weight:normal;
}
#sentenceLimit.limit-near{
  color:#ffe36f;
  font-weight:bold;
}
.punctuation-label{
  margin:5px 2px 1px;
  color:#b9d9ff;
  font-size:8px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.punctuation-row{
  justify-content:flex-start;
  gap:6px;
}
.word-tile.kind-punct{
  min-width:29px;
  padding-left:7px;
  padding-right:7px;
  background:linear-gradient(#fff6ad,#edc75c);
  border-color:#a77d23;
  color:#3e341c;
  font-size:13px;
  text-align:center;
}
.word-tile.chosen.kind-punct{
  background:linear-gradient(#ffe56e,#efad30);
}
@media(max-width:760px){
  .main-site-chat .chat-messages{height:130px}
  .punctuation-row{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  .punctuation-row .word-tile{
    width:100%;
    min-width:0;
  }
}
@media(max-width:500px){
  .punctuation-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chat-room-label{display:none}
}


/* V7: content-sized magnets for denser mobile layouts */
.word-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:5px 6px;
  min-height:0;
}

.word-row .word-tile{
  flex:0 0 auto;
  width:auto;
  max-width:100%;
  white-space:nowrap;
}

.word-bank{
  gap:4px;
}

.punctuation-row{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:5px;
}

.punctuation-row .word-tile{
  width:auto !important;
  min-width:28px;
}

@media(max-width:760px){
  .word-row{
    gap:4px 5px;
  }

  .word-tile{
    min-height:27px;
    padding:5px 7px;
    font-size:10px;
  }

  .word-tile.kind-punct{
    min-width:26px;
    padding-left:6px;
    padding-right:6px;
  }

  .word-bank{
    padding-left:3px;
    padding-right:3px;
  }
}

@media(max-width:440px){
  .word-row{
    gap:4px;
  }

  .word-tile{
    min-height:26px;
    padding:4px 6px;
    font-size:9px;
  }

  .word-tile.kind-punct{
    min-width:24px;
    padding-left:5px;
    padding-right:5px;
  }

  .sentence{
    gap:4px;
  }
}


/* V9.3 automatic rematch countdown */
.rematch-countdown{
  margin:14px 0 9px;
  padding:11px 13px;
  border:1px solid #a46420;
  border-radius:8px;
  background:linear-gradient(#fff0a1,#e7b94a);
  color:#3d321c;
  font-size:12px;
  font-weight:bold;
  text-align:center;
}
.rematch-countdown strong{
  display:inline-block;
  min-width:30px;
  color:#933f1c;
  font-size:20px;
}

.chat-line.admin-message{background:#fff1a8;padding:2px 4px;border-radius:3px}.chat-line.admin-message .chat-name{color:#9e4d17}.chat-line.admin-message .chat-name:before{content:"★ ";}

.rematch-chat{max-width:700px;margin:10px auto 0}.rematch-chat .chat-messages{height:140px}


/* V9.8 personal chat visibility */
body.user-chat-hidden .chat-panel{
  display:none !important;
}
#chatVisibilityBtn[aria-pressed="true"]{
  opacity:.78;
}


/* V9.9 stable public User IDs */
.public-user-id{
  display:block;
  margin-top:3px;
  color:#cfd1f3;
  font-size:9px;
  font-weight:normal;
  letter-spacing:.4px;
}
.player-row>span:first-child,
.score-row>span:first-child{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
}
.player-public-id{
  margin-top:2px;
  color:#aeb2df;
  font-size:8px;
  font-weight:normal;
  letter-spacing:.35px;
}


/* V10 full-site ban screen */
.site-banned-screen{
  display:none;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:#fff;
  font-family:Verdana,Tahoma,Arial,sans-serif;
  font-size:clamp(24px,6vw,54px);
  font-weight:900;
  text-align:center;
}
body.site-banned .shell,
body.site-banned #roundSplash,
body.site-banned #confetti{
  display:none !important;
}
body.site-banned .site-banned-screen{
  display:flex !important;
}


/* V10.2 ban appeal channel */
.site-banned-screen{
  padding:24px;
}
.ban-card{
  width:min(620px,100%);
  text-align:center;
}
.ban-message{
  font-size:clamp(24px,6vw,54px);
  font-weight:900;
}
.appeal-panel{
  margin:24px auto 0;
  padding:14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  color:#fff;
  text-align:left;
  font-size:12px;
  font-weight:normal;
}
.appeal-title{
  font-size:16px;
  font-weight:bold;
}
.appeal-help{
  margin-top:4px;
  color:#e4e6ff;
  line-height:1.4;
}
.appeal-messages{
  max-height:260px;
  margin-top:10px;
  overflow:auto;
  padding:8px;
  border-radius:7px;
  background:rgba(0,0,0,.18);
}
.appeal-line{
  margin:5px 0;
  padding:7px 9px;
  border-radius:7px;
  background:rgba(255,255,255,.12);
  line-height:1.4;
}
.appeal-line.admin{
  background:rgba(255,214,102,.18);
}
.appeal-who{
  display:block;
  margin-bottom:2px;
  font-weight:bold;
}
.appeal-form{
  display:flex;
  gap:7px;
  margin-top:9px;
  align-items:stretch;
}
.appeal-form textarea{
  flex:1;
  min-width:0;
  resize:vertical;
  padding:9px;
  border:1px solid #b9bbd6;
  border-radius:6px;
  font:inherit;
}
.appeal-form button{
  align-self:stretch;
  padding:8px 12px;
  border:1px solid #8a5519;
  border-radius:6px;
  background:linear-gradient(#ffbd4a,#df7b24);
  color:#fff;
  font:inherit;
  font-weight:bold;
  cursor:pointer;
}
.appeal-form button:disabled,
.appeal-form textarea:disabled{
  opacity:.55;
}
.appeal-status{
  min-height:18px;
  margin-top:5px;
  color:#ffe7a0;
  font-size:10px;
}
@media(max-width:560px){
  .appeal-form{flex-direction:column}
  .appeal-form button{align-self:stretch}
}