.story-play { background:#fff; }
.fetch-game { border:1px solid var(--blue-rule); border-radius:16px; overflow:hidden; background:var(--blue-paper); box-shadow:0 25px 70px #10233f12; }
.fetch-fallback { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.fetch-fallback[hidden] { display:none; }
.fetch-fallback>div { display:flex; flex-direction:column; gap:12px; min-height:220px; padding:30px; border-right:1px solid var(--blue-rule); background:var(--blue-ice); }
.fetch-fallback>div:last-of-type { border-right:0; }
.fetch-fallback span { font-size:20px; }
.fetch-fallback strong { color:var(--blue-ink); font-size:22px; line-height:1.15; }
.fetch-fallback p { margin:0; color:var(--blue-muted); font-size:16px; line-height:1.5; }
.fetch-fallback-note { grid-column:1/-1; margin:0; padding:18px 30px; color:var(--blue-muted); font-size:14px; }
.fetch-context { max-width:72ch; margin:20px 0 0; color:var(--blue-muted); font-size:15px; }
.fetch-app { color:var(--blue-ink); font:400 16px/1.5 var(--sans); }
.fetch-app[hidden] { display:none; }
.fetch-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; align-items:center; padding:21px 28px; background:var(--blue-navy); color:#fff; }
.fetch-top strong { display:block; font-size:22px; letter-spacing:-.03em; }
body.story-home .fetch-top p { margin:1px 0 0; color:#d5e2fa; font-size:13px; }
.fetch-progress { font-size:15px; font-weight:700; }
.fetch-body { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr); }
.fetch-main { min-width:0; border-right:1px solid var(--blue-rule); }
.fetch-side { padding:26px; }
.fetch-choices { display:grid; gap:9px; margin:0 0 24px; padding:0 0 20px; border-bottom:1px solid var(--blue-rule); }
.fetch-tabs,.fetch-dogs { display:flex; flex-wrap:wrap; gap:8px; }
.fetch-dogs { background:#fff; }
.fetch-app button { min-height:44px; padding:9px 14px; border:1px solid var(--blue-rule); border-radius:7px; background:#fff; color:var(--blue-ink); font:650 14px/1.3 var(--sans); cursor:pointer; text-align:left; }
.fetch-app button:hover { border-color:var(--blue-cobalt); }
.fetch-app button:focus-visible { outline:3px solid var(--blue-cobalt); outline-offset:2px; }
.fetch-app button[aria-pressed="true"],.fetch-app button.is-selected { border-color:var(--blue-cobalt); background:var(--blue-ice); box-shadow:inset 0 -3px 0 var(--blue-cobalt); }
.fetch-app button.fetch-primary { background:var(--blue-cobalt); border-color:var(--blue-cobalt); color:#fff; text-align:center; }
.fetch-app button.fetch-primary:hover { background:#1b46b4; }
.fetch-app button.fetch-quiet { border:0; background:transparent; text-decoration:underline; text-underline-offset:4px; }
.fetch-app button.fetch-quiet:hover { color:var(--blue-cobalt); }
.fetch-dogs button { display:flex; align-items:center; gap:7px; }
.fetch-dogs .dog-dot { width:14px; height:14px; border-radius:50%; background:#9d6c48; }
.fetch-dogs [data-dog="pippin"] .dog-dot { background:#e4b77e; }
.fetch-dogs [data-dog="dot"] .dog-dot { background:#8795a9; }
.fetch-request { margin:0; padding:19px 26px 13px; color:var(--blue-ink); font-size:19px; font-weight:700; }
.fetch-scene { position:relative; min-height:280px; margin:0 22px 20px; overflow:hidden; border:1px solid #cad9ed; border-radius:10px; background:linear-gradient(#e8f1ff 0 70%,#d4e5f8 70% 100%); }
.fetch-scene:before { content:""; position:absolute; left:0; right:0; top:70%; height:2px; background:#9bb9dc; }
.fetch-scene .fetch-dog { position:absolute; z-index:3; left:8%; bottom:15%; width:38%; max-width:250px; height:auto; filter:drop-shadow(0 12px 8px #10233f28); }
.fetch-scene.is-attempt .fetch-dog { animation:fetch-walk 1.8s ease-in-out 1; }
.fetch-scene.scene-fridge.is-attempt.result-handle .fetch-dog { animation:fetch-reach 1.8s ease-in-out 1; }
.fetch-scene.scene-fridge.is-attempt.result-sequence .fetch-dog { animation:fetch-tug 1.8s ease-in-out 1; }
.fetch-scene.scene-fridge.is-attempt.result-bottle .fetch-dog { animation:fetch-return 1.8s ease-in-out 1; }
.fetch-scene.is-roll .fetch-dog { transform-origin:50% 75%; animation:fetch-roll 1.1s ease-in-out 1; }
@keyframes fetch-walk { 0%,100% { transform:translateX(0); } 45% { transform:translateX(30%) rotate(-3deg); } 70% { transform:translateX(20%); } }
@keyframes fetch-reach { 0%,100% { transform:translateX(0); } 48% { transform:translateX(45%) rotate(-3deg); } 65% { transform:translateX(45%); } }
@keyframes fetch-tug { 0%,100% { transform:translateX(0); } 38%,62% { transform:translateX(55%) rotate(-4deg); } 50% { transform:translateX(52%) rotate(2deg); } }
@keyframes fetch-return { 0%,100% { transform:translateX(0); } 38%,60% { transform:translateX(55%) rotate(-3deg); } }
@keyframes fetch-roll { 0%,100% { transform:rotate(0); } 45% { transform:rotate(-85deg) translateY(12%); } 72% { transform:rotate(-130deg) translateY(12%); } }
.scene-object { position:absolute; right:12%; bottom:29%; display:grid; place-items:center; min-width:110px; min-height:140px; border:3px solid #7c98bc; border-radius:9px; background:#f7fbff; color:var(--blue-ink); font-weight:750; text-align:center; box-shadow:8px 12px 0 #a8c0db; }
.scene-fridge { display:block; overflow:visible; background:#dcecff; }
.scene-fridge-inside { position:absolute; inset:4px; display:grid; place-items:center; border-radius:4px; background:#f7fbff; }
.scene-fridge-door { position:absolute; z-index:2; inset:0; display:grid; place-items:center; border-radius:6px; background:#f7fbffad; border-bottom:2px solid #9fb5ce; transform-origin:right center; transition:transform .6s ease; }
.scene-fridge.is-open .scene-fridge-door { transform:perspective(400px) rotateY(-68deg); }
.fetch-scene.is-attempt.result-sequence .scene-fridge-door { animation:fetch-door-tug 1.8s ease-in-out 1; }
.fetch-scene.is-attempt.result-bottle .scene-fridge-door { animation:fetch-door-open 1.1s ease-out 1 both; }
@keyframes fetch-door-tug { 0%,100% { transform:none; } 50% { transform:perspective(400px) rotateY(-12deg); } }
@keyframes fetch-door-open { from { transform:none; } to { transform:perspective(400px) rotateY(-68deg); } }
.scene-fridge-door:after { content:""; position:absolute; top:20%; left:8%; width:5px; height:22px; border-radius:5px; background:#7b8ea8; }
.scene-fridge.has-strap .scene-fridge-door:after { top:17%; width:26px; height:64px; background:none; border:6px solid #2457d6; border-top:0; border-radius:0 0 18px 18px; }
.scene-fridge-door span { margin-top:50px; font-size:12px; }
.scene-shelf { position:absolute; right:7%; bottom:59%; display:flex; gap:7px; align-items:flex-end; width:41%; min-width:135px; height:65px; padding:6px 8px; border-bottom:7px solid #8e7055; }
.scene-shelf span { display:grid; place-items:center; width:52%; height:52px; padding:4px; border:1px solid #a7906b; border-radius:3px; background:#fff8e8; color:#453629; font-size:10px; line-height:1.15; text-align:center; }
.scene-shelf .scene-shelf-note { background:#f6fbff; border-color:#8299b9; }
.scene-desk { position:absolute; right:6%; bottom:26%; width:44%; height:13px; border-radius:3px; background:#8e7055; box-shadow:8px 15px 0 #a88768; }
.scene-desk>span { position:absolute; right:4px; top:17px; color:#46566d; font-size:10px; font-weight:750; }
.scene-desk-page,.scene-story-sheet { position:absolute; bottom:15px; right:10%; width:75%; min-height:48px; display:grid; place-items:center; padding:6px; border:1px solid #8299b9; border-radius:3px; background:#f6fbff; color:#283c57; font-size:10px; line-height:1.2; text-align:center; transform:rotate(-3deg); }
.scene-desk-page.is-recipe { background:#fff8e8; border-color:#a7906b; }
.scene-story-sheet { right:-5%; bottom:28px; width:49%; min-height:60px; transform:rotate(7deg); background:#fff; }
.fetch-scene.is-page .scene-desk-page { animation:fetch-page 1s ease-out 1; }
@keyframes fetch-page { from { transform:translate(0,-90px) rotate(15deg); opacity:.5; } to { transform:translate(0,0) rotate(-3deg); opacity:1; } }
.scene-workshop { right:6%; bottom:29%; min-width:150px; min-height:145px; padding:12px; background:#eaf1fc; }
.scene-workshop.is-closed { opacity:.75; }
.scene-workshop .workbench { width:80%; height:35px; margin-top:15px; border-top:9px solid #876b51; border-left:8px solid #876b51; border-right:8px solid #876b51; }
.scene-workshop .workbench.missing { border:2px dashed #8c9cb4; background:transparent; }
.scene-mini-preview { position:absolute; bottom:6px; left:5px; width:90%; padding:3px; border:1px solid #7d96b8; border-radius:3px; background:#fff; color:#19365d; font-size:10px; line-height:1.2; }
.scene-mini-preview span { display:block; color:#8b5261; }
.scene-mini-preview.is-working span { color:#2457d6; }
.scene-path { position:absolute; right:36%; bottom:25%; width:20%; border-top:6px dashed var(--blue-cobalt); }
.scene-path.is-closed { border-color:#9aa9bd; }
.scene-bottle { position:absolute; right:27%; bottom:27%; width:25px; height:47px; border-radius:6px 6px 9px 9px; border:3px solid #376db1; background:#7cb5ef; }
.scene-bottle:before { content:""; position:absolute; width:13px; height:8px; left:3px; top:-11px; background:#2457d6; }
.scene-fridge-inside .scene-bottle { position:relative; right:auto; bottom:auto; display:block; }
.scene-delivered { z-index:4; left:47%; right:auto; bottom:26%; }
.fetch-scene.is-attempt.result-bottle .scene-delivered { animation:fetch-deliver 1.8s ease-in-out 1 both; }
@keyframes fetch-deliver { 0%,36% { left:72%; opacity:0; } 48% { left:72%; opacity:1; } 100% { left:47%; opacity:1; } }
.fetch-strength { margin:0 26px 18px; color:var(--blue-muted); font-size:14px; }
.fetch-strength strong { color:var(--blue-ink); }
.fetch-side h3 { margin:0 0 6px; color:var(--blue-ink); font-size:24px; line-height:1.15; letter-spacing:-.03em; }
.fetch-side>p { margin:0 0 16px; color:var(--blue-muted); font-size:15px; }
.fetch-aids { display:grid; gap:8px; margin:17px 0; }
.fetch-aids button { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; }
.fetch-aids button:after { content:"Add"; color:var(--blue-cobalt); font-size:12px; }
.fetch-aids button[aria-pressed="true"]:after { content:"Added ✓"; }
.fetch-aids button[data-page]:after { content:"Bring"; }
.fetch-aids button[data-page][aria-pressed="true"]:after { content:"On desk ✓"; }
.fetch-actions { display:flex; flex-wrap:wrap; gap:9px; margin:21px 0; }
.fetch-feedback { padding:17px; border-left:4px solid var(--blue-cobalt); background:var(--blue-ice); }
.fetch-feedback[data-kind="blocked"] { border-color:#7b8ea8; }
.fetch-feedback[data-kind="partial"] { border-color:#a56f3f; background:#fff3e8; }
.fetch-feedback[data-kind="success"] { border-color:#2457d6; }
.fetch-feedback strong { display:block; margin-bottom:4px; }
.fetch-feedback p { margin:0; color:var(--blue-ink); font-size:15px; line-height:1.45; }
.fetch-output { margin-top:15px; padding:17px; border:1px solid var(--blue-rule); border-radius:7px; background:#fff; }
.fetch-output p { margin:8px 0; }
.fetch-output small { color:var(--blue-muted); }
.fetch-output blockquote { margin:10px 0; font-size:17px; line-height:1.5; }
.fetch-web-preview { padding:14px; border:1px solid var(--blue-rule); border-radius:8px; background:#fff; }
.fetch-web-preview h4 { margin:0; font-size:20px; }
.fetch-web-preview p { margin:5px 0 12px; font-size:14px; }
.fetch-schedule { margin-top:12px; padding:12px; background:var(--blue-ice); font-size:14px; }
.fetch-complete { display:block; margin:12px 0; color:var(--blue-cobalt); font-weight:700; }
.fetch-next { display:block; width:100%; margin-top:13px; }
.fetch-checked { display:inline-block; padding:9px 0; color:var(--blue-cobalt); font-weight:750; }
.fetch-explain { margin-top:20px; padding-top:16px; border-top:1px solid var(--blue-rule); color:var(--blue-muted); font-size:14px; }
.fetch-explain summary { color:var(--blue-ink); font-weight:700; cursor:pointer; }
.fetch-explain p { margin:9px 0; }
.fetch-small { margin-top:14px; color:var(--blue-muted); font-size:13px; }
@media(max-width:850px) { .fetch-body { grid-template-columns:1fr; } .fetch-main { border-right:0; border-bottom:1px solid var(--blue-rule); } }
@media(max-width:580px) { .fetch-fallback { grid-template-columns:1fr; } .fetch-fallback>div { min-height:0; padding:22px; border-right:0; border-bottom:1px solid var(--blue-rule); } .fetch-top { padding:18px 20px; } .fetch-tabs button { flex:1 1 44%; text-align:center; } .fetch-body { display:flex; flex-direction:column; padding:0 14px 18px; } .fetch-main,.fetch-side,.fetch-choices { display:contents; } .fetch-request { order:1; padding:15px 0 6px; font-size:18px; } .fetch-scene { order:2; min-height:190px; margin:0 0 9px; } .fetch-strength { order:3; margin:0 0 12px; font-size:13px; } .fetch-tabs { order:4; margin:5px 0 9px; } .fetch-dogs { order:5; margin:0 0 14px; } .fetch-side h3 { order:6; margin:8px 0 3px; font-size:21px; } .fetch-side>p { order:7; margin:0; font-size:13px; } .fetch-aids { order:8; margin:10px 0 12px; } .fetch-aids button { min-height:44px; padding:7px 11px; font-size:13px; } .fetch-scene .fetch-dog { width:46%; left:2%; } .scene-object { right:4%; min-width:92px; min-height:115px; } .scene-workshop { min-width:120px; } .fetch-actions { order:9; margin:0 0 10px; } .fetch-actions button { min-height:44px; } .fetch-complete { order:10; margin:0 0 9px; } .fetch-feedback { order:11; } .fetch-output { order:12; } .fetch-next { order:13; } .fetch-small { order:14; } .fetch-explain { order:15; margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { .fetch-scene * { animation:none!important; transition:none!important; } }