* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 'Nunito', system-ui, sans-serif; background: #f6f3ea; color: #222; }
header { position: sticky; top: 0; z-index: 2; display: flex; gap: .8em; align-items: center;
         padding: .5em .8em; background: #29452f; color: #fff; }
header #clock { margin-left: auto; font-variant-numeric: tabular-nums; }
section { padding: .6em .8em 3em; max-width: 640px; margin: 0 auto; }
h2 { margin: .3em 0; }
label { display: block; margin: .4em 0; }
select { width: 100%; font-size: 15px; padding: .3em; }
button { font: inherit; font-size: 15px; padding: .45em .8em; border: 1px solid #888; border-radius: 6px; background: #fff; }
button.primary, button.on { background: #29452f; color: #fff; border-color: #29452f; }
button:disabled { opacity: .45; }
.hint { color: #666; font-size: 13px; }
.row { display: flex; gap: .5em; flex-wrap: wrap; margin: .5em 0; }
#map { width: 100%; height: auto; touch-action: manipulation; user-select: none; }
#panel { padding: .5em; background: #fff; border-radius: 8px; margin-top: .4em; }
#panel .actions, #panel .targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
#panel .targets { grid-template-columns: repeat(5, 1fr); margin-bottom: .4em; }
#panel .targets button { display: flex; flex-direction: column; align-items: center; gap: .15em; padding: .4em .1em; font-size: 12px; }
#panel .actions button { padding: .8em .2em; }
#panel small { color: #888; }
#panel .notehead { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: .4em; }
#panel .notehead button { padding: .2em .7em; }
#panel .marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
#panel .marks button { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .5em .2em; font-size: 12px; min-height: 4.6em; }
#panel .marks button b { min-height: 1.1em; font-size: 15px; }
#panel .marks button.no { background: #f3e0dc; border-color: #8e1b1b; }
#panel .marks button.no .ic { opacity: .4; }
#panel .marks button.yes { background: #dcefdc; border-color: #2e7d32; border-width: 2px; }
#panel .marks button.greyed { opacity: .3; }
#panel .cancel { margin-top: .2em; }
#feedback { margin: .4em .2em; font-weight: 600; min-height: 1.2em; }
.ic { vertical-align: middle; }
details { margin: .6em 0; background: #fff; border-radius: 8px; padding: .4em .6em; }
summary { font-weight: 600; cursor: pointer; }
.bad { color: #c62828; }
#log li { margin: .15em 0; }
#map { background: radial-gradient(ellipse at center, #eef3f4 55%, #dfe8ea 100%); border-radius: 10px; }
.hex { fill: #fff; stroke: #7a4a35; stroke-width: 1.5; }
.hex.sel { stroke: #1565c0; stroke-width: 4; }
.hex.flag { stroke: #c62828; stroke-width: 4; }
.num { font: bold 11px sans-serif; fill: #fff; }
.cross { stroke: #3b2a20; stroke-width: 2.4; stroke-linecap: round; }
.ring { fill: none; stroke: #2e7d32; stroke-width: 2.2; }
.cross.hint, .ring.hint { stroke: #1565c0; stroke-dasharray: 3 2; }
.hit { fill: transparent; cursor: pointer; }
.mountain { stroke: #6b3f2a; stroke-width: 6; stroke-linecap: round; }

.hex.hl { stroke: #ef6c00; stroke-width: 4; }
#rulesTop { margin: 0 0 .4em; }
#rulesTop summary .ic { margin-right: 2px; }
.rule { display: flex; gap: .6em; align-items: flex-start; margin: .45em 0; font-size: 14px; }
.rule .ic { flex: none; margin-top: 2px; }
.note { padding: .35em .5em; margin: .3em 0; border-left: 3px solid #29452f; background: #faf8f2; font-size: 14px; }
.note.conf { border-left-color: #7b4a8c; }
.note.new { background: #f3e8f7; cursor: pointer; }
.badge { display: inline-block; padding: 0 .45em; border-radius: 9px; background: #7b4a8c; color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; }
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35em; margin: .4em 0; }
.topics button { font-size: 14px; }
#tokens { margin-top: .3em; }
#log { padding-left: 0; list-style: none; }
#log li { padding: .3em .4em; border-radius: 6px; cursor: pointer; font-size: 14px; }
#log li.lit { background: #ffe9d2; }
#log .where { color: #666; }
small.back { display: block; font-size: 11px; color: #888; }
summary { font-weight: 700; }
.topics small { color: #888; }

#map g.hexg, #map g.pop { transform-box: fill-box; transform-origin: center; }
#map g.hexg { will-change: transform; }
.popnum { font: 800 22px 'Nunito', sans-serif; }
label.check { display: flex; gap: .4em; align-items: center; }