html,body{margin:0;height:100%;overflow:hidden;background:#241d4a;font-family:system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
/* touch-action lives on the canvas and the overlay, not on body: WebKit intersects an ancestor's `none` into every descendant, which would stop the menus (pan-y) from scrolling on iOS. */
#c{position:fixed;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;touch-action:pan-y}
#ui>*{pointer-events:auto}
.t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:auto;background:#1a153399}
/* Centre via auto margins, not justify-content: a menu taller than a landscape phone (the 8-row level grid) then scrolls instead of losing its heading and Back button off both ends. */
.t>:last-child{margin-bottom:auto}
h1{font-size:min(18vw,13vh,90px);margin:auto 0 0;letter-spacing:.12em;background:linear-gradient(90deg,#ff5d6c,#ffa64d,#ffe14d,#5fd68a,#5db8ff,#7b6cff,#d977ff);-webkit-background-clip:text;background-clip:text;color:#0000;filter:drop-shadow(0 3px 7px #1a1533cc)}
h2{margin:auto 0 8px;font-size:32px}
p{margin:4px 12px;opacity:.85}
button{font:inherit;border:0;border-radius:12px;padding:0 16px;margin:4px;background:#fff3;color:#fff;min-width:44px;min-height:46px;cursor:pointer;font-size:17px}
button:active{background:#fff5}
.b{background:#ff7bb0}
.r{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:4px}
.k{width:46px;height:52px;padding:0;position:relative;font-size:22px;color:#1a1533;font-weight:700}
.k.s{outline:3px solid #fff;outline-offset:1px}
.k i{position:absolute;left:5px;right:5px;bottom:4px;height:5px;background:#0004;border-radius:3px}
.k b{display:block;height:100%;background:#fff;border-radius:3px}
.h{display:flex;justify-content:space-between;align-items:center;padding:2px 4px;background:#1a153366}
.h span{flex:1;text-align:center;font-size:14px}
.a{display:flex;flex-wrap:wrap;justify-content:center;max-width:min(92vw,520px);margin:6px 0 10px}
.d{width:44px;height:44px;margin:4px;padding:0;border-radius:50%;font-size:14px;color:#1a1533}
.d.l{background:#fff2;color:#fff8}
input{font:inherit;font-size:22px;width:5em;text-align:center;text-transform:uppercase;border:0;border-radius:10px;padding:8px;margin:4px}
.g{opacity:.5}
.q{background:#1a153355}
.v{background:radial-gradient(75% 65% at 50% 45%,#1a153300,#1a1533b8)}
.q,.v p{text-shadow:0 2px 8px #1a1533}
.w,.n{width:264px;max-width:84vw}
.w{font-size:20px;min-height:56px;margin:14px 0 2px;box-shadow:0 5px 0 #d9558a}
.n{display:flex;gap:8px}
.n button{flex:1;min-width:0;margin:4px 0;padding:0 6px}
.z{position:absolute;top:10px;right:10px;margin:0}
.a i{flex-basis:100%;height:0}