.site-header{width:100%;position:sticky;top:0;z-index:40;background:var(--glass, rgba(13, 34, 52, .55));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border, rgba(243, 236, 217, .14));padding-block:10px;padding-inline:16px}.site-header__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;max-width:1200px;margin-inline:auto}.site-header__brand{display:flex;align-items:center;gap:14px;flex-shrink:0}.site-header__logo{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--glass-border, rgba(243, 236, 217, .14));object-fit:cover;flex-shrink:0}.site-header__title{margin:0;font-family:Cinzel,serif;font-size:1.35rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light, #f3ecd9);line-height:1}.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}@media (max-width: 760px){.site-header{padding-block:8px}.site-header__inner{gap:8px 10px}.controls{display:contents}.site-header__brand{order:1}.layout-chip{order:2;margin-left:auto}.btn--primary{order:3}.btn--secondary{order:4}.btn{flex:1 1 45%}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 22px;border-radius:999px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-family:Cinzel,serif;font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;border:none;transition:background-color .12s ease,box-shadow .12s ease,transform 80ms ease,opacity .12s ease}.btn:focus-visible{outline:2.5px solid var(--text-light, #3a2d1c);outline-offset:3px}.btn svg{flex-shrink:0}.btn--primary{background:var(--accent, #f4d03f);color:var(--text-dark, #16222e);box-shadow:0 2px 10px #f4d03f4d}.btn--primary:hover{background:var(--accent-deep, #d9b12e);box-shadow:0 4px 16px #f4d03f59;transform:translateY(-1px)}.btn--primary:active{transform:translateY(1px);box-shadow:0 1px 6px #f4d03f33}.btn--secondary{background:transparent;color:var(--text-light, #f3ecd9);border:1px solid var(--glass-border, rgba(243, 236, 217, .14))}.btn--secondary:hover:not(:disabled){border-color:#3a2d1c66;background:#3a2d1c0f}.btn--secondary:active:not(:disabled){background:#3a2d1c0a;transform:translateY(1px)}.btn--secondary:disabled{opacity:.4;cursor:default;pointer-events:none}.layout-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:Crimson Pro,serif;font-size:.95rem;color:#3a2d1ce0;padding:6px 14px;background:var(--glass, rgba(13, 34, 52, .55));border:1px solid var(--glass-border, rgba(243, 236, 217, .14));border-radius:999px;white-space:nowrap}.layout-chip strong{color:var(--text-light, #f3ecd9);font-weight:600}.legend{width:100%;padding-inline:16px;padding-block:8px;display:flex;justify-content:center}.legend__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;background:var(--glass, rgba(13, 34, 52, .55));border:1px solid var(--glass-border, rgba(243, 236, 217, .14));border-radius:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 20px;max-width:860px;width:100%}.legend__divider{width:1px;height:28px;background:var(--glass-border, rgba(243, 236, 217, .14));flex-shrink:0;align-self:center}.legend-item{display:flex;align-items:center;gap:6px;font-family:Crimson Pro,serif;font-size:.875rem;color:var(--text-light, #f3ecd9);white-space:nowrap}.legend-item img{width:22px;height:22px;object-fit:contain}.legend-item svg{flex-shrink:0}@media (min-width: 1024px){.layout-chip{width:var(--rail-w, 180px);text-align:center}.legend{width:var(--rail-w, 180px);flex:0 0 auto;padding:0}.legend__bar{flex-direction:column;align-items:flex-start;gap:12px;width:100%;max-width:none;padding:16px}.legend__divider{width:100%;height:1px}.legend-item{font-size:.95rem}}@media (max-width: 520px){.site-header__title{font-size:1.05rem;letter-spacing:.08em}.site-header__logo{width:32px;height:32px}.controls{gap:8px}.btn{font-size:.72rem;letter-spacing:.06em;padding:8px 14px;white-space:nowrap}.layout-chip{font-size:.85rem;padding:5px 10px}.legend__bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px 6px;padding:10px}.legend__divider{display:none}.legend-item{font-size:.78rem;justify-content:center;gap:5px}.legend-item img,.legend-item svg{width:18px;height:18px}}.board-frame{position:relative;width:100%}.board-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 26px rgba(58,45,28,.22));user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.board-svg.is-zoomed{cursor:grab}@media (min-width: 1024px){.board-frame{width:auto;height:100%;max-width:100%;aspect-ratio:628 / 570;margin-inline:auto}.board-svg{width:100%;height:100%}}.board-reset{position:absolute;right:10px;bottom:10px;min-height:44px;padding:8px 18px;border-radius:999px;font-family:Crimson Pro,Georgia,serif;font-size:.9rem;font-weight:500;color:var(--text-light, #3a2d1c);background:var(--glass, rgba(255, 251, 240, .72));border:1px solid var(--glass-border, rgba(58, 45, 28, .18));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:resetFadeIn .15s ease-out}@keyframes resetFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.fill-wood{fill:var(--wood, #2d5016)}.fill-wheat{fill:var(--wheat, #c8a227)}.fill-sheep{fill:var(--sheep, #6ab04c)}.fill-brick{fill:var(--brick, #a84327)}.fill-ore{fill:var(--ore, #7f8c9a)}.fill-desert{fill:var(--desert, #d4b483)}.hex-tile{transform-box:fill-box;transform-origin:center;animation:hexAppear .45s ease-out backwards;transition:transform .12s ease-out}@media (hover: hover) and (pointer: fine){.hex-tile:hover{transform:scale(1.045)}}@keyframes hexAppear{0%{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.hex-tile{animation:none}}.harbor circle{filter:drop-shadow(0 2px 4px rgba(58,45,28,.25))}:root{--ocean-deep: #f3e9d2;--ocean: #ead9b8;--ocean-light: #d9c49a;--sea-tile: #6aa6c8;--accent: #f4d03f;--accent-deep: #d9b12e;--text-light: #3a2d1c;--text-dark: #16222e;--token-face: #f7f1df;--red-number: #c0392b;--glass: rgba(255, 251, 240, .72);--glass-border: rgba(58, 45, 28, .18);--rail-w: 150px;--wood: #2d5016;--wheat: #daa520;--sheep: #7cb342;--brick: #b84c35;--ore: #5c6370;--desert: #d4a574}*,*:before,*:after{box-sizing:border-box}body,h1,p{margin:0}img{display:block;max-width:100%}html{color-scheme:light;background-color:var(--ocean-deep)}body{font-family:Crimson Pro,Georgia,serif;color:var(--text-light);min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(1200px 600px at 50% -10%,rgba(255,253,245,.6),transparent 60%),linear-gradient(180deg,var(--ocean-deep) 0%,var(--ocean) 55%,#e0cda6 100%)}.app-shell{min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.5vw,14px);padding:0 0 48px}.content-row{display:contents}.board-wrap{width:100%;max-width:860px;margin-inline:auto;padding-inline:16px;flex:1;display:flex;align-items:center;justify-content:center}@media (min-width: 1024px){.app-shell{height:100dvh;overflow:hidden;padding-bottom:0}.content-row{display:flex;align-items:center;flex:1;min-height:0;width:100%;max-width:1232px;margin-inline:auto;gap:12px;padding:12px 16px 20px}.board-wrap{height:100%;max-width:none;min-width:0;padding-inline:0}}:focus-visible{outline:3px solid var(--text-light);outline-offset:2px;border-radius:4px}:focus:not(:focus-visible){outline:none}::selection{background:#f4d03f59;color:var(--text-light)}@media (max-width: 520px){.app-shell{gap:clamp(8px,2vw,12px);padding-bottom:20px}.board-wrap{padding-inline:6px}}