:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;--ink:#f8fafc;--muted:#94a3b8;--panel:rgba(13,20,36,.78);--line:rgba(255,255,255,.10);--gold:#f7c65c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 2%,#29365f 0,#111827 28%,#060910 75%);color:var(--ink)}button{font:inherit}.shell{width:min(1440px,94vw);margin:auto;padding:18px 0 72px}.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(6,9,16,.78);backdrop-filter:blur(22px)}.topbar>div{display:flex;gap:9px;align-items:center;letter-spacing:.08em}.topbar small{color:var(--muted);font-size:.68rem}.brandMark{color:var(--gold)}.iconBtn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:white;border-radius:12px;padding:9px 12px;cursor:pointer}.hero{padding:56px 0 44px;max-width:900px}.compactHero h1{font-size:clamp(3rem,7.2vw,6.8rem);line-height:.88;letter-spacing:-.055em;margin:14px 0 22px}.compactHero h1 em{font-style:normal;color:var(--gold)}.hero p{font-size:1.08rem;line-height:1.65;color:#cbd5e1;max-width:720px}.eyebrow{font-size:.69rem;letter-spacing:.16em;font-weight:850;color:#8ea1bd}.actions,.roomActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}button{border:0;border-radius:15px;padding:14px 19px;font-weight:800;cursor:pointer;background:#f8fafc;color:#0f172a;box-shadow:0 11px 30px rgba(0,0,0,.22)}button.secondary{background:rgba(255,255,255,.07);color:white;border:1px solid var(--line)}button:disabled{opacity:.42;cursor:not-allowed}.gameShell{border:1px solid var(--line);background:linear-gradient(145deg,rgba(17,27,49,.92),rgba(7,11,19,.92));border-radius:30px;padding:24px;box-shadow:0 32px 100px rgba(0,0,0,.34)}.gameTop{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.gameTop h2,.card h2{font-size:1.7rem;margin:5px 0}.segmented{display:flex;background:rgba(255,255,255,.055);border:1px solid var(--line);padding:4px;border-radius:15px}.segmented button{box-shadow:none;background:transparent;color:#9fafc6;padding:9px 13px;border-radius:11px}.segmented button.active{background:#f8fafc;color:#111827}.gameGrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.boardStage{position:relative;aspect-ratio:1;border-radius:26px;overflow:hidden;background:#080e1a;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 80px rgba(0,0,0,.28)}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.turnPill{position:absolute;left:18px;top:18px;border:1px solid var(--line);background:rgba(5,8,14,.74);backdrop-filter:blur(14px);border-radius:999px;padding:9px 13px;font-size:.78rem;font-weight:850}.fxMessage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);font-size:clamp(2.3rem,6vw,5.3rem);font-weight:950;letter-spacing:-.05em;text-shadow:0 12px 38px #000;opacity:0;pointer-events:none;transition:.22s}.fxMessage.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.hud{display:flex;flex-direction:column;gap:12px}.hudPanel,.dicePanel{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:20px;padding:16px}.turnPanel{min-height:118px}.currentPlayer{font-size:1.55rem;font-weight:950;margin-top:8px}.turnPanel p{color:var(--muted);font-size:.86rem;line-height:1.4;margin:7px 0 0}.dicePanel{display:grid;grid-template-columns:94px 1fr;align-items:center;gap:15px}.rollBtn{height:56px;background:linear-gradient(135deg,#f9dd80,#f4a928);font-size:1rem}.dice{width:82px;height:82px;border-radius:20px;background:linear-gradient(145deg,#fff,#dbe4ee);box-shadow:inset -8px -10px 20px #bac5d2,inset 6px 6px 16px #fff,0 13px 34px rgba(0,0,0,.32);position:relative;transform:rotate(0);transition:transform .25s}.dice.rolling{animation:diceRoll .6s cubic-bezier(.2,.9,.2,1)}@keyframes diceRoll{0%{transform:rotate(0) scale(1)}35%{transform:rotate(145deg) scale(.82)}70%{transform:rotate(290deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}.pip{position:absolute;width:12px;height:12px;background:#172033;border-radius:50%;display:none}.p1{left:17px;top:17px}.p2{left:35px;top:17px}.p3{right:17px;top:17px}.p4{left:17px;top:35px}.p5{left:35px;top:35px}.p6{right:17px;top:35px}.p7{left:17px;bottom:17px}.p8{left:35px;bottom:17px}.p9{right:17px;bottom:17px}.panelHeader{display:flex;align-items:center;justify-content:space-between}.onlineBadge{font-size:.62rem;color:#86efac;font-weight:900}.matchPlayers{display:flex;flex-direction:column;gap:7px;margin-top:12px}.matchPlayer{display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center;padding:8px 9px;border-radius:11px}.matchPlayer.active{background:rgba(255,255,255,.07)}.matchPlayer .dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c)}.matchPlayer strong{font-size:.84rem}.matchPlayer span:last-child{color:var(--muted);font-size:.7rem}.eventPanel{flex:1;min-height:125px}.events{display:flex;flex-direction:column-reverse;gap:7px;margin-top:11px;max-height:170px;overflow:hidden}.event{font-size:.74rem;color:#aebbd0;border-top:1px solid rgba(255,255,255,.055);padding-top:7px}.event b{color:white}.boardMeta{color:var(--muted);font-size:.78rem;margin:14px 4px 0}.card{margin-top:40px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(22px);border-radius:26px;padding:24px}.card header{display:flex;justify-content:space-between;align-items:center}.status{color:#86efac;font-size:.8rem;font-weight:900}.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:20px}.player{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.035)}.seatColor{width:12px;height:36px;border-radius:12px;background:var(--seat)}.player strong,.player span{display:block}.player span{color:var(--muted);font-size:.78rem}.start{width:100%;margin-top:15px;background:linear-gradient(90deg,#f7d26b,#f59e0b)}.hidden{display:none}@media(max-width:980px){.gameGrid{grid-template-columns:1fr}.hud{display:grid;grid-template-columns:1fr 1fr}.eventPanel{display:none}}@media(max-width:620px){.shell{width:96vw}.compactHero h1{font-size:3.45rem}.gameShell{padding:10px;border-radius:20px}.gameTop{padding:8px;align-items:flex-start;flex-direction:column}.hud{grid-template-columns:1fr}.dicePanel{position:sticky;bottom:8px;z-index:8;background:rgba(10,15,26,.94);backdrop-filter:blur(18px)}.topbar{padding:0 4px}}

