@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700;900&family=Playfair+Display:wght@700;900&display=swap');
:root{--ink:#092b46;--navy:#062740;--cream:#fff8e8;--gold:#e5ac45;--red:#c8313d;--teal:#007c7b;--line:#0a3b57;--muted:#5c6d78}*{box-sizing:border-box}body{margin:0;background:#062740;color:var(--ink);font-family:"Noto Sans SC",system-ui,sans-serif}button,select{font:inherit;cursor:pointer}button{border:0;border-radius:12px;padding:12px 16px;font-weight:800;color:var(--ink);background:#e8f1f4;transition:.18s}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}button:disabled{opacity:.45;cursor:not-allowed}.screen{min-height:100vh;padding:32px}.hidden{display:none}.hero-card{max-width:940px;margin:6vh auto;padding:52px;background:var(--cream);border:10px solid var(--gold);border-radius:32px;box-shadow:0 24px 80px #001521;position:relative;overflow:hidden}.hero-card:before,.hero-card:after{content:"✦ ❀ ✦ ❀ ✦ ❀";position:absolute;color:var(--red);font-size:25px;letter-spacing:12px}.hero-card:before{top:12px;left:22px}.hero-card:after{bottom:12px;right:22px}.eyebrow{font-size:.76rem;font-weight:900;letter-spacing:.14em;margin:0;color:var(--teal)}h1{font-family:"Playfair Display","Noto Sans SC",serif;font-size:clamp(2rem,5vw,4rem);margin:.18em 0 0;line-height:1;color:var(--navy)}h2{margin:.15em 0}.hero-card h2{font-size:1.6rem;color:var(--red)}.intro{max-width:550px;line-height:1.65;color:var(--muted);font-size:1.08rem}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.theme{padding:18px;text-align:left;background:#fff;border:2px solid #dbe3df}.theme strong{display:block;font-size:1.03rem}.theme span{font-size:.8rem;color:var(--muted)}.theme.selected{border-color:var(--red);background:#fff1ee;box-shadow:0 0 0 3px #f5c2bc}.setup{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.setup label{font-weight:700;display:grid;gap:6px}.setup select{padding:10px;border:1px solid #ccd8db;border-radius:9px}.primary{background:var(--red);color:#fff}.outline{background:transparent;border:2px solid #8aa6b4;color:#fff}header{max-width:1500px;margin:auto;display:flex;align-items:center;justify-content:space-between;color:#fff;padding-bottom:20px}header h1{color:var(--cream);font-size:clamp(1.5rem,3vw,2.4rem)}.layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(560px,1fr) 330px;gap:24px}.board-wrap{position:relative;aspect-ratio:1;background:var(--cream);border:10px solid var(--gold);box-shadow:0 16px 40px #001a2a;overflow:hidden}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);background:linear-gradient(145deg,#fffdf5,#ede1bb)}.space{border:1px solid var(--line);padding:4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;font-size:clamp(7px,.74vw,11px);font-weight:800;overflow:hidden;position:relative}.space .price{font-size:.8em}.space .tokens{display:flex;gap:1px;flex-wrap:wrap;justify-content:center;font-size:1.1em;line-height:1}.space .houses{color:#e29400;letter-spacing:-1px;font-size:.9em}.space.property:before{content:"";display:block;width:100%;height:8px;background:var(--accent);position:absolute;left:0;top:0}.space.corner{font-size:clamp(8px,.9vw,13px);background:#fff8e8;color:var(--red)}.space.card{background:#e3f2f1;color:#007c7b}.space.tax{background:#fff0d8}.board-centre{position:absolute;inset:17%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(circle,#fffdf3,#f5e0a8);border:5px double var(--gold);padding:20px}.board-centre:before{content:"✦";font-size:5rem;color:var(--red);line-height:.8}.board-centre h2{font-family:"Playfair Display","Noto Sans SC",serif;font-size:clamp(1.8rem,4vw,4rem);color:var(--navy);line-height:.95}.board-centre p{margin:.2em;color:var(--muted)}#turnCallout{margin-top:12px;padding:8px 12px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;font-size:.85rem}.side-panel{background:#073653;border-radius:18px;padding:14px;color:#fff;display:flex;flex-direction:column;gap:12px}.players{display:grid;gap:9px}.player{border:3px solid var(--player);border-radius:12px;padding:10px;background:#fff;color:var(--ink);display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}.player.current{box-shadow:0 0 0 3px #fff}.token{font-size:1.8rem}.player small{color:var(--muted);font-weight:700}.cash{font-size:1.08rem;font-weight:900}.dice-zone{text-align:center;background:#062943;border-radius:12px;padding:12px}.dice-zone #dice{font-size:3rem;letter-spacing:10px}.dice-zone p{font-size:.75rem;margin:4px 0;color:#b7d1dc}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions .primary{grid-column:1/-1}.log{background:#062943;border-radius:12px;padding:10px;min-height:180px}.log-title{font-size:.82rem;font-weight:900;display:flex;justify-content:space-between}.log-title button{padding:0;background:transparent;color:#9ec6d7;font-size:.7rem}.log ol{padding-left:19px;margin:8px 0;max-height:210px;overflow:auto;font-size:.76rem;line-height:1.55;color:#d4e6ed}dialog{border:0;border-radius:18px;padding:0;max-width:min(560px,92vw);box-shadow:0 20px 80px #00121e}dialog::backdrop{background:#001e3099}#modalContent{padding:26px;background:var(--cream);color:var(--ink)}#modalContent h3{margin-top:0;font-family:"Playfair Display","Noto Sans SC",serif;font-size:1.7rem}.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.notice{line-height:1.6;color:var(--muted)}.asset-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #d5dfdc}.asset-row button{padding:5px 9px;font-size:.75rem}@media(max-width:1000px){.layout{grid-template-columns:1fr}.side-panel{max-width:none}.players{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.screen{padding:12px}.hero-card{padding:32px 20px;border-width:6px}.theme-grid{grid-template-columns:1fr 1fr}.layout{gap:12px}.board-wrap{border-width:5px}.board-centre{inset:19%;padding:8px}.board-centre:before{font-size:2rem}.side-panel{border-radius:12px}.space{padding:1px;font-size:6px}.space.property:before{height:4px}}
/* Tabletop presentation */
body{background:radial-gradient(ellipse at 30% 15%,#154957 0,#071d2c 65%);}
.table-column{min-width:0}.table-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#c5d9db;font-size:12px;margin-bottom:12px}.table-tools button{font-size:12px;padding:8px 12px}
.table-stage{perspective:1400px;padding:20px 12px 48px}
.board-wrap{overflow:visible;transform-style:preserve-3d;transform:rotateX(23deg) rotateZ(-3deg);transition:transform .65s;border-radius:12px;border:9px solid #cfa35c;box-shadow:0 10px 0 #826038,0 20px 0 #493928,0 40px 50px #0009}
.overhead .board-wrap{transform:rotateX(0) rotateZ(0)}
.board{transform-style:preserve-3d;border-radius:4px}
.space{border-radius:0;cursor:pointer;transition:background .2s,box-shadow .2s;padding:10px 3px 4px;overflow:visible;background:#fff8e8;transform-style:preserve-3d}
.space:hover:not(:disabled),.space:focus-visible{transform:none;background:#ffedc5;box-shadow:inset 0 0 0 3px var(--gold);z-index:2;filter:none}
.space:disabled{opacity:1;cursor:default}
.space.owned{box-shadow:inset 0 -5px var(--owner)}
.space.occupied{background:#ffedc5}
.tile-label{position:relative;z-index:1;line-height:1.15}
.board-centre{inset:11%;border:2px solid #c69d5344;border-radius:10px;background:radial-gradient(ellipse at 50% 20%,#f7e9c8,#d5deca);transform:translateZ(1px);padding:10%;gap:8px}
.board-centre:before{content:"FR";font:900 clamp(22px,4vw,50px) "Playfair Display",serif;border:1px solid #b58a4588;border-radius:50%;padding:16px;color:#aa7d34}
.board-centre h2{font-size:clamp(18px,2.6vw,34px);line-height:1.15}
.board-centre .eyebrow{font-size:10px}
.piece-layer{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transform:translateZ(25px)}
.board-piece{position:absolute;width:26px;height:42px;transform:translate(-50%,-95%);transition:left .12s linear,top .12s linear;filter:drop-shadow(4px 7px 3px #0005)}
.figurine{--piece:#cf4646;display:inline-block;position:relative;width:26px;height:42px}
.figure-base{position:absolute;bottom:0;left:0;width:26px;height:11px;border-radius:50%;background:linear-gradient(100deg,#fff8,var(--piece) 40%,#0007);background-color:var(--piece);box-shadow:0 3px 0 #172638}
.figure-body{position:absolute;bottom:6px;left:4px;width:18px;height:24px;border-radius:45% 45% 25% 25%;background:linear-gradient(100deg,#fff9,var(--piece) 35%,#0007);background-color:var(--piece)}
.figure-head{position:absolute;top:0;left:5px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,var(--piece) 40%,#132331);box-shadow:0 2px 2px #0004}
.figure-number{position:absolute;top:20px;left:10px;color:white;font:800 9px system-ui}
.active-piece .figure-base{box-shadow:0 3px 0 #172638,0 0 0 3px #ffe393,0 0 16px #fff2a9}
.miniature-token{display:block;width:30px;height:46px;font-size:initial}
.building-row{display:flex;gap:3px;position:absolute;bottom:9px;left:8%;transform-style:preserve-3d;transform:translateZ(5px);pointer-events:none}
.mini-building{--w:12px;--h:15px;--half:6px;display:inline-block;width:var(--w);height:var(--h);position:relative;transform-style:preserve-3d;transform:rotateX(-25deg) rotateY(-30deg);animation:building-rise .45s ease-out}
.hotel-model{--w:18px;--h:28px;--half:9px}
.wall{position:absolute;inset:0;background:linear-gradient(90deg,#70cda8,#287b65);border:1px solid #165947}
.wall:after{content:"";position:absolute;top:30%;left:25%;width:35%;height:40%;background:repeating-linear-gradient(#ffdf84 0 3px,transparent 3px 6px)}
.front{transform:translateZ(var(--half))}.back{transform:rotateY(180deg) translateZ(var(--half))}.left{transform:rotateY(-90deg) translateZ(var(--half))}.right{transform:rotateY(90deg) translateZ(var(--half))}
.roof{position:absolute;top:0;left:0;width:var(--w);height:var(--w);background:#245648;transform:translateY(-50%) rotateX(90deg)}
.hotel-model .wall{background:linear-gradient(90deg,#e78364,#a42d3d);border-color:#6e2133}.hotel-model .roof{background:#e2af51}
@keyframes building-rise{from{opacity:.3;transform:translateY(6px) rotateX(-25deg) rotateY(-30deg)}to{opacity:1;transform:rotateX(-25deg) rotateY(-30deg)}}
.board-dice{--die:44px;--depth:22px;display:flex;justify-content:center;gap:28px;padding:26px 10px;perspective:700px;transform-style:preserve-3d}
.die-slot{width:var(--die);height:var(--die);perspective:600px}
.die-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .3s ease-out}
.die-face{position:absolute;inset:0;background:linear-gradient(135deg,#fffef9,#e4d4b7);border:1px solid #b5a581;border-radius:8px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:8px;gap:3px;backface-visibility:hidden;box-shadow:inset 0 0 6px #fff}
.die-face i{border-radius:50%}.pip{background:#b93448;box-shadow:inset 0 1px 2px #531523}
.face-1{transform:translateZ(var(--depth))}.face-2{transform:rotateY(90deg) translateZ(var(--depth))}.face-3{transform:rotateX(90deg) translateZ(var(--depth))}.face-4{transform:rotateX(-90deg) translateZ(var(--depth))}.face-5{transform:rotateY(-90deg) translateZ(var(--depth))}.face-6{transform:rotateY(180deg) translateZ(var(--depth))}
.die-cube.tumbling{animation:dice-tumble .55s linear infinite}.die-slot:nth-child(2) .tumbling{animation-direction:reverse}
@keyframes dice-tumble{0%{transform:translateY(-15px) rotateX(0) rotateY(0)}50%{transform:translateY(-45px) rotateX(180deg) rotateY(270deg)}100%{transform:translateY(-15px) rotateX(360deg) rotateY(540deg)}}
#rollReadout{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}.dice-zone #dice{font-size:25px}
.side-panel{align-self:start;box-shadow:0 14px 50px #0003}.side-panel>p{margin:0;font-size:12px}
button:focus-visible{outline:3px solid #f0b940;outline-offset:3px}
@media(max-width:620px){.table-stage{padding:6px 3px 26px}.board-wrap{border-width:5px;transform:rotateX(15deg) rotateZ(0)}.space{padding:6px 1px 2px;font-size:6px}.board-centre{padding:5%;gap:3px}.board-centre:before{padding:8px;font-size:22px}.board-centre h2{font-size:17px}.board-dice{--die:28px;--depth:14px;gap:22px;padding:18px 5px}.die-face{padding:5px;gap:2px;border-radius:5px}.board-piece{scale:.7}.mini-building{scale:.7;margin-right:-4px}.table-tools span{font-size:10px}#turnCallout{font-size:9px;margin-top:4px}#rollReadout{font-size:12px}.board-centre p{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Collector's tabletop: warm light, stone paths, timber edges. */
body{background:radial-gradient(ellipse at 42% 0,#47423b 0,#242321 48%,#141719 100%);--cream:#f2e8d4;--navy:#24282a;--ink:#272d2f}
header .eyebrow{color:#d2b585}header h1{color:#f5ebd7}
.hero-card{border:1px solid #a18964;border-radius:18px;box-shadow:0 25px 80px #0008;background:linear-gradient(135deg,#fff4db,#ddd0b6)}
.hero-card:before,.hero-card:after{content:"";width:100px;height:100px;border:1px solid #bda272;border-radius:50%;opacity:.3}
.theme{background:#ffffff60;border-color:#bbaa8e}.theme.selected{border-color:#9d743d;background:#fff6df;box-shadow:0 0 0 2px #b9955950}
.table-tools{flex-wrap:wrap;color:#dbc9ab}.table-tools button{background:#3d3a34;color:#f8ead2;border:1px solid #716149}
.dice-picker{display:flex;align-items:center;gap:6px;font-size:12px}.dice-picker select{border:1px solid #786448;background:#242624;color:#f6e6c6;border-radius:8px;padding:8px;max-width:155px}
.table-stage{padding:25px 20px 55px;perspective:1600px}
.board-wrap{border:10px solid #8b6844;border-radius:9px;transform:rotateX(28deg) rotateZ(-5deg);box-shadow:0 3px 0 #dfbd80,0 13px 0 #533a26,0 24px 0 #32291f,0 47px 60px #000a}
.space{background:linear-gradient(140deg,#fff9e8,#dacbb0);border:1px solid #665b47;color:#2c302b;padding-top:11px}
.space.owned{box-shadow:inset 0 -5px var(--owner)}.space.occupied{background:linear-gradient(140deg,#fff8d6,#ddba6d)}
.space.card,.space.tax,.space.corner{background:linear-gradient(140deg,#fff7e3,#dfd1b7);color:#282f2c}
.space.property:before{height:9px;border-bottom:1px solid #0005}
.space .tile-label{font-size:inherit;line-height:1.13}.space .price{z-index:1;font-variant-numeric:tabular-nums}
.tile-landmark{position:absolute;width:62%;height:58%;left:19%;top:27%;filter:drop-shadow(2px 4px 2px #0004);pointer-events:none}
.space:not(.property) .tile-label{font-size:.86em;min-height:2em}.space:not(.property){justify-content:space-between}
.board-centre{padding:0;inset:10%;overflow:hidden;background:#647351;border:7px solid #b8af94;box-shadow:inset 0 0 0 2px #7d735e;border-radius:5px;display:block;transform:translateZ(2px)}
.board-centre:before{display:none}.park-layer{position:absolute;inset:0;pointer-events:none}.park-scene{width:100%;height:100%;display:block}
.centre-content{position:absolute;inset:21% 9% 8%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:radial-gradient(ellipse,#f0e7d5de 5%,#eee3caad 53%,transparent 73%)}
.brand-plaque{background:linear-gradient(#3d443c,#1d2825);color:#f6d89c!important;border:2px solid #d1b578;padding:9px 18px!important;font:900 clamp(15px,2.1vw,30px) "Playfair Display",serif;letter-spacing:.05em;box-shadow:0 5px 0 #27231e,0 9px 12px #0005;transform:rotate(-2deg)}
.brand-plaque small{display:block;font:600 11px "Noto Sans SC",sans-serif;letter-spacing:.35em;text-align:center;padding-top:3px}
.centre-content>.eyebrow{display:none}.board-centre h2{font:700 clamp(12px,1.5vw,20px) "Noto Sans SC",sans-serif;color:#253830;text-shadow:0 1px #fff8}.board-centre p{color:#334338}
#turnCallout{background:#293a32;color:#fff0d3;box-shadow:0 2px 8px #0003}
.board-dice{--dice-light:#fffdf4;--dice-dark:#d4cab7;--pip-color:#202326}
.die-face{background:linear-gradient(135deg,var(--dice-light),var(--dice-dark));border-color:#8c806b;box-shadow:inset 1px 1px 4px #fff6,inset -2px -3px 5px #0003}
.pip{background:var(--pip-color);box-shadow:inset 0 1px 2px #0006}
.board-dice[data-finish="wood"] .die-face{background:repeating-linear-gradient(12deg,#a46e3333 0 1px,transparent 1px 5px),linear-gradient(130deg,var(--dice-light),var(--dice-dark))}
.board-dice[data-finish="marble"] .die-face{background:repeating-linear-gradient(135deg,transparent 0 12px,#9ea8ab55 13px,transparent 15px 23px),linear-gradient(var(--dice-light),var(--dice-dark))}
.board-dice[data-finish="glass"] .die-face{border-color:#defcff;box-shadow:inset 0 0 6px #fff9}
.board-dice[data-finish="neon"] .die-face{border-color:#229ee0;box-shadow:inset 0 0 7px #36aeff88,0 0 4px #3ac9ff66}
.board-dice[data-finish="neon"] .pip{box-shadow:0 0 5px #59e8ff}
.collectible{width:38px;height:42px}.collectible svg{position:absolute;inset:-3px -7px 0;width:48px;height:43px;filter:drop-shadow(1px 3px 1px #0006)}
.collectible .figure-base{width:34px;height:10px;left:1px;background:linear-gradient(130deg,#fff7,var(--piece));border:1px solid #ffffff88;box-shadow:0 3px #252828}
.collectible .figure-number{top:34px;left:14px;font-size:8px;text-shadow:0 1px #000}
.board-piece{width:38px}.active-piece .figure-base{box-shadow:0 3px #252828,0 0 0 2px #ffe2a0,0 0 16px #ffeaaa}
.player{background:linear-gradient(110deg,#f7edd9,#e5d6ba);border-width:1px;border-left:5px solid var(--player);border-radius:7px}
.player.current{box-shadow:0 0 0 1px #d4b57c,0 3px 12px #0004}.miniature-token{width:38px}
.side-panel{background:linear-gradient(130deg,#32332e,#202722);border:1px solid #776850;border-radius:12px}
.side-panel .dice-zone,.side-panel .log{background:#151f1c;border:1px solid #4d5445;border-radius:8px}.side-panel>p{color:#dac9a9}
.primary{background:linear-gradient(#b88744,#8e5e2c);color:#fff5df;box-shadow:0 3px 0 #523d27}
.actions button:not(.primary){background:#dfd0b2;border-bottom:3px solid #a4967e}.outline{border-color:#917c59}
.mini-building{--w:14px;--h:18px;--half:7px;animation:none}.hotel-model{--w:20px;--h:34px;--half:10px}
.wall{background:linear-gradient(90deg,#e3c897,#987a54);border-color:#756143}.wall:after{left:20%;width:60%;height:60%;top:20%;background:repeating-linear-gradient(0deg,transparent 0 4px,#f9d07f 4px 7px);box-shadow:0 0 3px #ffbf4944}
.roof{background:#6e2a28}.roof-pitch{position:absolute;left:0;top:-6px;width:var(--w);height:10px;transform:translateZ(var(--half));background:#b7503e;clip-path:polygon(50% 0,100% 100%,0 100%)}
.chimney{position:absolute;top:-7px;right:1px;width:3px;height:8px;background:#845743;transform:translateZ(2px)}
.hotel-model .wall{background:linear-gradient(90deg,#b87c54,#73513e)}.hotel-model .roof{background:#384754}.hotel-model .roof-pitch{background:#435363}
.building-row{bottom:6px;left:5%;gap:1px}
@media(max-width:620px){.table-stage{padding:10px 2px 28px}.board-wrap{border-width:6px;transform:rotateX(17deg) rotateZ(-2deg)}.table-tools{gap:6px}.table-tools>span{width:100%}.dice-picker select{padding:6px}.board-centre{border-width:3px}.centre-content{inset:24% 5% 6%;gap:3px}.brand-plaque{font-size:14px;padding:5px 8px!important}.brand-plaque small{font-size:8px}.board-centre h2{font-size:10px}.board-dice{padding:14px 4px}.space{padding-top:7px}.space.property:before{height:5px}.collectible{scale:.9}.tile-landmark{top:30%;height:50%}.building-row{scale:.75;transform-origin:left bottom}.centre-content>p:not(.brand-plaque):not(#rollReadout){display:none}}