:root{--bg1:#050816;--bg2:#172554;--glass:rgba(15,23,42,.72);--line:rgba(148,163,184,.25);--text:#e5e7eb;--muted:#94a3b8;--accent:#60a5fa;--accent2:#a78bfa;--warn:#f59e0b;--ink:#0f172a}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,rgba(96,165,250,.45),transparent 34rem),radial-gradient(circle at bottom right,rgba(167,139,250,.35),transparent 32rem),linear-gradient(135deg,var(--bg1),var(--bg2))}
button,input{font:inherit}button{border:0;border-radius:14px;padding:12px 16px;color:#07111f;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:950;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.22);transition:.15s}button:hover:not(:disabled){transform:translateY(-1px);filter:saturate(1.18)}button.secondary{background:rgba(226,232,240,.92)}button.warning{background:linear-gradient(135deg,#fbbf24,#fb923c)}button.danger{background:linear-gradient(135deg,#fb7185,#ef4444);color:white}button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1)}
input{width:100%;border:1px solid var(--line);background:rgba(2,6,23,.72);color:var(--text);border-radius:14px;padding:12px 14px;outline:none}.app{max-width:1440px;margin:0 auto;padding:20px}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}h1,h2,h3,p{margin-top:0}.topbar h1{font-size:clamp(28px,4vw,48px);line-height:.95;margin-bottom:4px;letter-spacing:-.05em}.topbar p,.lobby-card p{color:var(--muted);margin-bottom:0}.room-pill{border:1px solid var(--line);background:rgba(15,23,42,.55);border-radius:999px;padding:12px 16px;color:#dbeafe;font-weight:950;letter-spacing:.08em}.glass{background:var(--glass);border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.25)}
.hero{display:grid;place-items:center;min-height:68vh}.lobby-card{width:min(740px,100%);padding:28px}.lobby-card h2{font-size:38px;letter-spacing:-.04em;margin-bottom:10px}label{display:block;color:#cbd5e1;font-weight:800;margin:18px 0 8px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.join-box{display:grid;grid-template-columns:1fr auto;gap:8px}.hidden{display:none!important}
.swatches,.animal-grid{display:flex;gap:10px;flex-wrap:wrap}.swatch{width:42px;height:42px;border-radius:14px;border:3px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px #fff5}.swatch.selected,.animal-choice.selected{border-color:white;box-shadow:0 0 0 4px rgba(96,165,250,.35)}.animal-choice{width:72px;height:72px;border:2px solid var(--line);border-radius:18px;display:grid;place-items:center;background:rgba(2,6,23,.45);cursor:pointer}.animal-choice svg{width:48px;height:48px;fill:currentColor}
.game-layout{display:grid;grid-template-columns:minmax(560px,900px) minmax(320px,420px);gap:18px;align-items:start}@media(max-width:1050px){.game-layout{grid-template-columns:1fr}}@media(max-width:650px){.grid2{grid-template-columns:1fr}.join-box{grid-template-columns:1fr}.board{min-height:360px}.tile{font-size:8px}}
.board-card{padding:14px}.board{aspect-ratio:1/1;min-height:480px;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:5px;padding:8px;border-radius:28px;position:relative;background:linear-gradient(135deg,rgba(226,232,240,.45),rgba(148,163,184,.14));border:1px solid rgba(255,255,255,.2)}
.center-card{grid-column:2/11;grid-row:2/11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border-radius:28px;background:radial-gradient(circle at 50% 15%,rgba(96,165,250,.3),transparent 16rem),rgba(2,6,23,.6);border:1px solid var(--line);padding:18px}.center-card h2{font-size:clamp(30px,5vw,64px);letter-spacing:-.06em;margin:0}.center-card p{color:#cbd5e1;margin:0;max-width:500px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.dice{font-size:64px;letter-spacing:10px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}.pot{padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(96,165,250,.18));border:1px solid rgba(187,247,208,.35);font-weight:950;color:#dcfce7}
.tile{position:relative;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,#fff,#e2e8f0);border-radius:14px;padding:10px 6px 6px;font-size:10px;line-height:1.08;box-shadow:inset 0 -8px 18px rgba(15,23,42,.08),0 8px 18px rgba(0,0,0,.14)}.tile.corner{font-size:12px;background:linear-gradient(135deg,#fef3c7,#dbeafe)}.tile .bar{height:9px;border-radius:8px;margin:0 -2px 5px}.tile .name{font-weight:950;letter-spacing:-.02em}.tile .price,.tile .rent{color:#475569;font-size:9px;font-weight:800}.tile .houses{color:#166534;font-size:9px;font-weight:950}.tile.mortgaged{filter:grayscale(.85) brightness(.88)}.tile.mortgaged:after{content:"MORTGAGED";position:absolute;inset:auto 4px 24px 4px;text-align:center;background:#111827;color:white;border-radius:999px;font-size:8px;font-weight:1000;letter-spacing:.08em}
.owner-edge{position:absolute;background:var(--owner);box-shadow:0 0 14px var(--owner);z-index:2;pointer-events:none}.edge-top{left:12px;right:12px;top:2px;height:5px;border-radius:999px}.edge-right{top:12px;bottom:12px;right:2px;width:5px;border-radius:999px}.edge-bottom{left:12px;right:12px;bottom:2px;height:5px;border-radius:999px}.edge-left{top:12px;bottom:12px;left:2px;width:5px;border-radius:999px}
.tokens{position:absolute;left:4px;right:4px;bottom:6px;display:flex;gap:2px;flex-wrap:wrap;min-height:18px}.token{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #020617;box-shadow:0 4px 8px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.2,.8,.2,1)}.token svg{width:15px;height:15px;fill:var(--token-color)}.token.moving{animation:token-hop .55s ease-out}@keyframes token-hop{0%{transform:scale(.6) translateY(0)}25%{transform:scale(1.2) translateY(-14px)}55%{transform:scale(1.05) translateY(0)}75%{transform:scale(1.16) translateY(-5px)}100%{transform:scale(1) translateY(0)}}
.side{display:grid;gap:18px}.panel{padding:18px}.player{border:1px solid var(--line);background:rgba(2,6,23,.45);border-radius:18px;padding:12px;margin-bottom:10px}.player.active{outline:3px solid rgba(96,165,250,.8)}.player.bankrupt{opacity:.45}.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(226,232,240,.12);color:#e2e8f0;font-weight:950}.badge svg{width:20px;height:20px;fill:currentColor}.money{font-size:22px;font-weight:950;margin:10px 0 4px}.meta,.props,.rules-list{color:var(--muted);font-size:13px}.rules-list div{padding:7px 0;border-bottom:1px solid rgba(148,163,184,.15)}.log{height:300px;overflow:auto;border:1px solid var(--line);background:rgba(2,6,23,.55);border-radius:18px;padding:12px}.log p{margin:.2rem 0 .55rem;color:#dbeafe;font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);padding:12px 16px;border-radius:999px;background:rgba(239,68,68,.92);color:white;font-weight:800;transition:.25s;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:20}.toast.show{transform:translateX(-50%) translateY(0)}.fx-layer{pointer-events:none;position:fixed;inset:0;z-index:15;overflow:hidden}.money-fx{position:absolute;font-size:26px;font-weight:1000;color:#fde68a;text-shadow:0 4px 16px rgba(0,0,0,.75);animation:money-fly .75s cubic-bezier(.2,.8,.2,1) forwards}@keyframes money-fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-8deg)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(8deg)}}.confetti{position:absolute;width:8px;height:14px;border-radius:2px;animation:confetti .9s ease-out forwards}@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}
.card-modal,.manage-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(2,6,23,.62);backdrop-filter:blur(10px)}.card-pop{width:min(520px,calc(100% - 32px));padding:32px;border-radius:28px;background:linear-gradient(135deg,#f8fafc,#dbeafe);color:#0f172a;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:card-in .95s ease forwards;text-align:center}.card-kicker{text-transform:uppercase;letter-spacing:.18em;font-weight:1000;color:#2563eb;margin-bottom:12px}.card-pop h2{font-size:30px;letter-spacing:-.04em}@keyframes card-in{0%{opacity:0;transform:translateY(30px) scale(.86) rotate(-3deg)}18%{opacity:1;transform:translateY(0) scale(1.04) rotate(1deg)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px) scale(.94)}}
.manage-pop{position:relative;width:min(760px,calc(100% - 32px));max-height:88vh;overflow:auto;padding:22px;border-radius:28px;background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 100px rgba(0,0,0,.55)}.modal-x{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;padding:0;background:#e2e8f0}.property-card{border-radius:24px;overflow:hidden;background:#f8fafc;color:#0f172a;box-shadow:0 20px 60px rgba(0,0,0,.3);margin-top:24px}.pc-header{padding:18px;text-align:center;color:white;background:var(--pc-color,#334155)}.pc-header h2{margin:0;font-size:30px;letter-spacing:-.04em}.pc-body{padding:18px;display:grid;gap:14px}.pc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.pc-stat{background:#e2e8f0;border-radius:14px;padding:12px;font-weight:800}.build-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.house-dot{width:28px;height:22px;border-radius:7px;background:#16a34a;display:inline-grid;place-items:center;color:white;font-size:13px}.hotel-dot{width:42px;height:26px;border-radius:9px;background:#dc2626;display:inline-grid;place-items:center;color:white;font-size:13px;font-weight:1000}.property-actions{display:flex;gap:10px;flex-wrap:wrap}.property-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:16px}.mini-prop{border:1px solid rgba(255,255,255,.18);background:rgba(15,23,42,.72);color:#e5e7eb;border-radius:16px;padding:12px;text-align:left}.mini-prop strong{display:block}.mini-prop span{font-size:12px;color:#94a3b8}.mini-prop:hover{outline:2px solid #60a5fa}


/* v5 layout refinements */
.app{max-width:1760px}
.three-layout{
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(560px,1fr) minmax(300px,380px);
  gap:18px;
  align-items:start;
}
.left-rail,.right-rail{display:grid;gap:18px}
.middle-board{display:flex;justify-content:center;align-items:start}
.board-card{width:min(100%,900px)}
.board{border-radius:16px}
.tile{border-radius:7px}
.tile.corner{border-radius:10px}
.center-card{
  grid-column:2/11;
  grid-row:2/11;
  align-self:stretch;
  justify-self:stretch;
  min-height:100%;
  border-radius:18px;
}
.manage-pop{
  width:min(620px,calc(100% - 32px));
  max-height:76vh;
  padding:16px;
  border-radius:18px;
}
.property-card{border-radius:16px;margin-top:12px}
.pc-header{padding:12px}
.pc-header h2{font-size:22px}
.pc-body{padding:12px;gap:10px}
.pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pc-stat{padding:9px;border-radius:10px;font-size:13px}
.property-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px;max-height:150px;overflow:auto}
.mini-prop{border-radius:10px;padding:9px}
.property-actions{gap:8px}
.property-actions button{padding:9px 11px;border-radius:10px}
.host-panel.hidden-setup{display:none}
.setup-actions{display:flex;gap:8px;flex-wrap:wrap}
.turn-action-modal{
  position:fixed;inset:0;z-index:28;display:grid;place-items:center;
  background:rgba(2,6,23,.45);backdrop-filter:blur(6px)
}
.turn-action-pop{
  position:relative;width:min(420px,calc(100% - 32px));padding:20px;border-radius:20px;
  background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 34px 90px rgba(0,0,0,.55)
}
.turn-action-pop h2{margin-bottom:6px}
.turn-action-pop p{color:#cbd5e1}
.turn-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.turn-actions button{border-radius:12px}
.chat-panel{height:420px;display:flex;flex-direction:column}
.chat-log{flex:1;overflow:auto;border:1px solid var(--line);background:rgba(2,6,23,.55);border-radius:14px;padding:10px}
.chat-msg{margin-bottom:10px;font-size:13px;color:#dbeafe}
.chat-msg strong{color:white}
.chat-compose{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.compact-log .log{height:260px}
.player-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.player-actions button{padding:7px 9px;border-radius:9px;font-size:12px}
.trade-feed{font-size:12px;color:#fde68a;margin-top:6px}
@media(max-width:1220px){
  .three-layout{grid-template-columns:1fr}
  .left-rail{order:2}
  .middle-board{order:1}
  .right-rail{order:3}
}
@media(max-width:650px){
  .turn-actions{grid-template-columns:1fr}
}


/* v6 corrections: real split screen, no blur, compact popups, log in board center */
.app{
  max-width:none;
  width:100vw;
  min-height:100vh;
  padding:12px;
}
.topbar{
  margin-bottom:10px;
  padding:0 4px;
}
.topbar h1{
  font-size:30px;
}
.three-layout{
  display:grid !important;
  grid-template-columns:280px minmax(620px,1fr) 340px !important;
  gap:12px;
  align-items:stretch;
  height:calc(100vh - 82px);
  min-height:680px;
}
.left-rail,.right-rail{
  min-width:0;
  height:100%;
  overflow:auto;
}
.middle-board{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.board-card{
  width:100%;
  max-width:880px;
  height:min(calc(100vh - 96px), 880px);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.board{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:12px;
  gap:4px;
  padding:6px;
}
.tile{
  border-radius:4px !important;
  padding:8px 5px 5px;
}
.tile.corner{
  border-radius:6px !important;
}
.center-card{
  border-radius:10px !important;
  padding:12px;
  gap:8px;
  justify-content:flex-start;
}
.center-card h2{
  font-size:34px;
}
.dice{
  font-size:44px;
  letter-spacing:6px;
}
.center-card p{
  font-size:13px;
}
.board-log-wrap{
  width:min(100%, 620px);
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  margin-top:4px;
}
.board-log-wrap h3{
  margin:0 0 6px;
  font-size:14px;
  color:#dbeafe;
}
.board-log{
  height:auto !important;
  flex:1;
  min-height:150px;
  max-height:260px;
  font-size:12px;
  border-radius:10px;
  padding:8px;
}
.board-log p{
  font-size:12px;
  margin:.15rem 0 .35rem;
}
.chat-panel{
  height:100%;
}
.chat-log{
  min-height:0;
}
.panel{
  border-radius:14px;
  padding:12px;
}
.glass{
  border-radius:14px;
  backdrop-filter:none !important;
}
.turn-action-modal,
.card-modal,
.manage-modal{
  background:rgba(2,6,23,.22) !important;
  backdrop-filter:none !important;
  place-items:start center;
  padding-top:96px;
}
.turn-action-pop{
  width:min(320px, calc(100% - 24px)) !important;
  padding:14px !important;
  border-radius:12px !important;
}
.turn-action-pop h2{
  font-size:20px;
  margin-bottom:2px;
}
.turn-action-pop p{
  font-size:12px;
  margin-bottom:10px;
}
.turn-actions{
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.turn-actions button{
  padding:8px 9px;
  border-radius:8px;
  font-size:13px;
}
.modal-x{
  width:30px !important;
  height:30px !important;
  font-size:18px;
}
.manage-pop{
  width:min(500px, calc(100% - 24px)) !important;
  max-height:64vh !important;
  padding:12px !important;
  border-radius:12px !important;
}
.manage-pop h2{
  font-size:18px;
  margin-bottom:6px;
}
.property-list{
  max-height:94px !important;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) !important;
}
.mini-prop{
  padding:7px !important;
  border-radius:7px !important;
}
.mini-prop span{
  font-size:10px;
}
.property-card{
  border-radius:10px !important;
  margin-top:8px !important;
}
.pc-header{
  padding:9px !important;
}
.pc-header h2{
  font-size:18px !important;
}
.pc-body{
  padding:9px !important;
  gap:8px !important;
}
.pc-grid{
  gap:6px !important;
}
.pc-stat{
  padding:7px !important;
  border-radius:7px !important;
  font-size:12px !important;
}
.property-actions button{
  padding:7px 8px !important;
  font-size:12px;
}
.card-pop{
  width:min(360px, calc(100% - 24px)) !important;
  padding:18px !important;
  border-radius:14px !important;
  animation:card-in-v6 .9s ease forwards !important;
}
.card-pop h2{
  font-size:20px !important;
}
.card-kicker{
  font-size:11px;
  margin-bottom:8px !important;
}
@keyframes card-in-v6{
  0%{opacity:0;transform:translateY(14px) scale(.94)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  75%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-8px) scale(.98)}
}
.travel-token{
  position:fixed;
  z-index:50;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:white;
  border:2px solid #020617;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.9,.2,1);
}
.travel-token svg{
  width:21px;
  height:21px;
  fill:var(--token-color);
}
@media(max-width:1180px){
  .three-layout{
    grid-template-columns:240px minmax(520px,1fr) 300px !important;
  }
}
@media(max-width:980px){
  .app{width:auto}
  .three-layout{
    height:auto;
    min-height:0;
    grid-template-columns:1fr !important;
  }
  .board-card{
    height:auto;
    aspect-ratio:1/1;
  }
}


/* v7: rotate property text by board side and move thick owner bars to outside edge */
.tile{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
}
.tile .name,
.tile .price,
.tile .rent,
.tile .houses{
  position:relative;
  z-index:1;
}
.tile.side-top{
  text-align:center;
}
.tile.side-right{
  text-align:center;
}
.tile.side-bottom{
  text-align:center;
}
.tile.side-left{
  text-align:center;
}

/* Text reads outward toward each side of the board */
.tile.side-right > :not(.tokens):not(.owner-edge){
  transform:rotate(90deg);
  transform-origin:center;
}
.tile.side-left > :not(.tokens):not(.owner-edge){
  transform:rotate(-90deg);
  transform-origin:center;
}
.tile.side-bottom > :not(.tokens):not(.owner-edge){
  transform:rotate(180deg);
  transform-origin:center;
}
.tile.side-right,
.tile.side-left{
  justify-content:center;
}
.tile.side-right .bar,
.tile.side-left .bar{
  width:9px;
  height:42px;
  min-height:42px;
  align-self:center;
  margin:0;
}
.tile.side-bottom .bar{
  order:20;
  margin:5px -2px 0;
}
.tile.side-top .bar{
  order:-1;
}

/* Thicker ownership bars, always on the board's outer edge */
.owner-edge{
  z-index:4;
  box-shadow:0 0 18px var(--owner), 0 0 0 1px rgba(255,255,255,.55);
}
.edge-outer-top{
  left:8px;
  right:8px;
  top:0;
  height:9px;
  border-radius:0 0 8px 8px;
}
.edge-outer-right{
  top:8px;
  bottom:8px;
  right:0;
  width:9px;
  border-radius:8px 0 0 8px;
}
.edge-outer-bottom{
  left:8px;
  right:8px;
  bottom:0;
  height:9px;
  border-radius:8px 8px 0 0;
}
.edge-outer-left{
  top:8px;
  bottom:8px;
  left:0;
  width:9px;
  border-radius:0 8px 8px 0;
}

/* Keep tokens legible and close to the center edge, not the outside owner bar */
.tile.side-top .tokens{bottom:5px}
.tile.side-bottom .tokens{top:5px;bottom:auto}
.tile.side-right .tokens{left:5px;right:auto;top:4px;bottom:4px;flex-direction:column}
.tile.side-left .tokens{right:5px;left:auto;top:4px;bottom:4px;flex-direction:column}

/* Reduce overlap risk on rotated side spaces */
.tile.side-right .name,
.tile.side-left .name,
.tile.side-bottom .name{
  font-size:9px;
}
.tile.side-right .price,
.tile.side-left .price,
.tile.side-bottom .price,
.tile.side-right .rent,
.tile.side-left .rent,
.tile.side-bottom .rent{
  font-size:8px;
}


/* v8 corrections:
   - board is visually centered in the middle column
   - chat stays left, players/actions stay right
   - bottom row reads normally
   - side text direction reversed from v7
*/
.three-layout{
  grid-template-columns:300px minmax(720px, 1fr) 360px !important;
  justify-content:center !important;
  align-items:stretch !important;
}
.left-rail{
  grid-column:1 !important;
  order:0 !important;
}
.middle-board{
  grid-column:2 !important;
  order:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-width:720px;
}
.right-rail{
  grid-column:3 !important;
  order:0 !important;
}
.board-card{
  margin-inline:auto !important;
  width:min(100%, 880px) !important;
  max-width:880px !important;
}
.board{
  margin:auto !important;
}

/* override v7 rotations */
.tile.side-top > :not(.tokens):not(.owner-edge){
  transform:none !important;
}
.tile.side-bottom > :not(.tokens):not(.owner-edge){
  transform:none !important;
}

/* reverse side text direction compared to v7 */
.tile.side-right > :not(.tokens):not(.owner-edge){
  transform:rotate(-90deg) !important;
  transform-origin:center !important;
}
.tile.side-left > :not(.tokens):not(.owner-edge){
  transform:rotate(90deg) !important;
  transform-origin:center !important;
}

/* bottom row should behave like normal readable cards */
.tile.side-bottom .bar{
  order:-1 !important;
  margin:0 -2px 5px !important;
}
.tile.side-bottom .tokens{
  bottom:5px !important;
  top:auto !important;
}

/* keep the outside ownership bar at the physical outside edge */
.edge-outer-top{top:0 !important; bottom:auto !important;}
.edge-outer-right{right:0 !important; left:auto !important;}
.edge-outer-bottom{bottom:0 !important; top:auto !important;}
.edge-outer-left{left:0 !important; right:auto !important;}

@media(max-width:1180px){
  .three-layout{
    grid-template-columns:260px minmax(620px,1fr) 320px !important;
  }
  .middle-board{min-width:620px;}
}

@media(max-width:980px){
  .three-layout{
    grid-template-columns:1fr !important;
  }
  .left-rail,.middle-board,.right-rail{
    grid-column:auto !important;
    min-width:0 !important;
  }
  .middle-board{order:1 !important;}
  .left-rail{order:2 !important;}
  .right-rail{order:3 !important;}
}


/* v9: keep the board perfectly square and proportioned */
.middle-board{
  min-width:0 !important;
  width:100% !important;
  display:grid !important;
  place-items:center !important;
}
.board-card{
  width:min(100%, 88vh, 900px) !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  max-width:900px !important;
  max-height:900px !important;
  padding:10px !important;
}
.board{
  width:100% !important;
  height:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  max-height:none !important;
  grid-template-columns:repeat(11, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(11, minmax(0, 1fr)) !important;
}
.three-layout{
  grid-template-columns:300px minmax(620px, 1fr) 360px !important;
}

/* v9: owner bar should fill the outside bottom/edge of each property space */
.owner-edge{
  z-index:5 !important;
  box-shadow:0 0 12px var(--owner), inset 0 0 0 1px rgba(255,255,255,.45) !important;
}
.edge-outer-top{
  left:3px !important;
  right:3px !important;
  top:1px !important;
  height:12px !important;
  border-radius:0 0 7px 7px !important;
}
.edge-outer-right{
  top:3px !important;
  bottom:3px !important;
  right:1px !important;
  width:12px !important;
  border-radius:7px 0 0 7px !important;
}
.edge-outer-bottom{
  left:3px !important;
  right:3px !important;
  bottom:1px !important;
  height:12px !important;
  border-radius:7px 7px 0 0 !important;
}
.edge-outer-left{
  top:3px !important;
  bottom:3px !important;
  left:1px !important;
  width:12px !important;
  border-radius:0 7px 7px 0 !important;
}

/* add a little internal clearance so text/tokens don't sit on top of ownership bars */
.tile.side-top{padding-top:16px !important;}
.tile.side-bottom{padding-bottom:16px !important;}
.tile.side-right{padding-right:16px !important;}
.tile.side-left{padding-left:16px !important;}

@media(max-width:980px){
  .board-card{
    width:min(100vw - 24px, 760px) !important;
  }
}


/* v11: conservative patch starting from v9.
   Keep v9 board logic, but group the visible tile content so bars stay in proper order. */

/* Board should render square at full available size as soon as the game appears. */
.middle-board{
  display:grid !important;
  place-items:center !important;
}
.board-card{
  width:min(100%, calc(100vh - 96px), 900px) !important;
  height:min(calc(100vh - 96px), 900px) !important;
  aspect-ratio:1 / 1 !important;
}
.board{
  width:100% !important;
  height:100% !important;
  aspect-ratio:1 / 1 !important;
  grid-template-columns:repeat(11, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(11, minmax(0, 1fr)) !important;
}

/* Remove the older absolute outer owner bars; ownership is now inside the tile content below text. */
.owner-edge{
  display:none !important;
}

/* Stable tile layout */
.tile{
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
}

/* Visible property face. This is what rotates, keeping group bar -> text -> owner bar together. */
.tile-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  text-align:center;
  gap:2px;
  padding:0 4px 18px;
  transform-origin:center center;
  z-index:1;
}
.tile.corner .tile-content{
  justify-content:center;
  padding:6px;
}

/* Property group color: before text and full width */
.tile-content .bar{
  display:block !important;
  width:calc(100% + 8px) !important;
  height:12px !important;
  min-height:12px !important;
  margin:0 -4px 4px !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
}

/* Ownership bar: below the text, follows the same direction as the tile content */
.owner-strip{
  display:block;
  width:auto;
  height:12px;
  min-height:12px;
  margin:4px 4px 0;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Type inside the property face */
.tile-content .name{
  font-weight:950;
  line-height:1.05;
}
.tile-content .price,
.tile-content .rent,
.tile-content .houses{
  line-height:1.05;
}
.tile-content .houses{
  min-height:12px;
}

/* Override previous per-child rotation. Rotate the full content block instead. */
.tile.side-top > :not(.tokens):not(.owner-edge),
.tile.side-bottom > :not(.tokens):not(.owner-edge),
.tile.side-left > :not(.tokens):not(.owner-edge),
.tile.side-right > :not(.tokens):not(.owner-edge){
  transform:none !important;
}

.tile.side-top .tile-content{
  transform:rotate(0deg);
}
.tile.side-bottom .tile-content{
  transform:rotate(0deg);
}
.tile.side-right .tile-content{
  transform:rotate(-90deg) scale(.94);
}
.tile.side-left .tile-content{
  transform:rotate(90deg) scale(.94);
}

/* Side text needs to be compact after rotation */
.tile.side-left .tile-content,
.tile.side-right .tile-content{
  justify-content:center;
  padding:0 4px 16px;
}
.tile.side-left .tile-content .bar,
.tile.side-right .tile-content .bar{
  height:10px !important;
  min-height:10px !important;
  margin-bottom:3px !important;
}
.tile.side-left .owner-strip,
.tile.side-right .owner-strip{
  height:10px;
  min-height:10px;
  margin-top:3px;
}
.tile.side-left .name,
.tile.side-right .name{
  font-size:9px;
}
.tile.side-left .price,
.tile.side-right .price,
.tile.side-left .rent,
.tile.side-right .rent{
  font-size:7.5px;
}

/* Tokens remain unrotated and sit toward the board center side. */
.tile.side-top .tokens{
  bottom:4px !important;
  top:auto !important;
  left:4px !important;
  right:4px !important;
  flex-direction:row !important;
}
.tile.side-bottom .tokens{
  top:4px !important;
  bottom:auto !important;
  left:4px !important;
  right:4px !important;
  flex-direction:row !important;
}
.tile.side-right .tokens{
  left:4px !important;
  right:auto !important;
  top:4px !important;
  bottom:4px !important;
  flex-direction:column !important;
}
.tile.side-left .tokens{
  right:4px !important;
  left:auto !important;
  top:4px !important;
  bottom:4px !important;
  flex-direction:column !important;
}

/* Previous side padding rules no longer apply. */
.tile.side-top,
.tile.side-bottom,
.tile.side-left,
.tile.side-right{
  padding:0 !important;
}

@media(max-width:980px){
  .board-card{
    width:min(94vw, 760px) !important;
    height:min(94vw, 760px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
}


/* v12: name-only board spaces and exact side rotations */
.tile-content .price,
.tile-content .rent,
.tile-content .houses{
  display:none !important;
}

/* Keep only group color, name, and ownership bar. */
.tile-content{
  justify-content:flex-start !important;
  gap:3px !important;
}
.tile.corner .tile-content{
  justify-content:center !important;
}

/* Left side must rotate 90 degrees clockwise. */
.tile.side-left .tile-content{
  transform:rotate(90deg) scale(.96) !important;
}

/* Right side must rotate 90 degrees counter-clockwise. */
.tile.side-right .tile-content{
  transform:rotate(-90deg) scale(.96) !important;
}

/* Bottom row reads normally. */
.tile.side-bottom .tile-content{
  transform:rotate(0deg) !important;
}

/* Top row reads normally. */
.tile.side-top .tile-content{
  transform:rotate(0deg) !important;
}

/* Name-only text can be larger and cleaner. */
.tile-content .name{
  font-size:clamp(8px, .74vw, 13px) !important;
  line-height:1.08 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-height:0 !important;
}

/* Group bar stays full-width before the name. */
.tile-content .bar{
  width:calc(100% + 8px) !important;
  height:13px !important;
  min-height:13px !important;
  margin:0 -4px 4px !important;
  border-radius:0 !important;
}

/* Ownership bar stays below the name with slight margin. */
.owner-strip{
  height:13px !important;
  min-height:13px !important;
  margin:4px 4px 0 !important;
  border-radius:999px !important;
}

/* Side spaces have enough room for simple names. */
.tile.side-left .tile-content,
.tile.side-right .tile-content{
  padding:0 4px 18px !important;
}
.tile.side-left .name,
.tile.side-right .name{
  font-size:clamp(8px, .62vw, 11px) !important;
}


/* v13: force the actual tile content rotation.
   v11/v12 had a high-specificity reset selector that could override rotation.
   These child selectors are intentionally more specific. */
.tile.side-left > .tile-content{
  transform:rotate(90deg) scale(.96) !important; /* left side clockwise */
  transform-origin:center center !important;
}
.tile.side-right > .tile-content{
  transform:rotate(-90deg) scale(.96) !important; /* right side counter-clockwise */
  transform-origin:center center !important;
}
.tile.side-top > .tile-content,
.tile.side-bottom > .tile-content{
  transform:rotate(0deg) !important;
}

/* Only show the name in each space. */
.tile-content .price,
.tile-content .rent,
.tile-content .houses{
  display:none !important;
}

/* Make tile content behave like a card: group color, name, owner bar at bottom. */
.tile > .tile-content{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  text-align:center !important;
  gap:3px !important;
  padding:0 4px 4px !important;
  z-index:1 !important;
  transform-origin:center center !important;
}

/* Property group bar comes before the name and fills the full property width. */
.tile > .tile-content > .bar{
  display:block !important;
  width:calc(100% + 8px) !important;
  height:13px !important;
  min-height:13px !important;
  margin:0 -4px 3px !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
}

/* Name is the only text on the space. */
.tile > .tile-content > .name{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  font-size:clamp(8px, .72vw, 13px) !important;
  line-height:1.06 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  overflow:hidden !important;
}

/* Ownership bar is against the 'bottom' relative to the text direction,
   because it sits at the end of the rotated tile-content column. */
.tile > .tile-content > .owner-strip{
  display:block !important;
  width:auto !important;
  height:13px !important;
  min-height:13px !important;
  margin:3px 4px 0 !important;
  border-radius:999px !important;
  flex:0 0 auto !important;
  box-shadow:0 0 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

/* Side names can be slightly smaller after rotation. */
.tile.side-left > .tile-content > .name,
.tile.side-right > .tile-content > .name{
  font-size:clamp(8px, .6vw, 11px) !important;
}

/* Corner spaces are not rotated and do not need the card bar layout. */
.tile.corner > .tile-content{
  justify-content:center !important;
  padding:6px !important;
}
.tile.corner > .tile-content > .bar,
.tile.corner > .tile-content > .owner-strip{
  display:none !important;
}


/* v14: definitive tile orientation + ownership-bar placement.
   JS now applies inline !important rotation to .tile-content.
   These rules define the internal order and bar anchoring. */

#board .tile{
  position:relative !important;
  overflow:hidden !important;
  padding:0 !important;
}

#board .tile > .tile-content{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:0 4px 4px !important;
  gap:3px !important;
  transform-origin:center center !important;
  z-index:1 !important;
}

/* Only the name appears inside a board space. */
#board .tile .price,
#board .tile .rent,
#board .tile .houses{
  display:none !important;
}

/* Group color is before the name and full property width. */
#board .tile > .tile-content > .bar{
  display:block !important;
  width:calc(100% + 8px) !important;
  height:13px !important;
  min-height:13px !important;
  margin:0 -4px 3px !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
}

/* Name uses the middle of the property. */
#board .tile > .tile-content > .name{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  font-size:clamp(8px, .72vw, 13px) !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

/* Ownership bar sits at the flex-end of tile-content.
   Because tile-content itself is rotated, this is the relative bottom
   according to the text direction. */
#board .tile > .tile-content > .owner-strip{
  display:block !important;
  width:auto !important;
  height:13px !important;
  min-height:13px !important;
  margin:3px 4px 0 !important;
  border-radius:999px !important;
  flex:0 0 auto !important;
  box-shadow:0 0 10px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.5) !important;
}

/* side spaces: simple text, slightly smaller */
#board .tile.side-left > .tile-content > .name,
#board .tile.side-right > .tile-content > .name{
  font-size:clamp(8px, .6vw, 11px) !important;
}

/* Corners are plain, not property-card style. */
#board .tile.corner > .tile-content,
#board .tile.corner-space > .tile-content{
  justify-content:center !important;
  padding:6px !important;
}
#board .tile.corner > .tile-content > .bar,
#board .tile.corner-space > .tile-content > .bar,
#board .tile.corner > .tile-content > .owner-strip,
#board .tile.corner-space > .tile-content > .owner-strip{
  display:none !important;
}


/* v15: restore immediate token selection and keep the action popup inside board center */
.center-card{
  position:relative !important;
  overflow:hidden !important;
}

/* Make the center log smaller so the turn action popup fits inside the board center. */
.board-log-wrap{
  max-height:126px !important;
  flex:0 1 126px !important;
  min-height:84px !important;
}
.board-log{
  max-height:94px !important;
  min-height:72px !important;
  height:94px !important;
  font-size:11px !important;
}
.board-log p{
  font-size:11px !important;
  margin:.12rem 0 .28rem !important;
}

/* The turn popup is now contained inside the center card, not over property spaces. */
.center-card > .turn-action-modal{
  position:absolute !important;
  inset:8px !important;
  z-index:40 !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}
.center-card > .turn-action-modal.hidden{
  display:none !important;
}
.center-card > .turn-action-modal .turn-action-pop{
  pointer-events:auto !important;
  width:min(300px, calc(100% - 16px)) !important;
  padding:12px !important;
  border-radius:12px !important;
  box-shadow:0 16px 44px rgba(0,0,0,.45) !important;
}
.turn-action-pop h2{
  font-size:18px !important;
  margin-bottom:2px !important;
}
.turn-action-pop p{
  font-size:12px !important;
  margin-bottom:8px !important;
}
.turn-actions{
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
}
.turn-actions button{
  padding:8px 9px !important;
  font-size:12px !important;
  border-radius:8px !important;
}

/* Token picker: silhouettes are filled by the selected color. */
.animal-choice svg{
  fill:currentColor !important;
}
.animal-choice{
  color:var(--choice-color, currentColor);
}


/* v16: dice animation, houses/hotel on spaces, and click-to-view spaces */
.dice.dice-rolling{
  animation:dice-tumble .62s ease-in-out;
}
@keyframes dice-tumble{
  0%{transform:rotate(0) scale(1)}
  20%{transform:rotate(-10deg) scale(1.18)}
  45%{transform:rotate(14deg) scale(.96)}
  70%{transform:rotate(-8deg) scale(1.12)}
  100%{transform:rotate(0) scale(1)}
}

#board .tile{
  cursor:pointer;
}
#board .tile:hover{
  outline:2px solid rgba(255,255,255,.75);
  outline-offset:-2px;
}

/* Build indicators appear near the top of the property face, under the group color. */
#board .tile > .tile-content > .build-strip{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:2px !important;
  min-height:11px !important;
  flex:0 0 auto !important;
}
.mini-house{
  width:8px;
  height:8px;
  border-radius:2px 2px 1px 1px;
  background:#16a34a;
  box-shadow:0 -3px 0 #15803d inset, 0 0 0 1px rgba(255,255,255,.5);
  display:inline-block;
}
.mini-hotel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:11px;
  min-width:34px;
  padding:0 4px;
  border-radius:4px;
  background:#dc2626;
  color:white;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.04em;
}

/* Smaller space-info popup. */
.manage-pop{
  width:min(430px, calc(100% - 24px)) !important;
  max-height:62vh !important;
  padding:10px !important;
}
.single-space-card{
  margin-top:0 !important;
}
.single-space-card .pc-header{
  padding:10px !important;
}
.single-space-card .pc-header h2{
  font-size:18px !important;
}
.single-space-card .pc-body{
  padding:10px !important;
}
.single-space-card .pc-grid{
  grid-template-columns:1fr 1fr !important;
}
.single-space-card .pc-stat{
  font-size:12px !important;
  padding:7px !important;
}
.single-space-card .pc-stat.wide{
  grid-column:1 / -1;
}
.single-space-card .property-actions{
  margin-top:4px;
}
.single-space-card .property-actions button{
  padding:7px 9px !important;
  font-size:12px !important;
}


/* v17: larger 3D white dice below the game log */
.dice-zone{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:92px;
  margin-top:2px;
}
.dice.dice-3d{
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:18px;
  min-height:86px;
  font-size:0 !important;
  letter-spacing:0 !important;
  filter:none !important;
  perspective:720px;
}
.die-cube{
  position:relative;
  width:76px;
  height:76px;
  border-radius:16px;
  display:inline-block;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.98), rgba(255,255,255,.86) 42%, rgba(226,232,240,.96) 74%, rgba(203,213,225,1));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 18px 26px rgba(0,0,0,.38),
    0 7px 0 rgba(148,163,184,.95),
    inset 8px 8px 12px rgba(255,255,255,.98),
    inset -10px -12px 18px rgba(100,116,139,.35);
  transform:rotateX(13deg) rotateY(-16deg) translateZ(0);
  transform-style:preserve-3d;
}
.die-cube::before{
  content:"";
  position:absolute;
  inset:5px 8px 12px 5px;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,0) 58%);
  pointer-events:none;
}
.pip{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#111827;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.2), inset -1px -1px 2px rgba(0,0,0,.55);
}
.pip.tl{left:18px;top:18px}
.pip.tr{right:18px;top:18px}
.pip.ml{left:18px;top:32px}
.pip.mr{right:18px;top:32px}
.pip.bl{left:18px;bottom:18px}
.pip.br{right:18px;bottom:18px}
.pip.c{left:50%;top:50%;transform:translate(-50%,-50%)}

.dice.dice-rolling .die-cube:first-child{
  animation:dice-cube-roll-left .72s cubic-bezier(.2,.9,.2,1);
}
.dice.dice-rolling .die-cube:last-child{
  animation:dice-cube-roll-right .72s cubic-bezier(.2,.9,.2,1);
}
@keyframes dice-cube-roll-left{
  0%{transform:rotateX(13deg) rotateY(-16deg) translateY(0) scale(1)}
  20%{transform:rotateX(85deg) rotateY(-48deg) translateY(-18px) scale(1.08)}
  48%{transform:rotateX(160deg) rotateY(24deg) translateY(7px) scale(.96)}
  72%{transform:rotateX(250deg) rotateY(-30deg) translateY(-8px) scale(1.04)}
  100%{transform:rotateX(13deg) rotateY(-16deg) translateY(0) scale(1)}
}
@keyframes dice-cube-roll-right{
  0%{transform:rotateX(13deg) rotateY(-16deg) translateY(0) scale(1)}
  18%{transform:rotateX(-80deg) rotateY(52deg) translateY(-16px) scale(1.08)}
  50%{transform:rotateX(-170deg) rotateY(-26deg) translateY(8px) scale(.96)}
  75%{transform:rotateX(-245deg) rotateY(34deg) translateY(-7px) scale(1.04)}
  100%{transform:rotateX(13deg) rotateY(-16deg) translateY(0) scale(1)}
}

/* Keep the center area balanced with dice below the log */
.center-card{
  gap:7px !important;
}
.center-card h2{
  font-size:clamp(24px,3.4vw,46px) !important;
}
.board-log-wrap{
  max-height:104px !important;
  flex:0 0 104px !important;
  min-height:74px !important;
}
.board-log{
  height:72px !important;
  max-height:72px !important;
  min-height:62px !important;
}

/* v17: rent schedule resembles Monopoly-style property cards */
.rent-schedule{
  grid-column:1 / -1;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.25);
  border-radius:12px;
  padding:8px;
  margin-top:2px;
}
.rent-schedule h3{
  margin:0 0 6px;
  text-align:center;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.rent-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:4px 6px;
  border-top:1px solid rgba(148,163,184,.18);
  font-size:12px;
}
.rent-row:first-of-type{
  border-top:0;
}
.rent-row strong{
  font-size:13px;
}


/* v18: bigger log again, more premium dice styling, clearer token silhouettes */
.board-log-wrap{
  max-height:158px !important;
  flex:0 0 158px !important;
  min-height:126px !important;
}
.board-log{
  height:126px !important;
  max-height:126px !important;
  min-height:110px !important;
  font-size:12px !important;
}
.board-log p{
  font-size:12px !important;
  margin:.16rem 0 .32rem !important;
}
.dice-zone{
  min-height:84px !important;
  margin-top:0 !important;
}

/* Replace cheap blocky dice with rounded ivory dice and subtler realistic depth. */
.dice.dice-3d{
  gap:20px !important;
  min-height:82px !important;
  perspective:900px !important;
}
.die-cube{
  width:72px !important;
  height:72px !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 30% 24%, #ffffff 0%, #ffffff 24%, #f8fafc 43%, #e8edf4 76%, #cbd5e1 100%) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 19px 28px rgba(2,6,23,.34),
    0 8px 12px rgba(15,23,42,.18),
    0 5px 0 rgba(148,163,184,.78),
    inset 7px 7px 12px rgba(255,255,255,.95),
    inset -9px -10px 15px rgba(100,116,139,.24) !important;
  transform:rotateX(11deg) rotateY(-13deg) translateZ(0) !important;
}
.die-cube::before{
  inset:6px 8px 16px 6px !important;
  border-radius:15px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.24) 42%,rgba(255,255,255,0) 72%) !important;
}
.die-cube::after{
  content:"" !important;
  position:absolute !important;
  left:9px !important;
  right:9px !important;
  bottom:-9px !important;
  height:10px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(15,23,42,.24),rgba(15,23,42,0) 70%) !important;
  transform:rotateX(70deg) !important;
}
.pip{
  width:11px !important;
  height:11px !important;
  background:
    radial-gradient(circle at 35% 32%, #374151, #111827 68%, #030712 100%) !important;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.16),
    inset -1px -1px 3px rgba(0,0,0,.58),
    0 1px 1px rgba(255,255,255,.46) !important;
}
.pip.tl{left:18px !important;top:18px !important}
.pip.tr{right:18px !important;top:18px !important}
.pip.ml{left:18px !important;top:31px !important}
.pip.mr{right:18px !important;top:31px !important}
.pip.bl{left:18px !important;bottom:18px !important}
.pip.br{right:18px !important;bottom:18px !important}
.pip.c{left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important}

/* Better silhouette rendering in picker and token pieces */
.animal-choice svg,
.token svg{
  overflow:visible !important;
}
.animal-choice svg path,
.token svg path{
  fill:currentColor !important;
  stroke:rgba(255,255,255,.28);
  stroke-width:1.4;
  stroke-linejoin:round;
}
.token svg path{
  stroke:rgba(255,255,255,.38);
  stroke-width:1.8;
}

/* Slightly more room for the detailed silhouettes inside tokens. */
.token svg{
  width:21px !important;
  height:21px !important;
}


/* v19: place dice lower in the center board area */
.center-card{
  justify-content:flex-start !important;
  padding:16px 18px 22px !important;
  gap:7px !important;
}
.dice-zone{
  margin-top:auto !important;
  margin-bottom:8px !important;
  min-height:100px !important;
  align-self:stretch !important;
}

/* v19: cleaner, less cheap-looking premium white dice */
.dice.dice-3d{
  gap:22px !important;
  min-height:96px !important;
  perspective:1000px !important;
}
.die-cube{
  width:76px !important;
  height:76px !important;
  border-radius:19px !important;
  background:
    linear-gradient(145deg,#ffffff 0%,#ffffff 31%,#f1f5f9 68%,#cbd5e1 100%) !important;
  border:1px solid rgba(255,255,255,.98) !important;
  box-shadow:
    0 24px 34px rgba(2,6,23,.36),
    0 9px 0 rgba(148,163,184,.72),
    0 10px 16px rgba(15,23,42,.18),
    inset 8px 8px 13px rgba(255,255,255,.96),
    inset -10px -12px 18px rgba(71,85,105,.25) !important;
  transform:rotateX(12deg) rotateY(-15deg) translateZ(0) !important;
}
.die-cube::before{
  content:"" !important;
  position:absolute !important;
  inset:7px 9px 18px 7px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 73%) !important;
}
.die-cube::after{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:-12px !important;
  height:12px !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(2,6,23,.32),rgba(2,6,23,0) 72%) !important;
  transform:rotateX(70deg) !important;
}
.pip{
  width:11px !important;
  height:11px !important;
  background:radial-gradient(circle at 36% 30%,#4b5563,#111827 70%,#020617 100%) !important;
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.22),
    inset -1px -1px 3px rgba(0,0,0,.64),
    0 1px 1px rgba(255,255,255,.48) !important;
}
.pip.tl{left:19px !important;top:19px !important}
.pip.tr{right:19px !important;top:19px !important}
.pip.ml{left:19px !important;top:33px !important}
.pip.mr{right:19px !important;top:33px !important}
.pip.bl{left:19px !important;bottom:19px !important}
.pip.br{right:19px !important;bottom:19px !important}

/* v19: simpler, clearer animal icons; avoid tiny detail/stroke clutter */
.animal-choice svg path,
.token svg path,
.badge svg path,
.travel-token svg path{
  fill:currentColor !important;
  stroke:none !important;
}
.animal-choice svg{
  width:50px !important;
  height:50px !important;
}
.token svg{
  width:22px !important;
  height:22px !important;
}
.travel-token svg{
  width:26px !important;
  height:26px !important;
}


/* v20: icon update based on the provided simple silhouette examples */
.animal-grid{
  grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)) !important;
}
.animal-choice{
  min-height:76px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}
.animal-choice svg{
  width:54px !important;
  height:54px !important;
  display:block !important;
}
.animal-choice span{
  font-size:11px !important;
  line-height:1 !important;
}
.animal-choice svg path,
.token svg path,
.badge svg path,
.travel-token svg path{
  fill:currentColor !important;
  stroke:none !important;
}
.token svg{
  width:23px !important;
  height:23px !important;
}
.badge svg{
  width:20px !important;
  height:20px !important;
}
.travel-token svg{
  width:27px !important;
  height:27px !important;
}

/* Cleaner token silhouettes read better without internal outlines. */
.token{
  color:var(--token-color) !important;
}


/* v21: larger board tokens with intentional overlap */
#board .tokens{
  position:absolute !important;
  z-index:20 !important;
  display:block !important;
  pointer-events:none !important;
  width:44px !important;
  height:44px !important;
}

/* Place the token stack toward the board-center edge of each side. */
#board .tile.side-top .tokens{
  left:50% !important;
  right:auto !important;
  bottom:3px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
}
#board .tile.side-bottom .tokens{
  left:50% !important;
  right:auto !important;
  top:3px !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
}
#board .tile.side-right .tokens{
  left:3px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-left .tokens{
  right:3px !important;
  left:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.corner .tokens{
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
}

/* Larger pieces. Multiple pieces on one space intentionally overlap. */
#board .token{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  transform:
    translate(calc(var(--stack-index, 0) * 7px), calc(var(--stack-index, 0) * -5px))
    scale(1) !important;
  box-shadow:
    0 7px 14px rgba(0,0,0,.38),
    0 0 0 2px rgba(255,255,255,.82),
    inset 0 0 0 1px rgba(255,255,255,.28) !important;
}
#board .token.current-token{
  transform:
    translate(calc(var(--stack-index, 0) * 7px), calc(var(--stack-index, 0) * -5px))
    scale(1.12) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.42),
    0 0 0 3px rgba(255,255,255,.92),
    0 0 0 6px rgba(250,204,21,.38),
    inset 0 0 0 1px rgba(255,255,255,.28) !important;
}
#board .token svg{
  width:29px !important;
  height:29px !important;
}

/* Keep animated traveling token consistent with the larger pieces */
.travel-token{
  width:42px !important;
  height:42px !important;
}
.travel-token svg{
  width:31px !important;
  height:31px !important;
}


/* v22: token icons extracted from the approved generated option sheets.
   They are CSS masks, so each silhouette fills with the selected token color. */
.animal-mask{
  display:inline-block;
  width:1em;
  height:1em;
  background:currentColor;
  -webkit-mask-image:var(--animal-mask);
  mask-image:var(--animal-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.animal-choice .animal-mask{
  width:54px !important;
  height:54px !important;
}
.token .animal-mask{
  width:30px !important;
  height:30px !important;
}
.badge .animal-mask{
  width:22px !important;
  height:22px !important;
}
.travel-token .animal-mask{
  width:31px !important;
  height:31px !important;
}
.fallback-animal{
  border-radius:50%;
}

/* The icon picker now contains 21 choices, so keep it compact and readable. */
.animal-grid{
  grid-template-columns:repeat(auto-fit, minmax(82px, 1fr)) !important;
}
.animal-choice{
  min-height:84px !important;
}
.animal-choice span{
  font-size:10px !important;
  line-height:1.05 !important;
  text-align:center !important;
}


/* v23: more 3D dice closer to the provided sample */
.dice.dice-3d{
  gap:24px !important;
  min-height:96px !important;
  perspective:1100px !important;
}
.die-outer{
  position:relative;
  display:inline-block;
  width:72px;
  height:72px;
  transform-style:preserve-3d;
  filter:drop-shadow(0 16px 18px rgba(15,23,42,.28));
}
.die-face{
  position:absolute;
  width:54px;
  height:54px;
  border-radius:14px;
  background:linear-gradient(145deg,#ffffff 0%,#f3f4f6 78%,#d1d5db 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 6px 6px 10px rgba(255,255,255,.9), inset -7px -7px 11px rgba(156,163,175,.36);
}
.die-front{
  left:8px;
  bottom:8px;
  transform:translateZ(0);
  background:linear-gradient(145deg,#ececec 0%,#d9d9d9 100%);
}
.die-top{
  left:8px;
  top:-2px;
  transform:skewX(-45deg) scaleY(.84);
  transform-origin:bottom left;
  background:linear-gradient(145deg,#fafafa 0%,#efefef 100%);
}
.die-right{
  right:0px;
  bottom:8px;
  transform:skewY(-45deg) scaleX(.84);
  transform-origin:bottom left;
  background:linear-gradient(145deg,#dddddd 0%,#cfcfcf 100%);
}
.die-face .pip{
  position:absolute;
  width:11px !important;
  height:11px !important;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #4b5563 0%, #1f2937 70%, #0f172a 100%) !important;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.22), inset -1px -1px 2px rgba(0,0,0,.5);
}
.die-face .pip.tl{left:11px;top:11px}
.die-face .pip.tr{right:11px;top:11px}
.die-face .pip.ml{left:11px;top:21px}
.die-face .pip.mr{right:11px;top:21px}
.die-face .pip.bl{left:11px;bottom:11px}
.die-face .pip.br{right:11px;bottom:11px}
.die-face .pip.c{left:50%;top:50%;transform:translate(-50%,-50%)}

.dice.dice-rolling .die-outer:first-child{
  animation:dice-roll-left-v23 .82s cubic-bezier(.2,.85,.2,1);
}
.dice.dice-rolling .die-outer:last-child{
  animation:dice-roll-right-v23 .82s cubic-bezier(.2,.85,.2,1);
}
@keyframes dice-roll-left-v23{
  0%{transform:translateY(0) rotate(0deg)}
  18%{transform:translateY(-14px) rotate(-10deg)}
  46%{transform:translateY(6px) rotate(8deg)}
  72%{transform:translateY(-5px) rotate(-5deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@keyframes dice-roll-right-v23{
  0%{transform:translateY(0) rotate(0deg)}
  18%{transform:translateY(-12px) rotate(10deg)}
  46%{transform:translateY(7px) rotate(-8deg)}
  72%{transform:translateY(-4px) rotate(5deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

/* Slightly smaller board tokens than v21/v22 */
#board .tokens{
  width:40px !important;
  height:40px !important;
}
#board .token{
  width:34px !important;
  height:34px !important;
  transform:
    translate(calc(var(--stack-index, 0) * 6px), calc(var(--stack-index, 0) * -4px))
    scale(1) !important;
}
#board .token.current-token{
  transform:
    translate(calc(var(--stack-index, 0) * 6px), calc(var(--stack-index, 0) * -4px))
    scale(1.08) !important;
}
#board .token .animal-mask{
  width:26px !important;
  height:26px !important;
}
.travel-token{
  width:36px !important;
  height:36px !important;
}
.travel-token .animal-mask{
  width:27px !important;
  height:27px !important;
}

/* Show current Vacation pot on the Vacation board space */
#board .tile > .tile-content > .space-pot{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:2px 6px 0 !important;
  padding:2px 6px !important;
  min-height:16px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(96,165,250,.16)) !important;
  border:1px solid rgba(187,247,208,.32) !important;
  color:#dcfce7 !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
}
#board .tile.side-left > .tile-content > .space-pot,
#board .tile.side-right > .tile-content > .space-pot{
  font-size:8px !important;
  min-height:14px !important;
  padding:2px 5px !important;
}
#board .tile.corner > .tile-content > .space-pot{
  margin-top:4px !important;
}


/* v24: invert token colors so the chip uses the selected color and the silhouette is white */
#board .token,
.travel-token{
  background:var(--token-color) !important;
  color:#ffffff !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:
    0 8px 16px rgba(0,0,0,.34),
    0 0 0 2px rgba(255,255,255,.86),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 5px rgba(0,0,0,.18) !important;
}
#board .token.current-token{
  box-shadow:
    0 10px 18px rgba(0,0,0,.38),
    0 0 0 3px rgba(255,255,255,.94),
    0 0 0 6px rgba(250,204,21,.34),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 5px rgba(0,0,0,.18) !important;
}
#board .token .animal-mask,
.travel-token .animal-mask{
  background:#ffffff !important;
}

/* Optional preview of inverted icon treatment in player list */
.player .badge{
  position:relative;
}
.player .badge .animal-mask{
  background:#ffffff !important;
  width:18px !important;
  height:18px !important;
  border-radius:999px !important;
  padding:0 !important;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.player .badge{
  --badge-icon-color: currentColor;
}
.player .badge .animal-mask{
  box-shadow:0 0 0 8px currentColor;
}

/* v24: cleaner isometric 3D dice inspired by the provided example */
.dice.dice-3d{
  gap:26px !important;
  min-height:100px !important;
  perspective:900px !important;
}
.die-outer{
  position:relative;
  display:inline-block;
  width:80px;
  height:80px;
  transform-style:preserve-3d;
  filter:drop-shadow(0 14px 16px rgba(15,23,42,.22));
}
.die-face{
  position:absolute;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.92);
  overflow:hidden;
}
.die-front{
  width:52px;
  height:52px;
  left:8px;
  top:20px;
  background:linear-gradient(145deg,#ededed 0%,#d8d8d8 100%);
  box-shadow:
    inset 7px 7px 10px rgba(255,255,255,.78),
    inset -6px -6px 10px rgba(148,163,184,.24);
}
.die-top{
  width:52px;
  height:52px;
  left:16px;
  top:4px;
  background:linear-gradient(145deg,#fbfbfb 0%,#f0f0f0 100%);
  transform:skewX(-42deg) scaleY(.82);
  transform-origin:left bottom;
  box-shadow:
    inset 6px 6px 10px rgba(255,255,255,.82),
    inset -5px -5px 9px rgba(226,232,240,.28);
}
.die-right{
  width:52px;
  height:52px;
  left:44px;
  top:14px;
  background:linear-gradient(145deg,#dddddd 0%,#cfcfcf 100%);
  transform:skewY(-42deg) scaleX(.82);
  transform-origin:left top;
  box-shadow:
    inset 4px 4px 8px rgba(255,255,255,.45),
    inset -6px -6px 10px rgba(100,116,139,.18);
}
.die-face .pip{
  position:absolute;
  width:11px !important;
  height:11px !important;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #52525b 0%, #27272a 68%, #09090b 100%) !important;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.18),
    inset -1px -1px 2px rgba(0,0,0,.48);
}
.die-face .pip.tl{left:11px;top:11px}
.die-face .pip.tr{right:11px;top:11px}
.die-face .pip.ml{left:11px;top:20px}
.die-face .pip.mr{right:11px;top:20px}
.die-face .pip.bl{left:11px;bottom:11px}
.die-face .pip.br{right:11px;bottom:11px}
.die-face .pip.c{left:50%;top:50%;transform:translate(-50%,-50%)}

.dice.dice-rolling .die-outer:first-child{
  animation:dice-roll-left-v24 .82s cubic-bezier(.2,.85,.2,1);
}
.dice.dice-rolling .die-outer:last-child{
  animation:dice-roll-right-v24 .82s cubic-bezier(.2,.85,.2,1);
}
@keyframes dice-roll-left-v24{
  0%{transform:translateY(0) rotate(0deg)}
  20%{transform:translateY(-12px) rotate(-8deg)}
  48%{transform:translateY(5px) rotate(7deg)}
  74%{transform:translateY(-4px) rotate(-4deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@keyframes dice-roll-right-v24{
  0%{transform:translateY(0) rotate(0deg)}
  20%{transform:translateY(-11px) rotate(8deg)}
  48%{transform:translateY(5px) rotate(-7deg)}
  74%{transform:translateY(-4px) rotate(4deg)}
  100%{transform:translateY(0) rotate(0deg)}
}


/* v25: stable SVG stopped dice shape; animation moves the whole die only */
.dice.dice-3d{
  gap:24px !important;
  min-height:104px !important;
  perspective:none !important;
}
.die-svg{
  width:86px;
  height:86px;
  overflow:visible;
  display:inline-block;
  filter:drop-shadow(0 13px 14px rgba(2,6,23,.28));
  transform-origin:50% 55%;
}
.die-shadow{fill:rgba(15,23,42,.14)}
.die-top-svg{fill:url(#none); fill:#f8f8f8}
.die-front-svg{fill:#d9d9d9}
.die-right-svg{fill:#cfcfcf}
.die-highlight-svg{fill:rgba(255,255,255,.28); pointer-events:none}
.svg-pip{
  fill:#070707;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.12));
}
.front-pip{opacity:.86}
.right-pip{opacity:.78}
.dice.dice-rolling .die-svg:first-child{
  animation:dice-svg-roll-a 1s cubic-bezier(.2,.8,.2,1);
}
.dice.dice-rolling .die-svg:last-child{
  animation:dice-svg-roll-b 1s cubic-bezier(.2,.8,.2,1);
}
@keyframes dice-svg-roll-a{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  18%{transform:translateY(-16px) rotate(-22deg) scale(1.04)}
  38%{transform:translateY(6px) rotate(18deg) scale(.98)}
  60%{transform:translateY(-8px) rotate(-11deg) scale(1.02)}
  82%{transform:translateY(2px) rotate(5deg) scale(1)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes dice-svg-roll-b{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  18%{transform:translateY(-14px) rotate(22deg) scale(1.04)}
  38%{transform:translateY(7px) rotate(-18deg) scale(.98)}
  60%{transform:translateY(-7px) rotate(11deg) scale(1.02)}
  82%{transform:translateY(2px) rotate(-5deg) scale(1)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}

/* v25: ensure token chip = selected color, silhouette = white */
#board .token,
.travel-token{
  background:var(--token-color) !important;
  color:#ffffff !important;
}
#board .token .animal-mask,
.travel-token .animal-mask{
  background:#ffffff !important;
}
.animal-choice{
  position:relative;
  overflow:hidden;
}
.animal-choice::before{
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  border-radius:999px;
  background:currentColor;
  opacity:1;
}
.animal-choice .animal-mask{
  position:relative;
  z-index:1;
  background:#ffffff !important;
  width:40px !important;
  height:40px !important;
}


/* v26: predefined stopped dice faces with a rolling-preview effect */
.dice.dice-3d{
  gap:24px !important;
  min-height:104px !important;
  perspective:none !important;
}
.die-svg{
  width:90px;
  height:90px;
  overflow:visible;
  display:inline-block;
  transform-origin:50% 55%;
}
.die-shadow{
  fill:rgba(15,23,42,.14);
}
.die-top-svg{
  fill:#f7f7f7;
}
.die-front-svg{
  fill:#dedede;
}
.die-right-svg{
  fill:#cfcfcf;
}
.die-highlight-svg{
  fill:rgba(255,255,255,.32);
}
.svg-pip{
  fill:#090909;
}
.top-pip{ opacity:.96; }
.front-pip{ opacity:.9; }
.right-pip{ opacity:.8; }

.rolling-preview{
  filter:blur(1.15px) drop-shadow(0 10px 12px rgba(2,6,23,.20));
  opacity:.98;
}
.dice.dice-rolling .die-svg:first-child{
  animation:dice-svg-roll-a-v26 1s cubic-bezier(.2,.82,.2,1);
}
.dice.dice-rolling .die-svg:last-child{
  animation:dice-svg-roll-b-v26 1s cubic-bezier(.2,.82,.2,1);
}
@keyframes dice-svg-roll-a-v26{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  12%{transform:translateY(-8px) rotate(-10deg) scale(1.01)}
  28%{transform:translateY(-15px) rotate(-20deg) scale(1.03)}
  50%{transform:translateY(6px) rotate(14deg) scale(.98)}
  72%{transform:translateY(-6px) rotate(-9deg) scale(1.01)}
  88%{transform:translateY(2px) rotate(4deg) scale(1)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes dice-svg-roll-b-v26{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  12%{transform:translateY(-7px) rotate(10deg) scale(1.01)}
  28%{transform:translateY(-14px) rotate(20deg) scale(1.03)}
  50%{transform:translateY(7px) rotate(-14deg) scale(.98)}
  72%{transform:translateY(-5px) rotate(9deg) scale(1.01)}
  88%{transform:translateY(2px) rotate(-4deg) scale(1)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}


/* v27: Chance / Community Fund cards stay longer and can be manually closed */
.card-pop{
  position:relative !important;
  padding-top:34px !important;
}
.card-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.72);
  color:#f8fafc;
  font-size:20px;
  line-height:1;
  font-weight:900;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.card-close:hover{
  background:rgba(30,41,59,.92);
  transform:scale(1.04);
}
.card-close:active{
  transform:scale(.96);
}
.card-pop #cardText,
#cardText{
  font-size:15px !important;
  line-height:1.35 !important;
}


/* v29: final dice styling using predefined static face artwork */
.dice.dice-3d{
  gap:24px !important;
  min-height:106px !important;
  perspective:none !important;
}
.die-svg{
  width:98px !important;
  height:98px !important;
  overflow:visible !important;
  display:inline-block !important;
  transform-origin:50% 55% !important;
  filter:drop-shadow(0 12px 14px rgba(15,23,42,.18));
}
.die-shadow{
  fill:rgba(15,23,42,.14) !important;
}
.die-top-svg{
  fill:url(#dieTopGrad) !important;
  stroke:rgba(255,255,255,.85);
  stroke-width:1;
}
.die-front-svg{
  fill:url(#dieFrontGrad) !important;
  stroke:rgba(205,205,205,.75);
  stroke-width:1;
}
.die-right-svg{
  fill:url(#dieRightGrad) !important;
  stroke:rgba(190,190,190,.8);
  stroke-width:1;
}
.die-highlight-svg{
  fill:rgba(255,255,255,.33) !important;
  pointer-events:none;
}
.svg-pip{
  fill:url(#pipGloss) !important;
}
.top-pip{ opacity:.98; }
.front-pip{ opacity:.93; }
.right-pip{ opacity:.88; }

.rolling-preview{
  filter:blur(1.4px) drop-shadow(0 10px 12px rgba(2,6,23,.20)) !important;
  opacity:.97 !important;
}
.dice.dice-rolling .die-svg:first-child{
  animation:dice-svg-roll-a-v29 1s cubic-bezier(.2,.82,.2,1) !important;
}
.dice.dice-rolling .die-svg:last-child{
  animation:dice-svg-roll-b-v29 1s cubic-bezier(.2,.82,.2,1) !important;
}
@keyframes dice-svg-roll-a-v29{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  12%{transform:translateY(-8px) rotate(-10deg) scale(1.01)}
  28%{transform:translateY(-15px) rotate(-20deg) scale(1.03)}
  50%{transform:translateY(6px) rotate(14deg) scale(.98)}
  72%{transform:translateY(-6px) rotate(-9deg) scale(1.01)}
  88%{transform:translateY(2px) rotate(4deg) scale(1)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes dice-svg-roll-b-v29{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  12%{transform:translateY(-7px) rotate(10deg) scale(1.01)}
  28%{transform:translateY(-14px) rotate(20deg) scale(1.03)}
  50%{transform:translateY(7px) rotate(-14deg) scale(.98)}
  72%{transform:translateY(-5px) rotate(9deg) scale(1.01)}
  88%{transform:translateY(2px) rotate(-4deg) scale(1)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}


/* v30: lighten property detail rent schedule */
.rent-schedule{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.16) !important;
  color:#0f172a !important;
  box-shadow:0 8px 22px rgba(2,6,23,.14) !important;
}
.rent-schedule h3,
.rent-row,
.rent-row span,
.rent-row strong{
  color:#0f172a !important;
}
.rent-row{
  border-top:1px solid rgba(15,23,42,.12) !important;
}
.rent-row:first-of-type{
  border-top:0 !important;
}


/* v31: dice are now actual predefined PNG face assets */
.dice.dice-3d{
  gap:18px !important;
  min-height:108px !important;
  perspective:none !important;
}
.die-img{
  width:96px !important;
  height:96px !important;
  object-fit:contain !important;
  display:inline-block !important;
  filter:drop-shadow(0 12px 14px rgba(15,23,42,.22)) !important;
  transform-origin:50% 55% !important;
}
.rolling-preview{
  filter:blur(1.4px) drop-shadow(0 12px 14px rgba(15,23,42,.22)) !important;
}
.dice.dice-rolling .die-img:first-child{
  animation:dice-img-roll-a-v31 1s cubic-bezier(.2,.82,.2,1) !important;
}
.dice.dice-rolling .die-img:last-child{
  animation:dice-img-roll-b-v31 1s cubic-bezier(.2,.82,.2,1) !important;
}
@keyframes dice-img-roll-a-v31{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  16%{transform:translateY(-9px) rotate(-14deg) scale(1.03)}
  35%{transform:translateY(-16px) rotate(-28deg) scale(1.05)}
  58%{transform:translateY(7px) rotate(18deg) scale(.98)}
  78%{transform:translateY(-5px) rotate(-8deg) scale(1.01)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}
@keyframes dice-img-roll-b-v31{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  16%{transform:translateY(-8px) rotate(14deg) scale(1.03)}
  35%{transform:translateY(-15px) rotate(28deg) scale(1.05)}
  58%{transform:translateY(8px) rotate(-18deg) scale(.98)}
  78%{transform:translateY(-4px) rotate(8deg) scale(1.01)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}


/* v33: token picker/preview fixes */
.animal-choice{
  border:2px solid rgba(148,163,184,.25) !important;
}
.animal-choice.selected{
  border-color:#facc15 !important;
  box-shadow:0 0 0 3px rgba(250,204,21,.24), 0 10px 22px rgba(0,0,0,.22) !important;
  transform:translateY(-1px);
}
.token-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:8px auto 10px;
  padding:10px 12px;
  width:min(100%, 270px);
  border-radius:16px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.42);
}
.preview-chip{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.85), inset 0 -2px 5px rgba(0,0,0,.18);
}
.preview-chip .animal-mask{
  width:32px !important;
  height:32px !important;
  background:#fff !important;
}
.token-preview strong{
  display:block;
  font-size:12px;
  color:#f8fafc;
}
.token-preview span{
  display:block;
  font-size:12px;
  color:#cbd5e1;
}


/* v34: icon picker is icon-only, no overlapping text labels */
.animal-choice span{
  display:none !important;
}
.animal-choice{
  min-width:54px !important;
  min-height:54px !important;
  width:54px !important;
  height:54px !important;
  padding:6px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.animal-choice::before{
  width:46px !important;
  height:46px !important;
}
.animal-choice .animal-mask{
  width:34px !important;
  height:34px !important;
}
.token-preview{
  width:auto !important;
  max-width:92px !important;
  padding:8px !important;
}
.token-preview strong,
.token-preview span{
  display:none !important;
}

/* v34: bigger dice image assets */
.dice.dice-3d{
  gap:22px !important;
  min-height:140px !important;
}
.die-img{
  width:128px !important;
  height:128px !important;
}
.rolling-preview{
  filter:blur(1.35px) drop-shadow(0 14px 16px rgba(15,23,42,.22)) !important;
}

/* v34: make debug mode status stand out */
#centerStatus{
  min-height:1.4em;
}


/* v36-from-v34 visible build marker */
#buildBadge{
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:99999;
  padding:6px 10px;
  border-radius:999px;
  background:#facc15;
  color:#111827;
  font-weight:900;
  font-size:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}

/* v36-from-v34: very obviously larger dice */
.dice.dice-3d{
  gap:34px !important;
  min-height:190px !important;
}
.die-img{
  width:172px !important;
  height:172px !important;
}

/* v36-from-v34: card modal remains visible longer */
.card-pop{
  animation:card-in-hold-v36 .42s ease-out forwards !important;
}
@keyframes card-in-hold-v36{
  0%{opacity:0;transform:translateY(26px) scale(.9) rotate(-2deg)}
  70%{opacity:1;transform:translateY(0) scale(1.03) rotate(.5deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}

/* v36-from-v34: minimal right player panel */
.player.player-summary{
  cursor:pointer;
  padding:11px 12px !important;
}
.player.player-summary:hover{
  outline:2px solid rgba(96,165,250,.75);
  background:rgba(15,23,42,.68);
}
.player-summary-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.player-summary .badge{
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:currentColor;
}
.player-summary .badge .animal-mask{
  width:28px !important;
  height:28px !important;
  background:#fff !important;
}
.player-summary-name{
  display:grid;
  gap:2px;
  min-width:0;
}
.player-summary-name strong{
  color:#f8fafc;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player-summary-name span{
  color:#94a3b8;
  font-size:12px;
}
.player-summary .money{
  margin:8px 0 0 !important;
  font-size:22px !important;
}

/* v36-from-v34: player trade popup */
.player-detail-card{
  border-radius:24px;
  overflow:hidden;
  background:#f8fafc;
  color:#0f172a;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  padding:20px;
  margin-top:24px;
}
.player-detail-header{
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(15,23,42,.12);
  padding-bottom:14px;
  margin-bottom:14px;
}
.large-badge{
  width:58px;
  height:58px;
  min-width:58px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:currentColor !important;
}
.large-badge .animal-mask{
  width:38px !important;
  height:38px !important;
  background:#fff !important;
}
.player-detail-header h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.04em;
}
.player-detail-header p{
  margin:4px 0 0;
  color:#475569;
}
.trade-prompt{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  padding:14px;
  margin-bottom:14px;
}
.trade-prompt h3{
  margin:0 0 6px;
}
.trade-prompt p{
  margin:0 0 12px;
  color:#475569;
}
.trade-lists{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.trade-column{
  background:#e2e8f0;
  border-radius:18px;
  padding:14px;
}
.trade-column h3{
  margin:0 0 10px;
  font-size:16px;
}
.trade-prop-list{
  display:grid;
  gap:8px;
}
.trade-prop{
  border-radius:14px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(15,23,42,.1);
}
.trade-prop strong{
  display:block;
  color:#0f172a;
}
.trade-prop span{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:12px;
}
.trade-prop.locked{
  background:#f1f5f9;
  border-style:dashed;
  opacity:.76;
}
.trade-prop.locked span{
  color:#b45309;
}
.empty-props{
  color:#64748b;
  background:#fff;
  border-radius:14px;
  padding:12px;
}
@media(max-width:900px){
  .trade-lists{grid-template-columns:1fr;}
}


/* v37-from-v34: restore visible animal icons on Create Game token picker */
.animal-choice{
  position:relative !important;
  isolation:isolate !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  padding:0 !important;
  color:var(--token-color, currentColor);
}
.animal-choice::before{
  content:"" !important;
  position:absolute !important;
  inset:6px !important;
  width:auto !important;
  height:auto !important;
  border-radius:999px !important;
  background:currentColor !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.animal-choice .animal-mask{
  display:block !important;
  position:relative !important;
  z-index:3 !important;
  width:36px !important;
  height:36px !important;
  background:#ffffff !important;
  opacity:1 !important;
  -webkit-mask-image:var(--animal-mask) !important;
  mask-image:var(--animal-mask) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}
.animal-choice span{
  display:none !important;
}

/* Make the selected token preview use the same visible mask layer */
.preview-chip{
  display:grid !important;
  place-items:center !important;
  background:var(--token-color, currentColor) !important;
}
.preview-chip .animal-mask{
  display:block !important;
  width:34px !important;
  height:34px !important;
  background:#ffffff !important;
  opacity:1 !important;
  -webkit-mask-image:var(--animal-mask) !important;
  mask-image:var(--animal-mask) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}

/* Do not let generic badge/player styles override picker mask visibility */
#animalChoices .animal-mask{
  background:#ffffff !important;
  color:#ffffff !important;
}


/* v38-from-v34: trade popup uses a color chip for property set instead of text */
.trade-prop-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  color:#64748b;
  font-size:12px;
}
.property-set-chip{
  width:18px;
  height:18px;
  border-radius:6px;
  display:inline-block;
  flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.25), 0 1px 2px rgba(15,23,42,.18);
}
.property-set-chip.neutral{
  background:linear-gradient(135deg,#cbd5e1,#64748b);
}
.trade-prop.locked .property-set-chip{
  opacity:.6;
}

/* v38-from-v34: money movement from/to right panel feels anchored to player rows */
.money-fx{
  z-index:12000 !important;
}


/* v39-from-v34: card popups close after 4s but do not auto-fade early */
.card-pop{
  animation:card-in-hold-v39 .32s ease-out forwards !important;
}
@keyframes card-in-hold-v39{
  0%{opacity:0;transform:translateY(20px) scale(.92)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* v39-from-v34: condensed clickable trade rows and cash controls */
.compact-player-header{
  padding-bottom:10px !important;
  margin-bottom:10px !important;
}
.trade-builder{
  padding:10px !important;
}
.trade-builder-top{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.trade-builder-top h3{
  margin:0 0 3px !important;
}
.trade-builder-top p{
  margin:0 !important;
  font-size:12px;
}
.cash-offer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.cash-control{
  display:grid;
  grid-template-columns:1fr 74px;
  gap:6px;
  align-items:center;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.1);
  border-radius:12px;
  padding:8px;
}
.cash-control span{
  grid-column:1 / -1;
  font-size:12px;
  font-weight:800;
  color:#334155;
}
.cash-control input[type="range"]{
  width:100%;
}
.cash-control input[type="number"]{
  width:74px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:8px;
  padding:5px;
}
.compact-trade-lists{
  gap:10px !important;
}
.compact-trade-column{
  padding:10px !important;
}
.compact-trade-column h3{
  margin:0 0 6px !important;
  font-size:14px !important;
}
.compact-trade-prop-list{
  gap:4px !important;
}
.trade-prop{
  width:100%;
  text-align:left;
  border-radius:10px !important;
  padding:6px 8px !important;
  min-height:0 !important;
  cursor:pointer;
}
button.trade-prop{
  font:inherit;
}
.trade-prop strong{
  font-size:13px !important;
  line-height:1.1 !important;
}
.trade-prop-meta{
  margin-top:2px !important;
  font-size:11px !important;
}
.trade-prop.selected{
  outline:2px solid #22c55e;
  background:#dcfce7 !important;
}
.trade-prop.locked{
  cursor:not-allowed;
}
.property-set-chip{
  width:14px !important;
  height:14px !important;
  border-radius:4px !important;
}
.cash-line{
  background:#fff;
  border-radius:10px;
  padding:6px 8px;
  margin-bottom:6px;
  color:#334155;
}

/* v39-from-v34: right-panel trade offer indicator */
.trade-offer-panel{
  margin-top:12px;
  padding:10px;
  border-radius:16px;
  background:rgba(250,204,21,.14);
  border:1px solid rgba(250,204,21,.35);
}
.trade-offer-panel h3{
  margin:0 0 8px;
  color:#fde68a;
  font-size:14px;
}
.trade-offer-summary{
  width:100%;
  display:grid;
  gap:2px;
  text-align:left;
  border:1px solid rgba(250,204,21,.32);
  background:rgba(15,23,42,.55);
  color:#f8fafc;
  border-radius:12px;
  padding:8px;
  cursor:pointer;
}
.trade-offer-summary + .trade-offer-summary{
  margin-top:6px;
}
.trade-offer-summary span{
  color:#cbd5e1;
  font-size:12px;
}
@media(max-width:900px){
  .cash-offer-grid{grid-template-columns:1fr;}
}


/* v40-from-v34: smoother/wider trade cash slider with manual entry below */
.cash-control.cash-control-stacked{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  align-items:stretch !important;
}
.cash-control.cash-control-stacked span{
  grid-column:auto !important;
}
.cash-control.cash-control-stacked .cash-slider{
  width:100% !important;
  min-width:0 !important;
  accent-color:#22c55e;
  cursor:pointer;
}
.cash-control.cash-control-stacked .cash-number{
  width:100% !important;
  box-sizing:border-box !important;
  border:1px solid rgba(15,23,42,.18);
  border-radius:9px;
  padding:7px 8px;
  font-weight:700;
}


/* v41-from-v34: trade offer status/action controls */
.trade-offer-summary.accepted{
  border-color:rgba(34,197,94,.65) !important;
  background:rgba(20,83,45,.55) !important;
}
.trade-offer-summary.declined,
.trade-offer-summary.retracted{
  border-color:rgba(148,163,184,.45) !important;
  background:rgba(51,65,85,.55) !important;
  opacity:.78;
}
.trade-status-line{
  margin-top:4px !important;
}
.trade-action-bar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding:10px;
  margin:0 0 10px;
}
.trade-action-bar.status-only{
  color:#475569;
  font-weight:800;
}
.trade-action-bar button{
  padding:9px 12px;
  border-radius:12px;
}


/* v42-from-v34: build badge now shows both client and server build */
#buildBadge{
  max-width:360px;
  white-space:normal;
  line-height:1.25;
}


/* v44-from-v34: deal creation/viewing appears in the right panel, not over the board */
.side-deal-panel{
  margin-top:12px;
  max-height:calc(100vh - 300px);
  overflow:auto;
  border-radius:18px;
  background:rgba(15,23,42,.48);
  border:1px solid rgba(148,163,184,.22);
  padding:8px;
}
.side-deal-panel .player-detail-card.side-card{
  margin:0 !important;
  padding:12px !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.side-deal-close{
  float:right;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0 !important;
  font-size:20px;
  line-height:1;
  background:#e2e8f0;
  color:#0f172a;
}
.side-deal-panel .player-detail-header{
  gap:9px !important;
}
.side-deal-panel .large-badge{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
}
.side-deal-panel .large-badge .animal-mask{
  width:30px !important;
  height:30px !important;
}
.side-deal-panel .player-detail-header h2{
  font-size:20px !important;
}
.side-deal-panel .player-detail-header p{
  font-size:12px !important;
}
.side-deal-panel .trade-builder-top{
  display:grid !important;
  grid-template-columns:1fr !important;
}
.side-deal-panel .trade-builder-top button{
  width:100%;
}
.side-deal-panel .cash-offer-grid,
.side-deal-panel .trade-lists,
.side-deal-panel .side-trade-lists{
  grid-template-columns:1fr !important;
}
.side-deal-panel .trade-prompt{
  padding:9px !important;
  margin-bottom:9px !important;
}
.side-deal-panel .trade-prompt h3{
  font-size:14px;
}
.side-deal-panel .trade-prompt p{
  font-size:12px;
}
.side-deal-panel .trade-column{
  padding:8px !important;
}
.side-deal-panel .trade-prop{
  padding:5px 7px !important;
}
.side-deal-panel .trade-action-bar{
  display:grid;
  grid-template-columns:1fr;
}
.side-deal-panel .trade-action-bar button{
  width:100%;
}


/* v45-from-v34: preserve right-panel deal usability */
.side-deal-panel{
  scroll-behavior:auto !important;
}
@container (min-width: 520px){
  .side-deal-panel .side-trade-lists{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(min-width:1250px){
  .side-deal-panel .side-trade-lists{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* v46-from-v34: faster, non-specific blurred dice while rolling */
.rolling-blur-die{
  display:inline-block !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 38% 38%, rgba(15,23,42,.22) 0 8px, transparent 10px),
    radial-gradient(circle at 62% 62%, rgba(15,23,42,.18) 0 9px, transparent 12px),
    linear-gradient(145deg,#ffffff,#e5e7eb) !important;
  box-shadow:
    inset -10px -12px 24px rgba(15,23,42,.16),
    inset 10px 10px 20px rgba(255,255,255,.82),
    0 18px 34px rgba(15,23,42,.22) !important;
  filter:blur(6px) saturate(.7) !important;
  opacity:.78 !important;
}
.dice.dice-rolling .rolling-blur-die:first-child{
  animation:dice-img-roll-a-v31 .46s cubic-bezier(.2,.82,.2,1) !important;
}
.dice.dice-rolling .rolling-blur-die:last-child{
  animation:dice-img-roll-b-v31 .46s cubic-bezier(.2,.82,.2,1) !important;
}

/* v46-from-v34: cash amount controls side-by-side in the right-panel deal popup */
.side-deal-panel .cash-offer-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.side-deal-panel .cash-control.cash-control-stacked{
  min-width:0 !important;
}
.side-deal-panel .cash-control.cash-control-stacked .cash-number{
  min-width:0 !important;
}
@media(max-width:980px){
  .side-deal-panel .cash-offer-grid{
    grid-template-columns:1fr !important;
  }
}


/* v47-from-v34: rolling blur dice are intentionally smaller than final dice */
.rolling-blur-die{
  width:108px !important;
  height:108px !important;
  min-width:108px !important;
  min-height:108px !important;
  border-radius:22px !important;
}
.dice.dice-rolling{
  min-height:128px !important;
  gap:18px !important;
}
@media(max-width:900px){
  .rolling-blur-die{
    width:86px !important;
    height:86px !important;
    min-width:86px !important;
    min-height:86px !important;
  }
  .dice.dice-rolling{
    min-height:102px !important;
  }
}


/* v48-from-v34: clearer "Your Turn" action popup font */
#actionsPopup,
#actionPopup,
.actions-popup,
.action-popup,
.turn-actions,
.actions-sheet,
#actionsSheet,
#turnActions{
  font-family: Arial, Helvetica, sans-serif !important;
}
#actionsPopup h1,#actionsPopup h2,#actionsPopup h3,
#actionPopup h1,#actionPopup h2,#actionPopup h3,
.actions-popup h1,.actions-popup h2,.actions-popup h3,
.action-popup h1,.action-popup h2,.action-popup h3,
.turn-actions h1,.turn-actions h2,.turn-actions h3,
.actions-sheet h1,.actions-sheet h2,.actions-sheet h3,
#actionsSheet h1,#actionsSheet h2,#actionsSheet h3,
#turnActions h1,#turnActions h2,#turnActions h3{
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing:.01em !important;
  font-weight:900 !important;
  text-transform:none !important;
}

/* v48-from-v34: lift the Your Turn/action popup higher */
#actionsPopup,
#actionPopup,
.actions-popup,
.action-popup,
.turn-actions,
.actions-sheet,
#actionsSheet,
#turnActions{
  top:84px !important;
  bottom:auto !important;
  transform:none !important;
  max-height:32vh !important;
  overflow:auto !important;
}

/* v48-from-v34: tile/property detail popup sits lower and is more compact */
#manageModal.tile-detail-mode{
  align-items:flex-end !important;
  justify-content:center !important;
  padding-top:260px !important;
  padding-bottom:26px !important;
}
#manageModal.tile-detail-mode .modal-card,
#manageModal.tile-detail-mode .manage-card,
#manageModal.tile-detail-mode .property-card{
  max-width:560px !important;
  max-height:52vh !important;
  overflow:auto !important;
  padding:14px !important;
}
#manageModal.tile-detail-mode #manageContent{
  max-width:560px !important;
}
#manageModal.tile-detail-mode .property-card h1,
#manageModal.tile-detail-mode .property-card h2,
#manageModal.tile-detail-mode .property-card h3,
#manageModal.tile-detail-mode #manageContent h1,
#manageModal.tile-detail-mode #manageContent h2,
#manageModal.tile-detail-mode #manageContent h3{
  font-size:18px !important;
  margin:0 0 6px !important;
}
#manageModal.tile-detail-mode .pc-body,
#manageModal.tile-detail-mode .property-body,
#manageModal.tile-detail-mode #manageContent p,
#manageModal.tile-detail-mode #manageContent li,
#manageModal.tile-detail-mode #manageContent div{
  line-height:1.25 !important;
}
#manageModal.tile-detail-mode #manageContent p,
#manageModal.tile-detail-mode #manageContent li{
  font-size:13px !important;
}
#manageModal.tile-detail-mode .pc-actions,
#manageModal.tile-detail-mode .property-actions{
  gap:6px !important;
  margin-top:8px !important;
}
#manageModal.tile-detail-mode button{
  padding:7px 10px !important;
  border-radius:10px !important;
}

/* v48-from-v34: hotel is displayed as an icon */
.hotel-icon,
.building-hotel{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
  font-size:16px !important;
  line-height:1 !important;
}


/* v49-from-v34: actually move the Your Actions / Your Turn popup higher in the board center */
.center-card > #turnActionModal.turn-action-modal,
.center-card > .turn-action-modal{
  position:absolute !important;
  inset:6px !important;
  z-index:90 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:2px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  padding-bottom:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
  place-items:unset !important;
}
.center-card > #turnActionModal.turn-action-modal.hidden,
.center-card > .turn-action-modal.hidden{
  display:none !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-action-pop,
.center-card > .turn-action-modal .turn-action-pop{
  pointer-events:auto !important;
  margin-top:0 !important;
  transform:none !important;
  width:min(292px, calc(100% - 12px)) !important;
  overflow:auto !important;
  padding:10px !important;
  border-radius:12px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-action-pop h2,
.center-card > .turn-action-modal .turn-action-pop h2{
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:18px !important;
  line-height:1.05 !important;
  margin:0 0 2px !important;
  padding:0 !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-action-pop p,
.center-card > .turn-action-modal .turn-action-pop p{
  margin:0 0 6px !important;
  font-size:11px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions,
.center-card > .turn-action-modal .turn-actions{
  gap:6px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions button,
.center-card > .turn-action-modal .turn-actions button{
  padding:7px 8px !important;
  font-size:12px !important;
  border-radius:10px !important;
}

/* Keep property card detail popup lower, leaving a clear lane under the raised action popup */
#manageModal.tile-detail-mode{
  padding-top:340px !important;
  padding-bottom:18px !important;
}
#manageModal.tile-detail-mode .property-card{
  margin-top:0 !important;
  max-height:46vh !important;
}


/* v50-from-v34: center property card left-to-right on the board */
#manageModal.tile-detail-mode{
  display:block !important;
  background:rgba(2,6,23,.10) !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
  padding:0 !important;
}
#manageModal.tile-detail-mode .manage-pop{
  position:fixed !important;
  left:var(--board-popup-center-x, 50vw) !important;
  top:calc(50vh + 88px) !important;
  transform:translateX(-50%) !important;
  width:min(430px, calc(var(--board-popup-width, 720px) - 28px), calc(100vw - 28px)) !important;
  max-height:42vh !important;
  overflow:auto !important;
  pointer-events:auto !important;
  margin:0 !important;
  padding:10px !important;
  border-radius:14px !important;
}
#manageModal.tile-detail-mode .property-card{
  margin-top:0 !important;
  border-radius:16px !important;
  box-shadow:0 12px 34px rgba(0,0,0,.32) !important;
}
#manageModal.tile-detail-mode .pc-header{
  padding:9px 12px !important;
}
#manageModal.tile-detail-mode .pc-header h2{
  font-size:18px !important;
  line-height:1.05 !important;
}
#manageModal.tile-detail-mode .pc-header div{
  font-size:11px !important;
  opacity:.9 !important;
}
#manageModal.tile-detail-mode .pc-body{
  padding:9px !important;
  gap:7px !important;
}
#manageModal.tile-detail-mode .pc-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}
#manageModal.tile-detail-mode .pc-stat{
  padding:6px 7px !important;
  border-radius:9px !important;
  font-size:12px !important;
}
#manageModal.tile-detail-mode .build-row{
  gap:6px !important;
  font-size:12px !important;
}
#manageModal.tile-detail-mode .property-actions{
  gap:6px !important;
  margin-top:3px !important;
}
#manageModal.tile-detail-mode .property-actions button{
  padding:6px 8px !important;
  font-size:12px !important;
}
#manageModal.tile-detail-mode .modal-x{
  pointer-events:auto !important;
}

/* v50-from-v34: hotel icon, not text */
.hotel-dot{
  width:30px !important;
  height:24px !important;
  border-radius:8px !important;
  font-size:16px !important;
  letter-spacing:0 !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
}


/* v51-from-v34: tiles that are viewable vs non-clickable */
.tile.tile-clickable{cursor:pointer}
.tile.tile-static{cursor:default}
.tile .space-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  margin:0 0 4px;
}
.tile.corner .space-icon{font-size:24px}
.tile .space-pot{
  margin-top:3px;
  font-size:9px;
  font-weight:900;
  color:#0f172a;
}
.mini-hotel{
  display:inline-grid;
  place-items:center;
  min-width:28px;
  height:18px;
  border-radius:6px;
  background:#dc2626;
  color:#fff;
  font-size:13px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* v51-from-v34: Your Actions popup should end after the last visible button */
.center-card > #turnActionModal.turn-action-modal .turn-action-pop,
.center-card > .turn-action-modal .turn-action-pop{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding-bottom:10px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions,
.center-card > .turn-action-modal .turn-actions{
  align-items:start !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions button,
.center-card > .turn-action-modal .turn-actions button{
  margin:0 !important;
}

/* v51-from-v34: Chance / Community Fund popup sits below Your Actions and above property details */
#cardModal{
  display:block !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}
#cardModal.hidden{
  display:none !important;
}
#cardModal .card-pop{
  position:fixed !important;
  left:var(--board-popup-center-x, 50vw) !important;
  top:calc(50vh - 86px) !important;
  transform:translateX(-50%) !important;
  width:min(380px, calc(var(--board-popup-width, 720px) - 40px), calc(100vw - 40px)) !important;
  max-height:20vh !important;
  overflow:auto !important;
  padding:14px 16px 16px !important;
  border-radius:16px !important;
  text-align:center !important;
  animation:none !important;
  pointer-events:auto !important;
  box-shadow:0 22px 50px rgba(0,0,0,.34) !important;
}
#cardModal .card-kicker{
  margin-bottom:6px !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
}
#cardModal .card-pop h2{
  font-size:21px !important;
  line-height:1.15 !important;
  margin:0 !important;
}
#cardModal .card-close{
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  border-radius:999px !important;
  position:absolute !important;
  top:8px !important;
  right:8px !important;
}

/* keep property detail below the card popup lane */
#manageModal.tile-detail-mode .manage-pop{
  top:calc(50vh + 88px) !important;
}

/* v51-from-v34: special-space/property detail styling */
.pc-header h2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.pc-space-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.special-space-note{
  display:grid;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  background:#eef2ff;
  color:#0f172a;
}
.special-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:800;
}
.special-desc{
  font-size:12px;
  line-height:1.3;
  color:#334155;
}


/* v52-from-v34: shrink Your Actions wrapper itself instead of only shrinking inner popup */
.center-card > #turnActionModal.turn-action-modal,
.center-card > .turn-action-modal{
  position:absolute !important;
  inset:auto !important;
  top:6px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:min(292px, calc(100% - 12px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  transform:translateX(-50%) !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  overflow:visible !important;
  pointer-events:none !important;
  z-index:90 !important;
}
.center-card > #turnActionModal.turn-action-modal.hidden,
.center-card > .turn-action-modal.hidden{
  display:none !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-action-pop,
.center-card > .turn-action-modal .turn-action-pop{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding:8px 9px 9px !important;
  margin:0 !important;
  border-radius:12px !important;
  pointer-events:auto !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-action-pop h2,
.center-card > .turn-action-modal .turn-action-pop h2{
  font-size:17px !important;
  line-height:1 !important;
  margin:0 0 2px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-action-pop p,
.center-card > .turn-action-modal .turn-action-pop p{
  font-size:11px !important;
  line-height:1.1 !important;
  margin:0 0 5px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions,
.center-card > .turn-action-modal .turn-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
  margin:0 !important;
  padding:0 !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions button,
.center-card > .turn-action-modal .turn-actions button{
  padding:6px 7px !important;
  min-height:0 !important;
  height:auto !important;
  line-height:1.1 !important;
  font-size:12px !important;
  border-radius:9px !important;
  margin:0 !important;
  box-shadow:none !important;
}
.center-card > #turnActionModal.turn-action-modal .modal-x,
.center-card > .turn-action-modal .modal-x{
  width:24px !important;
  height:24px !important;
  top:5px !important;
  right:5px !important;
  font-size:15px !important;
}

/* keep the card popup below this shorter action card */
#cardModal .card-pop{
  top:calc(50vh - 76px) !important;
}


/* v53-from-v34: condense property detail card vertically to avoid scroll */
#manageModal.tile-detail-mode .manage-pop{
  top:calc(50vh + 68px) !important;
  width:min(500px, calc(var(--board-popup-width, 720px) - 24px), calc(100vw - 24px)) !important;
  max-height:none !important;
  overflow:visible !important;
  padding:6px !important;
}
#manageModal.tile-detail-mode .property-card{
  border-radius:12px !important;
  overflow:hidden !important;
}
#manageModal.tile-detail-mode .pc-header{
  padding:6px 10px !important;
}
#manageModal.tile-detail-mode .pc-header h2{
  font-size:15px !important;
  line-height:1 !important;
  gap:5px !important;
}
#manageModal.tile-detail-mode .pc-header div{
  font-size:9px !important;
  line-height:1 !important;
}
#manageModal.tile-detail-mode .pc-body{
  padding:6px !important;
  gap:4px !important;
}
#manageModal.tile-detail-mode .pc-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:4px !important;
}
#manageModal.tile-detail-mode .pc-stat{
  padding:4px 5px !important;
  border-radius:7px !important;
  font-size:10px !important;
  line-height:1.1 !important;
}
#manageModal.tile-detail-mode .rent-schedule{
  padding:4px !important;
  margin:0 !important;
  border-radius:8px !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:2px 5px !important;
}
#manageModal.tile-detail-mode .rent-schedule h3{
  grid-column:1 / -1 !important;
  font-size:10px !important;
  line-height:1 !important;
  margin:0 0 1px !important;
}
#manageModal.tile-detail-mode .rent-row{
  border-top:0 !important;
  padding:1px 3px !important;
  gap:5px !important;
  font-size:10px !important;
  line-height:1.1 !important;
  border-radius:5px !important;
  background:rgba(15,23,42,.045) !important;
}
#manageModal.tile-detail-mode .rent-row strong{
  font-size:10px !important;
}
#manageModal.tile-detail-mode .build-row{
  gap:4px !important;
  font-size:10px !important;
  line-height:1.1 !important;
}
#manageModal.tile-detail-mode .house-dot{
  width:19px !important;
  height:17px !important;
  border-radius:5px !important;
  font-size:10px !important;
}
#manageModal.tile-detail-mode .hotel-dot{
  width:23px !important;
  height:18px !important;
  border-radius:6px !important;
  font-size:12px !important;
}
#manageModal.tile-detail-mode .property-actions{
  gap:4px !important;
  margin-top:0 !important;
}
#manageModal.tile-detail-mode .property-actions button{
  padding:4px 6px !important;
  font-size:10px !important;
  line-height:1.05 !important;
  border-radius:7px !important;
}
#manageModal.tile-detail-mode .props{
  font-size:10px !important;
  line-height:1.1 !important;
}
#manageModal.tile-detail-mode .special-space-note{
  padding:5px 6px !important;
  gap:3px !important;
}
#manageModal.tile-detail-mode .special-line,
#manageModal.tile-detail-mode .special-desc{
  font-size:10px !important;
  line-height:1.15 !important;
}
#manageModal.tile-detail-mode .modal-x{
  width:26px !important;
  height:26px !important;
  top:5px !important;
  right:5px !important;
  font-size:15px !important;
}


/* v55-from-v34: make Vacation pot cash text darker and clearer */
.tile .space-pot{
  color:#020617 !important;
  opacity:1 !important;
  font-weight:1000 !important;
  text-shadow:none !important;
}

/* make negative cash visible */
.money.negative-cash{
  color:#fecaca !important;
}


/* v56-from-v34: robust tile headers for future custom boards */
.tile-header-bar{
  min-height:9px;
  border-radius:8px;
  margin:0 -2px 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  overflow:hidden;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  color:#0f172a;
  text-shadow:0 1px 2px rgba(255,255,255,.45);
}
.tile-header-bar.has-image{
  min-height:15px;
  background:#e2e8f0;
}
.tile-header-bar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pc-space-icon.image-icon img{
  width:26px;
  height:20px;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
}
.tile-description{
  background:#f8fafc !important;
  border:1px solid #e2e8f0;
}


/* v58-from-v34: board selector */
#boardSelect{
  width:100%;
  border:1px solid var(--line);
  background:rgba(2,6,23,.72);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
  font-weight:800;
}


/* v58-from-v34: purchase price at the bottom of buyable spaces */
#board .tile > .tile-content > .space-price{
  display:block !important;
  margin-top:auto !important;
  padding:1px 3px !important;
  color:#111827 !important;
  font-size:clamp(8px, .62vw, 11px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
  flex:0 0 auto !important;
}

/* v58-from-v34: World Cities flag-only header */
#board .tile > .tile-content > .tile-header-bar.flag-only{
  background:transparent !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  position:relative !important;
  z-index:4 !important;
}
#board .tile > .tile-content > .tile-header-bar.flag-only span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:clamp(21px, 1.65vw, 34px) !important;
  line-height:1 !important;
  transform:translateY(-9px) !important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important;
  background:transparent !important;
  text-shadow:none !important;
}
#board .tile.side-left > .tile-content > .tile-header-bar.flag-only span,
#board .tile.side-right > .tile-content > .tile-header-bar.flag-only span{
  transform:translateY(-8px) !important;
}

/* v58-from-v34: trade accepted flash */
#players,
.trade-offer-panel,
.side-deal-panel{
  position:relative;
}
.trade-handshake-fx{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:20;
  animation:trade-fx-fade 1.15s ease-out forwards;
}
.handshake-burst{
  width:82px;
  height:82px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:48px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 44px rgba(0,0,0,.35), 0 0 0 8px rgba(96,165,250,.24);
  animation:handshake-pop .9s cubic-bezier(.2,.9,.2,1) forwards;
}
.handshake-label{
  margin-top:8px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  color:white;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
@keyframes handshake-pop{
  0%{transform:scale(.42) rotate(-12deg);opacity:0}
  10%{transform:scale(1.12) rotate(7deg);opacity:1}
  70%{transform:scale(1) rotate(-3deg);opacity:1}
  100%{transform:scale(.96) rotate(0);opacity:1}
}
@keyframes trade-fx-fade{
  0%{opacity:0}
  14%{opacity:1}
  78%{opacity:1}
  100%{opacity:0}
}


/* v59-from-v34: center the game log and hide visible scrollbar while still scrollable */
.center-card .board-log-wrap{
  align-self:center !important;
  justify-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:min(100%, 620px) !important;
  max-width:620px !important;
}
.center-card .board-log{
  margin-left:auto !important;
  margin-right:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.center-card .board-log::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* v59-from-v34: shorter World Cities labels and flag-only properties need more text room */
#board .tile .name{
  overflow-wrap:anywhere;
  hyphens:auto;
}
#board .tile > .tile-content > .tile-header-bar.flag-only span{
  transform:translateY(-10px) !important;
}


/* v60-from-v34: make Vacation pot cash value very dark and readable */
#board .tile .space-pot,
#board .tile > .tile-content > .space-pot{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  opacity:1 !important;
  filter:none !important;
  font-weight:1000 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.75) !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(15,23,42,.35) !important;
  border-radius:999px !important;
  padding:2px 5px !important;
  display:inline-block !important;
}

/* v60-from-v34: pre-game settings panel */
.game-settings{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.22);
  display:grid;
  gap:8px;
}
.game-settings h4{
  margin:0;
  font-size:13px;
  color:#dbeafe;
}
.setting-line{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#e5e7eb;
  font-size:12px;
  font-weight:800;
}
.setting-line input[type="checkbox"]{
  width:auto;
  min-width:18px;
  height:18px;
  accent-color:#60a5fa;
}
.setting-line.text-setting input{
  width:120px;
  padding:7px 9px;
  border-radius:10px;
  text-align:right;
}
#settingsApplyBtn{
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  justify-self:start;
}
.settings-help{
  font-size:11px;
  color:#94a3b8;
  line-height:1.25;
}


/* v61-from-v34: room controls and leave game */
.room-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.leave-game-btn{
  padding:10px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  background:linear-gradient(135deg,#fb7185,#ef4444) !important;
  color:white !important;
}

/* v61-from-v34: bigger board; smaller chat/rails if needed */
.three-layout{
  grid-template-columns:minmax(210px,260px) minmax(760px,1fr) minmax(280px,340px) !important;
  gap:8px !important;
  height:calc(100vh - 66px) !important;
  min-height:720px !important;
}
.board-card{
  width:100% !important;
  max-width:1040px !important;
  height:min(calc(100vh - 78px), 1040px) !important;
  padding:6px !important;
}
.board{
  overflow:visible !important;
  padding:10px !important;
  gap:4px !important;
}
.middle-board{
  align-items:center !important;
}
.chat-panel{
  height:300px !important;
}
.chat-log{
  min-height:160px !important;
}

/* v61-from-v34: flags can overlap edge with a readable border */
#board .tile.flag-tile,
#board .tile.flag-tile .tile-content{
  overflow:visible !important;
}
#board .tile.flag-tile > .tile-content > .tile-header-bar.flag-only span{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(15,23,42,.35) !important;
  border-radius:8px !important;
  padding:1px 4px !important;
  transform:translateY(-13px) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.24) !important;
}

/* v61-from-v34: boot vote UI and left-game state */
.player-summary-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}
.player-summary-actions .money{
  margin:0 !important;
}
.boot-vote-btn{
  padding:5px 7px !important;
  border-radius:9px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  background:linear-gradient(135deg,#fbbf24,#f97316) !important;
  color:#111827 !important;
  box-shadow:none !important;
  white-space:nowrap;
}
.player.left-player{
  outline:2px dashed rgba(248,113,113,.75) !important;
  opacity:.78 !important;
}
.player.left-player .player-summary-name span{
  color:#fecaca !important;
  font-weight:900 !important;
}
@media(max-width:1220px){
  .three-layout{
    grid-template-columns:1fr !important;
    height:auto !important;
  }
  .board-card{
    height:auto !important;
    max-width:980px !important;
  }
  .chat-panel{
    height:260px !important;
  }
}


/* v62-from-v34: web-style leave confirmation modal */
.confirm-modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(8px);
  padding:20px;
}
.confirm-pop{
  width:min(420px, calc(100vw - 36px));
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(30,41,59,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.45);
  padding:22px;
  color:#e5e7eb;
  animation:confirm-pop-in .18s ease-out;
}
.confirm-pop h2{
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:-.03em;
}
.confirm-pop p{
  margin:0;
  color:#cbd5e1;
  line-height:1.35;
}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.confirm-actions button{
  border-radius:12px;
  padding:10px 14px;
}
.confirm-actions .danger{
  background:linear-gradient(135deg,#fb7185,#dc2626);
  color:white;
}
.boot-vote-btn.voted{
  background:linear-gradient(135deg,#a7f3d0,#34d399) !important;
  color:#064e3b !important;
}
@keyframes confirm-pop-in{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}


/* v63-from-v34: lobby available rooms list */
.available-rooms{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.24);
}
.available-rooms-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.available-rooms-head h3{
  margin:0;
  font-size:16px;
}
.available-rooms-head button{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:10px;
  font-size:20px;
  line-height:1;
  color:#075985;
  background:linear-gradient(135deg,#e0f2fe,#7dd3fc);
}
.available-rooms-list{
  display:grid;
  gap:8px;
}
.room-list-empty{
  color:#94a3b8;
  font-size:13px;
  padding:10px;
  border:1px dashed rgba(148,163,184,.35);
  border-radius:12px;
}
.lobby-room{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border:1px solid rgba(148,163,184,.25);
  border-radius:14px;
  background:rgba(15,23,42,.38);
}
.lobby-room-main{
  display:grid;
  gap:3px;
}
.lobby-room-main strong{
  letter-spacing:.08em;
  color:#dbeafe;
}
.lobby-room-main span{
  color:#cbd5e1;
  font-size:12px;
}
.room-dots{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.room-dot{
  width:11px;
  height:11px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.45);
  background:rgba(15,23,42,.85);
  display:inline-block;
}
.room-dot.filled{
  box-shadow:0 0 0 2px rgba(255,255,255,.16);
}
.lobby-room button{
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
}


/* v64-from-v34: room list bot occupancy and boot vote timer */
.room-dot.bot-dot{
  width:auto;
  min-width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  border:0;
  background:transparent;
  font-size:15px;
  line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.boot-vote-btn.pending{
  animation:boot-vote-pulse .9s ease-in-out infinite alternate;
}
@keyframes boot-vote-pulse{
  from{box-shadow:0 0 0 0 rgba(251,191,36,.0)}
  to{box-shadow:0 0 0 3px rgba(251,191,36,.28)}
}


/* v65-from-v34: successful trade connector stays visible for 5 seconds */
.trade-handshake-fx{
  animation:trade-fx-fade-long 5s ease-out forwards !important;
}
.trade-connector{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(94%, 360px);
  margin:0 auto;
}
.trade-party{
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.trade-line{
  height:3px;
  flex:1 1 34px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(96,165,250,.15),rgba(96,165,250,.95),rgba(96,165,250,.15));
  box-shadow:0 0 12px rgba(96,165,250,.55);
}
.trade-connector .handshake-burst{
  flex:0 0 72px;
  width:72px;
  height:72px;
  font-size:42px;
}
@keyframes trade-fx-fade-long{
  0%{opacity:0}
  5%{opacity:1}
  84%{opacity:1}
  100%{opacity:0}
}


/* v66-from-v34: main lobby guard */
body.in-lobby #game{
  display:none !important;
}
body.in-game #lobby{
  display:none !important;
}


/* v67-from-v34: corner space icons */
#board .tile.corner .corner-space-icon{
  font-size:clamp(21px, 1.65vw, 34px) !important;
  line-height:1 !important;
  margin:0 auto 2px !important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(15,23,42,.22) !important;
  border-radius:10px !important;
  padding:2px 5px !important;
}
#board .tile.corner .name{
  margin-top:1px;
}

/* v67-from-v34: jail bars overlay on player panel token */
.player-summary .badge{
  position:relative;
  overflow:hidden;
}
.player-summary .badge.jailed-badge{
  box-shadow:0 0 0 3px rgba(248,113,113,.35), inset 0 0 0 2px rgba(15,23,42,.28);
}
.player-summary .badge .jail-bars{
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(15,23,42,.88) 0 4px,
      transparent 4px 9px);
  box-shadow:inset 0 0 0 2px rgba(15,23,42,.62);
  opacity:.86;
}
.player-summary .badge.jailed-badge::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%);
  pointer-events:none;
}


/* v68-from-v34: game-over winner celebration */
.game-over-modal{
  position:fixed;
  inset:0;
  z-index:5200;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 30%, rgba(250,204,21,.18), transparent 28rem),
    rgba(2,6,23,.66);
  backdrop-filter:blur(8px);
  padding:20px;
}
.game-over-pop{
  position:relative;
  width:min(520px, calc(100vw - 34px));
  border:1px solid rgba(255,255,255,.22);
  border-radius:30px;
  padding:28px;
  text-align:center;
  color:#f8fafc;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(30,41,59,.98));
  box-shadow:0 32px 100px rgba(0,0,0,.55), 0 0 0 8px rgba(250,204,21,.08);
  overflow:hidden;
}
.game-over-pop::before,
.game-over-pop::after{
  content:"🎉";
  position:absolute;
  top:18px;
  font-size:34px;
  animation:confetti-bob 1s ease-in-out infinite alternate;
}
.game-over-pop::before{left:22px}
.game-over-pop::after{right:22px;animation-delay:.25s}
.winner-kicker{
  display:inline-block;
  margin-bottom:6px;
  padding:5px 11px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:1000;
  color:#111827;
  background:linear-gradient(135deg,#fde68a,#facc15);
}
.game-over-pop h2{
  margin:6px 0 12px;
  font-size:clamp(34px, 5vw, 58px);
  letter-spacing:-.06em;
}
.winner-token-wrap{
  display:grid;
  place-items:center;
  margin:10px auto 14px;
  min-height:160px;
}
.winner-token{
  width:150px;
  height:150px;
  border-radius:999px;
  display:grid;
  place-items:center;
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 0 0 8px rgba(255,255,255,.22),
    0 0 42px rgba(250,204,21,.46);
}
.winner-token .animal-mask{
  width:104px !important;
  height:104px !important;
  background:#fff !important;
}
.dance-token{
  animation:winner-dance 1.05s ease-in-out infinite;
  transform-origin:50% 88%;
}
.winner-dance-board-token{
  animation:board-token-dance .75s ease-in-out infinite !important;
}
.game-over-pop p{
  color:#cbd5e1;
  margin:0 0 16px;
}
@keyframes winner-dance{
  0%{transform:translateY(0) rotate(-7deg) scale(1)}
  18%{transform:translateY(-12px) rotate(8deg) scale(1.05)}
  36%{transform:translateY(0) rotate(-5deg) scale(.99)}
  54%{transform:translateY(-10px) rotate(6deg) scale(1.04)}
  72%{transform:translateY(0) rotate(-3deg) scale(1)}
  100%{transform:translateY(0) rotate(-7deg) scale(1)}
}
@keyframes board-token-dance{
  0%{transform:translate(calc(var(--stack-index,0) * 10px),0) rotate(-8deg)}
  50%{transform:translate(calc(var(--stack-index,0) * 10px),-8px) rotate(8deg) scale(1.08)}
  100%{transform:translate(calc(var(--stack-index,0) * 10px),0) rotate(-8deg)}
}
@keyframes confetti-bob{
  from{transform:translateY(0) rotate(-8deg)}
  to{transform:translateY(8px) rotate(10deg)}
}


/* v69-from-v34: keep World Cities houses visible below the flag */
#board .tile.flag-tile > .tile-content{
  position:relative !important;
}
#board .tile.flag-tile > .tile-content > .build-strip{
  position:absolute !important;
  top:16px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:7 !important;
  min-height:12px !important;
  padding:1px 4px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 2px 7px rgba(0,0,0,.18) !important;
}
#board .tile.flag-tile > .tile-content > .name{
  margin-top:18px !important;
}

/* v69-from-v34: Get Out of Jail Free card assets */
.jail-card-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(250,204,21,.18);
  border:1px solid rgba(250,204,21,.38);
  color:#fde68a;
  font-size:12px;
  font-weight:1000;
  white-space:nowrap;
}
.jail-card-trade-control small{
  color:#94a3b8;
  font-size:11px;
}


/* v71-from-v34: cleaner Your Actions layout */
.turn-actions{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
#endBtn{
  grid-column:1 / -1 !important;
  padding:14px 18px !important;
  font-size:16px !important;
  border-radius:16px !important;
  font-weight:1000 !important;
}
#bankruptBtn{
  grid-column:1 / -1 !important;
}
@media(max-width:650px){
  #endBtn,
  #bankruptBtn{
    grid-column:1 / -1 !important;
  }
}


/* v72-from-v34: lobby version and host display */
.lobby-version{
  display:inline-block;
  margin:0 0 10px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(15,23,42,.62);
  border:1px solid rgba(148,163,184,.32);
  color:#cbd5e1;
  font-size:12px;
  font-weight:900;
}
.room-host{
  color:#fef3c7 !important;
  font-size:12px;
  font-weight:900;
}
.room-dot.host-dot{
  outline:2px solid #facc15;
  outline-offset:2px;
}

/* v72-from-v34: Bankrupt moved to right player panel */
.panel-bankrupt-btn{
  margin-left:auto;
  padding:6px 8px !important;
  border-radius:9px !important;
  font-size:11px !important;
  background:linear-gradient(135deg,#fb7185,#dc2626) !important;
  color:#fff !important;
  flex:0 0 auto;
}

/* v72-from-v34: ownership banner fixed to physical bottom of each space */
#board .tile{
  position:relative !important;
}
#board .tile > .owner-strip{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:12px !important;
  min-height:12px !important;
  margin:0 !important;
  border-radius:0 0 4px 4px !important;
  z-index:8 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:white !important;
  font-size:7px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.65) !important;
  box-shadow:0 -1px 4px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
#board .tile > .owner-strip span{
  display:block;
  transform:none !important;
  white-space:nowrap;
}

/* v72-from-v34: flags in trade lists */
.property-set-chip.flag-chip{
  width:auto !important;
  min-width:22px !important;
  height:22px !important;
  border-radius:7px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.18) !important;
  font-size:15px !important;
}

/* v72-from-v34: non-classic/flag builds higher to avoid name overlap */
#board .tile.flag-tile > .tile-content > .build-strip{
  top:6px !important;
  z-index:9 !important;
  background:rgba(255,255,255,.9) !important;
}
#board .tile.flag-tile > .tile-content > .name{
  margin-top:24px !important;
}

#turnActionModal #bankruptBtn{display:none !important;}


/* v75-from-v34: ownership banner is the relative bottom of each space.
   It lives inside .tile-content, so side spaces rotate it with the rest of the tile. */
#board .tile .tile-content > .owner-strip.relative-owner-strip{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:calc(100% + 8px) !important;
  height:12px !important;
  min-height:12px !important;
  margin:auto -4px 0 !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
  z-index:5 !important;
  color:white !important;
  font-size:7px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.65) !important;
  box-shadow:0 0 8px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.42) !important;
  transform:none !important;
  writing-mode:horizontal-tb !important;
}
#board .tile .tile-content > .owner-strip.relative-owner-strip span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
#board .tile.side-left .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right .tile-content > .owner-strip.relative-owner-strip{
  height:10px !important;
  min-height:10px !important;
  margin:auto -4px 0 !important;
  font-size:6px !important;
}
/* Neutralize v72's physical-bottom direct-child rule when any old direct child slips through. */
#board .tile > .owner-strip:not(.relative-owner-strip){
  display:none !important;
}


/* v76-from-v34: apply the relative-bottom ownership banner cleanly to World Cities / flag tiles too */
#board .tile.flag-tile .tile-content{
  height:100% !important;
  min-height:100% !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding-bottom:14px !important;
}
#board .tile.flag-tile .tile-content > .owner-strip.relative-owner-strip{
  margin-top:auto !important;
  margin-bottom:0 !important;
  position:relative !important;
  z-index:12 !important;
}
#board .tile.flag-tile.side-left .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right .tile-content > .owner-strip.relative-owner-strip{
  margin-top:auto !important;
  margin-bottom:0 !important;
}
#board .tile.flag-tile .tile-content > .name{
  flex:0 0 auto !important;
}

/* v76-from-v34: do not duplicate Mortgaged text in the property body */
#board .tile.mortgaged{
  filter:none !important;
}
#board .tile.mortgaged::after{
  content:none !important;
  display:none !important;
}
/* Keep the ownership banner in the original owner's color even when mortgaged. */
#board .tile.mortgaged .tile-content > .owner-strip.relative-owner-strip{
  filter:none !important;
  opacity:1 !important;
}


/* v77-from-v34: Classic board house/hotel icons higher, slightly overlapping the header bar */
#board .tile:not(.flag-tile) > .tile-content > .build-strip{
  position:absolute !important;
  top:5px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:12 !important;
  min-height:12px !important;
  padding:1px 4px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 2px 7px rgba(0,0,0,.18) !important;
}
#board .tile:not(.flag-tile) > .tile-content > .build-strip + .name{
  margin-top:14px !important;
}
#board .tile:not(.flag-tile).side-left > .tile-content > .build-strip,
#board .tile:not(.flag-tile).side-right > .tile-content > .build-strip{
  top:4px !important;
}

/* v77-from-v34: World Cities owner banner belongs at the relative bottom edge.
   Keep it inside the rotated tile content, but pin it to the end of the flex column
   with the normal visual inset instead of letting it float in the middle. */
#board .tile.flag-tile > .tile-content{
  padding-bottom:0 !important;
}
#board .tile.flag-tile > .tile-content > .owner-strip.relative-owner-strip{
  align-self:stretch !important;
  width:auto !important;
  height:12px !important;
  min-height:12px !important;
  margin:auto 4px 4px !important;
  border-radius:999px !important;
  flex:0 0 12px !important;
  position:relative !important;
  inset:auto !important;
  z-index:14 !important;
}
#board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip{
  height:10px !important;
  min-height:10px !important;
  flex-basis:10px !important;
  margin:auto 4px 4px !important;
}


/* v80-from-v34: Classic ownership banner uses the same inset/margin style as World Cities */
#board .tile:not(.flag-tile) .tile-content > .owner-strip.relative-owner-strip{
  align-self:stretch !important;
  width:auto !important;
  margin:auto 4px 4px !important;
  border-radius:999px !important;
  flex:0 0 12px !important;
  height:12px !important;
  min-height:12px !important;
}
#board .tile:not(.flag-tile).side-left .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right .tile-content > .owner-strip.relative-owner-strip{
  flex-basis:10px !important;
  height:10px !important;
  min-height:10px !important;
  margin:auto 4px 4px !important;
}
#settingsPanel select#settingMaxPlayers{
  width:100%;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.72);
  color:#e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  font-weight:800;
}


/* v90-from-v34: requested UI refinements */

/* Vacation pot should fit in its board-space container. */
#board .tile .space-pot,
#board .tile > .tile-content > .space-pot{
  max-width:calc(100% - 10px) !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:clamp(7px, .72vw, 9px) !important;
  line-height:1 !important;
  padding:2px 4px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#board .tile.corner .space-pot,
#board .tile.corner > .tile-content > .space-pot{
  max-width:calc(100% - 18px) !important;
  font-size:clamp(8px, .86vw, 10px) !important;
}

/* Board houses: four houses fill the available property width. */
#board .tile > .tile-content > .build-strip{
  align-self:stretch !important;
  width:auto !important;
  margin:0 6px !important;
  gap:3px !important;
  min-height:17px !important;
  display:flex !important;
  justify-content:center !important;
}
#board .tile > .tile-content > .build-strip .mini-house{
  height:12px !important;
  border-radius:3px 3px 2px 2px !important;
  flex:0 0 auto !important;
}
#board .tile > .tile-content > .build-strip.build-count-1 .mini-house{width:25% !important;}
#board .tile > .tile-content > .build-strip.build-count-2 .mini-house{width:calc((100% - 3px)/2) !important;}
#board .tile > .tile-content > .build-strip.build-count-3 .mini-house{width:calc((100% - 6px)/3) !important;}
#board .tile > .tile-content > .build-strip.build-count-4 .mini-house{width:calc((100% - 9px)/4) !important;}
#board .tile > .tile-content > .build-strip .mini-hotel{
  width:100% !important;
  min-width:0 !important;
  height:14px !important;
  font-size:10px !important;
}

/* Token landing layout: nudge away from the old header-side overlap and fan out shared spaces. */
#board .tokens{
  width:70px !important;
  height:56px !important;
  overflow:visible !important;
}
#board .token{
  width:30px !important;
  height:30px !important;
  transform:translate(var(--token-x, 0px), var(--token-y, 6px)) scale(var(--token-scale, .94)) !important;
}
#board .token.current-token{
  transform:translate(var(--token-x, 0px), var(--token-y, 6px)) scale(calc(var(--token-scale, .94) * 1.10)) !important;
}
#board .token .animal-mask{
  width:23px !important;
  height:23px !important;
}
@keyframes board-token-dance{
  0%{transform:translate(var(--token-x, 0px), var(--token-y, 6px)) rotate(-8deg) scale(var(--token-scale, .94))}
  50%{transform:translate(var(--token-x, 0px), calc(var(--token-y, 6px) - 8px)) rotate(8deg) scale(calc(var(--token-scale, .94) * 1.08))}
  100%{transform:translate(var(--token-x, 0px), var(--token-y, 6px)) rotate(-8deg) scale(var(--token-scale, .94))}
}

/* Player list: more compact. */
#players{
  gap:6px !important;
}
.player.player-summary{
  padding:7px 9px !important;
  border-radius:13px !important;
}
.player-summary-top{
  gap:7px !important;
}
.player-summary .badge{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
}
.player-summary .badge .animal-mask{
  width:23px !important;
  height:23px !important;
}
.player-summary-name strong{
  font-size:13px !important;
  line-height:1.05 !important;
}
.player-summary-name span{
  font-size:10.5px !important;
  line-height:1.05 !important;
}
.player-summary-actions{
  margin-top:3px !important;
  gap:5px !important;
}
.player-summary .money,
.player-summary-actions .money{
  font-size:17px !important;
}
.panel-bankrupt-btn{
  padding:4px 6px !important;
  font-size:10px !important;
}

/* Yellow Get Out of Jail card icon/chip. */
.jail-card-icon{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:6px;
  background:linear-gradient(135deg,#fef08a,#facc15);
  color:#713f12;
  box-shadow:inset 0 0 0 1px rgba(120,53,15,.28);
  vertical-align:-3px;
  font-size:13px;
  line-height:1;
}
.jail-card-chip{
  background:linear-gradient(135deg,#fde047,#facc15) !important;
  border-color:rgba(161,98,7,.55) !important;
  color:#713f12 !important;
  padding:3px 6px !important;
  font-size:11px !important;
}

/* Trade popup: bottom-up, denser, and okay to overlap the player list temporarily. */
.side-deal-panel{
  position:fixed !important;
  right:14px !important;
  bottom:12px !important;
  top:auto !important;
  width:min(390px, calc(100vw - 28px)) !important;
  max-height:min(84vh, calc(100vh - 86px)) !important;
  margin:0 !important;
  padding:6px !important;
  z-index:140 !important;
  border-radius:16px !important;
  overflow:auto !important;
  box-shadow:0 28px 75px rgba(0,0,0,.5) !important;
}
.side-deal-panel .player-detail-card.side-card{
  padding:8px !important;
  border-radius:13px !important;
}
.side-deal-panel .player-detail-header{
  margin-bottom:6px !important;
  padding-bottom:6px !important;
}
.side-deal-panel .large-badge{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
}
.side-deal-panel .large-badge .animal-mask{
  width:24px !important;
  height:24px !important;
}
.side-deal-panel .player-detail-header h2{
  font-size:16px !important;
  line-height:1.05 !important;
}
.side-deal-panel .player-detail-header p{
  font-size:11px !important;
  line-height:1.1 !important;
}
.side-deal-close{
  width:26px !important;
  height:26px !important;
  font-size:18px !important;
}
.side-deal-panel .trade-builder{
  padding:7px !important;
  margin-bottom:6px !important;
}
.side-deal-panel .trade-builder-top{
  gap:6px !important;
}
.side-deal-panel .trade-builder-top h3{
  font-size:13px !important;
}
.side-deal-panel .trade-builder-top p{
  font-size:10.5px !important;
}
.side-deal-panel .trade-builder-top button{
  padding:7px 8px !important;
  font-size:11px !important;
}
.side-deal-panel .cash-offer-grid,
.side-deal-panel .trade-cash-grid,
.side-deal-panel .trade-jail-card-row{
  gap:6px !important;
  margin-top:6px !important;
}
.trade-jail-card-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:6px;
}
.side-deal-panel .cash-control.cash-control-stacked{
  gap:4px !important;
  padding:5px !important;
  border-radius:9px !important;
}
.side-deal-panel .cash-control.cash-control-stacked span{
  font-size:10.5px !important;
}
.side-deal-panel .cash-control.cash-control-stacked .cash-number{
  padding:5px 6px !important;
  font-size:11px !important;
}
.side-deal-panel .compact-trade-lists{
  gap:6px !important;
}
.side-deal-panel .compact-trade-column{
  padding:6px !important;
  border-radius:10px !important;
}
.side-deal-panel .compact-trade-column h3{
  font-size:12px !important;
  margin-bottom:4px !important;
}
.side-deal-panel .compact-trade-prop-list{
  gap:3px !important;
}
.side-deal-panel .trade-prop{
  padding:4px 6px !important;
  border-radius:8px !important;
}
.side-deal-panel .trade-prop strong{
  font-size:11.5px !important;
}
.side-deal-panel .trade-prop-meta{
  font-size:10px !important;
}
@media(max-width:980px){
  .side-deal-panel{
    right:8px !important;
    left:8px !important;
    width:auto !important;
  }
  .trade-jail-card-row{
    grid-template-columns:1fr;
  }
}

/* Property detail popup: rent/costs left, action controls right. */
#manageModal.tile-detail-mode .manage-pop{
  width:min(560px, calc(var(--board-popup-width, 720px) - 18px), calc(100vw - 18px)) !important;
}
#manageModal.tile-detail-mode .property-detail-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.08fr) minmax(150px,.92fr) !important;
  gap:8px !important;
  align-items:start !important;
}
#manageModal.tile-detail-mode .property-detail-left,
#manageModal.tile-detail-mode .property-detail-right{
  display:grid !important;
  gap:6px !important;
}
#manageModal.tile-detail-mode .property-detail-section-title{
  font-size:11px !important;
  margin:0 !important;
  color:#334155 !important;
}
#manageModal.tile-detail-mode .property-detail-stats{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:4px !important;
}
#manageModal.tile-detail-mode .property-detail-left .rent-schedule{
  grid-template-columns:1fr !important;
}
#manageModal.tile-detail-mode .property-detail-left .rent-row{
  display:flex !important;
  justify-content:space-between !important;
}
#manageModal.tile-detail-mode .build-level-row{
  padding:6px !important;
  border-radius:9px !important;
  background:#e2e8f0 !important;
}
#manageModal.tile-detail-mode .build-action-group,
#manageModal.tile-detail-mode .mortgage-action-group{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
}
#manageModal.tile-detail-mode .build-action-group button,
#manageModal.tile-detail-mode .mortgage-action-group button{
  width:100% !important;
  min-height:34px !important;
  font-size:12px !important;
  border-radius:10px !important;
}
#manageModal.tile-detail-mode .mortgage-action-group{
  margin-top:16px !important;
  padding-top:10px !important;
  border-top:1px dashed rgba(15,23,42,.22) !important;
}
#manageModal.tile-detail-mode .mortgage-toggle{
  background:linear-gradient(135deg,#fde047,#f59e0b) !important;
  color:#111827 !important;
}
#manageModal.tile-detail-mode .mortgage-toggle.unmortgage-state{
  background:linear-gradient(135deg,#cbd5e1,#94a3b8) !important;
  color:#0f172a !important;
}
#manageModal.tile-detail-mode .mortgaged-note{
  background:#e5e7eb !important;
  color:#475569 !important;
}
@media(max-width:720px){
  #manageModal.tile-detail-mode .property-detail-layout{
    grid-template-columns:1fr !important;
  }
  #manageModal.tile-detail-mode .mortgage-action-group{
    margin-top:8px !important;
  }
}


/* v91-from-v34: token, trade, house, icon and sound-trigger refinements */

/* House markers should look like green houses, not white dots. */
#board .tile > .tile-content > .build-strip{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 3px !important;
  margin:1px 6px 0 !important;
  min-height:18px !important;
  align-items:flex-end !important;
  overflow:visible !important;
}
#board .tile > .tile-content > .build-strip .mini-house{
  position:relative !important;
  display:block !important;
  height:12px !important;
  min-height:12px !important;
  border-radius:2px 2px 3px 3px !important;
  background:linear-gradient(180deg,#34d399 0%,#16a34a 62%,#15803d 100%) !important;
  border:1px solid rgba(5,46,22,.72) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#board .tile > .tile-content > .build-strip .mini-house::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-6px !important;
  width:72% !important;
  height:9px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  background:#15803d !important;
  border-left:1px solid rgba(5,46,22,.6) !important;
  border-top:1px solid rgba(5,46,22,.6) !important;
  border-radius:2px 0 1px 0 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.30) !important;
}
#board .tile > .tile-content > .build-strip.build-count-1 .mini-house{width:28% !important;}
#board .tile > .tile-content > .build-strip.build-count-2 .mini-house{width:calc((100% - 5px)/2) !important;}
#board .tile > .tile-content > .build-strip.build-count-3 .mini-house{width:calc((100% - 8px)/3) !important;}
#board .tile > .tile-content > .build-strip.build-count-4 .mini-house{width:calc((100% - 11px)/4) !important;}
#board .tile > .tile-content > .build-strip .mini-hotel{
  background:linear-gradient(180deg,#ef4444,#b91c1c) !important;
  border:1px solid rgba(127,29,29,.7) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* Jail / Go to Jail board-space icons. */
.jail-cell-icon{
  display:inline-grid;
  grid-template-columns:repeat(3,4px);
  gap:3px;
  align-items:stretch;
  justify-content:center;
  width:28px;
  height:26px;
  padding:4px 5px;
  border:2px solid #334155;
  border-radius:6px;
  background:linear-gradient(180deg,#e2e8f0,#94a3b8);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32), 0 2px 5px rgba(0,0,0,.25);
}
.jail-cell-icon span{
  display:block;
  border-radius:999px;
  background:#1e293b;
}

/* Tokens now fan out toward the owner banner. */
#board .tokens{
  width:76px !important;
  height:62px !important;
  overflow:visible !important;
  pointer-events:none !important;
}
#board .token{
  width:30px !important;
  height:30px !important;
  transform:translate(var(--token-x, 0px), var(--token-y, 10px)) scale(var(--token-scale, .92)) !important;
}
#board .token.current-token{
  transform:translate(var(--token-x, 0px), var(--token-y, 10px)) scale(calc(var(--token-scale, .92) * 1.10)) !important;
}
@keyframes board-token-dance{
  0%{transform:translate(var(--token-x, 0px), var(--token-y, 10px)) rotate(-8deg) scale(var(--token-scale, .92))}
  50%{transform:translate(var(--token-x, 0px), calc(var(--token-y, 10px) - 7px)) rotate(8deg) scale(calc(var(--token-scale, .92) * 1.08))}
  100%{transform:translate(var(--token-x, 0px), var(--token-y, 10px)) rotate(-8deg) scale(var(--token-scale, .92))}
}

/* Trade popup: preserve usable property-list space by making cash controls ultra compact. */
.side-deal-panel .trade-builder{
  padding:5px 6px !important;
  margin-bottom:4px !important;
}
.side-deal-panel .compact-trade-builder-top{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  gap:6px !important;
}
.side-deal-panel .compact-trade-builder-top h3{
  font-size:12px !important;
  line-height:1 !important;
  margin:0 !important;
}
.side-deal-panel .compact-trade-builder-top button{
  min-height:26px !important;
  padding:5px 8px !important;
  font-size:10.5px !important;
  border-radius:8px !important;
}
.side-deal-panel .ultra-compact-cash-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
  margin-top:4px !important;
}
.side-deal-panel .cash-control-compact{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:3px !important;
  padding:4px 5px !important;
  border-radius:8px !important;
}
.side-deal-panel .cash-control-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:4px !important;
  font-size:10px !important;
  line-height:1 !important;
}
.side-deal-panel .cash-control-head b{
  font-size:10px !important;
}
.side-deal-panel .cash-control-head em{
  font-style:normal !important;
  font-weight:900 !important;
  color:#0f172a !important;
}
.side-deal-panel .cash-control-row{
  display:grid !important;
  grid-template-columns:1fr 54px !important;
  gap:4px !important;
  align-items:center !important;
}
.side-deal-panel .cash-control-row .cash-slider{
  height:16px !important;
  min-height:16px !important;
}
.side-deal-panel .cash-control-row .cash-number{
  padding:3px 4px !important;
  min-height:20px !important;
  font-size:10px !important;
}
.side-deal-panel .trade-jail-card-row{
  margin-top:4px !important;
  gap:5px !important;
}
.side-deal-panel .trade-prop-list,
.side-deal-panel .compact-trade-prop-list{
  overscroll-behavior:contain !important;
}


/* v92-from-v34: token direction, wider houses, lighter cyan, image-header spacing */

/* Ownership-banner direction is now mirrored by JS vars; token positions follow --token-x/y. */
#board .tokens{
  width:82px !important;
  height:68px !important;
  overflow:visible !important;
  pointer-events:none !important;
}
#board .token{
  width:31px !important;
  height:31px !important;
  transform:translate(var(--token-x, 0px), var(--token-y, 12px)) scale(var(--token-scale, .92)) !important;
}
#board .token.current-token{
  transform:translate(var(--token-x, 0px), var(--token-y, 12px)) scale(calc(var(--token-scale, .92) * 1.10)) !important;
}

/* Houses: make each house much wider so four fill the property width excluding margins. */
#board .tile > .tile-content > .build-strip{
  align-self:stretch !important;
  width:auto !important;
  margin:0 3px 0 !important;
  padding:0 1px !important;
  gap:2px !important;
  min-height:20px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-end !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}
#board .tile > .tile-content > .build-strip .mini-house{
  position:relative !important;
  display:block !important;
  flex:1 1 0 !important;
  max-width:none !important;
  min-width:0 !important;
  height:13px !important;
  min-height:13px !important;
  border-radius:2px 2px 3px 3px !important;
  background:linear-gradient(180deg,#34d399 0%,#22c55e 55%,#15803d 100%) !important;
  border:1px solid rgba(5,46,22,.75) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#board .tile > .tile-content > .build-strip .mini-house::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  width:64% !important;
  height:10px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  background:#16a34a !important;
  border-left:1px solid rgba(5,46,22,.65) !important;
  border-top:1px solid rgba(5,46,22,.65) !important;
  border-radius:2px 0 1px 0 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.30) !important;
}
#board .tile > .tile-content > .build-strip.build-count-1 .mini-house{
  flex:0 0 36% !important;
}
#board .tile > .tile-content > .build-strip.build-count-2 .mini-house{
  flex:0 0 calc((100% - 2px)/2) !important;
}
#board .tile > .tile-content > .build-strip.build-count-3 .mini-house{
  flex:0 0 calc((100% - 4px)/3) !important;
}
#board .tile > .tile-content > .build-strip.build-count-4 .mini-house{
  flex:0 0 calc((100% - 6px)/4) !important;
}
#board .tile > .tile-content > .build-strip .mini-hotel{
  width:100% !important;
  height:17px !important;
  min-width:0 !important;
}

/* Push image/icon headers a tiny bit away from the center on image/icon property boards,
   leaving a bit more middle room for house markers. */
#board .tile.side-bottom .header-icon,
#board .tile.side-bottom .space-icon,
#board .tile.side-bottom .tile-image,
#board .tile.side-bottom .property-image{
  transform:translateY(3px) !important;
}
#board .tile.side-top .header-icon,
#board .tile.side-top .space-icon,
#board .tile.side-top .tile-image,
#board .tile.side-top .property-image{
  transform:translateY(-3px) !important;
}
#board .tile.side-left .header-icon,
#board .tile.side-left .space-icon,
#board .tile.side-left .tile-image,
#board .tile.side-left .property-image{
  transform:translateX(-3px) !important;
}
#board .tile.side-right .header-icon,
#board .tile.side-right .space-icon,
#board .tile.side-right .tile-image,
#board .tile.side-right .property-image{
  transform:translateX(3px) !important;
}

/* Preserve green house visibility over any older dot-like styles. */
.mini-house{
  color:transparent !important;
  font-size:0 !important;
}


/* v93-from-v34: board-up, corrected token colors, explicit token nudges, wider house container, better icons */

/* Shift the whole board slightly upward so it is not crowded against the bottom of the screen. */
.middle-board{
  transform:translateY(-12px) !important;
}
@media(max-height:760px){
  .middle-board{ transform:translateY(-7px) !important; }
}

/* Keep Sky/Blue as the original blue and only lighten Cyan. */
.swatch[title="Sky"]{ background:#0ea5e9 !important; }
.swatch[title="Cyan"]{ background:#67e8f9 !important; }

/* Token offset directions are now side-specific from JS. */
#board .tokens{
  width:86px !important;
  height:72px !important;
  overflow:visible !important;
  pointer-events:none !important;
}
#board .token{
  width:31px !important;
  height:31px !important;
  transform:translate(var(--token-x, 0px), var(--token-y, 12px)) scale(var(--token-scale, .92)) !important;
}
#board .token.current-token{
  transform:translate(var(--token-x, 0px), var(--token-y, 12px)) scale(calc(var(--token-scale, .92) * 1.10)) !important;
}

/* House container: fully widen the strip first, then let the houses fill it. */
#board .tile > .tile-content > .build-strip{
  box-sizing:border-box !important;
  align-self:stretch !important;
  width:calc(100% - 4px) !important;
  max-width:none !important;
  min-width:42px !important;
  flex:0 0 21px !important;
  min-height:21px !important;
  margin:1px auto 1px !important;
  padding:0 1px !important;
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:1fr !important;
  justify-content:stretch !important;
  align-items:end !important;
  gap:2px !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}
#board .tile > .tile-content > .build-strip.build-count-1{ grid-template-columns:1fr !important; }
#board .tile > .tile-content > .build-strip.build-count-2{ grid-template-columns:repeat(2,1fr) !important; }
#board .tile > .tile-content > .build-strip.build-count-3{ grid-template-columns:repeat(3,1fr) !important; }
#board .tile > .tile-content > .build-strip.build-count-4{ grid-template-columns:repeat(4,1fr) !important; }

#board .tile > .tile-content > .build-strip .mini-house{
  box-sizing:border-box !important;
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:9px !important;
  max-width:none !important;
  height:14px !important;
  min-height:14px !important;
  flex:none !important;
  border-radius:3px 3px 4px 4px !important;
  background:linear-gradient(180deg,#4ade80 0%,#22c55e 58%,#15803d 100%) !important;
  border:1px solid rgba(5,46,22,.78) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.58) !important;
  color:transparent !important;
  font-size:0 !important;
}
#board .tile > .tile-content > .build-strip .mini-house::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  width:68% !important;
  height:10px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  background:#16a34a !important;
  border-left:1px solid rgba(5,46,22,.65) !important;
  border-top:1px solid rgba(5,46,22,.65) !important;
  border-radius:2px 0 2px 0 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.32) !important;
}
#board .tile > .tile-content > .build-strip .mini-hotel{
  width:100% !important;
  height:16px !important;
  min-width:0 !important;
  border-radius:4px !important;
}

/* Image/icon property headers: move the header element itself away from the center just a tiny bit. */
#board .tile.side-bottom .tile-header-bar.has-image,
#board .tile.side-bottom .tile-header-bar.flag-only{
  transform:translateY(4px) !important;
}
#board .tile.side-top .tile-header-bar.has-image,
#board .tile.side-top .tile-header-bar.flag-only{
  transform:translateY(-4px) !important;
}
#board .tile.side-left .tile-header-bar.has-image,
#board .tile.side-left .tile-header-bar.flag-only{
  transform:translateX(-4px) !important;
}
#board .tile.side-right .tile-header-bar.has-image,
#board .tile.side-right .tile-header-bar.flag-only{
  transform:translateX(4px) !important;
}

/* Better square icons. */
.go-arrow-icon{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background:linear-gradient(135deg,#bbf7d0,#22c55e);
  color:#064e3b;
  font-size:32px;
  font-weight:1000;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.25);
}
.better-jail-cell{
  display:inline-grid;
  grid-template-columns:repeat(4,4px);
  gap:3px;
  align-items:stretch;
  justify-content:center;
  width:36px;
  height:34px;
  padding:5px 6px;
  border:3px solid #1e293b;
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0)),
    linear-gradient(180deg,#cbd5e1,#64748b);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 7px rgba(0,0,0,.30);
}
.better-jail-cell span{
  display:block;
  border-radius:999px;
  background:#0f172a;
}
.go-to-jail-cop-icon{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,#bfdbfe,#2563eb);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45), 0 2px 8px rgba(0,0,0,.26);
  font-size:28px;
  line-height:1;
}


/* v94-from-v34: corrected nudging, larger fixed house icons, compact hotel, wider Vacation pot */

/* Hard-position token stacks at the requested destination edge; individual offsets are small. */
#board .tile.side-right .tokens{
  left:5px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-left .tokens{
  left:5px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-top .tokens{
  left:50% !important;
  right:auto !important;
  bottom:5px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
}
#board .tile.side-bottom .tokens{
  left:50% !important;
  right:auto !important;
  bottom:5px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
}
#board .tokens{
  width:56px !important;
  height:48px !important;
  overflow:visible !important;
  pointer-events:none !important;
}
#board .token{
  width:31px !important;
  height:31px !important;
  transform:translate(var(--token-x, 0px), var(--token-y, 0px)) scale(var(--token-scale, .92)) !important;
}
#board .token.current-token{
  transform:translate(var(--token-x, 0px), var(--token-y, 0px)) scale(calc(var(--token-scale, .92) * 1.10)) !important;
}

/* Use a single custom SVG house icon everywhere. Board houses stay the same size as more are added. */
#board .tile > .tile-content > .build-strip{
  box-sizing:border-box !important;
  align-self:center !important;
  width:calc(100% + 14px) !important;
  max-width:none !important;
  min-width:58px !important;
  flex:0 0 24px !important;
  min-height:24px !important;
  height:24px !important;
  margin:0 -7px 0 !important;
  padding:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#board .tile > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile > .tile-content > .build-strip .mini-house{
  box-sizing:border-box !important;
  display:block !important;
  flex:0 0 16px !important;
  width:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  height:18px !important;
  min-height:18px !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  color:inherit !important;
}
#board .tile > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile > .tile-content > .build-strip .mini-hotel{
  display:block !important;
  flex:0 0 30px !important;
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:20px !important;
  min-height:20px !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* SVG styling for house/hotel icons. */
.game-house-svg .house-roof{ fill:#15803d; stroke:#052e16; stroke-width:1.6; stroke-linejoin:round; }
.game-house-svg .house-body{ fill:#22c55e; stroke:#052e16; stroke-width:1.6; rx:2; }
.game-house-svg .house-door{ fill:#14532d; }
.game-house-svg .house-window{ fill:#dcfce7; stroke:#052e16; stroke-width:.55; }
.game-hotel-svg .hotel-body{ fill:#dc2626; stroke:#7f1d1d; stroke-width:1.6; rx:2; }
.game-hotel-svg .hotel-roof{ fill:#991b1b; stroke:#7f1d1d; stroke-width:1.3; }
.game-hotel-svg .hotel-door{ fill:#7f1d1d; }
.game-hotel-svg .hotel-window{ fill:#fee2e2; stroke:#7f1d1d; stroke-width:.45; }

/* Property-detail build icons use the exact same SVG. */
.detail-house-icon{
  width:30px !important;
  height:27px !important;
  margin-right:2px !important;
  vertical-align:middle !important;
}
.detail-hotel-icon{
  width:42px !important;
  height:28px !important;
  vertical-align:middle !important;
}
.house-dot,
.hotel-dot{
  background:none !important;
  border:0 !important;
}

/* Non-emoji square icons. */
.go-arrow-svg{
  width:42px;
  height:42px;
}
.go-arrow-svg circle{
  fill:#bbf7d0;
  stroke:#166534;
  stroke-width:4;
}
.go-arrow-svg path{
  fill:none;
  stroke:#064e3b;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.jail-svg,
.go-to-jail-svg{
  width:44px;
  height:44px;
}
.jail-svg .jail-wall{ fill:#e2e8f0; stroke:#0f172a; stroke-width:4; }
.jail-svg .jail-top,
.jail-svg .jail-bars{ fill:none; stroke:#0f172a; stroke-width:4.5; stroke-linecap:round; }
.jail-svg .jail-face{ fill:#94a3b8; stroke:#0f172a; stroke-width:3; }
.jail-svg .jail-shoulders{ fill:none; stroke:#0f172a; stroke-width:4; stroke-linecap:round; }
.go-to-jail-svg .badge-shield{ fill:#2563eb; stroke:#1e3a8a; stroke-width:4; stroke-linejoin:round; }
.go-to-jail-svg .badge-star{ fill:#dbeafe; stroke:#1e3a8a; stroke-width:2; stroke-linejoin:round; }
.go-to-jail-svg .badge-arrow,
.go-to-jail-svg .badge-arrow-head{ fill:none; stroke:#fef3c7; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }

/* Vacation pot box: wider and allowed to size to content so the amount does not get clipped. */
#board .tile .space-pot,
#board .tile > .tile-content > .space-pot,
#board .tile.corner .space-pot,
#board .tile.corner > .tile-content > .space-pot{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:68px !important;
  max-width:calc(100% + 8px) !important;
  padding:3px 7px !important;
  margin:2px auto 0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:clamp(8px,.78vw,10px) !important;
  line-height:1.05 !important;
  border-radius:999px !important;
}

/* Keep Sky blue and Cyan lighter; do not turn Sky into Cyan. */
.swatch[title="Sky"]{ background:#0ea5e9 !important; }
.swatch[title="Cyan"]{ background:#67e8f9 !important; }


/* v95-from-v34: property detail no-house sizing and tighter board house strip */

/* Property detail card: "No houses" occupies the same build-level box as real houses. */
#manageModal.tile-detail-mode .build-level-row{
  min-height:38px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.detail-build-icons{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-width:124px !important;
  min-height:30px !important;
  vertical-align:middle !important;
}
.detail-build-icons.no-houses-build-level{
  align-items:center !important;
}
.no-houses-pill{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:124px !important;
  min-height:30px !important;
  padding:4px 10px !important;
  border-radius:10px !important;
  background:#e2e8f0 !important;
  color:#475569 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
.detail-house-icon{
  width:30px !important;
  height:27px !important;
  flex:0 0 30px !important;
  margin-right:1px !important;
}
.detail-hotel-icon{
  width:42px !important;
  height:28px !important;
  flex:0 0 42px !important;
}

/* Board house strip: keep house size, but shrink the containing strip and remove the oversized white box. */
#board .tile > .tile-content > .build-strip{
  box-sizing:border-box !important;
  align-self:center !important;
  display:inline-flex !important;
  width:auto !important;
  max-width:calc(100% - 8px) !important;
  min-width:0 !important;
  flex:0 0 22px !important;
  height:22px !important;
  min-height:22px !important;
  margin:0 auto !important;
  padding:0 !important;
  justify-content:center !important;
  align-items:center !important;
  gap:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
#board .tile > .tile-content > .build-strip.build-count-1,
#board .tile > .tile-content > .build-strip.build-count-2,
#board .tile > .tile-content > .build-strip.build-count-3,
#board .tile > .tile-content > .build-strip.build-count-4{
  grid-template-columns:none !important;
}
#board .tile > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile > .tile-content > .build-strip .mini-house{
  box-sizing:border-box !important;
  display:block !important;
  flex:0 0 17px !important;
  width:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  height:18px !important;
  min-height:18px !important;
  margin:0 -1px 0 0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board .tile > .tile-content > .build-strip .game-house-svg.board-house-icon:last-child,
#board .tile > .tile-content > .build-strip .mini-house:last-child{
  margin-right:0 !important;
}
#board .tile > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile > .tile-content > .build-strip .mini-hotel{
  box-sizing:border-box !important;
  display:block !important;
  flex:0 0 28px !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Prevent any older generated dot styles from drawing a visible white backing around house SVGs. */
#board .tile > .tile-content > .build-strip .game-house-svg::before,
#board .tile > .tile-content > .build-strip .game-house-svg::after,
#board .tile > .tile-content > .build-strip .mini-house::before,
#board .tile > .tile-content > .build-strip .mini-house::after{
  content:none !important;
  display:none !important;
}


/* v97-from-v34: centered Vacation pot, smaller jail/visiting icon, Go To Jail layout, harder token positioning, lower congestion */

/* Center the Vacation pot amount. */
#board .tile .space-pot,
#board .tile > .tile-content > .space-pot,
#board .tile.corner .space-pot,
#board .tile.corner > .tile-content > .space-pot{
  align-self:center !important;
  justify-self:center !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* Move property names/text outward to clear the middle house area. */
#board .tile.side-bottom .name{
  transform:translateY(4px) !important;
}
#board .tile.side-top .name{
  transform:translateY(-4px) !important;
}
#board .tile.side-left .name{
  transform:translateX(-4px) !important;
}
#board .tile.side-right .name{
  transform:translateX(4px) !important;
}

/* Also move image/flag property headers outward a little more. */
#board .tile.side-bottom .tile-header-bar.has-image,
#board .tile.side-bottom .tile-header-bar.flag-only{
  transform:translateY(7px) !important;
}
#board .tile.side-top .tile-header-bar.has-image,
#board .tile.side-top .tile-header-bar.flag-only{
  transform:translateY(-7px) !important;
}
#board .tile.side-left .tile-header-bar.has-image,
#board .tile.side-left .tile-header-bar.flag-only{
  transform:translateX(-7px) !important;
}
#board .tile.side-right .tile-header-bar.has-image,
#board .tile.side-right .tile-header-bar.flag-only{
  transform:translateX(7px) !important;
}

/* Token nudging: force stack positions by board side, not relative drift. */
#board .tile .tokens{
  width:54px !important;
  height:45px !important;
  pointer-events:none !important;
  overflow:visible !important;
}
#board .tile.side-right .tokens{
  left:4px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-left .tokens{
  left:9px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-top .tokens{
  left:50% !important;
  right:auto !important;
  bottom:4px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
}
#board .tile.side-bottom .tokens{
  left:50% !important;
  right:auto !important;
  bottom:4px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
}
#board .tile.corner .tokens{
  left:50% !important;
  right:auto !important;
  bottom:8px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
}
#board .token{
  width:30px !important;
  height:30px !important;
  transform:translate(var(--token-x, 0px), var(--token-y, 0px)) scale(var(--token-scale, .92)) !important;
}
#board .token.current-token{
  transform:translate(var(--token-x, 0px), var(--token-y, 0px)) scale(calc(var(--token-scale, .92) * 1.10)) !important;
}

/* New GO icon: word GO with red arrow below. */
.go-word-arrow-svg{
  width:50px;
  height:44px;
  overflow:visible;
}
.go-word-arrow-svg .go-word{
  font:900 21px/1 Arial, sans-serif;
  fill:#166534;
  letter-spacing:1px;
}
.go-word-arrow-svg .go-red-arrow,
.go-word-arrow-svg .go-red-arrow-head{
  fill:none;
  stroke:#dc2626;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Jail square: smaller bars aligned with VISITING. */
.jail-visiting-combo{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  gap:4px;
  transform:rotate(-35deg);
}
.jail-bars-mini{
  display:grid;
  grid-template-columns:repeat(3,3px);
  gap:2px;
  width:20px;
  height:22px;
  padding:3px 4px;
  border:2px solid #0f172a;
  border-radius:4px;
  background:linear-gradient(180deg,#e2e8f0,#94a3b8);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.jail-bars-mini i{
  display:block;
  border-radius:99px;
  background:#0f172a;
}
.jail-visiting-word{
  font-size:9px;
  font-weight:1000;
  letter-spacing:.6px;
  color:#0f172a;
  white-space:nowrap;
}

/* Go To Jail square: GO TO above, police icon, JAIL below. */
.go-to-jail-layout{
  display:grid;
  grid-template-rows:auto 34px auto;
  justify-items:center;
  align-items:center;
  gap:1px;
}
.go-to-word,
.jail-word{
  font-size:10px;
  font-weight:1000;
  line-height:1;
  color:#0f172a;
  letter-spacing:.8px;
}
.go-to-jail-police-svg{
  width:34px;
  height:34px;
  overflow:visible;
}
.go-to-jail-police-svg .police-face{
  fill:#fde68a;
  stroke:#78350f;
  stroke-width:2;
}
.go-to-jail-police-svg .police-cap,
.go-to-jail-police-svg .police-body{
  fill:#1d4ed8;
  stroke:#1e3a8a;
  stroke-width:2.5;
  stroke-linejoin:round;
}
.go-to-jail-police-svg .police-brim{
  fill:none;
  stroke:#1e3a8a;
  stroke-width:4;
  stroke-linecap:round;
}
.go-to-jail-police-svg .police-badge{
  fill:#facc15;
  stroke:#92400e;
  stroke-width:1.5;
  stroke-linejoin:round;
}
.go-to-jail-police-svg .police-eye{
  fill:#111827;
}
.go-to-jail-police-svg .police-mouth{
  fill:none;
  stroke:#78350f;
  stroke-width:2;
  stroke-linecap:round;
}

/* Hide older icon styles from earlier builds if their classes remain elsewhere. */
.go-arrow-svg,
.better-jail-cell,
.go-to-jail-cop-icon,
.jail-svg,
.go-to-jail-svg{
  display:none !important;
}


/* v98-from-v34: ownership banners closer to edge, hard token target positions, centered Vacation pot, cleaner Jail icons */

/* Move ownership banners closer to the property-space edge. */
#board .tile.flag-tile > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile) .tile-content > .owner-strip.relative-owner-strip,
#board .tile .tile-content > .owner-strip.relative-owner-strip{
  margin:auto 1px 1px !important;
  width:auto !important;
  align-self:stretch !important;
}
#board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right .tile-content > .owner-strip.relative-owner-strip{
  margin:auto 1px 1px !important;
}

/* Center the Vacation pot badge by absolute positioning within the Vacation corner. */
#board .tile .vacation-pot-badge,
#board .tile > .tile-content > .vacation-pot-badge,
#board .tile.corner .vacation-pot-badge,
#board .tile.corner > .tile-content > .vacation-pot-badge{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:16px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 !important;
  width:auto !important;
  min-width:72px !important;
  max-width:calc(100% - 10px) !important;
  padding:3px 8px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  z-index:18 !important;
}
#board .tile .vacation-pot-badge span{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

/* Last-word token positioning. Inline JS sets these too, but this keeps CSS fallback identical. */
#board .tile .tokens{
  position:absolute !important;
  width:54px !important;
  height:45px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  pointer-events:none !important;
}
#board .tile.side-right .tokens{
  left:2px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-left .tokens{
  left:8px !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
#board .tile.side-top .tokens,
#board .tile.side-bottom .tokens{
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:2px !important;
  transform:translateX(-50%) !important;
}
#board .tile.corner .tokens{
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:6px !important;
  transform:translateX(-50%) !important;
}

/* Cleaner Jail / Visiting square: no rotation, simpler bars plus word. */
.jail-visiting-clean{
  display:grid;
  grid-template-rows:22px auto;
  justify-items:center;
  align-items:center;
  gap:2px;
  width:58px;
}
.jail-bars-clean-svg{
  width:34px;
  height:24px;
  overflow:visible;
}
.jail-bars-clean-svg .jail-frame{
  fill:#e2e8f0;
  stroke:#0f172a;
  stroke-width:3.5;
}
.jail-bars-clean-svg .jail-bars,
.jail-bars-clean-svg .jail-lock-plate{
  fill:none;
  stroke:#0f172a;
  stroke-width:3.5;
  stroke-linecap:round;
}
.visiting-clean-word{
  font-size:8.5px;
  font-weight:1000;
  letter-spacing:.5px;
  color:#0f172a;
  line-height:1;
}

/* Cleaner Go To Jail: text + police badge/shield instead of the previous face icon. */
.go-to-jail-clean{
  display:grid;
  grid-template-rows:auto 34px auto;
  justify-items:center;
  align-items:center;
  gap:1px;
  width:58px;
}
.go-to-clean-word,
.jail-clean-word{
  font-size:10px;
  font-weight:1000;
  line-height:1;
  letter-spacing:.8px;
  color:#0f172a;
}
.police-badge-clean-svg{
  width:35px;
  height:35px;
  overflow:visible;
}
.police-badge-clean-svg .badge-outer{
  fill:#1d4ed8;
  stroke:#1e3a8a;
  stroke-width:4;
  stroke-linejoin:round;
}
.police-badge-clean-svg .badge-inner{
  fill:#60a5fa;
  stroke:#bfdbfe;
  stroke-width:2;
  stroke-linejoin:round;
}
.police-badge-clean-svg .badge-star{
  fill:#facc15;
  stroke:#78350f;
  stroke-width:2;
  stroke-linejoin:round;
}
.police-badge-clean-svg .badge-cap{
  fill:none;
  stroke:#1e3a8a;
  stroke-width:4;
  stroke-linecap:round;
}

/* Hide old jail/go-to-jail icon variants if any remain cached in markup. */
.jail-visiting-combo,
.jail-bars-mini,
.go-to-jail-layout,
.go-to-jail-police-svg{
  display:none !important;
}


/* v99-from-v34: taller/thinner property spaces for more vertical room */
/*
  The board is still 11x11, but the outside rows are now taller and the
  property columns are slightly thinner. This gives top/bottom properties
  more vertical room for text, houses, banners and tokens.
*/
#board.board,
.board#board{
  grid-template-columns:1.18fr repeat(9, .92fr) 1.18fr !important;
  grid-template-rows:1.34fr repeat(9, .86fr) 1.34fr !important;
  gap:4px !important;
}

/* Keep the center area aligned to the resized inner grid. */
#board .center-card{
  grid-column:2 / 11 !important;
  grid-row:2 / 11 !important;
}

/* Let edge spaces use the added height instead of visually crowding the center. */
#board .tile > .tile-content{
  padding-top:2px !important;
  padding-bottom:3px !important;
  gap:2px !important;
}

/* Top/bottom rows now have more room; keep house strip safely inside the property. */
#board .tile.side-top > .tile-content > .build-strip,
#board .tile.side-bottom > .tile-content > .build-strip{
  max-width:calc(100% - 6px) !important;
}

/* With taller edge rows, the corner icons can be a little less dominant. */
#board .tile.corner .tile-icon,
#board .tile.corner .space-icon{
  max-height:42% !important;
}


/* v100-from-v34: centered property text and thicker relative-bottom ownership banners */

/* Let the property face use a stable top/content/bottom layout on all board styles. */
#board .tile:not(.corner) > .tile-content{
  box-sizing:border-box !important;
  height:100% !important;
  min-height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  padding:1px 3px 0 !important;
  gap:1px !important;
  overflow:hidden !important;
}

/* Center the property description/name in the usable middle of the space.
   This applies to both classic color-bar spaces and alternate image/flag spaces. */
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  box-sizing:border-box !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  align-self:stretch !important;
  transform:none !important;
  line-height:1.05 !important;
}

/* Older builds moved side text outward. Neutralize that so the name truly centers everywhere. */
#board .tile.side-bottom .name,
#board .tile.side-top .name,
#board .tile.side-left .name,
#board .tile.side-right .name,
#board .tile.flag-tile > .tile-content > .name{
  transform:none !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Keep unowned price compact below the centered text and above the owner-banner area. */
#board .tile:not(.corner) .tile-content > .space-price,
#board .tile:not(.corner) .tile-content > .price{
  flex:0 0 auto !important;
  margin:0 auto 1px !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
}

/* Thicker ownership banner, always at the relative bottom of the tile content.
   Because side spaces rotate .tile-content, this remains the relative bottom for every side. */
#board .tile .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right .tile-content > .owner-strip.relative-owner-strip{
  box-sizing:border-box !important;
  position:relative !important;
  inset:auto !important;
  flex:0 0 17px !important;
  height:17px !important;
  min-height:17px !important;
  width:calc(100% + 6px) !important;
  align-self:center !important;
  margin:auto -3px 0 !important;
  border-radius:0 0 8px 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:14 !important;
  color:white !important;
  font-size:8px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.7) !important;
  box-shadow:0 -1px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.45) !important;
  transform:none !important;
  writing-mode:horizontal-tb !important;
}
#board .tile .tile-content > .owner-strip.relative-owner-strip span{
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Image/flag headers can stay outward slightly, but they should not push the centered property name off balance. */
#board .tile.flag-tile:not(.corner) .tile-header-bar,
#board .tile:not(.corner) .tile-header-bar.has-image,
#board .tile:not(.corner) .tile-header-bar.flag-only{
  flex:0 0 auto !important;
  margin-bottom:1px !important;
}

/* Keep house strip compact above the centered name. */
#board .tile:not(.corner) > .tile-content > .build-strip{
  flex:0 0 22px !important;
  margin:0 auto !important;
}


/* v102-from-v34: revert v101 sizing, align edge dimensions, header/owner opposite ends */

/*
  This build is intentionally based on v100, not v101.
  Keep the liked v99/v100 taller-property feel, but make the top/bottom
  property track and left/right property track use matching dimensions.
*/
#board.board,
.board#board{
  aspect-ratio:1 / 1 !important;
  grid-template-columns:1.26fr repeat(9,.88fr) 1.26fr !important;
  grid-template-rows:1.26fr repeat(9,.88fr) 1.26fr !important;
  gap:4px !important;
}

/* Keep center panel aligned to the corrected grid. */
#board .center-card{
  grid-column:2 / 11 !important;
  grid-row:2 / 11 !important;
}

/* Flags/images may overhang the header end, but the board dimensions stay unchanged. */
.board-card,
.middle-board,
#board,
#board.board,
.board#board,
#board .tile.flag-tile,
#board .tile.flag-tile > .tile-content,
#board .tile.flag-tile > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile > .tile-content > .tile-header-bar.has-image{
  overflow:visible !important;
}

/* Non-flag spaces remain clipped enough to avoid random text spilling. */
#board .tile:not(.flag-tile):not(.corner){
  overflow:hidden !important;
}

/*
  Property layout:
  header/flag/color bar at one end,
  owner banner at the opposite relative bottom,
  property name centered between them.
*/
#board .tile:not(.corner) > .tile-content{
  box-sizing:border-box !important;
  height:100% !important;
  min-height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:1px !important;
  padding:1px 3px 0 !important;
  overflow:visible !important;
}

/* Header/flag/image stays at the relative top end. */
#board .tile:not(.corner) .tile-content > .color-bar,
#board .tile:not(.corner) .tile-content > .tile-header-bar,
#board .tile.flag-tile:not(.corner) .tile-content > .tile-header-bar,
#board .tile:not(.corner) .tile-content > .tile-header-bar.flag-only,
#board .tile:not(.corner) .tile-content > .tile-header-bar.has-image{
  flex:0 0 auto !important;
  align-self:center !important;
  margin-top:0 !important;
  margin-bottom:1px !important;
  z-index:28 !important;
}

/* Give flag/image headers permission to straddle their header end without clipping. */
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.has-image{
  overflow:visible !important;
  z-index:32 !important;
}

/* Do not push flags so far that they get chopped; slight overhang only. */
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.has-image img{
  transform:translateY(-7px) !important;
  transform-origin:center center !important;
}

/* Center description/name in the middle zone regardless of classic or alternate board. */
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  box-sizing:border-box !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  align-self:stretch !important;
  transform:none !important;
  line-height:1.05 !important;
}

/* Price remains compact above the owner banner. */
#board .tile:not(.corner) .tile-content > .space-price,
#board .tile:not(.corner) .tile-content > .price{
  flex:0 0 auto !important;
  margin:0 auto 1px !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
}

/* Owner banner: opposite end from header, relative bottom, thicker, same style on all sides. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  box-sizing:border-box !important;
  position:relative !important;
  inset:auto !important;
  flex:0 0 17px !important;
  height:17px !important;
  min-height:17px !important;
  width:calc(100% - 8px) !important;
  align-self:center !important;
  margin:auto 4px 3px !important;
  border-radius:7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:24 !important;
  color:white !important;
  font-size:8px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.46) !important;
  transform:none !important;
  writing-mode:horizontal-tb !important;
}

/* Explicitly neutralize older side-specific owner banner rules. */
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  flex-basis:17px !important;
  height:17px !important;
  min-height:17px !important;
  width:calc(100% - 8px) !important;
  margin:auto 4px 3px !important;
  border-radius:7px !important;
  font-size:8px !important;
}

#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip span{
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Keep house strip in the upper/middle area, not crowding the banner. */
#board .tile:not(.corner) > .tile-content > .build-strip{
  flex:0 0 22px !important;
  margin:0 auto !important;
}


/* v103-from-v34: World Cities flag alignment, side banners, lower descriptions, house strip near flags */

/*
  Preserve v102 board dimensions. This patch only changes placement within spaces.
  Goal:
  - flags/header and ownership banner stay at opposite relative ends,
  - house strip anchors near the flag/header,
  - property description sits lower toward the ownership banner,
  - side banners are not overly wide.
*/

/* Keep the equal top/bottom and left/right track dimensions from v102. */
#board.board,
.board#board{
  aspect-ratio:1 / 1 !important;
  grid-template-columns:1.26fr repeat(9,.88fr) 1.26fr !important;
  grid-template-rows:1.26fr repeat(9,.88fr) 1.26fr !important;
}

/* Let World Cities flags overhang cleanly. */
#board .tile.flag-tile,
#board .tile.flag-tile > .tile-content,
#board .tile.flag-tile > .tile-content > .tile-header-bar,
#board .tile.flag-tile > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile > .tile-content > .tile-header-bar.has-image{
  overflow:visible !important;
}

/* Bottom row: move flags up so they straddle the outer edge more evenly. */
#board .tile.flag-tile.side-bottom > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-bottom > .tile-content > .tile-header-bar.has-image{
  transform:translateY(-7px) !important;
  margin-bottom:0 !important;
  z-index:34 !important;
}

/* Top row: keep a moderate overhang without pushing too far outside. */
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.has-image{
  transform:translateY(-7px) !important;
  margin-bottom:0 !important;
  z-index:34 !important;
}

/* Side rows: "up the space" means visually toward board center:
   left side -> right on screen, right side -> left on screen. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image{
  transform:translateX(8px) !important;
  margin-bottom:0 !important;
  z-index:34 !important;
}
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image{
  transform:translateX(-8px) !important;
  margin-bottom:0 !important;
  z-index:34 !important;
}

/* If the flag image itself has older transform rules, neutralize them so the header container controls placement. */
#board .tile.flag-tile > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile > .tile-content > .tile-header-bar.has-image img{
  transform:none !important;
}

/* Anchor the house container against the flag/header with a small margin. */
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  flex:0 0 22px !important;
  margin:2px auto 0 !important;
  align-self:center !important;
}

/* Make the flag/header the first item; house strip directly follows it. */
#board .tile:not(.corner) .tile-content > .color-bar,
#board .tile:not(.corner) .tile-content > .tile-header-bar,
#board .tile.flag-tile:not(.corner) .tile-content > .tile-header-bar,
#board .tile:not(.corner) .tile-content > .tile-header-bar.flag-only,
#board .tile:not(.corner) .tile-content > .tile-header-bar.has-image{
  order:1 !important;
  flex:0 0 auto !important;
  align-self:center !important;
}

/* Move property descriptions further down toward the relative bottom/banner area.
   A top spacer pushes text down while still letting it stay centered in its own lane. */
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  order:3 !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  text-align:center !important;
  padding:5px 1px 2px !important;
  margin:0 auto !important;
  transform:none !important;
}

/* Price stays below description and above owner banner. */
#board .tile:not(.corner) .tile-content > .space-price,
#board .tile:not(.corner) .tile-content > .price{
  order:4 !important;
  flex:0 0 auto !important;
  margin:0 auto 1px !important;
}

/* Owner banner remains last, near the relative bottom with a small margin. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  order:5 !important;
  flex:0 0 17px !important;
  height:17px !important;
  min-height:17px !important;
  width:calc(100% - 8px) !important;
  align-self:center !important;
  margin:auto 4px 3px !important;
  border-radius:7px !important;
}

/* Left/right side ownership banners were too wide. Narrow them and keep them at the relative bottom. */
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  width:calc(100% - 22px) !important;
  max-width:calc(100% - 22px) !important;
  flex-basis:17px !important;
  height:17px !important;
  min-height:17px !important;
  align-self:center !important;
  margin:auto 11px 3px !important;
  border-radius:7px !important;
}

/* Keep side description lower too, but not jammed into the banner. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  padding-top:6px !important;
  padding-bottom:2px !important;
  align-items:flex-end !important;
}

/* Make sure the banner text uses the same styling on all sides. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip span{
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}


/* v104-from-v34: reverse side flag movement, tighten side banners, adjust side/top house placement */

/* Reverse v103's left/right flag direction.
   Left side should move the opposite way from v103; right side should do the opposite too. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image{
  transform:translateX(-8px) !important;
  margin-bottom:0 !important;
  z-index:36 !important;
}
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image{
  transform:translateX(8px) !important;
  margin-bottom:0 !important;
  z-index:36 !important;
}

/* Top row houses were too high and getting covered by the flag.
   Keep the house strip against the flag/header, but add enough breathing room below the overhanging flag. */
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:8px !important;
  margin-bottom:0 !important;
}

/* Bottom row can stay closer to the flag/header because its flag overhang does not cover the houses the same way. */
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:3px !important;
  margin-bottom:0 !important;
}

/* Side houses: correct the "late" positioning by pulling them back toward the flag/header.
   Right/left are adjusted in opposite visual directions to match their opposing orientations. */
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:2px !important;
  margin-bottom:0 !important;
  transform:translateX(4px) !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:2px !important;
  margin-bottom:0 !important;
  transform:translateX(-4px) !important;
}

/* Side ownership banners: narrower and closer to the relative bottom.
   Use explicit margins instead of shorthand so older side-specific rules do not pull them inward. */
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  order:5 !important;
  flex:0 0 17px !important;
  flex-basis:17px !important;
  height:17px !important;
  min-height:17px !important;
  width:calc(100% - 40px) !important;
  max-width:calc(100% - 40px) !important;
  align-self:center !important;
  margin-top:auto !important;
  margin-right:20px !important;
  margin-bottom:1px !important;
  margin-left:20px !important;
  border-radius:7px !important;
  transform:none !important;
}

/* Top/bottom banners keep their thicker style but sit close to the relative bottom with a small margin. */
#board .tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  margin-top:auto !important;
  margin-bottom:2px !important;
}

/* Keep descriptions lower, but leave the moved house strip room near the header. */
#board .tile:not(.corner) .tile-content > .name{
  order:3 !important;
  align-items:flex-end !important;
  padding-top:4px !important;
  padding-bottom:2px !important;
}

/* Side descriptions: slightly more bottom-biased to coordinate with narrower banners. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  padding-top:5px !important;
  padding-bottom:2px !important;
}


/* v105-from-v34: make side flag movement visible, tighten side banners, correct side/top house placement */

/*
  The side spaces rotate .tile-content, so a translateX on the flag header moves
  mostly along the screen's vertical axis. Use translateY on the rotated child
  to move the flags visibly left/right on screen.
*/

/* Side flags: visibly reverse the attempted side adjustment.
   Left-side flags move left on screen; right-side flags move right on screen. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(14px) !important;
  margin-bottom:0 !important;
  z-index:40 !important;
}
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(14px) !important;
  margin-bottom:0 !important;
  z-index:40 !important;
}

/* Move the visible flag/image itself with the header so older inner-span overrides cannot hide the movement. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image img,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image img{
  transform:none !important;
  position:relative !important;
}

/* Top row houses: move them farther down so the flag no longer covers them. */
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:15px !important;
  margin-bottom:0 !important;
  transform:none !important;
}

/* Side houses: pull them earlier/closer to the flag/header.
   Because side tile content is rotated in opposite directions, the same local
   translateX moves right-side houses upward and left-side houses downward. */
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:2px !important;
  margin-bottom:0 !important;
  transform:translateX(12px) !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  margin-top:2px !important;
  margin-bottom:0 !important;
  transform:translateX(12px) !important;
}

/* Side ownership banners: significantly narrower and pinned closer to the relative bottom. */
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  order:5 !important;
  flex:0 0 16px !important;
  flex-basis:16px !important;
  height:16px !important;
  min-height:16px !important;
  width:38px !important;
  max-width:38px !important;
  min-width:38px !important;
  align-self:center !important;
  margin-top:auto !important;
  margin-right:auto !important;
  margin-bottom:0 !important;
  margin-left:auto !important;
  border-radius:7px !important;
  transform:none !important;
}

/* Pin side banners at the relative bottom even if earlier flex rules leave extra space. */
#board .tile.side-left:not(.corner) > .tile-content,
#board .tile.side-right:not(.corner) > .tile-content{
  padding-bottom:0 !important;
}

/* Top/bottom ownership banners retain the wider style but stay very near the bottom with a bit of margin. */
#board .tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  margin-top:auto !important;
  margin-bottom:2px !important;
}

/* Keep descriptions biased toward the relative bottom, above the now lower owner banners. */
#board .tile:not(.corner) .tile-content > .name{
  order:3 !important;
  align-items:flex-end !important;
  padding-top:4px !important;
  padding-bottom:2px !important;
}
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  padding-top:5px !important;
  padding-bottom:1px !important;
}


/* v106-from-v34: reverse the visible side-flag movement and raise bottom flags */

/*
  v105 used translateY(+14px) on rotated side spaces. Because the side content
  is rotated, that moved the flags outward. Reverse it so the side flags move
  back toward the space/board center instead of farther away.
*/
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(-14px) !important;
  margin-bottom:0 !important;
  z-index:42 !important;
}

/* Keep the actual flag/image locked to the moved header container. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image img,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image img{
  transform:none !important;
  position:relative !important;
}

/* Bottom row flags need to be raised a bit more so they straddle the edge evenly. */
#board .tile.flag-tile.side-bottom > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-bottom > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(-12px) !important;
  margin-bottom:0 !important;
  z-index:42 !important;
}

/* Top row remains lifted, but not further than before. */
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-top > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(-7px) !important;
  margin-bottom:0 !important;
  z-index:42 !important;
}


/* v107-from-v34: continue side flag movement; move side banners opposite by the same distance */

/*
  v106 confirmed the correct direction for side flags. Move those flags farther
  in that same direction, then move the corresponding side ownership banners in
  the opposite local direction by the same amount.
*/
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(-22px) !important;
  margin-bottom:0 !important;
  z-index:44 !important;
}

/* Keep flag/image children locked to the shifted header container. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image img,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image img{
  transform:none !important;
  position:relative !important;
}

/* Move side ownership banners in the opposite local direction by the same 22px. */
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  transform:translateY(22px) !important;
  margin-bottom:0 !important;
  z-index:26 !important;
}


/* v108-from-v34: move side flags a bit farther; pull banners back and widen them */

/* Keep moving the side flags farther in the now-correct direction. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image{
  position:relative !important;
  transform:translateY(-30px) !important;
  margin-bottom:0 !important;
  z-index:46 !important;
}

/* Keep the visible flag/image controlled only by the shifted header container. */
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-left > .tile-content > .tile-header-bar.has-image img,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image span,
#board .tile.flag-tile.side-right > .tile-content > .tile-header-bar.has-image img{
  transform:none !important;
  position:relative !important;
}

/* The v107 banner shift went too far and the banners were too narrow.
   Pull the side banners back closer to the relative bottom and widen them. */
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  transform:translateY(10px) !important;
  width:54px !important;
  max-width:54px !important;
  min-width:54px !important;
  flex:0 0 17px !important;
  flex-basis:17px !important;
  height:17px !important;
  min-height:17px !important;
  align-self:center !important;
  margin-top:auto !important;
  margin-right:auto !important;
  margin-bottom:1px !important;
  margin-left:auto !important;
  border-radius:7px !important;
  z-index:27 !important;
}


/* v109-from-v34: classic side headers follow World Cities side-flag placement; de-skew houses; lower text start */

/* Classic board side headers should move exactly like the World Cities side flags. */
#board .tile:not(.flag-tile).side-left > .tile-content > .color-bar{
  position:relative !important;
  transform:translateY(-30px) !important;
  margin-bottom:0 !important;
  z-index:46 !important;
}
#board .tile:not(.flag-tile).side-right > .tile-content > .color-bar{
  position:relative !important;
  transform:translateY(-30px) !important;
  margin-bottom:0 !important;
  z-index:46 !important;
}

/* Houses had become skewed/off-axis. Reset transforms so they line up with the property spaces again. */
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  transform:none !important;
  align-self:center !important;
  justify-self:center !important;
  width:calc(100% - 10px) !important;
  max-width:calc(100% - 10px) !important;
}

/* Then pull the houses a bit closer to the header/flag without re-skewing them. */
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  margin-top:10px !important;
  margin-bottom:0 !important;
}
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip{
  margin-top:1px !important;
  margin-bottom:0 !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  margin-top:1px !important;
  margin-bottom:0 !important;
}

/* Property text should begin around the halfway mark of the space instead of floating high.
   Use a lower-starting text lane for all properties. */
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  order:3 !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  text-align:center !important;
  margin-top:auto !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
  transform:none !important;
}

/* Keep the text lane slightly lower on the side spaces too. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name,
#board .tile.side-top:not(.corner) .tile-content > .name,
#board .tile.side-bottom:not(.corner) .tile-content > .name{
  margin-top:auto !important;
  padding-top:1px !important;
}


/* v110-from-v34: classic side color headers, text lane opposite direction, clean owner banners */

/*
  Classic mode uses .bar, not .color-bar. Move those side color headers with
  the same side-axis movement as the World Cities flags.
*/
#board .tile:not(.flag-tile).side-left > .tile-content > .bar,
#board .tile:not(.flag-tile).side-left > .tile-content > .color-bar,
#board .tile:not(.flag-tile).side-right > .tile-content > .bar,
#board .tile:not(.flag-tile).side-right > .tile-content > .color-bar{
  position:relative !important;
  transform:translateY(-30px) !important;
  margin-bottom:0 !important;
  z-index:46 !important;
}

/* Keep Classic top/bottom color bars steady unless they are already controlled elsewhere. */
#board .tile:not(.flag-tile).side-top > .tile-content > .bar,
#board .tile:not(.flag-tile).side-bottom > .tile-content > .bar{
  position:relative !important;
  z-index:32 !important;
}

/*
  Property text: begin at the halfway mark, but in the other direction from v109.
  v109 pushed the name with auto top margin. This version creates a fixed lower
  half text lane and starts the text at the start of that lane instead.
*/
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  order:3 !important;
  flex:0 1 50% !important;
  min-height:42% !important;
  max-height:52% !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  margin-top:0 !important;
  margin-bottom:auto !important;
  padding:2px 1px 2px !important;
  transform:none !important;
}

/* Side text follows the same halfway-start rule instead of being pushed to the far end. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  flex:0 1 50% !important;
  min-height:42% !important;
  max-height:52% !important;
  align-items:flex-start !important;
  margin-top:0 !important;
  margin-bottom:auto !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
}

/* Keep houses close to the flag/header, but centered and de-skewed. */
#board .tile:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  transform:none !important;
  align-self:center !important;
  justify-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  margin-top:8px !important;
}
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  margin-top:1px !important;
}

/* Ownership banners: remove contrasting borders/outlines/inset strokes that made them look blurry. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

/* Ensure side banners keep their accepted v108 placement/width, only without the blurry border effect. */
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  transform:translateY(10px) !important;
  width:54px !important;
  max-width:54px !important;
  min-width:54px !important;
}


/* v111-from-v34: restore visible classic side headers, force name movement, realign houses */

/*
  Classic side headers in v110 went too far and disappeared. Classic uses .bar,
  so keep the same general side-axis direction but reduce the amount enough to
  keep the colored header visible.
*/
#board .tile:not(.flag-tile).side-left > .tile-content > .bar,
#board .tile:not(.flag-tile).side-left > .tile-content > .color-bar,
#board .tile:not(.flag-tile).side-right > .tile-content > .bar,
#board .tile:not(.flag-tile).side-right > .tile-content > .color-bar{
  position:relative !important;
  transform:translateY(-14px) !important;
  margin-bottom:1px !important;
  z-index:44 !important;
}

/*
  Force the property description to move by anchoring it to the lower half
  with relative positioning. This avoids flex rules from older builds ignoring
  the halfway-start request.
*/
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  order:3 !important;
  position:relative !important;
  top:10px !important;
  flex:0 0 42% !important;
  min-height:42% !important;
  max-height:42% !important;
  margin:0 auto auto !important;
  padding:0 1px 2px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  transform:none !important;
}

/* Side-space descriptions use a little less shift because rotation exaggerates it visually. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  top:7px !important;
}

/*
  Houses were not lining up with the property spaces. Remove all accumulated
  side-specific offsets and use a fixed centered strip in the local property axis.
*/
#board .tile:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip{
  order:2 !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  align-self:center !important;
  justify-self:center !important;
  box-sizing:border-box !important;
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  height:22px !important;
  min-height:22px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}

/* Keep houses close to headers, but not underneath the top-row flags. */
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  margin-top:11px !important;
}
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  margin-top:2px !important;
}

/* Keep the individual houses straight and inside the centered strip. */
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house{
  transform:none !important;
  flex:0 0 17px !important;
  width:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  height:18px !important;
  margin:0 -1px 0 0 !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon:last-child,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house:last-child{
  margin-right:0 !important;
}

/* Ownership banners: keep accepted position/size, but make them visually sharp/flat. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-top:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-bottom:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}


/* v112-from-v34: houses become true overlay; text moves closer to banners on both board types */

/*
  The build/house strip should never participate in flex layout. It is now an
  absolute overlay, so adding/removing houses cannot shift property text,
  price, ownership banner, or header placement.
*/
#board .tile:not(.corner) > .tile-content{
  position:relative !important;
  overflow:visible !important;
}

/* One stable overlay rule for both Classic and World Cities. */
#board .tile:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip,
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip{
  position:absolute !important;
  order:unset !important;
  z-index:30 !important;
  left:50% !important;
  right:auto !important;
  top:20px !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  box-sizing:border-box !important;
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  height:22px !important;
  min-height:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  pointer-events:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Keep houses close to flag/header but clear of the overhanging top flags. */
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  top:30px !important;
}
#board .tile:not(.flag-tile).side-top:not(.corner) > .tile-content > .build-strip{
  top:20px !important;
}
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  top:18px !important;
}
#board .tile:not(.flag-tile).side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .build-strip{
  top:17px !important;
}

/* Make every individual house/hotel stay straight within the overlay strip. */
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house{
  transform:none !important;
  flex:0 0 17px !important;
  width:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  height:18px !important;
  margin:0 -1px 0 0 !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon:last-child,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house:last-child{
  margin-right:0 !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-hotel{
  transform:none !important;
  flex:0 0 28px !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:20px !important;
}

/*
  Move property descriptions closer to the ownership banners for both board
  types. Since the house strip is now an overlay, this lower text lane is not
  affected by the number of houses.
*/
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  order:3 !important;
  position:absolute !important;
  left:3px !important;
  right:3px !important;
  top:auto !important;
  bottom:23px !important;
  height:34px !important;
  min-height:0 !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  text-align:center !important;
  transform:none !important;
  z-index:18 !important;
  overflow:hidden !important;
}

/* Price/rent text stays just above the ownership banner, below the property name when present. */
#board .tile:not(.corner) .tile-content > .space-price,
#board .tile:not(.corner) .tile-content > .price{
  position:absolute !important;
  left:3px !important;
  right:3px !important;
  bottom:18px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  z-index:18 !important;
}

/* Keep ownership banners at the accepted v108/v111 placement, sharp and flat. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  position:relative !important;
  order:5 !important;
  margin-top:auto !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  z-index:24 !important;
}


/* v113-from-v34: unify house alignment for World Cities, widen house strip, put price exactly in banner lane */

/* House overlay should not clip when 4 houses are present. Apply equally to Classic and World Cities. */
#board .tile:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip{
  overflow:visible !important;
  width:60px !important;
  min-width:60px !important;
  max-width:60px !important;
  clip-path:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* World Cities houses should sit as high as Classic. Match the Classic row placements. */
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  top:20px !important;
}
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  top:17px !important;
}

/* Keep every house aligned and fully visible across both board types. */
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house{
  flex:0 0 17px !important;
  width:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  margin:0 !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-hotel{
  flex:0 0 28px !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  margin:0 auto !important;
}

/* Unowned property amount should sit exactly in the same lane where the ownership banner appears. */
#board .tile:not(.corner) .tile-content > .space-price,
#board .tile:not(.corner) .tile-content > .price{
  position:absolute !important;
  left:4px !important;
  right:4px !important;
  bottom:1px !important;
  height:17px !important;
  min-height:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 4px !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.96) !important;
  color:#222 !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:none !important;
  z-index:19 !important;
}

/* Side-space prices should use the same width lane as the accepted side ownership banners. */
#board .tile.side-left:not(.corner) .tile-content > .space-price,
#board .tile.side-right:not(.corner) .tile-content > .space-price,
#board .tile.side-left:not(.corner) .tile-content > .price,
#board .tile.side-right:not(.corner) .tile-content > .price{
  left:50% !important;
  right:auto !important;
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  transform:translateX(-50%) translateY(10px) !important;
  bottom:1px !important;
}

/* Keep owner banners sharp/flat and ensure the price occupies their exact lane only while unowned. */
#board .tile:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  z-index:24 !important;
}


/* v114-from-v34: World Cities house alignment/height, unclipped 4 houses, midpoint descriptions */

/*
  Make the house overlay align to the actual local width of every property space.
  This is applied to both boards so the overlay never shifts layout and never
  uses a narrow centered box that can visually misalign or clip four houses.
*/
#board .tile:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip,
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip{
  position:absolute !important;
  order:unset !important;
  z-index:31 !important;
  left:4px !important;
  right:4px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:24px !important;
  min-height:24px !important;
  top:17px !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  overflow:visible !important;
  clip-path:none !important;
  pointer-events:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Four houses need extra visual room because the roofs overhang each house body. */
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house{
  transform:none !important;
  flex:0 0 17px !important;
  width:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  height:18px !important;
  overflow:visible !important;
  margin:0 1px !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-hotel{
  transform:none !important;
  flex:0 0 30px !important;
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:20px !important;
  margin:0 auto !important;
  overflow:visible !important;
}

/* Classic stays where it was working. */
#board .tile:not(.flag-tile).side-top:not(.corner) > .tile-content > .build-strip{
  top:20px !important;
}
#board .tile:not(.flag-tile).side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .build-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .build-strip{
  top:17px !important;
}

/* World Cities only: move houses higher so they sit closer to the flags and visually match Classic. */
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  top:14px !important;
}
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  top:8px !important;
}

/*
  Property descriptions start at the midpoint of the property space for both
  board types. Two-word names can wrap naturally; font size is slightly reduced
  to allow clean two-line city names.
*/
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  position:absolute !important;
  order:unset !important;
  left:3px !important;
  right:3px !important;
  top:50% !important;
  bottom:auto !important;
  height:calc(50% - 24px) !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  transform:none !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  font-size:8.5px !important;
  line-height:.98 !important;
  letter-spacing:-.03em !important;
  z-index:18 !important;
}

/* World Cities gets the same midpoint text behavior explicitly. */
#board .tile.flag-tile.side-top:not(.corner) .tile-content > .name,
#board .tile.flag-tile.side-bottom:not(.corner) .tile-content > .name,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .name,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .name{
  top:50% !important;
  height:calc(50% - 24px) !important;
  font-size:8.25px !important;
  line-height:.98 !important;
}

/* Keep unowned property amounts exactly in the ownership-banner lane. */
#board .tile:not(.corner) .tile-content > .space-price,
#board .tile:not(.corner) .tile-content > .price{
  position:absolute !important;
  left:4px !important;
  right:4px !important;
  bottom:1px !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.96) !important;
  color:#222 !important;
  box-shadow:none !important;
  z-index:19 !important;
}
#board .tile.side-left:not(.corner) .tile-content > .space-price,
#board .tile.side-right:not(.corner) .tile-content > .space-price,
#board .tile.side-left:not(.corner) .tile-content > .price,
#board .tile.side-right:not(.corner) .tile-content > .price{
  left:50% !important;
  right:auto !important;
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  transform:translateX(-50%) translateY(10px) !important;
  bottom:1px !important;
}


/* v115-from-v34: Classic board absolute house nudges and cleaner Jail corners */

/*
  Classic-only house placement. These are screen-direction nudges on the
  already-rotated board content:
  - top row moves upward
  - bottom row moves downward
  - right row moves left
  - left row mirrors right row by moving right
  World Cities flag spaces are intentionally excluded.
*/
#board .tile:not(.flag-tile).side-top:not(.corner) > .tile-content > .build-strip{
  top:12px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile:not(.flag-tile).side-bottom:not(.corner) > .tile-content > .build-strip{
  top:24px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .build-strip{
  top:10px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .build-strip{
  top:10px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}

/* Classic houses are slightly larger but packed closer together so 1-4 houses stay centered. */
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip .mini-house{
  flex:0 0 16px !important;
  width:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  height:19px !important;
  margin:0 -0.5px !important;
}
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile:not(.flag-tile):not(.corner) > .tile-content > .build-strip .mini-hotel{
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:21px !important;
  margin:0 auto !important;
}

/* The Jail / Go To Jail corner icons already contain the needed text, so hide the duplicated tile name. */
#board .tile.corner.corner-no-name .tile-content > .name{
  display:none !important;
}


/* v116-from-v34: side-row house corrections, World Cities house density, and Jail / Go To Jail corner polish */

/*
  Classic side rows still need horizontal screen movement. Because the side tile
  faces are rotated, screen-left/right is achieved by different top offsets on
  the rotated build strip.
*/
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .build-strip{
  top:6px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .build-strip{
  top:14px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}

/* World Cities: match the Classic board's slightly larger, denser house spacing. */
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip .mini-house{
  flex:0 0 16px !important;
  width:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  height:19px !important;
  margin:0 -0.5px !important;
}
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile.flag-tile:not(.corner) > .tile-content > .build-strip .mini-hotel{
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:21px !important;
  margin:0 auto !important;
}

/* World Cities row-specific absolute screen-direction nudges. */
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip{
  top:10px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip{
  top:18px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  top:6px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip{
  top:14px !important;
  left:3px !important;
  right:3px !important;
  height:25px !important;
  justify-content:center !important;
}

/* Jail square: larger icon and JAIL label instead of VISITING. */
.jail-visiting-clean{
  display:grid;
  grid-template-rows:28px auto;
  justify-items:center;
  align-items:center;
  gap:3px;
  width:64px;
}
.jail-bars-clean-svg{
  width:42px;
  height:28px;
  overflow:visible;
}
.visiting-clean-word{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.8px;
  color:#0f172a;
  line-height:1;
}

/* Go To Jail: more breathing room between the text and badge, and centered cleanly. */
.go-to-jail-clean{
  display:grid;
  grid-template-rows:auto 40px auto;
  justify-items:center;
  align-items:center;
  gap:4px;
  width:64px;
  margin:0 auto;
}
.go-to-clean-word,
.jail-clean-word{
  font-size:10px;
  font-weight:1000;
  line-height:1;
  letter-spacing:1px;
  color:#0f172a;
}
.police-badge-clean-svg{
  width:40px;
  height:40px;
  overflow:visible;
}

/* Keep the custom corner icon compositions centered inside the square. */
#board .tile.corner .corner-space-icon .jail-visiting-clean,
#board .tile.corner .corner-space-icon .go-to-jail-clean{
  margin:0 auto !important;
}


/* v117-from-v34: stronger side-column house nudges and larger top-anchored property text */

/*
  Side columns on both boards need a stronger visible horizontal movement on the
  screen. Because the side faces are rotated, reducing the build-strip top value
  shifts the rendered house strip horizontally on screen.
  - right column: moves left on screen
  - left column: moves right on screen
*/
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  top:1px !important;
}
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip{
  top:1px !important;
}

/*
  Make property names a bit larger on both boards. If names wrap, they should
  wrap downward from the top of the text block instead of being vertically
  re-justified.
*/
#board .tile:not(.corner) .tile-content > .name,
#board .tile.flag-tile:not(.corner) .tile-content > .name,
#board .tile:not(.flag-tile):not(.corner) .tile-content > .name{
  display:block !important;
  align-items:unset !important;
  justify-content:unset !important;
  align-content:flex-start !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  font-size:9.4px !important;
  line-height:1.02 !important;
  letter-spacing:-.02em !important;
  padding:0 1px !important;
}
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  font-size:9.2px !important;
}
#board .tile.flag-tile.side-top:not(.corner) .tile-content > .name,
#board .tile.flag-tile.side-bottom:not(.corner) .tile-content > .name,
#board .tile.flag-tile.side-left:not(.corner) .tile-content > .name,
#board .tile.flag-tile.side-right:not(.corner) .tile-content > .name{
  font-size:9.15px !important;
}


/* v118-from-v34: corner icon spacing polish, Vacation corner refresh, right-side token parking, and tighter trade cash controls */

/* Give all special corner icons a cleaner even margin inside the square. */
#board .tile.corner .corner-space-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:3px auto 4px !important;
  padding:6px 7px !important;
  min-width:58px !important;
  min-height:56px !important;
  max-width:calc(100% - 12px) !important;
  box-sizing:border-box !important;
}

/* GO icon: keep centered with more breathing room all around. */
.go-corner-clean{
  display:grid;
  place-items:center;
  width:100%;
}
.go-word-arrow-svg{
  width:44px !important;
  height:38px !important;
  overflow:visible;
}
.go-word-arrow-svg .go-word{
  font:900 20px/1 Arial, sans-serif !important;
}

/* Better Jail icon with cleaner spacing between icon and label. */
.jail-house-clean{
  display:grid;
  grid-template-rows:36px auto;
  justify-items:center;
  align-items:center;
  gap:6px;
  width:100%;
}
.jail-house-svg{
  width:42px;
  height:36px;
  overflow:visible;
}
.jail-house-svg .jail-roof{
  fill:none;
  stroke:#475569;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.jail-house-svg .jail-body{
  fill:#e2e8f0;
  stroke:#334155;
  stroke-width:3;
}
.jail-house-svg .jail-door{
  fill:#cbd5e1;
  stroke:#334155;
  stroke-width:2.6;
}
.jail-house-svg .jail-door-bars,
.jail-house-svg .jail-step{
  fill:none;
  stroke:#0f172a;
  stroke-width:2.8;
  stroke-linecap:round;
}
.jail-house-svg .jail-knob{
  fill:#0f172a;
}
.jail-house-word{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.9px;
  line-height:1;
  color:#0f172a;
}

/* Go To Jail icon: add even margins and more space around the badge. */
.go-to-jail-clean{
  display:grid;
  grid-template-rows:auto 36px auto;
  justify-items:center;
  align-items:center;
  gap:6px !important;
  width:100%;
  margin:0 auto;
  padding:1px 0;
  box-sizing:border-box;
}
.go-to-clean-word,
.jail-clean-word{
  font-size:10px;
  font-weight:1000;
  line-height:1;
  letter-spacing:1px;
}
.police-badge-clean-svg{
  width:34px !important;
  height:34px !important;
  overflow:visible;
}

/* Vacation corner: larger beach icon, word in the middle area, pot stays at the bottom. */
.vacation-corner-clean{
  display:grid;
  grid-template-rows:36px auto;
  justify-items:center;
  align-items:center;
  gap:5px;
  width:100%;
}
.vacation-corner-svg{
  width:46px;
  height:38px;
  overflow:visible;
}
.vacation-corner-svg .vacation-sun{
  fill:#facc15;
  stroke:#ca8a04;
  stroke-width:2;
}
.vacation-corner-svg .vacation-umbrella{
  fill:#38bdf8;
  stroke:#0f766e;
  stroke-width:2.5;
  stroke-linejoin:round;
}
.vacation-corner-svg .vacation-pole,
.vacation-corner-svg .vacation-base{
  fill:none;
  stroke:#92400e;
  stroke-width:2.7;
  stroke-linecap:round;
}
.vacation-corner-svg .vacation-wave{
  fill:none;
  stroke:#0ea5e9;
  stroke-width:2.6;
  stroke-linecap:round;
}
.vacation-corner-word{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.6px;
  line-height:1;
  color:#0f172a;
}
#board .tile .vacation-pot-badge,
#board .tile > .tile-content > .vacation-pot-badge,
#board .tile.corner .vacation-pot-badge,
#board .tile.corner > .tile-content > .vacation-pot-badge{
  bottom:6px !important;
  min-width:74px !important;
  padding:3px 8px !important;
}

/* Right-side spaces: park tokens at the bottom-right instead of the top-left. */
#board .tile.side-right .tokens{
  left:auto !important;
  right:2px !important;
  top:auto !important;
  bottom:2px !important;
  transform:none !important;
}

/* Trade popup: slightly smaller free-form cash input and a slightly shorter slider. */
.side-deal-panel .cash-control-row{
  grid-template-columns:1fr 46px !important;
  gap:3px !important;
}
.side-deal-panel .cash-control-row .cash-slider{
  width:93% !important;
  justify-self:start !important;
  height:17px !important;
  min-height:17px !important;
}
.side-deal-panel .cash-control-row .cash-number{
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  padding:2px 3px !important;
}


/* v120-from-v34: corner spacing refinements, GO name cleanup, deeper bottom-right token parking, and green Vacation pot bubble */

/* Right-side parked tokens should sit even farther to the bottom-right. */
#board .tile.side-right .tokens{
  left:auto !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;
  transform:none !important;
}

/* Hide the GO corner tile name so "Start" does not appear under the GO icon. */
#board .tile.corner.corner-no-name .tile-content > .name{
  display:none !important;
}

/* GO icon: enlarge slightly and keep it centered cleanly inside the corner badge. */
.go-corner-clean{
  display:grid;
  place-items:center;
  width:100%;
  min-height:46px;
}
.go-word-arrow-svg{
  width:52px !important;
  height:46px !important;
  overflow:visible;
}
.go-word-arrow-svg .go-word{
  font:900 23px/1 Arial, sans-serif !important;
}

/* Jail: add noticeably larger margin around the icon + text composition. */
#board .tile.corner .corner-space-icon .jail-house-clean{
  width:100%;
  padding:4px 6px 6px !important;
  box-sizing:border-box;
}
.jail-house-clean{
  display:grid;
  grid-template-rows:34px auto;
  justify-items:center;
  align-items:center;
  gap:8px;
  width:100%;
}
.jail-house-svg{
  width:38px;
  height:34px;
  overflow:visible;
}

/* Go To Jail: larger internal margin so the text is fully encompassed by the white badge. */
#board .tile.corner .corner-space-icon .go-to-jail-clean{
  width:100%;
  padding:4px 6px 6px !important;
  box-sizing:border-box;
}
.go-to-jail-clean{
  display:grid;
  grid-template-rows:auto 34px auto;
  justify-items:center;
  align-items:center;
  gap:8px !important;
  width:100%;
  margin:0 auto;
  padding:4px 0 2px;
  box-sizing:border-box;
}
.go-to-clean-word,
.jail-clean-word{
  font-size:10px;
  font-weight:1000;
  line-height:1;
  letter-spacing:.9px;
}
.police-badge-clean-svg{
  width:32px !important;
  height:32px !important;
}

/* Vacation: shift icon/text upward a bit and lower the pot bubble. */
.vacation-corner-clean{
  display:grid;
  grid-template-rows:36px auto;
  justify-items:center;
  align-items:center;
  gap:5px;
  width:100%;
  transform:translateY(-4px);
}
#board .tile .vacation-pot-badge,
#board .tile > .tile-content > .vacation-pot-badge,
#board .tile.corner .vacation-pot-badge,
#board .tile.corner > .tile-content > .vacation-pot-badge{
  bottom:2px !important;
  min-width:76px !important;
  padding:3px 8px !important;
}
#board .tile .vacation-pot-badge.vacation-pot-has-money,
#board .tile > .tile-content > .vacation-pot-badge.vacation-pot-has-money,
#board .tile.corner .vacation-pot-badge.vacation-pot-has-money,
#board .tile.corner > .tile-content > .vacation-pot-badge.vacation-pot-has-money{
  background:rgba(134, 239, 172, .95) !important;
  border:1px solid rgba(22, 101, 52, .45) !important;
  color:#14532d !important;
}
#board .tile .vacation-pot-badge.vacation-pot-has-money span,
#board .tile > .tile-content > .vacation-pot-badge.vacation-pot-has-money span,
#board .tile.corner .vacation-pot-badge.vacation-pot-has-money span,
#board .tile.corner > .tile-content > .vacation-pot-badge.vacation-pot-has-money span{
  color:#14532d !important;
}


/* v121-from-v34: park right-side tokens tight to the bottom-right corner of the space */
#board .tile.side-right .tokens{
  left:auto !important;
  right:-4px !important;
  top:auto !important;
  bottom:-4px !important;
  transform:none !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}


/* v122-from-v34: move right-side parked tokens even closer to the bottom-right corner */
#board .tile.side-right .tokens{
  width:36px !important;
  height:36px !important;
  left:auto !important;
  right:-10px !important;
  top:auto !important;
  bottom:-10px !important;
  transform:none !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}


/* v124-from-v34: pull right-side parked tokens back slightly from v122 while keeping them closer than v121 */
#board .tile.side-right .tokens{
  width:42px !important;
  height:38px !important;
  left:auto !important;
  right:-6px !important;
  top:auto !important;
  bottom:-6px !important;
  transform:none !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}


/* v124-from-v34: pull right-side parked tokens back a little more from v124 */
#board .tile.side-right .tokens{
  width:43px !important;
  height:39px !important;
  left:auto !important;
  right:-5px !important;
  top:auto !important;
  bottom:-5px !important;
  transform:none !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}


/* v125-from-v34: pull right-side parked tokens inward slightly so they only slightly overlap the amount box */
#board .tile.side-right .tokens{
  width:44px !important;
  height:40px !important;
  left:auto !important;
  right:-3px !important;
  top:auto !important;
  bottom:-3px !important;
  transform:none !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}


/* v127-from-v34: airline/tax icons, condensed property details, trade-side tokens, bankruptcy emphasis, and jail-card bars */
.airline-plane-icon,
.luxury-tax-icon,
.customs-duty-icon{
  display:inline-grid;
  place-items:center;
  line-height:1;
}
.airline-plane-icon svg,
.luxury-tax-icon svg,
.customs-duty-icon svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.airline-plane-icon{ color:#0f172a; }
.airline-plane-icon .plane-body{ fill:#dbeafe; stroke:#1e3a8a; stroke-width:3; stroke-linejoin:round; }
.airline-plane-icon .plane-window{ fill:none; stroke:#0ea5e9; stroke-width:3; stroke-linecap:round; }
.luxury-tax-icon .luxury-bag{ fill:#7c2d12; stroke:#fbbf24; stroke-width:3; }
.luxury-tax-icon .luxury-handle{ fill:none; stroke:#fbbf24; stroke-width:4; stroke-linecap:round; }
.luxury-tax-icon .luxury-monogram{ fill:#fde68a; font:900 16px/1 Georgia, serif; letter-spacing:-1px; }
.customs-duty-icon .customs-booth{ fill:#dbeafe; stroke:#1e3a8a; stroke-width:3; }
.customs-duty-icon .customs-roof{ fill:#facc15; stroke:#92400e; stroke-width:3; stroke-linejoin:round; }
.customs-duty-icon .customs-package{ fill:#fbbf24; stroke:#92400e; stroke-width:2; }
.customs-duty-icon .customs-stamp{ fill:none; stroke:#0f172a; stroke-width:2.4; stroke-linecap:round; }
.customs-duty-icon .customs-word{ fill:#0f172a; font:900 9px/1 Arial, sans-serif; letter-spacing:.7px; }
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.airline-plane-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  position:absolute !important;
  left:50% !important;
  top:13px !important;
  transform:translateX(-50%) !important;
  width:38px !important;
  height:30px !important;
  margin:0 !important;
  padding:3px 5px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(15,23,42,.16) !important;
  z-index:17 !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)) !important;
}
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.airline-plane-icon){
  width:42px !important;
  height:28px !important;
}
.board-space-icon{ width:100%; height:100%; }
.pc-space-icon.detail-airline-icon,
.pc-space-icon.detail-tax-icon{
  width:24px !important;
  height:22px !important;
  font-size:0 !important;
}

/* Condense property details and lift it higher so the board edge/property spaces stay visible. */
#manageModal.tile-detail-mode{
  place-items:start center !important;
  padding-top:42px !important;
  background:rgba(2,6,23,.42) !important;
  backdrop-filter:blur(6px) !important;
}
#manageModal.tile-detail-mode .manage-pop{
  top:0 !important;
  width:min(430px, calc(100vw - 24px)) !important;
  max-height:calc(100vh - 84px) !important;
  overflow:auto !important;
  padding:5px !important;
}
#manageModal.tile-detail-mode .property-detail-layout{
  grid-template-columns:1fr !important;
  gap:5px !important;
}
#manageModal.tile-detail-mode .property-detail-right{
  grid-template-columns:1fr 1fr !important;
  align-items:start !important;
}
#manageModal.tile-detail-mode .build-level-row{
  grid-column:1 / -1 !important;
}
#manageModal.tile-detail-mode .mortgage-action-group{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}
#manageModal.tile-detail-mode .pc-header h2{
  font-size:14px !important;
}
#manageModal.tile-detail-mode .pc-body{
  padding:5px !important;
  gap:4px !important;
}

/* Trade popup: show each player's actual color/token on their side. */
.trade-column-heading{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  line-height:1.05 !important;
}
.trade-side-token{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border:2px solid #0f172a !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 2px 5px rgba(0,0,0,.28) !important;
}
.trade-side-token .animal-mask{
  width:15px !important;
  height:17px !important;
  background:#fff !important;
}

/* Bankruptcy is no longer subtle in the player list. */
.player.player-summary.bankrupt{
  position:relative !important;
  opacity:1 !important;
  border:2px solid rgba(239,68,68,.85) !important;
  background:linear-gradient(135deg,rgba(127,29,29,.88),rgba(15,23,42,.78)) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 12px 26px rgba(0,0,0,.25) !important;
}
.bankrupt-stamp{
  position:absolute;
  top:7px;
  right:8px;
  padding:3px 8px;
  border-radius:999px;
  background:#ef4444;
  color:white;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  z-index:2;
}
.player.player-summary.bankrupt .player-summary-name span,
.player.player-summary.bankrupt .money{
  color:#fecaca !important;
}

/* Player-list Get Out of Jail cards now use prison bars instead of a red ticket. */
.jail-card-bars-icon{
  display:inline-grid !important;
  place-items:center !important;
  width:22px !important;
  height:18px !important;
  vertical-align:middle !important;
}
.jail-card-bars-icon svg{ width:22px; height:18px; }
.jail-card-bars-icon .jail-card-frame{ fill:#e5e7eb; stroke:#334155; stroke-width:2; }
.jail-card-bars-icon .jail-card-bars{ fill:none; stroke:#0f172a; stroke-width:2.2; stroke-linecap:round; }
.jail-card-chip{
  background:rgba(226,232,240,.16) !important;
  border:1px solid rgba(226,232,240,.28) !important;
}


/* v127-from-v34: larger world-cities tax icons with percent indicator, and narrower non-blurred property popup */
.luxury-tax-icon .tax-percent-badge,
.customs-duty-icon .tax-percent-badge{
  fill:#14532d;
  stroke:#dcfce7;
  stroke-width:2.4;
}
.luxury-tax-icon .tax-percent-text,
.customs-duty-icon .tax-percent-text{
  fill:#f0fdf4;
  font:1000 12px/1 Arial, sans-serif;
  letter-spacing:-.2px;
}
.luxury-tax-icon .luxury-monogram{
  font:900 17px/1 Georgia, serif;
}
.customs-duty-icon .customs-word{
  font:900 9px/1 Arial, sans-serif;
}
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  top:10px !important;
  width:48px !important;
  height:36px !important;
  padding:4px 6px !important;
  border-radius:11px !important;
}
.pc-space-icon.detail-tax-icon{
  width:34px !important;
  height:30px !important;
}

/* Condense the tile detail popup further and remove background blur so play remains easy to watch. */
#manageModal.tile-detail-mode{
  place-items:start center !important;
  padding-top:34px !important;
  background:rgba(2,6,23,.18) !important;
  backdrop-filter:none !important;
}
#manageModal.tile-detail-mode .manage-pop{
  width:min(392px, calc(100vw - 24px)) !important;
  max-height:calc(100vh - 68px) !important;
  overflow:auto !important;
  padding:4px !important;
  box-shadow:0 22px 48px rgba(0,0,0,.38) !important;
}
#manageModal.tile-detail-mode .property-card{
  margin-top:8px !important;
}
#manageModal.tile-detail-mode .pc-header{
  padding:10px !important;
}
#manageModal.tile-detail-mode .pc-header h2{
  font-size:13.5px !important;
}
#manageModal.tile-detail-mode .pc-body{
  padding:4px !important;
  gap:4px !important;
}


/* v128-from-v34: larger unboxed world-cities icons, property auction UI, and hammer win animation */
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.airline-plane-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  position:absolute !important;
  left:50% !important;
  top:5px !important;
  transform:translateX(-50%) !important;
  width:54px !important;
  height:42px !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:17 !important;
}
#board .tile:has(.airline-plane-icon) > .tile-content > .name,
#board .tile:has(.luxury-tax-icon) > .tile-content > .name,
#board .tile:has(.customs-duty-icon) > .tile-content > .name{
  top:58% !important;
  height:calc(42% - 16px) !important;
}
.airline-plane-icon .plane-body{ fill:#dbeafe; stroke:#0f172a; stroke-width:2.3; stroke-linejoin:round; }
.airline-plane-icon .plane-wing{ fill:#93c5fd; stroke:#1d4ed8; stroke-width:2; stroke-linejoin:round; }
.airline-plane-icon .plane-tail{ fill:#60a5fa; stroke:#1e3a8a; stroke-width:2; stroke-linejoin:round; }
.airline-plane-icon .plane-window{ fill:none; stroke:#0f172a; stroke-width:2; stroke-linecap:round; }
.airline-plane-icon.board-space-icon,
.luxury-tax-icon.board-space-icon,
.customs-duty-icon.board-space-icon{ width:100%; height:100%; }
.luxury-tax-icon .tax-percent-badge,
.customs-duty-icon .tax-percent-badge{ fill:#15803d; }
.pc-space-icon.detail-airline-icon,
.pc-space-icon.detail-tax-icon{ width:36px !important; height:32px !important; }

.auction-modal{ position:fixed; inset:0; z-index:48; display:grid; place-items:center; background:rgba(2,6,23,.36); }
.auction-modal.hidden{ display:none !important; }
.auction-pop{ width:min(520px, calc(100vw - 24px)); max-height:calc(100vh - 36px); overflow:auto; padding:20px; border-radius:24px; background:linear-gradient(180deg,#fff,#dbeafe); color:#0f172a; box-shadow:0 28px 80px rgba(0,0,0,.4); position:relative; }
.auction-kicker{ text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:1000; color:#1d4ed8; margin-bottom:4px; }
.auction-pop h2{ margin:0 0 8px; font-size:28px; }
.auction-summary,.auction-lead,.auction-footnote{ font-size:14px; }
.auction-lead{ margin:8px 0 12px; }
.auction-participants{ display:grid; gap:8px; margin:14px 0; }
.auction-player{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.82); border:1px solid rgba(15,23,42,.1); }
.auction-player.leading{ outline:2px solid rgba(22,163,74,.55); }
.auction-player.passed{ opacity:.58; }
.auction-player-chip{ width:34px; height:34px; min-width:34px; border-radius:999px; display:grid; place-items:center; color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.2); border:2px solid rgba(15,23,42,.7); }
.auction-player-meta{ display:grid; gap:2px; }
.auction-player-meta span{ font-size:12px; color:#475569; }
.auction-actions{ display:grid; grid-template-columns:minmax(0,1fr) repeat(4, auto); gap:8px; align-items:center; }
.auction-actions input{ background:#fff; color:#0f172a; border:1px solid rgba(15,23,42,.2); padding:10px 12px; border-radius:14px; }
.auction-actions button{ white-space:nowrap; }

.auction-hammer-fx{ position:fixed; inset:0; z-index:70; pointer-events:none; display:grid; place-items:start center; padding-top:80px; }
.auction-hammer-fx .hammer-head{ font-size:84px; line-height:1; transform:translateY(-140px) rotate(-18deg); transition:transform .35s ease; filter:drop-shadow(0 10px 8px rgba(0,0,0,.28)); }
.auction-hammer-fx .hammer-banner{ margin-top:10px; background:rgba(15,23,42,.92); color:#f8fafc; padding:12px 18px; border-radius:999px; font-weight:900; letter-spacing:-.01em; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.auction-hammer-fx.drop .hammer-head{ transform:translateY(0) rotate(0deg); }
.auction-hammer-fx.drop .hammer-banner{ animation:auction-banner-pop .45s ease; }
@keyframes auction-banner-pop{ 0%{ transform:scale(.92); opacity:.3; } 100%{ transform:scale(1); opacity:1; } }


/* v129-from-v34: stronger placement for world-cities luxury/customs/airline icons and live auction timer UI */
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon),
#board .tile:not(.corner) > .tile-content > .space-icon.corner-space-icon:has(.airline-plane-icon){
  top:1px !important;
  width:58px !important;
  height:46px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
#board .tile:has(.luxury-tax-icon) > .tile-content > .name,
#board .tile:has(.customs-duty-icon) > .tile-content > .name,
#board .tile:has(.airline-plane-icon) > .tile-content > .name{
  top:63% !important;
  height:calc(37% - 8px) !important;
  padding:0 1px !important;
}
#board .tile .space-icon:has(.luxury-tax-icon) svg,
#board .tile .space-icon:has(.customs-duty-icon) svg,
#board .tile .space-icon:has(.airline-plane-icon) svg{
  width:100% !important;
  height:100% !important;
}
.auction-timer-wrap{ margin:10px 0 12px; }
.auction-timer-label{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:900; color:#1e293b; margin-bottom:6px; }
.auction-timer-track{ width:100%; height:12px; border-radius:999px; background:rgba(15,23,42,.12); overflow:hidden; box-shadow:inset 0 1px 3px rgba(15,23,42,.2); }
.auction-timer-bar{ width:100%; height:100%; border-radius:999px; background:linear-gradient(90deg,#22c55e,#84cc16); transition:width .08s linear, background .15s ease; }
.auction-timer-bar.danger{ background:linear-gradient(90deg,#f59e0b,#ef4444); }
.auction-lead-stack{ display:grid; gap:4px; }


/* v130-from-v34: keep the property detail popup off the playable board area */
#manageModal.tile-detail-mode{
  place-items:start end !important;
  align-items:start !important;
  justify-items:end !important;
  padding:88px 14px 14px !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}
#manageModal.tile-detail-mode .manage-pop{
  pointer-events:auto !important;
  width:min(340px, calc(100vw - 20px)) !important;
  max-height:calc(100vh - 106px) !important;
  margin:0 !important;
  overflow:auto !important;
  box-shadow:0 20px 44px rgba(0,0,0,.40) !important;
}
#manageModal.tile-detail-mode .property-card{
  margin-top:0 !important;
}
#manageModal.tile-detail-mode .modal-x{
  top:8px !important;
  right:8px !important;
}
@media (max-width: 1220px){
  #manageModal.tile-detail-mode{
    place-items:start end !important;
    padding-top:82px !important;
    padding-right:10px !important;
  }
  #manageModal.tile-detail-mode .manage-pop{
    width:min(320px, calc(100vw - 18px)) !important;
    max-height:calc(100vh - 96px) !important;
  }
}


/* v131-from-v34: move trade cash entry below the slider and center it within each column */
.side-deal-panel .cash-control-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:4px !important;
  align-items:center !important;
  justify-items:center !important;
}
.side-deal-panel .cash-control-row .cash-slider{
  width:92% !important;
  justify-self:center !important;
  height:16px !important;
  min-height:16px !important;
}
.side-deal-panel .cash-control-row .cash-number{
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  justify-self:center !important;
  text-align:center !important;
  padding:3px 4px !important;
  min-height:20px !important;
  font-size:10px !important;
}


/* v132-from-v34: better plane icon, stronger world-cities placement, bot-aware auction finish FX, and property details over the dice */
.airline-plane-icon .plane-fuselage{ fill:#e2e8f0; stroke:#0f172a; stroke-width:2.8; stroke-linejoin:round; }
.airline-plane-icon .plane-wing-top,
.airline-plane-icon .plane-wing-bottom{ fill:#93c5fd; stroke:#1d4ed8; stroke-width:2.4; stroke-linejoin:round; }
.airline-plane-icon .plane-tail-fin,
.airline-plane-icon .plane-tail-wing{ fill:#60a5fa; stroke:#1e3a8a; stroke-width:2.2; stroke-linejoin:round; }
.airline-plane-icon .plane-window-line{ fill:none; stroke:#0f172a; stroke-width:2.2; stroke-linecap:round; }
.airline-plane-icon .plane-window-dot{ fill:#0f172a; }

#board .tile.tile-airline-space > .tile-content > .space-icon.corner-space-icon,
#board .tile.tile-luxury-tax > .tile-content > .space-icon.corner-space-icon,
#board .tile.tile-customs-duty > .tile-content > .space-icon.corner-space-icon{
  top:-2px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:60px !important;
  height:48px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
#board .tile.tile-airline-space > .tile-content > .name,
#board .tile.tile-luxury-tax > .tile-content > .name,
#board .tile.tile-customs-duty > .tile-content > .name{
  top:67% !important;
  height:calc(33% - 4px) !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
}
#board .tile.tile-airline-space .space-icon svg,
#board .tile.tile-luxury-tax .space-icon svg,
#board .tile.tile-customs-duty .space-icon svg{
  width:100% !important;
  height:100% !important;
}

#manageModal.tile-detail-mode{
  place-items:center center !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}
#manageModal.tile-detail-mode .manage-pop{
  position:fixed !important;
  left:50% !important;
  top:60% !important;
  transform:translate(-50%, -50%) !important;
  width:min(340px, calc(100vw - 24px)) !important;
  max-height:min(46vh, 430px) !important;
  margin:0 !important;
  overflow:auto !important;
  pointer-events:auto !important;
  box-shadow:0 22px 48px rgba(0,0,0,.42) !important;
}
@media (max-width: 900px){
  #manageModal.tile-detail-mode .manage-pop{
    top:62% !important;
    width:min(330px, calc(100vw - 18px)) !important;
    max-height:min(48vh, 420px) !important;
  }
}

.auction-hammer-fx{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  display:grid;
  place-items:center;
}
.auction-hammer-fx .hammer-stage{
  width:min(500px, calc(100vw - 28px));
  display:grid;
  justify-items:center;
  gap:10px;
  transform:translateY(-10px);
}
.auction-hammer-fx .hammer-head{
  width:160px;
  height:136px;
  transform:translateY(-150px) rotate(-12deg);
  transition:transform .34s cubic-bezier(.2,.9,.2,1);
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.32));
}
.auction-hammer-fx .hammer-head svg{ width:100%; height:100%; }
.auction-hammer-fx .gavel-svg{ fill:#8b5e34; stroke:#422006; stroke-width:2.5; }
.auction-hammer-fx .hammer-banner{
  background:rgba(15,23,42,.94);
  color:#f8fafc;
  padding:12px 18px;
  border-radius:20px;
  font-weight:1000;
  letter-spacing:-.01em;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  text-align:center;
}
.auction-hammer-fx.drop .hammer-head{ transform:translateY(0) rotate(0deg); }
.auction-hammer-fx.drop .hammer-banner{ animation:auction-banner-pop .45s ease; }


/* v133-from-v34: use provided airplane image, lift side-row airline icons higher, and remove auction hammer effect */
.airline-plane-icon,
.airline-plane-icon.board-space-icon,
.airline-plane-icon.detail-airline-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.airline-plane-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
#board .tile.tile-airline-space > .tile-content > .space-icon.corner-space-icon{
  top:-6px !important;
  width:64px !important;
  height:50px !important;
}
#board .tile.tile-airline-space.side-left > .tile-content > .space-icon.corner-space-icon,
#board .tile.tile-airline-space.side-right > .tile-content > .space-icon.corner-space-icon{
  top:-12px !important;
  width:68px !important;
  height:52px !important;
}
#board .tile.tile-airline-space > .tile-content > .name{
  top:69% !important;
  height:calc(31% - 2px) !important;
}
#board .tile.tile-airline-space.side-left > .tile-content > .name,
#board .tile.tile-airline-space.side-right > .tile-content > .name{
  top:72% !important;
  height:calc(28% - 2px) !important;
}
.pc-space-icon.detail-airline-icon{
  width:42px !important;
  height:34px !important;
}
.auction-hammer-fx,
.auction-hammer-fx *{
  display:none !important;
}


/* v134-from-v34: refine airline/tax icon-text positioning and reorganize auction bid controls */
#board .tile.tile-airline-space.side-left > .tile-content > .name,
#board .tile.tile-airline-space.side-right > .tile-content > .name{
  top:69% !important;
  height:calc(31% - 2px) !important;
}
#board .tile.tile-customs-duty > .tile-content > .name{
  top:72% !important;
  height:calc(28% - 2px) !important;
}
#board .tile.tile-luxury-tax > .tile-content > .space-icon.corner-space-icon{
  top:-8px !important;
  width:64px !important;
  height:50px !important;
}
#board .tile.tile-luxury-tax > .tile-content > .name{
  top:72% !important;
  height:calc(28% - 2px) !important;
}

.auction-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  align-items:stretch !important;
}
.auction-bump-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}
.auction-custom-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
}
.auction-actions input{
  width:100%;
  min-width:0;
}
.auction-actions button{
  white-space:nowrap;
}
@media (max-width: 640px){
  .auction-bump-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .auction-custom-row{
    grid-template-columns:1fr;
  }
}


/* v135-from-v34: correct side-row airline text centering, stronger tax text/image offsets, and instant auction increment bids */
/* Side-row airlines: keep the raised image, but return the text closer to the normal side-row lane so it is not pushed outward. */
#board .tile.tile-airline-space.side-left > .tile-content > .name,
#board .tile.tile-airline-space.side-right > .tile-content > .name{
  top:62% !important;
  height:calc(38% - 8px) !important;
  left:3px !important;
  right:3px !important;
  padding:0 1px !important;
  transform:none !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Customs Duty: move the label substantially lower. */
#board .tile.tile-customs-duty > .tile-content > .name{
  top:78% !important;
  height:calc(22% - 1px) !important;
  left:2px !important;
  right:2px !important;
  align-items:flex-start !important;
}
#board .tile.tile-customs-duty > .tile-content > .space-icon.corner-space-icon{
  top:-4px !important;
  width:62px !important;
  height:48px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Luxury Tax: move image higher and label substantially lower, with no box around the icon. */
#board .tile.tile-luxury-tax > .tile-content > .space-icon.corner-space-icon{
  top:-14px !important;
  width:70px !important;
  height:54px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
#board .tile.tile-luxury-tax > .tile-content > .name{
  top:78% !important;
  height:calc(22% - 1px) !important;
  left:2px !important;
  right:2px !important;
  align-items:flex-start !important;
}

.auction-bump-row{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
}
.auction-bump-row button{
  font-weight:1000 !important;
}
.auction-custom-row input::placeholder{
  color:#64748b;
}


/* v136-from-v34: final targeted positioning for side-row airline labels and World Cities tax spacing */
#board .tile.tile-airline-space.side-left > .tile-content > .name,
#board .tile.tile-airline-space.side-right > .tile-content > .name{
  /*
    Do not use the lowered airline text position on side rows.
    On rotated side rows that pushes text sideways; restore the normal centered side-row text lane.
  */
  top:50% !important;
  bottom:auto !important;
  height:calc(50% - 24px) !important;
  left:3px !important;
  right:3px !important;
  transform:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Keep only the side-row airline image raised. */
#board .tile.tile-airline-space.side-left > .tile-content > .space-icon.corner-space-icon,
#board .tile.tile-airline-space.side-right > .tile-content > .space-icon.corner-space-icon{
  top:-14px !important;
  width:68px !important;
  height:52px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Customs Duty: push the label much farther down and remove any icon-container box. */
#board .tile.tile-customs-duty > .tile-content > .space-icon.corner-space-icon{
  top:-2px !important;
  width:62px !important;
  height:48px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}
#board .tile.tile-customs-duty > .tile-content > .name{
  top:79% !important;
  bottom:auto !important;
  height:calc(21% - 1px) !important;
  left:3px !important;
  right:3px !important;
  transform:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.94 !important;
}

/* Luxury Tax: icon higher, label lower, and no white/box container around the image. */
#board .tile.tile-luxury-tax > .tile-content > .space-icon.corner-space-icon{
  top:-16px !important;
  width:70px !important;
  height:54px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}
#board .tile.tile-luxury-tax > .tile-content > .name{
  top:79% !important;
  bottom:auto !important;
  height:calc(21% - 1px) !important;
  left:3px !important;
  right:3px !important;
  transform:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.94 !important;
}

/* Extra fallback in case older tile classing is missing on a loaded board. */
#board .tile:has(.customs-duty-icon) > .tile-content > .name,
#board .tile:has(.luxury-tax-icon) > .tile-content > .name{
  top:79% !important;
  height:calc(21% - 1px) !important;
}
#board .tile:has(.luxury-tax-icon) > .tile-content > .space-icon.corner-space-icon{
  top:-16px !important;
  width:70px !important;
  height:54px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}


/* v137-from-v34: direct index-based tax square positioning.
   These target World Cities Customs Duty at index 4 and Luxury Tax at index 38 directly. */

#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  position:absolute !important;
  top:-4px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:64px !important;
  height:48px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:19 !important;
}
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .name,
#board .tile[data-tile-index="4"] > .tile-content > .name{
  position:absolute !important;
  top:76% !important;
  bottom:auto !important;
  left:3px !important;
  right:3px !important;
  height:calc(24% - 2px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:.95 !important;
  font-size:8.4px !important;
  transform:none !important;
  z-index:20 !important;
}

#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon){
  position:absolute !important;
  top:-18px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:72px !important;
  height:56px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:19 !important;
}
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon) + .name,
#board .tile[data-tile-index="38"] > .tile-content > .name{
  position:absolute !important;
  top:76% !important;
  bottom:auto !important;
  left:3px !important;
  right:3px !important;
  height:calc(24% - 2px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:.95 !important;
  font-size:8.4px !important;
  transform:none !important;
  z-index:20 !important;
}

#board .tile[data-tile-index="4"] .customs-duty-icon,
#board .tile[data-tile-index="4"] .customs-duty-icon svg,
#board .tile[data-tile-index="38"] .luxury-tax-icon,
#board .tile[data-tile-index="38"] .luxury-tax-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}


/* v138-from-v34: final tune for tax squares 4 and 38 */
/* Index 4 (Customs Duty): bring icon down a bit, enlarge font, and encourage a two-line wrap. */
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  top:1px !important;
  width:62px !important;
  height:46px !important;
}
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .name,
#board .tile[data-tile-index="4"] > .tile-content > .name{
  top:74% !important;
  left:8px !important;
  right:8px !important;
  height:calc(26% - 1px) !important;
  font-size:9.4px !important;
  line-height:.92 !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}

/* Index 38 (Luxury Tax): larger font, keep icon high, and keep the label lower. */
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon){
  top:-18px !important;
  width:72px !important;
  height:56px !important;
}
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon) + .name,
#board .tile[data-tile-index="38"] > .tile-content > .name{
  top:74% !important;
  left:6px !important;
  right:6px !important;
  height:calc(26% - 1px) !important;
  font-size:9.4px !important;
  line-height:.92 !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}


/* v139-from-v34: non-classic property detail popup uses a larger left-side icon instead of stacking above text */
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon{
  text-align:left !important;
  padding:10px 12px !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-header-row{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-header-icon-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:46px !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-side-space-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:34px !important;
  font-size:30px !important;
  line-height:1 !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-side-space-icon.image-icon img{
  width:42px !important;
  height:32px !important;
  object-fit:cover !important;
  border-radius:5px !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-header-main{
  min-width:0 !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-header-main h2{
  display:block !important;
  margin:0 !important;
  font-size:15px !important;
  line-height:1.05 !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-header-main > div{
  margin-top:2px !important;
  font-size:9px !important;
  line-height:1.1 !important;
  opacity:.98 !important;
}


/* v140-from-v34: final index-4/index-38 tax tuning - lower Customs icon, larger centered two-line labels */
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  top:8px !important;
  width:62px !important;
  height:46px !important;
}
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .name,
#board .tile[data-tile-index="4"] > .tile-content > .name,
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon) + .name,
#board .tile[data-tile-index="38"] > .tile-content > .name{
  top:73% !important;
  bottom:auto !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:calc(27% - 1px) !important;
  margin:0 !important;
  padding:0 2px !important;
  display:block !important;
  text-align:center !important;
  font-size:10.7px !important;
  line-height:.92 !important;
  font-weight:1000 !important;
  letter-spacing:-.02em !important;
  transform:none !important;
}
#board .tile[data-tile-index="4"] .tax-name-two-line,
#board .tile[data-tile-index="38"] .tax-name-two-line{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  line-height:.92 !important;
}
#board .tile[data-tile-index="4"] .tax-name-two-line > span,
#board .tile[data-tile-index="38"] .tax-name-two-line > span{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon){
  top:-18px !important;
  width:72px !important;
  height:56px !important;
}


/* v141-from-v34: leave-during-turn notice and Classic tax icons on indices 4/38 */
.player.left-player .player-summary-name span{
  color:#fecaca !important;
  font-weight:1000 !important;
}
.player.left-player.bankrupt .bankrupt-stamp::after{
  content:" · LEFT";
}
.income-tax-icon,
.income-tax-icon svg{
  display:block;
  width:100%;
  height:100%;
}
.income-tax-icon .income-tax-receipt{
  fill:#ecfeff;
  stroke:#0e7490;
  stroke-width:3;
}
.income-tax-icon .income-tax-edge{
  fill:none;
  stroke:#155e75;
  stroke-width:3;
  stroke-linecap:round;
}
.income-tax-icon .income-tax-dollar{
  fill:#065f46;
  font-size:27px;
  font-weight:1000;
  font-family:Arial, sans-serif;
}

/* Apply the same board-positioning treatment used for World Cities tax squares to Classic tax squares. */
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon),
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  top:4px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:62px !important;
  height:46px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:19 !important;
}
#board .tile[data-tile-index="4"] .income-tax-icon,
#board .tile[data-tile-index="4"] .income-tax-icon svg{
  width:100% !important;
  height:100% !important;
}
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon) + .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .name{
  position:absolute !important;
  top:74% !important;
  bottom:auto !important;
  left:8px !important;
  right:8px !important;
  height:calc(26% - 1px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-height:.92 !important;
  font-size:10.3px !important;
  transform:none !important;
  z-index:20 !important;
}
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .space-icon.corner-space-icon,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon){
  position:absolute !important;
  top:-18px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:72px !important;
  height:56px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:19 !important;
}
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon) + .name{
  position:absolute !important;
  top:74% !important;
  bottom:auto !important;
  left:6px !important;
  right:6px !important;
  height:calc(26% - 1px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-height:.92 !important;
  font-size:10.3px !important;
  transform:none !important;
  z-index:20 !important;
}


/* v142-from-v34: classic railroads, free parking, and classic luxury-tax ring */
.railroad-icon,
.railroad-icon.board-space-icon,
.railroad-icon.detail-railroad-icon,
.monopoly-ring-icon,
.monopoly-ring-icon.board-space-icon,
.monopoly-ring-icon.detail-tax-icon,
.free-parking-clean{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.railroad-icon svg,
.monopoly-ring-icon svg,
.free-parking-svg{
  width:100%;
  height:100%;
  display:block;
}
.railroad-icon .rr-body{ fill:#334155; stroke:#0f172a; stroke-width:2.4; }
.railroad-icon .rr-cab{ fill:#e2e8f0; stroke:#0f172a; stroke-width:2; }
.railroad-icon .rr-front{ fill:#475569; stroke:#0f172a; stroke-width:2.2; }
.railroad-icon .rr-window{ fill:#93c5fd; }
.railroad-icon .rr-wheel{ fill:#111827; stroke:#d1d5db; stroke-width:1.8; }
.railroad-icon .rr-rail{ fill:none; stroke:#78350f; stroke-width:2.2; stroke-linecap:round; }
.railroad-icon .rr-rail-2{ stroke:#92400e; }
.railroad-icon .rr-smoke{ fill:none; stroke:#94a3b8; stroke-width:2.4; stroke-linecap:round; }
.monopoly-ring-icon .ring-band{ fill:#eab308; stroke:#a16207; stroke-width:2.4; }
.monopoly-ring-icon .ring-band-shine{ fill:none; stroke:#fef08a; stroke-width:1.8; stroke-linecap:round; }
.monopoly-ring-icon .ring-gem{ fill:#93c5fd; stroke:#1d4ed8; stroke-width:2; }
.monopoly-ring-icon .ring-gem-facet{ fill:none; stroke:#dbeafe; stroke-width:1.5; stroke-linecap:round; }
.free-parking-clean{ width:100%; height:100%; flex-direction:column; gap:2px; }
.free-parking-svg{ width:82%; height:72%; }
.free-parking-svg .parking-sign{ fill:#2563eb; stroke:#eff6ff; stroke-width:3; }
.free-parking-svg .parking-post{ fill:none; stroke:#475569; stroke-width:4; stroke-linecap:round; }
.free-parking-svg .parking-p{ fill:#ffffff; font:1000 25px/1 Arial, sans-serif; }
.free-parking-svg .parking-arrow{ fill:none; stroke:#ef4444; stroke-width:3; stroke-linecap:round; }
.free-parking-svg .parking-arrow-head{ fill:none; stroke:#ef4444; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.free-parking-word{ font:1000 10px/1 Arial, sans-serif; color:#1e3a8a; text-align:center; letter-spacing:.02em; }
#board .tile.corner .free-parking-clean,
#board .tile.corner-no-name .free-parking-clean{ width:100%; height:100%; }
#board .tile[data-tile-index="20"] .free-parking-clean{ transform:translateY(-1px); }


/* v143-from-v34: classic tax/rail polish, unclosable action popup, and delayed winner reveal */
.monopoly-ring-icon .tax-percent-badge{
  fill:#dc2626 !important;
  stroke:#ffffff !important;
  stroke-width:1.6 !important;
}
.monopoly-ring-icon .tax-percent-text,
.monopoly-ring-icon svg .tax-percent-text{
  fill:#ffffff !important;
  color:#ffffff !important;
  stroke:none !important;
  font:1000 12px/1 Arial, sans-serif !important;
}

/* Classic railroad spaces use their own small centered icon instead of the larger airline layout. */
.railroad-icon,
.railroad-icon.board-space-icon,
.railroad-icon.detail-railroad-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.railroad-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.railroad-icon .rr-track-left,
.railroad-icon .rr-track-right{
  fill:none !important;
  stroke:#111827 !important;
  stroke-width:4.2 !important;
  stroke-linecap:round !important;
}
.railroad-icon .rr-tie{
  fill:none !important;
  stroke:#78350f !important;
  stroke-width:3.4 !important;
  stroke-linecap:round !important;
}

/* Board placement for Classic railroad icon/text. */
#board .tile.tile-railroad-space > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  top:6px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:38px !important;
  height:30px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  z-index:18 !important;
}
#board .tile.tile-railroad-space.side-left > .tile-content > .space-icon.corner-space-icon,
#board .tile.tile-railroad-space.side-right > .tile-content > .space-icon.corner-space-icon{
  top:7px !important;
  width:36px !important;
  height:28px !important;
}
#board .tile.tile-railroad-space > .tile-content > .name{
  top:50% !important;
  bottom:auto !important;
  left:4px !important;
  right:4px !important;
  height:calc(50% - 6px) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.95 !important;
  font-size:8.6px !important;
  transform:none !important;
}
#board .tile.tile-railroad-space.side-left > .tile-content > .name,
#board .tile.tile-railroad-space.side-right > .tile-content > .name{
  top:49% !important;
  height:calc(51% - 6px) !important;
}

/* Property Details popup size for the simpler railroad icon. */
#manageModal.tile-detail-mode .pc-space-icon.detail-railroad-icon{
  width:28px !important;
  height:22px !important;
  min-width:28px !important;
  flex:0 0 auto !important;
}
#manageModal.tile-detail-mode .pc-header.nonclassic-side-icon .pc-side-space-icon.detail-railroad-icon{
  width:34px !important;
  height:26px !important;
  min-width:34px !important;
}

/* Keep the turn action panel visible and unclosable on the player's turn. */
#closeActionsBtn{
  display:none !important;
}
.turn-action-modal .modal-x,
#turnActionModal .modal-x{
  display:none !important;
}
#turnActionModal:not(.hidden){
  pointer-events:auto !important;
}
.panel-bankrupt-btn{
  min-width:104px !important;
  white-space:normal !important;
  line-height:1.05 !important;
  padding-left:6px !important;
  padding-right:6px !important;
}


/* v144-from-v34: mandatory-auction and game-over action polish */
.game-over-actions{
  display:flex !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.luxury-tax-icon .tax-percent-text,
.monopoly-ring-icon .tax-percent-text{
  fill:#ffffff !important;
  color:#ffffff !important;
  stroke:none !important;
  font:1000 12px/1 Arial, sans-serif !important;
}


/* v145-from-v34: show actual tax badge values: Luxury Tax dollar amount, Income/Customs percentage value */
.income-tax-icon .tax-value-badge,
.customs-duty-icon .tax-value-badge{
  fill:#15803d !important;
  stroke:#ffffff !important;
  stroke-width:1.35 !important;
}
.luxury-tax-icon .tax-value-badge,
.monopoly-ring-icon .tax-value-badge{
  fill:#dc2626 !important;
  stroke:#ffffff !important;
  stroke-width:1.35 !important;
}
.income-tax-icon .tax-value-text,
.customs-duty-icon .tax-value-text,
.luxury-tax-icon .tax-value-text,
.monopoly-ring-icon .tax-value-text,
.income-tax-icon svg .tax-value-text,
.customs-duty-icon svg .tax-value-text,
.luxury-tax-icon svg .tax-value-text,
.monopoly-ring-icon svg .tax-value-text{
  fill:#ffffff !important;
  color:#ffffff !important;
  stroke:none !important;
  font:1000 8.3px/1 Arial, sans-serif !important;
  dominant-baseline:auto !important;
}
#board .tile[data-tile-index="4"] .tax-value-text,
#board .tile[data-tile-index="38"] .tax-value-text{
  font-size:8.2px !important;
}
#manageModal.tile-detail-mode .tax-value-text{
  font-size:8.5px !important;
}


/* v146-from-v34: tax values belong in the tile body, not on top of the icon */
.tax-percent-badge,
.tax-value-badge,
.tax-percent-text,
.tax-value-text{
  display:none !important;
}
#board .tile.tile-type-tax > .tile-content > .tax-space-value{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:58% !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:32px !important;
  height:14px !important;
  padding:0 4px !important;
  border-radius:999px !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.22) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.12) !important;
  color:#0f172a !important;
  font:1000 10px/1 Arial, sans-serif !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  z-index:21 !important;
  pointer-events:none !important;
}
#board .tile[data-tile-index="4"] > .tile-content > .tax-space-value,
#board .tile[data-tile-index="38"] > .tile-content > .tax-space-value{
  top:60% !important;
}
#board .tile[data-tile-index="38"] > .tile-content > .tax-space-value{
  min-width:38px !important;
}
/* Keep tax names below the new body value line. */
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon) + .tax-space-value + .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .tax-space-value + .name{
  top:76% !important;
  height:calc(24% - 1px) !important;
}
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon) + .tax-space-value + .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.monopoly-ring-icon) + .tax-space-value + .name{
  top:76% !important;
  height:calc(24% - 1px) !important;
}


/* v148-from-v34: move tax value text upward, remove pill styling, and enlarge it */
#board .tile.tile-type-tax > .tile-content > .tax-space-value{
  top:52% !important;
  transform:translate(-50%,-50%) !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#0f172a !important;
  font:1000 13px/1 Arial, sans-serif !important;
  letter-spacing:-.03em !important;
}
#board .tile[data-tile-index="4"] > .tile-content > .tax-space-value,
#board .tile[data-tile-index="38"] > .tile-content > .tax-space-value{
  top:52% !important;
}
#board .tile[data-tile-index="38"] > .tile-content > .tax-space-value{
  min-width:0 !important;
}


/* v149-from-v34: smaller tax icons and raised tax descriptions so they do not clip */
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon),
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon){
  top:4px !important;
  width:48px !important;
  height:36px !important;
}
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon),
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.monopoly-ring-icon){
  top:-10px !important;
  width:56px !important;
  height:42px !important;
}
#board .tile[data-tile-index="4"] .income-tax-icon,
#board .tile[data-tile-index="4"] .income-tax-icon svg,
#board .tile[data-tile-index="4"] .customs-duty-icon,
#board .tile[data-tile-index="4"] .customs-duty-icon svg{
  width:48px !important;
  height:36px !important;
}
#board .tile[data-tile-index="38"] .luxury-tax-icon,
#board .tile[data-tile-index="38"] .luxury-tax-icon svg,
#board .tile[data-tile-index="38"] .monopoly-ring-icon,
#board .tile[data-tile-index="38"] .monopoly-ring-icon svg{
  width:56px !important;
  height:42px !important;
}
#board .tile[data-tile-index="4"] > .tile-content > .tax-space-value,
#board .tile[data-tile-index="38"] > .tile-content > .tax-space-value{
  top:50% !important;
  font-size:13.2px !important;
}
#board .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon) + .tax-space-value + .name,
#board .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .tax-space-value + .name,
#board .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.luxury-tax-icon) + .tax-space-value + .name,
#board .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon:has(.monopoly-ring-icon) + .tax-space-value + .name{
  top:70% !important;
  height:calc(30% - 1px) !important;
  align-items:flex-start !important;
  padding-top:0 !important;
  overflow:visible !important;
}
#board .tile[data-tile-index="4"] .tax-name-two-line,
#board .tile[data-tile-index="38"] .tax-name-two-line{
  line-height:.9 !important;
  transform:translateY(-1px) !important;
}


/* v150-from-v34: keep Income Tax wrapped as two lines */
#board .tile[data-tile-index="4"] > .tile-content > .name .tax-name-two-line{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}


/* v152-from-v34: revert Windows-specific geometry changes; only widen side columns slightly. */
#board.board,
.board#board{
  grid-template-columns:1.32fr repeat(9, .89fr) 1.32fr !important;
  grid-template-rows:1.34fr repeat(9, .86fr) 1.34fr !important;
}
#board .tile.side-left:not(.corner),
#board .tile.side-right:not(.corner){
  overflow:hidden !important;
}
#board .tile.side-left > .tile-content,
#board .tile.side-right > .tile-content{
  overflow:hidden !important;
}
#board .tile.side-left > .tile-content > .bar,
#board .tile.side-right > .tile-content > .bar,
#board .tile.side-left > .tile-content > .tile-header-bar,
#board .tile.side-right > .tile-content > .tile-header-bar{
  max-width:calc(100% - 6px) !important;
}
#board .tile.side-left > .tile-content > .price,
#board .tile.side-right > .tile-content > .price,
#board .tile.side-left > .tile-content > .space-price,
#board .tile.side-right > .tile-content > .space-price{
  max-width:calc(100% - 8px) !important;
}


/* Idle unstarted room keep-alive prompt */
.keepalive-modal{
  position:fixed;
  inset:0;
  z-index:92;
  display:grid;
  place-items:center;
  background:rgba(2,6,23,.45);
}
.keepalive-modal.hidden{ display:none !important; }
.keepalive-pop{
  width:min(440px, calc(100vw - 28px));
  border-radius:24px;
  padding:20px;
  background:linear-gradient(180deg,#ffffff,#dbeafe);
  color:#0f172a;
  box-shadow:0 28px 80px rgba(0,0,0,.42);
}
.keepalive-pop h2{
  margin:0 0 8px;
  font-size:26px;
  letter-spacing:-.03em;
}
.keepalive-pop p{
  margin:0 0 14px;
  color:#334155;
  font-weight:700;
  line-height:1.35;
}
.keepalive-timer{ margin:12px 0 16px; }
.keepalive-timer-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  font-size:13px;
  font-weight:1000;
}
.keepalive-timer-track{
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(15,23,42,.12);
  overflow:hidden;
}
.keepalive-timer-bar{
  width:100%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#84cc16);
  transition:width .2s linear, background .2s ease;
}
.keepalive-timer-bar.closing{
  background:linear-gradient(90deg,#f59e0b,#ef4444);
}
.keepalive-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* v153-from-v34: Windows Edge/Chrome side-row correction.
   Keep the v151 auto-closure logic, but stop clipping rotated side-row internals.
   The side headers and price/owner lanes stay inside the property space instead of being clipped by the rotated content box. */
#board.board,
.board#board{
  grid-template-columns:1.42fr repeat(9, .865fr) 1.42fr !important;
  grid-template-rows:1.34fr repeat(9, .86fr) 1.34fr !important;
}

/* The rotated tile content needs to expose its internal children; the tile itself remains clipped. */
#board .tile.side-left:not(.corner),
#board .tile.side-right:not(.corner){
  overflow:hidden !important;
}
#board .tile.side-left:not(.corner) > .tile-content,
#board .tile.side-right:not(.corner) > .tile-content{
  overflow:visible !important;
}

/* Bring side headers back inside the side property face. */
#board .tile.side-left:not(.corner) > .tile-content > .bar,
#board .tile.side-left:not(.corner) > .tile-content > .color-bar,
#board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
#board .tile.side-right:not(.corner) > .tile-content > .bar,
#board .tile.side-right:not(.corner) > .tile-content > .color-bar,
#board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
  position:absolute !important;
  top:3px !important;
  left:5px !important;
  right:5px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:11px !important;
  min-height:11px !important;
  max-height:13px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:visible !important;
  z-index:52 !important;
  box-sizing:border-box !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  height:18px !important;
  min-height:18px !important;
  max-height:20px !important;
  top:2px !important;
  left:6px !important;
  right:6px !important;
  transform:none !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image img,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image img,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only span,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only span{
  max-width:100% !important;
  max-height:18px !important;
  object-fit:contain !important;
  transform:none !important;
}

/* Price/owner lane: remove the old downward translation that Windows clipped. */
#board .tile.side-left:not(.corner) .tile-content > .space-price,
#board .tile.side-right:not(.corner) .tile-content > .space-price,
#board .tile.side-left:not(.corner) .tile-content > .price,
#board .tile.side-right:not(.corner) .tile-content > .price,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  left:50% !important;
  right:auto !important;
  bottom:3px !important;
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:16px !important;
  min-height:16px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  z-index:30 !important;
}

/* Leave a clean middle band for names now that headers/prices are anchored. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  top:50% !important;
  height:calc(50% - 22px) !important;
  left:3px !important;
  right:3px !important;
  padding-top:0 !important;
  padding-bottom:1px !important;
  z-index:18 !important;
}

/* v154-from-v34: Windows does not render country-flag emoji; use inline SVG flags instead. */
#board .tile > .tile-content > .tile-header-bar.flag-only .world-flag-wrap{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  height:26px !important;
  transform:translateY(-9px) !important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important;
  background:transparent !important;
  text-shadow:none !important;
  line-height:1 !important;
}
#board .tile.side-left > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.side-right > .tile-content > .tile-header-bar.flag-only .world-flag-wrap{
  transform:translateY(-8px) !important;
}
.world-flag-svg{
  display:block !important;
  width:38px !important;
  height:26px !important;
  border-radius:4px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.28) !important;
  background:#ffffff !important;
  flex:0 0 auto !important;
}
#board .tile > .tile-content > .tile-header-bar.flag-only .world-flag-wrap .world-flag-svg{
  width:38px !important;
  height:26px !important;
}
.property-set-chip.flag-chip{
  width:30px !important;
  height:20px !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:4px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.property-set-chip.flag-chip .chip-flag-svg{
  width:30px !important;
  height:20px !important;
  display:block !important;
}
.world-detail-flag-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.world-detail-flag-svg{
  width:42px !important;
  height:28px !important;
  border-radius:5px !important;
  box-shadow:0 1px 4px rgba(15,23,42,.30) !important;
}

/* v155-from-v34: side-row header/flag and amount/owner lanes farther apart on all Chromium platforms. */
#board .tile.side-left:not(.corner) > .tile-content > .bar,
#board .tile.side-left:not(.corner) > .tile-content > .color-bar,
#board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
#board .tile.side-right:not(.corner) > .tile-content > .bar,
#board .tile.side-right:not(.corner) > .tile-content > .color-bar,
#board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
  top:0 !important;
  left:3px !important;
  right:3px !important;
  height:12px !important;
  min-height:12px !important;
  max-height:14px !important;
  margin:0 !important;
  z-index:58 !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  top:0 !important;
  left:4px !important;
  right:4px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:22px !important;
}
#board .tile.side-left:not(.corner) .tile-content > .space-price,
#board .tile.side-right:not(.corner) .tile-content > .space-price,
#board .tile.side-left:not(.corner) .tile-content > .price,
#board .tile.side-right:not(.corner) .tile-content > .price,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  bottom:0 !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  transform:translateX(-50%) !important;
  z-index:42 !important;
}
#board .tile.side-left > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.side-right > .tile-content > .tile-header-bar.flag-only .world-flag-wrap{
  transform:translateY(-1px) !important;
}
#board .tile.side-left > .tile-content > .tile-header-bar.flag-only .world-flag-svg,
#board .tile.side-right > .tile-content > .tile-header-bar.flag-only .world-flag-svg{
  width:36px !important;
  height:24px !important;
}
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  top:47% !important;
  height:calc(53% - 24px) !important;
}


/* v156-from-v34: make the left/right row faces genuinely wider in their rotated axis.
   The v155 change moved the header/price to top/bottom, but the rotated face itself
   was still only the short side-row height, so the visual separation barely changed.
   This expands only the internal rotated side face; top/bottom row geometry is unchanged. */
#board .tile.side-left:not(.corner) > .tile-content,
#board .tile.side-right:not(.corner) > .tile-content{
  top:-21% !important;
  bottom:auto !important;
  height:142% !important;
  min-height:142% !important;
  max-height:142% !important;
  left:0 !important;
  right:0 !important;
  overflow:visible !important;
  transform-origin:center center !important;
}

/* Push the side-row header/flag to one end of the expanded face. */
#board .tile.side-left:not(.corner) > .tile-content > .bar,
#board .tile.side-left:not(.corner) > .tile-content > .color-bar,
#board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
#board .tile.side-right:not(.corner) > .tile-content > .bar,
#board .tile.side-right:not(.corner) > .tile-content > .color-bar,
#board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
  top:1px !important;
  bottom:auto !important;
  left:4px !important;
  right:4px !important;
  height:12px !important;
  min-height:12px !important;
  max-height:14px !important;
  margin:0 !important;
  transform:none !important;
  z-index:70 !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  top:0 !important;
  height:22px !important;
  min-height:22px !important;
  max-height:24px !important;
  left:4px !important;
  right:4px !important;
}

/* Push the price/ownership lane to the opposite end of the expanded side face. */
#board .tile.side-left:not(.corner) .tile-content > .space-price,
#board .tile.side-right:not(.corner) .tile-content > .space-price,
#board .tile.side-left:not(.corner) .tile-content > .price,
#board .tile.side-right:not(.corner) .tile-content > .price,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  bottom:1px !important;
  top:auto !important;
  left:50% !important;
  right:auto !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  z-index:66 !important;
}

/* Keep side text in the middle band after widening the rotated face. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  top:42% !important;
  height:calc(58% - 24px) !important;
  max-height:none !important;
  left:3px !important;
  right:3px !important;
  font-size:8.4px !important;
  line-height:.98 !important;
  z-index:30 !important;
}

/* Keep SVG flags centered in the side header lane. */
#board .tile.side-left > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.side-right > .tile-content > .tile-header-bar.flag-only .world-flag-wrap{
  transform:translateY(0) !important;
}
#board .tile.side-left > .tile-content > .tile-header-bar.flag-only .world-flag-svg,
#board .tile.side-right > .tile-content > .tile-header-bar.flag-only .world-flag-svg{
  width:36px !important;
  height:24px !important;
}


/* v157-from-v34: side-row spacing fine-tune.
   Move the amount/ownership lane a little farther out, and move the header/flag roughly twice as far.
   This applies to both Classic and World Cities, on all platforms. */
#board .tile.side-left:not(.corner) > .tile-content,
#board .tile.side-right:not(.corner) > .tile-content{
  top:-25% !important;
  height:150% !important;
  min-height:150% !important;
  max-height:150% !important;
  overflow:visible !important;
}

/* Header/flag: stronger outward move. */
#board .tile.side-left:not(.corner) > .tile-content > .bar,
#board .tile.side-left:not(.corner) > .tile-content > .color-bar,
#board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
#board .tile.side-right:not(.corner) > .tile-content > .bar,
#board .tile.side-right:not(.corner) > .tile-content > .color-bar,
#board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
  top:-7px !important;
  bottom:auto !important;
  left:4px !important;
  right:4px !important;
  transform:none !important;
  z-index:82 !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  top:-10px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:26px !important;
  left:4px !important;
  right:4px !important;
  z-index:84 !important;
}

/* Amount/ownership: smaller outward move than the header/flag. */
#board .tile.side-left:not(.corner) .tile-content > .space-price,
#board .tile.side-right:not(.corner) .tile-content > .space-price,
#board .tile.side-left:not(.corner) .tile-content > .price,
#board .tile.side-right:not(.corner) .tile-content > .price,
#board .tile.side-left:not(.corner) .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) .tile-content > .owner-strip.relative-owner-strip{
  bottom:-4px !important;
  top:auto !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  z-index:78 !important;
}

/* Preserve a clear middle band for side-row names after the wider spread. */
#board .tile.side-left:not(.corner) .tile-content > .name,
#board .tile.side-right:not(.corner) .tile-content > .name{
  top:40% !important;
  height:calc(60% - 25px) !important;
  max-height:none !important;
}


/* v158-from-v34: pull side-row header/flag back slightly from v157 while leaving amount/ownership spacing unchanged. */
#board .tile.side-left:not(.corner) > .tile-content > .bar,
#board .tile.side-left:not(.corner) > .tile-content > .color-bar,
#board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
#board .tile.side-right:not(.corner) > .tile-content > .bar,
#board .tile.side-right:not(.corner) > .tile-content > .color-bar,
#board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
  top:-4px !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  top:-6px !important;
}


/* v159-from-v34: non-Classic side-row SVG flags were still sitting too low.
   Raise only World Cities flag artwork on the left/right rows; Classic headers remain unchanged. */
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-wrap,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-wrap{
  transform:translateY(-5px) !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-svg,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-svg,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-svg,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-svg{
  width:36px !important;
  height:24px !important;
}


/* v160-from-v34: World Cities side-row flags need to sit visibly on top of the side space.
   Raise them by the same amount again, and allow the flag artwork to overlay the tile edge
   instead of being clipped/hidden under the square. Classic board is unchanged. */
#board .tile.flag-tile.side-left:not(.corner),
#board .tile.flag-tile.side-right:not(.corner){
  overflow:visible !important;
  z-index:24 !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content{
  overflow:visible !important;
  z-index:25 !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  overflow:visible !important;
  z-index:180 !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-wrap,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-wrap,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-wrap{
  position:relative !important;
  transform:translateY(-10px) !important;
  z-index:220 !important;
  overflow:visible !important;
  pointer-events:none !important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important;
}
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-svg,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.flag-only .world-flag-svg,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-svg,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image .world-flag-svg{
  position:relative !important;
  z-index:230 !important;
  width:36px !important;
  height:24px !important;
  overflow:visible !important;
}


/* v162-from-v34: Rumble Avenue name and World Cities square 4 text centering. */
#board.board-world-cities .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.customs-duty-icon) + .tax-space-value + .name{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  top:68% !important;
  height:31% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 3px 2px !important;
  margin:0 !important;
  transform:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#board.board-world-cities .tile[data-tile-index="4"] .tax-name-two-line{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  line-height:.94 !important;
  transform:none !important;
  letter-spacing:-.02em !important;
}
#board.board-world-cities .tile[data-tile-index="4"] .tax-name-two-line > span{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
#board.board-world-cities .tile[data-tile-index="4"] > .tile-content > .tax-space-value{
  left:50% !important;
  right:auto !important;
  text-align:center !important;
  justify-content:center !important;
}


/* v166-from-v34: subtle bottom-left version label and no token confirmation preview */
#buildBadge,
.lobby-version{
  position:fixed !important;
  left:10px !important;
  bottom:8px !important;
  z-index:99999 !important;
  max-width:none !important;
  width:auto !important;
  padding:3px 6px !important;
  border-radius:6px !important;
  background:rgba(15,23,42,.46) !important;
  color:rgba(226,232,240,.72) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  box-shadow:none !important;
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  pointer-events:none !important;
}
.token-preview,
#tokenPreview{
  display:none !important;
}


/* v166-from-v34: keep one subtle build/version badge only.
   The lobby had its own version element plus the fixed buildBadge, which overlapped. */
.lobby-version{
  display:none !important;
}
#buildBadge{
  position:fixed !important;
  left:10px !important;
  bottom:8px !important;
  z-index:99999 !important;
}


/* v166-from-v34: audible keep-alive prompt plus playful self-destruct sequence */
.keepalive-modal.self-destructing{
  background:radial-gradient(circle at 50% 45%, rgba(248,113,113,.25), rgba(2,6,23,.72) 46%, rgba(2,6,23,.88));
}
.keepalive-modal.self-destructing .keepalive-pop{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#fff7ed,#fee2e2) !important;
  border:2px solid rgba(239,68,68,.55) !important;
  animation:selfDestructPulse .68s ease-in-out infinite alternate;
}
.keepalive-modal.self-destructing .keepalive-pop::before,
.keepalive-modal.self-destructing .keepalive-pop::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  opacity:0;
}
.keepalive-modal.exploding .keepalive-pop{
  animation:explosionShake .12s linear infinite !important;
  background:radial-gradient(circle at 52% 42%, #fff7ed 0 7%, #facc15 8% 19%, #fb923c 20% 35%, #ef4444 36% 56%, #7f1d1d 57% 100%) !important;
  color:#ffffff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  box-shadow:0 0 0 9999px rgba(2,6,23,.66), 0 0 70px rgba(248,113,113,.9) !important;
}
.keepalive-modal.exploding .keepalive-pop::before{
  left:50%;
  top:50%;
  width:42vmin;
  height:42vmin;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.95) 0 10%, rgba(250,204,21,.9) 11% 32%, rgba(249,115,22,.78) 33% 57%, rgba(239,68,68,.42) 58% 74%, transparent 75%);
  animation:explosionBloom 3s ease-out forwards;
  opacity:1;
  z-index:0;
}
.keepalive-modal.exploding .keepalive-pop::after{
  content:"💥";
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  font-size:96px;
  line-height:1;
  opacity:1;
  animation:explosionEmoji 3s ease-out forwards;
  z-index:1;
}
.keepalive-modal.exploding .keepalive-pop > *{
  position:relative;
  z-index:2;
}
.keepalive-modal.self-destructing .keepalive-timer-bar.closing{
  background:linear-gradient(90deg,#ef4444,#f97316,#facc15) !important;
}
.keepalive-modal.exploding .keepalive-timer-track{
  opacity:.78;
}
.keepalive-modal.exploding .keepalive-timer-bar.exploding{
  background:linear-gradient(90deg,#facc15,#ffffff,#f97316) !important;
}
@keyframes selfDestructPulse{
  from{ transform:scale(1); }
  to{ transform:scale(1.018); }
}
@keyframes explosionShake{
  0%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(4px,-3px) rotate(-1deg); }
  50%{ transform:translate(-3px,4px) rotate(1deg); }
  75%{ transform:translate(3px,3px) rotate(-.6deg); }
  100%{ transform:translate(-4px,-2px) rotate(.8deg); }
}
@keyframes explosionBloom{
  0%{ transform:translate(-50%,-50%) scale(.15); opacity:.95; }
  45%{ opacity:.9; }
  100%{ transform:translate(-50%,-50%) scale(2.35); opacity:0; }
}
@keyframes explosionEmoji{
  0%{ transform:translate(-50%,-50%) scale(.25) rotate(-18deg); opacity:0; }
  16%{ opacity:1; }
  52%{ transform:translate(-50%,-50%) scale(1.35) rotate(8deg); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(2.25) rotate(20deg); opacity:0; }
}

/* v168-from-v34: room pill now shows real server connectivity in the lobby. */
.room-pill.server-connected{
  background:rgba(22,163,74,.16) !important;
  border-color:rgba(74,222,128,.38) !important;
  color:#bbf7d0 !important;
  letter-spacing:.03em !important;
}
.room-pill.server-unavailable{
  background:rgba(185,28,28,.18) !important;
  border-color:rgba(248,113,113,.42) !important;
  color:#fecaca !important;
  letter-spacing:.03em !important;
}


/* v168-from-v34: host bot controls side-by-side and readable remove button */
#hostPanel .setup-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
}
#hostPanel .setup-start-btn{
  width:100% !important;
}
#hostPanel .bot-setup-buttons{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  align-items:stretch !important;
}
#hostPanel .bot-setup-buttons button{
  width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  padding-left:8px !important;
  padding-right:8px !important;
}
#hostPanel #removeBotBtn.bot-remove-btn{
  color:#f8fafc !important;
  background:linear-gradient(135deg, rgba(71,85,105,.95), rgba(30,41,59,.95)) !important;
  border:1px solid rgba(226,232,240,.32) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}
#hostPanel #removeBotBtn.bot-remove-btn:disabled{
  color:rgba(226,232,240,.56) !important;
  background:rgba(71,85,105,.34) !important;
  border-color:rgba(148,163,184,.2) !important;
}


/* v169-from-v34: side-row ownership banner alignment fix.
   Keep the owned-color banner in the exact same lane as the price/amount bubble on
   left/right properties. Earlier tuning left older transforms on the owner strip, so
   the banner could drift even when the price bubble looked centered. */
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:-4px !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  flex:0 0 17px !important;
  flex-basis:17px !important;
  align-self:auto !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  border-radius:8px !important;
  z-index:95 !important;
  box-sizing:border-box !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
  max-width:60px !important;
  line-height:1 !important;
}

/* Keep the unowned price bubble in the same measured lane for comparison/alignment. */
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:-4px !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  box-sizing:border-box !important;
  z-index:94 !important;
}

/* v170-from-v34: stronger side-row ownership/amount alignment.
   The ownership banner and unowned amount now use a stretched, measured strip inside
   the rotated side face instead of a fixed-width bubble. This keeps them aligned with
   the side-space body on both Classic and World Cities. */
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  position:absolute !important;
  left:7px !important;
  right:7px !important;
  top:auto !important;
  bottom:-3px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  transform:none !important;
  box-sizing:border-box !important;
  border-radius:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:hidden !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
  z-index:126 !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  z-index:125 !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
  max-width:100% !important;
  line-height:1 !important;
  text-align:center !important;
}

/* v171-from-v34: side-row amount/ownership strips were centered but too long.
   Shorten them inside the side spaces on both boards; this matters most on World Cities,
   where flag overlays intentionally allow overflow. */
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  left:18px !important;
  right:18px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  bottom:-2px !important;
  border-radius:7px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  transform:none !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}


/* v172-from-v34: reduce left/right side-row price and ownership strip length by another 10%. */
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  left:21px !important;
  right:21px !important;
  height:14px !important;
  min-height:14px !important;
  max-height:14px !important;
  border-radius:7px !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  font-size:8.5px !important;
  line-height:1 !important;
}


/* v173-from-v34: reduce left/right side-row price and ownership strip length by another 10%. */
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  left:24px !important;
  right:24px !important;
  height:13px !important;
  min-height:13px !important;
  max-height:13px !important;
  border-radius:6px !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  font-size:8.1px !important;
  line-height:1 !important;
}

/* v174-from-v34: side-row price/ownership strips another 10% shorter, 10% taller, with larger side amount text. */
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  left:27px !important;
  right:27px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  border-radius:7px !important;
  box-sizing:border-box !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .space-price,
#board .tile.side-right:not(.corner) > .tile-content > .space-price,
#board .tile.side-left:not(.corner) > .tile-content > .price,
#board .tile.side-right:not(.corner) > .tile-content > .price{
  font-size:9.5px !important;
  line-height:17px !important;
  padding:0 3px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
#board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
  font-size:9px !important;
  line-height:17px !important;
}

/* v175-from-v34: remove repeated set/verbiage line and fit property-detail popup actions without scroll */
#manageModal.tile-detail-mode .pc-owner-line,
.single-space-card .pc-owner-line{
  margin-top:2px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  opacity:.92 !important;
}
#manageModal.tile-detail-mode .pc-header{
  padding-top:8px !important;
  padding-bottom:8px !important;
}
#manageModal.tile-detail-mode .pc-header h2{
  font-size:18px !important;
  line-height:1.02 !important;
  margin:0 !important;
}
#manageModal.tile-detail-mode .pc-body{
  padding:8px !important;
  gap:6px !important;
}
#manageModal.tile-detail-mode .property-detail-layout{
  gap:6px !important;
}
#manageModal.tile-detail-mode .property-detail-left,
#manageModal.tile-detail-mode .property-detail-right{
  gap:4px !important;
}
#manageModal.tile-detail-mode .property-detail-stats{
  gap:3px !important;
}
#manageModal.tile-detail-mode .pc-stat{
  padding:5px 6px !important;
  font-size:11px !important;
  line-height:1.08 !important;
  border-radius:8px !important;
}
#manageModal.tile-detail-mode .rent-row{
  padding:4px 6px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  border-radius:8px !important;
}
#manageModal.tile-detail-mode .build-level-row{
  padding:4px 5px !important;
  min-height:0 !important;
  font-size:11px !important;
  line-height:1.05 !important;
}
#manageModal.tile-detail-mode .build-action-group,
#manageModal.tile-detail-mode .mortgage-action-group{
  gap:4px !important;
}
#manageModal.tile-detail-mode .build-action-group button,
#manageModal.tile-detail-mode .mortgage-action-group button,
.single-space-card .property-actions button{
  min-height:26px !important;
  padding:4px 7px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  border-radius:8px !important;
}
#manageModal.tile-detail-mode .mortgage-action-group{
  margin-top:6px !important;
  padding-top:6px !important;
}
#manageModal.tile-detail-mode .detail-build-icons svg,
#manageModal.tile-detail-mode .detail-house-icon{
  width:20px !important;
  height:18px !important;
}
#manageModal.tile-detail-mode .detail-hotel-icon{
  width:28px !important;
  height:20px !important;
}

/* v176-from-v34: tokens must always sit above landing-space price and ownership banners. */
#board .tile{
  isolation:isolate !important;
}
#board .tile > .tile-content{
  z-index:10 !important;
}
#board .tile > .tokens,
#board .tokens{
  z-index:5000 !important;
  overflow:visible !important;
}
#board .tile > .tokens .token,
#board .token{
  z-index:5001 !important;
  position:absolute !important;
}
#board .tile > .tokens .token.current-token,
#board .token.current-token{
  z-index:6000 !important;
}
#board .tile > .tile-content > .owner-strip.relative-owner-strip,
#board .tile > .tile-content > .space-price,
#board .tile > .tile-content > .price{
  z-index:20 !important;
}


/* v177-from-v34: final game-over modal and Go To Jail corner tuning */
#gameOverModal .modal-x,
#gameOverModal .game-over-x-hidden{
  display:none !important;
}

/* Space index 30: keep words outside the police-badge border, not riding over it. */
#board .tile[data-tile-index="30"] .go-to-jail-clean{
  display:grid !important;
  grid-template-rows:13px 32px 13px !important;
  gap:2px !important;
  align-items:center !important;
  justify-items:center !important;
  padding:0 !important;
  margin:0 auto !important;
  overflow:visible !important;
  transform:translateY(-1px) !important;
}
#board .tile[data-tile-index="30"] .police-badge-clean-svg{
  width:32px !important;
  height:32px !important;
  overflow:visible !important;
  grid-row:2 !important;
}
#board .tile[data-tile-index="30"] .go-to-clean-word{
  grid-row:1 !important;
  transform:translateY(-5px) !important;
  z-index:6 !important;
}
#board .tile[data-tile-index="30"] .jail-clean-word{
  grid-row:3 !important;
  transform:translateY(5px) !important;
  z-index:6 !important;
}

/* v178-from-v34: property detail action buttons on one equal row. */
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:6px !important;
  width:100% !important;
  margin:4px 0 0 !important;
  padding:0 !important;
}
#manageModal.tile-detail-mode .unified-property-actions button{
  width:100% !important;
  min-width:0 !important;
  min-height:26px !important;
  height:26px !important;
  padding:3px 4px !important;
  font-size:10.5px !important;
  line-height:1.02 !important;
  border-radius:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
}
#manageModal.tile-detail-mode .unified-property-actions button:only-child{
  grid-column:1 / -1 !important;
}

/* v178-from-v34: square 30 Go To Jail text and icon box. */
#board .tile[data-tile-index="30"] .go-to-jail-clean{
  display:grid !important;
  grid-template-rows:16px 25px 16px !important;
  gap:0 !important;
  align-items:center !important;
  justify-items:center !important;
  padding:0 !important;
  margin:0 auto !important;
  overflow:visible !important;
  transform:translateY(0) !important;
  line-height:1 !important;
}
#board .tile[data-tile-index="30"] .police-badge-clean-svg{
  width:25px !important;
  height:25px !important;
  grid-row:2 !important;
  overflow:visible !important;
}
#board .tile[data-tile-index="30"] .go-to-clean-word{
  grid-row:1 !important;
  transform:translateY(-8px) !important;
  line-height:1 !important;
  z-index:8 !important;
}
#board .tile[data-tile-index="30"] .jail-clean-word{
  grid-row:3 !important;
  transform:translateY(8px) !important;
  line-height:1 !important;
  z-index:8 !important;
}

/* v178-from-v34: Classic square 4 Income Tax text centered. */
#board.board-classic .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board.board-classic .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon) + .tax-space-value + .name,
#board.board-classic .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon:has(.income-tax-icon) + .name{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  top:68% !important;
  height:31% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 3px 2px !important;
  margin:0 !important;
  transform:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  line-height:.94 !important;
}
#board.board-classic .tile[data-tile-index="4"] .tax-name-two-line{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}
#board.board-classic .tile[data-tile-index="4"] .tax-name-two-line > span{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* v179-from-v34: force square 30 Go To Jail text positioning with absolute layout.
   Previous grid/transform rules were being neutralized by the corner icon layout. */
#board .tile[data-tile-index="30"] > .tile-content{
  overflow:visible !important;
}
#board .tile[data-tile-index="30"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:block !important;
  z-index:18 !important;
  overflow:visible !important;
}
#board .tile[data-tile-index="30"] .go-to-jail-clean{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:visible !important;
}
#board .tile[data-tile-index="30"] .police-badge-clean-svg{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:28px !important;
  height:28px !important;
  transform:translate(-50%, -50%) !important;
  grid-row:auto !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board .tile[data-tile-index="30"] .go-to-clean-word,
#board .tile[data-tile-index="30"] .jail-clean-word{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  display:block !important;
  text-align:center !important;
  font-size:10px !important;
  font-weight:1000 !important;
  letter-spacing:.9px !important;
  line-height:1 !important;
  transform:none !important;
  z-index:5 !important;
  color:#0f172a !important;
  grid-row:auto !important;
}
#board .tile[data-tile-index="30"] .go-to-clean-word{
  top:8px !important;
}
#board .tile[data-tile-index="30"] .jail-clean-word{
  bottom:8px !important;
}

/* v181-from-v34: restore the visible box around the Go To Jail icon while keeping the improved text placement. */
#board .tile[data-tile-index="30"] .police-badge-clean-svg{
  width:34px !important;
  height:34px !important;
  padding:3px !important;
  box-sizing:border-box !important;
  background:rgba(255,255,255,.96) !important;
  border:2px solid #0f172a !important;
  border-radius:9px !important;
  box-shadow:0 2px 4px rgba(15,23,42,.22) !important;
  overflow:visible !important;
}
#board .tile[data-tile-index="30"] .go-to-clean-word{
  top:6px !important;
}
#board .tile[data-tile-index="30"] .jail-clean-word{
  bottom:6px !important;
}

/* v182-from-v34: larger equal-width Property Details action buttons that fill the popup row. */
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:8px 0 0 !important;
  padding:0 2px !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button{
  width:100% !important;
  min-width:0 !important;
  min-height:38px !important;
  height:38px !important;
  padding:8px 10px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  border-radius:11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
}
#manageModal.tile-detail-mode .unified-property-actions button:only-child{
  grid-column:1 / -1 !important;
}
@media (max-width:760px){
  #manageModal.tile-detail-mode .unified-property-actions{
    gap:7px !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions button,
  #manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle,
  #manageModal.tile-detail-mode .unified-property-actions .build-button,
  #manageModal.tile-detail-mode .unified-property-actions .destroy-button{
    min-height:34px !important;
    height:34px !important;
    padding:6px 7px !important;
    font-size:11.5px !important;
  }
}


/* v183-from-v34: make Property Details action buttons wider, not taller. */
#manageModal.tile-detail-mode.manage-pop,
#manageModal.tile-detail-mode{
  width:min(860px, calc(100% - 28px)) !important;
}
#manageModal.tile-detail-mode .pc-body{
  padding-left:14px !important;
  padding-right:14px !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
  width:100% !important;
  padding:0 !important;
  margin:6px 0 0 !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button{
  width:100% !important;
  min-width:0 !important;
  min-height:30px !important;
  height:30px !important;
  padding:4px 18px !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:950 !important;
  border-radius:10px !important;
  white-space:nowrap !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
@media (max-width:760px){
  #manageModal.tile-detail-mode.manage-pop,
  #manageModal.tile-detail-mode{
    width:calc(100% - 18px) !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions{
    gap:5px !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions button,
  #manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle,
  #manageModal.tile-detail-mode .unified-property-actions .build-button,
  #manageModal.tile-detail-mode .unified-property-actions .destroy-button{
    height:28px !important;
    min-height:28px !important;
    padding:3px 8px !important;
    font-size:11px !important;
  }
}

/* v184-from-v34: allow the Property Details popup itself to be a bit taller. */
#manageModal.tile-detail-mode .manage-pop{
  max-height:94vh !important;
  height:auto !important;
}
@media (max-height:760px){
  #manageModal.tile-detail-mode .manage-pop{
    max-height:calc(100vh - 12px) !important;
  }
}

/* v185-from-v34: utility icons and non-clickable corner polish */
#board .tile.corner.tile-static{
  cursor:default !important;
}
.utility-icon,
.utility-icon.board-space-icon,
.utility-icon.detail-utility-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:inherit !important;
}
.utility-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.utility-icon .utility-disc{
  fill:#fef3c7 !important;
  stroke:#92400e !important;
  stroke-width:3 !important;
}
.utility-icon .power-bolt{
  fill:#facc15 !important;
  stroke:#78350f !important;
  stroke-width:2.2 !important;
  stroke-linejoin:round !important;
}
.utility-icon .water-drop{
  fill:#38bdf8 !important;
  stroke:#075985 !important;
  stroke-width:3 !important;
}
.utility-icon .water-shine,
.utility-icon .water-wave{
  fill:none !important;
  stroke:#e0f2fe !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
}
.utility-icon .rig-leg,
.utility-icon .rig-cross,
.utility-icon .rig-platform,
.utility-icon .rig-hook{
  fill:none !important;
  stroke:#1f2937 !important;
  stroke-width:4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.utility-icon .rig-cross,
.utility-icon .rig-hook{
  stroke-width:2.6 !important;
}
.utility-icon .rig-wave{
  fill:none !important;
  stroke:#0ea5e9 !important;
  stroke-width:3.4 !important;
  stroke-linecap:round !important;
}
.utility-icon .falls-cliff{
  fill:#d6d3d1 !important;
  stroke:#57534e !important;
  stroke-width:2.4 !important;
}
.utility-icon .falls-water{
  fill:#7dd3fc !important;
  stroke:#0284c7 !important;
  stroke-width:2.4 !important;
}
.utility-icon .falls-side,
.utility-icon .falls-splash{
  fill:none !important;
  stroke:#e0f2fe !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
}
#board .tile.tile-type-utility > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  top:15px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:34px !important;
  height:34px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:18 !important;
}
#board .tile.tile-type-utility.side-left > .tile-content > .space-icon.corner-space-icon,
#board .tile.tile-type-utility.side-right > .tile-content > .space-icon.corner-space-icon{
  top:11px !important;
  width:30px !important;
  height:30px !important;
}
#board .tile.tile-type-utility > .tile-content > .name{
  padding-top:28px !important;
}
#board .tile.tile-type-utility.side-left > .tile-content > .name,
#board .tile.tile-type-utility.side-right > .tile-content > .name{
  padding-top:24px !important;
}
#manageModal.tile-detail-mode .pc-space-icon.detail-utility-icon,
#manageModal.tile-detail-mode .pc-header .detail-utility-icon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  flex:0 0 auto !important;
}


/* v186-from-v34: full-width property action buttons and readable mortgaged banner text */
#manageModal.tile-detail-mode .manage-pop{
  width:min(520px, calc(100vw - 24px)) !important;
}
#manageModal.tile-detail-mode .property-detail-layout,
#manageModal.tile-detail-mode .property-detail-right{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .property-detail-right{
  display:grid !important;
  grid-template-columns:1fr !important;
  align-items:stretch !important;
}
#manageModal.tile-detail-mode .build-level-row,
#manageModal.tile-detail-mode .unified-property-actions{
  grid-column:1 / -1 !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:32px !important;
  min-height:32px !important;
  padding:4px 8px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:10px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
#manageModal.tile-detail-mode .unified-property-actions .unmortgage-state{
  font-size:11px !important;
  letter-spacing:-.03em !important;
}
@media (max-width:520px){
  #manageModal.tile-detail-mode .manage-pop{
    width:calc(100vw - 16px) !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions{
    gap:6px !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions button,
  #manageModal.tile-detail-mode .unified-property-actions .build-button,
  #manageModal.tile-detail-mode .unified-property-actions .destroy-button,
  #manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
    padding-left:4px !important;
    padding-right:4px !important;
    font-size:11px !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions .unmortgage-state{
    font-size:10px !important;
  }
}
#board .tile .tile-content > .owner-strip.relative-owner-strip span,
#board .tile.mortgaged .tile-content > .owner-strip.relative-owner-strip span{
  display:block !important;
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:0 2px !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font-size:clamp(6.2px, .48vw, 9px) !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  transform:none !important;
}
#board .tile.side-left .tile-content > .owner-strip.relative-owner-strip span,
#board .tile.side-right .tile-content > .owner-strip.relative-owner-strip span{
  font-size:clamp(6px, .44vw, 8px) !important;
  letter-spacing:-.07em !important;
}


/* v187-from-v34: make the Go To Jail icon badge match the GO corner badge style on both boards. */
#board .tile[data-tile-index="30"] > .tile-content > .space-icon.corner-space-icon{
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#board .tile[data-tile-index="30"] .police-badge-clean-svg{
  width:34px !important;
  height:34px !important;
  padding:3px 4px !important;
  box-sizing:border-box !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(15,23,42,.22) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board .tile[data-tile-index="30"] .go-to-clean-word{
  top:6px !important;
}
#board .tile[data-tile-index="30"] .jail-clean-word{
  bottom:6px !important;
}


/* v189-from-v34: restore a narrower Property Details popup while letting action buttons fill the available width */
#manageModal.tile-detail-mode .manage-pop{
  width:min(460px, calc(100vw - 24px)) !important;
  max-width:min(460px, calc(100vw - 24px)) !important;
}
#manageModal.tile-detail-mode .property-detail-layout,
#manageModal.tile-detail-mode .property-detail-right{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:100% !important;
  max-width:100% !important;
  gap:8px !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:32px !important;
  min-height:32px !important;
  padding:4px 6px !important;
  font-size:11.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
#manageModal.tile-detail-mode .unified-property-actions .unmortgage-state{
  font-size:10.5px !important;
  letter-spacing:-.04em !important;
}
@media (max-width:500px){
  #manageModal.tile-detail-mode .manage-pop{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
}

/* v189-from-v34: clearer waterfall icon for World Cities utility */
.utility-icon .falls-mountain{
  fill:#a8a29e !important;
  stroke:#57534e !important;
  stroke-width:1.8 !important;
  stroke-linejoin:round !important;
}
.utility-icon .falls-mountain-left{ fill:#78716c !important; }
.utility-icon .falls-mountain-right{ fill:#a8a29e !important; }
.utility-icon .falls-cliff-top{
  fill:#d6d3d1 !important;
  stroke:#57534e !important;
  stroke-width:2 !important;
}
.utility-icon .falls-main{
  fill:#38bdf8 !important;
  stroke:#0369a1 !important;
  stroke-width:2.2 !important;
}
.utility-icon .falls-stream{
  fill:none !important;
  stroke:#e0f2fe !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
}


/* v190-from-v34: restore the taller Property Details popup behavior; adjust width only. */
#manageModal.tile-detail-mode .manage-pop{
  width:min(500px, calc(100vw - 24px)) !important;
  max-width:min(500px, calc(100vw - 24px)) !important;
  max-height:94vh !important;
  height:auto !important;
}
@media (max-height:760px){
  #manageModal.tile-detail-mode .manage-pop{
    max-height:calc(100vh - 12px) !important;
  }
}
#manageModal.tile-detail-mode .property-detail-layout,
#manageModal.tile-detail-mode .property-detail-right{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:100% !important;
  max-width:100% !important;
  gap:10px !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:32px !important;
  min-height:32px !important;
  padding:4px 8px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
#manageModal.tile-detail-mode .unified-property-actions .unmortgage-state{
  font-size:11px !important;
  letter-spacing:-.035em !important;
}
@media (max-width:520px){
  #manageModal.tile-detail-mode .manage-pop{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
}

/* v192-from-v34: keep the restored popup height, but make the Property Details popup width narrower again. */
#manageModal.tile-detail-mode .manage-pop{
  width:min(460px, calc(100vw - 24px)) !important;
  max-width:min(460px, calc(100vw - 24px)) !important;
  max-height:94vh !important;
  height:auto !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:100% !important;
  max-width:100% !important;
  gap:8px !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:32px !important;
  min-height:32px !important;
  padding:4px 6px !important;
  font-size:11.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
#manageModal.tile-detail-mode .unified-property-actions .unmortgage-state{
  font-size:10.5px !important;
  letter-spacing:-.04em !important;
}
@media (max-width:500px){
  #manageModal.tile-detail-mode .manage-pop{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
}
@media (max-height:760px){
  #manageModal.tile-detail-mode .manage-pop{
    max-height:calc(100vh - 12px) !important;
  }
}

/* v193-from-v34: definitive Property Details popup dimensions.
   Keep the restored/taller height on both Classic and World Cities, but reduce width. */
#manageModal.tile-detail-mode .manage-pop{
  width:min(420px, calc(100vw - 24px)) !important;
  max-width:min(420px, calc(100vw - 24px)) !important;
  min-height:min(560px, calc(100vh - 12px)) !important;
  max-height:calc(100vh - 12px) !important;
  height:auto !important;
  overflow:auto !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .property-card,
#manageModal.tile-detail-mode .single-space-card{
  min-height:calc(min(560px, calc(100vh - 12px)) - 12px) !important;
  display:flex !important;
  flex-direction:column !important;
}
#manageModal.tile-detail-mode .pc-body{
  flex:1 1 auto !important;
}
#manageModal.tile-detail-mode .property-detail-layout,
#manageModal.tile-detail-mode .property-detail-right,
#manageModal.tile-detail-mode .unified-property-actions{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  padding:0 !important;
  margin:6px 0 0 !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
@media (max-height:640px){
  #manageModal.tile-detail-mode .manage-pop{
    min-height:calc(100vh - 12px) !important;
  }
  #manageModal.tile-detail-mode .property-card,
  #manageModal.tile-detail-mode .single-space-card{
    min-height:calc(100vh - 24px) !important;
  }
}
@media (max-width:450px){
  #manageModal.tile-detail-mode .manage-pop{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
}

/* v193-from-v34: reduce Property Details popup overall size while keeping buttons full-width. */
#manageModal.tile-detail-mode.manage-pop,
#manageModal.manage-pop.tile-detail-mode,
#manageModal.tile-detail-mode,
#manageModal.tile-detail-mode .manage-pop{
  width:min(385px, calc(100vw - 28px)) !important;
  max-width:min(385px, calc(100vw - 28px)) !important;
  min-height:0 !important;
  height:auto !important;
  max-height:84vh !important;
  overflow:auto !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .property-card,
#manageModal.tile-detail-mode .single-space-card{
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
}
#manageModal.tile-detail-mode .pc-body{
  flex:0 1 auto !important;
  padding:9px 10px !important;
  gap:6px !important;
}
#manageModal.tile-detail-mode .pc-header{
  padding:9px 10px !important;
}
#manageModal.tile-detail-mode .property-detail-layout,
#manageModal.tile-detail-mode .property-detail-right,
#manageModal.tile-detail-mode .unified-property-actions{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:7px !important;
  margin:5px 0 0 !important;
  padding:0 !important;
}
#manageModal.tile-detail-mode .unified-property-actions button,
#manageModal.tile-detail-mode .unified-property-actions .build-button,
#manageModal.tile-detail-mode .unified-property-actions .destroy-button,
#manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:31px !important;
  min-height:31px !important;
  padding:4px 5px !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  box-sizing:border-box !important;
}
#manageModal.tile-detail-mode .unified-property-actions .unmortgage-state{
  font-size:10px !important;
  letter-spacing:-.045em !important;
}
@media (max-width:430px){
  #manageModal.tile-detail-mode.manage-pop,
  #manageModal.manage-pop.tile-detail-mode,
  #manageModal.tile-detail-mode,
  #manageModal.tile-detail-mode .manage-pop{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
}
@media (max-height:650px){
  #manageModal.tile-detail-mode.manage-pop,
  #manageModal.manage-pop.tile-detail-mode,
  #manageModal.tile-detail-mode,
  #manageModal.tile-detail-mode .manage-pop{
    max-height:calc(100vh - 12px) !important;
  }
}

/* v195-from-v34: World Cities index 12 Oil Rig text was sitting too low/cut off. */
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility > .tile-content > .name{
  padding-top:12px !important;
  margin-top:-8px !important;
  align-items:flex-start !important;
  justify-content:center !important;
  line-height:.95 !important;
  overflow:visible !important;
}
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility.side-left > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility.side-right > .tile-content > .name{
  padding-top:10px !important;
  margin-top:-10px !important;
}


/* v196-from-v34: Oil Rig on World Cities index 12 should stay one line and sit slightly lower than v195. */
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility > .tile-content > .name{
  white-space:nowrap !important;
  padding-top:7px !important;
  margin-top:-4px !important;
  align-items:flex-start !important;
  justify-content:center !important;
  line-height:1 !important;
  overflow:visible !important;
}
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility.side-left > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility.side-right > .tile-content > .name{
  padding-top:7px !important;
  margin-top:-5px !important;
}


/* v197-from-v34: lower World Cities index 12 Oil Rig text by about triple the prior adjustment. */
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility > .tile-content > .name{
  white-space:nowrap !important;
  padding-top:7px !important;
  margin-top:5px !important;
  align-items:flex-start !important;
  justify-content:center !important;
  line-height:1 !important;
  overflow:visible !important;
}
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility.side-left > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="12"].tile-type-utility.side-right > .tile-content > .name{
  padding-top:7px !important;
  margin-top:10px !important;
}

/* v202-from-v34: mobile proof-of-concept layout.
   Keep the same game logic, but stack the desktop rails below the board on small screens. */
@media (max-width: 820px){
  html, body{
    width:100%;
    overflow-x:hidden;
  }
  body{
    -webkit-text-size-adjust:100%;
  }
  .app{
    width:100%;
    max-width:100%;
    padding:8px;
    box-sizing:border-box;
  }
  .topbar{
    display:flex;
    gap:8px;
    align-items:flex-start;
    padding:10px;
  }
  .topbar h1{
    font-size:22px !important;
    line-height:1 !important;
  }
  .topbar p{
    font-size:12px !important;
  }
  .room-controls{
    margin-left:auto;
    align-items:flex-end;
  }
  .room-pill{
    font-size:10px !important;
    padding:6px 8px !important;
    white-space:nowrap;
  }
  .three-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
  }
  .middle-board{ order:1; width:100%; }
  .right-rail{ order:2; width:100%; display:grid; gap:10px; }
  .left-rail{ order:3; width:100%; display:grid; gap:10px; }
  .board-card{
    width:100% !important;
    max-width:100% !important;
    padding:6px !important;
    box-sizing:border-box !important;
  }
  #board.board,
  .board#board{
    width:calc(100vw - 28px) !important;
    height:calc(100vw - 28px) !important;
    min-height:0 !important;
    max-width:640px !important;
    max-height:640px !important;
    margin:0 auto !important;
    gap:3px !important;
    padding:5px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
  }
  #board .tile{
    border-radius:7px !important;
  }
  #board .tile.corner{
    border-radius:9px !important;
  }
  #board .tile > .tile-content{
    padding:1px 2px 2px !important;
    gap:1px !important;
  }
  #board .tile > .tile-content > .name{
    font-size:clamp(5.8px, 1.75vw, 9px) !important;
    line-height:.95 !important;
    letter-spacing:-.04em !important;
  }
  #board .tile.side-left > .tile-content > .name,
  #board .tile.side-right > .tile-content > .name{
    font-size:clamp(5.6px, 1.65vw, 8.5px) !important;
  }
  #board .tile > .tile-content > .price,
  #board .tile > .tile-content > .price-bubble,
  #board .tile > .tile-content > .owner-strip.relative-owner-strip{
    font-size:clamp(5.5px, 1.6vw, 8px) !important;
    min-height:8px !important;
    height:8px !important;
  }
  #board .tile.flag-tile .flag-icon,
  #board .tile.flag-tile .flag-svg{
    max-width:28px !important;
    max-height:18px !important;
  }
  .center-card{
    border-radius:14px !important;
    padding:8px !important;
    gap:6px !important;
  }
  .center-card h2{
    font-size:clamp(18px, 6vw, 34px) !important;
  }
  .center-card p,
  #centerStatus{
    font-size:clamp(9px, 2.4vw, 13px) !important;
    line-height:1.15 !important;
  }
  .board-log-wrap{
    max-height:88px !important;
    overflow:hidden !important;
  }
  .board-log{
    height:58px !important;
    font-size:10px !important;
  }
  .dice-zone{ transform:scale(.82); transform-origin:center; }
  .panel{
    padding:12px !important;
    border-radius:14px !important;
  }
  .host-panel,
  .right-rail .panel,
  .left-rail .panel{
    max-height:42vh;
    overflow:auto;
  }
  .turn-action-modal{
    align-items:end !important;
    place-items:end center !important;
    padding:0 8px 8px !important;
  }
  .turn-action-pop{
    width:100% !important;
    max-width:520px !important;
    border-radius:18px !important;
    padding:12px !important;
  }
  .turn-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .turn-actions button,
  .setup-actions button,
  .bot-setup-buttons button{
    min-height:42px !important;
    font-size:13px !important;
  }
  .manage-modal{
    align-items:end !important;
    padding:8px !important;
  }
  .manage-pop{
    width:calc(100vw - 16px) !important;
    max-width:520px !important;
    max-height:88vh !important;
    border-radius:18px !important;
    padding:10px !important;
  }
  .property-actions{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .property-actions button{
    min-width:0 !important;
    padding:8px 6px !important;
    font-size:12px !important;
  }
  .auction-pop,
  .confirm-pop,
  .game-over-pop,
  .keepalive-pop,
  .card-pop{
    width:calc(100vw - 24px) !important;
    max-width:520px !important;
    box-sizing:border-box !important;
  }
  .chat-log{
    height:150px !important;
  }
}

@media (max-width: 480px){
  #board.board,
  .board#board{
    width:calc(100vw - 20px) !important;
    height:calc(100vw - 20px) !important;
    gap:2px !important;
    padding:4px !important;
  }
  .board-log-wrap{
    display:none !important;
  }
  .pot{
    font-size:10px !important;
    padding:4px 7px !important;
  }
  #openActionsBtn{
    min-height:34px !important;
    padding:7px 10px !important;
  }
  .token{
    width:16px !important;
    height:16px !important;
  }
  .token .animal-mask,
  .token svg{
    width:12px !important;
    height:12px !important;
  }
}

/* v202-from-v34: mobile proof-of-concept legibility pass.
   Keep desktop unchanged; make phone board text darker/larger and restore side-row amounts. */
@media (max-width: 820px){
  #board.board,
  .board#board{
    grid-template-columns:1.26fr repeat(9, .88fr) 1.26fr !important;
    grid-template-rows:1.34fr repeat(9, .86fr) 1.34fr !important;
  }
  #board .tile > .tile-content > .name{
    color:#020617 !important;
    font-size:clamp(6.8px, 2.05vw, 10px) !important;
    line-height:1 !important;
    font-weight:1000 !important;
    letter-spacing:-.045em !important;
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.72) !important;
  }
  #board .tile.side-left > .tile-content > .name,
  #board .tile.side-right > .tile-content > .name{
    font-size:clamp(6.6px, 1.95vw, 9.6px) !important;
    line-height:.98 !important;
  }
  #board .tile > .tile-content > .bar{
    min-height:7px !important;
    height:7px !important;
    flex-basis:7px !important;
  }
  #board .tile.flag-tile .flag-icon,
  #board .tile.flag-tile .flag-svg{
    max-width:31px !important;
    max-height:20px !important;
  }
  /* Previous desktop tuning made side-row amount strips too narrow on phones.
     Re-center them as compact fixed bubbles so they remain visible after rotation. */
  #board .tile.side-left:not(.corner) > .tile-content > .space-price,
  #board .tile.side-right:not(.corner) > .tile-content > .space-price,
  #board .tile.side-left:not(.corner) > .tile-content > .price,
  #board .tile.side-right:not(.corner) > .tile-content > .price,
  #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:0px !important;
    width:clamp(34px, 10.8vw, 54px) !important;
    min-width:clamp(34px, 10.8vw, 54px) !important;
    max-width:clamp(34px, 10.8vw, 54px) !important;
    height:clamp(10px, 3vw, 14px) !important;
    min-height:clamp(10px, 3vw, 14px) !important;
    max-height:clamp(10px, 3vw, 14px) !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 3px !important;
    margin:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-radius:999px !important;
    font-size:clamp(7px, 2.1vw, 10px) !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
    z-index:110 !important;
  }
  #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
    font-size:clamp(6.4px, 1.9vw, 9px) !important;
    line-height:1 !important;
    max-width:100% !important;
  }
  #board .tile.side-left:not(.corner) > .tokens,
  #board .tile.side-right:not(.corner) > .tokens{
    z-index:5000 !important;
  }
}

@media (max-width: 480px){
  #board .tile > .tile-content > .name{
    font-size:clamp(6.2px, 2.25vw, 8.7px) !important;
  }
  #board .tile.side-left > .tile-content > .name,
  #board .tile.side-right > .tile-content > .name{
    font-size:clamp(6px, 2.1vw, 8.2px) !important;
  }
  #board .tile.side-left:not(.corner) > .tile-content > .space-price,
  #board .tile.side-right:not(.corner) > .tile-content > .space-price,
  #board .tile.side-left:not(.corner) > .tile-content > .price,
  #board .tile.side-right:not(.corner) > .tile-content > .price,
  #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
    width:clamp(30px, 12vw, 42px) !important;
    min-width:clamp(30px, 12vw, 42px) !important;
    max-width:clamp(30px, 12vw, 42px) !important;
    font-size:clamp(6.6px, 2.35vw, 8.2px) !important;
  }
}

/* v203-from-v34: mobile panel tabs proof-of-concept.
   Keep the board visible and switch Players / Chat / Setup below it instead of scrolling through every panel. */
.mobile-panel-tabs{
  display:none;
}
@media (max-width: 820px){
  .mobile-panel-tabs{
    order:2;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:100%;
    position:sticky;
    top:6px;
    z-index:26;
    padding:2px 0 0;
  }
  .mobile-panel-tab{
    min-height:38px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.34);
    background:rgba(15,23,42,.74);
    color:#cbd5e1;
    font-weight:950;
    font-size:13px;
    box-shadow:0 8px 22px rgba(2,6,23,.25);
  }
  .mobile-panel-tab.active{
    background:linear-gradient(135deg,rgba(96,165,250,.92),rgba(34,197,94,.76));
    color:#020617;
    border-color:rgba(255,255,255,.72);
  }
  .right-rail{ order:3; width:100%; display:block !important; }
  .left-rail{ order:4; width:100%; display:block !important; }

  /* Hide all lower panels by default on mobile, then expose the selected tab. */
  #game #hostPanel,
  #game #playersPanel,
  #game #rulesPanel,
  #game #chatPanel{
    display:none !important;
  }
  #game[data-mobile-tab="players"] #playersPanel,
  #game[data-mobile-tab="chat"] #chatPanel,
  #game[data-mobile-tab="setup"] #hostPanel,
  #game[data-mobile-tab="setup"] #rulesPanel{
    display:block !important;
  }

  /* Tabs replace tall rail scrolling; selected panel can still scroll internally if needed. */
  #game[data-mobile-tab="players"] #playersPanel,
  #game[data-mobile-tab="chat"] #chatPanel,
  #game[data-mobile-tab="setup"] #hostPanel,
  #game[data-mobile-tab="setup"] #rulesPanel{
    max-height:44vh !important;
    overflow:auto !important;
  }
  #game[data-mobile-tab="chat"] #chatPanel{
    max-height:none !important;
  }
  #game[data-mobile-tab="chat"] #chatLog{
    height:min(46vh, 360px) !important;
  }
  #game[data-mobile-tab="players"] #players{
    max-height:42vh;
    overflow:auto;
    padding-right:2px;
  }

  /* Make the selected tab content feel like a single card under the board. */
  #game[data-mobile-tab="players"] .right-rail,
  #game[data-mobile-tab="setup"] .right-rail,
  #game[data-mobile-tab="chat"] .left-rail{
    display:block !important;
  }
}

/* v205-from-v34: mobile bottom tabs as an overlay drawer.
   The tab buttons stay flush at the bottom. When opened, the selected panel covers the board
   so players do not need to scroll through stacked panels. Desktop remains unchanged. */
@media (max-width: 820px){
  body.in-game{
    padding-bottom:68px !important;
  }
  .mobile-panel-tabs{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    top:auto !important;
    z-index:1200 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:auto !important;
    padding:8px !important;
    border-radius:18px !important;
    background:rgba(2,6,23,.82) !important;
    border:1px solid rgba(148,163,184,.30) !important;
    box-shadow:0 -12px 34px rgba(2,6,23,.38) !important;
    backdrop-filter:blur(12px) !important;
  }
  .mobile-panel-tab{
    min-height:44px !important;
    border-radius:14px !important;
    font-size:14px !important;
    background:rgba(15,23,42,.92) !important;
  }
  .mobile-panel-tab.active{
    background:linear-gradient(135deg,rgba(96,165,250,.96),rgba(34,197,94,.82)) !important;
    color:#020617 !important;
  }

  /* Keep rails out of normal mobile flow; their selected panel becomes an overlay. */
  .right-rail,
  .left-rail{
    order:3 !important;
    width:100% !important;
    display:block !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #game #hostPanel,
  #game #playersPanel,
  #game #rulesPanel,
  #game #chatPanel{
    display:none !important;
  }

  #game[data-mobile-tab="players"] #playersPanel,
  #game[data-mobile-tab="chat"] #chatPanel,
  #game[data-mobile-tab="setup"] #hostPanel{
    display:block !important;
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    top:72px !important;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:1100 !important;
    max-height:none !important;
    height:auto !important;
    overflow:auto !important;
    border-radius:20px !important;
    padding:14px !important;
    box-sizing:border-box !important;
    background:rgba(15,23,42,.96) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 18px 48px rgba(0,0,0,.48) !important;
    backdrop-filter:blur(14px) !important;
  }
  #game[data-mobile-tab="setup"] #rulesPanel{
    display:block !important;
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:1101 !important;
    max-height:22vh !important;
    overflow:auto !important;
    border-radius:16px !important;
    padding:10px !important;
    box-sizing:border-box !important;
    background:rgba(15,23,42,.96) !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
  #game[data-mobile-tab="setup"] #hostPanel{
    bottom:calc(30vh + 82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #game[data-mobile-tab="players"] #players,
  #game[data-mobile-tab="chat"] #chatLog{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }
  #game[data-mobile-tab="chat"] #chatPanel{
    display:flex !important;
    flex-direction:column !important;
  }
  #game[data-mobile-tab="chat"] #chatLog{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
  }
  #game[data-mobile-tab="none"] #hostPanel,
  #game[data-mobile-tab="none"] #playersPanel,
  #game[data-mobile-tab="none"] #rulesPanel,
  #game[data-mobile-tab="none"] #chatPanel{
    display:none !important;
  }
}

/* v207: lobby rejoin card and CAP badge support */
.lobby-room.rejoin-room{
  border-color:rgba(96,165,250,.55) !important;
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(15,23,42,.68)) !important;
}
.lobby-room.rejoin-room strong{color:#bfdbfe !important}

/* v211-from-v34: host can boot players before the game starts */
.host-boot-btn{
  border:1px solid rgba(248,113,113,.55) !important;
  background:rgba(127,29,29,.92) !important;
  color:#fee2e2 !important;
  border-radius:10px !important;
  padding:7px 10px !important;
  font-weight:950 !important;
  cursor:pointer !important;
  min-width:64px !important;
}
.host-boot-btn:hover{
  background:rgba(185,28,28,.98) !important;
  color:#fff !important;
}

/* v211-from-v34: polished host boot confirmation instead of browser confirm() */
.host-boot-pop{
  position:relative !important;
  width:min(460px, calc(100vw - 32px)) !important;
  padding:24px !important;
}
.confirm-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-bottom:8px !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:rgba(96,165,250,.14) !important;
  border:1px solid rgba(147,197,253,.24) !important;
  color:#bfdbfe !important;
  font-size:11px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}
.host-boot-target{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:14px 0 14px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(148,163,184,.22) !important;
}
.host-boot-target strong{
  display:block !important;
  color:#f8fafc !important;
  font-size:17px !important;
  line-height:1.15 !important;
}
.host-boot-target span{
  display:block !important;
  margin-top:3px !important;
  color:#94a3b8 !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.host-boot-token{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid rgba(255,255,255,.8) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.28) !important;
  color:#fff !important;
}
.host-boot-token svg{
  width:31px !important;
  height:31px !important;
  fill:currentColor !important;
}
.host-boot-pop .modal-x{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
}
.host-boot-pop .confirm-actions{
  justify-content:stretch !important;
}
.host-boot-pop .confirm-actions button{
  flex:1 1 0 !important;
  min-height:42px !important;
}

/* v212-from-v34: draw attention to the board selector so players notice alternate boards. */
.board-picker-callout{
  margin:20px 0 8px !important;
  padding:14px !important;
  border-radius:20px !important;
  border:1px solid rgba(96,165,250,.72) !important;
  background:linear-gradient(135deg, rgba(37,99,235,.26), rgba(14,165,233,.14) 48%, rgba(168,85,247,.14)) !important;
  box-shadow:0 12px 32px rgba(37,99,235,.18), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  position:relative !important;
  overflow:hidden !important;
}
.board-picker-callout::after{
  content:"";
  position:absolute;
  inset:-40% auto auto -30%;
  width:70%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:rotate(18deg);
  animation:board-picker-sheen 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes board-picker-sheen{
  0%,62%,100%{ transform:translateX(-110%) rotate(18deg); opacity:0; }
  70%{ opacity:.9; }
  86%{ transform:translateX(265%) rotate(18deg); opacity:0; }
}
.board-picker-heading{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  margin-bottom:10px !important;
  position:relative !important;
  z-index:1 !important;
}
.board-picker-icon{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
  font-size:21px !important;
}
.board-picker-callout label{
  margin:0 !important;
  color:#eff6ff !important;
  font-size:16px !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}
.board-picker-callout p{
  margin:2px 0 0 !important;
  color:#bfdbfe !important;
  font-size:13px !important;
  font-weight:750 !important;
}
.board-picker-callout #boardSelect{
  position:relative !important;
  z-index:1 !important;
  border:2px solid rgba(191,219,254,.85) !important;
  background:rgba(15,23,42,.92) !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.18) !important;
  font-size:16px !important;
  padding:13px 14px !important;
}
.board-picker-callout #boardSelect:focus{
  border-color:#ffffff !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.42), 0 0 22px rgba(96,165,250,.34) !important;
}
@media(max-width:650px){
  .board-picker-callout{ padding:12px !important; border-radius:18px !important; }
  .board-picker-callout label{ font-size:14px !important; }
  .board-picker-callout p{ font-size:12px !important; }
  .board-picker-callout #boardSelect{ font-size:15px !important; }
}


/* Rumble v124: chat tokens, own-player inline property actions, and LKG-based taller property detail popup. */
.chat-msg{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}
.chat-token{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border-radius:999px !important;
  display:inline-grid !important;
  place-items:center !important;
  box-shadow:0 1px 4px rgba(0,0,0,.22) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  color:#fff !important;
  overflow:hidden !important;
}
.chat-token .animal-mask{
  width:15px !important;
  height:17px !important;
  background:#fff !important;
}
.chat-copy{ min-width:0; }
.incoming-chat-msg{}
.incoming-chat-glow{
  animation:rumble-chat-glow 5s ease-out 1;
}
@keyframes rumble-chat-glow{
  0%{ background:rgba(250,204,21,.88); box-shadow:0 0 0 2px rgba(250,204,21,.72), 0 0 18px rgba(250,204,21,.75); }
  55%{ background:rgba(250,204,21,.40); box-shadow:0 0 0 1px rgba(250,204,21,.44), 0 0 12px rgba(250,204,21,.45); }
  100%{ background:transparent; box-shadow:none; }
}
.side-deal-panel .player-detail-card.side-card.own-player-detail-card{
  width:min(100%, 560px) !important;
}
.side-deal-panel .own-player-detail-card .side-trade-lists{
  grid-template-columns:1fr !important;
}
.side-deal-panel .own-player-detail-card .own-property-action-column{
  padding:10px 12px !important;
  border-radius:14px !important;
}
.side-deal-panel .trade-prop.has-inline-actions{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) max-content !important;
  column-gap:12px !important;
  row-gap:2px !important;
  align-items:start !important;
  padding:8px 9px 12px 10px !important;
  min-height:58px !important;
}
.side-deal-panel .trade-prop.has-inline-actions .trade-prop-main{
  align-self:start !important;
  padding-top:0 !important;
}
.side-deal-panel .trade-prop.has-inline-actions .inline-prop-actions.compact-prop-action-buttons{
  align-self:end !important;
  justify-self:end !important;
  margin-top:18px !important;
  transform:translateY(8px) !important;
  max-width:none !important;
  flex-wrap:nowrap !important;
}
.side-deal-panel .inline-prop-actions{
  display:flex !important;
  gap:4px !important;
  align-items:center !important;
}
.side-deal-panel .mini-action{
  padding:5px 7px !important;
  min-height:25px !important;
  font-size:10px !important;
  border-radius:8px !important;
  white-space:nowrap !important;
}
.side-deal-panel .mini-action:disabled{
  opacity:.42 !important;
  cursor:not-allowed !important;
}
/* Keep opponent trade/details layout at the LKG two-column width. */
.side-deal-panel .opponent-player-detail-card .side-trade-lists{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

/* Property detail popup: restore LKG internal placement, but give the outer card more height without scrollbars. */
#manageModal.tile-detail-mode{
  place-items:start end !important;
  align-items:start !important;
  justify-items:end !important;
  padding:72px 14px 14px !important;
  background:transparent !important;
  backdrop-filter:none !important;
  pointer-events:none !important;
}
#manageModal.tile-detail-mode .manage-pop{
  pointer-events:auto !important;
  width:min(360px, calc(100vw - 20px)) !important;
  height:min(560px, calc(var(--board-bottom-row-top, 720px) - 86px), calc(100vh - 94px)) !important;
  max-height:none !important;
  margin:0 !important;
  overflow:hidden !important;
  padding:4px !important;
  box-shadow:0 20px 44px rgba(0,0,0,.40) !important;
}
#manageModal.tile-detail-mode .property-card{
  height:100% !important;
  margin-top:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
#manageModal.tile-detail-mode .pc-body{
  flex:1 1 auto !important;
  overflow:visible !important;
}
@media(max-width:980px){
  .side-deal-panel .trade-prop.has-inline-actions{ grid-template-columns:1fr !important; }
  .side-deal-panel .trade-prop.has-inline-actions .inline-prop-actions.compact-prop-action-buttons{ justify-self:end !important; margin-top:8px !important; }
}
@media(max-height:720px){
  #manageModal.tile-detail-mode{ padding-top:58px !important; }
  #manageModal.tile-detail-mode .manage-pop{ height:min(500px, calc(var(--board-bottom-row-top, 680px) - 70px), calc(100vh - 72px)) !important; }
}


/* Rumble v124: property detail popup should be white, shorter, and stay above the board bottom row. */
#manageModal.tile-detail-mode .manage-pop{
  top:calc(50vh + 42px) !important;
  max-height:min(36vh, 310px) !important;
  overflow:visible !important;
  background:#ffffff !important;
  color:#111827 !important;
  border:2px solid rgba(15,23,42,.18) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.24) !important;
}
#manageModal.tile-detail-mode .property-card{
  background:#ffffff !important;
  color:#111827 !important;
  max-height:none !important;
  overflow:visible !important;
}
#manageModal.tile-detail-mode .pc-body,
#manageModal.tile-detail-mode .rent-schedule,
#manageModal.tile-detail-mode .pc-stat{
  background:#ffffff !important;
  color:#111827 !important;
}
#manageModal.tile-detail-mode .property-actions{
  margin-top:6px !important;
}
.freedom-card-icon svg{width:34px;height:26px;display:block;}
.freedom-card-frame{fill:#fef3c7;stroke:#92400e;stroke-width:2;}
.jail-pass-bars{fill:none;stroke:#475569;stroke-width:2.1;stroke-linecap:round;}
.jail-pass-key-ring{fill:none;stroke:#16a34a;stroke-width:2.7;}
.jail-pass-key-shaft{fill:none;stroke:#16a34a;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;}
.jail-pass-slash{fill:none;stroke:#dc2626;stroke-width:3.2;stroke-linecap:round;}

/* Rumble v124: World Cities Upgrade board-space icon */
.board-upgrade-icon{
  width: min(54%, 42px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px auto;
}
.board-world-cities .tile.type-fund .tile-name{
  font-weight: 900;
}

/* Rumble v124: World Cities Standby board-space icon */
.board-standby-icon{
  width:54%;
  height:54%;
  object-fit:contain;
  display:block;
  margin:0 auto;
}


/* Rumble v124: World Cities Upgrade/Standby board-space layout refinements */
#board.board-world-cities .tile.tile-type-fund > .tile-content > .tile-header-bar,
#board.board-world-cities .tile.tile-type-chance > .tile-content > .tile-header-bar{
  display:none !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .space-icon,
#board.board-world-cities .tile.tile-type-chance > .tile-content > .space-icon{
  order:2 !important;
  flex:0 0 auto !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .name,
#board.board-world-cities .tile.tile-type-chance > .tile-content > .name{
  order:1 !important;
  flex:0 0 auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content{
  justify-content:center !important;
  gap:4px !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content{
  justify-content:flex-start !important;
  gap:3px !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content > .name{
  margin-top:14px !important;
}
#board.board-world-cities .tile.tile-type-fund .board-upgrade-icon{
  width:min(59.4%, 46px) !important;
}
#board.board-world-cities .tile.tile-type-chance .board-standby-icon{
  width:56% !important;
  height:auto !important;
  max-height:48px !important;
  object-fit:contain !important;
}


/* Rumble v124: World Cities Upgrade/Standby transparent icons and placement refinements */
#board.board-world-cities .tile.tile-type-fund > .tile-content{
  justify-content:center !important;
  gap:2px !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .name{
  color:#1d4ed8 !important;
  font-weight:900 !important;
  margin-top:0 !important;
  margin-bottom:2px !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .space-icon{
  order:2 !important;
  margin-top:8px !important;
  transform:translateY(8px) !important;
}
#board.board-world-cities .tile.tile-type-fund .board-upgrade-icon{
  width:min(62%, 50px) !important;
  height:auto !important;
  max-height:52px !important;
  object-fit:contain !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content{
  justify-content:flex-start !important;
  gap:2px !important;
  padding-top:6px !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content > .space-icon{
  order:1 !important;
  margin-top:0 !important;
  align-self:center !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content > .name{
  order:2 !important;
  color:#dc2626 !important;
  font-weight:900 !important;
  margin-top:2px !important;
}
#board.board-world-cities .tile.tile-type-chance .board-standby-icon{
  width:min(62%, 50px) !important;
  height:auto !important;
  max-height:54px !important;
  object-fit:contain !important;
}


/* Rumble v124: World Cities colored property headers keep the country flag sitting over the colored bar. */
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  min-height:12px !important;
  height:12px !important;
  border-radius:7px !important;
  margin:0 -2px 4px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:40 !important;
}
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) .world-flag-wrap{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-53%) !important;
  width:38px !important;
  height:25px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:42 !important;
  filter:drop-shadow(0 1px 1px rgba(15,23,42,.35)) !important;
}
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) .world-flag-svg{
  width:38px !important;
  height:25px !important;
  display:block !important;
}
#board.board-world-cities .tile.flag-tile.side-top:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only),
#board.board-world-cities .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  transform:translateY(-1px) !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only),
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  transform:none !important;
}

/* Rumble v124: Upgrade text moves up and the icon sits in the bottom half; square 2 uses a larger icon. */
#board.board-world-cities .tile.tile-type-fund > .tile-content{
  justify-content:flex-start !important;
  gap:0 !important;
  padding-top:8px !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .name{
  order:1 !important;
  color:#1d4ed8 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  transform:translateY(-7px) !important;
  z-index:24 !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .space-icon{
  order:2 !important;
  margin-top:auto !important;
  margin-bottom:5px !important;
  transform:none !important;
  align-self:center !important;
  z-index:20 !important;
}
#board.board-world-cities .tile.tile-type-fund .board-upgrade-icon{
  width:min(66%, 54px) !important;
  max-height:56px !important;
}
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund .board-upgrade-icon{
  width:min(76%, 62px) !important;
  max-height:64px !important;
}

/* Rumble v124: new transparent Standby icon from uploaded clock/redo image. */
#board.board-world-cities .tile.tile-type-chance > .tile-content{
  justify-content:flex-start !important;
  gap:0 !important;
  padding-top:5px !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content > .space-icon{
  order:1 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  align-self:center !important;
  z-index:20 !important;
}
#board.board-world-cities .tile.tile-type-chance .board-standby-icon{
  width:min(68%, 56px) !important;
  max-height:58px !important;
  object-fit:contain !important;
}
#board.board-world-cities .tile.tile-type-chance > .tile-content > .name{
  order:2 !important;
  color:#dc2626 !important;
  font-weight:900 !important;
  margin-top:0 !important;
  transform:translateY(-2px) !important;
  z-index:24 !important;
}


/* Rumble v124: ensure World Cities side-row colored property headers render like Classic headers, with flags layered on top. */
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only),
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:12px !important;
  height:12px !important;
  width:72px !important;
  max-width:72px !important;
  margin:0 auto 4px !important;
  padding:0 !important;
  border-radius:7px !important;
  overflow:visible !important;
  position:relative !important;
  transform:translateY(-10px) !important;
  z-index:62 !important;
  opacity:1 !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) .world-flag-wrap,
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) .world-flag-wrap{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-54%) !important;
  width:38px !important;
  height:25px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:66 !important;
  filter:drop-shadow(0 1px 1px rgba(15,23,42,.35)) !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) .world-flag-svg,
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) .world-flag-svg{
  width:38px !important;
  height:25px !important;
  display:block !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) span,
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only) span{
  visibility:visible !important;
}

/* Rumble v124: new dark-orange transparent Upgrade icon from uploaded cloud/arrow artwork. */
#board.board-world-cities .tile.tile-type-fund > .tile-content > .name{
  color:#1e3a8a !important;
  transform:translateY(-8px) !important;
}
#board.board-world-cities .tile.tile-type-fund > .tile-content > .space-icon{
  margin-top:auto !important;
  margin-bottom:4px !important;
}
#board.board-world-cities .tile.tile-type-fund .board-upgrade-icon{
  width:min(72%, 58px) !important;
  max-height:60px !important;
  object-fit:contain !important;
}
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund .board-upgrade-icon{
  width:min(82%, 68px) !important;
  max-height:70px !important;
}

/* Rumble v124: World Cities fine-tune Upgrade square 2 and shorten colored property headers by 7%. */
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  min-height:11.16px !important;
  height:11.16px !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only),
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  min-height:11.16px !important;
  height:11.16px !important;
}
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund > .tile-content > .name{
  transform:translateY(-15px) !important;
}

/* Rumble v124: World Cities fine-tune square 36 Standby text, square 2 Upgrade text, and side header width. */
#board.board-world-cities .tile[data-tile-index="36"].tile-type-chance > .tile-content > .name{
  transform:translateY(5px) !important;
}
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund > .tile-content > .name{
  transform:translateY(-21px) !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only),
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  width:67.7px !important;
  max-width:67.7px !important;
}


/* Rumble v124: lower World Cities square 36 Standby text and shorten side-row headers to match property-space width. */
#board.board-world-cities .tile[data-tile-index="36"].tile-type-chance > .tile-content > .name{
  transform:translateY(12px) !important;
}
#board.board-world-cities .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only),
#board.board-world-cities .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar:not(.flag-only){
  width:60px !important;
  max-width:60px !important;
}

/* Rumble v124: restore property detail popup sizing; only move the whole popup up slightly. */
#manageModal.tile-detail-mode .manage-pop{
  top:calc(50vh + 68px) !important;
}
#manageModal.tile-detail-mode .pc-cost-pair{
  grid-column:1 / -1 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:14px !important;
}

/* Rumble v124: end-game stats and chat moderation */
.game-over-pop{
  width:min(760px, calc(100vw - 34px));
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.game-over-stats{
  margin:14px auto 18px;
  text-align:left;
  color:#e5e7eb;
}
.game-over-stats-title{
  text-align:center;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fde68a;
  margin-bottom:10px;
}
.game-over-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.game-over-stat-grid>div,
.game-over-top-spaces,
.game-over-extra-stats{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,23,42,.62);
  border-radius:14px;
  padding:10px 12px;
}
.game-over-stat-grid strong,
.game-over-top-spaces strong,
.game-over-extra-stats strong{
  display:block;
  color:#f8fafc;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.game-over-stat-grid span{
  font-weight:900;
  color:#fef3c7;
}
.game-over-top-spaces,
.game-over-extra-stats{ margin-top:8px; }
.game-over-top-spaces ol,
.game-over-extra-stats ul{ margin:6px 0 0 18px; padding:0; }
.game-over-top-spaces li,
.game-over-extra-stats li{ margin:4px 0; }
.game-over-top-spaces li span,
.game-over-extra-stats li span{ float:right; color:#fef3c7; font-weight:900; margin-left:10px; }
.system-chat-msg{
  border-color:rgba(248,113,113,.55)!important;
  background:rgba(127,29,29,.42)!important;
}
.moderation-chat-glow{
  animation:moderation-red-glow 5s ease-out 1;
}
.moderator-token{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  background:#dc2626!important;
  color:#fff!important;
  font-weight:1000;
  box-shadow:0 0 14px rgba(248,113,113,.75);
}
@keyframes moderation-red-glow{
  0%,65%{ box-shadow:0 0 0 2px rgba(248,113,113,.55),0 0 22px rgba(239,68,68,.82); }
  100%{ box-shadow:none; }
}
@media (max-width:720px){
  .game-over-stat-grid{ grid-template-columns:1fr; }
}

/* Rumble v124: allow harmless duplicate settings payload during start. */


/* Rumble v124: move Property Details popup higher by 10% of viewport height without resizing/rearranging it. */
#manageModal.tile-detail-mode .manage-pop{
  top:calc(40vh + 68px) !important;
}

/* Rumble v124: statistics moved out of winner modal into main-screen button. */
.view-stats-btn{
  width:100%;
  margin:10px 0 0;
  font-weight:900;
}
.stats-pop{
  width:min(760px, calc(100vw - 34px));
  max-height:calc(100vh - 40px);
  overflow:auto;
}


.building-inventory{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.building-inventory h4{
  margin:0 0 8px;
  font-size:.9rem;
  letter-spacing:.02em;
}
.inventory-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:5px 0;
  font-size:.9rem;
}
.inventory-row span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.inventory-house-icon,.inventory-hotel-icon{
  width:18px;
  height:18px;
  vertical-align:middle;
}
.inventory-note{
  margin-top:6px;
  opacity:.75;
  font-size:.75rem;
}


/* Rumble v124: profanity removal status beside player name. */
.player.profanity-removed-player{
  border-color:rgba(248,113,113,.75)!important;
  box-shadow:0 0 0 1px rgba(248,113,113,.35),0 0 18px rgba(220,38,38,.45)!important;
}
.player.profanity-removed-player .player-summary-name span{
  color:#fecaca!important;
  font-weight:1000!important;
}


.how-to-play-btn{margin:14px 0 4px;width:100%;}
.how-to-pop{max-width:720px;}
.how-to-content{text-align:left;color:#e5e7eb;line-height:1.45;}
.how-to-content p{color:#e5e7eb;margin:0 0 12px;}
.how-to-content ol{margin:0 0 12px 22px;padding:0;}
.how-to-content li{margin:8px 0;}


/* Rumble v124 admin users modal */
.admin-users-btn{ margin-left:8px; }
.admin-users-pop{ width:min(1180px,calc(100% - 32px)); max-height:86vh; overflow:auto; }
.admin-summary{ font-weight:900; color:#dbeafe; margin:8px 0 14px; }
.admin-table-wrap{ overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(15,23,42,.5); }
.admin-users-table{ width:100%; border-collapse:collapse; font-size:12px; text-align:left; }
.admin-users-table th,.admin-users-table td{ padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:top; white-space:nowrap; }
.admin-users-table th{ position:sticky; top:0; background:#0f172a; color:#bfdbfe; z-index:1; }
.admin-token-cell{ max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.admin-badge{ display:inline-block; margin-left:4px; padding:1px 5px; border-radius:999px; background:#facc15; color:#111827; font-size:10px; font-weight:1000; }
.admin-loading{ padding:16px; font-weight:900; }

.admin-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:10px 0;flex-wrap:wrap;}
.admin-toolbar input{min-width:260px;padding:7px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.45);background:#0f172a;color:#e5e7eb;}
.admin-pager{display:flex;gap:8px;align-items:center;white-space:nowrap;}
.admin-sort{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:800;cursor:pointer;padding:0;white-space:nowrap;}
.admin-cleanup-btn{white-space:nowrap;min-width:112px;padding-left:10px;padding-right:10px;}
.admin-users-table th,.admin-users-table td{white-space:nowrap;}
.admin-badge-human{background:#064e3b;color:#bbf7d0;}
.admin-badge-console{background:#581c87;color:#f5d0fe;}


/* v45: hidden DUDUBUBU bear token heads */
.special-token-choice{
  box-shadow:0 0 0 2px rgba(250,204,21,.75), 0 10px 22px rgba(0,0,0,.16) !important;
}
.special-token-img{
  display:block;
  width:1.08em;
  height:1.08em;
  object-fit:contain;
  pointer-events:none;
}
.animal-choice .special-token-img{
  width:58px !important;
  height:58px !important;
}
.token .special-token-img,
.travel-token .special-token-img{
  width:32px !important;
  height:32px !important;
}
.badge .special-token-img,
.player-summary .badge .special-token-img{
  width:22px !important;
  height:22px !important;
}
.preview-chip .special-token-img{
  width:66px !important;
  height:66px !important;
}
.winner-token .special-token-img,
.large-badge .special-token-img,
.trade-side-token .special-token-img{
  width:70% !important;
  height:70% !important;
}


/* v46/v47: keep hidden DUDUBUBU token art inside circular pieces; v47 enlarges board icons */
.animal-choice.special-token-choice{
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.animal-choice.special-token-choice .special-token-img{
  width:38px !important;
  height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:auto !important;
}
.preview-chip{
  overflow:hidden !important;
  display:grid !important;
  place-items:center !important;
}
.preview-chip .special-token-img{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:auto !important;
}
#board .token,
.token,
.travel-token,
.badge,
.player-summary .badge{
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
#board .token .special-token-img,
.token .special-token-img,
.travel-token .special-token-img{
  width:26px !important;
  height:26px !important;
  max-width:26px !important;
  max-height:26px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:auto !important;
  justify-self:center !important;
  align-self:center !important;
  transform:none !important;
}
.badge .special-token-img,
.player-summary .badge .special-token-img{
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
}
.winner-token .special-token-img,
.large-badge .special-token-img,
.trade-side-token .special-token-img{
  width:58% !important;
  height:58% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
}


/* v47: DUDUBUBU unlock stays available after typing secret once; make board token art larger while centered. */
#board .token .special-token-img,
.token .special-token-img,
.travel-token .special-token-img{
  width:38px !important;
  height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  object-fit:contain !important;
  object-position:center center !important;
  justify-self:center !important;
  align-self:center !important;
  margin:auto !important;
  transform:none !important;
}
.player .token .special-token-img{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
}

/* v48: DUDUBUBU token layering fix - keep colored circular token visible and place character art on top. */
.animal-choice.special-token-choice,
.animal-choice.special-token-piece{
  position:relative !important;
  border-radius:18px !important;
  background:rgba(2,6,23,.45) !important;
  overflow:visible !important;
  display:grid !important;
  place-items:center !important;
}
.animal-choice.special-token-choice::before,
.animal-choice.special-token-piece::before{
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), inset 0 -3px 7px rgba(0,0,0,.24), 0 6px 14px rgba(0,0,0,.25);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:0;
}
.animal-choice.special-token-choice .special-token-img,
.animal-choice.special-token-piece .special-token-img{
  position:relative !important;
  z-index:2 !important;
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  transform:none !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));
}
.preview-chip.special-token-piece{
  position:relative !important;
  overflow:visible !important;
  display:grid !important;
  place-items:center !important;
  background:var(--token-color, currentColor) !important;
}
.preview-chip.special-token-piece .special-token-img{
  position:relative !important;
  z-index:2 !important;
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  transform:none !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));
}
#board .token.special-token-piece,
.token.special-token-piece,
.travel-token.special-token-piece{
  position:relative !important;
  overflow:visible !important;
  display:grid !important;
  place-items:center !important;
  background:var(--token-color, #60a5fa) !important;
  border-color:#020617 !important;
}
#board .token.special-token-piece .special-token-img,
.token.special-token-piece .special-token-img,
.travel-token.special-token-piece .special-token-img{
  position:absolute !important;
  z-index:5 !important;
  left:50% !important;
  top:50% !important;
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  pointer-events:none !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
}
.player .token.special-token-piece .special-token-img{
  width:36px !important;
  height:36px !important;
  max-width:36px !important;
  max-height:36px !important;
}


/* v50 experimental responsive desktop fit: maximize board to browser size without page scrolling. */
@media (min-width: 900px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  body{
    min-height:100dvh;
  }
  .app{
    width:100vw !important;
    height:100dvh !important;
    min-height:0 !important;
    max-width:none !important;
    padding:8px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .topbar{
    flex:0 0 auto !important;
    min-height:0 !important;
    margin:0 0 6px !important;
    gap:10px !important;
    align-items:center !important;
  }
  .topbar h1{
    font-size:clamp(20px,2.2vw,30px) !important;
    line-height:.95 !important;
    margin:0 0 2px !important;
  }
  .topbar p{
    font-size:clamp(11px,1vw,13px) !important;
    line-height:1.2 !important;
  }
  .room-pill{
    padding:8px 12px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
  .three-layout{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:clamp(220px,20vw,310px) minmax(0,1fr) clamp(260px,23vw,360px) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .left-rail,.right-rail,.middle-board{
    min-height:0 !important;
    height:100% !important;
  }
  .left-rail,.right-rail{
    overflow:auto !important;
    scrollbar-width:thin;
    gap:10px !important;
    padding-bottom:2px !important;
  }
  .middle-board{
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .board-card{
    width:min(100%, calc(100dvh - 72px)) !important;
    height:auto !important;
    max-height:100% !important;
    aspect-ratio:1/1 !important;
    padding:6px !important;
    flex:0 1 auto !important;
  }
  .board{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:1/1 !important;
    gap:3px !important;
    padding:5px !important;
  }
  .panel{
    padding:10px !important;
    border-radius:12px !important;
  }
  .panel h2,.panel h3{
    margin-bottom:8px !important;
  }
  .chat-panel{
    min-height:0 !important;
    height:clamp(260px,38dvh,390px) !important;
  }
  .chat-log,.log{
    min-height:0 !important;
  }
  .compact-log .log{
    height:clamp(120px,22dvh,230px) !important;
  }
  .player{
    padding:9px !important;
    margin-bottom:8px !important;
  }
  .money{
    font-size:19px !important;
    margin:7px 0 2px !important;
  }
  .rules-list div{
    padding:5px 0 !important;
  }
}
@media (min-width: 900px) and (max-height: 760px){
  .app{padding:6px !important;}
  .topbar{margin-bottom:4px !important;}
  .topbar h1{font-size:22px !important;}
  .topbar p{display:none !important;}
  .three-layout{
    grid-template-columns:clamp(205px,19vw,280px) minmax(0,1fr) clamp(245px,22vw,330px) !important;
    gap:8px !important;
  }
  .board-card{
    width:min(100%, calc(100dvh - 48px)) !important;
    padding:5px !important;
  }
  .board{gap:2px !important;padding:4px !important;}
  .tile{font-size:8.5px !important;padding:6px 3px 3px !important;}
  .tile.corner{font-size:10px !important;}
  .center-card{padding:8px !important;gap:5px !important;}
  .center-card h2{font-size:28px !important;}
  .dice{font-size:34px !important;}
  .panel{padding:8px !important;}
}
@media (max-width: 899px){
  html,body{overflow:auto;}
}


/* v51 experimental responsive adjustment: let the board begin at the top of the viewport while the title remains visible. */
@media (min-width: 900px){
  .app{
    position:relative !important;
  }
  .topbar{
    position:absolute !important;
    top:8px !important;
    left:8px !important;
    right:8px !important;
    z-index:40 !important;
    pointer-events:none !important;
  }
  .topbar .room-controls,
  .topbar button,
  .topbar .room-pill{
    pointer-events:auto !important;
  }
  .three-layout{
    height:100% !important;
    padding-top:0 !important;
  }
  .middle-board{
    align-items:flex-start !important;
    padding-top:0 !important;
  }
  .board-card{
    width:min(100%, calc(100dvh - 16px)) !important;
    max-height:calc(100dvh - 16px) !important;
  }
  .left-rail,
  .right-rail{
    padding-top:58px !important;
    box-sizing:border-box !important;
  }
}
@media (min-width: 900px) and (max-height: 760px){
  .topbar{top:6px !important;left:6px !important;right:6px !important;}
  .left-rail,.right-rail{padding-top:42px !important;}
  .board-card{
    width:min(100%, calc(100dvh - 12px)) !important;
    max-height:calc(100dvh - 12px) !important;
  }
}


/* v52: larger token pieces, safer top-right room controls, and new logo treatment. */
.game-logo{
  display:block;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.30));
}
.brand-block{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;}
.topbar-logo{width:clamp(190px,22vw,330px);height:auto;max-height:74px;}
.lobby-logo{width:min(430px,86%);height:auto;margin:0 auto 8px;}
.center-logo{width:min(310px,82%);height:auto;margin:0 auto 2px;}
.topbar p{margin-top:0 !important;}
.topbar h1{display:none !important;}
.room-controls{
  min-width:0 !important;
  max-width:min(460px, calc(100vw - 380px)) !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
}
.room-pill{
  max-width:300px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.leave-game-btn{white-space:nowrap !important;flex:0 0 auto !important;}
#board .tokens{
  width:51px !important;
  height:51px !important;
}
#board .token{
  width:44px !important;
  height:44px !important;
  border-width:2px !important;
}
#board .token svg{
  width:31px !important;
  height:31px !important;
}
#board .token.special-token-piece .special-token-img{
  width:39px !important;
  height:39px !important;
  max-width:39px !important;
  max-height:39px !important;
}
@media (min-width:900px){
  .topbar{right:18px !important;left:10px !important;align-items:flex-start !important;}
  .topbar-logo{max-height:66px;}
  .left-rail,.right-rail{padding-top:68px !important;}
  .center-card .center-logo{max-height:70px;}
}
@media (min-width:900px) and (max-height:760px){
  .topbar-logo{width:clamp(150px,18vw,250px);max-height:48px;}
  .topbar p{display:none !important;}
  .room-controls{max-width:min(390px, calc(100vw - 260px)) !important;}
  .room-pill{max-width:230px !important;font-size:11px !important;padding:7px 10px !important;}
  .leave-game-btn{font-size:11px !important;padding:8px 10px !important;}
  .left-rail,.right-rail{padding-top:48px !important;}
  .center-logo{width:min(230px,76%);max-height:48px;}
}
@media (max-width:899px){
  .topbar-logo{width:220px;max-width:64vw;}
  .room-controls{max-width:100% !important;flex-wrap:wrap !important;}
  .lobby-logo{width:min(340px,86%);}
}


/* v53: property-themed logo, cross-game links, and responsive right-side refinements. */
.game-logo{
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.28)) !important;
}
.topbar-logo{width:clamp(260px,28vw,430px) !important;max-height:86px !important;}
.lobby-logo{width:min(560px,92%) !important;max-height:170px !important;}
.center-logo{width:min(380px,88%) !important;max-height:95px !important;}
.cross-games-panel{
  flex:0 0 auto;
}
.cross-game-links{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.cross-game-link{
  display:block;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(135deg, rgba(30,64,175,.38), rgba(15,23,42,.55));
  border-radius:14px;
  padding:10px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.cross-game-link:hover{
  transform:translateY(-1px);
  border-color:rgba(250,204,21,.62);
  background:linear-gradient(135deg, rgba(37,99,235,.48), rgba(15,23,42,.62));
}
.cross-game-link strong{
  display:block;
  font-size:14px;
  line-height:1.15;
  color:#fef3c7;
  margin-bottom:3px;
}
.cross-game-link span{
  display:block;
  font-size:12px;
  line-height:1.25;
  color:#dbeafe;
}
@media (min-width:900px){
  .right-rail{
    padding-right:6px !important;
  }
  .room-controls{
    max-width:min(430px, calc(100vw - 460px)) !important;
  }
  .room-pill{
    max-width:265px !important;
  }
}
@media (min-width:900px) and (max-height:760px){
  .topbar-logo{width:clamp(200px,22vw,320px) !important;max-height:58px !important;}
  .center-logo{width:min(270px,80%) !important;max-height:62px !important;}
  .cross-game-link{padding:7px 9px;}
  .cross-game-link span{font-size:11px;}
}
@media (max-width:899px){
  .cross-game-link span{font-size:12px;}
}


/* v55: lobby may scroll; in-game board fits viewport; simpler one-color property logo and game cross-links. */
@media (min-width:900px){
  html, body{height:auto !important; min-height:100% !important; overflow:auto !important;}
  body.in-game{height:100dvh !important; overflow:hidden !important;}
  body.in-lobby{height:auto !important; overflow:auto !important;}
  body.in-lobby .app{height:auto !important; min-height:100dvh !important; overflow:visible !important; padding:10px 12px 26px !important;}
  body.in-game .app{height:100dvh !important; overflow:hidden !important; padding:8px !important;}
  body.in-lobby .topbar{position:relative !important; top:auto !important; left:auto !important; right:auto !important; pointer-events:auto !important; margin-bottom:12px !important;}
  body.in-game .topbar{position:absolute !important; top:8px !important; left:10px !important; right:18px !important; pointer-events:none !important;}
  body.in-lobby .hero{min-height:0 !important; display:grid !important; place-items:start center !important; padding-bottom:28px !important;}
  body.in-lobby .lobby-card{width:min(780px,96vw) !important; max-height:none !important; overflow:visible !important; padding:24px !important;}
  .lobby-logo{display:none !important;}
  .topbar-logo{width:clamp(230px,23vw,360px) !important; max-height:78px !important;}
  .center-logo{width:min(320px,84%) !important; max-height:78px !important;}
  .game-logo{filter:drop-shadow(0 6px 9px rgba(0,0,0,.25)) !important;}
  body.in-game .three-layout{height:100% !important; overflow:hidden !important;}
  body.in-game .board-card{width:min(100%, calc(100dvh - 16px)) !important; max-height:calc(100dvh - 16px) !important;}
  body.in-game .left-rail, body.in-game .right-rail{overflow:auto !important; scrollbar-width:thin;}
  .cross-games-panel{display:block !important;}
  .cross-game-links, .lobby-cross-games{display:flex; flex-direction:column; gap:9px;}
  .lobby-cross-games{margin-top:18px; padding-top:16px; border-top:1px solid rgba(148,163,184,.18);}
  .lobby-cross-games h3{margin-bottom:4px;}
  .cross-game-link{display:grid !important; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:center;}
  .cross-game-logo{width:96px; max-height:44px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));}
  .cross-game-link strong{display:none !important;}
  .cross-game-link span{font-size:12px !important; line-height:1.25 !important;}
}
@media (min-width:900px) and (max-height:760px){
  body.in-lobby .app{padding-bottom:24px !important;}
  .topbar-logo{width:clamp(190px,20vw,290px) !important; max-height:56px !important;}
  .center-logo{width:min(250px,76%) !important; max-height:54px !important;}
  body.in-game .board-card{width:min(100%, calc(100dvh - 12px)) !important; max-height:calc(100dvh - 12px) !important;}
}
@media (max-width:899px){
  body.in-lobby{overflow:auto !important;}
  .lobby-logo{display:none !important;}
  .lobby-cross-games{margin-top:16px; padding-top:14px; border-top:1px solid rgba(148,163,184,.18); display:flex; flex-direction:column; gap:8px;}
  .cross-game-link{display:grid !important; grid-template-columns:88px minmax(0,1fr); gap:9px; align-items:center;}
  .cross-game-logo{width:88px; max-height:42px; object-fit:contain;}
}


/* v55: right-side More Games lobby layout, board top margin for World Cities flags, revised game-family logos. */
@media (min-width: 1000px){
  body.in-lobby .lobby-card{
    width:min(1160px, 96vw) !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 390px) !important;
    column-gap:22px !important;
    align-items:start !important;
  }
  body.in-lobby .lobby-main-content{
    min-width:0 !important;
  }
  body.in-lobby .lobby-cross-games{
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
    border-left:1px solid rgba(148,163,184,.22) !important;
    padding-left:20px !important;
    position:sticky;
    top:14px;
    align-self:start;
  }
  body.in-lobby .lobby-cross-games h3{
    font-size:24px !important;
    margin:0 0 12px !important;
    color:#fef3c7 !important;
  }
  body.in-lobby .cross-game-link{
    grid-template-columns:148px minmax(0,1fr) !important;
    padding:13px 14px !important;
    gap:13px !important;
    border-radius:18px !important;
    min-height:92px !important;
  }
  body.in-lobby .cross-game-logo{
    width:148px !important;
    max-height:76px !important;
  }
  body.in-lobby .cross-game-link span{
    font-size:13px !important;
    line-height:1.32 !important;
  }

  body.in-game .middle-board{
    padding-top:12px !important;
    box-sizing:border-box !important;
  }
  body.in-game .board-card{
    width:min(100%, calc(100dvh - 42px)) !important;
    max-height:calc(100dvh - 42px) !important;
  }
}

@media (min-width:900px) and (max-height:760px){
  body.in-game .middle-board{
    padding-top:9px !important;
  }
  body.in-game .board-card{
    width:min(100%, calc(100dvh - 34px)) !important;
    max-height:calc(100dvh - 34px) !important;
  }
}

@media (max-width:999px){
  body.in-lobby .lobby-card{
    display:block !important;
  }
  body.in-lobby .lobby-cross-games{
    margin-top:18px !important;
    padding-top:16px !important;
    border-top:1px solid rgba(148,163,184,.18) !important;
  }
}

/* v56: restore preferred Rumble Avenue logo, separate centered lobby from right-side More Games, board flag margin. */
@media (min-width: 1000px){
  body.in-lobby .hero{
    position:relative !important;
    display:block !important;
    min-height:calc(100dvh - 130px) !important;
    padding:8px clamp(18px, 2.2vw, 38px) 34px !important;
  }
  body.in-lobby .lobby-card{
    width:min(780px, 48vw) !important;
    max-width:780px !important;
    margin:0 auto !important;
    display:block !important;
    padding:24px !important;
  }
  body.in-lobby .lobby-main-content{min-width:0 !important;}
  body.in-lobby .lobby-cross-games{
    position:absolute !important;
    right:clamp(18px, 2.4vw, 42px) !important;
    top:8px !important;
    width:clamp(270px, 23vw, 380px) !important;
    margin:0 !important;
    padding:18px !important;
    border-top:0 !important;
    border-left:0 !important;
    border-radius:22px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:13px !important;
  }
  body.in-lobby .lobby-cross-games h3{
    font-size:25px !important;
    margin:0 0 3px !important;
    color:#fef3c7 !important;
    text-align:center !important;
  }
  body.in-lobby .cross-game-link{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:8px !important;
    min-height:0 !important;
    padding:14px !important;
    border-radius:18px !important;
  }
  body.in-lobby .cross-game-logo{
    width:min(220px, 100%) !important;
    max-height:86px !important;
    object-fit:contain !important;
  }
  body.in-lobby .cross-game-link span{
    font-size:13px !important;
    line-height:1.34 !important;
  }
  body.in-lobby .topbar-logo{
    width:clamp(300px, 34vw, 560px) !important;
    max-height:130px !important;
    object-fit:contain !important;
  }
}

@media (min-width: 1000px) and (max-width: 1390px){
  body.in-lobby .lobby-card{
    margin-left:clamp(18px, 4vw, 70px) !important;
    margin-right:auto !important;
    width:min(720px, calc(100vw - 440px)) !important;
  }
}

@media (max-width: 999px){
  body.in-lobby .hero{display:block !important; padding-bottom:34px !important;}
  body.in-lobby .lobby-card{display:block !important; width:min(780px, 96vw) !important; margin:0 auto !important;}
  body.in-lobby .lobby-cross-games{
    width:min(780px,96vw) !important;
    margin:18px auto 0 !important;
    padding:16px !important;
    border-top:0 !important;
  }
}

@media (min-width:900px){
  body.in-game .middle-board{
    padding-top:18px !important;
    box-sizing:border-box !important;
  }
  body.in-game .board-card{
    width:min(100%, calc(100dvh - 54px)) !important;
    max-height:calc(100dvh - 54px) !important;
  }
}
@media (min-width:900px) and (max-height:760px){
  body.in-game .middle-board{padding-top:14px !important;}
  body.in-game .board-card{
    width:min(100%, calc(100dvh - 46px)) !important;
    max-height:calc(100dvh - 46px) !important;
  }
}


/* v58: smaller top-left logo and higher centered lobby card. */
@media (min-width: 1000px){
  body.in-lobby .topbar{
    margin-bottom:0 !important;
  }
  body.in-lobby .topbar-logo{
    width:clamp(250px, 27vw, 450px) !important;
    max-height:104px !important;
    object-fit:contain !important;
  }
  body.in-lobby .brand-block p{
    font-size:12px !important;
    margin-top:0 !important;
  }
  body.in-lobby .hero{
    margin-top:-22px !important;
    min-height:calc(100dvh - 106px) !important;
    padding-top:0 !important;
  }
  body.in-lobby .lobby-card{
    margin-top:clamp(14px, 2.2vh, 26px) !important;
  }
  body.in-lobby .lobby-cross-games{
    top:clamp(8px, 1.4vh, 20px) !important;
  }
}
@media (min-width: 1000px) and (max-width: 1390px){
  body.in-lobby .topbar-logo{
    width:clamp(220px, 24vw, 370px) !important;
    max-height:88px !important;
  }
  body.in-lobby .hero{
    margin-top:-16px !important;
  }
}


/* v58: move centered lobby section up more and refine More Games copy/layout. */
@media (min-width: 1000px){
  body.in-lobby .hero{
    margin-top:-58px !important;
    min-height:calc(100dvh - 82px) !important;
    padding-top:0 !important;
  }
  body.in-lobby .lobby-card{
    margin-top:clamp(2px, .7vh, 10px) !important;
  }
  body.in-lobby .lobby-cross-games{
    top:clamp(4px, .8vh, 12px) !important;
  }
  body.in-lobby .cross-game-link span{
    font-size:13.5px !important;
    line-height:1.38 !important;
  }
}
@media (min-width: 1000px) and (max-width: 1390px){
  body.in-lobby .hero{
    margin-top:-42px !important;
  }
  body.in-lobby .lobby-card{
    margin-top:4px !important;
  }
}

/* v60: refined More Games copy and moved game chat below logo. */
body.in-game .brand-block p{
  display:none !important;
}
body.in-game #chatPanel{
  margin-top:clamp(12px, 2.1vh, 24px) !important;
}
body.in-game #crossGamesPanel{
  display:none !important;
}
@media (min-width:900px){
  body.in-game .left-rail{
    padding-top:clamp(8px, 1.5vh, 18px) !important;
  }
}


/* v60: keep gameplay chat below the bottom edge of the top-left logo. */
@media (min-width:900px){
  body.in-game .left-rail{
    padding-top:clamp(92px, 11.5vh, 122px) !important;
  }
  body.in-game #chatPanel{
    margin-top:0 !important;
  }
}
@media (min-width:900px) and (max-height:760px){
  body.in-game .left-rail{
    padding-top:clamp(66px, 9.5vh, 86px) !important;
  }
}


/* v61: reduce board token size to a midpoint between the original responsive size and the later enlarged size. */
#board .tokens{
  width:46px !important;
  height:46px !important;
}
#board .token{
  width:39px !important;
  height:39px !important;
  border-width:2px !important;
  transform:
    translate(calc(var(--stack-index, 0) * 6px), calc(var(--stack-index, 0) * -4px))
    scale(1) !important;
}
#board .token.current-token{
  transform:
    translate(calc(var(--stack-index, 0) * 6px), calc(var(--stack-index, 0) * -4px))
    scale(1.08) !important;
}
#board .token svg{
  width:28px !important;
  height:28px !important;
}
#board .token .animal-mask{
  width:29px !important;
  height:29px !important;
}
.travel-token{
  width:39px !important;
  height:39px !important;
}
.travel-token svg{
  width:28px !important;
  height:28px !important;
}
.travel-token .animal-mask{
  width:29px !important;
  height:29px !important;
}
#board .token.special-token-piece .special-token-img,
.token.special-token-piece .special-token-img,
.travel-token.special-token-piece .special-token-img{
  width:35px !important;
  height:35px !important;
  max-width:35px !important;
  max-height:35px !important;
}

/* v63: use updated Rumble Deal logo and nudge the centered lobby section slightly higher. */
@media (min-width: 1000px){
  body.in-lobby .hero{
    margin-top:-70px !important;
  }
  body.in-lobby .lobby-card{
    margin-top:0 !important;
  }
  body.in-lobby .cross-game-logo{
    width:min(236px, 100%) !important;
    max-height:94px !important;
  }
}
@media (min-width: 1000px) and (max-width: 1390px){
  body.in-lobby .hero{
    margin-top:-52px !important;
  }
}


/* v64: shared More Games directory support. */
.shared-more-games{display:flex;flex-direction:column;gap:12px}
.shared-game-link{display:block;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px;background:rgba(255,255,255,.08)}
.shared-game-link:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32)}
.shared-game-logo{display:block;width:min(260px,100%);max-height:112px;object-fit:contain;margin:0 auto 8px}
.shared-game-desc{display:block;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.86)}
.shared-more-games-loading,.shared-more-games-error{font-size:13px;opacity:.78}

/* v70: host start/bot controls live above the player list for faster lobby management */
#playersPanel .player-panel-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin:8px 0 12px !important;
  padding:10px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  border-radius:14px !important;
  background:rgba(15,23,42,.28) !important;
}
#playersPanel .player-panel-actions .setup-start-btn{width:100% !important;}
#playersPanel .player-panel-actions .bot-setup-buttons{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  align-items:stretch !important;
}
#playersPanel .player-panel-actions .bot-setup-buttons button{
  width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
.rules-panel-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:6px !important;
}
.rules-panel-header h3{margin:0 !important;}
.small-toggle{
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
  min-height:0 !important;
  white-space:nowrap !important;
}
#rulesPanel.rules-collapsed .rules-list{display:none !important;}
#rulesPanel.rules-collapsed{padding-bottom:12px !important;}
#rulesToggleBtn.attention{
  background:rgba(250,204,21,.18) !important;
  border-color:rgba(250,204,21,.45) !important;
  color:#fde68a !important;
}


/* v71: mobile layout cleanup with persistent top tabs.
   The mobile experience is organized into Players, Rules, and Chat tabs.
   Start/Add Bot stay in Players. Settings + rules live under Rules. */
@media (max-width: 820px){
  html, body{
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  body.in-game{
    padding-top:58px !important;
    padding-bottom:12px !important;
  }
  .mobile-panel-tabs{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    top:calc(6px + env(safe-area-inset-top, 0px)) !important;
    bottom:auto !important;
    z-index:1400 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:auto !important;
    padding:8px !important;
    border-radius:18px !important;
    background:rgba(2,6,23,.88) !important;
    border:1px solid rgba(148,163,184,.34) !important;
    box-shadow:0 12px 34px rgba(2,6,23,.38) !important;
    backdrop-filter:blur(12px) !important;
  }
  .mobile-panel-tab{
    min-height:42px !important;
    border-radius:14px !important;
    font-size:14px !important;
    background:rgba(15,23,42,.94) !important;
    color:#dbeafe !important;
  }
  .mobile-panel-tab.active{
    background:linear-gradient(135deg,rgba(250,204,21,.96),rgba(96,165,250,.84)) !important;
    color:#020617 !important;
  }

  /* Keep the board available below the sticky tabs and make it fit phone width. */
  .three-layout{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    min-height:auto !important;
    padding-top:0 !important;
  }
  .center{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    padding-top:0 !important;
  }
  .board-shell,
  #board{
    max-width:calc(100vw - 14px) !important;
    max-height:calc(100vw - 14px) !important;
  }
  #board{
    width:min(calc(100vw - 14px), calc(100vh - 130px)) !important;
    height:min(calc(100vw - 14px), calc(100vh - 130px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .right-rail,
  .left-rail{
    order:2 !important;
    width:100% !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
  }

  #game #hostPanel,
  #game #playersPanel,
  #game #rulesPanel,
  #game #chatPanel,
  #game #crossGamesPanel{
    display:none !important;
  }

  /* Selected tab panel sits below the board, not over it, with internal scrolling if it gets tall. */
  #game[data-mobile-tab="players"] #playersPanel,
  #game[data-mobile-tab="rules"] #hostPanel,
  #game[data-mobile-tab="rules"] #rulesPanel,
  #game[data-mobile-tab="chat"] #chatPanel{
    display:block !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    z-index:auto !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:42vh !important;
    height:auto !important;
    overflow:auto !important;
    margin:0 auto 10px !important;
    border-radius:18px !important;
    padding:12px !important;
    box-sizing:border-box !important;
    background:rgba(15,23,42,.94) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 14px 34px rgba(2,6,23,.30) !important;
    backdrop-filter:blur(12px) !important;
  }

  #game[data-mobile-tab="players"] #players{
    max-height:26vh !important;
    overflow:auto !important;
    padding-right:2px !important;
  }
  #game[data-mobile-tab="chat"] #chatPanel{
    display:flex !important;
    flex-direction:column !important;
    max-height:44vh !important;
  }
  #game[data-mobile-tab="chat"] #chatLog{
    flex:1 1 auto !important;
    min-height:180px !important;
    max-height:30vh !important;
    overflow:auto !important;
  }
  #game[data-mobile-tab="rules"] #hostPanel,
  #game[data-mobile-tab="rules"] #rulesPanel{
    max-height:34vh !important;
  }
  #game[data-mobile-tab="rules"] #rulesPanel.rules-collapsed{
    max-height:none !important;
  }

  .player-panel-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }
  .player-panel-actions .bot-setup-buttons{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .player-panel-actions button{
    min-height:44px !important;
  }
}


/* v72: mobile board should scale as one complete board instead of reflowing parts independently. */
@media (max-width: 820px){
  body.in-game .center,
  body.in-game .middle-board{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
  }
  body.in-game .board-card{
    width:var(--mobile-board-visual, calc(100vw - 14px)) !important;
    height:var(--mobile-board-visual, calc(100vw - 14px)) !important;
    max-width:var(--mobile-board-visual, calc(100vw - 14px)) !important;
    max-height:var(--mobile-board-visual, calc(100vw - 14px)) !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 auto 10px !important;
    overflow:visible !important;
    border-radius:18px !important;
    box-sizing:content-box !important;
  }
  body.in-game #board{
    width:720px !important;
    height:720px !important;
    min-width:720px !important;
    min-height:720px !important;
    max-width:none !important;
    max-height:none !important;
    transform:scale(var(--mobile-board-scale, .52)) !important;
    transform-origin:top left !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  body.in-game #board .tile,
  body.in-game #board .center-card,
  body.in-game #board .tokens,
  body.in-game #board .token,
  body.in-game #board .tile-content{
    transform-origin:center center;
  }
  body.in-game .mobile-panel-tabs{
    max-width:calc(100vw - 16px) !important;
  }
}


/* v73: center the mobile board as one scaled visual unit. */
@media (max-width: 820px){
  body.in-game .middle-board,
  body.in-game .center{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.in-game .board-card{
    position:relative !important;
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
  }
  body.in-game #board{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    margin:0 !important;
    transform:translateX(-50%) scale(var(--mobile-board-scale, .52)) !important;
    transform-origin:top center !important;
  }
}

/* v74: mobile game view scrolls normally, with safe space below bottom controls.
   Keep the fixed Players/Rules/Chat tabs at the top, but place the logo/room info,
   leave button, board, and selected panel below those tabs in normal document flow. */
@media (max-width: 820px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  body.in-game{
    height:auto !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-top:calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.in-game .app{
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    padding:6px 8px 0 !important;
  }
  body.in-game .topbar{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:1 !important;
    pointer-events:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    margin:0 0 10px !important;
    padding:0 2px !important;
  }
  body.in-game .brand-block{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  body.in-game .topbar-logo{
    width:min(186px, 49vw) !important;
    max-height:50px !important;
  }
  body.in-game .room-controls{
    flex:0 1 auto !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:6px !important;
    min-width:0 !important;
    max-width:48vw !important;
    flex-wrap:wrap !important;
  }
  body.in-game .room-pill{
    max-width:48vw !important;
    padding:6px 8px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.in-game .leave-game-btn{
    min-height:34px !important;
    padding:7px 9px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }
  body.in-game .three-layout{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:0 !important;
  }
  body.in-game .middle-board{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    padding-top:0 !important;
  }
  body.in-game .board-card{
    margin:0 auto 10px !important;
  }
  body.in-game .right-rail,
  body.in-game .left-rail{
    order:2 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }
  #game[data-mobile-tab="players"] #playersPanel,
  #game[data-mobile-tab="rules"] #hostPanel,
  #game[data-mobile-tab="rules"] #rulesPanel,
  #game[data-mobile-tab="chat"] #chatPanel{
    max-height:none !important;
    overflow:visible !important;
    margin-bottom:18px !important;
  }
  #game[data-mobile-tab="players"] #players{
    max-height:none !important;
    overflow:visible !important;
  }
  #game[data-mobile-tab="chat"] #chatPanel{
    max-height:none !important;
    overflow:visible !important;
  }
  #game[data-mobile-tab="chat"] #chatLog{
    min-height:180px !important;
    max-height:38vh !important;
    overflow:auto !important;
  }
  body.in-game .mobile-panel-tabs{
    position:fixed !important;
    top:calc(6px + env(safe-area-inset-top, 0px)) !important;
    left:8px !important;
    right:8px !important;
    z-index:1400 !important;
  }
  body.in-game::after{
    content:"";
    display:block;
    height:calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

/* v75: mobile trade notices and chat tab notifications. */
.mobile-trade-notices{
  display:none;
}
.mobile-tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  margin-left:6px;
  background:#ef4444;
  color:white;
  font-size:11px;
  font-weight:950;
  line-height:1;
  box-shadow:0 0 0 2px rgba(2,6,23,.40);
}
.mobile-panel-tab.new-message-glow{
  animation:mobileChatTabGlow 2.5s ease-out 1;
}
@keyframes mobileChatTabGlow{
  0%,100%{ box-shadow:0 12px 34px rgba(2,6,23,.38); }
  15%{ box-shadow:0 0 0 3px rgba(250,204,21,.78), 0 0 24px rgba(250,204,21,.90), 0 12px 34px rgba(2,6,23,.38); }
  55%{ box-shadow:0 0 0 2px rgba(96,165,250,.62), 0 0 20px rgba(96,165,250,.72), 0 12px 34px rgba(2,6,23,.38); }
}
@media (max-width: 820px){
  body.in-game .mobile-panel-tab{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
  }
  body.in-game .mobile-trade-notices:not(.hidden){
    display:block !important;
    width:min(92%, 360px);
    max-height:76px;
    margin:6px auto 8px;
    padding:7px 8px;
    overflow:auto;
    border-radius:12px;
    background:rgba(15,23,42,.86);
    border:1px solid rgba(250,204,21,.44);
    box-shadow:0 8px 22px rgba(2,6,23,.30), inset 0 0 18px rgba(250,204,21,.08);
    color:#e5e7eb;
    font-size:10px;
    line-height:1.1;
  }
  .mobile-trade-notice-title{
    position:sticky;
    top:0;
    background:rgba(15,23,42,.95);
    color:#fde68a;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding-bottom:4px;
  }
  .mobile-trade-notice-list{
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .mobile-trade-notice-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:6px;
    align-items:center;
    min-height:18px;
    white-space:nowrap;
  }
  .mobile-trade-notice-row span{
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:850;
  }
  .mobile-trade-notice-row span:first-child{ text-align:right; }
  .mobile-trade-notice-row span:last-child{ text-align:left; }
  .mobile-trade-notice-row strong{
    color:#facc15;
    font-size:14px;
  }
}


/* v76: mobile selected tab should be subtle so chat glow stands out. */
@media (max-width: 820px){
  body.in-game .mobile-panel-tab{
    border:2px solid rgba(148,163,184,.34) !important;
    background:rgba(15,23,42,.94) !important;
    color:#dbeafe !important;
    box-shadow:none !important;
  }
  body.in-game .mobile-panel-tab.active{
    border:2px solid rgba(250,204,21,.98) !important;
    background:rgba(15,23,42,.94) !important;
    color:#fef3c7 !important;
    box-shadow:0 0 0 1px rgba(250,204,21,.24) inset !important;
  }
  body.in-game .mobile-panel-tab.new-message-glow{
    animation:mobileChatTabGlowV76 2.5s ease-out 1 !important;
  }
}
@keyframes mobileChatTabGlowV76{
  0%,100%{
    box-shadow:0 0 0 1px rgba(250,204,21,.24) inset !important;
  }
  12%{
    box-shadow:0 0 0 4px rgba(250,204,21,.90), 0 0 28px rgba(250,204,21,.95), 0 0 0 1px rgba(250,204,21,.34) inset !important;
  }
  45%{
    box-shadow:0 0 0 3px rgba(96,165,250,.75), 0 0 24px rgba(96,165,250,.85), 0 0 0 1px rgba(250,204,21,.28) inset !important;
  }
}


/* v77: mobile side ownership banners should remain centered and thicker. */
@media (max-width: 760px){
  #board .tile.side-left .tile-content > .owner-strip.relative-owner-strip,
  #board .tile.side-right .tile-content > .owner-strip.relative-owner-strip,
  #board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip,
  #board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip{
    height:17.5px !important;
    min-height:17.5px !important;
    flex-basis:17.5px !important;
    flex:0 0 17.5px !important;
    align-self:stretch !important;
    margin:auto 4px 4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    transform-origin:center center !important;
    font-size:7px !important;
    line-height:1 !important;
  }
  #board .tile.side-left .tile-content > .owner-strip.relative-owner-strip span,
  #board .tile.side-right .tile-content > .owner-strip.relative-owner-strip span,
  #board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip span,
  #board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip span{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
  }
}


/* v78: make mobile side ownership banners visibly larger on phones/tablets.
   Previous 75% bump could be lost after the whole board is scaled down, so this
   uses a wider breakpoint and a much larger fixed banner height while keeping
   the banner centered within the rotated side tile content. */
@media (max-width: 900px){
  body.in-game #board .tile.side-left .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.side-right .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip{
    height:28px !important;
    min-height:28px !important;
    flex-basis:28px !important;
    flex:0 0 28px !important;
    align-self:stretch !important;
    width:auto !important;
    max-width:none !important;
    margin:auto 3px 3px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    transform-origin:center center !important;
    font-size:9px !important;
    line-height:1 !important;
    letter-spacing:.05em !important;
  }
  body.in-game #board .tile.side-left .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.side-right .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip span{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    display:block !important;
  }
}


/* v79: mobile side ownership banners need more LENGTH, not just thickness.
   Side spaces are rotated, so the visible banner length comes from its width.
   Widen the strip aggressively, center it, and let the tile crop any excess. */
@media (max-width: 900px){
  body.in-game #board .tile.side-left,
  body.in-game #board .tile.side-right{
    overflow:hidden !important;
  }
  body.in-game #board .tile.side-left .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.side-right .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip{
    width:calc(100% + 46px) !important;
    max-width:calc(100% + 46px) !important;
    min-width:calc(100% + 46px) !important;
    align-self:center !important;
    height:30px !important;
    min-height:30px !important;
    flex-basis:30px !important;
    flex:0 0 30px !important;
    margin:auto 0 3px !important;
    padding:0 6px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    font-size:9px !important;
    line-height:1 !important;
  }
  body.in-game #board .tile.side-left .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.side-right .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-left > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-right > .tile-content > .owner-strip.relative-owner-strip span{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
  }
}


/* v80: Mobile side ownership banners need a direct visual scale.
   Prior width/height-only changes were being neutralized by older side-strip inset rules
   and by the full-board mobile scale. This targets only left/right owned-property strips
   on mobile and scales the banner itself: 75% wider and 50% taller, centered. */
@media (max-width: 900px){
  body.in-game #board .tile.side-left:not(.corner),
  body.in-game #board .tile.side-right:not(.corner),
  body.in-game #board .tile.side-left:not(.corner) > .tile-content,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content{
    overflow:visible !important;
  }
  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:-1px !important;
    width:60% !important;
    min-width:60% !important;
    max-width:60% !important;
    height:18px !important;
    min-height:18px !important;
    max-height:18px !important;
    margin:0 !important;
    padding:0 5px !important;
    box-sizing:border-box !important;
    transform:translateX(-50%) scaleX(1.75) scaleY(1.5) !important;
    transform-origin:center center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    z-index:180 !important;
    overflow:hidden !important;
    font-size:8px !important;
    line-height:1 !important;
  }
  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
    transform:scaleX(.5714) scaleY(.6667) !important;
    transform-origin:center center !important;
    width:175% !important;
    max-width:175% !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* v81: mobile side ownership banner correction.
   Restore the property header/color bar behavior by preventing the owner banner from
   visually taking over the property face, then resize the owner banner from v80:
   50% of the previous width and 75% of the previous height. */
@media (max-width: 900px){
  body.in-game #board .tile.side-left:not(.corner) > .tile-content,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content{
    overflow:hidden !important;
  }

  /* Keep the property header/color bar as the normal top property band. */
  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .bar,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .bar,
  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
    position:relative !important;
    z-index:6 !important;
    transform:none !important;
  }

  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:1px !important;
    width:52.5% !important;
    min-width:52.5% !important;
    max-width:52.5% !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    flex:0 0 20px !important;
    margin:0 !important;
    padding:0 3px !important;
    box-sizing:border-box !important;
    transform:translateX(-50%) !important;
    transform-origin:center center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    z-index:18 !important;
    overflow:hidden !important;
    font-size:7px !important;
    line-height:1 !important;
  }

  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


/* v83: Slightly increase mobile side ownership banner height while keeping restored side header bars.
   v81 clipped the rotated side tile content, which could make the top property color
   band disappear. Keep the side content visible, keep the property header as a normal
   full-width band, and size only the owner banner: same width as v81, 75% of v81 height,
   with smaller corners to match the top-row ownership banners. */
@media (max-width: 900px){
  body.in-game #board .tile.side-left:not(.corner),
  body.in-game #board .tile.side-right:not(.corner){
    overflow:hidden !important;
  }

  body.in-game #board .tile.side-left:not(.corner) > .tile-content,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content{
    overflow:visible !important;
  }

  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .bar,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .bar,
  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .tile-header-bar,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .tile-header-bar{
    display:block !important;
    position:relative !important;
    z-index:30 !important;
    width:calc(100% + 8px) !important;
    min-width:calc(100% + 8px) !important;
    max-width:calc(100% + 8px) !important;
    height:13px !important;
    min-height:13px !important;
    flex:0 0 13px !important;
    margin:0 -4px 3px !important;
    border-radius:0 !important;
    transform:none !important;
  }

  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile:not(.flag-tile).side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip,
  body.in-game #board .tile:not(.flag-tile).side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:1px !important;
    width:52.5% !important;
    min-width:52.5% !important;
    max-width:52.5% !important;
    height:17px !important;
    min-height:17px !important;
    max-height:17px !important;
    flex:0 0 17px !important;
    margin:0 !important;
    padding:0 2px !important;
    box-sizing:border-box !important;
    transform:translateX(-50%) !important;
    transform-origin:center center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:6px !important;
    z-index:22 !important;
    overflow:hidden !important;
    font-size:6px !important;
    line-height:1 !important;
  }

  body.in-game #board .tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-left:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span,
  body.in-game #board .tile.flag-tile.side-right:not(.corner) > .tile-content > .owner-strip.relative-owner-strip span{
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


/* v84: tighter board spacing and thinner property typography.
   Keep the full board proportional, but reduce the space gutters to the thinnest practical line. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  gap:1px !important;
  padding:3px !important;
}

/* Make property names use a thinner/narrower font stack. Abadi MT is used when available,
   with common narrow/thin fallbacks for systems that do not have Abadi installed. */
#board .tile > .tile-content > .name,
#board .tile .name{
  font-family:"Abadi MT Condensed Light","Abadi MT","Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
  line-height:1.02 !important;
}

/* Slightly tighten tile rounding now that the gutters are thinner. */
#board .tile{
  border-radius:6px !important;
}
#board .tile.corner,
#board .tile.corner-space{
  border-radius:8px !important;
}

@media (max-width: 900px){
  body.in-game #board.board,
  body.in-game .board#board{
    gap:1px !important;
    padding:2px !important;
  }
  body.in-game #board .tile > .tile-content > .name,
  body.in-game #board .tile .name{
    font-family:"Abadi MT Condensed Light","Abadi MT","Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif !important;
    font-weight:600 !important;
    letter-spacing:-0.015em !important;
  }
}


/* v85: lighten the visible board gutter between property spaces.
   The thinner v84 gaps expose the board background more, so make that
   background lighter while keeping the same 1px spacing. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  background:linear-gradient(135deg,rgba(241,245,249,.72),rgba(203,213,225,.38)) !important;
}

@media (max-width: 900px){
  body.in-game #board.board,
  body.in-game .board#board{
    background:linear-gradient(135deg,rgba(248,250,252,.78),rgba(203,213,225,.44)) !important;
  }
}


/* v86: increase property text size while keeping the thin/narrow font style from v84. */
#board .tile > .tile-content > .name,
#board .tile .name{
  font-size:11.5px !important;
}
#board .tile.side-left .name,
#board .tile.side-right .name{
  font-size:10px !important;
}
#board .tile.side-bottom .name,
#board .tile.side-top .name{
  font-size:11.5px !important;
}
#board .tile > .tile-content > .price,
#board .tile > .tile-content > .rent,
#board .tile > .tile-content > .houses{
  font-size:9.5px !important;
}
#board .tile.side-left .price,
#board .tile.side-right .price,
#board .tile.side-left .rent,
#board .tile.side-right .rent{
  font-size:8.5px !important;
}
@media (max-width: 900px){
  body.in-game #board .tile > .tile-content > .name,
  body.in-game #board .tile .name{
    font-size:12px !important;
  }
  body.in-game #board .tile.side-left .name,
  body.in-game #board .tile.side-right .name{
    font-size:10.5px !important;
  }
  body.in-game #board .tile > .tile-content > .price,
  body.in-game #board .tile > .tile-content > .rent,
  body.in-game #board .tile > .tile-content > .houses{
    font-size:9.8px !important;
  }
  body.in-game #board .tile.side-left .price,
  body.in-game #board .tile.side-right .price,
  body.in-game #board .tile.side-left .rent,
  body.in-game #board .tile.side-right .rent{
    font-size:8.8px !important;
  }
}


/* v87: larger property labels and more breathing room for wrapped/two-line names. */
#board .tile > .tile-content > .name,
#board .tile .name{
  font-size:13px !important;
  line-height:1.08 !important;
  min-height:2.18em !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:visible !important;
}
#board .tile.side-left .name,
#board .tile.side-right .name{
  font-size:11.5px !important;
  line-height:1.08 !important;
  min-height:2.2em !important;
}
#board .tile.side-top .name,
#board .tile.side-bottom .name{
  font-size:13px !important;
  line-height:1.08 !important;
  min-height:2.18em !important;
}
#board .tile > .tile-content > .price,
#board .tile > .tile-content > .rent,
#board .tile > .tile-content > .houses{
  font-size:10.2px !important;
  line-height:1.02 !important;
}
#board .tile.side-left .price,
#board .tile.side-right .price,
#board .tile.side-left .rent,
#board .tile.side-right .rent{
  font-size:9.2px !important;
  line-height:1.02 !important;
}
#board .tile-content{
  gap:1px !important;
}
#board .tile-content .bar{
  margin-bottom:2px !important;
}
#board .owner-strip{
  margin-top:2px !important;
}

@media (max-width: 900px){
  body.in-game #board .tile > .tile-content > .name,
  body.in-game #board .tile .name{
    font-size:13.5px !important;
    line-height:1.08 !important;
    min-height:2.2em !important;
  }
  body.in-game #board .tile.side-left .name,
  body.in-game #board .tile.side-right .name{
    font-size:12px !important;
    line-height:1.08 !important;
    min-height:2.2em !important;
  }
  body.in-game #board .tile > .tile-content > .price,
  body.in-game #board .tile > .tile-content > .rent,
  body.in-game #board .tile > .tile-content > .houses{
    font-size:10.4px !important;
    line-height:1.02 !important;
  }
  body.in-game #board .tile.side-left .price,
  body.in-game #board .tile.side-right .price,
  body.in-game #board .tile.side-left .rent,
  body.in-game #board .tile.side-right .rent{
    font-size:9.4px !important;
    line-height:1.02 !important;
  }
}


/* v89: increase property labels by roughly 2pt, add more line spacing for wrapped names,
   and make the thin gutters match the dark center of the board. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  gap:0.5px !important;
  background:radial-gradient(circle at 50% 15%,rgba(96,165,250,.30),transparent 16rem),rgba(2,6,23,.60) !important;
}
#board .tile > .tile-content > .name,
#board .tile .name{
  font-size:15.6px !important;
  line-height:1.20 !important;
  min-height:2.65em !important;
  padding-top:1px !important;
  padding-bottom:1px !important;
}
#board .tile.side-top .name,
#board .tile.side-bottom .name{
  font-size:15.6px !important;
  line-height:1.20 !important;
  min-height:2.65em !important;
}
#board .tile.side-left .name,
#board .tile.side-right .name{
  font-size:14.1px !important;
  line-height:1.20 !important;
  min-height:2.65em !important;
}
#board .tile-content{
  gap:0 !important;
}
@media (max-width: 900px){
  body.in-game #board.board,
  body.in-game .board#board{
    gap:0.5px !important;
    background:radial-gradient(circle at 50% 15%,rgba(96,165,250,.30),transparent 16rem),rgba(2,6,23,.60) !important;
  }
  body.in-game #board .tile > .tile-content > .name,
  body.in-game #board .tile .name{
    font-size:16.1px !important;
    line-height:1.20 !important;
    min-height:2.7em !important;
  }
  body.in-game #board .tile.side-top .name,
  body.in-game #board .tile.side-bottom .name{
    font-size:16.1px !important;
    line-height:1.20 !important;
    min-height:2.7em !important;
  }
  body.in-game #board .tile.side-left .name,
  body.in-game #board .tile.side-right .name{
    font-size:14.6px !important;
    line-height:1.20 !important;
    min-height:2.7em !important;
  }
}

/* v89: stronger board label/gap patch.
   Earlier font-size changes were partially hidden because older rules gave the
   name flex/min-height sizing and the whole mobile board is scaled as one unit.
   Use a direct visual scale on the name block and remove extra internal limits. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  gap:0 !important;
  padding:1px !important;
  background:radial-gradient(circle at 50% 15%,rgba(96,165,250,.30),transparent 16rem),rgba(2,6,23,.60) !important;
}
#board .tile,
body.in-game #board .tile{
  margin:0 !important;
  border-radius:5px !important;
}
#board .tile > .tile-content,
body.in-game #board .tile > .tile-content{
  gap:0 !important;
  padding-left:3px !important;
  padding-right:3px !important;
}
#board .tile > .tile-content > .bar,
body.in-game #board .tile > .tile-content > .bar,
#board .tile > .tile-content > .tile-header-bar,
body.in-game #board .tile > .tile-content > .tile-header-bar{
  margin-bottom:1px !important;
}
#board .tile > .tile-content > .name,
#board .tile .name,
body.in-game #board .tile > .tile-content > .name,
body.in-game #board .tile .name{
  font-family:"Abadi MT Condensed Light","Abadi MT","Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif !important;
  font-size:18px !important;
  line-height:1.28 !important;
  min-height:0 !important;
  flex:1 1 auto !important;
  padding:0 1px !important;
  overflow:visible !important;
  transform:scale(1.10) !important;
  transform-origin:center center !important;
}
#board .tile.side-left > .tile-content > .name,
#board .tile.side-right > .tile-content > .name,
#board .tile.side-left .name,
#board .tile.side-right .name,
body.in-game #board .tile.side-left > .tile-content > .name,
body.in-game #board .tile.side-right > .tile-content > .name,
body.in-game #board .tile.side-left .name,
body.in-game #board .tile.side-right .name{
  font-size:16px !important;
  line-height:1.28 !important;
  transform:scale(1.10) !important;
}
#board .tile.side-top > .tile-content > .name,
#board .tile.side-bottom > .tile-content > .name,
body.in-game #board .tile.side-top > .tile-content > .name,
body.in-game #board .tile.side-bottom > .tile-content > .name{
  font-size:18px !important;
  line-height:1.28 !important;
}
#board .tile > .tile-content > .space-price,
body.in-game #board .tile > .tile-content > .space-price{
  margin-top:1px !important;
}
@media (max-width: 900px){
  body.in-game #board.board,
  body.in-game .board#board{
    gap:0 !important;
    padding:1px !important;
  }
  body.in-game #board .tile > .tile-content > .name,
  body.in-game #board .tile .name{
    font-size:18.5px !important;
    line-height:1.30 !important;
    transform:scale(1.12) !important;
  }
  body.in-game #board .tile.side-left > .tile-content > .name,
  body.in-game #board .tile.side-right > .tile-content > .name,
  body.in-game #board .tile.side-left .name,
  body.in-game #board .tile.side-right .name{
    font-size:16.5px !important;
    line-height:1.30 !important;
    transform:scale(1.12) !important;
  }
}


/* v90: normalize property label sizing across Classic and World Cities,
   pull back the v89 label over-adjustment by about 2pt, and make board gutters as thin as possible. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  gap:0 !important;
  padding:0 !important;
  background:radial-gradient(circle at 50% 15%,rgba(96,165,250,.30),transparent 16rem),rgba(2,6,23,.60) !important;
}
#board .tile,
body.in-game #board .tile{
  margin:0 !important;
}
#board .tile > .tile-content,
body.in-game #board .tile > .tile-content{
  gap:0 !important;
}

/* Apply one defining font size to all normal purchasable board spaces on both boards.
   Special spaces such as Chance/Standby, Community Fund/Upgrade, taxes, corners, etc. keep their own sizing. */
#board .tile.tile-type-property > .tile-content > .name,
#board .tile.tile-type-rail > .tile-content > .name,
#board .tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.tile-type-utility > .tile-content > .name,
#board.board-classic .tile.tile-type-property > .tile-content > .name,
#board.board-classic .tile.tile-type-rail > .tile-content > .name,
#board.board-classic .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.tile-type-utility > .tile-content > .name{
  font-family:"Abadi MT Condensed Light","Abadi MT","Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif !important;
  font-size:16px !important;
  line-height:1.34 !important;
  min-height:0 !important;
  padding:0 1px !important;
  overflow:visible !important;
  transform:scale(1.10) !important;
  transform-origin:center center !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

@media (max-width: 900px){
  body.in-game #board.board,
  body.in-game .board#board{
    gap:0 !important;
    padding:0 !important;
  }
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name{
    font-size:16px !important;
    line-height:1.34 !important;
    transform:scale(1.10) !important;
  }
}


/* v91: reduce regular purchasable-space labels by another 2pt and force the same sizing on World Cities.
   World Cities flag/property classes had additional board rules, so target both type classes and flag tiles explicitly.
   Special spaces keep their own typography. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  gap:0 !important;
  column-gap:0 !important;
  row-gap:0 !important;
  padding:0 !important;
  border-spacing:0 !important;
  background:radial-gradient(circle at 50% 15%,rgba(96,165,250,.30),transparent 16rem),rgba(2,6,23,.60) !important;
}
#board .tile,
body.in-game #board .tile{
  margin:0 !important;
  outline:0 !important;
}
#board .tile > .tile-content,
body.in-game #board .tile > .tile-content{
  gap:0 !important;
}
#board .tile.tile-type-property > .tile-content > .name,
#board .tile.tile-type-rail > .tile-content > .name,
#board .tile.tile-type-utility > .tile-content > .name,
#board .tile.flag-tile.tile-type-property > .tile-content > .name,
#board .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board .tile.flag-tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
#board.board-classic .tile.tile-type-property > .tile-content > .name,
#board.board-classic .tile.tile-type-rail > .tile-content > .name,
#board.board-classic .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.flag-tile > .tile-content > .name{
  font-family:"Abadi MT Condensed Light","Abadi MT","Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.34 !important;
  min-height:0 !important;
  padding:0 1px !important;
  overflow:visible !important;
  transform:scale(1.10) !important;
  transform-origin:center center !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}
@media (max-width: 900px){
  body.in-game #board.board,
  body.in-game .board#board{
    gap:0 !important;
    column-gap:0 !important;
    row-gap:0 !important;
    padding:0 !important;
  }
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.tile-type-property > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.flag-tile > .tile-content > .name{
    font-size:14px !important;
    line-height:1.34 !important;
    transform:scale(1.10) !important;
  }
}

/* v92: reduce regular purchasable-space board labels by one more point from v91.
   Keep the same selectors so Classic and World Cities normal purchasable spaces share one size.
   Special spaces keep their own typography. */
#board .tile.tile-type-property > .tile-content > .name,
#board .tile.tile-type-rail > .tile-content > .name,
#board .tile.tile-type-utility > .tile-content > .name,
#board .tile.flag-tile.tile-type-property > .tile-content > .name,
#board .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board .tile.flag-tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
#board.board-classic .tile.tile-type-property > .tile-content > .name,
#board.board-classic .tile.tile-type-rail > .tile-content > .name,
#board.board-classic .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-utility > .tile-content > .name{
  font-size:13px !important;
  line-height:1.34 !important;
  transform:scale(1.10) !important;
}
@media (max-width: 900px){
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.tile-type-property > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board.board-world-cities .tile.flag-tile.tile-type-utility > .tile-content > .name{
    font-size:13px !important;
    line-height:1.34 !important;
    transform:scale(1.10) !important;
  }
}

/* v93: make specified special/tax/card board spaces 1pt smaller on Classic and World Cities.
   Use data-tile-index so the rule applies to both board definitions regardless of tile type/class. */
#board .tile[data-tile-index="2"] > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .name,
#board .tile[data-tile-index="7"] > .tile-content > .name,
#board .tile[data-tile-index="17"] > .tile-content > .name,
#board .tile[data-tile-index="22"] > .tile-content > .name,
#board .tile[data-tile-index="33"] > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="4"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="7"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="17"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="22"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="33"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="38"] > .tile-content > .name{
  font-size:12px !important;
  line-height:1.30 !important;
}

/* v93: squeeze the visual gutters as much as possible by removing grid gaps and tightening tile rounding.
   The actual grid gap was already zero; the remaining visible separation was mainly rounded corners and outer shadow. */
#board.board,
.board#board,
body.in-game #board.board,
body.in-game .board#board{
  gap:0 !important;
  column-gap:0 !important;
  row-gap:0 !important;
  padding:0 !important;
  border-spacing:0 !important;
}
#board .tile,
body.in-game #board .tile{
  border-radius:6px !important;
  box-shadow:inset 0 -8px 18px rgba(15,23,42,.08) !important;
}
#board .tile.corner,
body.in-game #board .tile.corner{
  border-radius:8px !important;
}

/* v94: restore selected non-property/special indexes to the same visual size as normal properties on both boards.
   Applies to both Classic and World Cities by index. */
#board .tile[data-tile-index="2"] > .tile-content > .name,
#board .tile[data-tile-index="4"] > .tile-content > .name,
#board .tile[data-tile-index="7"] > .tile-content > .name,
#board .tile[data-tile-index="17"] > .tile-content > .name,
#board .tile[data-tile-index="22"] > .tile-content > .name,
#board .tile[data-tile-index="33"] > .tile-content > .name,
#board .tile[data-tile-index="36"] > .tile-content > .name,
#board .tile[data-tile-index="38"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="4"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="7"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="17"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="22"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="33"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="36"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="38"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="4"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="7"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="22"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="33"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="36"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="38"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="4"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="7"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="22"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="33"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="36"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="38"] > .tile-content > .name{
  font-family:"Abadi MT Condensed Light","Abadi MT","Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.34 !important;
  transform:scale(1.10) !important;
  transform-origin:center center !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}
@media (max-width: 900px){
  body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="4"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="7"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="17"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="22"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="33"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="36"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="38"] > .tile-content > .name{
    font-size:13px !important;
    line-height:1.34 !important;
    transform:scale(1.10) !important;
  }
}

.name-input-row{display:flex;gap:8px;align-items:center;width:100%;}
.name-input-row input{flex:1;min-width:0;}
.icon-btn.random-name-btn{width:42px;min-width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:1.1rem;line-height:1;}

/* v99: desktop responsive board typography.
   Keep the mobile rules from v98 intact, but on desktop/laptop screens let the
   regular board labels scale to the player's actual browser size. */
@media (min-width: 901px){
  body.in-game #board.board,
  body.in-game .board#board,
  #board.board{
    --rumble-desktop-property-font: clamp(12px, min(1.05vw, 1.65vh), 16px);
    --rumble-desktop-property-line: 1.30;
  }

  #board .tile.tile-type-property > .tile-content > .name,
  #board .tile.tile-type-rail > .tile-content > .name,
  #board .tile.tile-type-utility > .tile-content > .name,
  #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
  #board.board-classic .tile.tile-type-property > .tile-content > .name,
  #board.board-classic .tile.tile-type-rail > .tile-content > .name,
  #board.board-classic .tile.tile-type-utility > .tile-content > .name,
  #board.board-world-cities .tile.tile-type-property > .tile-content > .name,
  #board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
  #board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
  #board.board-world-cities .tile.flag-tile.tile-type-property > .tile-content > .name,
  #board.board-world-cities .tile.flag-tile.tile-type-rail > .tile-content > .name,
  #board.board-world-cities .tile.flag-tile.tile-type-utility > .tile-content > .name{
    font-size:var(--rumble-desktop-property-font) !important;
    line-height:var(--rumble-desktop-property-line) !important;
    transform:none !important;
    transform-origin:center center !important;
    max-width:100% !important;
  }

  /* The formerly hand-tuned indexes should follow the same responsive property size on both boards. */
  #board .tile[data-tile-index="2"] > .tile-content > .name,
  #board .tile[data-tile-index="4"] > .tile-content > .name,
  #board .tile[data-tile-index="7"] > .tile-content > .name,
  #board .tile[data-tile-index="17"] > .tile-content > .name,
  #board .tile[data-tile-index="22"] > .tile-content > .name,
  #board .tile[data-tile-index="33"] > .tile-content > .name,
  #board .tile[data-tile-index="36"] > .tile-content > .name,
  #board .tile[data-tile-index="38"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="4"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="7"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="17"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="22"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="33"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="36"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="38"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="2"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="4"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="7"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="17"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="22"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="33"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="36"] > .tile-content > .name,
  #board.board-classic .tile[data-tile-index="38"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="2"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="4"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="7"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="17"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="22"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="33"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="36"] > .tile-content > .name,
  #board.board-world-cities .tile[data-tile-index="38"] > .tile-content > .name{
    font-size:var(--rumble-desktop-property-font) !important;
    line-height:var(--rumble-desktop-property-line) !important;
    transform:none !important;
  }
}


/* v100: safer desktop responsive typography.
   v99 was too aggressive around 1282x900 and could clip names.
   This keeps the desktop sizing responsive, but scales more conservatively and
   tightens gutters further without changing mobile rules. */
@media (min-width: 901px){
  body.in-game #board.board,
  body.in-game .board#board,
  #board.board{
    --rumble-desktop-property-font: clamp(10.5px, min(.92vw, 1.35vh), 12.5px) !important;
    --rumble-desktop-property-line: 1.24 !important;
    gap:0 !important;
    row-gap:0 !important;
    column-gap:0 !important;
    background:#10233f !important;
  }

  #board .tile.tile-type-property > .tile-content > .name,
  #board .tile.tile-type-rail > .tile-content > .name,
  #board .tile.tile-type-utility > .tile-content > .name,
  #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
  #board.board-classic .tile.tile-type-property > .tile-content > .name,
  #board.board-classic .tile.tile-type-rail > .tile-content > .name,
  #board.board-classic .tile.tile-type-utility > .tile-content > .name,
  #board.board-world-cities .tile.tile-type-property > .tile-content > .name,
  #board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
  #board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
  #board.board-world-cities .tile.flag-tile.tile-type-property > .tile-content > .name,
  #board.board-world-cities .tile.flag-tile.tile-type-rail > .tile-content > .name,
  #board.board-world-cities .tile.flag-tile.tile-type-utility > .tile-content > .name,
  #board .tile[data-tile-index="2"] > .tile-content > .name,
  #board .tile[data-tile-index="4"] > .tile-content > .name,
  #board .tile[data-tile-index="7"] > .tile-content > .name,
  #board .tile[data-tile-index="17"] > .tile-content > .name,
  #board .tile[data-tile-index="22"] > .tile-content > .name,
  #board .tile[data-tile-index="33"] > .tile-content > .name,
  #board .tile[data-tile-index="36"] > .tile-content > .name,
  #board .tile[data-tile-index="38"] > .tile-content > .name{
    font-size:var(--rumble-desktop-property-font) !important;
    line-height:var(--rumble-desktop-property-line) !important;
    transform:none !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  #board .tile,
  body.in-game #board .tile{
    border-radius:3px !important;
    box-shadow:none !important;
    margin:0 !important;
  }
  #board .tile.corner,
  body.in-game #board .tile.corner{
    border-radius:4px !important;
  }
}

/* v101: move regular board text up slightly after v100 safer responsive sizing.
   Applies to both Classic and World Cities while preserving special-space styling. */
#board .tile.tile-type-property > .tile-content > .name,
#board .tile.tile-type-rail > .tile-content > .name,
#board .tile.tile-type-utility > .tile-content > .name,
#board .tile.flag-tile.tile-type-property > .tile-content > .name,
#board .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board .tile.flag-tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
#board.board-classic .tile.tile-type-property > .tile-content > .name,
#board.board-classic .tile.tile-type-rail > .tile-content > .name,
#board.board-classic .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-utility > .tile-content > .name{
  transform:translateY(-3px) !important;
  transform-origin:center center !important;
}

#board .tile.tile-type-property > .tile-content > .space-price,
#board .tile.tile-type-rail > .tile-content > .space-price,
#board .tile.tile-type-utility > .tile-content > .space-price,
#board .tile.tile-type-property > .tile-content > .price,
#board .tile.tile-type-rail > .tile-content > .price,
#board .tile.tile-type-utility > .tile-content > .price,
body.in-game #board .tile.tile-type-property > .tile-content > .space-price,
body.in-game #board .tile.tile-type-rail > .tile-content > .space-price,
body.in-game #board .tile.tile-type-utility > .tile-content > .space-price{
  transform:translateY(-2px) !important;
}

@media (max-width: 900px){
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name{
    transform:translateY(-2px) !important;
  }
}


/* v102: move board text up a little more after v101.
   Applies to regular purchasable/transport/utility labels on both Classic and World Cities. */
#board .tile.tile-type-property > .tile-content > .name,
#board .tile.tile-type-rail > .tile-content > .name,
#board .tile.tile-type-utility > .tile-content > .name,
#board .tile.flag-tile.tile-type-property > .tile-content > .name,
#board .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board .tile.flag-tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.tile-type-utility > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name,
#board.board-classic .tile.tile-type-property > .tile-content > .name,
#board.board-classic .tile.tile-type-rail > .tile-content > .name,
#board.board-classic .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.tile-type-utility > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-property > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-rail > .tile-content > .name,
#board.board-world-cities .tile.flag-tile.tile-type-utility > .tile-content > .name{
  transform:translateY(-5px) !important;
  transform-origin:center center !important;
}

#board .tile.tile-type-property > .tile-content > .space-price,
#board .tile.tile-type-rail > .tile-content > .space-price,
#board .tile.tile-type-utility > .tile-content > .space-price,
#board .tile.tile-type-property > .tile-content > .price,
#board .tile.tile-type-rail > .tile-content > .price,
#board .tile.tile-type-utility > .tile-content > .price,
body.in-game #board .tile.tile-type-property > .tile-content > .space-price,
body.in-game #board .tile.tile-type-rail > .tile-content > .space-price,
body.in-game #board .tile.tile-type-utility > .tile-content > .space-price{
  transform:translateY(-3px) !important;
}

@media (max-width: 900px){
  body.in-game #board .tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.tile-type-utility > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-property > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-rail > .tile-content > .name,
  body.in-game #board .tile.flag-tile.tile-type-utility > .tile-content > .name{
    transform:translateY(-3px) !important;
  }
}


/* v103: move only board space index 2 name higher to prevent lower-resolution clipping.
   Applies to both Classic and World Cities. Other spaces retain v102 placement. */
#board .tile[data-tile-index="2"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="2"] > .tile-content > .name{
  transform:translateY(-8px) !important;
  transform-origin:center center !important;
}

@media (max-width: 900px){
  body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
  #board .tile[data-tile-index="2"] > .tile-content > .name{
    transform:translateY(-5px) !important;
  }
}


/* v104: space index 2 low-resolution clipping guard.
   The text had enough geometric room, but the token/rotated tile stacking layer could visually cover the lower glyphs.
   Raise only the space-2 face/name layer above the token overlay and give the label a little extra descender room. */
#board .tile[data-tile-index="2"],
body.in-game #board .tile[data-tile-index="2"]{
  overflow:visible !important;
}
#board .tile[data-tile-index="2"] > .tile-content,
body.in-game #board .tile[data-tile-index="2"] > .tile-content,
#board.board-classic .tile[data-tile-index="2"] > .tile-content,
#board.board-world-cities .tile[data-tile-index="2"] > .tile-content{
  overflow:visible !important;
  z-index:32 !important;
  padding-bottom:20px !important;
}
#board .tile[data-tile-index="2"] > .tile-content > .name,
body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-classic .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="2"] > .tile-content > .name{
  position:relative !important;
  z-index:36 !important;
  overflow:visible !important;
  line-height:1.34 !important;
  padding-bottom:3px !important;
  margin-bottom:2px !important;
  transform:translateY(-9px) !important;
}
#board .tile[data-tile-index="2"] > .tokens,
body.in-game #board .tile[data-tile-index="2"] > .tokens{
  z-index:6 !important;
}
@media (max-width:900px){
  #board .tile[data-tile-index="2"] > .tile-content > .name,
  body.in-game #board .tile[data-tile-index="2"] > .tile-content > .name{
    transform:translateY(-6px) !important;
  }
}


/* v105: responsive lobby header/logo spacing guard.
   Prevent the top-left logo/header from overlapping the centered lobby card
   on shorter desktop windows and browser-simulated resolutions. */
@media (min-width: 900px){
  body.in-lobby .topbar{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    margin:0 auto clamp(10px, 1.8vh, 22px) !important;
    padding:clamp(6px, 1.1vh, 12px) clamp(10px, 1.6vw, 18px) 0 !important;
    align-items:flex-start !important;
    box-sizing:border-box !important;
  }
  body.in-lobby .brand-block{
    max-width:min(46vw, 520px) !important;
  }
  body.in-lobby .topbar-logo{
    width:clamp(210px, 22vw, 420px) !important;
    max-height:clamp(58px, 10vh, 104px) !important;
    object-fit:contain !important;
  }
  body.in-lobby .hero{
    margin-top:0 !important;
    min-height:calc(100dvh - clamp(92px, 13vh, 142px)) !important;
    padding-top:clamp(6px, 1.2vh, 18px) !important;
    box-sizing:border-box !important;
  }
  body.in-lobby .lobby-card{
    margin-top:0 !important;
  }
}
@media (min-width: 900px) and (max-height: 780px){
  body.in-lobby .topbar{
    margin-bottom:8px !important;
    padding-top:5px !important;
  }
  body.in-lobby .topbar-logo{
    width:clamp(180px, 19vw, 330px) !important;
    max-height:clamp(46px, 8.2vh, 70px) !important;
  }
  body.in-lobby .brand-block p{
    display:none !important;
  }
  body.in-lobby .hero{
    min-height:calc(100dvh - 82px) !important;
    padding-top:6px !important;
  }
  body.in-lobby .lobby-card{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
}
@media (min-width: 1000px) and (max-width: 1350px){
  body.in-lobby .topbar-logo{
    width:clamp(170px, 18vw, 300px) !important;
    max-height:clamp(46px, 7.8vh, 70px) !important;
  }
  body.in-lobby .lobby-card{
    width:min(720px, calc(100vw - 430px)) !important;
  }
}
@media (min-width: 900px) and (max-width: 1100px){
  body.in-lobby .brand-block{
    max-width:100% !important;
    align-items:center !important;
  }
  body.in-lobby .topbar{
    justify-content:center !important;
    text-align:center !important;
  }
  body.in-lobby .room-controls{
    display:none !important;
  }
  body.in-lobby .topbar-logo{
    width:clamp(190px, 30vw, 330px) !important;
    max-height:72px !important;
  }
  body.in-lobby .lobby-card{
    width:min(780px, 94vw) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* v106: restore top-left lobby logo while scaling the center lobby card to fit.
   v105 centered the header/logo on narrower desktop widths; this override keeps the
   logo anchored top-left and makes the lobby panel responsive instead. */
@media (min-width: 900px){
  body.in-lobby .topbar{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    text-align:left !important;
    margin:0 0 clamp(6px, 1.2vh, 16px) !important;
    padding:clamp(6px, 1vh, 12px) clamp(10px, 1.6vw, 18px) 0 !important;
    box-sizing:border-box !important;
  }
  body.in-lobby .brand-block{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left !important;
    max-width:min(44vw, 520px) !important;
    margin:0 !important;
  }
  body.in-lobby .topbar-logo{
    display:block !important;
    margin:0 !important;
    width:clamp(180px, 22vw, 390px) !important;
    max-height:clamp(50px, 9vh, 96px) !important;
    object-fit:contain !important;
    object-position:left top !important;
  }
  body.in-lobby .room-controls{
    display:flex !important;
  }
  body.in-lobby .hero{
    display:block !important;
    position:relative !important;
    margin-top:0 !important;
    min-height:calc(100dvh - clamp(78px, 12vh, 130px)) !important;
    padding:clamp(4px, .8vh, 12px) clamp(14px, 2vw, 34px) 34px !important;
    box-sizing:border-box !important;
  }
  body.in-lobby .lobby-card{
    --lobby-card-scale:1;
    width:min(780px, 52vw, calc(100vw - 500px)) !important;
    max-width:780px !important;
    margin:0 auto !important;
    transform:scale(var(--lobby-card-scale)) !important;
    transform-origin:top center !important;
  }
}

@media (min-width:1000px) and (max-width:1390px){
  body.in-lobby .lobby-card{
    width:min(720px, 54vw, calc(100vw - 420px)) !important;
    margin-left:clamp(18px, 4vw, 70px) !important;
    margin-right:auto !important;
  }
}

@media (min-width:900px) and (max-width:1100px){
  body.in-lobby .topbar{
    justify-content:space-between !important;
    text-align:left !important;
  }
  body.in-lobby .brand-block{
    max-width:min(48vw, 420px) !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  body.in-lobby .topbar-logo{
    width:clamp(165px, 24vw, 260px) !important;
    max-height:64px !important;
  }
  body.in-lobby .room-controls{
    display:none !important;
  }
  body.in-lobby .lobby-card{
    width:min(720px, 94vw) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:900px) and (max-height:800px){
  body.in-lobby .lobby-card{ --lobby-card-scale:.94; }
}
@media (min-width:900px) and (max-height:720px){
  body.in-lobby .topbar-logo{
    width:clamp(160px, 18vw, 290px) !important;
    max-height:58px !important;
  }
  body.in-lobby .brand-block p{ display:none !important; }
  body.in-lobby .hero{ padding-top:3px !important; }
  body.in-lobby .lobby-card{ --lobby-card-scale:.88; }
}
@media (min-width:900px) and (max-height:650px){
  body.in-lobby .lobby-card{ --lobby-card-scale:.80; }
}


/* v107: first-set momentum helper UI polish, hidden profanity control, centered game logo over chat, board glow. */
.hidden-setting,
.profanity-monitoring-setting{
  display:none !important;
}
body.in-game .board-card{
  box-shadow:
    0 0 18px rgba(250, 204, 21, .24),
    0 0 34px rgba(56, 189, 248, .18),
    0 0 58px rgba(168, 85, 247, .16),
    0 24px 80px rgba(0,0,0,.30) !important;
}
body.in-game .board{
  box-shadow:
    0 0 10px rgba(255,255,255,.18) inset,
    0 0 18px rgba(250,204,21,.18),
    0 0 34px rgba(34,211,238,.15),
    0 0 54px rgba(236,72,153,.12) !important;
}
.board .center-logo{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity 1.8s ease, transform 1.8s ease, max-height 1.8s ease, margin 1.8s ease;
  overflow:hidden;
}
.board.game-started .center-logo{
  opacity:0 !important;
  transform:translateY(-8px) scale(.96) !important;
  max-height:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  pointer-events:none !important;
}
@media (min-width:900px){
  body.in-game .topbar{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
  }
  body.in-game .topbar .brand-block{
    flex:0 0 clamp(260px, 23.5vw, 340px) !important;
    width:clamp(260px, 23.5vw, 340px) !important;
    min-width:260px !important;
    align-items:center !important;
    text-align:center !important;
  }
  body.in-game .topbar .topbar-logo{
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
  }
  body.in-game .topbar .room-controls{
    margin-left:auto !important;
  }
}
@media (max-width:820px){
  body.in-game .board-card,
  body.in-game .board{
    box-shadow:
      0 0 13px rgba(250,204,21,.22),
      0 0 25px rgba(34,211,238,.14),
      0 0 40px rgba(236,72,153,.10) !important;
  }
}


/* v108: requested polish fixes. */
@media (min-width:900px){
  body.in-game .topbar .brand-block{
    flex:0 0 280px !important;
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    display:flex !important;
    align-items:center !important;
    text-align:center !important;
  }
  body.in-game .topbar .topbar-logo{
    width:min(250px, 92%) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
.board .center-card{
  justify-content:center !important;
}
.board .center-logo{
  transition:opacity 2.05s ease, transform 2.05s ease !important;
}
.board.game-started .center-logo{
  opacity:0 !important;
  transform:translateY(0) scale(1) !important;
  max-height:none !important;
  margin-top:0 auto !important;
  margin-bottom:2px !important;
  visibility:hidden !important;
}
body.in-game .board-card{
  position:relative !important;
  overflow:visible !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 22px rgba(250,204,21,.38),
    0 0 46px rgba(34,211,238,.30),
    0 0 72px rgba(236,72,153,.26),
    0 28px 88px rgba(0,0,0,.34) !important;
}
body.in-game .board-card::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:30px;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(135deg,rgba(250,204,21,.30),rgba(34,211,238,.22),rgba(236,72,153,.24),rgba(167,139,250,.20));
  filter:blur(14px);
  opacity:.88;
}
body.in-game #board{
  box-shadow:
    0 0 18px rgba(255,255,255,.16) inset,
    0 0 26px rgba(250,204,21,.28),
    0 0 52px rgba(34,211,238,.22),
    0 0 86px rgba(236,72,153,.18) !important;
}


/* v108 hotfix: fade must not collapse center layout; keep logo slot reserved and make board glow more visible. */
.board.game-started .center-logo{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(0) scale(1) !important;
  max-height:none !important;
  height:auto !important;
  margin-top:0 !important;
  margin-bottom:2px !important;
}
body.in-game .board-card{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.20),
    0 0 24px rgba(250,204,21,.50),
    0 0 52px rgba(34,211,238,.38),
    0 0 86px rgba(236,72,153,.32),
    0 28px 88px rgba(0,0,0,.34) !important;
}
body.in-game .board-card::before{
  opacity:1 !important;
  filter:blur(18px) !important;
  inset:-11px !important;
}
@media (min-width:900px){
  body.in-game .topbar .brand-block{
    flex:0 0 var(--left-panel-width, 280px) !important;
    width:var(--left-panel-width, 280px) !important;
    min-width:var(--left-panel-width, 280px) !important;
    max-width:var(--left-panel-width, 280px) !important;
    align-items:center !important;
    text-align:center !important;
  }
  body.in-game .topbar .topbar-logo{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* v108 final polish: requested 2s center-logo fade without size change, stronger visible board glow,
   top-left game logo centered over the chat column, and right-side token parking nudged upward. */
.board .center-logo{
  transition:opacity 2s ease, transform 2s ease, visibility 0s linear 2s !important;
}
.board.game-started .center-logo{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(0) scale(1) !important;
  max-height:none !important;
  height:auto !important;
  margin-top:0 !important;
  margin-bottom:2px !important;
}
@media (min-width:900px){
  body.in-game .topbar .brand-block{
    flex:0 0 clamp(220px,20vw,310px) !important;
    width:clamp(220px,20vw,310px) !important;
    min-width:clamp(220px,20vw,310px) !important;
    max-width:clamp(220px,20vw,310px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  body.in-game .topbar .topbar-logo{
    display:block !important;
    width:min(250px, 92%) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
@media (min-width:900px) and (max-height:760px){
  body.in-game .topbar .brand-block{
    flex-basis:clamp(205px,19vw,280px) !important;
    width:clamp(205px,19vw,280px) !important;
    min-width:clamp(205px,19vw,280px) !important;
    max-width:clamp(205px,19vw,280px) !important;
  }
}
body.in-game .middle-board,
body.in-game .board-card{
  overflow:visible !important;
}
body.in-game .board-card{
  position:relative !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.26),
    0 0 28px rgba(250,204,21,.60),
    0 0 62px rgba(34,211,238,.48),
    0 0 102px rgba(236,72,153,.42),
    0 30px 95px rgba(0,0,0,.36) !important;
}
body.in-game .board-card::before,
body.in-game .board-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:34px;
}
body.in-game .board-card::before{
  inset:-14px !important;
  z-index:-1 !important;
  background:linear-gradient(135deg,rgba(250,204,21,.44),rgba(34,211,238,.34),rgba(236,72,153,.38),rgba(167,139,250,.30)) !important;
  filter:blur(20px) !important;
  opacity:1 !important;
}
body.in-game .board-card::after{
  inset:-4px;
  z-index:0;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 18px rgba(255,255,255,.18) inset;
}
body.in-game #board{
  position:relative !important;
  z-index:1 !important;
  box-shadow:
    0 0 22px rgba(255,255,255,.18) inset,
    0 0 34px rgba(250,204,21,.34),
    0 0 66px rgba(34,211,238,.26),
    0 0 106px rgba(236,72,153,.22) !important;
}
#board .tile.side-right .tokens{
  right:-3px !important;
  bottom:3px !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
}


/* v112: property trade popup token polish. Center the icon and make special image tokens match standard icon scale. */
.trade-side-token{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  line-height:1 !important;
}
.trade-side-token .animal-mask,
.trade-side-token svg{
  display:block !important;
  width:17px !important;
  height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  margin:0 !important;
  transform:none !important;
  align-self:center !important;
  justify-self:center !important;
}
.trade-side-token .special-token-img,
.trade-side-token.special-token-piece .special-token-img{
  position:static !important;
  display:block !important;
  width:17px !important;
  height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  transform:none !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
}

/* v114: final logo fade/token trade popup corrections. */
.board .center-logo,
.board.game-started .center-logo{
  transform:none !important;
  scale:1 !important;
}
.board .center-logo{
  transition:opacity 2s ease, visibility 0s linear 2s !important;
  transform-origin:center center !important;
}
.board.game-started .center-logo{
  opacity:0 !important;
  visibility:hidden !important;
  max-height:none !important;
  height:auto !important;
  margin-top:0 !important;
  margin-bottom:2px !important;
}
.trade-column-heading .trade-side-token,
.side-deal-panel .trade-side-token,
.trade-side-token{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  box-sizing:border-box !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  padding:0 !important;
  line-height:0 !important;
  text-align:center !important;
}
.trade-column-heading .trade-side-token .animal-mask,
.side-deal-panel .trade-side-token .animal-mask,
.trade-side-token .animal-mask,
.trade-column-heading .trade-side-token svg,
.side-deal-panel .trade-side-token svg,
.trade-side-token svg{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  background:#fff !important;
}
.trade-column-heading .trade-side-token .special-token-img,
.side-deal-panel .trade-side-token .special-token-img,
.trade-side-token .special-token-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  transform:translate(-50%,-50%) scale(1.18) !important;
  transform-origin:center center !important;
  display:block !important;
  pointer-events:none !important;
}

/* v115: lock center-logo fade size, and fix player trade header token centering/special size.
   The start fade must be opacity-only: no width/height/transform transition and no state-driven resize. */
.board .center-card .center-logo,
.board.game-started .center-card .center-logo,
.board .center-logo,
.board.game-started .center-logo{
  width:min(320px,84%) !important;
  max-width:84% !important;
  max-height:78px !important;
  height:auto !important;
  margin:0 auto 2px !important;
  transform:none !important;
  scale:1 !important;
  transform-origin:center center !important;
  transition:opacity 2s ease !important;
  animation:none !important;
}
.board.game-started .center-card .center-logo,
.board.game-started .center-logo{
  opacity:0 !important;
  visibility:visible !important;
  pointer-events:none !important;
}
@media (max-width:820px){
  .board .center-card .center-logo,
  .board.game-started .center-card .center-logo,
  .board .center-logo,
  .board.game-started .center-logo{
    width:min(250px,76%) !important;
    max-height:54px !important;
  }
}

/* The token in the top-left header of the trade popup uses .large-badge, not .trade-side-token. */
.player-detail-header .large-badge,
.compact-player-header .large-badge,
.side-deal-panel .player-detail-header .large-badge,
.side-deal-panel .compact-player-header .large-badge{
  position:relative !important;
  display:block !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  padding:0 !important;
  border-radius:999px !important;
  overflow:visible !important;
  line-height:0 !important;
  text-align:center !important;
  background:currentColor !important;
}
.player-detail-header .large-badge .animal-mask,
.compact-player-header .large-badge .animal-mask,
.side-deal-panel .player-detail-header .large-badge .animal-mask,
.side-deal-panel .compact-player-header .large-badge .animal-mask{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:39px !important;
  height:39px !important;
  max-width:39px !important;
  max-height:39px !important;
  margin:0 !important;
  display:block !important;
  background:#fff !important;
  transform:translate(-54%,-46%) !important;
  -webkit-mask-position:center center !important;
  mask-position:center center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.10)) !important;
}
.player-detail-header .large-badge .special-token-img,
.compact-player-header .large-badge .special-token-img,
.side-deal-panel .player-detail-header .large-badge .special-token-img,
.side-deal-panel .compact-player-header .large-badge .special-token-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  display:block !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  pointer-events:none !important;
}


/* v116: targeted World Cities board-space visual nudges.
   These only affect the World Cities board and only the requested tile numbers. */
#board.board-world-cities .tile[data-tile-index="2"] .tile-header-bar.flag-only,
#board.board-world-cities .tile[data-tile-index="2"] .tile-header-bar.has-image,
#board.board-world-cities .tile[data-tile-index="2"] .space-icon{
  transform:translateY(6px) !important;
}
#board.board-world-cities .tile[data-tile-index="2"] .name{
  transform:translateY(-6px) !important;
}

#board.board-world-cities .tile[data-tile-index="7"] .tile-header-bar.flag-only,
#board.board-world-cities .tile[data-tile-index="7"] .tile-header-bar.has-image,
#board.board-world-cities .tile[data-tile-index="7"] .space-icon,
#board.board-world-cities .tile[data-tile-index="7"] .name,
#board.board-world-cities .tile[data-tile-index="22"] .tile-header-bar.flag-only,
#board.board-world-cities .tile[data-tile-index="22"] .tile-header-bar.has-image,
#board.board-world-cities .tile[data-tile-index="22"] .space-icon,
#board.board-world-cities .tile[data-tile-index="22"] .name{
  transform:translateY(6px) !important;
}

#board.board-world-cities .tile[data-tile-index="17"] .name{
  transform:translateX(7px) !important;
}
#board.board-world-cities .tile[data-tile-index="33"] .name{
  transform:translateX(-7px) !important;
}

#board.board-world-cities .tile[data-tile-index="36"] .tile-header-bar.flag-only,
#board.board-world-cities .tile[data-tile-index="36"] .tile-header-bar.has-image,
#board.board-world-cities .tile[data-tile-index="36"] .space-icon,
#board.board-world-cities .tile[data-tile-index="36"] .name{
  transform:translateX(-7px) !important;
}


/* v122: extend the actual dark grey rounded board backing without changing board size.
   Start from v116. Do not add separate lips/pseudo-elements and do not scale/shrink #board.
   The backing (.board-card.glass) becomes slightly taller via bottom padding, while #board remains
   a square sized from the same content width as before. */
.board-card.glass{
  position:relative !important;
  width:min(100%, calc(100vh - 96px), 900px) !important;
  height:auto !important;
  aspect-ratio:auto !important;
  max-height:none !important;
  padding:10px 10px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.board-card.glass > #board,
.board-card.glass > .board{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  flex:0 0 auto !important;
  margin:0 auto !important;
}

/* v124: vertically center the unchanged square board inside the taller dark grey rounded backing.
   This keeps the actual game board size unchanged while making the top/bottom frame space balanced. */
.board-card.glass{
  padding-top:16px !important;
  padding-bottom:16px !important;
  align-items:center !important;
  justify-content:center !important;
}
.board-card.glass > #board,
.board-card.glass > .board{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* v125: active-turn inactivity countdown shown in the center board. */
.turn-timeout-overlay{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  z-index:35;
  width:min(320px,82%);
  pointer-events:auto;
}
.turn-timeout-card{
  border:2px solid rgba(248,113,113,.85);
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(30,41,59,.94));
  color:#fff;
  border-radius:22px;
  padding:14px 16px 16px;
  box-shadow:0 20px 55px rgba(0,0,0,.45), 0 0 0 4px rgba(248,113,113,.14);
  display:grid;
  gap:7px;
  text-align:center;
}
.turn-timeout-card strong{
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.turn-timeout-card span{
  color:#cbd5e1;
  font-weight:800;
  font-size:12px;
  line-height:1.2;
}
.turn-timeout-clock{
  font-size:34px;
  font-weight:1000;
  line-height:1;
  color:#fecaca;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.turn-timeout-track{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.turn-timeout-bar{
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#facc15,#fb7185);
  transition:width .22s linear;
}
.turn-timeout-overlay.urgent .turn-timeout-card{
  animation:turn-timeout-pulse 1s ease-in-out infinite;
}
@keyframes turn-timeout-pulse{
  0%,100%{box-shadow:0 20px 55px rgba(0,0,0,.45), 0 0 0 4px rgba(248,113,113,.14)}
  50%{box-shadow:0 20px 55px rgba(0,0,0,.45), 0 0 0 8px rgba(248,113,113,.28)}
}


/* v127: make @TWILIGHT portrait tokens appear 30% larger inside every token badge.
   This targets only the Twilight special portraits and leaves DUDUBUBU/standard tokens unchanged. */
.special-token-img.twilight-token-img{
  transform-origin:center center !important;
}
.animal-choice.special-token-choice .special-token-img.twilight-token-img,
.animal-choice.special-token-piece .special-token-img.twilight-token-img{
  width:62px !important;
  height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
}
.preview-chip.special-token-piece .special-token-img.twilight-token-img{
  width:55px !important;
  height:55px !important;
  max-width:55px !important;
  max-height:55px !important;
}
#board .token.special-token-piece .special-token-img.twilight-token-img,
.token.special-token-piece .special-token-img.twilight-token-img,
.travel-token.special-token-piece .special-token-img.twilight-token-img{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  transform:translate(-50%,-50%) !important;
}
.player .token.special-token-piece .special-token-img.twilight-token-img{
  width:47px !important;
  height:47px !important;
  max-width:47px !important;
  max-height:47px !important;
}
.badge .special-token-img.twilight-token-img,
.player-summary .badge .special-token-img.twilight-token-img,
.chat-token .special-token-img.twilight-token-img{
  width:23px !important;
  height:23px !important;
  max-width:23px !important;
  max-height:23px !important;
}
.auction-player-chip .special-token-img.twilight-token-img{
  width:31px !important;
  height:31px !important;
  max-width:31px !important;
  max-height:31px !important;
}
.host-boot-token .special-token-img.twilight-token-img{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
}
.trade-column-heading .trade-side-token .special-token-img.twilight-token-img,
.side-deal-panel .trade-side-token .special-token-img.twilight-token-img,
.trade-side-token .special-token-img.twilight-token-img{
  width:39px !important;
  height:39px !important;
  max-width:39px !important;
  max-height:39px !important;
  transform:translate(-50%,-50%) scale(1.18) !important;
}
.player-detail-header .large-badge .special-token-img.twilight-token-img,
.compact-player-header .large-badge .special-token-img.twilight-token-img,
.side-deal-panel .player-detail-header .large-badge .special-token-img.twilight-token-img,
.side-deal-panel .compact-player-header .large-badge .special-token-img.twilight-token-img{
  width:68px !important;
  height:68px !important;
  max-width:68px !important;
  max-height:68px !important;
  transform:translate(-50%,-50%) !important;
}
.winner-token .special-token-img.twilight-token-img{
  width:75% !important;
  height:75% !important;
  max-width:75% !important;
  max-height:75% !important;
}

/* v127: smaller inactivity countdown, full chat mute curtain, and negative-cash trade note. */
.turn-timeout-overlay{
  pointer-events:auto !important;
}
.turn-timeout-card{
  width:min(300px, 72vw) !important;
  padding:13px 15px 14px !important;
  border-radius:18px !important;
  box-shadow:0 14px 36px rgba(15,23,42,.28) !important;
}
.turn-timeout-card strong{
  font-size:16px !important;
  line-height:1.05 !important;
}
.turn-timeout-card span{
  font-size:11px !important;
  line-height:1.15 !important;
}
.turn-timeout-clock{
  font-size:34px !important;
  margin:5px 0 7px !important;
  line-height:.95 !important;
}
.turn-timeout-track{
  height:7px !important;
}
.chat-panel{
  position:relative !important;
}
.chat-mute-surface{
  position:relative !important;
  overflow:hidden !important;
  border-radius:18px !important;
}
.chat-panel .chat-log{
  transition:filter .26s ease, opacity .26s ease !important;
}
.chat-full-mute-btn{
  margin-top:10px !important;
  width:100% !important;
  min-height:34px !important;
  border-radius:999px !important;
  font-weight:950 !important;
}
.chat-mute-curtain{
  position:absolute !important;
  inset:0 !important;
  z-index:12 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#e5e7eb !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 8px rgba(0,0,0,.45) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:scaleY(0) !important;
  transform-origin:top center !important;
  transition:transform .38s cubic-bezier(.2,.88,.2,1), opacity .22s ease !important;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(30,41,59,.98)) !important;
  border:1px solid rgba(148,163,184,.35) !important;
  box-shadow:inset 0 16px 28px rgba(255,255,255,.05), inset 0 -16px 28px rgba(0,0,0,.24) !important;
}
.chat-mute-curtain::before,
.chat-mute-curtain::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:50% !important;
  background:repeating-linear-gradient(90deg,rgba(30,41,59,.96) 0 16px,rgba(15,23,42,.98) 16px 32px) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.22) !important;
}
.chat-mute-curtain::before{ left:0 !important; border-right:1px solid rgba(255,255,255,.18) !important; }
.chat-mute-curtain::after{ right:0 !important; border-left:1px solid rgba(0,0,0,.28) !important; }
.chat-mute-curtain span{
  position:relative !important;
  z-index:2 !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:rgba(2,6,23,.42) !important;
  border:1px solid rgba(226,232,240,.18) !important;
}
.chat-panel.chat-muted .chat-mute-curtain{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:scaleY(1) !important;
}
.chat-panel.chat-muted .chat-log,
.chat-panel.chat-muted .chat-compose{
  filter:blur(1.5px) grayscale(.25) !important;
}
.chat-panel.chat-muted .incoming-chat-glow,
.chat-panel.chat-muted .moderation-chat-glow{
  animation:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.mobile-panel-tab.chat-tab-muted .mobile-tab-label::after{
  content:" 🔇";
}
.mobile-panel-tab.chat-tab-muted.new-message-glow{
  animation:none !important;
  box-shadow:none !important;
}
.trade-rescue-note{
  margin:4px 0 8px !important;
  padding:7px 9px !important;
  border-radius:12px !important;
  background:rgba(59,130,246,.12) !important;
  border:1px solid rgba(59,130,246,.28) !important;
  color:#1e3a8a !important;
  font-size:12px !important;
  font-weight:850 !important;
}


/* v128: place the inactivity countdown at the dice location and make it compact. */
.dice-zone{
  position:relative !important;
  min-height:86px !important;
}
.dice-zone .turn-timeout-overlay{
  position:absolute !important;
  inset:50% auto auto 50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:42 !important;
  width:min(188px, 96%) !important;
  pointer-events:auto !important;
}
.dice-zone .turn-timeout-card{
  width:100% !important;
  padding:8px 10px 9px !important;
  border-radius:14px !important;
  border-width:1.5px !important;
  gap:3px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.34), 0 0 0 2px rgba(248,113,113,.13) !important;
}
.dice-zone .turn-timeout-card strong{
  font-size:12px !important;
  line-height:1.05 !important;
}
.dice-zone .turn-timeout-card span{
  display:none !important;
}
.dice-zone .turn-timeout-clock{
  font-size:23px !important;
  margin:2px 0 4px !important;
  line-height:.95 !important;
}
.dice-zone .turn-timeout-track{
  height:5px !important;
}
.dice-zone .turn-timeout-overlay:not(.hidden) + .dice{
  opacity:.22 !important;
  filter:blur(.4px) drop-shadow(0 10px 16px rgba(0,0,0,.4)) !important;
}

/* v128: full chat mute uses a 2-second theatre curtain closing from left and right. */
.chat-mute-curtain{
  opacity:1 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transition:none !important;
}
.chat-mute-curtain::before,
.chat-mute-curtain::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:54% !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.16), transparent 46%),
    repeating-linear-gradient(90deg, rgba(30,41,59,.98) 0 14px, rgba(15,23,42,.99) 14px 29px) !important;
  box-shadow:inset 0 0 26px rgba(0,0,0,.36), 0 0 18px rgba(0,0,0,.32) !important;
  transition:transform 2s cubic-bezier(.22,.88,.2,1) !important;
}
.chat-mute-curtain::before{
  left:0 !important;
  transform:translateX(-105%) !important;
  border-right:2px solid rgba(255,255,255,.22) !important;
}
.chat-mute-curtain::after{
  right:0 !important;
  transform:translateX(105%) !important;
  border-left:2px solid rgba(0,0,0,.34) !important;
}
.chat-mute-curtain span{
  opacity:0 !important;
  transform:scale(.96) !important;
  transition:opacity .35s ease 1.65s, transform .35s ease 1.65s !important;
  z-index:3 !important;
}
.chat-panel.chat-muted .chat-mute-curtain{
  pointer-events:auto !important;
}
.chat-panel.chat-muted .chat-mute-curtain::before,
.chat-panel.chat-muted .chat-mute-curtain::after{
  transform:translateX(0) !important;
}
.chat-panel.chat-muted .chat-mute-curtain span{
  opacity:1 !important;
  transform:scale(1) !important;
}

/* v128: player-list portrait tokens now match the in-game token artwork size. */
.player-summary .badge{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  position:relative !important;
}
.player-summary .badge .animal-mask{
  width:29px !important;
  height:29px !important;
}
.player-summary .badge .special-token-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:35px !important;
  height:35px !important;
  max-width:35px !important;
  max-height:35px !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
}
.player-summary .badge .special-token-img.twilight-token-img{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
}


/* v130: make board houses/hotel screen-responsive by anchoring the build strip in the upper third of each property space. */
#board .tile:not(.corner) > .tile-content > .build-strip{
  top:clamp(6px, 22%, 18px) !important;
  left:3px !important;
  right:3px !important;
  height:clamp(18px, 24%, 26px) !important;
  min-height:clamp(18px, 24%, 26px) !important;
  align-items:center !important;
  justify-content:center !important;
}
#board .tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.side-right:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-top:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-left:not(.corner) > .tile-content > .build-strip,
#board .tile.flag-tile.side-right:not(.corner) > .tile-content > .build-strip{
  top:clamp(6px, 22%, 18px) !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-house{
  height:clamp(17px, 22%, 19px) !important;
}
#board .tile:not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board .tile:not(.corner) > .tile-content > .build-strip .mini-hotel{
  height:clamp(19px, 24%, 21px) !important;
}

/* v131: normalized @TWILIGHT portrait artwork.  All character PNGs are trimmed and
   repacked into the same transparent square canvas, so the visible portrait scale
   stays consistent when superimposed on circular token backgrounds. */
.special-token-img.twilight-token-img{
  object-fit:contain !important;
  object-position:center center !important;
}
.animal-choice.special-token-choice .special-token-img.twilight-token-img,
.animal-choice.special-token-piece .special-token-img.twilight-token-img,
.preview-chip.special-token-piece .special-token-img.twilight-token-img,
#board .token.special-token-piece .special-token-img.twilight-token-img,
.token.special-token-piece .special-token-img.twilight-token-img,
.travel-token.special-token-piece .special-token-img.twilight-token-img,
.player .token.special-token-piece .special-token-img.twilight-token-img,
.badge .special-token-img.twilight-token-img,
.player-summary .badge .special-token-img.twilight-token-img,
.chat-token .special-token-img.twilight-token-img,
.auction-player-chip .special-token-img.twilight-token-img,
.host-boot-token .special-token-img.twilight-token-img,
.trade-side-token .special-token-img.twilight-token-img,
.large-badge .special-token-img.twilight-token-img,
.winner-token .special-token-img.twilight-token-img{
  object-fit:contain !important;
  object-position:center center !important;
}


/* v133: start chat at full size immediately, and show player tokens inline in the game log. */
body.in-game .left-rail{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
body.in-game .chat-panel{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  height:100% !important;
  min-height:420px !important;
}
body.in-game .chat-mute-surface{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
}
body.in-game #chatLog.chat-log{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
}
.board-log p{
  display:block !important;
  line-height:1.35 !important;
}
.log-player-token{
  display:inline-grid !important;
  place-items:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  border-radius:999px !important;
  vertical-align:-4px !important;
  margin:0 4px 0 2px !important;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.88), inset 0 -2px 4px rgba(0,0,0,.22) !important;
  overflow:visible !important;
}
.log-player-token .animal-mask,
.log-player-token svg{
  width:13px !important;
  height:13px !important;
}
.log-player-token .special-token-img{
  width:17px !important;
  height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.log-player-token .special-token-img.twilight-token-img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
}
.log-player-name{
  font-weight:900 !important;
  color:#f8fafc !important;
}
@media (max-width:1220px){
  body.in-game .left-rail{
    display:grid !important;
  }
  body.in-game .chat-panel{
    height:420px !important;
    min-height:420px !important;
    flex:0 0 auto !important;
  }
}


/* v134: keep the left chat panel compact for ad space below, but make the inner message screen start at full size immediately. */
body.in-game .left-rail{
  display:block !important;
  min-height:0 !important;
}
body.in-game .chat-panel{
  display:flex !important;
  flex-direction:column !important;
  flex:0 0 auto !important;
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
}
body.in-game .chat-mute-surface{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
}
body.in-game #chatLog.chat-log{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:170px !important;
}
@media (max-width:1220px){
  body.in-game .chat-panel{
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
  }
}


/* v136: reduce Twilight portrait size by 15% in the player details popup / trade header large badges only. */
.player-detail-header .large-badge .special-token-img.twilight-token-img,
.compact-player-header .large-badge .special-token-img.twilight-token-img,
.side-deal-panel .player-detail-header .large-badge .special-token-img.twilight-token-img,
.side-deal-panel .compact-player-header .large-badge .special-token-img.twilight-token-img{
  width:58px !important;
  height:58px !important;
  max-width:58px !important;
  max-height:58px !important;
}


/* v137: lower and shrink the chat mute button so it no longer overlaps the message/send row. */
body.in-game .chat-panel{
  height:312px !important;
  min-height:312px !important;
  max-height:312px !important;
  overflow:visible !important;
}
body.in-game .chat-mute-surface{
  flex:1 1 0 !important;
  min-height:0 !important;
}
body.in-game #chatLog.chat-log{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}
body.in-game .chat-compose{
  flex:0 0 auto !important;
  margin-top:8px !important;
}
body.in-game .chat-full-mute-btn{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:78% !important;
  min-height:28px !important;
  height:28px !important;
  padding:4px 12px !important;
  margin:14px auto 0 !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
}
@media (max-width:1220px){
  body.in-game .chat-panel{
    height:312px !important;
    min-height:312px !important;
    max-height:312px !important;
  }
}


/* v139: World Cities house/hotel strip is explicitly responsive and anchored in the upper third. */
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .build-strip,
#board.board-world-cities .tile.side-top.flag-tile:not(.corner) > .tile-content > .build-strip,
#board.board-world-cities .tile.side-bottom.flag-tile:not(.corner) > .tile-content > .build-strip,
#board.board-world-cities .tile.side-left.flag-tile:not(.corner) > .tile-content > .build-strip,
#board.board-world-cities .tile.side-right.flag-tile:not(.corner) > .tile-content > .build-strip{
  top:clamp(6px, 22%, 18px) !important;
  left:3px !important;
  right:3px !important;
  height:clamp(18px, 24%, 26px) !important;
  min-height:clamp(18px, 24%, 26px) !important;
  align-items:center !important;
  justify-content:center !important;
}
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .build-strip .game-house-svg.board-house-icon,
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .build-strip .mini-house{
  height:clamp(17px, 22%, 19px) !important;
}
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .build-strip .game-hotel-svg.board-hotel-icon,
#board.board-world-cities .tile.flag-tile:not(.corner) > .tile-content > .build-strip .mini-hotel{
  height:clamp(19px, 24%, 21px) !important;
}

/* v139: display special tokens on a star instead of a colored circle. */
.animal-choice.special-token-choice::before,
.animal-choice.special-token-piece::before,
.preview-chip.special-token-piece::before,
#board .token.special-token-piece::before,
.token.special-token-piece::before,
.travel-token.special-token-piece::before,
.badge.special-token-piece::before,
.trade-side-token.special-token-piece::before,
.log-player-token.special-token-piece::before,
.large-badge.special-token-piece::before,
.winner-token.special-token-piece::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:118% !important;
  height:118% !important;
  transform:translate(-50%,-50%) !important;
  background:var(--token-color, currentColor) !important;
  clip-path:polygon(50% 0%,61% 34%,98% 34%,68% 55%,79% 91%,50% 70%,21% 91%,32% 55%,2% 34%,39% 34%) !important;
  border-radius:0 !important;
  z-index:0 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.88), inset 0 -3px 7px rgba(0,0,0,.24), 0 6px 14px rgba(0,0,0,.25) !important;
}
.animal-choice.special-token-choice,
.animal-choice.special-token-piece,
.preview-chip.special-token-piece,
#board .token.special-token-piece,
.token.special-token-piece,
.travel-token.special-token-piece,
.badge.special-token-piece,
.trade-side-token.special-token-piece,
.log-player-token.special-token-piece,
.large-badge.special-token-piece,
.winner-token.special-token-piece{
  position:relative !important;
  overflow:visible !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.animal-choice.special-token-piece .special-token-img,
.preview-chip.special-token-piece .special-token-img,
#board .token.special-token-piece .special-token-img,
.token.special-token-piece .special-token-img,
.travel-token.special-token-piece .special-token-img,
.badge.special-token-piece .special-token-img,
.trade-side-token.special-token-piece .special-token-img,
.log-player-token.special-token-piece .special-token-img,
.large-badge.special-token-piece .special-token-img,
.winner-token.special-token-piece .special-token-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
}


/* v140: World Cities-only tile nudge corrections. */
#board.board-world-cities .tile[data-tile-index="2"] .tile-header-bar.flag-only,
#board.board-world-cities .tile[data-tile-index="2"] .tile-header-bar.has-image,
#board.board-world-cities .tile[data-tile-index="2"] .space-icon{
  transform:translateY(10px) !important;
}
#board.board-world-cities .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="2"] .name{
  transform:translateY(-10px) !important;
}
#board.board-world-cities .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="17"] .name{
  transform:translateX(-9px) !important;
}
#board.board-world-cities .tile[data-tile-index="33"] > .tile-content > .name,
#board.board-world-cities .tile[data-tile-index="33"] .name{
  transform:translateX(9px) !important;
}
#board.board-world-cities .tile[data-tile-index="36"] .tile-header-bar.flag-only,
#board.board-world-cities .tile[data-tile-index="36"] .tile-header-bar.has-image,
#board.board-world-cities .tile[data-tile-index="36"] .space-icon{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  justify-content:center !important;
  align-items:center !important;
}
#board.board-world-cities .tile[data-tile-index="36"] .tile-header-bar.has-image img,
#board.board-world-cities .tile[data-tile-index="36"] .tile-header-bar.flag-only span{
  transform:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* v141: special-token star backing is lobby-only. In-game/player/log/trade tokens return to circles. */
#board .token.special-token-piece,
.token.special-token-piece,
.travel-token.special-token-piece,
.badge.special-token-piece,
.trade-side-token.special-token-piece,
.log-player-token.special-token-piece,
.large-badge.special-token-piece,
.winner-token.special-token-piece{
  background:var(--token-color, currentColor) !important;
  border-radius:999px !important;
  border-color:rgba(255,255,255,.85) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.82), inset 0 -3px 7px rgba(0,0,0,.24), 0 6px 14px rgba(0,0,0,.20) !important;
  overflow:visible !important;
}
#board .token.special-token-piece::before,
.token.special-token-piece::before,
.travel-token.special-token-piece::before,
.badge.special-token-piece::before,
.trade-side-token.special-token-piece::before,
.log-player-token.special-token-piece::before,
.large-badge.special-token-piece::before,
.winner-token.special-token-piece::before{
  content:none !important;
  display:none !important;
}
/* Keep the star only in the lobby picker/preview. */
body.in-lobby .animal-choice.special-token-choice::before,
body.in-lobby .animal-choice.special-token-piece::before,
body.in-lobby .preview-chip.special-token-piece::before{
  content:"" !important;
  display:block !important;
  clip-path:polygon(50% 0%,61% 34%,98% 34%,68% 55%,79% 91%,50% 70%,21% 91%,32% 55%,2% 34%,39% 34%) !important;
}

/* v141: World Cities-only targeted nudge corrections using the active tile structure. */
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund > .tile-content > .name{
  transform:translateY(-30px) !important;
  margin-top:0 !important;
  z-index:80 !important;
}
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund > .tile-content > .space-icon.corner-space-icon,
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund > .tile-content > .space-icon{
  transform:translateY(20px) !important;
  margin-top:auto !important;
  margin-bottom:0 !important;
  align-self:center !important;
  z-index:70 !important;
}
#board.board-world-cities .tile[data-tile-index="2"].tile-type-fund .board-upgrade-icon{
  transform:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* Side-row x-axis screen movement is vertical inside the rotated tile-content. */
#board.board-world-cities .tile[data-tile-index="17"] > .tile-content > .name{
  transform:translateY(-18px) !important;
  z-index:80 !important;
}
#board.board-world-cities .tile[data-tile-index="33"] > .tile-content > .name{
  transform:translateY(-18px) !important;
  z-index:80 !important;
}
#board.board-world-cities .tile[data-tile-index="36"].tile-type-chance > .tile-content > .space-icon.corner-space-icon,
#board.board-world-cities .tile[data-tile-index="36"].tile-type-chance > .tile-content > .space-icon{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
  justify-self:center !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
#board.board-world-cities .tile[data-tile-index="36"].tile-type-chance .board-standby-icon{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}


/* v142: World Cities side-space text nudges toward the center of the board.
   For side rows, the tile content is rotated, so the screen x-axis is controlled by the local top/y placement. */
#board.board-world-cities .tile[data-tile-index="17"] > .tile-content > .name,
body.in-game #board.board-world-cities .tile[data-tile-index="17"] > .tile-content > .name{
  top:calc(50% - 34px) !important;
  transform:none !important;
  z-index:90 !important;
}
#board.board-world-cities .tile[data-tile-index="33"] > .tile-content > .name,
body.in-game #board.board-world-cities .tile[data-tile-index="33"] > .tile-content > .name{
  top:calc(50% - 34px) !important;
  transform:none !important;
  z-index:90 !important;
}

/* v142: selected special lobby tokens show the same yellow selected square behind the star. */
body.in-lobby .animal-choice.special-token-choice.selected,
body.in-lobby .animal-choice.special-token-piece.selected{
  border-color:#facc15 !important;
  background:rgba(2,6,23,.45) !important;
  box-shadow:0 0 0 3px rgba(250,204,21,.34), 0 10px 22px rgba(0,0,0,.22) !important;
  transform:translateY(-1px) !important;
}
body.in-lobby .animal-choice.special-token-choice.selected::after,
body.in-lobby .animal-choice.special-token-piece.selected::after{
  content:"" !important;
  position:absolute !important;
  inset:4px !important;
  border-radius:15px !important;
  background:rgba(250,204,21,.20) !important;
  border:2px solid rgba(250,204,21,.95) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20) !important;
  z-index:0 !important;
  pointer-events:none !important;
}
body.in-lobby .animal-choice.special-token-choice.selected::before,
body.in-lobby .animal-choice.special-token-piece.selected::before{
  z-index:1 !important;
}
body.in-lobby .animal-choice.special-token-choice.selected .special-token-img,
body.in-lobby .animal-choice.special-token-piece.selected .special-token-img{
  z-index:2 !important;
}


/* v146: Toy Story hidden board uses World Cities-style image headers. */
#board.board-toy-story .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(15,23,42,.32) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.22) !important;
}
#board.board-toy-story .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  object-fit:contain !important;
  object-position:center center !important;
}
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image img,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  width:30px !important;
  height:30px !important;
}
#board.board-toy-story .tile.tile-type-fund .board-upgrade-icon,
#board.board-toy-story .tile.tile-type-chance .board-standby-icon{
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:10px !important;
}

/* v149: reset Toy Story back to v147 layout alignment; only make the artwork itself bolder/fuller. */
#board.board-toy-story .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(15,23,42,.32) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.22) !important;
}
#board.board-toy-story .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:7px !important;
  filter:saturate(1.25) contrast(1.08) brightness(1.06) !important;
}
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image img,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
}


/* v150: Toy Story board image/header refinements from v149 baseline.
   Keep side-row alignment intact; widen the image artwork, center top/bottom images, and restore a colored property banner. */
#board.board-toy-story .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image{
  min-height:12px !important;
  height:12px !important;
  border-radius:7px !important;
  margin:0 -2px 4px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:44 !important;
  background:var(--tile-header-color, #dbeafe) !important;
  border:0 !important;
  box-shadow:none !important;
  display:block !important;
}
#board.board-toy-story .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-53%) !important;
  width:48px !important;
  height:25px !important;
  max-width:48px !important;
  max-height:25px !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:5px !important;
  display:block !important;
  margin:0 !important;
  filter:saturate(1.18) contrast(1.08) brightness(1.04) drop-shadow(0 1px 1px rgba(15,23,42,.35)) !important;
}
#board.board-toy-story .tile.flag-tile.side-top:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .tile-header-bar.has-image{
  left:auto !important;
  right:auto !important;
  align-self:center !important;
  transform:translateY(-1px) !important;
}
#board.board-toy-story .tile.flag-tile.side-top:not(.corner) > .tile-content > .tile-header-bar.has-image img,
#board.board-toy-story .tile.flag-tile.side-bottom:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,-53%) !important;
}
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image img,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  width:44px !important;
  height:24px !important;
  max-width:44px !important;
  max-height:24px !important;
}

/* v151: Toy Story board polish from v150 baseline.
   Preserve side-row alignment, but move the side image/header pair slightly outward,
   hide header images on Toy Chest/Adventure, and use Toy Story route/playtime icons. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(8px) !important;
}
#board.board-toy-story .tile.tile-type-fund > .tile-content > .tile-header-bar,
#board.board-toy-story .tile.tile-type-chance > .tile-content > .tile-header-bar{
  display:none !important;
}
#board.board-toy-story .tile.tile-type-fund > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile.tile-type-chance > .tile-content > .space-icon.corner-space-icon{
  margin-top:4px !important;
}
#board.board-toy-story .toy-route-icon.board-space-icon,
#board.board-toy-story .playtime-icon.board-space-icon{
  width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#board.board-toy-story .toy-route-icon.board-space-icon svg,
#board.board-toy-story .playtime-icon.board-space-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.26));
}
#board.board-toy-story .toy-route-icon .toy-route-body{fill:#facc15;stroke:#78350f;stroke-width:2.2;}
#board.board-toy-story .toy-route-icon .toy-route-cab{fill:#ef4444;stroke:#7f1d1d;stroke-width:1.8;}
#board.board-toy-story .toy-route-icon .toy-route-window{fill:#93c5fd;stroke:#1e3a8a;stroke-width:1.4;}
#board.board-toy-story .toy-route-icon .toy-route-stripe{stroke:#2563eb;stroke-width:3.2;stroke-linecap:round;}
#board.board-toy-story .toy-route-icon .toy-route-wheel{fill:#111827;stroke:#f8fafc;stroke-width:1.6;}
#board.board-toy-story .toy-route-icon .toy-route-hub{fill:#f97316;}
#board.board-toy-story .toy-route-icon .toy-route-shadow{fill:rgba(15,23,42,.18);}
#board.board-toy-story .toy-route-icon .toy-route-rocket{fill:#22c55e;stroke:#14532d;stroke-width:1.6;}
#board.board-toy-story .toy-route-icon .toy-route-flame{fill:#fb923c;stroke:#7c2d12;stroke-width:1.1;}
#board.board-toy-story .playtime-icon .playtime-box{fill:#38bdf8;stroke:#075985;stroke-width:2.2;}
#board.board-toy-story .playtime-icon .playtime-lid{fill:#f97316;stroke:#7c2d12;stroke-width:2.2;}
#board.board-toy-story .playtime-icon .playtime-ribbon{fill:#facc15;stroke:#854d0e;stroke-width:1.2;}
#board.board-toy-story .playtime-icon .playtime-star{fill:#fde047;stroke:#92400e;stroke-width:1.8;}
#board.board-toy-story .playtime-icon .playtime-smile{fill:none;stroke:#0f172a;stroke-width:2.6;stroke-linecap:round;}
#manageModal .toy-route-icon svg,
#manageModal .playtime-icon svg{
  width:70px !important;
  height:70px !important;
}

/* v152: Toy Story board corrections from v151 baseline.
   Pull side-row header/images 40% back from the v151 outward shift, keep Toy Chest/Adventure clean,
   center moving vans on every side, and use playful Toy Story corner icons. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(5px) !important;
}
#board.board-toy-story .tile.tile-type-fund > .tile-content > .tile-header-bar,
#board.board-toy-story .tile.tile-type-chance > .tile-content > .tile-header-bar,
#board.board-toy-story .tile.tile-type-fund > .tile-content > .space-icon,
#board.board-toy-story .tile.tile-type-chance > .tile-content > .space-icon{
  display:none !important;
}
#board.board-toy-story .tile.tile-type-fund > .tile-content,
#board.board-toy-story .tile.tile-type-chance > .tile-content{
  justify-content:center !important;
  align-items:center !important;
}
#board.board-toy-story .tile.tile-railroad-space > .tile-content,
#board.board-toy-story .tile.tile-airline-space > .tile-content{
  align-items:center !important;
  justify-content:center !important;
}
#board.board-toy-story .tile.tile-type-rail .space-icon.corner-space-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:42px !important;
  margin:2px auto 1px !important;
  padding:0 !important;
  transform:none !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
}
#board.board-toy-story .tile.tile-type-rail.side-left .space-icon.corner-space-icon,
#board.board-toy-story .tile.tile-type-rail.side-right .space-icon.corner-space-icon{
  width:46px !important;
  height:40px !important;
  margin:1px auto 0 !important;
}
#board.board-toy-story .toy-route-icon.board-space-icon{
  width:46px !important;
  height:40px !important;
  margin:0 auto !important;
}
#board.board-toy-story .tile.tile-type-rail.side-top .toy-route-icon.board-space-icon,
#board.board-toy-story .tile.tile-type-rail.side-bottom .toy-route-icon.board-space-icon{
  transform:translateX(0) !important;
}
#board.board-toy-story .tile.tile-type-vacation .space-icon.corner-space-icon,
#board.board-toy-story .tile.tile-type-jail .space-icon.corner-space-icon,
#board.board-toy-story .tile.tile-type-gotojail .space-icon.corner-space-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:72px !important;
  max-width:86% !important;
  margin:0 auto !important;
}
#board.board-toy-story .playtime-icon,
#board.board-toy-story .toy-story-jail-icon,
#board.board-toy-story .toy-story-goto-jail-icon{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:64px !important;
  height:64px !important;
  color:#0f172a !important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.24));
}
#board.board-toy-story .playtime-icon svg,
#board.board-toy-story .toy-story-jail-icon svg,
#board.board-toy-story .toy-story-goto-jail-icon svg{
  width:54px !important;
  height:54px !important;
  display:block !important;
}
#board.board-toy-story .playtime-icon .playtime-box{fill:#22c55e;stroke:#14532d;stroke-width:2.4;}
#board.board-toy-story .playtime-icon .playtime-lid{fill:#f97316;stroke:#7c2d12;stroke-width:2.4;}
#board.board-toy-story .playtime-icon .playtime-ribbon{fill:#fde047;stroke:#854d0e;stroke-width:1.4;}
#board.board-toy-story .playtime-icon .playtime-star{fill:#fef08a;stroke:#92400e;stroke-width:1.8;}
#board.board-toy-story .playtime-icon .playtime-smile{fill:none;stroke:#0f172a;stroke-width:3;stroke-linecap:round;}
#board.board-toy-story .ts-jail-shadow,
#board.board-toy-story .toy-route-shadow{fill:rgba(15,23,42,.18);}
#board.board-toy-story .ts-jail-box{fill:#38bdf8;stroke:#075985;stroke-width:2.4;}
#board.board-toy-story .ts-jail-lid{fill:#f97316;stroke:#7c2d12;stroke-width:2.4;}
#board.board-toy-story .ts-jail-spring{fill:none;stroke:#7c3aed;stroke-width:2.6;stroke-linecap:round;}
#board.board-toy-story .ts-jail-ball{fill:#fde047;stroke:#92400e;stroke-width:2;}
#board.board-toy-story .ts-jail-star{fill:#fef08a;stroke:#92400e;stroke-width:1.4;}
#board.board-toy-story .ts-jail-smile{fill:none;stroke:#0f172a;stroke-width:2.6;stroke-linecap:round;}
#board.board-toy-story .ts-goto-track{fill:none;stroke:#2563eb;stroke-width:5;stroke-linecap:round;stroke-dasharray:6 5;}
#board.board-toy-story .ts-goto-arrow{fill:none;stroke:#dc2626;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
#board.board-toy-story .ts-goto-box{fill:#38bdf8;stroke:#075985;stroke-width:2.2;}
#board.board-toy-story .ts-goto-lid{fill:#f97316;stroke:#7c2d12;stroke-width:2.2;}
#board.board-toy-story .ts-goto-ball{fill:#fde047;stroke:#92400e;stroke-width:2;}
#board.board-toy-story .ts-goto-star{fill:#fef08a;stroke:#92400e;stroke-width:1.2;}
#board.board-toy-story .toy-story-jail-word,
#board.board-toy-story .toy-story-goto-word{
  display:block !important;
  margin-top:-4px !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.03em !important;
  color:#0f172a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7) !important;
}

/* v153: Toy Story board center motto, rail-space layout, and simple Toy Chest/Adventure icons. */
#board.board-toy-story .center-card{
  position:relative !important;
  overflow:hidden !important;
}
#board.board-toy-story .center-card::before{
  content:"To Infinity\A and Beyond";
  white-space:pre-line;
  position:absolute;
  inset:16px 18px;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  font-weight:1000;
  font-size:clamp(30px, 4.8vw, 74px);
  line-height:.86;
  letter-spacing:-.065em;
  color:rgba(255,255,255,.105);
  text-shadow:0 4px 18px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.10);
  transform:rotate(-9deg);
  border:3px solid rgba(125,211,252,.10);
  border-radius:32px;
  background:radial-gradient(circle at 50% 35%, rgba(56,189,248,.13), rgba(168,85,247,.08) 42%, transparent 72%);
}
#board.board-toy-story .center-card > *{
  position:relative;
  z-index:1;
}

#board.board-toy-story .tile.tile-type-rail > .tile-content{
  justify-content:flex-start !important;
  align-items:center !important;
  gap:1px !important;
}
#board.board-toy-story .tile.tile-type-rail .name{
  order:1 !important;
  width:100% !important;
  margin:2px auto 0 !important;
  text-align:center !important;
  align-self:center !important;
}
#board.board-toy-story .tile.tile-type-rail .price{
  order:2 !important;
  margin:0 auto !important;
  text-align:center !important;
}
#board.board-toy-story .tile.tile-type-rail .space-icon.corner-space-icon{
  order:8 !important;
  margin:auto auto 2px !important;
  align-self:center !important;
}
#board.board-toy-story .tile.tile-type-rail .toy-route-icon.board-space-icon{
  margin:0 auto !important;
}
#board.board-toy-story .tile.tile-type-rail.side-left .space-icon.corner-space-icon,
#board.board-toy-story .tile.tile-type-rail.side-right .space-icon.corner-space-icon{
  margin:auto auto 2px !important;
}

#board.board-toy-story .tile.tile-type-fund > .tile-content,
#board.board-toy-story .tile.tile-type-chance > .tile-content{
  justify-content:center !important;
  align-items:center !important;
  gap:3px !important;
}
#board.board-toy-story .tile.tile-type-fund > .tile-content > .space-icon,
#board.board-toy-story .tile.tile-type-chance > .tile-content > .space-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:38px !important;
  margin:1px auto 2px !important;
  order:1 !important;
}
#board.board-toy-story .tile.tile-type-fund .name,
#board.board-toy-story .tile.tile-type-chance .name{
  order:2 !important;
  text-align:center !important;
  width:100% !important;
}
#board.board-toy-story .toy-chest-icon,
#board.board-toy-story .toy-adventure-icon{
  display:inline-flex !important;
  width:42px !important;
  height:38px !important;
  align-items:center !important;
  justify-content:center !important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.23));
}
#board.board-toy-story .toy-chest-icon svg,
#board.board-toy-story .toy-adventure-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
#board.board-toy-story .toy-chest-shadow{fill:rgba(15,23,42,.18);}
#board.board-toy-story .toy-chest-box{fill:#38bdf8;stroke:#075985;stroke-width:2.4;}
#board.board-toy-story .toy-chest-lid{fill:#f97316;stroke:#7c2d12;stroke-width:2.4;}
#board.board-toy-story .toy-chest-ribbon{fill:#fde047;stroke:#854d0e;stroke-width:1.4;}
#board.board-toy-story .toy-chest-ball{fill:#22c55e;stroke:#14532d;stroke-width:2;}
#board.board-toy-story .toy-chest-star{fill:#fef08a;stroke:#92400e;stroke-width:1.4;}
#board.board-toy-story .toy-chest-smile{fill:none;stroke:#0f172a;stroke-width:2.6;stroke-linecap:round;}
#board.board-toy-story .toy-adventure-sky{fill:#93c5fd;stroke:#1e3a8a;stroke-width:2;}
#board.board-toy-story .toy-adventure-rocket{fill:#f8fafc;stroke:#334155;stroke-width:2.2;}
#board.board-toy-story .toy-adventure-window{fill:#22d3ee;stroke:#0e7490;stroke-width:1.8;}
#board.board-toy-story .toy-adventure-wing-left,
#board.board-toy-story .toy-adventure-wing-right{fill:#ef4444;stroke:#7f1d1d;stroke-width:2;}
#board.board-toy-story .toy-adventure-flame{fill:#f97316;stroke:#7c2d12;stroke-width:1.8;}
#board.board-toy-story .toy-adventure-star{fill:#fde047;stroke:#92400e;stroke-width:1.3;}

/* v154: Toy Story side-row image/header nudge and GO wording. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(-7px) !important;
}
#board.board-toy-story .toy-story-go-clean{
  min-height:56px !important;
}
#board.board-toy-story .toy-story-go-svg{
  width:64px !important;
  height:56px !important;
}
#board.board-toy-story .toy-story-go-word{
  font-family:Arial, sans-serif !important;
  font-weight:1000 !important;
  fill:#2563eb !important;
  letter-spacing:-.02em !important;
}
#board.board-toy-story .toy-story-go-word-top{
  font-size:17px !important;
}
#board.board-toy-story .toy-story-go-word-bottom{
  font-size:15px !important;
}
#board.board-toy-story .toy-story-go-svg .go-red-arrow,
#board.board-toy-story .toy-story-go-svg .go-red-arrow-head{
  stroke:#dc2626 !important;
  stroke-width:6 !important;
}

/* v155: Toy Story side-row boundary correction and translucent Buzz center backing. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(3px) !important;
}
#board.board-toy-story .center-card::before{
  z-index:1 !important;
}
#board.board-toy-story .center-card::after{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:-34px;
  width:min(82%, 620px);
  height:min(62%, 460px);
  transform:translateX(-50%) rotate(-9deg);
  transform-origin:center bottom;
  background:url('/icons/toy-story-board/toy-story-center-buzz.png') center bottom / contain no-repeat;
  opacity:.18;
  mix-blend-mode:screen;
  filter:saturate(1.2) contrast(1.05) drop-shadow(0 12px 24px rgba(14,165,233,.12));
  pointer-events:none;
}
#board.board-toy-story .center-card > *{
  position:relative;
  z-index:2;
}


/* v156: Toy Story fine tuning for side banners, tax icons, railroad spacing, and Toy Chest/Adventure responsiveness. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(0px) !important;
}

/* Toy Story tax spaces: playful cleanup / collector visuals and cleaner line breaks. */
#board.board-toy-story .tile.tile-type-tax > .tile-content{
  justify-content:center !important;
  align-items:center !important;
}
#board.board-toy-story .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="38"] > .tile-content > .space-icon.corner-space-icon{
  top:4px !important;
  width:clamp(34px, 6.1cqw, 52px) !important;
  height:clamp(30px, 5.3cqw, 46px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#board.board-toy-story .toy-cleanup-tax-icon,
#board.board-toy-story .toy-collector-tax-icon,
#board.board-toy-story .toy-cleanup-tax-icon svg,
#board.board-toy-story .toy-collector-tax-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
#board.board-toy-story .toy-cleanup-shadow,
#board.board-toy-story .toy-collector-shadow{fill:rgba(15,23,42,.18);}
#board.board-toy-story .toy-cleanup-bin{fill:#38bdf8;stroke:#075985;stroke-width:2.3;}
#board.board-toy-story .toy-cleanup-lid{fill:#f97316;stroke:#7c2d12;stroke-width:2.3;}
#board.board-toy-story .toy-cleanup-handle{fill:none;stroke:#7c2d12;stroke-width:2.5;stroke-linecap:round;}
#board.board-toy-story .toy-cleanup-broom{fill:none;stroke:#92400e;stroke-width:3;stroke-linecap:round;}
#board.board-toy-story .toy-cleanup-bristles{fill:#fde047;stroke:#92400e;stroke-width:2;}
#board.board-toy-story .toy-cleanup-ball{fill:#22c55e;stroke:#14532d;stroke-width:1.8;}
#board.board-toy-story .toy-cleanup-star{fill:#fef08a;stroke:#92400e;stroke-width:1.4;}
#board.board-toy-story .toy-collector-box{fill:#8b5cf6;stroke:#4c1d95;stroke-width:2.3;}
#board.board-toy-story .toy-collector-lid{fill:#facc15;stroke:#854d0e;stroke-width:2.3;}
#board.board-toy-story .toy-collector-badge{fill:#22d3ee;stroke:#0e7490;stroke-width:1.8;}
#board.board-toy-story .toy-collector-coin{fill:#fde047;stroke:#92400e;stroke-width:1.8;}
#board.board-toy-story .toy-collector-dollar{fill:#7c2d12;font:1000 18px/1 Arial, sans-serif;}
#board.board-toy-story .tile[data-tile-index="4"] > .tile-content > .tax-space-value,
#board.board-toy-story .tile[data-tile-index="38"] > .tile-content > .tax-space-value{
  top:50% !important;
  font-size:clamp(8px, 1.45cqw, 12px) !important;
}
#board.board-toy-story .tile[data-tile-index="4"].tax-index-4 > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="38"].tax-index-38 > .tile-content > .name{
  top:66% !important;
  height:32% !important;
  align-items:flex-start !important;
  padding-top:1px !important;
  overflow:visible !important;
}
#board.board-toy-story .toy-cleanup-name,
#board.board-toy-story .toy-collector-name{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  line-height:.82 !important;
  transform:none !important;
  letter-spacing:-.04em !important;
}
#board.board-toy-story .toy-cleanup-name > span,
#board.board-toy-story .toy-collector-name > span{
  display:block !important;
}

/* Railroad / route spaces: keep text high, icon low, and amount clear on narrow boards. */
#board.board-toy-story .tile.tile-type-rail > .tile-content{
  position:relative !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:0 !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
}
#board.board-toy-story .tile.tile-type-rail .name{
  order:1 !important;
  flex:0 0 auto !important;
  width:96% !important;
  margin:1px auto 0 !important;
  line-height:.84 !important;
  text-align:center !important;
  z-index:3 !important;
}
#board.board-toy-story .tile.tile-type-rail .space-icon.corner-space-icon{
  order:2 !important;
  flex:0 0 auto !important;
  width:clamp(34px, 6cqw, 50px) !important;
  height:clamp(28px, 5cqw, 42px) !important;
  margin:clamp(5px, 1.9cqw, 14px) auto clamp(6px, 1.6cqw, 12px) !important;
  align-self:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile.tile-type-rail .price{
  order:3 !important;
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-bottom:0 !important;
  line-height:1 !important;
  z-index:4 !important;
}
#board.board-toy-story .tile.tile-type-rail .toy-route-icon.board-space-icon{
  width:100% !important;
  height:100% !important;
  margin:0 auto !important;
  transform:none !important;
}
#board.board-toy-story .tile.tile-type-rail.side-left .space-icon.corner-space-icon,
#board.board-toy-story .tile.tile-type-rail.side-right .space-icon.corner-space-icon{
  margin:clamp(4px, 1.5cqw, 10px) auto clamp(5px, 1.2cqw, 10px) !important;
}
@media (max-width: 760px){
  #board.board-toy-story .tile.tile-type-rail .space-icon.corner-space-icon{
    width:34px !important;
    height:28px !important;
    margin-top:4px !important;
    margin-bottom:8px !important;
  }
  #board.board-toy-story .tile.tile-type-rail .name{
    font-size:clamp(7px, 1.5vw, 9px) !important;
  }
}

/* Toy Chest / Adventure spaces: separated, responsive icon + text stack. */
#board.board-toy-story .tile.tile-type-fund > .tile-content,
#board.board-toy-story .tile.tile-type-chance > .tile-content{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:clamp(3px, .9cqw, 8px) !important;
  padding:3px 2px !important;
}
#board.board-toy-story .tile.tile-type-fund > .tile-content > .space-icon,
#board.board-toy-story .tile.tile-type-chance > .tile-content > .space-icon{
  order:1 !important;
  flex:0 0 auto !important;
  width:clamp(30px, 5.5cqw, 48px) !important;
  height:clamp(26px, 4.8cqw, 42px) !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#board.board-toy-story .tile.tile-type-fund .name,
#board.board-toy-story .tile.tile-type-chance .name{
  order:2 !important;
  flex:0 0 auto !important;
  position:static !important;
  width:98% !important;
  margin:0 auto !important;
  text-align:center !important;
  line-height:.88 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#board.board-toy-story .toy-chest-icon,
#board.board-toy-story .toy-adventure-icon{
  width:100% !important;
  height:100% !important;
}
@media (max-width: 760px){
  #board.board-toy-story .tile.tile-type-fund > .tile-content > .space-icon,
  #board.board-toy-story .tile.tile-type-chance > .tile-content > .space-icon{
    width:30px !important;
    height:26px !important;
  }
  #board.board-toy-story .tile.tile-type-fund .name,
  #board.board-toy-story .tile.tile-type-chance .name{
    font-size:clamp(7px, 1.5vw, 9px) !important;
  }
}


/* v159: Toy Story jail uses the uploaded upside-down blue milk crate artwork. */
#board.board-toy-story .toy-story-jail-crate-icon{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
}
#board.board-toy-story .toy-story-jail-crate-icon img{
  width:clamp(42px, 6.1vw, 62px) !important;
  height:clamp(38px, 5.8vw, 58px) !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.28)) saturate(1.12) contrast(1.08) !important;
}
#board.board-toy-story .toy-story-jail-crate-icon .toy-story-jail-word{
  margin-top:-3px !important;
}

/* v160: Toy Story fine tune side headers and use extracted Woody for Go To Jail. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(2px) !important;
}
#board.board-toy-story .toy-story-goto-woody-icon{
  width:74px !important;
  height:72px !important;
  max-width:92% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.28));
}
#board.board-toy-story .toy-story-goto-woody-icon img{
  width:clamp(54px, 7.4vw, 76px) !important;
  height:clamp(46px, 6.8vw, 70px) !important;
  object-fit:contain !important;
  display:block !important;
  margin:-2px auto -9px !important;
  filter:saturate(1.25) contrast(1.12) brightness(1.12) !important;
}
#board.board-toy-story .toy-story-goto-woody-icon .toy-story-goto-word{
  margin-top:0 !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
  color:#0f172a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.72) !important;
}


/* v166: Toy Story special-space reset from v164.
   Keep the existing board/tile structure. Do NOT restyle whole special spaces.
   Only position the specific child name/icon elements at proportional anchors. */

/* Keep the side property header/image inside bounds with a very small nudge only. */
#board.board-toy-story .tile.flag-tile.side-left:not(.corner) > .tile-content > .tile-header-bar.has-image,
#board.board-toy-story .tile.flag-tile.side-right:not(.corner) > .tile-content > .tile-header-bar.has-image{
  transform:translateY(1px) !important;
}

/* Spaces 2, 7, 22, 36: upright top/bottom special spaces.
   Text center at 33% height, image center at 66% height. */
#board.board-toy-story .tile[data-tile-index="2"] .name,
#board.board-toy-story .tile[data-tile-index="7"] .name,
#board.board-toy-story .tile[data-tile-index="22"] .name,
#board.board-toy-story .tile[data-tile-index="36"] .name{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important;
  max-height:34% !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.82 !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .space-icon{
  position:absolute !important;
  left:50% !important;
  top:66% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(26px, 4.2cqw, 40px) !important;
  height:clamp(22px, 3.7cqw, 36px) !important;
  margin:0 !important;
  z-index:2 !important;
}

/* Spaces 17 and 33: side-row special spaces.
   The tile-content is rotated 90 degrees, so local X becomes visible vertical spacing.
   Put text at 33% and image at 66% on that rotated local axis. */
#board.board-toy-story .tile[data-tile-index="17"] .name,
#board.board-toy-story .tile[data-tile-index="33"] .name{
  position:absolute !important;
  left:33% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:42% !important;
  max-height:82% !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.76 !important;
  font-size:clamp(6.5px, .58vw, 9px) !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon{
  position:absolute !important;
  left:66% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(24px, 3.9cqw, 38px) !important;
  height:clamp(20px, 3.4cqw, 34px) !important;
  margin:0 !important;
  z-index:2 !important;
}

#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="7"] .toy-adventure-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="22"] .toy-adventure-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="36"] .toy-adventure-icon{
  width:100% !important;
  height:100% !important;
}

@media (max-width:760px){
  #board.board-toy-story .tile[data-tile-index="2"] .name,
  #board.board-toy-story .tile[data-tile-index="7"] .name,
  #board.board-toy-story .tile[data-tile-index="22"] .name,
  #board.board-toy-story .tile[data-tile-index="36"] .name{
    font-size:clamp(6.2px, 1.2vw, 8px) !important;
    line-height:.72 !important;
  }
  #board.board-toy-story .tile[data-tile-index="17"] .name,
  #board.board-toy-story .tile[data-tile-index="33"] .name{
    font-size:clamp(6px, 1.15vw, 7.8px) !important;
    line-height:.68 !important;
  }
  #board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon,
  #board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .space-icon,
  #board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .space-icon,
  #board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .space-icon,
  #board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon,
  #board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon{
    width:24px !important;
    height:21px !important;
  }
}

/* Space 4 Cleanup Fee: keep existing tax layout, just style the vacuum art and two-line name. */
#board.board-toy-story .tile[data-tile-index="4"] > .tile-content > .space-icon.corner-space-icon{
  width:clamp(38px, 6.3cqw, 54px) !important;
  height:clamp(32px, 5.6cqw, 48px) !important;
}
#board.board-toy-story .toy-cleanup-name{line-height:.86 !important;}
#board.board-toy-story .toy-cleanup-vac-body{fill:#38bdf8;stroke:#075985;stroke-width:2.4;}
#board.board-toy-story .toy-cleanup-vac-panel{fill:#f97316;stroke:#7c2d12;stroke-width:1.7;}
#board.board-toy-story .toy-cleanup-vac-hose{fill:none;stroke:#4c1d95;stroke-width:4.2;stroke-linecap:round;}
#board.board-toy-story .toy-cleanup-vac-wheel{fill:#111827;stroke:#f8fafc;stroke-width:1.5;}
#board.board-toy-story .toy-cleanup-vac-nozzle{fill:#fde047;stroke:#92400e;stroke-width:2;}
#board.board-toy-story .toy-cleanup-vac-spark{fill:#fef08a;stroke:#92400e;stroke-width:1.3;}

/* Space 10 Time Out: larger crate, no rounded icon backing, softer blue filter. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:clamp(92px, 12vw, 128px) !important;
  height:clamp(78px, 10.8vw, 112px) !important;
  max-width:118% !important;
  margin:0 auto !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.16)) saturate(.78) brightness(1.12) contrast(.96) !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  margin-top:-10px !important;
}

/* Space 30 Go to TIME-OUT: one local icon container; text at 33%, image at 66%. */
#board.board-toy-story .tile[data-tile-index="30"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="30"] .toy-story-goto-woody-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  display:block !important;
  margin:0 !important;
}
#board.board-toy-story .tile[data-tile-index="30"] .toy-story-goto-word{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  width:94% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(7.5px, 1.0vw, 10.5px) !important;
  line-height:.88 !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.72) !important;
}
#board.board-toy-story .tile[data-tile-index="30"] .toy-story-goto-word::before{
  content:"GO TO" !important;
  display:block !important;
}
#board.board-toy-story .tile[data-tile-index="30"] .toy-story-goto-woody-icon img{
  position:absolute !important;
  left:50% !important;
  top:66% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(48px, 6.5vw, 70px) !important;
  height:clamp(42px, 5.9vw, 64px) !important;
  object-fit:contain !important;
  margin:0 !important;
  filter:drop-shadow(0 1px 1px rgba(15,23,42,.16)) !important;
}


/* v167: Toy Story special squares recovery.
   Reset the child-level positioning from the prior attempts and lay out ONLY
   spaces 2,7,17,22,33,36 with simple responsive zones inside the existing tile. */
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="7"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="22"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="36"] > .tile-content{
  display:grid !important;
  grid-template-rows: 4fr 5fr !important;
  grid-template-columns: 1fr !important;
  align-items:center !important;
  justify-items:center !important;
  justify-content:stretch !important;
  gap:0 !important;
  padding:2px 4px 4px !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .owner-strip{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .name{
  grid-row:1 !important;
  grid-column:1 !important;
  position:static !important;
  transform:none !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6.4px, .62vw, 8.8px) !important;
  line-height:.78 !important;
  letter-spacing:-.04em !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .space-icon{
  grid-row:2 !important;
  grid-column:1 !important;
  position:static !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
  width:min(82%, 43px) !important;
  height:min(82%, 36px) !important;
  max-width:43px !important;
  max-height:36px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}

/* Rotated side-row versions: tile-content is already rotated by the board engine.
   Use local columns because local X becomes the visible vertical axis after rotation. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
  display:grid !important;
  grid-template-columns: 4fr 5fr !important;
  grid-template-rows: 1fr !important;
  align-items:center !important;
  justify-items:center !important;
  justify-content:stretch !important;
  gap:0 !important;
  padding:2px 4px 4px !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .owner-strip{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  grid-column:1 !important;
  grid-row:1 !important;
  position:static !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6.2px, .54vw, 8.2px) !important;
  line-height:.72 !important;
  letter-spacing:-.045em !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon{
  grid-column:2 !important;
  grid-row:1 !important;
  position:static !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
  width:min(82%, 40px) !important;
  height:min(82%, 34px) !important;
  max-width:40px !important;
  max-height:34px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="7"] .toy-adventure-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="22"] .toy-adventure-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="36"] .toy-adventure-icon,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon svg,
#board.board-toy-story .tile[data-tile-index="7"] .toy-adventure-icon svg,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon svg,
#board.board-toy-story .tile[data-tile-index="22"] .toy-adventure-icon svg,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon svg,
#board.board-toy-story .tile[data-tile-index="36"] .toy-adventure-icon svg{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}
@media (max-width:760px){
  #board.board-toy-story .tile[data-tile-index="2"] > .tile-content,
  #board.board-toy-story .tile[data-tile-index="7"] > .tile-content,
  #board.board-toy-story .tile[data-tile-index="22"] > .tile-content,
  #board.board-toy-story .tile[data-tile-index="36"] > .tile-content{
    grid-template-rows: 43% 57% !important;
    padding:1px 3px 3px !important;
  }
  #board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
  #board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
    grid-template-columns: 43% 57% !important;
    padding:1px 3px 3px !important;
  }
  #board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name,
  #board.board-toy-story .tile[data-tile-index="7"] > .tile-content > .name,
  #board.board-toy-story .tile[data-tile-index="22"] > .tile-content > .name,
  #board.board-toy-story .tile[data-tile-index="36"] > .tile-content > .name,
  #board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
  #board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
    font-size:clamp(5.8px, 1.0vw, 7.4px) !important;
    line-height:.68 !important;
  }
}

/* v168: targeted Toy Story space positioning.
   Keep prior structure intact; only override coordinates/sizing for requested spaces. */

/* Space 2: text center at 33% from top; image center at 66% from top. */
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  transform:translate(-50%,-50%) !important;
  width:94% !important;
  height:auto !important;
  max-height:30% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.78 !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon{
  position:absolute !important;
  left:50% !important;
  top:66% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(28px, 4.4cqw, 42px) !important;
  height:clamp(24px, 3.9cqw, 38px) !important;
  max-width:50% !important;
  max-height:40% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}

/* Side special spaces: compensate for the board engine rotation.
   Index 17 is side-right (content rotated -90deg), so local X is inverted vertically.
   Index 33 is side-left (content rotated +90deg), so local X follows visible vertical. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name{
  position:absolute !important;
  left:66% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:38% !important;
  height:86% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6.2px, .54vw, 8.2px) !important;
  line-height:.70 !important;
  letter-spacing:-.045em !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon{
  position:absolute !important;
  left:33% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(26px, 4.0cqw, 40px) !important;
  height:clamp(22px, 3.6cqw, 36px) !important;
  max-width:40% !important;
  max-height:76% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:33% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:38% !important;
  height:86% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6.2px, .54vw, 8.2px) !important;
  line-height:.70 !important;
  letter-spacing:-.045em !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon{
  position:absolute !important;
  left:66% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(26px, 4.0cqw, 40px) !important;
  height:clamp(22px, 3.6cqw, 36px) !important;
  max-width:40% !important;
  max-height:76% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}

/* Space 10: blue crate about 80% of its square and perfectly centered. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:80% !important;
  height:80% !important;
  max-width:80% !important;
  max-height:80% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.14)) saturate(.72) brightness(1.16) contrast(.92) !important;
}

/* Railroad spaces: text / van / amount use clear proportional anchors.
   Top and bottom rows use normal vertical anchors. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .name,
#board.board-toy-story .tile[data-tile-index="25"] .name{
  position:absolute !important;
  left:50% !important;
  top:27% !important;
  transform:translate(-50%,-50%) !important;
  width:94% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:.78 !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:61% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(30px, 4.6cqw, 44px) !important;
  height:clamp(24px, 4.0cqw, 38px) !important;
  margin:0 !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .price,
#board.board-toy-story .tile[data-tile-index="25"] .price{
  position:absolute !important;
  left:50% !important;
  top:88% !important;
  transform:translate(-50%,-50%) !important;
  width:94% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:1 !important;
  z-index:4 !important;
}

/* Side railroads use local X anchors because the content is rotated. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
/* Side-right index 15: invert local X so visible text stays toward the relative top. */
#board.board-toy-story .tile[data-tile-index="15"] .name{
  position:absolute !important;
  left:73% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:36% !important;
  height:86% !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.70 !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] .space-icon.corner-space-icon{
  position:absolute !important;
  left:39% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(28px, 4.2cqw, 42px) !important;
  height:clamp(23px, 3.7cqw, 36px) !important;
  margin:0 !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] .price{
  position:absolute !important;
  left:12% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:24% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:1 !important;
  z-index:4 !important;
}
/* Side-left index 35: local X follows visible vertical. */
#board.board-toy-story .tile[data-tile-index="35"] .name{
  position:absolute !important;
  left:27% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:36% !important;
  height:86% !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.70 !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] .space-icon.corner-space-icon{
  position:absolute !important;
  left:61% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(28px, 4.2cqw, 42px) !important;
  height:clamp(23px, 3.7cqw, 36px) !important;
  margin:0 !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] .price{
  position:absolute !important;
  left:88% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:24% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:1 !important;
  z-index:4 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .toy-route-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="15"] .toy-route-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] .toy-route-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="35"] .toy-route-icon.board-space-icon{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}

/* v169: use uploaded Eggman Movers truck image for Toy Story route/rail spaces. */
#board.board-toy-story .toy-route-image-icon,
#manageModal .toy-route-image-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
#board.board-toy-story .toy-route-image-icon img,
#manageModal .toy-route-image-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.18)) !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] .space-icon.corner-space-icon{
  width:clamp(42px, 5.4cqw, 58px) !important;
  height:clamp(25px, 3.3cqw, 34px) !important;
}
#board.board-toy-story .tile[data-tile-index="15"] .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="35"] .space-icon.corner-space-icon{
  width:clamp(40px, 5.0cqw, 54px) !important;
  height:clamp(24px, 3.1cqw, 32px) !important;
}
#manageModal .toy-route-image-icon.detail-toy-route-icon img,
#manageModal .toy-route-image-icon.detail-airline-icon img{
  width:96px !important;
  height:56px !important;
}

/* v172: reset route-space positioning after v170/v171 experiments.
   Keep the Eggman Movers image, but use simple, safe anchors that do not
   let the truck/text disturb the price pill. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .owner-strip,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .owner-strip{
  display:none !important;
}

/* Spaces 5 and 25: image 1/4 down, text 1/2 down, amount anchored bottom. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:25% !important;
  transform:translate(-50%,-50%) !important;
  width:min(82%, 62px) !important;
  height:min(27%, 34px) !important;
  max-width:82% !important;
  max-height:30% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important;
  height:32% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6px, .52vw, 7.8px) !important;
  line-height:.78 !important;
  letter-spacing:-.045em !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .price{
  position:absolute !important;
  left:50% !important;
  bottom:3px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:78% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:1 !important;
  font-size:clamp(5.4px, .46vw, 6.8px) !important;
  z-index:4 !important;
}

/* Space 15: side-right content is rotated; keep all items centered on the visible Y axis.
   Local TOP controls visible X, local LEFT controls visible Y. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:25% !important;
  transform:translate(-50%,-50%) !important;
  width:min(74%, 58px) !important;
  height:min(27%, 32px) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:84% !important;
  height:30% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(5.8px, .48vw, 7.4px) !important;
  line-height:.72 !important;
  letter-spacing:-.045em !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price{
  position:absolute !important;
  left:50% !important;
  top:78% !important;
  transform:translate(-50%,-50%) !important;
  width:62% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(5.2px, .42vw, 6.5px) !important;
  line-height:1 !important;
  z-index:4 !important;
}

/* Space 35: same safe centered-Y treatment, with the amount separated from image/text. */
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:75% !important;
  transform:translate(-50%,-50%) !important;
  width:min(74%, 58px) !important;
  height:min(27%, 32px) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:84% !important;
  height:30% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(5.8px, .48vw, 7.4px) !important;
  line-height:.72 !important;
  letter-spacing:-.045em !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price{
  position:absolute !important;
  left:50% !important;
  top:22% !important;
  transform:translate(-50%,-50%) !important;
  width:62% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(5.2px, .42vw, 6.5px) !important;
  line-height:1 !important;
  z-index:4 !important;
}

#board.board-toy-story .tile[data-tile-index="5"] .toy-route-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="15"] .toy-route-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] .toy-route-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="35"] .toy-route-icon.board-space-icon{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
}

/* v173: Toy Story route-space recovery.
   Fix missing Eggman Movers image and keep price/owner banner anchored at the relative bottom.
   This intentionally does NOT hide owner-strip/tile-header globally; it only positions route children. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .tile-header-bar{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .owner-strip.relative-owner-strip{
  display:flex !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  height:8px !important;
  min-height:8px !important;
  margin:0 !important;
  z-index:8 !important;
  border-radius:0 !important;
  transform:none !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price{
  display:block !important;
  position:absolute !important;
  margin:0 !important;
  z-index:7 !important;
  font-size:clamp(5.5px, .48vw, 7px) !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .space-icon.corner-space-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  margin:0 !important;
  padding:0 !important;
  z-index:2 !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .toy-route-image-icon,
#board.board-toy-story .tile[data-tile-index="25"] .toy-route-image-icon,
#board.board-toy-story .tile[data-tile-index="15"] .toy-route-image-icon,
#board.board-toy-story .tile[data-tile-index="35"] .toy-route-image-icon{
  display:flex !important;
  width:100% !important;
  height:100% !important;
  align-items:center !important;
  justify-content:center !important;
  visibility:visible !important;
  opacity:1 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] .toy-route-image-icon img,
#board.board-toy-story .tile[data-tile-index="25"] .toy-route-image-icon img,
#board.board-toy-story .tile[data-tile-index="15"] .toy-route-image-icon img,
#board.board-toy-story .tile[data-tile-index="35"] .toy-route-image-icon img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:1 !important;
  visibility:visible !important;
}
/* Top/bottom route spaces: image at 25%, text at 50%, price at bottom, all centered on X. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .space-icon.corner-space-icon{
  left:50% !important;
  top:25% !important;
  transform:translate(-50%,-50%) !important;
  width:76% !important;
  height:24% !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .name{
  display:flex !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important;
  height:26% !important;
  margin:0 !important;
  padding:0 2px !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6px, .55vw, 8px) !important;
  line-height:.82 !important;
  letter-spacing:-.035em !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .price{
  left:50% !important;
  bottom:10px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:74% !important;
}
/* Side route spaces: tile-content is rotated. Keep all three visually separated;
   price and owner remain at the local bottom so they rotate with the side space. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .space-icon.corner-space-icon{
  left:32% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34% !important;
  height:52% !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .name{
  display:flex !important;
  position:absolute !important;
  left:60% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34% !important;
  height:72% !important;
  margin:0 !important;
  padding:0 1px !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(5.8px, .48vw, 7.2px) !important;
  line-height:.78 !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price{
  left:88% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:22% !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .space-icon.corner-space-icon{
  left:68% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34% !important;
  height:52% !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  display:flex !important;
  position:absolute !important;
  left:40% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34% !important;
  height:72% !important;
  margin:0 !important;
  padding:0 1px !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(5.8px, .48vw, 7.2px) !important;
  line-height:.78 !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price{
  left:12% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:22% !important;
}

/* v179: restart route-space corrections from v173 baseline.
   Follow screen-relative rules: do not reposition route images; only center text and anchor/size price lanes. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Spaces 5 and 25: leave image alone; center only text and amount. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important;
  height:30% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.82 !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .price{
  position:absolute !important;
  left:4px !important;
  right:4px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  bottom:1px !important;
  top:auto !important;
  transform:none !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.96) !important;
  color:#222 !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  z-index:7 !important;
}

/* Space 15 is on the right row and its tile-content is rotated -90deg.
   Screen-right = local bottom, screen-vertical center = local x-axis center.
   Do not touch the image. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:58% !important;
  transform:translate(-50%,-50%) !important;
  width:42% !important;
  height:72% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.78 !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price{
  position:absolute !important;
  left:50% !important;
  top:auto !important;
  bottom:1px !important;
  transform:translateX(-50%) !important;
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.96) !important;
  color:#222 !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  z-index:7 !important;
}

/* Space 35 is on the left row and its tile-content is rotated +90deg.
   Screen-left = local bottom, screen-vertical center = local x-axis center.
   Do not touch the image. */
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:42% !important;
  transform:translate(-50%,-50%) !important;
  width:42% !important;
  height:72% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.78 !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price{
  position:absolute !important;
  left:50% !important;
  top:1px !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  height:17px !important;
  min-height:17px !important;
  margin:0 !important;
  padding:0 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.96) !important;
  color:#222 !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  z-index:7 !important;
}

/* v180: careful text-only alignment for Toy Story route spaces 5 and 15.
   Do not touch images, amount pills, or ownership banners. */
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .name{
  left:50% !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:94% !important;
  max-width:94% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .name{
  left:50% !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 !important;
}

/* v181: correction for Toy Story route text alignment only.
   Previous v180 selector did not affect the active rendered position enough.
   Keep images/prices/owner banners untouched; only center the route names for spaces 5 and 15. */
#board.board-toy-story .tile[data-tile-index="5"].tile-type-rail > .tile-content > .name{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  bottom:auto !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  transform:translateY(-50%) !important;
  margin:0 auto !important;
  padding:0 2px !important;
  display:block !important;
  text-align:center !important;
  align-self:auto !important;
  justify-self:auto !important;
  white-space:normal !important;
  line-height:.86 !important;
  z-index:8 !important;
}

/* Space 15 tile-content is rotated. Center the text box inside that rotated local space
   without touching the image or amount. */
#board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:42% !important;
  max-width:42% !important;
  height:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 1px !important;
  display:block !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:.80 !important;
  z-index:8 !important;
}

/* v182: keep v181 text alignment for spaces 5/15, restore route image file, and refine Space 10 crate. */
#board.board-toy-story .toy-route-image-icon img,
#manageModal .toy-route-image-icon img{
  content:url('/icons/toy-story-board/toy-story-eggmovers-truck.png') !important;
}

/* Space 10: crate fills about 65% of the square and is centered; words stay at the bottom. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:65% !important;
  height:65% !important;
  max-width:65% !important;
  max-height:65% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  display:block !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  position:absolute !important;
  left:50% !important;
  top:45% !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:-17% !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:150% !important;
  text-align:center !important;
  line-height:.86 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
  color:#0f172a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.75) !important;
  white-space:normal !important;
  z-index:4 !important;
}

/* v183: focused Toy Story fixes from v182.
   Keep Space 5 as-is. Fix only Space 15 text centering, Space 10 crate sizing,
   and ensure current versioned truck/crate assets are used. */
#board.board-toy-story .toy-route-image-icon img,
#manageModal .toy-route-image-icon img{
  content:url('/icons/toy-story-board/toy-story-eggmovers-truck.png') !important;
}

/* Space 15: text-only recenter. Do not move the route image, price, or owner strip. */
#board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:58% !important;
  max-width:58% !important;
  height:56% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:.82 !important;
  z-index:8 !important;
}

/* Space 10: crate uses the cleaned v183 asset, fills the square visually, and keeps TIME OUT at the bottom. */
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  left:50% !important;
  top:44% !important;
  width:65% !important;
  height:65% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  display:block !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:112% !important;
  height:112% !important;
  max-width:112% !important;
  max-height:112% !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:-20% !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:150% !important;
  text-align:center !important;
  line-height:.86 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:4 !important;
}

/* v184: Toy Story color/path recovery and Space 10 crate sizing.
   Keep route-space alignment from v183; only restore image paths, set colors, and size the Time Out crate. */
#board.board-toy-story .toy-route-image-icon img,
#manageModal .toy-route-image-icon img{
  content:url('/icons/toy-story-board/toy-story-eggmovers-truck.png') !important;
}
#board.board-toy-story .tile.flag-tile[data-tile-group="brown"] > .tile-content > .tile-header-bar{background:#F2C94C !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="sky"] > .tile-content > .tile-header-bar{background:#2FBE7A !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="pink"] > .tile-content > .tile-header-bar{background:#FFD3F6 !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="orange"] > .tile-content > .tile-header-bar{background:#9A5A23 !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="red"] > .tile-content > .tile-header-bar{background:#E85D5D !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="yellow"] > .tile-content > .tile-header-bar{background:#6D28D9 !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="green"] > .tile-content > .tile-header-bar{background:#83B840 !important;}
#board.board-toy-story .tile.flag-tile[data-tile-group="blue"] > .tile-content > .tile-header-bar{background:#38BDF8 !important;}

/* Space 2 Toy Chest and Space 4 Cleanup Fee: make the special art yellower without changing layout. */
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-box,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-lid,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-ribbon,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-body,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-panel,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-nozzle{
  fill:#FDE047 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-box,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-lid,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-body{
  stroke:#A16207 !important;
}

/* Space 10: blue crate is exactly 70% of the square, centered, with TIME OUT at the bottom. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:46% !important;
  width:70% !important;
  height:70% !important;
  max-width:70% !important;
  max-height:70% !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:6% !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:92% !important;
  text-align:center !important;
  line-height:.88 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:4 !important;
}

/* v185: Toy Story color retune and Space 10 crate enlargement.
   Keep current route/text alignment; only adjust property-set colors/images and Time Out crate. */
#board.board-toy-story .tile[data-tile-index="6"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="8"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="9"] > .tile-content > .tile-header-bar{ background:#32EE2E !important; }
#board.board-toy-story .tile[data-tile-index="11"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="13"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="14"] > .tile-content > .tile-header-bar{ background:#FFE6FB !important; }
#board.board-toy-story .tile[data-tile-index="16"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="18"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="19"] > .tile-content > .tile-header-bar{ background:#8B5A2B !important; }
#board.board-toy-story .tile[data-tile-index="26"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="27"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="29"] > .tile-content > .tile-header-bar{ background:#4C1D95 !important; }
#board.board-toy-story .tile[data-tile-index="31"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="32"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="34"] > .tile-content > .tile-header-bar{ background:#0B5D37 !important; }
#board.board-toy-story .tile[data-tile-index="1"] > .tile-content > .tile-header-bar,
#board.board-toy-story .tile[data-tile-index="3"] > .tile-content > .tile-header-bar{ background:#FDE047 !important; }

/* Reconnect each Toy Story set image to the matching v185 asset. */
#board.board-toy-story .tile[data-tile-index="1"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="3"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-brown-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="6"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="8"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="9"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-sky-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="11"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="13"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="14"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-pink-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="16"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="18"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="19"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-orange-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="21"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="23"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="24"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-red-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="26"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="27"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="29"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-yellow-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="31"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="32"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="34"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-green-set.png') !important; }
#board.board-toy-story .tile[data-tile-index="37"] .tile-header-bar.has-image img,
#board.board-toy-story .tile[data-tile-index="39"] .tile-header-bar.has-image img{ content:url('/icons/toy-story-board/toy-story-blue-set.png') !important; }

/* Space 2 and Space 4: stronger yellow treatment. */
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-box,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-lid,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-ribbon,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-body,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-panel,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-nozzle{ fill:#FDE047 !important; }
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-box,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-lid,
#board.board-toy-story .tile[data-tile-index="4"] .toy-cleanup-vac-body{ stroke:#A16207 !important; }

/* Space 10: make the crate much larger using the cleaned/tight v185 asset, keep TIME OUT at bottom. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{ position:relative !important; }
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:180% !important;
  height:180% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:5% !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:94% !important;
  text-align:center !important;
  line-height:.88 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:5 !important;
}


/* v187: rollback from v186 and apply only the requested narrow Toy Story fixes.
   - Space 10: crate at 70%, visually centered, TIME OUT directly underneath.
   - Space 25: text alignment exactly matches Space 5.
   - Space 2: text brought down and image brought up, both centered on X. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:70% !important;
  height:70% !important;
  max-width:70% !important;
  max-height:70% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  top:80% !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  width:92% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:.88 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:5 !important;
}

#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important;
  height:30% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.82 !important;
  overflow:hidden !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="5"] > .tile-content > .price,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .price{
  left:4px !important;
  right:4px !important;
  bottom:1px !important;
  top:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  transform:none !important;
  text-align:center !important;
}

#board.board-toy-story .tile[data-tile-index="2"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:42% !important;
  transform:translate(-50%,-50%) !important;
  width:94% !important;
  height:auto !important;
  max-height:34% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.78 !important;
  overflow:visible !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon{
  position:absolute !important;
  left:50% !important;
  top:58% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(28px, 4.4cqw, 42px) !important;
  height:clamp(24px, 3.9cqw, 38px) !important;
  max-width:50% !important;
  max-height:40% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}

/* v188: targeted fixes only.
   Space 10: size crate relative to the actual corner square (height-driven 70%).
   Space 25: make text centering match Space 5.
   Space 2: target the active fund/tile markup and visibly bring text/image toward center. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:42% !important;
  width:92% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  top:auto !important;
  bottom:6% !important;
  transform:translateX(-50%) !important;
  width:94% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:.88 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:5 !important;
}

#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .name{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  height:30% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.82 !important;
  overflow:hidden !important;
  z-index:3 !important;
}

#board.board-toy-story .tile[data-tile-index="2"].tile-type-fund > .tile-content,
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="2"].tile-type-fund > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:46% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  height:auto !important;
  max-height:34% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.78 !important;
  overflow:visible !important;
  z-index:4 !important;
}
#board.board-toy-story .tile[data-tile-index="2"].tile-type-fund > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:62% !important;
  transform:translate(-50%,-50%) !important;
  width:clamp(32px, 5.2cqw, 50px) !important;
  height:clamp(28px, 4.6cqw, 44px) !important;
  max-width:62% !important;
  max-height:44% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="2"] .board-space-icon{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
}

/* v189: final targeted Toy Story fixes for spaces 2, 10, 17, and 33.
   Use active selectors only. Keep other route/property work untouched. */

/* Space 2: create a real visual gap; text above, image below, both centered on screen X. */
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:35% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important;
  height:auto !important;
  max-height:28% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.78 !important;
  overflow:visible !important;
  z-index:4 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:70% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:52% !important;
  height:34% !important;
  max-width:52% !important;
  max-height:34% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon svg{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}

/* Space 10: the crate image itself is sized relative to the actual square space.
   The img is a tightly cropped v189 asset so 70% means 70% of the visible board square, not 70% of old padded artwork. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:42% !important;
  width:88% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  filter:none !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:4% !important;
  transform:translateX(-50%) !important;
  width:94% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:.88 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:5 !important;
}

/* Spaces 17 and 33: these are side spaces whose tile-content is already rotated.
   User-facing screen alignment: 17 text left/image right; 33 image left/text right.
   Because local Y becomes screen X after rotation, use top:33/66 and keep left:50. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:82% !important;
  height:34% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(6.4px, .58vw, 8.5px) !important;
  line-height:.72 !important;
  letter-spacing:-.035em !important;
  overflow:visible !important;
  z-index:4 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon{
  position:absolute !important;
  left:50% !important;
  top:66% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:72% !important;
  height:38% !important;
  max-width:72% !important;
  max-height:38% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon svg,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon svg{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}

/* v190: Toy Story focused corrections. Keep prior working layout; override only active elements. */
#board.board-toy-story .toy-route-image-icon img,
#manageModal .toy-route-image-icon img{
  content:url('/icons/toy-story-board/toy-story-eggmovers-truck.png') !important;
}

/* Toy Chest: use one improved chest image for spaces 2, 17, and 33. */
#board.board-toy-story .toy-chest-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  filter:drop-shadow(0 1px 1px rgba(15,23,42,.18)) !important;
}
#board.board-toy-story .toy-chest-icon img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Space 2: keep the image position that was working, move text upward and preserve a gap. */
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:28% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:94% !important;
  height:24% !important;
  max-height:24% !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:.82 !important;
  overflow:visible !important;
  z-index:10 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:69% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:62% !important;
  height:38% !important;
  max-width:62% !important;
  max-height:38% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2 !important;
}

/* Spaces 17 and 33: keep current image positions, restore/force visible text.
   These tile-content blocks are already rotated by the board engine. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:90% !important;
  height:34% !important;
  max-width:90% !important;
  max-height:34% !important;
  margin:0 !important;
  padding:0 1px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  font-size:clamp(7px, .62vw, 9px) !important;
  font-weight:950 !important;
  line-height:.78 !important;
  letter-spacing:-.035em !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:12 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:66% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:76% !important;
  height:40% !important;
  max-width:76% !important;
  max-height:40% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:2 !important;
}

/* Space 10: size the visible crate relative to the actual corner square.
   Parent fills the whole square; image is intentionally large; TIME OUT remains at bottom. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:block !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:96% !important;
  height:82% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  filter:none !important;
  z-index:3 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:3% !important;
  transform:translateX(-50%) !important;
  width:94% !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  text-align:center !important;
  line-height:.88 !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:normal !important;
  z-index:5 !important;
}

/* v192 focused Toy Story fixes: final active overrides only for requested spaces. */
#board.board-toy-story .toy-chest-icon img{
  content:url('/icons/toy-story-board/toy-story-toy-chest.png') !important;
}

/* Space 10: force crate to render as board-square-relative art, bypassing older img sizing. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:92% !important;
  height:70% !important;
  transform:translate(-50%,-50%) !important;
  background:url('/icons/toy-story-board/toy-story-jail-crate.png') center center / contain no-repeat !important;
  z-index:3 !important;
  pointer-events:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:block !important;
  z-index:4 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:5% !important;
  transform:translateX(-50%) !important;
  width:96% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  font-size:clamp(8px, 1.35vmin, 13px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  z-index:8 !important;
}

/* Space 17/33: restore visible text with counter-rotation while keeping current image positions. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  width:54% !important;
  height:30% !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:30 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
  font-weight:1000 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:33% !important;
  width:54% !important;
  height:30% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:30 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
  font-weight:1000 !important;
}

/* Space 15: right-side route space. Image left, amount right/bottom, both vertically centered on screen. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:23% !important;
  width:44% !important;
  height:38% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:5 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:52% !important;
  width:50% !important;
  height:36% !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:visible !important;
  z-index:8 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:50% !important;
  top:84% !important;
  width:auto !important;
  min-width:42px !important;
  height:20px !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 10px !important;
  border-radius:999px !important;
  text-align:center !important;
  z-index:10 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:50% !important;
  top:93% !important;
  width:56% !important;
  height:11px !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
  z-index:7 !important;
}

/* v192: final focused Toy Story corrections. Do not touch route images; only text/amount orientation, toy chest text, and Time Out crate sizing. */

/* Space 10: disable older pseudo/background crate rules and size the actual crate image to 70% of the board square. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::before,
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:4 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:45% !important;
  width:70% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:5 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:4% !important;
  width:92% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  text-align:center !important;
  font-size:clamp(9px,1.45vmin,14px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  margin:0 !important;
  padding:0 !important;
  z-index:8 !important;
}

/* Space 2: keep image position, move text upward only. */
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:28% !important;
  width:92% !important;
  height:24% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  z-index:25 !important;
}

/* Space 17: keep image good; center visible text. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:72% !important;
  height:26% !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#111827 !important;
  overflow:visible !important;
  z-index:60 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
  font-weight:1000 !important;
}

/* Space 33: mirror of Space 17. */
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:72% !important;
  height:26% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#111827 !important;
  overflow:visible !important;
  z-index:60 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
  font-weight:1000 !important;
}

/* Space 15 amount: same position, corrected counter-clockwise orientation. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price.space-price{
  transform:translate(-50%,-50%) rotate(-90deg) !important;
}

/* Space 35: reverse/mirror of Space 15. Do not touch image. */
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:52% !important;
  width:50% !important;
  height:36% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:visible !important;
  z-index:8 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:50% !important;
  top:84% !important;
  width:auto !important;
  min-width:42px !important;
  height:20px !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 10px !important;
  border-radius:999px !important;
  text-align:center !important;
  z-index:10 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:50% !important;
  top:93% !important;
  width:56% !important;
  height:11px !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
  z-index:7 !important;
}


/* v193 final Toy Story focused cleanup: restore 2/17/33 images/text, correct 15/35 amount rotation, and force Space 10 crate sizing. */
#board.board-toy-story .toy-chest-icon,
#board.board-toy-story .toy-chest-icon.board-space-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#board.board-toy-story .toy-chest-icon img,
#board.board-toy-story .toy-chest-icon.board-space-icon img{
  content:url('/icons/toy-story-board/toy-story-toy-chest.png') !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:24% !important;
  width:90% !important;
  height:24% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:40 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon{
  position:absolute !important;
  left:50% !important;
  top:68% !important;
  width:58% !important;
  height:40% !important;
  transform:translate(-50%,-50%) !important;
  z-index:35 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon{
  position:absolute !important;
  left:70% !important;
  top:50% !important;
  width:44% !important;
  height:52% !important;
  transform:translate(-50%,-50%) !important;
  z-index:35 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name{
  position:absolute !important;
  left:30% !important;
  top:50% !important;
  width:42% !important;
  height:70% !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:60 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
  font-weight:1000 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon{
  position:absolute !important;
  left:30% !important;
  top:50% !important;
  width:44% !important;
  height:52% !important;
  transform:translate(-50%,-50%) !important;
  z-index:35 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:70% !important;
  top:50% !important;
  width:42% !important;
  height:70% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:60 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
  font-weight:1000 !important;
}
/* Space 15 amount: tile-content already rotates the side row; no child rotation keeps it at a clean 90deg screen orientation. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price.space-price{
  transform:translate(-50%,-50%) rotate(0deg) !important;
  transform-origin:center center !important;
}
/* Space 35 is the mirror of Space 15. */
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price.space-price{
  transform:translate(-50%,-50%) rotate(0deg) !important;
  transform-origin:center center !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  transform:translate(-50%,-50%) rotate(0deg) !important;
  transform-origin:center center !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .space-icon.corner-space-icon{
  transform:translate(-50%,-50%) !important;
}
/* Space 10 crate: parent is the full corner square; image is 70% of that square, and TIME OUT stays underneath. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::before,
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:44% !important;
  width:70% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:5 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:4% !important;
  width:94% !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:clamp(9px,1.45vmin,14px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  z-index:10 !important;
}

/* v194 Toy Story recovery: final active selectors only for requested spaces/assets. */
#board.board-toy-story .toy-chest-icon img,
#board.board-toy-story .toy-chest-icon.board-space-icon img{
  content:url('/icons/toy-story-board/toy-story-toy-chest.png') !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:22% !important;
  width:92% !important;
  height:22% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:80 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon{
  position:absolute !important;
  left:50% !important;
  top:67% !important;
  width:58% !important;
  height:38% !important;
  transform:translate(-50%,-50%) !important;
  z-index:70 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon{
  position:absolute !important;
  left:70% !important;
  top:50% !important;
  width:44% !important;
  height:52% !important;
  transform:translate(-50%,-50%) !important;
  z-index:70 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name{
  position:absolute !important;
  left:30% !important;
  top:50% !important;
  width:44% !important;
  height:62% !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:90 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.86 !important;
  font-weight:1000 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon{
  position:absolute !important;
  left:30% !important;
  top:50% !important;
  width:44% !important;
  height:52% !important;
  transform:translate(-50%,-50%) !important;
  z-index:70 !important;
}
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:70% !important;
  top:50% !important;
  width:44% !important;
  height:62% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  z-index:90 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.86 !important;
  font-weight:1000 !important;
}
/* Space 15 amount: screen-right anchor; same pill size as other property amounts. */
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:50% !important;
  top:86% !important;
  width:auto !important;
  min-width:42px !important;
  height:20px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
  z-index:95 !important;
}
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:50% !important;
  top:94% !important;
  width:56% !important;
  height:11px !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
  z-index:75 !important;
}
/* Space 35: exact left/right mirror of Space 15. */
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .space-icon.corner-space-icon{
  position:absolute !important;
  left:50% !important;
  top:23% !important;
  width:44% !important;
  height:38% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:5 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:52% !important;
  width:50% !important;
  height:36% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:visible !important;
  z-index:8 !important;
  font-size:clamp(7px,.62vw,9px) !important;
  line-height:.82 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:50% !important;
  top:86% !important;
  width:auto !important;
  min-width:42px !important;
  height:20px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
  z-index:95 !important;
}
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:50% !important;
  top:94% !important;
  width:56% !important;
  height:11px !important;
  transform:translate(-50%,-50%) rotate(90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
  z-index:75 !important;
}
/* Space 10: draw actual crate image large from a tight asset; no pseudo crate. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::before,
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  overflow:visible !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:30 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:45% !important;
  width:82% !important;
  height:82% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:35 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:3% !important;
  width:94% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  text-align:center !important;
  font-size:clamp(9px,1.45vmin,14px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  margin:0 !important;
  padding:0 !important;
  z-index:40 !important;
}


/* v195: Space 15 amount correction only.
   Do NOT rotate the amount. The side tile content already handles the 90deg orientation.
   Keep the pill normal-sized and move it to the screen-right side. */
#board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .price.space-price{
  position:absolute !important;
  left:88% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-width:42px !important;
  max-width:70px !important;
  height:20px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  z-index:120 !important;
}

/* v196: Space 10 final recovery - restore visible crate and TIME OUT text only. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::before,
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content::after,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon::before,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:40 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:70% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:45 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:4% !important;
  width:96% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  text-align:center !important;
  color:#0f172a !important;
  font-size:clamp(9px,1.45vmin,14px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
  margin:0 !important;
  padding:0 !important;
  z-index:50 !important;
}


/* v198 fresh fixes for user-referenced Toy Story board spaces.
   These selectors use the actual rendered data-tile-index values observed in client.js:
   10 = Time Out/Jail corner, 15 = Airport Shuttle route, 17 = Toy Chest,
   25 = Moving Van route, 33 = Toy Chest. */

/* Spaces 15 and 25: route amount pill uses the same bottom anchor and visual size as property price pills. */
#board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .price.space-price,
#board.board-toy-story .tile[data-tile-index="25"].tile-type-rail > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile[data-tile-index="25"].tile-type-rail > .tile-content > .price.space-price,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .price.space-price,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:4px !important;
  width:auto !important;
  min-width:42px !important;
  max-width:72px !important;
  height:20px !important;
  min-height:20px !important;
  padding:0 10px !important;
  margin:0 !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform:translateX(-50%) !important;
  transform-origin:center center !important;
  z-index:300 !important;
}

/* When owned, keep the owner strip in that same relative bottom zone. */
#board.board-toy-story .tile[data-tile-index="15"].tile-type-rail > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile[data-tile-index="25"].tile-type-rail > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile[data-tile-index="15"] > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile[data-tile-index="25"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:4px !important;
  width:56% !important;
  height:11px !important;
  min-height:11px !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  transform-origin:center center !important;
  z-index:260 !important;
}

/* Spaces 17 and 33: Toy Chest one-line label above the image, using the same simple layout as space 2.
   The tile-content transform from client.js rotates the whole layout for side orientation. */
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:22% !important;
  width:94% !important;
  height:22% !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:320 !important;
  font-size:clamp(8px,.72vw,12px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name br,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name br{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon.board-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon.board-space-icon{
  position:absolute !important;
  left:50% !important;
  top:67% !important;
  width:58% !important;
  height:38% !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:310 !important;
}
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon img,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
}

/* Space 10: blue crate in the middle at 70% of the tile, with Time Out below it. */
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="10"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-icon.toy-story-jail-crate-icon,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:340 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon::before,
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon::after{
  content:none !important;
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon img{
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  position:absolute !important;
  left:50% !important;
  top:43% !important;
  width:70% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:350 !important;
}
#board.board-toy-story .tile[data-tile-index="10"] .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:4% !important;
  width:96% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  text-align:center !important;
  color:#0f172a !important;
  font-size:clamp(9px,1.45vmin,14px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
  margin:0 !important;
  padding:0 !important;
  z-index:360 !important;
}

/* v199: targeted Toy Story fixes using one-based board-space selectors.
   Space 15 = data-tile-index 14. Space 35 = data-tile-index 34.
   Time Out/Jail corner is rendered by the game at data-tile-index 10. */

/* Space 15: keep the unowned amount pill/strip in the same bottom lane as the other side-row properties. */
#board.board-toy-story .tile.space-15[data-space-number="15"][data-tile-index="14"] > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile.space-15[data-space-number="15"][data-tile-index="14"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:auto !important;
  bottom:-2px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  padding:0 6px !important;
  margin:0 !important;
  border-radius:7px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  transform:none !important;
  transform-origin:center center !important;
  overflow:hidden !important;
  z-index:1000 !important;
}
#board.board-toy-story .tile.space-15[data-space-number="15"][data-tile-index="14"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:auto !important;
  bottom:-2px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  border-radius:7px !important;
  transform:none !important;
  box-sizing:border-box !important;
  z-index:995 !important;
}

/* Space 35: mirror Space 15 on the opposite side of the board. */
#board.board-toy-story .tile.space-35[data-space-number="35"][data-tile-index="34"] > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile.space-35[data-space-number="35"][data-tile-index="34"] > .tile-content > .price.space-price{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:auto !important;
  bottom:-2px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  padding:0 6px !important;
  margin:0 !important;
  border-radius:7px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  transform:none !important;
  transform-origin:center center !important;
  overflow:hidden !important;
  z-index:1000 !important;
}
#board.board-toy-story .tile.space-35[data-space-number="35"][data-tile-index="34"] > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:auto !important;
  bottom:-2px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  margin:0 !important;
  border-radius:7px !important;
  transform:none !important;
  box-sizing:border-box !important;
  z-index:995 !important;
}

/* Time Out/Jail corner reset: ignore prior crate iterations and show only the v196 crate image plus words below. */
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  transform:rotate(0deg) !important;
  background:transparent !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-icon.toy-story-jail-crate-icon,
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1000 !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content::before,
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content::after,
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon::before,
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon::after{
  content:none !important;
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon img{
  content:normal !important;
  position:absolute !important;
  left:50% !important;
  top:41% !important;
  width:70% !important;
  height:70% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  z-index:1010 !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon .toy-story-jail-word{
  position:absolute !important;
  left:50% !important;
  bottom:5% !important;
  width:96% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  text-align:center !important;
  color:#0f172a !important;
  font-size:clamp(10px,1.55vmin,15px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.75) !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1020 !important;
}


/* Active Toy Story board fixes. */

/* Your Actions popup styling. */
.center-card > #turnActionModal.turn-action-modal .turn-actions,
.center-card > .turn-action-modal .turn-actions,
.turn-actions{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
.center-card > #turnActionModal.turn-action-modal .turn-actions button,
.center-card > .turn-action-modal .turn-actions button,
.turn-actions button{
  border-radius:14px !important;
  border:2px solid #111 !important;
  overflow:hidden !important;
  box-shadow:none !important;
  font-weight:1000 !important;
  color:#111 !important;
}
#rollBtn{
  grid-column:1 / -1 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.98), rgba(255,255,255,0) 30%),
    linear-gradient(115deg, #eee6ff 0%, #dcecff 21%, #ffd9f1 45%, #ece2ff 68%, #daf6ff 100%) !important;
  color:#111 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(148,163,184,.22) !important;
}
#buyBtn.buy-attention:not(:disabled){
  background:linear-gradient(135deg,#f7c912 0%,#ffeb3b 46%,#fff59d 100%) !important;
  color:#1f1600 !important;
  box-shadow:inset 0 0 0 999px rgba(255,255,120,.18),0 0 0 3px rgba(255,242,87,.55),0 0 22px rgba(255,245,157,.95) !important;
  animation:buy-attention-glow 0.9s ease-in-out infinite alternate !important;
}
@keyframes buy-attention-glow{
  from{filter:saturate(1.08) brightness(1.02); box-shadow:inset 0 0 0 999px rgba(255,255,120,.16),0 0 0 3px rgba(255,242,87,.45),0 0 15px rgba(255,245,157,.75);}
  to{filter:saturate(1.24) brightness(1.16); box-shadow:inset 0 0 0 999px rgba(255,255,160,.32),0 0 0 5px rgba(255,248,140,.72),0 0 34px rgba(255,249,196,1);}
}
#endBtn{
  grid-column:1 / -1 !important;
  background:#d83a36 !important;
  color:#fff !important;
  border-color:#111 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.28) !important;
}

/* Side amount/owner pills use the Space 8 visual shape, rotated with the side tile instead of stretched. */
#board.board-toy-story .tile:not(.corner):not(.corner-space) > .tile-content > .price.space-price,
#board.board-toy-story .tile:not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip,
body.in-game #board.board-toy-story .tile:not(.corner):not(.corner-space) > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile:not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip{
  position:absolute !important;
  top:auto !important;
  bottom:1px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  padding:0 4px !important;
  border-radius:7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  font-size:clamp(8px,.62vw,10px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
  background:rgba(255,255,255,.96) !important;
  color:#222 !important;
}
#board.board-toy-story .tile:not(.side-left):not(.side-right):not(.corner):not(.corner-space) > .tile-content > .price.space-price,
#board.board-toy-story .tile:not(.side-left):not(.side-right):not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip,
body.in-game #board.board-toy-story .tile:not(.side-left):not(.side-right):not(.corner):not(.corner-space) > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile:not(.side-left):not(.side-right):not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip{
  left:4px !important;
  right:4px !important;
  width:auto !important;
  transform:none !important;
}
#board.board-toy-story .tile.side-left:not(.corner):not(.corner-space) > .tile-content > .price.space-price,
#board.board-toy-story .tile.side-right:not(.corner):not(.corner-space) > .tile-content > .price.space-price,
#board.board-toy-story .tile.side-left:not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip,
#board.board-toy-story .tile.side-right:not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip,
body.in-game #board.board-toy-story .tile.side-left:not(.corner):not(.corner-space) > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile.side-right:not(.corner):not(.corner-space) > .tile-content > .price.space-price,
body.in-game #board.board-toy-story .tile.side-left:not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip,
body.in-game #board.board-toy-story .tile.side-right:not(.corner):not(.corner-space) > .tile-content > .owner-strip.relative-owner-strip{
  left:50% !important;
  right:auto !important;
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  transform:translateX(-50%) !important;
  transform-origin:center center !important;
}

/* Toy Chest spaces 2, 17, and 33: identical relative layout with label directly above the image. */
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content,
body.in-game #board.board-toy-story .tile[data-tile-index="2"] > .tile-content,
body.in-game #board.board-toy-story .tile[data-tile-index="17"] > .tile-content,
body.in-game #board.board-toy-story .tile[data-tile-index="33"] > .tile-content{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name,
body.in-game #board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name,
body.in-game #board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name,
body.in-game #board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:20% !important;
  width:94% !important;
  height:20% !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
  color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:320 !important;
  font-size:clamp(8px,.72vw,12px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name br,
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name br,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name br,
body.in-game #board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .name br,
body.in-game #board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .name br,
body.in-game #board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .name br{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="2"] > .tile-content > .space-icon.corner-space-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="17"] > .tile-content > .space-icon.corner-space-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="33"] > .tile-content > .space-icon.corner-space-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon{
  position:absolute !important;
  left:50% !important;
  top:66% !important;
  width:84% !important;
  height:64% !important;
  max-width:84% !important;
  max-height:64% !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:310 !important;
}
#board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon img,
#board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon img,
#board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon img,
body.in-game #board.board-toy-story .tile[data-tile-index="2"] .toy-chest-icon img,
body.in-game #board.board-toy-story .tile[data-tile-index="17"] .toy-chest-icon img,
body.in-game #board.board-toy-story .tile[data-tile-index="33"] .toy-chest-icon img{
  content:url('/icons/toy-story-board/toy-story-toy-chest.png') !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
}

/* User Space 10 = data-tile-index 10: crate above, TIME OUT below. */
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  padding:0 !important;
  overflow:hidden !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content > .name,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content > .name{
  display:none !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content > .space-icon.corner-space-icon,
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail > .tile-content > .space-icon.corner-space-icon,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon img,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon img{
  order:1 !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  content:url('/icons/toy-story-board/toy-story-jail-crate.png') !important;
  display:block !important;
  width:70% !important;
  height:66% !important;
  max-width:70% !important;
  max-height:66% !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
  flex:0 0 66% !important;
}
#board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon .toy-story-jail-word,
body.in-game #board.board-toy-story .tile[data-tile-index="10"].tile-type-jail .toy-story-jail-crate-icon .toy-story-jail-word{
  order:2 !important;
  display:block !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:100% !important;
  margin:1px 0 0 !important;
  padding:0 2px !important;
  color:#111827 !important;
  font-size:clamp(9px,1vw,13px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-align:center !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* User Space 35 = data-tile-index 35. */
#board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name,
body.in-game #board.board-toy-story .tile[data-tile-index="35"] > .tile-content > .name{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:92% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:clamp(9px,.86vw,13px) !important;
  line-height:1 !important;
  font-weight:1000 !important;
  z-index:1420 !important;
}

/* Chat polish: keep Send and mute curtain radii consistent. */
#chatBtn{
  border-radius:18px !important;
  overflow:hidden !important;
  clip-path:inset(0 round 18px) !important;
}
.chat-mute-surface{
  border-radius:18px !important;
  overflow:hidden !important;
}
.chat-mute-curtain{
  border-radius:18px !important;
  overflow:hidden !important;
  clip-path:inset(0 round 18px) !important;
}
.chat-mute-curtain::before{
  border-top-left-radius:18px !important;
  border-bottom-left-radius:18px !important;
}
.chat-mute-curtain::after{
  border-top-right-radius:18px !important;
  border-bottom-right-radius:18px !important;
}
.chat-panel.chat-muted #chatBtn{
  visibility:hidden !important;
}


/* Toy Story ownership and trade icon polish */
#board.board-toy-story .tile .tile-content > .owner-strip.relative-owner-strip{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  border:1px solid rgba(15,23,42,.35) !important;
}
.property-set-chip.toy-story-trade-icon{
  width:28px !important;
  height:24px !important;
  min-width:28px !important;
  padding:0 !important;
  border-radius:7px !important;
  overflow:hidden !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.18) !important;
  box-shadow:0 1px 3px rgba(15,23,42,.18) !important;
}
.property-set-chip.toy-story-trade-icon img,
.property-set-chip.toy-story-trade-icon svg{
  max-width:24px !important;
  max-height:20px !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
}
.property-set-chip.toy-story-trade-icon .toy-route-icon,
.property-set-chip.toy-story-trade-icon .utility-icon{
  width:24px !important;
  height:20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.property-set-chip.toy-story-trade-icon .toy-route-icon img{
  max-width:24px !important;
  max-height:20px !important;
}

#board.board-toy-story .tile .tile-content > .owner-strip.relative-owner-strip{
  background:var(--owner-color, currentColor) !important;
  color:#0f172a !important;
}


/* Toy Story owner banners: the banner color is applied inline by client.js with !important so old white pill rules cannot win. */
#board.board-toy-story .tile .tile-content > .owner-strip.relative-owner-strip{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  border:1px solid rgba(15,23,42,.28) !important;
}


/* Phone-only board name sizing.
   Keep tile layout/header/banner placement unchanged.
   Property names get their own rule because they were not being reduced by the older generic selectors. */
@media (pointer: coarse) and (max-width: 600px),
       (pointer: coarse) and (max-width: 900px) and (max-height: 500px){
  #board .tile:not(.corner):not(.corner-space) > .tile-content > .name,
  #board .tile:not(.corner):not(.corner-space) > .tile-content > .name span{
    line-height:.86 !important;
    font-weight:500 !important;
    letter-spacing:-.025em !important;
    text-shadow:none !important;
  }

  #board.board-classic .tile:not(.corner):not(.corner-space) > .tile-content > .name,
  #board.board-classic .tile:not(.corner):not(.corner-space) > .tile-content > .name span{
    font-size:10px !important;
  }

  #board.board-world-cities:not(.board-toy-story) .tile:not(.corner):not(.corner-space) > .tile-content > .name,
  #board.board-world-cities:not(.board-toy-story) .tile:not(.corner):not(.corner-space) > .tile-content > .name span{
    font-size:7.2px !important;
  }

  #board.board-world-cities:not(.board-toy-story) .tile.tile-type-property:not(.corner):not(.corner-space) > .tile-content > .name,
  #board.board-world-cities:not(.board-toy-story) .tile.tile-type-property:not(.corner):not(.corner-space) > .tile-content > .name span{
    font-size:5.8px !important;
    line-height:.84 !important;
  }

  #board.board-toy-story .tile:not(.corner):not(.corner-space) > .tile-content > .name,
  #board.board-toy-story .tile:not(.corner):not(.corner-space) > .tile-content > .name span{
    font-size:6.8px !important;
  }

  #board.board-toy-story .tile.tile-type-property:not(.corner):not(.corner-space) > .tile-content > .name,
  #board.board-toy-story .tile.tile-type-property:not(.corner):not(.corner-space) > .tile-content > .name span{
    font-size:5.4px !important;
    line-height:.84 !important;
  }

  #board .tile.corner > .tile-content > .name,
  #board .tile.corner-space > .tile-content > .name,
  #board .tile.corner > .tile-content > .name span,
  #board .tile.corner-space > .tile-content > .name span{
    font-size:6.5px !important;
    line-height:.86 !important;
    font-weight:600 !important;
    letter-spacing:-.02em !important;
  }
}

/* Classic and World amount pills share the ownership-banner geometry by using the same owner-strip classes in client.js.
   This rule changes only the amount-pill color/text; size, shape, radius, and placement come from the ownership pill. */
#board.board-classic .tile:not(.corner):not(.corner-space) > .tile-content > .space-price.amount-as-owner-strip,
#board.board-world-cities:not(.board-toy-story) .tile:not(.corner):not(.corner-space) > .tile-content > .space-price.amount-as-owner-strip,
body.in-game #board.board-classic .tile:not(.corner):not(.corner-space) > .tile-content > .space-price.amount-as-owner-strip,
body.in-game #board.board-world-cities:not(.board-toy-story) .tile:not(.corner):not(.corner-space) > .tile-content > .space-price.amount-as-owner-strip{
  background:rgba(255,255,255,.96) !important;
  background-color:rgba(255,255,255,.96) !important;
  color:#222 !important;
  font-weight:1000 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* World Cities flag placement: keep flags on top of the tile instead of dropping below/cropping. */
#board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.flag-only,
#board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image{
  flex:0 0 14px !important;
  height:14px !important;
  min-height:14px !important;
  max-height:14px !important;
  margin:0 auto 1px !important;
  overflow:visible !important;
  align-self:center !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  position:relative !important;
  z-index:60 !important;
}
#board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.flag-only span,
#board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image span,
#board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image img{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateY(-2px) !important;
  margin:0 auto !important;
  line-height:1 !important;
  max-height:18px !important;
  object-fit:contain !important;
  position:relative !important;
  z-index:61 !important;
}
@media (pointer: coarse) and (max-width: 600px),
       (pointer: coarse) and (max-width: 900px) and (max-height: 500px){
  #board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.flag-only,
  #board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image{
    flex-basis:10px !important;
    height:10px !important;
    min-height:10px !important;
    max-height:10px !important;
    margin-bottom:0 !important;
  }
  #board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.flag-only span,
  #board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image span,
  #board.board-world-cities:not(.board-toy-story) .tile.flag-tile:not(.corner) > .tile-content > .tile-header-bar.has-image img{
    transform:translateY(-1px) !important;
    max-height:13px !important;
  }
}


/* Phone-only property detail popup compact sizing. */
@media (pointer: coarse) and (max-width: 600px),
       (pointer: coarse) and (max-width: 900px) and (max-height: 500px){
  #manageModal.tile-detail-mode,
  #manageModal.manage-pop.tile-detail-mode{
    padding:54px 8px 8px !important;
  }
  #manageModal.tile-detail-mode .manage-pop{
    width:min(320px, calc(100vw - 36px)) !important;
    max-width:min(320px, calc(100vw - 36px)) !important;
    max-height:min(68vh, 430px) !important;
    overflow:auto !important;
    padding:3px !important;
  }
  #manageModal.tile-detail-mode .property-card,
  #manageModal.tile-detail-mode .single-space-card{
    font-size:12px !important;
  }
  #manageModal.tile-detail-mode .pc-header{
    padding:6px 8px !important;
  }
  #manageModal.tile-detail-mode .pc-body{
    padding:6px 8px !important;
    gap:5px !important;
  }
  #manageModal.tile-detail-mode .property-detail-section-title{
    font-size:11px !important;
    margin-bottom:3px !important;
  }
  #manageModal.tile-detail-mode .pc-stat,
  #manageModal.tile-detail-mode .rent-schedule{
    font-size:11px !important;
    line-height:1.05 !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions{
    gap:5px !important;
    margin-top:4px !important;
  }
  #manageModal.tile-detail-mode .unified-property-actions button,
  #manageModal.tile-detail-mode .unified-property-actions .build-button,
  #manageModal.tile-detail-mode .unified-property-actions .destroy-button,
  #manageModal.tile-detail-mode .unified-property-actions .mortgage-toggle{
    height:28px !important;
    min-height:28px !important;
    font-size:10px !important;
    padding:3px 4px !important;
  }
}


/* Turn-timeout nudge button. Available immediately during the countdown for non-current players. */
.turn-timeout-nudge{
  pointer-events:auto;
  touch-action:manipulation;
  margin-top:7px;
  border:0;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:800;
  color:#111827;
  background:linear-gradient(135deg,#fde68a,#facc15,#fef3c7);
  box-shadow:0 0 12px rgba(250,204,21,.55);
  cursor:pointer;
}
.turn-timeout-nudge:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.turn-timeout-nudge.hidden{ display:none !important; }

/* Turn timeout nudge alert feedback. */

.turn-timeout-overlay.nudge-alert .turn-timeout-card,
#turnTimeoutOverlay.nudge-alert .turn-timeout-card{
  animation: turnNudgePulse .42s ease-in-out 0s 3;
  transform-origin:center center;
  box-shadow: 0 0 0 4px rgba(255, 235, 95, .72), 0 0 22px rgba(255, 235, 95, .95), 0 12px 34px rgba(0,0,0,.35);
}
@keyframes turnNudgePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.035); }
}

/* v252: lobby login/register placeholder link */
.lobby-auth{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.lobby-auth-link{
  border:0;
  background:transparent;
  color:#bfdbfe;
  font-weight:950;
  letter-spacing:.02em;
  text-decoration:underline;
  text-underline-offset:4px;
  padding:8px 6px;
  min-height:auto;
  box-shadow:none;
  cursor:pointer;
}
.lobby-auth-link:hover,.lobby-auth-link:focus-visible{
  color:#ffffff;
  outline:none;
}
.lobby-auth-note{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:80;
  width:max-content;
  max-width:min(280px,82vw);
  border:1px solid rgba(191,219,254,.35);
  background:rgba(15,23,42,.96);
  color:#e0f2fe;
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  font-weight:850;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
body.in-game .lobby-auth{display:none;}
@media (max-width:720px){
  body.in-lobby .room-controls{align-items:flex-end;}
  .lobby-auth-link{font-size:13px;padding:6px 2px;}
}

/* v254: seeded waiting-room lobby styling */
.lobby-room.traction-room{border-color:rgba(96,165,250,.34);background:linear-gradient(135deg,rgba(30,64,175,.18),rgba(15,23,42,.72));}
.lobby-room-main strong small{font-size:12px;color:#93c5fd;margin-left:8px;letter-spacing:.05em;}
.room-waiting-note{color:#bfdbfe!important;font-weight:850;}

/* v260 developer-only join assist: highlight the exact room after a human joins. */
.lobby-room.dev-join-target-room{
  border-color:rgba(248,113,113,.95);
  box-shadow:0 0 0 2px rgba(248,113,113,.35),0 16px 42px rgba(127,29,29,.38);
  background:linear-gradient(135deg,rgba(127,29,29,.38),rgba(15,23,42,.78));
  animation:devJoinTargetPulse 1.25s ease-in-out infinite;
}
.dev-join-ready-note{
  color:#fecaca !important;
  font-weight:900;
  letter-spacing:.02em;
}
.lobby-room button.dev-ready-join-btn{
  border-color:rgba(254,202,202,.9);
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:white;
  box-shadow:0 10px 24px rgba(239,68,68,.35);
}
@keyframes devJoinTargetPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(248,113,113,.28),0 16px 42px rgba(127,29,29,.34)}
  50%{box-shadow:0 0 0 5px rgba(248,113,113,.42),0 20px 50px rgba(127,29,29,.48)}
}