:root{--red:#ad443b;--cream:#faf1dc;--navy:#182637;--yellow:#ffe33b}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#15130f;color:var(--navy);font:16px system-ui,-apple-system,sans-serif}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}#app{position:relative;width:100%;height:100%;height:100dvh;max-width:560px;margin:0 auto;overflow:hidden;background:#dfbd86}#world{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}.scene{position:absolute;inset:0;background-position:center center;background-size:cover;transition:opacity .3s;transform:scale(1.006)}.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(23,25,31,.22),transparent 21%,transparent 65%,rgba(18,21,21,.3))}.icon{position:absolute;top:calc(env(safe-area-inset-top) + 13px);width:42px;height:42px;border:2px solid #202b2c;background:#fff3d7e8;border-radius:10px;box-shadow:0 2px 0 #332d29;color:#1c292a;font-size:25px;z-index:9;display:grid;place-items:center}.left{left:16px}.right{right:16px}.scene-tag{position:absolute;top:calc(env(safe-area-inset-top) + 21px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:white;text-shadow:0 2px 3px #24160f,0 0 5px #24160f;white-space:nowrap;pointer-events:none}.actor{position:absolute;border:0;background:transparent;padding:0;transform:translate(-50%,-100%);z-index:4;filter:drop-shadow(1px 2px 1px #1b16159a);display:grid;justify-items:center;touch-action:manipulation}.actor img{width:auto;height:clamp(110px,16dvh,142px);image-rendering:pixelated;display:block}.actor:active{filter:brightness(1.4) drop-shadow(1px 2px 1px #1b16159a)}.actor.active img{filter:drop-shadow(0 0 3px #ffed44)}.actor .bubble{position:absolute;bottom:100%;background:var(--cream);border:2px solid #292420;border-radius:8px;color:var(--red);font-weight:900;font-size:15px;line-height:1;padding:2px 5px;right:0}.hotspot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;z-index:5;min-width:38px;min-height:38px;display:grid;place-items:center}.hotspot .badge{background:#fff3da;border:2px solid var(--red);box-shadow:0 2px 0 #2b2320;border-radius:8px;padding:3px 6px;font-size:21px;line-height:1;opacity:.92}.hotspot:active .badge{transform:scale(.9)}.scene-arrow{position:absolute;top:51%;transform:translateY(-50%);z-index:6;color:#ffe642;text-shadow:-2px -2px #14110c,2px -2px #14110c,-2px 2px #14110c,2px 2px #14110c,0 3px #14110c;font-size:42px;background:transparent;border:0;padding:3px 10px}.scene-arrow.prev{left:0}.scene-arrow.next{right:0}#captionWrap{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 89px);z-index:9;text-align:center;pointer-events:none}#speaker{font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff8d0;text-shadow:0 1px 3px black;margin-bottom:4px;text-transform:uppercase}#subtitle{pointer-events:auto;font-size:clamp(25px,6.8vw,36px);font-weight:900;line-height:1.58;color:var(--yellow);-webkit-text-stroke:1.4px #080800;paint-order:stroke fill;text-shadow:2px 2px 0 #080800,-2px 2px 0 #080800,2px -2px 0 #080800,-2px -2px 0 #080800,0 4px 0 #080800;cursor:pointer;direction:rtl}.word{display:inline-block;padding:0 2px}.word:active{color:#fff}#subtitleTranslation{color:#fff8e0;font-size:13px;text-shadow:1px 2px 2px #120e0b,-1px -1px 2px #120e0b;margin-top:3px;font-weight:650;min-height:18px}#bottomTools{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 22px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:35px;z-index:10}.tool{position:relative;width:44px;height:44px;border-radius:50%;background:#fff4d7ed;border:2px solid #2d2a25;color:#1a2b30;font-size:25px;display:grid;place-items:center;box-shadow:0 2px 0 #31231a}.tool.central{width:55px;height:55px;background:#a83c37;border:3px solid #fff4d7;color:white;font-size:30px}.dot{position:absolute;background:#ffe33b;width:7px;height:7px;border-radius:50%;right:7px;top:6px;display:none}.dot.visible{display:block}#panelBackdrop,#replyBackdrop{position:absolute;inset:0;background:#1e211b55;z-index:19}#panel{position:absolute;z-index:20;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 20px);max-height:78dvh;overflow-y:auto;border-radius:20px;border:2px solid var(--red);background:#fcf2dd;box-shadow:0 8px 45px #16120f70;padding:18px}#panel.full{top:calc(env(safe-area-inset-top) + 22px);bottom:calc(env(safe-area-inset-bottom) + 14px);max-height:none}.hidden{display:none!important}.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d2bba6;padding-bottom:9px;margin-bottom:12px;font-weight:800;letter-spacing:.02em}.small-x{border:0;background:transparent;font-size:26px;color:#8d3932;line-height:1}.menu-grid{display:grid;gap:9px}.menu-item{display:block;width:100%;border:1px solid #cda89e;text-align:left;border-radius:12px;background:#fffaf1;padding:12px 14px;color:#1b2b30;font-weight:800}.menu-item span{display:block;font-weight:400;color:#66645e;font-size:12px;margin-top:3px}.menu-item.selected{border:2px solid var(--red)}.task{display:flex;gap:10px;align-items:center;border-bottom:1px solid #dccdb8;padding:10px 0;font-size:15px}.task.done{color:#668277;text-decoration:line-through}.task .status{color:var(--red);font-weight:900}.pill{border:1px solid #bb8d83;background:#fffaf1;border-radius:99px;padding:6px 10px;margin:5px 5px 5px 0}.little{font-size:12px;color:#6d6861;line-height:1.45}.section-head{font-weight:850;font-size:14px;margin:17px 0 7px;letter-spacing:.04em}.arabic{font-size:28px;direction:rtl;margin:8px 0}.card{border:1px solid #d5b4a9;padding:13px;border-radius:12px;background:#fffaf3;margin:9px 0}.progress{height:7px;background:#e5d4c0;border-radius:8px;overflow:hidden;margin:12px 0}.progress div{background:#a84842;height:100%}#replyBackdrop{z-index:29}#replyPanel{position:absolute;z-index:30;bottom:0;left:0;right:0;background:#f9efdc;border:2px solid var(--red);border-bottom:0;border-radius:20px 20px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom) + 14px)}#replyPrompt{font-weight:750;margin-bottom:10px}.reply-row{display:flex;gap:7px}.reply-row input{flex:1;min-width:0;background:white;border:1px solid #a77970;border-radius:10px;padding:11px}.reply-row button{background:var(--red);color:white;border:0;border-radius:9px;padding:8px 14px}.reply-hint{color:#6b675b;font-size:11px;margin-top:8px}.reply-row.subtle{margin-top:12px;justify-content:space-between}.reply-row.subtle button{background:transparent;color:#8c423b;border:1px solid #cb9b90}#toast{position:absolute;z-index:45;left:50%;bottom:calc(env(safe-area-inset-bottom) + 169px);transform:translateX(-50%);padding:9px 14px;border-radius:10px;border:1px solid #a7453c;background:#fff4d8;max-width:85%;font-size:13px;box-shadow:0 4px 14px #26201055;opacity:0;pointer-events:none;transition:opacity .25s;text-align:center}#toast.show{opacity:1}@media(min-width:560px){body{background:#263135}#app{box-shadow:0 0 50px #0008}.scene-tag{font-size:13px}}

/* Phone layout refinement: direct character taps, dialogue above the scene. */
.actor .bubble{display:none!important}
#captionWrap{
  top:calc(env(safe-area-inset-top) + 84px);
  bottom:auto;
  left:20px;
  right:20px;
  padding:4px 2px 8px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.38));
}
#subtitle{font-size:clamp(23px,6.1vw,32px);line-height:1.35;text-wrap:balance}
#speaker{margin-bottom:2px}
#subtitleTranslation{min-height:0}
@media(max-height:690px){
  #captionWrap{top:calc(env(safe-area-inset-top) + 69px)}
  #subtitle{font-size:clamp(22px,5.8vw,29px);line-height:1.25}
}

/* Invisible tappable areas for illustrated objects; no floating interaction icons. */
.hotspot .badge{display:none!important}
.hotspot{background:transparent!important;box-shadow:none!important;min-width:48px;min-height:48px}