/* V2 capture, real reading progress and camera. No sample imagery. */
#scanCapture { min-height:calc(100svh - 24px); gap:0; }
#scanCapture .new-game-top { align-items:center; min-height:54px; }
#scanCapture .round-button { width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.64); color:#181713; }
#scanCapture .new-game-title { font-family:var(--serif, Georgia, serif); font-size:38px; line-height:1.02; letter-spacing:-.035em; margin:18px 0 6px; }
#scanCapture .capture-intro { font-size:17px; line-height:1.3; color:#777268; margin:0; }
#scanCapture .sheet-slots { margin-top:22px; gap:18px; }
#scanCapture .sheet-slot { gap:10px; min-width:0; }
.capture-section-title { font-size:19px; line-height:1.2; letter-spacing:-.02em; margin:0; font-weight:720; }
.capture-section-title span { font-size:16px; color:#777268; font-weight:500; }
#scanCapture .slot-a .slot-tile { min-height:222px; padding:24px 12px; border-radius:22px; gap:12px; text-align:center; color:#181713; background:linear-gradient(145deg,#F4EFE3,#E9E1D1); box-shadow:inset 0 0 0 1px rgba(24,23,19,.05); }
#scanCapture .slot-a .slot-chip { width:56px; height:56px; border-radius:18px; background:rgba(255,255,255,.72); color:#181713; box-shadow:0 10px 30px rgba(24,23,19,.08); }
#scanCapture .slot-chip svg { width:26px; height:26px; }
#scanCapture .slot-a .slot-copy { gap:8px; }
#scanCapture .slot-a .slot-copy strong { font-size:17px; letter-spacing:-.015em; }
#scanCapture .slot-copy span { font-size:14px; font-weight:400; color:#777268; }
#scanCapture .slot-b .slot-tile { min-height:92px; padding:12px; gap:12px; border-radius:18px; background:rgba(255,255,255,.52); color:#181713; box-shadow:inset 0 0 0 1px rgba(24,23,19,.06); }
#scanCapture .slot-b .slot-chip { flex:none; width:58px; height:58px; border-radius:18px; font-size:28px; font-weight:300; color:#181713; background:#EEE8DA; }
#scanCapture .slot-b .slot-copy strong { font-size:16px; line-height:1.2; }
#scanCapture .slot-b .slot-copy span { font-size:13px; line-height:1.35; color:#777268; }
#scanCapture .slot-b .slot-tile::after { content:'›'; position:static; margin-left:auto; color:#969084; font-size:23px; background:none; width:auto; height:auto; transform:none; }
#scanCapture .slot-tools { display:flex; gap:10px; padding:0; }
#scanCapture .slot-tools button { min-height:50px; border:0; border-radius:15px; flex:1; padding:10px 12px; font-size:16px; font-weight:650; text-decoration:none; color:#181713; background:rgba(255,255,255,.66); box-shadow:inset 0 0 0 1px rgba(24,23,19,.06); }
#scanCapture .slot-tools .capture-photo-button { background:#C89542; box-shadow:none; }
#scanCapture .sheet-slot[data-filled="true"] .slot-tile { min-height:72px; background:rgba(255,255,255,.52); color:#181713; }
#scanCapture .sheet-slot[data-filled="true"] .slot-copy span { color:#625E55; }
#scanCapture .sheet-slot[data-filled="true"] .slot-tile { display:none; }
#scanCapture .sheet-slot .preview-wrap.multi { gap:10px; padding:0; }
#scanCapture .sheet-slot .preview-item { flex:0 0 100%; padding:0; }
#scanCapture .sheet-slot .preview-item img { height:175px; aspect-ratio:auto; border-radius:22px; object-fit:cover; object-position:center 18%; }
#scanCapture .sheet-slot .preview-tools { position:absolute; top:8px; right:8px; margin:0; }
#scanCapture .sheet-slot .preview-tools button { width:44px; height:44px; min-height:44px; border-radius:14px; background:rgba(247,243,233,.92); }
#scanCapture .new-game-foot { padding:12px 0 calc(22px + env(safe-area-inset-bottom,0px)); gap:8px; }
#scanCapture .build-cta { min-height:54px; height:auto; border-radius:18px; background:#181713; color:#fff; font-size:16px; }
#scanCapture .build-cta:disabled { background:#DED5C4; color:#625E55; }
#scanCapture .privacy, #scanCapture .new-game-hint { color:#777268; font-size:12px; }
#scanCapture > .mode-sheet { margin-top:16px; width:100%; }
#scanCapture > .mode-sheet .mode-pill { min-height:52px; border-radius:18px; background:rgba(255,255,255,.48); padding:12px 14px; justify-content:space-between; color:#181713; box-shadow:inset 0 0 0 1px rgba(24,23,19,.055); }
#scanCapture .options-body { z-index:80; border-radius:20px; background:#F7F3E9; box-shadow:0 10px 30px rgba(24,23,19,.15); }
/* Reading remains in document flow so keyboard and large text cannot cover fields. */
body.reading { background:#181713; }
body.reading .app-shell { padding-bottom:0; }
#scanWait { min-height:100dvh; padding:env(safe-area-inset-top,0px) 0 0; gap:0; color:#fff; }
#scanWait .read-top { padding:10px 0 22px; }
#scanWait .read-cancel { min-height:44px; padding:0 15px; border-radius:22px; background:rgba(255,255,255,.10); color:#fff; }
#scanWait .read-hero { padding:0 4px; gap:16px; }
#scanWait .read-sheet { flex:0 0 64px; width:64px; height:82px; border-radius:15px; background:#F7F3E9; box-shadow:0 8px 24px rgba(0,0,0,.26); }
#scanWait .read-copy strong { font-family:var(--serif, Georgia, serif); font-size:34px; line-height:1; letter-spacing:-.03em; }
#scanWait .read-copy span { color:rgba(255,255,255,.58); font-size:14px; line-height:1.3; }
#scanWait .read-bar { height:5px; margin-top:18px; background:rgba(255,255,255,.13); border-radius:3px; }
#scanWait .read-bar span { background:#DDAE62; }
#scanWait .read-steps { margin:24px 4px 0; padding:0; gap:16px; }
#scanWait .read-steps li { min-height:24px; font-size:16px; color:rgba(255,255,255,.45); }
#scanWait .read-steps li[data-status="doing"] { color:#fff; font-weight:700; }
#scanWait .read-steps li[data-status="done"] { color:rgba(255,255,255,.6); }
#scanWait .read-steps li::before { width:24px; height:24px; color:#DDAE62; }
#scanWait .read-steps li[data-status="doing"]::before { background:#DDAE62; color:#181713; }
#scanWait .read-note { font-size:13px; color:rgba(255,255,255,.58); padding:18px 4px 28px; }
#scanWait .read-meta { position:relative; margin-top:auto; margin-inline:-20px; padding:27px 20px calc(26px + env(safe-area-inset-bottom,0px)); border-radius:26px 26px 0 0; background:#F7F3E9; color:#181713; box-shadow:0 -18px 45px rgba(0,0,0,.16); }
#scanWait .read-meta::before { content:''; position:absolute; top:8px; left:calc(50% - 18px); width:36px; height:5px; border-radius:3px; background:rgba(24,23,19,.16); }
#scanWait .read-meta h2 { font-family:var(--sans, sans-serif); font-size:21px; line-height:1.2; letter-spacing:-.025em; margin:5px 0 14px; }
#scanWait .wait-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#scanWait .wait-meta-grid label:first-child, #scanWait .wait-meta-grid label:nth-child(2) { grid-column:auto; }
#scanWait .meta-field { min-width:0; padding:9px 12px 2px; border-radius:16px; background:#fff; font-size:12px; color:#777268; }
#scanWait .meta-field input { width:100%; padding:3px 0; border:0; border-radius:0; background:transparent; font-size:16px; color:#181713; min-height:44px; }
#scanWait .meta-result { padding:4px; display:flex; align-items:center; background:#EEE8DA; }
#scanWait .result-segments { width:100%; gap:4px; }
#scanWait .result-segments button { min-width:44px; min-height:44px; flex:1; border-radius:11px; padding:4px; color:#625E55; }
#scanWait .result-segments button[aria-pressed="true"] { background:white; color:#181713; box-shadow:0 2px 10px rgba(24,23,19,.06); }
#scanWait .read-error { text-align:center; margin:30px 4px; padding:24px 0; background:none; border:0; }
#scanWait .read-error strong { font-family:var(--serif, Georgia, serif); font-size:31px; line-height:1.04; color:#fff; }
#scanWait .read-error span { font-size:15px; line-height:1.4; color:rgba(255,255,255,.65); }
#scanWait .read-error-actions { display:grid; grid-template-columns:1fr; gap:9px; }
#scanWait .read-error-actions button { min-height:50px; border-radius:15px; font-size:16px; }
#scanWait .chip-action { background:#C89542; color:#181713; }
#scanWait .chip-back { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12); }
#scanWait:has(.read-error:not(.hidden)) .read-hero, #scanWait:has(.read-error:not(.hidden)) .read-steps, #scanWait:has(.read-error:not(.hidden)) .read-note { display:none; }
/* Camera uses contain to keep the entire captured frame visible. */
#cameraScreen { background:#090908; }
#cameraScreen .camera-top { top:calc(12px + env(safe-area-inset-top,0px)); left:max(16px,env(safe-area-inset-left,0px)); right:max(16px,env(safe-area-inset-right,0px)); }
#cameraScreen .camera-round { width:44px; height:44px; min-height:44px; border-radius:50%; background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter:blur(18px); }
#cameraScreen .camera-title { min-height:44px; display:flex; align-items:center; padding:0 16px; border-radius:22px; background:rgba(0,0,0,.54); backdrop-filter:blur(16px); font-size:15px; font-weight:700; }
#cameraScreen .camera-advice { top:calc(80px + env(safe-area-inset-top,0px)); max-width:calc(100% - 48px); min-height:38px; padding:10px 16px; border-radius:19px; font-size:14px; line-height:1.3; background:rgba(0,0,0,.58); backdrop-filter:blur(14px); }
#cameraScreen .camera-advice[data-tone="ok"], #cameraScreen .camera-advice[data-tone="good"] { background:rgba(53,117,72,.94); color:#fff; }
#cameraScreen .camera-advice[data-tone="warn"] { background:rgba(198,145,54,.95); color:#19150e; }
#cameraScreen .camera-advice[data-tone="bad"] { background:rgba(154,52,46,.95); color:#fff; }
#cameraScreen .camera-bottom { left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); padding:18px 18px; min-height:122px; border-radius:30px; background:rgba(8,8,7,.88); box-shadow:0 6px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter:blur(18px); }
#cameraScreen .camera-side { width:72px; min-width:44px; min-height:72px; font-size:12px; font-weight:650; }
#cameraScreen .camera-thumb, #cameraScreen .auto-switch { width:48px; height:48px; border-radius:16px; margin-bottom:8px; background-color:rgba(255,255,255,.1); }
#cameraScreen .camera-shutter { width:78px; height:78px; min-height:78px; border:5px solid rgba(255,255,255,.84); border-radius:50%; background:transparent; }
#cameraScreen .camera-shutter span { width:60px; height:60px; background:#fff; }
#cameraScreen .verdict-actions { padding:20px; display:grid; grid-template-columns:1fr 1.5fr; gap:10px; background:rgba(13,13,12,.95); border-radius:24px; }
#cameraScreen .verdict-primary, #cameraScreen .verdict-secondary { min-height:56px; border-radius:18px; font-size:16px; }
#cameraScreen .verdict-primary { background:#C89542; color:#17140f; }
#cameraScreen .verdict-secondary { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); }
#cameraScreen .verdict-card { border-radius:18px; background:rgba(154,52,46,.95); color:#fff; font-size:15px; }
#cameraScreen .camera-denied { background:#181713; padding:100px 24px calc(32px + env(safe-area-inset-bottom,0px)); }
#cameraScreen .denied-icon { width:70px; height:70px; border-radius:22px; background:rgba(255,255,255,.09); }
#cameraScreen .camera-denied h2 { font-family:var(--sans,sans-serif); font-size:27px; line-height:1.08; letter-spacing:-.03em; }
#cameraScreen .camera-denied p { max-width:290px; color:rgba(255,255,255,.65); font-size:15px; line-height:1.42; }
#cameraScreen .denied-actions { width:min(100%,340px); display:flex; flex-direction:column; gap:8px; }
#cameraScreen .denied-link { min-height:50px; padding:12px; border-radius:15px; background:rgba(255,255,255,.09); color:#fff; }
#cameraScreen button:focus-visible, #scanCapture button:focus-visible, #scanWait button:focus-visible { outline:3px solid #DDAE62; outline-offset:3px; }
@media (min-width:760px) { #scanWait .read-meta { margin-inline:0; border-radius:26px; margin-bottom:24px; } #scanCapture { min-height:calc(100svh - 40px); } }
@media (max-width:360px) { #scanCapture .new-game-title { font-size:34px; } #scanWait .read-copy strong { font-size:30px; } #scanWait .wait-meta-grid { grid-template-columns:1fr; } #scanWait .read-meta { margin-inline:-16px; padding-inline:16px; } #cameraScreen .camera-title { padding-inline:10px; } #cameraScreen .camera-bottom { left:10px; right:10px; padding-inline:10px; } }
@media (max-height:600px) and (orientation:landscape) { #cameraScreen .camera-bottom { left:auto; right:12px; top:70px; bottom:12px; width:110px; flex-direction:column; padding:12px; } #cameraScreen .camera-advice { left:40%; max-width:55%; } }

#scanWait .read-steps li::before { flex:none; display:grid; place-items:center; border-radius:50%; font-size:13px; }
#scanWait .read-steps li[data-status="doing"]::before { content:'●'; color:#181713; }
#scanWait .read-meta { flex:none; }
#cameraScreen .camera-top { z-index:10; }
#cameraScreen .camera-shutter { padding:4px; display:grid; place-items:center; }
#cameraScreen .verdict-card { top:calc(84px + env(safe-area-inset-top,0px)); }
#cameraScreen .verdict-card strong { font-family:var(--sans,sans-serif); font-size:16px; }
#cameraScreen .verdict-card span { color:rgba(255,255,255,.9); }
#cameraScreen .verdict-actions { bottom:calc(14px + env(safe-area-inset-bottom,0px)); }

#scanCapture .slot-a .slot-tile { flex-direction:column; align-items:center; justify-content:center; }
#scanCapture .slot-a .slot-copy { text-align:center; }
#scanCapture .slot-a .slot-tools .capture-photo-button { border-radius:25px; }

#scanCapture .slot-b[data-filled="true"] .preview-item img { height:125px; }
#scanCapture .slot-tools button { min-height:44px; padding:8px; font-size:14px; }
.segmented-pill[data-target="scanMode"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
#scanCapture .mode-sheet .segmented-pill[data-target="scanMode"] button { white-space:normal; min-width:0; min-height:48px; padding:8px 4px; }