:root{--ink:#244655;--cream:#fff8eb;--pink:#f49ea1;--mint:#86decb;--aqua:#3a9d9d;--blush:#f0a99b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{position:fixed;inset:0;width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:#d9e6db;color:var(--ink)}
button{font:inherit;cursor:pointer;touch-action:none;user-select:none}button:focus-visible{outline:3px solid #f8df8d;outline-offset:2px}button:active{transform:translateY(2px)}
#app{height:100%;height:100dvh;width:100%;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at 0 0,#ffffff70,transparent 42%),linear-gradient(150deg,#ddf0e6,#ebdfdc)}
.topbar{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 14px;border-bottom:1px solid #abbdb7a1}
.brand{display:flex;align-items:center;gap:9px}.brand-icon{height:32px;width:32px;display:grid;place-items:center;color:#fff4cf;background:#d86d77;border:2px solid #c8646b;border-radius:10px;box-shadow:2px 3px 0 #e8bac0;font-size:25px;transform:rotate(-10deg)}.brand strong{display:block;font:1000 14px system-ui;letter-spacing:.11em;line-height:1.15}.brand small{display:block;color:#7e9994;font-weight:850;font-size:8px;margin-top:4px}
.top-controls{display:flex;align-items:center;gap:5px}.episode-number{color:#58938e;font:850 9px system-ui;letter-spacing:.08em;margin-right:6px}.icon-btn{width:31px;height:31px;background:#ffffffb0;border:1px solid #a5c6ba;border-radius:9px;color:#487d83;font-size:17px;font-weight:900}
.quest{margin:7px 10px 7px;padding:9px 13px 11px;flex:0 0 auto;border:1px solid #bccfc3;background:linear-gradient(105deg,#fffef5,#fff1e7);border-radius:14px;box-shadow:0 3px 0 #c8dace}.quest-label{font:850 8px system-ui;letter-spacing:.16em;color:#a88278}.quest-label span{margin-left:4px;color:#ebaa7f}.quest h1{font-size:clamp(19px,4.2vw,24px);letter-spacing:-.065em;margin:4px 0 5px;line-height:1.15}.quest-copy{display:flex;align-items:center;gap:6px;font-size:clamp(10px,2.5vw,13px);font-weight:850;line-height:1.35}.goal-flag{white-space:nowrap;color:#fffdfa;background:#d97c7d;border-radius:7px;padding:4px 6px;font-size:9px;letter-spacing:.02em}
.play{min-height:0;flex:1;margin:0 10px;display:flex;flex-direction:column}.world-holder{position:relative;flex:1;min-height:0;border-radius:17px;overflow:hidden;border:2px solid #f8f3de;box-shadow:0 6px 0 #93b7a7,0 11px 25px #55796a3d;background:#307f83}#world{display:block;width:100%;height:100%;touch-action:none}.chapter-stamp{position:absolute;top:8px;left:9px;background:#245a61c9;border:1px solid #b6eee1a9;color:#effee8;border-radius:9px;padding:6px 8px;font-weight:850;font-size:clamp(8px,2vw,11px);pointer-events:none}.stamp-spark{color:#ffddaa}.speech-toast{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap;max-width:96%;text-overflow:ellipsis;overflow:hidden;padding:9px 13px;border:1px solid #a9d6c0a4;background:#fffceee9;border-radius:11px;color:#497871;font-size:clamp(10px,2.4vw,12px);font-weight:900;box-shadow:0 5px 11px #315e6244;transition:opacity .2s}
.bottom{padding:7px 10px 9px;flex:0 0 auto;display:flex;flex-direction:column;gap:6px}.control-caption{display:flex;align-items:baseline;gap:8px}.control-caption>span{color:#da867d;font-size:20px}.control-caption strong{font-size:12px}.control-caption small{margin-left:auto;color:#8b9d96;font-size:9px;font-weight:750}.control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.control-grid button{min-height:67px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #b4c8c4;border-bottom:4px solid #94b7ae;background:linear-gradient(#fcfff7,#e9f6ed);border-radius:13px;color:#347a7b;gap:0}.control-grid button b{font-size:27px;line-height:1.1}.control-grid button span{font-size:9px;font-weight:900}.control-grid button:active{border-bottom-width:1px;background:#dcf8e9}.bottomline{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:25px}.bottomline button{border:0;border-radius:8px;background:#e6a79c;color:white;font-size:10px;font-weight:900;padding:8px 12px;white-space:nowrap}.bottomline span{font-size:9px;color:#6c968e;font-weight:800;text-align:center}.bottomline #last-event{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bottomline #episode-dots{font-size:12px;color:#df897d;letter-spacing:.02em}
.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:3;background:linear-gradient(125deg,#22485591,#134c4aa6);backdrop-filter:blur(5px);padding:12px}.overlay[hidden]{display:none}.overlay-card{text-align:center;width:min(325px,100%);padding:21px 18px 17px;background:linear-gradient(135deg,#fffff4,#edfff1);border:2px solid #fffcdfb5;outline:5px solid #ffffff19;box-shadow:0 20px 45px #143e486e;border-radius:21px;max-height:100%;overflow:hidden}.tiny-faces{display:flex;justify-content:center;gap:6px;margin-bottom:13px}.tiny-faces span{width:47px;height:45px;display:grid;place-items:center;font-weight:950;color:#326e78;border-radius:13px;background:linear-gradient(145deg,#b2f1e2,#75ceca);border:2px solid #e5fff4;box-shadow:0 5px 0 #4a9b9d;font-size:15px;transform:rotate(-8deg)}.tiny-faces span:nth-child(2){background:linear-gradient(135deg,#ffe3b1,#ebc57e);transform:rotate(7deg);box-shadow:0 5px 0 #d6ae6e}.tiny-faces span:nth-child(3){background:linear-gradient(135deg,#ffd4dc,#f5a1b2);transform:rotate(-4deg);box-shadow:0 5px 0 #d97c92}.overlay-kicker{font:950 10px system-ui;color:#d98f80;letter-spacing:.1em}.overlay h2{font-size:clamp(23px,5.6vw,29px);letter-spacing:-.08em;line-height:1.35;margin:12px 0;color:#305d5e}.overlay h2 em{font-style:normal;color:#d77779}.overlay p{font-size:12px;line-height:1.8;color:#66897f;font-weight:750;margin:0 0 15px}.primary{width:100%;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border:0;border-bottom:4px solid #b96366;border-radius:13px;background:#e0807b;color:#fffefa;font-weight:950;font-size:13px}.primary span{font-size:20px}.overlay small{display:block;margin-top:10px;font-size:9px;color:#7d9c93;font-weight:800}
@media(min-width:750px){#app{max-width:700px;margin:0 auto;border-left:1px solid #b1cfc3;border-right:1px solid #b1cfc3}.quest{margin-left:20px;margin-right:20px}.play{margin:0 20px}.bottom{padding-left:20px;padding-right:20px}.world-holder{border-radius:20px}}
@media(max-height:680px){.topbar{height:42px;flex-basis:42px}.brand-icon{height:27px;width:27px;font-size:18px}.quest{padding:5px 10px 7px;margin:4px 8px}.quest h1{font-size:18px;margin:2px 0}.quest-label{font-size:7px}.quest-copy{font-size:10px}.bottom{padding:5px 8px 5px;gap:3px}.control-grid button{min-height:52px}.control-grid button b{font-size:22px}.control-caption{gap:4px}.control-caption>span{font-size:15px}.bottomline{min-height:21px}.bottomline button{padding:5px 10px}.overlay-card{padding:12px}.tiny-faces{margin-bottom:5px}.tiny-faces span{width:36px;height:34px;font-size:12px}.overlay h2{margin:6px 0;font-size:21px}.overlay p{font-size:10px;line-height:1.5;margin-bottom:8px}.overlay small{margin-top:5px}.primary{height:43px}}
@media(orientation:landscape) and (max-height:530px){.quest{display:none}.topbar{height:36px;flex-basis:36px}.bottom{padding:3px 8px}.control-caption{display:none}.control-grid button{min-height:47px}.bottomline{display:none}}