:root { --ink:#32274b; --muted:#71697d; --coral:#ff7b79; --coral-deep:#ef5d66; --violet:#5d48b7; --violet-dark:#403080; --butter:#ffd764; --paper:#fff9f5; --line:#eee6e1; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--paper); color:var(--ink); font-family: ui-rounded, "Avenir Next", "Nunito", system-ui, sans-serif; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 520px); min-height:100vh; margin:auto; padding:calc(20px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); overflow:hidden; }
.brand { display:flex; align-items:center; gap:9px; font-weight:850; font-size:1.25rem; letter-spacing:-.04em; margin:0 4px 24px; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:10px; background:var(--butter); color:var(--violet-dark); font-size:1.35rem; transform:rotate(-7deg); }
.intro { position:relative; isolation:isolate; background:var(--coral); color:#fff; border-radius:30px; padding:28px 22px 24px; box-shadow:0 12px 0 rgba(50,39,75,.06); overflow:hidden; }
.intro::after { content:""; position:absolute; width:158px; height:158px; z-index:-1; right:-65px; top:-68px; border:24px solid rgba(255,255,255,.18); border-radius:50%; }
.intro h1 { font-size:clamp(2rem, 8vw, 2.65rem); line-height:1.02; letter-spacing:-.065em; margin:0; }
.intro > p { max-width:290px; margin:10px 0 23px; font-size:1rem; line-height:1.42; font-weight:600; }
.shape { position:absolute; display:block; border-radius:999px; background:var(--butter); }
.dot-one { width:11px; height:11px; left:23px; top:16px; transform:translateY(-50%); }.dot-two { width:7px; height:7px; left:41px; top:21px; transform:translateY(-50%); background:#fff; }
form label { display:block; font-size:.8rem; font-weight:800; margin:0 0 7px 2px; }
.input-row { display:flex; align-items:center; height:52px; padding:0 13px; gap:10px; border-radius:15px; background:#fff; box-shadow:inset 0 0 0 1px rgba(50,39,75,.08); }
.youtube-mark { display:grid; place-items:center; width:21px; height:15px; border-radius:5px; background:#ff3d48; color:#fff; font-size:9px; padding-left:1px; flex:0 0 auto; }
input { border:0; outline:0; min-width:0; width:100%; color:var(--ink); background:transparent; font-size:.93rem; font-weight:650; }
input::placeholder { color:#a197a4; opacity:1; }
.load-button { width:100%; min-height:52px; margin-top:10px; border:0; border-radius:15px; color:#fff; background:var(--violet-dark); font-size:1rem; font-weight:850; box-shadow:0 5px 0 rgba(43,31,99,.35); transition:transform .15s, box-shadow .15s; }.load-button:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(43,31,99,.35); }.load-button:disabled { cursor:wait; opacity:.72; box-shadow:0 3px 0 rgba(43,31,99,.25); }.load-button span { font-size:1.25em; margin-left:3px; }
.form-message { min-height:1.2em; margin:10px 2px 0; font-size:.82rem; font-weight:700; }
.game { padding:30px 4px 0; text-align:center; }.game-heading { display:flex; text-align:left; justify-content:space-between; align-items:start; padding:0 3px; }.game h2 { margin:0; font-size:1.42rem; letter-spacing:-.045em; }.game-heading p { margin:4px 0 0; font-size:.84rem; color:var(--muted); font-weight:650; }.spark { color:var(--coral); font-size:1.6rem; transform:rotate(12deg); }
.player-wrap { margin:18px 0 12px; border-radius:18px; overflow:hidden; background:#e8e2ed; aspect-ratio:16/9; box-shadow:0 7px 18px rgba(50,39,75,.12); }.player-wrap.is-hidden { display:none; }.player-wrap iframe { width:100%; height:100%; border:0; }
.play-button { display:grid; place-items:center; width:106px; height:106px; margin:28px auto 15px; padding-left:5px; border:0; border-radius:50%; background:var(--violet); color:#fff; font-size:2.45rem; box-shadow:0 9px 0 #44348f, 0 15px 22px rgba(93,72,183,.22); transition:transform .18s, background .18s; }.play-button:disabled { opacity:.4; box-shadow:none; cursor:not-allowed; }.play-button:not(:disabled):active { transform:translateY(5px); box-shadow:0 4px 0 #44348f, 0 9px 15px rgba(93,72,183,.18); }.play-button.is-paused { background:var(--coral-deep); box-shadow:0 9px 0 #c84c59, 0 15px 22px rgba(239,93,102,.2); }
.game-status { min-height:1.35em; margin:0; color:var(--violet-dark); font-weight:850; font-size:.98rem; }.progress-track { height:8px; margin:13px 9px 25px; overflow:hidden; border-radius:99px; background:#e9e4ee; }.progress-track span { display:block; height:100%; width:0; background:var(--butter); border-radius:inherit; transition:width .95s linear; }
.settings { border-top:1px solid var(--line); }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 3px; border-bottom:1px solid var(--line); text-align:left; }.setting-row span { display:grid; gap:3px; }.setting-row strong { font-size:.98rem; letter-spacing:-.02em; }.setting-row small { color:var(--muted); font-size:.77rem; font-weight:600; }.setting-row select { max-width:120px; border:0; outline:0; color:var(--violet-dark); background:transparent; font-size:.88rem; font-weight:850; text-align:right; appearance:auto; }
footer { margin:28px 0 0; text-align:center; color:#8d8494; font-size:.77rem; font-weight:700; }
@media (min-width:560px) { .app-shell { padding-top:34px; }.intro { padding:32px 29px 28px; }.game { padding-top:35px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }