:root { --ink: #2b2118; --paper: #efe6d2; --accent: #c8652d; --hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120e0b; overflow: hidden; font-family: var(--serif); color: #f4ecdc; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #120e0b; text-align: center; padding: 16px; z-index: 5; }
#loading[hidden] { display: none; }
#loading .title { font-size: clamp(42px, 8vw, 88px); letter-spacing: -.01em; font-style: italic; }
#loading .msg { opacity: .7; font-size: 17px; max-width: 34em; }
#loading .bar { width: min(420px, 80vw); height: 2px; background: #3a2d22; }
#load-bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.recovery-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.recovery-actions button { padding: 12px 22px; border: 1px solid #d8c7a8; border-radius: 24px; background: #f4ead2; color: #231a12; font: 16px system-ui, sans-serif; cursor: pointer; }
.recovery-actions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.bubble { position: absolute; left: 0; top: 0; padding: 7px 14px 9px; background: rgba(253,248,236,.95); color: #231a12; font-family: var(--hand); font-size: 19px; border-radius: 16px; opacity: 0; transition: opacity .18s; max-width: 340px; text-align: center; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.bubble.on { opacity: 1; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: inherit; transform: rotate(45deg); }
.bubble.offscreen { left: 50%; top: auto; bottom: 74px; transform: translateX(-50%) !important; }
.bubble.offscreen::after { display: none; }

.jump-icon { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.jump-icon span { display: inline-block; padding: 3px 10px; font: 600 13px/1.4 system-ui, sans-serif; letter-spacing: .02em; color: #fdf8ec; border: 1.5px solid rgba(253,248,236,.9); border-radius: 12px; background: rgba(30,22,16,.42); backdrop-filter: blur(3px); box-shadow: 0 2px 10px rgba(0,0,0,.4); }

.prompt { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); font: 500 15px/1.5 system-ui, sans-serif; color: #fdf8ec; text-shadow: 0 1px 6px rgba(0,0,0,.85); opacity: 0; transition: opacity .15s; white-space: nowrap; }
.prompt.on { opacity: 1; }
.prompt kbd { font: 600 12px system-ui; padding: 2px 7px; border: 1.3px solid rgba(253,248,236,.85); border-radius: 6px; margin-right: 6px; background: rgba(30,22,16,.45); }

.hint { position: absolute; left: 40px; bottom: 40px; max-width: 390px; font: 400 15px/1.5 system-ui, sans-serif; color: rgba(253,248,236,.92); text-shadow: 0 1px 5px rgba(0,0,0,.9); opacity: 0; transition: opacity .35s; }
.hint.on { opacity: 1; }
.hint kbd { font: 600 12px system-ui; padding: 1px 6px; border: 1px solid rgba(253,248,236,.7); border-radius: 5px; }

.toast { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); font-family: var(--hand); font-size: clamp(19px, 2.2vw, 28px); color: #fdf8ec; text-shadow: 0 1px 6px rgba(0,0,0,.7); background: rgba(24,16,9,.42); padding: 5px 18px 7px; border-radius: 10px; opacity: 0; transition: opacity .3s; text-align: center; max-width: 80vw; }
.toast.on { opacity: 1; }
.toast.low { top: 21%; }

.pad { position: absolute; right: 3.5vw; top: 50%; width: min(330px, 80vw); transform: translate(calc(100% + 80px), -50%) rotate(4deg); transition: transform .42s cubic-bezier(.2,.9,.3,1.1); }
.pad.open { transform: translate(0, -50%) rotate(-1.6deg); }
.pad-paper { position: relative; padding: 42px 26px 22px 40px; background: repeating-linear-gradient(transparent 0 29px, rgba(71,105,150,.32) 29px 30px), linear-gradient(#f8f2e2, #eee4cd); background-position: 0 37px, 0 0; box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 1px 0 #fff inset; color: #2a2a3a; font-family: var(--hand); border-radius: 3px 3px 5px 5px; }
.pad-paper::before { content: ''; position: absolute; inset: 0 auto 0 30px; width: 1.5px; background: rgba(190,60,60,.45); }
.pad-paper h2 { margin: 0 0 10px -8px; font-size: 21px; font-weight: 400; color: #1e2c50; transform: rotate(-.7deg); }
.pad-paper ol { margin: 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 30px; }
.pad-paper li { position: relative; }
.pad-paper li span { position: relative; display: inline-block; line-height: 1.25; padding: 2px 0; vertical-align: top; }
.pad-paper li.done span { color: rgba(42,42,58,.55); }
.pad-paper li.done span::after { content: ''; position: absolute; left: -3px; right: -3px; top: 54%; height: 2.5px; background: #b23a2c; border-radius: 3px; transform: rotate(-.8deg); }
.pad-paper li.just span::after { animation: strike .6s ease-out .25s backwards; transform-origin: left; }
@keyframes strike { from { transform: scaleX(0) rotate(-.8deg); } to { transform: scaleX(1) rotate(-.8deg); } }
.pad-paper .errands { margin: 0 0 8px -8px; font-size: 15px; line-height: 22px; color: #2a2a3a; }
.pad-paper .errands s { text-decoration-color: #b23a2c; text-decoration-thickness: 2px; }
@media (max-height: 820px) { .pad-paper { padding-top: 26px; padding-bottom: 12px; } .pad-paper ol { font-size: 13.5px; line-height: 22px; } .pad-paper h2 { font-size: 18px; margin-bottom: 4px; } .pad-paper .errands { font-size: 13px; line-height: 17px; margin-bottom: 4px; } }
@media (max-height: 620px) { .pad { transform-origin: right center; scale: .74; } }
.pad-paper .hisday { margin: 10px 0 0 -8px; font-size: 13.5px; line-height: 18px; color: #1e2c50; }
.pad-paper .sig { margin: 6px 0 0; text-align: right; font-size: 17px; color: #1e2c50; }

.title-screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; padding: clamp(24px, 6vw, 90px); background: linear-gradient(to top, rgba(14,9,5,.82), rgba(14,9,5,.05) 62%); transition: opacity 1.2s; z-index: 4; }
.title-screen.gone { opacity: 0; pointer-events: none; }
.title-screen h1 { margin: 0; font-size: clamp(56px, 11vw, 150px); font-style: italic; font-weight: 400; letter-spacing: -.025em; line-height: .95; color: #fdf6e6; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.title-screen .tag { margin: 0 0 12px; font-size: clamp(17px, 1.9vw, 23px); color: rgba(253,246,230,.88); }
.title-screen button { font: inherit; cursor: pointer; }
.title-screen button:focus-visible, .pause-card :is(button,input,select):focus-visible, .report button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.title-screen .start { padding: 13px 34px 15px; font-size: 21px; color: #1f150c; background: #f4ead2; border: 0; border-radius: 40px; box-shadow: 0 6px 26px rgba(0,0,0,.4); transition: transform .15s, background .15s; }
.title-screen .start:hover { transform: translateY(-2px) scale(1.02); background: #fff6e2; }
.title-screen .secondary { border: 0; padding: 4px 0; background: transparent; color: #f4ead2; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.checkpoint-note { font: 13px/1.5 system-ui, sans-serif; opacity: .7; }
.p-quality { display: block; width: 100%; margin-top: 6px; padding: 6px; font: inherit; }
.q-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; color: rgba(253,246,230,.75); font-size: 14px; }
.q-row span { margin-right: 6px; }
.q { padding: 3px 13px 4px; color: rgba(253,246,230,.82); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; font-size: 13px !important; text-transform: capitalize; }
.q.sel { background: rgba(255,240,210,.9); color: #231a12; }
.ctl { font: 400 13px/1.7 system-ui, sans-serif; color: rgba(253,246,230,.62); max-width: 780px; }

.end-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(14,9,5,0); transition: background 2s; z-index: 4; }
.end-screen.on { background: rgba(14,9,5,.55); }
.report { width: min(560px, 100%); padding: 32px 38px 28px; color: #2a2118; background: linear-gradient(#f6eeda, #e9dfc6); border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: translateY(28px) rotate(-1deg); opacity: 0; transition: all 1.1s .4s cubic-bezier(.2,.9,.3,1); font-family: var(--hand); }
.end-screen.on .report { transform: rotate(-1deg); opacity: 1; }
.report h2 { margin: 0; font-size: 31px; font-weight: 400; }
.report .sub { margin: 0 0 14px; opacity: .65; }
.report table { width: 100%; border-collapse: collapse; font-size: 16px; }
.report td { padding: 5px 0; border-bottom: 1px dashed rgba(42,33,24,.25); }
.report td:last-child { text-align: right; }
.report .note { margin: 16px 0; font-style: italic; }
.report .again { font: inherit; font-size: 18px; padding: 7px 22px 9px; background: #2a2118; color: #f6eeda; border: 0; border-radius: 24px; cursor: pointer; }
.pause-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(14,9,5,.5); z-index: 4; }
.pause-card { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 32px; color: #2a2118; background: linear-gradient(#f6eeda, #e9dfc6); border-radius: 4px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.pause-card h2 { margin: 0; font-size: 30px; font-weight: 400; font-style: italic; }
.pause-card .sub { margin: 2px 0 18px; opacity: .7; }
.pause-card label { display: block; margin: 12px 0; font-size: 15px; }
.pause-card label.row { display: flex; align-items: center; gap: 8px; }
.pause-card input[type=range] { display: block; width: 100%; margin-top: 4px; accent-color: #c8652d; }
.pause-card button { margin-top: 12px; padding: 9px 24px 10px; font: inherit; font-size: 17px; color: #f6eeda; background: #2a2118; border: 0; border-radius: 24px; cursor: pointer; }
.pause-card button:disabled { opacity: .45; cursor: default; }
.photo-hide #hud > * { display: none; }

@media (max-width: 720px) {
  .pad { right: 16px; width: min(300px, calc(100vw - 32px)); }
  .hint { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .ctl { display: none; }
}