.brand{display:flex;align-items:center;gap:10px}.brand>div{display:flex;flex-direction:column;line-height:1.1}.brand strong{font-size:1.02rem}.brand small{margin-top:4px}.topActions{display:flex;align-items:center;gap:8px}.netBadge{font-size:.7rem;font-weight:900;border:1px solid var(--line);padding:7px 10px;border-radius:999px}.netBadge.online{color:#86efac;background:rgba(34,197,94,.08)}.netBadge.offline{color:#fca5a5;background:rgba(239,68,68,.08)}button.ghost{background:transparent;color:#cbd5e1;border:1px dashed rgba(255,255,255,.14);box-shadow:none}.roomHeader{gap:18px}.roomHeaderActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.miniBtn{padding:9px 12px;border-radius:11px;font-size:.76rem;box-shadow:none}.roomTools{display:grid;gap:10px;margin-top:16px}.fieldRow{display:grid;grid-template-columns:1fr auto;gap:9px}.fieldRow input{min-width:0;border:1px solid var(--line);background:rgba(255,255,255,.04);color:white;border-radius:14px;padding:13px 14px;font:inherit;outline:none}.fieldRow input:focus{border-color:rgba(247,198,92,.65);box-shadow:0 0 0 4px rgba(247,198,92,.08)}.roomMessage{min-height:20px;color:var(--muted);font-size:.8rem;margin:12px 2px 0}.player{position:relative}.player .seatMeta{margin-inline-start:auto;text-align:left}.player .readyChip{font-size:.68rem;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(148,163,184,.1);color:#94a3b8}.player .readyChip.ready{background:rgba(34,197,94,.12);color:#86efac}.player .deviceState{font-size:.66rem;color:#64748b;margin-top:3px}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,18px);z-index:80;background:rgba(9,13,22,.94);border:1px solid var(--line);box-shadow:0 22px 70px rgba(0,0,0,.42);border-radius:14px;padding:11px 15px;color:white;font-size:.83rem;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:620px){.topbar{padding-inline:6px}.brand strong{font-size:.9rem}.brand small{font-size:.56rem}.netBadge{display:none}.fieldRow{grid-template-columns:1fr}.fieldRow button{width:100%}.roomActions{display:grid;grid-template-columns:1fr}.roomActions button{width:100%}}

/* Premium identity pass */
:root{--gold2:#f59e0b;--emerald:#34d399;--danger:#fb7185}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 18%,rgba(247,198,92,.08),transparent 28%),radial-gradient(circle at 12% 70%,rgba(52,211,153,.06),transparent 30%);z-index:-1}
.brandMark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#f9dd80,#f59e0b);color:#111827;font-size:1.35rem;box-shadow:0 8px 26px rgba(245,158,11,.25),inset 0 1px #fff8}
.heroBadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.heroBadges span{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:999px;padding:8px 11px;font-size:.72rem;color:#cbd5e1;font-weight:800}
.boardStage:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 -80px 110px rgba(0,0,0,.16)}
.rollBtn:not(:disabled){animation:goldPulse 2.2s ease-in-out infinite}@keyframes goldPulse{0%,100%{box-shadow:0 10px 28px rgba(245,158,11,.20)}50%{box-shadow:0 14px 38px rgba(245,158,11,.42)}}
.player,.hudPanel,.dicePanel{transition:transform .18s ease,border-color .18s ease,background .18s ease}.player:hover{transform:translateY(-2px);border-color:rgba(247,198,92,.25)}
.victoryOverlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(247,198,92,.18),rgba(4,7,13,.92) 50%);backdrop-filter:blur(15px);padding:22px}.victoryOverlay.hidden{display:none}.victoryCard{width:min(520px,94vw);text-align:center;border:1px solid rgba(247,198,92,.28);background:linear-gradient(145deg,rgba(27,36,58,.98),rgba(9,13,22,.98));border-radius:30px;padding:42px 28px;box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 70px rgba(247,198,92,.12)}.victoryKicker{font-weight:950;color:var(--gold);letter-spacing:.06em}.victoryCard h2{font-size:clamp(2.5rem,8vw,5rem);margin:8px 0 10px;letter-spacing:-.04em}.victoryCard p{color:#cbd5e1;font-size:1.05rem}.victoryCard button{margin-top:18px;background:linear-gradient(135deg,#f9dd80,#f59e0b)}
@media(max-width:620px){.heroBadges{gap:6px}.heroBadges span{font-size:.64rem;padding:7px 9px}.victoryCard{padding:34px 20px}.boardStage:after{border-radius:18px}}

/* Premium game-feel pass: Tunisian luxury table, dimensional pawns, reactions, FX */
.boardStage{background:linear-gradient(145deg,#07111b,#0c1c28);box-shadow:inset 0 0 100px rgba(0,0,0,.42),0 28px 90px rgba(0,0,0,.35);border-color:rgba(247,198,92,.16)}
.boardStage:before{content:"";position:absolute;inset:10px;border-radius:22px;pointer-events:none;z-index:1;border:1px solid rgba(247,198,92,.12);box-shadow:inset 0 0 0 5px rgba(255,255,255,.012)}
canvas{position:relative;z-index:0;filter:saturate(1.04) contrast(1.025)}
.dicePanel{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));overflow:visible}
.dice{transform-style:preserve-3d;perspective:600px;border:1px solid rgba(255,255,255,.8);background:linear-gradient(145deg,#fffef8,#d9e0e7 68%,#b7c1cb);box-shadow:inset -10px -12px 22px rgba(69,82,98,.28),inset 7px 8px 17px #fff,0 18px 34px rgba(0,0,0,.38),0 0 0 1px rgba(247,198,92,.08)}
.dice:before{content:"";position:absolute;inset:7px 11px auto 11px;height:22px;border-radius:14px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0));transform:skewX(-12deg);pointer-events:none}
.dice.rolling{animation:dicePremiumRoll .78s cubic-bezier(.18,.85,.25,1)}
@keyframes dicePremiumRoll{0%{transform:translateY(0) rotateX(0) rotateY(0) rotateZ(0) scale(1)}25%{transform:translateY(-24px) rotateX(115deg) rotateY(150deg) rotateZ(48deg) scale(.9)}55%{transform:translateY(4px) rotateX(260deg) rotateY(315deg) rotateZ(186deg) scale(1.08)}78%{transform:translateY(-8px) rotateX(335deg) rotateY(405deg) rotateZ(315deg) scale(.98)}100%{transform:translateY(0) rotateX(360deg) rotateY(540deg) rotateZ(360deg) scale(1)}}
.fxMessage{z-index:12;color:#fff;background:linear-gradient(135deg,rgba(5,10,18,.12),rgba(5,10,18,.55));padding:.08em .28em;border-radius:.35em;-webkit-text-stroke:1px rgba(0,0,0,.08)}
.fxMessage.show{animation:fxPunch .72s cubic-bezier(.2,.8,.2,1)}@keyframes fxPunch{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-5deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-58%) scale(1)}}
.captureFlash{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.66),rgba(251,113,133,.24) 18%,transparent 48%)}.captureFlash.hit{animation:captureFlash .48s ease-out}@keyframes captureFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.reactionStage{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:hidden}.reactionBubble{position:absolute;left:50%;bottom:18%;max-width:78%;transform:translateX(-50%);padding:11px 16px;border-radius:18px;background:rgba(7,12,21,.9);border:1px solid rgba(247,198,92,.28);box-shadow:0 15px 44px rgba(0,0,0,.5);font-weight:950;font-size:clamp(1rem,2.2vw,1.35rem);animation:reactionFloat 2.2s ease forwards}.reactionBubble small{display:block;color:var(--gold);font-size:.62rem;margin-bottom:3px;letter-spacing:.04em}@keyframes reactionFloat{0%{opacity:0;transform:translate(-50%,18px) scale(.85)}16%{opacity:1;transform:translate(-50%,0) scale(1.04)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-52px) scale(.96)}}
.reactionsPanel{padding-bottom:13px}.reactionHint{font-size:.62rem;color:#64748b}.reactionBar{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:11px}.reactionBar button{padding:9px 8px;border-radius:12px;box-shadow:none;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);color:#dbe6f3;font-size:.69rem}.reactionBar button:hover{border-color:rgba(247,198,92,.35);background:rgba(247,198,92,.08)}
.settingsSheet{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:rgba(3,6,11,.7);backdrop-filter:blur(10px);padding:20px}.settingsSheet.hidden{display:none}.settingsCard{width:min(430px,94vw);background:linear-gradient(145deg,#17223a,#080d17);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 32px 100px #000a}.settingsCard label{display:grid;gap:9px;margin-top:18px;color:#cbd5e1;font-size:.82rem}.settingsCard input[type=range]{width:100%;accent-color:#f7c65c}.settingsCard .toggleRow{grid-template-columns:1fr auto;align-items:center}
@media(max-width:980px){.reactionsPanel{grid-column:1/-1}.reactionBar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.reactionBar{grid-template-columns:repeat(3,1fr)}.reactionBar button{font-size:.62rem;padding:8px 5px}.reactionBubble{bottom:15%}}

/* 0.9.2 Premium board-first pass */
.gameShell{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(5,11,18,.96),rgba(8,17,25,.98));border-color:rgba(231,193,104,.18)}
.boardStage{border-radius:30px;background:#071219;border:1px solid rgba(231,193,104,.24);box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.025),inset 0 0 90px rgba(0,0,0,.26)}
.boardStage:before{inset:8px;border-radius:24px;border:1px solid rgba(231,193,104,.18);box-shadow:inset 0 0 0 4px rgba(255,255,255,.012)}
.fxMessage{max-width:min(86%,680px);text-align:center;background:rgba(4,8,12,.78);border:1px solid rgba(247,198,92,.28);padding:.22em .46em;border-radius:.34em;backdrop-filter:blur(14px);box-shadow:0 18px 60px rgba(0,0,0,.42);font-size:clamp(1.85rem,5.6vw,4.8rem);line-height:1.05;z-index:7}
.turnPill{z-index:6;border-color:rgba(247,198,92,.22);box-shadow:0 8px 28px rgba(0,0,0,.28)}
@media (max-width:620px){
  body{background:#03070b}
  .shell{width:100vw;padding:0 0 12px}
  .topbar{height:50px;padding:0 8px;border-bottom-color:rgba(255,255,255,.06)}
  .topbar .brand small{display:none}
  .hero{display:none}
  .gameShell{border-radius:0;border-left:0;border-right:0;padding:0;box-shadow:none;min-height:calc(100dvh - 50px)}
  .gameTop{display:none}
  .gameGrid{display:block}
  .boardStage{width:100vw;height:min(100vw,calc(100dvh - 120px));max-height:none;aspect-ratio:1;border-radius:0;border-left:0;border-right:0}
  .boardStage:before,.boardStage:after{border-radius:0}
  .hud{display:block}
  .hudPanel{display:none}
  .dicePanel{position:fixed;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:30;display:grid;grid-template-columns:70px 1fr;padding:8px;border-radius:18px;background:rgba(5,10,16,.88);border:1px solid rgba(247,198,92,.18);backdrop-filter:blur(18px);box-shadow:0 14px 50px rgba(0,0,0,.42)}
  .dice{width:62px;height:62px;border-radius:16px;transform-origin:center}
  .pip{width:9px;height:9px}
  .p1{left:13px;top:13px}.p2{left:27px;top:13px}.p3{right:13px;top:13px}.p4{left:13px;top:27px}.p5{left:27px;top:27px}.p6{right:13px;top:27px}.p7{left:13px;bottom:13px}.p8{left:27px;bottom:13px}.p9{right:13px;bottom:13px}
  .rollBtn{height:62px;border-radius:16px;font-size:1.08rem}
  .boardMeta{display:none}
  .turnPill{left:10px;top:10px;font-size:.72rem;padding:8px 11px}
  .fxMessage{top:45%;font-size:clamp(1.7rem,9vw,3.2rem)}
  .roomCard{margin:12px;border-radius:22px}
}


/* 0.9.3 Cinematic motion & micro-detail pass */
.fxMessage.show{
  opacity:1;
  animation:fxCinematicIn .58s cubic-bezier(.16,.86,.22,1) both;
}
@keyframes fxCinematicIn{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.68);filter:blur(5px)}
  58%{opacity:1;transform:translate(-50%,-50%) scale(1.07);filter:blur(0)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.fxMessage[data-tone="capture"]{border-color:rgba(251,113,133,.54);box-shadow:0 18px 70px rgba(251,113,133,.20),0 18px 60px rgba(0,0,0,.5)}
.fxMessage[data-tone="finish"]{border-color:rgba(52,211,153,.54);box-shadow:0 18px 70px rgba(52,211,153,.18),0 18px 60px rgba(0,0,0,.5)}
.fxMessage[data-tone="victory"]{border-color:rgba(247,198,92,.72);box-shadow:0 20px 90px rgba(247,198,92,.28),0 18px 60px rgba(0,0,0,.55)}
.fxMessage[data-tone="error"]{border-color:rgba(251,113,133,.45)}
.boardStage{isolation:isolate;transform:translateZ(0)}
.boardStage.cinematic-impact{animation:boardImpact .46s cubic-bezier(.2,.8,.2,1)}
.boardStage.cinematic-finish{animation:boardFinish .78s cubic-bezier(.18,.82,.2,1)}
@keyframes boardImpact{
  0%,100%{transform:scale(1)}
  34%{transform:scale(.994)}
  56%{transform:scale(1.006)}
}
@keyframes boardFinish{
  0%,100%{filter:saturate(1.04) brightness(1)}
  42%{filter:saturate(1.16) brightness(1.08)}
}
.cinematicParticle{
  position:absolute;z-index:18;width:8px;height:8px;border-radius:999px;pointer-events:none;
  transform:translate(-50%,-50%);animation:particleFlight 1s cubic-bezier(.15,.72,.2,1) forwards;
  box-shadow:0 0 14px currentColor;
}
.cinematicParticle.gold,.cinematicParticle.finish{background:#f7c65c;color:#f7c65c}
.cinematicParticle.capture{background:#fb7185;color:#fb7185}
.cinematicParticle.finish:nth-of-type(3n){background:#fff3bd;color:#fff3bd}
@keyframes particleFlight{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}
  14%{opacity:1}
  70%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.08) rotate(var(--rot))}
}
.boardStage:after{
  background:
    radial-gradient(circle at 50% 44%,rgba(247,198,92,.045),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 20%,transparent 78%,rgba(0,0,0,.18));
}
.settingsCard select{
  width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:#0d1725;color:#e5edf6;padding:11px 12px;font:inherit
}
@media (prefers-reduced-motion:reduce){
  .dice.rolling,.boardStage.cinematic-impact,.boardStage.cinematic-finish,.cinematicParticle,.fxMessage.show{animation-duration:.01ms!important}
}

/* 0.10.0 World-class foundation: immersive board + true CSS 3D dice */
.dicePanel{perspective:900px}
.dice3d{--s:82px;--h:41px;--dice-duration:860ms;position:relative;width:var(--s);height:var(--s);display:grid;place-items:center;perspective:760px;isolation:isolate}
.diceShadow{position:absolute;width:72%;height:20%;left:14%;bottom:-13%;border-radius:50%;background:rgba(0,0,0,.52);filter:blur(9px);transform:scale(.92);opacity:.8;transition:transform .28s ease,opacity .28s ease}
.diceCube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(18deg);transition:transform .36s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 18px 17px rgba(0,0,0,.36))}
.diceFace{position:absolute;inset:0;border-radius:20%;backface-visibility:hidden;background:linear-gradient(145deg,#fffdf7 0%,#f2f0e9 43%,#cfd5dd 100%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 8px 9px 15px rgba(255,255,255,.95),inset -9px -11px 18px rgba(78,91,105,.24);overflow:hidden}
.diceFace:before{content:"";position:absolute;inset:7% 12% auto;height:28%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));transform:skewX(-12deg)}
.face1{transform:rotateY(0deg) translateZ(var(--h))}.face6{transform:rotateY(180deg) translateZ(var(--h))}.face3{transform:rotateY(90deg) translateZ(var(--h))}.face4{transform:rotateY(-90deg) translateZ(var(--h))}.face2{transform:rotateX(90deg) translateZ(var(--h))}.face5{transform:rotateX(-90deg) translateZ(var(--h))}
.dp{position:absolute;width:15%;height:15%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#293343,#0a0f16 70%);box-shadow:inset 1px 2px 2px rgba(255,255,255,.1),0 1px 1px rgba(255,255,255,.26)}
.d1{left:17%;top:17%}.d2{left:42.5%;top:17%}.d3{right:17%;top:17%}.d4{left:17%;top:42.5%}.d5{left:42.5%;top:42.5%}.d6{right:17%;top:42.5%}.d7{left:17%;bottom:17%}.d8{left:42.5%;bottom:17%}.d9{right:17%;bottom:17%}
.dice3d[data-face="1"] .diceCube{transform:rotateX(-14deg) rotateY(18deg)}
.dice3d[data-face="2"] .diceCube{transform:rotateX(-104deg) rotateY(4deg)}
.dice3d[data-face="3"] .diceCube{transform:rotateX(-10deg) rotateY(-72deg)}
.dice3d[data-face="4"] .diceCube{transform:rotateX(-10deg) rotateY(108deg)}
.dice3d[data-face="5"] .diceCube{transform:rotateX(76deg) rotateY(4deg)}
.dice3d[data-face="6"] .diceCube{transform:rotateX(-12deg) rotateY(198deg)}
.dice3d.rolling .diceCube{animation:diceCubeWorldRoll var(--dice-duration) cubic-bezier(.12,.72,.18,1) both}
.dice3d.rolling .diceShadow{animation:diceShadowWorld var(--dice-duration) ease-out both}
@keyframes diceCubeWorldRoll{
  0%{transform:translateY(0) rotateX(8deg) rotateY(-12deg) rotateZ(0) scale(1)}
  18%{transform:translateY(-26px) rotateX(138deg) rotateY(176deg) rotateZ(52deg) scale(.9)}
  42%{transform:translateY(-7px) rotateX(315deg) rotateY(385deg) rotateZ(168deg) scale(1.03)}
  58%{transform:translateY(-15px) rotateX(430deg) rotateY(505deg) rotateZ(256deg) scale(.96)}
  76%{transform:translateY(2px) rotateX(596deg) rotateY(686deg) rotateZ(330deg) scale(1.04)}
  88%{transform:translateY(-5px) rotateX(655deg) rotateY(748deg) rotateZ(357deg) scale(.99)}
  100%{transform:translateY(0) rotateX(720deg) rotateY(720deg) rotateZ(360deg) scale(1)}
}
@keyframes diceShadowWorld{0%,100%{transform:scale(.92);opacity:.8}18%,58%{transform:scale(.55);opacity:.32}76%{transform:scale(1.08);opacity:.9}88%{transform:scale(.78);opacity:.56}}

@media(max-width:620px){
  body:has(.gameShell){overflow-x:hidden}
  .gameShell{min-height:100dvh;padding-bottom:calc(94px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 35%,#12343b 0,#071219 54%,#020508 100%)}
  .boardStage{width:108vw;height:108vw;margin-inline:-4vw;max-width:none;aspect-ratio:1;box-shadow:0 22px 55px rgba(0,0,0,.52),inset 0 0 90px rgba(0,0,0,.28)}
  .boardStage canvas{width:100%;height:100%}
  .turnPill{top:max(10px,env(safe-area-inset-top));left:12px;max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(3,8,13,.76)}
  .dicePanel{grid-template-columns:82px 1fr;left:8px;right:8px;padding:8px 9px;min-height:82px}
  .dice3d{--s:66px;--h:33px;margin:auto}
  .rollBtn{height:64px;font-size:1.1rem;letter-spacing:.01em}
}

@media(prefers-reduced-motion:reduce){.dice3d.rolling .diceCube,.dice3d.rolling .diceShadow{animation-duration:.01ms!important}.diceCube{transition:none}}


/* 0.10.1 Premium Table + Sculpted Horses */
@media(max-width:620px){
  .shell{width:100vw;padding:0 0 88px}
  .topbar{height:50px;padding-inline:9px}
  .brand small{font-size:.55rem}.brand strong{font-size:.84rem}
  .hero{display:none}
  .gameShell{border-radius:0;border-left:0;border-right:0;padding:0 0 calc(88px + env(safe-area-inset-bottom));min-height:100dvh}
  .gameTop{height:38px;margin:0;padding:4px 10px;flex-direction:row;align-items:center;background:rgba(3,8,12,.82);position:relative;z-index:6}
  .gameTop h2{font-size:.92rem;margin:0}.gameTop .eyebrow{display:none}
  .segmented{transform:scale(.82);transform-origin:left center}
  .gameGrid{display:block}
  .boardStage{width:100vw;height:100vw;margin:0;border-radius:0;border:0;box-shadow:0 18px 56px rgba(0,0,0,.62),inset 0 0 95px rgba(0,0,0,.32)}
  .boardStage:before,.boardStage:after{border-radius:0;inset:0}
  .hud{display:block;padding:8px 10px}
  .turnPanel,.hud>.hudPanel:not(.turnPanel),.reactionsPanel,.eventPanel{display:none!important}
  .dicePanel{position:fixed;z-index:40;bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px;width:auto;border:1px solid rgba(234,198,112,.28);background:rgba(5,11,17,.92);box-shadow:0 20px 50px rgba(0,0,0,.48);backdrop-filter:blur(18px)}
  .turnPill{font-size:.72rem;padding:7px 10px;top:8px;left:8px}
}


/* 0.10.2 Dice Reliability + Premium Cube */
.dice3d{--s:92px;--h:46px;perspective:900px;transform-style:preserve-3d;overflow:visible}
.diceCube{transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 20px 18px rgba(0,0,0,.42));transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.diceFace{border-radius:15%;background:linear-gradient(145deg,#fffef9 0%,#f7f2e8 42%,#d7dde4 100%);border:2px solid rgba(255,255,255,.92);box-shadow:inset 8px 9px 15px rgba(255,255,255,.98),inset -10px -12px 18px rgba(64,77,91,.27),0 0 0 1px rgba(12,19,28,.08)}
.diceFace:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18),inset 0 0 18px rgba(45,55,68,.12);pointer-events:none}
.dp{width:16%;height:16%;background:radial-gradient(circle at 34% 28%,#485568 0 12%,#17202c 38%,#05080d 78%);box-shadow:inset 1px 2px 2px rgba(255,255,255,.12),0 2px 2px rgba(255,255,255,.34),0 -1px 2px rgba(0,0,0,.38)}
.dice3d.rolling .diceCube{animation:none!important}
.dice3d.rolling .diceShadow{animation:none!important}
.dicePanel{overflow:visible}
@media(max-width:620px){.dice3d{--s:76px;--h:38px}.dicePanel{grid-template-columns:90px 1fr;min-height:90px}.rollBtn{height:68px}}

/* ========================================================================== 
   V0.11.0 — Premium Board Reconstruction
   Goal: reference-grade full-screen mobile game mode while preserving lobby.
   ========================================================================== */
:root{
  --v11-bg:#020812;--v11-navy:#061522;--v11-gold:#e9bd63;--v11-gold-hi:#ffe59a;
  --v11-ivory:#f3eee2;--v11-ink:#edf4fb;--v11-card:rgba(4,12,22,.86);
}
html,body{background:#02070e}
body{min-height:100dvh;background:
  radial-gradient(circle at 50% 18%,rgba(32,65,92,.25),transparent 31%),
  radial-gradient(circle at 50% 70%,rgba(7,42,54,.22),transparent 45%),
  linear-gradient(180deg,#020711,#02070d 58%,#010408)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.25;background-image:linear-gradient(45deg,rgba(255,255,255,.018) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.018) 75%),linear-gradient(-45deg,rgba(255,255,255,.014) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.014) 75%);background-size:24px 24px}
.gamePlayersStrip{display:none}
.boardHalo{position:absolute;inset:-8%;pointer-events:none;border-radius:28%;background:radial-gradient(circle at 50% 48%,rgba(243,197,95,.11),transparent 58%);filter:blur(24px)}

body.game-active{overflow:hidden;background:#02070d}
body.game-active .shell{width:100%;max-width:none;height:100dvh;margin:0;padding:0;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
body.game-active .hero,body.game-active #roomCard{display:none!important}
body.game-active .topbar{position:relative;top:auto;height:clamp(58px,7.4dvh,74px);padding:max(6px,env(safe-area-inset-top)) 14px 5px;border:0;background:linear-gradient(180deg,rgba(2,8,15,.98),rgba(2,8,15,.9));backdrop-filter:blur(24px);z-index:30}
body.game-active .brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
body.game-active .brandMark{display:none}
body.game-active .brand strong{font-size:clamp(1.18rem,4.7vw,2rem);font-weight:950;color:#f1ca76;text-shadow:0 2px 16px rgba(239,194,96,.14)}
body.game-active .brand small{font-size:clamp(.48rem,1.7vw,.72rem);letter-spacing:.22em;color:#aab5c5;white-space:nowrap}
body.game-active .topActions{margin-inline-start:auto;gap:7px}
body.game-active .topActions .iconBtn{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;background:#071321;border:1px solid rgba(145,174,202,.22);box-shadow:none}
body.game-active #netState{position:absolute;right:14px;top:calc(max(6px,env(safe-area-inset-top)) + 42px);display:none}
body.game-active .gameShell{height:100%;min-height:0;border:0;border-radius:0;margin:0;padding:0 0 max(5px,env(safe-area-inset-bottom));background:transparent;box-shadow:none;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
body.game-active .gameTop{display:none!important}
body.game-active .gamePlayersStrip{direction:rtl;display:flex;gap:7px;padding:4px 10px 7px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(180deg,rgba(2,8,15,.92),rgba(2,8,15,.56));z-index:9}
body.game-active .gamePlayersStrip::-webkit-scrollbar{display:none}
.gameStripPlayer{flex:1 0 min(155px,38vw);height:56px;display:grid;grid-template-columns:38px 1fr 8px;gap:8px;align-items:center;padding:6px 9px;border-radius:15px;border:1px solid color-mix(in srgb,var(--pc) 45%,#d7ae57 22%);background:linear-gradient(145deg,rgba(8,19,31,.94),rgba(3,9,16,.92));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 6px 18px rgba(0,0,0,.24)}
.gameStripPlayer.active{box-shadow:0 0 0 1px var(--pc),0 0 20px color-mix(in srgb,var(--pc) 44%,transparent),inset 0 0 22px color-mix(in srgb,var(--pc) 10%,transparent)}
.gameStripPlayer .stripHorse{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:1.28rem;color:var(--pc);border:1px solid var(--pc);background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.18),rgba(2,7,12,.9) 66%);text-shadow:0 0 12px var(--pc)}
.gameStripPlayer strong,.gameStripPlayer small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gameStripPlayer strong{font-size:.78rem}.gameStripPlayer small{margin-top:2px;color:#7f8da0;font-size:.59rem}.gameStripPlayer>i{width:7px;height:7px;border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc)}
body.game-active .gameGrid{direction:ltr;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;min-height:0;gap:0;padding:0 5px}
body.game-active .boardStage{direction:rtl;align-self:center;justify-self:center;width:min(100%,calc(100dvh - 196px));max-width:760px;aspect-ratio:1;border:0;border-radius:22px;overflow:visible;background:transparent;box-shadow:none;position:relative}
body.game-active .boardStage:after{inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,229,156,.08),0 12px 36px rgba(0,0,0,.45)}
body.game-active #board{position:relative;z-index:1;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
body.game-active .turnPill{left:12px;top:12px;z-index:4;font-size:.62rem;padding:6px 9px;background:rgba(2,7,13,.82);border-color:rgba(255,226,146,.22)}
body.game-active .fxMessage{z-index:5;font-size:clamp(1.8rem,7vw,4.8rem)}
body.game-active .hud{direction:rtl;display:grid;grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr);grid-template-areas:"roll dice turn";gap:7px;align-items:center;padding:6px 8px 4px;min-height:88px;background:linear-gradient(180deg,rgba(1,6,11,.15),rgba(1,6,11,.7));z-index:8}
body.game-active .turnPanel{grid-area:turn;display:block;min-height:72px;padding:10px 12px;border-radius:17px;background:linear-gradient(145deg,rgba(4,16,29,.9),rgba(2,9,17,.94));border:1px solid rgba(67,132,182,.24)}
body.game-active .turnPanel .eyebrow{font-size:.54rem;letter-spacing:.08em}body.game-active .currentPlayer{font-size:1.08rem;margin-top:4px}body.game-active .turnPanel p{font-size:.63rem;margin-top:3px;line-height:1.3}
body.game-active .dicePanel{display:contents}
body.game-active .dice3d{grid-area:dice;justify-self:center;transform:scale(.88)}
body.game-active .rollBtn{grid-area:roll;height:66px;border-radius:18px;background:linear-gradient(145deg,#6f4214 0,#ad7028 38%,#e4b95d 100%);color:#ffe8aa;border:1px solid rgba(255,225,153,.58);box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.32);font-size:1.04rem;text-shadow:0 1px 2px rgba(0,0,0,.6)}
body.game-active .hud>.hudPanel:not(.turnPanel),body.game-active .reactionsPanel,body.game-active #rematch{display:none!important}
body.game-active .boardMeta{display:none}

/* Premium dice shell: more volume and separation from the board. */
body.game-active .dice3d{width:82px;height:82px;perspective:620px;position:relative;display:grid;place-items:center}
body.game-active .diceShadow{position:absolute;width:58px;height:18px;border-radius:50%;bottom:2px;background:radial-gradient(ellipse,rgba(0,0,0,.68),rgba(0,0,0,0) 72%);filter:blur(2px)}
body.game-active .diceCube{width:58px;height:58px;transform-style:preserve-3d}
body.game-active .diceFace{position:absolute;width:58px;height:58px;border-radius:12px;background:linear-gradient(145deg,#fffdf7,#efece6 46%,#c8d0d9 100%);border:1px solid rgba(255,255,255,.8);box-shadow:inset 5px 5px 10px rgba(255,255,255,.9),inset -7px -8px 12px rgba(96,108,120,.24);backface-visibility:hidden}
body.game-active .diceFace:after{content:"";position:absolute;inset:4px;border-radius:9px;border:1px solid rgba(255,255,255,.34);pointer-events:none}.diceFace.face1{transform:rotateY(0deg) translateZ(29px)}.diceFace.face6{transform:rotateY(180deg) translateZ(29px)}.diceFace.face3{transform:rotateY(90deg) translateZ(29px)}.diceFace.face4{transform:rotateY(-90deg) translateZ(29px)}.diceFace.face2{transform:rotateX(90deg) translateZ(29px)}.diceFace.face5{transform:rotateX(-90deg) translateZ(29px)}
body.game-active .dp{width:8px;height:8px;box-shadow:inset 1px 1px 2px rgba(255,255,255,.1),inset -1px -1px 2px rgba(0,0,0,.6)}

@media(max-width:620px){
  body.game-active .shell{width:100vw}
  body.game-active .topbar{padding-inline:10px}
  body.game-active .gamePlayersStrip{padding-inline:7px}
  body.game-active .gameGrid{padding-inline:2px}
  body.game-active .boardStage{width:min(100vw - 4px,calc(100dvh - 195px));border-radius:16px}
  body.game-active .hud{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);padding-inline:7px}
  body.game-active .rollBtn{font-size:.91rem;padding:10px 6px}
}
@media(max-height:760px) and (orientation:portrait){
  body.game-active .topbar{height:52px}.gameStripPlayer{height:48px}.gameStripPlayer .stripHorse{width:30px;height:30px}.gameStripPlayer{grid-template-columns:32px 1fr 7px}
  body.game-active .boardStage{width:min(100vw - 4px,calc(100dvh - 172px))}
  body.game-active .hud{min-height:74px;padding-top:3px}.body.game-active .rollBtn{height:60px}
}
@media(orientation:landscape) and (max-height:620px){
  body.game-active .shell{grid-template-rows:48px 1fr}body.game-active .topbar{height:48px;padding-top:max(3px,env(safe-area-inset-top))}.gamePlayersStrip{position:absolute;right:4px;top:50px;width:32vw;flex-direction:column;max-height:calc(100dvh - 58px);background:transparent}.gameStripPlayer{flex:0 0 47px;width:100%}
  body.game-active .gameShell{display:block}.gameGrid{height:calc(100dvh - 48px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) 31vw!important;grid-template-rows:1fr!important}.boardStage{grid-column:1;width:min(calc(100dvh - 54px),68vw)!important}.hud{grid-column:2;grid-row:1;align-self:end;margin-bottom:env(safe-area-inset-bottom);grid-template-columns:1fr 82px!important;grid-template-areas:"dice dice" "roll roll" "turn turn"!important;background:transparent!important}.turnPanel{min-height:58px!important}.rollBtn{height:54px!important}
}

@media(prefers-reduced-motion:reduce){.rollBtn:not(:disabled){animation:none!important}.gameStripPlayer.active{box-shadow:0 0 0 1px var(--pc)!important}.cinematicParticle{display:none!important}}
/* V0.11.1 navigation + dice/horse hardening */
.navBack,.navGame,.navLeave{z-index:45}.navBack{font-size:1.3rem}.navGame,.navLeave{font-size:.68rem;padding:7px 9px}.navLeave{border-color:rgba(239,71,111,.35);color:#ff9bb0}
body[data-view="lobby"] .hero{display:none}body[data-view="lobby"] #roomCard{display:block!important}body[data-view="lobby"] .gameShell{display:none!important}
body[data-view="home"] #roomCard,body[data-view="home"] .gameShell{display:none!important}
body[data-view="game"] .gameShell{display:grid}
body.game-active .dice3d{perspective:760px;filter:drop-shadow(0 9px 9px rgba(0,0,0,.45))}
body.game-active .diceCube{transform-style:preserve-3d;will-change:transform}
body.game-active .diceFace{backface-visibility:hidden;-webkit-backface-visibility:hidden}
body.game-active .dice3d.rolling .diceCube{filter:drop-shadow(0 6px 5px rgba(0,0,0,.24))}
@media(max-width:620px){body.game-active .topActions{max-width:42vw}.navGame,.navLeave{padding:6px 7px;font-size:.61rem}}


/* V0.12.0 deep-fix: deterministic dice face + sector boards */
.dice3d{overflow:visible}
.diceFinalFace{position:absolute;z-index:8;width:58px;height:58px;border-radius:12px;left:50%;top:50%;transform:translate(-50%,-50%) translateZ(31px);background:linear-gradient(145deg,#fffef9 0%,#f4f0e8 48%,#ccd3db 100%);border:1px solid rgba(255,255,255,.92);box-shadow:inset 5px 5px 10px rgba(255,255,255,.95),inset -7px -8px 12px rgba(78,91,105,.23),0 10px 16px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .12s ease}
.dice3d.settled .diceFinalFace{opacity:1}
.dice3d.rolling .diceFinalFace{opacity:0!important}
.fp{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#303b4b,#080d13 72%);box-shadow:inset 1px 1px 2px rgba(255,255,255,.12);opacity:0}.fp.on{opacity:1}
.f1{left:10px;top:10px}.f2{left:24px;top:10px}.f3{right:10px;top:10px}.f4{left:10px;top:24px}.f5{left:24px;top:24px}.f6{right:10px;top:24px}.f7{left:10px;bottom:10px}.f8{left:24px;bottom:10px}.f9{right:10px;bottom:10px}
body.game-active .boardStage{overflow:visible}
body.game-active .rollBtn:disabled{opacity:.52;filter:saturate(.72);cursor:not-allowed}
body.game-active .rollBtn:not(:disabled){opacity:1;filter:none;box-shadow:0 0 0 1px rgba(255,229,157,.22),0 10px 28px rgba(211,151,43,.22)}

/* V0.12.2 surgical core fix: deterministic result pips over a still-visible 3D cube. */
.dice3d.settled .diceFace .dp{opacity:0!important}
.diceFinalFace{background:transparent!important;border:0!important;box-shadow:none!important;transform:translate(-50%,-50%)!important}
.fp{width:10px;height:10px}
.f1{left:17%;top:17%}.f2{left:42.5%;top:17%}.f3{right:17%;top:17%}
.f4{left:17%;top:42.5%}.f5{left:42.5%;top:42.5%}.f6{right:17%;top:42.5%}
.f7{left:17%;bottom:17%}.f8{left:42.5%;bottom:17%}.f9{right:17%;bottom:17%}
body.game-active .dice3d{width:88px;height:88px;perspective:860px;filter:drop-shadow(0 13px 12px rgba(0,0,0,.46))}
body.game-active .diceCube{width:64px;height:64px;transform-style:preserve-3d}
body.game-active .diceFace{width:64px;height:64px;border-radius:13px}
body.game-active .diceFace.face1{transform:rotateY(0deg) translateZ(32px)}
body.game-active .diceFace.face6{transform:rotateY(180deg) translateZ(32px)}
body.game-active .diceFace.face3{transform:rotateY(90deg) translateZ(32px)}
body.game-active .diceFace.face4{transform:rotateY(-90deg) translateZ(32px)}
body.game-active .diceFace.face2{transform:rotateX(90deg) translateZ(32px)}
body.game-active .diceFace.face5{transform:rotateX(-90deg) translateZ(32px)}
body.game-active .diceFinalFace{width:64px;height:64px}
body.game-active .diceShadow{width:66px;height:19px}


/* V0.12.3 Dice V3 — true visible cube, no flat result overlay. */
.diceFinalFace{display:none!important}
.dice3d.settled .diceFace .dp,.dice3d .diceFace .dp{opacity:1!important}
body.game-active .dice3d{width:96px;height:96px;perspective:540px;filter:drop-shadow(0 15px 14px rgba(0,0,0,.5))}
body.game-active .diceCube{width:68px;height:68px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
body.game-active .diceFace{width:68px;height:68px;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(145deg,#fffef9 0%,#f4efe5 44%,#c6ced8 100%);border:1px solid rgba(255,255,255,.95);box-shadow:inset 7px 7px 12px rgba(255,255,255,.98),inset -9px -10px 15px rgba(68,82,98,.3),0 0 0 1px rgba(30,38,48,.08)}
body.game-active .diceFace.face1{transform:rotateY(0deg) translateZ(34px)}
body.game-active .diceFace.face6{transform:rotateY(180deg) translateZ(34px)}
body.game-active .diceFace.face3{transform:rotateY(90deg) translateZ(34px)}
body.game-active .diceFace.face4{transform:rotateY(-90deg) translateZ(34px)}
body.game-active .diceFace.face2{transform:rotateX(90deg) translateZ(34px)}
body.game-active .diceFace.face5{transform:rotateX(-90deg) translateZ(34px)}
body.game-active .diceFace .dp{width:14%;height:14%;background:radial-gradient(circle at 34% 28%,#344052 0,#111821 62%,#05080d 100%);box-shadow:inset 1px 1px 2px rgba(255,255,255,.14),0 1px 1px rgba(255,255,255,.22)}
body.game-active .diceShadow{width:70px;height:20px;bottom:0;background:radial-gradient(ellipse,rgba(0,0,0,.72),rgba(0,0,0,0) 72%);filter:blur(3px)}
body.game-active .dice3d.rolling .diceCube{animation:none!important}
body.game-active .dice3d.rolling .diceShadow{animation:none!important}

/* V0.12.4 — software-projected 3D dice: Safari-safe, no CSS face flattening. */
.diceCanvas3d{display:grid!important;place-items:center!important;overflow:visible!important;perspective:none!important;transform:none!important;filter:none!important}
.diceCanvas{display:block;width:96px;height:96px;max-width:none;max-height:none;filter:drop-shadow(0 10px 9px rgba(0,0,0,.36));pointer-events:none}
body.game-active .diceCanvas3d{width:100px;height:100px;transform:none!important;perspective:none!important}
body.game-active .diceCanvas{width:100px;height:100px}
body.game-active .diceCube,body.game-active .diceFace,body.game-active .diceFinalFace,body.game-active .diceShadow{display:none!important}
@media(max-width:620px){body.game-active .diceCanvas3d{width:88px;height:88px}body.game-active .diceCanvas{width:88px;height:88px}}

/* V0.12.5 — mobile performance pass. Routine PASS/AUTO/READY feedback now uses
   the lightweight toast instead of the large blurred cinematic overlay. */
body.game-active .fxMessage{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(4,8,12,.88);box-shadow:0 10px 32px rgba(0,0,0,.32);}
body.game-active .toast{box-shadow:0 10px 28px rgba(0,0,0,.30)}
@media(max-width:620px){
  body.game-active .fxMessage{font-size:clamp(1.35rem,6.5vw,2.5rem);}
  body.game-active .gameStripPlayer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}


/* ==========================================================================
   V0.12.7 — Premium Natural Wood Theme
   Material-first art direction: walnut/mahogany, antique gold, warm ivory,
   restrained jewel colors. This block intentionally wins over older themes.
   ========================================================================== */
:root{
  --wood-dark:#3c281e;
  --wood-frame:#4a3124;
  --wood-main:#6a4632;
  --wood-mid:#78503a;
  --wood-light:#8a654a;
  --gold-main:#d4a94b;
  --gold-light:#e4c46e;
  --gold-deep:#b8832f;
  --gold-shadow:#8c6223;
  --ivory-main:#f2e8d7;
  --ivory-mid:#e7dac4;
  --ivory-shadow:#cdbea8;
  --ui-charcoal:#1f1a17;
  --ui-panel:#2a2320;
  --ui-panel-soft:#302823;
  --ink:#f5ead7;
  --muted:#b7aa99;
  --line:rgba(226,193,125,.16);
  --gold:var(--gold-main);
}
html,body{background:#17110e}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 13%,rgba(163,109,70,.16),transparent 31%),
    radial-gradient(circle at 50% 72%,rgba(91,58,40,.18),transparent 46%),
    linear-gradient(180deg,#1a130f 0%,#120d0b 62%,#0d0908 100%);
}
body:after{
  opacity:.20;
  background-image:
    repeating-linear-gradient(7deg,rgba(233,205,155,.025) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(-5deg,rgba(64,37,24,.055) 0 1px,transparent 1px 22px);
  background-size:auto;
}
body.game-active{background:#120d0b}
body.game-active .topbar{
  background:linear-gradient(180deg,rgba(31,23,18,.98),rgba(22,16,13,.90));
  border-bottom:1px solid rgba(212,169,75,.12);
}
body.game-active .brand strong{color:#e3bf70;text-shadow:0 2px 16px rgba(166,111,42,.12)}
body.game-active .brand small{color:#b9aa95}
body.game-active .topActions .iconBtn{
  background:linear-gradient(145deg,rgba(65,48,37,.92),rgba(34,25,20,.94));
  border-color:rgba(222,184,103,.22);
  color:#f1e5cf;
}
body.game-active .gamePlayersStrip{
  background:linear-gradient(180deg,rgba(37,27,22,.94),rgba(24,18,15,.60));
}
.gameStripPlayer{
  border-color:color-mix(in srgb,var(--pc) 38%,#d4a94b 26%);
  background:linear-gradient(145deg,rgba(70,50,38,.93),rgba(39,29,23,.94));
  box-shadow:inset 0 0 0 1px rgba(255,241,208,.025),0 6px 18px rgba(24,13,8,.26);
}
.gameStripPlayer.active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 70%,#e4c46e 30%),
             0 0 16px color-mix(in srgb,var(--pc) 28%,transparent),
             inset 0 0 20px color-mix(in srgb,var(--pc) 8%,transparent);
}
.gameStripPlayer .stripHorse{
  background:radial-gradient(circle at 36% 26%,rgba(255,240,205,.14),rgba(45,32,25,.94) 68%);
  border-color:color-mix(in srgb,var(--pc) 72%,#d4a94b 28%);
  text-shadow:none;
}
.gameStripPlayer small{color:#a99986}
.boardHalo{
  background:radial-gradient(circle at 50% 48%,rgba(212,169,75,.12),rgba(116,76,47,.05) 40%,transparent 62%);
  filter:blur(20px);
}
body.game-active .turnPill{
  color:#f4e8d0;
  background:rgba(43,31,24,.88);
  border-color:rgba(224,189,111,.26);
  box-shadow:0 8px 22px rgba(32,18,10,.22);
}
body.game-active .hud{
  background:linear-gradient(180deg,rgba(35,25,20,.08),rgba(24,17,14,.78));
}
body.game-active .turnPanel{
  background:linear-gradient(145deg,rgba(58,42,32,.94),rgba(34,25,20,.96));
  border-color:rgba(210,169,84,.22);
  box-shadow:inset 0 1px rgba(255,239,205,.035);
}
body.game-active .turnPanel .eyebrow{color:#b9a98f}
body.game-active .turnPanel p{color:#b6aa99}
body.game-active .rollBtn{
  background:linear-gradient(145deg,#7a4f22 0%,#b98637 36%,#d4a94b 68%,#e4c46e 100%);
  color:#2c1b10;
  border-color:rgba(255,234,178,.54);
  box-shadow:inset 0 1px rgba(255,250,226,.28),inset 0 -2px rgba(96,58,21,.28),0 9px 22px rgba(49,28,13,.30);
  text-shadow:0 1px rgba(255,239,197,.22);
}
body.game-active .rollBtn:not(:disabled){
  box-shadow:0 0 0 1px rgba(228,196,110,.20),0 9px 24px rgba(111,71,25,.24),inset 0 1px rgba(255,249,220,.26);
}
body.game-active .rollBtn:disabled{
  opacity:.56;filter:saturate(.58) brightness(.86);
}
body.game-active .diceCanvas{
  filter:drop-shadow(0 10px 8px rgba(48,27,16,.34));
}
.card,.hudPanel,.dicePanel{
  border-color:rgba(219,181,98,.16);
  background:rgba(48,36,29,.72);
}
.settingsCard select,.fieldRow input{
  background:#30241d;color:#f2e6d1;border-color:rgba(220,183,103,.18)
}

/* Protected feedback zone: no status/toast may cover the die or roll control. */
body.game-active .toast{
  left:50%;
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + 162px);
  z-index:90;
  width:max-content;
  max-width:min(86vw,520px);
  text-align:center;
  color:#f5ead7;
  background:rgba(48,35,27,.95);
  border-color:rgba(222,185,105,.30);
  box-shadow:0 10px 28px rgba(35,19,10,.28);
}
body.game-active .fxMessage{
  top:12%;
  max-width:72%;
  font-size:clamp(1rem,3.8vw,1.65rem);
  line-height:1.25;
  letter-spacing:0;
  color:#f6ead4;
  background:rgba(52,38,29,.92);
  border:1px solid rgba(221,180,92,.26);
  border-radius:999px;
  padding:.42em .78em;
  text-shadow:none;
  box-shadow:0 9px 26px rgba(35,19,10,.22);
}
@keyframes fxCinematicIn{
  0%{opacity:0;transform:translate(-50%,-20%) scale(.92)}
  60%{opacity:1;transform:translate(-50%,0) scale(1.02)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}
body.game-active .fxMessage.show{animation:fxCinematicIn .24s cubic-bezier(.2,.8,.2,1) both}
body.game-active .fxMessage[data-tone="capture"]{border-color:rgba(199,59,78,.42);box-shadow:0 9px 26px rgba(111,32,44,.14)}
body.game-active .fxMessage[data-tone="finish"]{border-color:rgba(30,158,119,.40);box-shadow:0 9px 26px rgba(22,92,73,.12)}

/* Non-game surfaces inherit the same warm material identity. */
.topbar{background:rgba(31,23,18,.82);border-color:rgba(217,176,89,.14)}
.gameShell{background:linear-gradient(145deg,rgba(61,44,34,.92),rgba(29,21,17,.94));border-color:rgba(220,180,96,.17)}
.player{background:rgba(87,62,46,.26);border-color:rgba(226,191,113,.12)}
button.secondary{background:rgba(103,74,53,.25);border-color:rgba(222,184,103,.18);color:#f1e5d2}

@media(max-width:620px){
  body.game-active .toast{
    bottom:calc(max(8px,env(safe-area-inset-bottom)) + 152px);
    max-width:82vw;
    font-size:.76rem;
    padding:9px 12px;
  }
  body.game-active .fxMessage{top:10%;font-size:.88rem;max-width:78%;padding:.4em .7em}
}
@media(orientation:landscape) and (max-height:620px){
  body.game-active .toast{bottom:max(10px,env(safe-area-inset-bottom));left:34%;max-width:42vw}
  body.game-active .fxMessage{top:8%}
}

.gameStripPlayer .stripHorse img{width:30px;height:36px;object-fit:contain;display:block;filter:drop-shadow(0 2px 3px rgba(31,17,10,.32))}

/* ========================================================================== 
   V0.12.8 — Official mascot Core 5 foundation
   The mascot is branding/UX only. It is never used as a board gameplay piece.
   ========================================================================== */
:root{
  --mascot-fur:#a68a7a;
  --mascot-cream:#ead8cc;
  --mascot-red:#a43733;
  --mascot-leather:#7b5434;
  --mascot-brass:#b58a42;
}
.brandMark{overflow:hidden;padding:0;background:linear-gradient(145deg,#5b3b2a,#2c1d17);border:1px solid rgba(228,196,110,.35)}
.brandMark picture,.brandMark img{display:block;width:100%;height:100%}.brandMark img{object-fit:cover;object-position:53% 18%;transform:scale(1.27)}

body[data-view="home"] .mascotHero{display:grid!important;grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);align-items:center;gap:clamp(18px,4vw,56px);max-width:1180px;padding-top:clamp(30px,5vw,64px)}
.mascotHero .heroCopy{min-width:0;position:relative;z-index:2}
.heroMascot{position:relative;min-height:440px;display:grid;place-items:end center;isolation:isolate;pointer-events:none}
.heroMascot picture{position:relative;z-index:2;display:block;width:min(100%,470px)}
.heroMascot img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 34px rgba(31,17,10,.42));transform-origin:52% 86%;animation:mascotIdle 5.8s ease-in-out infinite}
.heroMascotGlow{position:absolute;z-index:0;inset:16% 5% 2%;border-radius:50%;background:radial-gradient(circle at 50% 56%,rgba(228,196,110,.23),rgba(122,75,46,.10) 42%,transparent 72%);filter:blur(18px)}
@keyframes mascotIdle{0%,100%{transform:translateY(0) rotate(.15deg)}50%{transform:translateY(-7px) rotate(-.35deg)}}

.mascotRoomHeader{position:relative;min-height:104px;overflow:hidden;padding-inline-end:clamp(88px,14vw,170px)}
.roomIdentity{position:relative;z-index:2}
.roomMascot{position:absolute;z-index:1;inset-inline-end:96px;bottom:-26px;width:clamp(105px,13vw,155px);pointer-events:none;opacity:.96;filter:drop-shadow(0 12px 16px rgba(31,17,10,.30))}
.roomMascot picture,.roomMascot img{display:block;width:100%}.roomMascot img{height:auto}
.roomHeaderActions{position:relative;z-index:3}

.reconnectOverlay{position:fixed;z-index:110;inset:0;display:grid;place-items:center;padding:22px;background:rgba(18,13,11,.50);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.reconnectOverlay.hidden{display:none!important}
.reconnectCard{width:min(92vw,430px);display:grid;grid-template-columns:128px 1fr;align-items:center;gap:10px;padding:14px 18px 14px 10px;border-radius:26px;border:1px solid rgba(228,196,110,.30);background:linear-gradient(145deg,rgba(73,49,36,.97),rgba(31,26,23,.97));box-shadow:0 26px 80px rgba(0,0,0,.50),inset 0 1px rgba(255,255,255,.05)}
.reconnectMascot{display:block;width:128px;height:118px;overflow:hidden;align-self:end}
.reconnectMascot img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 8px rgba(0,0,0,.28));animation:mascotReconnect 1.8s ease-in-out infinite}
.reconnectCard strong{display:block;font-size:1.12rem;color:#f2e8d7;margin-bottom:5px}.reconnectCard span{display:block;color:#d0c0ab;font-size:.82rem;line-height:1.55}
@keyframes mascotReconnect{0%,100%{transform:translateY(1px) rotate(-.8deg)}50%{transform:translateY(-4px) rotate(1deg)}}

.mascotVictoryCard{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr);align-items:center;gap:8px;max-width:760px!important;padding:14px 28px 14px 10px!important}
.victoryMascotWrap{position:relative;min-height:330px;display:grid;place-items:end center;isolation:isolate;pointer-events:none}
.victoryMascotWrap picture{position:relative;z-index:2;width:min(100%,260px);display:block}
.victoryMascotWrap img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.36));animation:mascotWin .82s cubic-bezier(.2,.9,.25,1) both}
.victoryMascotGlow{position:absolute;z-index:0;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(228,196,110,.28),rgba(212,169,75,.09) 48%,transparent 70%);filter:blur(12px)}
.victoryCopy{position:relative;z-index:3;padding:16px}.victoryCopy h2{font-size:clamp(2rem,5vw,3.3rem);margin:.2em 0}.victoryCopy p{color:#d8cbb9;line-height:1.6}.victoryCopy button{margin-top:12px}
@keyframes mascotWin{0%{opacity:0;transform:translateY(40px) scale(.88) rotate(-3deg)}65%{opacity:1;transform:translateY(-8px) scale(1.03) rotate(1.5deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}

@media(max-width:760px){
  body[data-view="home"] .mascotHero{grid-template-columns:1fr;padding:24px 14px 20px;text-align:center;gap:4px}
  body[data-view="home"] .mascotHero .heroCopy{order:2}
  body[data-view="home"] .heroMascot{order:1;min-height:238px;height:30dvh;max-height:310px;place-items:end center;overflow:visible}
  body[data-view="home"] .heroMascot picture{width:min(74vw,330px)}
  body[data-view="home"] .compactHero h1{font-size:clamp(2.7rem,13vw,4.4rem);margin:9px 0 16px}
  body[data-view="home"] .hero p{font-size:.93rem;max-width:560px;margin-inline:auto}
  body[data-view="home"] .heroBadges{justify-content:center}
  body[data-view="home"] .actions{justify-content:center}
  .mascotRoomHeader{padding-inline-end:94px;min-height:96px}.roomMascot{inset-inline-end:4px;width:104px;bottom:-19px}.roomHeaderActions{max-width:48%}
  .mascotVictoryCard{grid-template-columns:1fr;text-align:center;padding:8px 18px 20px!important;gap:0}.victoryMascotWrap{min-height:210px;height:31dvh;max-height:275px}.victoryMascotWrap picture{width:min(66vw,235px)}.victoryCopy{padding:2px 10px 12px}
  .reconnectCard{grid-template-columns:105px 1fr}.reconnectMascot{width:105px;height:100px}
}

@media(prefers-reduced-motion:reduce){.heroMascot img,.reconnectMascot img,.victoryMascotWrap img{animation:none!important}}

/* ================================================================
   V0.12.9 — End-of-Game Comedic Reveal
   Winner -> Barda3a (3+ players) -> Behim. Premium Natural Wood,
   skippable, reduced-motion aware, no gameplay interaction beneath it.
   ================================================================ */
.resultRevealOverlay{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 35%,rgba(212,169,75,.16),rgba(18,12,9,.78) 45%,rgba(8,6,5,.92) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.resultRevealOverlay.hidden{display:none!important}
.resultRevealCard{position:relative;isolation:isolate;overflow:hidden;width:min(760px,94vw);min-height:430px;display:grid;grid-template-columns:minmax(220px,.88fr) minmax(270px,1.12fr);align-items:center;gap:clamp(4px,1.5vw,18px);padding:20px 30px 20px 14px;border-radius:34px;border:1px solid rgba(228,196,110,.46);background:
  linear-gradient(145deg,rgba(121,78,51,.96),rgba(72,45,31,.98) 48%,rgba(38,28,23,.99)),
  radial-gradient(circle at 24% 16%,rgba(255,232,182,.11),transparent 42%);
box-shadow:0 42px 120px rgba(0,0,0,.66),inset 0 1px rgba(255,247,221,.12),inset 0 -16px 38px rgba(32,18,10,.24)}
.resultRevealCard:before{content:"";position:absolute;inset:9px;border-radius:27px;border:1px solid rgba(212,169,75,.28);pointer-events:none}
.resultRevealCard:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;background-image:repeating-linear-gradient(7deg,rgba(255,255,255,.08) 0 1px,transparent 1px 9px);mix-blend-mode:soft-light;pointer-events:none}
.resultMascotZone{position:relative;align-self:stretch;min-height:390px;display:grid;place-items:end center;pointer-events:none}
.resultMascotZone img{position:relative;z-index:2;display:block;width:min(100%,330px);max-height:390px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 26px rgba(28,15,8,.48));transform-origin:52% 88%}
.resultMascotGlow{position:absolute;z-index:0;bottom:22px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(228,196,110,.32),rgba(212,169,75,.10) 50%,transparent 72%);filter:blur(14px)}
.resultRevealCopy{position:relative;z-index:3;text-align:right;padding:18px 6px 18px 18px}
.resultRevealKicker{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(228,196,110,.28);background:rgba(31,26,23,.42);color:#ead7b7;font-size:.78rem;font-weight:900;letter-spacing:.02em}
.resultRevealTitle{margin:15px 0 4px;color:#f5ead6;font-size:clamp(1.45rem,4vw,2.4rem);line-height:1.25;letter-spacing:-.025em}
.resultRevealName{color:#f0c96b;font-size:clamp(2.5rem,8vw,5rem);font-weight:1000;line-height:1.02;text-shadow:0 4px 18px rgba(0,0,0,.38);overflow-wrap:anywhere}
.resultRevealCopy p{margin:13px 0 9px;color:#e6d8c3;font-size:clamp(.95rem,2vw,1.14rem);line-height:1.72}
.resultRevealRank{display:inline-block;color:#cdbb9f;font-size:.8rem;font-weight:800;border-bottom:1px solid rgba(228,196,110,.22);padding-bottom:4px}
.resultRevealCopy button{display:block;margin:19px 0 5px 0;min-width:150px;border:0;border-radius:17px;padding:12px 20px;background:linear-gradient(135deg,#e5c36d,#bc8430);color:#2b1c12;font-weight:1000;box-shadow:0 10px 28px rgba(87,47,15,.34),inset 0 1px rgba(255,249,219,.55)}
.resultRevealHint{display:block;color:#ad9a80;font-size:.68rem}
.resultRevealOverlay.stage-enter .resultRevealCard{animation:resultCardIn .34s cubic-bezier(.18,.88,.24,1) both}
.resultRevealOverlay[data-mode="winner"] .resultRevealName{color:#f0c96b}
.resultRevealOverlay[data-mode="barda3a"] .resultRevealName{color:#f1b96a}
.resultRevealOverlay[data-mode="barda3a"] .resultRevealKicker{border-color:rgba(222,161,80,.36)}
.resultRevealOverlay[data-mode="behim"] .resultRevealName{color:#ffd179;text-shadow:0 4px 24px rgba(205,134,50,.36)}
.resultRevealOverlay[data-mode="behim"] .resultRevealCard{border-color:rgba(240,193,91,.72);box-shadow:0 44px 130px rgba(0,0,0,.68),0 0 60px rgba(202,132,44,.13),inset 0 1px rgba(255,247,221,.14)}
.resultRevealOverlay[data-mode="winner"] .resultMascotZone img{animation:resultMascotWinner 1.1s cubic-bezier(.17,.86,.25,1) both}
.resultRevealOverlay[data-mode="barda3a"] .resultMascotZone img{animation:resultMascotBarda 1.65s ease-in-out both}
.resultRevealOverlay[data-mode="behim"] .resultMascotZone img{animation:resultMascotBehim 1.35s cubic-bezier(.19,.88,.32,1) both}
.brayWave{position:absolute;z-index:4;top:74px;inset-inline-start:28px;display:none;align-items:center;gap:5px;height:44px;transform:rotate(-8deg)}
.brayWave i{display:block;width:4px;height:14px;border-radius:999px;background:#e6bd63;box-shadow:0 0 11px rgba(230,189,99,.46);animation:brayWave .62s ease-in-out infinite alternate}
.brayWave i:nth-child(2){animation-delay:.08s;height:28px}.brayWave i:nth-child(3){animation-delay:.16s;height:38px}.brayWave i:nth-child(4){animation-delay:.24s;height:22px}
.resultRevealOverlay[data-mode="behim"] .brayWave{display:flex}
@keyframes resultCardIn{0%{opacity:0;transform:translateY(20px) scale(.965)}100%{opacity:1;transform:none}}
@keyframes resultMascotWinner{0%{opacity:0;transform:translateY(38px) scale(.88) rotate(-2deg)}65%{opacity:1;transform:translateY(-8px) scale(1.025) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes resultMascotBarda{0%{opacity:0;transform:translateY(24px) rotate(-4deg) scale(.94)}35%{opacity:1;transform:translateY(-2px) rotate(2.2deg) scale(1.01)}62%{transform:rotate(-1.5deg)}100%{opacity:1;transform:none}}
@keyframes resultMascotBehim{0%{opacity:0;transform:translateY(40px) scale(.86) rotate(-3deg)}42%{opacity:1;transform:translateY(-14px) scale(1.045) rotate(2.4deg)}61%{transform:translateY(-3px) scale(1.015) rotate(-2deg)}78%{transform:translateY(-7px) rotate(1.3deg)}100%{opacity:1;transform:none}}
@keyframes brayWave{from{transform:scaleY(.55);opacity:.45}to{transform:scaleY(1.2);opacity:1}}

@media(max-width:640px){
  .resultRevealOverlay{padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)}
  .resultRevealCard{width:min(94vw,440px);min-height:0;grid-template-columns:1fr;padding:8px 16px 18px;border-radius:28px;gap:0;text-align:center}
  .resultMascotZone{min-height:210px;height:min(34dvh,285px)}
  .resultMascotZone img{width:min(70vw,270px);max-height:280px}
  .resultMascotGlow{width:230px;height:230px;bottom:6px}
  .resultRevealCopy{text-align:center;padding:0 8px 8px}
  .resultRevealKicker{font-size:.71rem}
  .resultRevealTitle{margin-top:8px;font-size:clamp(1.2rem,5.5vw,1.65rem)}
  .resultRevealName{font-size:clamp(2.55rem,13vw,4rem)}
  .resultRevealCopy p{margin:8px auto 5px;max-width:330px;font-size:.9rem}
  .resultRevealCopy button{margin:13px auto 4px;min-width:160px}
  .brayWave{top:38px;inset-inline-start:22px}
}
@media(prefers-reduced-motion:reduce){
  .resultRevealOverlay.stage-enter .resultRevealCard,.resultRevealOverlay .resultMascotZone img,.brayWave i{animation:none!important}
}


/* V0.13.0 — Lobby rename + results replay */
.playerIdentity{min-width:0;flex:1}.playerIdentity strong{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.playerIdentity strong small{font-size:.65rem;color:#ad9a80;font-weight:750}.hostChip{display:inline-flex!important;align-items:center;padding:3px 7px;border-radius:999px!important;border:1px solid rgba(228,196,110,.26);background:rgba(212,169,75,.10);color:#e4c46e!important;font-size:.61rem!important;font-weight:950!important;line-height:1!important}.seatMeta{display:flex;align-items:flex-end;gap:7px;flex-direction:column}.seatEditBtn{padding:6px 9px;border-radius:10px;box-shadow:none;background:rgba(212,169,75,.10);border:1px solid rgba(228,196,110,.22);color:#ead7b7;font-size:.82rem}.seatRename{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin-top:8px;max-width:360px}.seatRename input{min-width:0;border:1px solid rgba(228,196,110,.24);background:rgba(31,26,23,.72);color:#f4e8d5;border-radius:10px;padding:8px 10px;font:inherit}.seatRename button{padding:7px 10px;border-radius:9px;box-shadow:none;font-size:.72rem}.replayResultsBtn{width:100%;margin-top:4px;background:linear-gradient(135deg,rgba(212,169,75,.18),rgba(184,131,47,.10))!important;border:1px solid rgba(228,196,110,.28)!important;color:#f0d79a!important;box-shadow:none!important;line-height:1.35}.replayResultsBtn:not(.hidden){display:block}
@media(max-width:620px){.seatRename{grid-template-columns:1fr auto}.seatRename button.secondary{grid-column:2}.replayResultsBtn{font-size:.78rem;padding:11px 12px}}

/* V0.13.1 — Board Harmony / Turn Focus / Vs Computer */
.computerBtn{background:linear-gradient(135deg,#35271e,#5a3d2c);color:#f2e8d7;border:1px solid rgba(228,196,110,.46);box-shadow:0 10px 28px rgba(33,18,10,.28)}
.computerBtn:hover{border-color:rgba(228,196,110,.78)}
.computerSheet{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:20px;background:rgba(12,8,6,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.computerCard{width:min(440px,94vw);border:1px solid rgba(228,196,110,.40);border-radius:24px;padding:22px;background:linear-gradient(145deg,rgba(64,43,31,.98),rgba(31,23,19,.98));box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,238,190,.12)}
.computerCard .panelHeader>div{display:flex;flex-direction:column;gap:4px}.computerCard .panelHeader strong{font-size:1.35rem;color:#f2e8d7}.computerCard p{color:#d2c1ad;line-height:1.65}.computerCard label{display:grid;gap:7px;margin:14px 0;color:#e7dac4;font-weight:800}.computerCard select{width:100%;border:1px solid rgba(228,196,110,.25);border-radius:13px;padding:12px;background:#241b17;color:#f2e8d7;font:inherit}.computerStart{width:100%;margin-top:8px;background:linear-gradient(135deg,#e4c46e,#b8832f);color:#21150f}.computerCard>small{display:block;text-align:center;color:#bca991;margin-top:10px}.hidden{display:none!important}
.botChip{font-style:normal;font-size:.57rem;letter-spacing:.08em;padding:2px 5px;margin-inline-start:4px;border-radius:999px;background:rgba(212,169,75,.18);border:1px solid rgba(212,169,75,.35);color:#e4c46e;vertical-align:middle}
body.game-active .gameStripPlayer.active{background:color-mix(in srgb,var(--pc) 19%,rgba(42,31,25,.9));border-color:color-mix(in srgb,var(--pc) 72%,#e4c46e);box-shadow:0 0 20px color-mix(in srgb,var(--pc) 30%,transparent),inset 0 0 14px color-mix(in srgb,var(--pc) 12%,transparent)}
body.game-active .gameStripPlayer.active i{box-shadow:0 0 14px var(--pc);animation:turnDotPulse 1.1s ease-in-out infinite}
body.game-active .matchPlayer.active{border-color:rgba(228,196,110,.48);background:rgba(212,169,75,.09);box-shadow:inset 0 0 16px rgba(212,169,75,.08)}
@keyframes turnDotPulse{0%,100%{transform:scale(.82);opacity:.65}50%{transform:scale(1.28);opacity:1}}
@media (prefers-reduced-motion:reduce){body.game-active .gameStripPlayer.active i{animation:none}}

/* ================================================================
   V0.14.0 — Tunisian rule presets, KING finale, mobile wake lock UI
   ================================================================ */
.rulesPanel{margin:14px 0;padding:16px;border:1px solid rgba(228,196,110,.25);border-radius:18px;background:linear-gradient(145deg,rgba(60,42,32,.72),rgba(31,24,20,.82));box-shadow:inset 0 1px rgba(255,243,210,.06)}
.rulesPanel .panelHeader{margin-bottom:10px}.rulesPanel .panelHeader>div{display:grid;gap:2px}.rulesPanel label,.customRules label{display:grid;gap:6px;color:#e5d8c4;font-weight:800;font-size:.84rem;margin:9px 0}.rulesPanel select,.customRules select{width:100%;border:1px solid rgba(228,196,110,.24);border-radius:12px;padding:10px;background:#241b17;color:#f2e8d7;font:inherit}.customRules{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:9px 0 2px}.customRules .toggleRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:12px;background:rgba(18,13,11,.28)}.ruleHostHint{font-size:.68rem;color:#cdbb9f}.rulesSummary{margin-top:9px;padding:9px 11px;border-radius:11px;background:rgba(212,169,75,.08);border:1px solid rgba(212,169,75,.18);color:#ecd79f;font-size:.75rem;font-weight:850;line-height:1.55}.settingsHint{display:block;color:#ad9a80;line-height:1.5;margin-top:4px}.audioTestBtn{width:100%;margin-top:10px}.computerCard .customRules{grid-template-columns:1fr}.computerCard .customRules label{margin:4px 0}
.resultRevealOverlay[data-mode="winner"] .resultMascotZone img{width:min(100%,310px);border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.resultRevealOverlay[data-mode="barda3a"] .resultMascotZone img,.resultRevealOverlay[data-mode="behim"] .resultMascotZone img{width:min(100%,300px);border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.resultRevealOverlay[data-mode="finale"]{background:radial-gradient(circle at 50% 35%,rgba(235,176,64,.24),rgba(28,15,9,.84) 52%,rgba(7,5,4,.95) 100%)}
.resultRevealOverlay[data-mode="finale"] .resultRevealCard{border-color:rgba(242,198,88,.82);background:linear-gradient(145deg,rgba(98,53,29,.98),rgba(42,28,22,.99));box-shadow:0 44px 130px rgba(0,0,0,.7),0 0 80px rgba(219,148,47,.19)}
.resultRevealOverlay[data-mode="finale"] .resultMascotZone img{width:min(100%,350px);max-height:420px;border-radius:26px;animation:resultGrandFinale 1.2s cubic-bezier(.18,.88,.3,1) both}
.resultRevealOverlay[data-mode="finale"] .resultRevealName{display:none}.resultRevealOverlay[data-mode="finale"] .resultRevealTitle{font-size:clamp(1.8rem,5vw,3rem);color:#ffd66e}.resultRevealOverlay[data-mode="finale"] .resultRevealCopy p{font-size:1.1rem}
@keyframes resultGrandFinale{0%{opacity:0;transform:translateY(42px) scale(.88) rotate(-2deg)}55%{opacity:1;transform:translateY(-10px) scale(1.035) rotate(1.5deg)}100%{opacity:1;transform:none}}
@media(max-width:700px){.customRules{grid-template-columns:1fr}.rulesPanel{padding:13px}.resultRevealOverlay[data-mode="finale"] .resultMascotZone img{width:min(78vw,300px);max-height:310px}}
@media(prefers-reduced-motion:reduce){.resultRevealOverlay[data-mode="finale"] .resultMascotZone img{animation:none!important}}

/* ================================================================
   V0.14.2 — Audio/VFX polish + Premium Dice V2 + Charged Roll
   ================================================================ */
.rollControl{display:grid;gap:5px;min-width:0}.rollHint{display:block;text-align:center;color:#b9aa92;font-size:.66rem;font-weight:750;line-height:1.2}.rollBtn{--charge-angle:0deg;position:relative;isolation:isolate;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;border:3px solid transparent;background:linear-gradient(135deg,#f9dd80,#f4a928) padding-box,conic-gradient(from -90deg,#fff0a8 0turn,#f2ae2e var(--charge-angle),rgba(255,255,255,.08) var(--charge-angle),rgba(255,255,255,.08) 1turn) border-box;transition:transform .14s ease,box-shadow .18s ease,filter .18s ease}.rollBtn.pressing{transform:scale(.985)}.rollBtn.charging{box-shadow:0 0 0 1px rgba(255,224,135,.2),0 10px 30px rgba(226,156,39,.34),0 0 24px rgba(247,198,92,.17)}.rollBtn.charged-ready{transform:scale(1.02);box-shadow:0 0 0 1px rgba(255,240,176,.42),0 13px 36px rgba(228,157,39,.5),0 0 34px rgba(255,211,101,.32);animation:chargedReadyPulse .8s ease-in-out infinite}.rollBtn.charge-cancel{filter:saturate(.35);box-shadow:none}.rollBtn:disabled{background:linear-gradient(135deg,#9a8456,#7c6841) padding-box,linear-gradient(#7c6841,#7c6841) border-box}.rollBtn:disabled+.rollHint{opacity:.5}@keyframes chargedReadyPulse{0%,100%{transform:scale(1.015)}50%{transform:scale(1.035)}}

/* The software-3D canvas is the die. Remove the old DOM tile/border behind it so
   face separation comes only from light and bevel geometry — never black seams. */
.diceCanvas3d,.diceCanvas3d.dice{background:transparent!important;border:0!important;box-shadow:none!important}.diceCanvas3d:before{display:none!important}.diceCanvas{filter:drop-shadow(0 12px 10px rgba(28,18,12,.34))}.diceCanvas3d.charged-roll{animation:diceChargedHalo .64s ease-in-out infinite}.diceCanvas3d.six-hit{animation:diceSixHit .7s cubic-bezier(.17,.89,.32,1)}@keyframes diceChargedHalo{0%,100%{filter:drop-shadow(0 0 3px rgba(247,198,92,.22))}50%{filter:drop-shadow(0 0 13px rgba(247,198,92,.58))}}@keyframes diceSixHit{0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,215,105,0))}35%{transform:scale(1.08);filter:drop-shadow(0 0 20px rgba(255,215,105,.8))}100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,215,105,0))}}

/* Lightweight horse dust. DOM particles are short-lived and capped by movement
   cadence, so they never force a full board redraw. */
.horseDust{position:absolute;z-index:6;width:10px;height:7px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(224,197,158,.42),rgba(178,139,101,.22) 52%,rgba(125,88,61,0) 76%);transform:translate(-50%,-50%) scale(var(--s,1));animation:horseDustPuff .58s ease-out forwards;mix-blend-mode:screen}@keyframes horseDustPuff{0%{opacity:.72;transform:translate(-50%,-50%) scale(calc(var(--s,1)*.55))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(calc(var(--s,1)*1.65))}}

.audioTestGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.audioTestGrid .audioTestBtn{margin:0;min-width:0;padding:11px 10px}.audioTestGrid .audioTestBtn:last-child{grid-column:1/-1}

@media(max-width:620px){.dicePanel{grid-template-columns:72px minmax(0,1fr)}.rollHint{font-size:.62rem}.audioTestGrid{grid-template-columns:1fr}.audioTestGrid .audioTestBtn:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.rollBtn.charged-ready,.diceCanvas3d.charged-roll,.diceCanvas3d.six-hit{animation:none!important}.horseDust{display:none!important}}