:root{
  color-scheme:light;
  --ink:#173c33;
  --green:#17483d;
  --deep:#10362e;
  --cream:#f4f1e8;
  --paper:#fffdf7;
  --gold:#b98a37;
  --muted:#758176;
  --border:#dadfd4;
  font-family:Segoe UI,Arial,sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--cream)
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:radial-gradient(ellipse at 15% 10%,#fffcf4 0,transparent 65%),var(--cream)
}
button,input,select{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer;
  min-height:40px;
  border:1px solid #cdd5c9;
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  font-weight:600;
  padding:10px 16px;
  transition:background .15s,transform .15s,border-color .15s
}
button:hover:not(:disabled){
  background:#e5ecdf;
  border-color:#9fad98
}
button:active:not(:disabled){
  transform:translateY(1px)
}
button:disabled{
  opacity:.4;
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #e1b34e;
  outline-offset:3px
}
.primary{
  background:var(--green);
  color:#fff9eb;
  border-color:var(--green)
}
.primary:hover:not(:disabled){
  background:#24594c;
  color:white;
  border-color:#24594c
}
.quiet{
  background:transparent;
  border-color:transparent
}
.danger{
  color:#a94d3e
}
.selected{
  background:#e1ead9;
  border-color:var(--green)
}
a{
  color:inherit
}
h1,h2,h3,p{
  margin:0
}
h1,h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.04em
}
h1{
  font-size:32px
}
h2{
  font-size:28px
}
h3{
  font-size:13px;
  font-weight:600
}
p{
  line-height:1.65
}
input,select{
  min-height:45px;
  padding:11px 13px;
  background:var(--paper);
  border:1px solid #cdd5c9;
  border-radius:7px;
  color:var(--ink);
  max-width:100%
}
label{
  display:block;
  font-size:12px;
  font-weight:600
}
input:focus,select:focus{
  border-color:var(--green)
}
.eyebrow{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--muted)
}
.muted{
  color:var(--muted)
}
.masthead{
  height:98px;
  max-width:1512px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
  border-bottom:1px solid var(--border);
  gap:20px
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none
}
.brand-mark{
  width:44px;
  height:48px;
  border:1px solid var(--gold);
  background:var(--green);
  color:#e5c67c;
  display:grid;
  place-items:center;
  font:32px Georgia;
  box-shadow:inset 0 0 0 4px var(--green),inset 0 0 0 5px #9e883d;
  border-radius:6px
}
.brand small{
  display:block;
  font-size:9px;
  letter-spacing:.3em;
  font-weight:700;
  line-height:1.8
}
.brand strong{
  font:700 22px Georgia;
  letter-spacing:.02em
}
.table-info{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  letter-spacing:.15em;
  color:var(--muted)
}
.code-button{
  padding:7px 10px;
  min-height:30px;
  font-size:10px;
  letter-spacing:.12em;
  background:#e7ecdf;
  border:0
}
.connection{
  height:6px;
  width:6px;
  background:#599278;
  border-radius:50%
}
.connection.offline{
  background:#c37947
}
.masthead>.quiet{
  font-size:12px;
  font-weight:500
}
main{
  max-width:1512px;
  margin:auto;
  padding:28px 42px 36px;
  min-height:calc(100vh - 158px)
}
footer{
  max-width:1512px;
  margin:auto;
  padding:20px 42px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#889082
}
footer span:last-child{
  font-size:9px;
  letter-spacing:.14em
}
.loading{
  text-align:center;
  padding:100px 20px;
  font:24px Georgia
}
.loading p{
  font:14px Segoe UI;
  margin:15px
}
.home-layout{
  display:grid;
  grid-template-columns:minmax(360px,.82fr) minmax(400px,1.18fr);
  gap:75px;
  align-items:center;
  padding:26px 0 32px
}
.welcome{
  max-width:465px
}
.welcome h1{
  font-size:64px;
  line-height:1.03;
  margin:18px 0 21px
}
.welcome>p{
  color:#6c7b6d;
  font-size:15px
}
.welcome-rule{
  width:42px;
  height:2px;
  background:var(--gold);
  margin:25px 0
}
.welcome form>label{
  margin-bottom:8px
}
.welcome #player-name{
  width:100%;
  margin-bottom:18px
}
.board-choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:8px 0 20px
}
.board-choices label{
  cursor:pointer;
  position:relative
}
.board-choices input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px
}
.board-choices span{
  padding:13px 11px;
  border:1px solid #d0d8ca;
  border-radius:7px;
  display:block;
  background:#fffdf77a
}
.board-choices strong{
  display:block;
  font-size:13px
}
.board-choices small{
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  display:block;
  margin-top:5px
}
.board-choices input:checked+span{
  border-color:var(--green);
  background:#e5ecdf;
  box-shadow:inset 0 0 0 1px var(--green)
}
.board-choices input:focus-visible+span{
  outline:3px solid var(--gold);
  outline-offset:3px
}
.home-actions{
  display:flex;
  gap:9px
}
.home-actions button{
  flex:1;
  min-height:46px
}
.join-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:25px 0 13px;
  font-size:9px;
  letter-spacing:.1em;
  color:var(--muted)
}
.join-divider:after{
  content:'';
  height:1px;
  flex:1;
  background:var(--border)
}
.join-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.join-form input{
  min-width:0;
  flex:1;
  width:160px;
  letter-spacing:.09em
}
.join-form .quiet{
  width:100%;
  text-align:left;
  padding:5px 0;
  font-size:11px;
  min-height:24px;
  text-decoration:underline;
  text-underline-offset:4px
}
.home-board{
  align-self:center;
  max-width:680px
}
.board-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px
}
.small-star{
  color:var(--gold);
  font-size:25px
}
.home-board>img{
  width:100%;
  display:block;
  border:10px solid var(--deep);
  outline:1px solid #b7c5ad;
  border-radius:4px;
  box-shadow:0 24px 48px -28px #304b3690
}
.home-board-note{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:22px 0 0;
  align-items:center
}
.home-board-note strong{
  font:18px Georgia
}
.home-board-note span{
  font-size:10px;
  color:var(--muted)
}
.game-layout{
  display:grid;
  grid-template-columns:minmax(440px,1fr) 348px;
  gap:28px;
  max-width:1260px;
  margin:auto;
  align-items:start
}
.board-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 1px 18px;
  gap:15px
}
.board-heading h1{
  font-size:27px;
  margin-top:5px
}
.turn-timer{
  font:12px Segoe UI;
  color:var(--muted);
  white-space:nowrap;
  border:1px solid var(--border);
  padding:7px 10px;
  border-radius:20px
}
.board-stage{
  position:relative;
  border-radius:8px;
  border:9px solid var(--deep);
  background:#adcfa2;
  box-shadow:0 14px 35px -20px #27463170;
  overflow:hidden
}
.board-map{
  position:relative;
  aspect-ratio:1
}
.board-art{
  display:block;
  width:100%;
  height:100%
}
.board-hits,.pieces{
  position:absolute;
  inset:0;
  pointer-events:none
}
.space-hit{
  position:absolute;
  min-height:0;
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
  pointer-events:auto;
  transition:background .15s;
  overflow:hidden
}
.space-hit:hover:not(:disabled){
  background:#fff8c54d;
  border:2px solid #d8b24d;
  z-index:2
}
.space-hit:focus-visible{
  outline-offset:-4px;
  z-index:3
}
.space-hit.eligible{
  background:#ffd96840;
  box-shadow:inset 0 0 0 2px #ae8627;
  z-index:2
}
.space-hit.eligible:hover{
  background:#ffe89588
}
.owner-mark{
  position:absolute;
  bottom:2px;
  left:3px;
  right:3px;
  height:5px;
  background:var(--owner);
  border:1px solid #17382c;
  border-radius:2px
}
.space-hit.mortgaged .owner-mark{
  background:repeating-linear-gradient(45deg,var(--owner) 0,var(--owner) 3px,#16382d 3px,#16382d 6px)
}
.buildings{
  position:absolute;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  font-size:14px;
  font-weight:800;
  color:#154c35;
  background:#f5f5d9cc;
  line-height:1;
  padding:1px 3px;
  white-space:nowrap;
  border-radius:2px
}
.piece{
  position:absolute;
  transform:translate(-50%,-50%);
  height:clamp(10px,var(--piece-size,26px),30px);
  width:clamp(10px,var(--piece-size,26px),30px);
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:4;
  transition:left .18s linear,top .18s linear
}
.piece .token-image{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto
}
.piece.active{
  z-index:5
}
.board-prompt{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:52%;
  padding:25px 23px;
  background:#fffdf7f5;
  border:1px solid #e0e4d6;
  border-radius:12px;
  box-shadow:0 10px 25px -12px #173a2d88;
  text-align:center;
  z-index:5;
  max-height:74%;
  overflow:auto
}
.board-prompt .eyebrow{
  color:#8a804f;
  font-size:9px
}
.board-prompt h2{
  font-size:27px;
  margin:10px 0 9px;
  line-height:1.12
}
.board-prompt p{
  font-size:12px;
  line-height:1.6;
  color:#71806d
}
.prompt-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:17px;
  max-height:165px;
  overflow:auto
}
.prompt-actions button{
  font-size:11px;
  padding:10px 13px;
  min-height:38px
}
.waiting{
  color:#8a9685;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px
}
.waiting>span{
  height:5px;
  width:5px;
  background:#7c9b76;
  border-radius:50%
}
.large-code{
  font-size:31px;
  letter-spacing:.2em;
  font-weight:600;
  margin:20px 0 10px
}
.dice{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  margin-top:4px;
  height:42px;
  color:var(--green)
}
.dice>span{
  font-family:Segoe UI Symbol,sans-serif;
  font-size:44px;
  line-height:1
}
.speed-die{
  font-size:10px;
  padding:8px;
  border-radius:5px;
  background:#c0684c;
  color:#fff
}
.ultimate .board-prompt{
  width:40%;
  padding:15px
}
.ultimate .board-prompt h2{
  font-size:22px
}
.ultimate .board-prompt p{
  font-size:11px
}
.action-bar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:15px 0 0;
  align-items:center
}
.action-bar button{
  flex:1;
  padding:9px 10px;
  font-size:11px;
  min-width:60px
}
.action-bar .primary{
  flex:1.2
}
.bar-spacer{
  flex:1
}
.mode-hint{
  font-size:12px;
  color:#6f7e65;
  padding:10px;
  text-align:center
}
.mode-hint button{
  padding:4px 7px;
  min-height:25px
}
.sidebar{
  padding-top:8px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3px 3px;
  gap:10px
}
.section-heading h3{
  font-size:14px;
  font-weight:600
}
.section-heading>span{
  font-size:9px;
  letter-spacing:.14em;
  color:var(--muted)
}
.players{
  display:flex;
  flex-direction:column;
  gap:8px
}
.player-panel{
  border:1px solid var(--deep);
  border-radius:9px;
  background:var(--green);
  color:#f4f4dd;
  overflow:hidden;
  box-shadow:0 3px 9px -6px #15392d99
}
.player-panel.current-player{
  border-color:var(--player);
  box-shadow:0 0 0 1px var(--player)
}
.player-heading{
  width:100%;
  display:flex;
  gap:11px;
  align-items:center;
  background:transparent;
  color:inherit;
  padding:13px 14px;
  border:0;
  min-height:73px;
  text-align:left;
  border-radius:0
}
.player-heading:hover:not(:disabled){
  background:#245344;
  border:0
}
.player-token{
  height:37px;
  width:37px;
  background:#f1f2d8;
  border-radius:7px;
  display:grid;
  place-items:center;
  border-bottom:3px solid var(--player);
  flex-shrink:0
}
.token-image{
  width:31px;
  height:31px;
  object-fit:contain;
  image-rendering:auto
}
.player-identity{
  flex:1;
  min-width:0
}
.player-identity strong{
  font-size:13px;
  display:flex;
  align-items:center;
  gap:7px;
  overflow-wrap:anywhere
}
.player-identity small{
  font-size:7px;
  letter-spacing:.08em;
  color:#c5cdb8;
  border:1px solid #688674;
  padding:2px 3px;
  border-radius:3px
}
.player-identity>span{
  display:block;
  font-size:10px;
  font-weight:400;
  color:#b5c6ab;
  margin-top:5px
}
.player-cash{
  font-size:17px;
  font-weight:600;
  letter-spacing:-.04em;
  color:#e7d696;
  font-variant-numeric:tabular-nums
}
.chevron{
  font-size:14px;
  font-weight:400;
  color:#b9c9b1
}
.player-details{
  border-top:1px solid #52735d;
  padding:15px 16px
}
.ownership-grid{
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap
}
.ownership-group{
  display:flex;
  gap:3px
}
.ownership{
  min-height:0;
  width:16px;
  height:20px;
  padding:0;
  border:1px solid var(--group);
  background:transparent;
  border-radius:2px;
  opacity:.55
}
.ownership.owned{
  background:var(--group);
  opacity:1
}
.ownership:hover:not(:disabled){
  border-color:#eee7bf;
  background:var(--group);
  opacity:1
}
.player-stats{
  display:flex;
  gap:15px;
  font-size:10px;
  color:#bccdb2;
  padding-top:15px
}
.net-worth{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #52735d;
  margin-top:13px;
  padding-top:12px;
  font-size:10px;
  color:#b7c9ac
}
.net-worth strong{
  font-size:12px;
  color:#e8eccf
}
.seat-note{
  margin-top:10px;
  font-size:11px;
  color:#c49145
}
.player-panel .seat-note{
  color:#e6ce8b
}
.token-select{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.token-select button{
  min-width:39px;
  min-height:42px;
  padding:4px;
  background:#295445;
  border-color:#618374
}
.token-select button.selected{
  background:#c6d6b9;
  border-color:#dccc8d
}
.token-select button.quiet{
  background:transparent;
  font-size:10px;
  width:100%;
  min-height:24px;
  color:#e4c99b;
  border-color:transparent
}
.bankrupt{
  opacity:.5
}
.bank-panel{
  border:1px solid #d1d8c7;
  background:#e8edde;
  border-radius:8px
}
.bank-panel summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  padding:13px 16px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  list-style:none
}
.bank-panel summary::-webkit-details-marker{
  display:none
}
.bank-panel>div{
  display:flex;
  flex-direction:column;
  padding:0 16px 14px;
  gap:9px;
  font-size:11px;
  color:#6d7e67
}
.bank-panel>div span{
  display:flex;
  justify-content:space-between
}
.history-panel{
  border:1px solid var(--border);
  background:#fffdf780;
  border-radius:9px;
  overflow:hidden
}
.history-panel .section-heading{
  border-bottom:1px solid var(--border);
  padding:15px 17px
}
.history-panel .section-heading>span{
  color:#7e9672;
  font-size:8px;
  border:1px solid #cad6bf;
  border-radius:3px;
  padding:3px 5px
}
.history-panel ol{
  padding:0;
  margin:0;
  list-style:none;
  height:245px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#cdd6c6 transparent
}
.history-panel li{
  display:flex;
  gap:13px;
  padding:13px 16px;
  border-bottom:1px solid #e4e7dc;
  font-size:11px;
  line-height:1.6;
  color:#6c7c65
}
.history-panel time{
  color:#94a08a;
  font-size:9px;
  font-variant-numeric:tabular-nums;
  padding-top:2px;
  white-space:nowrap
}
.history-panel li.history-empty{
  display:block;
  padding:23px;
  color:#8e9984;
  font-size:12px;
  text-align:center
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0
}
dialog{
  border:1px solid #ccd5c3;
  border-radius:14px;
  padding:35px;
  width:min(640px,calc(100vw - 30px));
  max-height:85vh;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 20px 70px #0a302b4d
}
dialog::backdrop{
  background:#0f352b66;
  backdrop-filter:blur(3px)
}
dialog h2{
  font-size:34px;
  margin:10px 0 14px
}
dialog p{
  color:#75806d;
  margin:10px 0;
  font-size:13px
}
.dialog-close{
  position:absolute;
  right:10px;
  top:10px;
  border:0;
  background:transparent;
  font-size:25px;
  min-height:30px;
  line-height:1;
  padding:5px 10px;
  font-weight:400
}
.dialog-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:23px
}
.deed-heading{
  border-top:13px solid var(--group);
  margin-top:12px;
  padding-top:6px
}
.deed-values{
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin:20px 0;
  color:#818a78;
  font-size:11px
}
.deed-values strong{
  display:block;
  font-size:17px;
  color:var(--ink);
  margin-top:5px
}
.rent-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
.rent-table caption{
  text-align:left;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--muted);
  padding-bottom:12px;
  text-transform:uppercase
}
.rent-table th{
  text-align:left;
  font-weight:400
}
.rent-table td{
  text-align:right
}
.rent-table th,.rent-table td{
  border-bottom:1px solid #e3e7db;
  padding:8px 0
}
.rule-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin:20px 0
}
#settings-form>label{
  margin:17px 0
}
#settings-form select{
  display:block;
  width:100%;
  margin-top:7px
}
.trade-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.trade-side{
  background:#f0f3e9;
  padding:17px;
  border-radius:8px
}
.trade-side h3{
  font-size:14px
}
.trade-cash{
  margin:13px 0
}
.trade-cash>strong{
  font-size:25px;
  color:var(--green);
  font-variant-numeric:tabular-nums
}
.trade-cash>div{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:9px
}
.trade-cash button{
  padding:6px;
  font-size:9px;
  min-height:29px
}
.trade-properties{
  display:flex;
  flex-direction:column;
  gap:5px;
  max-height:220px;
  overflow:auto
}
.trade-properties button{
  text-align:left;
  font-size:11px;
  font-weight:400;
  padding:8px
}
.trade-properties button:disabled{
  opacity:1
}
.trade-properties .included{
  border-color:#719167;
  background:#dce8d1
}
.trade-check{
  margin-right:8px
}
#toast{
  position:fixed;
  left:50%;
  bottom:25px;
  transform:translate(-50%,15px);
  background:var(--deep);
  color:#fff6da;
  border-radius:8px;
  box-shadow:0 8px 20px #173c3330;
  padding:13px 23px;
  opacity:0;
  pointer-events:none;
  z-index:99;
  font-size:12px;
  max-width:90vw;
  text-align:center;
  transition:opacity .2s,transform .2s
}
#toast.visible{
  opacity:1;
  transform:translate(-50%,0)
}
#toast.error{
  background:#853f31
}
@media(min-width:1450px){
  .game-layout{
    grid-template-columns:minmax(440px,1fr) 370px
  }
  .board-prompt h2{
    font-size:32px
  }
  .board-prompt p{
    font-size:13px
  }
  .prompt-actions button{
    font-size:12px
  }
  .history-panel ol{
    height:290px
  }
}
@media(max-width:1100px){
  .masthead{
    padding:0 25px
  }
  .table-info{
    font-size:9px;
    gap:8px
  }
  main{
    padding:24px 25px
  }
  .home-layout{
    gap:35px;
    grid-template-columns:minmax(310px,.9fr) minmax(320px,1fr)
  }
  .welcome h1{
    font-size:53px
  }
  .home-board-note{
    flex-direction:column;
    align-items:flex-start
  }
  .game-layout{
    grid-template-columns:minmax(350px,1fr) 290px;
    gap:19px
  }
  .player-heading{
    padding:12px 10px;
    gap:8px
  }
  .player-cash{
    font-size:15px
  }
  .player-identity strong{
    font-size:12px
  }
  .player-token{
    height:32px;
    width:32px
  }
  .player-identity small{
    display:none
  }
  .board-prompt{
    padding:17px;
    width:57%
  }
  .board-prompt h2{
    font-size:24px
  }
  .board-heading h1{
    font-size:23px
  }
  .action-bar button{
    padding:8px 6px;
    font-size:10px
  }
  .ownership-grid{
    gap:8px 10px
  }
  .ownership{
    width:14px;
    height:18px
  }
}
@media(max-width:800px){
  .masthead{
    height:80px;
    padding:0 20px
  }
  .brand-mark{
    height:40px;
    width:35px;
    font-size:25px
  }
  .brand strong{
    font-size:17px
  }
  .brand small{
    font-size:7px
  }
  .masthead>.quiet{
    font-size:10px;
    padding:7px
  }
  .table-info{
    gap:7px
  }
  .table-info>span:not(.connection){
    display:none
  }
  main{
    padding:22px 20px
  }
  .home-layout{
    grid-template-columns:1fr;
    gap:35px;
    padding:10px 0
  }
  .welcome{
    max-width:520px;
    margin:auto;
    width:100%
  }
  .welcome h1{
    font-size:56px
  }
  .home-board{
    width:100%;
    max-width:520px;
    margin:auto
  }
  .game-layout{
    grid-template-columns:1fr;
    max-width:660px;
    gap:27px
  }
  .sidebar{
    padding-top:0;
    gap:11px
  }
  .player-heading{
    padding:12px 16px
  }
  .player-cash{
    font-size:19px
  }
  .player-identity strong{
    font-size:14px
  }
  .player-identity small{
    display:inline-block
  }
  .ownership{
    width:18px;
    height:22px
  }
  .history-panel ol{
    height:190px
  }
  .history-panel li{
    font-size:12px
  }
  .board-prompt{
    width:50%
  }
  .board-prompt h2{
    font-size:30px
  }
  .board-heading h1{
    font-size:27px
  }
  .action-bar button{
    font-size:11px
  }
  .home-board-note{
    flex-direction:row;
    align-items:center
  }
  .player-stats{
    font-size:11px
  }
  footer{
    padding:20px
  }
}
@media(max-width:480px){
  .masthead{
    padding:0 14px;
    gap:10px
  }
  .masthead>.quiet{
    width:75px;
    line-height:1.3
  }
  .code-button{
    font-size:8px;
    padding:6px
  }
  .table-info{
    letter-spacing:.04em
  }
  .connection{
    display:none
  }
  main{
    padding:20px 14px
  }
  .welcome h1{
    font-size:48px
  }
  .board-choices span{
    padding:12px 8px
  }
  .board-choices small{
    font-size:9px
  }
  .board-heading h1{
    font-size:23px
  }
  .board-heading .eyebrow{
    font-size:9px
  }
  .turn-timer{
    font-size:10px
  }
  .board-stage{
    border-width:5px
  }
  .board-prompt,.ultimate .board-prompt{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    max-height:none;
    border-radius:0;
    border:0;
    border-top:5px solid var(--deep);
    padding:20px;
    background:var(--paper)
  }
  .board-prompt h2,.ultimate .board-prompt h2{
    font-size:27px
  }
  .board-prompt p,.ultimate .board-prompt p{
    font-size:12px
  }
  .prompt-actions{
    max-height:180px;
    margin-top:13px
  }
  .piece{
    height:23px;
    width:23px
  }
  .piece .token-image{
    width:20px;
    height:20px
  }
  .owner-mark{
    height:3px;
    bottom:1px
  }
  .action-bar{
    gap:6px
  }
  .action-bar button{
    flex:1 1 22%;
    min-width:65px
  }
  .buildings{
    font-size:10px
  }
  .home-board>img{
    border-width:6px
  }
  .home-board-note strong{
    font-size:15px
  }
  .home-board-note span{
    font-size:9px;
    white-space:nowrap
  }
  dialog{
    padding:27px 23px
  }
  dialog h2{
    font-size:29px
  }
  .trade-grid{
    grid-template-columns:1fr;
    gap:12px
  }
  .trade-properties{
    max-height:160px
  }
  .rule-grid{
    gap:12px
  }
  .deed-values{
    gap:18px
  }
  .bar-spacer{
    display:none
  }
  footer{
    padding:16px 14px;
    font-size:9px
  }
  footer span:last-child{
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    transition:none!important;
    animation:none!important
  }
}
.board-view-controls{
  display:flex;
  align-items:center;
  gap:7px
}
.board-view-controls>button{
  font-size:10px;
  padding:6px;
  min-height:28px;
  white-space:nowrap
}
.trade-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--border);
  font-size:11px
}
.trade-card small{
  display:block;
  margin-top:4px;
  color:var(--muted)
}
.trade-card>div{
  display:flex;
  gap:4px
}
.trade-card button{
  min-height:28px;
  padding:4px 9px
}
.resume-table{
  margin:0 0 20px
}
.resume-table button{
  width:100%
}
@media(min-width:801px){
  .at-table .masthead{
    height:80px
  }
  .at-table main{
    padding-top:20px;
    padding-bottom:20px
  }
  .game-layout{
    max-width:min(1260px,calc(max(450px,100vh - 240px) + 376px));
    grid-template-columns:minmax(0,1fr) 348px
  }
  .board-heading h1{
    font-size:23px
  }
  .board-prompt{
    width:57%;
    padding:18px
  }
  .board-prompt h2{
    font-size:25px
  }
  .board-prompt p{
    font-size:11px
  }
  .board-prompt .dice{
    height:35px
  }
  .board-prompt .dice>span{
    font-size:37px
  }
  .sidebar .players{
    max-height:max(400px,calc(100vh - 360px));
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:#b7c3ad transparent;
    padding:2px
  }
  .history-panel ol{
    height:120px
  }
  .sidebar .player-heading{
    min-height:66px
  }
  .enlarged-board .game-layout{
    max-width:1260px
  }
  .enlarged-board .sidebar .players{
    max-height:480px
  }
  .enlarged-board .board-prompt h2{
    font-size:30px
  }
}
@media(min-width:1450px){
  .game-layout{
    max-width:min(1260px,calc(max(450px,100vh - 240px) + 398px));
    grid-template-columns:minmax(0,1fr) 370px
  }
}
@media(max-width:480px){
  .board-view-controls>button{
    display:none
  }
  .board-view-controls{
    gap:0
  }
}
.player-panel{
  flex-shrink:0
}
[data-board=ultimate] .ownership{width:10px;height:13px}[data-board=ultimate] .ownership-grid{gap:7px 8px}[data-board=ultimate] .ownership-group{gap:2px}
.welcome .shared-note{font-size:12px;line-height:1.6;margin:0 0 18px;color:var(--muted)}

