:root{--font-display: "Amiri", "Scheherazade New", ui-serif, serif;--font-body: "Cairo", ui-sans-serif, system-ui, sans-serif;--font-outlier: "Reem Kufi", "Cairo", sans-serif;--text-xs: .75rem;--text-sm: .84375rem;--text-md: 1rem;--text-lg: 1.3125rem;--text-xl: 1.75rem;--text-2xl: 2.375rem;--text-3xl: 3.125rem;--night: oklch(.13 .018 272);--night-2: oklch(.17 .02 272);--night-3: oklch(.21 .022 272);--night-4: oklch(.26 .024 272);--brass: oklch(.82 .1 82);--lapis: oklch(.6 .13 265);--ivory: oklch(.93 .015 80);--ivory-2: oklch(.72 .02 80);--cedar: oklch(.45 .08 45);--turquoise: oklch(.74 .1 195);--ruby: oklch(.62 .17 20);--parchment: oklch(.96 .02 80);--ink: oklch(.2 .03 265);--color-bg: var(--night);--color-surface: var(--night-2);--color-surface-2: var(--night-3);--color-surface-3: var(--night-4);--color-text: var(--ivory);--color-text-muted: var(--ivory-2);--color-accent: var(--lapis);--color-accent-2: var(--brass);--color-positive: var(--turquoise);--color-danger: var(--ruby);--color-border: oklch(.93 .015 80 / .08);--color-frame: var(--cedar);--terrain-forest: oklch(.38 .08 150);--terrain-hills: oklch(.55 .14 40);--terrain-pasture: oklch(.68 .12 130);--terrain-fields: oklch(.8 .14 90);--terrain-mountains: oklch(.5 .03 265);--terrain-desert: oklch(.85 .06 85);--terrain-sea: oklch(.24 .05 245);--sea-deep: oklch(.25 .06 250);--sea-shallow: oklch(.36 .075 235);--player-1: oklch(.62 .16 265);--player-2: oklch(.82 .15 85);--player-3: oklch(.74 .12 195);--player-4: oklch(.62 .19 20);--player-5: oklch(.66 .14 155);--player-6: oklch(.93 .03 85);--player-7: oklch(.66 .16 310);--player-8: oklch(.68 .13 50);--radius-control: 8px;--radius-card: 14px;--radius-pill: 999px;--shadow-soft: 0 10px 30px oklch(0 0 0 / .35), 0 1px 0 oklch(.93 .015 80 / .06) inset;--shadow-raise: 0 18px 40px oklch(0 0 0 / .5);--ease-fast: .16s ease-out;--ease-slow: .4s ease-out;--ease-spring: cubic-bezier(.16, 1, .3, 1);--dur-press: .1s;--dur-settle: .22s;--radius-button: var(--radius-pill);--btn-bg: var(--color-surface-3);--btn-fg: var(--color-text);--btn-line: var(--color-border);--btn-ring: var(--color-accent-2);--btn-primary-bg: var(--lapis);--btn-primary-fg: var(--ivory);--btn-primary-shadow: 0 6px 16px oklch(.6 .13 265 / .3);--control-on: var(--color-positive);--control-panel: var(--color-surface-2);--control-shadow: var(--shadow-raise);--target-fill: oklch(.96 .01 80 / .28);--target-fill-hot: oklch(.96 .01 80 / .6);--target-line: oklch(.98 .005 80 / .85);--hex-seam: oklch(.24 .05 245 / .55);--piece-edge: var(--ivory);--piece-inlay: oklch(.96 .01 80 / .7);--piece-door: oklch(.13 .018 272 / .55);--die-face: var(--ivory);--die-edge: oklch(.8 .02 80);--die-pip: var(--night)}:root[data-theme=light]{--color-bg: var(--parchment);--color-surface: oklch(.985 .012 80);--color-surface-2: oklch(.95 .02 80);--color-surface-3: oklch(.91 .025 80);--color-text: var(--ink);--color-text-muted: oklch(.45 .03 265);--color-accent: oklch(.42 .16 265);--color-border: oklch(.2 .03 265 / .1);--shadow-soft: 0 10px 30px oklch(.2 .03 265 / .12)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-md);line-height:1.55;min-height:100dvh}h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:400;line-height:1.1;margin:0;overflow-wrap:anywhere;min-width:0}a{color:var(--color-accent-2)}button,input{font:inherit}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.page{padding:2rem 16px 4rem;max-width:44rem;margin:0 auto}.wordmark{font-family:var(--font-outlier);font-size:var(--text-3xl);line-height:1;margin:0;color:var(--color-accent-2)}h1{font-size:var(--text-2xl);margin:.25rem 0 .5rem}h2{font-size:var(--text-lg);margin:0 0 .5rem}h3{font-size:var(--text-md);font-family:var(--font-body);font-weight:600;margin:.75rem 0 .25rem}.lede{font-size:var(--text-lg);max-width:32ch}.muted{color:var(--color-text-muted)}.small{font-size:var(--text-sm)}.error{color:var(--color-danger)}.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.wrap{flex-wrap:wrap}.rule{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin:1.5rem 0;color:var(--color-accent-2)}.rule>span{height:1px;background:var(--color-border)}.btn{--_bg: var(--btn-bg);--_fg: var(--btn-fg);--_line: var(--btn-line);--_shadow: 0 0 0 transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:2.5rem;padding:0 1.1rem;font:inherit;font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);line-height:1.1;color:var(--_fg);background:var(--_bg);border:0;border-radius:var(--radius-button);box-shadow:inset 0 0 0 1px var(--_line),var(--_shadow);cursor:pointer;white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--ease-fast),color var(--ease-fast),box-shadow var(--ease-fast),transform var(--dur-settle) var(--ease-spring)}.btn:hover:not(:disabled){background:color-mix(in oklch,var(--_bg),var(--_fg) 10%)}.btn:active:not(:disabled){transform:scale(.96);transition-duration:var(--dur-press)}.btn:focus-visible{outline:2px solid var(--btn-ring);outline-offset:2px}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.is-selected,.btn[aria-pressed=true]{--_line: var(--btn-ring);box-shadow:inset 0 0 0 1.5px var(--_line)}.btn[aria-busy=true]{cursor:progress}.btn[aria-busy=true]:before{content:"";width:.9em;height:.9em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:btn-spin .7s linear infinite}.btn[data-state=success]{--_line: var(--control-on)}.btn[data-state=error]{--_line: var(--color-danger)}@keyframes btn-spin{to{transform:rotate(1turn)}}.btn-primary{--_bg: var(--btn-primary-bg);--_fg: var(--btn-primary-fg);--_line: transparent;--_shadow: var(--btn-primary-shadow)}.btn-ghost{--_bg: transparent;--_line: transparent}.btn-lg{min-height:3rem;padding:0 1.5rem;font-size:var(--text-md)}.btn-mini{min-height:1.85rem;padding:0 .75rem;font-size:var(--text-xs)}.btn-icon{padding:0;width:2.5rem;font-size:var(--text-md)}.btn-block{width:100%}.btn-arrow{transition:transform var(--dur-settle) var(--ease-spring)}.btn:hover:not(:disabled) .btn-arrow{transform:translate(3px)}@media(prefers-reduced-motion:reduce){.btn:active:not(:disabled){transform:none}.btn[aria-busy=true]:before{animation-duration:2s}}.select{position:relative;display:grid;gap:.4rem}.select-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted)}.select-trigger{justify-content:space-between;width:100%;font-weight:600}.select-chevron{transition:transform var(--dur-settle) var(--ease-spring)}.select-trigger[aria-expanded=true] .select-chevron{transform:rotate(180deg)}.select-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:10;margin:0;padding:.3rem;list-style:none;background:var(--control-panel);border-radius:var(--radius-card);box-shadow:var(--control-shadow),inset 0 0 0 1px var(--btn-line);transform-origin:top center;animation:select-in var(--dur-settle) var(--ease-spring)}.select-panel:focus{outline:none}.select.is-up .select-panel{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center}.select-option{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.5rem;padding:0 .85rem;border-radius:calc(var(--radius-card) - .3rem);font-size:var(--text-sm);color:var(--btn-fg);cursor:pointer;animation:select-item .18s var(--ease-spring) both;animation-delay:calc(var(--i) * 30ms)}.select-option.is-active{background:color-mix(in oklch,var(--control-panel),var(--btn-fg) 9%)}.select-option[aria-selected=true]{font-weight:700}.select-check{opacity:0}.select-option[aria-selected=true] .select-check{opacity:1}@keyframes select-in{0%{opacity:0;transform:translateY(-4px) scale(.96)}}@keyframes select-item{0%{opacity:0;transform:translateY(-3px)}}.switch{display:inline-flex;align-items:center;gap:.7rem;padding:0;font:inherit;font-weight:600;color:var(--btn-fg);background:none;border:0;cursor:pointer}.switch-track{position:relative;width:2.9rem;height:1.7rem;flex:none;border-radius:var(--radius-pill);background:var(--btn-bg);box-shadow:inset 0 0 0 1px var(--btn-line);transition:background-color var(--ease-fast)}.switch-thumb{position:absolute;top:.2rem;left:.2rem;width:1.3rem;height:1.3rem;border-radius:var(--radius-pill);background:var(--btn-fg);transform-origin:left center;transition:transform var(--dur-settle) var(--ease-spring),background-color var(--ease-fast)}.switch[aria-checked=true] .switch-track{background:var(--control-on)}.switch[aria-checked=true] .switch-thumb{transform:translate(1.2rem);transform-origin:right center;background:var(--btn-bg)}.switch:active:not(:disabled) .switch-thumb{transform:scaleX(1.25)}.switch[aria-checked=true]:active:not(:disabled) .switch-thumb{transform:translate(1.2rem) scaleX(1.25)}.switch:focus-visible{outline:none}.switch:focus-visible .switch-track{outline:2px solid var(--btn-ring);outline-offset:2px}.switch:disabled{opacity:.45;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.select-panel,.select-option{animation:none}.switch-thumb,.select-chevron{transition-duration:0ms}}input,select{font:inherit;color:var(--color-text);background:var(--color-surface);border:1px solid transparent;box-shadow:0 0 0 1px var(--color-border);border-radius:var(--radius-control);padding:.5rem .7rem;min-width:0}input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent-2);outline-offset:1px}.code-input{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.2em;text-transform:uppercase;width:9.5ch}.tag{font-size:var(--text-xs);font-weight:600;padding:.05rem .4rem;border:1px solid currentColor;border-radius:var(--radius-pill);line-height:1.4}.tag-muted{color:var(--color-text-muted)}.tag-ok{color:var(--color-positive)}.badge{font-size:var(--text-xs);background:var(--color-accent-2);color:var(--night);border-radius:var(--radius-pill);padding:0 .4rem;font-weight:700}.home-actions{display:grid;gap:1rem}.lobby-head{margin-bottom:.5rem}.seat-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.35rem}.seat-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}.seat-name{flex:1;font-weight:600;color:var(--color-text)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.75rem;margin-bottom:.75rem}.settings-grid label{display:grid;gap:.25rem;font-size:var(--text-sm);color:var(--color-text-muted)}.lobby-settings{margin-top:1.5rem}.game{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"board side" "bar side";height:100dvh;gap:8px;padding:8px}.rail{position:fixed;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;gap:.4rem;align-items:center}.rail .btn{--_shadow: var(--shadow-soft)}.rail-code{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:.15em;color:var(--color-text-muted)}.board-area{grid-area:board;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;gap:6px;background:var(--sea-deep);border-radius:var(--radius-card);overflow:hidden}.status{display:flex;align-items:center;justify-content:center;gap:1rem;font-family:var(--font-display);font-size:var(--text-lg);padding:.25rem 3rem;text-align:center}.timer{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);padding:.1rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-pill)}.timer-low{color:var(--color-danger);border-color:var(--color-danger)}.dice{display:inline-flex;gap:.3rem;--die-size: 1.7rem}.die{display:inline-grid;grid-template:repeat(3,1fr) / repeat(3,1fr);place-items:center;width:var(--die-size, 4.5rem);aspect-ratio:1;padding:calc(var(--die-size, 4.5rem) * .14);background:var(--die-face);border-radius:calc(var(--die-size, 4.5rem) * .22);box-shadow:inset 0 calc(var(--die-size, 4.5rem) * -.06) 0 var(--die-edge),var(--shadow-soft)}.die i{width:62%;aspect-ratio:1;border-radius:50%}.die i.on{background:var(--die-pip)}.dice-roll{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:1.25rem;pointer-events:none;--die-size: clamp(3.5rem, 7vw, 5.5rem)}.dice-roll.is-tumble .die{animation:die-tumble .7s var(--ease-spring) both}.dice-roll.is-tumble .die.second{animation-delay:60ms}.dice-roll.is-land .die{animation:die-land 1.1s var(--ease-spring) both}.dice-sum{position:absolute;top:calc(50% + var(--die-size) * .75);font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;color:var(--ivory);text-shadow:0 2px 10px oklch(0 0 0 / .5);animation:die-land 1.1s var(--ease-spring) both}@keyframes die-tumble{0%{transform:translateY(-120%) rotate(-200deg) scale(.6);opacity:0}45%{transform:translateY(8%) rotate(30deg) scale(1.04);opacity:1}70%{transform:translateY(-14%) rotate(-12deg)}to{transform:translateY(0) rotate(0) scale(1)}}@keyframes die-land{0%{transform:scale(1.08)}15%,80%{transform:scale(1);opacity:1}to{transform:scale(.85);opacity:0}}.fly-card{position:fixed;left:0;top:0;z-index:50;width:38px;height:53px;border-radius:5px;background:var(--color-surface-3) center / cover no-repeat;box-shadow:var(--shadow-raise);pointer-events:none;will-change:transform,opacity}@media(prefers-reduced-motion:reduce){.dice-roll .die,.dice-sum{animation:none!important}}.board-wrap{position:relative;min-height:0;display:grid}.board{width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.board:active{cursor:grabbing}.board-reset{position:absolute;left:12px;bottom:12px}.shallows polygon{fill:var(--sea-shallow);stroke:var(--sea-shallow);stroke-width:2;stroke-linejoin:round}.hex-fill{stroke:none}.hex-edge{fill:none;stroke:var(--hex-seam);stroke-width:1.5;stroke-linejoin:round}.hex-art{pointer-events:none}.terrain-forest .hex-fill{fill:var(--terrain-forest)}.terrain-hills .hex-fill{fill:var(--terrain-hills)}.terrain-pasture .hex-fill{fill:var(--terrain-pasture)}.terrain-fields .hex-fill{fill:var(--terrain-fields)}.terrain-mountains .hex-fill{fill:var(--terrain-mountains)}.terrain-desert .hex-fill{fill:var(--terrain-desert)}.token circle{fill:var(--ivory);stroke:var(--cedar);stroke-width:1.5}.token-number{font-family:var(--font-display);font-weight:700;font-size:18px;fill:var(--night)}.token-red .token-number{fill:var(--ruby)}.pip{fill:var(--night)}.token-red .pip{fill:var(--ruby)}.harbor circle{fill:var(--color-surface);stroke:var(--brass);stroke-width:1.5}.harbor:not(.harbor-generic) circle{stroke:currentColor;stroke-width:2.5}.harbor-text{font-family:var(--font-body);font-weight:700;font-size:10px;fill:var(--ivory)}.pier{stroke:var(--cedar);stroke-width:4;stroke-linecap:round}.road-edge{stroke:var(--piece-edge);stroke-width:9;stroke-linecap:round}.road-fill{stroke:currentColor;stroke-width:6.5;stroke-linecap:round}.road-inlay{stroke:var(--piece-inlay);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:2 3}.building-body{fill:currentColor;stroke:var(--piece-edge);stroke-width:1.6;stroke-linejoin:round}.building-door{fill:var(--piece-door)}.robber ellipse,.robber circle{fill:var(--night);stroke:var(--ivory);stroke-width:1.5}.target{cursor:pointer;outline:none}.target-vertex{fill:var(--target-fill);stroke:var(--target-line);stroke-width:2;stroke-dasharray:3 3}.target-edge{fill:var(--target-fill);stroke:var(--target-line);stroke-width:2;stroke-dasharray:4 3}.target-hex{fill:color-mix(in oklch,var(--target-fill),transparent 50%);stroke:var(--target-line);stroke-width:2}.target:hover,.target:focus-visible{fill:var(--target-fill-hot);stroke:var(--target-line);stroke-dasharray:none}.side{grid-area:side;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:0}.side-foot{display:grid;gap:10px}.panel{background:var(--color-surface);border-radius:var(--radius-card);padding:.6rem .8rem;min-height:0;font-size:var(--text-sm);box-shadow:var(--shadow-soft)}.panel h2{font-size:var(--text-md);margin-bottom:.3rem}.panel-head{display:flex;justify-content:space-between;align-items:center}.bank{background:var(--color-surface-2)}.log-panel{display:grid;grid-template-rows:auto minmax(0,1fr)}.log{list-style:none;margin:0;padding:0;overflow-y:auto;display:grid;gap:.2rem;align-content:start}.log li{padding:.1rem 0;border-bottom:1px solid var(--color-border)}.log-turn_started{color:var(--color-text-muted);margin-top:.3rem}.log-game_won{color:var(--color-accent-2);font-weight:700}.log-name{font-weight:700}.dice-inline{color:var(--color-accent-2)}.bag{display:inline-flex;gap:.2rem;vertical-align:middle}.player-name{color:var(--color-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10ch}.res-counts{list-style:none;margin:0;padding:0;display:flex;gap:.6rem;flex-wrap:wrap}.res-counts li{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface)}.res-compact li{padding:.05rem .3rem;border:0;background:none}.res-lumber{color:#5dad70}.res-brick{color:#eb7a52}.res-wool{color:#9fd780}.res-grain{color:#f1c955}.res-ore{color:#a5aec2}.res-picker{border:1px solid var(--color-border);border-radius:var(--radius-card);padding:.4rem .6rem;margin:.4rem 0;display:flex;gap:.6rem;flex-wrap:wrap}.res-picker legend{font-size:var(--text-xs);color:var(--color-text-muted);padding:0 .3rem}.res-pick{display:inline-flex;align-items:center;gap:.25rem}.res-pick b{min-width:1.2ch;text-align:center;color:var(--color-text)}.bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"hand build turn";align-items:center;gap:1rem;padding:.5rem .9rem;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}.bar>.muted{grid-column:1 / -1}.actions{grid-area:build;display:grid;grid-template-columns:repeat(2,minmax(9.5rem,1fr));gap:.6rem}.actions .build-btn{width:100%}.turn-actions{grid-area:turn;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:.6rem;min-width:10rem}.dice-btn{--die-size: 2.9rem;display:flex;justify-content:center;gap:.5rem;padding:.5rem;border:0;border-radius:var(--radius-card);background:color-mix(in oklch,var(--btn-primary-bg),transparent 75%);box-shadow:inset 0 0 0 1.5px var(--btn-primary-bg);cursor:pointer;transition:background-color var(--ease-fast),transform var(--dur-settle) var(--ease-spring)}.dice-btn .die{animation:die-idle 1.6s var(--ease-spring) infinite alternate}.dice-btn .die+.die{animation-delay:-.8s}.dice-btn:hover{background:color-mix(in oklch,var(--btn-primary-bg),transparent 55%)}.dice-btn:active{transform:scale(.94);transition-duration:var(--dur-press)}.dice-btn:focus-visible{outline:2px solid var(--btn-ring);outline-offset:2px}@keyframes die-idle{0%{transform:rotate(-7deg) translateY(1px)}to{transform:rotate(7deg) translateY(-2px)}}@media(prefers-reduced-motion:reduce){.dice-btn .die{animation:none}}.build-btn{flex-direction:column;gap:.3rem;min-height:4.2rem;padding:.5rem 1rem;font-size:var(--text-md);border-radius:var(--radius-card)}.build-btn .badge{font-size:var(--text-sm);padding:.05rem .5rem}.build-btn .build-cost{gap:.4rem;font-size:var(--text-sm)}.build-cost{display:inline-flex;gap:.25rem;font-size:var(--text-xs);font-weight:600}.sea-grid{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:8px 6px;align-items:center;margin:.6rem 0 .9rem}.sea-grid .btn{width:100%;min-width:0;padding:0 .4rem;gap:.3em}.sea-label{font-size:var(--text-sm);font-weight:600;padding-right:4px}.trade-panel{position:fixed;top:56px;right:356px;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 220px);overflow-y:auto;z-index:4;background:var(--color-surface-2);box-shadow:var(--shadow-raise)}.trade-replies{list-style:none;padding:0;margin:.3rem 0;display:grid;gap:.3rem}.trade-replies li{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.offer{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.5rem .9rem;background:var(--color-surface-2);box-shadow:var(--shadow-soft),inset 0 0 0 1px #e5be7780;border-radius:var(--radius-card);font-size:var(--text-sm)}.dialog-backdrop{position:fixed;inset:0;background:#02030999;display:grid;place-items:center;z-index:10;padding:16px}.dialog{position:relative;background:var(--color-surface-2);box-shadow:var(--shadow-raise);border:0;border-radius:var(--radius-card);padding:1.25rem 1.25rem 1rem;width:min(28rem,100%);max-height:90dvh;overflow-y:auto}.dialog-close{position:absolute;top:.5rem;right:.5rem}.results{text-align:center}.results table{margin:.75rem auto;border-collapse:collapse}.results td{padding:.2rem .75rem;text-align:left}.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%);background:var(--color-surface-2);border:1px solid var(--color-danger);color:var(--color-text);border-radius:var(--radius-card);padding:.5rem .75rem;display:flex;gap:.75rem;align-items:center;z-index:11;max-width:calc(100vw - 32px)}@media(max-width:1279px){.game{grid-template-columns:minmax(0,1fr) 300px}.trade-panel{right:316px}}@media(max-width:1023px){.game{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,60dvh) auto auto;grid-template-areas:"board" "bar" "side";height:auto;min-height:100dvh}.side{grid-template-rows:40dvh auto auto}.trade-panel{right:8px;left:8px;width:auto;max-height:55dvh}.status{font-size:var(--text-md);padding-left:5.5rem;padding-right:.5rem;justify-content:flex-start;min-height:2.5rem}}@media(max-width:767px){.bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hand turn" "build build"}.actions{grid-template-columns:repeat(4,minmax(0,1fr))}.build-btn{min-height:3.2rem;padding:.35rem .4rem;font-size:var(--text-sm)}.turn-actions{min-width:6.5rem}.dice-btn{--die-size: 2.2rem}}@media(max-width:480px){.bar{padding:.4rem;gap:.5rem}.res-counts{gap:.3rem}.res-counts li{padding:.1rem .35rem}.build-btn{padding:.3rem .45rem}.toast{bottom:16px}}@keyframes pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.building,.road{transform-box:fill-box;transform-origin:center;animation:pop-in var(--ease-fast) both}.page.lobby,.results{background-image:url(/art/backgrounds/girih.svg);background-size:160px 160px}.avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--night);box-shadow:0 0 0 2px var(--color-surface-3),0 4px 12px #0006;flex:none}.avatar.is-active{box-shadow:0 0 0 2px var(--color-accent-2),0 4px 14px #e5be7759}.player-cards{list-style:none;margin:0;padding:2px;display:grid;gap:6px;max-height:46dvh;overflow-y:auto}.player-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.45rem .7rem;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);transition:background var(--ease-fast)}.player-card.is-active{background:#1f1707}.player-avatar{position:relative}.bubble{position:absolute;left:32px;top:-16px;font-size:var(--text-sm);font-weight:700;line-height:1.2;white-space:nowrap;padding:.3rem .55rem;background:var(--ivory);color:var(--night);border-radius:14px 14px 14px 3px;box-shadow:var(--shadow-soft);animation:bubble-in var(--ease-fast) both,bubble-out .3s ease-in 4s both;z-index:2}@keyframes bubble-in{0%{transform:translateY(6px) scale(.6);opacity:0}to{transform:none;opacity:1}}@keyframes bubble-out{to{opacity:0;transform:translateY(-6px)}}.player-body{min-width:0}.player-line{display:flex;align-items:center;gap:.35rem;min-width:0}.player-name{color:var(--color-text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card.is-me .player-name:after{content:" · you";color:var(--color-text-muted);font-weight:400}.player-stats{display:flex;gap:.7rem;margin:.1rem 0 0;font-variant-numeric:tabular-nums}.player-stats div{display:flex;gap:.25rem;align-items:baseline}.player-stats dt{color:var(--color-text-muted);font-size:var(--text-xs)}.player-stats dd{margin:0;color:var(--color-text);font-weight:600}.player-vp{font-family:var(--font-display);color:var(--color-text);font-variant-numeric:tabular-nums;text-align:right;line-height:1}.player-vp b{font-size:var(--text-xl);font-weight:700}.player-vp small{color:var(--color-text-muted);font-size:var(--text-xs)}.side-gutter{position:absolute;left:-76px;bottom:196px;z-index:4}.side,.reactions{position:relative}.react-fab{width:48px;height:48px;border-radius:50%;border:0;background:var(--color-surface-3);color:var(--color-text);font-size:1.3rem;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-soft),inset 0 0 0 1.5px #e5be7759;transition:transform var(--ease-fast),box-shadow var(--ease-fast),background var(--ease-fast)}.react-fab:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-raise),inset 0 0 0 1.5px var(--color-accent-2)}.react-fab:focus-visible{outline:2px solid var(--color-accent-2);outline-offset:3px}.react-fab:active:not(:disabled){transform:translateY(0) scale(.96)}.react-fab:disabled{opacity:.4;cursor:not-allowed}.react-fab.is-open{background:var(--color-accent-2);color:var(--night)}.reaction-list{position:absolute;right:56px;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;width:300px;background:var(--color-surface-2);border-radius:var(--radius-card);box-shadow:var(--shadow-raise);animation:pop-in var(--ease-fast) both;transform-origin:bottom right}.reaction{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-text);font:inherit;font-weight:600;cursor:pointer;text-align:left;transition:background var(--ease-fast)}.reaction:hover,.reaction:focus-visible{background:var(--color-surface-3);outline:none}.reaction:focus-visible{box-shadow:inset 0 0 0 2px var(--color-accent-2)}.reaction-emoji{font-size:1.3rem;line-height:1}.roll-chart{margin:0;padding:.6rem .8rem .4rem;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);font-size:var(--text-sm)}.roll-chart figcaption{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:var(--text-md);margin-bottom:.2rem}.roll-chart figcaption .muted{font-family:var(--font-body);font-size:var(--text-xs)}.roll-bar{fill:var(--color-accent)}.roll-bar-red{fill:var(--color-danger)}.roll-expected{stroke:var(--ivory);stroke-width:1.5;opacity:.8}.roll-label{font-family:var(--font-display);font-size:9px;fill:var(--color-text-muted)}.roll-chart p{margin:.2rem 0 0}.card-row{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;align-items:flex-end}.card-stack{position:relative;flex:0 1 120px;min-width:56px;display:grid;place-items:center;border-radius:6px;transition:transform var(--ease-fast);container-type:inline-size}.card-name{position:absolute;left:4%;right:4%;top:calc(100cqi * 1.4 * .7);font-family:var(--font-outlier);font-size:15cqi;line-height:1.05;text-align:center;color:var(--ivory);text-shadow:0 1px 4px oklch(0 0 0 / .6);pointer-events:none}.card-stack.dev .card-name{font-size:11cqi;top:calc(100cqi * 1.4 * .66)}.card-stack.is-empty .card-name{color:var(--ivory-2)}.card-stack img{display:block;width:100%;height:auto;aspect-ratio:5 / 7;object-fit:cover;border-radius:6px;box-shadow:var(--shadow-soft)}.card-stack:hover{transform:translateY(-4px)}.card-stack.is-empty{opacity:.35}.card-count{position:absolute;top:-8px;right:-8px;min-width:1.8rem;height:1.8rem;padding:0 .45rem;display:grid;place-items:center;background:var(--ivory);color:var(--night);font-weight:700;font-size:var(--text-sm);border-radius:var(--radius-pill);box-shadow:0 2px 6px #0006}.dev-row{padding-left:.5rem;border-left:1px solid var(--color-border)}.card-stack.dev{gap:.2rem}.card-stack.is-fresh img{opacity:.6}.card-play{width:100%}.hand{grid-area:hand;display:flex;gap:1rem;align-items:flex-end;min-width:0;padding:12px 12px 4px 0}.card-row{flex:0 1 auto;min-width:0}.card-row:first-child{flex-basis:calc(600px + 2rem)}.ping{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-body);font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--color-text-muted);padding:.15rem .5rem;border-radius:var(--radius-pill);background:var(--color-surface-2)}.ping-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.ping-good .ping-dot{background:var(--color-positive)}.ping-ok .ping-dot{background:var(--color-accent-2)}.ping-bad .ping-dot,.ping-off .ping-dot{background:var(--color-danger)}.ping-grade{text-transform:uppercase;letter-spacing:.08em}@media(max-width:1023px){.side{grid-template-rows:auto 36dvh auto}.side-gutter{position:fixed;left:auto;right:12px;bottom:12px}.reaction-list{right:0;bottom:56px;width:min(300px,calc(100vw - 24px))}}@media(max-width:480px){.card-stack{min-width:40px}.card-row{gap:.3rem}.hand{gap:.5rem;padding-right:0}.turn-actions{min-width:5.25rem}.card-count{top:-6px;right:-4px;min-width:1.35rem;height:1.35rem;padding:0 .3rem;font-size:var(--text-xs)}.player-stats{gap:.45rem}.ping-grade{display:none}}.history{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.history-row{background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:.75rem 1rem}.history-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--text-sm);margin-bottom:.4rem}.history-seats{list-style:none;padding:0;margin:0;display:grid;gap:.25rem}.history-seats li{display:flex;align-items:center;gap:.5rem;font-variant-numeric:tabular-nums}.history-seats li b{margin-left:auto;color:var(--color-text);font-family:var(--font-display);font-size:var(--text-lg)}.history-seats li.is-winner .player-name:after{content:" · winner";color:var(--color-accent-2);font-weight:400}.home-foot{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.offer-to{margin-bottom:.4rem}.offer-aside{box-shadow:var(--shadow-soft);opacity:.85}:root[data-theme=light] .card-count,:root[data-theme=light] .bubble{background:var(--ink);color:var(--parchment)}:root[data-theme=light] .avatar{background:var(--parchment)}:root[data-theme=light] .token circle{fill:var(--parchment)}.vitrine{--v-canvas: oklch(.85 .03 60);--v-cream: oklch(.92 .025 55);--v-ink: oklch(.34 .01 40);--v-mortar: oklch(.42 .01 40);--v-dust: oklch(.6 .015 50);--v-track-sm: .066em;--v-track-xs: .099em;--v-line: color-mix(in oklch, var(--v-ink) 16%, transparent);--btn-bg: var(--v-cream);--btn-fg: var(--v-ink);--btn-line: var(--v-line);--btn-ring: var(--v-ink);--btn-primary-bg: var(--v-ink);--btn-primary-fg: var(--v-cream);--btn-primary-shadow: 0 0 0 transparent;--control-on: var(--v-ink);--control-panel: var(--v-cream);--control-shadow: 0 12px 32px color-mix(in oklch, var(--v-ink) 18%, transparent);min-height:100dvh;background:var(--v-canvas);color:var(--v-ink);font-family:var(--font-body);font-weight:400;overflow-x:clip;position:relative}.vitrine *{font-weight:400}.vitrine b,.vitrine strong{font-weight:400;color:var(--v-ink)}.v-nav{display:flex;justify-content:space-between;align-items:center;padding:25px 50px;position:relative;z-index:2}.v-wordmark{font-family:var(--font-outlier);font-size:38px;line-height:1.3;color:var(--v-ink);text-decoration:none}.v-links{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}.v-links .btn{font-size:14px;letter-spacing:var(--v-track-sm)}.v-links .btn[data-status=active]{--_line: var(--v-line)}.vitrine .btn{letter-spacing:var(--v-track-sm)}.v-input{font:inherit;font-size:14px;letter-spacing:var(--v-track-sm);text-transform:none;color:var(--v-ink);background:var(--v-cream);border:0;border-radius:var(--radius-button);box-shadow:inset 0 0 0 1px var(--v-line);min-height:2.75rem;padding:0 1.1rem;min-width:0;transition:box-shadow var(--ease-fast)}.v-input::placeholder{color:var(--v-dust)}.v-input:hover{box-shadow:inset 0 0 0 1px var(--v-dust)}.v-input:focus-visible{outline:2px solid var(--v-ink);outline-offset:2px}.v-hero{min-height:calc(100dvh - 90px);display:grid;place-items:center;padding:50px 50px 100px;position:relative;text-align:center}.v-statement{display:grid;justify-items:center;gap:18px;max-width:760px;margin:0;position:relative;z-index:2;color:var(--v-ink)}.v-statement-name{font-family:var(--font-outlier);font-size:clamp(64px,11vw,148px);line-height:.95;letter-spacing:-.01em}.v-statement-line{font-family:var(--font-display);font-size:clamp(22px,2.6vw,34px);line-height:1.45;max-width:22ch;text-wrap:balance;color:var(--v-mortar)}.v-hero-actions{position:relative;z-index:2;display:flex;gap:16px 24px;justify-content:center;flex-wrap:wrap;margin-top:45px;align-items:center}.v-join{display:inline-flex;gap:12px;align-items:center}.v-join .v-input{font-family:var(--font-display);font-size:17px;letter-spacing:.25em;text-transform:uppercase;text-align:center;width:13.5ch;padding:0 .8rem;min-height:3rem}.v-join .v-input::placeholder{letter-spacing:.15em;font-size:12px;font-family:var(--font-body)}.v-float{--tile-scale: 1;position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:1}.v-tile{position:absolute;width:calc(var(--size) * var(--tile-scale));aspect-ratio:1 / 1.1547;left:var(--x);top:var(--y);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background-size:cover;background-position:center;animation:v-drift 4s ease-in-out infinite alternate;animation-delay:calc(var(--delay) * -1);filter:saturate(.9)}.v-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,oklch(1 0 0 / .25),transparent 55%)}.v-shadow{position:absolute;left:calc(var(--x) + var(--size) * var(--tile-scale) * .1);top:calc(var(--y) + var(--size) * var(--tile-scale) * 1.05);width:calc(var(--size) * var(--tile-scale) * .9);height:calc(var(--size) * var(--tile-scale) * .22);border-radius:50%;background:#372b2624;filter:blur(6px);animation:v-shade 4s ease-in-out infinite alternate;animation-delay:calc(var(--delay) * -1)}@keyframes v-drift{0%{transform:translateY(-6px)}to{transform:translateY(6px)}}@keyframes v-shade{0%{transform:scale(.95);opacity:.8}to{transform:scale(1.05);opacity:1}}@media(prefers-reduced-motion:reduce){.v-tile,.v-shadow{animation:none}}.v-section{padding:0 50px 100px;position:relative;z-index:2}.v-caption{font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-mortar);margin:0 0 20px}.v-heading{font-family:var(--font-display);font-size:30px;line-height:1.3;margin:0 0 25px;font-weight:400}.v-body{font-size:14px;letter-spacing:var(--v-track-sm);line-height:1.5;color:var(--v-mortar);max-width:60ch}.v-list{list-style:none;padding:0;margin:0;display:grid;gap:25px}.v-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 22px;background:var(--v-cream);border-radius:var(--radius-card)}.v-row .avatar{background:var(--v-canvas);box-shadow:0 0 0 1px var(--v-dust)}.v-row .avatar.is-active{box-shadow:0 0 0 1px var(--v-ink)}.v-row-name{font-size:17px;letter-spacing:.04em;color:var(--v-ink)}.v-chip{font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-ink);padding:6px 10px;background:var(--v-canvas);border-radius:var(--radius-pill)}.v-chip.is-quiet{color:var(--v-dust)}.v-row-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.v-field{display:grid;gap:8px;font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-mortar)}.v-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,180px));gap:33px;margin-bottom:45px}.v-score{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--v-ink)}.v-foot{background:var(--v-cream);padding:50px;font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-mortar);display:flex;gap:33px;flex-wrap:wrap;position:relative;z-index:2}.v-foot-end{margin-left:auto}.v-foot a{color:var(--v-ink);text-decoration:underline;text-underline-offset:3px}.v-error{font-size:14px;letter-spacing:var(--v-track-sm);color:#a83634}.v-history .v-row{grid-template-columns:minmax(0,1fr)}.v-history-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-mortar);margin-bottom:12px}.v-history-seats{list-style:none;padding:0;margin:0;display:grid;gap:8px}.v-history-seats li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px;letter-spacing:var(--v-track-sm);font-variant-numeric:tabular-nums}.v-history-seats li.is-winner .v-row-name:after{content:"  — winner";color:var(--v-mortar)}.lobby-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;padding-top:50px;padding-bottom:50px}.lobby-code{font-family:var(--font-display);font-size:50px;line-height:1.1;letter-spacing:.18em;margin:0}.lobby-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:50px;align-items:start}.lobby-seats{gap:10px}.v-you{color:var(--v-mortar)}.v-ready{font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-dust);display:inline-flex;align-items:center;gap:6px}.v-ready:before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor}.v-ready.is-ready{color:var(--v-ink)}.v-ready.is-ready:before{background:currentColor}.v-row-empty{display:block;font-size:14px;letter-spacing:var(--v-track-sm);color:var(--v-mortar);background:transparent;box-shadow:inset 0 0 0 1px var(--v-line)}.lobby-me{margin-top:25px}.lobby-join{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.lobby-join .v-field{flex:1 1 220px}.lobby-seated{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 10px 10px 22px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--v-line)}.lobby-seated .switch{font-size:14px;letter-spacing:var(--v-track-sm)}.lobby-seated .switch-track{background:var(--v-canvas)}.lobby-card{background:var(--v-cream);border-radius:var(--radius-card);padding:28px;display:grid;gap:22px}.lobby-card .v-caption{margin:0}.lobby-card .btn{--btn-bg: var(--v-canvas)}.lobby-fields{display:grid;gap:16px}.vitrine .select-label{font-size:10px;letter-spacing:var(--v-track-xs);text-transform:uppercase;color:var(--v-mortar)}.vitrine .select-option{font-size:14px;letter-spacing:var(--v-track-sm)}.lobby-card .select-panel{--control-panel: var(--v-canvas)}.lobby-note{margin:0;font-size:13px}.lobby-wait{margin:0;font-size:14px;letter-spacing:var(--v-track-sm);color:var(--v-mortar);text-align:center;padding:14px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--v-line)}@media(max-width:899px){.lobby-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:767px){.lobby-code{font-size:38px}.v-links .btn{padding:0 .7rem}.v-nav,.v-section,.v-foot{padding-left:16px;padding-right:16px}.v-hero{padding:33px 16px 170px;min-height:auto}.v-statement{gap:12px}.v-float{--tile-scale: .45;inset:auto 0 0;height:150px}.v-row{grid-template-columns:auto minmax(0,1fr)}.v-row>:last-child{grid-column:1 / -1}}