:root{color-scheme:dark;--bg:#0b2429;--panel:#123238;--panel-deep:#102b31;--line:#ffffff14;--text:#f2eddf;--muted:#95adae;--gold:#eabe79;--green:#b9d9a0;--danger:#f2a397;--font:'Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 35%,#20545555,transparent 50%),radial-gradient(ellipse at 100% 0,#3c5d4725,transparent 50%),var(--bg);color:var(--text);font:14px/1.5 var(--font);min-height:100vh}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.38}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{border:0}input,select{width:100%;background:#081f24;color:var(--text);border:1px solid #456063;border-radius:9px;padding:14px 15px;outline:none}input:focus,select:focus{border-color:var(--gold)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(46px,4.1vw,66px);line-height:1.1;font-weight:400;letter-spacing:-2px}h1 em{font-weight:400;color:var(--gold)}h2{font-weight:550;font-size:23px;letter-spacing:-.6px}h3{font-weight:550;font-size:13px}small{color:var(--muted)}.eyebrow{font-size:9px;font-weight:650;letter-spacing:2px;color:var(--muted);line-height:1.7}.site-header{height:93px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4.5%;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:27px;letter-spacing:3px}.brand small{display:block;font:8px var(--font);letter-spacing:2px;color:var(--muted);margin-top:0}.brand-hex{background:var(--gold);color:#123638;clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);width:45px;height:49px;display:grid;place-items:center;font-size:28px;padding-left:3px}.header-actions{display:flex;gap:22px;align-items:center}.quiet-button,.icon-button{background:transparent;font-size:12px;padding:8px 0;color:var(--muted)}.quiet-button:hover,.icon-button:hover{color:var(--text)}.quiet-button span{margin-left:10px}.icon-button{border:1px solid #ffffff1c;padding:7px 12px;border-radius:7px}.icon-button span{margin-left:4px}.hq-link{font-size:10px;letter-spacing:2px;border-left:1px solid var(--line);padding-left:22px;color:var(--gold)}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c4dcb5;box-shadow:0 0 10px #c4dcb570;margin-right:6px}.connection{font-size:10px;color:var(--green)}.connection.offline{color:var(--danger)}.welcome{width:min(1320px,91%);margin:auto}.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(350px,1fr);gap:9%;align-items:center;padding:56px 0 46px}.hero-copy>.eyebrow{color:var(--green);margin-bottom:23px}.hero-description{font-size:14px;line-height:1.9;color:var(--muted);margin:25px 0}.hero-tags{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:#c7d1c5}.hero-tags span+span:before{content:'·';margin-right:14px;color:var(--gold)}.hero-board{height:320px;margin:22px -18px 4px;position:relative;filter:drop-shadow(0 28px 16px #0004)}.hero-board svg{width:100%;height:100%}.board-caption{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1.5px;color:#738f8f}.board-caption span+span{letter-spacing:.3px}.entry-panel{background:linear-gradient(145deg,#1b3a3d,#112c33);border:1px solid #55727355;border-radius:17px;box-shadow:0 24px 70px #0003;padding:33px}.entry-heading{display:flex;gap:17px;align-items:center;margin-bottom:30px}.entry-heading h2{font-family:Georgia,serif;font-size:34px;font-weight:400;margin-top:5px}.tiny-hex{font-size:48px;color:var(--gold);line-height:1}.field-label{display:block;font-size:9px;font-weight:650;letter-spacing:1.5px;margin:21px 0 10px;color:#b1c2bd}.entry-tabs{display:flex;background:#092429;border-radius:8px;margin-top:24px;padding:4px}.entry-tabs button{flex:1;padding:10px;background:transparent;color:var(--muted);font-size:12px;border-radius:5px}.entry-tabs .selected{background:#285056;color:var(--text);box-shadow:0 2px 4px #0003}.field-note{font-size:11px;color:var(--muted);line-height:1.8;margin:12px 0 22px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 19px;border-radius:8px;font-size:12px;font-weight:650;transition:filter .15s,transform .15s}.button:hover:not(:disabled){filter:brightness(1.09);transform:translateY(-1px)}.button.primary{background:var(--gold);color:#153335;box-shadow:0 5px 18px #0002}.button.secondary{background:#23434a;color:#dae0d6;border:1px solid #476166}.button.full{width:100%;justify-content:space-between}.button.small{font-size:11px;padding:9px 13px}.entry-footnote{text-align:center;font-size:10px;color:#88a1a1;margin-top:17px;line-height:1.7}.code-input{text-transform:uppercase;letter-spacing:5px;font-weight:700}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}.feature-strip>div{display:flex;gap:15px}.feature-number{font:italic 20px Georgia,serif;color:#749591}.feature-strip strong{display:block;font-weight:550;font-size:12px}.feature-strip p>span{font-size:10px;color:var(--muted);display:block;margin-top:6px}.welcome-footer{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#6e8c8d;padding:25px 0}.resume-box{border:1px solid #eabe7940;padding:12px;border-radius:8px;background:#eabe7908;margin-bottom:15px;font-size:12px}.resume-box p{margin-bottom:10px}.room{width:min(1660px,94%);margin:auto}.room-toolbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:15px}.room-toolbar>div:first-child{display:flex;align-items:center;gap:13px}.invite-code{background:none;font-weight:700;font-size:20px;letter-spacing:3px}.invite-code small{font-size:17px;letter-spacing:0}.toolbar-actions{display:flex;align-items:center;gap:20px}.mode-badge{font-size:10px;color:#b5c3b7;border:1px solid #617d6c55;border-radius:30px;padding:6px 12px}.waiting-room{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;max-width:1120px;margin:25px auto 80px}.waiting-art h1{margin-top:20px;font-size:64px}.waiting-board{height:360px;margin-top:25px}.waiting-board svg{width:100%;height:100%}.waiting-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px}.waiting-panel h2{margin:7px 0 23px;font-family:Georgia,serif;font-size:27px}.waiting-panel h2>span{font:12px var(--font);color:var(--muted);float:right;padding-top:9px}.lobby-players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}.lobby-player{display:flex;align-items:center;gap:10px;padding:10px;background:#ffffff06;border:1px solid var(--line);border-radius:8px;min-width:0}.avatar{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;background:color-mix(in srgb,var(--player) 22%,#10262c);border:1px solid var(--player);color:var(--player);border-radius:50%;font-weight:650;font-size:11px}.lobby-player strong{font-size:12px;font-weight:550;display:block;overflow-wrap:anywhere}.lobby-player small{display:block;font-size:9px}.remove-bot{margin-left:auto;background:transparent;color:var(--muted);font-size:19px;padding:2px 5px}.empty-seat{color:#6d8c8e;font-size:10px;border:1px dashed #456367;padding:14px 10px;border-radius:8px}#host-controls .button+.button{margin-top:12px}.danger{color:var(--danger)}.game-layout{display:grid;grid-template-columns:200px minmax(0,1fr) 255px;gap:18px;align-items:start;margin-bottom:35px}.players-panel,.action-panel{background:#12303890;border:1px solid var(--line);border-radius:12px;padding:17px 14px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-heading h2{font-size:14px;letter-spacing:0;font-weight:600}.panel-heading>span{font-size:9px;color:var(--muted)}.player-row{position:relative;margin-bottom:8px;padding:10px;border:1px solid transparent;border-radius:8px;background:#ffffff04}.player-row.active{border-color:color-mix(in srgb,var(--player) 45%,transparent);background:color-mix(in srgb,var(--player) 8%,#123038)}.player-top{display:flex;gap:8px;align-items:center}.player-name{font-size:11px;overflow-wrap:anywhere;flex:1;min-width:0}.player-name small{font-size:8px;display:block;color:#779596}.player-score{font:23px Georgia,serif;color:var(--player)}.player-score small{font:9px var(--font);color:var(--muted)}.score-track{height:3px;overflow:hidden;margin-top:9px;border-radius:2px;background:#ffffff0c}.score-track>span{display:block;height:100%;background:var(--player)}.player-stats{display:flex;justify-content:space-between;color:#9cb2af;font-size:9px;margin-top:8px}.honors{border-top:1px solid var(--line);padding-top:15px;margin-top:17px;display:grid;gap:14px;font-size:11px}.honors strong{display:block;font-size:10px;font-weight:550;color:var(--gold);margin-bottom:3px}.honors small{font-size:9px}.bank-box{border-top:1px solid var(--line);padding-top:17px;margin-top:17px}.bank-box>div{display:flex;justify-content:space-between;margin:12px 0}.bank-item{display:grid;gap:3px;justify-items:center;font-size:10px}.bank-item svg{width:17px;height:17px}.bank-box>small{font-size:9px}.island-panel{min-width:0}.board-topline{display:flex;justify-content:space-between;gap:14px;padding:7px 12px 11px}.board-topline h2{font:25px Georgia,serif;margin-top:4px;letter-spacing:0}.dice{display:flex;gap:7px;align-items:center}.die{width:37px;height:37px;background:#f1e5c6;border:1px solid #fff7;border-radius:8px;color:#25434a;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:7px;box-shadow:0 4px 0 #aa926b50}.die i{width:5px;height:5px;border-radius:50%;background:currentColor;align-self:center;justify-self:center}.dice small{font-size:12px;color:var(--gold);margin-left:5px}.board-viewport{position:relative;height:clamp(355px,36vw,610px);border-radius:13px;border:1px solid #335259;background:radial-gradient(ellipse at 50% 50%,#3d696930,#12343d20 60%),repeating-radial-gradient(ellipse at 50% 50%,transparent 0 46px,#557a7915 47px 48px,transparent 49px 75px);overflow:auto;scrollbar-width:thin;scrollbar-color:#496c6e transparent}.board{width:100%;height:100%;min-width:100%;min-height:100%;transition:width .15s,height .15s}.board>svg{width:100%;height:100%;display:block}.board-tools{position:sticky;bottom:11px;display:flex;gap:5px;justify-content:flex-end;padding-right:11px;height:0;transform:translateY(-34px);pointer-events:none}.board-tools button{pointer-events:auto;background:#123239f0;font-size:17px;line-height:20px;width:34px;height:34px;padding:5px}.tile-info{text-align:center;font-size:10px;color:var(--muted);min-height:34px;padding:8px 4px}.terrain-legend{display:flex;justify-content:center;gap:16px;color:#aac0b6;font-size:9px;margin:2px 0 16px;flex-wrap:wrap}.terrain-legend span{display:flex;align-items:center;gap:5px}.terrain-legend svg{width:14px;height:14px}.hand-panel{background:#12323990;border:1px solid var(--line);border-radius:12px;padding:17px}.hand-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:13px}.hand-heading>span{color:var(--muted);font-size:10px}.resource-hand{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.resource-card{position:relative;background:linear-gradient(145deg,color-mix(in srgb,var(--resource-color) 26%,#203d3b),#142f35);border:1px solid color-mix(in srgb,var(--resource-color) 48%,transparent);border-radius:9px;padding:12px 7px 9px;text-align:center;box-shadow:0 4px 8px #0001}.resource-card svg{width:29px;height:29px;display:block;margin:0 auto 5px}.resource-card strong{font:25px Georgia,serif}.resource-card span{display:block;font-size:8px;letter-spacing:1px;color:#c8d1bc;text-transform:uppercase}.resource-card.empty{opacity:.5}.development-hand{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.dev-card{background:#233847;border:1px solid #6c799355;border-radius:7px;font-size:10px;text-align:left;padding:9px 10px;color:#ded6bc}.dev-card small{display:block;font-size:8px;margin-top:3px}.dev-card.vp{background:#403c28;color:var(--gold);border-color:#a5905844}.no-dev{font-size:10px;color:#779799;line-height:1.8}.action-hint{font-size:12px;line-height:1.8;color:#afc1b8;margin-bottom:18px;min-height:45px}.phase-controls .button{margin-bottom:9px}#phase-controls>.button{width:100%;margin-bottom:9px}.build-controls{display:grid;gap:7px;margin-top:10px}.build-button{display:flex;align-items:center;justify-content:space-between;padding:10px;background:#ffffff05;border:1px solid #ffffff16;border-radius:7px;text-align:left;font-size:11px}.build-button.selected{border-color:var(--gold);background:#eabe7910}.build-button small{font-size:9px;color:#94afa6}.build-button svg{width:12px;height:12px;vertical-align:middle;margin-left:2px}.trade-controls{display:flex;gap:7px;border-top:1px solid var(--line);padding-top:14px;margin:15px 0}.trade-controls .button{flex:1;padding:9px 6px;font-size:10px}.log-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.log-heading>span{font-size:8px;letter-spacing:1.5px;color:#8aae8e}.activity-log{padding:0;margin:12px 0 0;list-style:none;max-height:300px;overflow:auto;scrollbar-width:thin}.activity-log li{font-size:10px;line-height:1.8;color:#85a3a3;padding:9px 0;border-bottom:1px solid #ffffff08}.activity-log li:first-child{color:#c7d2bf}.offer-box{background:#eabe790b;border:1px solid #eabe7930;padding:12px;border-radius:8px;font-size:11px}.offer-box p{margin-bottom:10px;line-height:1.7}.offer-box .button{margin:4px 4px 0 0;font-size:10px;padding:8px 11px}.victim-button{width:100%;margin:5px 0}.legal-point{cursor:pointer;fill:#f3d48d;stroke:#ffffff;stroke-width:.035;opacity:.92;animation:point-pulse 2s ease-in-out infinite}.legal-point:hover{fill:white}.legal-road{cursor:pointer;stroke:#ffe7a9;stroke-width:.17;stroke-linecap:round;opacity:.7}.legal-road:hover{stroke:white;opacity:1}.tile-hit{cursor:pointer}.robber-target{stroke:#ffebae;stroke-width:.045;fill:#ffe7a91a;cursor:pointer}.robber-target:hover{fill:#ffe7a955}.board text{user-select:none;pointer-events:none}.board-piece{pointer-events:none}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#e8deb9;color:#1a3c3e;padding:13px 23px;border-radius:10px;box-shadow:0 10px 35px #0006;font-size:12px;max-width:90%;z-index:20;text-align:center}.toast.error{background:#f1b9a3;color:#472d25}dialog{position:fixed;width:min(590px,calc(100vw - 30px));border:1px solid #4f706c;border-radius:16px;padding:32px;background:#15353b;color:var(--text);box-shadow:0 30px 80px #0008;max-height:85dvh;overflow:auto}dialog::backdrop{background:#00161bd1;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:16px;top:10px;background:transparent;color:var(--muted);font-size:26px;padding:5px}.modal-heading{font-family:Georgia,serif;font-size:31px;font-weight:400;line-height:1.2;margin:7px 0 15px}.modal-intro{font-size:12px;line-height:1.9;color:#a4bcaf;margin-bottom:23px}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.rules-grid h3{color:var(--gold);font-size:12px;margin-bottom:7px}.rules-grid p{font-size:11px;line-height:1.8;color:#a4bcb2}.rules-note{background:#eabe7910;border:1px solid #eabe7925;border-radius:8px;padding:14px;margin-top:24px;font-size:11px;line-height:1.9;color:#c5cdb4}.rules-note a{text-decoration:underline;color:var(--gold)}.trade-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trade-grid label{font-size:10px;color:var(--muted)}.trade-grid select{margin-top:8px}.count-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:9px;font-size:12px}.count-row>span{display:flex;align-items:center;gap:9px}.count-row svg{width:21px;height:21px}.count-row input{width:90px;padding:8px 12px}.counts-title{font-size:10px;letter-spacing:1.4px;color:var(--gold);margin:20px 0 12px}.modal-submit{margin-top:22px}.winner-banner{background:#eabe7910;padding:16px;border:1px solid #eabe7945;border-radius:9px;text-align:center}.winner-banner h3{font:27px Georgia,serif;color:var(--gold);margin-bottom:10px}.winner-banner p{font-size:12px;color:#c9d5be}.modal-error{font-size:11px;color:var(--danger);margin:12px 0}.dice.rolling .die{animation:dice-roll .3s ease-in-out 2}@keyframes point-pulse{50%{opacity:.5;stroke-width:.07}}@keyframes dice-roll{50%{transform:rotate(20deg) translateY(-5px)}}
@media(min-width:1700px){.game-layout{grid-template-columns:230px minmax(0,1fr) 285px}.board-viewport{height:660px}.hero-board{height:380px}}
@media(max-width:1100px){.hero{gap:5%;grid-template-columns:1.2fr 1fr}.hero-board{height:275px}.entry-panel{padding:26px}.game-layout{grid-template-columns:160px minmax(0,1fr) 220px;gap:12px}.players-panel,.action-panel{padding:14px 10px}.player-stats{font-size:8px}.hero-tags{gap:8px;font-size:9px}.hero-tags span+span:before{margin-right:8px}.board-viewport{height:390px}.terrain-legend{gap:9px}.hand-panel{padding:12px}.resource-card{padding:8px 4px}.resource-card svg{width:24px;height:24px}.board-topline h2{font-size:21px}}
@media(max-width:850px){.site-header{height:79px;padding:0 4%}.header-actions{gap:14px}.hero{gap:4%;padding-top:36px;grid-template-columns:1fr 1fr}h1{font-size:44px}.hero-description{font-size:12px}.hero-board{height:250px;margin-left:-20px;margin-right:-20px}.hero-tags{line-height:1.9}.feature-strip{gap:18px}.feature-strip>div{gap:10px}.feature-strip strong{font-size:11px}.feature-strip p>span{font-size:9px}.waiting-room{gap:5%}.waiting-art h1{font-size:48px}.waiting-panel{padding:23px}.game-layout{grid-template-columns:minmax(0,1fr) 240px}.players-panel{grid-column:1/-1;display:flex;align-items:center;gap:15px;overflow:auto;padding:11px}.players-panel>.panel-heading{margin:0;min-width:65px;display:block}.players-panel>.panel-heading>span{display:block;margin-top:4px}#game-players{display:flex;gap:8px}.player-row{min-width:135px;margin:0;padding:8px}.player-row .avatar{width:24px;height:24px;font-size:9px}.player-score{font-size:19px}.honors{display:none}.bank-box{display:none}.board-viewport{height:420px}.game-layout>.island-panel{grid-column:1}.game-layout>.action-panel{grid-column:2}.toolbar-actions{gap:12px}.lobby-players{grid-template-columns:1fr}}
@media(max-width:640px){.brand{font-size:23px;gap:8px}.brand-hex{width:36px;height:40px;font-size:24px}.brand small{font-size:7px;letter-spacing:1.6px}.header-actions{gap:12px}.icon-button span{display:none}.hq-link{display:none}.quiet-button{font-size:11px}.site-header{height:73px}.header-actions .icon-button{padding:6px 10px}.welcome{width:90%}.hero{display:flex;flex-direction:column;gap:27px;padding-top:33px;padding-bottom:28px}.hero-copy{width:100%;text-align:center}.hero-copy>.eyebrow{font-size:8px;margin-bottom:16px}h1{font-size:43px;letter-spacing:-1.5px}.hero-description{font-size:12px;margin:18px 0 14px}.hero-tags{justify-content:center;font-size:9px}.hero-board{height:240px;margin:12px 0 0}.board-caption{font-size:8px}.entry-panel{width:100%;padding:25px}.entry-heading{margin-bottom:17px}.entry-heading h2{font-size:31px}.field-label{margin-top:18px}.feature-strip{display:grid;grid-template-columns:1fr;padding:23px 0;gap:20px}.feature-strip>div{gap:15px}.feature-strip strong{font-size:12px}.feature-strip p>span{font-size:10px}.welcome-footer{font-size:8px;line-height:1.8}.welcome-footer>span+span{max-width:55%;text-align:right}.connection{position:fixed;bottom:8px;right:10px;background:#123239e0;border-radius:4px;padding:3px 6px;z-index:3;font-size:8px}.room{width:94%}.room-toolbar{padding:17px 0;gap:8px}.room-toolbar>div:first-child{gap:5px}.room-toolbar .eyebrow{display:none}.invite-code{font-size:18px;letter-spacing:2px;padding:0}.mode-badge{display:none}.toolbar-actions{gap:10px}.toolbar-actions .button{padding:8px 11px;font-size:10px}.waiting-room{display:flex;flex-direction:column;gap:24px;margin-top:0}.waiting-art{text-align:center;width:100%}.waiting-art h1{font-size:40px;margin-top:10px}.waiting-art>.eyebrow{font-size:8px}.waiting-board{height:225px;margin-top:12px}.waiting-panel{width:100%;padding:24px}.lobby-players{grid-template-columns:1fr 1fr}.game-layout{display:flex;flex-direction:column;gap:13px}.players-panel{width:100%;flex-shrink:0;padding:9px;gap:10px}.players-panel>.panel-heading{display:none}#game-players{gap:6px}.player-row{min-width:122px}.island-panel{width:100%}.board-topline{padding:1px 4px 11px}.board-topline h2{font-size:22px}.die{width:32px;height:32px;padding:6px;gap:2px}.die i{width:4px;height:4px}.dice small{font-size:10px;margin-left:1px}.board-viewport{height:360px;border-radius:10px}.terrain-legend{font-size:8px;gap:12px;margin-bottom:12px}.terrain-legend svg{width:12px;height:12px}.hand-panel{padding:13px}.resource-hand{gap:6px}.resource-card{padding:8px 3px 7px}.resource-card strong{font-size:23px}.resource-card span{font-size:7px}.hand-heading{margin-bottom:10px}.hand-heading .eyebrow{font-size:8px}.action-panel{width:100%;padding:19px}.action-hint{min-height:0;margin-bottom:14px}.build-controls{grid-template-columns:1fr 1fr}.trade-controls .button{padding:11px;font-size:11px}.activity-log{max-height:200px}.rules-grid{gap:18px;grid-template-columns:1fr}.modal-heading{font-size:28px}dialog{padding:27px 22px}.board-tools{bottom:8px;padding-right:8px}.board-tools .icon-button{width:30px;height:30px}.board-viewport:has(.board.zoomed){height:420px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Cinematic island edition. Original artwork surrounds the live game. */
body{background:#081e24;color:#f5f0df}.site-header{position:relative;z-index:2;background:#0a2229d9;backdrop-filter:blur(16px)}.cinematic-welcome{position:relative;isolation:isolate;width:100%;overflow:hidden}.hero-artwork{position:absolute;inset:0 0 auto;height:850px;z-index:-2;pointer-events:none}.hero-artwork img{width:100%;height:100%;object-fit:cover;object-position:48% 47%;opacity:.75}.hero-artwork:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#051c24e8 0,#071e2680 44%,#061e2733 65%,#071d2570),linear-gradient(0deg,#081e24 0,transparent 43%,#081e2440 100%)}.cinematic-welcome>.hero,.cinematic-welcome>.feature-strip,.cinematic-welcome>.welcome-footer{width:min(1350px,91%);margin-left:auto;margin-right:auto}.cinematic-welcome .hero{min-height:730px;padding:82px 0 85px;align-items:center;grid-template-columns:1.3fr 1fr;gap:9%}.cinematic-welcome .hero-copy{padding-top:10px;align-self:center}.cinematic-welcome h1{font-size:clamp(47px,4.5vw,76px);text-shadow:0 5px 35px #0008}.cinematic-welcome .hero-description{font-size:15px;color:#d0dcce;text-shadow:0 2px 8px #001d2e;line-height:1.9;max-width:420px}.cinematic-welcome .hero-copy>.eyebrow{color:#d4dfb2}.cinematic-welcome .hero-tags{font-size:10px;color:#e1e6ce;text-shadow:0 2px 5px #0008}.hero-motto{display:flex;gap:18px;align-items:center;margin-top:80px;font-size:9px;letter-spacing:3px;color:#ead3a1}.hero-motto i{color:#c5b087;font-style:normal}.cinematic-welcome .entry-panel{background:linear-gradient(135deg,#153b41ed,#0d2933f5);backdrop-filter:blur(18px);border:1px solid #91b6a94d;box-shadow:0 30px 90px #00121980;padding:35px}.cinematic-welcome .feature-strip{position:relative;background:#0b263092;border:1px solid #61857c35;border-radius:13px;padding:25px;backdrop-filter:blur(12px);margin-bottom:12px}.waiting-art{position:relative}.waiting-board{position:relative;border-radius:20px;background:radial-gradient(ellipse,#4d70602b,transparent);filter:drop-shadow(0 17px 15px #0005)}.game-layout{grid-template-columns:205px minmax(0,1fr) 260px;gap:18px}.players-panel,.action-panel,.hand-panel{background:linear-gradient(135deg,#16353bcc,#102c35e0);border-color:#6c8f8028}.board-viewport{height:clamp(440px,40vw,680px);background:#173f4a;border-color:#74968a30;box-shadow:0 20px 55px #0003,inset 0 1px 0 #ffffff13;overflow:hidden}.board-viewport.flat-view{overflow:auto}.board3d{position:absolute;inset:0;z-index:1}.board3d canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.board.sr-board{position:absolute!important;overflow:hidden!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;pointer-events:none!important}.board-scene-label{position:absolute;left:17px;bottom:16px;z-index:3;pointer-events:none}.board-scene-label>span{display:block;font-size:8px;letter-spacing:2px;color:#d3dfcb;text-shadow:0 2px 5px #001d2c}.board-scene-label>small{display:block;font-size:8px;color:#a9c5c4;margin-top:3px;text-shadow:0 2px 5px #001d2c}.board-tools{position:absolute;bottom:16px;right:12px;height:auto;padding:0;transform:none;z-index:4}.board-tools button{background:#0a2836d1;color:#dfe6c8;border-color:#819e823d;backdrop-filter:blur(12px);width:31px;height:31px;font-size:15px}.board-tools button#view-toggle{width:40px;font-size:10px;font-weight:600}.board-viewport:fullscreen{width:100vw;height:100vh;border-radius:0}.board-topline{padding-bottom:17px}.board-topline h2{font-size:26px}.action-panel{box-shadow:0 10px 25px #0001}.player-row{background:#ffffff04}.player-row.active{box-shadow:inset 3px 0 0 var(--player),0 3px 12px #0001}.avatar{background:linear-gradient(145deg,color-mix(in srgb,var(--player) 35%,#20373c),#16333b);box-shadow:inset 0 1px 0 #fff2}.resource-card{min-height:108px;background:linear-gradient(145deg,color-mix(in srgb,var(--resource-color) 32%,#193930),#12313a);border-bottom:3px solid color-mix(in srgb,var(--resource-color) 38%,#183838);overflow:hidden}.resource-card:before{content:'';position:absolute;inset:4px;border:1px solid #eee5c30c;border-radius:5px;pointer-events:none}.resource-card.gained{animation:card-gain .65s ease both}.resource-card .gain-tag{position:absolute;right:7px;top:6px;display:block;background:#e7ca8e;color:#21403a;font:700 9px var(--font);padding:1px 4px;border-radius:4px;letter-spacing:0}.build-button{padding:12px 10px;border:1px solid #819b7630;border-radius:8px;background:linear-gradient(145deg,#25444690,#18393f60);font-size:11px}.build-button:hover:not(:disabled){border-color:#ead39a75}.build-button.selected{border-color:#eac27a;background:#cfa84d18;box-shadow:0 0 15px #eac27a08}.build-button small{display:flex;align-items:center;gap:2px}.build-button svg{width:14px;height:14px;margin:0}.build-button[disabled]{opacity:.48}.button.primary{background:linear-gradient(130deg,#f0d398,#ddb070);border:1px solid #f7dbaa60;box-shadow:0 5px 15px #0003,inset 0 1px 0 #fff4}.button.primary:hover:not(:disabled){filter:brightness(1.12);box-shadow:0 7px 21px #0004}.working .room .button:not(#lounge-button){cursor:wait}.working .board{pointer-events:none}.tile-info{color:#aac0b8}.terrain-legend{color:#c2cdb7}.dice .die{background:linear-gradient(135deg,#fff0d1,#dec59a);box-shadow:0 4px 0 #90735480,0 7px 12px #0003}.honors strong{color:#dccc9a}.hero-artwork img{animation:hero-drift 24s ease-in-out infinite alternate}@keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.04)}}@keyframes card-gain{0%{transform:translateY(12px);filter:brightness(1.6)}100%{transform:translateY(0);filter:brightness(1)}}
@media(max-width:1100px){.cinematic-welcome .hero{min-height:660px;gap:6%;grid-template-columns:1.2fr 1fr;padding-top:62px}.cinematic-welcome h1{font-size:51px}.cinematic-welcome .entry-panel{padding:28px}.game-layout{grid-template-columns:170px minmax(0,1fr) 230px;gap:12px}.board-viewport{height:460px}.board-topline h2{font-size:22px}.board-tools{bottom:12px;right:10px;gap:4px}.board-tools button{width:28px;height:28px}.board-scene-label{left:12px;bottom:48px}.resource-card{min-height:97px}}
@media(max-width:850px){.cinematic-welcome .hero{gap:5%;min-height:625px;grid-template-columns:1fr 1fr}.cinematic-welcome h1{font-size:43px}.cinematic-welcome .hero-description{font-size:12px}.cinematic-welcome .entry-panel{padding:25px}.cinematic-welcome .hero-tags{font-size:8px;gap:7px}.hero-motto{margin-top:50px;font-size:8px;gap:14px}.cinematic-welcome .feature-strip{padding:22px 18px}.game-layout{grid-template-columns:minmax(0,1fr) 230px}.board-viewport{height:460px}.board-topline h2{font-size:22px}.players-panel{background:#17343a}.board-scene-label{bottom:46px}}
@media(max-width:640px){.cinematic-welcome .hero{min-height:unset;display:flex;gap:33px;padding:38px 0 28px}.cinematic-welcome .hero-copy{padding:12px 0 0}.cinematic-welcome h1{font-size:43px;line-height:1.13}.cinematic-welcome .hero-description{font-size:12px;color:#d2decf;margin:20px auto 16px}.cinematic-welcome .hero-tags{font-size:8px;gap:8px}.hero-motto{justify-content:center;margin-top:27px;font-size:8px;gap:18px}.hero-artwork{height:625px}.hero-artwork img{object-position:43% 43%;opacity:.68}.hero-artwork:after{background:linear-gradient(0deg,#081e24 0,#061f2630 72%,#061f2670),linear-gradient(90deg,#051c2466,#051c2444)}.cinematic-welcome .entry-panel{padding:25px;background:#123039f2}.cinematic-welcome .feature-strip{margin-top:10px;padding:23px}.welcome-footer{padding-bottom:35px}.game-layout{display:flex}.board-viewport{height:435px}.board-scene-label{bottom:53px;left:12px}.board-tools{bottom:13px;right:12px;gap:5px}.board-tools button{width:30px;height:30px}.board3d{border-radius:10px}.board-topline h2{font-size:22px}.resource-card{min-height:93px}.resource-card .gain-tag{top:4px;right:4px;font-size:8px}.players-panel{background:#15343acc}.hand-panel{background:#15353dbb}.cinematic-welcome .hero .hero-copy>.eyebrow{font-size:8px}.board-viewport:has(.board.zoomed){height:435px}}
@media(prefers-reduced-motion:reduce){.hero-artwork img,.resource-card.gained{animation:none}}
@media(min-width:851px){#game-players{position:relative;max-height:440px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#668d85 transparent;overscroll-behavior:contain}}
.auto-table-note{display:flex;gap:13px;align-items:center;padding:17px 14px;margin:22px 0;background:#d3c58b08;border:1px solid #c6b77726;border-radius:9px}.auto-table-note>span{font-size:34px;line-height:1;color:var(--gold)}.auto-table-note strong{display:block;font-size:12px;font-weight:550;color:#e4dcc3}.auto-table-note p{font-size:11px;line-height:1.7;color:var(--muted);margin-top:5px}.invite-seat{grid-column:1/-1;text-align:center;color:#adbfaf}
.audio-welcome{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:9px 14px;border:1px solid #f0d39835;border-radius:25px;background:#0d2c32a8;color:#dfd4b2;font-size:11px;box-shadow:0 4px 20px #00151d30}.audio-welcome:hover{background:#254341;border-color:#eabe7970}.audio-on{color:var(--gold);border-color:#eabe7960}.audio-settings{display:grid;gap:12px}.audio-channel{border:1px solid #aac5ab25;border-radius:12px;padding:18px;background:linear-gradient(135deg,#b7c4910b,#071c260b)}.audio-channel-heading{display:flex;gap:13px;align-items:center}.audio-channel-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:40px;color:#e5c48c;font-size:26px}.audio-channel-heading>div{flex:1;min-width:0}.audio-channel h3{font-family:Georgia,serif;font-size:20px;font-weight:400;color:#eadfc4;margin:0 0 5px}.audio-channel p{font-size:10px;color:#a4bcaf;line-height:1.6}.audio-switch{flex-shrink:0;min-width:55px;border-radius:20px;padding:9px 12px;border:1px solid #91ada53d;background:#0d2a31;color:#a8c0b5;font-size:11px;transition:background .15s}.audio-switch[aria-checked=true]{background:#e8c98b;color:#213d37;border-color:#f4deae;box-shadow:0 0 15px #e5bf7520}.audio-volume{display:grid;grid-template-columns:1fr auto;gap:8px;margin:18px 0 0;font-size:10px;color:#b6c7b8}.audio-volume output{color:#e5c48c;font-variant-numeric:tabular-nums}.audio-volume input[type=range]{grid-column:1/-1;width:100%;height:23px;accent-color:#e5c48c;cursor:pointer;background:transparent;border:0;padding:0}.audio-previews{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.audio-previews button{flex:1;min-width:65px;border-radius:7px;padding:10px 6px;border:1px solid #e5c48c30;background:#e5c48c08;color:#d7d1b6;font-size:10px}.audio-previews button:hover{background:#e5c48c20;border-color:#e5c48c70}.audio-previews button:active{transform:translateY(1px)}.audio-footer{display:flex;flex-wrap:wrap;gap:10px}.audio-footer .primary{flex:1}.audio-status{margin:15px 0;min-height:18px}.board-feedback{position:absolute;top:16px;left:50%;transform:translateX(-50%);max-width:85%;padding:10px 18px;border:1px solid #eacb8a65;border-radius:30px;background:#123337e8;box-shadow:0 7px 26px #00181c55,0 0 25px #eacb8a0c;color:#eee0b8;font-size:11px;line-height:1.5;text-align:center;z-index:12;pointer-events:none;animation:feedback-arrive .28s ease both;backdrop-filter:blur(8px)}.dice.rolling .die{animation:dice-tumble .32s ease-in-out infinite}.dice.rolling .die:nth-child(2){animation-delay:.08s}.dice.landed .die{animation:dice-land .65s ease-out both}.dice.landed .die:nth-child(2){animation-delay:.04s}@keyframes dice-tumble{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(22deg) translateY(-6px)}}@keyframes dice-land{0%{transform:scale(1.16) rotate(-8deg);box-shadow:0 0 20px #f5d79980}55%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1) rotate(0)}}@keyframes feedback-arrive{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media(max-width:640px){.audio-welcome{margin-top:15px}.audio-channel{padding:14px}.audio-channel-heading{gap:9px}.audio-channel-icon{width:30px;font-size:23px}.audio-channel h3{font-size:19px}.audio-channel p{font-size:9px}.audio-switch{min-width:49px}.audio-footer .button{font-size:11px;padding:12px 14px}.board-feedback{top:12px;padding:8px 13px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.dice.rolling .die,.dice.landed .die,.board-feedback{animation:none}.audio-switch{transition:none}}

dialog.audio-modal{padding:24px;max-height:calc(100dvh - 28px)}.audio-modal .modal-intro{margin-bottom:18px}.audio-modal .audio-settings{gap:10px}.audio-modal .audio-channel{padding:14px}.audio-modal .audio-volume{margin-top:14px}.audio-modal .audio-status{margin:12px 0}
@media(max-width:640px){dialog.audio-modal{padding:24px 20px}.audio-modal .audio-channel{padding:13px}}

/* Keep the private hand above the live board, with room for every control. */
.game-layout>.players-panel{grid-area:players}
.game-layout>.island-panel{grid-area:island}
.game-layout>.private-hand{grid-area:hand}
.game-layout>.action-panel{grid-area:actions}
.private-hand{position:relative;z-index:16;min-width:0;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:15px 58px;gap:5px 10px;align-content:center;box-shadow:0 5px 18px #0002}
.private-hand .hand-heading{display:contents}
.private-hand .hand-heading>.eyebrow{grid-column:1;grid-row:1;align-self:center;font-size:8px;letter-spacing:1.35px;line-height:1.2}
.private-hand #hand-count{grid-column:1;grid-row:1;justify-self:end;align-self:center;color:#b8c9ba;font-size:9px;line-height:1.2;font-variant-numeric:tabular-nums}
.private-hand .hand-details-button{grid-column:2;grid-row:1 / 3;align-self:stretch;min-height:44px;padding:8px;border:1px solid #bac59045;border-radius:8px;background:linear-gradient(135deg,#3b4b3b,#233c40);color:#e9d6a7;font-size:10px;line-height:1.4;white-space:normal}
.private-hand .hand-details-button:hover,.private-hand .hand-details-button[aria-expanded=true]{background:#46563e;border-color:#eabe7980}
.private-hand .resource-hand{grid-column:1;grid-row:2;min-width:0;gap:6px}
.private-hand .resource-card{min-height:0;height:58px;padding:4px 3px 3px;border-radius:7px;border-bottom-width:2px;box-shadow:0 2px 6px #0001}
.private-hand .resource-card svg{width:19px;height:19px;margin:0 auto 1px}
.private-hand .resource-card strong{display:block;font-size:19px;line-height:1.05;font-variant-numeric:tabular-nums}
.private-hand .resource-card span{font-size:7px;letter-spacing:.55px;line-height:1.25}
.private-hand .resource-card.empty{opacity:.65}
.private-hand .resource-card:before{inset:3px}
.private-hand .resource-card .gain-tag{top:3px;right:3px;padding:1px 3px;font-size:8px;line-height:1.2}
.private-hand .hand-drawer{position:absolute;top:calc(100% + 8px);bottom:auto;left:0;right:0;z-index:17;display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px;margin:0;padding:12px;max-height:50dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b8971 transparent;background:#14353bf7;border:1px solid #a9bf8f55;border-radius:12px;box-shadow:0 10px 38px #00171d80;backdrop-filter:blur(16px)}
.private-hand .hand-drawer .dev-card{min-height:54px;padding:10px 12px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.private-hand .hand-drawer .dev-card small{font-size:9px;margin-top:4px}
.private-hand .hand-drawer .no-dev{grid-column:1/-1;font-size:11px;line-height:1.8;padding:4px}
.private-hand .hand-drawer-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:12px}
.private-hand .hand-drawer-close,.private-hand #hand-drawer-close{grid-column:1/-1;justify-self:end;min-height:44px;min-width:44px;padding:8px 12px;border:1px solid #91ada540;border-radius:7px;background:#25454a;color:#e4dfc9;font-size:11px}
.private-hand #hand-drawer-close{width:44px;height:44px;padding:0;flex-shrink:0;font-size:22px}
.private-hand.is-expanded{border-color:#eabe7970}
.room-notice{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:8px 12px;border:1px solid #a9bf8f38;border-radius:9px;background:#193c43;color:#b8cec1;font-size:11px;line-height:1.6}
.room-notice>span{min-width:0;flex:1}
.room-notice .quiet-button{flex-shrink:0;min-height:44px;padding:8px;color:#e6d4aa;font-size:11px}
.reconnect-notice{border-color:#eabe7950;background:#3b3c2b;color:#ead8b5}
#room-ended-banner{flex:0 0 auto;margin:0 0 10px;padding:10px 14px;border:1px solid #eabe7950;border-radius:9px;background:#eabe7910;color:#e7d6b5;font-size:11px;line-height:1.6}
#table-presence{font-size:10px;color:#a9c2b4}
.room-controls-button,#room-controls{min-height:44px}
#room-alert{display:inline-grid;place-items:center;min-width:18px;min-height:18px;padding:0 4px;border-radius:20px;background:var(--gold);color:#18363b;font-size:9px}

@media(min-width:641px){
 body.in-game{height:100vh;height:100dvh;min-height:0;overflow:hidden}
 body.in-game .site-header{height:60px;padding:0 3%;flex-shrink:0}
 body.in-game .room{width:min(1660px,calc(100% - 28px));height:calc(100vh - 60px);height:calc(100dvh - 60px);display:flex;flex-direction:column;padding-bottom:10px;min-height:0}
 body.in-game .room-toolbar{flex:0 0 auto;min-height:56px;padding:6px 0;gap:12px}
 body.in-game .toolbar-actions{gap:12px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
 body.in-game .game-layout{flex:1;min-height:0;margin:0;display:grid;grid-template-columns:170px minmax(0,1fr) 230px;grid-template-rows:96px minmax(0,1fr);grid-template-areas:'players hand actions' 'players island actions';gap:10px;align-items:stretch}
 body.in-game .game-layout>.players-panel,body.in-game .game-layout>.action-panel{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#668d85 transparent;padding:12px 10px}
 body.in-game #game-players{position:relative;max-height:none;overflow:visible}
 body.in-game .panel-heading{margin-bottom:12px}
 body.in-game .player-row{padding:8px;margin-bottom:7px}
 body.in-game .player-name{font-size:10px}
 body.in-game .honors{gap:10px;padding-top:12px;margin-top:12px}
 body.in-game .bank-box{padding-top:12px;margin-top:12px}
 body.in-game .action-hint{font-size:11px;line-height:1.7;min-height:0;margin-bottom:12px}
 body.in-game .activity-log{max-height:none;overflow:visible}
 body.in-game .island-panel{min-height:0;display:grid;grid-template-rows:54px minmax(0,1fr) 24px 20px;overflow:visible}
 body.in-game .board-topline{min-width:0;padding:4px 8px 7px;gap:10px;align-items:center}
 body.in-game .board-topline>div:first-child{min-width:0}
 body.in-game .board-topline h2{font-size:22px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.in-game .board-topline .eyebrow{font-size:8px;letter-spacing:1.5px}
 body.in-game .dice{gap:5px;flex-shrink:0}
 body.in-game .die{width:31px;height:31px;padding:5px;gap:2px;border-radius:7px}
 body.in-game .die i{width:4px;height:4px}
 body.in-game .dice small{font-size:11px;margin-left:2px}
 body.in-game .board-viewport{height:auto;min-height:210px;min-width:0;align-self:stretch;border-radius:12px}
 body.in-game:has(.room-notice:not([hidden])) .board-viewport{min-height:180px}
 body.in-game .board-viewport:fullscreen{width:100vw;height:100vh;height:100dvh;min-height:0}
 body.in-game .tile-info{min-height:0;padding:4px 3px;font-size:9px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.in-game .terrain-legend{margin:0;gap:9px;font-size:8px;align-items:center;flex-wrap:nowrap}
 body.in-game .terrain-legend svg{width:12px;height:12px}
 body.in-game .terrain-legend span{gap:3px}
 body.in-game .private-hand{align-self:stretch}
 body.in-game.spectating .game-layout{grid-template-rows:minmax(0,1fr);grid-template-areas:'players island actions'}
}
@media(min-width:1101px){
 body.in-game .game-layout{grid-template-columns:180px minmax(0,1fr) 245px;gap:12px}
 body.in-game .island-panel{grid-template-rows:58px minmax(0,1fr) 26px 22px}
 body.in-game .board-topline h2{font-size:25px}
}
@media(min-width:641px) and (max-width:850px){
 body.in-game .site-header{height:54px}
 body.in-game .room{width:calc(100% - 24px);height:calc(100vh - 54px);height:calc(100dvh - 54px);padding-bottom:8px}
 body.in-game .room-toolbar{min-height:50px;padding:3px 0}
 body.in-game .game-layout{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:62px 96px minmax(0,1fr);grid-template-areas:'players players' 'hand actions' 'island actions';gap:8px}
 body.in-game .game-layout>.players-panel{display:flex;align-items:center;gap:10px;padding:6px 9px;overflow:auto}
 body.in-game .players-panel>.panel-heading{min-width:60px;margin:0;display:block}
 body.in-game .players-panel>.panel-heading h2{font-size:12px}
 body.in-game .players-panel>.panel-heading>span{display:block;font-size:8px;margin-top:3px}
 body.in-game #game-players{display:flex;gap:6px;max-height:none;overflow:visible}
 body.in-game .player-row{min-width:130px;margin:0;padding:5px 7px}
 body.in-game .player-row .avatar{width:22px;height:22px;font-size:8px}
 body.in-game .player-name small{font-size:7px}
 body.in-game .player-score{font-size:19px}
 body.in-game .player-stats{font-size:8px;margin-top:3px}
 body.in-game .score-track{display:none}
 body.in-game .honors,body.in-game .bank-box{display:none}
 body.in-game .island-panel{grid-template-rows:48px minmax(0,1fr) 22px 16px}
 body.in-game .board-topline h2{font-size:20px}
 body.in-game .terrain-legend{gap:7px;font-size:7px}
 body.in-game.spectating .game-layout{grid-template-rows:62px minmax(0,1fr);grid-template-areas:'players players' 'island actions'}
}
@media(min-width:641px) and (max-height:650px){
 body.in-game .island-panel{grid-template-rows:48px minmax(0,1fr) 22px}
 body.in-game .terrain-legend{display:none}
 body.in-game .board-scene-label{bottom:57px}
 body.in-game .board-tools button{min-width:36px;min-height:36px}
 body.in-game .board-topline h2{font-size:20px}
}
@media(max-width:640px),(max-height:520px){
 body.in-game{height:auto;min-height:100vh;min-height:100dvh;overflow:auto;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
 body.in-game .site-header{height:58px;padding:0 12px}
 body.in-game .site-header .header-actions{gap:8px}
 body.in-game .site-header .icon-button{min-width:44px;min-height:44px;padding:8px}
 body.in-game .connection{position:static;bottom:auto;right:auto;padding:0;background:transparent;font-size:8px}
 body.in-game .room{display:block;width:calc(100% - 20px);height:auto;min-height:0;padding-bottom:0}
 body.in-game .room-toolbar{min-height:52px;padding:6px 0;align-items:center;gap:8px}
 body.in-game .room-toolbar>div:first-child{gap:7px;min-width:0;flex-shrink:0}
 body.in-game .invite-code{font-size:17px;letter-spacing:2px;min-height:44px;padding:0 3px}
 body.in-game .toolbar-actions{gap:7px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
 body.in-game .toolbar-actions .button{min-height:44px;padding:8px 10px;font-size:10px}
 body.in-game .toolbar-actions .quiet-button{min-height:44px;padding:8px;font-size:10px}
 body.in-game .mode-badge{font-size:8px;padding:4px 7px}
 body.in-game #table-presence{font-size:8px}
 body.in-game .game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 96px auto auto;grid-template-areas:'players' 'hand' 'island' 'actions';gap:10px;margin:0;min-height:0}
 body.in-game .game-layout>.players-panel{display:flex;align-items:center;gap:9px;padding:7px 8px;max-height:68px;overflow:auto;min-height:0}
 body.in-game .players-panel>.panel-heading{display:block;min-width:57px;margin:0}
 body.in-game .players-panel>.panel-heading h2{font-size:11px}
 body.in-game .players-panel>.panel-heading>span{display:block;font-size:8px;margin-top:4px}
 body.in-game #game-players{position:relative;display:flex;gap:6px;max-height:none;overflow:visible}
 body.in-game .player-row{min-width:126px;margin:0;padding:5px 7px}
 body.in-game .player-top{gap:5px}
 body.in-game .player-row .avatar{width:22px;height:22px;font-size:8px}
 body.in-game .player-name{font-size:10px}
 body.in-game .player-name small{font-size:7px}
 body.in-game .player-score{font-size:18px}
 body.in-game .player-stats{font-size:8px;margin-top:3px}
 body.in-game .score-track,body.in-game .honors,body.in-game .bank-box{display:none}
 body.in-game .island-panel{display:grid;grid-template-rows:52px auto auto;min-height:0}
 body.in-game .board-topline{padding:5px 4px 8px;gap:8px;align-items:center}
 body.in-game .board-topline>div:first-child{min-width:0}
 body.in-game .board-topline h2{font-size:20px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.in-game .board-topline .eyebrow{font-size:7px;letter-spacing:1.4px}
 body.in-game .dice{gap:4px;flex-shrink:0}
 body.in-game .die{width:30px;height:30px;padding:5px;gap:2px}
 body.in-game .die i{width:4px;height:4px}
 body.in-game .dice small{font-size:10px;margin-left:1px}
 body.in-game .board-viewport,body.in-game .board-viewport:has(.board.zoomed){height:clamp(285px,43dvh,410px);min-height:285px;border-radius:10px}
 body.in-game .board-viewport:fullscreen{width:100vw;height:100vh;height:100dvh;min-height:0}
 body.in-game .board-scene-label{left:10px;bottom:64px}
 body.in-game .board-tools{left:8px;right:8px;bottom:9px;gap:4px;justify-content:flex-end}
 body.in-game .board-tools button{width:44px;height:44px;min-width:44px;min-height:44px;font-size:17px;padding:5px}
 body.in-game .board-tools button#view-toggle{width:44px;font-size:10px}
 body.in-game .tile-info{min-height:24px;padding:5px 3px;font-size:8px;line-height:1.6}
 body.in-game .terrain-legend{display:none}
 body.in-game .game-layout>.action-panel{grid-column:auto;padding:14px;overflow:visible;min-height:0}
 body.in-game .action-panel .panel-heading{margin-bottom:10px}
 body.in-game .action-hint{font-size:11px;min-height:0;margin-bottom:12px}
 body.in-game .action-panel .button,body.in-game .build-button{min-height:44px}
 body.in-game .build-controls{grid-template-columns:1fr 1fr;gap:8px}
 body.in-game .build-button{padding:10px;font-size:11px}
 body.in-game .trade-controls .button{padding:10px 8px;font-size:11px}
 body.in-game .activity-log{max-height:240px;overflow:auto}
 body.in-game .game-layout>.private-hand{position:relative;grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:15px 58px;gap:5px 8px;min-height:96px;padding:8px 9px;background:#12343df5;border-color:#8ba88255;box-shadow:0 5px 18px #001a2240}
 body.in-game .private-hand .hand-heading>.eyebrow{font-size:7px;letter-spacing:.8px}
 body.in-game .private-hand #hand-count{font-size:8px}
 body.in-game .private-hand .resource-hand{gap:4px}
 body.in-game .private-hand .resource-card svg{width:18px;height:18px}
 body.in-game .private-hand .resource-card strong{font-size:19px}
 body.in-game .private-hand .resource-card span{font-size:6px;letter-spacing:.3px}
 body.in-game .private-hand .hand-details-button{font-size:9px;padding:6px;min-height:44px}
 body.in-game .private-hand .hand-drawer{max-height:50dvh;padding:10px;gap:7px}
 body.in-game .toast{bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);font-size:11px;padding:10px 15px}
 body.in-game.spectating .game-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:'players' 'island' 'actions'}
 body.in-game #room-ended-banner{font-size:10px;padding:9px 11px;margin-bottom:8px}
 body.in-game .room-notice{font-size:10px;padding:7px 9px;gap:8px;margin-bottom:8px}
 body.in-game .room-notice .quiet-button{font-size:10px;padding:6px}
}
@media(min-width:641px) and (max-height:520px){
 body.in-game .game-layout{grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:'players players' 'hand actions' 'island actions';grid-template-rows:62px 96px auto}
 body.in-game.spectating .game-layout{grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:'players players' 'island actions';grid-template-rows:62px auto}
 body.in-game .board-viewport,body.in-game .board-viewport:has(.board.zoomed){height:340px;min-height:285px}
 body.in-game .game-layout>.action-panel{grid-column:auto}
}
body.in-game .board-viewport:fullscreen,body.in-game .board-viewport:fullscreen:has(.board.zoomed){width:100vw;height:100vh;height:100dvh;min-height:0;border-radius:0}
@media(prefers-reduced-motion:reduce){.private-hand .resource-card.gained{animation:none}.private-hand .hand-details-button{transition:none}}

/* Room management uses the same quiet tabletop palette as the game. */
dialog:has(.room-roster){padding:24px;max-height:calc(100dvh - 24px)}
dialog:has(.room-roster) .modal-heading{font-size:27px;line-height:1.2;margin-bottom:12px}
dialog:has(.room-roster) .modal-intro{margin-bottom:16px}
.room-roster,.room-approvals{display:grid;gap:7px;margin:14px 0}
.room-roster>.eyebrow,.room-approvals>.eyebrow{margin-bottom:2px;font-size:8px;letter-spacing:1.6px;color:#c0ceb0}
.room-person{display:flex;align-items:center;gap:11px;min-width:0;min-height:60px;padding:7px 10px;border:1px solid #aac4ab20;border-radius:8px;background:#ffffff04}
.room-person>.avatar{width:30px;height:30px;font-size:10px}
.room-person>div{flex:1;min-width:0}
.room-person strong{display:block;font-size:11px;font-weight:550;line-height:1.5;color:#e5e3cf;overflow-wrap:anywhere}
.room-person small{display:block;margin-top:2px;font-size:9px;line-height:1.5;color:#9fb9ac;overflow-wrap:anywhere}
.room-person.watcher{background:#a1bfad05;border-style:dashed}
.room-person-action{flex-shrink:0;min-height:44px;min-width:70px;padding:8px 11px;border:1px solid #a9bfad35;border-radius:7px;background:#173b42;color:#d7d9c4;font-size:10px;line-height:1.4}
.room-person-action:hover:not(:disabled){background:#294b49;border-color:#e0c68c60}
.room-person .button{flex-shrink:0;min-height:44px;padding:8px 12px;font-size:10px}
.room-approvals{padding:12px;border:1px solid #eabe7945;border-radius:10px;background:#eabe7908}
.room-approvals>.eyebrow{color:#e0c68c}
.room-help{margin:16px 0;padding:13px 14px;border:1px solid #aac4ab23;border-radius:9px;background:#09262b50}
.room-help h3{font-size:12px;line-height:1.5;color:#e3d9b7;margin-bottom:6px}
.room-help p{font-size:11px;line-height:1.8;color:#a9bfb0}
.room-help .button{min-height:44px;margin-top:11px;font-size:11px}
.room-option-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.room-option-buttons>.button{flex:1 1 145px;min-height:44px;padding:10px 13px;font-size:11px;line-height:1.5}
.button.danger-button{background:linear-gradient(135deg,#673f37,#472f2f);border:1px solid #e4a58b55;color:#ffdac8;box-shadow:0 4px 12px #0002}
.button.danger-button:hover:not(:disabled){border-color:#f0b49b90;filter:brightness(1.1)}
.room-alert,#room-alert{display:inline-grid;place-items:center;min-width:18px;min-height:18px;padding:0 4px;border-radius:20px;background:var(--gold);color:#18363b;font-size:9px;line-height:1.3;font-variant-numeric:tabular-nums}
.watch-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 12px;margin:0 0 15px;border:1px solid #acc59b25;border-radius:8px;background:#0e293055;color:#baceb8;font-size:11px;line-height:1.6;cursor:pointer}
.watch-option input[type=checkbox]{flex:0 0 18px;width:auto;min-width:18px;max-width:18px;height:18px;margin:0;padding:0;accent-color:var(--gold);cursor:pointer}
@media(max-width:640px){
 dialog:has(.room-roster){padding:24px 20px}
 dialog:has(.room-roster) .modal-heading{font-size:25px}
 .room-person{gap:8px;padding:7px 8px}
 .room-person strong{font-size:10px}
 .room-person small{font-size:8px}
 .room-person-action{min-width:65px;padding:8px;font-size:9px}
 .room-approvals{padding:9px}
 .room-help{padding:12px}
 .room-help p{font-size:10px}
 .room-option-buttons>.button{flex-basis:120px;font-size:10px;padding:10px}
 body.in-game .room-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 7px;padding:6px 0;align-items:center}
 body.in-game .room-toolbar>div:first-child{grid-column:1/3;grid-row:1;min-width:0;gap:6px}
 body.in-game .room-toolbar .toolbar-actions{display:contents}
 body.in-game .toolbar-actions>.mode-badge{grid-column:3;grid-row:1;justify-self:end;max-width:100%;font-size:7px;line-height:1.4;white-space:normal;text-align:center;padding:4px 6px}
 body.in-game #invite-button,body.in-game #room-controls,body.in-game #lounge-button{grid-row:2;width:100%;min-height:44px;padding:7px 5px;font-size:10px;justify-content:center}
 body.in-game #invite-button{grid-column:1}
 body.in-game #room-controls{grid-column:2}
 body.in-game #lounge-button{grid-column:3;border:1px solid #ffffff20;border-radius:8px;background:#163b44;text-align:center}
 body.in-game .room-toolbar .eyebrow{font-size:7px;letter-spacing:1px}
 body.in-game .room-toolbar .invite-code{min-height:34px;font-size:16px;letter-spacing:1.7px}
}
@media(prefers-reduced-motion:reduce){.room-person-action,.button.danger-button{transition:none}}