*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd3f4;font-family:"Trebuchet MS","Avenir Next",system-ui,sans-serif;color:#3b2a1a;touch-action:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
.tilt{position:fixed;left:0;right:0;height:22%;pointer-events:none;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.tilt.top{top:0;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.tilt.bot{bottom:0;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
#fade{position:fixed;inset:0;background:#fff8e6;opacity:0;pointer-events:none;transition:opacity .5s}
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px) 0 calc(env(safe-area-inset-left) + 8px);display:flex;justify-content:center;pointer-events:none}
#obj{background:rgba(255,248,230,.92);border:3px solid #c98b3b;border-radius:18px;padding:8px 16px;font-weight:bold;font-size:clamp(14px,2.2vmax,20px);box-shadow:0 4px 0 #a86b25;max-width:76vw;text-align:center}
#obj:empty{display:none}
.round{pointer-events:auto;position:absolute;right:calc(env(safe-area-inset-right) + 10px);top:calc(env(safe-area-inset-top) + 8px);width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:#f2a33a;color:#fff;font-size:16px;font-weight:bold;box-shadow:0 4px 0 #b96f12}
button{font-family:inherit;cursor:pointer}
#dlg{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);width:min(94vw,760px);background:#fff8e6;border:4px solid #c98b3b;border-radius:22px;padding:12px 18px 12px;box-shadow:0 6px 0 #a86b25,0 10px 30px rgba(0,0,0,.25);font-size:clamp(15px,2.3vmax,21px);line-height:1.35;max-height:52vh;overflow:auto}
#who{display:inline-block;background:#f2a33a;color:#fff;border-radius:12px;padding:2px 12px;font-weight:bold;margin:-26px 0 6px -4px;box-shadow:0 3px 0 #b96f12;font-size:.9em}
#who:empty{display:none}
#ref{color:#9a6a2a;font-style:italic;font-size:.8em;margin-top:4px}
#next{position:absolute;right:14px;bottom:8px;color:#c98b3b;animation:bob 1s infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
#choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#choices button,.big,.tog{border:none;border-radius:16px;background:#5cb85c;color:#fff;font-weight:bold;font-size:clamp(15px,2.2vmax,20px);padding:12px 18px;box-shadow:0 5px 0 #3d8b3d;min-height:48px}
#choices button{flex:1 1 200px;text-align:left;background:#4a9fd8;box-shadow:0 5px 0 #2f75a8}
#choices button.ok{background:#5cb85c;box-shadow:0 5px 0 #3d8b3d}#choices button.no{background:#d9534f;box-shadow:0 5px 0 #a33}
button:active{transform:translateY(3px);box-shadow:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 10px);text-align:center;overflow:auto}
#pause,#result{background:rgba(60,40,20,.45)}
.screen h1{margin:0;font-size:clamp(40px,9vmin,84px);color:#fff;text-shadow:0 5px 0 #c98b3b,0 8px 18px rgba(0,0,0,.3);letter-spacing:1px}
.screen h2{margin:0;color:#fff;font-size:36px;text-shadow:0 4px 0 #c98b3b}
.sub{margin:0;color:#fff;font-weight:bold;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.card{background:#fff8e6;border:4px solid #c98b3b;border-radius:22px;padding:14px 22px;box-shadow:0 6px 0 #a86b25;display:flex;flex-direction:column;gap:10px;min-width:min(86vw,320px)}
.lvl{font-size:20px}.lvlref{color:#9a6a2a;font-style:italic;margin-top:-8px}
.big.alt{background:#4a9fd8;box-shadow:0 5px 0 #2f75a8}
.row{display:flex;gap:10px}
.tog{background:#f2a33a;box-shadow:0 5px 0 #b96f12}.tog.off{background:#aaa;box-shadow:0 5px 0 #777;text-decoration:line-through}
#scrolls{color:#fff;font-weight:bold;text-shadow:0 2px 4px rgba(0,0,0,.4)}
#best{font-size:22px;color:#e8a317}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);background:#fff8e6;border:3px solid #c98b3b;border-radius:16px;padding:10px 18px;font-weight:bold;font-size:clamp(15px,2.2vmax,20px);pointer-events:none;box-shadow:0 4px 0 #a86b25;text-align:center;max-width:86vw}
#slingBtn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 18px);width:min(46vw,220px);height:84px;border-radius:42px;border:4px solid #fff;background:#e2703a;color:#fff;font-size:26px;font-weight:bold;box-shadow:0 6px 0 #a5481c;z-index:5}
#slingBtn:active{transform:translateX(-50%) translateY(3px)}
#reticle{position:fixed;width:86px;height:86px;margin:-43px 0 0 -43px;pointer-events:none;left:0;top:0}
#reticle svg{width:100%;height:100%;transform:rotate(-90deg)}
#reticle .bg{fill:rgba(255,255,255,.15);stroke:rgba(255,255,255,.8);stroke-width:6}
#reticle .pw{fill:none;stroke:#f2a33a;stroke-width:10;stroke-dasharray:0 100;stroke-linecap:round}
#reticle.good .pw{stroke:#3fd13f}#reticle .dot{fill:#fff}
.stars{font-size:54px;letter-spacing:6px;color:#ffd23f;text-shadow:0 4px 0 #c98b3b}.stars .e{color:rgba(255,255,255,.35)}
.scroll{background:linear-gradient(#f7e2b0,#ecd093);border:3px solid #a8783a;border-radius:14px;padding:10px 16px;max-width:520px;font-size:17px}
@media (orientation:landscape) and (max-height:500px){#slingBtn{left:auto;right:calc(env(safe-area-inset-right) + 18px);transform:none;width:160px;height:72px}#slingBtn:active{transform:translateY(3px)}#dlg{max-height:46vh;padding:8px 14px;width:min(80vw,760px)}#obj{padding:5px 12px}}
@media (max-height:500px) and (orientation:landscape){#choices{flex-wrap:nowrap;gap:6px;margin-top:6px}#choices button{flex:1 1 0;min-width:0;padding:8px 10px;min-height:40px;font-size:15px}#dlg{max-height:92vh;overflow-y:auto}}