.settings-board-preview { display:block; width:180px; max-width:100%; height:auto; margin:12px auto 20px; }

.buildings img { width:9px; height:10px; object-fit:contain; vertical-align:middle; }
.dice .die-face { display:inline-block; width:38px; height:38px; background-size:600% 100%; background-repeat:no-repeat; }

/* The PNG silhouette carries the player colour; no token badge. */
.piece .token-image { width:100%; height:100%; }
.ownership-grid { display:block; }
.ownership-shared,.ownership-track { display:flex; flex-wrap:wrap; gap:9px 12px; }
.ownership-colours { margin-top:12px; padding-top:12px; border-top:1px solid #ffffff26; }
.ownership-track + .ownership-track { margin-top:12px; padding-top:12px; border-top:1px solid #ffffff18; }
.game-layout.with-trade { grid-template-areas:'trade board players'; grid-template-columns:280px minmax(350px,1fr) 280px; gap:18px; max-width:min(1440px,calc(max(380px,100vh - 240px) + 596px)); }
.with-trade .trade-panel { grid-area:trade; }
.with-trade .board-column { grid-area:board; }
.with-trade .sidebar { grid-area:players; }
.enlarged-board .game-layout.with-trade { max-width:1440px; }
.trade-panel { position:sticky; top:16px; max-height:calc(100vh - 132px); overflow:auto; background:var(--paper); border:1px solid var(--border); border-radius:9px; padding:14px; scrollbar-width:thin; }
.trade-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.trade-panel-heading h2 { margin:0; font:23px Georgia,serif; }
.trade-panel>p { font-size:12px; line-height:1.5; margin:9px 0 14px; }
.trade-partners { display:grid; gap:8px; }
.trade-panel .trade-grid { grid-template-columns:1fr; gap:12px; }
.trade-panel .trade-side { padding:12px; }
.trade-side h3 { margin:0 0 10px; }
.trade-side h4 { margin:14px 0 8px; font-size:11px; }
.trade-panel .trade-cash { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
.trade-cash-form { display:flex; gap:5px; margin:8px 0 12px; }
.trade-cash-form input { min-width:0; width:100%; padding:7px; }
.trade-cash-form button { flex-shrink:0; padding:7px; font-size:10px; }
.trade-deeds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.trade-deeds>p { grid-column:1/-1; font-size:11px; margin:7px 0; }
.mini-deed { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; min-height:118px; padding:0 6px 8px; background:#fffdf5; border:1px solid #b6bcad; border-radius:3px; text-align:center; white-space:normal; line-height:1.25; }
.mini-deed-band { display:block; width:calc(100% + 12px); height:12px; min-height:12px; background:var(--group); border-bottom:1px solid #aeb6a2; border-radius:2px 2px 0 0; }
.mini-deed strong { display:grid; place-items:center; min-height:32px; font-size:10px; }
.mini-deed>span:not(.mini-deed-band):not(.mini-deed-check) { font-size:11px; }
.mini-deed small { font-size:8px; color:#63705d; }
.mini-deed.offered { border:2px solid var(--green); box-shadow:0 0 0 1px #264e3626; }
.mini-deed-check { position:absolute; right:2px; top:0; color:white; font-size:11px; text-shadow:0 1px 2px #000; }
.trade-panel-actions { position:sticky; bottom:-14px; display:grid; gap:6px; padding:12px 0 4px; background:var(--paper); }
.trade-panel .trade-card { font-size:11px; }
@media(max-width:1060px) { .game-layout.with-trade { grid-template-areas:'trade board' 'players players'; grid-template-columns:250px minmax(0,1fr); max-width:100%; } .with-trade .sidebar .players { max-height:none; } }
@media(max-width:640px) { .game-layout.with-trade { grid-template-areas:'trade' 'board' 'players'; grid-template-columns:minmax(0,1fr); } .trade-panel { position:static; max-height:65vh; } .trade-panel .trade-grid { grid-template-columns:1fr 1fr; gap:8px; } .trade-panel .trade-side { padding:8px; } .trade-deeds { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.trade-add-properties { margin-top:12px; }
.trade-add-properties summary { cursor:pointer; font-size:11px; padding:8px 0; }

.trade-panel .trade-cash strong { font:19px Georgia,serif; }
.trade-panel .trade-cash-form input,.trade-panel .trade-cash-form button { height:30px; min-height:30px; padding:5px; }
.trade-panel .trade-cash-form { margin:5px 0 8px; }
.trade-panel .trade-side { padding:10px; }
.trade-panel .trade-side h3 { margin-bottom:7px; font-size:12px; }
.trade-panel .mini-deed { min-height:100px; gap:4px; }
.trade-panel .mini-deed strong { min-height:28px; }
.trade-panel .trade-panel-actions button { min-height:30px; padding:7px; font-size:11px; }

.trade-cash-form label { align-self:center; flex-shrink:0; margin:0; font-size:10px; }

.trade-panel-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.trade-panel-actions button { min-width:0; white-space:normal; }
.trade-panel-actions:empty { display:none; }

@media(max-width:640px) { .trade-panel .trade-deeds { grid-template-columns:1fr; } }

/* Ownership follows the printed card bottom; buildings sit on its inward strip. */
.space-hit { overflow:visible; }
.owner-mark { pointer-events:none; }
.space-hit[data-edge="1"] .owner-mark { top:3px; bottom:3px; left:2px; right:auto; width:5px; height:auto; }
.space-hit[data-edge="2"] .owner-mark { top:2px; bottom:auto; }
.space-hit[data-edge="3"] .owner-mark { top:3px; bottom:3px; right:2px; left:auto; width:5px; height:auto; }
.buildings { top:0; left:0; width:100%; height:22%; transform:none; display:flex; align-items:center; justify-content:space-around; padding:0; background:none; border-radius:0; pointer-events:none; z-index:4; }
.buildings img { width:clamp(14px, 55%, 34px); height:clamp(14px, 110%, 30px); flex-shrink:0; object-fit:contain; image-rendering:auto; filter:drop-shadow(1px 2px 1px #0006); }
.buildings img + img { margin-left:-18%; }
.buildings .building-skyscraper { height:clamp(24px, 240%, 48px); width:clamp(14px, 55%, 32px); }
.space-hit[data-edge="2"] .buildings { top:auto; bottom:0; }
.space-hit[data-edge="1"] .buildings,.space-hit[data-edge="3"] .buildings { width:22%; height:100%; flex-direction:column; }
.space-hit[data-edge="1"] .buildings { left:auto; right:0; }
.space-hit[data-edge="1"] .buildings img,.space-hit[data-edge="3"] .buildings img { width:clamp(14px, 210%, 34px); height:clamp(14px, 48%, 30px); }
.space-hit[data-edge="1"] .buildings img + img,.space-hit[data-edge="3"] .buildings img + img { margin-left:0; margin-top:-10%; }
.space-hit[data-edge="1"] .buildings .building-skyscraper,.space-hit[data-edge="3"] .buildings .building-skyscraper { height:clamp(24px, 95%, 48px); }
/* The transparent WebGL board plane aligns with the board artwork below it. */
.dice-scene { position:absolute; inset:0; z-index:8; pointer-events:none; }
.dice-canvas { display:block; width:100%; height:100%; }
.dice-fallback { visibility:hidden; position:absolute; top:25%; left:50%; transform:translateX(-50%); display:flex; gap:12px; }
.dice-fallback .die-face { width:42px; height:42px; background-size:600% 100%; background-repeat:no-repeat; }
.dice-scene.is-fallback .dice-fallback { visibility:visible; }
.dice-scene:has(canvas) .dice-fallback { display:none; }
.board-stage:has(.dice-scene) .board-prompt { visibility:hidden; }

/* One persistent, non-interactive WebGL overlay for buildings and dice. */
.board-3d { position:absolute; inset:0; pointer-events:none; z-index:3; }
.board-canvas { display:block; width:100%; height:100%; }
.board-map.has-board-3d .buildings { visibility:hidden; }
.pieces { z-index:4; }

/* A softly lit green table, with drifting classic playing pieces. */
:root { background:#0b352d; --gold:#d5ad61; }
body { background:radial-gradient(ellipse at 20% 5%,#377a53a6,transparent 58%),radial-gradient(ellipse at 85% 80%,#126b54aa,transparent 55%),#0b352d; min-height:100vh; isolation:isolate; }
.ambient-table { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.ambient-table::before { content:''; position:absolute; inset:-15%; background:radial-gradient(ellipse at 35% 35%,#8cb96950,transparent 45%),radial-gradient(ellipse at 70% 65%,#75a77e40,transparent 40%); filter:blur(45px); }
.ambient-table img { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); object-fit:contain; opacity:.14; filter:blur(2px) sepia(.35); animation:token-drift var(--duration) var(--delay) ease-in-out infinite alternate; }
@keyframes token-drift { from { transform:translate3d(0,0,0) rotate(-20deg); } to { transform:translate3d(var(--dx),var(--dy),0) rotate(var(--spin)); } }
.masthead { border-color:#c8e1bd26; color:#f5eedb; }
.brand-mark { background:#153e32; border-color:#d5ad61; box-shadow:inset 0 0 0 4px #153e32,inset 0 0 0 5px #d5ad61; }
.brand strong { letter-spacing:.08em; }
.table-info { color:#bbd3bd; }
.welcome { background:#fffdf7ed; border:1px solid #fff9; border-radius:20px; padding:30px; box-shadow:0 20px 65px #001b2455; backdrop-filter:blur(18px); }
.welcome h1 { font-weight:600; }
.home-board { filter:drop-shadow(0 22px 30px #001d2580); }
.board-caption { color:#e9efd9; }
.board-heading { color:#f6f0de; }
.board-heading .eyebrow { color:#b8d4b4; }
.board-view-controls .quiet { color:#f6f0de; border-color:#d5e5cb40; background:#0b302c80; }
.turn-timer { color:#f6f0de; background:#163e35; border-color:#b4cda840; }
.sidebar>.section-heading { color:#f6f0de; }
.sidebar>.section-heading>span { color:#b8d4b4; }
.history-panel,.bank-panel,.trade-panel { background:#fffdf7f0; box-shadow:0 8px 25px #001d2529; border-color:#e4ebdc80; }
.player-token { background:var(--player); border-bottom:0; box-shadow:inset 0 0 0 1px #ffffff60; }
.history-panel ol { height:400px; }
.history-panel li { gap:8px; padding:6px 10px; font-size:10px; line-height:1.4; color:#49614f; }
.history-panel time { font-size:8px; padding-top:1px; }
.trade-cash-form { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
.cash-steps { grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
.trade-panel .cash-steps button { padding:3px 0; font-size:10px; min-width:0; background:#e6ecdf; }
.dice .die-face { width:23px; height:23px; }
.dice-fallback .die-face { width:25px; height:25px; }
footer { color:#bbd3bd; border-color:#c8e1bd26; }
footer .quiet { color:#f5eedb; }
.loading { color:#f6f0de; }
@media(max-width:700px) { .welcome { padding:22px; border-radius:15px; } .history-panel ol { height:320px; } .ambient-table img { opacity:.1; } }
@media(prefers-reduced-motion:reduce) { .ambient-table img { animation:none; } }

.action-bar .quiet { color:#f6f0de; }

.ambient-table img.distant { opacity:.055; filter:blur(3px) sepia(.4); }
.pieces { z-index:2; }
.board-3d { z-index:3; }
.trade-partner { border-color:var(--player); border-left:6px solid var(--player); background:color-mix(in srgb,var(--player) 12%,var(--paper)); }
.trade-partner:hover:not(:disabled) { background:color-mix(in srgb,var(--player) 22%,var(--paper)); border-color:var(--player); }
.ownership[aria-pressed] { opacity:1; box-shadow:0 0 0 1px #d5ad61; }
.ownership[aria-pressed="true"] { box-shadow:0 0 0 2px #fff5be; }
.dice-result { font-size:12px; font-variant-numeric:tabular-nums; }
@media(max-width:700px) { .ambient-table img.distant { opacity:.04; } }

.brand { font:600 23px Georgia,serif; letter-spacing:-.02em; text-decoration:none; }
.brand:hover { color:#e5c67c; }
.player-heading[aria-expanded="false"] { min-height:46px; padding:7px 10px; gap:9px; }
.player-heading[aria-expanded="false"] .player-token { width:30px; height:30px; }
.player-heading[aria-expanded="false"] .token-image { width:26px; height:26px; }
.player-heading[aria-expanded="false"] .player-identity>span { margin-top:2px; font-size:9px; }
.player-heading[aria-expanded="false"] .player-cash { font-size:15px; }

/* Fit desktop content to the viewport; long inventories and history scroll inside. */
@media(min-width:801px) {
  body { height:100dvh; display:grid; grid-template-rows:56px minmax(0,1fr) 44px; }
  .masthead,.at-table .masthead { width:100%; height:56px; padding:0 28px; }
  main,.at-table main { width:100%; min-height:0; padding:12px 28px; }
  footer { width:100%; min-height:0; padding:6px 28px; align-items:center; }
  footer button { min-height:28px; padding:4px 8px; }
  .home-layout { height:100%; min-height:0; grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); padding:0; gap:40px; }
  .welcome { width:100%; max-height:100%; overflow:auto; padding:22px; }
  .welcome h1 { font-size:clamp(32px,3.6vw,50px); margin:0 0 14px; }
  .welcome-rule { margin:15px 0; }
  .welcome #player-name { margin-bottom:12px; }
  .welcome .shared-note { margin-bottom:12px; }
  .welcome input,.home-actions button,.join-form button:not(.quiet) { min-height:40px; padding:8px 12px; }
  .join-divider { margin:16px 0 10px; }
  .home-board { height:100%; min-height:0; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; margin:0; }
  .board-caption { flex-shrink:0; align-self:flex-start; margin-bottom:10px; }
  .home-board>img { width:auto; height:auto; max-width:100%; max-height:calc(100% - 28px); object-fit:contain; }
  .game-layout,.enlarged-board .game-layout { --board-side:calc(100dvh - 244px); width:100%; max-width:min(1260px,calc(var(--board-side) + 324px)); grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:stretch; }
  .enlarged-board .game-layout { --board-side:calc(100dvh - 224px); }
  .board-column { min-width:0; }
  .board-heading { padding-bottom:14px; }
  .action-bar { margin-top:10px; gap:4px; }
  .action-bar button { min-width:0; min-height:36px; padding:7px 5px; font-size:10px; }
  .sidebar { contain:size; min-height:0; padding-top:0; gap:10px; overflow:hidden; }
  .sidebar>.section-heading { flex-shrink:0; }
  .sidebar .players,.enlarged-board .sidebar .players { flex:0 1 auto; min-height:0; max-height:55%; overflow:auto; padding:2px; }
  .sidebar .history-panel { display:flex; flex-direction:column; flex:1 1 0; min-height:100px; }
  .history-panel .section-heading { flex-shrink:0; padding:10px 12px; }
  .sidebar .history-panel ol { height:auto; min-height:0; flex:1; }
}
@media(min-width:801px) {
  .game-layout.with-trade,.enlarged-board .game-layout.with-trade { max-width:min(1440px,calc(var(--board-side) + 544px)); grid-template-columns:220px minmax(0,1fr) 280px; gap:22px; }
  .trade-panel { contain:size; max-height:none; overflow:auto; position:static; }
}
@media(min-width:801px) { .home-board>img { min-height:0; flex-shrink:1; } }

@media(min-width:801px) { main,.at-table main { height:100%; margin:0 auto; } }

@media(min-width:801px) and (max-width:1100px) {
  .game-layout.with-trade,.enlarged-board .game-layout.with-trade { grid-template-areas:'trade board players'; grid-template-columns:190px minmax(0,1fr) 230px; gap:14px; }
}
@media(min-width:801px) { .game-layout:has(.mode-hint) { --board-side:calc(100dvh - 284px); } .enlarged-board .game-layout:has(.mode-hint) { --board-side:calc(100dvh - 264px); } }

.invite-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:10px 0 14px; }
.invite-actions button { min-height:32px; padding:7px 10px; font-size:11px; }
.invite-link { width:100%; }
.action-bar .quiet.danger { color:#f3c4ac; }

.invite-join-form { display:grid; gap:9px; text-align:left; }
.invite-join-form label { font-size:12px; }
.invite-join-form input { width:100%; min-width:0; min-height:38px; padding:8px 10px; }
.invite-join-form button { min-height:36px; padding:8px 10px; }
.invite-unavailable { max-width:540px; margin:40px auto; padding:28px; border-radius:12px; background:var(--paper); }
.invitation-layout .player-heading { color:var(--paper); }