/* Static board: original geometry with number tokens and three settlements. */
:root { font-family: system-ui, -apple-system, sans-serif; background: #287da5; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 1240px); margin: auto; padding: 56px 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: center; }
.board-scene { display: grid; place-items: center; min-width: 0; }
.return-link { position: absolute; top: 12px; left: 20px; padding: 12px 0; color: inherit; font-size: 13px; text-decoration: none; }
.return-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.hex-board { display: block; width: min(100%, max(280px, calc((100svh - 80px) * 1.106383))); height: auto; }
/* Matching subpixel strokes close raster antialiasing seams, without visible borders. */
.hex-board polygon { fill: var(--terrain); stroke: var(--terrain); stroke-width: .6; stroke-linejoin: round; }
[data-terrain="wood"] { --terrain: #397344; }
[data-terrain="wheat"] { --terrain: #e5bc45; }
[data-terrain="sheep"] { --terrain: #93bc65; }
[data-terrain="brick"] { --terrain: #bd6445; }
[data-terrain="ore"] { --terrain: #858d94; }
[data-terrain="desert"] { --terrain: #d8bc87; }

.number-token circle { fill: #f4efdf; }
.number-token text { fill: #292724; font: 600 42px system-ui, sans-serif; }
.number-token .number-high { fill: #a3453d; }
.buildings path { fill: #aa343b; stroke: #64252a; stroke-width: 2; stroke-linejoin: round; }

.roads path { fill: none; stroke: #aa343b; stroke-width: 12; stroke-linecap: round; }
.number-token.is-match circle { fill: #fff8b5; stroke: #473817; stroke-width: 5; }
.dice-controls { text-align: center; padding: 0; }
.dice-pair { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.die { width: 54px; height: 54px; background: #f4efdf; border-radius: 7px; color: #292724; }
.die circle { fill: currentColor; }
#roll-dice { padding: 12px 24px; border: 0; border-radius: 3px; background: #f4efdf; color: #292724; font: 600 14px system-ui, sans-serif; cursor: pointer; }
#roll-dice:disabled { opacity: .6; cursor: default; }
#roll-dice:focus-visible { outline: 2px solid white; outline-offset: 4px; }
#roll-result { min-height: 88px; padding-top: 10px; line-height: 1.4; font-size: 14px; }
#roll-result p { margin: 4px 0; }
#roll-result ul { list-style: none; margin: 0; padding: 0; }

#roll-rewards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px; min-height: 76px; }
.resource-card { width: 68px; min-height: 72px; display: grid; place-items: center; padding: 8px 4px; background: var(--terrain); color: #fff; border: 1px solid #ffffff80; border-radius: 3px; font-size: 13px; font-weight: 600; pointer-events: none; }
.resource-card[data-terrain="wheat"], .resource-card[data-terrain="sheep"] { color: #25291e; }
@media (max-width: 700px) and (orientation: portrait) {
  main { padding: 48px 10px 12px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hex-board { width: min(100%, max(280px, calc((100svh - 280px) * 1.106383))); }
  .roll-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .dice-pair { margin: 0; gap: 8px; }
  .die { width: 44px; height: 44px; }
  #roll-result { min-height: 82px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  main { padding-top: 48px; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; }
  .die { width: 44px; height: 44px; }
  .dice-pair { margin-bottom: 10px; }
}

/* Illustrated board and restrained upper-left lighting. */
:root { background: #285966; }
body { min-height: 100vh; min-height: 100svh; background: url('../images/gallery/fulls/ocean.webp?v=036eab0072ac') center / cover no-repeat; }
.return-link { text-shadow: 0 1px 3px #102b35; }

.hex-board polygon { stroke: #705b3c; stroke-width: 1.2; }
.roads > path { stroke: #d86b32; stroke-width: 13; filter: drop-shadow(2px 3px 1px #33191799); }
.roads .road-highlight { stroke: #efa368; stroke-width: 3; filter: none; pointer-events: none; }
.buildings > g { filter: drop-shadow(2px 3px 1px #33191799); }
.buildings path { fill: url(#orange-wood); stroke: #793d20; stroke-width: 2; }
.buildings .piece-roof { fill: #f2ac70; stroke: none; }
.number-token circle { fill: url(#chit); stroke: #ac9365; stroke-width: 2; filter: drop-shadow(1px 2px 1px #382b2855); }
.number-token text { fill: #30291f; font-weight: 700; }
.number-token .number-high { fill: #a1302e; }
.number-token.is-match circle { fill: #fff0b4; stroke: #f6ce65; stroke-width: 6; filter: drop-shadow(0 0 4px #ffde82); }
.die { background: linear-gradient(135deg,#fff8e6,#e4d5b5); border: 1px solid #ac9874; box-shadow: inset 1px 1px 1px #fff9, inset -2px -2px 2px #91785844, 2px 3px 3px #18333e66; }
.die circle { fill: #302b25; filter: drop-shadow(0 1px 0 #fff9); }
#roll-dice { color: #392b20; background: linear-gradient(#f6e6bf,#dcc494); border: 1px solid #a18455; box-shadow: inset 0 1px #fff8, 1px 3px 2px #18333e66; letter-spacing: .045em; }
#roll-result { color: #fff6df; text-shadow: 0 1px 3px #102d3a, 0 0 6px #102d3a; }
#roll-rewards { gap: 6px; min-height: 92px; }
.resource-card { width: 62px; min-height: 88px; display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 1px solid #a38b63; border-radius: 5px; background: linear-gradient(135deg,#fff3d8,#e3cfaa); color: #352b20; box-shadow: inset 0 0 0 2px #f9ecd2, 2px 3px 3px #18333e66; }
.resource-card img { display: block; width: 100%; height: 55px; object-fit: cover; border: 1px solid #a38b63; border-radius: 2px; }
.resource-card span { width: 100%; text-align: center; font: 700 10px/1.3 system-ui,sans-serif; letter-spacing: .025em; }
@media (max-width:700px) and (orientation:portrait) {
  .hex-board { width: min(100%, max(280px, calc((100svh - 296px) * 1.106383))); }
}

#roll-rewards { flex-wrap: nowrap; }
.resource-card { flex: 0 1 62px; min-width: 0; }
.resource-card span { font-size: 9px; }

/* Warm tile frames leave the shared edge centerline unchanged for roads. */
.hex-board polygon { stroke: #cfb98b; stroke-width: 9; stroke-linejoin: round; }


/* Ocean belongs to the page; sand and surf share the unchanged board viewBox. */
.sand-island { pointer-events: none; }
@media (max-width:700px) and (orientation:portrait) {
  main { min-height: 100svh; display: flex; flex-direction: column; gap: 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .board-scene { width: 100%; flex: 0 0 auto; }
  .dice-controls { width: 100%; margin-top: auto; flex: 0 0 auto; }
  .roll-actions { display: flex; flex-direction: column; gap: 12px; }
  #roll-dice { min-height: 44px; min-width: 144px; }
}

/* Expanded beach remains in board coordinates without cropping its outer fade. */
.hex-board { overflow: visible; }

/* Compact inventory and build controls; placement exists only while selecting. */
.resource-inventory,.build-controls { margin-top: 14px; }
.resource-inventory h2,.build-controls h2 { margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff0d6; }
#inventory-items { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.inventory-item { position: relative; padding: 4px; border: 1px solid #af966c; border-radius: 4px; color: #352b20; background: #eddbb8; }
.inventory-item img { width:100%;height:26px;object-fit:cover;display:block;border-radius:2px; }
.inventory-name { display:block;font-size:8px;font-weight:700;text-transform:uppercase;margin-top:3px; }
.inventory-count { display:block;font-size:17px;font-weight:700;line-height:1.2; }
.inventory-gain { position:absolute;right:-2px;top:-9px;color:#fff8dc;background:#774323;border-radius:8px;font-size:11px;font-weight:700;padding:0 4px; }
.inventory-gain:empty { display:none; }
#build-actions { display:grid;gap:5px; }
.build-action { display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:7px 9px;text-align:left;border:1px solid #b89b69;border-radius:3px;color:#3d2c1c;background:#ead2a6;cursor:pointer; }
.build-action strong { font-size:12px; }
.build-cost { font-size:9px;line-height:1.4;text-align:right;max-width:155px; }
.build-action:disabled { opacity:.5;cursor:default; }
.build-action[aria-pressed="true"] { background:#f5be7e;border-color:#ffdfaa; }
.build-action:focus-visible,#cancel-build:focus-visible { outline:2px solid #fff5ce;outline-offset:3px; }
.build-feedback { min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px; }
#build-message { font-size:12px;line-height:1.4;margin:6px 0;color:#fff4dd; }
#cancel-build { min-height:44px;border:0;background:transparent;color:#fff2d9;text-decoration:underline;cursor:pointer; }
.placement-hit { fill:transparent;stroke:none;pointer-events:all; }
.road-hit { fill:none;stroke:transparent;stroke-width:70;pointer-events:stroke; }
.road-preview { fill:none;stroke:#ffc080;stroke-width:13;stroke-linecap:round;opacity:.8;pointer-events:none; }
.vertex-preview { fill:#d86b3266;stroke:#ffe0a6;stroke-width:4;pointer-events:none; }
.placement-plus { stroke:#fff1ce;stroke-width:4;pointer-events:none; }
.city-preview { fill:none;stroke:#ffe0a6;stroke-width:4;stroke-dasharray:7 4;pointer-events:none; }
.build-target { cursor:pointer;outline:none; }
.build-target:focus-visible .road-preview,.build-target:hover .road-preview { stroke:#fff3cb;stroke-width:18; }
.build-target:focus-visible .vertex-preview,.build-target:hover .vertex-preview,.build-target:focus-visible .city-preview { stroke:#fff;stroke-width:7; }
.upgrade-candidate { filter:drop-shadow(0 0 5px #ffd693) !important; }
@media(max-width:700px) and (orientation:portrait) {
  .resource-inventory,.build-controls { max-width:390px;margin-left:auto;margin-right:auto; }
  .build-cost { font-size:10px;max-width:190px; }
}

#roll-rewards:empty { min-height: 0; }
.build-cost-item { white-space: nowrap; }
.score-panel { margin:0 0 14px;color:#fff1d3; }
.score-panel > div { display:flex;align-items:center;justify-content:center;gap:12px; }
.score-panel span { font-size:10px;letter-spacing:.1em; }
#victory-points { font-size:22px; }
#longest-road-score { font-size:12px;margin:4px 0; }
.score-panel details { font-size:10px;line-height:1.5; }
.score-panel summary { cursor:pointer; }
#score-breakdown { margin:5px 0; }
#road-achievement { font-size:12px;margin:5px 0; }
#road-achievement:empty { display:none; }
#victory-panel { background:#eddbb8;color:#392b20;border:1px solid #b59966;border-radius:6px;padding:16px;margin-bottom:16px; }
#victory-panel[hidden] { display:none; }
#victory-panel h2 { margin:0 0 8px;font-size:25px; }
#victory-panel p { margin:5px 0;font-size:14px; }
#play-again { margin-top:10px;min-height:44px;padding:10px 20px;background:#d86b32;color:#fff;border:1px solid #95421f;border-radius:3px;font-weight:700;cursor:pointer; }
#play-again:focus-visible { outline:2px solid #392b20;outline-offset:3px; }

#victory-heading:focus { outline:2px solid #b59966;outline-offset:3px; }