:root {
  color-scheme: dark;
  --bg:#0e1922; --panel:#172832; --panel-raised:#203640; --line:#36505a;
  --text:#f4efe3; --muted:#afc0c4; --gold:#e7b966; --mint:#83c4b4; --danger:#ffaaa0;
  --radius:18px; --shadow:0 18px 48px #0004; --dock-height:0px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text); background:var(--bg);
}
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:flow-root; background:radial-gradient(ellipse at 30% 0,#24404b 0,transparent 60%),var(--bg); background-attachment:fixed; }
[hidden] { display:none!important; }
button,input,select { font:inherit; }
button { cursor:pointer; min-width:44px; min-height:44px; }
button:disabled { opacity:.45; cursor:not-allowed; }
input,select { min-width:0; max-width:100%; min-height:44px; padding:11px 13px; border:1px solid #61767e; border-radius:10px; color:var(--text); background:#0e1d26; }
input::placeholder { color:#a3b4b9; }
input[type=checkbox] { min-height:0; width:20px; height:20px; padding:0; accent-color:var(--gold); }
:focus-visible { outline:3px solid #ffe2a6; outline-offset:3px; }
input:focus-visible { border-color:var(--gold); }
h1,h2,h3,h4,p { margin-top:0; }
h2 { font-size:26px; letter-spacing:-.7px; }
h3 { font-size:16px; letter-spacing:-.2px; }
h4 { font-size:13px; }
p { line-height:1.55; }
small,.muted,.fineprint { color:var(--muted); }
small { font-size:12px; }
.eyebrow { display:block; font-size:10px; font-weight:750; letter-spacing:2px; color:var(--gold); margin-bottom:16px; }
.btn { min-height:44px; border:1px solid #607781; border-radius:11px; color:var(--text); background:#263d47; padding:10px 15px; font-size:13px; font-weight:750; transition:transform .15s; }
.btn:hover:not(:disabled) { background:#35515b; }
.btn:active:not(:disabled) { transform:translateY(2px) scale(.98); }
.btn-primary { color:#261b0e; background:linear-gradient(135deg,#f6d18b,#dfaa53); border-color:#f5d28e; box-shadow:0 4px 0 #896632,0 8px 24px #e7b96618; }
.btn-primary:hover:not(:disabled) { background:#ffe0a1; }
.btn-danger { background:#843e3c; border-color:#c7756c; }
.btn-ghost { background:transparent; }
.btn-big { width:100%; min-height:54px; font-size:14px; }
.btn-small { font-size:12px; padding:8px 10px; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; font-size:13px; font-weight:650; }
.row,.join-row,.invite { display:flex; gap:10px; }
.row input,.join-row input,.invite input { flex:1; }
.panel { border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:linear-gradient(145deg,#20353f,#152630); box-shadow:var(--shadow); }
.start-card { width:min(1040px,calc(100% - 48px)); margin:8vh auto; display:grid; grid-template-columns:1.15fr 1fr; border:1px solid #48606a; border-radius:28px; background:#142732; overflow:hidden; box-shadow:0 32px 100px #0005; }
.start-story { padding:46px 40px 0; display:flex; flex-direction:column; position:relative; background:radial-gradient(ellipse at top left,#345551,#152932 70%); }
.brand-seal { display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid var(--gold); border-radius:18px; font-family:Georgia,serif; font-size:45px; color:var(--gold); box-shadow:inset 0 0 0 5px #e7b96610; margin:12px 0 20px; }
.brand-seal span { font-size:24px; align-self:flex-end; margin:0 0 9px -3px; }
.logo h1 { margin:0 0 12px; color:var(--text); font-size:clamp(38px,5vw,64px); letter-spacing:-3px; font-weight:950; line-height:1.05; }
.tagline { font-size:13px; letter-spacing:1px; color:var(--gold); }
.intro { font-size:15px; color:#d0dcd9; margin:18px 0 30px; max-width:400px; }
.hero-city { width:calc(100% + 80px); height:auto; margin:25px -40px 0; opacity:.95; }
.start-form { padding:46px 38px; background:linear-gradient(150deg,#1d303b,#14232d); }
.start-form h2 { font-size:35px; line-height:1.18; margin-bottom:26px; }
.start-form em { font-family:Georgia,serif; color:var(--gold); font-weight:400; }
.quick-rules { list-style:none; counter-reset:steps; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:0; }
.quick-rules li { counter-increment:steps; font-size:12px; }
.quick-rules li::before { content:"0" counter(steps); display:block; color:var(--gold); font-size:10px; font-weight:750; letter-spacing:1px; padding-bottom:8px; border-bottom:1px solid #65847b; margin-bottom:10px; }
.quick-rules b,.quick-rules span { display:block; }
.quick-rules span { color:var(--muted); font-size:11px; margin-top:5px; }
.divider { display:flex; align-items:center; gap:12px; margin:23px 0; color:var(--muted); font-size:12px; }
.divider::before,.divider::after { content:""; height:1px; background:var(--line); flex:1; }
.join-row input { letter-spacing:5px; text-transform:uppercase; }
.fineprint { font-size:10px; margin:24px 0 0; }
.topbar { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; padding:30px 24px; }
.brand { font-size:20px; font-weight:900; letter-spacing:-.4px; color:var(--gold); }
.lobby { max-width:1200px; margin:auto; padding:0 24px 40px; display:grid; grid-template-columns:1.35fr 1fr; gap:22px; }
.lobby-settings { grid-column:1/-1; }
.lobby-room { position:relative; background:linear-gradient(145deg,#2a4548,#192e39); }
.lobby-room .invite { margin-bottom:28px; }
.code { color:var(--gold); font-size:38px; letter-spacing:7px; font-variant-numeric:tabular-nums; }
.lobby-players,.players { list-style:none; padding:0; margin:18px 0; }
.lobby-players li,.players li { display:flex; align-items:center; gap:12px; position:relative; border:1px solid #37515b; border-left:4px solid var(--pc); padding:14px 12px; margin:10px 0; background:#10232d; border-radius:12px; }
.lobby-players b,.players b { overflow-wrap:anywhere; }
.lobby-players li small { margin-left:auto; }
.avatar { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--pc); border-radius:12px; background:color-mix(in srgb,var(--pc) 15%,#10232d); font-size:24px; flex-shrink:0; }
.swatches,.token-picker { display:flex; flex-wrap:wrap; gap:9px; }
.swatch { width:44px; height:44px; border:3px solid #ffffff80; border-radius:14px; }
.selected { outline:3px solid var(--gold); outline-offset:3px; }
.settings { display:grid; grid-template-columns:1fr 1fr; gap:4px 30px; }
.settings label { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:8px 0; font-size:13px; }
.settings input[type=number] { width:100px; flex-shrink:0; }
#lobby-start-area .btn+p { margin-top:16px; font-size:13px; }
.game { display:grid; grid-template-columns:minmax(0,850px) minmax(290px,340px); justify-content:center; align-items:start; gap:22px; padding:24px; max-width:1280px; margin:auto; }
.board-wrap { min-width:0; }
.board { display:grid; grid-template-columns:1.35fr repeat(9,1fr) 1.35fr; grid-template-rows:1.35fr repeat(9,1fr) 1.35fr; aspect-ratio:1; position:relative; gap:2px; border:3px solid #807960; border-radius:20px; overflow:hidden; background:#6b705f; box-shadow:0 24px 65px #0005,0 0 0 5px #23343a; }
.sq { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; cursor:pointer; background:linear-gradient(135deg,#f1edde,#ddd9c7); color:#263c3f; }
.sq:hover { background:#fff5d7; }
.sq:focus-visible { outline:3px solid #154667; outline-offset:-4px; z-index:3; }
.sq-body { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; flex:1; min-height:0; padding:3px 3px 19px; gap:2px; }
.sq-name { font-size:10px; font-weight:800; line-height:1.14; hyphens:manual; }
.sq-price { font-size:9px; white-space:nowrap; opacity:.9; font-variant-numeric:tabular-nums; }
.sq-mobile-name { display:none; }
.sq-icon { font-size:21px; line-height:1.05; }
.sq-bar { height:10px; min-height:10px; background:linear-gradient(#ffffff30,#0001),var(--bar); box-shadow:inset 0 -1px #0003; display:flex; align-items:center; justify-content:center; }
.sq-left .sq-bar,.sq-right .sq-bar { position:absolute; width:7px; height:100%; min-height:0; }
.sq-left .sq-bar { right:0; }
.sq-right .sq-bar { left:0; }
.sq-left .sq-body { padding-right:10px; }
.sq-right .sq-body { padding-left:10px; }
.sq-left .sq-icon,.sq-right .sq-icon { font-size:12px; }
.sq-corner { background:linear-gradient(145deg,#f7eacd,#d7ccae); }
.sq-corner .sq-body { padding-bottom:40px; }
.sq-corner .sq-name { font-size:12px; line-height:1.1; }
.sq-type-gotojail { background:linear-gradient(140deg,#d9dfde,#b7c9cc); }
.sq-type-parking { background:linear-gradient(140deg,#d8e7d5,#b7c7b4); }
.sq-type-jail { background:linear-gradient(140deg,#d8d5d0,#bfc3c5); }
.sq-owner { position:absolute; bottom:0; right:0; min-width:12px; background:var(--owner); border-radius:4px 0 0; font-size:10px; line-height:12px; text-align:center; z-index:2; }
.owned { box-shadow:inset 0 0 0 2px var(--owner); }
.mortgaged { background:repeating-linear-gradient(135deg,#d1d2c8 0 9px,#c8cbc2 9px 11px); }
.mortgaged::after { content:"BANK"; position:absolute; right:2px; top:12px; transform:rotate(-15deg); border:1px solid #7e4e42; border-radius:2px; padding:2px; font-size:8px; font-weight:900; color:#7e4e42; pointer-events:none; opacity:.9; }
.sq-tokens { position:absolute; inset:auto 2px 1px; height:15px; display:flex; justify-content:center; flex-wrap:nowrap; gap:0; pointer-events:none; }
.token { display:inline-grid; place-items:center; position:relative; width:15px; height:15px; border:1px solid var(--pc); background:#17333e; border-radius:50%; font-size:9px; box-shadow:0 2px 2px #0004; flex-shrink:0; }
.token+.token { margin-left:-7px; }
.token.active { box-shadow:0 0 0 1px #fff,0 0 0 2px var(--pc); z-index:2; }
.token.hopping { animation:token-hop 150ms cubic-bezier(.2,.6,.5,1); }
.token.hopping::after { content:""; position:absolute; inset:-2px; border:1px solid var(--pc); border-radius:50%; animation:landing-ring 150ms ease-out; }
.token.teleporting { animation:token-jump 150ms ease-out; }
.token.jailed::before { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-linear-gradient(90deg,transparent 0 3px,#b9c7d9b0 3px 4px); }
.token.jailed.teleporting::after { content:""; position:absolute; inset:-3px; border-radius:50%; background:linear-gradient(90deg,#4982ff90,#ff716690); animation:landing-ring 150ms ease-out; }
.sq-corner .sq-tokens { height:auto; flex-wrap:wrap; gap:1px; }
.sq-corner .token { width:18px; height:18px; font-size:11px; }
.sq-corner .token+.token { margin-left:0; }
@keyframes token-hop { 45% { transform:translateY(-7px) rotate(7deg) scale(1.12); } }
@keyframes landing-ring { from { transform:scale(.6); opacity:.9; } to { transform:scale(1.9); opacity:0; } }
@keyframes token-jump { from { transform:translateY(-12px) scale(.4); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.sq-houses { display:flex; }
.house { display:inline-block; width:6px; height:6px; margin:1px; background:#075537; border:1px solid #eff3dd; clip-path:polygon(50% 0,100% 35%,100% 100%,0 100%,0 35%); }
.hotel { display:inline-block; width:11px; height:8px; background:#a53b38; border:1px solid #fff4dc; }
.center { grid-row:2/11; grid-column:2/11; background:linear-gradient(180deg,#233e43,#102831); padding:24px; display:flex; flex-direction:column; align-items:center; min-height:0; gap:12px; position:relative; isolation:isolate; }
.center::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/city.svg') center 96% / 100% auto no-repeat; opacity:.65; }
.center-top { text-align:center; }
.center-logo { font-size:clamp(20px,3vw,39px); font-weight:950; letter-spacing:-1.8px; color:#f3d79b; line-height:1.15; }
.center-logo small { display:block; font-size:10px; font-weight:500; letter-spacing:1.6px; margin-top:6px; color:#b6cdcb; }
.pot { font-size:12px; margin-top:8px; color:var(--gold); }
#turn-controls { display:contents; }
.turn-info { font-size:16px; font-weight:750; }
.your-turn { padding:7px 16px; border:1px solid #e7b96650; background:#e7b96612; border-radius:30px; color:var(--gold); }
.actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; width:100%; text-align:center; }
.actions p { margin:5px 0; font-size:13px; }
.actions>small { width:100%; }
.own-turn .btn-primary::after { content:""; position:absolute; inset:-4px; border:1px solid #e7b96660; border-radius:14px; animation:primary-pulse 2.6s ease-out infinite; pointer-events:none; }
.own-turn .btn-primary { position:relative; }
@keyframes primary-pulse { 0%,100% { transform:scale(.98); opacity:0; } 45% { opacity:1; } 75% { transform:scale(1.04); opacity:0; } }
.dice { --die-size:62px; display:flex; align-items:center; justify-content:center; gap:22px; margin:12px 0 8px; flex-shrink:0; }
.die-stage { width:var(--die-size); height:var(--die-size); perspective:650px; display:inline-block; }
.die-cube { display:block; width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); }
.die-face { position:absolute; inset:0; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:10px; gap:3px; border-radius:11px; background:linear-gradient(140deg,#fff8e9,#e4dbc5); border:1px solid #b5aa8e; backface-visibility:hidden; box-shadow:inset 0 0 0 2px #ffffff70; }
.face-1 { transform:translateZ(calc(var(--die-size)/2)); }
.face-2 { transform:rotateY(90deg) translateZ(calc(var(--die-size)/2)); }
.face-3 { transform:rotateX(90deg) translateZ(calc(var(--die-size)/2)); }
.face-4 { transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2)); }
.face-5 { transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2)); }
.face-6 { transform:rotateY(180deg) translateZ(calc(var(--die-size)/2)); }
.pip { align-self:center; justify-self:center; width:10px; height:10px; background:#16303a; border-radius:50%; box-shadow:inset 0 1px 2px #0006; }
.dice-sum { min-width:44px; font-size:30px; font-weight:850; color:var(--gold); text-align:center; }
.dice-sum small { display:block; font-size:10px; font-weight:500; margin-bottom:4px; }
.rolling .die-cube { animation:dice-tumble 760ms cubic-bezier(.15,.7,.25,1) both; animation-delay:var(--delay); }
.buy-card,.auction,.debt { width:100%; background:#0d212adb; border:1px solid #49656d; border-radius:14px; padding:14px; }
.text-button { border:0; background:transparent; color:var(--gold); font-size:17px; font-weight:750; padding:4px 8px; }
.buy-card p { font-size:12px; }
.auction-heading { display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; }
.auction-hammer { font-size:24px; display:inline-block; }
.auction-clock { width:40px; height:40px; flex-shrink:0; transform:rotate(-90deg); }
.auction-clock circle { fill:none; stroke-width:3; }
.ring-track { stroke:#49606a; }
.ring-progress { stroke:var(--gold); stroke-dasharray:113.1; stroke-linecap:round; }
.auction form { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.auction input { width:140px; }
.owned-links { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin:10px 0; }
[data-countdown] { font-variant-numeric:tabular-nums; color:var(--gold); }
.countdown-urgent { color:var(--danger); font-weight:800; }
.last-event { align-self:stretch; background:#091e27b0; border:1px solid #416068; border-left:3px solid var(--gold); border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.45; flex-shrink:0; }
.last-card { color:#f4cf86; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.last-action { color:#d0e0df; margin-top:4px; }
.history { width:100%; min-height:0; flex:1; overflow:hidden; }
.history summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-size:12px; color:var(--muted); }
.history summary::before { content:"▸"; }
.history[open] summary::before { content:"▾"; }
.log { max-height:144px; min-height:0; overflow-y:auto; font-size:11px; line-height:1.45; color:#bdcdcd; border-top:1px solid var(--line); padding-top:4px; }
.log>div { padding:6px 0; border-bottom:1px solid #ffffff0d; }
.log>div:last-child { color:#f1e9d5; }
.log,.chat { scrollbar-width:thin; scrollbar-color:#809997 #15303a; }
.sidebar { display:flex; flex-direction:column; gap:18px; }
.sidebar .panel { padding:19px; }
.panel-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.panel-head h3 { margin:0; }
.players li { gap:10px; font-size:13px; }
.players li>div { min-width:0; flex:1; }
.players small { display:block; font-size:10px; margin-top:5px; }
.players strong { white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; }
.players .current { background:linear-gradient(120deg,#344b46,#112a33); border-color:#d8b269; border-left-color:var(--pc); }
.players .current::before { content:""; position:absolute; inset:0; border-radius:10px; border:1px solid var(--gold); pointer-events:none; }
@keyframes turn-spotlight { from { opacity:0; transform:scale(.96); } 60% { opacity:1; } to { opacity:1; transform:scale(1); } }
.bankrupt { opacity:.55; }
.negative { color:var(--danger); }
.positive { color:#9edac0; }
.portfolio { display:flex; gap:3px; flex-wrap:wrap; margin-top:8px; }
.portfolio-chip { width:7px; height:13px; border-radius:2px; background:var(--gc); border:1px solid #ffffff80; }
.portfolio-chip.is-mortgaged { background:repeating-linear-gradient(135deg,var(--gc) 0 3px,#111 3px 5px); }
.side-actions { display:flex; flex-wrap:wrap; gap:8px; }
.chat { height:180px; overflow-y:auto; font-size:13px; overflow-wrap:anywhere; }
.chat p { margin:0 0 12px; }
.chat b { display:block; color:var(--gold); font-size:11px; }
.chat-form { display:flex; gap:8px; margin-top:12px; }
.chat-form input { width:100%; font-size:13px; }
.money-floater { position:absolute; top:0; right:10px; padding:6px 10px; background:#0c2029; border:1px solid currentColor; border-radius:10px; z-index:4; font-weight:800; pointer-events:none; animation:money-rise 1.8s ease-out forwards; }
.gain { color:#a0edb2; }
.loss { color:#ffaaa5; }
@keyframes money-rise { from { transform:translateY(8px); opacity:0; } 15%,65% { opacity:1; } to { transform:translateY(-24px); opacity:0; } }
.money-coin { position:fixed; left:0; top:0; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#5c3b12; background:linear-gradient(135deg,#ffe3a1,#dda650); border:2px solid #aa7b32; font-size:12px; font-weight:900; pointer-events:none; z-index:45; }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:#03121bd9; display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(7px); }
.modal { background:linear-gradient(140deg,#263e48,#132b35); border:1px solid #6c8285; border-radius:24px; width:min(560px,100%); max-height:90dvh; overflow-y:auto; position:relative; padding:58px 28px 28px; box-shadow:0 24px 100px #0008; animation:modal-enter .22s ease-out; }
.modal h2 small { display:block; margin-top:10px; font-size:13px; font-weight:400; letter-spacing:0; }
.modal-x { position:absolute; right:12px; top:12px; width:44px; height:44px; border:1px solid #6d8189; border-radius:50%; background:#132a34; color:var(--text); z-index:4; }
@keyframes modal-enter { from { transform:translateY(14px) scale(.98); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.pcard-head { padding:24px 20px; border-radius:12px; background:linear-gradient(#0006,#0007),var(--gc); color:#fff9e8; text-shadow:0 1px 2px #0006; }
.pcard-head h3 { margin:8px 0 0; font-size:26px; }
.pcard-head small { color:#fff3d8; }
.pcard-desc { font-family:Georgia,serif; font-style:italic; color:#d3ded8; font-size:16px; line-height:1.6; margin:20px 0; }
.pcard-price { display:flex; justify-content:space-between; padding-bottom:16px; }
.pcard-rent { width:100%; border-collapse:collapse; font-size:13px; }
.pcard-rent td { padding:9px 0; }
.pcard-rent td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.pcard-rent .sep,.pcard-owner { border-top:1px solid var(--line); }
.pcard-rent .cur { color:var(--gold); }
.pcard-owner { padding:16px 0; margin:10px 0; font-size:13px; }
.event-modal { background:transparent; border:0; padding:0; width:min(460px,100%); overflow:visible; box-shadow:none; perspective:1000px; }
.event-modal .modal-x { background:#162b33; }
.event-card { position:relative; transform-style:preserve-3d; animation:card-flip .7s cubic-bezier(.15,.7,.3,1); }
.event-card::before { content:""; position:absolute; inset:6px; border:1px solid #8b9c8f; border-radius:22px; background:#3f584f; transform:translateY(12px) rotate(-4deg); z-index:-1; }
.event-card-front { position:relative; border:1px solid #a6997b; border-radius:22px; background:linear-gradient(140deg,#f5edda,#dfd6bc); color:#263e41; padding:68px 32px 35px; min-height:320px; max-height:86dvh; overflow:auto; backface-visibility:hidden; }
.event-card-front .eyebrow { color:#765a2a; }
.event-card-front h2 { font-size:28px; }
.event-card-front p { font-size:21px; font-family:Georgia,serif; line-height:1.6; }
.event-card-front small { color:#546661; }
.event-card-back { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; border-radius:22px; border:1px solid var(--gold); background:repeating-linear-gradient(45deg,#244a49 0 10px,#204442 10px 12px); color:var(--gold); font-weight:950; letter-spacing:2px; transform:rotateY(180deg); backface-visibility:hidden; }
.event-card-back span { text-align:center; font-family:Georgia,serif; font-weight:400; font-size:17px; letter-spacing:0; }
@keyframes card-flip { from { transform:rotateY(180deg) translateY(-12px); } to { transform:rotateY(0) translateY(0); } }
.winner { text-align:center; padding:8px 0; }
.winner-icon { font-size:64px; }
.winner .btn { margin:5px; }
.confetti-piece { position:fixed; top:0; left:0; width:8px; height:14px; border-radius:2px; pointer-events:none; z-index:75; }
.toasts { position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:10px; max-width:min(500px,calc(100% - 40px)); }
.toast { display:flex; align-items:center; gap:12px; padding:10px 12px 10px 18px; background:#713c3b; border:1px solid #db9690; border-radius:14px; box-shadow:var(--shadow); opacity:0; transform:translateY(15px); transition:transform .25s,opacity .25s; font-size:13px; }
.toast-info { background:#214b40; border-color:#84b6a0; }
.toast.show { opacity:1; transform:translateY(0); }
.toast-dismiss { color:inherit; background:transparent; border:1px solid #ffffff60; border-radius:9px; flex-shrink:0; }
#conn-banner { position:sticky; top:0; background:var(--gold); color:#251b10; padding:12px; text-align:center; z-index:80; font-size:13px; }
.trade-modal { width:min(980px,100%); }
.trade-recipient { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px; font-size:13px; color:var(--muted); }
.trade-recipient select { width:min(380px,65%); }
.trade-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trade-side { min-width:0; border:1px solid #4c6970; border-radius:16px; padding:18px; background:#102832; }
.trade-player { display:flex; align-items:center; gap:10px; margin:12px 0 20px; font-size:13px; }
.trade-player small { display:block; margin-top:4px; }
.trade-cash { display:grid; grid-template-columns:1fr 110px; gap:8px; align-items:center; margin:20px 0; }
.trade-cash label { font-size:13px; font-weight:650; }
.trade-cash label span { color:var(--gold); }
.trade-cash input[type=number] { width:100%; }
.trade-cash input[type=range] { grid-column:1/-1; width:100%; accent-color:var(--gold); padding:0; background:transparent; border:0; }
.trade-cash>small { grid-column:1/-1; display:flex; justify-content:space-between; }
.trade-freecards { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.trade-freecards>b { font-size:13px; }
.card-toggle { min-height:44px; display:flex; align-items:center; gap:8px; border:1px solid #557277; border-radius:10px; padding:8px 10px; font-size:12px; }
.card-toggle:has(input:checked) { background:#e7b96615; border-color:var(--gold); }
.trade-group { min-width:0; padding:0; border:0; margin:18px 0; }
.trade-group legend { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:750; color:var(--muted); margin-bottom:10px; }
.trade-group legend i { width:10px; height:10px; border-radius:3px; background:var(--gc); }
.trade-property-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mini-property { display:block; position:relative; min-width:0; cursor:pointer; }
.mini-property input { position:absolute; left:8px; top:12px; opacity:0; width:20px; height:20px; }
.mini-property-body { display:flex; flex-direction:column; justify-content:center; gap:7px; position:relative; padding:13px 12px 13px 16px; border:1px solid #68817d; border-left:6px solid var(--gc); border-radius:10px; min-height:78px; background:linear-gradient(135deg,#e9e5d7,#d1d6c7); color:#243b3b; }
.mini-property b { font-size:12px; overflow-wrap:anywhere; padding-right:8px; }
.mini-property small { color:#415753; font-size:10px; }
.mini-property input:checked+.mini-property-body { outline:2px solid var(--gold); outline-offset:1px; background:#fff0cb; }
.mini-property input:focus-visible+.mini-property-body { outline:3px solid #bcd8f0; outline-offset:3px; }
.selection-mark { position:absolute; right:6px; top:7px; color:#075d41; opacity:0; font-weight:900; }
.mini-property input:checked+.mini-property-body .selection-mark { opacity:1; }
.mini-property.locked { opacity:.55; cursor:not-allowed; }
.trade-lock { font-size:11px; color:#e8c489; margin:0 0 10px; }
.trade-empty { color:var(--muted); font-size:13px; padding:14px; border:1px dashed #617c7d; border-radius:12px; }
.trade-summary { margin-top:24px; padding:18px; border:1px solid #ad9060; border-radius:14px; background:#213d3b; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.trade-summary span,.trade-summary small { display:block; font-size:11px; }
.trade-summary b { display:block; font-size:25px; color:#f2d394; margin:5px 0; }
.trade-balance { grid-column:1/-1; border-top:1px solid #597568; padding-top:12px; margin:0; display:flex; justify-content:space-between; font-size:13px; }
.trade-disclaimer { font-size:11px; color:var(--muted); margin:14px 0; }
.trade-submit { width:100%; }
.trade { border:1px solid #628076; border-radius:12px; padding:14px; margin:14px 0; background:#142f34; }
.badge { display:inline-block; background:#e7b96620; color:var(--gold); border:1px solid #ba985c; border-radius:20px; padding:4px 8px; font-size:10px; }
.trade header .trade-player { margin:12px 0; }
.trade-offer-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.trade-offer-row section { min-width:0; padding:12px; border:1px solid #3f6466; border-radius:9px; }
.trade-offer-row h4 { font-size:11px; color:var(--mint); margin-bottom:10px; }
.trade-money { display:block; color:var(--gold); font-size:17px; }
.trade-assets { display:flex; flex-direction:column; gap:5px; margin:8px 0; }
.trade-assets span { font-size:11px; overflow-wrap:anywhere; border-left:3px solid var(--gc,var(--gold)); padding-left:6px; }
.trade footer { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.trade footer .btn { flex:1; }
@media(max-width:1100px) and (min-width:601px) {
  .game { grid-template-columns:minmax(0,1fr); max-width:800px; }
  .sidebar { display:grid; grid-template-columns:1fr 1fr; }
  .board-wrap { overflow-x:auto; }
  .board { min-width:640px; }
  .sq-name { font-size:9px; }
  .sq-price { font-size:8px; }
}
@media(max-width:760px) {
  .start-card { grid-template-columns:1fr; width:min(500px,calc(100% - 28px)); margin:20px auto; }
  .start-story { padding:28px 26px 0; }
  .start-story>.eyebrow { font-size:8px; letter-spacing:1px; }
  .brand-seal { width:44px; height:44px; font-size:32px; margin:6px 0 14px; border-radius:12px; }
  .brand-seal span { font-size:17px; margin-bottom:6px; }
  .logo h1 { font-size:42px; letter-spacing:-2px; }
  .intro { margin:16px 0 22px; font-size:14px; }
  .hero-city { width:calc(100% + 52px); margin:10px -26px 0; max-height:100px; }
  .start-form { padding:26px; }
  .start-form h2 { font-size:28px; }
  .lobby { grid-template-columns:1fr; }
  .lobby-settings { grid-column:auto; }
}
@media(max-width:600px) {
  .game { display:flex; flex-direction:column; padding:8px; gap:12px; padding-bottom:calc(var(--dock-height,140px) + 22px); }
  .board-wrap { width:100%; overflow:visible; }
  .board { width:100%; min-width:0; gap:1px; border:2px solid #8d866b; border-radius:12px; box-shadow:0 12px 32px #0005; }
  .sq { min-height:24px; }
  .sq-full-name,.sq-price { display:none; }
  .sq-mobile-name { display:block; white-space:nowrap; overflow:visible; font-size:6.5px; line-height:1.25; flex-shrink:0; hyphens:none; }
  .sq-body { padding:1px 1px 9px; gap:0; }
  .sq-left .sq-body { padding-right:5px; }
  .sq-right .sq-body { padding-left:5px; }
  .sq:not(.sq-corner) .sq-icon { display:none; }
  .sq-bar { height:4px; min-height:4px; }
  .sq-left .sq-bar,.sq-right .sq-bar { width:3px; min-height:0; }
  .sq-owner { font-size:6px; line-height:7px; min-width:7px; }
  .sq-tokens { height:8px; }
  .token { width:8px; height:8px; font-size:5px; }
  .token+.token { margin-left:-4px; }
  .sq-corner .sq-body { padding-bottom:12px; }
  .sq-corner .sq-mobile-name { font-size:7px; line-height:1.25; }
  .sq-corner .sq-icon { font-size:10px; }
  .sq-corner .sq-tokens { height:10px; flex-wrap:nowrap; gap:0; }
  .sq-corner .token { width:10px; height:10px; font-size:6px; }
  .sq-corner .token+.token { margin-left:-6px; }
  .mortgaged::after { content:""; top:4px; right:2px; padding:0; width:7px; height:2px; border:0; background:#864c39; }
  .house { width:4px; height:4px; margin:0; }
  .hotel { width:7px; height:4px; }
  .center { padding:10px; gap:10px; justify-content:center; }
  .center-logo { font-size:23px; letter-spacing:-1px; }
  .center-logo small { font-size:8px; letter-spacing:.7px; }
  .dice { --die-size:38px; gap:14px; margin:9px 0; }
  .die-face { padding:6px; gap:1px; border-radius:7px; }
  .pip { width:6px; height:6px; }
  .dice-sum { font-size:25px; }
  .dice-sum small { font-size:9px; }
  .center .last-event { font-size:11px; padding:7px 9px; max-height:88px; overflow:hidden; }
  .center .last-action { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #turn-controls { display:flex; flex-direction:column; gap:6px; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 12px max(10px,env(safe-area-inset-bottom)); background:#102831f5; border-top:1px solid #799087; box-shadow:0 -8px 24px #0004; backdrop-filter:blur(12px); max-height:48dvh; }
  #turn-controls .turn-info { font-size:14px; text-align:center; overflow-wrap:anywhere; }
  #turn-controls .your-turn { padding:4px 10px; }
  #turn-controls .actions { max-height:calc(48dvh - 55px); overflow-y:auto; min-height:0; flex-shrink:1; }
  #turn-controls .actions .btn { font-size:14px; padding:10px 14px; }
  #turn-controls .actions>.btn-primary { min-width:min(240px,100%); }
  #turn-controls .actions p { font-size:12px; margin:4px 0 8px; line-height:1.35; }
  #turn-controls .buy-card,#turn-controls .auction,#turn-controls .debt { padding:8px 10px; }
  #turn-controls .text-button { font-size:15px; }
  #turn-controls .buy-card p { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
  #turn-controls .auction input { width:100px; flex:1; font-size:16px; }
  #turn-controls .auction .btn { margin:2px; }
  .auction-heading { font-size:13px; }
  .auction-clock { width:32px; height:32px; }
  .auction-hammer { font-size:20px; }
  .auction form { gap:4px; }
  .debt .owned-links { max-height:72px; overflow:auto; }
  .game>.history { flex:none; border:1px solid var(--line); border-radius:12px; padding:0 14px; background:#18313b; }
  .history .log { max-height:200px; font-size:12px; padding-bottom:10px; }
  .sidebar { width:100%; display:flex; }
  .sidebar .panel { padding:16px; }
  .topbar { padding:20px 12px; }
  .brand { font-size:16px; }
  .lobby { padding:0 12px 28px; }
  .panel { padding:18px; }
  .settings { grid-template-columns:1fr; }
  .invite,.row { flex-wrap:wrap; }
  .invite input { width:100%; flex-basis:100%; }
  .lobby-players li { gap:8px; font-size:12px; flex-wrap:wrap; }
  .modal-backdrop { padding:12px; }
  .modal { padding:62px 20px 22px; border-radius:18px; max-height:92dvh; }
  .event-modal { padding:0; }
  .event-card-front { padding:62px 24px 26px; }
  .event-card-front p { font-size:18px; }
  .trade-columns { grid-template-columns:1fr; gap:16px; }
  .trade-side { padding:14px; }
  .trade-modal h2 { font-size:23px; }
  .trade-modal .eyebrow { font-size:8px; letter-spacing:1px; }
  .trade-recipient { align-items:stretch; flex-direction:column; gap:8px; }
  .trade-recipient select { width:100%; }
  .trade-property-grid { grid-template-columns:1fr 1fr; }
  .mini-property-body { padding-left:10px; }
  .trade-summary { grid-template-columns:1fr; }
  .trade-balance { grid-column:1; }
  .toasts { left:12px; right:12px; max-width:none; bottom:calc(var(--dock-height,0px) + 12px); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .money-floater { opacity:1; }
}
.money-layer,.celebration-layer { position:fixed; inset:0; overflow:clip; pointer-events:none; z-index:45; }
.celebration-layer { z-index:75; }
.money-layer .money-coin,.celebration-layer .confetti-piece { position:absolute; }
.die-cube { transform:rotateX(-12deg) rotateY(-16deg) rotateX(var(--rx)) rotateY(var(--ry)); }
.die-stage { position:relative; }
.die-stage::after { content:""; position:absolute; left:10%; bottom:-16px; width:80%; height:7px; border-radius:50%; background:#07141d; opacity:.4; z-index:-1; }
@keyframes dice-tumble {
  from { transform:translateY(-15px) rotateX(-12deg) rotateY(-16deg) rotateX(calc(var(--rx) + 720deg)) rotateY(calc(var(--ry) + 720deg)); }
  70% { transform:translateY(4px) rotateX(-12deg) rotateY(-16deg) rotateX(var(--rx)) rotateY(var(--ry)); }
  86% { transform:translateY(-4px) rotateX(-12deg) rotateY(-16deg) rotateX(var(--rx)) rotateY(var(--ry)); }
  to { transform:translateY(0) rotateX(-12deg) rotateY(-16deg) rotateX(var(--rx)) rotateY(var(--ry)); }
}

.players .turn-enter::before { animation:turn-spotlight .65s ease-out; }
.trade-modal .eyebrow { margin-bottom:12px; }
.trade-modal h2 { margin-bottom:18px; }
.trade-columns { height:clamp(220px,36dvh,360px); }
.trade-side { max-height:100%; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#7d9690 #102832; }
.trade-side summary { min-height:44px; display:flex; align-items:center; gap:8px; font-size:18px; font-weight:750; cursor:pointer; border-bottom:1px solid #466167; margin-bottom:12px; }
.trade-side summary span { color:var(--gold); }
.trade-side summary::after { content:"−"; margin-left:auto; color:var(--muted); }
.trade-side:not([open]) summary::after { content:"+"; }
.trade-side:not([open]) summary { margin-bottom:0; border-bottom:0; }
.trade-footer { position:sticky; bottom:-28px; z-index:3; margin:16px -28px -28px; padding:12px 28px 28px; background:#1c353d; border-top:1px solid #658175; }
.trade-summary { margin:0; padding:12px; gap:10px; }
.trade-summary b { font-size:22px; margin:4px 0; }
.trade-disclaimer { margin:12px 0; font-size:10px; }
.trade-footer .trade-submit { margin-top:12px; }
@media(max-width:600px) {
  .trade-columns { height:auto; }
  .trade-side { max-height:none; overflow:visible; }
  .trade-side summary { font-size:17px; }
  .trade-footer { bottom:-22px; margin:16px -20px -22px; padding:10px 20px 22px; }
  .trade-summary { grid-template-columns:1fr 1fr; gap:8px; }
  .trade-summary span,.trade-summary small { font-size:9px; }
  .trade-summary b { font-size:20px; }
  .trade-balance { grid-column:1/-1; padding-top:8px; font-size:12px; }
}
.mini-property input:focus-visible+.mini-property-body { outline-color:#075b78; }
@media(max-width:600px) {
  .trade-modal { padding-top:58px; }
  .trade-modal>.eyebrow,.trade-modal h2 small { display:none; }
  .trade-modal h2 { margin-bottom:14px; }
  .trade-recipient { margin-bottom:12px; }
  .trade-summary small { line-height:1.3; }
}
.event-modal { overflow-x:clip; overflow-y:auto; padding:14px 8px 16px; }
.event-card::before { transform:translateY(10px) rotate(-2deg); }
/* Trade refinement: land first, compact funds and a quiet financial footer. */
.trade-modal { max-height:92dvh; }
.trade-modal h2 small { display:none; }
.trade-recipient { margin-bottom:16px; }
.trade-columns { height:clamp(280px,calc(92dvh - 322px),560px); }
.trade-player { margin:8px 0 14px; }
.trade-properties h4 { margin:0 0 12px; }
.trade-group { margin:12px 0; }
.trade-cash { display:block; margin:16px 0 12px; }
.trade-cash label { display:block; margin-bottom:6px; }
.trade-money-row { display:flex; align-items:center; gap:12px; }
.trade-money-row input[type=range] { flex:1; min-width:0; width:100%; }
.trade-money-row input[type=number] { width:96px; flex-shrink:0; }
.trade-cash>small { margin-top:4px; }
.trade-freecards { margin-bottom:0; gap:6px; }
.trade-card-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.card-toggle { flex:0 1 auto; }
.trade-summary { display:flex; flex-direction:column; gap:6px; padding:10px 12px; }
.trade-summary>div { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; }
.trade-summary span { font-size:11px; min-width:135px; }
.trade-summary b { font-size:16px; margin:0; min-width:70px; }
.trade-summary small { font-size:10px; }
.trade-balance { padding-top:6px; font-size:12px; }
.trade-footer { margin-top:10px; padding-top:10px; padding-bottom:20px; }
.trade-footer .trade-submit { margin-top:8px; }
.trade-disclaimer { margin:8px 0; }
.center .history { background:#102831db; border-radius:10px; padding:0 10px 8px; }
@media(max-width:600px) {
  .trade-columns { height:auto; }
  .trade-summary span { font-size:10px; min-width:0; flex:1; }
  .trade-summary b { min-width:0; font-size:15px; }
  .trade-summary small { flex-basis:100%; font-size:9px; }
  .trade-summary>div { gap:2px 8px; }
  .trade-footer { padding-bottom:18px; }
}
.trade-summary small .trade-summary-counts { display:inline; min-width:0; font-size:inherit; }
@media(max-width:600px) {
  .trade-side { padding:10px; }
  .trade-side summary { margin-bottom:6px; }
  .trade-side .trade-player { margin:6px 0 10px; }
  .trade-side .trade-player .avatar { width:28px; height:28px; border-radius:8px; font-size:18px; }
  .trade-properties h4 { display:none; }
  .trade-group { margin:8px 0; }
  .trade-group legend { margin-bottom:6px; }
  .trade-summary>div { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; }
  .trade-summary small { flex-basis:auto; white-space:nowrap; }
  .trade-summary small .trade-summary-counts { display:none; }
  .trade-summary span { line-height:1.2; }
  .trade-summary b { line-height:1.2; }
  .trade-summary { padding:8px 10px; gap:4px; }
}