@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@600;700;800;900&display=swap');
:root{--ink:#14213d;--yellow:#ffd23a;--sky:#2fa8f0;--blue:#1f7ad6;--red:#ef3b36;--green:#5fd146;--cream:#fffbea;--display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;font-family:Nunito,'Segoe UI',sans-serif;color:var(--ink);background:#7fd9f6;font-synthesis:none;
  /* Room kept clear for notches and the home bar (zero on screens without them). */
  --st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px)}
/* No double-tap zoom, pull-to-refresh or long-press menus while playing on a phone. */
html{touch-action:manipulation;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none;background:#7fd9f6;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
#scene{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
.hidden{display:none!important}

/* Cartoon text: white fill, thick dark outline, hard drop shadow. */
.logo,.banner p,.modal-card h2,.level-tag strong,.timer,.card-title{font-family:var(--display);font-weight:400;-webkit-text-stroke:var(--stroke,6px) var(--ink);paint-order:stroke fill;text-shadow:0 var(--drop,4px) 0 var(--ink)}

.btn{display:block;width:100%;font:400 22px/1 var(--display);letter-spacing:.5px;border:3px solid var(--ink);border-radius:16px;padding:15px 18px;box-shadow:0 6px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .15s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.primary{background:var(--yellow)}.primary:hover{background:#ffe066}
.secondary{background:#fff}.secondary:hover{background:#eef8ff}
.text-button{background:none;border:0;font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:3px;padding:12px;margin-top:4px}

header{position:fixed;top:calc(16px + var(--st));z-index:5;display:flex;align-items:center;gap:10px}.top-left{left:calc(16px + var(--sl))}.top-right{right:calc(16px + var(--sr))}
.icon{width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;padding:0}
.icon.square{border-radius:14px;background:#2b3448}.icon.square svg{stroke:#fff}
.icon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.icon svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}#sound svg path:first-child,#home svg path{fill:var(--ink)}#pause svg path{stroke-width:3.4}
#sound .slash{display:none}#sound.off .slash{display:inline}#sound.off .wave{display:none}
#fullscreen .exit,#fullscreen.on .enter{display:none}#fullscreen.on .exit{display:inline}
.level-tag{display:flex;flex-direction:column;align-items:center;line-height:1}.level-tag small{font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#fff;text-shadow:0 2px 0 var(--ink)}.level-tag strong{font-size:34px;color:#fff;--stroke:5px;--drop:3px}
.strikes{display:flex;gap:4px;margin-right:6px}.strikes svg{width:36px;height:36px;stroke:#fff;filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(2px 3px 0 var(--ink))}
.strikes svg.on{stroke:var(--red);animation:pop .4s}
@keyframes pop{0%{transform:scale(2.2)}60%{transform:scale(.85)}100%{transform:scale(1)}}
.timer.low{color:var(--red);animation:pop .5s infinite alternate}
.timer{position:fixed;top:calc(22px + var(--st));left:50%;transform:translateX(-50%);font-size:30px;color:#fff;--stroke:5px;--drop:3px;z-index:4;font-variant-numeric:tabular-nums}
.hint{position:fixed;top:calc(72px + var(--st));left:50%;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));background:var(--cream);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:10px 16px;font-weight:800;font-size:16px;text-align:center;z-index:4;transition:opacity .5s}
.hint.fade{opacity:0}
/* Red light warning: a flashing sign under the clock while a red or yellow light is coming up. */
.warning{position:fixed;top:calc(72px + var(--st));left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px 8px;border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);background:var(--red);color:#fff;text-align:center;pointer-events:none}
.warning b{font:400 28px/1 var(--display);letter-spacing:1px;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
.warning small{font-weight:900;font-size:14px}
.warning.red{animation:flash .5s infinite alternate}.warning.yellow{background:#ffb400;color:var(--ink)}.warning.yellow b{color:#fff}
@keyframes flash{to{background:#ff7a70;transform:translateX(-50%) scale(1.06)}}
body:has(.warning:not(.hidden)) .hint{opacity:0}

/* Menu */
.menu{position:absolute;left:6%;top:50%;transform:translateY(-50%);width:400px;max-width:calc(100% - 32px);z-index:2}
.logo{margin:0 0 12px;font-size:64px;line-height:.9;letter-spacing:1px;transform:rotate(-4deg);--stroke:9px;--drop:7px}
.logo span{display:block;color:var(--yellow)}.logo span+span{color:#fff;margin-left:62px}
.card{background:var(--cream);border:3px solid var(--ink);border-radius:24px;box-shadow:0 8px 0 var(--ink);padding:18px}
.card-title{margin:0 0 10px;font-size:24px;color:#fff;--stroke:5px;--drop:3px}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px}
.levels button{aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.levels button{border-radius:12px}.levels button b{font:400 22px/1 var(--display)}.levels button small{font-size:11px;letter-spacing:-1px;color:#c9cdd6}.levels button small i{font-style:normal;color:#ffb400}
.levels button.selected{background:var(--yellow)}.levels button:disabled{background:#d9dde5;color:#8a91a0;cursor:not-allowed;box-shadow:0 4px 0 #8a91a0;border-color:#8a91a0}
.color-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:900}.colors{display:flex;flex-wrap:wrap;gap:7px}
.swatch{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);background:var(--swatch);padding:0;box-shadow:0 3px 0 var(--ink)}.swatch[aria-checked=true]{outline:3px solid var(--ink);outline-offset:3px}
.how{font-size:14px;font-weight:700;line-height:1.45;color:#3d4a66;margin:14px 0 0}
body.playing .menu{display:none}

.side-buttons{position:fixed;left:calc(16px + var(--sl));bottom:calc(24px + var(--sb));display:flex;flex-direction:column;gap:12px;z-index:4}

/* Touch controls. --pad is the button size; the instructor's banner sits just above the pads. */
:root{--pad:78px}
.touch{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:0 calc(16px + var(--sr)) max(18px,var(--sb)) calc(16px + var(--sl));pointer-events:none;z-index:4}
.pad{display:flex;gap:14px;pointer-events:auto;touch-action:none}.pad.left{margin-left:72px}
.pad button{width:var(--pad);height:var(--pad);border-radius:22px;background:#ffffffd9;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-size:30px;touch-action:none;pointer-events:none}
.pad button.on{transform:translateY(4px);box-shadow:0 1px 0 var(--ink);background:var(--yellow)}
.pad .gas{background:#b9f5a8d9}.pad .brake{background:#ffc2bcd9}

/* The instructor's message across the bottom, like the reference game. */
.banner{--lift:0px;position:fixed;left:0;right:0;bottom:var(--lift);height:120px;background:linear-gradient(#2fb4f5,#1585d8);border-top:4px solid var(--ink);display:flex;align-items:center;z-index:6;transform:translateY(calc(260px + var(--lift)));transition:transform .25s cubic-bezier(.3,1.4,.6,1);pointer-events:none}
.banner.show{transform:none}
.banner .cop{position:absolute;left:2%;bottom:0;width:200px;height:220px}
.banner p{margin:0 0 0 max(230px,24%);font-size:clamp(24px,4.2vw,46px);color:#fff;--stroke:6px;line-height:1.05;text-transform:uppercase}
.banner p em{font-style:normal;color:var(--red)}

.modal{position:fixed;inset:0;display:grid;place-items:center;background:#14213d66;z-index:7;padding:16px}
.modal-card{width:min(380px,100%);background:var(--cream);border:3px solid var(--ink);border-radius:24px;box-shadow:0 8px 0 var(--ink);padding:22px;text-align:center;animation:rise .3s cubic-bezier(.3,1.4,.6,1)}
@keyframes rise{from{transform:translateY(30px) scale(.9);opacity:0}}
.modal-card h2{margin:0 0 8px;font-size:44px;color:var(--yellow);--stroke:7px;--drop:5px}
.modal-card p{font-weight:800;font-size:16px;margin:6px 0 18px}.modal-card .btn+.btn{margin-top:12px}
.stars{display:flex;justify-content:center;gap:6px;font-size:54px;line-height:1}.stars:empty{display:none}
.stars span{color:#d4d8e0;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;animation:pop .45s backwards}.stars span.on{color:#ffc400}
.stars span:nth-child(2){animation-delay:.15s;transform:translateY(-10px)}.stars span:nth-child(3){animation-delay:.3s}

/* On touch screens the banner rises above the pads so it never hides them. */
body.touchscreen .banner{--lift:calc(var(--pad) + 26px + max(0px,var(--sb) - 18px))}

/* Phones held upright: smaller buttons so the top bar fits, the clock and signs below it, and the camera and
   restart buttons stacked above the left pad instead of beside it. */
@media (max-width:700px){
  :root{--pad:66px}
  .menu{left:50%;transform:translate(-50%,-50%)}.logo{font-size:54px;text-align:center}.logo span+span{margin-left:40px}
  .banner{height:90px}.banner .cop{width:130px;height:143px}.banner p{margin-left:140px;font-size:22px;--stroke:5px}
  header{gap:8px}.icon{width:44px;height:44px}.icon svg{width:22px;height:22px}.strikes{margin-right:2px}.strikes svg{width:28px;height:28px}.level-tag strong{font-size:28px}
  .timer{top:calc(68px + var(--st));font-size:24px}.hint,.warning{top:calc(108px + var(--st))}.hint{font-size:14px}
  body.touchscreen .pad.left{margin-left:0}
  body.touchscreen .side-buttons{bottom:calc(var(--pad) + 34px + max(0px,var(--sb) - 18px))}
}
@media (max-height:760px){.menu{top:calc(16px + var(--st));transform:none;max-height:calc(100vh - 16px - var(--st));max-height:calc(100dvh - 16px - var(--st));overflow-y:auto;padding:4px 6px 14px}.how{display:none}}
/* Upright phones: the menu starts below the sound and full screen buttons. */
@media (max-width:700px) and (max-height:760px){.menu{left:50%;transform:translateX(-50%);top:calc(64px + var(--st));max-height:calc(100vh - 64px - var(--st));max-height:calc(100dvh - 64px - var(--st))}}
/* Phones held sideways: a wide menu with the lessons in two rows, clear of the buttons at the top right. */
@media (max-height:520px){
  .menu{top:calc(6px + var(--st));max-height:calc(100vh - 6px - var(--st));max-height:calc(100dvh - 6px - var(--st));left:calc(16px + var(--sl));transform:none;width:min(560px,calc(100% - 140px - var(--sl) - var(--sr)));max-width:none}
  .logo{font-size:38px;margin-bottom:2px;text-align:left}.logo span{display:inline}.logo span+span{margin-left:12px}
  .card{padding:12px;border-radius:20px}.card-title{display:none}
  .levels{grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:10px}.levels button{border-radius:10px}.levels button b{font-size:18px}.levels button small{font-size:9px}
  .color-row{margin-bottom:10px}.swatch{width:26px;height:26px}.btn{padding:11px 16px;font-size:20px}
  .modal{overflow-y:auto;place-items:normal}.modal-card{margin:auto;padding:14px 18px}.modal-card h2{font-size:34px;margin-bottom:4px}.stars{font-size:40px}.modal-card p{margin:4px 0 12px}.modal-card .btn+.btn{margin-top:8px}.text-button{padding:8px}
  .banner{height:90px}.banner .cop{width:130px;height:143px}.banner p{margin-left:140px;font-size:26px;--stroke:5px}
  body.touchscreen .banner{height:68px}body.touchscreen .banner .cop{width:96px;height:106px}body.touchscreen .banner p{margin-left:108px;font-size:22px}
}