@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { --ink:#20201e; --paper:#f2ead9; --red:#e54d3f; --green:#1d5b49; --yellow:#f4c84a; --cream:#fff9ed; --shadow:0 18px 50px #271d1030; }
* { box-sizing:border-box; }
body { margin:0; font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper); min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.setup-shell { min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; }
.brand-block { padding:clamp(40px,8vw,110px); display:flex; flex-direction:column; justify-content:center; position:relative; background:radial-gradient(circle at 20% 20%,#fffdf7 0,transparent 32%),linear-gradient(135deg,#eee1ca,#f7f0e3); }
.brand-block::after { content:""; position:absolute; width:33vw; height:33vw; border:2px solid #d3c3a5; border-radius:50%; right:-17vw; bottom:-12vw; box-shadow:0 0 0 45px #dfd0b552,0 0 0 90px #dfd0b52b; }
.eyebrow { text-transform:uppercase; letter-spacing:.25em; font-weight:700; font-size:.72rem; color:#8b795e; }
h1 { font-family:'Archivo Black',sans-serif; font-size:clamp(4.7rem,10vw,9rem); line-height:.72; letter-spacing:-.075em; margin:26px 0 35px; transform:skew(-3deg); }
h1 span { color:var(--red); margin-left:.18em; }
.lede { max-width:520px; font-size:1.18rem; line-height:1.6; color:#5e5548; }
.setup-card { padding:clamp(40px,7vw,100px); display:flex; flex-direction:column; justify-content:center; gap:34px; background:var(--green); color:white; }
.setup-title span { color:#b8d4c9; text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:700; display:block; }
.setup-title strong { font-family:'Archivo Black'; font-size:2.6rem; display:block; margin-top:7px; }
.setup-card label { font-size:.9rem; font-weight:600; display:grid; grid-template-columns:1fr auto; gap:14px; }
output { background:#ffffff18; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; margin-top:-8px; }
input[type=range] { grid-column:1/-1; width:100%; accent-color:var(--yellow); }
.setup-card select { grid-column:1/-1; width:100%; margin-top:2px; padding:11px 12px; color:#2f4b40; background:#f5f8f6; border:1px solid #cad8d2; border-radius:9px; font-weight:650; }
#player-count-note { color:#b8d4c9; font-size:.88rem; margin-top:-18px; }
.primary { border:0; border-radius:3px; padding:19px 22px; background:var(--yellow); color:#28251d; font-weight:800; font-size:1rem; display:flex; justify-content:space-between; box-shadow:7px 7px 0 #143f33; }
.primary:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 #143f33; }
.fine-print { text-align:center; color:#91b8a8; font-size:.75rem; margin:0; }
.game-shell { min-height:100vh; height:100vh; position:relative; background:#2b1a12; display:flex; flex-direction:column; overflow:hidden; }
.game-header { height:82px; display:flex; align-items:center; gap:18px; padding:12px 28px; background:var(--cream); border-bottom:1px solid #c9bda8; }
.mini-logo { border:0; background:var(--red); color:white; font:1.1rem 'Archivo Black'; transform:rotate(-3deg); width:50px; height:50px; }
.turn-copy { display:flex; flex-direction:column; }.turn-copy span { text-transform:uppercase; font-size:.61rem; letter-spacing:.18em; color:#887b68; }.turn-copy strong { font-size:1.15rem; }
.turn-stats { margin-left:auto; display:flex; gap:8px; }.turn-stats span { background:#eee7da; border-radius:3px; padding:8px 12px; font-size:.72rem; color:#746957; }.turn-stats b { color:#24211d; font-size:1rem; }
.icon-button { border:1px solid #b7aa94; border-radius:50%; background:transparent; width:38px;height:38px;font-weight:800; }
.icon-button.sound-muted { opacity:.48; text-decoration:line-through; }
.table { flex:1; min-height:510px; position:relative; perspective:1150px; overflow:hidden; isolation:isolate; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; background:radial-gradient(ellipse at center,#714528 0 43%,#4a2a19 72%,#28170f 100%); }
.table.camera-moving { cursor:grabbing; }
.table-world { position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(106vw,96vh,1320px); aspect-ratio:1; transform-style:preserve-3d; transform-origin:50% 50%; transition:transform .65s cubic-bezier(.22,.8,.24,1); will-change:transform; }
.table.camera-moving .table-world,
.table.camera-zooming .table-world { transition:none; }
.board-surface { position:absolute; inset:0; overflow:hidden; border:0; border-radius:50%; background-color:#1f614f; background-image:radial-gradient(#ffffff12 1px,transparent 1px),linear-gradient(125deg,#ffffff08,transparent 45%); background-size:17px 17px,100% 100%; box-shadow:inset 0 0 55px #082d24aa,0 24px 38px #0009; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.player-mat { --seat-scale:.8; position:absolute; z-index:2; width:clamp(210px,22vw,310px); min-height:132px; color:white; padding:0; transform-origin:50% 50%; transform-style:flat; backface-visibility:hidden; -webkit-backface-visibility:hidden; isolation:isolate; overflow:visible; transition:filter .25s; }
.player-mat:hover { z-index:20; }
.table-world .player-mat { right:auto!important; bottom:auto!important; }
.player-mat:nth-of-type(1) { left:50%; bottom:1%; transform:translateX(-50%) translateZ(20px) scale(.92); }
.player-mat:nth-of-type(2) { left:-1%; top:39%; transform:rotateZ(90deg) translateZ(20px) scale(.88); }
.player-mat:nth-of-type(3) { right:-1%; top:39%; transform:rotateZ(-90deg) translateZ(20px) scale(.88); }
.player-mat:nth-of-type(4) { left:11%; top:5%; transform:rotateZ(180deg) translateZ(20px) scale(.84); }
.player-mat:nth-of-type(5) { right:11%; top:5%; transform:rotateZ(180deg) translateZ(20px) scale(.84); }
.player-mat.active .player-line { background:var(--yellow); color:#29251d; box-shadow:0 0 0 4px #f4c84a2e,0 6px 14px #09261f88; }
.player-mat.active .player-line span { color:#65551f; }
.player-line { width:max-content; max-width:100%; display:flex; gap:13px; align-items:center; margin:0 0 7px 3px; padding:5px 9px; border-radius:20px; background:#0d352bd9; box-shadow:0 5px 10px #071c1766; }.player-line strong { font-size:.76rem; white-space:nowrap; }.player-line span { color:#b5d2c8;font-size:.58rem;white-space:nowrap; }
.wealth { display:flex; gap:5px; margin:0 0 8px 3px; }.bank { background:#f0e5cded;color:#302c25;padding:4px 7px;border-radius:10px;font-size:.6rem;font-weight:800;box-shadow:0 3px 7px #09251e66; }.sets { background:#f1c950ed;color:#302c25;padding:4px 7px;border-radius:10px;font-size:.6rem;font-weight:800;box-shadow:0 3px 7px #09251e66; }
.play-area { display:flex; gap:11px; align-items:flex-end; min-height:70px; padding-left:5px; }
.bank-pile,.properties { display:flex; align-items:flex-end; min-height:60px; }
.bank-pile { width:51px; position:relative; flex:0 0 51px; }
.table-card { width:45px; height:62px; border-radius:4px; border:1px solid #eee1c9; background:#f9efd9; color:#2d281f; box-shadow:2px 3px 4px #071c1766; padding:4px; font-size:.46rem; font-weight:800; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.bank-pile .table-card { position:absolute; left:0; bottom:0; transform:translate(calc(var(--card-index) * 2px),calc(var(--card-index) * -2px)) rotate(calc((var(--card-index) - 2) * 1deg)); background:#f2c847; }
.properties { gap:5px; overflow:visible; flex:1; }
.property-stack { width:50px; height:66px; border-radius:4px; padding:4px; font-size:.48rem; color:white; box-shadow:2px 4px 5px #061d1766; position:relative; display:flex; flex-direction:column; justify-content:space-between; border:2px solid #f6eddd; transform:rotate(calc(var(--stack-tilt) * 1deg)); }
.property-stack::before,.property-stack::after { content:none; }
.property-stack b { display:block;font-size:.75rem; }.property-stack em { font-style:normal;font-size:.4rem;text-transform:uppercase;letter-spacing:.08em; }
.table-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(32px) scale(.82); display:flex; gap:34px; align-items:center; z-index:1; }
.deck-3d,.discard-3d { width:66px;height:92px;border-radius:6px;position:relative;display:grid;place-items:center;text-align:center;font:1rem 'Archivo Black'; }
.deck-3d { color:#fff;background:repeating-linear-gradient(45deg,#d94339 0 8px,#bd3029 8px 16px);border:5px solid #f5e6cf;box-shadow:3px 4px 0 #d7c4a7,6px 8px 0 #af9b7e,10px 15px 18px #08251d99;transform:rotate(-4deg); }
.deck-3d small { position:absolute;bottom:-23px;color:#b9d6cd;font:600 .56rem 'DM Sans';text-transform:uppercase;letter-spacing:.13em;white-space:nowrap; }
.discard-3d { background:#f6ecd7;border:2px solid #dfd0b5;color:#302a21;box-shadow:4px 7px 12px #09241c99;transform:rotate(7deg);padding:5px;font-size:.68rem; }
.discard-3d.action { background:#e75245;color:white; }.discard-3d.money { background:#f1c84b; }.discard-3d.property { border-top:12px solid var(--discard-color); }
.discard-3d.empty { opacity:.22;background:transparent;border:2px dashed white;color:white;box-shadow:none; }
.empty-state { color:#b6d0c6; font-size:.62rem; padding:18px 4px 4px; text-shadow:0 1px 2px #09251e; }
.hand-zone { background:var(--cream); padding:14px 28px 24px; display:grid; grid-template-columns:1fr auto; border-top:1px solid #cbbfa9; }
.hand-heading { grid-column:1/-1; display:flex;justify-content:space-between;margin-bottom:9px;text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;font-weight:800; }.hand-heading small { color:#948773;text-transform:none;letter-spacing:0;font-weight:500; }
.hand { display:flex; gap:9px; overflow-x:auto; padding:4px 6px 10px 2px; min-height:142px; }
.card { flex:0 0 92px; height:128px; border:0;border-radius:5px;padding:7px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;color:#231f1a;background:#f4ead7;box-shadow:2px 4px 0 #a89c88;border:1px solid #d7cbb8;transition:.15s; }
.card:hover { transform:translateY(-7px) rotate(-1deg); box-shadow:3px 11px 10px #372d1f33; }.card[data-disabled="true"] { opacity:.55; cursor:default; }
.card .value { align-self:flex-end;font-weight:800;font-size:.62rem; }.card .kind { text-transform:uppercase;font-size:.5rem;letter-spacing:.12em; }.card strong { font-size:.78rem;line-height:1.05; }.card small { font-size:.53rem;line-height:1.25;color:#4f473b; }
.card.property { border-top:11px solid var(--card-color); }.card.action { background:#e75245;color:white;border-color:#c93f35; }.card.action small { color:#ffe3dc; }.card.money { background:#f1c84b; }
.end-turn { align-self:center;margin-left:18px;border:0;background:#222;color:white;border-radius:3px;padding:14px 17px;font-weight:800;display:flex;gap:28px; }
.toast { position:fixed; left:50%; top:95px; transform:translate(-50%,-20px); background:#23201d;color:white;padding:11px 17px;border-radius:4px;opacity:0;pointer-events:none;transition:.2s;z-index:5;font-size:.83rem;box-shadow:var(--shadow); }.toast.show { opacity:1;transform:translate(-50%,0); }
.undo-bar { position:fixed; right:18px; bottom:18px; z-index:36; display:flex; align-items:center; gap:14px; padding:10px 10px 10px 14px; color:#314b41; background:#fffffff5; border:1px solid #cbd9d3; border-radius:12px; box-shadow:0 10px 28px #263b3238; backdrop-filter:blur(10px); }
.undo-bar span { display:flex; flex-direction:column; min-width:0; }
.undo-bar small { color:#82938c; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.undo-bar strong { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
.undo-bar button { padding:9px 12px; color:#fff; background:#2f7766; border:0; border-radius:8px; font-weight:700; }
@media(max-width:760px){.undo-bar{right:8px;bottom:8px;gap:8px;padding:7px 7px 7px 10px}.undo-bar strong{max-width:120px;font-size:.7rem}.undo-bar button{padding:8px 10px;font-size:.7rem}}
.activity-feed { position:absolute; z-index:34; top:86px; right:14px; width:230px; max-height:210px; overflow:hidden; color:#314b41; background:#fffffff0; border:1px solid #cbd9d3; border-radius:12px; box-shadow:0 8px 24px #263b3229; backdrop-filter:blur(10px); }
.activity-heading { width:100%; display:flex; justify-content:space-between; align-items:center; padding:9px 11px; color:#405a50; background:#edf3f0e8; border:0; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.activity-heading b { font-size:1rem; line-height:.7; }
.activity-feed ol { max-height:166px; margin:0; padding:5px 9px 8px; overflow-y:auto; list-style:none; }
.activity-feed li { padding:5px 2px; color:#546a61; font-size:.66rem; line-height:1.25; }
.activity-feed li::marker { color:#8ca299; }
.activity-feed .activity-draw::marker { color:#5e8ea3; }.activity-feed .activity-payment::marker { color:#c49435; }.activity-feed .activity-action::marker { color:#7169a3; }.activity-feed .activity-block::marker { color:#c55752; }
.activity-feed.collapsed { width:auto; max-height:none; }.activity-feed.collapsed ol { display:none; }.activity-feed.collapsed .activity-heading { gap:14px; }
@media(max-width:760px),(orientation:landscape) and (max-height:600px){.activity-feed{top:120px;right:8px;width:190px;max-height:158px}.activity-feed ol{max-height:116px;padding-top:3px}.activity-feed li{font-size:.58rem;padding:4px 1px}.activity-heading{padding:7px 9px;font-size:.58rem}}
dialog { border:0;border-radius:6px;padding:0;background:var(--cream);box-shadow:var(--shadow);max-width:470px;width:calc(100% - 30px); } dialog::backdrop { background:#0e211bd1; }.modal-inner { padding:28px; }.modal-inner h2 { font-family:'Archivo Black';margin:0 0 12px; }.modal-inner p,.modal-inner li { color:#665c4e;line-height:1.5;font-size:.9rem; }.modal-actions { display:flex;gap:9px;flex-wrap:wrap;margin-top:20px; }.modal-actions button { border:0;padding:11px 14px;border-radius:3px;font-weight:700;background:#e8decc; }.modal-actions .primary-choice { background:var(--red);color:white; }.winner { text-align:center;padding:38px 28px; }.winner .trophy {font-size:4rem}.winner button {width:100%;justify-content:center;}
#modal[open] { position:fixed; inset:86px 18px auto auto; margin:0; width:min(410px,calc(100vw - 36px)); max-width:none; max-height:calc(100vh - 104px); overflow:auto; z-index:40; border:1px solid #c7d6d0; border-radius:14px; box-shadow:0 18px 48px #20352c4a; }
#panel-toggle { position:sticky; top:0; z-index:2; float:right; margin:9px 9px 0; padding:6px 9px; color:#486258; background:#edf3f0; border:1px solid #cbd9d3; border-radius:7px; font-size:.68rem; font-weight:700; }
#modal.collapsed { width:auto; height:auto; overflow:hidden; background:transparent; border:0; box-shadow:none; }
#modal.collapsed #modal-content { display:none; }
#modal.collapsed #panel-toggle { float:none; margin:0; color:#fff; background:#2f7766; border-color:#2f7766; box-shadow:0 6px 18px #20352c42; }
.inspection-panel-open .hand-zone { pointer-events:none; opacity:.55; }
.inspection-panel-open #help-button,.inspection-panel-open #logo-button,.inspection-panel-open .room-badge { pointer-events:none; opacity:.5; }
@media(max-width:760px){#modal[open]{inset:auto 10px 10px auto;width:min(370px,calc(100vw - 20px));max-height:48vh}.modal-inner{padding:22px 18px 18px}}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){#modal[open]{inset:64px 8px 8px auto;width:min(350px,48vw);max-height:calc(100vh - 72px)}.modal-inner{padding:18px 14px 14px}}
@media(max-width:760px){.setup-shell{grid-template-columns:1fr}.brand-block{padding:38px 28px;min-height:43vh}.brand-block h1{font-size:4.8rem;margin:18px 0}.lede{font-size:.95rem}.setup-card{padding:36px 28px}.game-header{padding:10px 14px}.turn-stats span:first-child{display:none}.table{min-height:570px;padding:10px}.table::before{inset:3% 2%;border-width:10px}.player-mat{width:46vw;min-height:120px}.player-mat:nth-of-type(1){bottom:3%}.player-mat:nth-of-type(2){left:4%;top:7%}.player-mat:nth-of-type(3){right:4%;top:7%}.player-mat:nth-of-type(4){left:4%;top:37%;transform:scale(.82)}.player-mat:nth-of-type(5){right:4%;top:37%;transform:scale(.82)}.player-line{margin-bottom:5px;gap:6px;padding:4px 7px}.player-line span{display:none}.wealth{margin-bottom:5px}.table-center{top:52%;gap:15px;transform:translate(-50%,-50%) translateZ(32px) scale(.6)}.hand-zone{padding:12px 14px 18px}.card{flex-basis:82px;height:118px}.end-turn{margin-left:10px;padding:13px 11px;gap:8px}}

/* Midnight market theme */
:root { --ink:#07121a; --paper:#081722; --red:#6e2525; --green:#073b38; --yellow:#d9aa57; --cream:#e9dfcc; --gold:#d9aa57; --gold-light:#f3cf84; --navy:#06131d; --navy-2:#0a202d; --shadow:0 18px 50px #0009; }
body { font-family:'Oswald',sans-serif; background:#06131d; letter-spacing:.02em; }
.setup-shell { background-color:#071722; background-image:linear-gradient(28deg,transparent 46%,#b98e4d12 47% 48%,transparent 49%),linear-gradient(117deg,transparent 46%,#b98e4d0d 47% 48%,transparent 49%),radial-gradient(circle at 40% 50%,#153444 0,transparent 55%); background-size:115px 115px,160px 160px,100% 100%; }
.brand-block { color:#ead9b7; background:linear-gradient(90deg,#06131df2,#06131d99); border-right:1px solid #d3a55355; text-align:center; align-items:center; }
.brand-block::before { content:""; width:74px; height:78px; margin-bottom:17px; background:linear-gradient(90deg,transparent 9%,var(--gold) 10% 14%,transparent 15% 26%,var(--gold) 27% 33%,transparent 34% 46%,var(--gold-light) 47% 54%,transparent 55% 67%,var(--gold) 68% 74%,transparent 75% 86%,var(--gold) 87% 91%,transparent 92%); clip-path:polygon(0 100%,0 72%,12% 72%,12% 49%,27% 49%,27% 27%,43% 27%,43% 0,57% 0,57% 20%,74% 20%,74% 49%,89% 49%,89% 70%,100% 70%,100% 100%); filter:drop-shadow(0 4px 7px #000); }
.brand-block::after { width:48vw;height:48vw;border-color:#d3a55318;right:-8vw;bottom:-29vw;box-shadow:0 0 0 44px #d3a55308,0 0 0 88px #d3a55308; }
.eyebrow { color:#c79a54; letter-spacing:.36em; }
h1 { font-family:'Cinzel',serif; color:#e9dcc2; letter-spacing:.14em; line-height:.82; font-size:clamp(3.8rem,8vw,7.2rem); transform:none; font-weight:500; text-shadow:0 4px 12px #000; }
h1 span { color:var(--gold); margin-left:.12em; }
.lede { color:#aeb9b9; max-width:500px; font-family:'Cinzel',serif; font-size:1rem; }
.setup-card { margin:auto clamp(24px,5vw,75px); padding:clamp(35px,5vw,64px); border:1px solid var(--gold); outline:1px solid #d9aa5740; outline-offset:7px; background:linear-gradient(145deg,#0b2733f5,#06151ff5); box-shadow:0 28px 80px #000; max-width:550px; width:calc(100% - 48px); }
.setup-title span,#player-count-note,.fine-print { color:#9b896a; }.setup-title strong { font-family:'Cinzel'; color:#e6d5b6; letter-spacing:.06em; }
output { color:var(--gold-light); border:1px solid #d9aa5766; }.primary { color:#f3d291; background:#073d39; border:1px solid var(--gold); outline:1px solid #d9aa5755; outline-offset:3px; box-shadow:0 8px 20px #0008; font-family:'Cinzel'; letter-spacing:.1em; text-transform:uppercase; }.primary:hover { box-shadow:0 10px 24px #000a; }
.game-shell { background:#06131d; }
.game-header { height:78px; color:#e9d6ae; background:linear-gradient(180deg,#081b27,#06131d); border-bottom:1px solid #b98e4d88; box-shadow:0 5px 18px #0008; z-index:4; }
.camera-hint { margin-left:auto; color:#7f8f91; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.camera-reset { font-size:1.1rem; }
.mini-logo { background:#071c28; color:var(--gold); border:2px double var(--gold); font:1rem 'Cinzel'; transform:none; box-shadow:inset 0 0 0 2px #06131d,0 3px 10px #000; }
.turn-copy span { color:#a78b5f; }.turn-copy strong { color:#f0d59e; font-family:'Cinzel'; letter-spacing:.08em; }
.turn-stats span { color:#9a8c74; background:#0c2532; border:1px solid #b38b4b44; }.turn-stats b { color:#e9c879; }.icon-button { color:#ddb66e;border-color:#b38b4b;background:#091b26; }
.table { background-color:#06131d; background-image:linear-gradient(35deg,transparent 46%,#cea7630c 47% 48%,transparent 49%),linear-gradient(122deg,transparent 46%,#cea7630a 47% 48%,transparent 49%),radial-gradient(ellipse at center,#153542 0,#081b27 48%,#030c12 100%); background-size:130px 130px,190px 190px,100% 100%; }
.board-surface { border:0; border-radius:50%; outline:none; background-color:#081b27; background-image:radial-gradient(circle at center,transparent 0 94%,#efd08d 94.2% 94.7%,#b58c4a 95% 96.2%,#25150e 96.5% 100%),linear-gradient(30deg,transparent 46%,#d4ae6710 47% 48%,transparent 49%),linear-gradient(120deg,transparent 46%,#d4ae670d 47% 48%,transparent 49%),radial-gradient(circle at center,#123440 0,#081b27 67%,#030b11 100%); background-size:100% 100%,105px 105px,145px 145px,100% 100%; box-shadow:inset 0 0 80px #000b,0 26px 40px #000a; }
.table::after { display:none; }
.player-line { color:#e7c37d; background:#071923e8; border:1px solid #b98e4d88; border-radius:2px; box-shadow:none; padding:5px 8px; text-transform:uppercase; letter-spacing:.14em; backface-visibility:hidden; }.player-line strong { font-family:'Cinzel'; }.player-line span { color:#897c68; }
.player-mat.active .player-line { color:#f3cf84;background:#0a3c36; box-shadow:0 0 0 2px #d6aa5938; border-color:#f0c66f; }.player-mat.active .player-line span { color:#c5aa77; }
.bank,.sets { color:#e2ba70; background:#0a1e29dd; border:1px solid #a8864c66; box-shadow:none; border-radius:2px; }
.table-card { color:#e9c87e; background:#0a202c; border:2px solid #c99d52; box-shadow:2px 4px 8px #000b; backface-visibility:hidden; }.bank-pile .table-card { background:#102b35; }
.property-stack { color:#f1deb5!important; background:linear-gradient(180deg,var(--property-color,#173744),#071722)!important; border:2px solid #d2a759; box-shadow:3px 4px 0 #06131d,2px 5px 9px #000c; text-shadow:0 1px 2px #000; backface-visibility:hidden; }.property-stack::before,.property-stack::after { content:none; }.property-stack em { background:#06131d; margin:-4px; padding:4px; border-top:1px solid #c99d52; }
.table-center { transform-style:preserve-3d; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.deck-3d,.discard-3d { border-radius:3px; font-family:'Cinzel'; }.deck-3d { color:#e4ba6c;background:linear-gradient(145deg,#0d2b38,#06131d);border:4px double #d4a858;box-shadow:3px 4px 0 #08151d,6px 8px 0 #bb914d,10px 15px 18px #000; }.deck-3d::before { content:"▰"; font-size:2.2rem; color:#d8aa55; }.deck-3d { font-size:0; }.deck-3d small { color:#c39a56;font-family:'Oswald';font-size:.56rem; }.discard-3d { color:#182027;background:#e5dac5;border:4px double #b59055;box-shadow:5px 8px 15px #000; }.discard-3d.action { background:#0b2733;color:#e7bd72; }.discard-3d.money { background:#d7c49c; }.discard-3d.empty { color:#b68c4c;border-color:#b68c4c; }
.empty-state { color:#7c8e91; }.hand-zone { position:relative;background:linear-gradient(180deg,#071722,#040c12);border-top:1px solid #b38b4b;padding-top:18px;box-shadow:0 -8px 28px #0009; }.hand-heading { color:#d6a95c; }.hand-heading small { color:#77878a; }
.card { flex-basis:116px;height:164px;padding:9px;color:#171a1a;background:#ded2bc;border:4px double #b58c4a;border-radius:5px;box-shadow:3px 6px 10px #000b;font-family:'Oswald'; }.card::before { content:"";height:42%;margin:-3px -3px 2px;background:linear-gradient(155deg,#203d4b,#0a1d27);border:1px solid #b9904d;box-shadow:inset 0 0 18px #0008; }.card:hover { transform:translateY(-12px);box-shadow:0 15px 24px #000; }.card .kind { color:#8c6838; }.card strong { font-family:'Cinzel';font-size:.72rem;text-align:center;letter-spacing:.05em; }.card small { color:#4a4135;text-align:center; }.card.property { border-top:9px solid var(--card-color); }.card.property::before { background:linear-gradient(155deg,var(--card-color),#0a1d27); }.card.action { color:#edcf91;background:#08202b;border-color:#c69a50; }.card.action::before { background:linear-gradient(155deg,#284958,#07141c); }.card.action small { color:#bea973; }.card.money { color:#172127;background:#d8c8a7; }.card.money::before { background:linear-gradient(145deg,#caa151,#70511e); }
.end-turn { color:#f0c979;background:#073b38;border:3px double #d0a251;outline:1px solid #d0a25155;outline-offset:3px;border-radius:2px;padding:16px 20px;text-transform:uppercase;font-family:'Cinzel';letter-spacing:.08em;box-shadow:0 7px 16px #000; }.toast { color:#e9c77f;background:#071722;border:1px solid #b58c4a; }.modal-inner h2 { font-family:'Cinzel'; }.modal-actions .primary-choice { background:#073b38;color:#edcc8e;border:1px solid #bd914c; }
@media(max-width:760px){.setup-card{margin:0;width:100%;border-left:0;border-right:0;outline:0}.card{flex-basis:96px;height:142px}.brand-block h1{font-size:3.7rem}.board-surface{border-width:3px}.camera-hint{display:none}.table-world{width:min(108vw,84vh,860px)}.player-mat{--seat-scale:.6;width:50vw}}

.hand-zone { position:absolute; z-index:10; left:50%; bottom:18px; transform:translateX(-50%); width:min(920px,calc(100vw - 36px)); padding:14px 16px 16px; border:1px solid #b38b4b; border-radius:7px; background:linear-gradient(160deg,#0a202ef2,#030b11f5); box-shadow:0 18px 45px #000c,inset 0 1px #efd18b22; backdrop-filter:blur(10px); transition:opacity .25s ease,transform .35s ease,visibility .25s; }
.hand-zone::before { content:""; position:absolute; inset:5px; border:1px solid #b38b4b38; border-radius:3px; pointer-events:none; }
.hand-zone.hand-hidden { opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,28px); }
.hand-zone .hand { min-height:0; }
@media(max-width:760px){.hand-zone{bottom:10px;width:calc(100vw - 20px);padding:11px 10px 12px}.hand-heading{padding:0 3px}.hand-zone .hand{padding-bottom:8px}}

/* Flat minimal theme */
:root { --ink:#17211d; --paper:#f3f6f4; --red:#e2605b; --green:#2f7766; --yellow:#f0c75e; --cream:#fff; --shadow:0 10px 28px #24352d18; }
body { font-family:'Inter',sans-serif; letter-spacing:0; background:#e8eeeb; color:#17211d; }
.setup-shell { background:#f1f5f3; background-image:none; }
.brand-block { color:#17211d; background:#e2ece7; border-right:1px solid #ccd9d3; text-align:left; align-items:flex-start; }
.brand-block::before,.brand-block::after { display:none; }
.brand-logo { width:clamp(58px,7vw,92px); aspect-ratio:1; margin-bottom:18px; background:#2f7766; -webkit-mask:url('assets/corner-market-logo-white.png') center/contain no-repeat; mask:url('assets/corner-market-logo-white.png') center/contain no-repeat; }
.eyebrow { color:#527267; letter-spacing:.16em; }
h1 { color:#17211d; font-family:'Inter'; font-size:clamp(4rem,9vw,8rem); font-weight:700; letter-spacing:-.07em; line-height:.78; text-align:left; text-shadow:none; }
h1 span { color:#2f7766; margin-left:0; }
.lede { color:#557067; font-family:'Inter'; font-size:1.05rem; }
.setup-card { color:#17211d; margin:auto clamp(24px,5vw,75px); padding:clamp(34px,5vw,60px); border:1px solid #d3ded9; outline:0; border-radius:16px; background:#fff; box-shadow:0 18px 50px #1f332a14; }
.setup-title span,#player-count-note,.fine-print { color:#799087; }.setup-title strong { color:#17211d; font-family:'Inter'; letter-spacing:-.03em; }
.start-card { width:min(520px,calc(100% - 48px)); gap:26px; }
.start-card .setup-title strong { max-width:390px; font-size:clamp(1.8rem,3.2vw,2.55rem); line-height:1.08; }
.start-actions { display:grid; gap:12px; }
.game-choice { width:100%; min-height:82px; align-items:center; padding:17px 18px; text-align:left; }
.game-choice > span { display:flex; flex-direction:column; gap:5px; }
.game-choice strong { font-size:1rem; }
.game-choice small { font-size:.72rem; font-weight:500; line-height:1.35; opacity:.78; }
.game-choice b { margin-left:18px; font-size:1.1rem; }
.secondary-choice { display:flex; justify-content:space-between; color:#2f7766; background:#f2f7f5; border:1px solid #cbded6; border-radius:9px; font-weight:700; }
.secondary-choice:hover { color:#276756; background:#e8f2ee; border-color:#afcbbf; }
.setup-back { align-self:center; padding:5px 9px; color:#70847b; background:transparent; border:0; font-size:.76rem; font-weight:650; }
.setup-back:hover { color:#2f7766; }
output { color:#2f7766; border:0; background:#e8f1ed; }.primary { color:#fff; background:#2f7766; border:0; outline:0; border-radius:9px; box-shadow:none; font-family:'Inter'; letter-spacing:0; text-transform:none; }.primary:hover { box-shadow:none; background:#276756; }
.game-shell { background:#e8eeeb; }
.game-header { height:72px; color:#17211d; background:#fff; border-bottom:1px solid #d8e1dd; box-shadow:none; }
.mini-logo { color:#fff; background:#2f7766; border:0; border-radius:8px; box-shadow:none; font:700 .9rem 'Inter'; }
.mini-logo img { display:block; width:72%; height:72%; margin:auto; object-fit:contain; pointer-events:none; }
.turn-copy span { color:#81928b; }.turn-copy strong { color:#17211d; font-family:'Inter'; letter-spacing:0; }
.camera-hint { color:#91a19a; letter-spacing:.06em; text-transform:none; }
.turn-stats span { color:#73837d; background:#f2f5f3; border:1px solid #dce5e1; border-radius:8px; }.turn-stats b { color:#2f7766; }
.icon-button { color:#50655d; background:#fff; border:1px solid #d5dfdb; }
.table { background:#e8eeeb; background-image:none; }
.board-surface { background:#d7e5df; background-image:radial-gradient(circle at center,transparent 0 95%,#9eb6ac 95.2% 96%,#bdcec7 96.2% 100%); background-size:100% 100%; border:10px solid #2f7766; box-shadow:0 18px 32px #263b3220; }
.board-surface { transform:translateZ(0) scale(1.06); }
@media(max-width:760px){.board-surface{border-width:7px}}
.player-line { color:#273c34; background:#fff; border:1px solid #cbd9d3; border-radius:7px; padding:6px 9px; letter-spacing:0; text-transform:none; box-shadow:0 2px 6px #263b3210; }
.player-line strong { font-family:'Inter'; }.player-line span { color:#81928b; }
.player-mat.active .player-line { color:#fff; background:#2f7766; border-color:#2f7766; box-shadow:none; }.player-mat.active .player-line span { color:#d8ebe4; }
.bank,.sets { color:#405a50; background:#edf3f0; border:1px solid #cad8d2; border-radius:6px; box-shadow:none; }
.table-card { color:#315247; background:#fff; border:1px solid #9eb4ab; border-radius:5px; box-shadow:2px 3px 0 #afc2ba; }.bank-pile .table-card { background:#fff; }
.property-stack { color:#fff!important; border:0; border-radius:5px; box-shadow:3px 3px 0 #9badA6; text-shadow:none; }.property-stack em { background:#ffffffed; color:#24352e; border:0; }
.empty-state { color:#789087; text-shadow:none; }
.deck-3d,.discard-3d { border-radius:7px; font-family:'Inter'; }
.deck-3d { color:#fff; background:#2f7766; border:0; box-shadow:4px 4px 0 #a9beb5; }.deck-3d::before { content:"CM"; color:#fff; font-size:1rem; }.deck-3d small { color:#59746a; font-family:'Inter'; }
.discard-3d { color:#344b42; background:#fff; border:1px solid #b7c8c1; box-shadow:3px 3px 0 #bdcbc5; }.discard-3d.action { color:#4b4770; background:#e8e6f5; }.discard-3d.money { background:#fff4c9; }.discard-3d.empty { color:#6f887e; border-color:#9eb2aa; }
.hand-zone { border:1px solid #d1dcd7; border-radius:14px; background:#fffffff2; box-shadow:0 14px 36px #273b3226; backdrop-filter:blur(12px); }
.hand-zone::before { display:none; }.hand-heading { color:#3f5c51; }.hand-heading small { color:#82938c; }
.card { color:#24322c; background:#fff; border:1px solid #cad6d1; border-radius:9px; box-shadow:0 3px 8px #25382f18; font-family:'Inter'; }
.card::before { content:none; }.card:hover { transform:translateY(-7px); box-shadow:0 8px 18px #25382f25; }
.card .kind { color:#71837b; }.card strong { font-family:'Inter'; font-size:.76rem; letter-spacing:0; }.card small { color:#697a73; }
.card.property { border:1px solid #cad6d1; border-top:9px solid var(--card-color); }.card.action { color:#3e3a61; background:#eeedf8; border-color:#d4d1e9; }.card.action small { color:#6d6889; }.card.money { color:#4f451f; background:#fff6d8; border-color:#e5d9aa; }
.end-turn { color:#fff; background:#2f7766; border:0; outline:0; border-radius:9px; box-shadow:none; font-family:'Inter'; letter-spacing:0; text-transform:none; }
.toast { color:#fff; background:#263a32; border:0; border-radius:8px; }.modal-inner h2 { font-family:'Inter'; }.modal-actions .primary-choice { color:#fff; background:#2f7766; border:0; }
dialog { background:#fff; border-radius:14px; box-shadow:0 20px 60px #1f312a38; }

.hand-zone { background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
.hand-zone::before { display:none; }
.hand-heading { color:#314b41; text-shadow:0 1px 0 #fff; }
.card.property { color:var(--card-ink); background:var(--card-color); border:0; border-top:0; box-shadow:0 4px 10px #25382f30; }
.card.property .value,.card.property .kind,.card.property strong,.card.property small { color:var(--card-ink); }
.card.property .kind,.card.property small { opacity:.78; }
.card.property.has-rent-guide small { display:none; }
.card.property:hover { box-shadow:0 9px 18px #25382f38; }
.rent-guide { display:flex; flex-wrap:wrap; gap:3px 6px; padding:6px; color:inherit; background:#ffffff42; border:1px solid #ffffff66; border-radius:6px; font-size:.5rem; line-height:1.15; }
.rent-guide b { flex-basis:100%; text-transform:uppercase; letter-spacing:.08em; font-size:.43rem; }
.rent-guide span { white-space:nowrap; }

.card,.card.property,.card.action,.card.money,.table-card,.property-stack,.deck-3d,.discard-3d,.discard-3d.empty { border:6px solid #fff; }

.hand-zone { top:90px; bottom:18px; left:18px; right:auto; width:164px; transform:none; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; padding:8px; }
.hand-zone.hand-hidden { transform:translateX(-28px); }
.hand-zone .hand-heading { grid-column:1; padding:0 4px; }
.hand-zone .hand-heading small { display:none; }
.hand-zone .hand { flex-direction:column; align-items:center; overflow-x:hidden; overflow-y:auto; min-height:0; padding:5px 8px 12px; }
.hand-zone .card { flex:0 0 164px; width:116px; }
.hand-zone .end-turn { width:136px; margin:8px auto 2px; justify-content:space-between; padding:12px; }
@media(max-width:760px){.hand-zone{top:82px;bottom:10px;left:8px;width:144px;padding:6px}.hand-zone .card{width:102px;flex-basis:146px}.hand-zone .end-turn{width:124px;padding:10px 8px}}

.play-area { display:block; min-height:92px; padding-left:3px; }
.bank-pile,.properties { position:relative; width:auto; min-height:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px; }
.bank-pile { margin-bottom:6px; }
.property-group { display:flex; gap:3px; padding:2px; border-radius:6px; }
.played-card { width:62px; height:88px; flex:0 0 62px; padding:5px; border-radius:7px; text-align:left; pointer-events:auto; cursor:zoom-in; box-shadow:0 2px 5px #25382f24; transform-origin:center; transition:transform .18s ease,box-shadow .18s ease; }
.played-card:hover { z-index:100; transform:translateY(-12px) scale(2.15); box-shadow:0 12px 26px #20372d4a; }
.played-card .value { font-size:.48rem; }.played-card .kind { font-size:.36rem; letter-spacing:.06em; }.played-card strong { font-size:.49rem; line-height:1.05; text-align:left; }.played-card small { font-size:.36rem; line-height:1.12; text-align:left; }
.played-card .rent-guide { gap:1px 3px; padding:2px; border-radius:3px; font-size:.26rem; line-height:1; }
.played-card .rent-guide b { font-size:.25rem; }
.played-card.action { color:#3e3a61; background:#eeedf8; }.played-card.action small { color:#6d6889; }.played-card.money { color:#4f451f; background:#fff6d8; }
.card.action.rent-card {
  position:relative;
  overflow:hidden;
  padding-left:20px;
  color:#3e3a61;
  background:#f4f2fb;
  border-color:#fff;
  text-shadow:none;
}
.card.action.rent-card::before {
  content:"";
  position:absolute;
  inset:-6px auto -6px -6px;
  height:auto;
  margin:0;
  width:18px;
  background:var(--card-color);
  border:0;
  border-right:2px solid #fff;
  box-shadow:none;
}
.card.action.rent-card .value,
.card.action.rent-card .kind,
.card.action.rent-card strong,
.card.action.rent-card small { position:relative; z-index:1; color:#3e3a61; }
.card.action.rent-card .kind,.card.action.rent-card small { opacity:.78; }
.played-card.action.rent-card { padding-left:14px; }
.played-card.action.rent-card::before { width:14px; border-right-width:1px; }
.discard-slot { width:34px; height:50px; display:grid; place-items:center; color:#72867d; border:2px dashed #9eb2aa; border-radius:5px; font-size:.42rem; text-transform:uppercase; }
@media(max-width:760px){.played-card{width:52px;height:74px;flex-basis:52px;border-width:4px}.played-card small{display:none}.played-card strong{font-size:.43rem}}

/* On phones rotated sideways, the round table is sized by the shorter
   viewport height. Scale its center piles by the same constraint. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse) {
  .table-center { gap:20px; transform:translate(-50%,-50%) translateZ(32px) scale(.62); }
  .table-center .played-card:hover { transform:none; }
}
@media (orientation:landscape) and (max-height:430px) and (pointer:coarse) {
  .table-center { gap:16px; transform:translate(-50%,-50%) translateZ(32px) scale(.56); }
}

.hand-zone .card[draggable="true"] { cursor:grab; }
.hand-zone .card[draggable="true"] { touch-action:pan-y; }
.hand-zone .card.dragging { opacity:.45; cursor:grabbing; }
.hand-zone .card.drag-armed { transform:scale(1.06); box-shadow:0 10px 24px #24382f38; }
.touch-drag-ghost { position:fixed!important; z-index:1000!important; width:102px!important; height:146px!important; margin:0!important; opacity:.88!important; pointer-events:none!important; transform:translate(-50%,-55%) rotate(3deg) scale(.92)!important; box-shadow:0 18px 38px #172a2266!important; }
@media(max-width:760px){.hand-zone .hand{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}}
.player-mat .play-area { position:relative; border-radius:10px; transition:background .15s ease,outline-color .15s ease; }
.player-mat.drop-ready .play-area { min-height:110px; background:#ffffffb8; outline:3px dashed #2f7766; outline-offset:6px; }
.player-mat.drop-ready .play-area::after { content:"Drop to play"; position:absolute; inset:0; display:grid; place-items:center; color:#2f7766; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; pointer-events:none; }
.player-mat.drop-ready .bank-pile,.player-mat.drop-ready .properties { opacity:.2; }

.target-list { display:grid; gap:9px; margin-top:20px; }
.target-list button { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 14px; color:#24352e; background:#f3f6f4; border:1px solid #d2ddd8; border-radius:9px; text-align:left; }
.target-list button:hover { background:#e4efea; border-color:#8caa9e; }
.target-list button strong { font-size:.85rem; }.target-list button span { color:#74877f; font-size:.7rem; }
.target-list button.property-choice { color:var(--choice-ink); background:var(--choice-color); border:4px solid #fff; box-shadow:0 2px 7px #1d2d2630; }
.target-list button.property-choice span { color:inherit; opacity:.78; }
.target-list button.property-choice:hover { color:var(--choice-ink); background:var(--choice-color); border-color:#fff; filter:brightness(1.08); transform:translateY(-1px); }

.privacy-screen { padding:38px 34px; text-align:center; }
.privacy-icon { width:52px; height:52px; margin:0 auto 18px; display:grid; place-items:center; color:#fff; background:#2f7766; border-radius:50%; font-size:1.35rem; }
.privacy-screen p { margin:0 0 4px; color:#74877f; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.privacy-screen h2 { margin:0 0 10px; color:#17211d; font:700 2rem 'Inter'; }
.privacy-screen span { display:block; margin-bottom:24px; color:#71827b; font-size:.85rem; }
.privacy-screen .primary { width:100%; justify-content:center; }
.payment-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:280px; overflow:auto; margin:18px 0; }
.payment-options button { display:flex; flex-direction:column; gap:3px; padding:10px; color:#263a32; background:#f3f6f4; border:2px solid transparent; border-radius:8px; text-align:left; }
.payment-options button.selected { background:#dcebe5; border-color:#2f7766; }.payment-options button span { color:#76887f; font-size:.68rem; }
.payment-options button.payment-card-choice { color:var(--choice-ink); background:var(--choice-color); border:4px solid #fff; box-shadow:0 2px 7px #1d2d2630; }
.payment-options button.payment-card-choice span { color:inherit; opacity:.78; }
.payment-options button.payment-card-choice:hover { filter:brightness(1.08); }
.payment-options button.payment-card-choice.selected { color:var(--choice-ink); background:var(--choice-color); border-color:#fff; outline:4px solid #2f7766; outline-offset:-4px; box-shadow:0 0 0 2px #173e34,0 4px 10px #1d2d2640; }
.invalid-action-note { margin:12px 0; padding:10px 12px; color:#70483d; background:#f7e7df; border-left:4px solid #b96952; border-radius:5px; font-size:.78rem; line-height:1.4; }
.modal-actions button:disabled { cursor:not-allowed; opacity:.42; filter:grayscale(.35); }
.payment-total { margin:0 0 14px; color:#6d8077; }.payment-picker>.primary { width:100%; justify-content:center; }


.hand-zone { width:196px; }
.hand-zone .hand { padding-left:14px; padding-right:14px; gap:22px; }
.hand-zone .card { transform-origin:center; transition:transform .16s ease,box-shadow .16s ease; }
.hand-zone .card:hover,.hand-zone .card:focus-visible { z-index:30; transform:scale(1.52); box-shadow:0 12px 28px #24382f45; }
@media(max-width:760px){.hand-zone{width:150px}.hand-zone .hand{padding-left:8px;padding-right:8px;gap:12px}.hand-zone .card:hover,.hand-zone .card:focus-visible{transform:scale(1.3)}}
@media (hover:none), (pointer:coarse) {
  .hand-zone .card:hover:not(.drag-armed):not(.dragging),.hand-zone .card:focus:not(.drag-armed):not(.dragging) { transform:none; box-shadow:0 2px 5px #25382f24; }
  .hand-zone .card.touch-selected { position:relative; z-index:30; transform:scale(1.45)!important; box-shadow:0 12px 28px #24382f45!important; }
}
.touch-ui .hand-zone .card:hover:not(.touch-selected):not(.drag-armed):not(.dragging),.touch-ui .hand-zone .card:focus:not(.touch-selected):not(.drag-armed):not(.dragging) { transform:none; box-shadow:0 2px 5px #25382f24; }
.touch-ui .hand-zone .card.touch-selected { position:relative; z-index:30; transform:scale(1.45)!important; box-shadow:0 12px 28px #24382f45!important; }

.player-mat { width:250px; height:258px; display:flex; flex-direction:column; }
.player-mat .play-area { order:1; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:50px 158px; gap:6px; width:100%; height:214px; min-height:214px; padding:0; }
.player-mat .wealth { order:2; flex:0 0 18px; margin:3px 0 2px 3px; }
.player-mat .player-line { order:3; flex:0 0 23px; margin:0 0 0 3px; }
.bank-pile { grid-column:1; grid-row:1; display:flex; flex-wrap:nowrap; align-self:start; width:65px; min-height:50px; margin:0; padding:1px; }
.bank-pile,.property-group { direction:ltr; flex-direction:row; justify-content:flex-start; }
.bank-pile .played-card,.property-group .played-card { position:relative; z-index:1; }
.bank-pile .played-card:nth-child(2),.property-group .played-card:nth-child(2) { z-index:2; }
.bank-pile .played-card:nth-child(3),.property-group .played-card:nth-child(3) { z-index:3; }
.bank-pile .played-card:nth-child(4),.property-group .played-card:nth-child(4) { z-index:4; }
.bank-pile .played-card:nth-child(5),.property-group .played-card:nth-child(5) { z-index:5; }
.bank-pile .played-card:nth-child(6),.property-group .played-card:nth-child(6) { z-index:6; }
.bank-pile .played-card:nth-child(7),.property-group .played-card:nth-child(7) { z-index:7; }
.bank-pile .played-card:nth-child(8),.property-group .played-card:nth-child(8) { z-index:8; }
.bank-pile .played-card:nth-child(9),.property-group .played-card:nth-child(9) { z-index:9; }
.bank-pile .played-card:nth-child(n+10),.property-group .played-card:nth-child(n+10) { z-index:10; }
.bank-pile .played-card:hover,.property-group .played-card:hover { z-index:100; }
.bank-pile .played-card + .played-card { margin-left:-29px; }
.bank-pile .played-card:nth-child(n+7) { margin-left:-34px; }
.bank-pile .played-card:not(:last-child) > * { visibility:hidden; }
.bank-pile .played-card:not(:last-child):hover > * { visibility:visible; }
.properties,.properties.dense-properties { grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,52px); align-items:start; gap:2px; width:100%; height:158px; }
.property-group,.dense-properties .property-group { display:flex; gap:0; min-width:0; min-height:52px; height:52px; padding:1px; }
.bank-pile .played-card,.property-group .played-card,.dense-properties .played-card { width:34px; height:50px; flex-basis:34px; padding:2px; border-width:3px; }
.property-group .played-card + .played-card,.dense-properties .property-group .played-card + .played-card { margin-left:-29px; }
.property-group .played-card:not(:last-child) > * { visibility:hidden; }
.property-group .played-card:not(:last-child):hover > * { visibility:visible; }
.property-group .played-card:hover,.bank-pile .played-card:hover { margin-right:0; }
.player-mat .played-card .value { font-size:.33rem; }
.player-mat .played-card .kind { font-size:.23rem; }
.player-mat .played-card strong { font-size:.32rem; }
.player-mat .played-card small { display:none; }
.player-mat .played-card .rent-guide { display:none; }
.player-mat .played-card:hover .rent-guide { display:flex; }
.player-mat .property-group .played-card:hover,.player-mat .bank-pile .played-card:hover,.dense-properties .property-group .played-card:hover { margin-right:0; transform:translateY(-8px) scale(2.8); }
.player-mat .played-card:hover { transform:none!important; }
.table-card-preview {
  position:fixed!important;
  z-index:10000!important;
  width:116px!important;
  height:164px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transition:none!important;
  pointer-events:none!important;
  box-shadow:0 16px 34px #263b325c!important;
}

@media(max-width:760px){.player-mat{width:250px}.bank-pile{min-height:50px}.bank-pile .played-card + .played-card{margin-left:-29px}.property-group{min-height:52px}.property-group .played-card + .played-card{margin-left:-29px}.property-group .played-card:hover,.bank-pile .played-card:hover{margin-right:0}}
@media(max-width:760px){.table-card-preview{width:102px!important;height:142px!important}}

.lan-toggle { display:flex!important; flex-direction:row!important; align-items:flex-start; gap:11px; padding:13px; background:#f2f6f4; border:1px solid #d3dfda; border-radius:10px; }
.lan-toggle input { width:18px; height:18px; margin-top:2px; accent-color:#2f7766; }
.lan-toggle span { display:flex; flex-direction:column; gap:3px; }
.lan-toggle strong { color:#30483e; font-size:.82rem; }.lan-toggle small { color:#778a82; font-size:.68rem; line-height:1.35; }
.join-room-copy { color:#63776e; }.join-room-copy b { color:#2f7766; font-size:1.35rem; letter-spacing:.16em; }
.setup-card input[type="text"] { width:100%; margin-top:8px; padding:12px 13px; color:#263a32; background:#f7faf8; border:1px solid #cbd9d3; border-radius:8px; font:600 .9rem 'Inter'; }
#join-room-input { text-transform:uppercase; letter-spacing:.2em; font-size:1.05rem; }
.room-badge { display:flex; align-items:center; gap:7px; padding:6px 10px; color:#5f776d; background:#edf4f1; border-radius:8px; font-size:.62rem; }
.room-badge b { color:#2f7766; font-size:.8rem; letter-spacing:.12em; }
.connection-status { width:7px; height:7px; flex:0 0 7px; border:1px solid #fff; border-radius:50%; background:#63a985; box-shadow:0 0 0 2px #63a98526; }
.connection-status.offline { border-color:#9caaa4; background:transparent; box-shadow:none; }
.player-mat.active .connection-status { border-color:#d9eee6; background:#a7dcc5; }
.player-mat.active .connection-status.offline { border-color:#d5ddd9; background:transparent; }
.lan-waiting { display:grid; place-items:center; min-height:70vh; color:#587067; text-align:center; }
.lobby-card { gap:20px; }
.lobby-card .setup-title strong b { color:#2f7766; letter-spacing:.12em; }
.lobby-link { align-self:flex-start; padding:9px 12px; color:#2f7766; background:#edf5f1; border:1px solid #cbded6; border-radius:8px; font-weight:700; }
.lobby-players { display:grid; gap:8px; }
.lobby-player { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; background:#f4f8f6; border:1px solid #d7e3de; border-radius:9px; }
.lobby-player strong { color:#314b41; }.lobby-player span { color:#8a9a94; font-size:.72rem; }
.lobby-name-input { min-width:0; width:min(190px,65%); padding:7px 9px; color:#314b41; background:#fff; border:1px solid #b9cec5; border-radius:7px; font:700 .82rem 'Inter'; }
.lobby-name-input:focus { outline:2px solid #7fb19b; outline-offset:1px; }
.lobby-player.ready { background:#e4f2ec; border-color:#a8cbbb; }.lobby-player.ready span { color:#2f7766; font-weight:800; }
.lan-mode .hand-zone .card[data-disabled="true"] { opacity:1; filter:none; }

.movable-wild { position:relative; cursor:pointer; outline:2px dashed #fff; outline-offset:-9px; }
.movable-wild::after { content:"↔"; position:absolute; right:4px; bottom:3px; padding:1px 3px; color:#17342a; background:#fff; border-radius:4px; font-size:.48rem; font-weight:700; }

/* The pile layers recede on the table's real Z axis. This keeps their apparent
   thickness aligned with the current camera instead of faking it with a
   screen-direction box shadow. */
.table-center .deck-3d,.discard-stack { width:34px; height:50px; flex:0 0 34px; }
.card-stack { position:relative; --stack-depth:0px; transform-style:preserve-3d; }
.table-center .deck-3d,.discard-stack { border-radius:5px; box-shadow:none; }
.stack-layer { position:absolute; inset:0; display:block; border:3px solid #fff; border-radius:inherit; background:#dce6e1; transform:translateZ(var(--layer-z)); pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.stack-layer:first-child { box-shadow:0 4px 9px #25382f42; }
.table-center .deck-3d { border:0; transform:none; background:transparent; }
.table-center .deck-3d::before { content:none; }
.stack-face { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:#2f7766; border:3px solid #fff; border-radius:inherit; font:700 .7rem 'Inter',sans-serif; transform:translateZ(var(--stack-depth)); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.card-back-logo { display:block; width:58%; height:58%; object-fit:contain; pointer-events:none; }
.deck-3d.draw-ready { cursor:pointer; }
.deck-3d.draw-ready .stack-face { outline:4px solid #f0c75e; outline-offset:4px; box-shadow:0 0 0 8px #f0c75e35; }
.deck-3d.draw-ready:focus-visible { outline:none; }
.draw-prompt { text-align:center; }
.draw-prompt-kicker { display:block; margin-bottom:8px; color:#2f7766; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.draw-prompt .primary { width:100%; margin-top:18px; justify-content:center; gap:14px; }
.draw-prompt > small { display:block; margin-top:11px; color:#7c8f87; font-size:.7rem; }
.discard-stack .discard-card { position:relative; width:34px; height:50px; flex-basis:34px; margin:0; padding:2px; border-width:3px; transform:translateZ(var(--stack-depth)); }
.discard-stack .discard-card .value { font-size:.33rem; }
.discard-stack .discard-card .kind { font-size:.23rem; }
.discard-stack .discard-card strong { font-size:.32rem; }
.discard-stack .discard-card small,.discard-stack .discard-card .rent-guide { display:none; }
@media (hover:hover) { .discard-stack .discard-card:hover { z-index:100; transform:translateZ(calc(var(--stack-depth) + 20px)) translateY(-12px) scale(2.15); box-shadow:0 12px 26px #20372d4a; } }
.discard-stack .discard-card:hover { transform:translateZ(var(--stack-depth))!important; }
@media(max-width:760px){.table-center .deck-3d,.discard-stack{width:34px;height:50px;flex-basis:34px}.stack-layer,.stack-face{border-width:3px}}

.zoomable-stat { position:relative; z-index:3; cursor:zoom-in; transform-origin:center; transition:transform .16s ease,box-shadow .16s ease; }
.zoomable-stat:hover,.zoomable-stat:focus { z-index:250; outline:0; transform:scale(1.65); box-shadow:0 8px 20px #1c31284d; }
.player-line.zoomable-stat:hover,.player-line.zoomable-stat:focus { transform:scale(1.48); }
@media (hover:none) and (pointer:coarse) {
  .zoomable-stat:hover,.zoomable-stat:focus { transform:scale(1.35); }
  .player-line.zoomable-stat:hover,.player-line.zoomable-stat:focus { transform:scale(1.28); }
}

#turn-alert { max-width:390px; }
.turn-alert-inner { padding:34px 30px 30px; text-align:center; }
.turn-alert-kicker { display:block; margin-bottom:12px; color:#2f7766; font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.turn-alert-inner h2 { margin:0 0 10px; color:#20352c; font-size:1.8rem; }
.turn-alert-inner p { margin:0 0 24px; color:#70827a; font-size:.88rem; line-height:1.5; }
.turn-alert-inner p strong { color:#2f7766; }
.turn-alert-inner .primary { width:100%; justify-content:center; gap:18px; }

.countered-action { text-align:center; }
.countered-badge { display:inline-block; margin-bottom:14px; padding:7px 11px; color:#fff; background:#d95752; border-radius:999px; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.countered-action h2 { margin-bottom:10px; color:#8f302d; }
.countered-action p { margin:0 0 24px; }
.countered-action .primary { width:100%; justify-content:center; gap:18px; }

/* Coordinated phone-landscape layout. The game area is much shorter after
   rotation, so every table element must use the available height as its scale. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse) {
  .game-header { flex:0 0 58px; height:58px; gap:8px; padding:6px 10px; }
  .mini-logo { width:38px; height:38px; font-size:.78rem; }
  .turn-copy span { font-size:.48rem; }
  .turn-copy strong { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
  .camera-hint { display:none; }
  .turn-stats { gap:4px; }
  .turn-stats span { display:inline-flex; align-items:center; gap:3px; padding:5px 7px; font-size:.56rem; }
  .turn-stats b { font-size:.72rem; }
  .icon-button { width:32px; height:32px; }
  .room-badge { padding:4px 6px; font-size:.5rem; }

  .table { min-height:0; }
  .table-world { width:min(82vw,calc(100vh - 64px),560px); }
  .player-mat { --seat-scale:.62; width:170px; min-height:0; }
  .player-line { max-width:160px; gap:5px; margin-bottom:3px; padding:3px 5px; }
  .player-line strong { max-width:150px; overflow:hidden; text-overflow:ellipsis; font-size:.68rem; }
  .player-line span { display:none; }
  .wealth { gap:3px; margin-bottom:3px; }
  .bank,.sets { padding:2px 4px; font-size:.5rem; }
  .play-area { min-height:58px; }
  .bank-pile { min-height:54px; margin-bottom:3px; }
  .properties { gap:2px; }
  .property-group,.dense-properties .property-group { min-height:58px; padding:1px; }
  .played-card,.dense-properties .played-card { width:40px; height:56px; flex-basis:40px; padding:3px; border-width:3px; }
  .table-center .deck-3d,.discard-stack { width:34px; height:50px; flex-basis:34px; }
  .table-center .deck-3d { border-width:3px; }
  .bank-pile .played-card + .played-card,.property-group .played-card + .played-card,.dense-properties .property-group .played-card + .played-card { margin-left:-32px; }
  .played-card small,.played-card .rent-guide { display:none; }
  .played-card .value { font-size:.36rem; }
  .played-card .kind { font-size:.27rem; }
  .played-card strong { font-size:.34rem; }
  .property-group .played-card:hover,.bank-pile .played-card:hover,.dense-properties .property-group .played-card:hover { margin-right:0; }
  .table-center { gap:18px; transform:translate(-50%,-50%) translateZ(32px) scale(.62); }

  .hand-zone { top:64px; bottom:6px; left:6px; width:126px; padding:5px; }
  .hand-zone .hand { gap:9px; padding:4px 6px 8px; }
  .hand-zone .card { width:86px; height:122px; flex-basis:122px; padding:6px; border-width:4px; }
  .hand-zone .end-turn { width:112px; margin-top:5px; padding:8px 7px; font-size:.68rem; }
}

@media (orientation:landscape) and (max-height:430px) and (pointer:coarse) {
  .table-world { width:min(80vw,calc(100vh - 60px)); }
  .player-mat { --seat-scale:.56; }
  .table-center { transform:translate(-50%,-50%) translateZ(32px) scale(.56); }
}

@media (max-width:760px) and (pointer:coarse) {
  .game-header { gap:5px; padding-left:8px; padding-right:8px; }
  .mini-logo { width:36px; height:36px; flex:0 0 36px; font-size:.72rem; }
  .turn-copy strong { display:block; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
  .turn-copy span { font-size:.44rem; }
  .turn-stats { gap:3px; }
  .turn-stats span,.turn-stats span:first-child { display:inline-flex; align-items:center; gap:2px; padding:4px 5px; font-size:.48rem; }
  .turn-stats b { font-size:.66rem; }
  .icon-button { width:30px; height:30px; flex:0 0 30px; }
  .room-badge { gap:2px; padding:3px 4px; }
  .room-badge span { display:none; }
  .room-badge b { font-size:.58rem; }
}

/* Keep game totals independent of crowded mobile header content. */
@media (max-width:760px), (orientation:landscape) and (max-height:600px) {
  .game-header .turn-stats {
    position:absolute;
    z-index:40;
    top:78px;
    right:8px;
    margin:0;
    display:flex!important;
    gap:5px;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:none;
  }
  .game-header .turn-stats span,
  .game-header .turn-stats span:first-child {
    display:inline-flex!important;
    align-items:center;
    gap:3px;
    padding:6px 8px;
    color:#52675e;
    background:#fffffff2;
    border:1px solid #cbd9d3;
    border-radius:9px;
    box-shadow:0 4px 12px #263b3224;
    font-size:.58rem;
    white-space:nowrap;
  }
  .game-header .turn-stats b { color:#2f7766; font-size:.78rem; }
}

@media (orientation:landscape) and (max-height:600px) {
  .game-header .turn-stats { top:64px; right:6px; }
  .game-header .turn-stats span,
  .game-header .turn-stats span:first-child { padding:4px 6px; font-size:.5rem; }
  .game-header .turn-stats b { font-size:.68rem; }
}

/* Keep the entire game interface inside the usable phone viewport. Dynamic
   viewport units account for mobile browser bars and orientation changes. */
@media (max-width:760px), (orientation:landscape) and (max-height:600px) {
  .game-shell:not(.hidden) {
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .game-header { flex:0 0 auto; }
  .table {
    flex:1 1 0;
    min-height:0;
    height:auto;
  }
  .hand-zone { max-height:calc(100dvh - 92px); }
  #modal[open] { max-height:min(48dvh,calc(100dvh - 20px)); }
  #turn-alert[open] { max-height:calc(100dvh - 20px); overflow:auto; }
  .toast { max-width:calc(100vw - 20px); }
}

@supports not (height:100dvh) {
  @media (max-width:760px), (orientation:landscape) and (max-height:600px) {
    .game-shell:not(.hidden) { height:100vh; }
    .hand-zone { max-height:calc(100vh - 92px); }
  }
}

/* Lock the document whenever a game is active. This also covers tablets that
   identify as desktop-class devices, including iPad Safari in landscape. */
html.game-active,body.game-active {
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body.game-active {
  position:fixed;
  inset:0;
  height:100dvh;
}
body.game-active #app,body.game-active .game-shell:not(.hidden) {
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}
body.game-active .game-shell:not(.hidden) { position:fixed; inset:0; }
body.game-active .table { flex:1 1 0; min-height:0; }
body.game-active .hand-zone .hand {
  touch-action:pan-y;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.game-active #modal[open],body.game-active #turn-alert[open] {
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* Give touch devices more visible table area while preserving the vertical
   hand scroller, card selection preview, and drag target behavior. */
@media (pointer:coarse) and (max-width:1024px) {
  .hand-zone {
    left:6px;
    width:124px;
    padding:5px;
  }
  .hand-zone .hand {
    gap:10px;
    padding:4px 5px 9px;
  }
  .hand-zone .card {
    width:88px;
    height:126px;
    flex-basis:126px;
    padding:6px;
  }
  .hand-zone .end-turn {
    width:108px;
    padding:9px 7px;
  }
}

@media (orientation:landscape) and (max-height:600px) and (pointer:coarse) {
  .hand-zone { width:108px; }
  .hand-zone .hand { gap:8px; padding-inline:4px; }
  .hand-zone .card {
    width:76px;
    height:108px;
    flex-basis:108px;
    padding:5px;
  }
  .hand-zone .end-turn { width:94px; padding:7px 6px; }
}

/* Restrained lighting pass: one soft source from the upper left and a small,
   consistent elevation scale keep the flat table easy to read. */
.table {
  background-color:#e8eeeb;
  background-image:radial-gradient(circle at 34% 22%,#f7faf8 0,transparent 48%);
}
.board-surface {
  background-color:#d7e5df;
  background-image:
    radial-gradient(circle at 31% 23%,#ffffff4d 0,transparent 43%),
    radial-gradient(circle at center,transparent 0 95%,#9eb6ac 95.2% 96%,#bdcec7 96.2% 100%);
  box-shadow:
    inset 0 1px 0 #ffffff9c,
    inset 0 -14px 26px #496a5d0d,
    0 9px 18px #263b3217,
    0 28px 52px #263b3224;
}
.game-header { box-shadow:0 3px 14px #263b320c; }
.player-line { box-shadow:0 2px 5px #263b3217; }
.player-mat.active .player-line { box-shadow:0 3px 8px #214b3e24; }
.bank,.sets { box-shadow:0 1px 3px #263b3214; }
.player-mat .played-card {
  box-shadow:0 2px 4px #24382f2b,0 1px 0 #ffffffa8 inset;
}
.player-mat .played-card:last-child {
  box-shadow:0 3px 7px #24382f38,0 1px 0 #ffffffb8 inset;
}
.hand-zone .card {
  box-shadow:0 3px 8px #24382f24,0 1px 0 #ffffffb8 inset;
}
.hand-zone .card:hover,.hand-zone .card:focus-visible {
  box-shadow:0 13px 26px #24382f3d,0 1px 0 #ffffffb8 inset;
}
.stack-layer:first-child { box-shadow:0 5px 10px #25382f38; }
.stack-face,.discard-stack .discard-card {
  box-shadow:0 3px 7px #25382f32,0 1px 0 #ffffff80 inset;
}
.end-turn { box-shadow:0 3px 8px #23483d29; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.end-turn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 13px #23483d32; }
.activity-feed,.undo-bar { box-shadow:0 10px 26px #263b3224; }

.card-motion {
  position:fixed;
  z-index:9998;
  margin:0;
  pointer-events:none;
  transform-origin:center;
  filter:drop-shadow(0 10px 12px #23372f45);
  will-change:left,top,width,height,transform,opacity;
}
.card-motion > .card,
.card-motion > .motion-card-back {
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  border-radius:8px;
}
.card-motion > .card {
  display:flex;
  flex-basis:auto;
  padding:6px;
  overflow:hidden;
}
.card-motion > .motion-card-back {
  display:grid;
  place-items:center;
  border:5px solid #fff;
  background:#2f7766;
}
.motion-card-back img { width:48%; height:auto; }
.card-motion-payment { filter:drop-shadow(0 10px 13px #b58b3d55); }
.card-motion-steal { filter:drop-shadow(0 10px 13px #6d5f9b55); }

@media (prefers-reduced-motion:reduce) {
  .card-motion { display:none; }
}

@supports not (height:100dvh) {
  body.game-active { height:100vh; }
}