/* Colonists: one survey table. Classes are col-; the board's SVG keeps its older piece names (road-built, piece-label). */
:root{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
.col-page{--ink:#0c1014;--panel:#10171dde;--line:#34424c;--paper:#efe4c8;--brass:#e3b45c;--muted:#a9b4b6;--sea:#143541;--mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;--serif:Georgia,'Iowan Old Style','Times New Roman',serif;
 margin:0;min-height:100vh;min-height:100dvh;color:#f1ead8;font:16px/1.5 system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
 background:radial-gradient(900px 620px at 92% -8%,#7a531f66,#0000 62%),radial-gradient(700px 500px at 0% 105%,#1b3a4455,#0000 60%),repeating-linear-gradient(92deg,#0000 0 46px,#0000001f 46px 48px),linear-gradient(#1b1511,#0f0c0b);background-color:#0f0c0b;background-attachment:fixed}
.col-page.has-art{background:linear-gradient(#0b0908b0,#0b0908c8),var(--art) center/cover fixed #0f0c0b}
.col-page a{color:inherit;text-underline-offset:4px}
.col-page :focus-visible{outline:3px solid #8bdbf0;outline-offset:3px}
.col-page button{font:700 15px/1.2 system-ui,-apple-system,'Segoe UI',Arial,sans-serif;min-height:42px;padding:9px 16px;background:var(--brass);color:#1b1408;border-top:1px solid #f6d78e;border-right:1px solid #f6d78e;border-bottom:1px solid #f6d78e;border-left:1px solid #f6d78e;box-shadow:none;border-radius:8px;cursor:pointer}
.col-page button:hover:not(:disabled){filter:brightness(1.08)}
.col-page button:disabled{opacity:.45;cursor:default}
.col-page button.quiet,.col-page button.ghost{background:#1b262e;color:#eef0e6;border-top-color:#566772;border-right-color:#566772;border-bottom-color:#566772;border-left-color:#566772}
.col-page button.ghost{min-height:34px;padding:6px 11px;font-size:13px;background:#131b21cc}
.col-page button[aria-pressed="true"].ghost,.col-page button[aria-pressed="true"].quiet{border-top-color:var(--brass);border-right-color:var(--brass);border-bottom-color:var(--brass);border-left-color:var(--brass);color:#f6dfa9}
.col-page input,.col-page select{font:inherit;width:100%;min-height:42px;padding:8px 10px;background:#0e161c;color:inherit;border:1px solid #566772;border-radius:7px}
.col-muted,.col-note{color:var(--muted);font-size:14px}
.col-eyebrow{margin:0 0 8px;color:var(--brass);font:700 12px/1.4 var(--mono);letter-spacing:.14em}

/* Entry page */
.col-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px clamp(16px,4vw,56px);border-bottom:1px solid #2a343b;background:#0c1014b8}
.col-top a{font-weight:700;text-decoration:none}.col-top a span{color:var(--muted);font-weight:400}
.col-top-tag{color:var(--brass);font:12px/1.4 var(--mono);letter-spacing:.12em}
.at-table .col-top{display:none}
.col-entry{max-width:1020px;margin:0 auto;padding:36px 20px 56px}
.col-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:8px 32px;align-items:center;margin-bottom:26px}.col-hero>*{grid-column:1}.col-hero-art{grid-column:2;grid-row:1/5;aspect-ratio:3/2;border-radius:16px;border:1px solid var(--line);background:var(--art) center/cover;box-shadow:0 18px 50px #000a;display:none}.col-hero-art.has-art{display:block}.col-hero>button{justify-self:start}
.col-hero h1{margin:0 0 12px;font:700 clamp(40px,7vw,68px)/1 var(--serif);letter-spacing:-.02em}.col-hero h1 span{color:var(--brass)}
.col-hero-copy{margin:0 0 18px;color:#d6d3c4;font-size:17px;line-height:1.65}
.col-setup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.col-setup>#player-name{max-width:320px}.col-skin-field{max-width:320px;flex:none}.col-skin-field small{color:var(--muted);font:400 11px/1.4 system-ui}.col-setup>.col-note{grid-column:1/-1;margin:0}
.col-entry-card{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.col-entry-card h2{margin:0 0 4px;font:700 22px/1.2 var(--serif)}.col-entry-card>p{margin:0 0 14px;color:var(--muted);font-size:14px}
.col-entry-row{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:10px}
.col-field{display:grid;gap:6px;flex:1 1 180px;color:#c9d0cc;font:700 12px/1.4 system-ui,sans-serif}
.col-lobby{max-width:640px}.col-lobby>.col-field{max-width:260px}
.col-cast-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.col-cast-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;color:#c5ccc8;font-size:13px;line-height:1.45}
.col-cast-list strong{color:#f4ecd6;font-size:14px}.col-cast-list small{color:var(--brass);font:12px var(--mono)}
.col-error{position:fixed;z-index:40;top:58px;left:50%;transform:translateX(-50%);max-width:min(560px,calc(100vw - 24px));margin:0;padding:10px 14px;background:#51262a;color:#ffe1df;border:1px solid #df8985;border-radius:8px;font-size:14px}
.col-connection{min-height:20px;margin:0 auto;max-width:1020px;padding:0 20px;color:#acd9e6;font:700 12px/1.5 var(--mono)}
.at-table .col-connection{position:fixed;z-index:30;top:15px;left:50%;transform:translateX(-50%);padding:0;max-width:34vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;text-shadow:0 1px 3px #000}
.col-connection:empty{display:none}

/* The table */
.at-table{height:100vh;height:100dvh;overflow:hidden}
.col-match{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
.col-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 12px;background:#0b0f13d9;border-bottom:1px solid #2a343b}
.col-bar-title{display:flex;align-items:baseline;gap:12px;min-width:0}
.col-bar-home{font:700 18px/1.2 var(--serif);text-decoration:none;white-space:nowrap}
.col-bar-room,.col-bar-seat{color:var(--muted);font:12px/1.4 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-bar-actions{display:flex;gap:6px;flex:none}.col-page select.col-skin-pick{width:auto;min-height:34px;padding:4px 6px;font-size:13px;font-weight:700;background:#131b21cc;border-color:#566772;border-radius:8px}
.col-table{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;min-height:0;padding:8px 12px 10px}
.col-rivals{display:flex;justify-content:center;gap:10px;min-width:0}
.col-seat{position:relative;flex:0 1 300px;min-width:0;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--seat,#888);border-radius:12px}
.col-seat.current{border-color:var(--brass);border-top-color:var(--seat);box-shadow:0 0 0 1px var(--brass),0 0 22px #e3b45c40}
.col-seat.winner{box-shadow:0 0 0 2px var(--brass),0 0 28px #e3b45c66}
.col-seat-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.col-face{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff2e,#0000 60%),var(--seat,#888);border:2px solid #0b1014;box-shadow:0 0 0 1px var(--seat,#888)}
.col-face-initial{color:#11161b;font:700 20px/1 var(--serif)}
.col-face .col-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.col-face-mark{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--seat,#888);color:#0b1014;border:2px solid #0b1014;font:700 9px/1 system-ui}
.col-seat-name{display:flex;align-items:center;gap:6px;min-width:0}.col-seat-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.col-seat-role{display:block;color:var(--muted);font:11px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-chip{flex:none;padding:2px 6px;border-radius:4px;background:#26323b;color:#c4cdd0;font:700 10px/1.3 var(--mono);letter-spacing:.08em}
.col-chip.live{background:var(--brass);color:#1b1408}
.col-seat-points{text-align:right;line-height:1}.col-seat-points b{font:700 24px/1 var(--serif);color:#f6dfa9}.col-seat-points small{display:block;color:var(--muted);font:10px var(--mono)}
.col-seat-stats{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:6px}
.col-stat{font:12px var(--mono);color:var(--muted)}.col-stat b{color:#f1ead8;font-size:13px;margin-right:4px}
.col-award{padding:2px 7px;border-radius:999px;background:#3c2f16;color:#f6dfa9;border:1px solid #8c6d2f;font:700 10px/1.4 var(--mono);letter-spacing:.04em}
.col-bubble{position:absolute;z-index:6;left:10px;right:10px;top:calc(100% + 6px);margin:0;padding:6px 10px;background:var(--paper);color:#1c1a14;border-radius:4px 12px 12px 12px;font:13px/1.35 var(--serif);box-shadow:0 8px 20px #0009;animation:col-pop .18s ease-out;pointer-events:none}
.col-seat.mine .col-bubble{top:auto;bottom:calc(100% + 6px);border-radius:12px 12px 12px 4px}
.col-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,330px);gap:12px;min-height:0}
.col-island{position:relative;min-width:0;min-height:0;border:1px solid #2b5563;border-radius:18px;background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,#0000 1px 40px),repeating-linear-gradient(90deg,#ffffff0d 0 1px,#0000 1px 40px),radial-gradient(ellipse at 50% 45%,#1b4a59,#0f2a35 75%);box-shadow:inset 0 0 60px #04121899,0 14px 40px #0008}
.col-island.has-art{background:var(--art) center/cover}
.col-board{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);overflow:visible}
.col-now{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.col-phase{padding-left:10px;border-left:4px solid #55646d}.col-phase.active{border-left-color:var(--brass)}
.col-phase>span{color:var(--brass);font:700 11px/1.4 var(--mono);letter-spacing:.14em}
.col-phase h2{margin:2px 0 2px;font:700 20px/1.2 var(--serif)}.col-phase p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.col-ticker{margin:0;padding:6px 10px;background:#0b1014aa;border-left:2px solid #55646d;color:#d6d8cc;font:12px/1.45 var(--mono)}
.col-dice{display:flex;align-items:center;gap:8px}.col-dice b{font:700 20px var(--serif);color:#f6dfa9}.col-dice b.seven{color:#ff9a8f}
.col-die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:36px;height:36px;padding:5px;background:var(--paper);border-radius:7px;box-shadow:inset 0 -3px 0 #cdbf9c,0 3px 8px #0008;animation:col-roll .4s ease-out}
.col-die i{width:6px;height:6px;border-radius:50%;background:#2a2118;place-self:center}
.face-1 i{grid-area:2/2}.face-2 i:nth-child(1),.face-3 i:nth-child(1),.face-4 i:nth-child(1),.face-5 i:nth-child(1),.face-6 i:nth-child(1){grid-area:1/1}
.face-2 i:nth-child(2),.face-3 i:nth-child(2),.face-4 i:nth-child(2),.face-5 i:nth-child(2),.face-6 i:nth-child(2){grid-area:3/3}
.face-3 i:nth-child(3),.face-5 i:nth-child(5){grid-area:2/2}
.face-4 i:nth-child(3),.face-5 i:nth-child(3),.face-6 i:nth-child(3){grid-area:1/3}.face-4 i:nth-child(4),.face-5 i:nth-child(4),.face-6 i:nth-child(4){grid-area:3/1}
.face-6 i:nth-child(5){grid-area:2/1}.face-6 i:nth-child(6){grid-area:2/3}
.col-decision{display:grid;gap:8px}
.col-decision>button,.col-choices>button{width:100%}
.col-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.col-arming,.col-confirm,.col-offer{display:grid;gap:8px;padding:10px;background:#2b2413;border:1px solid #8c6d2f;border-radius:10px}
.col-arming{grid-template-columns:1fr auto;align-items:center}
.col-arming p,.col-confirm p,.col-offer p{margin:0;color:#f6dfa9;font-size:13px;line-height:1.4}
.col-choices{display:grid;gap:6px}.col-choices.goods{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
.col-page button.col-good-button{background:var(--good);color:var(--good-ink);border-top-color:#fff5;border-right-color:#fff5;border-bottom-color:#fff5;border-left-color:#fff5}
.col-disclosure{padding:8px 10px;background:#0c1319;border:1px solid #2c3a44;border-radius:8px}.col-disclosure summary{cursor:pointer;color:var(--muted);font:12px var(--mono)}.col-disclosure>*:not(summary){margin-top:8px}
.col-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;align-items:end}.col-inline label{display:grid;gap:4px;font:700 12px system-ui;color:#c9d0cc}
.col-trade{display:grid;gap:10px}.col-form{display:grid;gap:8px;margin:0}
.col-trade-box{display:grid;gap:8px;min-width:0;margin:0;padding:10px;border:1px solid #2c3a44;border-radius:10px}.col-trade-box legend{padding:0 6px;color:var(--brass);font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.col-trade-box>label{display:grid;gap:4px;font:700 12px system-ui;color:#c9d0cc}
.col-trade-sides{display:grid;gap:8px}.col-trade-sides h4{margin:0 0 4px;font:700 12px system-ui;color:#c9d0cc}
.col-steppers{display:grid;gap:4px}
.col-stepper{display:grid;grid-template-columns:minmax(0,1fr) 34px 46px 34px;gap:4px;align-items:center;padding:3px 3px 3px 8px;border-left:5px solid var(--good);background:#0c1319;border-radius:6px;font-size:13px}
.col-stepper-name small{color:var(--muted);font:11px var(--mono)}
.col-page .col-stepper input{min-height:34px;padding:4px;text-align:center;-moz-appearance:textfield}.col-stepper input::-webkit-outer-spin-button,.col-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.col-page button.col-step{min-height:34px;padding:0;background:#1b262e;color:#eef0e6;border-top-color:#566772;border-right-color:#566772;border-bottom-color:#566772;border-left-color:#566772;font-size:18px}
.col-tally{margin:0;color:var(--muted);font:700 13px var(--mono)}.col-tally.ready{color:#b9e39a}
.col-bot-note{margin:0;padding:8px 10px;background:#2b2413;color:#f1d9a0;border-left:3px solid #e0a955;font-size:12px;line-height:1.45}
.col-reader{margin:auto 0 0;padding:8px 10px;border-top:1px dashed #3a4852;color:#dfe2d6;font:13px/1.5 var(--serif);min-height:56px}.col-reader.idle{color:#7f8b8e;font-style:italic}

/* Goods */
.good-timber{--good:#2f6a4f;--good-ink:#eaf6ec}.good-clay{--good:#a9503f;--good-ink:#fff0e9}.good-fleece{--good:#9dbb72;--good-ink:#18220f}.good-grain{--good:#d1a23f;--good-ink:#231904}.good-ore{--good:#66727f;--good-ink:#f0f4f7}
.col-pip{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:4px;background:var(--good);color:var(--good-ink);font:700 10px/1 var(--mono);font-style:normal;box-shadow:inset 0 0 0 1px #0005}
.col-cost{display:inline-flex;gap:2px}

/* Your side of the table */
.col-you{display:grid;grid-template-columns:minmax(220px,290px) auto minmax(0,1fr) auto;gap:14px;align-items:end;min-width:0}
.col-you.watching{display:block;text-align:center}
.col-you .col-seat{flex:none}
.col-hand{display:flex;align-items:flex-end;padding:8px 6px 0}
.col-card{position:relative;flex:none;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:68px;height:94px;padding:6px 4px;overflow:hidden;border-radius:9px;background:linear-gradient(160deg,#ffffff38,#0000 45%),var(--good,#d9cba6);color:var(--good-ink,#231d12);border:2px solid var(--paper);box-shadow:0 6px 14px #000a;transition:transform .15s ease}
.col-hand .col-card{margin-left:-12px;transform-origin:50% 140%}.col-hand .col-card:first-child{margin-left:0}
.col-hand .col-card:nth-child(1){transform:rotate(-8deg) translateY(5px)}.col-hand .col-card:nth-child(2){transform:rotate(-4deg)}.col-hand .col-card:nth-child(4){transform:rotate(4deg)}.col-hand .col-card:nth-child(5){transform:rotate(8deg) translateY(5px)}
.col-hand .col-card:hover{transform:translateY(-8px);z-index:2}
.col-card.none{filter:saturate(.35) brightness(.6)}
.col-card .col-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.col-card-letter{position:absolute;top:8px;left:0;right:0;text-align:center;font:700 34px/1 var(--serif);opacity:.5}.col-card.has-art .col-card-letter{display:none}
.col-card-name{position:relative;font:700 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.col-card.has-art .col-card-name{width:calc(100% + 8px);margin:0 -4px -6px;padding:3px 2px 5px;background:#0b1014cc;color:#f1ead8}
.col-card-count{position:absolute;top:-1px;right:-1px;min-width:26px;padding:3px 6px;border-radius:0 7px 0 9px;background:#0b1014;color:#f6dfa9;font:700 13px/1.1 var(--mono);text-align:center}
.col-dev-hand{display:flex;gap:6px;align-items:flex-end;min-width:0;overflow-x:auto;padding:8px 2px 0}
.col-card.dev{--good:#e9dcba;--good-ink:#231d12;width:62px;height:86px;border-color:#8c6d2f;justify-content:center;gap:4px}
.col-page button.col-card.dev{min-height:0;padding:6px 4px;font:inherit;border-radius:9px;border-top:2px solid var(--brass);border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);border-left:2px solid var(--brass);background:linear-gradient(160deg,#fff8,#0000 45%),#f3e6c0;color:#231d12}
.col-card.dev.playable{box-shadow:0 0 0 2px #e3b45c66,0 6px 16px #000a}
.col-card-note{position:relative;font:10px/1.2 var(--mono);opacity:.75}
.col-no-dev{align-self:center;white-space:nowrap}
.col-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.col-page button.col-price{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:1px 8px;align-items:center;min-height:44px;min-width:150px;padding:5px 10px;text-align:left;background:#131b21e6;color:#eef0e6;border-top-color:#566772;border-right-color:#566772;border-bottom-color:#566772;border-left-color:#566772}
.col-price-name{font:700 13px/1.2 system-ui}.col-price .col-cost{justify-self:end}.col-price-left{grid-column:1/-1;color:var(--muted);font:10px/1.2 var(--mono)}
.col-page button.col-price:not(:disabled){border-top-color:var(--brass);border-right-color:var(--brass);border-bottom-color:var(--brass);border-left-color:var(--brass)}
.col-page button.col-price.armed{background:var(--brass);color:#1b1408}.col-price.armed .col-price-left{color:#3b2c0c}

/* The chart */
.col-shore{fill:var(--shore,#d9c592);stroke:var(--shore,#d9c592);stroke-width:22;stroke-linejoin:round;filter:drop-shadow(0 10px 14px #0007)}
.col-hex-edge{fill:none;stroke:var(--edge,#f3e6c4);stroke-width:3;stroke-linejoin:round;opacity:.75}
.col-hex.has-art .col-hex-ground,.col-hex.has-art .terrain-art{display:none}
.terrain-art{fill:none;stroke:#f7edce99;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.terrain-fleece{fill:#f7edce55}.terrain-desert{fill:#f7edce99;stroke:none}
.terrain-label,.number-label,.pip-label,.piece-label,.port-label,.port-kind,.raider-label,.target-plus{text-anchor:middle;font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace}
.terrain-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:#fff;paint-order:stroke;stroke:#10181dcc;stroke-width:4px;stroke-linejoin:round}
.number-token{fill:#f1e6c9;stroke:#3d2f1f;stroke-width:2.5}.number-label{font-family:Georgia,serif;font-size:25px;font-weight:700;fill:#2a2118}.number-label.hot,.pip-label.hot{fill:#b02a22}.pip-label{font-size:11px;fill:#2a2118}
.col-hex.rolled .number-token{stroke:#fff3b0;stroke-width:5;animation:col-glow 1.2s ease-out 2}
.col-hex.raided .number-token,.col-hex.raided .number-label,.col-hex.raided .pip-label{opacity:.45}.col-hex.raided .terrain-art{display:none}
.col-hex-hit{fill:#0000;pointer-events:all}.col-hex-pick{fill:#ffdc7910;stroke:#ffdc79;stroke-width:5;stroke-dasharray:12 9;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 0 2px #000)}
.col-pier{fill:none;stroke:#c9b27a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 7}
.col-port-disc{fill:#0e1c23;stroke:#c9b27a;stroke-width:4}.port-label{font-size:14px;font-weight:700;fill:#f6efd8}.port-kind{font-size:8px;letter-spacing:.06em;text-transform:uppercase;fill:#c9d6d6}
.road-bed{stroke:#0b1014;stroke-width:16;stroke-linecap:round}
.road-built{stroke-width:10;stroke-linecap:round}
.piece-label{font-size:11px;font-weight:700;fill:#0b1014;pointer-events:none}
.building path{stroke:#0b1014;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 3px 2px #0009)}
.building .piece-label{font-size:13px}
.road-hit{stroke:#0000;stroke-width:40;stroke-linecap:round;pointer-events:stroke}
.road-target-line{stroke:#ffdc79;stroke-width:10;stroke-linecap:round;stroke-dasharray:12 10;opacity:.95}
.junction-hit{fill:#0000;pointer-events:all}
.junction-ring{fill:#ffdc7930;stroke:#ffdc79;stroke-width:4}.building .junction-ring{fill:none;stroke-dasharray:8 6}
.target-plus{font-size:20px;font-weight:700;fill:#fff;pointer-events:none}
.col-target{cursor:pointer;outline:none}
.col-target:hover .road-target-line,.col-target.selected .road-target-line,.col-target:focus-visible .road-target-line{stroke:#fff;stroke-width:15;stroke-dasharray:none}
.col-target:hover .col-hex-pick,.col-target.selected .col-hex-pick,.col-target:focus-visible .col-hex-pick{fill:#ffdc7940;stroke:#fff;stroke-width:8;stroke-dasharray:none}
.col-target:hover .junction-ring,.col-target.selected .junction-ring,.col-target:focus-visible .junction-ring{fill:#ffdc7999;stroke:#fff;stroke-width:6}
.col-target:focus-visible{filter:drop-shadow(0 0 8px #fff5a8)}
.col-raider{pointer-events:none}.col-raider.has-art .raider{display:none}.raider{fill:#0b0d10;stroke:var(--brass);stroke-width:3}.raider-label{font-size:10px;font-weight:700;letter-spacing:.14em;fill:#ffe49e;paint-order:stroke;stroke:#10181d;stroke-width:4px}
.fresh{animation:col-land .45s cubic-bezier(.2,1.4,.4,1) backwards;transform-box:fill-box;transform-origin:center}

/* Drawer, results, rules */
.col-side{position:fixed;z-index:20;top:0;right:0;bottom:0;width:min(360px,92vw);display:flex;flex-direction:column;gap:12px;padding:14px;overflow:auto;background:#0e141af5;border-left:1px solid var(--line);box-shadow:-20px 0 50px #000a}
.col-side-head{display:flex;justify-content:space-between;align-items:center}.col-side h2{margin:0;font:700 18px var(--serif)}.col-side .room-chat{margin:0}
.col-log{list-style:none;margin:0;padding:0 0 0 10px;border-left:2px solid #2c3a44;display:grid;gap:6px;color:#c3ccca;font:12px/1.45 var(--mono)}.col-log li:first-child{color:#f6dfa9}
.col-supply{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}.col-supply li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:14px}.col-supply b{font-family:var(--mono)}
.col-order,.col-trust{margin:0;color:var(--muted);font:12px/1.5 var(--mono)}
.col-results{position:fixed;z-index:15;top:54px;left:50%;transform:translateX(-50%)}
.col-results .results-dialog{max-width:min(960px,calc(100vw - 24px))}.col-results .results-table-wrap{overflow-x:auto}.col-results .results-dialog table{min-width:720px}.col-results .results-dialog th:first-child,.col-results .results-dialog td:first-child{min-width:140px;white-space:normal}.col-results .results-summary{font-size:16px;color:#f1e0bb}
.col-results label{display:grid;gap:4px;font:700 12px system-ui}
.col-rules{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:22px;background:#141d24;color:#f1ead8;border:1px solid #5d6e78;border-radius:14px}.col-rules::backdrop{background:#03080bc4}
.col-rules-head{display:flex;justify-content:space-between;align-items:center}.col-rules h2{margin:10px 0;font:700 26px/1.2 var(--serif)}.col-rules h3{margin:20px 0 6px;font:700 18px var(--serif)}
.col-rules p,.col-rules li{color:#c9d0cc;font-size:15px;line-height:1.6}.col-rules ul{padding-left:20px}.col-rules li{margin:6px 0}.col-rules strong{color:#f6dfa9}

@keyframes col-pop{from{opacity:0;transform:translateY(-4px)}}
@keyframes col-land{from{opacity:0;transform:translateY(-16px) scale(1.35)}}
@keyframes col-roll{from{transform:rotate(-140deg) scale(.6);opacity:.3}}
@keyframes col-glow{50%{stroke:#ffd65a;stroke-width:9}}

/* Short windows: tighten before anything is covered. */
@media(max-height:760px) and (min-width:761px){
 .col-seat{padding:5px 9px}.col-face{width:34px;height:34px}.col-seat-stats{margin-top:3px}.col-card{width:58px;height:78px}.col-card.dev{width:54px;height:72px}.col-card-letter{font-size:26px}.col-page button.col-price{min-height:38px;padding:3px 9px}.col-table{gap:6px;padding-top:6px}
}
@media(max-width:1100px) and (min-width:761px){
 .col-you{grid-template-columns:minmax(180px,220px) auto minmax(0,1fr)}.col-prices{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}.col-page button.col-price{min-width:0}
}
/* Phone: founders become a swipe row, the chart takes the full width, the hand is a strip of whole cards. */
@media(max-width:760px){
 .col-setup{grid-template-columns:1fr}.col-hero{grid-template-columns:1fr}.col-hero-art{grid-column:1;grid-row:auto}.at-table .col-connection{top:46px;max-width:90vw;font-size:10px;background:#0b1014cc;padding:1px 6px;border-radius:0 0 6px 6px}.col-page select.col-skin-pick{min-height:36px;max-width:74px;padding:4px 2px;font-size:12px}.col-entry{padding:24px 14px 40px}.col-top-tag{display:none}
 .col-bar{padding:5px 6px;gap:6px}.col-bar-room,.col-bar-seat{display:none}.col-bar-title{flex:0 1 auto;overflow:hidden}.col-bar-home{font-size:15px;overflow:hidden;text-overflow:ellipsis}.col-bar-actions{gap:4px}.col-page button.ghost{min-height:36px;padding:5px 8px;font-size:12px}
 .col-table{padding:6px 6px 6px;gap:6px}
 .col-rivals{justify-content:flex-start;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
 .col-rivals .col-seat{flex:1 0 150px;padding:5px 7px}.col-rivals .col-face{width:30px;height:30px}.col-rivals .col-face-initial{font-size:15px}.col-rivals .col-seat-head{gap:7px}.col-seat-role{display:none}.col-seat-points b{font-size:19px}.col-seat-stats{gap:2px 8px;margin-top:3px}.col-stat{font-size:11px}
 .col-bubble{left:0;right:0;font-size:12px;padding:5px 8px}
 .col-stage{display:block;overflow-y:auto;overscroll-behavior:contain}
 .col-island{height:clamp(250px,calc(100dvh - 478px),105vw)}
 .col-now{margin-top:6px;overflow:visible;padding:8px 10px;gap:8px}
 .col-phase{order:0}.col-decision{order:1}.col-ticker,.col-dice{order:2}.col-reader{order:3;min-height:0}
 .col-phase h2{font-size:16px;margin:0}.col-phase p{font-size:12px}.col-phase>span{font-size:10px}
 .col-you{grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
 .col-you .col-seat{grid-column:1/-1;padding:4px 8px}.col-you .col-face{width:28px;height:28px}.col-you .col-face-initial{font-size:14px}.col-you .col-seat-points b{font-size:18px}
 .col-hand{padding:0;gap:4px}.col-hand .col-card,.col-hand .col-card:nth-child(n){margin-left:0;transform:none}
 .col-card{width:46px;height:60px;border-radius:7px;padding:4px 2px}.col-card-letter{font-size:20px;top:14px}.col-card-name{font-size:8px;letter-spacing:0}.col-card-count{font-size:11px;min-width:20px;padding:2px 4px}
 .col-dev-hand{padding:0;justify-content:flex-end}.col-no-dev{display:none}.col-card.dev{width:46px;height:60px}.col-card.dev .col-card-name{font-size:8px}.col-card-note{font-size:8px}
 .col-prices{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .col-page button.col-price{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:46px;padding:4px 2px}.col-price-name{font-size:11px}.col-price-left{display:none}.col-pip{width:13px;height:13px;font-size:8px}.col-cost{gap:1px}
 .col-actions{grid-template-columns:1fr 1fr}
 .col-terrain-small{display:none}
}
@media(prefers-reduced-motion:reduce){.col-page *,.col-page *::before{animation:none!important;transition:none!important}}
/* Skins: a few colours each. Pictures come from skins/<id>/art/ through art.js. */
body[data-skin="ink"]{--brass:#dcb876;--shore:#e6d8b2;--edge:#4a3a26;--sea:#17363f}
body[data-skin="paper"]{--brass:#eab765;--shore:#ead9b0;--edge:#fff6dc}
body[data-skin="print"]{--brass:#f0b84a;--shore:#ecd28f;--edge:#10222a}
:root[data-spectator] .col-lobby>label{display:none}