/* Approved V2 application chrome and library; fluid and safe-area aware. */
:root { --bg:#F7F3E9; --paper:#EEE8DA; --ink:#181713; --navy:#181713; --navy-2:#201F1B; --ink-2:#302E28; --muted:#625E55; --faint:#969084; --line:#DED5C4; --line-2:#DED5C4; --gold:#C89542; --gold-2:#936521; --gold-soft:#F3E4C5; --serif:"New York",ui-serif,Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif; }
body { font-family:var(--sans); padding-bottom:calc(156px + var(--safe-bottom)); }
body[data-screen="Scan"] { padding-bottom:0; }
.app-header { padding:calc(20px + env(safe-area-inset-top,0px)) 20px 10px; position:relative; }
.app-title { font-family:var(--serif); font-size:38px; line-height:1; letter-spacing:-.04em; font-weight:700; }
body[data-screen="Settings"] .app-title { font-family:var(--sans); font-size:34px; }
.header-round { width:44px; height:44px; border:0; border-radius:50%; padding:0; background:#ffffff94; box-shadow:inset 0 0 0 1px #1817130d; font-size:18px; letter-spacing:1px; }
.header-actions .history-count, .header-actions .status { display:none; }
.app-shell { padding-top:8px; }
.library-filters { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:4px; padding:3px; background:var(--paper); border-radius:14px; margin:0 0 14px; }
.library-filters button { border:0; background:transparent; min-height:44px; padding:5px; font-size:12px; color:var(--muted); border-radius:11px; }
.library-filters button[aria-pressed="true"] { background:linear-gradient(145deg,#C29B50,#AE893B); color:#fff; box-shadow:none; }
.history-list { gap:0; border-radius:0; overflow:hidden; }
.history-item { border-radius:0; }
.open-game { border-radius:0; background:var(--bg); border-bottom:1px solid #18171310; padding:14px 4px; min-height:88px; gap:12px; }
.history-item:first-child .open-game { border-radius:0; }
.history-item:last-child .open-game { border-radius:0; border-bottom:0; }
.history-item.is-provisional .open-game { box-shadow:none; }
.result-badge { width:48px; height:42px; border-radius:8px; font:700 14px var(--sans); flex:none; }
.result-badge[data-tone="win"] { background:#DCEBDD; color:#43815A; }
.result-badge[data-tone="loss"] { background:#F2DBD8; color:#A63C35; }
.result-badge[data-tone="draw"] { background:#E7E5E0; color:var(--muted); }
.history-item.is-provisional .result-badge { background:#F3E5C8; border:0; color:#A96D1D; }
.history-main { gap:2px; }
.history-main strong { font-size:14px; line-height:1.2; font-weight:650; }
.history-main span, .history-item.is-provisional .history-main span { color:var(--muted); font-size:11px; font-weight:400; margin-top:4px; }
.history-tail { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.game-status,.parked-mini { background:#F3E5C8; color:#A96D1D; padding:5px 7px; border-radius:9px; font-size:11px; white-space:nowrap; }
.parked-mini { background:var(--paper); color:var(--muted); }
.history-tail i { font-size:20px; color:#B8B2A6; }
.games-foot { text-align:left; font-size:11px; margin:12px 4px; color:var(--faint); }
.empty-state { display:flex; flex-direction:column; justify-content:center; min-height:min(470px,55dvh); padding:20px; gap:0; }
.empty-knight { width:88px; height:88px; border-radius:30px; background:linear-gradient(145deg,#211F1A,#11110F); color:#DDAE62; font-size:55px; display:grid; place-items:center; box-shadow:0 18px 35px #18171329; margin-bottom:24px; }
.empty-state strong { font-family:var(--serif); font-size:25px; font-weight:700; line-height:1.1; letter-spacing:-.03em; max-width:none; margin-bottom:8px; }
.empty-state p { font-size:14px; line-height:1.45; max-width:285px; }
.new-game-fab { position:fixed; left:50%; transform:translateX(-50%); width:var(--shell); min-height:50px; bottom:calc(84px + var(--safe-bottom)); border-radius:17px; color:white; background:linear-gradient(145deg,#C29B50,#AE893B); box-shadow:0 8px 24px #18171314; font-size:16px; }
.bottom-nav { left:50%; right:auto; transform:translateX(-50%); bottom:0; width:min(640px,100%); min-height:58px; height:auto; padding:4px 12px calc(8px + var(--safe-bottom)); border:0; border-top:1px solid #1817130b; border-radius:28px 28px 0 0; background:#f3eee4; backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%); box-shadow:0 -4px 16px #18171305; }
.nav-item { min-height:50px; border-radius:999px; gap:2px; color:var(--faint); }
.nav-item.active { background:#ffffff80; color:#936521; box-shadow:none; }
.nav-icon { width:20px; height:20px; }
.nav-item small { font-size:11px; }
.filter-empty { padding:30px 20px; text-align:center; color:var(--muted); font-size:15px; }
.global-banner { background:var(--ink); color:#fff; border:0; border-radius:18px; margin:12px auto; width:var(--shell); font-size:13px; }
.global-banner p { color:#fff; }
.pending-card { border:0; border-radius:21px; background:linear-gradient(145deg,#211F1A,#12110F); }
body.viewing .viewer-destinations { margin:12px 0 0; background:var(--paper); border-radius:19px; padding:4px; }
body.viewing .viewer-destinations button { color:var(--muted); font-size:12px; padding:6px; min-height:50px; }
body.viewing .viewer-destinations button[aria-pressed="true"] { background:#fff; color:#936521; box-shadow:0 2px 10px #1817130f; }
.viewer-history summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:14px; color:var(--muted); }
.viewer-history { margin-top:10px; }
.viewer-move-info span:first-child { font-family:var(--serif); font-size:19px; }
.viewer-photos.compare-photos { grid-template-columns:repeat(2,minmax(0,1fr)); }
.viewer-photos.compare-photos .viewer-photo-empty { grid-column:1/-1; }
.game-viewer.show-photos .viewer-history { display:none; }
.viewer-actions { margin-top:4px; }
@media (max-width:360px) { .history-tail { max-width:78px; } .game-status,.parked-mini { font-size:10px; }  }
@media (prefers-reduced-transparency:reduce) { .bottom-nav { background:var(--bg); backdrop-filter:none; } }

.viewer-source-comparison { grid-column:1/-1; background:var(--bg); color:var(--ink); border-radius:22px; padding:20px; display:grid; gap:16px; }
.viewer-source-comparison h2 { font:700 24px/1.15 var(--serif); }
.viewer-source-comparison > p { color:var(--muted); font-size:14px; }
.viewer-source-comparison .evidence-crop { height:150px; }
.viewer-source-comparison .evidence-read { color:var(--ink); }

body.viewing .viewer-sheet { width:auto; max-width:none; margin-inline:-20px; padding-inline:20px; }
@media (max-width:360px) { body.viewing .viewer-sheet { margin-inline:-16px; padding-inline:16px; } }


body.data-step { background:var(--bg); }
body.data-step .result-topbar-copy strong { color:var(--ink); font-family:var(--sans); }
body.data-step .result-topbar .icon-button { color:var(--ink); background:#ffffffaa; border-radius:50%; }
#viewLab .lab-hero h1 { color:#fff; }

/* Compact utility details keep the move photograph next to the move control. */
.viewer-reading { margin-top:4px; }
.viewer-reading summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--muted); font-size:13px; gap:8px; }
.viewer-reading summary::after { content:'⌄'; }
.viewer-reading[open] summary::after { content:'⌃'; }
.viewer-reading .evidence-read { margin:4px 0; font-size:13px; }
.viewer-utilities { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 20px; }
.viewer-utilities > details { flex:1; min-width:130px; }
.viewer-utilities .viewer-history { margin-top:4px; }
.viewer-utilities:has(.viewer-history[open]) { display:block; }
body.viewing .viewer-sheet { gap:8px; }
body.viewing .viewer-nav { width:min(100%,330px); margin:-24px auto 0; position:relative; z-index:1; padding:6px; border-radius:999px; box-shadow:0 5px 16px #18171318; }
body.viewing .viewer-nav button { border-radius:50%; min-width:44px; min-height:44px; }
body.viewing .viewer-destinations { background:transparent; margin-top:4px; border-radius:0; border-top:1px solid #1817130b; gap:2px; }
body.viewing .viewer-destinations button { display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; font-size:11px; min-width:0; min-height:62px; border-radius:18px; }
.viewer-destinations svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }