:root {
  color-scheme: dark;
  --ink:#fff8e8; --muted:#c6b8bd; --deep:#120b10; --navy:#24151e; --panel:#2b1822f2;
  --panel-solid:#2b1822; --line:#eac77b2e; --teal:#36b995; --teal-dark:#247c68; --gold:#e0b75f;
  --danger:#d66f65; --shadow:0 24px 70px #0009; --radius:22px;
  font-family:"Segoe UI",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--deep);color:var(--ink)}
body{min-height:100vh;background:
  radial-gradient(circle at 15% 10%,#7b284255,transparent 34%),
  radial-gradient(circle at 88% 18%,#b6823440,transparent 28%),
  linear-gradient(145deg,#120b10,#311923 52%,#160d13);overflow-x:hidden}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}.hidden{display:none!important}
.glass,.panel,.hand-panel,.status-ribbon{border:1px solid var(--line);background:radial-gradient(circle at 15% 0,#77404b55,transparent 34%),linear-gradient(145deg,#3a202af5,#180e14f5);box-shadow:inset 0 1px #fff2c412,inset 0 -1px #0008,var(--shadow);backdrop-filter:blur(18px)}
.entry-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);align-items:center;gap:7vw;padding:7vh 9vw;position:relative;overflow:hidden}
.entry-shell:before{content:"";position:absolute;inset:-12%;background:
  linear-gradient(#170d1266,#170d12ea),url("assets/cards/resource-grain-web.jpg") center/cover;filter:saturate(.68);z-index:-1}
.entry-hero{max-width:740px;text-shadow:0 3px 26px #000}.brand-mark{width:clamp(112px,13vw,156px);height:clamp(112px,13vw,156px);display:block;margin-bottom:8px;object-fit:contain;filter:drop-shadow(0 18px 32px #000b) drop-shadow(0 0 18px #d1a94933)}
.eyebrow{margin:28px 0 8px;color:#b9dcd4;text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:700}.entry-hero h1{font-family:Georgia,serif;font-size:clamp(58px,9vw,126px);line-height:.8;margin:0;letter-spacing:-.06em}.entry-hero h1 span{color:#f0c66d}.lead{font-size:clamp(17px,2vw,22px);max-width:620px;line-height:1.6;color:#d5e5df;margin:30px 0}.feature-row{display:flex;gap:12px;flex-wrap:wrap}.feature-row span{padding:9px 14px;border:1px solid #ffffff26;border-radius:999px;background:#07191e88;font-size:13px}
.entry-card{width:min(100%,460px);padding:26px;border-radius:28px}.tabs{display:flex;gap:5px;padding:5px;background:#071b20a8;border-radius:14px}.tab{flex:1;border:0;border-radius:10px;background:transparent;color:var(--muted);padding:10px;font-weight:700}.tab.active{color:white;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff0d}.entry-form{display:grid;gap:18px;margin-top:25px}.entry-form label,.form-field{display:grid;gap:8px;color:#c4d5d0;font-size:13px;font-weight:600}input,select{width:100%;border:1px solid #ffffff1f;border-radius:12px;background:#06181d;color:white;padding:13px 14px;outline:none}input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #39bda820}.primary,.secondary,.danger{border:0;border-radius:12px;padding:11px 15px;font-weight:800}.primary{color:#05221f;background:linear-gradient(135deg,#59d8c2,#2fae99);box-shadow:0 9px 25px #1fa28b35}.secondary{color:#d9e9e4;background:#ffffff12;border:1px solid #ffffff16}.danger{color:#ffe8e5;background:#7f3d3a}.wide{width:100%}.server-hint{margin:18px 2px 0;color:var(--muted);font-size:12px;line-height:1.5}
.board-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;border:0}.board-mode legend{grid-column:1/-1;margin-bottom:7px;color:#c4d5d0;font-size:13px;font-weight:700}.board-mode label{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid #ffffff18;border-radius:12px;background:#06181d99;cursor:pointer}.board-mode input{width:auto;margin:3px 0 0;accent-color:var(--teal)}.board-mode span{display:grid;gap:2px}.board-mode small{color:var(--muted);font-size:10px;line-height:1.3}.board-mode label:has(input:checked){border-color:#51ccb6aa;background:#123b3d}
.game-shell{min-height:100vh;padding:74px 14px 136px}.topbar{height:60px;position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 18px;background:linear-gradient(180deg,#1b1017fa,#100b0ffa);border-bottom:1px solid #d9ad5738;box-shadow:0 8px 28px #0007,inset 0 -1px #0008;backdrop-filter:blur(20px)}.brand{display:flex;align-items:center;gap:9px;color:white;text-decoration:none}.brand img{width:42px;height:42px;margin:0;object-fit:contain}.room-chip,.turn-chip{display:flex;align-items:center;gap:8px;border:1px solid #e6c17330;background:linear-gradient(#ffffff10,#00000018);border-radius:999px;padding:7px 12px;font-size:12px;box-shadow:inset 0 1px #fff2}.room-chip{margin-left:auto}.room-chip button{border:0;background:transparent;color:var(--muted)}.turn-chip i{width:10px;height:10px;border-radius:50%;background:var(--muted);box-shadow:0 0 14px currentColor}.icon-button{width:34px;height:34px;border:1px solid #e6c17330;border-radius:10px;background:linear-gradient(#ffffff12,#0002);color:white;font-weight:800}.turn-alert-toggle.enabled{border-color:#e7bd59;background:#59451e}.leave-button{min-height:34px;padding:0 12px;color:#fff;border:1px solid #ffffff28;border-radius:10px;background:#ffffff0b;font-weight:800}.music-controls{display:flex;align-items:center;gap:5px;padding:3px;border:1px solid #ffffff18;border-radius:11px;background:#ffffff08}.music-toggle{height:28px;padding:0 8px;color:#fff;border:0;border-radius:8px;background:#d1a94926;font-size:10px;font-weight:800}.music-toggle.muted{color:var(--muted);background:transparent}.music-controls label{display:flex;align-items:center;gap:4px}.music-controls input{width:62px;accent-color:#e6bd62}.music-controls output{width:27px;color:var(--muted);font-size:8px}
.table-layout{height:calc(100vh - 370px);min-height:500px;display:grid;grid-template-columns:260px minmax(480px,1fr) 310px;gap:12px}.panel{border-radius:var(--radius);padding:15px;min-height:0}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-family:Georgia,serif;font-size:18px;font-weight:800;color:#fff5dc}.panel-title small{color:var(--muted);font-family:"Segoe UI",sans-serif;font-size:12px}
.players-list{display:grid;gap:9px}.player-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:14px;background:linear-gradient(135deg,#ffffff0d,#00000016);border:1px solid #f1d28a14;box-shadow:inset 0 1px #fff1}.player-row.current{background:linear-gradient(135deg,#e2b85d20,#ffffff0c);border-color:#edc77450;box-shadow:inset 0 1px #fff2,0 8px 20px #0004}.player-row.me{box-shadow:inset 4px 0 var(--teal),inset 0 1px #fff1}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--player,#587),white 18%),var(--player,#587));font-weight:900;color:#07171b;border:2px solid #fff7c875;box-shadow:0 5px 11px #0008,inset 0 1px #fff6}.player-meta{min-width:0}.player-meta b,.player-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-meta small{color:var(--muted);font-size:11px;margin-top:3px}.player-score{text-align:right}.player-score b{display:block;color:#f0c66d;font-family:Georgia,serif;font-size:21px;text-shadow:0 2px 4px #000}.awards{font-size:11px;color:#e6cc8c}.lobby-actions{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.lobby-actions p{font-size:12px;line-height:1.5;color:var(--muted)}
.board-column{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:10px}.status-ribbon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 14px;border-radius:18px;border-color:#e6bd6b38}.status-ribbon b,.status-ribbon small{display:block}.status-ribbon small{margin-top:3px;color:var(--muted)}.dice{display:flex;gap:7px}.dice span{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:radial-gradient(circle at 32% 27%,#fffde9,#eadbb5 68%,#b98a51);color:#8b241e;font-family:Georgia,serif;font-size:19px;font-weight:900;border:1px solid #fff3c5;box-shadow:inset 0 0 0 2px #8e622b66,0 5px 9px #0008;transform:rotate(-2deg)}.dice span+span{transform:rotate(3deg)}.deck-count{color:var(--gold);font-size:12px;font-weight:800}.board-wrap{position:relative;min-height:0;display:grid;place-items:center;border-radius:28px;overflow:hidden;background:linear-gradient(#04324622,#03202a55),url("assets/board/ocean-v2.jpg") center/cover;border:5px solid #6b4527;outline:1px solid #dcb36a;box-shadow:inset 0 0 0 2px #d8a85966,inset 0 0 80px #00151daa,0 24px 75px #0008}.board-wrap:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:repeating-linear-gradient(13deg,#fff0 0 17px,#fff1 18px,#fff0 20px)}.board-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 43%,#00182345 79%,#000c14a8)}#board{width:min(100%,860px);height:100%;min-height:450px;position:relative;z-index:2;filter:drop-shadow(0 20px 15px #001318b8)}
.hex{fill:#cda96c;stroke:#52321a;stroke-width:.09;filter:url(#tileShadow)}.terrain-art{pointer-events:none;transition:.18s}.hex-group:hover .terrain-art{filter:brightness(1.1) saturate(1.08)}.hex-rim{fill:none;stroke:#f2d69a;stroke-width:.055;opacity:.9;pointer-events:none}.number-token-shadow{fill:#2a170c99}.number-token{fill:url(#tokenIvory);stroke:#5d3b1d;stroke-width:.045;filter:url(#pieceShadow)}.number-token-ring{fill:none;stroke:#8c6233;stroke-width:.018;opacity:.7}.number-text{fill:#2c2117;font-family:Georgia,serif;font-weight:900;font-size:.40px;text-anchor:middle;dominant-baseline:middle;filter:drop-shadow(0 .02px #fff8)}.number-hot{fill:#a3221d}.number-pip{fill:#3f3023}.number-pip.hot{fill:#a3221d}.robber-shadow{fill:#0008}.robber{fill:url(#robberStone);stroke:#9eaaac;stroke-width:.025;filter:url(#pieceShadow)}.road-hit{stroke:transparent;stroke-width:.30;cursor:pointer}.road-hit:hover,.road-hit.selectable{stroke:#ffe27a40}.road{fill:none;stroke-linecap:round;pointer-events:none}.road-shadow{stroke:#160d08;stroke-width:.24}.road.owned{stroke:var(--road,#fff);stroke-width:.19;filter:url(#pieceShadow)}.road-shine{stroke:#fff8;stroke-width:.045}.vertex-hit{fill:transparent;stroke:transparent;stroke-width:.025;cursor:pointer}.vertex-hit.selectable{fill:#fff4c316;stroke:#ffe58a9c;filter:drop-shadow(0 0 .055px #ffdf62)}.vertex-hit:hover{fill:#ffe4779c;stroke:#fff6bd;filter:drop-shadow(0 0 .12px #ffdf62)}.building{pointer-events:none;filter:url(#pieceShadow)}.piece-shadow{fill:#120b08;transform:translateY(.06px)}.piece-main{fill:var(--piece);stroke:#1d1712;stroke-width:.035}.piece-shine{fill:#fff5;stroke:none}.port-line{stroke:#f6df9d;stroke-width:.045;stroke-dasharray:.09 .065;filter:drop-shadow(0 .03px #001)}.port-boat{filter:url(#pieceShadow);pointer-events:none}.port-boat line{stroke:#4a2914;stroke-width:.025}.port-hull{fill:#8f4b25;stroke:#422311;stroke-width:.025}.port-sail{fill:#f6e5b4;stroke:#624322;stroke-width:.02}.port-sail.shade{fill:#d5b66f}.port-token{fill:#17343bea;stroke:#e8c47a;stroke-width:.02}.port-text{fill:#fff3c8;font-family:Georgia,serif;font-size:.19px;font-weight:900;text-anchor:middle;dominant-baseline:middle}.selectable{animation:pulse 1.3s infinite}.board-help{position:absolute;z-index:5;bottom:12px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:linear-gradient(#193b3eee,#06191ef5);border:1px solid #efcb7b4d;box-shadow:0 5px 18px #0008,inset 0 1px #fff2;font-size:12px;color:#fff3d5;white-space:nowrap}
.small-tabs{margin-bottom:12px}.side-tab{height:calc(100% - 52px);overflow:auto;padding-right:3px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.action-grid .wide-action{grid-column:1/-1}.action-card{display:grid;gap:4px;min-height:74px;text-align:left;background:linear-gradient(145deg,#31515a,#142c33);border:1px solid #e8c5772b;box-shadow:inset 0 1px #fff2,0 6px 14px #0003}.action-card small{color:#bfccc7;font-weight:500}.cost{display:flex;gap:4px;margin-top:3px}.resource-dot{width:19px;height:19px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid #ffe9b366;background-size:cover!important;background-position:center!important;font-size:10px;color:#fff;font-weight:900;text-shadow:0 1px 3px #000,0 0 3px #000;box-shadow:0 2px 5px #0007}.resource-dot.timber{background:url("assets/cards/resource-timber-web.jpg")}.resource-dot.brick{background:url("assets/cards/resource-brick-web.jpg")}.resource-dot.wool{background:url("assets/cards/resource-wool-web.jpg")}.resource-dot.grain{background:url("assets/cards/resource-grain-web.jpg")}.resource-dot.ore{background:url("assets/cards/resource-ore-web.jpg")}.instruction{padding:14px;border:1px solid #edca7b2d;border-radius:14px;background:linear-gradient(135deg,#ffffff0c,#0002);line-height:1.45;color:#edf3df;box-shadow:inset 0 1px #fff1}.instruction b{color:#f0c66d}.scroll-list{display:flex;flex-direction:column;gap:7px;overflow:auto}.log-entry{padding:9px 10px;border-radius:10px;background:#ffffff07;color:#c6d7d3;font-size:12px;line-height:1.45}.trade-box{display:grid;gap:12px}.amount-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.amount-grid label{text-align:center;font-size:10px;color:var(--muted)}.amount-grid input{padding:7px 3px;text-align:center}.offer{padding:10px;border:1px solid var(--line);border-radius:12px;font-size:12px}.offer p{margin:0 0 8px}.offer-actions{display:flex;gap:7px}
.hand-panel{position:fixed;z-index:40;inset:auto 14px 10px;border-radius:22px;padding:11px 14px;display:grid;grid-template-columns:220px minmax(0,1fr) minmax(160px,.7fr);align-items:center;gap:12px;border:2px solid #8d5c2d;background:radial-gradient(circle at 18% 0,#78502b55,transparent 24%),linear-gradient(165deg,#3c281cf7,#181714f8 58%,#10262af8);box-shadow:inset 0 0 0 1px #efcc8650,inset 0 10px 25px #ffffff08,0 18px 55px #000b}.identity{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px}.identity small,.identity b{display:block}.identity small{color:var(--muted);font-size:10px}.identity strong{color:#f0c66d;font-family:Georgia,serif;font-size:18px}.resource-hand{display:grid;grid-template-columns:repeat(5,minmax(72px,1fr));gap:8px}.resource-card{height:90px;position:relative;overflow:hidden;border-radius:13px;border:2px solid #bd8b4d;background:#123;box-shadow:0 7px 13px #0008,inset 0 0 0 1px #fff5;transform:translateY(0);transition:.18s}.resource-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 13px 22px #000a}.resource-card img{width:100%;height:100%;object-fit:cover}.resource-card:after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(transparent,#071419ed)}.resource-card b,.resource-card span{position:absolute;z-index:2;bottom:7px}.resource-card b{left:8px;font-family:Georgia,serif;font-size:12px}.resource-card span{right:7px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fffde8,#dfc68f);border:1px solid #7e5427;color:#2b2015;font-family:Georgia,serif;font-size:17px;font-weight:900;box-shadow:0 2px 6px #0008}.development-hand{display:flex;gap:7px;overflow:auto;padding:5px}.dev-mini{min-width:68px;height:90px;position:relative;overflow:hidden;border:2px solid #bd8b4d;border-radius:12px;background:#142;box-shadow:0 6px 12px #0008}.dev-mini img{width:100%;height:100%;object-fit:cover}.dev-mini span{position:absolute;inset:auto 3px 3px;padding:3px;background:#07191ddd;border-radius:6px;font-size:9px;text-align:center}.dev-mini button{position:absolute;inset:0;border:0;background:transparent}
.chat-toggle{position:fixed;z-index:45;right:26px;bottom:118px;border:1px solid #ffffff22;border-radius:999px;padding:10px 16px;background:#173b42;color:white;box-shadow:var(--shadow)}.chat-toggle span:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;border-radius:50%;background:var(--danger)}.chat-drawer{position:fixed;z-index:60;right:16px;bottom:16px;width:min(390px,calc(100vw - 32px));height:min(560px,calc(100vh - 32px));display:grid;grid-template-rows:auto 1fr auto;padding:15px;border:1px solid var(--line);border-radius:22px;background:#0b252bed;box-shadow:var(--shadow);backdrop-filter:blur(22px)}.chat-messages{overflow:auto;display:flex;flex-direction:column;gap:8px}.chat-message{padding:9px 11px;border-radius:12px;background:#ffffff09;font-size:13px}.chat-message b{color:#80d9c9}.chat-message small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.chat-drawer form{display:grid;grid-template-columns:1fr auto;gap:8px;padding-top:10px}
.toast{position:fixed;z-index:100;top:74px;left:50%;transform:translate(-50%,-20px);padding:11px 16px;border-radius:12px;background:#f2ead6;color:#17292d;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#7e3734;color:white}
dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;border:1px solid #ffffff26;border-radius:24px;background:#102d33;color:white;box-shadow:var(--shadow);padding:0}dialog::backdrop{background:#001013b8;backdrop-filter:blur(5px)}dialog form{padding:24px}.modal-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:10px;background:#ffffff10;color:white;font-size:22px}.modal-title{font-family:Georgia,serif;font-size:29px;margin:0 40px 18px 0}.modal-grid{display:grid;gap:12px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.choice-card{height:140px;position:relative;overflow:hidden;border:1px solid #ffffff24;border-radius:14px;background:#123;color:white}.choice-card img{width:100%;height:100%;object-fit:cover}.choice-card span{position:absolute;inset:auto 0 0;padding:24px 8px 8px;background:linear-gradient(transparent,#06191ef2);font-weight:800}.rules h3{color:#f0c66d}.rules p,.rules li{color:#cbdad6;line-height:1.55}.rules table{width:100%;border-collapse:collapse}.rules td{padding:8px;border-bottom:1px solid var(--line)}
@media(min-width:761px){.board-wrap{align-items:start}#board{height:calc(100% - 124px);min-height:0}}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 .04px #f8d36a)}50%{filter:drop-shadow(0 0 .18px #f8d36a)}}
@media(max-width:1100px){.table-layout{grid-template-columns:220px minmax(430px,1fr)}.side-panel{position:fixed;z-index:55;right:12px;top:72px;bottom:116px;width:310px;transform:translateX(calc(100% + 20px));transition:.25s}.side-panel.open{transform:none}.topbar:after{content:"Ход";padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:12px}.topbar{cursor:pointer}}
@media(max-width:760px){.entry-shell{grid-template-columns:1fr;padding:40px 20px;gap:30px}.entry-hero h1{font-size:68px}.lead{font-size:16px}.table-layout{height:auto;min-height:0;display:flex;flex-direction:column}.players-panel{order:2}.board-column{order:1;height:62vh;min-height:500px}.side-panel{order:3}.game-shell{padding:68px 8px 226px}.brand b{display:none}.turn-chip{max-width:150px}.turn-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-chip{margin-left:auto}.hand-panel{inset:auto 7px 7px;display:block;padding:9px;max-height:210px;overflow:auto}.identity{margin-bottom:7px}.resource-hand{grid-template-columns:repeat(5,1fr)}.resource-card{height:66px}.development-hand{margin-top:7px}.chat-toggle{bottom:216px}.board-help{max-width:92%;overflow:hidden;text-overflow:ellipsis}.players-panel{margin-bottom:20px}.topbar{gap:7px;padding:0 9px}.topbar:after{display:none}}
@media(max-width:760px){.entry-shell{grid-template-columns:1fr;padding:40px 20px;gap:30px}.entry-hero h1{font-size:68px}.lead{font-size:16px}.table-layout{height:auto;min-height:0;display:flex;flex-direction:column}.players-panel{order:2}.board-column{order:1;height:62vh;min-height:500px}.side-panel{order:3}.game-shell{padding:68px 8px 226px}.brand b{display:none}.turn-chip{max-width:150px}.turn-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-chip{margin-left:auto}.music-controls label,.music-toggle span{display:none}.music-toggle{width:30px;padding:0}.leave-button{width:34px;padding:0;font-size:0}.leave-button:after{content:'×';font-size:20px}.hand-panel{inset:auto 7px 7px;display:block;padding:9px;max-height:210px;overflow:auto}.identity{margin-bottom:7px}.resource-hand{grid-template-columns:repeat(5,1fr)}.resource-card{height:66px}.development-hand{margin-top:7px}.chat-toggle{bottom:216px}.board-help{max-width:92%;overflow:hidden;text-overflow:ellipsis}.players-panel{margin-bottom:20px}.topbar{gap:5px;padding:0 7px}.topbar:after{display:none}}
@media(max-width:460px){.entry-hero h1{font-size:56px}.feature-row span{font-size:11px}.entry-card{padding:18px}.room-chip{padding:7px}.room-chip{font-size:0}.room-chip strong,.room-chip button{font-size:12px}.turn-chip{max-width:120px}.board-column{height:54vh;min-height:430px}.status-ribbon{grid-template-columns:auto 1fr}.deck-count{display:none}.choice-grid{grid-template-columns:1fr 1fr}.resource-card b{display:none}}

/* Deluxe tabletop pieces, privacy, voice and mobile controls. */
.actions-toggle{display:none}.phase-copy{min-width:0}.quick-roll{border:1px solid #fff0b766;border-radius:12px;padding:10px 15px;color:#241606;background:linear-gradient(#ffe59b,#d89a37);font-weight:900;box-shadow:0 6px 16px #0007,inset 0 1px #fff8;white-space:nowrap}.quick-roll:active{transform:translateY(1px)}
.player-row{grid-template-columns:42px minmax(0,1fr) 34px auto}.avatar-button{width:42px;height:42px;padding:0;border:0;border-radius:11px;background:transparent}.avatar.portrait{display:block;width:42px;height:42px;object-fit:cover;padding:0;border-radius:11px}.opponent-details{max-height:42px;opacity:1;overflow:hidden;transition:.2s}.opponent-details.concealed{max-height:0;opacity:0}.privacy-hint{font-size:9px!important;color:#cbb987!important}.voice-spacer{width:34px}.voice-button{position:relative;display:grid;width:34px;height:34px;place-items:center;padding:0;border:1px solid #ffffff2e;border-radius:50%;background:#06181dbd;color:#edf5ec}.voice-button.muted,.voice-button.off{color:#ef9c9c;border-color:#d66f6555}.voice-button.connected:after{content:"";position:absolute;right:1px;bottom:1px;width:7px;height:7px;border-radius:50%;background:#57d8aa;box-shadow:0 0 7px #57d8aa}.identity{grid-template-columns:42px minmax(0,1fr) auto 34px}.avatar-button:focus-visible{outline:3px solid #f0c66d;outline-offset:2px}
.sand-hex{fill:#d8b06b;stroke:#f3d493;stroke-width:.10}.terrain-art{filter:drop-shadow(0 .05px .05px #3b210f)}.hex-rim{stroke:#fae0a7;stroke-width:.045}.piece-image,.port-ship-image,.port-resource-image{pointer-events:none}.piece-image{filter:drop-shadow(0 .10px .07px #000b)}.building-piece{overflow:visible}.road-piece{filter:drop-shadow(0 .07px .04px #000c)}.port-ship-image{filter:drop-shadow(0 .09px .06px #000c)}.port-resource-image{clip-path:circle(50%);filter:saturate(1.1)}.port-token{fill:#102f35f2;stroke:#f1ce7e;stroke-width:.035}.port-text{font-size:.18px}.port-rate{fill:#fff0bd;font-family:Georgia,serif;font-size:.18px;font-weight:900;text-anchor:middle;paint-order:stroke;stroke:#07191d;stroke-width:.045}.port-line{stroke-width:.055}
.cost-card-toggle{display:block;position:absolute;z-index:8;right:9px;top:10px;border:1px solid #f1d28a77;border-radius:12px;padding:8px 11px;color:#fff3d5;background:#162f33e8;font-weight:800}.building-cost-card{display:none;position:absolute;z-index:9;right:10px;top:50px;width:240px;aspect-ratio:4/5;padding:38px 20px 20px;color:#332112;border:5px solid #71451f;border-radius:16px;background-color:#e4c17b;background-image:linear-gradient(#f7dfacdb,#d9ad68e8),url("assets/ui/building-cost-parchment.png");background-position:center;background-size:100% 100%;background-repeat:no-repeat;box-shadow:inset 0 0 0 2px #f7dda4,0 12px 24px #000b;filter:drop-shadow(0 10px 15px #0009);font-family:Georgia,serif}.building-cost-card.open{display:block}.building-cost-card h3{margin:0 8px 10px;text-align:center;font-size:17px;line-height:1.05}.cost-card-close{display:block;position:absolute;right:10px;top:9px;width:26px;height:26px;border:0;border-radius:50%;color:#3b2410;background:#f3d18c;font-weight:900}.cost-row{height:57px;display:grid;grid-template-columns:45px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:5px;border-top:1px solid #71491f55}.cost-row img{grid-row:1/3;width:45px;height:45px;object-fit:contain;border-radius:7px}.cost-row b{font-size:13px}.cost-row span{display:flex;gap:3px}.cost-row .resource-dot{width:20px;height:20px;font-family:"Segoe UI",sans-serif;font-style:normal}.board-help{bottom:9px}
.hand-panel{overflow:hidden}.hand-panel:after{content:"Карты скрыты — нажмите портрет";position:absolute;left:245px;right:20px;text-align:center;color:#f2d596;font-family:Georgia,serif;font-weight:800;opacity:0;pointer-events:none}.privacy-hidden .resource-hand,.privacy-hidden .development-hand{filter:blur(16px) brightness(.35);opacity:.35;pointer-events:none;user-select:none}.hand-panel.privacy-hidden:after{opacity:1}.privacy-hidden .identity small{color:#f2d596}

@media(max-width:1100px){.actions-toggle{display:grid}.topbar:after{display:none}.side-panel{box-shadow:0 20px 80px #000d}.building-cost-card{width:220px}.board-help{bottom:10px;max-width:55%;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:760px){.status-ribbon{grid-template-columns:auto minmax(0,1fr) auto;padding:8px 9px;gap:8px}.status-ribbon .deck-count{display:none}.quick-roll{padding:9px 10px;font-size:12px}.phase-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.building-cost-card{right:7px;top:50px;width:min(270px,calc(100% - 14px));padding:42px 22px 22px}.cost-card-toggle{right:8px;top:auto;bottom:9px}.cost-row{height:58px}.cost-row img{width:48px;height:48px}.cost-row b{font-size:14px}.board-help{left:8px;transform:none;max-width:54%;padding:8px 10px}.hand-panel:after{left:10px;right:10px;bottom:72px}.player-row{grid-template-columns:42px minmax(0,1fr) 34px auto}.side-panel{top:66px;bottom:8px;right:7px;width:min(340px,calc(100vw - 14px))}.identity{grid-template-columns:42px minmax(0,1fr) auto 34px}}
@media(max-width:460px){.turn-chip{display:none}.quick-roll{max-width:112px}.status-ribbon{grid-template-columns:auto minmax(0,1fr) auto}.dice span{width:34px;height:34px}.building-cost-card{aspect-ratio:auto;min-height:350px}.cost-row{height:63px}}

/* 1.2 tabletop layout: the board, reference card and player portraits stay in flow. */
.game-shell{padding-bottom:20px}
.table-layout{height:calc(100vh - 230px);min-height:570px;grid-template-columns:300px minmax(560px,880px) 330px;justify-content:center}
.board-column{grid-template-rows:auto minmax(0,1fr) auto}
.board-wrap{width:min(100%,720px);height:auto;min-height:0;justify-self:center}
#board{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none}
.board-controls{display:flex;width:min(100%,720px);justify-self:center;align-items:center;justify-content:space-between;gap:8px;min-height:42px}
.board-help,.cost-card-toggle{position:static;inset:auto;transform:none;max-width:none}
.board-help{flex:1;overflow:hidden;text-overflow:ellipsis}
.cost-card-toggle{flex:none;white-space:nowrap}
.hand-panel{position:relative;inset:auto;margin-top:12px;min-height:132px;grid-template-columns:300px minmax(0,1fr) minmax(160px,.7fr)}
.chat-toggle{bottom:22px}

.players-panel{overflow:auto}
.players-list{gap:12px}
.player-row.opponent-card{display:block;padding:0;border:2px solid #8d6933;border-radius:16px 16px 38px 16px;overflow:visible;background:#171317;box-shadow:inset 0 0 0 1px #f7da8d28,0 10px 24px #0008}
.player-row.opponent-card.current{border-color:#5ed9c1;box-shadow:0 0 0 2px #43cdb333,0 12px 26px #0009}
.player-row.opponent-card.me{box-shadow:inset 4px 0 #39bda8,0 12px 26px #0009}
.player-stage{position:relative;height:124px;overflow:visible}
.player-portrait-toggle{display:block;width:100%;height:100%;padding:0;border:0;border-radius:13px 13px 35px 13px;overflow:hidden;background:#171317;color:#fff;text-align:left}
.player-portrait-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%;transition:filter .2s,transform .2s}
.player-portrait-toggle:hover .player-portrait-art{transform:scale(1.025)}
.player-name{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:26px 52px 8px 11px;background:linear-gradient(transparent,#090809eb 58%);font-family:Georgia,serif;font-size:17px;font-weight:900;text-shadow:0 2px 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-score{position:absolute;z-index:5;right:-7px;top:-8px;width:50px;height:50px;display:grid;place-content:center;text-align:center;border:2px solid #e7bc58;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff4c5,#a46a1f 72%);color:#231509;box-shadow:0 5px 12px #000a}
.player-score b{display:block;color:#231509;font-size:21px;line-height:.8;text-shadow:none}
.player-score small{display:block;color:#3b230c;font-size:8px;font-weight:900;margin-top:4px}
.opponent-details{position:absolute;z-index:4;left:10px;right:54px;top:9px;max-height:38px;padding:6px 8px;border:1px solid #efd08a45;border-radius:9px;background:#07181de0;color:#f5e3b9;font-size:11px;transition:.2s}
.opponent-details em{display:block;margin-top:2px;color:#efcd80;font-style:normal;font-size:9px}
.opponent-details.concealed{max-height:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0}
.player-row .opponent-audio{position:absolute;z-index:7;right:7px;bottom:7px}

.identity{grid-template-columns:82px minmax(0,1fr) auto 34px}
.identity .avatar-button{width:82px;height:104px;border-radius:14px 14px 30px 14px}
.identity .avatar.portrait{width:82px;height:104px;object-fit:cover;object-position:center 25%;border-radius:14px 14px 30px 14px;border:2px solid #d3a84e}
.hand-panel:after{left:318px}

.small-tabs .tab{padding:9px 5px;font-size:11px}
#cost-tab{overflow:auto;padding-right:0}
.building-cost-card,.building-cost-card.open{display:block;position:static;width:100%;min-height:100%;aspect-ratio:auto;padding:38px 18px 22px;color:#332112;border:4px solid #71451f;border-radius:16px;background-color:#e4c17b;background-image:linear-gradient(#f7dfacdb,#d9ad68e8),url("assets/ui/building-cost-parchment.png");background-position:center;background-size:100% 100%;background-repeat:no-repeat;box-shadow:inset 0 0 0 2px #f7dda4,0 12px 24px #0008;filter:none;font-family:Georgia,serif}
.building-cost-card h3{margin:0 0 14px;font-size:22px}
.cost-card-close{display:none}
.cost-row{height:84px;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;padding:6px 0}
.cost-row>img.cost-building-icon{grid-row:1/3;width:64px;height:64px;object-fit:contain;border-radius:0}
.cost-row b{font-size:16px}
.cost-row span{display:flex;align-items:center;gap:1px;min-width:0}
.cost-row span img{width:34px;height:34px;object-fit:contain;border:0;border-radius:0;background:none;filter:drop-shadow(0 2px 2px #56381655)}

.port-connection{stroke:#e8c57b;stroke-width:.055;stroke-linecap:round;filter:drop-shadow(0 .035px .025px #001)}
.port-pier-image{pointer-events:none;filter:drop-shadow(0 .08px .055px #000c)}
.port-resource-image{clip-path:none;filter:drop-shadow(0 .04px .03px #000b)}
.port-token{fill:#17343bf0;stroke:#f1ce7e;stroke-width:.03}
.port-text{font-size:.18px}

@media(min-width:761px){
  .board-wrap{align-items:center}
  #board{height:100%;min-height:0}
}
@media(max-width:1280px) and (min-width:761px){
  .table-layout{grid-template-columns:250px minmax(500px,780px);height:calc(100vh - 230px)}
  .side-panel{position:fixed;z-index:55;right:12px;top:72px;bottom:12px;width:330px;transform:translateX(calc(100% + 20px));transition:.25s}
  .side-panel.open{transform:none}
}
@media(max-width:760px){
  .game-shell{padding:68px 8px 14px}
  .table-layout{height:auto;min-height:0;display:flex}
  .board-column{height:auto;min-height:0}
  .board-wrap{height:auto;min-height:0;aspect-ratio:1/1}
  .board-wrap,.board-controls{width:100%}
  #board{height:100%;min-height:0}
  .board-controls{min-height:44px}
  .board-help{max-width:none;padding:8px 10px}
  .cost-card-toggle{padding:8px 10px}
  .players-panel{max-height:none}
  .player-stage{height:116px}
  .hand-panel{position:relative;inset:auto;margin-top:10px;display:block;max-height:none;overflow:hidden;min-height:0;padding:9px}
  .identity{grid-template-columns:66px minmax(0,1fr) auto 34px;margin-bottom:7px}
  .identity .avatar-button,.identity .avatar.portrait{width:66px;height:78px}
  .hand-panel:after{left:10px;right:10px;bottom:72px}
  .chat-toggle{bottom:16px}
  .building-cost-card,.building-cost-card.open{width:100%;min-height:auto;padding:40px 18px 20px}
  .cost-row{height:76px;grid-template-columns:60px minmax(0,1fr)}
  .cost-row>img.cost-building-icon{width:56px;height:56px}
  .cost-row span img{width:31px;height:31px}
}
@media(max-width:460px){
  .board-wrap{aspect-ratio:1/1.02}
  .status-ribbon{grid-template-columns:auto minmax(0,1fr) auto}
  .player-stage{height:106px}
  .cost-row span img{width:29px;height:29px}
}

/* 1.3: richer Roskosh-inspired table hierarchy and turn feedback. */
.game-shell:not(.hidden){height:100dvh;min-height:660px;padding:72px 12px 8px;display:grid;grid-template-rows:minmax(0,1fr) 102px;gap:8px;overflow:hidden}
.table-layout{height:auto;min-height:0;grid-template-columns:270px minmax(620px,900px) 310px;gap:10px}
.board-column{min-height:0}
.board-wrap{width:min(100%,800px)}
.board-controls{width:min(100%,800px)}
.panel{border-color:#d5a74e36;box-shadow:inset 0 1px #fff2c414,0 16px 45px #0006}

.players-panel{padding:13px;background:radial-gradient(circle at 38% 0,#a56a3429,transparent 34%),linear-gradient(155deg,#3a202afa,#211219fa 58%,#120b10fc)}
.players-panel .panel-title{margin-bottom:12px;padding:0 2px;font-size:20px;color:#f5d991}
.waiting-opponents{padding:28px 14px;border:1px dashed #e0b85f55;border-radius:14px;color:#b8c4bb;text-align:center;font-size:12px;line-height:1.5}
.player-row.opponent-card{position:relative;border-radius:16px;border-color:#a77b37;background:#130f11;overflow:hidden;box-shadow:inset 0 0 0 1px #f7da8d22,0 12px 24px #0008}
.player-row.opponent-card.current{border-color:#f1c45f;animation:activePlayerGlow 1.7s ease-in-out infinite}
.player-stage{height:138px}
.player-portrait-toggle{border-radius:13px;background:#130f11}
.player-portrait-art{object-position:center 23%}
.player-name{padding:34px 52px 10px 12px;font-size:18px;background:linear-gradient(transparent,#090708f5 58%)}
.player-score{right:7px;top:7px;width:48px;height:48px}
.opponent-details{left:10px;right:58px;top:auto;bottom:35px;padding:5px 8px;background:#09171bd9}
.player-row .opponent-audio{right:8px;bottom:8px;border-color:#e8bf6766;background:#171014e8}

.hand-panel{height:102px;min-height:0;margin:0;padding:7px 12px;grid-template-columns:275px minmax(0,1fr) minmax(145px,.58fr);border-color:#b98436;background:radial-gradient(circle at 8% 10%,#9d642a32,transparent 24%),linear-gradient(165deg,#321f18fa,#171315fa 55%,#0b1e23fa);box-shadow:inset 0 0 0 1px #f0c96b4a,inset 0 10px 24px #ffffff07,0 14px 36px #000a}
.identity{grid-template-columns:66px minmax(0,1fr) 54px 34px;gap:9px;min-width:0}
.identity .avatar-button,.identity .avatar.portrait{width:66px;height:86px}
.identity .avatar.portrait{border-radius:13px 13px 27px 13px;box-shadow:0 8px 18px #000a}
.identity-copy{min-width:0}
.identity-kicker{color:#d6a947!important;font-size:9px!important;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.identity #my-name{display:-webkit-box;min-width:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:Georgia,serif;font-size:17px;line-height:1.05;color:#fff4da;overflow-wrap:anywhere}
.identity #my-score{display:grid;width:54px;height:54px;place-items:center;padding:0 4px;border:1px solid #d9aa55;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff1b8,#b77b28 72%);color:#271609;font-size:14px;line-height:1;white-space:nowrap;box-shadow:inset 0 0 0 2px #6b431f66,0 6px 13px #0009;text-shadow:none}
.resource-card{height:70px;border-color:#c99943}
.development-hand{height:78px;align-items:center}
.dev-mini{height:70px}
.hand-panel:after{left:290px}

.chat-toggle{right:24px;bottom:124px;display:flex;align-items:center;gap:8px;padding:11px 17px;border:2px solid #d5aa4f;border-radius:15px;color:#fff3d4;background:linear-gradient(155deg,#38261f,#151319);box-shadow:inset 0 0 0 1px #f7dc8e26,0 10px 26px #000a;font-family:Georgia,serif;font-size:15px;font-weight:900;transition:.18s}
.chat-toggle:hover{transform:translateY(-2px);border-color:#f0cb70;box-shadow:inset 0 0 0 1px #fff3,0 14px 30px #000b,0 0 20px #d6a84938}
.chat-toggle .chat-icon{font-size:17px}
.chat-toggle #chat-badge:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:1px;border-radius:50%;background:#d66f65;color:#fff;font-family:"Segoe UI",sans-serif;font-size:11px}

.robber-piece{pointer-events:none;filter:drop-shadow(0 .1px .07px #000d) drop-shadow(0 0 .05px #d4a65a55)}
.port-dock-segment{pointer-events:none;filter:drop-shadow(0 .07px .045px #000d)}
.port-connection,.port-pier-image{display:none}

.turn-alert{position:fixed;z-index:90;left:50%;top:70px;display:grid;min-width:260px;padding:13px 22px;border:2px solid #f0c45e;border-radius:16px;color:#2c1b08;background:linear-gradient(145deg,#fff0ad,#dba446);box-shadow:0 14px 38px #000a,0 0 34px #e6b34e66;opacity:0;pointer-events:none;transform:translate(-50%,-22px) scale(.96);transition:.28s;text-align:center}
.turn-alert span{font-family:Georgia,serif;font-size:22px;font-weight:900}.turn-alert small{font-weight:700;opacity:.76}.turn-alert.show{opacity:1;transform:translate(-50%,0) scale(1)}
.my-turn .status-ribbon{border-color:#f0c45e;animation:myTurnRibbon 1.8s ease-in-out infinite}
.my-turn .board-wrap{outline-color:#f0c45e;box-shadow:inset 0 0 0 2px #e9ba5c70,inset 0 0 70px #00151d88,0 18px 58px #0008,0 0 28px #e8b84e30}
.my-turn .hand-panel{border-color:#e9bb56;box-shadow:inset 0 0 0 1px #f7dc8e60,inset 0 10px 24px #ffffff09,0 12px 34px #000a,0 0 24px #d8a63c38}

@keyframes activePlayerGlow{0%,100%{box-shadow:inset 0 0 0 1px #f7da8d2e,0 10px 24px #0008,0 0 8px #e9b94f55}50%{box-shadow:inset 0 0 0 1px #fff0b080,0 12px 28px #0009,0 0 24px #f0bd4eaa}}
@keyframes myTurnRibbon{0%,100%{box-shadow:inset 0 1px #fff3,0 0 8px #e1aa3e44}50%{box-shadow:inset 0 1px #fff7,0 0 26px #f1c45e99}}

@media(max-width:1280px) and (min-width:761px){
  .table-layout{grid-template-columns:240px minmax(500px,800px)}
  .board-wrap,.board-controls{width:min(100%,760px)}
}
@media(max-width:760px){
  .game-shell:not(.hidden){height:auto;min-height:100vh;padding:68px 8px 14px;display:block;overflow:visible}
  .table-layout{height:auto;display:flex;min-height:0}
  .board-wrap,.board-controls{width:100%}
  .hand-panel{height:auto;min-height:0;margin-top:10px;padding:9px}
  .identity{grid-template-columns:66px minmax(0,1fr) 54px 34px}
  .identity .avatar-button,.identity .avatar.portrait{width:66px;height:78px}
  .resource-card{height:66px}
  .player-stage{height:122px}
  .chat-toggle{right:13px;bottom:14px;width:52px;height:52px;justify-content:center;padding:0;border-radius:16px}
  .chat-toggle b{display:none}.chat-toggle .chat-icon{font-size:19px}.chat-toggle #chat-badge:not(:empty){position:absolute;right:-5px;top:-5px}
  .turn-alert{top:66px;width:min(300px,calc(100vw - 24px));min-width:0}
}

/* 1.4: server-authoritative interaction, live presence and tactile feedback. */
.connection-status{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e6c17330;border-radius:999px;background:#081b20a8;color:#aebbb8;font-size:11px;font-weight:700;white-space:nowrap}
.connection-status i,.presence{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d29b43;box-shadow:0 0 9px #d29b4388}
.connection-status.online i,.presence.online{background:#55d5a6;box-shadow:0 0 10px #55d5a6aa}.connection-status.offline i,.presence.offline{background:#df746c;box-shadow:none}
.connection-status.connecting i{animation:presencePulse 1s ease-in-out infinite}.player-name .presence{width:7px;height:7px;margin-right:7px;vertical-align:2px}
.action-card.selected{border-color:#f0c45e;outline:2px solid #e7b74b66;background:linear-gradient(145deg,#4a654f,#1d3937);box-shadow:inset 0 1px #fff4,0 0 18px #e9b64b55}
.action-card:disabled{opacity:.58;filter:saturate(.45)}
.cost-resource-icon{width:23px;height:23px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.hex-group.selectable .hex-rim{stroke:#fff0a3;stroke-width:.10;filter:drop-shadow(0 0 .10px #ffe16c)}
.hex-group.selectable{cursor:pointer}.hex-group:not(.selectable){cursor:default}
.dice.rolling span{animation:diceRoll .16s linear infinite alternate;filter:blur(.3px)}.dice.rolling span+span{animation-direction:alternate-reverse}
.resource-card.resource-gained{animation:resourceGain .75s ease-out}.resource-card.resource-spent{animation:resourceSpend .75s ease-out}
.resource-delta{position:absolute;z-index:6;right:5px;top:5px;min-width:30px;padding:4px 7px;border:1px solid #fff4b8;border-radius:999px;background:#173e2eea;color:#91f0b8;font-style:normal;font-weight:900;text-align:center;animation:resourceDelta .95s ease-out forwards}.resource-spent .resource-delta{background:#52211eea;color:#ffaaa2}
.log-entry{position:relative;padding-top:20px}.log-entry time{position:absolute;left:10px;top:5px;color:#819894;font-size:9px}.log-resources{display:flex;align-items:center;gap:3px;margin-top:5px;color:#f0d18b;font-weight:800}.log-resources img{width:20px;height:20px;object-fit:contain}
.opponent-details:not(.concealed){max-height:82px}.played-strip{display:flex;gap:3px;margin-top:3px}.played-strip img{width:18px;height:22px;object-fit:cover;border:1px solid #d7aa51;border-radius:3px}.dev-mini.blocked{filter:saturate(.55) brightness(.72)}.played-development{display:flex;align-items:center;gap:3px;padding-left:7px;border-left:1px solid #d4aa5266}.played-development img{width:32px;height:48px;object-fit:cover;border:1px solid #d4aa52;border-radius:6px;box-shadow:0 4px 8px #0008}
@keyframes presencePulse{50%{opacity:.35;transform:scale(.75)}}
@keyframes diceRoll{from{transform:rotate(-13deg) translateY(-3px) scale(.94)}to{transform:rotate(13deg) translateY(3px) scale(1.04)}}
@keyframes resourceGain{0%{transform:translateY(0)}35%{transform:translateY(-9px);border-color:#73efad;box-shadow:0 0 24px #4bdd9277}100%{transform:translateY(0)}}
@keyframes resourceSpend{35%{transform:translateY(4px);border-color:#e47b70;filter:saturate(.35)}}
@keyframes resourceDelta{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-25px)}}
@media(max-width:900px){.connection-status span{display:none}.connection-status{padding:8px}.topbar{gap:9px}}
@media(prefers-reduced-motion:reduce){.dice.rolling span,.resource-card.resource-gained,.resource-card.resource-spent,.resource-delta,.connection-status.connecting i{animation:none}}

/* 1.5: compact hand, corner-mounted harbors and lobby bots. */
.bot-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:10px 0}.bot-controls select,.bot-controls button{padding:9px 10px;font-size:12px}.bot-level{display:block;margin-top:2px;color:#72d9c4;font-family:"Segoe UI",sans-serif;font-size:8px;letter-spacing:.08em}.remove-bot{position:absolute;z-index:9;right:7px;bottom:7px;width:31px;height:31px;border:1px solid #d9aa5570;border-radius:9px;background:#241719e8;color:#f5dca4;font-size:20px;line-height:1}.remove-bot:hover{border-color:#f0c45e;background:#492728}
.harbor-water{fill:url(#harborWater);stroke:#063f5b;stroke-width:.045;stroke-linejoin:round;filter:drop-shadow(0 .07px .055px #0019)}.harbor-foam{fill:url(#harborFoam);stroke:none;opacity:.72;pointer-events:none}.harbor-sand{fill:url(#harborSand);stroke:#9a622f;stroke-width:.025;opacity:.97}.harbor-shore{fill:none;stroke:#fff1bd;stroke-width:.055;stroke-linecap:round;opacity:.92}.harbor-rate{fill:#fff7dc;font-family:Georgia,serif;font-size:.19px;font-weight:900;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#06334b;stroke-width:.06}.harbor-rate.main{font-size:.25px}.harbor-resource{filter:drop-shadow(0 .035px .025px #002);pointer-events:none}
.chat-toggle .chat-icon{display:grid!important;place-items:center;min-width:0!important;width:19px!important;height:19px!important;margin:0!important;border-radius:0!important;background:transparent!important}.chat-toggle .chat-icon svg{width:19px;height:19px;overflow:visible;fill:none;stroke:#fff7e2;stroke-width:1.8;stroke-linejoin:round}.chat-toggle .chat-icon circle{fill:#fff7e2;stroke:none}
@media(min-width:761px){
  .game-shell:not(.hidden){grid-template-rows:minmax(0,1fr) auto}
  .hand-panel{justify-self:center;width:min(1240px,calc(100vw - 28px));grid-template-columns:255px minmax(690px,900px) auto;background:radial-gradient(circle at 8% 10%,#9d642a2e,transparent 24%),linear-gradient(165deg,#321f18e8,#171315e9 55%,#0b1e23e4);backdrop-filter:blur(14px)}
  .hand-panel.no-development{width:min(1185px,calc(100vw - 28px));grid-template-columns:255px minmax(690px,900px)}
  .development-hand:empty{display:none}
}
@media(max-width:760px){.bot-controls{grid-template-columns:1fr}.hand-panel{width:100%;background:linear-gradient(165deg,#321f18eb,#171315ed 55%,#0b1e23e8)}}

/* 1.5.2: scrollbar-free action panel and a hand that grows with development cards. */
.side-panel{min-width:0;overflow:hidden}
.side-tab{width:100%;min-width:0;overflow-y:auto;overflow-x:hidden;padding-right:0;scrollbar-width:none}
.side-tab::-webkit-scrollbar,.scroll-list::-webkit-scrollbar{display:none}
.scroll-list{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.action-grid{width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.action-card{min-width:0;max-width:100%;overflow:hidden}
.action-card b,.action-card small,.offer p{min-width:0;overflow-wrap:anywhere}
.cost,.offer-actions{min-width:0;flex-wrap:wrap}
.trade-box,.amount-grid,.amount-grid input{min-width:0}
.amount-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.hand-panel{height:auto;min-height:102px;overflow:visible}
.development-hand{height:auto;min-height:78px;min-width:0;align-items:center;align-content:center;flex-wrap:wrap;overflow:visible;padding:4px 0}
.dev-mini{flex:0 0 68px;height:70px}
.played-development{flex-wrap:wrap}
@media(min-width:761px){
  .hand-panel{width:min(var(--hand-target-width,1185px),calc(100vw - 28px));grid-template-columns:290px minmax(525px,725px) minmax(145px,1fr)}
  .hand-panel.no-development{width:min(1185px,calc(100vw - 28px));grid-template-columns:290px minmax(565px,865px)}
}
@media(max-width:760px){
  .hand-panel{height:auto;max-height:none;overflow:visible}
  .development-hand{margin-top:7px}
}

/* 1.5.3: phase and board controls live in the side rail, leaving the center to the map. */
.table-layout{grid-template-columns:270px minmax(680px,1050px) 310px}
.board-column{grid-template-rows:minmax(0,1fr)}
.board-wrap,.board-controls{width:100%;max-width:none}
.board-wrap{height:100%}
.side-panel{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);align-content:stretch;gap:9px;padding:12px}
.side-panel .status-ribbon{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;padding:10px;border-radius:14px}
.side-panel .status-ribbon .dice{gap:5px}
.side-panel .status-ribbon .dice span{width:34px;height:34px;font-size:17px}
.side-panel .phase-copy{min-width:0;padding-right:38px}
.side-panel .phase-copy b,.side-panel .phase-copy small{overflow:hidden;text-overflow:ellipsis}
.side-panel .phase-copy small{white-space:normal;line-height:1.25}
.side-panel .deck-count{position:absolute;right:9px;top:9px;font-size:10px}
.side-panel .quick-roll{grid-column:1/-1;width:100%;padding:9px 10px}
.side-panel .board-controls{display:grid;grid-template-columns:1fr;align-items:stretch;gap:6px;min-height:0}
.side-panel .board-help{width:100%;min-width:0;max-width:none;padding:9px 10px;border-radius:12px;white-space:normal;line-height:1.3;text-align:left}
.side-panel .cost-card-toggle{width:100%;padding:9px 10px}
.side-panel .small-tabs{margin:0}
.side-panel .side-tab{height:auto;min-height:0}
@media(max-width:1280px) and (min-width:761px){
  .table-layout{grid-template-columns:240px minmax(500px,900px)}
  .board-wrap{width:100%;max-width:none}
}
@media(max-width:760px){
  .board-column{display:block}
  .board-wrap{width:100%;height:auto}
  .side-panel{grid-template-rows:auto auto auto minmax(0,1fr)}
}

/* 1.5.4: on phones the roll and turn controls sit directly below the board. */
@media(max-width:760px){
  .board-column{order:1}
  .side-panel{position:static;inset:auto;order:2;width:100%;height:auto;max-height:none;margin:8px 0 0;transform:none;transition:none;grid-template-rows:auto auto auto auto;overflow:visible;box-shadow:inset 0 1px #fff2c414,0 12px 32px #0005}
  .side-panel.open{transform:none}
  .players-panel{order:3}
  .side-panel .side-tab{height:auto;max-height:none;overflow:visible}
  .side-panel .board-controls{display:none!important}
  .actions-toggle{display:none}
}

/* 1.5.6: make incoming player trade offers impossible to miss. */
.small-tabs .tab.trade-alert{position:relative;color:#fff;background:linear-gradient(145deg,#e5554c,#9f2422);box-shadow:inset 0 1px #ffd6d480,0 0 0 1px #ff887a99,0 0 18px #e4393270;animation:tradeAlertPulse 1.35s ease-in-out infinite}
.small-tabs .tab.trade-alert::after{content:attr(data-offer-count);position:absolute;right:3px;top:2px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:#fff2e9;color:#8e1d1a;font-size:9px;font-weight:900;line-height:1;box-shadow:0 2px 6px #3b0909aa}
@keyframes tradeAlertPulse{50%{filter:brightness(1.18);box-shadow:inset 0 1px #ffe4df99,0 0 0 1px #ff9a8e,0 0 25px #ef443b9c}}
@media(prefers-reduced-motion:reduce){.small-tabs .tab.trade-alert{animation:none}}