/* © Cross Link by Chris Neaves. All rights reserved. */

:root{--red:#ff2856;--blue:#1f8cff;--green:#21d36b;--yellow:#ffd21f;--ink:#16052f;--panel:#ffffff;--soft:#f3f1ff}
*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,#ff4fad 0,#6b1bbf 36%,#1a0633 80%);min-height:100vh;color:#16052f;transition:box-shadow .25s ease,filter .2s ease}.app{max-width:960px;margin:auto;display:flex;flex-direction:column;gap:12px;padding:12px}.panel,.board-wrap{background:rgba(255,255,255,.96);border-radius:24px;padding:14px;box-shadow:0 18px 45px rgba(0,0,0,.22);backdrop-filter:blur(6px)}.topline{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.title{margin:0;font-size:34px;letter-spacing:-1px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.control-block{background:#f7f5ff;border-radius:16px;padding:10px}label{font-weight:900;font-size:13px;text-transform:uppercase;display:block;margin-bottom:5px}select{width:100%;padding:10px;border-radius:12px;border:2px solid #ddd;background:white;font-weight:800}.player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.player-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:#f7f5ff;font-weight:800}.player-dot{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:-2px}.finish-icons{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}.finish-icon{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:2px solid rgba(22,5,47,.25);background:white;color:#16052f;opacity:.55}.finish-icon.done{background:var(--pcolor);border-color:var(--pcolor);color:white;opacity:1;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px var(--pcolor)}.panel-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}canvas{width:100%;aspect-ratio:1;border-radius:22px;background:#111;box-shadow:0 10px 28px rgba(0,0,0,.28);border:4px solid #111}.playbar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:10px;align-items:center}button{padding:12px;border-radius:14px;border:none;font-weight:900;transition:transform .08s ease,filter .08s ease,opacity .15s ease;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.roll{background:#ffb703}.primary{background:#21d36b}.danger{background:#ff2856;color:white}.help{background:#1f8cff;color:white}.ghost{background:#e9e6ff;color:#16052f}.dice{display:flex;gap:8px;justify-content:center}.die{width:56px;height:56px;background:white;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.18)}.die.rollAnim{animation:rollAnim .42s ease}@keyframes rollAnim{0%{transform:scale(1) rotate(0deg)}45%{transform:scale(1.22) rotate(190deg)}100%{transform:scale(1) rotate(360deg)}}#status{margin-top:10px;padding:12px;border-radius:16px;background:#f2f2ff;font-weight:900;min-height:44px;border-left:8px solid #ffb703}.win-banner{display:none;margin-top:10px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#fff3a3,#ffd21f);font-weight:900;text-align:center;font-size:26px;box-shadow:0 0 32px rgba(255,224,102,.95);border:3px solid white}.win-banner.show{display:block;animation:pop .5s ease}
.game-log{margin-top:10px;background:#fff;border-radius:16px;padding:10px;max-height:170px;overflow:auto;border:2px solid rgba(22,5,47,.08);font-size:13px;font-weight:800;color:#241044}
.game-log-title{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.65;margin-bottom:5px}
.game-log-entry{padding:5px 0;border-bottom:1px solid rgba(22,5,47,.08)}
.game-log-entry:last-child{border-bottom:none}
.small-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.small-actions button{padding:9px;border-radius:12px;font-size:13px}
.win-banner.show{display:block;animation:pop .5s ease}@keyframes pop{0%{transform:scale(.86)}70%{transform:scale(1.04)}100%{transform:scale(1)}}@keyframes flashWin{0%{filter:brightness(1)}50%{filter:brightness(1.45)}100%{filter:brightness(1)}}button:active{transform:scale(.95);filter:brightness(.86)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.show{display:flex}.modal-card{background:white;border-radius:22px;padding:20px;max-width:620px;width:100%;max-height:88vh;overflow:auto}.modal-card h2{margin-top:0}.move-hint{font-size:13px;font-weight:800;opacity:.75;margin-top:4px}
.board-score{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.board-score.show{display:grid}
.score-card{border-radius:14px;padding:8px 10px;background:#f2f2ff;font-weight:900;border-left:8px solid #ccc;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.score-card small{display:block;opacity:.7;font-size:11px;text-transform:uppercase;margin-bottom:2px}
.score-card span{font-size:18px}@media(max-width:650px){.board-score{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.score-card{padding:7px 8px}.score-card span{font-size:16px}.controls,.player-grid,.panel-actions{grid-template-columns:1fr}.title{font-size:28px}.playbar{grid-template-columns:1fr}.dice{order:-1}.die{width:52px;height:52px}.app{padding:8px}}

/* cleaned top panel */
.header-grid{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.logo-wrap{display:flex;align-items:center;min-width:0}
.crosslink-logo{width:min(520px,100%);height:auto;display:block;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.turn-pill{font-weight:900;background:#f7f5ff;border-radius:16px;padding:12px 14px;white-space:nowrap;align-self:start}
.setup-grid{display:grid;grid-template-columns:1.2fr .8fr auto;gap:10px;margin-top:12px;align-items:stretch}
.toggle-card{background:#f7f5ff;border-radius:16px;padding:12px 14px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;text-transform:none}
.toggle-card input{transform:scale(1.2)}
.panel-actions{align-items:stretch;justify-content:center;gap:12px}
.panel-actions>button{min-height:60px;font-size:15px;padding:14px 18px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:650px){
.header-grid{grid-template-columns:1fr}
.turn-pill{justify-self:stretch;text-align:center}
.setup-grid{grid-template-columns:1fr}
.crosslink-logo{width:100%}
}


/* improved compact setup layout */
.header-grid{grid-template-columns:minmax(260px,1fr) auto}
.crosslink-logo{width:min(540px,100%);border-radius:12px;object-fit:contain;background:#111}
.setup-grid{grid-template-columns:1fr 1fr;align-items:start}
.setup-left{display:grid;grid-template-columns:1fr;gap:10px}
.setup-right{background:#f7f5ff;border-radius:16px;padding:10px}
.setup-right-title{font-weight:900;text-transform:uppercase;font-size:13px;margin-bottom:8px}
.player-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:0}
.player-row{padding:7px 8px;border-radius:12px;background:white;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.player-row label{margin:0;text-transform:none;display:flex;align-items:center;gap:5px}
.player-row input{transform:scale(1.05)}
.toggle-card{justify-content:flex-start}
.panel-actions{grid-template-columns:repeat(4,1fr)}
.how-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.how-tab{background:#e9e6ff;border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer}
.how-tab.active{background:#1f8cff;color:#fff}
.how-section{display:none}
.how-section.active{display:block}
.how-img{width:100%;border-radius:14px;border:2px solid rgba(22,5,47,.12);margin:10px 0;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.how-card{background:#f7f5ff;border-radius:16px;padding:12px;margin:10px 0}
.how-card h3{margin:0 0 6px}
.how-card p{margin:6px 0;line-height:1.45}
.how-card ul{margin:8px 0 0 18px;padding:0}
.how-card li{margin:5px 0}
@media(max-width:750px){
.header-grid{grid-template-columns:1fr}
.setup-grid{grid-template-columns:1fr}
.player-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
.player-grid{grid-template-columns:1fr}
.panel-actions{grid-template-columns:1fr}
}


.color-options{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
body.colourblind-on .color-options{display:grid}
.color-pick-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:white;border-radius:12px;padding:7px 8px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.color-pick-row input[type="color"]{width:42px;height:32px;border:none;background:transparent;padding:0}
.player-label-name{font-weight:900}
@media(max-width:480px){.color-options{grid-template-columns:1fr}}


#confettiCanvas{
position:fixed;
inset:0;
width:100vw;
height:100vh;
pointer-events:none;
z-index:9999;
display:none;
}
#confettiCanvas.show{display:block}


#confettiCanvas{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
pointer-events:none !important;
z-index:9998 !important;
display:none;
background:transparent !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
}
#confettiCanvas.show{display:block}
#winnerOverlay{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%) scale(.85);
z-index:9999;
display:none;
padding:24px 34px;
border-radius:28px;
background:rgba(255,255,255,.96);
border:5px solid #fff;
box-shadow:0 18px 60px rgba(0,0,0,.35),0 0 35px var(--winner-colour,#ffd21f);
font-size:clamp(32px,7vw,78px);
font-weight:1000;
text-align:center;
color:#16052f;
text-shadow:0 2px 0 rgba(255,255,255,.8);
}
#winnerOverlay.show{
display:block;
animation:winnerPop 2.8s ease forwards;
}
#winnerOverlay .winner-name{
display:block;
color:var(--winner-colour,#ffd21f);
-webkit-text-stroke:2px rgba(0,0,0,.18);
}
#winnerOverlay .winner-sub{
display:block;
font-size:clamp(16px,2.5vw,28px);
margin-top:6px;
color:#16052f;
-webkit-text-stroke:0;
}
@keyframes winnerPop{
0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-4deg)}
12%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}
22%{transform:translate(-50%,-50%) scale(1) rotate(0)}
82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}
}

#rollToStartOverlay{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%) scale(.92);
z-index:9998;
display:none;
padding:16px 22px 18px;
border-radius:24px;
background:rgba(255,255,255,.97);
border:5px solid #fff;
box-shadow:0 18px 60px rgba(0,0,0,.35),0 0 32px rgba(255,210,31,.55);
text-align:center;
color:#16052f;
min-width:min(380px,90vw);
max-width:min(540px,92vw);
pointer-events:none;
}
#rollToStartOverlay.has-winner{box-shadow:0 18px 60px rgba(0,0,0,.35),0 0 36px var(--rts-winner,rgba(255,210,31,.55));border-color:var(--rts-winner,#fff)}
#rollToStartOverlay.show{display:block;animation:rtsPop .35s ease}
@keyframes rtsPop{
0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.rts-title{font-size:clamp(20px,3.4vw,30px);font-weight:1000;letter-spacing:1px;margin:0 0 4px;color:#3a0d6b}
.rts-sub{font-size:clamp(12px,1.6vw,14px);font-weight:800;opacity:.72;margin-bottom:10px}
.rts-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.rts-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:#f6f3ff;font-weight:900;font-size:clamp(13px,1.8vw,17px);justify-content:space-between;border:2px solid transparent;transition:transform .15s ease}
.rts-row.pending{opacity:.5}
.rts-row.active{border-color:var(--rts,#ffd21f);background:#fff;box-shadow:0 0 0 3px rgba(255,210,31,.25)}
.rts-row.tied{background:#fff3a3;border-color:#ff7f0e}
.rts-row.win{background:linear-gradient(135deg,color-mix(in srgb,var(--rts,#ffd21f) 25%,#fff),color-mix(in srgb,var(--rts,#ffd21f) 70%,#fff));border-color:var(--rts,#ffd21f);box-shadow:0 0 22px color-mix(in srgb,var(--rts,#ffd21f) 80%,transparent);animation:rtsWin .55s ease}
@keyframes rtsWin{0%{transform:scale(.86)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
.rts-name{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rts-name .player-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.rts-dice{font-variant-numeric:tabular-nums;font-weight:1000;font-size:clamp(14px,2vw,19px);color:#16052f;white-space:nowrap}
.rts-dice .rts-total{margin-left:6px;color:#3a0d6b}
.rts-dice.rolling{color:#3a0d6b;font-style:italic;animation:rtsRolling .9s ease-in-out infinite}
@keyframes rtsRolling{0%,100%{opacity:.55}50%{opacity:1}}
.rts-message{margin-top:10px;font-weight:1000;font-size:clamp(13px,2vw,18px);color:#3a0d6b}
.rts-message.tie{color:#c25400}
.rts-message.winner{font-size:clamp(17px,2.8vw,26px);color:var(--rts-winner,#ff2856);text-shadow:0 1px 0 rgba(255,255,255,.8);letter-spacing:.5px}


/* full branded header */
.header-grid{display:none}
.brand-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:12px 0;
  padding:0;
}
.crosslink-logo-wide{width:100%;display:block;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.2);background:#111;object-fit:cover}
.brand-slogan{
text-align:center;
font-weight:1000;
font-size:clamp(22px,4vw,46px);
letter-spacing:.08em;
line-height:1;
padding:8px 10px 10px;
border-radius:16px;
background:linear-gradient(135deg,#ffd21f,#ffffff,#21d36b);
color:#16052f;
text-shadow:0 2px 0 rgba(255,255,255,.8);
box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 5px 16px rgba(0,0,0,.12);
}
.turn-pill-inline{
align-self:stretch;
text-align:center;
background:#f7f5ff;
border-radius:14px;
padding:10px 12px;
font-weight:900;
}
@media(max-width:650px){
.crosslink-logo-wide{border-radius:12px}
.brand-slogan{font-size:clamp(20px,7vw,34px)}
}


/* fixed artwork-style header */
.brand-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:12px 0;
  padding:0;
}
.crosslink-logo-wide,.crosslink-logo{display:none!important}
.crosslink-art-header{
width:100%;
height:auto;
display:block;
border-radius:18px;
box-shadow:0 10px 28px rgba(0,0,0,.24);
background:#111;
object-fit:contain;
}
.brand-slogan{display:none!important}
.turn-pill-inline{
align-self:stretch;
text-align:center;
background:#f7f5ff;
border-radius:14px;
padding:10px 12px;
font-weight:900;
}
@media(max-width:650px){
.crosslink-art-header{border-radius:14px}
}


/* corrected clean header */
.brand-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:12px 0;
  padding:0;
}
.crosslink-art-header,.crosslink-logo-wide,.crosslink-logo{display:none!important}
.crosslink-banner-clean{
  width:min(760px,100%);
  height:auto;
  display:block;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.brand-slogan-clean{
display:block;
width:min(420px,80%);
height:auto;
margin:0 auto;
}
.turn-pill-inline{
align-self:center;
min-width:min(520px,100%);
text-align:center;
background:#f7f5ff;
border-radius:14px;
padding:10px 12px;
font-weight:900;
}
.panel-actions{grid-template-columns:repeat(5,1fr)}
.exit-board{display:none}

/* tablet / iPad board focus mode */
body.board-view{
overflow:hidden;
}
body.board-view .panel{
display:none;
}
body.board-view .board-wrap{
position:fixed;
inset:0;
z-index:9000;
border-radius:0;
padding:12px;
display:grid;
grid-template-columns:minmax(0,1fr) 180px;
grid-template-rows:1fr;
gap:12px;
align-items:center;
background:radial-gradient(circle at top left,#ff4fad 0,#6b1bbf 36%,#1a0633 80%);
}
body.board-view #boardScore{
display:none!important;
}
body.board-view canvas{
width:min(calc(100vh - 28px), calc(100vw - 220px));
max-width:100%;
justify-self:center;
align-self:center;
}
body.board-view .playbar{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin:0;
align-self:center;
}
body.board-view .dice{
order:0;
display:grid;
grid-template-columns:1fr;
gap:10px;
}
body.board-view .die{
width:84px;
height:84px;
font-size:42px;
justify-self:center;
}
body.board-view .playbar button{
font-size:18px;
padding:18px 12px;
min-height:72px;
}
body.board-view .exit-board{
display:block;
position:fixed;
top:12px;
right:12px;
z-index:9010;
background:white;
color:#16052f;
box-shadow:0 6px 20px rgba(0,0,0,.25);
}
@media(max-width:760px){
.panel-actions{grid-template-columns:1fr}
body.board-view .board-wrap{
grid-template-columns:1fr;
grid-template-rows:minmax(0,1fr) auto;
}
body.board-view canvas{
width:min(96vw,70vh);
}
body.board-view .playbar{
grid-template-columns:1fr 1fr 1fr;
width:100%;
}
body.board-view .dice{
grid-template-columns:1fr 1fr;
}
body.board-view .die{
width:58px;
height:58px;
font-size:30px;
}
body.board-view .playbar button{
min-height:auto;
font-size:15px;
padding:12px;
}
}


/* true board-only expand mode */
.board-view-tools,.board-options-panel{display:none}
body.board-view .app{
max-width:none;
width:100vw;
height:100vh;
padding:0;
margin:0;
}
body.board-view .panel{
display:none!important;
}
body.board-view .board-wrap{
position:fixed;
inset:0;
z-index:9000;
border-radius:0;
padding:10px;
display:grid;
grid-template-columns:minmax(0,1fr) 170px;
grid-template-rows:1fr;
gap:10px;
align-items:center;
background:radial-gradient(circle at top left,#ff4fad 0,#6b1bbf 36%,#1a0633 80%);
}
body.board-view .board-view-tools{
display:flex;
position:fixed;
top:10px;
right:10px;
gap:8px;
z-index:9020;
}
body.board-view .board-view-tools button{
background:white;
color:#16052f;
box-shadow:0 6px 20px rgba(0,0,0,.25);
padding:10px 14px;
}
body.board-view .board-options-panel{
display:none;
position:fixed;
top:58px;
right:10px;
z-index:9020;
width:220px;
background:rgba(255,255,255,.97);
border-radius:16px;
padding:12px;
box-shadow:0 12px 36px rgba(0,0,0,.28);
border:3px solid white;
}
body.board-view .board-options-panel.show{
display:grid;
gap:8px;
}
body.board-view .board-options-panel button{
padding:10px;
border-radius:12px;
}
.board-option-check{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
background:#f7f5ff;
border-radius:12px;
padding:9px;
font-weight:900;
text-transform:none;
}
body.board-view #boardScore{
display:none!important;
}
body.board-view canvas{
width:min(calc(100vh - 24px), calc(100vw - 210px));
max-width:100%;
justify-self:center;
align-self:center;
}
body.board-view .playbar{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin:0;
align-self:center;
justify-self:stretch;
background:rgba(255,255,255,.92);
border-radius:22px;
padding:12px;
box-shadow:0 10px 30px rgba(0,0,0,.25);
}
body.board-view .dice{
order:0;
display:grid;
grid-template-columns:1fr;
gap:10px;
}
body.board-view .die{
width:86px;
height:86px;
font-size:44px;
justify-self:center;
}
body.board-view .playbar button{
font-size:18px;
padding:18px 12px;
min-height:72px;
}
body.board-view #rollBtn{order:1}
body.board-view #skipBtn{order:2}
@media(max-width:760px){
body.board-view .board-wrap{
grid-template-columns:1fr;
grid-template-rows:minmax(0,1fr) auto;
padding:8px;
}
body.board-view canvas{
width:min(96vw,72vh);
}
body.board-view .playbar{
grid-template-columns:1fr auto 1fr;
width:100%;
padding:8px;
}
body.board-view .dice{
grid-template-columns:1fr 1fr;
}
body.board-view .die{
width:58px;
height:58px;
font-size:30px;
}
body.board-view .playbar button{
min-height:auto;
font-size:15px;
padding:12px;
}
body.board-view .board-options-panel{
left:10px;
right:10px;
width:auto;
}
}


/* mode-specific cleanup */
body.classic-mode .finish-icons{display:none!important}
body.classic-mode #finishBtn{display:none!important}
body.classic-mode #skipBtn{display:none!important}
body.stepping-mode .finish-icons{display:inline-flex}
body.stepping-mode #skipBtn{display:inline-block}


body.board-view.classic-mode .playbar{
grid-template-columns:1fr auto;
}
body.board-view.classic-mode #skipBtn{
display:none!important;
}
@media(max-width:760px){
body.board-view.classic-mode .playbar{
grid-template-columns:1fr auto;
}
}


.brand-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:8px 0 6px;
  padding:0;
}
.crosslink-banner-clean{
  width:min(760px,100%);
  height:auto;
  display:block;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.brand-slogan-clean{
  display:block;
  width:min(420px,80%);
  height:auto;
  margin:0 auto;
  padding:0;
}
.brand-header .share-row{margin:0}
.brand-header .share-status:empty{display:none}
.brand-header .turn-pill-inline{margin-top:2px}


/* Fix stray '0' in board view */
body.board-view #status,
body.board-view #gameLog,
body.board-view #turnPill,
body.board-view #boardScore,
body.board-view .dice-values,
body.board-view .die-value,
body.board-view .status,
body.board-view .log,
body.board-view .debug,
body.board-view span:empty,
body.board-view span {
  /* prevent orphan inline values */
}

body.board-view .playbar span,
body.board-view .playbar .value {
  display:none !important;
}


/* Clean expanded board controls */
body.board-view .board-view-tools{
  display:grid !important;
  grid-template-columns:1fr;
  gap:8px;
  position:fixed;
  top:12px;
  right:12px;
  z-index:9020;
  width:128px;
}
body.board-view .board-view-tools button{
  width:100%;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.96);
  color:#16052f;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
body.board-view #boardOptionsBtn::before{content:"⚙ ";}

body.board-view .playbar{
  display:grid !important;
  grid-template-columns:1fr;
  gap:12px;
  margin:0;
  align-self:center;
  justify-self:stretch;
  width:150px;
  background:rgba(255,255,255,.95);
  border:3px solid rgba(255,255,255,.9);
  border-radius:26px;
  padding:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.34);
}
body.board-view .dice{
  order:1;
  display:grid !important;
  grid-template-columns:1fr;
  gap:10px;
  justify-items:center;
}
body.board-view .die{
  width:86px;
  height:86px;
  border-radius:18px;
  font-size:44px;
  font-weight:1000;
  background:linear-gradient(145deg,#ffffff,#f3f1ff);
  color:#16052f;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 10px 22px rgba(0,0,0,.18);
}
body.board-view #rollBtn{
  order:2;
  width:100%;
  min-height:62px;
  border-radius:18px;
  background:linear-gradient(145deg,#ffca3a,#ffb703);
  color:#16052f;
  font-size:17px;
}
body.board-view #rollBtn::after{content:" Dice";}
body.board-view #skipBtn{
  order:3;
  width:100%;
  min-height:62px;
  border-radius:18px;
  font-size:16px;
}
body.board-view.classic-mode .playbar{
  grid-template-columns:1fr !important;
}
body.board-view.classic-mode #skipBtn{
  display:none!important;
}
@media(max-width:760px){
  body.board-view .board-view-tools{
    width:auto;
    grid-template-columns:auto auto;
    left:10px;
    right:10px;
    top:10px;
  }
  body.board-view .playbar{
    width:100%;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center;
    padding:10px;
    border-radius:22px;
  }
  body.board-view .dice{
    order:2;
    grid-template-columns:1fr 1fr !important;
  }
  body.board-view #rollBtn{order:1}
  body.board-view #skipBtn{order:3}
  body.board-view .die{
    width:64px;
    height:64px;
    font-size:34px;
  }
}


/* FINAL clean expanded-board override */
body.board-view{
  overflow:hidden !important;
}
body.board-view .app{
  max-width:none !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
}
body.board-view .panel{
  display:none !important;
}
body.board-view .board-wrap{
  position:fixed !important;
  inset:0 !important;
  z-index:9000 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 180px !important;
  grid-template-rows:1fr !important;
  gap:14px !important;
  align-items:center !important;
  justify-items:center !important;
  padding:14px !important;
  border-radius:0 !important;
  background:radial-gradient(circle at top left,#ff4fad 0,#6b1bbf 36%,#1a0633 80%) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
body.board-view canvas#board{
  grid-column:1 !important;
  grid-row:1 !important;
  width:min(calc(100vh - 34px), calc(100vw - 230px)) !important;
  height:min(calc(100vh - 34px), calc(100vw - 230px)) !important;
  max-width:min(calc(100vh - 34px), calc(100vw - 230px)) !important;
  max-height:min(calc(100vh - 34px), calc(100vw - 230px)) !important;
  aspect-ratio:1/1 !important;
  align-self:center !important;
  justify-self:center !important;
  opacity:1 !important;
  transform:none !important;
}
body.board-view .playbar{
  grid-column:2 !important;
  grid-row:1 !important;
  position:static !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto !important;
  gap:12px !important;
  width:156px !important;
  margin:0 !important;
  padding:14px !important;
  align-self:center !important;
  justify-self:center !important;
  background:rgba(255,255,255,.96) !important;
  border:3px solid rgba(255,255,255,.95) !important;
  border-radius:26px !important;
  box-shadow:0 16px 42px rgba(0,0,0,.35) !important;
  opacity:1 !important;
  transform:none !important;
}
body.board-view .dice{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  justify-items:center !important;
  order:1 !important;
}
body.board-view .die{
  width:86px !important;
  height:86px !important;
  border-radius:18px !important;
  font-size:44px !important;
  font-weight:1000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#16052f !important;
  background:linear-gradient(145deg,#fff,#f3f1ff) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 10px 22px rgba(0,0,0,.18) !important;
  opacity:1 !important;
}
body.board-view #rollBtn{
  display:block !important;
  order:2 !important;
  width:100% !important;
  min-height:62px !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#ffca3a,#ffb703) !important;
  color:#16052f !important;
  font-size:17px !important;
  opacity:1 !important;
}
body.board-view #rollBtn::after{
  content:"" !important;
}
body.board-view #skipBtn{
  display:block !important;
  order:3 !important;
  width:100% !important;
  min-height:62px !important;
  border-radius:18px !important;
  font-size:15px !important;
  opacity:1 !important;
}
body.board-view.classic-mode #skipBtn{
  display:none !important;
}
body.board-view .board-view-tools{
  display:flex !important;
  position:fixed !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  width:auto !important;
  gap:8px !important;
  z-index:9020 !important;
  background:transparent !important;
  opacity:1 !important;
}
body.board-view .board-view-tools button{
  display:block !important;
  min-width:86px !important;
  width:auto !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  color:#16052f !important;
  box-shadow:0 6px 20px rgba(0,0,0,.25) !important;
  opacity:1 !important;
  white-space:nowrap !important;
}
body.board-view #boardOptionsBtn::before{
  content:"" !important;
}
body.board-view .board-options-panel{
  position:fixed !important;
  top:62px !important;
  right:12px !important;
  left:auto !important;
  width:230px !important;
  z-index:9021 !important;
  background:rgba(255,255,255,.98) !important;
  border-radius:16px !important;
  padding:12px !important;
  box-shadow:0 12px 36px rgba(0,0,0,.28) !important;
  border:3px solid white !important;
}
body.board-view .board-options-panel:not(.show){
  display:none !important;
}
body.board-view .board-options-panel.show{
  display:grid !important;
  gap:8px !important;
}
body.board-view #boardScore,
body.board-view #status,
body.board-view #gameLog,
body.board-view #turnPill{
  display:none !important;
}
@media(max-width:760px){
  body.board-view .board-wrap{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:8px !important;
  }
  body.board-view canvas#board{
    grid-column:1 !important;
    grid-row:1 !important;
    width:min(96vw,72vh) !important;
  }
  body.board-view .playbar{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    grid-template-columns:1fr auto 1fr !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    padding:10px !important;
    border-radius:22px !important;
  }
  body.board-view .dice{
    order:2 !important;
    grid-template-columns:1fr 1fr !important;
  }
  body.board-view #rollBtn{order:1 !important;}
  body.board-view #skipBtn{order:3 !important;}
  body.board-view .die{
    width:62px !important;
    height:62px !important;
    font-size:32px !important;
  }
  body.board-view .board-view-tools{
    left:10px !important;
    right:10px !important;
    justify-content:space-between !important;
  }
  body.board-view .board-options-panel{
    left:10px !important;
    right:10px !important;
    width:auto !important;
  }
}


.copyright{
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.85);
  padding:10px;
}
body.board-view .copyright{display:none;}


/* Dice face option and current-player roll button */
.die.pip-die{
  position:relative;
  font-size:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:0;
  padding:9px;
}
.die.pip-die .pip{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#16052f;
  align-self:center;
  justify-self:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.die.pip-die .pip.hidden{visibility:hidden}
.roll.current-colour{
  background:var(--current-player-colour,#ffb703) !important;
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 8px 22px color-mix(in srgb,var(--current-player-colour,#ffb703) 45%,transparent);
}
.roll.current-colour:disabled{
  opacity:.55;
  filter:saturate(.8);
}


/* Strong current-player Roll button colour */
.roll.current-colour{
  background:var(--current-player-colour,#ffb703) !important;
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
  border:3px solid rgba(255,255,255,.85) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 4px color-mix(in srgb,var(--current-player-colour,#ffb703) 28%,transparent) !important;
}
.roll.current-colour:disabled{
  opacity:.58 !important;
  filter:saturate(.85) brightness(.95) !important;
}


/* Expanded board: Roll button must use current player colour too */
body.board-view #rollBtn.current-colour,
body.board-view .playbar #rollBtn.current-colour{
  background:var(--current-player-colour,#ffb703) !important;
  color:#fff !important;
  border:3px solid rgba(255,255,255,.92) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.32),0 0 0 5px color-mix(in srgb,var(--current-player-colour,#ffb703) 32%,transparent) !important;
}
body.board-view #rollBtn.current-colour:disabled{
  opacity:.6 !important;
  filter:saturate(.9) brightness(.95) !important;
}


/* Player side selection */
.side-select-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:8px;
}
.side-choice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:7px 8px;
  border-radius:12px;
  background:white;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  font-weight:900;
}
.side-choice .side-name{
  display:flex;
  align-items:center;
  gap:6px;
}
.side-choice input{transform:scale(1.05)}
.player-row .side-tag{
  font-size:11px;
  opacity:.72;
  display:block;
  margin-top:2px;
}
@media(max-width:480px){
  .side-select-grid{grid-template-columns:1fr}
}


/* Repaired player setup: per-player colour/side cards */
#playerList.player-grid{display:block!important;margin-top:0!important}
.setup-subsection{
  background:rgba(255,255,255,.55);
  border-radius:16px;
  padding:10px;
  margin-bottom:10px;
}
.subsection-title{
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#4d4068;
  margin:0 0 8px;
}
.player-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.player-choice-card{
  display:block!important;
  padding:10px!important;
  border-radius:16px!important;
  background:white!important;
  box-shadow:0 4px 12px rgba(0,0,0,.06)!important;
  min-height:0!important;
}
.player-choice-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
}
.player-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.player-title .player-dot{flex:0 0 auto}
.player-label-name{display:block;font-size:17px;line-height:1.05}
.side-tag{
  font-size:12px!important;
  line-height:1.15;
  color:#6b5d83;
  margin:2px 0 8px;
  font-weight:900;
}
.side-chip-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.side-chip{
  appearance:none;
  border:2px solid rgba(22,5,47,.10);
  background:#f7f5ff;
  border-radius:999px;
  padding:6px 7px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  font-weight:1000;
  color:#16052f;
  cursor:pointer;
  min-width:0;
}
.side-chip .chip-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--chip);
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.18);
  flex:0 0 auto;
}
.side-chip .chip-name{
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.side-chip.selected{
  background:var(--chip);
  color:white;
  border-color:white;
  box-shadow:0 0 0 3px var(--chip),0 4px 12px rgba(0,0,0,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.side-chip.selected .chip-dot{background:white}
.side-chip.used:not(.selected){opacity:.42}
.bot-toggle{
  display:flex!important;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:900;
  margin:0!important;
  white-space:nowrap;
}
.bot-toggle input{width:17px;height:17px;accent-color:#9d4edd}
.color-options{margin-top:10px}
@media(max-width:760px){.player-choice-grid{grid-template-columns:1fr}}


/* Preserve player naming/card setup and add compact expanded pawn status */
.expanded-pawn-status{
  display:none;
}
body.board-view .expanded-pawn-status{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  position:fixed;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  bottom:auto;
  width:180px;
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  z-index:9020;
  pointer-events:none;
}
body.classic-mode .expanded-pawn-status,
body.board-view .expanded-pawn-status.hidden{
  display:none !important;
}
body.board-view .eps-card{
  background:rgba(255,255,255,.97);
  border-left:9px solid var(--eps);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  font-weight:900;
  line-height:1.15;
  font-size:15px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
body.board-view .eps-card .eps-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
body.board-view .eps-card .eps-dot{
  width:14px;height:14px;border-radius:50%;
  display:inline-block;
  box-shadow:0 0 0 2px rgba(0,0,0,.18);
}
body.board-view .eps-card strong{
  color:#16052f;
  font-size:16px;
  letter-spacing:.01em;
}
body.board-view .eps-card .eps-colour{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#4d4068;
  background:#f1edff;
  padding:2px 7px;
  border-radius:999px;
}
body.board-view .eps-card .eps-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
body.board-view .eps-card .eps-stat{
  background:#f7f5ff;
  border-radius:10px;
  padding:6px 4px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  border:1.5px solid rgba(22,5,47,.06);
}
body.board-view .eps-card .eps-stat b{
  font-size:22px;
  color:#16052f;
  font-weight:1000;
  line-height:1;
}
body.board-view .eps-card .eps-stat i{
  font-style:normal;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#4d4068;
  margin-top:3px;
}
body.board-view .eps-card .eps-home b{color:#1f8c3a;}
body.board-view .eps-card .eps-off b{color:#b03a4f;}

/* Tablet / smaller laptop refinement */
@media(max-width:1100px) and (min-width:761px){
  body.board-view .expanded-pawn-status{
    width:158px;
    grid-template-columns:1fr;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .board-wrap{
    padding:12px 12px 12px 182px !important;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) canvas#board{
    width:min(calc(100dvh - 28px), calc(100vw - 390px)) !important;
    height:min(calc(100dvh - 28px), calc(100vw - 390px)) !important;
    max-width:min(calc(100dvh - 28px), calc(100vw - 390px)) !important;
    max-height:min(calc(100dvh - 28px), calc(100vw - 390px)) !important;
    aspect-ratio:1/1 !important;
  }
  body.board-view .eps-card{font-size:13px;padding:8px 10px;}
  body.board-view .eps-card strong{font-size:14px;}
  body.board-view .eps-card .eps-stat b{font-size:19px;}
}

/* Mobile (handled also in the centred-board breakpoint below) */
@media(max-width:760px){
  body.board-view .expanded-pawn-status{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  body.board-view .eps-card{
    padding:6px 7px;
    border-left-width:6px;
    font-size:11px;
    gap:4px;
  }
  body.board-view .eps-card strong{font-size:12px;}
  body.board-view .eps-card .eps-colour{display:none;}
  body.board-view .eps-card .eps-stat{padding:4px 2px;}
  body.board-view .eps-card .eps-stat b{font-size:16px;}
  body.board-view .eps-card .eps-stat i{font-size:8px;letter-spacing:.04em;}
}
@media(max-width:480px){
  body.board-view .expanded-pawn-status{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Final expanded mobile/tablet layout: centred board, controls not overlapping */
body.board-view{
  overflow:hidden !important;
}
body.board-view .app{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.board-view .board-wrap{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100vh !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 170px !important;
  grid-template-rows:1fr !important;
  gap:12px !important;
  align-items:center !important;
  justify-items:center !important;
  padding:12px !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
body.board-view:not(.classic-mode) .board-wrap{
  padding:12px 12px 12px 204px !important;
}
body.board-view.pawn-status-hidden .board-wrap{
  padding:12px !important;
}
body.board-view canvas#board{
  width:min(calc(100dvh - 28px), calc(100vw - 220px)) !important;
  height:min(calc(100dvh - 28px), calc(100vw - 220px)) !important;
  max-width:min(calc(100dvh - 28px), calc(100vw - 220px)) !important;
  max-height:min(calc(100dvh - 28px), calc(100vw - 220px)) !important;
  aspect-ratio:1/1 !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
}
body.board-view:not(.classic-mode):not(.pawn-status-hidden) canvas#board{
  width:min(calc(100dvh - 28px), calc(100vw - 412px)) !important;
  height:min(calc(100dvh - 28px), calc(100vw - 412px)) !important;
  max-width:min(calc(100dvh - 28px), calc(100vw - 412px)) !important;
  max-height:min(calc(100dvh - 28px), calc(100vw - 412px)) !important;
  aspect-ratio:1/1 !important;
}
body.board-view .playbar{
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
  z-index:9010 !important;
}
@media(max-width:760px){
  body.board-view .board-wrap,
  body.board-view:not(.classic-mode) .board-wrap{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:6px !important;
    padding:48px 8px max(10px, env(safe-area-inset-bottom)) !important;
    align-items:center !important;
    justify-items:center !important;
  }
  body.board-view canvas#board{
    width:min(96vw, calc(100dvh - 220px)) !important;
    height:min(96vw, calc(100dvh - 220px)) !important;
    max-width:min(96vw, calc(100dvh - 220px)) !important;
    max-height:min(96vw, calc(100dvh - 220px)) !important;
    aspect-ratio:1/1 !important;
    align-self:center !important;
    justify-self:center !important;
  }
  body.board-view .playbar{
    position:relative !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:8px !important;
  }
  body.board-view .expanded-pawn-status{
    position:static;
    grid-row:3;
    width:100%;
    max-width:520px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    pointer-events:none;
    z-index:1;
  }
  body.board-view .board-view-tools{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    justify-content:space-between !important;
  }
}


/* Editable player names */
.player-name-input{
  width:100%;
  min-width:0;
  border:0;
  background:#f7f5ff;
  border-radius:10px;
  padding:6px 8px;
  font-size:16px;
  font-weight:1000;
  color:#16052f;
  outline:none;
}
.player-name-input:focus{
  box-shadow:0 0 0 3px rgba(157,78,221,.22);
  background:#fff;
}
.player-title{
  flex:1;
}


/* FINAL: SVG rolling dice faces. No blank dice, no leaking pips. */
.die.svg-die{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  overflow:hidden !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  background:transparent !important;
}
.die.svg-die .pip,
.die.svg-die .pip-cell,
.die.svg-die span{
  display:none !important;
}
.die.svg-die .dice-svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.die.svg-die .dice-svg rect{
  fill:#f8f7ff !important;
  stroke:rgba(22,5,47,.08) !important;
  stroke-width:1.5 !important;
}
.die.svg-die .dice-svg circle{
  fill:#16052f !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.32));
}

/* Expanded board controls: bigger, clearer dice panel */
body.board-view .playbar{
  width:210px !important;
  padding:18px !important;
  border-radius:32px !important;
  gap:16px !important;
}
body.board-view .die{
  width:110px !important;
  height:110px !important;
  border-radius:24px !important;
  font-size:54px !important;
}
body.board-view #rollBtn{
  min-height:78px !important;
  font-size:22px !important;
  border-radius:24px !important;
}
@media(max-width:760px){
  body.board-view .playbar{
    width:100% !important;
    max-width:560px !important;
    padding:14px !important;
    gap:10px !important;
  }
  body.board-view .die{
    width:78px !important;
    height:78px !important;
    border-radius:18px !important;
    font-size:40px !important;
  }
  body.board-view #rollBtn{
    min-height:68px !important;
    font-size:20px !important;
  }
}

/* Stable audio panel, kept separate from player setup */
.audio-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  align-items:end;
  background:#f7f5ff;
  border-radius:18px;
  padding:12px;
  margin-top:10px;
  box-shadow:inset 0 0 0 2px rgba(22,5,47,.04);
}
.audio-title{
  grid-column:1 / -1;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.audio-panel select{
  width:100%;
}
.audio-volume-label{
  margin:0;
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.audio-volume-label select{
  margin-top:0;
}
@media(max-width:420px){
  .audio-panel{grid-template-columns:1fr;}
}
body.board-view .audio-panel{display:none!important;}

/* Super quiet music option keeps background subtle under SFX */
.audio-volume-label select option[value="superquiet"]{
  font-weight:900;
}

.audio-slider-label{
  gap:6px;
}
.audio-slider-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.audio-slider-value{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  color:#16052f;
  background:#fff;
  border-radius:8px;
  padding:1px 6px;
  min-width:38px;
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(22,5,47,.08);
}
.audio-slider-label input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:22px;
  background:transparent;
  margin:0;
  padding:0;
  cursor:pointer;
}
.audio-slider-label input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#7c3aed,#16052f);
}
.audio-slider-label input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#7c3aed,#16052f);
}
.audio-slider-label input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #7c3aed;
  margin-top:-6px;
  box-shadow:0 1px 3px rgba(22,5,47,.25);
}
.audio-slider-label input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #7c3aed;
  box-shadow:0 1px 3px rgba(22,5,47,.25);
}
.audio-slider-label input[type="range"]:focus{
  outline:none;
}
.audio-slider-label input[type="range"]:focus::-webkit-slider-thumb{
  box-shadow:0 0 0 3px rgba(124,58,237,.35);
}
.audio-slider-label input[type="range"]:focus::-moz-range-thumb{
  box-shadow:0 0 0 3px rgba(124,58,237,.35);
}


/* Fixed How To layout */
.how-hero{margin:10px 0 16px;border-radius:16px;overflow:hidden;background:#16052f;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.how-hero img{width:100%;height:auto;display:block}
.how-section{display:block;margin:12px 0;padding:13px;border-radius:16px;background:#f7f5ff;border:2px solid rgba(22,5,47,.06)}
.how-section h3{margin:0 0 8px;font-size:19px}
.how-section p{margin:7px 0;line-height:1.43;font-weight:700}
.how-small-image{margin:10px 0;border-radius:14px;overflow:hidden;background:#16052f;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.how-small-image img{display:block;width:100%;max-height:300px;object-fit:contain;background:#fff}
.how-small-image small{display:block;padding:7px 9px;background:#16052f;color:#fff;font-weight:900}
.how-callout{padding:12px 14px;border-radius:16px;background:#fff7d6;border-left:8px solid #ffb703;font-weight:900;line-height:1.43;margin:10px 0}
.how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.how-tip{padding:10px 12px;border-radius:14px;background:#eef6ff;border-left:7px solid #1f8cff;font-weight:900;line-height:1.38}
.human-play-card{margin-top:10px;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,210,31,.25),rgba(31,140,255,.14),rgba(33,211,107,.16));border:2px solid rgba(22,5,47,.08)}
.human-play-card strong{display:block;font-size:18px;margin-bottom:4px}
.human-play-card span{display:block;font-size:13px;font-weight:900;opacity:.78;line-height:1.35}
@media(max-width:650px){.how-grid{grid-template-columns:1fr}}

/* Modal hardening: no horizontal scroll, responsive images */
.modal-card{overflow-x:hidden;word-wrap:break-word}
.modal-card img{max-width:100%;height:auto;display:block}
#howText{max-width:100%}
#howText *{max-width:100%;box-sizing:border-box}
.how-steps{margin:6px 0 0;padding-left:22px}
.how-steps li{margin:6px 0;line-height:1.4;font-weight:700}
.how-points{margin:6px 0 0;padding-left:20px;list-style:disc}
.how-points li{margin:5px 0;line-height:1.42;font-weight:700}
@media(max-width:650px){
  .modal{padding:10px;align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-card{padding:14px;max-height:none;margin:auto 0}
  .how-section{padding:11px}
  .how-section h3{font-size:17px}
  .how-small-image img{max-height:240px}
}

/* How To Play tabs */
.how-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px;position:sticky;top:0;background:#fff;padding:8px 0;z-index:3;border-bottom:2px solid rgba(22,5,47,.08)}
.how-tab{background:#e9e6ff;border:none;border-radius:999px;padding:9px 14px;font-weight:900;cursor:pointer;font-size:13px;color:#16052f;transition:background .15s ease,color .15s ease,transform .08s ease}
.how-tab:hover{background:#d8d2ff}
.how-tab.active{background:#1f8cff;color:#fff;box-shadow:0 4px 12px rgba(31,140,255,.35)}
.how-panel{display:none;animation:howFade .22s ease}
.how-panel.active{display:block}
@keyframes howFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* zoomable image cue */
.how-zoomable{position:relative;cursor:zoom-in}
.how-zoomable img{cursor:zoom-in}
.how-zoomable::after{content:'⤢';position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(22,5,47,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.how-zoomable:hover{filter:brightness(1.04)}

/* Image lightbox */
.img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;z-index:50;flex-direction:column}
.img-lightbox.show{display:flex}
.img-lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:rgba(0,0,0,.65);color:#fff;font-weight:900;flex-wrap:wrap}
.img-lightbox-caption{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-lightbox-controls{display:flex;gap:6px;flex-wrap:wrap}
.img-lightbox-btn{background:#1f8cff;color:#fff;border:none;border-radius:10px;padding:8px 14px;font-weight:900;cursor:pointer;font-size:14px;min-width:44px}
.img-lightbox-btn:hover{filter:brightness(1.1)}
.img-lightbox-close{background:#ff2856}
.img-lightbox-stage{flex:1;overflow:auto;display:block;cursor:grab;background:#000;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;padding:8px}
.img-lightbox-stage.grabbing{cursor:grabbing}
.img-lightbox-stage img{display:block;max-width:none;user-select:none;-webkit-user-drag:none;-webkit-user-select:none;background:#fff;border-radius:6px;margin:auto}
.img-lightbox-hint{padding:8px 12px;background:rgba(0,0,0,.7);color:#cfd6ff;font-size:12px;text-align:center;font-weight:700}
@media(max-width:650px){
  .img-lightbox-bar{padding:8px 10px}
  .img-lightbox-btn{padding:8px 10px;font-size:13px}
  .img-lightbox-hint{font-size:11px}
}

/* Definitive mobile expanded-board layout. Overrides all earlier conflicting
   grid rules so the board canvas, pawn-status cards, and playbar each get a
   sensible share of the viewport instead of collapsing the canvas. */
@media(max-width:760px){
  body.board-view .board-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:52px 8px max(10px, env(safe-area-inset-bottom)) !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    overflow:auto !important;
  }
  body.board-view .expanded-pawn-status{
    position:static !important;
    transform:none !important;
    order:1 !important;
    grid-row:auto !important;
    width:100% !important;
    max-width:560px !important;
    max-height:none !important;
    flex:0 0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    pointer-events:auto !important;
    overflow:visible !important;
  }
  body.classic-mode.board-view .expanded-pawn-status,
  body.board-view.pawn-status-hidden .expanded-pawn-status,
  body.board-view .expanded-pawn-status.hidden{
    display:none !important;
  }
  body.board-view .eps-card{
    padding:5px 6px !important;
    border-left-width:5px !important;
    font-size:10px !important;
    border-radius:10px !important;
    gap:2px !important;
  }
  body.board-view .eps-card strong{font-size:11px !important;}
  body.board-view .eps-card .eps-colour{display:none !important;}
  body.board-view .eps-card .eps-stats{gap:2px !important;}
  body.board-view .eps-card .eps-stat{padding:2px 1px !important;}
  body.board-view .eps-card .eps-stat b{font-size:14px !important;}
  body.board-view .eps-card .eps-stat i{font-size:8px !important;letter-spacing:.03em !important;}
  body.board-view canvas#board{
    order:2 !important;
    grid-row:auto !important;
    grid-column:auto !important;
    flex:0 0 auto !important;
    display:block !important;
    width:min(92vw, calc(100dvh - 260px)) !important;
    height:min(92vw, calc(100dvh - 260px)) !important;
    max-width:min(92vw, calc(100dvh - 260px)) !important;
    max-height:min(92vw, calc(100dvh - 260px)) !important;
    aspect-ratio:1/1 !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    object-fit:contain !important;
  }
  body.classic-mode.board-view canvas#board,
  body.board-view.pawn-status-hidden canvas#board{
    width:min(92vw, calc(100dvh - 160px)) !important;
    height:min(92vw, calc(100dvh - 160px)) !important;
    max-width:min(92vw, calc(100dvh - 160px)) !important;
    max-height:min(92vw, calc(100dvh - 160px)) !important;
    aspect-ratio:1/1 !important;
  }
  body.board-view .playbar{
    order:3 !important;
    position:relative !important;
    grid-row:auto !important;
    grid-column:auto !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:560px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 14px !important;
    border-radius:22px !important;
  }
  body.board-view .playbar .dice{
    order:2 !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  body.board-view .playbar #rollBtn{order:1 !important;width:100% !important;}
  body.board-view .playbar #skipBtn{order:3 !important;width:100% !important;}
  body.board-view .die{
    width:58px !important;
    height:58px !important;
    border-radius:14px !important;
    font-size:28px !important;
  }
  body.board-view #rollBtn{
    min-height:60px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
  body.board-view #skipBtn{
    min-height:60px !important;
    font-size:15px !important;
    border-radius:18px !important;
  }
  body.board-view .board-view-tools{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    justify-content:space-between !important;
  }
}



/* Narrow desktop/tablet (761–960px): the side-by-side layout reserves ~412px
   for the fixed pawn-status rail + playbar, which collapses the board canvas
   when "Show Pawn Status" is on. Switch to the proven stacked layout in this
   range so the board stays visible alongside the pawn status. */
@media(min-width:761px) and (max-width:960px){
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .board-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:52px 12px max(12px, env(safe-area-inset-bottom)) !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    overflow:auto !important;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .expanded-pawn-status{
    position:static !important;
    transform:none !important;
    left:auto !important;
    top:auto !important;
    order:1 !important;
    width:100% !important;
    max-width:640px !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    pointer-events:auto !important;
    overflow:visible !important;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .eps-card{
    padding:6px 8px !important;
    border-left-width:6px !important;
    font-size:12px !important;
    border-radius:12px !important;
    gap:3px !important;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .eps-card strong{font-size:13px !important;}
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .eps-card .eps-colour{display:none !important;}
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .eps-card .eps-stat b{font-size:16px !important;}
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) canvas#board{
    order:2 !important;
    width:min(92vw, calc(100dvh - 260px)) !important;
    height:min(92vw, calc(100dvh - 260px)) !important;
    max-width:min(92vw, calc(100dvh - 260px)) !important;
    max-height:min(92vw, calc(100dvh - 260px)) !important;
    aspect-ratio:1/1 !important;
    align-self:center !important;
    justify-self:center !important;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .playbar{
    order:3 !important;
    position:relative !important;
    grid-row:auto !important;
    grid-column:auto !important;
    width:100% !important;
    max-width:560px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
  }
}

/* Board-view CTA: Start Game / Play Again when no game is active */
.board-cta-wrap{display:none;}
body.board-view.game-inactive .board-cta-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:min(420px,90vw);
  padding:20px 22px;
  background:rgba(255,255,255,.97);
  border:3px solid white;
  border-radius:24px;
  box-shadow:0 18px 44px rgba(0,0,0,.32);
  z-index:9015;
  align-self:center;
  justify-self:center;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
body.board-view.game-inactive .board-cta-message{
  font-weight:1000;
  font-size:18px;
  color:#16052f;
  text-align:center;
  line-height:1.25;
}
body.board-view.game-inactive .board-cta{
  width:100%;
  min-height:64px;
  font-size:22px;
  border-radius:18px;
  background:linear-gradient(145deg,#ffca3a,#ffb703);
  color:#16052f;
  font-weight:1000;
  border:0;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.2);
}
body.board-view.game-inactive .board-cta:hover{filter:brightness(1.06);}
body.board-view.game-inactive .playbar{display:none !important;}

/* Ensure the dice roll bar is fully on-screen on mobile/tablet expand mode.
   Previous rules left only ~10px of padding, so on devices with browser chrome
   the playbar appeared clipped against the bottom edge. */
@media(max-width:760px){
  body.board-view .board-wrap{
    padding-bottom:max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  }
  body.board-view .playbar{
    margin-bottom:max(8px, env(safe-area-inset-bottom)) !important;
  }
}
@media(min-width:761px) and (max-width:960px){
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .board-wrap{
    padding-bottom:max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  }
  body.board-view:not(.classic-mode):not(.pawn-status-hidden) .playbar{
    margin-bottom:max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* Expand Board: distinctive but consistent with the action row */
:root{
  --p1:#ff2856;
  --p2:#1f8cff;
  --p3:#21d36b;
  --p4:#ffd21f;
}
.expand-board{
  position:relative;
  padding:14px 18px;
  border-radius:14px;
  border:none;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  color:#16052f;
  background:linear-gradient(135deg,#ffe27a 0%,#ffd21f 55%,#ffb703 100%);
  box-shadow:0 6px 16px rgba(255,179,3,.32);
  transition:transform .08s ease,filter .08s ease,box-shadow .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  letter-spacing:.02em;
}
.expand-board:hover{filter:brightness(1.06);box-shadow:0 8px 20px rgba(255,179,3,.4)}
.expand-board:active{transform:scale(.96);filter:brightness(.92)}
.expand-board .expand-board-icon{font-size:16px;line-height:1;display:inline-flex}
.expand-board .expand-board-label{position:relative;z-index:1}

/* Game Feedback button — calmer tertiary action */
.feedback{
  background:#e9e6ff;
  color:#3d1f8a;
  border:none;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 2px 8px rgba(60,30,140,.12);
  transition:transform .08s ease,filter .08s ease;
}
.feedback:hover{filter:brightness(.97);background:#ddd7ff}
.feedback:active{transform:scale(.96);filter:brightness(.9)}

/* Feedback modal */
.feedback-card{max-width:560px}
.feedback-card h2{margin-top:0}
.feedback-intro{margin:0 0 14px;font-weight:700;line-height:1.45;color:#241044}
.feedback-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.feedback-field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#241044}
.feedback-field span em{font-weight:700;text-transform:none;letter-spacing:0;opacity:.7;font-style:normal}
.feedback-field input,
.feedback-field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid #ddd;
  background:white;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  color:#16052f;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.feedback-field textarea{resize:vertical;min-height:110px;line-height:1.4}
.feedback-field input:focus,
.feedback-field textarea:focus{
  outline:none;
  border-color:#7a5cff;
  box-shadow:0 0 0 3px rgba(122,92,255,.22);
}
.feedback-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.feedback-actions button{padding:11px 18px;border-radius:12px;font-weight:900;cursor:pointer;border:none}
.feedback-status{font-weight:800;font-size:13px;min-height:18px;color:#241044}
.feedback-status.error{color:#c11140}
.feedback-status.ok{color:#117a3d}
.feedback-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Facebook community card inside feedback modal */
.feedback-community{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(135deg,#1877f2 0%,#3b5998 100%);
  color:#fff;
  border-radius:16px;
  padding:14px 16px;
  margin:6px 0 14px;
  box-shadow:0 8px 22px rgba(24,119,242,.32);
}
.feedback-community-text{display:flex;flex-direction:column;gap:4px;line-height:1.4;font-weight:700}
.feedback-community-text strong{font-size:15px;font-weight:900;letter-spacing:.02em}
.feedback-community-text span{font-size:13px;font-weight:600;opacity:.95}
.feedback-fb-btn{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#1877f2;
  font-weight:900;
  text-decoration:none;
  padding:9px 14px;
  border-radius:10px;
  font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:transform .08s ease,filter .08s ease;
}
.feedback-fb-btn:hover{filter:brightness(1.04)}
.feedback-fb-btn:active{transform:scale(.97)}
@media(min-width:520px){
  .feedback-community{flex-direction:row;align-items:center;justify-content:space-between}
  .feedback-community-text{flex:1}
  .feedback-fb-btn{align-self:auto;flex-shrink:0}
}

/* Social share row in brand header */
.share-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:2px 0 0;
}
.share-row-label{
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(22,5,47,.55);
  padding:5px 10px;
  border-radius:999px;
}
.share-btn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  background:#241044;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  transition:transform .08s ease,filter .12s ease,box-shadow .12s ease;
  padding:0;
}
.share-btn svg{width:20px;height:20px;display:block}
.share-btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.24)}
.share-btn:active{transform:scale(.94)}
.share-btn:focus-visible{outline:3px solid #ffd21f;outline-offset:2px}
.share-fb{background:#1877f2}
.share-x{background:#000}
.share-wa{background:#25d366}
.share-copy{background:#7a5cff}
.share-native{background:#ff4fad}
.share-btn.copied{background:#117a3d!important}
.share-status{
  min-height:18px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:#117a3d;
  margin-top:4px;
}
.share-status.error{color:#c11140}
@media(max-width:380px){
  .share-btn{width:34px;height:34px}
  .share-btn svg{width:18px;height:18px}
}
/* Hide native share fallback when Web Share API is unavailable */
body:not(.has-web-share) .share-native{display:none}

/* ===== Online multiplayer UI ===== */
.mp-online-hero{margin:6px 0 4px;display:block}
.mp-online-btn{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  color:#fff;
  font-family:inherit;
  text-align:left;
  background:linear-gradient(135deg,#ff4fad 0%,#7a2bff 48%,#1f8cff 100%);
  background-size:220% 220%;
  box-shadow:0 14px 32px rgba(122,43,255,.42),0 4px 10px rgba(255,79,173,.32),inset 0 1px 0 rgba(255,255,255,.28);
  overflow:hidden;
  isolation:isolate;
  animation:mpHeroPulse 2.6s ease-in-out infinite,mpHeroShift 9s ease-in-out infinite;
  transition:transform .12s ease,box-shadow .2s ease,filter .15s ease;
}
.mp-online-btn:hover{
  filter:brightness(1.06) saturate(1.08);
  box-shadow:0 18px 40px rgba(122,43,255,.55),0 6px 14px rgba(255,79,173,.4),inset 0 1px 0 rgba(255,255,255,.34);
}
.mp-online-btn:active{transform:scale(.985)}
.mp-online-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mp-online-btn-glow{
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:240% 100%;
  mix-blend-mode:overlay;
  opacity:.55;
  pointer-events:none;
  z-index:0;
  animation:mpHeroSheen 3.2s ease-in-out infinite;
}
.mp-online-btn-icon{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  color:#fff;
}
.mp-online-btn-icon svg{display:block;animation:mpHeroSpin 14s linear infinite}
.mp-online-btn-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mp-online-btn-title{font-size:20px;font-weight:900;letter-spacing:.01em;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.mp-online-btn-sub{font-size:12.5px;font-weight:700;opacity:.92;letter-spacing:.02em}
.mp-online-btn-badge{
  position:relative;z-index:1;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;
  padding:5px 9px;border-radius:999px;
  background:#fff;color:#7a2bff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  display:inline-flex;align-items:center;gap:5px;
}
.mp-online-btn-badge::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#21d36b;box-shadow:0 0 0 0 rgba(33,211,107,.7);
  animation:mpHeroDot 1.8s ease-out infinite;
}
.mp-online-btn.mp-online-active{
  background:linear-gradient(135deg,#21d36b 0%,#1f8cff 100%);
  box-shadow:0 14px 32px rgba(33,211,107,.45),0 4px 10px rgba(31,140,255,.35),inset 0 1px 0 rgba(255,255,255,.3);
}
.mp-online-btn-soon-tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  text-shadow:none;
}
.mp-online-btn-badge.mp-online-btn-badge-soon::before{
  background:#ffb020;
  box-shadow:0 0 0 0 rgba(255,176,32,.7);
  animation:mpHeroDotSoon 2.2s ease-out infinite;
}
.mp-online-btn-badge.mp-online-btn-badge-soon{color:#7a2bff}
@keyframes mpHeroDotSoon{
  0%{box-shadow:0 0 0 0 rgba(255,176,32,.7)}
  70%{box-shadow:0 0 0 7px rgba(255,176,32,0)}
  100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}
}
@media(max-width:480px){
  .mp-online-btn-soon-tag{font-size:10px;padding:1px 6px;margin-left:6px}
}
@keyframes mpHeroPulse{
  0%,100%{box-shadow:0 14px 32px rgba(122,43,255,.42),0 4px 10px rgba(255,79,173,.32),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(255,79,173,.55)}
  50%{box-shadow:0 18px 40px rgba(122,43,255,.55),0 6px 14px rgba(255,79,173,.4),inset 0 1px 0 rgba(255,255,255,.34),0 0 0 12px rgba(255,79,173,0)}
}
@keyframes mpHeroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes mpHeroSheen{0%{background-position:-120% 0}55%,100%{background-position:220% 0}}
@keyframes mpHeroSpin{to{transform:rotate(360deg)}}
@keyframes mpHeroDot{
  0%{box-shadow:0 0 0 0 rgba(33,211,107,.7)}
  70%{box-shadow:0 0 0 7px rgba(33,211,107,0)}
  100%{box-shadow:0 0 0 0 rgba(33,211,107,0)}
}
@media (prefers-reduced-motion: reduce){
  .mp-online-btn,.mp-online-btn-glow,.mp-online-btn-icon svg,.mp-online-btn-badge::before{animation:none}
}
@media(max-width:480px){
  .mp-online-btn{padding:14px 14px;gap:11px;border-radius:16px}
  .mp-online-btn-icon{width:36px;height:36px;flex-basis:36px}
  .mp-online-btn-title{font-size:17px}
  .mp-online-btn-sub{font-size:11.5px}
  .mp-online-btn-badge{font-size:9.5px;padding:4px 7px}
}
.mp-modal .modal-card{max-width:560px}
.mp-entry-card h2,.mp-lobby-card h2{margin-bottom:6px}
.mp-intro{font-size:14px;opacity:.8;margin:0 0 14px}
.mp-beta-pill{
  display:inline-block;
  margin-left:8px;
  padding:2px 9px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff4fad,#7a2bff);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  vertical-align:middle;
  box-shadow:0 2px 6px rgba(122,43,255,.35);
}
.mp-beta-notice{
  background:#fff7e6;
  border:1px solid #ffd596;
  color:#5c3a00;
  border-radius:12px;
  padding:11px 13px;
  font-size:13.5px;
  line-height:1.45;
  margin:0 0 14px;
}
.mp-beta-notice strong{color:#7a2bff}
.mp-beta-notice a{color:#7a2bff;text-decoration:underline;font-weight:700}
.mp-beta-notice a:hover{color:#ff4fad}
.mp-field{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-weight:700}
.mp-field input{padding:11px 12px;border-radius:10px;border:2px solid #d4d8df;font-size:16px;font-family:inherit;background:#fff}
.mp-field input:focus{outline:none;border-color:#1f8cff}
#mpEntryCode{font-family:monospace;letter-spacing:.18em;text-transform:uppercase;font-size:20px;text-align:center}
.mp-or{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#666;margin:14px 0 6px}
.mp-or::before,.mp-or::after{content:'';flex:1;height:1px;background:#d4d8df}
.mp-entry-actions-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.mp-entry-actions-row button{flex:1 1 auto;min-width:140px}

.mp-lobby-card #mpLobbyBody{display:flex;flex-direction:column;gap:14px}
.mp-room-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;background:#f5f7fb;padding:12px 14px;border-radius:14px}
.mp-code-block{display:flex;flex-direction:column;gap:2px}
.mp-code-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#666}
.mp-code{font-family:monospace;font-size:28px;letter-spacing:.18em;font-weight:900;color:#1a1f2b}
.mp-share-row{display:flex;gap:8px;flex-wrap:wrap}
.mp-invite-url{font-size:12px;font-family:monospace;background:#1a1f2b;color:#cfd6e4;padding:8px 10px;border-radius:8px;word-break:break-all}
.mp-settings{background:#f5f7fb;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.mp-settings-title{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#222}
.mp-readonly{font-weight:600;color:#888;text-transform:none;letter-spacing:0;font-size:11px}
.mp-set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.mp-set-row select{padding:6px 10px;border-radius:8px;border:1.5px solid #d4d8df;font-family:inherit;font-size:14px;background:#fff}
.mp-set-row select:disabled{opacity:.6}
.mp-toggle-row input{transform:scale(1.3);margin:0}
.mp-seats-title{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#222;margin-top:4px}
.mp-seat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.mp-seat{display:grid;grid-template-columns:32px 90px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;background:#fff;border:2px solid #e6e9ef;font-size:14px}
.mp-seat-filled{border-color:#21d36b;background:#f4fcf6}
.mp-seat-bot{border-color:#9aa3b3;background:#f7f8fa}
.mp-seat-open{border-color:#ffd21f;background:#fffbe7}
.mp-seat-i{font-weight:900;font-size:16px;text-align:center;background:#1a1f2b;color:#fff;border-radius:50%;width:28px;height:28px;line-height:28px}
.mp-seat-side{font-size:12px;font-weight:700;color:#555;letter-spacing:.04em}
.mp-seat-name{font-weight:700;color:#1a1f2b;overflow:hidden;text-overflow:ellipsis}
.mp-you{display:inline-block;background:#1f8cff;color:#fff;padding:1px 7px;border-radius:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;vertical-align:middle}
.mp-badge{display:inline-block;background:#ff2856;color:#fff;padding:1px 7px;border-radius:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-left:4px;vertical-align:middle}
.mp-mini{padding:5px 9px;border-radius:8px;border:1.5px solid #d4d8df;background:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.mp-mini:hover{background:#f5f7fb}
.mp-mini-danger{border-color:#ff2856;color:#ff2856}
.mp-mini-danger:hover{background:#ff2856;color:#fff}
.mp-lobby-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:6px}
.mp-lobby-actions button{flex:1 1 auto;min-width:140px}
.mp-waiting-host{flex:1;font-style:italic;color:#666;align-self:center}

.mp-banner{position:fixed;top:60px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:10px;padding:7px 12px;border-radius:14px;background:rgba(26,31,43,.94);color:#fff;font-size:13px;font-weight:700;z-index:18;backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(0,0,0,.32);max-width:96vw;flex-wrap:wrap;justify-content:center}
body.mp-room-open .mp-banner.show{display:flex}
.mp-banner-room{font-family:monospace;letter-spacing:.1em}
.mp-banner-room strong{color:#ffd21f}
.mp-banner-turn{font-weight:800}
.mp-banner .mp-mini{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.mp-banner .mp-mini:hover{background:rgba(255,255,255,.22)}
.mp-banner .mp-mini-danger{border-color:#ff7e93;color:#ff7e93}

.mp-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1f2b;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:700;opacity:0;transition:opacity .2s, transform .2s;pointer-events:none;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.32)}
.mp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.board-toast{display:none}
body.board-view .board-toast{
  display:block;position:fixed;left:50%;top:24px;
  transform:translateX(-50%) translateY(-12px);
  background:#1a1f2b;color:#fff;
  padding:12px 22px;border-radius:14px;
  font-size:15px;font-weight:800;line-height:1.3;
  text-align:center;max-width:calc(100vw - 40px);
  opacity:0;pointer-events:none;z-index:9030;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  transition:opacity .25s ease, transform .25s ease;
}
body.board-view .board-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:760px){
  body.board-view .board-toast{top:60px;font-size:14px;padding:10px 16px}
}

body.mp-spectating .playbar #rollBtn,body.mp-spectating .playbar #skipBtn,body.mp-spectating .playbar #finishBtn{opacity:.55}
body.mp-spectating #board{filter:saturate(.85)}
body.mp-online #status{padding-bottom:34px}

/* Player-perspective board rotation: viewer's own side faces the bottom */
body.mp-rot-90 canvas#board{transform:rotate(90deg) !important}
body.mp-rot-180 canvas#board{transform:rotate(180deg) !important}
body.mp-rot-270 canvas#board{transform:rotate(270deg) !important}
body.mp-rot-90 canvas#board,body.mp-rot-180 canvas#board,body.mp-rot-270 canvas#board{transform-origin:center center;transition:transform .35s ease}

/* Manual board rotation tool, only shown while the board is expanded */
.board-rotate-tools{display:none}
body.board-view .board-rotate-tools{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:fixed;
  bottom:14px;
  left:14px;
  z-index:9020;
  background:rgba(255,255,255,.96);
  border-radius:18px;
  padding:8px 12px 10px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
body.board-view .board-rotate-title{
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#16052f;
}
body.board-view .board-rotate-row{display:flex;gap:8px;align-items:center}
body.board-view .board-rotate-btn{
  min-width:46px;height:46px;
  border-radius:999px;border:none;
  background:#f3e8ff;color:#16052f;
  font-size:13px;font-weight:800;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:background .15s ease, transform .12s ease;
}
body.board-view .board-rotate-btn svg{width:24px;height:24px;display:block}
body.board-view .board-rotate-btn:hover{background:#e6d3ff}
body.board-view .board-rotate-btn:active{transform:scale(.94)}
@media (max-width:760px){
  body.board-view .board-rotate-tools{bottom:10px;left:10px;padding:6px 10px 8px;border-radius:14px}
  body.board-view .board-rotate-title{font-size:10px}
  body.board-view .board-rotate-btn{min-width:40px;height:40px;padding:0 10px;font-size:12px}
  body.board-view .board-rotate-btn svg{width:20px;height:20px}
}

/* Reaction bar inside the in-game banner */
.mp-react-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:3px 6px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.mp-react-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.78);letter-spacing:.04em;text-transform:uppercase;padding:0 4px 0 2px}
.mp-react-btn{padding:4px 8px;font-size:18px;line-height:1;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;transition:transform .12s,filter .12s,opacity .12s}
.mp-react-btn:hover:not(:disabled){transform:translateY(-1px) scale(1.08);background:rgba(255,255,255,.22)}
.mp-react-btn:active:not(:disabled){transform:translateY(0) scale(.96)}
.mp-react-btn:disabled{opacity:.45;cursor:not-allowed}
.mp-react-mute{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:800;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:10px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.mp-react-mute:hover{background:rgba(255,255,255,.22)}
.mp-react-mute .mp-react-mute-icon{font-size:14px;line-height:1}
.mp-react-mute .mp-react-mute-label{letter-spacing:.02em}
.mp-react-mute.on{background:#ffd21f;color:#16052f;border-color:#ffd21f}
.mp-react-mute.on:hover{background:#ffdf4f}
.mp-react-cooldown{display:none;font-size:11px;color:#ffd21f;font-variant-numeric:tabular-nums;font-weight:800}
.mp-react-cooldown.show{display:inline-block}
.mp-react-bar.muted .mp-react-btn{opacity:.85}

/* Expanded board (board-view) — keep the banner & reactions usable above the focused board */
body.board-view .mp-banner{z-index:9020;top:60px;max-width:calc(100vw - 24px)}
body.board-view .mp-react-bar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
body.board-view .mp-react-btn{font-size:20px;padding:5px 10px}
body.board-view .mp-react-mute{padding:5px 12px;font-size:12px}
body.board-view #mpReactionLayer{z-index:9015}

/* Floating reaction overlay over the board */
.board-wrap{position:relative}
.mp-react-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:14;border-radius:22px}
.mp-react-bubble{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:16px;background:rgba(20,8,40,.78);color:#fff;font-weight:900;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.32);border:2px solid var(--mp-rcolor,#fff);animation:mpReactRise 2.6s ease-out forwards;white-space:nowrap;backdrop-filter:blur(4px)}
.mp-react-bubble .mp-react-emoji{font-size:34px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.mp-react-bubble .mp-react-name{color:var(--mp-rcolor,#fff);font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.02em;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.mp-react-bubble.out{animation:mpReactFade .85s ease forwards}
/* Position based on which side (relative to viewer) the sender is on */
.mp-react-bubble.mp-react-from-0{left:50%;bottom:10%;translate:calc(-50% + var(--mp-rjitter,0px)) 0}
.mp-react-bubble.mp-react-from-1{left:10%;top:50%;translate:0 calc(-50% + var(--mp-rjitter,0px))}
.mp-react-bubble.mp-react-from-2{left:50%;top:10%;translate:calc(-50% + var(--mp-rjitter,0px)) 0}
.mp-react-bubble.mp-react-from-3{right:10%;top:50%;translate:0 calc(-50% + var(--mp-rjitter,0px))}
@keyframes mpReactRise{
  0%{opacity:0;scale:.55}
  18%{opacity:1;scale:1.12}
  35%{scale:1}
  100%{opacity:.95;scale:1}
}
@keyframes mpReactFade{
  0%{opacity:.95;scale:1}
  100%{opacity:0;scale:.78}
}

@media (max-width:520px){
  .mp-seat{grid-template-columns:28px 1fr auto;gap:8px;font-size:13px}
  .mp-seat-side{display:none}
  .mp-code{font-size:22px}
  .mp-banner{font-size:12px;padding:6px 10px;gap:6px}
  .mp-react-label{display:none}
  .mp-react-btn{padding:3px 6px;font-size:16px}
  .mp-react-mute{font-size:10px;padding:3px 8px}
  .mp-react-mute .mp-react-mute-label{display:none}
  .mp-react-bubble{padding:4px 8px}
  .mp-react-bubble .mp-react-emoji{font-size:28px}
  body.board-view .mp-banner{top:60px;max-width:calc(100vw - 24px)}
}

/* Support Cross Link */
.support-actions{margin-top:8px}
.support-cta{width:100%;padding:12px 14px;border-radius:14px;border:none;cursor:pointer;font-weight:900;font-size:14px;color:#fff;background:linear-gradient(135deg,#7a2bd6 0%,#b14ce8 60%,#ff5fae 100%);box-shadow:0 8px 22px rgba(122,43,214,.35);display:inline-flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.02em}
.support-cta:hover{filter:brightness(1.05)}
.support-cta-emoji{font-size:18px;line-height:1}
.support-card{max-width:520px;border-radius:22px;padding:22px 22px 18px}
.support-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.support-header h2{margin:0;font-size:22px;color:#16052f}
.support-emoji{font-size:26px;line-height:1}
.support-intro{font-size:14px;line-height:1.5;color:#241044;margin:6px 0 14px;font-weight:600}
.support-amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.support-amount{padding:11px 8px;border-radius:12px;border:2px solid rgba(122,43,214,.18);background:#f7f5ff;color:#16052f;font-weight:900;font-size:15px;cursor:pointer;transition:transform .08s ease,border-color .12s ease,background .12s ease}
.support-amount:hover{border-color:rgba(122,43,214,.45)}
.support-amount.is-active{background:#7a2bd6;color:#fff;border-color:#7a2bd6;box-shadow:0 6px 16px rgba(122,43,214,.35)}
.support-amount-any{grid-column:1 / -1;background:#fff;border-style:dashed}
.support-paypal-btn{display:block;width:100%;text-align:center;padding:13px 14px;border-radius:14px;background:#ffc439;color:#16052f;font-weight:900;font-size:15px;text-decoration:none;box-shadow:0 8px 18px rgba(255,196,57,.35);margin-bottom:10px}
.support-paypal-btn:hover{filter:brightness(1.04)}
.support-meta{font-size:12px;color:#5a4880;line-height:1.5;display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.support-meta strong{color:#16052f}
.support-actions-row{display:flex;justify-content:flex-end}
.support-actions-row .ghost{padding:9px 18px;border-radius:12px}
@media(max-width:480px){
  .support-amount-grid{grid-template-columns:1fr 1fr}
  .support-amount-any{grid-column:1 / -1}
}

/* Locked board mode for joined (non-host) players: hide exit/options, show audio panel */
body.mp-locked-board.board-view #exitBoardBtn,
body.mp-locked-board.board-view #boardOptionsBtn{display:none!important}
.mp-locked-audio{display:none}
body.mp-locked-board.board-view.mp-sound-open .mp-locked-audio{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:fixed;
  top:60px;
  right:12px;
  z-index:9020;
  background:rgba(255,255,255,.96);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  border:2px solid white;
  min-width:200px;
  color:#16052f;
}
.mp-locked-audio-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:2px;
}
.mp-locked-audio-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-weight:800;
  text-transform:none;
  font-size:13px;
}
.mp-locked-audio-label{
  flex:0 0 auto;
  min-width:74px;
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#5a4880;
}
.mp-locked-audio-sel{
  flex:1 1 auto;
  padding:6px 8px;
  border-radius:10px;
  border:2px solid #ddd;
  font-weight:800;
  background:white;
  font-size:13px;
}
.mp-locked-audio-slider{
  flex:1 1 auto;
  width:auto;
}
@media(max-width:760px){
  body.mp-locked-board.board-view .mp-locked-audio{
    top:10px;
    right:10px;
    min-width:0;
    max-width:54vw;
    padding:8px 10px;
  }
  .mp-locked-audio-label{min-width:64px;font-size:11px}
}

.roll-announcement{
  position:absolute;
  left:3%;
  top:50%;
  transform:translateY(-50%) scale(0);
  width:min(60%,520px);
  max-width:min(60%,560px);
  pointer-events:none;
  z-index:25;
  opacity:0;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
.roll-announcement img{
  width:100%;
  height:auto;
  display:block;
}
.roll-announcement.show{
  animation:rollAnnouncePop 700ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.roll-announcement.hide{
  animation:rollAnnounceVanish 280ms ease-in forwards;
}
@keyframes rollAnnouncePop{
  0%{opacity:0;transform:translateY(-50%) scale(0) rotate(-12deg)}
  55%{opacity:1;transform:translateY(-50%) scale(1.18) rotate(4deg)}
  72%{transform:translateY(-50%) scale(.94) rotate(-2deg)}
  86%{transform:translateY(-50%) scale(1.04) rotate(1deg)}
  100%{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
}
@keyframes rollAnnounceVanish{
  0%{opacity:1;transform:translateY(-50%) scale(1)}
  100%{opacity:0;transform:translateY(-50%) scale(.2)}
}
body:not(.board-view) .roll-announcement{display:none !important;}
body.board-view .roll-announcement{
  left:4%;
  width:min(52%,640px);
}
@media (max-width:650px){
  .roll-announcement{
    width:min(78%,400px);
    left:2%;
  }
}

/* Corner toggle buttons that show/hide the room banner and audio panel.
   They give the player a clear, labelled control instead of overlapping
   panels — especially important on mobile. */
.mp-corner-toggle{
  display:none;
  position:fixed;
  top:10px;
  z-index:9030;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:none;
  background:rgba(26,31,43,.94);
  color:#fff;
  font-family:inherit;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.32);
  backdrop-filter:blur(6px);
}
.mp-corner-toggle.show{display:inline-flex}
.mp-corner-toggle:hover{background:rgba(26,31,43,1);transform:translateY(-1px)}
.mp-corner-toggle:active{transform:translateY(0)}
.mp-corner-toggle[aria-expanded="true"]{background:#7a2bd6}
.mp-corner-toggle .mp-corner-icon{display:inline-flex;align-items:center}
.mp-corner-toggle .mp-corner-label{line-height:1}
.mp-corner-room{left:10px}
.mp-corner-sound{right:10px}
@media(max-width:480px){
  .mp-corner-toggle{padding:6px 10px;font-size:11px}
  .mp-corner-toggle .mp-corner-label{letter-spacing:.02em}
}


/* ============== Player Profile / XP / Streak / Win Modal / Top Scores ============== */

.profile-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:18px;
  background:linear-gradient(135deg,#3d1c8e 0%,#7c2bd1 60%,#ff4fad 130%);
  color:#fff;margin-bottom:12px;flex-wrap:wrap;
  box-shadow:0 8px 22px rgba(60,12,140,.32);
}
.profile-id{display:flex;align-items:center;gap:12px;flex:1;min-width:240px}
.profile-avatar{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(140deg,#ffd21f,#ff7f0e);
  color:#2b0f6b;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.85),0 6px 14px rgba(0,0,0,.32);
  flex-shrink:0;text-align:center;line-height:1;
}
.profile-meta{flex:1;min-width:0}
.profile-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-name{font-size:18px;font-weight:900;letter-spacing:.01em;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.profile-edit-btn{
  background:rgba(255,255,255,.18);color:#fff;border:none;
  padding:4px 10px;border-radius:10px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;
}
.profile-edit-btn:hover{background:rgba(255,255,255,.28)}
.profile-xp-bar{
  height:8px;border-radius:6px;background:rgba(255,255,255,.22);
  margin-top:6px;overflow:hidden;
}
.profile-xp-fill{
  display:block;height:100%;background:linear-gradient(90deg,#ffd21f,#21d36b);
  border-radius:6px;transition:width .4s ease;width:0;
}
.profile-xp-text{font-size:11px;font-weight:800;opacity:.85;margin-top:4px;letter-spacing:.02em}
.profile-streak-badges{display:flex;gap:8px;flex-wrap:wrap}
.profile-stat-pill{
  background:rgba(255,255,255,.14);border-radius:12px;padding:6px 12px;
  display:flex;flex-direction:column;align-items:center;min-width:60px;
}
.pill-label{font-size:10px;font-weight:800;letter-spacing:.06em;opacity:.78;text-transform:uppercase}
.pill-value{font-size:18px;font-weight:900;line-height:1.1}

/* Top scores card */
.top-scores-card{
  background:#f7f5ff;border-radius:18px;padding:14px;margin-bottom:12px;
  border:2px solid rgba(124,43,209,.16);
}
.top-scores-title{
  font-size:13px;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;color:#3d1c8e;margin-bottom:10px;
}
.top-scores-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.ts-cell{
  background:#fff;border-radius:14px;padding:10px;text-align:center;
  box-shadow:0 4px 10px rgba(60,12,140,.06);
}
.ts-label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.ts-value{display:block;font-size:20px;font-weight:900;margin-top:2px;color:#3d1c8e}
@media(max-width:560px){
  .top-scores-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Streak badge floating in board view */
.streak-badge{
  position:absolute;top:14px;left:14px;z-index:5;
  background:linear-gradient(135deg,#ff7f0e,#ff2856);color:#fff;
  padding:6px 12px;border-radius:999px;font-weight:900;font-size:13px;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 6px 18px rgba(255,40,86,.45);
}
body.board-view .streak-badge{animation:streakPulse 2.4s ease-in-out infinite}
.streak-badge-icon{font-size:14px}
@keyframes streakPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* Win modal */
.win-modal-card{text-align:center;max-width:480px}
.win-modal-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.win-modal-trophy{font-size:38px;animation:trophyBounce .9s ease}
@keyframes trophyBounce{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.win-modal-card h2{margin:0;font-size:30px;color:#3d1c8e}
.win-modal-stats{margin:14px 0 18px}
.win-modal-turns{font-size:22px;font-weight:900;color:#16052f}
.win-modal-streak{font-size:14px;font-weight:800;color:#7c2bd1;margin-top:4px}
.win-modal-beaten{
  margin-top:10px;background:linear-gradient(135deg,#21d36b,#1f8cff);color:#fff;
  padding:8px 12px;border-radius:12px;font-weight:900;display:inline-block;
}
.win-modal-share-prompt{font-size:13px;font-weight:800;color:#3d1c8e;margin-bottom:10px;opacity:.85}
.win-modal-share-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px;
}
.win-modal-share-row .share-btn{
  width:auto;height:auto;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 8px;cursor:pointer;border:none;
  font-size:11px;font-weight:800;color:#fff;
}
.win-modal-share-row .share-btn svg{width:22px;height:22px}
.win-modal-share-row .share-wa{background:#25d366}
.win-modal-share-row .share-fb{background:#1877f2}
.win-modal-share-row .share-copy{background:#7c2bd1}
.win-modal-share-row .share-native{background:#ff7f0e}
.win-modal-share-row .share-btn:hover{filter:brightness(1.08)}
.win-modal-actions{display:flex;justify-content:center}
.win-modal-actions .primary{padding:12px 24px;font-size:15px}
@media(max-width:480px){
  .win-modal-share-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Name modal */
.name-modal-card{max-width:420px;text-align:center}
.name-intro{margin:6px 0 14px;font-weight:800;color:#3d1c8e;opacity:.85}
.name-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.name-field span{display:block;font-weight:900;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;color:#3d1c8e}
.name-field input{
  width:100%;padding:12px 14px;border-radius:12px;border:2px solid #ddd;
  font-size:16px;font-weight:800;background:#fff;
}
.name-field input:focus{outline:none;border-color:#7c2bd1}
.name-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.name-actions button{padding:10px 18px;font-size:14px}
.name-fineprint{font-size:11px;color:#666;margin-top:14px;font-weight:700}
.name-or{display:flex;align-items:center;margin:14px 0 10px;color:#888;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.name-or::before,.name-or::after{content:"";flex:1;height:1px;background:#e3dcef}
.name-or span{padding:0 10px}
.name-signin-btn{width:100%;padding:12px 16px;font-size:14px;font-weight:900}

/* Auth modal */
.auth-modal-card{max-width:440px;text-align:left;position:relative}
.auth-tabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:2px solid #ece6f6}
.auth-tab{
  flex:1;background:transparent;border:none;padding:10px 8px;cursor:pointer;
  font-weight:900;font-size:13px;color:#777;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:3px solid transparent;margin-bottom:-2px;
}
.auth-tab.is-active{color:#3d1c8e;border-bottom-color:#7c2bd1}
.auth-title{margin:0 0 4px;color:#3d1c8e}
.auth-intro{margin:0 0 14px;font-weight:700;color:#555;font-size:13px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-field span{display:block;font-weight:900;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;color:#3d1c8e}
.auth-field input{
  width:100%;padding:12px 14px;border-radius:12px;border:2px solid #ddd;
  font-size:16px;font-weight:700;background:#fff;
}
.auth-field input:focus{outline:none;border-color:#7c2bd1}
.auth-status{font-size:13px;font-weight:800;min-height:18px}
.auth-status[data-kind="error"]{color:#b3261e}
.auth-status[data-kind="ok"]{color:#1b8f3b}
.auth-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.auth-actions .auth-submit{padding:12px 22px;font-size:15px}
.auth-actions .auth-forgot{padding:8px 12px;font-size:12px;background:transparent;color:#7c2bd1;text-decoration:underline}

/* Stats account block */
.stats-account{
  margin:12px 0 6px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,#f3edff,#fff);border:2px solid #ece6f6;
}
.stats-account-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stats-account-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.stats-account-text strong{color:#3d1c8e;font-size:14px}
.stats-account-text span{font-size:12px;color:#666;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats-account-row button{padding:8px 14px;font-size:13px;flex-shrink:0}

/* Daily / streak / level toast */
.cl-toast-host{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.cl-toast{
  background:rgba(22,5,47,.94);color:#fff;padding:10px 16px;border-radius:14px;
  font-weight:900;font-size:14px;box-shadow:0 8px 22px rgba(0,0,0,.32);
  opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease;
  max-width:90vw;text-align:center;
}
.cl-toast.show{opacity:1;transform:translateY(0)}
.cl-toast-daily{background:linear-gradient(135deg,#21d36b,#1f8cff)}
.cl-toast-levelup{background:linear-gradient(135deg,#ffd21f,#ff7f0e);color:#16052f}
.cl-toast-streak-broken{background:linear-gradient(135deg,#ff2856,#7c2bd1)}
.cl-toast-ok{background:#21d36b;color:#fff}
.cl-toast-error{background:#ff2856}

/* Challenge banner */
.challenge-banner{margin-bottom:12px}
.challenge-banner-inner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#1f8cff,#7c2bd1);
  color:#fff;padding:12px 14px;border-radius:16px;
  box-shadow:0 6px 16px rgba(31,140,255,.28);
}
.challenge-icon{font-size:24px}
.challenge-text{flex:1}
.challenge-text strong{display:block;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.challenge-text span{font-size:13px;font-weight:800;opacity:.95}
.challenge-text b{font-size:16px}
.challenge-beaten{display:inline-block;margin-left:8px;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:8px}
.challenge-dismiss{
  background:rgba(255,255,255,.2);border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;font-size:20px;cursor:pointer;
}
.challenge-dismiss:hover{background:rgba(255,255,255,.32)}

@media(max-width:560px){
  .profile-bar{flex-direction:column;align-items:stretch}
  .profile-streak-badges{justify-content:space-around}
}

/* ---------- Profile bar: streak pill + My Stats button ---------- */
.profile-stat-pill-streak{
  flex-direction:row;align-items:center;gap:8px;padding:6px 14px;min-width:0;
  background:linear-gradient(135deg,rgba(255,127,14,.32),rgba(255,40,86,.32));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.profile-stat-pill-streak .pill-icon{font-size:18px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.profile-stat-pill-streak .pill-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.profile-stat-pill-streak .pill-label{font-size:9px;opacity:.85}
.profile-stat-pill-streak .pill-value{font-size:16px}

.profile-stats-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#ffd21f 0%,#ff7f0e 60%,#ff2856 130%);
  color:#2b0f6b;border:none;cursor:pointer;
  padding:9px 16px;border-radius:14px;
  font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 6px 16px rgba(255,127,14,.45),inset 0 0 0 2px rgba(255,255,255,.55);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.profile-stats-btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 8px 20px rgba(255,127,14,.55),inset 0 0 0 2px rgba(255,255,255,.7)}
.profile-stats-btn:active{transform:scale(.96)}
.profile-stats-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.profile-stats-btn-icon{font-size:16px;line-height:1}
@media(max-width:560px){
  .profile-stats-btn{flex:1;justify-content:center}
}

/* ---------- Stats modal (dedicated stats page) ---------- */
.stats-modal-card{
  position:relative;max-width:560px;padding:0;
  background:linear-gradient(180deg,#fbf8ff 0%,#fff 35%);
  border:2px solid rgba(124,43,209,.18);
}
.stats-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.22);color:#fff;
  font-size:22px;font-weight:900;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,transform .12s ease;
}
.stats-close:hover{background:rgba(255,255,255,.4)}
.stats-close:active{transform:scale(.92)}
.stats-close:focus-visible{outline:3px solid #ffd21f;outline-offset:2px}

.stats-hero{
  display:flex;align-items:center;gap:16px;
  padding:22px 22px 26px;
  background:linear-gradient(135deg,#3d1c8e 0%,#7c2bd1 55%,#ff4fad 130%);
  color:#fff;
  box-shadow:inset 0 -16px 24px rgba(60,12,140,.25);
}
.stats-hero-avatar{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,#ffd21f,#ff7f0e);
  color:#2b0f6b;font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;
  box-shadow:0 0 0 4px rgba(255,255,255,.85),0 8px 18px rgba(0,0,0,.35);
}
.stats-hero-meta{flex:1;min-width:0}
.stats-hero-name{
  margin:0 0 6px;font-size:22px;font-weight:900;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.25);overflow:hidden;text-overflow:ellipsis;
}
.stats-hero-xp-text{font-size:11px;font-weight:800;letter-spacing:.04em;opacity:.9;margin-bottom:6px}
.stats-hero-xp-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden}
.stats-hero-xp-fill{
  display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#ffd21f,#21d36b);
  transition:width .5s ease;
}

.stats-section{padding:18px 22px 4px}
.stats-section-title{
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:#7c2bd1;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.stats-section-title::after{
  content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(124,43,209,.35),rgba(124,43,209,0));
}

.stats-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.stat-tile{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:#fff;border-radius:16px;padding:14px;
  border:2px solid rgba(124,43,209,.10);
  box-shadow:0 6px 14px rgba(60,12,140,.08);
  overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.stat-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(60,12,140,.14);border-color:rgba(124,43,209,.22)}
.stat-tile-icon{
  font-size:22px;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(60,12,140,.18));
}
.stat-tile-value{font-size:26px;font-weight:900;color:#3d1c8e;line-height:1.1}
.stat-tile-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.7;color:#3d1c8e}
.stat-tile::before{
  content:"";position:absolute;inset:auto -30% -50% auto;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,43,209,.10),rgba(124,43,209,0) 70%);
  pointer-events:none;
}
.stat-tile-wins .stat-tile-value{color:#b58200}
.stat-tile-streak .stat-tile-value{color:#ff2856}
.stat-tile-best .stat-tile-value{color:#ff7f0e}
.stat-tile-fastest .stat-tile-value{color:#1f8cff}
.stat-tile-rate .stat-tile-value{color:#21d36b}
.stat-tile-shares .stat-tile-value{color:#7c2bd1}

.stats-tips{
  margin:18px 22px 4px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,rgba(33,211,107,.10),rgba(31,140,255,.10));
  border:2px dashed rgba(31,140,255,.35);
  color:#16052f;
}
.stats-tips strong{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#3d1c8e;margin-bottom:6px}
.stats-tips ul{margin:0;padding-left:18px;font-weight:800;font-size:13px;line-height:1.5}
.stats-tips li b{color:#21d36b}

.stats-actions{
  display:flex;justify-content:flex-end;gap:8px;padding:18px 22px 22px;
}
.stats-actions button{padding:11px 18px;font-size:14px;border-radius:14px}

@media(max-width:520px){
  .stats-hero{padding:18px 16px 22px;gap:12px}
  .stats-hero-avatar{width:60px;height:60px;font-size:13px}
  .stats-hero-name{font-size:18px}
  .stats-section{padding:16px 16px 4px}
  .stats-tips{margin:16px 16px 4px}
  .stats-actions{padding:16px;flex-direction:column-reverse}
  .stats-actions button{width:100%}
  .stat-tile-value{font-size:22px}
}

/* ===== Tier badges (multiplayer rank) ===== */
.mp-tier{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.02em;
  background:color-mix(in srgb,var(--mp-tier-color) 22%,#0b0223 78%);
  color:var(--mp-tier-color,#fff);
  border:1.5px solid color-mix(in srgb,var(--mp-tier-color) 60%,transparent);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  vertical-align:middle;
}
.mp-tier-emoji{font-size:12px;line-height:1}
.mp-tier-name{font-weight:900}
.mp-tier-unranked{
  background:#2a1a4d;border-color:#3a2864;color:#a99cd6;
  opacity:.85;font-style:italic;
}

/* ===== Leaderboard CTA button ===== */
.mp-leaderboard-cta-row{display:flex;justify-content:center;margin:6px 0 18px}
.mp-leaderboard-cta{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:520px;
  padding:14px 18px;border-radius:18px;cursor:pointer;
  background:linear-gradient(135deg,#3d1f8a 0%,#1f48b8 50%,#1a8fc7 100%);
  border:2px solid rgba(255,255,255,.15);
  color:#fff;text-align:left;
  box-shadow:0 8px 24px rgba(31,72,184,.35),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mp-leaderboard-cta:hover{transform:translateY(-1px) scale(1.01);filter:brightness(1.06)}
.mp-leaderboard-cta:active{transform:translateY(0)}
.mp-leaderboard-cta-icon{font-size:26px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.mp-leaderboard-cta-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.mp-leaderboard-cta-title{font-size:16px;font-weight:900;letter-spacing:.01em}
.mp-leaderboard-cta-sub{font-size:12px;opacity:.85;margin-top:2px}
.mp-leaderboard-cta-arrow{font-size:24px;flex-shrink:0;opacity:.7}

/* ===== Leaderboard modal ===== */
.mp-leaderboard-modal .mp-leaderboard-card{
  max-width:540px;width:calc(100vw - 28px);
  padding:0;overflow:hidden;
  background:linear-gradient(180deg,#1a0942 0%,#13062f 100%);
  color:#f3eaff;
  border:2px solid rgba(255,255,255,.08);
  position:relative;
}
.mp-leaderboard-close{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;border:none;cursor:pointer;
  font-size:22px;line-height:1;display:grid;place-items:center;
}
.mp-leaderboard-close:hover{background:rgba(0,0,0,.55)}
.mp-leaderboard-head{
  padding:22px 22px 12px;
  background:linear-gradient(135deg,#3d1f8a,#1f48b8);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mp-leaderboard-head h2{margin:0;font-size:20px;letter-spacing:.01em}
.mp-leaderboard-reset{margin-top:6px;font-size:13px;color:#cbb8ff;font-weight:700}
.mp-leaderboard-reset strong{color:#ffd21f}

.mp-leaderboard-body{padding:14px 18px 6px;max-height:55vh;overflow-y:auto}
.mp-leaderboard-loading,.mp-leaderboard-empty{
  text-align:center;padding:18px;color:#cbb8ff;font-style:italic;
}
.mp-leaderboard-list{list-style:none;margin:0;padding:0}
.mp-leaderboard-row{
  display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;
  gap:10px;padding:10px 8px;border-radius:10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:14px;
}
.mp-leaderboard-row.is-me{
  background:rgba(255,210,31,.10);
  border:1.5px solid rgba(255,210,31,.45);
  margin:6px 0;
}
.mp-leaderboard-rank{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.06);font-weight:900;font-size:13px;
}
.mp-leaderboard-rank.rank-1{background:linear-gradient(135deg,#ffd21f,#e6b22e);color:#3d1c00}
.mp-leaderboard-rank.rank-2{background:linear-gradient(135deg,#d8dde4,#9aa3ae);color:#1d2330}
.mp-leaderboard-rank.rank-3{background:linear-gradient(135deg,#d4884b,#a06a3a);color:#2a1100}
.mp-leaderboard-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-leaderboard-score{font-size:13px;color:#cbb8ff;white-space:nowrap}
.mp-leaderboard-score strong{color:#21d36b;font-size:15px}
.mp-leaderboard-row .mp-you{
  background:rgba(255,210,31,.25);color:#ffd21f;
  font-size:10px;padding:1px 6px;border-radius:8px;margin-left:4px;
}

.mp-leaderboard-myrow{
  margin:14px 8px 4px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,210,31,.12),rgba(33,211,107,.12));
  border:1.5px dashed rgba(255,210,31,.4);
}
.mp-leaderboard-myrow.in-top{display:none}
.mp-leaderboard-myrow-head{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#ffd21f;font-weight:900;margin-bottom:8px;
}
.mp-leaderboard-myrow-body{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;
}
.mp-leaderboard-myrow-empty{color:#cbb8ff;font-style:italic}
.mp-leaderboard-myrank{font-weight:900;font-size:18px;color:#ffd21f}
.mp-leaderboard-myname{font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mp-leaderboard-myscore{font-size:12px;color:#cbb8ff;width:100%}

.mp-leaderboard-foot{
  padding:10px 18px 18px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
}
.mp-leaderboard-toggle{
  display:flex;align-items:center;gap:8px;font-size:12px;color:#cbb8ff;
  cursor:pointer;user-select:none;margin-bottom:10px;
}
.mp-leaderboard-toggle input{cursor:pointer}
.mp-leaderboard-howto{font-size:12px;color:#cbb8ff}
.mp-leaderboard-howto summary{cursor:pointer;font-weight:700;padding:4px 0}
.mp-leaderboard-howto ul{margin:6px 0 0;padding-left:18px;line-height:1.5}
.mp-leaderboard-howto[open] summary{color:#ffd21f}
.mp-lb-criteria{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(135deg,rgba(106,76,255,.22),rgba(33,211,107,.18));
  border:1px solid rgba(255,210,31,.32);
  color:#fff;font-size:12px;line-height:1.35;
}
.mp-lb-criteria-icon{font-size:18px;flex-shrink:0}
.mp-lb-criteria-text{flex:1}
.mp-lb-criteria-text strong{color:#ffd21f;letter-spacing:.01em}
.mp-lb-offline-note{
  font-size:12px;color:#cbb8ff;margin-bottom:8px;display:flex;
  align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.mp-lb-offline-note strong{color:#ffd21f}
.mp-lb-clear-offline{
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);
  color:#cbb8ff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;cursor:pointer;
}
.mp-lb-clear-offline:hover{background:rgba(255,255,255,.08);color:#fff}

.mp-lb-tabs{display:flex;gap:6px;margin-top:10px}
.mp-lb-tab{
  flex:1;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);color:#cbb8ff;font-weight:800;font-size:13px;cursor:pointer;
  letter-spacing:.02em;transition:background .15s,color .15s,border-color .15s;
}
.mp-lb-tab:hover{background:rgba(255,255,255,.05);color:#fff}
.mp-lb-tab.is-active{
  background:linear-gradient(135deg,#6a4cff,#9466ff);color:#fff;
  border-color:rgba(255,210,31,.4);box-shadow:0 2px 10px rgba(106,76,255,.35);
}

.mp-lb-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 18px 0;
}
.mp-lb-pagesize-label{font-size:12px;color:#cbb8ff;font-weight:700;display:flex;align-items:center;gap:6px}
.mp-lb-pagesize-label select{
  padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.4);color:#fff;font-weight:700;cursor:pointer;
}
.mp-lb-goto-me{
  padding:6px 12px;border-radius:10px;border:1px solid rgba(255,210,31,.4);
  background:linear-gradient(135deg,rgba(255,210,31,.18),rgba(33,211,107,.18));
  color:#ffd21f;font-weight:800;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:filter .15s,transform .15s;
}
.mp-lb-goto-me:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.mp-lb-goto-me:disabled{opacity:.45;cursor:not-allowed}

.mp-lb-list-lifetime .mp-lb-row-lifetime{
  display:grid;
  grid-template-columns:36px 1fr auto auto;
  grid-template-areas:'rank name tier trophies' 'rank stats stats stats';
  align-items:center;column-gap:10px;row-gap:4px;
  padding:10px 12px;
}
.mp-lb-row-lifetime .mp-leaderboard-rank{grid-area:rank}
.mp-lb-row-lifetime .mp-leaderboard-name{grid-area:name}
.mp-lb-row-lifetime .mp-tier{grid-area:tier}
.mp-lb-row-lifetime .mp-lb-trophies{grid-area:trophies}
.mp-lb-row-lifetime .mp-lb-stats{grid-area:stats}
.mp-lb-trophies{font-size:13px;color:#ffd21f;font-weight:700;white-space:nowrap}
.mp-lb-trophies strong{color:#ffd21f;font-size:15px;margin-right:2px}
.mp-lb-stats{
  display:flex;flex-wrap:wrap;gap:8px 12px;font-size:11px;color:#cbb8ff;
  letter-spacing:.02em;
}
.mp-lb-stats .mp-lb-stat-w{color:#21d36b;font-weight:800}
.mp-lb-stats .mp-lb-stat-l{color:#ff6b6b;font-weight:800}
.mp-lb-stats .mp-lb-stat-g{color:#cbb8ff;font-weight:700}
.mp-lb-stats .mp-lb-stat-rate{color:#ffd21f;font-weight:800}

.mp-lb-pager{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);flex-wrap:wrap;
}
.mp-lb-page-btn{
  min-width:32px;height:32px;padding:0 8px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);
  color:#cbb8ff;font-weight:800;cursor:pointer;font-size:14px;
  transition:background .15s,color .15s,transform .1s;
}
.mp-lb-page-btn:hover:not(:disabled){background:rgba(106,76,255,.35);color:#fff;transform:translateY(-1px)}
.mp-lb-page-btn:disabled{opacity:.35;cursor:not-allowed}
.mp-lb-pager-info{
  display:flex;flex-direction:column;align-items:center;font-size:12px;color:#cbb8ff;
  padding:0 8px;line-height:1.3;
}
.mp-lb-pager-page strong{color:#ffd21f;font-size:14px}
.mp-lb-pager-range{font-size:11px;opacity:.75}

@media(max-width:520px){
  .mp-leaderboard-cta{padding:12px 14px}
  .mp-leaderboard-cta-title{font-size:14px}
  .mp-leaderboard-cta-sub{font-size:11px}
  .mp-leaderboard-row{grid-template-columns:28px 1fr auto;font-size:13px}
  .mp-leaderboard-row .mp-tier{grid-column:2/-1;justify-self:start;margin-top:4px}
  .mp-leaderboard-score{grid-column:1/-1;justify-self:end;margin-top:2px}
  .mp-lb-list-lifetime .mp-lb-row-lifetime{
    grid-template-columns:28px 1fr auto;
    grid-template-areas:'rank name trophies' 'rank tier tier' 'stats stats stats';
  }
  .mp-lb-row-lifetime .mp-tier{justify-self:start;margin-top:2px}
  .mp-lb-stats{font-size:10.5px;gap:6px 10px}
}

/* Quick Play hero + collapsible game settings */
.quick-play{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg,#21d36b 0%,#1f8cff 55%,#6b1bbf 100%);
  color:#fff;
  box-shadow:0 12px 28px rgba(33,211,107,.22),0 4px 12px rgba(107,27,191,.18);
  border:2px solid rgba(255,255,255,.35);
  flex-wrap:wrap;
}
.quick-play-text{flex:1 1 240px;min-width:0}
.quick-play-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:900;opacity:.85;margin-bottom:2px}
.quick-play-title{font-size:22px;font-weight:900;line-height:1.1;margin-bottom:4px;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.quick-play-meta{font-size:13px;font-weight:800;opacity:.92;margin-bottom:6px}
.quick-play-players{display:flex;flex-wrap:wrap;gap:6px}
.quick-play-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:3px 8px 3px 6px;border-radius:999px;font-size:12px;font-weight:800;backdrop-filter:blur(2px)}
.quick-play-chip.is-bot{opacity:.78}
.quick-play-dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.quick-play-bot-tag{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.22);padding:1px 5px;border-radius:6px;margin-left:2px}
.quick-play-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:0 0 auto;min-width:160px}
.quick-play-btn{font-size:18px;padding:14px 22px;border-radius:16px;background:#ffd21f;color:#16052f;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.quick-play-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.quick-play-btn-icon{font-size:14px}
.quick-play-customise{background:rgba(255,255,255,.92);color:#16052f;font-size:13px;padding:9px 12px;border-radius:12px}
@media(max-width:560px){
  .quick-play{flex-direction:column;align-items:stretch;text-align:left}
  .quick-play-actions{flex-direction:row;min-width:0}
  .quick-play-btn{flex:1 1 auto}
  .quick-play-customise{flex:0 0 auto}
}

.setup-collapse{margin-top:10px;border-radius:18px;background:rgba(247,245,255,.6);border:1px solid rgba(22,5,47,.08);overflow:hidden}
.setup-collapse[open]{background:rgba(247,245,255,.95)}
.setup-summary{cursor:pointer;list-style:none;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-weight:900;color:#16052f;user-select:none}
.setup-summary::-webkit-details-marker{display:none}
.setup-summary::before{content:'\25B8';display:inline-block;transition:transform .2s ease;color:#6b1bbf;font-size:14px;flex:0 0 auto}
.setup-collapse[open] .setup-summary::before{transform:rotate(90deg)}
.setup-summary-label{font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.setup-summary-hint{font-size:12px;font-weight:700;opacity:.65;text-transform:none;letter-spacing:0}
.setup-collapse[open] .setup-summary{border-bottom:1px solid rgba(22,5,47,.08)}
.setup-collapse .setup-grid{margin-top:10px;padding:0 12px 12px}

/* Hide redundant Start Game button — Quick Play covers it */
#startGameBtn{display:none}

/* Hide quick-play card while a game is active so it doesn't clutter mid-game */
body:not(.game-inactive) .quick-play{display:none}
body.board-view .quick-play,body.board-view .setup-collapse{display:none}


/* ===== Win modal XP & message picker ===== */
.win-modal-xp{
  font-weight:700;color:#a86bff;margin-top:4px;letter-spacing:.02em;
}
.win-modal-msg-picker{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 6px;
}
@media (max-width:520px){.win-modal-msg-picker{grid-template-columns:1fr;}}
.win-msg-option{
  position:relative;display:flex;flex-direction:column;gap:4px;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  transition:background .15s,border-color .15s,transform .1s;
}
.win-msg-option:hover{background:rgba(255,255,255,.08)}
.win-msg-option.is-active{background:rgba(168,107,255,.18);border-color:#a86bff}
.win-msg-option input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.win-msg-option-title{font-weight:700;font-size:.85rem;color:#fff}
.win-msg-option-text{font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.78);
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ===== Offline leaderboard in stats modal ===== */
.stats-section-sub{font-weight:400;font-size:.8rem;opacity:.7;margin-left:6px}
.offline-lb-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
}
.offline-lb-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.offline-lb-rank{
  font-weight:700;width:28px;text-align:center;
  background:rgba(255,255,255,.08);border-radius:6px;padding:2px 6px;
}
.offline-lb-rank.rank-1{background:#e6b22e;color:#1a1408}
.offline-lb-rank.rank-2{background:#9aa3ae;color:#11151a}
.offline-lb-rank.rank-3{background:#a06a3a;color:#fff}
.offline-lb-name{font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offline-lb-score{font-size:.82rem;color:rgba(255,255,255,.78)}
.offline-lb-row.is-me{background:linear-gradient(135deg,rgba(255,210,31,.18),rgba(33,211,107,.14));border-radius:10px}
.offline-lb-you{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;
  background:linear-gradient(135deg,#ffd21f,#21d36b);color:#1a1408;font-size:.7rem;font-weight:900;letter-spacing:.04em;
}
.offline-lb-empty{
  text-align:center;padding:14px 12px;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.04);border-radius:8px;font-size:.85rem;
}
.offline-lb-actions{display:flex;justify-content:flex-end;margin-top:8px}

/* Offline leaderboard tab */
.mp-lb-row-offline{}
.mp-lb-offline-note{
  font-size:.82rem;color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;margin:0 0 10px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.mp-lb-clear-offline{
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:4px 10px;border-radius:6px;cursor:pointer;font-size:.78rem;
}
.mp-lb-clear-offline:hover{background:rgba(255,80,80,.25);border-color:#ff8080}

/* ===== Public offline leaderboard (main panel, always visible) ===== */
.public-offline-lb{
  margin-top:12px;background:linear-gradient(135deg,#1f0a3a 0%,#2b1066 100%);
  border-radius:18px;padding:14px 14px 12px;color:#fff;
  box-shadow:0 12px 24px rgba(31,10,58,.25);border:1px solid rgba(255,255,255,.06);
}
.public-offline-lb-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.public-offline-lb-title{
  margin:0;display:flex;align-items:center;gap:8px;
  font-size:1.05rem;color:#fff;letter-spacing:.01em;
}
.public-offline-lb-icon{font-size:1.2rem}
.public-offline-lb-sub{font-size:.78rem;color:rgba(255,255,255,.72);font-weight:700}
.public-offline-lb-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
}
.public-offline-lb-actions{display:flex;justify-content:flex-end;margin-top:10px}
.public-offline-lb-actions .ghost{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:6px 12px;font-size:12px;border-radius:10px;
}
.public-offline-lb-actions .ghost:hover{background:rgba(255,255,255,.2)}

/* ===== Saved users picker (welcome modal) ===== */
.saved-users{
  margin:0 0 14px;padding:14px;border-radius:16px;
  background:linear-gradient(135deg,#f3edff 0%,#fff 100%);
  border:2px solid #ece6f6;text-align:left;
}
.saved-users-title{
  font-weight:900;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#3d1c8e;margin-bottom:10px;
}
.saved-users-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
@media(max-width:420px){.saved-users-list{grid-template-columns:1fr}}
.saved-user-slot{
  position:relative;display:flex;align-items:stretch;
}
.saved-user-pick{
  flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:#fff;border:2px solid #e4dbf7;border-radius:14px;
  cursor:pointer;text-align:left;font-weight:800;color:#16052f;min-width:0;
}
.saved-user-pick:hover{border-color:#7c2bd1;background:#faf6ff}
.saved-user-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c2bd1,#1f8cff);color:#fff;
  font-weight:900;font-size:14px;letter-spacing:.04em;
}
.saved-user-meta{
  display:flex;flex-direction:column;min-width:0;line-height:1.2;
}
.saved-user-name{
  font-weight:900;font-size:14px;color:#16052f;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.saved-user-email{
  font-weight:700;font-size:11px;color:#6b6090;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.saved-user-remove{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;
  border-radius:50%;background:#ff2856;color:#fff;border:2px solid #fff;
  font-weight:900;font-size:14px;line-height:1;cursor:pointer;padding:0;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.saved-users-list.is-managing .saved-user-remove{display:inline-flex}
.saved-users-list.is-managing .saved-user-pick{pointer-events:none;opacity:.85}
.saved-users-meta{
  margin-top:8px;font-size:11px;color:#6b6090;font-weight:700;
}
.saved-users-actions{display:flex;justify-content:flex-end;margin-top:8px}
.saved-users-manage{padding:6px 12px;font-size:12px;background:#ede6fb;color:#3d1c8e}
.saved-users-manage[aria-pressed="true"]{background:#3d1c8e;color:#fff}
.saved-users-divider{
  display:flex;align-items:center;margin:14px 0 0;color:#9d92b5;
  font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}
.saved-users-divider::before,.saved-users-divider::after{
  content:"";flex:1;height:1px;background:#e3dcef;
}
.saved-users-divider span{padding:0 10px}

/* New "Create a new account" CTA on welcome modal */
.name-newaccount-btn{
  width:100%;padding:10px 16px;font-size:13px;margin-top:8px;
  background:#ede6fb;color:#3d1c8e;
}

/* Auth remember-me checkbox */
.auth-remember{
  display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:12px;
  color:#3d1c8e;cursor:pointer;line-height:1.35;
}
.auth-remember input{margin-top:2px;transform:scale(1.1)}
.auth-remember-text{flex:1}

/* Stats account buttons row (multi-button layout) */
.stats-account-buttons{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.stats-account-buttons button{padding:8px 12px;font-size:12px}

/* Mobile expand-mode: keep streak badge and rotate tools clear of the board,
   playbar, and Exit/Options buttons. */
@media(max-width:760px){
  body.board-view .streak-badge{
    position:fixed !important;
    top:10px !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    z-index:9020 !important;
    font-size:11px !important;
    padding:5px 10px !important;
    max-width:42vw !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.board-view .board-rotate-tools{
    flex-direction:row !important;
    bottom:auto !important;
    left:auto !important;
    top:54px !important;
    right:8px !important;
    padding:5px 8px 6px !important;
    border-radius:14px !important;
    gap:4px !important;
  }
  body.board-view .board-rotate-title{display:none !important;}
  body.board-view .board-rotate-row{gap:6px !important;}
  body.board-view .board-rotate-btn{
    min-width:36px !important;
    height:36px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }
  body.board-view .board-rotate-btn svg{width:18px !important;height:18px !important;}
  body.board-view .board-options-panel{top:96px !important;}
}

/* Sound + colour-blind quick options shown inside the expand-mode Options panel.
   Keeps a max-height with internal scroll so it never overlaps the board. */
body.board-view .board-options-panel{
  max-height:calc(100vh - 80px) !important;
  overflow-y:auto !important;
  width:250px !important;
}
.board-audio-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  background:#f7f5ff;
  border-radius:14px;
  padding:10px;
  margin-top:2px;
  box-shadow:inset 0 0 0 2px rgba(22,5,47,.04);
}
.board-audio-title{
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:13px;
}
.board-audio-panel .audio-volume-label{
  background:transparent;
  padding:0;
}
.board-audio-panel select{
  width:100%;
}
@media(max-width:760px){
  body.board-view .board-options-panel{
    width:auto !important;
    max-height:70vh !important;
  }
}
/* Make sure the top-right tools never collide with each other on narrow screens. */
body.board-view .board-view-tools{flex-wrap:wrap !important;justify-content:flex-end !important;}
body.board-view .board-view-tools button{font-size:13px !important;}