/* The page around BGA's board. The board itself is styled by BGA's own stylesheet (/bga/sevenwondersduel.css), which
   expects to sit inside #game_play_area, --invert-military-positions on :root (their template sets -1), .whiteblock
   from BGA's framework and the wood background of their html element; those four are reproduced here. */
/* BGA's coin and score numerals ask for "cafeteria" (Adobe Fonts, licensed to their domain, not copyable); Londrina Solid
   (SIL OFL, site/fonts/LICENSE-LondrinaSolid.txt) is the bundled lookalike, declared under the name their stylesheet uses. */
@font-face { font-family: cafeteria; font-style: normal; font-weight: 400 900; src: url(/fonts/londrina-solid-latin-400-normal.woff2) format('woff2'); }
:root { --fg: #222; --muted: #6b6b6b; --panel: #fffdf8; --line: #d8d2c4; --accent: #1b5e20; --err: #b00020; --invert-military-positions: -1; }
* { box-sizing: border-box; }
html { background: url(/bga/layout/back-main.jpg); }
body { margin: 0; font: 14px/1.4 Roboto, system-ui, sans-serif; color: var(--fg); }
.muted { color: var(--muted); } .error { color: var(--err); }
a { color: var(--accent); }
.home, .loading { max-width: 640px; margin: 60px auto; padding: 16px; background: var(--panel); border-radius: 10px; }
.home form { display: flex; gap: 8px; } .home input { flex: 1; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--fg); min-width: 0; }
button { font: 600 14px system-ui, sans-serif; padding: 6px 12px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.viewer { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 24px; }
header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--panel); border-radius: 8px; padding: 6px 12px; } header .brand { font-weight: 700; text-decoration: none; }
header .age { font-weight: 700; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; }
.controls { display: flex; align-items: center; gap: 6px; margin-left: auto; } .controls input[type=range] { width: 260px; }
.stage { display: flex; gap: 12px; align-items: flex-start; }
#game_play_area { flex: 1; min-width: 0; }
.side { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) { .stage { flex-direction: column; } .side { width: 100%; } }
/* BGA's framework: .whiteblock is a translucent rounded white (img/layout/rounded_b.png), #game_play_area h3 their heading */
.whiteblock { background-image: url(/bga/layout/rounded_b.png); padding: 10px; }
#game_play_area h3 { font-family: Roboto, system-ui, sans-serif; font-weight: 700; }
#lower_divs_container { margin-top: var(--gutter); }
#progress_token_from_box_container > div { display: inline-block; margin: 0 var(--gutter); }
.highlight { outline: calc(3px * var(--scale)) solid #ffb300; outline-offset: calc(2px * var(--scale)); z-index: 30; }
.log { position: relative; list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 120px); overflow: auto; border-radius: 10px; background: var(--panel); }
.log li { display: flex; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--line); cursor: pointer; } .log li:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.log li.current { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); } .log .move { width: 44px; color: var(--muted); flex: none; text-align: right; }
.breakdown { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 10px; font-size: 13px; }
.breakdown th, .breakdown td { padding: 3px 10px; text-align: right; } .breakdown td:first-child { text-align: left; color: var(--muted); } .breakdown .total td { font-weight: 700; border-top: 1px solid var(--line); }