@font-face { font-family: 'Fraunces'; src: url(/fonts/fraunces.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(/fonts/fraunces-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(/fonts/instrument.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --night: #050a1a; --ink: #0a1430; --ink2: #101d45; --ink3: #18285a;
  --cream: #f4ecd8; --cream2: #e3d5b5; --muted: #9aa4c4;
  --gold: #d8b263; --gold2: #f3d68f; --gold3: #a8823a;
  --coral: #ec7a5f; --teal: #46c0b0; --rose: #e46b93; --sky: #7cc4e4;
  --line: rgba(243, 214, 143, .16); --line2: rgba(243, 214, 143, .32);
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--night); color: var(--cream); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; }
.grain::after { content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 9999; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -3%) } 60% { transform: translate(-2%, -1%) } 80% { transform: translate(3%, 3%) } 100% { transform: translate(0, 0) } }

.display { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; letter-spacing: -.02em; }
.kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--gold2), var(--gold) 60%, var(--gold3)); color: #1a1406; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 10px 30px -8px rgba(216,178,99,.55); transition: transform .18s var(--ease), filter .2s, opacity .2s; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); }
.btn:not(:disabled):hover::after { transform: translateX(120%); transition: transform .9s var(--ease); }
.btn:active { transform: scale(.96); }
.btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.btn.ghost { background: rgba(243,214,143,.06); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.dark { background: linear-gradient(180deg, #1d2c5e, #111c41); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line2), 0 10px 30px -10px rgba(0,0,0,.6); }
.btn.coral { background: linear-gradient(180deg, #f59a80, var(--coral) 60%, #b85741); color: #2a0d05; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 30px -8px rgba(236,122,95,.55); }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.block { width: 100%; }

/* ---------- deed card ---------- */
.deed { --gc: var(--gold); width: 300px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #fbf4e3, #efe2c3); color: #1b1a2e; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4) inset; }
.deed.big { width: 360px; }
.deed-art { position: relative; aspect-ratio: 1.35; background-size: cover; background-position: center; }
.deed-band { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--gc); box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset; }
.deed-body { padding: 16px 20px 18px; }
.deed-kicker { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 70%, #000); font-weight: 700; }
.deed-name { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; font-size: 34px; line-height: 1; letter-spacing: -.02em; margin-top: 6px; }
.deed-country { font-size: 13px; color: #6b6577; margin-top: 4px; }
.deed-price { position: absolute; margin-top: -78px; right: 18px; font-family: var(--display); font-size: 22px; font-weight: 600; background: #1b1a2e; color: var(--gold2); padding: 6px 12px; border-radius: 999px; }
.deed-body { position: relative; }
.deed-price { top: -24px; margin: 0; }
.deed-rows { margin-top: 12px; display: grid; gap: 2px; font-size: 13.5px; }
.rrow { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(27,26,46,.14); }
.rrow b { font-variant-numeric: tabular-nums; }
.rrow.sub { color: #6b6577; font-size: 12.5px; }
.rrow.on { color: #000; font-weight: 700; background: color-mix(in srgb, var(--gc) 25%, transparent); margin: 0 -8px; padding: 4px 8px; border-radius: 6px; }
.deed-owner { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 10px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, #fff); width: fit-content; }
.deed-owner img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c); }
.deed-owner.free { background: #1b1a2e; color: var(--gold2); padding: 6px 12px; }

/* ---------- board ---------- */
.board { --tilt: 0deg; position: relative; display: grid; grid-template-columns: 1.55fr repeat(9, 1fr) 1.55fr; grid-template-rows: 1.55fr repeat(9, 1fr) 1.55fr; aspect-ratio: 1; gap: .35cqw; padding: .6cqw; border-radius: 1.6cqw; container-type: inline-size; transform-style: preserve-3d;
  background: linear-gradient(135deg, #2a3a72, #0c1638 40%, #1b2a5c); box-shadow: 0 0 0 .25cqw rgba(243,214,143,.55), 0 0 0 .7cqw #0b1431, 0 0 0 .85cqw rgba(243,214,143,.35), 0 60px 120px -30px rgba(0,0,0,.8); }
.tile { position: relative; overflow: hidden; border-radius: .55cqw; background: #14214a; isolation: isolate; }
.tile-art { position: absolute; inset: 0; background-size: cover; background-position: center; transition: filter .4s, transform .6s var(--ease); }
.tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,10,26,0) 35%, rgba(5,10,26,.88) 100%); }
.side-t .tile-shade { background: linear-gradient(0deg, rgba(5,10,26,.2) 0%, rgba(5,10,26,.9) 15%, rgba(5,10,26,0) 70%); }
.tile-band { position: absolute; background: var(--gc); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0,0,0,.2); z-index: 2; }
.side-b .tile-band { left: 0; right: 0; top: 0; height: 16%; }
.side-t .tile-band { left: 0; right: 0; bottom: 0; height: 16%; }
.side-l .tile-band { top: 0; bottom: 0; right: 0; width: 16%; flex-direction: column; }
.side-r .tile-band { top: 0; bottom: 0; left: 0; width: 16%; flex-direction: column; }
.houses { display: flex; gap: .2cqw; align-items: center; justify-content: center; }
.side-l .houses, .side-r .houses { flex-direction: column; }
.house, .hotel { display: block; width: 1.25cqw; height: 1.15cqw; background: linear-gradient(180deg, #7ee08f, #2f9a4a); clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); animation: plop .5s var(--spring); }
.hotel { width: 2.4cqw; height: 1.4cqw; background: linear-gradient(180deg, #ff8a7a, #c8312a); clip-path: polygon(15% 0, 85% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); }
@keyframes plop { from { transform: scale(0) translateY(-6px); } }
.tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: .45cqw .5cqw; display: flex; flex-direction: column; gap: .1cqw; z-index: 2; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.side-t .tile-label { bottom: 16%; }
.side-l .tile-label { right: 16%; }
.side-r .tile-label { left: 16%; }
.tile-name { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'opsz' 30; font-weight: 600; font-size: 1.12cqw; color: #fff; letter-spacing: -.01em; }
.tile-price { font-size: .86cqw; color: var(--gold2); font-weight: 600; font-variant-numeric: tabular-nums; }
.corner .tile-label { align-items: center; text-align: center; padding-bottom: .9cqw; }
.corner .tile-name { font-size: 1.55cqw; font-style: italic; }
.type-chance .tile-name, .type-chest .tile-name { font-style: italic; }
.tile-own { position: absolute; z-index: 3; width: 2.5cqw; height: 2.5cqw; right: .4cqw; top: .4cqw; }
.side-b .tile-own { top: calc(16% + .35cqw); }
.side-r .tile-own { right: .4cqw; }
.side-l .tile-own { right: calc(16% + .35cqw); left: auto; }
.tile-own img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1); box-shadow: 0 0 0 .22cqw var(--oc), 0 .2cqw .6cqw rgba(0,0,0,.6); }
.tile-own.pop img { animation: ownpop .7s var(--spring); }
@keyframes ownpop { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1); } }
.tile.owned::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .22cqw var(--oc); z-index: 4; pointer-events: none; }
.tile.mort .tile-art { filter: grayscale(1) brightness(.45); }
.tile.mort::before { content: 'MORTGAGED'; position: absolute; z-index: 5; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-28deg); font-size: .85cqw; font-weight: 800; letter-spacing: .12em; color: var(--coral); border: .15cqw solid var(--coral); padding: .15cqw .4cqw; border-radius: .3cqw; background: rgba(5,10,26,.6); }
.tile-glow { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; }
.tile.flash .tile-glow { animation: tflash .45s ease-out; }
.tile.land .tile-glow { animation: tland 1.4s ease-out; }
.tile.land .tile-art { transform: scale(1.12); }
.tile.focus .tile-glow { box-shadow: inset 0 0 0 .3cqw var(--gold2), 0 0 2cqw var(--gold2); animation: tfocus 1.4s ease-in-out infinite; }
@keyframes tflash { 0% { background: rgba(243,214,143,.45); } 100% { background: transparent; } }
@keyframes tland { 0% { background: rgba(255,240,200,.75); box-shadow: inset 0 0 0 .4cqw #fff; } 100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; } }
@keyframes tfocus { 50% { box-shadow: inset 0 0 0 .3cqw var(--gold2), 0 0 3cqw var(--gold2), inset 0 0 3cqw rgba(243,214,143,.5); } }
.center { grid-row: 2 / 11; grid-column: 2 / 11; position: relative; border-radius: 1cqw; overflow: hidden; background: radial-gradient(ellipse at center, #13234f 0%, #0a1430 70%); transform-style: preserve-3d; }
.center-map { position: absolute; inset: 0; background: url(/img/worldmap.webp) center/cover; opacity: .5; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%); }
.center-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform-style: preserve-3d; }
.tokens { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; z-index: 10; }
.tk { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.tk-shadow { position: absolute; width: 4.2cqw; height: 2cqw; left: -2.1cqw; top: -1cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.tk-stand { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotateX(calc(var(--tilt) * -1)) translate(-50%, -96%); display: flex; flex-direction: column-reverse; align-items: center; }
.tk-disc { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; overflow: hidden; background: #0b1740; box-shadow: 0 0 0 .3cqw var(--c), 0 0 0 .5cqw rgba(5,10,26,.8), 0 1cqw 1.4cqw -.4cqw rgba(0,0,0,.7); }
.tk-disc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); }
.tk-name { display: none; margin-bottom: .5cqw; font-size: 1cqw; font-weight: 700; background: rgba(5,10,26,.85); color: var(--cream); padding: .2cqw .6cqw; border-radius: 99px; white-space: nowrap; box-shadow: 0 0 0 1px var(--line2); }
.tk.active .tk-name { display: block; }
.tk.active .tk-disc { animation: bob 1.6s ease-in-out infinite; box-shadow: 0 0 0 .3cqw var(--c), 0 0 0 .5cqw rgba(5,10,26,.8), 0 0 2.4cqw .4cqw var(--c); }
.tk.moving .tk-disc { animation: none; }
@keyframes bob { 50% { transform: translateY(-.6cqw); } }
.board.mini { border-radius: 2.4cqw; gap: .4cqw; padding: .8cqw; }
.board.mini .tile-label { display: none; }
.board.mini .corner .tile-label { display: flex; }
.board.mini .corner .tile-name { font-size: 2.2cqw; }
.board.mini .tk-stand { transform: translate(-50%, -50%); }
.board.mini .tk-shadow { display: none; }
.board.mini .tk-disc { width: 5.4cqw; height: 5.4cqw; }
.board.mini .tk.active .tk-name { display: none; }
.board.mini .house { width: 1.6cqw; height: 1.5cqw; }
.board.mini .hotel { width: 3cqw; height: 1.8cqw; }

/* ---------- dice ---------- */
.dice { display: flex; gap: 3cqw; transform-style: preserve-3d; }
.die-wrap { --s: 7cqw; --h: calc(var(--s) / 2); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; }
.die-shadow { position: absolute; inset: 8%; border-radius: 22%; background: rgba(0,0,0,.55); filter: blur(.8cqw); transform: translateZ(0); }
.die-lift { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--h)); }
.die { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.die .core { position: absolute; inset: 3%; background: #e6d8b6; border-radius: 8%; }
.die .cx { transform: rotateX(90deg); } .die .cy { transform: rotateY(90deg); }
.face { position: absolute; inset: 0; border-radius: 16%; background: radial-gradient(circle at 30% 25%, #fffdf6, #efe4c9 60%, #d8c7a0); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; box-shadow: inset 0 0 .6cqw rgba(120,90,40,.45), inset 0 -.3cqw .5cqw rgba(120,90,40,.25); backface-visibility: hidden; }
.face span { display: block; }
.face .pip { width: 72%; height: 72%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3b4a86, #0a1230 70%); box-shadow: inset 0 .15cqw .2cqw rgba(0,0,0,.6), 0 .08cqw 0 rgba(255,255,255,.6); }
.face.f1 .pip { width: 90%; height: 90%; background: radial-gradient(circle at 35% 30%, #ff8f78, #a8261b 70%); }
.dice.doubles .die-wrap { animation: dbl .9s ease-in-out 2; }
@keyframes dbl { 50% { filter: drop-shadow(0 0 2cqw rgba(243,214,143,.9)); } }

/* ---------- toasts ---------- */
#toasts { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 9000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(10,20,48,.95); color: var(--cream); padding: 12px 18px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line2), 0 20px 40px -10px rgba(0,0,0,.6); font-size: 14px; font-weight: 500; animation: tin .35s var(--spring); max-width: 90vw; text-align: center; }
.toast.err { box-shadow: 0 0 0 1px rgba(236,122,95,.6), 0 20px 40px -10px rgba(0,0,0,.6); }
.toast.out { opacity: 0; transform: translateY(-8px); transition: .5s; }
@keyframes tin { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8000; }
@media (prefers-reduced-motion: reduce) { .grain::after { animation: none; } }