/* The directory uses the same fieldbook typography as the drawing plates. */
.games-view{padding-bottom:clamp(36px,7vw,92px)}
.library-heading{padding:clamp(34px,5.4vw,72px) 0 clamp(25px,3.3vw,42px);display:flex;align-items:center;justify-content:space-between;gap:32px}
.library-heading h1{margin:10px 0 9px;font-size:clamp(49px,6.1vw,87px);line-height:1;letter-spacing:-.064em}
.library-heading p{color:var(--muted);font-size:clamp(14px,1.35vw,17px)}
.index-map{width:min(29%,340px);flex:none;opacity:.52;height:auto;margin-right:5px;mask-image:linear-gradient(95deg,transparent 0%,#000 17%,#000 100%)}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(15px,2.1vw,28px)}
.game-tile{overflow:hidden;min-width:0;border:1px solid #cbd1c2;border-radius:16px;background:var(--surface);text-decoration:none;box-shadow:0 2px 4px #2c432c09;transition:border-color .2s,box-shadow .2s,transform .2s}
.game-tile:hover{border-color:#95a88f;box-shadow:0 7px 20px #31443112;transform:translateY(-2px)}
.game-tile:active{transform:translateY(0)}
.tile-art{isolation:isolate;position:relative;aspect-ratio:2.35;overflow:hidden;background:#22483d}
.tile-outline .tile-art{background:#213f4b}
.tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.figure-label,.panel-eyebrow,.game-kind{font:500 10px/1.4 var(--mono);letter-spacing:.115em}
.figure-label{position:absolute;top:17px;left:20px;color:#e5e8d0;z-index:1}
.tile-art .figure-label{display:flex;align-items:center;gap:7px;opacity:.93}
.tile-art .figure-label:before,.plate-dot{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#e1a275}
.tile-outline .figure-label:before,.plate-dot{background:#ecd39a}
.tile-copy{padding:clamp(19px,2.2vw,29px);position:relative}
.game-kind{color:#7f5039;display:flex;align-items:center;gap:8px;font-size:9.5px}
.game-kind .ico{width:14px;height:14px}
.tile-outline .game-kind{color:#426474}
.tile-copy h2{font:500 clamp(30px,3.2vw,43px)/1.1 var(--serif);letter-spacing:-.055em;margin:8px 0 7px}
.tile-copy p{font-size:14px;color:#566557;line-height:1.5}
.tile-cta{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#345c44;margin-top:clamp(17px,2.3vw,29px)}
.tile-cta .ico{width:16px;height:16px;transition:transform .18s}
.game-tile:hover .tile-cta .ico{transform:translateX(3px)}
.tile-outline .tile-cta{color:#375c69}
.game-crumb{display:flex;gap:10px;align-items:center;padding-top:16px;color:#637466;font-size:11.5px;line-height:1.4}
.game-crumb a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-weight:600;color:#4d6555}
.game-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.game-crumb .ico{width:13px;height:13px}.game-crumb>span[aria-hidden]{color:#a5ab9b}
.game-crumb+.round-heading{padding-top:clamp(12px,1.4vw,20px)}
.outline-view{padding-bottom:36px}
.outline-heading h1{margin-top:6px}
.outline-table{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(275px,.88fr);border:1px solid #c9d0c4;border-radius:17px;background:var(--surface);overflow:hidden;box-shadow:0 2px 5px #29402a0b}
.outline-plate{isolation:isolate;position:relative;overflow:hidden;min-height:clamp(345px,50svh,545px);background:radial-gradient(ellipse at 46% 44%,#365664 0%,#254956 51%,#1d3a46 100%)}
.silhouette-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,#b6cccb14 1px,transparent 1px),linear-gradient(#b6cccb14 1px,transparent 1px);background-size:38px 38px;background-position:center}
.outline-plate .figure-label{display:flex;align-items:center;gap:7px;color:#e4e8d9;top:19px;left:20px;font-size:9.5px}
.figure-label b{font:inherit}
.plate-north{position:absolute;right:19px;top:15px;display:grid;gap:3px;justify-items:center;color:#c9d8d0;font:500 8px var(--mono)}
.plate-north svg{width:12px;height:20px}
.plate-reg{position:absolute;width:11px;height:11px;bottom:17px;border-bottom:1px solid #d4e2cf75}
.reg-sw{left:19px;border-left:1px solid #d4e2cf75}.reg-se{right:19px;border-right:1px solid #d4e2cf75}
.country-shape{position:absolute;left:12%;top:13%;width:76%;height:74%;overflow:visible}
.country-shape path,.small-plate path{fill:#e9dfb9;stroke:#faf0cf;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;paint-order:stroke fill}
.country-shape path{transition:fill .28s ease}
.outline-plate[data-outcome=solved] .country-shape path{fill:#cbe1c0}
.island-overview{position:absolute;right:16px;bottom:14px;width:clamp(62px,15%,102px);aspect-ratio:1.35;padding:7px 8px 15px;background:#193b47df;border:1px solid #a7c0bf62;border-radius:5px}
.island-overview svg{width:100%;height:100%;display:block}.island-overview path{fill:#ebdfb8;stroke:#ebdfb8;stroke-width:1;vector-effect:non-scaling-stroke}
.island-overview span{position:absolute;bottom:3px;left:0;right:0;text-align:center;color:#d9e0cd;font:500 7px var(--mono);letter-spacing:.07em}
.answer-panel{align-self:center;padding:clamp(24px,3.3vw,49px);min-width:0}
.panel-eyebrow{color:#4a6b76;font-size:9.5px;text-transform:uppercase}
.answer-panel h2{font:500 clamp(28px,2.8vw,40px)/1.1 var(--serif);letter-spacing:-.051em;margin:8px 0}
.guess-budget,#outlineResultNote,.quiz-loading p{color:var(--muted);font-size:13px}
#guessForm{margin-top:clamp(18px,2.4vw,28px)}
#guessForm label{display:block;margin-bottom:5px;font-size:12px;font-weight:600}
#countryGuess{display:block;width:100%;min-height:45px;padding:10px 12px;background:#fffef8;color:var(--ink);border:1px solid #aab6a9;border-radius:7px;font:400 16px/1.4 var(--sans);outline:0;transition:border-color .15s,box-shadow .15s}
#countryGuess::placeholder{color:#788177}
#countryGuess:focus{border-color:#45717b;box-shadow:0 0 0 3px #7999a021}
.guess-submit{width:100%;justify-content:space-between;margin-top:11px}.outline-view .primary{background:#2d5362}.outline-view .primary:hover{background:#214452}
.reveal-answer{display:block;margin:13px auto 0;padding:4px 7px;color:#637064;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.reveal-answer:hover,.spelling-choice:hover{color:var(--ink)}
.guess-feedback{color:#82482f;font-size:12px;line-height:1.43}.guess-feedback:not(:empty){margin-top:8px}
.spelling-choice{color:#315f70;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:4px 0 1px}
.guess-log{margin-top:19px;padding-top:14px;border-top:1px solid var(--line)}
.guess-log>.micro{font-size:8.5px;color:var(--muted)}
.guess-log ul{padding:0;margin:6px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.guess-log li{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:#f2e9df;border-radius:4px;padding:3px 7px;color:#79503d}
.guess-log .correct-guess{background:#e4eddf;color:#345e48}
.guess-log li>span{font-weight:700;font-size:12px}
.answer-flag{display:block;object-fit:cover;border:1px solid #586d542b;border-radius:3px;margin:18px 0 8px}
#outlineResult .guess-submit{margin-top:20px}
.plate-note{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.45}
.quiz-loading .secondary{margin-top:12px}
.outline-stat-card{border:1px solid #cad6d2;border-radius:14px;background:#eaf0ec;padding:22px clamp(18px,2.4vw,32px);display:flex;flex-direction:column;justify-content:space-between}
.outline-stat-card .record-label,.outline-stat-card .record-label>span{color:#4f696c}
.outline-stat-main{display:flex;align-items:center;gap:clamp(14px,2.1vw,29px);margin:12px 0 16px}
.outline-stat-main>strong{color:#31565e;font:500 clamp(43px,4.8vw,61px)/1 var(--serif);letter-spacing:-.068em}
.outline-stat-main>div{display:grid;gap:3px;border-left:1px solid #aebfb6;padding-left:clamp(13px,1.7vw,22px);font-size:14px;font-weight:600;color:#3d5c5f}
.outline-stat-main small{color:#59716b;font-size:11px;font-weight:400}
.outline-stat-card .rank-track{background:#cbd7d0}.outline-stat-card .rank-track i{background:#658a91}.outline-stat-card .track-ends{color:#64776f}
.journal-bar{display:flex;align-items:center;justify-content:space-between;gap:15px}
.game-switch{display:inline-flex;align-items:center;gap:2px;background:#ecefe5;border:1px solid #d4dacb;border-radius:8px;padding:2px}
.game-switch button,.game-switch a{color:#596a5d;font-weight:600;font-size:12px;line-height:1.3;padding:7px 11px;text-decoration:none;border-radius:5px;white-space:nowrap}
.game-switch [aria-pressed=true],.game-switch [aria-current=page]{background:var(--surface);color:#294831;box-shadow:0 1px 3px #2a392620}
.guide-switch{margin:0 0 24px}
.outline-guide-art img{width:100%;height:200px;object-fit:cover;display:block;background:#224450}
.outline-guide-art figcaption{color:var(--muted);font-size:12px}
.outline-history{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0}
.outline-history li{display:flex;align-items:center;gap:13px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.small-plate{display:grid;place-items:center;flex:none;background:#294c58;border-radius:5px;width:57px;height:47px}
.small-plate svg{width:78%;height:76%}.small-plate path{stroke-width:.6}
.history-name{display:grid;gap:2px;min-width:0}.history-name strong{font-size:14px;font-weight:600}.history-name small{color:var(--muted);font-size:11px}
.outcome-badge{font-weight:600;font-size:10px;border-radius:20px;padding:3px 8px;margin-left:auto;color:#75533f;background:#f1e9df}
.outcome-badge.is-solved{color:#3b6549;background:#e3eddf}
@media(max-width:760px){
  .library-heading{padding:32px 0 24px}.index-map{width:24%}
  .tile-copy p{font-size:13px}
  .outline-table{grid-template-columns:minmax(0,1.2fr) minmax(245px,.9fr)}
  .answer-panel{padding:22px}.outline-history{grid-template-columns:1fr}
}
@media(max-width:620px){
  .library-heading{padding:29px 0 23px}.library-heading h1{font-size:clamp(43px,9vw,57px)}.index-map{display:none}
  .game-grid{grid-template-columns:1fr;gap:17px}.game-tile{border-radius:13px}
  .tile-art{aspect-ratio:2.65}.tile-copy{padding:17px 19px 18px}.tile-copy h2{font-size:31px;margin:4px 0}.tile-cta{margin-top:12px}
  .figure-label{top:12px;left:14px;font-size:8px}
  .game-crumb{padding-top:12px;font-size:11px}.game-crumb+.round-heading{padding-top:10px}
  .outline-heading{display:block}.outline-heading>div{display:block}.outline-heading h1{margin:4px 0}
  .outline-table{grid-template-columns:1fr;border-radius:13px}
  .outline-plate{min-height:0;height:clamp(212px,34svh,315px)}
  .outline-plate .figure-label{top:12px;left:14px;font-size:8.5px}.plate-north{top:10px;right:13px}
  .plate-reg{bottom:12px}.reg-sw{left:14px}.reg-se{right:14px}
  .answer-panel{padding:20px;align-self:stretch}
  .answer-panel h2{font-size:28px}#guessForm{margin-top:14px}.guess-submit{min-height:43px}.reveal-answer{margin-top:9px}
  .guess-log{margin-top:13px;padding-top:10px}
  .outline-stat-card{padding:17px 18px}.outline-stat-main{margin:10px 0 13px}.record-label{font-size:9px}
  .journal-bar{align-items:flex-start;flex-direction:column;gap:10px}
  .guide-switch{margin-bottom:18px}
}
@media(max-width:380px){
  .mast-inner{padding-inline:10px;gap:4px}.brand{gap:5px}.brand img{width:24px;height:24px}.brand span{font-size:20px}
  .nav-link{padding-inline:6px;min-height:42px}
}
@media(max-width:340px){.brand img{display:none}}
@media(prefers-reduced-motion:reduce){.game-tile:hover,.game-tile:hover .tile-cta .ico{transform:none}}

/* A compact catalog leaves all four games close to the top of the page. */
@media(min-width:960px){
  .library-heading{padding:clamp(34px,4.3vw,64px) 0 clamp(26px,3vw,40px)}
  .game-grid{gap:19px}.game-tile{display:grid;grid-template-columns:41% 1fr;min-height:196px}
  .tile-art{aspect-ratio:auto;min-height:100%}.tile-art img{position:absolute;inset:0}
  .tile-copy{padding:24px 21px 22px;align-self:center}.tile-copy h2{font-size:clamp(28px,2.7vw,38px)}
  .tile-cta{margin-top:17px}.tile-art .figure-label{left:13px;top:12px;font-size:8px}
}
.tile-flag .tile-art{background:#513d32}.tile-capital .tile-art{background:#344f49}
.tile-flag .game-kind,.tile-flag .tile-cta{color:#815139}
.tile-capital .game-kind,.tile-capital .tile-cta{color:#416358}
.flag-display{position:absolute;inset:19% 14%;display:grid;place-items:center}
.flag-display img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 9px #281b1a38)}
#outlineView[data-game=flag] .outline-plate{background:radial-gradient(ellipse at 45% 41%,#8a684e,#695243 55%,#4d4138)}
#outlineView[data-game=flag] .guess-submit{background:#74513c}
#outlineView[data-game=capital] .outline-plate{background:radial-gradient(ellipse at 45% 41%,#556e64,#36584f 55%,#294740)}
#outlineView[data-game=capital] .guess-submit{background:#365f51}
#outlineView[data-game=capital] .country-shape{left:10%;width:80%;top:20%;height:68%}
.plate-country{position:absolute;top:15px;left:50%;transform:translateX(-50%);max-width:calc(100% - 200px);display:flex;align-items:center;gap:9px;border:1px solid #a9bfaa58;background:#243e36d9;color:#f1efda;border-radius:6px;padding:6px 10px}
.plate-country img{width:28px;height:19px;object-fit:contain;flex:none}
.plate-country strong{font:600 13px/1.25 var(--sans,system-ui);text-align:left}
#capitalInsets rect{fill:#29443a35;stroke:#e7e3c070;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
.city-pin{--pin:#ac3534;position:absolute;z-index:4;width:0;height:0;pointer-events:none;color:var(--pin)}
.city-pin[data-kind=right]{--pin:#197549}.city-pin[data-kind=answer]{--pin:#936313}
.city-pin i,.city-pin b{position:absolute;display:block;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%}
.city-pin i{border:1.7px solid currentColor}.city-pin b{background:var(--pin);border:2px solid #fff9e7;box-shadow:0 0 0 1px #172d284d}
.city-pin span{position:absolute;top:-12px;left:11px;padding:4px 8px;background:#fffdf0;color:#293a32;border-radius:4px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 2px 7px #172a2533}
.city-pin[data-side=left] span{left:auto;right:11px}
.guess-feedback{min-height:0}.guess-log li{animation:guess-in .18s ease-out}.guide-switch{flex-wrap:wrap}
@keyframes guess-in{from{opacity:.15;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
.performance-overall{position:relative;overflow:hidden;isolation:isolate;border-radius:15px;background:#24483b;color:#f7f3e6;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(22px,3.1vw,42px)}
.performance-overall:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(ellipse at 68% 160%,transparent 0 34px,#d5e1c812 35px 36px,transparent 37px 55px);pointer-events:none}
.overall-intro .panel-eyebrow{color:#d6cf9d}.overall-intro h2{color:#f3f0db;font:500 clamp(31px,4.1vw,58px)/1.06 var(--serif);letter-spacing:-.055em;margin:7px 0}
.overall-intro p,.overall-meter>span{color:#cbd8c6;font-size:13px}.overall-meter{width:clamp(166px,24%,280px)}
.overall-value{display:flex;align-items:baseline;gap:8px}.overall-value strong{color:#fff7d9;font:500 clamp(39px,4.4vw,64px)/1 var(--serif);letter-spacing:-.06em}.overall-value>span{color:#d3ddc7}
.performance-overall .rank-track{background:#587166;margin:8px 0}.performance-overall .rank-track i{background:#d2bd7b}.overall-meter>span{font-size:11px}
.scoring-guide{margin:12px 0 20px}.scoring-guide>p{font-size:13px;color:#59665a;line-height:1.6;max-width:75ch;margin:8px 0 6px}
.game-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.game-stat{padding:17px;border:1px solid #cdd6c7;border-radius:12px;background:#f6f8ef;color:#35513d}
.stat-outline{--tone:#395d6a}.stat-flag{--tone:#80563e}.stat-capital{--tone:#416759}.stat-border{--tone:#3c5d44}
.game-stat.stat-outline{background:#edf2f2}.game-stat.stat-flag{background:#f7f0e7}.game-stat.stat-capital{background:#edf3ed}
.stat-heading{color:var(--tone);display:flex;gap:7px;align-items:center}.stat-heading .ico{width:15px;height:15px}.stat-heading h3{font-size:14px;font-weight:700}
.stat-line{display:flex;gap:7px;align-items:baseline;margin:14px 0 4px}.stat-line strong{font:500 40px/1 var(--serif);letter-spacing:-.06em;color:var(--tone)}
.stat-line small,.game-stat p,.game-stat>span{color:#56675a;font-size:12px}.game-stat>span{display:block;font-size:10px;margin-top:8px}
.history-select{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.history-select select{font:600 13px var(--sans,system-ui);color:var(--ink);padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.history-list{list-style:none;padding:0;margin:0;border-block:1px solid var(--line)}.history-list li+li{border-top:1px solid var(--line)}
.history-row{display:flex;width:100%;min-height:68px;align-items:center;gap:14px;padding:8px 7px;text-align:left}.history-row:is(button):hover{background:#e9eee2}
.history-thumb{width:58px;height:45px;flex:none;border-radius:5px;overflow:hidden;background:var(--tone);display:grid;place-items:center}
.history-thumb img{max-width:80%;max-height:76%;width:auto;height:auto}.history-thumb svg{width:85%;height:82%;display:block}.history-thumb>svg:not(.journal-map)>path{fill:#e7dfb5;stroke:#f3edcd;stroke-width:1;vector-effect:non-scaling-stroke}.history-thumb .journal-map{width:100%;height:100%}
.journal-bar .panel-eyebrow{color:var(--accent);font-size:9px;margin-bottom:4px}.history-row .history-name small{color:#627064}.history-row .outcome-badge{flex:none}
.offline-guide{margin:24px 0 38px;border-top:1px solid var(--line);padding:14px 0}.offline-guide summary{text-align:left;font-size:14px;font-weight:600;cursor:pointer}.offline-guide>p{font-size:13px;max-width:66ch;margin:10px 0;color:var(--muted)}.offline-guide>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
@media(min-width:621px){
  .answer-panel{align-self:stretch;padding-top:clamp(27px,4.1vw,54px);padding-bottom:24px}
  #guessForm .guess-feedback{min-height:17px;margin-top:5px}
  #guessForm .guess-submit{margin-top:5px}
}
@media(max-width:800px){.game-scores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .game-tile{display:grid;grid-template-columns:33% minmax(0,1fr)}.game-grid{gap:10px}
  .tile-art{aspect-ratio:auto;min-height:100%}.tile-art img{position:absolute;inset:0}.tile-copy{padding:14px 13px}.tile-copy h2{font-size:25px}.tile-copy p{font-size:12px}.tile-cta{font-size:11px;margin-top:7px}.tile-art .figure-label{top:9px;left:8px;font-size:7px}
  .plate-country{top:10px;max-width:calc(100% - 113px);padding:4px 7px;gap:5px}.plate-country strong{font-size:11px}.plate-country img{width:21px;height:15px}
  #outlineView[data-game=capital] .outline-plate .figure-label{top:auto;bottom:10px;left:14px}
  #outlineView[data-game=capital] .country-shape{top:21%;height:66%}
  .performance-overall{gap:17px;flex-wrap:wrap}.overall-meter{width:100%}.overall-value strong{font-size:37px}.game-scores{gap:7px}.game-stat{padding:11px}.stat-heading{gap:4px}.stat-heading h3{font-size:12px}.stat-line strong{font-size:32px}.game-stat p{font-size:11px}
  .history-row{gap:8px;padding-inline:0}.history-thumb{width:43px;height:38px}.history-select{align-self:flex-start}.guide-switch{display:flex;max-width:max-content}
}
@media(prefers-reduced-motion:reduce){.guess-log li{animation:none}}