:root{--ink:#2b1d0e;--parchment:#f6ecd4;--parchment-edge:#d9c49a;--accent:#b8452c;--accent-dark:#8e3220;--gold:#e6b84a;--highlight:#ff7a1a;--highlight-dark:#c2410c;--sea-deep:#0b3d5c;--panel-bg:#faf2def0;--shadow:0 10px 30px #00142859;--font-display:"Cinzel", Georgia, serif;--font-body:"Inter", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}body{min-height:100vh;font-family:var(--font-body);color:var(--ink);background:var(--sea-deep);margin:0}.ocean{z-index:-1;background:radial-gradient(80% 75% at 45%,#0000 55%,#010f1c8c 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0044 0.0067' numOctaves='2' seed='4' result='a'/%3E%3CfeColorMatrix in='a' values='0 0 0 0 0.85  0 0 0 0 1  0 0 0 0 1  -0.7 0 0 0 0.15' result='wide'/%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0067 0.01' numOctaves='2' seed='11' result='b'/%3E%3CfeColorMatrix in='b' values='0 0 0 0 0.85  0 0 0 0 1  0 0 0 0 1  -1 0 0 0 0.21' result='fine'/%3E%3CfeMerge%3E%3CfeMergeNode in='wide'/%3E%3CfeMergeNode in='fine'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 50%/cover no-repeat,radial-gradient(70% 65% at 42% 52%,#1aa6c4 0%,#0f7fa6 30%,#0a5a85 58%,#063a5c 82%,#03243b 100%);position:fixed;inset:0}.app{flex-direction:column;min-height:100vh;display:flex;overflow:clip}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.header{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(#140c04bf,#140c0473);border-bottom:2px solid #e6b84a80;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 28px;display:flex}.header__title{font-family:var(--font-display);letter-spacing:.12em;color:var(--gold);text-shadow:0 2px #5a3a10,0 4px 12px #00000080;margin:0;font-size:28px;font-weight:800}.header__actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}.header__tagline{color:var(--parchment);opacity:.75;margin:2px 0 0;font-size:13px}.button{font:600 14px var(--font-body);border:1px solid var(--parchment-edge);background:var(--parchment);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--parchment-edge);border-radius:8px;padding:10px 18px;transition:transform .1s,box-shadow .1s,background .15s}.button:hover:not(:disabled){background:#fff8e6}.button:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.button:disabled{opacity:.7;cursor:default}.button--clear{justify-content:center;align-items:center;padding:0 14px;display:inline-flex}.button--settings{justify-content:center;align-items:center;display:inline-flex}.button--settings .button__icon{display:none}.button--primary{color:#fff;background:var(--accent);border-color:var(--accent-dark);width:100%;box-shadow:0 3px 0 var(--accent-dark);padding:12px 18px;font-size:16px}.button--primary:hover:not(:disabled){background:#c9533a}.segmented{background:#00000059;border:1px solid #e6b84a59;border-radius:10px;padding:3px;display:flex}.segmented__option{font:600 13px var(--font-body);color:var(--parchment);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:8px 14px;transition:background .15s,color .15s}.segmented__option:hover:not(.segmented__option--active){background:#ffffff14}.segmented__option--active{background:var(--gold);color:var(--ink)}.dialog{border:1px solid var(--parchment-edge);background:var(--parchment);width:min(380px,100vw - 32px);color:var(--ink);box-shadow:var(--shadow);border-radius:16px;padding:0}.dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05142399}.dialog__body{flex-direction:column;gap:20px;padding:24px;display:flex}.dialog__title{font-family:var(--font-display);letter-spacing:.08em;margin:0;font-size:22px}.dialog .segmented{border-color:var(--parchment-edge);background:#2b1d0e14}.dialog .segmented__option{color:var(--ink);flex:1}.dialog .segmented__option:hover:not(.segmented__option--active){background:#2b1d0e14}.field{border:0;flex-direction:column;gap:10px;margin:0;padding:0;display:flex}.field__label{letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:10px;padding:0;font-size:12px;font-weight:700}.field__hint{opacity:.6;margin:0;font-size:12px}.switch{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;font-size:15px;display:flex}.switch span{order:-1}.switch input{appearance:none;cursor:pointer;background:#cbbd9c;border-radius:12px;flex-shrink:0;width:42px;height:24px;margin:0;transition:background .15s;position:relative}.switch input:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.switch input:checked{background:var(--accent)}.switch input:checked:after{transform:translate(18px)}.switch input:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}.switch:has(input:disabled){opacity:.5;cursor:not-allowed}.switch:has(input:disabled) input{cursor:not-allowed}.layout{flex:1;justify-content:center;align-items:center;gap:40px;padding:24px;display:flex}.board-area{display:contents}@media (width<=860px),(orientation:landscape) and (height<=500px){.app{height:100dvh;min-height:0}.layout{min-height:0;padding:8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));align-items:stretch;gap:12px}.board-area{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;container-type:size}.layout>.panel{align-self:center}}@media (width<=860px) and (orientation:portrait){.layout{flex-direction:column;gap:8px}}.board{width:min((100vh - 140px) * var(--board-aspect,1), 100vw - 380px);min-width:280px;position:relative}@media (width<=860px),(orientation:landscape) and (height<=500px){.board{width:min(100cqw, 100cqh * var(--board-aspect,1));min-width:0}}.board--compact .zone__hex{background:0 0;inset:.8%}.board--compact .zone__face{inset:0;box-shadow:inset 0 0 12px #0000004d}.board--compact .zone{filter:drop-shadow(0 1px 2px #001e3266)}.board--compact .zone--highlighted{filter:drop-shadow(0 0 4px var(--highlight)) drop-shadow(0 0 10px var(--highlight))}.board--compact .zone--highlighted .zone__hex{background:linear-gradient(160deg, #ffd29a, var(--highlight) 45%, var(--highlight-dark))}.board--compact .zone--highlighted .zone__face{inset:7%}.board--dimmed .zone:not(.zone--highlighted) .zone__hex{filter:brightness(.65)saturate(.55)}.board--dimmed .zone:not(.zone--highlighted) .token,.board--dimmed .zone:not(.zone--highlighted) .robber{opacity:.6}.island{pointer-events:none;position:absolute;overflow:visible}.island__shallows{opacity:.75}.island__swell{opacity:.3}.island__foam{opacity:.9}.zone{filter:drop-shadow(0 3px 3px #3c280a73);transition:transform .2s,filter .3s;position:absolute}.zone:hover{z-index:2;transform:scale(1.06)}.zone--highlighted{z-index:1;filter:drop-shadow(0 0 4px var(--highlight)) drop-shadow(0 0 16px var(--highlight));animation:1.4s ease-in-out infinite pulse}.zone--highlighted .zone__hex{background:linear-gradient(160deg, #ffd29a, var(--highlight) 45%, var(--highlight-dark))}.zone--highlighted .zone__face{inset:8%}.zone--highlighted .token{border-color:var(--highlight-dark);box-shadow:0 0 0 3px var(--highlight), 0 2px 6px #00000080;background:radial-gradient(circle at 35% 30%,#fff,#ffe2c4)}.zone__hex{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(160deg,#fdf3d6,#b8955a);transition:filter .3s;position:absolute;inset:2%}.zone__face{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background-position:50%;background-size:cover;position:absolute;inset:4.5%;box-shadow:inset 0 0 20px #0006}.zone__face--wood{background-image:url(/assets/wood.jpg)}.zone__face--wheat{background-image:url(/assets/wheat.jpg)}.zone__face--iron{background-image:url(/assets/iron.jpg)}.zone__face--wool{background-image:url(/assets/wool.jpg)}.zone__face--clay{background-image:url(/assets/clay.jpg)}.zone__face--empty{background-image:url(/assets/desert.jpg)}@keyframes pulse{50%{transform:scale(1.05)}}.token{aspect-ratio:1;width:36%;font-family:var(--font-display);pointer-events:none;background:radial-gradient(circle at 35% 30%,#fffaf0,#eadbb6);border:2px solid #c6a86c;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;line-height:1;transition:opacity .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #00000073;container-type:inline-size}.token__value{letter-spacing:-.04em;text-box:trim-both cap alphabetic;font-size:58cqi;font-weight:800}.token--hot{color:var(--accent)}.robber{pointer-events:none;background:radial-gradient(circle at 35% 30%,#6b6b6b,#1d1d1d);border-radius:50% 50% 18% 18%/32% 32% 12% 12%;width:18%;height:34%;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);box-shadow:0 4px 6px #00000080}.robber:before{content:"";aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#6b6b6b,#1d1d1d);border-radius:50%;width:72%;position:absolute;top:-26%;left:50%;transform:translate(-50%)}.panel{background:var(--panel-bg);border:1px solid var(--parchment-edge);width:280px;box-shadow:var(--shadow);border-radius:16px;flex-direction:column;align-items:center;gap:16px;padding:22px;display:flex}.panel__actions{align-self:stretch;gap:8px;display:flex}.panel__actions .button--primary{flex:1}.panel__title,.panel__subtitle{font-family:var(--font-display);text-align:center;align-self:stretch;margin:0}.panel__title{letter-spacing:.08em;font-size:20px}.panel__subtitle{letter-spacing:.1em;text-transform:uppercase;opacity:.7;border-top:1px solid var(--parchment-edge);padding-top:14px;font-size:13px}.sum{flex-direction:column;align-items:center;display:flex}.sum__value{font-family:var(--font-display);font-size:48px;font-weight:800;line-height:1}.sum__label{text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;opacity:.65;font-size:12px}.sum__label-short{display:none}.sum--robber{color:var(--accent)}.sum--robber .sum__label{opacity:1;font-weight:700}.history{flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;display:flex}.history__item{width:30px;height:30px;font:700 13px var(--font-display);border:1px solid var(--parchment-edge);background:#fffaf0;border-radius:50%;place-items:center;display:grid}.history__item:first-child:not(.history__item--empty){background:var(--gold);border-color:#b88a20}.history__item--empty{opacity:.5;background:0 0;border-style:dashed}.dices{gap:16px;display:flex}.dice{--dice-size:64px;width:var(--dice-size);height:var(--dice-size);padding:calc(var(--dice-size) * .12);gap:calc(var(--dice-size) * .08);background:linear-gradient(145deg,#fff,#e2e2e2);border-radius:18%;grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid;box-shadow:inset 0 2px #fff,inset 0 -3px #c4c4c4,0 6px 12px #00000040}.dice--rolling{animation:.3s linear infinite tumble}.dice__point:not([data-on="0"]){background:radial-gradient(circle at 35% 30%,#444,#000);border-radius:50%}@keyframes tumble{0%{transform:rotate(0)translateY(0)}25%{transform:rotate(-12deg)translateY(-6px)}50%{transform:rotate(8deg)translateY(0)}75%{transform:rotate(-6deg)translateY(-3px)}to{transform:rotate(0)translateY(0)}}@media (prefers-reduced-motion:reduce){.dice--rolling,.zone--highlighted{animation:none}}.error{color:#fff;text-align:center;padding:40px}@media (width<=860px),(orientation:landscape) and (height<=500px){.header{flex-wrap:nowrap;gap:10px;padding:8px 12px}.header__title{font-size:20px}.header__tagline{margin-top:0;font-size:11px}.header__actions{flex-wrap:nowrap;gap:6px}.header .button{white-space:nowrap;padding:7px 10px;font-size:12px}.header .button--settings{padding:7px}.header .button--settings .button__icon{display:block}.header .button--settings .button__label{display:none}}@media (orientation:landscape) and (height<=500px){.panel{border-radius:12px;gap:10px;width:200px;padding:12px}.panel__title{display:none}.panel__subtitle{padding-top:8px;font-size:11px}.dices{gap:10px}.dice{--dice-size:44px}.sum__value{font-size:32px}.sum__label{font-size:10px}.panel .button--primary{padding:9px 12px;font-size:14px}.history{gap:4px}.history__item{width:24px;height:24px;font-size:11px}}@media (width<=860px) and (orientation:portrait){.panel{border-radius:12px;grid-template-columns:auto 1fr auto;grid-template-areas:"dice sum roll""history history history";align-items:center;gap:8px 12px;width:100%;padding:10px 12px;display:grid}.panel__title,.panel__subtitle{display:none}.dices{grid-area:dice;gap:8px}.dice{--dice-size:40px}.sum{grid-area:sum;min-width:0}.sum__label-long{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.sum__label-short{display:inline}.sum__value{font-size:28px}.sum__label{letter-spacing:.05em;font-size:10px}.panel__actions{grid-area:roll;gap:6px}.panel .button--clear{padding:0 10px}.panel .button--primary{width:auto;min-width:96px;padding:10px 16px;font-size:14px}.history{grid-area:history;gap:4px}.history__item{width:24px;height:24px;font-size:11px}}