:root{
  --bg:#061f21; --panel:#0b3c3d; --panel2:#0e4748; --gold:#e0b54b;
  --cream:#f8efd2; --pink:#ea4b93; --text:#f4f4e8; --muted:#b8d0cb;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;background:#03191b;color:var(--text)}
body{background:radial-gradient(circle at 50% -20%,#12565a 0,#062b2d 40%,#03191b 100%);overflow-x:hidden}
button,select,input{font:inherit}
button{cursor:pointer;border:1px solid #b78d31;background:var(--cream);color:#173638;border-radius:8px;padding:9px 12px;font-weight:700}
button:hover{filter:brightness(1.04)}
button:disabled{opacity:.45;cursor:not-allowed}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#062426;border-bottom:1px solid #9a7a31;box-shadow:0 4px 18px #0008;position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px}
.brandMark{width:42px;height:42px;border-radius:50%;background:linear-gradient(#f4cb61,#c78b20);color:white;display:grid;place-items:center;font-size:28px;border:2px solid #ffe49a;box-shadow:0 0 0 3px #713b36}
.brandName{font-size:24px;color:#f1c50e;font-weight:900;letter-spacing:1px;text-shadow:2px 2px #7f3151}
.tagline{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.8px;color:#f0d682}
.topActions{display:flex;gap:8px}.iconBtn{border-radius:50%;width:40px;height:40px;padding:0}.smallBtn{background:#0a3739;color:#f3d26d}
.gameGrid{display:grid;grid-template-columns:270px minmax(610px,1fr) 330px;gap:14px;padding:14px;max-width:1760px;margin:0 auto}
.panel{background:linear-gradient(#0d4546,#083536);border:1px solid #9b7c32;border-radius:14px;padding:12px;box-shadow:0 10px 28px #0005}
.panelTitle{color:#f1c50e;font-weight:900;letter-spacing:.6px;margin-bottom:9px}
.playerCard{padding:10px 9px;border-bottom:1px solid #ffffff17;border-radius:9px;margin-bottom:6px}
.playerCard.active{background:#ffffff11;outline:1px solid #ffffff10}
.playerName{font-size:17px;font-weight:900}.playerPos{font-family:system-ui,sans-serif;font-size:12px;color:#d1e3df;margin-left:6px}
.playerStats{font-family:system-ui,sans-serif;font-size:13px;line-height:1.4;color:#d5e7e3}
.achievements{display:flex;gap:7px;margin-top:7px}
.achievementDot{width:27px;height:27px;border-radius:50%;border:1px solid #d0b45c;display:grid;place-items:center;font-family:system-ui,sans-serif;font-size:13px;color:#879d98}
.achievementDot.owned{background:#f0d26c;color:#164042;box-shadow:0 0 10px #f0d26c55}
.achievementLegend{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-family:system-ui,sans-serif;font-size:11px;color:#acc5c0;margin-top:8px}
.boardStage{min-width:0}
.boardFrame{position:relative;background:#062426;border:1px solid #8e7333;border-radius:15px;padding:10px;box-shadow:0 12px 32px #0008}
#boardImage{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#0d4d4e;border-radius:8px}
.spacePopover{
      position:fixed;
      width:min(360px,calc(100vw - 28px));
      background:var(--cream);color:#153637;border:2px solid #d4aa44;
      border-radius:12px;padding:13px;z-index:200;box-shadow:0 12px 35px #0008;
      font-family:system-ui,sans-serif;line-height:1.4;pointer-events:none
    }
.spacePopoverId{font-weight:900;color:#9c3f68;margin-bottom:6px}
.tableTray{display:grid;grid-template-columns:130px 130px 1fr;gap:10px;margin-top:10px}
.deckCard{min-height:94px;border-radius:10px;border:2px solid #d4aa44;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 7px 14px #0006}
.luckyDeck{background:#0a3d40}.billDeck{background:#c84c79}.deckTitle{text-align:center;font-weight:900;color:#f3d26d;font-size:19px}.billDeck .deckTitle{color:#fff0d6}.deckSub{font-family:system-ui,sans-serif;font-size:10px;margin-top:5px;color:#fff}
.statusStrip{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;align-items:stretch}
.statusChip{background:#0a3d40;border:1px solid #a88737;border-radius:8px;display:grid;place-items:center;text-align:center;padding:8px;font-size:11px;color:#efd66f}.cashGoal{background:#6b4b22;color:#fff}
.turnTitle{text-align:center;color:#f15c9f;font-size:22px;font-weight:900;letter-spacing:.5px}
.turnSpace{text-align:center;color:#efd56d;font-family:system-ui,sans-serif;margin:4px 0 13px}
.diceArea{display:block}.diceArea .primaryBtn{width:100%;min-height:54px}
.dieFace{width:74px;height:74px;border-radius:13px;background:#fff9e9;color:#142e30;border:2px solid #d8b75d;display:grid;place-items:center;font-family:system-ui,sans-serif;font-size:35px;font-weight:900;box-shadow:inset 0 0 0 3px #00000008}
.primaryBtn{background:linear-gradient(#ef5ba0,#df3c83);color:white;border-color:#ff8dbf;font-size:17px}
.billActions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.decisionPanel{margin-top:12px;border-top:1px solid #ffffff1c;padding-top:11px}
.decisionTitle{color:#f1c50e;font-weight:900;margin-bottom:7px}
.decisionBox{background:var(--cream);color:#143637;border-radius:10px;padding:11px;font-family:system-ui,sans-serif;line-height:1.35}
.decisionBox button{margin:5px 4px 0 0}
.decisionBox select,.decisionBox input{padding:7px;border-radius:7px;border:1px solid #9e7e3a;background:white}
.logWrap{border-top:1px solid #ffffff1a;margin-top:13px;padding-top:10px}
#log{font-family:system-ui,sans-serif;font-size:12px;line-height:1.42;max-height:320px;overflow:auto;background:#052627;border-radius:9px;padding:8px}
.logLine{padding:5px 1px;border-bottom:1px solid #ffffff10}.logActor{color:#ef7bad;font-weight:700}
.modalBackdrop{position:fixed;inset:0;background:#001819dd;display:grid;place-items:center;z-index:100;padding:20px}
.modalBackdrop[hidden]{display:none}
.modal{position:relative;width:min(520px,96vw);background:linear-gradient(#0d4b4d,#082e30);border:2px solid #d4aa44;border-radius:18px;padding:24px;box-shadow:0 20px 70px #000;color:#fff}
.modalLogo{text-align:center;color:#f15a9d;font-weight:900;font-size:35px;text-shadow:2px 2px #d39a30}.modalTagline{text-align:center;color:#edd167;margin-bottom:18px}
.modal h2{color:#f1c50e}.modal label{display:block;margin:10px 0;font-family:system-ui,sans-serif}.modal select,.modal input{width:100%;margin-top:5px;padding:10px;border-radius:8px;border:1px solid #c8a44e}
.playerNameField{margin:7px 0}.modalActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.buildTag{text-align:center;color:#9ab7b1;font-family:system-ui,sans-serif;font-size:11px;margin-top:15px}
.closeBtn{position:absolute;right:12px;top:10px;border-radius:50%;font-size:23px;padding:2px 9px}.rulesModal p{font-family:system-ui,sans-serif;line-height:1.5}.saveStatus{font-family:system-ui,sans-serif;font-size:12px;color:#c6ddd8;margin-top:10px}
@media(max-width:1180px){
 .gameGrid{grid-template-columns:230px minmax(520px,1fr);}.turnPanel{grid-column:1/-1}.turnPanel{display:grid;grid-template-columns:1fr 1fr;gap:12px}.logWrap{grid-column:1/-1}
}
@media(max-width:820px){
 .topbar{height:auto;padding:10px 14px}.tagline{display:none}.gameGrid{display:flex;flex-direction:column;padding:8px}.playersPanel{order:2}.boardStage{order:1}.turnPanel{order:3;display:block}
 .tableTray{grid-template-columns:90px 90px 1fr}.statusStrip{grid-template-columns:repeat(2,1fr)}.spacePopover{position:fixed;left:5vw;right:5vw;top:auto;bottom:20px;width:90vw}
}

.boardFrame{overflow:visible}
.boardOverlay{
  position:absolute;
  left:10px; right:10px; top:10px; bottom:10px;
  pointer-events:none;
  z-index:12;
}
.spaceHit{
  position:absolute;
  pointer-events:auto;
  background:transparent;
  border:0;
}
.spaceHit:hover{
  outline:2px solid rgba(241,197,14,.85);
  outline-offset:-2px;
  background:rgba(241,197,14,.08);
}
.playerPawn{
  position:absolute;
  width:20px;
  height:28px;
  transform:translate(-50%,-56%);
  z-index:18;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.65));
  transition:left .35s ease, top .35s ease;
}
.playerPawn::before{
  content:"";
  position:absolute;
  width:11px;height:11px;
  border-radius:50%;
  left:4.5px;top:0;
  background:var(--pawn);
  border:1.5px solid rgba(255,255,255,.85);
}
.playerPawn::after{
  content:"";
  position:absolute;
  left:2px;top:9px;
  width:16px;height:17px;
  background:var(--pawn);
  clip-path:polygon(31% 0,69% 0,76% 42%,100% 82%,100% 100%,0 100%,0 82%,24% 42%);
  border-radius:4px 4px 5px 5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
}
.playerPawn.active{
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 7px var(--pawn));
}
.playerPawnLabel{
  position:absolute;
  top:22px;left:50%;
  transform:translateX(-50%);
  min-width:15px;height:15px;
  padding:0 3px;
  border-radius:8px;
  background:#052627;
  border:1px solid #f3d26d;
  color:#fff;
  font:700 9px/13px system-ui,sans-serif;
  text-align:center;
  z-index:2;
}
@media(max-width:820px){
  .spacePopover{
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:12px!important;
    width:auto;
  }
  .playerPawn{width:17px;height:24px}
}

.luckyBreakCelebration{
  position:fixed;inset:0;z-index:500;
  display:grid;place-items:center;
  background:rgba(0,22,24,.42);
  pointer-events:none;
}
.luckyBreakCelebration[hidden]{display:none}
.luckyBreakBurst{
  position:relative;
  min-width:min(480px,88vw);
  padding:28px 34px 30px;
  border-radius:24px;
  text-align:center;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.17),transparent 45%),
    linear-gradient(145deg,#0c5254,#08383a);
  border:3px solid #f0c84f;
  box-shadow:0 24px 80px #000c,0 0 38px rgba(240,200,79,.35);
  animation:luckyPop .24s ease-out;
}
.luckyBreakBurst::before,
.luckyBreakBurst::after{
  content:"✦ ✧ ✦ ✧ ✦";
  position:absolute;
  left:50%;transform:translateX(-50%);
  color:#f6d964;
  letter-spacing:12px;
  font-size:24px;
  white-space:nowrap;
}
.luckyBreakBurst::before{top:-22px}
.luckyBreakBurst::after{bottom:-22px}
.luckyWoo{
  color:#fff4c9;
  font:900 18px/1 system-ui,sans-serif;
  letter-spacing:3px;
  margin-bottom:7px;
}
.luckyTitle{
  color:#f15a9d;
  font-size:46px;
  line-height:1;
  font-weight:900;
  text-shadow:3px 3px #d69b32;
}
.luckyPlayer{
  margin-top:12px;
  color:#eef8f4;
  font:700 16px/1.2 system-ui,sans-serif;
}
.luckyAmount{
  margin-top:8px;
  color:#f7d86a;
  font:900 56px/1 system-ui,sans-serif;
  text-shadow:0 3px #714d14;
}
.luckySub{
  margin-top:8px;
  color:#d8e9e5;
  font:600 13px/1 system-ui,sans-serif;
  letter-spacing:.6px;
  text-transform:uppercase;
}
@keyframes luckyPop{
  from{transform:scale(.72);opacity:0}
  to{transform:scale(1);opacity:1}
}

.autoEventToast{
  position:fixed;left:50%;top:94px;transform:translateX(-50%);
  z-index:450;pointer-events:none;max-width:min(580px,90vw)
}
.autoEventToast[hidden]{display:none}
.autoEventText{
  border:2px solid;border-radius:14px;padding:12px 20px;
  box-shadow:0 12px 36px #0009;
  font:800 16px/1.3 system-ui,sans-serif;text-align:center;
  animation:autoToastIn .18s ease-out
}
.autoEventToast.positive .autoEventText{
  background:linear-gradient(135deg,#0d5557,#157a71);
  color:#fff7ce;border-color:#f0c84f
}
.autoEventToast.negative .autoEventText{
  background:linear-gradient(135deg,#621d29,#8b2638);
  color:#fff2f1;border-color:#ef7b75
}
.autoEventToast.neutral .autoEventText{
  background:linear-gradient(135deg,#153f54,#17627a);
  color:#eef9ff;border-color:#76bfdc
}
@keyframes autoToastIn{
  from{opacity:0;transform:translateY(-10px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}


/* v0.7.0 beta-candidate polish */
.playerAchievementNames{margin-top:5px;font:600 11px/1.35 system-ui,sans-serif;color:#f4dfa0}
.playerAchievementName{display:block}

.bankruptcyBtn{width:100%;margin-top:9px;background:linear-gradient(#8f2834,#641a26);color:#fff0ef;border-color:#e97b79;letter-spacing:.8px}
.bankruptcyBtn:hover{filter:brightness(1.08)}
.bankruptcyKicker{font:900 12px/1 system-ui,sans-serif;letter-spacing:2px;color:#f49b94;text-align:center;margin-bottom:5px}
.bankruptcySummary{font:14px/1.5 system-ui,sans-serif;color:#e7f0ed}
.bankruptcyChoice{width:100%;margin:6px 0;background:#f8efd2;color:#4b2326}
.bankruptcyNoChoice{font:700 13px/1.45 system-ui,sans-serif;background:#5d2028;border:1px solid #d56f72;padding:12px;border-radius:9px;color:#fff}

.lastRollPanel{margin-top:13px;padding:12px;border:1px solid #8f7938;border-radius:12px;background:linear-gradient(145deg,#092f33,#0b4547);box-shadow:inset 0 0 24px #0003}
.lastRollLabel{text-align:center;color:#f1c50e;font-weight:900;letter-spacing:1.5px;font-size:13px;margin-bottom:9px}
.lastRollContent{display:flex;align-items:center;gap:14px}
.lastRollDie{flex:0 0 74px;width:74px;height:74px;border-radius:14px;background:#fff9e9;color:#142e30;border:2px solid #d8b75d;display:grid;place-items:center;font:900 35px/1 system-ui,sans-serif;box-shadow:inset 0 0 0 3px #00000008,0 8px 18px #0007;transform-style:preserve-3d}
.lastRollDie.rolling{animation:dieSwirl .18s linear infinite;box-shadow:inset 0 0 0 3px #00000008,0 0 24px #f1c50e88}
.lastRollPlayer{font:800 14px/1.3 system-ui,sans-serif;color:#fff2c0}
.lastRollContext{font:12px/1.4 system-ui,sans-serif;color:#b8d0cb;margin-top:4px}
@keyframes dieSwirl{0%{transform:rotate(0deg) rotateY(0deg) scale(.98)}50%{transform:rotate(180deg) rotateY(180deg) scale(1.08)}100%{transform:rotate(360deg) rotateY(360deg) scale(.98)}}

.estateOwnerMarker{position:absolute;z-index:17;pointer-events:none;transform:translate(-50%,-50%);width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--owner);border:2px solid #fff3b0;color:#071e20;font:900 9px/1 system-ui,sans-serif;box-shadow:0 1px 4px #000b,0 0 0 1px #604a18}
.estateOwnerMarker.currentOwner{box-shadow:0 0 0 2px #f1c50e,0 0 12px #f1c50eaa}

@media(max-width:1180px){.lastRollPanel{grid-column:1/-1}.billActions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.billActions{grid-template-columns:1fr}.lastRollContent{justify-content:center}.lastRollMeta{max-width:210px}}


/* v0.8.0 presentation polish — mechanics intentionally untouched */
.playerCard{position:relative;overflow:visible;border-left:4px solid transparent;transition:background .2s ease,box-shadow .2s ease,border-color .2s ease}
.playerCard.active{border-left-color:var(--player-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--player-color) 35%,transparent),0 0 16px color-mix(in srgb,var(--player-color) 18%,transparent)}
.playerCard.turnPulse{animation:playerTurnPulse .85s ease-out}
@keyframes playerTurnPulse{0%{transform:scale(.97);box-shadow:0 0 0 0 var(--player-color)}45%{transform:scale(1.018);box-shadow:0 0 24px var(--player-color)}100%{transform:scale(1);}}
.turnPanel.turnPulse{animation:turnPanelPulse .7s ease-out}
@keyframes turnPanelPulse{0%{box-shadow:0 10px 28px #0005}45%{box-shadow:0 0 30px #f1c50e44,0 10px 28px #0005}100%{box-shadow:0 10px 28px #0005}}

.finalRace{background:linear-gradient(100deg,#ffffff0b,#d5ac3530)!important;border-right:1px solid #d5ac3566}
.finalRaceBadge{float:right;margin-top:1px;padding:3px 6px;border-radius:999px;background:#72541f;color:#ffe99d;border:1px solid #d7b65b;font:900 8px/1 system-ui,sans-serif;letter-spacing:.8px}
.playerCard.winner{box-shadow:0 0 24px #f1c50e88,inset 0 0 0 1px #f1c50e}
.playerProgressLine{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#bdd1cc;font:700 9px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.3px}
.playerProgressTrack{height:4px;border-radius:4px;margin-top:4px;background:#041f20;overflow:hidden;border:1px solid #ffffff12}
.playerProgressTrack i{display:block;height:100%;background:linear-gradient(90deg,var(--player-color),#f1c50e);border-radius:4px;transition:width .45s ease}

.playerDeltaStack{position:absolute;right:8px;top:34px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none}
.playerDelta{padding:3px 7px;border-radius:999px;font:900 11px/1.2 system-ui,sans-serif;box-shadow:0 4px 12px #0009;animation:playerDeltaFloat 1.4s ease-out forwards;white-space:nowrap}
.playerDelta.positive{background:#146b5d;color:#fff5b9;border:1px solid #e3c655}
.playerDelta.negative{background:#7d2631;color:#fff;border:1px solid #ec7777}
.playerDelta.neutral{background:#205b72;color:#fff;border:1px solid #7dc0d6}
@keyframes playerDeltaFloat{0%{opacity:0;transform:translateY(7px) scale(.92)}15%{opacity:1;transform:translateY(0) scale(1.04)}70%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(.98)}}

.playerPawn{transition:left .52s cubic-bezier(.22,.82,.2,1),top .52s cubic-bezier(.22,.82,.2,1),filter .2s ease}
.playerPawn.moving{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 10px var(--pawn))}

.estateOwnerMarker{width:30px;height:18px;border-radius:6px;font-size:8px;letter-spacing:.3px;background:linear-gradient(180deg,color-mix(in srgb,var(--owner) 90%,white),var(--owner));border:2px solid #fff3b0;color:#071e20;box-shadow:0 2px 5px #000b,0 0 0 1px #604a18}

.specialMoment{position:fixed;left:50%;top:116px;transform:translateX(-50%);z-index:470;min-width:min(430px,86vw);padding:13px 22px;border-radius:16px;text-align:center;pointer-events:none;box-shadow:0 15px 45px #0009;animation:specialMomentIn .22s ease-out}
.specialMoment[hidden]{display:none}
.specialMoment.positive{background:linear-gradient(135deg,#0b5e55,#0c7770);border:2px solid #edcf62;color:#fff5bd}
.specialMoment.negative{background:linear-gradient(135deg,#681d28,#9a2937);border:2px solid #f0837e;color:#fff}
.specialMoment.neutral{background:linear-gradient(135deg,#17445a,#176b7c);border:2px solid #75bed3;color:#fff}
.specialMomentTitle{font:900 24px/1 system-ui,sans-serif;letter-spacing:1.4px}
.specialMomentSub{margin-top:5px;font:700 12px/1.3 system-ui,sans-serif;opacity:.9}
@keyframes specialMomentIn{from{opacity:0;transform:translate(-50%,-15px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

.achievementMoment{position:fixed;inset:0;z-index:480;display:grid;place-items:center;pointer-events:none;background:#00191a3d}
.achievementMoment[hidden]{display:none}
.achievementMomentCard{min-width:min(460px,88vw);padding:24px 28px;text-align:center;border-radius:22px;background:radial-gradient(circle at 50% 25%,#ffffff18,transparent 42%),linear-gradient(145deg,#104f50,#082f31);border:2px solid #e2bd50;box-shadow:0 24px 70px #000b,0 0 32px #e2bd5040;animation:achievementPop .3s cubic-bezier(.2,.9,.2,1.15)}
.achievementMoment.surrendered .achievementMomentCard{background:linear-gradient(145deg,#64202a,#37151c);border-color:#ef7b76}
.achievementMomentKicker{font:900 11px/1 system-ui,sans-serif;letter-spacing:2.2px;color:#f2ce62}
.achievementMoment.surrendered .achievementMomentKicker{color:#ffaaa5}
.achievementMomentName{margin-top:8px;font:900 30px/1.08 Georgia,serif;color:#fff3be;text-shadow:0 2px #724c18}
.achievementMomentPlayer{margin-top:8px;font:800 13px/1 system-ui,sans-serif;color:#e8f3ef}
@keyframes achievementPop{from{opacity:0;transform:scale(.72) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.winnerCelebration{position:fixed;inset:0;z-index:650;display:grid;place-items:center;background:radial-gradient(circle,#083a3cbb,#001719ee);overflow:hidden}
.winnerCelebration[hidden]{display:none}
.winnerCard{position:relative;z-index:2;width:min(560px,90vw);padding:34px 30px;text-align:center;border-radius:28px;background:radial-gradient(circle at 50% 0,#ffffff20,transparent 45%),linear-gradient(150deg,#115557,#082d2f);border:3px solid #e6c04f;box-shadow:0 28px 90px #000,0 0 55px #e6c04f55;animation:winnerPop .45s cubic-bezier(.18,.95,.25,1.12)}
.winnerKicker{font:900 14px/1 system-ui,sans-serif;letter-spacing:4px;color:#f4d66c}
.winnerTitle{margin-top:5px;font:900 62px/.95 Georgia,serif;color:#f15c9f;text-shadow:4px 4px #bb7b2c}
.winnerName{margin-top:14px;font:900 30px/1.1 system-ui,sans-serif;color:#fff4c1}
.winnerSummary{margin-top:10px;font:700 14px/1.4 system-ui,sans-serif;color:#d9e9e5}
.winnerAchievements{margin-top:18px;font-size:28px;color:#f0cc58;letter-spacing:8px;text-shadow:0 0 14px #f0cc5888}
.winnerClose{margin-top:23px;background:linear-gradient(#f4d66c,#d6a735);border-color:#fff0ad;color:#173638;padding:11px 20px}
.winnerConfetti{position:absolute;inset:0;pointer-events:none}
.winnerConfetti i{position:absolute;top:-8%;width:9px;height:17px;border-radius:2px;background:#f1c50e;animation:confettiFall var(--dur) linear var(--delay) infinite}
.winnerConfetti i:nth-child(3n){background:#ed4d93}.winnerConfetti i:nth-child(3n+1){background:#2cc2bd}
@keyframes confettiFall{to{transform:translate(var(--drift),115vh) rotate(var(--spin));opacity:.25}}
@keyframes winnerPop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}

@media(max-width:820px){
  .specialMoment{top:82px}.winnerTitle{font-size:46px}.achievementMomentName{font-size:24px}.playerDeltaStack{top:30px}
}


/* v0.8.1 Country Club payoff moment */
.countryClubCelebration{
  position:fixed;
  inset:0;
  z-index:520;
  display:grid;
  place-items:center;
  background:rgba(3,20,21,.46);
  pointer-events:none;
}
.countryClubCelebration[hidden]{display:none}
.countryClubCard{
  position:relative;
  min-width:min(520px,90vw);
  padding:30px 38px 32px;
  border-radius:24px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.16),transparent 34%),
    linear-gradient(145deg,#153f36,#082c31 72%);
  border:3px solid #e3c35b;
  box-shadow:0 28px 90px #000d,0 0 46px rgba(227,195,91,.32);
  animation:ccPop .28s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.countryClubCard::before{
  content:"♛   ◆   ♛";
  display:block;
  color:#f1d36d;
  font-size:25px;
  letter-spacing:12px;
  margin-bottom:10px;
}
.countryClubCard::after{
  content:"";
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.08),transparent 24%);
  animation:ccSweep 1.3s linear infinite;
}
.ccKicker{
  position:relative;
  z-index:1;
  color:#f8e9aa;
  font:900 13px/1 system-ui,sans-serif;
  letter-spacing:3px;
}
.ccTitle{
  position:relative;
  z-index:1;
  margin-top:7px;
  color:#fff7cf;
  font:900 36px/1 system-ui,sans-serif;
  letter-spacing:1px;
  text-shadow:0 3px #5f4c14;
}
.ccPlayer{
  position:relative;
  z-index:1;
  margin-top:14px;
  color:#d7ebe4;
  font:700 15px/1.3 system-ui,sans-serif;
}
.ccRoll{
  position:relative;
  z-index:1;
  display:inline-block;
  margin-top:14px;
  padding:7px 14px;
  border-radius:999px;
  background:#f7e8a4;
  color:#183336;
  font:900 15px/1 system-ui,sans-serif;
  box-shadow:0 4px 14px #0007;
}
.ccAmount{
  position:relative;
  z-index:1;
  margin-top:10px;
  color:#f3cd52;
  font:900 62px/1 system-ui,sans-serif;
  text-shadow:0 4px #6b5310,0 0 24px rgba(243,205,82,.22);
}
.ccSub{
  position:relative;
  z-index:1;
  margin-top:10px;
  color:#f6e8bb;
  font:800 13px/1 system-ui,sans-serif;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
@keyframes ccPop{
  from{transform:scale(.74) rotate(-2deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}
@keyframes ccSweep{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}


/* v0.9.0 showcase polish */

/* Routine announcements live inside the board, just above the title. */
.boardAnnouncement{
  position:absolute;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  z-index:31;
  width:min(54%,560px);
  padding:9px 18px 10px;
  border-radius:999px;
  text-align:center;
  pointer-events:none;
  box-shadow:0 8px 24px #0007;
  backdrop-filter:blur(3px);
  animation:boardAnnouncementIn .2s ease-out;
}
.boardAnnouncement[hidden]{display:none}
.boardAnnouncement.positive{background:#0b6158e8;border:2px solid #e8c85e;color:#fff4bb}
.boardAnnouncement.negative{background:#7a2430ed;border:2px solid #ef847f;color:#fff}
.boardAnnouncement.neutral{background:#124b5be8;border:2px solid #79bdd1;color:#fff}
.boardAnnouncementTitle{font:900 17px/1 system-ui,sans-serif;letter-spacing:1.1px}
.boardAnnouncementSub{margin-top:3px;font:700 10px/1.2 system-ui,sans-serif;opacity:.92}
@keyframes boardAnnouncementIn{from{opacity:0;transform:translate(-50%,-65%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* The old top-of-screen routine banner remains dormant for compatibility. */
.specialMoment{display:none!important}

/* Achievement dots are now little trophy drawers. */
.achievementDot{
  appearance:none;
  font:inherit;
  cursor:default;
}
.achievementDot.owned{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.achievementDot.owned:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 0 14px #f1c50e99}
.achievementDot.cardJustArrived{animation:cardArrivalGlow .9s ease-out}
@keyframes cardArrivalGlow{0%{transform:scale(.8);box-shadow:0 0 0 #fff}45%{transform:scale(1.2);box-shadow:0 0 28px #fff4a8}100%{transform:scale(1)}}

/* Prototype collectible achievement cards. */
.achievementCardViewer{
  position:fixed;inset:0;z-index:610;display:grid;place-items:center
}
.achievementCardViewer[hidden]{display:none}
.achievementViewerBackdrop{position:absolute;inset:0;background:#001819d9;backdrop-filter:blur(4px)}
.achievementViewerShell{position:relative;z-index:2;display:grid;justify-items:center;gap:14px}
.achievementViewerClose{
  padding:10px 18px;border-radius:999px;background:#f1c50e;color:#183638;
  border:2px solid #ffef9b;font-weight:900
}
.achievementCardStage{
  position:fixed;inset:0;z-index:590;display:grid;place-items:center;
  pointer-events:none;background:#00191a42
}
.achievementCardStage[hidden]{display:none}
.achievementFlyWrap,.surrenderBurnWrap{position:relative;display:grid;place-items:center}
.cardArrivalText{
  margin-top:11px;color:#ffeaa0;font:900 12px/1 system-ui,sans-serif;
  letter-spacing:2.4px;text-shadow:0 2px #000
}
.prestigeCard{
  position:relative;width:286px;height:390px;border-radius:22px;padding:23px 20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
  border:3px solid #e1bd50;box-shadow:0 24px 70px #000c,0 0 36px #e1bd5038;
  color:#fff7d0;
}
.prestigeCard::before{
  content:"";position:absolute;inset:-35%;
  background:conic-gradient(from 45deg,transparent,#ffffff12,transparent 20%);
  animation:prestigeSweep 5s linear infinite
}
.prestigeCard>*{position:relative;z-index:1}
.prestige-wardrobe{background:radial-gradient(circle at 50% 18%,#ff9ec344,transparent 35%),linear-gradient(150deg,#7a2852,#32182c 74%)}
.prestige-limo{background:radial-gradient(circle at 50% 18%,#71c8ff38,transparent 35%),linear-gradient(150deg,#144f71,#082b43 74%)}
.prestige-estate{background:radial-gradient(circle at 50% 18%,#9cdaa647,transparent 35%),linear-gradient(150deg,#316846,#142f2a 74%)}
.prestige-club{background:radial-gradient(circle at 50% 18%,#b5a4ff40,transparent 35%),linear-gradient(150deg,#55438b,#241f49 74%)}
.prestige-generic{background:linear-gradient(150deg,#125658,#082f31)}
.prestigeCardKicker{font:900 11px/1 system-ui,sans-serif;letter-spacing:3px;color:#f6d974}
.prestigeCardIcon{
  margin-top:24px;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  border:3px solid #f0cf64;background:#ffffff10;
  font:900 58px/1 Georgia,serif;color:#ffe47d;box-shadow:inset 0 0 25px #ffffff15,0 0 22px #f0cf6433
}
.prestigeCardTitle{margin-top:22px;font:900 27px/1.05 Georgia,serif;color:#fff5c6;text-shadow:0 3px #5d4312}
.prestigeCardRule{margin-top:8px;font:900 10px/1 system-ui,sans-serif;letter-spacing:1.5px;color:#f3d96d}
.prestigeCardStrap{margin-top:auto;font:700 13px/1.35 system-ui,sans-serif;color:#e4efeb}
.prestigeCardOwner{
  width:100%;margin-top:18px;padding-top:12px;border-top:1px solid #ffffff35;
  font:900 10px/1.2 system-ui,sans-serif;letter-spacing:1.4px;color:#fff0a5
}
@keyframes prestigeSweep{to{transform:rotate(360deg)}}

/* Bankruptcy surrender: stamp it, burn it, leave ashes. */
.surrenderStamp{
  position:absolute;z-index:5;top:43%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);
  padding:8px 17px;border:5px solid #ff4c4c;color:#ff5b55;background:#24080ad1;
  font:1000 28px/1 system-ui,sans-serif;letter-spacing:2px;
  text-shadow:0 2px #000;box-shadow:0 0 22px #ff4c4c66;
  animation:stampSlam .35s cubic-bezier(.2,1.4,.3,1)
}
@keyframes stampSlam{from{transform:translate(-50%,-50%) rotate(-12deg) scale(2.2);opacity:0}to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}}
.surrenderBurnWrap.burning .prestigeCard{
  animation:cardBurnAway 1.75s .15s forwards ease-in;
}
.surrenderBurnWrap.burning .surrenderStamp{animation:stampFade .9s .55s forwards}
@keyframes stampFade{to{opacity:0;filter:blur(4px)}}
@keyframes cardBurnAway{
  0%{filter:none;opacity:1;clip-path:inset(0 0 0 0);transform:scale(1)}
  30%{filter:sepia(.7) saturate(1.8) brightness(.9);box-shadow:0 0 42px #ff7b21}
  65%{filter:grayscale(.6) sepia(1) brightness(.6);clip-path:polygon(0 0,100% 0,96% 45%,87% 53%,94% 62%,79% 70%,82% 82%,65% 89%,57% 100%,0 100%);transform:scale(.98)}
  100%{filter:grayscale(1) brightness(.25) blur(2px);clip-path:polygon(0 0,100% 0,93% 8%,96% 15%,78% 19%,82% 25%,65% 29%,68% 36%,49% 41%,53% 48%,34% 53%,39% 62%,18% 69%,23% 78%,0 84%);opacity:0;transform:scale(.87) translateY(28px)}
}
.flameField,.ashField{position:absolute;inset:0;pointer-events:none;overflow:visible}
.flameField i{
  position:absolute;left:var(--x);bottom:4%;width:17px;height:29px;border-radius:70% 25% 65% 35%;
  background:radial-gradient(circle at 45% 68%,#fff5a4 0 18%,#ffb428 19% 44%,#ef4b22 46% 70%,transparent 72%);
  filter:drop-shadow(0 0 8px #ff6b22);
  opacity:0;transform:translateX(-50%) rotate(8deg);
}
.surrenderBurnWrap.burning .flameField i{animation:flameRise .55s ease-in-out var(--d) 3 alternate}
@keyframes flameRise{0%{opacity:0;transform:translate(-50%,15px) scale(.55) rotate(-8deg)}50%{opacity:1}100%{opacity:.85;transform:translate(-50%,-48px) scale(1.25) rotate(12deg)}}
.ashField i{
  position:absolute;left:var(--x);top:62%;width:5px;height:5px;background:#8e8172;border-radius:50%;opacity:0
}
.surrenderBurnWrap.burning .ashField i{animation:ashDrift 1.5s ease-out var(--delay) forwards}
@keyframes ashDrift{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--drift),110px) scale(1)}}

/* Quiet lower side-column titillation. */
.sideFeature{
  margin-top:18px;padding:13px 12px;border-radius:13px;
  background:linear-gradient(145deg,#ffffff09,#00000012);
  border:1px solid #d6b5524f;color:#d9e8e4
}
.sideFeature[hidden]{display:none}
.sideFeatureKicker{font:900 10px/1 system-ui,sans-serif;letter-spacing:2px;color:#e7c75c}
.sideFeatureName{margin-top:7px;font:900 18px/1 Georgia,serif;color:#fff1b1}
.sideFeatureLine{margin-top:5px;font:800 11px/1.3 system-ui,sans-serif;color:#d5e8e2}
.sideFeatureWhisper{margin-top:8px;font:700 10px/1.35 system-ui,sans-serif;color:#9fc1b9;font-style:italic}
.pulseGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.pulseGrid span{text-align:center;padding:7px 3px;border-radius:9px;background:#001f2080;border:1px solid #ffffff12}
.pulseGrid b{display:block;font:900 19px/1 system-ui,sans-serif;color:#f1d263}
.pulseGrid small{display:block;margin-top:3px;font:800 8px/1.1 system-ui,sans-serif;text-transform:uppercase;color:#a9c8c1}

/* Prevent card buttons from inheriting bulky generic button sizing. */
.achievements .achievementDot{padding:0!important}

@media(max-width:900px){
  .boardAnnouncement{width:66%;top:37%}
  .prestigeCard{width:250px;height:345px}
  .prestigeCardIcon{width:92px;height:92px;font-size:48px}
  .prestigeCardTitle{font-size:23px}
}


/* v0.9.1 popup unification fix */
.autoEventToast{display:none !important}
.boardAnnouncementSub:empty{display:none}


/* v0.9.2 approved illustrated achievement cards */
.approvedAchievementCard{
  position:relative;
  display:grid;
  place-items:center;
  max-width:min(430px,86vw);
  max-height:min(620px,78vh);
  filter:drop-shadow(0 26px 60px #000c);
}
.approvedAchievementCard img{
  display:block;
  max-width:100%;
  max-height:min(590px,74vh);
  width:auto;
  height:auto;
  border-radius:18px;
  border:2px solid #d6b44b;
  box-shadow:0 0 0 4px #071f20,0 0 30px #d6b44b33;
}
.approvedCardOwner{
  position:absolute;
  left:50%;
  bottom:-16px;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:7px 13px;
  border-radius:999px;
  background:#073b3d;
  color:#ffe28a;
  border:1px solid #d6b44b;
  font:900 11px/1 system-ui,sans-serif;
  letter-spacing:.8px;
  box-shadow:0 6px 18px #0008;
}
.achievementFlyWrap .approvedAchievementCard{
  transform:scale(.9);
}
.surrenderBurnWrap .approvedAchievementCard img{
  width:auto;
  max-height:520px;
}
.surrenderBurnWrap.burning .approvedAchievementCard{
  animation:cardBurnAway 1.75s .15s forwards ease-in;
}


/* v0.9.4 dramatic bankruptcy surrender */
.surrenderBurnWrap{
  transform:scale(.98);
}
.surrenderBurnWrap.stampHold .surrenderStamp{
  animation:stampSlam .42s cubic-bezier(.15,1.55,.25,1),stampPulse 1.25s .42s ease-in-out infinite alternate;
}
@keyframes stampPulse{
  from{filter:drop-shadow(0 0 2px #ff3131);transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
  to{filter:drop-shadow(0 0 18px #ff3131);transform:translate(-50%,-50%) rotate(-12deg) scale(1.08)}
}

.surrenderBurnWrap.burning .approvedAchievementCard{
  animation:cardScorch 3.0s forwards ease-in-out;
}
@keyframes cardScorch{
  0%{filter:none;opacity:1;transform:scale(1)}
  18%{filter:sepia(.25) saturate(1.15) brightness(.98);box-shadow:0 0 28px #ffb52e55}
  42%{filter:sepia(.65) saturate(1.7) brightness(.85);box-shadow:0 0 52px #ff6e22aa}
  70%{filter:sepia(1) saturate(2.1) brightness(.62) contrast(1.15);box-shadow:0 0 72px #ff401fcc}
  100%{filter:grayscale(.35) sepia(1) brightness(.42) blur(.5px);transform:scale(.96)}
}

.surrenderBurnWrap .flameField i{
  width:22px;height:38px;
  filter:drop-shadow(0 0 12px #ff5a15) drop-shadow(0 0 18px #ffba2e);
}
.surrenderBurnWrap.burning .flameField i{
  animation:flameRiseBig .82s ease-in-out var(--d) 5 alternate;
}
@keyframes flameRiseBig{
  0%{opacity:0;transform:translate(-50%,22px) scale(.45) rotate(-10deg)}
  25%{opacity:.9}
  55%{opacity:1;transform:translate(-50%,-12px) scale(1.05) rotate(8deg)}
  100%{opacity:.9;transform:translate(-50%,-78px) scale(1.5) rotate(-12deg)}
}

.surrenderBurnWrap.inferno::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 85%,#fff3a033 0 14%,#ff9a2444 15% 35%,#ff3d1a22 36% 55%,transparent 58%),
    radial-gradient(circle at 12% 45%,#ff6b2250,transparent 36%),
    radial-gradient(circle at 88% 38%,#ff9f2b45,transparent 32%);
  filter:blur(8px);
  animation:infernoPulse .45s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes infernoPulse{
  from{opacity:.65;transform:scale(.98)}
  to{opacity:1;transform:scale(1.04)}
}

.surrenderBurnWrap.inferno .approvedAchievementCard{
  animation:cardCrumble 1.9s forwards ease-in;
}
@keyframes cardCrumble{
  0%{
    opacity:1;transform:scale(.96);
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  }
  35%{
    filter:grayscale(.3) sepia(1) brightness(.38);
    clip-path:polygon(0 0,100% 0,96% 23%,100% 35%,91% 46%,96% 58%,84% 70%,88% 84%,75% 100%,0 100%);
  }
  70%{
    filter:grayscale(.8) brightness(.28) blur(1px);
    clip-path:polygon(0 0,100% 0,91% 9%,97% 17%,82% 25%,89% 35%,70% 43%,79% 53%,58% 61%,66% 72%,43% 81%,52% 91%,29% 100%,0 100%);
    transform:scale(.92) translateY(18px) rotate(-1deg);
  }
  100%{
    opacity:.05;filter:grayscale(1) brightness(.18) blur(3px);
    clip-path:polygon(0 0,100% 0,88% 7%,91% 14%,73% 18%,80% 26%,60% 33%,67% 42%,46% 48%,51% 58%,32% 64%,38% 73%,18% 79%,24% 88%,0 94%);
    transform:scale(.82) translateY(48px) rotate(2deg);
  }
}

.surrenderBurnWrap.ashes .flameField{opacity:0;transition:opacity .5s ease}
.surrenderBurnWrap.ashes .ashField i{
  animation:ashStorm 1.7s ease-out var(--delay) forwards;
}
@keyframes ashStorm{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  15%{opacity:.95}
  100%{opacity:0;transform:translate(var(--drift),165px) scale(1.3) rotate(240deg)}
}
.surrenderBurnWrap.ashes::after{
  content:"";
  position:absolute;
  left:20%;right:20%;bottom:-18px;height:28px;
  background:radial-gradient(ellipse,#6a5c4a88,transparent 70%);
  filter:blur(4px);
  animation:ashPileIn 1.1s ease-out forwards;
}
@keyframes ashPileIn{
  from{opacity:0;transform:scaleX(.3)}
  to{opacity:.85;transform:scaleX(1)}
}


/* v0.10.0 board-center refresh */
.boardCenterBrand{
  position:absolute;
  left:50%;
  top:54%;
  width:min(86%,820px);
  transform:translate(-50%,-50%);
  z-index:20;
  pointer-events:none;
  text-align:center;
}
.boardCenterHero{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.42));
}

.boardAnnouncement{
  top:34%;
  width:min(58%,590px);
}

.debtFreeCelebration{
  position:fixed;
  inset:0;
  z-index:560;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.debtFreeCelebration[hidden]{display:none}
.debtFreeCard{
  min-width:min(520px,88vw);
  padding:20px 28px 24px;
  border-radius:28px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 30%),
    linear-gradient(145deg, #0d5b50, #0b7d74 52%, #073d40);
  border:3px solid #f2d26e;
  color:#fff6c6;
  box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 44px rgba(241,197,14,.22);
  animation:debtFreeIn .25s ease-out;
}
.debtFreeKicker{
  font:900 12px/1 system-ui,sans-serif;
  letter-spacing:2px;
  color:#ffeab3;
  opacity:.95;
}
.debtFreeTitle{
  margin-top:6px;
  font:900 48px/1 Georgia,"Times New Roman",serif;
  letter-spacing:1.2px;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.30);
}
.debtFreePlayer{
  margin-top:6px;
  font:900 20px/1.2 system-ui,sans-serif;
  color:#fef2c2;
}
.debtFreeSub{
  margin-top:8px;
  font:800 14px/1.35 system-ui,sans-serif;
  color:#d6f6e9;
}
@keyframes debtFreeIn{
  from{opacity:0;transform:scale(.9) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

@media(max-width:1180px){
  .boardCenterBrand{width:min(48%,360px)}
  .titleChar{font-size:38px}
}
@media(max-width:820px){
  .boardCenterBrand{width:64%; top:52%}
  .titleChar{font-size:30px}
  .boardCenterKicker{font-size:10px}
  .boardCenterTagline{font-size:11px}
  .howToLine{font-size:9px}
  .boardAnnouncement{top:30%; width:72%}
  .debtFreeTitle{font-size:36px}
}


/* v0.10.1 — hide the original baked-in center artwork beneath the new center */
.boardCenterMask{
  position:absolute;
  left:8.6%;
  right:8.6%;
  top:31%;
  bottom:9%;
  z-index:19;
  pointer-events:none;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.045), transparent 26%),
    repeating-conic-gradient(
      from 268deg at 50% 62%,
      rgba(201,181,92,.10) 0deg 1deg,
      transparent 1deg 8deg
    ),
    linear-gradient(180deg,#0b666a 0%,#0a5b60 55%,#084f54 100%);
  box-shadow:
    inset 0 0 0 2px rgba(203,169,65,.18),
    inset 0 0 55px rgba(0,0,0,.10);
}
.boardCenterBrand{
  z-index:20;
}
@media(max-width:820px){
  .boardCenterMask{
    left:8.8%;
    right:8.8%;
    top:31%;
    bottom:9%;
  }
}

.debtBackCelebration{
  position:fixed;
  inset:0;
  z-index:561;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.debtBackCelebration[hidden]{display:none}
.debtBackCard{
  min-width:min(560px,90vw);
  padding:20px 28px 24px;
  border-radius:28px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 32%),
    linear-gradient(145deg,#6b1830,#8d2445 46%,#4f1024);
  border:3px solid #f0c56a;
  color:#fff7de;
  box-shadow:0 24px 64px rgba(0,0,0,.58),0 0 44px rgba(181,42,90,.25);
  animation:debtFreeIn .25s ease-out;
}
.debtBackKicker{
  font:900 12px/1 system-ui,sans-serif;
  letter-spacing:2px;
  color:#ffd6b0;
  opacity:.98;
}
.debtBackTitle{
  margin-top:6px;
  font:900 44px/1 Georgia,"Times New Roman",serif;
  letter-spacing:1px;
  color:#fff4cb;
  text-shadow:0 3px 18px rgba(0,0,0,.34);
}
.debtBackPlayer{
  margin-top:7px;
  font:900 20px/1.2 system-ui,sans-serif;
  color:#fff0c9;
}
.debtBackCount{
  margin-top:8px;
  font:900 16px/1.2 system-ui,sans-serif;
  color:#ffd978;
}
.debtBackSub{
  margin-top:8px;
  font:800 14px/1.35 system-ui,sans-serif;
  color:#ffe4d4;
}


/* v0.10.4 definitive center architecture: center lives only inside board.svg */
#boardCenterMask,#boardCenterBrand,.boardCenterMask,.boardCenterBrand{display:none!important}


/* ===============================================================
   v0.11.0 PRESENTATION SHELL — presentation only, mechanics locked
   =============================================================== */

.arrivalExperience{
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(28,104,99,.32),transparent 36%),
    radial-gradient(circle at 50% 50%,#0b4b49 0,#062c2e 52%,#021719 100%);
}
.arrivalExperience[hidden]{display:none}
.arrivalTableGlow{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 8px),
    radial-gradient(ellipse at center,rgba(245,204,88,.07),transparent 56%);
  pointer-events:none;
}
.arrivalContent{
  position:relative;
  z-index:2;
  width:min(820px,94vw);
  display:grid;
  justify-items:center;
}
.arrivalEyebrow{
  margin-bottom:18px;
  color:#f5d36b;
  font:900 12px/1 system-ui,sans-serif;
  letter-spacing:2.4px;
}
.gameBox{
  position:relative;
  width:min(610px,76vw);
  aspect-ratio:5/3;
  perspective:1400px;
  transform-style:preserve-3d;
  transition:transform .7s ease;
}
.gameBoxBase{
  position:absolute;
  inset:3.2% 2.6% 0;
  border-radius:17px;
  background:linear-gradient(145deg,#9b6c2d,#513516);
  border:4px solid #d7aa49;
  box-shadow:0 36px 70px #000b, inset 0 0 25px #0005;
  transform:translateY(18px);
}
.gameBoxLid{
  position:absolute;
  inset:0;
  z-index:3;
  transform-origin:50% 2%;
  transform-style:preserve-3d;
  transition:transform 1.75s cubic-bezier(.2,.72,.15,1),filter .8s ease;
}
.gameBoxLid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
  border:5px solid #dcb753;
  box-shadow:0 26px 50px #000b,0 0 0 3px #352411;
}
.boxShadow{
  position:absolute;
  left:10%;
  right:10%;
  bottom:-10%;
  height:14%;
  border-radius:50%;
  background:#0009;
  filter:blur(20px);
  transition:opacity 1s ease,transform 1s ease;
}
.arrivalExperience.opening .gameBox{
  transform:scale(1.045) translateY(22px);
}
.arrivalExperience.opening .gameBoxLid{
  transform:translateY(-20px) rotateX(-104deg) scale(.98);
  filter:brightness(1.12);
}
.arrivalExperience.opening .boxShadow{
  opacity:.35;
  transform:scaleX(1.25);
}
.openBoxBtn{
  margin-top:30px;
  min-width:260px;
  padding:14px 28px;
  border-radius:999px;
  background:linear-gradient(#f2c94e,#c99821);
  color:#082d30;
  border:2px solid #fff0a2;
  box-shadow:0 10px 24px #0008,0 0 20px #f1c50e25;
  font:900 18px/1 system-ui,sans-serif;
  letter-spacing:1px;
}
.arrivalExperience.opening .openBoxBtn,
.arrivalExperience.opening .arrivalSecondary,
.arrivalExperience.opening .arrivalEyebrow,
.arrivalExperience.opening .arrivalFoot{
  opacity:0;
  transition:opacity .35s ease;
}
.arrivalSecondary{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.arrivalSecondary button,
.entryHelp button{
  background:#08383a;
  color:#f0d26c;
  border-color:#8e7333;
}
.arrivalFoot{
  margin-top:13px;
  color:#b9d3cd;
  font:700 12px/1.2 system-ui,sans-serif;
  letter-spacing:.6px;
}

.entryBackdrop{z-index:1900}
.entryModal{width:min(610px,94vw);text-align:center}
.entryKicker,.setupKicker,.joinKicker,.aboutKicker{
  color:#efcd64;
  font:900 11px/1 system-ui,sans-serif;
  letter-spacing:2.2px;
  text-align:center;
}
.entryIntro,.setupIntro{
  color:#c6dbd6;
  font:14px/1.45 system-ui,sans-serif;
}
.entryChoices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}
.entryChoice{
  min-height:118px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  background:#0a3739;
  color:#f3df9b;
  border:2px solid #9e813a;
}
.entryChoice b{font:900 17px/1.1 system-ui,sans-serif}
.entryChoice span{font:12px/1.35 system-ui,sans-serif;color:#bcd3ce}
.entryChoice.primaryEntry{
  background:linear-gradient(145deg,#b53270,#db4a90);
  color:#fff;
  border-color:#f28ab8;
}
.entryChoice.primaryEntry span{color:#ffe5f1}
.entryHelp{display:flex;justify-content:center;gap:8px;margin-top:14px}

.joinModal label{font-family:system-ui,sans-serif}
.joinModal .primaryBtn{width:100%;margin-top:12px}
.serverPendingNote{
  margin-top:13px;
  padding:11px;
  border-radius:10px;
  background:#08282a;
  border:1px solid #816c37;
  color:#bcd0cc;
  font:12px/1.4 system-ui,sans-serif;
}
.serverPendingNote b{color:#f1d06b}

.tableUtilities{
  display:grid;
  gap:8px;
  margin-top:16px;
}
.tableUtilityBtn{
  width:100%;
  display:grid;
  grid-template-columns:35px 1fr;
  gap:9px;
  align-items:center;
  text-align:left;
  padding:9px 10px;
  background:linear-gradient(145deg,#0a3b3c,#072d2f);
  border:1px solid #8e7534;
  color:#e9d78e;
}
.tableUtilityBtn .utilityIcon{
  width:31px;height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f1c50e;
  color:#153638;
  font:900 17px/1 system-ui,sans-serif;
  box-shadow:0 0 0 2px #67501d;
}
.tableUtilityBtn b{
  display:block;
  color:#f5e7ab;
  font:900 12px/1.1 system-ui,sans-serif;
}
.tableUtilityBtn small{
  display:block;
  margin-top:3px;
  color:#91b4ad;
  font:10px/1.2 system-ui,sans-serif;
}

.aboutModal{width:min(650px,94vw)}
.aboutModal p{font:14px/1.55 system-ui,sans-serif;color:#d8e5e1}
.aboutTag{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #ffffff20;
  text-align:center;
  color:#f1cf68;
  font:italic 800 15px/1.3 Georgia,serif;
}

.playerNameField{
  background:#082e30;
  border:1px solid #ffffff12;
  border-radius:12px;
  padding:10px;
  margin:9px 0;
}
.piecePicker{margin-top:9px}
.piecePickerLabel{
  margin-bottom:7px;
  color:#b9d1cc;
  font:800 10px/1 system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.pieceSwatches{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:5px;
}
.pieceSwatch{
  min-width:0;
  padding:5px 2px 6px;
  display:grid;
  justify-items:center;
  gap:3px;
  background:#061f21;
  border:1px solid #5c6d62;
  opacity:.9;
}
.pieceSwatch.selected{
  border:2px solid #f1d06a;
  box-shadow:0 0 14px color-mix(in srgb,var(--piece) 70%,transparent);
  transform:translateY(-1px);
}
.pieceSwatch.taken{opacity:.25}
.miniPawn{
  position:relative;
  display:block;
  width:18px;height:25px;
  filter:drop-shadow(0 2px 2px #0008);
}
.miniPawn::before{
  content:"";
  position:absolute;
  width:10px;height:10px;
  left:4px;top:0;
  border-radius:50%;
  background:var(--piece);
  border:1px solid #fff9;
}
.miniPawn::after{
  content:"";
  position:absolute;
  left:2px;top:9px;
  width:14px;height:15px;
  background:var(--piece);
  clip-path:polygon(30% 0,70% 0,76% 40%,100% 82%,100% 100%,0 100%,0 82%,24% 40%);
  border-radius:3px;
}
.swatchName{
  color:#c9dbd6;
  font:800 8px/1 system-ui,sans-serif;
}

@media(max-width:700px){
  .gameBox{width:90vw}
  .entryChoices{grid-template-columns:1fr}
  .pieceSwatches{grid-template-columns:repeat(3,1fr)}
}


/* v0.11.1 — landing-page modal stacking fix
   Rules/About must be usable before the box is opened. */
#rulesModal,
#aboutModal{
  z-index:2200 !important;
}
#rulesModal .modal,
#aboutModal .modal{
  position:relative;
  z-index:2201;
}


/* v0.11.2 — 5/6 player setup must fit real screens */
#setupModal{
  align-items:flex-start;
  overflow-y:auto;
  padding:18px;
}
#setupModal > .modal{
  margin:auto;
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Keep Start/Resume reachable even on a short browser window. */
#setupModal .modalActions{
  position:sticky;
  bottom:-24px;
  z-index:8;
  margin-left:-24px;
  margin-right:-24px;
  padding:12px 24px 20px;
  background:linear-gradient(0deg,#082e30 70%,rgba(8,46,48,.96) 88%,rgba(8,46,48,0));
}

/* 4–6 players: use the width instead of making a six-foot-tall modal. */
#setupModal .modal.manyPlayers{
  width:min(920px,97vw);
}
#setupModal .modal.manyPlayers #playerNameFields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
}
#setupModal .modal.manyPlayers .playerNameField{
  margin:0;
  padding:8px 9px;
}
#setupModal .modal.manyPlayers .playerNameField label{
  margin:0;
}
#setupModal .modal.manyPlayers .playerNameField input{
  padding:7px 9px;
}
#setupModal .modal.manyPlayers .piecePicker{
  margin-top:6px;
}
#setupModal .modal.manyPlayers .piecePickerLabel{
  margin-bottom:5px;
  font-size:9px;
}
#setupModal .modal.manyPlayers .pieceSwatches{
  gap:4px;
}
#setupModal .modal.manyPlayers .pieceSwatch{
  padding:3px 1px 4px;
}
#setupModal .modal.manyPlayers .miniPawn{
  width:15px;
  height:21px;
}
#setupModal .modal.manyPlayers .miniPawn::before{
  width:8px;
  height:8px;
  left:3.5px;
}
#setupModal .modal.manyPlayers .miniPawn::after{
  left:2px;
  top:7px;
  width:11px;
  height:13px;
}
#setupModal .modal.manyPlayers .swatchName{
  font-size:7px;
}
#setupModal .modal.manyPlayers .setupIntro{
  margin:7px 0 9px;
}
#setupModal .modal.manyPlayers h2{
  margin:7px 0;
}

/* Narrow screens fall back to one column and scroll cleanly. */
@media(max-width:760px){
  #setupModal{
    padding:8px;
  }
  #setupModal > .modal{
    max-height:calc(100vh - 16px);
  }
  #setupModal .modal.manyPlayers{
    width:min(560px,98vw);
  }
  #setupModal .modal.manyPlayers #playerNameFields{
    grid-template-columns:1fr;
  }
}


/* v0.11.3 — setup actions need breathing room on every player count */
#setupModal .modalActions{
  bottom:0;
  margin-bottom:-24px;
  padding-bottom:24px;
}

/* Four players also use the compact 2-column table layout. */
#setupModal .modal.manyPlayers #playerNameFields{
  margin-top:8px;
}


/* ===============================================================
   v0.11.4 HARD SETUP FIX
   Detect 4+ players from the actual generated player rows.
   No JS helper class is required.
   =============================================================== */

/* Four or more generated player rows = use the wide compact table. */
#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)){
  width:min(920px,97vw) !important;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) #playerNameFields{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px 10px !important;
  margin-top:8px;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .playerNameField{
  margin:0 !important;
  padding:8px 9px !important;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .playerNameField input{
  padding:7px 9px !important;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .piecePicker{
  margin-top:6px !important;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .piecePickerLabel{
  margin-bottom:5px !important;
  font-size:9px !important;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .pieceSwatches{
  gap:4px !important;
}

#setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .pieceSwatch{
  padding:3px 1px 4px !important;
}

/* Action bar always visible with a little room above it. */
#setupModal .modalActions{
  position:sticky !important;
  bottom:0 !important;
  z-index:20 !important;
  margin:12px -24px -24px !important;
  padding:16px 24px 24px !important;
  background:
    linear-gradient(0deg,#082e30 76%,rgba(8,46,48,.98) 88%,rgba(8,46,48,0) 100%) !important;
}

/* Shorter desktop windows: trim vertical chrome before forcing scrolling. */
@media (min-width:761px) and (max-height:900px){
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)){
    padding-top:14px;
  }
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .modalLogo{
    font-size:28px;
  }
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .modalTagline{
    margin-bottom:10px;
  }
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) h2{
    margin:6px 0;
  }
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) .setupIntro{
    margin:6px 0 8px;
  }
}

/* Mobile/narrow viewport: one column, scroll normally. */
@media(max-width:760px){
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)){
    width:min(560px,98vw) !important;
  }
  #setupModal > .modal:has(#playerNameFields > .playerNameField:nth-child(4)) #playerNameFields{
    grid-template-columns:1fr !important;
  }
}


/* ===============================================================
   v0.12.0 — PRIVATE LOBBY / INVITATION TABLE
   Front-end room state only. VPS replaces storage/sync later.
   =============================================================== */
.betaFlowModal{z-index:2250 !important}
.betaFlowModal .modal{position:relative;z-index:2251}
.betaFlowIntro{color:#c5d9d5;font:14px/1.45 system-ui,sans-serif}
.betaTinyNote{margin-top:10px;text-align:center;color:#87aaa4;font:11px/1.3 system-ui,sans-serif}
.betaWideBtn{width:100%;margin-top:14px}
.betaPieceLabel{margin:13px 0 7px;color:#e8cf70;font:900 10px/1 system-ui,sans-serif;letter-spacing:1px}
.betaPiecePicker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.betaPieceChoice{min-width:0;padding:8px 3px 7px;display:grid;justify-items:center;gap:5px;border:1px solid #45625b;background:#062729;color:#bdd3ce}
.betaPieceChoice:hover:not(:disabled){border-color:#caa944;transform:translateY(-1px)}
.betaPieceChoice.selected{border:2px solid #f1c50e;box-shadow:0 0 15px color-mix(in srgb,var(--piece) 55%,transparent)}
.betaPieceChoice.taken{opacity:.22}
.betaPieceChoice b{font:800 9px/1 system-ui,sans-serif}
.largeLobbyPawn{position:relative;display:block;width:24px;height:34px;filter:drop-shadow(0 3px 2px #0008)}
.largeLobbyPawn::before{content:"";position:absolute;width:13px;height:13px;left:5.5px;top:0;border-radius:50%;background:var(--piece,#ed4d93);border:1px solid #fff9}
.largeLobbyPawn::after{content:"";position:absolute;left:2px;top:11px;width:20px;height:22px;background:var(--piece,#ed4d93);clip-path:polygon(30% 0,70% 0,77% 40%,100% 82%,100% 100%,0 100%,0 82%,23% 40%);border-radius:4px}

.lobbyBackdrop{padding:14px;overflow:auto}
.lobbyModal{width:min(1020px,97vw)!important;max-height:calc(100vh - 28px);overflow:auto;padding:22px!important}
.lobbyTop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.lobbyTop h2{margin:6px 0 3px;font-size:29px}
.lobbyHostLine{color:#b8d1cb;font:700 13px/1.3 system-ui,sans-serif}
.roomCodeBlock{flex:0 0 190px;display:grid;justify-items:center;padding:10px 12px;border:1px solid #947934;border-radius:13px;background:#062c2e}
.roomCodeBlock span{color:#9eb8b2;font:900 9px/1 system-ui,sans-serif;letter-spacing:1.6px}
.roomCodeBlock strong{margin:5px 0 7px;color:#f1d067;font:900 26px/1 system-ui,sans-serif;letter-spacing:1.5px}
.roomCodeBlock button{width:100%;padding:7px;font-size:10px}
.inviteBar{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:15px;padding:13px 14px;border:1px solid #c59e3c;border-radius:12px;background:linear-gradient(135deg,#0b3f41,#092e31)}
.inviteText b{display:block;color:#f0d57a;font:900 14px/1.15 system-ui,sans-serif}
.inviteText span{display:block;margin-top:4px;color:#b9cfca;font:12px/1.35 system-ui,sans-serif}
.inviteLinkPreview{margin:6px 5px 0;color:#789e97;font:10px/1.25 ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobbySeats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}
.lobbySeat{position:relative;min-height:90px;border-radius:13px;overflow:hidden}
.emptySeat{display:grid;grid-template-columns:35px 1fr;grid-template-rows:1fr 1fr;column-gap:9px;align-items:center;padding:12px 12px 12px 52px;border:1px dashed #42615b;background:#06292b;color:#759891}
.emptySeat .seatNumber,.occupiedSeat .seatNumber{position:absolute;left:9px;top:9px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#052123;border:1px solid #5d756f;color:#9eb8b2;font:900 10px/1 system-ui,sans-serif}
.emptySeatIcon{grid-row:1/3;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;border:1px solid #42615b;font:300 23px/1 system-ui,sans-serif}
.emptySeat strong{align-self:end;font:900 11px/1.1 system-ui,sans-serif}
.emptySeat span{align-self:start;margin-top:3px;font:10px/1.2 system-ui,sans-serif}
.occupiedSeat{display:grid;grid-template-columns:50px 1fr auto;gap:9px;align-items:center;padding:10px 11px 10px 45px;border:1px solid color-mix(in srgb,var(--piece) 65%,#8e7636);background:radial-gradient(circle at 15% 50%,color-mix(in srgb,var(--piece) 16%,transparent),transparent 48%),#06292b;box-shadow:inset 0 0 0 1px #ffffff08}
.seatPawnWrap{display:grid;place-items:center;width:46px;height:58px;border-radius:10px;background:#041f21;border:1px solid #ffffff14}
.seatIdentity strong{display:block;color:#f2ead0;font:900 15px/1.15 system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatIdentity span{display:block;margin-top:5px;color:#91ada7;font:10px/1 system-ui,sans-serif}
.seatStatus{align-self:start;padding:4px 6px;border-radius:999px;border:1px solid #8d7435;color:#e9cf74;background:#092123;font:900 8px/1 system-ui,sans-serif;letter-spacing:.7px}
.removeLobbyPlayer{position:absolute;right:7px;bottom:7px;width:23px;height:23px;display:grid;place-items:center;padding:0;border-radius:50%;color:#9cb1ac;background:#062123;border:1px solid #3f5b55;font-size:15px}
.lobbyHow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.lobbyHow>div{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;padding:9px;border:1px solid #ffffff12;border-radius:10px;background:#082d2f}
.lobbyHow>div>b{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#f1c50e;color:#173638;font:900 12px/1 system-ui,sans-serif}
.lobbyHow strong{display:block;color:#e8ddaf;font:900 10px/1.1 system-ui,sans-serif}
.lobbyHow small{display:block;margin-top:3px;color:#89aaa4;font:9px/1.25 system-ui,sans-serif}
.lobbyActions{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin-top:14px;padding-top:13px;border-top:1px solid #ffffff16}
.lobbyTestTools{display:flex;align-items:center;gap:10px}
.lobbyTestTools span{color:#789992;font:10px/1.25 system-ui,sans-serif}
.lobbyStartWrap{display:flex;align-items:center;gap:10px}
.lobbyPlayerCount{color:#a8c2bc;font:800 10px/1 system-ui,sans-serif;white-space:nowrap}
.lobbyStartBtn{min-width:180px}
.lobbyUtilityLinks{display:flex;justify-content:center;gap:7px;margin-top:10px}
.lobbyUtilityLinks button{padding:6px 10px;color:#d9c577;background:#062729;border-color:#6f6333;font-size:10px}
.fullTable .inviteBar{opacity:.72}

.joinInviteLine{color:#c2d7d2;font:13px/1.45 system-ui,sans-serif}
.waitingPieceWrap{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 10px;border-radius:50%;border:1px solid #917a3a;background:#062729}
.joinedWaitingModal{text-align:center}
.waitingCode{margin:13px 0;color:#93afa9;font:900 10px/1 system-ui,sans-serif;letter-spacing:1px}
.waitingCode b{margin-left:6px;color:#f1cf68;font-size:16px}
#leaveWaitingBtn{margin-top:12px}

#rulesModal,#aboutModal{z-index:2350!important}

@media(max-width:760px){
  .betaPiecePicker{grid-template-columns:repeat(3,1fr)}
  .lobbyTop{display:block}
  .roomCodeBlock{margin-top:12px}
  .inviteBar{grid-template-columns:1fr}
  .lobbySeats{grid-template-columns:1fr}
  .lobbyHow{grid-template-columns:1fr}
  .lobbyActions{grid-template-columns:1fr}
  .lobbyTestTools{display:grid}
  .lobbyStartWrap{justify-content:space-between}
}

/* ===============================================================
   v0.12.1 — SERVER-AUTHORITATIVE GAMEPLAY CONTROLS
   Browser submits player intent only; canonical state comes back from VPS.
   =============================================================== */

.billActions{
  display:block;
  margin-top:10px;
}
.billActions[hidden],
.legacyBillActions[hidden],
.billPaymentStepper[hidden],
.bankruptcyStatus[hidden]{
  display:none!important;
}
.legacyBillActions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.billPaymentStepper{
  padding:11px;
  border:1px solid #9a7b35;
  border-radius:12px;
  background:linear-gradient(145deg,#082f31,#062628);
}
.billPaymentKicker{
  text-align:center;
  color:#f1c50e;
  font:900 10px/1 system-ui,sans-serif;
  letter-spacing:1.4px;
  margin-bottom:9px;
}
.billPaymentStepperRow{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  gap:8px;
  align-items:center;
}
.billPaymentStepperRow>button{
  min-height:44px;
  padding:0;
  font:900 24px/1 system-ui,sans-serif;
}
.billPaymentSelection{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:4px;
  padding:7px 6px;
  border-radius:9px;
  background:#041f21;
  border:1px solid #ffffff12;
}
.billPaymentSelection strong{
  color:#fff0b2;
  font:900 15px/1 system-ui,sans-serif;
}
.billPaymentSelection span{
  color:#a9c8c1;
  font:800 11px/1 system-ui,sans-serif;
}
#paySelectedBtn{
  width:100%;
  margin-top:8px;
  background:linear-gradient(#f0d267,#d2a735);
  border-color:#fff0a5;
  color:#173638;
}
.bankruptcyStatus{
  margin-top:9px;
  padding:7px 9px;
  border-radius:9px;
  border:1px solid #a86767;
  background:#4b2027;
  color:#ffbbb6;
  text-align:center;
  font:900 10px/1.25 system-ui,sans-serif;
  letter-spacing:.6px;
}
.bankruptcyCountdown{
  margin-top:6px;
  color:#eeaaa5;
  font:900 9px/1.2 system-ui,sans-serif;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.bankruptcyCountdown.available{
  color:#ff817c;
}
.decisionBox .primaryBtn{
  width:100%;
}
.decisionBox button{
  max-width:100%;
}
@media(max-width:820px){
  .legacyBillActions{
    grid-template-columns:1fr;
  }
}


/* v0.12.2 — SERVER-AUTHORITATIVE EVENT LOG */
#log{
  min-height:96px;
}
.logLine{
  padding-left:7px;
  border-left:2px solid transparent;
}
.logLine.positive{
  border-left-color:#6fb77a;
}
.logLine.negative{
  border-left-color:#c86c75;
}
.logLine.neutral{
  border-left-color:#547c7a;
}
.logSeq{
  color:#789894;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2px;
}


/* v0.12.3 — CANONICAL MULTIPLAYER PRESENTATION
   Presentation only. Gameplay remains server authoritative. */
.boardAnnouncement.bankruptcy{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,183,137,.10),transparent 42%),
    linear-gradient(135deg,#4b151d,#7a202c 56%,#381118);
  border:2px solid #d97a70;
  color:#fff0e4;
  box-shadow:
    0 10px 34px #000a,
    0 0 24px rgba(181,49,58,.24);
  animation:
    boardAnnouncementIn .2s ease-out,
    bankruptcyAnnouncementPulse .85s ease-in-out 2 alternate;
}
.boardAnnouncement.bankruptcy .boardAnnouncementTitle{
  color:#ffd1bb;
  text-shadow:0 2px #3b0c12;
}
.boardAnnouncement.bankruptcy .boardAnnouncementSub{
  color:#ffe6dc;
}
@keyframes bankruptcyAnnouncementPulse{
  from{
    filter:saturate(.92);
    transform:translate(-50%,-50%) scale(1);
  }
  to{
    filter:saturate(1.18);
    transform:translate(-50%,-50%) scale(1.018);
  }
}