@font-face { font-family: Figtree; src: url(assets/fonts/figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: Bricolage; src: url(assets/fonts/bricolage.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
:root { color-scheme: dark; --bg: oklch(.2 .02 55); --panel: oklch(.26 .026 55); --panel-2: oklch(.31 .03 55); --border: oklch(.4 .035 60); --fg: oklch(.94 .012 80); --muted: oklch(.74 .025 70); --accent: oklch(.82 .15 80); --on-accent: oklch(.22 .03 60); --sea: oklch(.46 .085 235); --sea-deep: oklch(.34 .07 240); --danger: oklch(.5 .17 27); --shadow: oklch(.12 .03 55 / .55); --font-body: Figtree, system-ui, sans-serif; --font-display: Bricolage, Figtree, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 var(--font-body); background: var(--bg); color: var(--fg); }
button { font: inherit; padding: .4em .9em; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); box-shadow: inset 0 1px 0 oklch(1 0 0 / .08), 0 1px 2px var(--shadow); transition: transform .12s cubic-bezier(.16,1,.3,1), background .12s; color: var(--fg); cursor: pointer; }
button:hover:not(:disabled) { background: oklch(.37 .04 60); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select { font: inherit; padding: .3em .5em; border-radius: 6px; border: 1px solid var(--border); background: oklch(.96 .01 80); color: var(--on-accent); }
h1, h2, h3 { margin: 0 0 .4em; font-family: var(--font-display); }
h2 { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
h3 { font-size: .95em; }
ul { list-style: none; margin: 0; padding: 0; }

.join, .lobby { max-width: 360px; margin: 10vh auto; padding: 1.5em; background: var(--panel); border-radius: 10px; display: flex; flex-direction: column; gap: .8em; }
.field { display: flex; flex-direction: column; gap: .2em; }
.lobby li { padding: .2em 0; } .lobby li.me { font-weight: bold; }
.hint { color: var(--muted); font-size: .9em; margin: .3em 0; }

.banner { font-family: var(--font-display); padding: .6em 1em; background: var(--panel); font-weight: 600; border-bottom: 2px solid var(--accent); }
.banner.over { background: var(--accent); color: var(--on-accent); font-size: 1.2em; }
.banner .roll { font-weight: normal; color: var(--muted); }
.die { display: inline-grid; place-items: center; width: 2em; height: 2em; margin-left: .3em; vertical-align: middle; border-radius: .35em; background: oklch(.97 .01 80); color: var(--on-accent); font-weight: 800; font-size: 1.3em; box-shadow: inset 0 -3px 0 oklch(.8 .02 70), 0 2px 6px var(--shadow); animation: die-roll .7s cubic-bezier(.2,.9,.3,1.2); }
.die.seven { background: var(--danger); color: var(--fg); box-shadow: inset 0 -3px 0 oklch(.38 .14 27), 0 2px 6px var(--shadow); }
@keyframes die-roll { 0% { transform: translateY(-1.2em) rotate(-540deg) scale(.4); opacity: 0; } 60% { transform: translateY(0) rotate(15deg) scale(1.35); opacity: 1; } 80% { transform: rotate(-6deg) scale(.95); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .die { animation: none; } }
.layout { display: flex; gap: 1em; padding: 1em; align-items: flex-start; }
.board-wrap { flex: 1 1 60%; min-width: 0; }
.side { flex: 0 0 340px; display: flex; flex-direction: column; gap: .8em; }
@media (max-width: 800px) { .layout { flex-direction: column; } .side { flex-basis: auto; width: 100%; } .board-wrap { width: 100%; } }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: .9em 1em; box-shadow: 0 2px 8px var(--shadow); }
.panel.bank, .panel.log { background: var(--bg); box-shadow: none; opacity: .92; }
.side { max-height: calc(100vh - 4.5em); overflow-y: auto; padding-right: .2em; }
.group { margin-bottom: .8em; }
.row { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin: .3em 0; }
.picker .lbl { flex: 1; } .picker output { min-width: 1.5em; text-align: center; }
.swatch { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 2px solid oklch(.15 .02 55); margin-right: .4em; vertical-align: -.1em; }
.players li { padding: .45em .6em; border-radius: 8px; } .players li.current { background: oklch(.82 .15 80 / .16); outline: 1px solid oklch(.82 .15 80 / .5); }
.players .stats { color: var(--muted); font-size: .85em; }
.turn { color: var(--accent); }
.badge { margin-left: .5em; padding: 0 .4em; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-size: .75em; font-weight: 600; }
.cards, .devs { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .4em; }
.card, .dev { padding: .2em .6em; border-radius: 6px; border: 1px solid oklch(.15 .02 55 / .6); color: oklch(.18 .02 55); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 oklch(1 0 0 / .25); }
.card.Brick { background: oklch(.62 .14 40); } .card.Lumber { background: oklch(.63 .13 150); } .card.Wool { background: oklch(.84 .15 130); } .card.Grain { background: oklch(.84 .15 90); } .card.Ore { background: oklch(.74 .015 250); }
.dev { background: oklch(.9 .02 80); } .dev.new { opacity: .6; font-style: italic; } .devs.none { color: var(--muted); }

.board { width: 100%; height: auto; max-height: 85vh; background: radial-gradient(circle at 50% 45%, var(--sea), var(--sea-deep)); border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 6px 24px var(--shadow); display: block; }
.tile { stroke: oklch(.3 .04 70); stroke-width: 2; filter: url(#shade); }
.num { font: 800 16px var(--font-display); font-variant-numeric: tabular-nums; } .num.hot { font-weight: 900; }
.harbor_label { font: 700 9px var(--font-body); fill: oklch(.28 .05 70); }
.target { fill: rgba(255,255,255,.55); stroke: var(--accent); stroke-width: 3; cursor: pointer; animation: pulse 1.2s ease-in-out infinite; }
.edge_target { fill: none; stroke: rgba(242,184,75,.8); stroke-width: 12; }
polygon.tile.target { fill-opacity: .8; stroke: var(--accent); stroke-width: 4; animation: none; }
polygon.tile.selected { stroke: var(--fg); stroke-width: 5; }
.target:hover { fill: var(--accent); }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .target { animation: none; } }

.disconnected { position: sticky; top: 0; z-index: 10; background: var(--danger); color: var(--fg); padding: .5em 1em; }
.toast { position: fixed; bottom: 1em; left: 50%; transform: translateX(-50%); background: var(--danger); color: var(--fg); padding: .6em 1.2em; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.4); z-index: 20; }
.offer { padding: .5em; border: 1px dashed var(--accent); border-radius: 6px; margin-top: .5em; }
.top { display: flex; justify-content: flex-end; padding: .3em 1em; background: oklch(.16 .02 55); }
.top button { font-size: .85em; padding: .15em .6em; }
.log-lines { max-height: 200px; overflow-y: auto; margin: 0; padding-left: 1.6em; font-size: .85em; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 15; }
.end { background: var(--panel); padding: 1.5em 2em; border-radius: 10px; min-width: 280px; display: flex; flex-direction: column; gap: .8em; }
.end ol { margin: 0; padding-left: 1.4em; } .end li.winner { font-weight: bold; color: var(--accent); }