/* Touch panel (js/touch.js). Sized in container-query units so the same
   markup fills a phone or shrinks into a TV mirror card. */
.tp{--pc:#3fae3a;--u:1cqmin;position:relative;width:100%;height:100%;container-type:size;
  font-family:"Baloo 2","Kenney Future",system-ui,sans-serif;color:var(--navy,#101a3d);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overflow:hidden}
.tp *{box-sizing:border-box}
.tp-stage{position:absolute;inset:0;border-radius:calc(6*var(--u));overflow:hidden;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.55) 0 3%,transparent 3.5%),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.4) 0 2%,transparent 2.5%),
    linear-gradient(160deg,var(--cream,#fdf6dd),#ffe2f0 60%,#e6d9ff);
  box-shadow:inset 0 0 0 calc(2.5*var(--u)) var(--pc),inset 0 0 0 calc(3.2*var(--u)) var(--navy,#101a3d)}
.tp-body{position:absolute;inset:calc(4*var(--u));display:flex;flex-direction:column;gap:calc(3*var(--u))}
.tp-body.shake{animation:tp-shake .3s linear infinite}
@keyframes tp-shake{25%{transform:translateX(-1.5cqw)}75%{transform:translateX(1.5cqw)}}

/* header */
.tp-head{display:flex;flex-direction:column;gap:calc(1.5*var(--u))}
.tp-title{font-weight:800;font-size:calc(6.4*var(--u));line-height:1.05;text-align:center;
  color:#fff;-webkit-text-stroke:calc(.5*var(--u)) var(--navy,#101a3d);paint-order:stroke fill;
  text-shadow:0 calc(.8*var(--u)) 0 var(--navy,#101a3d)}
.tp-timer,.tp-prog{height:calc(3*var(--u));border-radius:99px;background:rgba(16,26,61,.18);
  border:calc(.6*var(--u)) solid var(--navy,#101a3d);overflow:hidden}
.tp-timer i,.tp-prog i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--sun,#f0c95c) 0 8px,#fff3c4 8px 16px);transition:width .1s linear}
.tp-prog i{background:repeating-linear-gradient(45deg,var(--pc) 0 8px,#fff 8px 11px)}

/* layout helpers */
.tp-row,.tp-col,.tp-center{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:calc(4*var(--u))}
.tp-col{flex-direction:column;align-items:stretch}
.tp-col>.tp-row{flex:1}
.tp-row.two>*{flex:1}

/* candy buttons */
.tp-btn{appearance:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  touch-action:none;-webkit-tap-highlight-color:transparent;min-width:88px;min-height:88px;
  transition:transform .06s ease-out,filter .06s}
.tp.mirror .tp-btn{min-width:0;min-height:0;cursor:default}
.tp-btn.candy{position:relative;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.85) 0 9%,transparent 10%),
    repeating-conic-gradient(from 0deg,var(--pc) 0 15deg,#fff 15deg 30deg);
  box-shadow:0 0 0 calc(1.6*var(--u)) #fff,0 0 0 calc(2.4*var(--u)) var(--navy,#101a3d),0 calc(2.4*var(--u)) 0 calc(2.4*var(--u)) var(--navy,#101a3d)}
.tp-btn.candy::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--pc);
  box-shadow:inset 0 calc(-1.5*var(--u)) 0 rgba(0,0,0,.18),0 0 0 calc(1*var(--u)) #fff}
.tp-btn-label{position:relative;z-index:1;font-weight:800;font-size:calc(8*var(--u));color:#fff;
  -webkit-text-stroke:calc(.6*var(--u)) var(--navy,#101a3d);paint-order:stroke fill}
.tp-btn.giant{width:min(62cqw,48cqh);aspect-ratio:1}
.tp-btn.down{transform:translateY(calc(1.8*var(--u))) scale(.94,.88);filter:brightness(1.12)}
.tp-btn.squishy.down{transform:translateY(calc(1.8*var(--u))) scale(1.08,.8)}
.tp-btn.pad{height:min(60cqh,62cqw);border-radius:calc(8*var(--u))}
.tp-btn.pad::after{inset:14%;border-radius:calc(5*var(--u))}
.tp-btn.pad .tp-btn-label{font-size:calc(14*var(--u))}
.tp-btn.next{animation:tp-glow .5s ease-in-out infinite alternate}
@keyframes tp-glow{to{box-shadow:0 0 0 calc(1.6*var(--u)) #fff,0 0 0 calc(2.4*var(--u)) var(--navy,#101a3d),0 0 calc(6*var(--u)) calc(3*var(--u)) var(--sun,#f0c95c)}}
.tp .wait-turn .tp-btn{filter:saturate(.35) brightness(.95)}

/* gauges */
.tp-vgauge{position:relative;width:calc(11*var(--u));height:min(60cqh,62cqw);border-radius:99px;
  background:#fff;border:calc(.8*var(--u)) solid var(--navy,#101a3d);overflow:hidden}
.tp-vgauge i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--pc),#fff 180%);transition:height .08s}
.tp-vgauge .band{display:none;position:absolute;left:0;right:0;background:rgba(92,194,90,.45);border-block:calc(.6*var(--u)) dashed #2e8a2c;z-index:1}
.tp-vgauge.tempo .band{display:block}
.tp-vgauge.tempo.in i{background:linear-gradient(0deg,#5cc25a,#c9f5b8)}
.tp-hgauge{position:relative;height:calc(12*var(--u));border-radius:99px;background:#fff;border:calc(.8*var(--u)) solid var(--navy,#101a3d);overflow:hidden}
.tp-hgauge .zone{position:absolute;top:0;bottom:0;background:#5cc25a}
.tp-hgauge .marker{position:absolute;top:-2px;bottom:-2px;width:calc(2.4*var(--u));margin-left:calc(-1.2*var(--u));background:var(--navy,#101a3d);border-radius:99px}
.tp-col>.tp-btn.giant{align-self:center}

/* hold ring */
.tp-ring{--v:0;padding:calc(3*var(--u));border-radius:50%;
  background:conic-gradient(var(--pc) calc(var(--v)*360deg),rgba(16,26,61,.15) 0)}

/* balance */
.tp-track{position:relative;flex:1;display:flex;border-radius:calc(8*var(--u));overflow:hidden;min-height:88px;
  border:calc(.8*var(--u)) solid var(--navy,#101a3d);touch-action:none}
.tp.mirror .tp-track{min-height:0}
.tp-track .half{flex:1;display:flex;align-items:center;justify-content:center;transition:filter .06s}
.tp-track .half.l{background:linear-gradient(90deg,#f28cc4,#ffd1ea)}
.tp-track .half.r{background:linear-gradient(270deg,#84c3ef,#d4ecfb)}
.tp-track .half.down{filter:brightness(.85)}
.tp-track .half.down .arrow{transform:scale(.85)}
.tp-track .arrow{font-size:calc(16*var(--u));color:#fff;-webkit-text-stroke:calc(.6*var(--u)) var(--navy,#101a3d)}
.tp-track .dial{position:absolute;left:8%;right:8%;top:calc(4*var(--u));height:calc(10*var(--u));border-radius:99px;
  background:linear-gradient(90deg,#e84a4a,#f7d64a 25%,#5cc25a 42% 58%,#f7d64a 75%,#e84a4a);
  border:calc(.6*var(--u)) solid var(--navy,#101a3d);pointer-events:none}
.tp-track .dial.danger{animation:tp-glow .25s infinite alternate}
.tp-track .needle{position:absolute;top:-30%;bottom:-30%;width:calc(3*var(--u));margin-left:calc(-1.5*var(--u));
  background:#fff;border:calc(.6*var(--u)) solid var(--navy,#101a3d);border-radius:99px;transition:left .05s linear}

/* sequence */
.tp-strip{display:flex;justify-content:center;gap:calc(2*var(--u));padding:calc(2*var(--u));border-radius:calc(4*var(--u));background:rgba(255,255,255,.7);border:calc(.6*var(--u)) solid var(--navy,#101a3d)}
.tp-strip .chip{width:calc(12*var(--u));aspect-ratio:1;opacity:.55;transition:transform .15s,opacity .15s}
.tp-strip .chip svg,.tp-btn.shape svg{width:100%;height:100%;display:block}
.tp-strip .chip.now{opacity:1;transform:scale(1.35)}
.tp-strip .chip.done{opacity:.25;filter:grayscale(1)}
.tp-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,1fr);gap:calc(3*var(--u));align-content:center}
.tp-grid[data-n="3"] .tp-btn:last-child,.tp-grid[data-n="5"] .tp-btn:last-child{grid-column:1/-1;justify-self:center}
.tp-btn.shape{aspect-ratio:1;max-height:calc(30*var(--u));width:100%;justify-self:center;padding:calc(3*var(--u));border-radius:calc(6*var(--u));
  background:#fff;box-shadow:0 0 0 calc(.8*var(--u)) var(--navy,#101a3d),0 calc(1.6*var(--u)) 0 calc(.8*var(--u)) var(--navy,#101a3d)}
.tp-grid .tp-btn.shape{height:100%;width:auto;max-width:100%}

/* colour pick */
.tp-target{display:flex;align-items:center;justify-content:center;gap:calc(2*var(--u));font-weight:800;font-size:calc(6*var(--u))}
.tp-target .swatch{width:calc(10*var(--u));aspect-ratio:1;border-radius:50%;border:calc(.6*var(--u)) solid var(--navy,#101a3d)}
.tp-blobs{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:calc(2*var(--u))}
.tp-blobs.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:center;justify-items:center;min-height:0}
.tp-btn.blob{width:min(46cqw,24cqh);aspect-ratio:1.25;background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.7) 0 8%,transparent 9%),var(--blob);
  border-radius:58% 42% 52% 48%/48% 60% 40% 52%;
  box-shadow:0 0 0 calc(.8*var(--u)) var(--navy,#101a3d),0 calc(1.8*var(--u)) 0 calc(.8*var(--u)) var(--navy,#101a3d)}
.tp-blobs:not(.grid) .tp-btn.blob:nth-child(2){align-self:flex-end;margin-right:8%;border-radius:45% 55% 40% 60%/58% 42% 58% 42%}
.tp-blobs:not(.grid) .tp-btn.blob:nth-child(1),.tp-blobs:not(.grid) .tp-btn.blob:nth-child(3){align-self:flex-start;margin-left:8%}
.tp-blobs.grid .tp-btn.blob{width:min(40cqw,30cqh);min-width:0;min-height:0}
.tp-blobs.grid[data-n="5"] .tp-btn.blob,.tp-blobs.grid[data-n="6"] .tp-btn.blob{width:min(40cqw,21cqh)}
.tp-blobs.grid .tp-btn.blob:nth-child(even){border-radius:45% 55% 40% 60%/58% 42% 58% 42%}
.tp-blobs.grid[data-n="5"] .tp-btn.blob:last-child{grid-column:1/-1}

/* result */
.tp-result{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;
  font-weight:800;font-size:calc(16*var(--u));color:#fff;-webkit-text-stroke:calc(.8*var(--u)) var(--navy,#101a3d);paint-order:stroke fill}
.tp-result[data-r="yay"],.tp-result[data-r="oops"]{display:flex;animation:tp-pop .35s cubic-bezier(.3,1.6,.6,1)}
.tp-result[data-r="yay"]{color:var(--sun,#f0c95c)}
@keyframes tp-pop{from{transform:scale(.3)}}

/* shutter */
.tp-shutter{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  transform:translateY(-102%);transition:transform .35s cubic-bezier(.5,0,.3,1.3)}
.tp-shutter.shut{transform:none}
.tp-stripes{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#9aa3b5 0 calc(5*var(--u)),#6f7890 calc(5*var(--u)) calc(6*var(--u)));
  border-bottom:calc(2*var(--u)) solid var(--pc)}
.tp-shutter-text{position:relative;padding:calc(2*var(--u)) calc(5*var(--u));border-radius:99px;background:var(--cream,#fdf6dd);
  border:calc(.8*var(--u)) solid var(--navy,#101a3d);font-weight:800;font-size:calc(7*var(--u));text-align:center;max-width:90%}
.tp.coming .tp-shutter-text{background:var(--pc);color:#fff;-webkit-text-stroke:calc(.4*var(--u)) var(--navy,#101a3d);paint-order:stroke fill;
  animation:tp-coming .6s ease-in-out infinite alternate}
@keyframes tp-coming{to{box-shadow:0 0 calc(8*var(--u)) calc(3*var(--u)) var(--pc);transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.tp *{animation:none!important;transition:none!important}}

/* alternate: darken the pad that is not next */
.tp-btn.notnext{filter:brightness(.45) saturate(.6);transform:scale(.94);transition:filter .08s,transform .08s}

/* ----- tiers: more pads, longer sequences ----- */
.tp-alt{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:calc(4*var(--u))}
.tp-alt .tp-btn.pad{height:100%;width:100%;min-height:0;min-width:0}
.tp-alt[data-n="3"] .tp-btn:last-child{grid-column:1/-1;width:50%;justify-self:center}
.tp-alt .tp-btn-label{font-size:calc(9*var(--u))}
.tp-strip{flex-wrap:wrap;flex-shrink:0}
.tp-strip[data-n="5"] .chip{width:calc(11*var(--u))}
.tp-strip[data-n="6"] .chip,.tp-strip[data-n="7"] .chip{width:calc(9.5*var(--u))}
.tp-strip[data-n="6"],.tp-strip[data-n="7"]{gap:calc(1.4*var(--u))}
.tp-grid[data-n="5"],.tp-grid[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.tp-grid[data-n="7"]{grid-template-columns:repeat(4,1fr)}
.tp-grid[data-n="5"] .tp-btn:last-child{grid-column:auto}
.tp-grid[data-n="5"] .tp-btn.shape,.tp-grid[data-n="6"] .tp-btn.shape,.tp-grid[data-n="7"] .tp-btn.shape{min-width:0;min-height:0;max-height:calc(24*var(--u));padding:calc(2*var(--u))}
.tp-hgauge .zone{box-shadow:inset 0 0 0 calc(.5*var(--u)) #2e8a2c;min-width:calc(3*var(--u))}
.tp-timer[hidden]{display:none}

/* ----- spinner ----- */
.tp-spinner{flex:1;min-height:0;display:flex;justify-content:center}
.tp-spinner svg{height:100%;max-width:100%;aspect-ratio:1}
.tp-spinner .rim{fill:#fff;stroke:var(--navy,#101a3d);stroke-width:2.5}
.tp-spinner .arc{fill:#5cc25a;stroke:#2e8a2c;stroke-width:1.2;stroke-linejoin:round}
.tp-spinner .ptr{fill:var(--navy,#101a3d);stroke:#fff;stroke-width:2;stroke-linejoin:round}
.tp-spinner .hub{fill:var(--navy,#101a3d)}
.tp-spinner.hit .arc{fill:var(--sun,#f0c95c)}
.tp-misses{display:flex;justify-content:center;gap:calc(2*var(--u));font-weight:800;font-size:calc(6*var(--u));line-height:1;color:rgba(16,26,61,.25)}
.tp-misses[hidden]{display:none}
.tp-misses i{font-style:normal}
.tp-misses i.used{color:#e84a4a}
.tp-btn.big{width:min(40cqw,26cqh);aspect-ratio:1;align-self:center;flex-shrink:0}

/* ----- switches ----- */
.tp-lamps{display:flex;justify-content:space-around;gap:calc(2*var(--u));padding:calc(2.5*var(--u));border-radius:calc(4*var(--u));
  background:var(--navy,#101a3d);flex-shrink:0}
.tp-lamps .lamp{width:calc(9*var(--u));aspect-ratio:1;border-radius:50%;background:#3a4466;border:calc(.6*var(--u)) solid #0a0f24}
.tp-lamps .lamp.on{background:radial-gradient(circle at 35% 30%,#fff 0 15%,var(--sun,#f0c95c) 45%);box-shadow:0 0 calc(4*var(--u)) var(--sun,#f0c95c)}
.tp-switches{flex:1;min-height:0;display:flex;justify-content:space-around;align-items:stretch;gap:calc(2*var(--u))}
.tp-btn.switch{position:relative;flex:1;min-width:0;max-width:calc(22*var(--u));min-height:0;border-radius:calc(5*var(--u));
  background:linear-gradient(#cfd6e4,#fff 50%,#cfd6e4);box-shadow:0 0 0 calc(.8*var(--u)) var(--navy,#101a3d),0 calc(1.6*var(--u)) 0 calc(.8*var(--u)) var(--navy,#101a3d)}
.tp-btn.switch::before{content:"";position:absolute;left:30%;right:30%;top:12%;bottom:12%;border-radius:99px;background:#3a4466}
.tp-btn.switch .lever{position:absolute;left:14%;right:14%;height:34%;bottom:10%;border-radius:calc(4*var(--u));
  background:#9aa3b5;border:calc(.6*var(--u)) solid var(--navy,#101a3d);transition:bottom .1s,background .1s}
.tp-btn.switch.on .lever{bottom:56%;background:var(--sun,#f0c95c);box-shadow:0 0 calc(3*var(--u)) var(--sun,#f0c95c)}
.tp-btn.switch.down{transform:scale(.95)}
.tp-switches[data-n="3"] .tp-btn.switch{max-width:calc(26*var(--u))}
/* two rows of switches (6 and 8): grid, lamps in the same grid */
.tp-lamps{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);justify-items:center}
.tp-switches[data-rows="2"]{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:1fr;justify-items:center}
.tp-switches[data-rows="2"] .tp-btn.switch{width:100%}

/* ----- dial ----- */
.tp-note{text-align:center;font-weight:800;font-size:calc(5.5*var(--u));line-height:1;min-height:1em}
.tp-knob{flex:1;min-height:0;display:flex;justify-content:center;touch-action:none;cursor:grab}
.tp-knob svg{height:100%;max-width:100%;aspect-ratio:1;overflow:visible}
.tp-knob .track{fill:rgba(16,26,61,.14)}
.tp-knob .zone{fill:#5cc25a;stroke:#2e8a2c;stroke-width:1}
.tp-knob .cap{fill:#e9edf5;stroke:var(--navy,#101a3d);stroke-width:2.5}
.tp-knob .notch{fill:var(--pc);stroke:var(--navy,#101a3d);stroke-width:1.6}
.tp-knob.in .cap{stroke:#2e8a2c;stroke-width:4}
.tp-knob.down .cap{filter:brightness(1.1)}
.tp-knob .arr{fill:rgba(16,26,61,.25)}
.tp-knob .arr.on{fill:var(--sun,#f0c95c);stroke:var(--navy,#101a3d);stroke-width:1}
.tp-row.dial-btns{flex:0 0 auto}
.tp-btn.nudge{height:calc(16*var(--u));min-height:56px;flex:0 1 calc(30*var(--u));border-radius:calc(6*var(--u))}
.tp-btn.nudge::after{inset:12%;border-radius:calc(4*var(--u))}
.tp-btn.nudge .tp-btn-label{font-size:calc(8*var(--u))}
.tp.mirror .tp-btn.nudge{min-height:0}

/* ----- practice ----- */
.tp-practice{display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--u));flex-shrink:0}
.tp-new{display:flex;align-items:center;gap:calc(2*var(--u));padding:calc(1*var(--u)) calc(4*var(--u));border-radius:99px;
  background:var(--sun,#f0c95c);border:calc(.6*var(--u)) solid var(--navy,#101a3d);font-weight:800;font-size:calc(6*var(--u));line-height:1.1;
  transform:rotate(-2deg);box-shadow:0 calc(.8*var(--u)) 0 var(--navy,#101a3d)}
.tp-new b{color:#fff;background:#e84a4a;padding:0 calc(2*var(--u));border-radius:99px;animation:tp-new .7s ease-in-out infinite alternate}
@keyframes tp-new{to{transform:scale(1.12) rotate(4deg)}}
.tp-steps{display:flex;gap:calc(1.5*var(--u))}
.tp-steps i{width:calc(3*var(--u));aspect-ratio:1;border-radius:50%;background:rgba(16,26,61,.2)}
.tp-steps i.done{background:#5cc25a}
.tp-steps i.now{background:var(--pc);box-shadow:0 0 0 calc(.5*var(--u)) var(--navy,#101a3d)}
.tp-waitall{font-weight:800;font-size:calc(4.6*var(--u));text-align:center;padding:0 calc(3*var(--u));border-radius:99px;background:rgba(255,255,255,.8)}
.tp-waitall[hidden],.tp-tick[hidden]{display:none}
.tp-tick{position:absolute;top:0;right:0;z-index:2;width:calc(13*var(--u));aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#5cc25a;color:#fff;font-weight:800;font-size:calc(8*var(--u));border:calc(.8*var(--u)) solid var(--navy,#101a3d);
  animation:tp-pop .35s cubic-bezier(.3,1.6,.6,1)}
.tp.practice .tp-title{font-size:calc(5.6*var(--u))}

/* ----- TV gamepad views (js/panels.js). This file is loaded by index.html
   too; card sizes are container units (cqi) like game.css. ----- */
.panel .pv-new{align-self:center;padding:.1em .6em;border-radius:99px;background:var(--sun,#f0c95c);border:2px solid var(--navy,#101a3d);
  font-weight:800;font-size:clamp(10px,9cqi,26px);line-height:1.15;text-align:center;color:var(--navy,#101a3d)}
.panel .pv-new b{color:#e84a4a;margin-right:.3em}
.panel .pv-sub{font-weight:700;font-size:clamp(9px,6.5cqi,18px);text-align:center;line-height:1.1}
.panel .pv-tick{position:absolute;top:2%;right:3%;width:16cqi;aspect-ratio:1;border-radius:50%;background:#5cc25a url(assets/ui/check.png) center/65% no-repeat;border:2px solid var(--navy,#101a3d);z-index:2}
.panel .pv-tick[hidden],.panel .pv-sub[hidden]{display:none}
.panel .pv-steps{display:flex;gap:2cqi;justify-content:center}
.panel .pv-steps i{width:4cqi;aspect-ratio:1;border-radius:50%;background:rgba(16,26,61,.25)}
.panel .pv-steps i.now{background:var(--pc)}
.panel .pv-steps i.done{background:#5cc25a}
.panel .timer[hidden],.panel .strip-time[hidden]{display:none}
.panel .row.tight{gap:1.5cqi}
.panel .row.tight .glyph{width:17cqi}
.panel .row.tight .glyph.small{width:13cqi}
.panel .pick.small .glyph{width:15cqi}
.panel .pick.small .swatch{width:8cqi}
.panel .alt-grid{display:grid;grid-template-columns:repeat(2,auto);gap:2cqi;justify-content:center}
.panel .alt-grid .glyph{width:22cqi}
.panel .alt-grid[data-n="3"] .glyph:last-child{grid-column:1/-1;justify-self:center}
.panel .pv-dial{width:58cqi;aspect-ratio:1}
.panel .pv-spin{width:54cqi;aspect-ratio:1}
.panel .pv-dial svg,.panel .pv-spin svg{width:100%;height:100%;display:block;overflow:visible}
.panel .pv-spin .rim,.panel .pv-dial .cap{stroke:var(--navy,#101a3d);stroke-width:3}
.panel .pv-spin .rim{fill:#fff}
.panel .pv-spin .arc,.panel .pv-dial .zone{fill:#5cc25a;stroke:#2e8a2c;stroke-width:1}
.panel .pv-spin .ptr{fill:var(--navy,#101a3d);stroke:#fff;stroke-width:2}
.panel .pv-spin .hub{fill:var(--navy,#101a3d)}
.panel .pv-dial .track{fill:rgba(16,26,61,.15)}
.panel .pv-dial .cap{fill:#e9edf5}
.panel .pv-dial.in .cap{stroke:#2e8a2c;stroke-width:5}
.panel .pv-dial .notch{fill:var(--pc);stroke:var(--navy,#101a3d);stroke-width:2}
.panel .pv-misses{font-weight:800;font-size:clamp(10px,8cqi,22px);letter-spacing:.2em;color:rgba(16,26,61,.25)}
.panel .pv-misses i{font-style:normal}
.panel .pv-misses i.used{color:#e84a4a}
.panel .pv-switches{display:grid;grid-template-columns:repeat(var(--cols,3),auto);gap:1.5cqi;justify-content:center;align-items:end}
.panel .pv-sw{display:flex;flex-direction:column;align-items:center;gap:1.2cqi}
.panel .pv-sw .lamp{width:8cqi;aspect-ratio:1;border-radius:50%;background:#3a4466;border:2px solid var(--navy,#101a3d)}
.panel .pv-sw .lamp.on{background:var(--sun,#f0c95c);box-shadow:0 0 6px var(--sun,#f0c95c)}
.panel .pv-sw .lever{position:relative;width:9cqi;height:17cqi;border-radius:3cqi;background:#3a4466;border:2px solid var(--navy,#101a3d)}
.panel .pv-sw .lever::after{content:"";position:absolute;left:-2px;right:-2px;height:45%;bottom:0;border-radius:2cqi;background:#9aa3b5;border:2px solid var(--navy,#101a3d);transition:bottom .1s}
.panel .pv-sw .lever.on::after{bottom:55%;background:var(--sun,#f0c95c)}
.panel .pv-sw .lever.match{box-shadow:0 0 0 2px #5cc25a}
.panel .pv-sw .glyph{width:12cqi}
.panel .pv-switches[data-n="3"] .glyph,.panel .pv-switches[data-n="4"] .glyph{width:15cqi}

/* multitask: what this player must do straight after the current task */
.panel .next-chip{font-size:.8em;font-weight:800;background:var(--sun,#f0c95c);color:var(--navy,#101a3d);
  border:2px solid var(--navy,#101a3d);border-radius:999px;padding:0 .5em;white-space:nowrap}