/* =========================================================
   Dark Apple look: system font (SF on Apple devices, Inter elsewhere),
   iOS dark-mode colours, grouped lists, segmented controls and switches.
   ========================================================= */
:root{
  --bg:#000;
  --bg2:#1c1c1e;                 /* cards */
  --bg3:#2c2c2e;                 /* rows inside cards */
  --bg4:#3a3a3c;
  --fill:rgba(120,120,128,.36);
  --fill2:rgba(120,120,128,.32);
  --fill3:rgba(118,118,128,.24);
  --fill4:rgba(116,116,128,.18);
  --label:#fff;
  --label2:rgba(235,235,245,.6);
  --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.65);
  --blue:#0a84ff; --green:#30d158; --red:#ff453a; --orange:#ff9f0a; --yellow:#ffd60a;
  --pink:#ff375f; --purple:#bf5af2; --indigo:#5e5ce6; --teal:#64d2ff; --mint:#66d4cf;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --b:.484s;                     /* one beat at 124 bpm — dances and music share it */
  /* what a "look" can change besides the colours above (see the LOOKS block at the end of the style sheet);
     --btn --on-btn --on --on-fg --seg-on-fg --warn are left out here on purpose: they fall back to --blue, white, --green ... where they are used */
  --page-img:none;               /* a gradient laid over the page colour */
  --cta-bg:#1c1c1e;              /* inside the ringed banners */
  --seg-on:#636366;              /* the chosen segment */
  --hover:rgba(255,255,255,.05);
  --edge:rgba(255,255,255,.06); --edge2:rgba(255,255,255,.1);
  --glass:rgba(44,44,46,.72); --glass-hover:rgba(58,58,60,.8); --glass-bd:rgba(255,255,255,.12);
  --bulb:rgba(255,255,255,.22); --bulb-major:rgba(255,255,255,.5); --bulb-on:#fff;     /* the lights on the rim of the Apple wheel */
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg) var(--page-img); color:var(--label); font:400 15px/1.4 var(--font); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.01em}
button,input,textarea{font-family:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.app{min-height:100vh; display:flex; flex-direction:column; overflow-x:clip}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding:16px 28px 4px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{flex:none; width:38px; height:38px; border-radius:10px; position:relative; overflow:hidden;
  background:conic-gradient(from -90deg,#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff);
  box-shadow:0 0 0 .5px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.5)}
.logo::after{content:""; position:absolute; inset:30%; border-radius:50%; background:#000; box-shadow:0 0 0 2px rgba(255,255,255,.9)}
#title{min-width:0; width:min(44vw,420px); background:transparent; border:0; color:var(--label);
  font:700 28px/1.15 var(--font-d); letter-spacing:-.02em; padding:4px 8px; border-radius:10px; outline:none; text-overflow:ellipsis}
#title:hover{background:var(--fill4)}
#title:focus{background:var(--fill3)}
.top-actions{display:flex; gap:10px}
.icon-btn{position:relative; flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:0;
  background:var(--fill3); color:var(--label); cursor:pointer; transition:background .15s, transform .15s}
.icon-btn:hover{background:var(--fill2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn:disabled{opacity:.3; cursor:default; transform:none}
.icon-btn svg{width:17px; height:17px}
.icon-btn.sm{width:30px; height:30px}
.icon-btn.sm svg{width:14px; height:14px}

/* top 3 */
.pod-row{flex:1 1 auto; min-width:0; display:flex; justify-content:center}
.podium{display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; padding:5px 6px 5px 14px; border-radius:22px;
  border:.5px solid var(--glass-bd); background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  color:var(--label); font:inherit; cursor:pointer; transition:background .15s}
.podium:hover{background:var(--glass-hover)}
.pod-label{font:600 13px var(--font); color:var(--label2); white-space:nowrap}
.pod-list{display:flex; gap:6px; min-width:0}
.pod-chip{position:relative; display:flex; align-items:center; gap:7px; min-width:0; padding:4px 11px 4px 7px; border-radius:16px; background:var(--fill4)}
.pod-chip.first{background:rgba(255,214,10,.14)}
.pod-chip.bump{animation:podPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes podPop{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:none}}
.pod-av{width:28px; height:28px; flex:none}
.pod-av svg{width:100%; height:100%; display:block; border-radius:50%}
.pod-av .flag-badge{width:50%; right:-12%}
.pod-medal{font-size:18px; line-height:1; margin-right:-2px}
.pod-name{min-width:0; font:600 13.5px var(--font); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod-n{font:700 15px var(--font-d); font-variant-numeric:tabular-nums}
.pod-empty{font-size:13px; color:var(--label2); padding-right:8px}
.pod-cat{min-width:0; max-width:180px; font:500 13px var(--font); color:var(--label2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}   /* the last spin: what – result */
.pod-arrow{flex:none; color:var(--label2); font-size:13px}
.podium.last .pod-name{max-width:220px}

/* ---------- layout ---------- */
/* The wheel (or the slot machine) takes the room it can use, no more, and the people panel sits right beside it:
   the pair is centred, so on a wide screen the panel doesn't drift to the far edge. --stage-w is the width of the wheel or the machine. */
main{flex:1; display:grid; grid-template-columns:minmax(0, calc(var(--stage-w) + var(--stage-pad))) 370px; justify-content:center; gap:28px; padding:8px 28px 28px; align-items:start;
  --stage-w:min(790px, max(420px, calc(100vh - 200px - var(--clock-h, 0px)))); --stage-pad:70px}
body[data-view="slot"] main{--stage-w:calc(max(560px, calc(100vh - 140px)) * 1.25); --stage-pad:0px}
@supports (height:100svh){ body[data-view="slot"] main{--stage-w:calc(max(560px, calc(100svh - 140px)) * 1.25)} }
.stage-wrap{display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:8px}

/* ---------- wheel (shared parts; each skin styles the rest) ---------- */
.wheel-wrap{position:relative; width:min(100%, max(420px, calc(100vh - 200px - var(--clock-h, 0px))), 790px); aspect-ratio:1;
  container-type:inline-size; user-select:none; -webkit-user-select:none}
.wheel-glow{position:absolute; inset:-8%; border-radius:50%; z-index:0; pointer-events:none; opacity:.5}      /* (no filter:blur here: a blur over 900 px that the wheel turns on top of is repainted every frame) */
.rim,.spinlayer{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.rim{z-index:1}
#wheel,.wheel-cv{position:absolute; left:6.4%; top:6.4%; width:87.2%; height:87.2%; border-radius:50%; z-index:2; will-change:transform}
#wheel{cursor:pointer}
.spinlayer{z-index:3; will-change:transform}
.sheen{position:absolute; left:6.4%; top:6.4%; width:87.2%; height:87.2%; border-radius:50%; z-index:3; pointer-events:none}
.hub{position:absolute; left:50%; top:50%; z-index:5; width:19%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  border:0; padding:0; cursor:pointer; display:grid; place-items:center; font:600 4.2cqi/1 var(--font-d); letter-spacing:-.01em;
  transition:transform .18s ease, filter .18s ease}
.hub span{display:block}
.hub:hover{transform:translate(-50%,-50%) scale(1.05)}
.hub:active{transform:translate(-50%,-50%) scale(.97)}
.hub:disabled{cursor:default; transform:translate(-50%,-50%)}
.hub:disabled span{opacity:.35}
.pointer{position:absolute; z-index:6; width:8.4%; left:45.8%; top:-2.4%; transform-origin:50% 30%; pointer-events:none}
.pointer svg{display:block; width:100%; height:auto; overflow:visible}
.pointer.tick{animation:flap .13s ease-out}
@keyframes flap{0%{transform:rotate(0)}35%{transform:rotate(-16deg)}100%{transform:rotate(0)}}
#wheel,.hub{touch-action:none; -webkit-touch-callout:none}
.power{position:absolute; left:50%; top:50%; z-index:4; width:28%; aspect-ratio:1; transform:translate(-50%,-50%) rotate(-90deg);
  pointer-events:none; opacity:0; transition:opacity .15s; overflow:visible}
.power.on{opacity:1}
.power.full{animation:pwShake .1s linear infinite}
@keyframes pwShake{0%,100%{transform:translate(-50%,-50%) rotate(-90deg)}33%{transform:translate(calc(-50% + 1.5px),-50%) rotate(-90deg)}66%{transform:translate(calc(-50% - 1.5px),-50%) rotate(-90deg)}}
.pw-track{fill:none; stroke:rgba(0,0,0,.45); stroke-width:9}
.pw-bar{fill:none; stroke:var(--green); stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100}

/* ---------- skins ---------- */
/* Apple */
[data-skin="apple"] .wheel-glow{inset:-12%; -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%); mask-image:radial-gradient(closest-side,#000 70%,transparent 100%); background:conic-gradient(#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff); opacity:.28}
[data-skin="apple"] .hub{background:rgba(28,28,30,.86); color:#fff; box-shadow:0 0 0 .5cqi rgba(255,255,255,.14), 0 1.4cqi 4cqi rgba(0,0,0,.55);
}
[data-skin="apple"] .sheen{background:radial-gradient(circle at 30% 18%, rgba(255,255,255,.14), transparent 42%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
[data-skin="apple"] .bulb{stroke:var(--bulb); stroke-linecap:round; transition:stroke .12s}
[data-skin="apple"] .bulb.major{stroke:var(--bulb-major)}
[data-skin="apple"] .bulb.on{stroke:var(--bulb-on)}
[data-skin="apple"] .pointer svg{filter:drop-shadow(0 .8cqi 1cqi rgba(0,0,0,.55))}
/* Casino (the original gold wheel) */
[data-skin="casino"] .wheel-glow{background:radial-gradient(circle, rgba(255,200,90,.35) 0%, rgba(142,92,247,.3) 45%, transparent 68%); opacity:.9}
[data-skin="casino"] .hub{border:1.2cqi solid transparent; color:#ffe08a; font:800 4.2cqi/1 'Bricolage Grotesque',var(--font-d);
  background:radial-gradient(circle at 38% 30%, #3a3474 0%, #1a1638 62%, #100d24 100%) padding-box,
    conic-gradient(from 210deg,#fff1c1,#f2c14e,#9b6a15,#f2c14e,#fff1c1,#9b6a15,#fff1c1) border-box;
  box-shadow:0 1.2cqi 3cqi rgba(0,0,0,.55)}
[data-skin="casino"] .hub span{text-shadow:0 0 2cqi rgba(255,209,102,.45)}
[data-skin="casino"] .sheen{background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), rgba(255,255,255,0) 36%), radial-gradient(circle, transparent 60%, rgba(0,0,0,.2) 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 4cqi rgba(0,0,0,.35)}
[data-skin="casino"] .bulb{fill:#5e4a22; stroke:rgba(0,0,0,.35); stroke-width:2; transition:fill .1s}
[data-skin="casino"] .bulb.on{fill:#fff4cc; filter:drop-shadow(0 0 6px rgba(255,214,107,.95))}
[data-skin="casino"] .pointer svg{filter:drop-shadow(0 .8cqi 1cqi rgba(0,0,0,.5))}
/* Brick */
[data-skin="brick"] .wheel-glow{background:radial-gradient(circle, rgba(255,140,60,.35), transparent 65%); opacity:.6}
[data-skin="brick"] .hub{color:#fff; font:800 4.2cqi/1 var(--font-d); text-shadow:0 .3cqi .6cqi rgba(0,0,0,.6);
  background:radial-gradient(circle at 35% 30%, #a39a90 0%, #7a7168 55%, #4d463f 100%); box-shadow:0 0 0 1.1cqi #d8cfc1, 0 0 0 1.5cqi #8d847a, 0 1.4cqi 3cqi rgba(0,0,0,.6)}
[data-skin="brick"] .sheen{background:radial-gradient(circle, transparent 55%, rgba(0,0,0,.28) 100%)}
[data-skin="brick"] .pointer svg{filter:drop-shadow(0 .8cqi 1cqi rgba(0,0,0,.6))}
/* Racing rim */
[data-skin="racing"] .wheel-glow{background:radial-gradient(circle, rgba(225,6,0,.4), transparent 62%); opacity:.55}
[data-skin="racing"] .hub{color:#111; font:italic 800 4cqi/1 var(--font-d); letter-spacing:-.03em;
  background:radial-gradient(circle at 38% 30%, #ffffff 0%, #c9ced6 38%, #7b828c 80%, #4a4f57 100%);
  box-shadow:0 0 0 .8cqi #2a2d33, 0 0 0 1.1cqi #9aa0a8, 0 1.4cqi 3cqi rgba(0,0,0,.6)}
[data-skin="racing"] .sheen{background:radial-gradient(circle at 32% 22%, rgba(255,255,255,.18), transparent 40%)}
[data-skin="racing"] .pointer{width:12%; left:44%; top:-4.4%}
[data-skin="racing"] .pointer svg{filter:drop-shadow(0 .8cqi 1.2cqi rgba(0,0,0,.6))}
/* Neon */
[data-skin="neon"] .wheel-glow{inset:-12%; -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%); mask-image:radial-gradient(closest-side,#000 70%,transparent 100%); background:conic-gradient(#ff2bd6,#00e5ff,#b6ff00,#ff8a00,#a855f7,#ff2bd6); opacity:.35}
[data-skin="neon"] .hub{background:#07070c; color:#00e5ff; font:700 4.2cqi/1 var(--font-d); text-shadow:0 0 1.2cqi #00e5ff, 0 0 3cqi rgba(0,229,255,.6);
  box-shadow:0 0 0 .5cqi #ff2bd6, 0 0 2.4cqi #ff2bd6, inset 0 0 2cqi rgba(255,43,214,.45)}
[data-skin="neon"] .bulb{fill:#2a2838; transition:fill .1s}
[data-skin="neon"] .bulb.on{fill:#fff; stroke:#00e5ff; stroke-width:6; stroke-opacity:.5}      /* a ring, not a drop-shadow: a filter on a light that switches every 70 ms is re-done on the whole rim each time */
[data-skin="neon"] .pointer svg{filter:drop-shadow(0 0 .8cqi #00e5ff) drop-shadow(0 0 2cqi rgba(0,229,255,.7))}
/* Ship's helm */
[data-skin="helm"] .wheel-glow{background:radial-gradient(circle, rgba(217,164,65,.4), transparent 62%); opacity:.5}
[data-skin="helm"] .hub{color:#3b2405; font:700 4.2cqi/1 Georgia,'Times New Roman',serif;
  background:radial-gradient(circle at 36% 30%, #fff1b8 0%, #e2b252 38%, #a87522 75%, #6e4a12 100%);
  box-shadow:0 0 0 1cqi #5a3417, 0 0 0 1.4cqi #c08a3e, 0 1.4cqi 3cqi rgba(0,0,0,.6)}
[data-skin="helm"] .sheen{background:radial-gradient(circle at 30% 20%, rgba(255,240,200,.16), transparent 40%), radial-gradient(circle, transparent 58%, rgba(30,15,0,.3) 100%)}
[data-skin="helm"] .pointer svg{filter:drop-shadow(0 .8cqi 1cqi rgba(0,0,0,.6))}
/* Galaxy */
[data-skin="galaxy"] .wheel-glow{-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%); mask-image:radial-gradient(closest-side,#000 45%,transparent 100%); background:radial-gradient(circle at 40% 40%, rgba(120,80,255,.55), rgba(255,60,160,.25) 45%, transparent 68%); opacity:.7}
[data-skin="galaxy"] .hub{color:#fff; font:700 4.2cqi/1 var(--font-d); text-shadow:0 .2cqi .8cqi rgba(0,0,0,.6);
  background:radial-gradient(circle at 34% 28%, #ffd59e 0%, #ff7a59 30%, #c2306c 62%, #3b0f5a 100%);
  box-shadow:inset -1.4cqi -1.4cqi 3cqi rgba(0,0,0,.45), 0 0 3cqi rgba(255,120,120,.35)}
[data-skin="galaxy"] .sheen{background:radial-gradient(circle, transparent 60%, rgba(0,0,20,.35) 100%)}
[data-skin="galaxy"] .bulb{fill:rgba(255,255,255,.35); transition:fill .15s}
[data-skin="galaxy"] .bulb.on{fill:#fff; filter:drop-shadow(0 0 4px #fff)}
/* Portal (an original sci-fi ring) */
[data-skin="portal"] .wheel-glow{background:radial-gradient(circle, rgba(0,255,224,.4), rgba(140,60,255,.25) 45%, transparent 68%); opacity:.7}
[data-skin="portal"] .hub{color:#fff; font:700 4.2cqi/1 var(--font-d);
  background:radial-gradient(circle at 50% 50%, #2a7fd6 0%, #123a7a 55%, #081634 100%);
  box-shadow:0 0 0 .6cqi #5a6478, 0 0 0 .9cqi #7df9ff, 0 0 3cqi rgba(125,249,255,.55), inset 0 0 2.4cqi rgba(0,0,0,.6); text-shadow:0 0 1.4cqi rgba(125,249,255,.9)}
[data-skin="portal"] .hub::before{content:""; position:absolute; inset:8%; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent, rgba(160,240,255,.35), transparent 40%, rgba(160,240,255,.25), transparent 75%); animation:vortex 8s linear infinite}
@keyframes vortex{to{transform:rotate(360deg)}}
[data-skin="portal"] .sheen{background:radial-gradient(circle, transparent 70%, rgba(0,10,40,.35) 100%)}
[data-skin="portal"] .bulb{fill:none; stroke:#3a5566; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .12s}
[data-skin="portal"] .bulb.on{stroke:#b8fdff; filter:drop-shadow(0 0 6px #7df9ff)}
[data-skin="portal"] .pointer svg{filter:drop-shadow(0 0 1cqi #00ffe0)}

/* under the wheel */
.firstrun{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 28px 0; padding:8px 8px 8px 16px; border-radius:14px; background:var(--fill3); color:var(--label); font:500 14px/1.4 var(--font)}
.firstrun b{display:inline-grid; place-items:center; width:20px; height:20px; margin-right:2px; border-radius:50%; background:var(--btn, var(--blue)); color:var(--on-btn, #fff); font:700 12px var(--font)}
.firstrun .text-btn{flex:none}
@media (max-width:900px){ .firstrun{margin:4px 16px 0} }
.hint{margin:0; max-width:44ch; color:var(--label2); font-size:14.5px; line-height:1.4; text-align:center; min-height:1.4em}
.btn.spin-main{width:min(100%, 360px); height:56px; border-radius:18px; font-size:19px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 8px 22px rgba(0,0,0,.35)}   /* the main action of the slot machine: the biggest thing under it */
.btn.spin-main:disabled{opacity:.5; cursor:default; box-shadow:none}
.count-note{flex:0 0 100%; margin:-2px 0 0; text-align:center; color:var(--label2); font:500 13px/1.35 var(--font)}
kbd{font:500 12px var(--font); padding:1px 6px; border-radius:6px; background:var(--fill3); color:var(--label)}
.controls{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 18px}
.count-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; color:var(--label2); font:500 13px var(--font)}
.pill-btn{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px 0 10px; border-radius:16px; border:0;
  background:var(--fill3); color:var(--label); font:500 13px var(--font); cursor:pointer; transition:background .15s}
.pill-btn:hover{background:var(--fill2)}
.pill-btn:disabled{opacity:.4; cursor:default}
.pill-btn svg{width:16px; height:16px}
.pill-btn b{font-weight:600}
/* "Choose your wheel": the one loud button under the wheel, ringed like the logo */
@property --cta-a{syntax:'<angle>'; initial-value:0deg; inherits:true}
.skin-cta,.list-cta,.look-btn{position:relative; display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 12px 0 8px; border-radius:24px;
  border:2px solid transparent; color:var(--label); cursor:pointer; text-align:left;
  background:linear-gradient(var(--cta-bg),var(--cta-bg)) padding-box,
    conic-gradient(from var(--cta-a),#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff) border-box;
  animation:ctaTurn 7s linear infinite; transition:transform .15s ease}
.skin-cta::before,.list-cta::before,.look-btn::before{content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--cta-a),#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff);
  filter:blur(12px); opacity:.42; transition:opacity .2s}
@keyframes ctaTurn{to{--cta-a:360deg}}
.skin-cta:hover::before,.list-cta:hover::before,.look-btn:hover::before{opacity:.75}
.skin-cta:hover{transform:translateY(-1px)}
.skin-cta:active{transform:scale(.98)}
.skin-cta:focus-visible{outline:2px solid var(--label); outline-offset:3px}
.skin-cta:disabled{opacity:.4; cursor:default; animation:none; transform:none}
.skin-cta:disabled::before{opacity:0}
.skin-swatch{flex:none; width:30px; height:30px; border-radius:50%; position:relative;
  background:conic-gradient(#0a84ff 0 25%,#30d158 0 50%,#ff9f0a 0 75%,#ff375f 0); box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.skin-swatch::after{content:""; position:absolute; inset:34%; border-radius:50%; background:var(--cta-bg); box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.skin-cta-text{display:flex; flex-direction:column; gap:3px; line-height:1.1; min-width:0}
.skin-cta-text b{font:650 15.5px/1.1 var(--font-d); letter-spacing:-.01em; white-space:nowrap}
.skin-cta-text small{font:italic 500 11.5px/1.1 var(--font); color:var(--label2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* "Choose your list": the same ring as the wheel banner, at the top of the side panel; the number is the open list */
.list-cta{display:flex; flex:none; width:100%; padding:0 7px 0 8px; gap:8px; cursor:default; text-align:left; transition:opacity .2s}
.list-cta{animation:none}                                  /* the ring only turns while the pointer is on it: a second endlessly turning ring costs frames */
.list-cta:hover{animation:ctaTurn 7s linear infinite}
.list-cta::before{opacity:.3}
.list-cta .skin-cta-text{flex:1 1 auto}
.list-cta .skin-cta-text b{overflow:hidden; text-overflow:ellipsis}          /* (the name of the wheel can be long: the three buttons keep their place) */
.list-swatch::after{content:attr(data-n); inset:17%; display:grid; place-items:center; font:700 12.5px/1 var(--font-d); color:#fff; font-variant-numeric:tabular-nums}
.list-cta .seg{flex:none; gap:1px; margin-left:auto}
.list-cta .seg button{min-width:23px; height:30px; padding:0 4px; font-weight:600}
.list-cta.busy{opacity:.55; pointer-events:none}
/* the list banner with the "Choose your look" button beside it */
.panel-top{display:flex; flex:none; align-items:center; gap:8px}
.panel-top .list-cta{flex:1 1 auto; width:auto; min-width:0}
.look-btn{flex:none; align-self:center; justify-content:center; width:42px; height:42px; padding:0; gap:0; border-radius:50%; cursor:pointer; animation:none}
.look-btn:hover{animation:ctaTurn 7s linear infinite}
.look-btn::before{opacity:.3}
.look-btn:active{transform:scale(.96)}
.look-btn:focus-visible{outline:2px solid var(--label); outline-offset:3px}
.look-btn svg{width:20px; height:20px}
.skin-cta-now{flex:none; margin-left:4px; padding:5px 10px; border-radius:12px; background:var(--fill3); font:600 12.5px/1 var(--font); color:var(--label); white-space:nowrap}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
@media (max-width:370px){ .skin-cta-now{display:none} }
@media (max-width:520px){ .list-cta{gap:6px} .list-cta .skin-swatch{width:27px; height:27px} }
@media (max-width:386px){ .list-cta{height:auto; flex-wrap:wrap; padding:7px 8px; row-gap:6px} .list-cta .seg{margin-left:auto} .look-btn{align-self:flex-start} }

/* world clocks: a card for every country somebody has a flag of */
.clocks{width:100%; display:flex; flex-direction:column; align-items:center; gap:7px}
.clocks[hidden]{display:none}
.clock-grid{display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 188px)); justify-content:center; gap:10px; width:100%}
.clock{position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head head" "time wx" "sub wx";
  align-items:center; column-gap:8px; padding:10px 12px 10px 13px; border-radius:16px; background:var(--bg2); overflow:hidden; min-width:0; cursor:default;
  container-type:inline-size}
.clock::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--sky, none); transition:opacity .6s}
.clock.day{--sky:linear-gradient(165deg, rgba(10,132,255,.34), rgba(100,210,255,.07) 75%)}
.clock.dusk{--sky:linear-gradient(165deg, rgba(255,159,10,.28), rgba(191,90,242,.12) 75%)}
.clock.night{--sky:linear-gradient(165deg, rgba(94,92,230,.24), rgba(0,0,0,0) 75%)}
.ck-head{grid-area:head; display:flex; align-items:center; gap:7px; min-width:0; font:600 13px/1.2 var(--font)}
.ck-flag{width:20px; height:15px; flex:none; border-radius:3px; object-fit:cover; box-shadow:0 0 0 .5px rgba(255,255,255,.28)}
.ck-city{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ck-time{grid-area:time; margin-top:4px; font:600 30px/1.05 var(--font-d); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ck-sub{grid-area:sub; margin-top:2px; font:500 11.5px/1.3 var(--font); color:var(--label2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ck-wx{grid-area:wx; align-self:end; display:flex; flex-direction:column; align-items:center; gap:1px; font:600 16px/1.1 var(--font-d); font-variant-numeric:tabular-nums}
.ck-wx[hidden]{display:none}
.ck-ico svg{display:block; width:32px; height:32px}
.clock-credit{font-size:11px; color:var(--label3); text-decoration:none}
.clock-credit:hover{color:var(--label2); text-decoration:underline}

/* segmented control (iOS) */
.seg{display:inline-flex; gap:2px; padding:2px; border-radius:9px; background:var(--fill3)}
.seg button{flex:1; min-width:32px; height:28px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--label);
  font:500 13px var(--font); cursor:pointer; font-variant-numeric:tabular-nums; transition:background .2s, box-shadow .2s; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:6px}
.seg button:hover:not(:disabled):not(.on):not(.active){background:var(--hover)}
.seg button.on,.seg button.active{background:var(--seg-on); color:var(--seg-on-fg, var(--label)); font-weight:600; box-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04)}
.seg button:disabled{opacity:.3; cursor:default}

/* ---------- side panel ---------- */
.panel{position:sticky; top:16px; display:flex; flex-direction:column; gap:12px; padding:14px;
  min-height:460px; height:calc(100vh - 104px); max-height:860px; background:var(--bg2); border-radius:22px; border:.5px solid var(--edge)}
.tabs{display:flex; width:100%}
.badge{font-size:12px; font-weight:500; color:var(--label2); font-variant-numeric:tabular-nums}
.tab.active .badge{color:var(--label)}
.tab[hidden]{display:none}
/* history of changes */
.hist-list{list-style:none; margin:0; padding:0 0 6px; overflow:auto; flex:1; min-height:0; border-radius:12px; background:var(--bg3)}
.hist-list:empty{display:none}
.hist-day{position:sticky; top:0; z-index:1; padding:9px 12px 5px; background:var(--bg3); color:var(--label2); font:600 12.5px var(--font)}
.hist-row{display:flex; gap:10px; padding:6px 12px; font-size:13.5px; line-height:1.4}
.hist-row time{flex:none; width:40px; color:var(--label2); font-size:12.5px; font-variant-numeric:tabular-nums; padding-top:1px}
.hist-row b{font-weight:600}
.hist-row .hv{color:var(--label2)}
.hist-bulk{align-items:flex-start}
.hist-bulk details{flex:1; min-width:0}
.hist-bulk summary{cursor:pointer; list-style:none}
.hist-bulk summary::-webkit-details-marker{display:none}
.hist-bulk summary::after{content:" ▸"; color:var(--label2)}
.hist-bulk details[open] summary::after{content:" ▾"}
.hist-bulk ul{list-style:none; margin:4px 0 2px; padding:0; color:var(--label2); font-size:12.5px; line-height:1.5}
.hist-undo{flex:none; height:28px; padding:0 11px; font-size:12.5px}
.hist-undo.danger{background:var(--red); color:#fff}
.tabpane{flex:1; display:flex; flex-direction:column; gap:10px; min-height:0}

/* people list */
.list-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px}
.list-info{font:500 13px var(--font); color:var(--label2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.list-tools{display:flex; align-items:center; gap:6px}
.tool{width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:0; background:var(--fill3); color:var(--label); cursor:pointer; transition:background .15s}
.tool:hover{background:var(--fill2)}
.tool:disabled{opacity:.3; cursor:default}
.tool svg{width:15px; height:15px}
.text-btn{border:0; background:none; color:var(--blue); font:500 15px var(--font); cursor:pointer; padding:5px 6px; border-radius:8px}
.text-btn:hover{background:color-mix(in srgb, var(--blue) 12%, transparent)}
.text-btn:disabled{opacity:.35; cursor:default; background:none}
.roster{flex:1; min-height:120px; overflow:auto; border-radius:12px; background:var(--bg3)}
.roster:empty{display:none}
.row{position:relative; display:flex; align-items:center; gap:10px; padding:7px 12px 7px 10px}
.row + .row::before{content:""; position:absolute; left:62px; right:0; top:0; height:.5px; background:var(--sep)}
.row-main{flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; font:inherit}
.row .av-wrap{width:40px; height:40px; transition:filter .25s, opacity .25s}
.row .av-wrap svg{display:block; width:100%; height:100%; border-radius:50%}
.row-main:hover .av-wrap svg{box-shadow:0 0 0 2px var(--blue)}
.row.pop .av-wrap svg{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.6) rotate(-25deg)}100%{transform:none}}
.row-text{min-width:0; display:flex; flex-direction:column; line-height:1.25}
.row-name{font:400 16px/1.3 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .25s}
.row-sub{font-size:12.5px; color:var(--label2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-sub:empty{display:none}
.row.off .av-wrap{filter:grayscale(1); opacity:.42}
.row.off .row-name{color:var(--label3)}
.row.off .row-sub{color:var(--label3)}
.crown{position:absolute; left:-10%; top:-16%; font-size:15px; line-height:1; transform:rotate(-18deg); filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); pointer-events:none}
/* iOS switch */
.switch{position:relative; flex:none; width:51px; height:31px}
.switch input{position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.switch i{position:absolute; inset:0; border-radius:16px; background:rgba(120,120,128,.32); transition:background .25s}
.switch i::after{content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition:transform .28s cubic-bezier(.3,.7,.4,1.05)}
.switch input:checked + i{background:var(--green)}
.switch input:checked + i::after{transform:translateX(20px)}
.switch input:focus-visible + i{outline:2px solid var(--blue); outline-offset:2px}
.switch input:disabled{cursor:default}
.switch input:disabled + i{opacity:.5}
.add-row{display:flex; align-items:center; gap:10px; padding:5px 6px 5px 12px; border-radius:12px; background:var(--bg3)}
.add-ic{flex:none; width:22px; height:22px; border-radius:50%; background:var(--on, var(--green)); color:var(--on-fg, #fff); display:grid; place-items:center; font:600 18px/1 var(--font)}
.add-row input{flex:1; min-width:0; border:0; background:none; outline:none; color:var(--label); font:400 16px var(--font); padding:7px 0}
.add-row input::placeholder{color:var(--label3)}
textarea{flex:1; min-height:200px; resize:none; width:100%; background:var(--bg3); border:0; border-radius:12px; color:var(--label);
  padding:12px 16px; font:400 16px/1.7 var(--font); outline:none}
textarea:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 60%, transparent)}
textarea[readonly]{opacity:.6}
.help{margin:0; color:var(--label2); font-size:12.5px; padding:0 2px}
.copy-from{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:2px}
.copy-from .cf-l{color:var(--label2); font-size:12.5px}
.copy-from button{border:0; border-radius:999px; background:var(--fill3); color:var(--label); font:500 12.5px var(--font); padding:6px 12px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.copy-from button:hover:not(:disabled){background:var(--fill2)}
.copy-from button:disabled{opacity:.5; cursor:default}

/* results & stats rows */
#resultsList,.stat-list{list-style:none; margin:0; padding:0; overflow:auto; flex:1; min-height:0; border-radius:12px; background:var(--bg3)}
#resultsList:empty,.stat-list:empty{display:none}
#resultsList li,.st-row{position:relative; display:flex; align-items:center; gap:10px; padding:8px 12px}
#resultsList li + li::before,.st-row + .st-row::before{content:""; position:absolute; left:52px; right:0; top:0; height:.5px; background:var(--sep)}
.res-num{width:20px; color:var(--label3); font-size:12px; font-variant-numeric:tabular-nums; text-align:right}
.res-av{position:relative; flex:none; width:32px; height:32px}
.res-av .av-wrap{width:100%; height:100%}
.res-av svg{width:100%; height:100%; display:block; border-radius:50%}
.res-main{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.res-name{font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res-day{font-size:12px; color:var(--label2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res-day:empty{display:none}
.res-time{color:var(--label2); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.res-more{justify-content:center; font-size:12px; color:var(--label2)}
.res-del{flex:none; min-width:28px; height:28px; display:grid; place-items:center; margin-right:-4px; padding:0; border:0; border-radius:14px;
  background:transparent; color:var(--label3); cursor:pointer; font:600 13px var(--font); white-space:nowrap; transition:background .15s, color .15s}
.res-del:hover{background:rgba(255,69,58,.16); color:var(--red)}
.res-del svg{width:13px; height:13px}
#resultsList li.confirm{background:rgba(255,69,58,.1)}
#resultsList li.confirm .res-del{padding:0 12px; background:var(--red); color:#fff}
#resultsList li.confirm .res-time{display:none}
.empty{flex:1; display:grid; place-items:center; color:var(--label2); font-size:14px; text-align:center; padding:20px}
.toolbar{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border:0; border-radius:10px; background:var(--fill3);
  color:var(--label); font:500 13.5px var(--font); cursor:pointer; transition:background .15s}
.chip:hover{background:var(--fill2)}
.chip:disabled{opacity:.4; cursor:not-allowed}
.chip svg{width:15px; height:15px}
.chip.danger{color:var(--red)}
.stat-seg{display:flex; width:100%}
.stat-nav{display:flex; align-items:center; gap:8px}
.stat-title{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; line-height:1.25}
.stat-title b{font:700 17px var(--font-d); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.stat-title span{font-size:12px; color:var(--label2)}
.st-row{padding:8px 12px 8px 8px}
.st-row + .st-row::before{left:76px}
.st-row.r1{background:linear-gradient(90deg, rgba(255,214,10,.13), transparent 70%)}
.st-row.gone .res-av,.st-row.gone .st-name{opacity:.5}
.st-rank{flex:none; width:28px; text-align:center; font:600 14px var(--font-d); color:var(--label2); font-variant-numeric:tabular-nums}
.st-rank.medal{font-size:21px; line-height:1}
.st-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.st-name{font-weight:500; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-bar{height:5px; border-radius:99px; background:var(--fill4); overflow:hidden}
.st-bar i{display:block; height:100%; border-radius:inherit; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.st-count{flex:none; min-width:34px; text-align:right; font-size:11.5px; color:var(--label2); line-height:1.05}
.st-count b{display:block; font:700 19px var(--font-d); color:var(--label); font-variant-numeric:tabular-nums}
.stat-wait{margin:0; font-size:12.5px; line-height:1.45; color:var(--label2)}
.stat-wait:empty,.stat-msg:empty{display:none}
.stat-msg{margin:0; font-size:12.5px; color:var(--green)}
.stat-msg.err{color:var(--red)}
.stat-foot{display:flex; align-items:center; justify-content:space-between; gap:8px}
.stat-sum{min-width:0; font-size:12.5px; color:var(--label2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.panel-foot{display:flex; justify-content:space-between; align-items:center; color:var(--label2); font-size:12px; padding:2px 4px 0}
.sync{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sync[data-state="ok"]{color:var(--green)}
.sync[data-state="offline"],.sync[data-state="rules"],.sync[data-state="listrules"],.sync[data-state="wheelrules"],.sync[data-state="auth"]{color:var(--orange); font-weight:600; line-height:1.35; white-space:normal}   /* a warning (nothing is shared) is read whole, not cut off, and stands out from the quiet "saved" lines */
.ver{opacity:.45; font-variant-numeric:tabular-nums; user-select:none; -webkit-user-select:none; padding:4px 0 4px 10px}

/* flags */
.av-wrap{position:relative; display:block; flex:none}
.flag-badge{position:absolute; right:-6%; bottom:-4%; width:44%; aspect-ratio:1; border-radius:50%; overflow:hidden; display:block;
  background:#fff; box-shadow:0 0 0 2px var(--bg3), 0 1px 3px rgba(0,0,0,.4); pointer-events:none}
.flag-badge img{display:block; width:100%; height:100%; object-fit:cover}
.flag-rect{display:inline-block; height:.72em; width:auto; aspect-ratio:4/3; border-radius:.12em; vertical-align:-.04em; object-fit:cover;
  box-shadow:0 0 0 .5px rgba(255,255,255,.3)}

/* team editing: who is editing what, and short messages */
.lock-note{margin:0; display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:12px; background:rgba(255,159,10,.13); color:var(--warn, #ffd08a); font:500 13px/1.35 var(--font)}
.lock-note[hidden]{display:none}
.lock-note::before,.row-edit::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--orange); animation:lockPulse 1.4s ease-in-out infinite}
@keyframes lockPulse{50%{opacity:.3}}
.tool.locked,.text-btn.locked{opacity:.38}
.row-edit{display:none; align-items:center; gap:6px; font-size:12.5px; color:var(--warn, #ffd08a); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row.locked .row-edit{display:flex}
.row.locked .row-sub{display:none}
.row.locked .av-wrap svg{box-shadow:0 0 0 2px var(--orange)}
#title[readonly]{cursor:not-allowed; opacity:.75}
.me-btn{margin-left:auto; border:0; background:none; color:var(--label2); font:500 12px var(--font); cursor:pointer; padding:4px 6px; border-radius:8px; white-space:nowrap}
.me-btn:hover{background:var(--fill4); color:var(--label)}
.me-btn[hidden]{display:none}
.toast{position:fixed; left:50%; bottom:24px; z-index:80; width:max-content; max-width:min(480px, calc(100vw - 32px)); padding:11px 16px; border-radius:14px;
  background:#2c2c2e; color:var(--label); font:500 14px/1.4 var(--font); text-align:center; box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.14);
  transform:translate(-50%, 14px); opacity:0; pointer-events:none; transition:opacity .2s, transform .25s}
.toast.show{opacity:1; transform:translate(-50%, 0)}
.toast.act{pointer-events:auto}
.toast-act{margin-left:12px; padding:5px 12px; border:0; border-radius:9px; background:rgba(255,255,255,.16); color:inherit; font:700 13px var(--font); cursor:pointer}
.toast-act:hover{background:rgba(255,255,255,.26)}
.toast-act:focus-visible{outline:2px solid currentColor; outline-offset:2px}
/* a newer version of the page is on the server */
.upd{position:fixed; top:12px; left:50%; z-index:79; display:flex; align-items:center; gap:12px; width:max-content; max-width:min(560px, calc(100vw - 24px)); padding:7px 7px 7px 16px; border-radius:999px;
  background:#2c2c2e; color:var(--label); font:500 14px/1.35 var(--font); box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.14);
  transform:translate(-50%, -14px); opacity:0; transition:opacity .2s, transform .25s}
.upd.show{opacity:1; transform:translate(-50%, 0)}
.upd[hidden]{display:none}
.upd button{flex:none; border:0; border-radius:999px; padding:8px 16px; background:var(--blue); color:#fff; font:600 14px var(--font); cursor:pointer; white-space:nowrap}
.upd button:hover{filter:brightness(1.12)}
.upd button:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media (max-width:520px){ .upd{border-radius:20px} }
/* a window nobody has touched for 10 minutes: lightly greyed out, and nothing works until it is refreshed */
.stale{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(108,108,116,.3); -webkit-backdrop-filter:grayscale(.8) blur(1px); backdrop-filter:grayscale(.8) blur(1px); opacity:0; transition:opacity .6s}
.stale.show{opacity:1}
.stale[hidden]{display:none}
.stale-card{display:flex; flex-direction:column; align-items:center; gap:6px; width:min(360px, 100%); padding:22px 24px 18px; border-radius:20px; text-align:center;
  background:#2c2c2e; box-shadow:0 18px 56px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.14)}
.stale-card h2{margin:0; font:700 19px/1.25 var(--font-d)}
.stale-card p{margin:0 0 10px; color:var(--label2); font:400 14px/1.45 var(--font)}
.stale-card button{border:0; border-radius:999px; padding:11px 30px; background:var(--blue); color:#fff; font:600 16px var(--font); cursor:pointer}
.stale-card button:hover{filter:brightness(1.12)}
.stale-card button:focus-visible{outline:2px solid #fff; outline-offset:3px}
.stale-card button:disabled{opacity:.6; cursor:default}
.stale-card small{margin-top:4px; color:var(--label3); font:500 12px var(--font)}
/* who is this? a card that opens when the mouse rests on an avatar */
.av-tip{position:fixed; left:0; top:0; z-index:85; width:max-content; max-width:min(320px, calc(100vw - 24px)); padding:12px 14px 13px; border-radius:14px;
  background:#2c2c2e; color:var(--label); box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.14);
  pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .14s, transform .14s}
.av-tip.show{opacity:1; transform:none}
.av-tip[hidden]{display:none}
.tip-who{font:700 15px/1.25 var(--font-d); overflow-wrap:anywhere}
.tip-av{margin-top:1px; color:var(--teal); font:600 12.5px/1.3 var(--font)}
.tip-bio{margin:7px 0 0; color:rgba(235,235,245,.8); font:400 13px/1.45 var(--font)}
.tip-bio[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .stale,.av-tip{transition:none} }
.who-sheet{width:min(520px,100%)}
.who-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; overflow:auto; padding:4px 18px 6px}
.who{display:flex; align-items:center; gap:10px; min-width:0; padding:7px 10px; border:0; border-radius:12px; background:var(--bg3); color:var(--label);
  font:500 14px var(--font); text-align:left; cursor:pointer}
.who:hover{background:var(--bg4)}
.who.sel{box-shadow:inset 0 0 0 2px var(--blue)}
.who svg{flex:none; width:32px; height:32px; display:block; border-radius:50%}
.who .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 14px 14px 18px}
.who-later{min-width:0; color:var(--label2); font:400 12px/1.35 var(--font)}
.who-later[hidden]{display:none}
.who-foot .text-btn{flex:none; margin-left:auto}
.who.taken{cursor:not-allowed; background:var(--fill4)}
.who.taken svg,.who.taken .nm{opacity:.38}
.who.taken svg{filter:grayscale(1)}
.who-txt{min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.2}
.who-here{display:flex; align-items:center; gap:5px; font:600 11px var(--font); color:var(--green); white-space:nowrap}
.who-here::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green)}
.who-note{margin:-2px 18px 10px; padding:8px 12px; border-radius:12px; background:rgba(255,159,10,.13); color:var(--warn, #ffd08a); font:500 13px/1.35 var(--font)}
.who-note[hidden]{display:none}
.who-add{display:flex; align-items:center; gap:6px; margin:10px 18px 0; padding:2px 6px 2px 14px; border-radius:12px; background:var(--bg3)}
.who-add input{flex:1; min-width:0; border:0; background:none; color:var(--label); font:400 15px var(--font); padding:10px 0; outline:none}
.who-add input::placeholder{color:var(--label3)}
.who-step{display:flex; flex-direction:column; min-height:0}
.who-step[hidden],.hello[hidden]{display:none}
.hello{display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 22px 24px}
.hello-av{width:96px; height:96px; margin-bottom:12px}
.hello-av .av-wrap{width:100%; height:100%}
.hello-av svg{display:block; width:100%; height:100%; border-radius:50%}
.hello h3{margin:0 0 6px; font:700 24px/1.2 var(--font-d); letter-spacing:-.02em}
.hello p{margin:0 0 16px; max-width:34ch; color:var(--label2); font-size:14px; line-height:1.45}
.hello-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:18px}
.hello-go{height:46px; padding:0 28px; border:0; border-radius:23px; background:var(--btn, var(--blue)); color:var(--on-btn, #fff); font:650 16px var(--font-d); cursor:pointer}
.hello-go:hover{filter:brightness(1.1)}
.hello-go:focus-visible{outline:2px solid var(--label); outline-offset:3px}
.greet{position:fixed; inset:0; z-index:55; display:grid; place-items:center; padding:24px 16px; cursor:pointer;
  background:radial-gradient(60% 50% at 50% 42%, rgba(255,159,10,.22), transparent 70%), rgba(0,0,0,.76);
  opacity:0; transition:opacity .3s}
.greet[hidden]{display:none}
.greet.show{opacity:1}
.greet-in{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; max-width:min(680px, 100%); cursor:default}
.greet-av{width:min(230px, 52vw); aspect-ratio:400/520; position:relative; isolation:isolate}
.greet-av.d3::before{content:""; position:absolute; z-index:-1; left:-4%; right:-4%; bottom:-3%; height:11%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent)}
.greet-av:not(.d3){width:min(150px, 40vw); aspect-ratio:1; margin-bottom:8px}
.greet-av svg{display:block; width:100%; height:100%; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 20px 50px rgba(0,0,0,.5)}
.greet-av .d3-media{display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%}
.greet-text{margin:0; font:800 clamp(34px, 7vw, 64px)/1.18 var(--font-d); letter-spacing:normal; overflow-wrap:anywhere}
.greet-text .gt{background:linear-gradient(100deg, #ffd60a, #ff9f0a 45%, #ff375f); -webkit-background-clip:text; background-clip:text; color:transparent}
.greet-joke{margin:0; padding:9px 16px; border-radius:999px; background:var(--fill3); color:var(--label); font:500 15px/1.4 var(--font); max-width:100%}
.greet .hello-go{margin-top:6px}
.greet.show .greet-av{animation:greetPop .7s cubic-bezier(.2,1.5,.4,1) both}
.greet.show .greet-text{animation:greetUp .6s .12s cubic-bezier(.2,1.2,.4,1) both}
.greet.show .greet-joke,.greet.show .hello-go{animation:greetUp .6s .3s ease both}
@keyframes greetPop{from{opacity:0; transform:scale(.6) translateY(30px)}}
@keyframes greetUp{from{opacity:0; transform:translateY(16px)}}
.row.here .av-wrap::before{content:""; position:absolute; left:-1px; top:-1px; z-index:1; width:11px; height:11px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 2px var(--bg3)}

/* ---------- dialogs ---------- */
.modal-backdrop{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(0,0,0,.7); opacity:0; transition:opacity .25s}
.modal-backdrop.show{opacity:1}
.modal{position:relative; overflow:hidden; width:min(540px,100%); text-align:center; background:var(--bg2); border-radius:26px;
  border:.5px solid var(--edge2); box-shadow:0 30px 90px rgba(0,0,0,.7);
  transform:translateY(18px) scale(.97); transition:transform .45s cubic-bezier(.2,1.25,.4,1)}
.modal-backdrop.show .modal{transform:none}
.win-modal{max-height:calc(100vh - 32px); overflow-y:auto}

/* dance stage */
.stage{--dw:158px; --n:1; position:relative; height:250px; overflow:hidden; background:#050507}
.aurora{position:absolute; inset:0; overflow:hidden}
.aurora i{position:absolute; width:78%; aspect-ratio:1; border-radius:50%; opacity:.6; animation:drift 9s ease-in-out infinite alternate;
  background:radial-gradient(closest-side, var(--c) 30%, transparent)}
.aurora i:nth-child(1){left:-20%; top:-42%; --c:var(--glow, #5e5ce6)}
.aurora i:nth-child(2){right:-24%; top:-34%; --c:#5e5ce6; animation-delay:-3s; animation-duration:11s}
.aurora i:nth-child(3){left:14%; bottom:-66%; --c:#ff375f; opacity:.4; animation-delay:-6s; animation-duration:13s}
@keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(14%,12%) scale(1.25)}}
.spot{position:absolute; left:50%; top:-10%; width:70%; height:130%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(255,255,255,.16), transparent 70%)}
.floor{position:absolute; left:0; right:0; bottom:0; height:80px; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.08))}
.dancer{position:absolute; z-index:2; left:50%; bottom:22px; width:min(var(--dw), calc(100% / var(--n) * .94)); aspect-ratio:200/260; transform:translateX(-50%)}
.multi .dancer{bottom:52px; width:min(calc(var(--dw) * .8), calc(100% / var(--n) * .94))}
.dancer.enter{animation:popin .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes popin{from{opacity:0; transform:translateX(-50%) translateY(40px) scale(.5)} to{opacity:1; transform:translateX(-50%)}}
.dancer svg{display:block; width:100%; height:100%; overflow:visible}
/* 3D dancers: a looping video (or animated picture) with a transparent background */
.dancer.d3 .d3-media{position:absolute; left:-21%; bottom:-3%; width:142%; height:118%; display:block; object-fit:contain; object-position:50% 100%; pointer-events:none}
/* the poses change in steps, so the whole figure also gives a small squash-and-hop on every beat: that part is smooth */
.dancer.d3 .d3-media{transform-origin:50% 100%; animation:beatHop var(--b) ease-in-out infinite}
@keyframes beatHop{0%,100%{transform:scale(1.015,.975)} 50%{transform:translateY(-2.5%) scale(.99,1.015)}}
@media (prefers-reduced-motion:reduce){ .dancer.d3 .d3-media{animation:none} }
/* a choreography is drawn on a canvas that is 35% wider and 21% taller than the picture, so there is room for hops and slides: the figure stays the same size */
.dancer.d3 .d3-spr{left:-45.85%; width:191.7%; height:142.96%; animation:none}
.greet-av .d3-spr{position:absolute; left:-17.5%; bottom:0; width:135%; height:121.15%}
.pv-stage>.d3-spr{position:absolute; left:-17.5%; bottom:0; width:135%; height:121.15%}
.dancer.d3 .d3-flag{position:absolute; left:2%; bottom:6%; height:16%; max-height:22px; border-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.5)}
.multi .dancer.d3 .d3-flag{display:none}
.tag{position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); max-width:calc(100% + 14px); display:flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px; background:rgba(44,44,46,.86);
  border:.5px solid rgba(255,255,255,.14); font:600 12px/1.2 var(--font); color:#fff; white-space:nowrap}
.tag b{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.tag .flag-rect{height:11px; flex:none}

/* next working day, as a calendar tile */
.day-card{position:relative; z-index:4; display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 40px); margin:-34px auto 0;
  padding:8px 20px 8px 8px; border-radius:20px; text-align:left; background:rgba(44,44,46,.88);
  border:.5px solid rgba(255,255,255,.12); box-shadow:0 12px 34px rgba(0,0,0,.5)}
.cal{flex:none; width:52px; height:52px; border-radius:12px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cal-m{color:#ff3b30; font:600 10px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; margin-top:2px}
.cal-d{color:#000; font:400 28px/1 var(--font-d); letter-spacing:-.03em; margin-top:2px}
.day-text{display:flex; flex-direction:column; min-width:0}
.day-label{font:500 12px var(--font); color:var(--label2)}
.day-name{font:700 19px/1.2 var(--font-d); letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.modal-body{padding:16px 24px 22px}
.modal-label{margin:0 0 2px; color:var(--yellow); font:600 15px var(--font)}
.win-name{margin:0; font:800 clamp(34px,6vw,54px)/1.06 var(--font-d); letter-spacing:-.03em; word-break:break-word}
.win-name .flag-rect{margin-right:.2em}
.multi .win-name{font-size:clamp(24px,4.4vw,36px); line-height:1.2}
.multi .win-name .flag-rect{margin-right:.16em}
.win-stat{display:inline-block; margin:10px 0 0; padding:5px 13px; border-radius:99px; background:rgba(255,214,10,.14); color:var(--yellow); font:600 13.5px/1.3 var(--font)}
.move{margin:6px 0 14px; color:var(--label2); font-size:13px}
.joke{display:flex; align-items:flex-start; gap:12px; width:100%; margin:0 0 16px; padding:13px 14px 13px 16px; text-align:left;
  background:var(--bg3); border:0; border-radius:14px; cursor:pointer; font:400 16px/1.42 var(--font); color:var(--label); transition:background .15s}
.joke:hover{background:var(--bg4)}
.joke span{flex:1}
.joke svg{flex:none; width:17px; height:17px; margin-top:2px; color:var(--blue); transition:transform .3s}
.joke:hover svg{transform:rotate(90deg)}
.joke.swap span{animation:jokeIn .35s ease}
@keyframes jokeIn{from{opacity:0; transform:translateY(6px)}}
.modal-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px}
.btn{white-space:nowrap; height:44px; border:0; border-radius:12px; padding:0 18px; font:600 15px var(--font); cursor:pointer; transition:filter .15s, transform .15s, background .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--fill3); color:var(--label)}
.btn.ghost:hover{background:var(--fill2)}
.btn.primary{background:var(--btn, var(--blue)); color:var(--on-btn, #fff)}
.btn.primary:hover{filter:brightness(1.1)}
.btn svg{width:16px; height:16px}
.copy-msg{flex:1 0 100%; margin:0 0 2px; text-align:right; font-size:13.5px; color:var(--label2)}
.copy-msg.ok{color:var(--green)}
.copy-msg.err{color:var(--red)}
#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60}

/* avatar & flag picker, wheel styles */
.picker,.sheet{width:min(660px,100%); max-height:min(88vh,780px); display:flex; flex-direction:column; text-align:left}
#picker{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
.picker{--pv:clamp(196px, 31vh, 300px); width:min(880px,100%); max-height:none; height:min(calc(100vh - 32px), 820px)}
@supports (height:100dvh){ .picker{--pv:clamp(196px, 31dvh, 300px); height:min(calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))), 820px)} }
@media (max-height:699px){ .picker{--pv:138px} }
@media (max-height:519px){ .picker{--pv:60px} }
.picker-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 10px}
.picker-head h3{margin:0; font:700 20px/1.2 var(--font-d); letter-spacing:-.015em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pick-who{display:flex; align-items:center; gap:12px; min-width:0}
.pick-preview{width:44px; height:44px}
.pick-preview svg{display:block; width:100%; height:100%; border-radius:50%}
.picker .tabs{margin:0 18px 6px; width:auto}
.picker-body{flex:1 1 auto; min-height:0; overflow:auto; padding:0 18px 18px}
.pick-sec h4{margin:16px 2px 8px; font:600 13px var(--font); color:var(--label2); text-transform:uppercase; letter-spacing:.02em}
/* ---- avatar picker: live preview, search, pack chips, round portraits ----
   Every pack has one hand-picked hue (see PACKS in the script) that tints its ring, its chip and the preview glow. */
.pk,.pv,.pk-it,.pk-chip,.pk-sec{--h:210; --c:1; --ra:hsl(var(--h) calc(78% * var(--c)) 62%)}
.picker-body.pk{display:flex; flex-direction:column; overflow:hidden; padding:0; position:relative}
.pv{position:relative; flex:none; display:flex; flex-direction:column; align-items:center; height:var(--pv); margin:2px 16px 0; padding:10px 12px;
  border-radius:22px; overflow:hidden; isolation:isolate; background:#07070b; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
.pv::before{content:""; position:absolute; z-index:-1; inset:0;
  background:radial-gradient(62% 64% at 50% 40%, color-mix(in srgb, var(--ra) 46%, transparent), transparent 72%),
             radial-gradient(46% 52% at 90% 4%, color-mix(in srgb, hsl(calc(var(--h) + 55) 90% 60%) 24%, transparent), transparent 70%)}
.pv::after{content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg, transparent, rgba(255,255,255,.07))}
.pv-stage{flex:none; position:relative; isolation:isolate; display:grid; place-items:center; height:calc(var(--pv) - 20px - 62px); aspect-ratio:480/520; transition:opacity .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.pv-stage::before{content:""; position:absolute; z-index:-1; left:12%; right:12%; bottom:1%; height:9%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent)}
.pv-stage.cyc{cursor:pointer}
.pv.wait .pv-stage{opacity:.35}
.pv-stage>*{display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; animation:pvIn .3s ease both}
.pv-stage>.pk-av{width:auto; height:min(100%, 190px); aspect-ratio:1; margin:auto; filter:none}
@keyframes pvIn{from{opacity:0; transform:translateY(6px) scale(.97)}}
.pv-txt{width:100%; min-width:0; text-align:center; margin-top:auto}
.pv-name{margin:0; font:800 clamp(22px,6.4vw,28px)/1.1 var(--font-d); letter-spacing:-.005em; text-transform:uppercase; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-pack{display:flex; align-items:center; justify-content:center; gap:7px; margin:3px 0 0; font:600 13px/1.25 var(--font); color:var(--ra)}
.pv-pack i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--ra); box-shadow:0 0 9px var(--ra)}
.pv-pack small{font:500 12px var(--font); color:var(--orange)}
.pv-dance{position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 20px); height:28px; padding:0 9px 0 12px; border:0; border-radius:14px;
  background:rgba(24,24,30,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14); color:var(--label); font:600 12px var(--font); cursor:pointer; touch-action:manipulation; transition:background .15s}
.pv-dance::after{content:""; position:absolute; inset:-8px}
.pv-dance:hover{background:rgba(70,70,80,.6)}
.pv-dance span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-dance em{font-style:normal; color:var(--label2); font-variant-numeric:tabular-nums}
.pv-dance svg{width:13px; height:13px; flex:none}
.pv-dance:disabled{cursor:default}
.pv-dance:disabled svg{display:none}
.pk-tools{flex:none; padding:8px 0 0}
.pk-search{margin:0 16px 4px}
.picker .pk-search input{width:100%; height:40px}
.pk-chips{position:relative; display:flex; gap:8px; margin:0; padding:5px 16px 9px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%)}
.pk-chips::-webkit-scrollbar{display:none}
.pk-chips::after{content:""; flex:none; width:12px}
.pk-chip{position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:0; border-radius:17px; background:var(--fill3); color:var(--label);
  font:600 13px var(--font); white-space:nowrap; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .18s, box-shadow .18s}
.pk-chip::before{content:""; position:absolute; inset:-5px -3px}
.pk-chip i{flex:none; width:8px; height:8px; margin-left:-3px; border-radius:50%; background:var(--ra); box-shadow:0 0 8px color-mix(in srgb, var(--ra) 80%, transparent)}
@media (hover:hover){ .pk-chip:hover{background:var(--fill2)} }
.pk-chip[aria-selected="true"]{color:#fff; background:hsl(var(--h) calc(55% * var(--c)) 33%); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ra) 85%, transparent)}
.pk-chip.all[aria-selected="true"]{background:var(--seg-on); color:var(--seg-on-fg, var(--label)); box-shadow:none}
.pk-scroll{position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 12px 18px; scroll-padding:40px 0 20px}
#picker.touch .pk-scroll{padding-bottom:88px; scroll-padding-bottom:88px}
.pk-sec{margin:0}
.pk-h{position:sticky; top:0; z-index:2; display:flex; align-items:baseline; gap:8px; margin:0; padding:12px 6px 6px; font:800 11.5px/1.2 var(--font-d); letter-spacing:.1em; text-transform:uppercase; color:var(--ra);
  background:var(--bg2)}
.pk-h::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px; background:linear-gradient(var(--bg2), transparent); pointer-events:none}
.pk-h em{font-style:normal; font-weight:600; letter-spacing:.02em; color:var(--label3)}
.pk-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; padding-bottom:6px}
@media (min-width:520px){ .pk-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))} }
.pk-it{display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; min-height:44px; padding:8px 2px 9px; border:0; border-radius:18px; background:transparent; color:var(--label);
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .18s, box-shadow .18s}
.pk-av{position:relative; display:block; flex:none; width:min(80%,92px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(100% 100% at 50% 18%, hsl(var(--h) calc(48% * var(--c)) 36%), hsl(var(--h) calc(54% * var(--c)) 14%));
  box-shadow:0 0 0 2px var(--ra);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ra) 42%, transparent), 0 0 18px color-mix(in srgb, var(--ra) 34%, transparent);
  transition:box-shadow .2s, transform .28s cubic-bezier(.2,1.4,.4,1)}
.pk-pic{display:block; width:100%; height:100%; border-radius:50%; overflow:hidden}
.pk-pic>*{display:block; width:100%; height:100%; object-fit:cover}
.pk-nm.long{font-size:9.5px; letter-spacing:0}
.pk-nm{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-width:100%; overflow:hidden; overflow-wrap:anywhere; text-align:center; text-transform:uppercase;
  font:800 11.5px/1.18 var(--font-d); letter-spacing:.02em}
@media (hover:hover){ .pk-it:hover{background:var(--fill4)} }
.pk-it:focus-visible{outline-offset:-3px}
.pk-it.hl .pk-av{transform:scale(1.07); box-shadow:0 0 0 3px var(--ra), 0 0 30px color-mix(in srgb, var(--ra) 60%, transparent)}
.pk-it.sel{background:color-mix(in srgb, var(--blue) 14%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 55%, transparent)}
.pk-it.used .pk-pic{opacity:.55}
.pk-ck{position:absolute; top:-3px; right:-3px; width:24px; height:24px; padding:5px; border-radius:50%; background:var(--btn, var(--blue)); color:var(--on-btn, #fff); box-shadow:0 0 0 2.5px var(--bg2);
  transform:scale(0); transition:transform .3s cubic-bezier(.2,1.7,.4,1)}
.pk-it.sel .pk-ck{transform:scale(1)}
.pk-it.pop .pk-av{animation:pkPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes pkPop{0%{transform:scale(1)} 45%{transform:scale(1.19)} 100%{transform:scale(1.07)}}
.pk-empty{padding:36px 16px 20px; text-align:center; color:var(--label2); font:400 14.5px/1.45 var(--font)}
.pk-empty b{display:block; margin-bottom:4px; color:var(--label); font:700 17px var(--font-d); overflow-wrap:anywhere}
.pk-empty .btn{margin-top:14px}
.pk-use{position:absolute; left:50%; bottom:14px; z-index:5; display:none; align-items:center; justify-content:center; gap:8px; max-width:calc(100% - 32px); height:48px; padding:0 24px; border:0; border-radius:24px;
  background:var(--btn, var(--blue)); color:var(--on-btn, #fff); font:700 16px var(--font-d); white-space:nowrap; cursor:pointer; touch-action:manipulation; box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.22);
  opacity:0; visibility:hidden; transform:translate(-50%,16px) scale(.96); transition:opacity .2s, transform .3s cubic-bezier(.2,1.4,.4,1), visibility 0s .3s}
.pk-use span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.pk-use svg{flex:none; width:18px; height:18px}
#picker.touch .pk-use{display:inline-flex}
#picker.touch .pk-use.on{opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s}
.picker .icon-btn::after{content:""; position:absolute; inset:-4px}
/* wide or short: the preview moves beside its text */
@media (min-width:560px),(max-height:699px){
  .pv{flex-direction:row; align-items:center; justify-content:center; gap:clamp(14px,4vw,48px); padding:8px 16px}
  .pv-stage{height:calc(var(--pv) - 16px)}
  .pv-stage>.pk-av{height:min(100%, 190px)}
  .pv-txt{flex:0 1 auto; max-width:min(100%,440px); margin:0; text-align:left}
  .pv-name{white-space:normal; overflow-wrap:anywhere; font-size:clamp(20px,3.6vw,38px); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
  .pv-pack{justify-content:flex-start; margin-top:6px}
  .pv-dance{position:relative; top:auto; right:auto; margin-top:12px}
}
@media (max-width:359px){ .pv-dance em{display:none} }
@media (max-height:699px){
  .picker-head{padding:10px 14px 6px}
  .pick-preview{width:34px; height:34px}
  .picker .tabs{margin:0 14px 6px}
  .picker .pk-search input{height:38px}
}
/* tiny heights (a phone on its side): no picture, just the name */
@media (max-height:519px){
  .pv-stage,.pv-dance{display:none}
  .pv-name{font-size:20px}
  .pk-tools{display:flex; align-items:center; gap:8px; padding-top:6px}
  .pk-search{flex:none; width:38%; margin:0 0 0 16px}
  .pk-chips{flex:1; min-width:0; padding-top:4px; padding-bottom:4px}
}
@media (prefers-reduced-motion:reduce){
  .pv-stage>*,.pk-it.pop .pk-av{animation:none}
  .pk-av,.pk-ck,.pk-use,.pk-it,.pk-chip,.pv-stage{transition:none}
}
.flag-tools{position:sticky; top:0; z-index:1; display:flex; gap:8px; padding:8px 0; background:var(--bg2)}
.flag-tools input,.pk-search input{flex:1; min-width:0; height:36px; background:var(--fill3); border:0; border-radius:10px; color:var(--label);
  padding:0 12px 0 34px; font:400 16px var(--font); outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px; background-position:11px 50%}
.flag-tools input::placeholder,.pk-search input::placeholder{color:var(--label3)}
.flag-tools input:focus,.pk-search input:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 60%, transparent)}
.flag-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px}
.flag-item{display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:0; border-radius:12px; text-align:left;
  background:var(--bg3); cursor:pointer; font:500 13.5px/1.25 var(--font); color:var(--label); transition:background .15s}
.flag-item:hover{background:var(--bg4)}
.flag-item.sel{background:color-mix(in srgb, var(--blue) 18%, transparent); box-shadow:inset 0 0 0 2px var(--blue)}
.flag-item img{flex:none; width:30px; height:22.5px; border-radius:4px; object-fit:cover; background:var(--fill4); box-shadow:0 0 0 .5px rgba(255,255,255,.2)}
.flag-item span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.flag-none{display:inline-grid; place-items:center; flex:none; width:30px; height:22.5px; border-radius:4px; border:1.5px dashed var(--label3); color:var(--label2); font-size:12px; font-style:normal}
.flag-empty{color:var(--label2); font-size:14px; padding:18px 4px}
.sheet-sub{margin:-6px 18px 8px; color:var(--label2); font-size:13px}
/* settings (the gear) */
.set-sheet{width:min(560px,100%)}
.set-body{display:flex; flex-direction:column; gap:12px; overflow:auto; padding:4px 18px 10px}
.set-group{display:flex; flex-direction:column; gap:12px; padding:14px 14px 16px; border-radius:18px; background:var(--bg3)}
.set-group h4{margin:0; font:650 15px/1.2 var(--font-d); letter-spacing:-.01em}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; min-width:0}
.set-row.set-stack{flex-direction:column; align-items:stretch; gap:10px}
.set-row.set-stack .set-lab{flex:none}
.set-row .seg{flex:none; max-width:100%; flex-wrap:wrap}   /* (a long word, as in another language, wraps the button down instead of leaving the sheet) */
.set-row .seg button{white-space:nowrap}
.set-row:not(.set-stack) .seg button{flex:0 0 auto}
.set-lab{min-width:0; flex:1 1 200px; font-size:14px; line-height:1.3; color:var(--label)}
.set-help{margin:-4px 0 0; font-size:12.5px; line-height:1.35; color:var(--label2)}
.set-state{margin:0; font-size:14px; line-height:1.35; color:var(--label)}
.acct-seg{flex-direction:column; align-items:stretch; background:none; padding:0; gap:8px}   /* one button under the other: two long texts do not fit side by side on a phone */
.acct-seg button{flex:none; height:40px; font-size:14px; background:var(--fill3)}   /* (the main action of its group: a little taller than a switch; the looks give it their own button) */
#acctMsg:empty{display:none}
.entry-sheet{width:min(440px,100%); padding-bottom:16px}
.entry-btns{display:flex; flex-direction:column; gap:8px; margin:0 18px}
.entry-note{margin:12px 18px 0; text-align:center}
.entry-note:empty{display:none}
.set-num{display:inline-flex; align-items:center; gap:8px; color:var(--label2); font-size:14px}
.set-num input{width:64px; height:34px; border:0; border-radius:10px; background:var(--fill3); color:var(--label); font:600 15px var(--font); text-align:center; -moz-appearance:textfield}
.set-num input::-webkit-outer-spin-button,.set-num input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.set-num input:disabled{opacity:.4}
.set-days{display:flex; width:100%}
.set-days button{min-width:0; padding:0 4px}
html:root .set-days.seg button{font-size:13px; padding:0 1px; letter-spacing:0}   /* (beats the larger buttons of some looks) */
.set-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px 16px}
.set-foot .set-done{height:42px; padding:0 26px}
.set-select{max-width:100%; min-width:0; height:34px; padding:0 30px 0 12px; border:0; border-radius:10px; background-color:var(--fill3); color:var(--label); font:500 14px var(--font); cursor:pointer}
/* The open list of a select is painted by the browser on its own surface. The select itself is see-through (--fill3), so without
   an opaque colour of its own every option kept the text colour of the look on a light grey list (white on grey in the dark looks). */
.set-select option,.set-select optgroup{background-color:var(--bg3); color:var(--label)}
.set-off{display:flex; gap:8px; align-items:center}
.set-off input{flex:1; min-width:0; height:34px; padding:0 10px; border:0; border-radius:10px; background:var(--fill3); color:var(--label); font:500 14px var(--font)}
.set-chips{display:flex; flex-wrap:wrap; gap:6px}
.set-chips:empty{display:none}
.set-chips .chip{height:30px; padding:0 8px 0 11px; gap:6px; font-size:13px}
.set-chips .chip svg{width:13px; height:13px}
/* "Calm" animations: every CSS animation and transition is switched off (the code that checks reduceMotion does the rest) */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
.skin-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; overflow:auto; padding:4px 18px 20px}
.skin-card{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px 10px; border:0; border-radius:18px; background:var(--bg3);
  color:var(--label); cursor:pointer; transition:background .15s, transform .15s}
.skin-card:hover,.look-card:hover{background:var(--bg4)}
.skin-card:active,.look-card:active{transform:scale(.98)}
.look-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; overflow:auto; padding:4px 18px 20px}
.look-card{display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; padding:8px 8px 10px; border:0; border-radius:18px; background:var(--bg3);
  color:var(--label); font:inherit; text-align:center; cursor:pointer; transition:background .15s, transform .15s}
.look-pic{display:block; border-radius:11px; overflow:hidden; aspect-ratio:var(--w, 340) / var(--h, 400); background:#000; pointer-events:none}
.look-pic img{display:block; width:100%; height:100%; object-fit:cover; user-select:none}
.look-card b{font:600 14px var(--font)}
.look-card small{margin-top:-3px; padding:0 4px; font-size:11.5px; color:var(--label2); line-height:1.25}
.skin-card.sel,.look-card.sel{box-shadow:inset 0 0 0 2px var(--blue); background:color-mix(in srgb, var(--blue) 14%, transparent)}
.skin-card .wheel-wrap{width:100%; max-width:118px; pointer-events:none}
.skin-slotpic{position:relative; width:100%; max-width:118px; aspect-ratio:1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 64% 62% at 50% 50%, #000 60%, transparent 100%); mask-image:radial-gradient(ellipse 64% 62% at 50% 50%, #000 60%, transparent 100%)}
.skin-slotpic img{position:absolute; left:-25%; top:4.3%; width:137.1%; max-width:none; user-select:none}
.skin-card b{font:600 14px var(--font)}
.skin-card small{margin-top:-6px; font-size:11.5px; color:var(--label2); text-align:center; line-height:1.25}

/* ---------- many names: view switch, add-many sheet, who-are-you sheet, slot machine ---------- */
#viewSeg button{flex:0 0 auto; min-width:0; padding:0 11px}   /* (as wide as the word: "Tragaperras" is longer than "Slots") */

.import-sheet{width:min(560px,100%)}
.import-text{flex:none; margin:0 18px; width:calc(100% - 36px); min-height:150px; max-height:34vh; resize:vertical; padding:12px 14px; font:400 15px/1.45 var(--font)}
.import-sum{margin:10px 18px 0; min-height:20px; font:500 13px/1.4 var(--font); color:var(--label2)}
.import-sum b{color:var(--label); font-weight:650}
.import-sum .warn{color:var(--orange)}
.import-chips{display:flex; flex-wrap:wrap; gap:5px; margin:8px 18px 0; max-height:116px; overflow:auto}
.import-chips span{padding:3px 9px; border-radius:99px; background:var(--fill3); font:500 12.5px/1.3 var(--font); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.import-chips .dup{text-decoration:line-through; opacity:.5}
.import-chips .more{background:none; color:var(--label2)}
.import-foot{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 14px 14px}
.import-go:disabled{opacity:.35; cursor:default; filter:none}

.who-h{display:flex; align-items:flex-start; gap:10px; margin:2px 18px 8px; font:400 14px/1.35 var(--font); color:var(--label)}
.who-h b{font-weight:650}
.who-h small{display:block; margin-top:2px; font:400 12px/1.35 var(--font); color:var(--label2)}
.who-h2{margin-top:2px}
.who-why{margin:-2px 18px 12px; color:var(--label2); font:400 14px/1.4 var(--font)}
.who-sep{display:flex; align-items:center; gap:10px; margin:12px 18px 10px; color:var(--label3); font:600 12px var(--font)}
.who-sep::before,.who-sep::after{content:""; flex:1; height:1px; background:var(--sep)}
.who-empty{margin:0 18px 6px; padding:9px 12px; border-radius:12px; background:var(--fill4); color:var(--label2); font-size:13px}
.who-addgo{flex:none; height:34px; padding:0 15px; border:0; border-radius:10px; background:var(--on, var(--green)); color:#04210d; font:650 14px var(--font-d); cursor:pointer}
.who-addgo:hover{filter:brightness(1.08)}
.who-grid{max-height:min(34vh, 300px)}

/* ---- slot machine: a picture of a real-looking machine (slot/machine.webp, 1536 x 1024) with the live parts laid on top of it.
   Everything is placed in the picture's own pixels: --x --y --w --h on a ".at" element, shown through the crop window
   --cx --cy --cw --ch (a tighter one on phones). --u is the size of one picture pixel on the screen; the script keeps it in step
   with the width of .slot-art. The lever's rod and knob are cut out of the picture so they can move. ---- */
@property --pull{syntax:'<number>'; inherits:true; initial-value:0}
.slot-wrap{position:relative; width:100%; display:flex; justify-content:center; padding-top:2px}
.slot-art{--cx:215; --cy:4; --cw:1270; --ch:1016; --u:.5px; --hcap:max(560px, calc(100vh - 140px));
  position:relative; flex:none; width:min(100%, calc(var(--hcap) * var(--cw) / var(--ch))); aspect-ratio:var(--cw) / var(--ch); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
  mask-composite:intersect}
@supports (height:100svh){ .slot-art{--hcap:max(560px, calc(100svh - 140px))} }
.slot{position:absolute; inset:0}
.slot-img{position:absolute; left:calc(var(--cx) * var(--u) * -1); top:calc(var(--cy) * var(--u) * -1); width:calc(1536 * var(--u)); height:calc(1024 * var(--u)); max-width:none;
  user-select:none; -webkit-user-select:none; pointer-events:none}
.at{position:absolute; left:calc((var(--x) - var(--cx)) * var(--u)); top:calc((var(--y) - var(--cy)) * var(--u)); width:calc(var(--w) * var(--u)); height:calc(var(--h) * var(--u)); box-sizing:border-box}

/* the sign: the wheel's title in gold bulb letters where the picture's sign was left empty */
.slot-sign{z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none}
#slotTitle{--fs:86; position:relative; display:block; max-width:100%; white-space:nowrap; text-align:center; text-transform:uppercase; letter-spacing:.035em;
  font:800 calc(var(--fs) * var(--u))/1.12 "Lilita One", "Bricolage Grotesque", var(--font-d); font-synthesis:none; color:transparent; filter:drop-shadow(0 0 calc(9 * var(--u)) rgba(255,150,25,.85))}
#slotTitle::before,#slotTitle::after{content:attr(data-t); position:absolute; left:0; top:0; white-space:nowrap}
#slotTitle::before{color:#c81d0a; -webkit-text-stroke:calc(14 * var(--u)) #c81d0a; text-shadow:0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(80,0,0,.7)}
#slotTitle::after{background:radial-gradient(circle closest-side, #fffdf0 0 50%, rgba(255,243,180,0) 64%) 0 0 / calc(29 * var(--u)) calc(29 * var(--u)),
    linear-gradient(180deg, #fff3a6 0, #ffc92e 36%, #ff9d00 68%, #f26a00 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.slot.spinning #slotTitle{animation:bulbFlick .4s steps(1) infinite}
.slot.win #slotTitle{animation:bulbWin .3s steps(1) infinite}
@keyframes bulbFlick{0%{opacity:1} 50%{opacity:.55}}
@keyframes bulbWin{0%{opacity:1} 50%{opacity:.25}}

/* the red lamp on top of the machine blinks while it runs */
.slot-lamp{z-index:1; border-radius:50%; background:radial-gradient(circle closest-side, rgba(255,92,70,.95), rgba(255,50,40,0)); mix-blend-mode:screen; opacity:0; pointer-events:none}
.slot.spinning .slot-lamp,.slot.win .slot-lamp{animation:lampBlink .45s steps(1) infinite, lampHue 1.8s steps(1) infinite}
@keyframes lampHue{0%{filter:hue-rotate(0deg)} 20%{filter:hue-rotate(60deg)} 40%{filter:hue-rotate(130deg)} 60%{filter:hue-rotate(200deg)} 80%{filter:hue-rotate(290deg)}}
@keyframes lampBlink{0%{opacity:.95} 50%{opacity:.1}}
.slot.win .slot-img{animation:slotWin .5s ease-in-out infinite alternate}
@keyframes slotWin{to{filter:brightness(1.16) saturate(1.25)}}

/* the windows: drums that show names, laid over the three painted reels */
.slot-reels{--row:calc(88.67 * var(--u)); --R:calc(var(--row) * 1.9319); z-index:2; display:flex; gap:calc(9 * var(--u)); padding:0 calc(4 * var(--u)); overflow:hidden; isolation:isolate;
  background:#080912; border-radius:calc(18 * var(--u))}
.slot-reels::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;               /* the glass: a soft shadow under the frame and a streak of light */
  background:linear-gradient(112deg, rgba(255,255,255,.24) 0, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 25%),
             linear-gradient(180deg, rgba(0,0,10,.42), rgba(0,0,10,0) 15%, rgba(0,0,10,0) 84%, rgba(0,0,10,.34))}
.slot.win .slot-reels{box-shadow:0 0 calc(30 * var(--u)) calc(3 * var(--u)) rgba(255,205,70,.8)}
/* a reel is a drum: the names sit on its curved face, so the ones above and below tip away from you */
.reel{position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:calc(8 * var(--u)); background:#f1f2f8; container-type:inline-size; isolation:isolate;
  perspective:calc(var(--row) * 6.5); perspective-origin:50% 50%}
.reel::before{content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;                          /* the roundness: light on the front, dark where it turns away */
  background:linear-gradient(180deg, rgba(6,8,22,.78) 0, rgba(6,8,22,.38) 13%, rgba(6,8,22,.07) 27%, rgba(6,8,22,0) 38%, rgba(6,8,22,0) 62%, rgba(6,8,22,.1) 73%, rgba(6,8,22,.42) 87%, rgba(6,8,22,.82) 100%),
             linear-gradient(90deg, rgba(6,8,22,.3), rgba(6,8,22,0) 12%, rgba(6,8,22,0) 88%, rgba(6,8,22,.3))}
.reel-drum{position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(calc(var(--R) * -1))}
.reel-pay{position:absolute; left:0; right:0; top:var(--row); height:var(--row); z-index:2; pointer-events:none;
  background:rgba(255,59,48,.06); box-shadow:inset 0 2px 0 rgba(255,59,48,.85), inset 0 -2px 0 rgba(255,59,48,.85)}
.reel-row{position:absolute; left:0; top:calc(50% - var(--row) / 2); width:100%; height:var(--row); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(3 * var(--u)); padding:calc(4 * var(--u)) clamp(2px, 3cqi, 6px);
  backface-visibility:hidden; box-shadow:inset 0 1px 0 rgba(40,40,70,.16)}
/* the light behind each name: every frame has its own lamp (and the colour stays with the name as it scrolls by).
   White when the window stands still, a disco of colours while it spins, gold for the winner in the middle (see .reel.rolling and .reel.won) */
.row-lamp{position:absolute; inset:0; z-index:-1; pointer-events:none; background-color:#f3f4fb;
  background-image:radial-gradient(ellipse 88% 58% at 50% 50%, rgba(255,255,255,.62) 0, rgba(255,255,255,.3) 48%, rgba(255,255,255,0) 100%)}
.row-lamp::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(212,216,236,.2))}   /* the same soft shading as an unlit frame */
.reel-row .av{flex:none; width:min(calc(var(--row) * .86), 86cqi); aspect-ratio:1}                       /* the face fills the frame: no names in the windows */
.reel-row .av svg{display:block; width:100%; height:100%; border-radius:50%; box-shadow:0 calc(2.5 * var(--u)) calc(5 * var(--u)) rgba(20,20,40,.4)}
.reel-row b{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 clamp(9px, 12.5cqi, 22px)/1.15 var(--font-d); color:#14151f; letter-spacing:-.01em}
.reel-row b:empty{display:none}
.reel.rolling .reel-row{filter:blur(1.3px)}
.slot.spinning .reel.rolling .row-lamp{animation:lampDisco var(--lp, 2.6s) steps(1) infinite; animation-delay:calc(var(--i, 0) * var(--lp, 2.6s) * -.34)}   /* every name another point of the colour cycle */
.reel.won .reel-row.mid .row-lamp{background-color:#ffe27a; animation:lampGold .5s ease-in-out infinite alternate}
/* colours of about the same brightness, so the changes read as light and not as a strobe; one change every ~0.3 s per window */
@keyframes lampDisco{0%{background-color:#2fb4ff} 12.5%{background-color:#ff62b8} 25%{background-color:#3fdc7c} 37.5%{background-color:#ffa61f}
  50%{background-color:#a98aff} 62.5%{background-color:#ff6f60} 75%{background-color:#25e0cf} 87.5%{background-color:#ffd321}}
@keyframes lampGold{from{background-color:#fff0a6} to{background-color:#ffbf1f}}
/* the frame of the windows glows in the colours too */
.slot.spinning .slot-reels{animation:reelsGlow 1.6s steps(1) infinite}
@keyframes reelsGlow{0%{box-shadow:0 0 calc(38 * var(--u)) calc(5 * var(--u)) rgba(79,195,255,.9)} 20%{box-shadow:0 0 calc(38 * var(--u)) calc(5 * var(--u)) rgba(255,110,200,.9)}
  40%{box-shadow:0 0 calc(38 * var(--u)) calc(5 * var(--u)) rgba(95,224,138,.9)} 60%{box-shadow:0 0 calc(38 * var(--u)) calc(5 * var(--u)) rgba(255,180,58,.9)} 80%{box-shadow:0 0 calc(38 * var(--u)) calc(5 * var(--u)) rgba(185,160,255,.9)}}
.reel.won .reel-pay{background:rgba(48,209,88,.2); box-shadow:inset 0 2px 0 var(--green), inset 0 -2px 0 var(--green); animation:payGlow .5s ease-in-out infinite alternate}
@keyframes payGlow{to{background:rgba(48,209,88,.34)}}

/* the three red keys of the picture are the buttons (any of them pulls the lever) */
.slot-keys{display:contents}
.slot-key{z-index:4; display:block; padding:0; border:0; background:none; border-radius:calc(16 * var(--u)); cursor:pointer; -webkit-tap-highlight-color:transparent}
.slot-key::before,.slot-key::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none}
.slot-key::before{background:rgba(0,0,0,.34); opacity:0; transition:opacity .08s}
.slot-key:active:not(:disabled)::before{opacity:1}
.slot-key::after{background:radial-gradient(ellipse at 50% 40%, rgba(255,130,100,.8), rgba(255,60,40,0) 72%); opacity:0}
.slot.spinning .slot-key::after{animation:keyGlow .5s steps(1) infinite}
@keyframes keyGlow{0%{opacity:.9} 50%{opacity:0}}
.slot-key:focus-visible{outline:2px solid #fff; outline-offset:3px}
.slot-key:disabled{cursor:default}

/* the lever on the right: the rod and the knob are separate pictures, so it can swing down and spring back */
.lever{--pull:0; z-index:5; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:--pull .5s cubic-bezier(.3,1.7,.5,1)}
.lever.drag{cursor:grabbing; transition:none}
.lever.snap{transition:--pull .16s ease-in}
.lever:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:calc(20 * var(--u))}
.lv-arm{position:absolute; left:calc(91 * var(--u)); top:calc(407.8 * var(--u)); width:0; height:0; transform:rotate(calc(14.35deg * (1 - var(--pull)))); pointer-events:none}
.lv-arm img{position:absolute; max-width:none; user-select:none; -webkit-user-select:none; pointer-events:none}
.lv-rod{left:calc(-27.1 * var(--u)); top:calc(-272 * var(--u)); width:calc(54 * var(--u)); height:calc(280 * var(--u)); transform-origin:calc(27.1 * var(--u)) calc(272 * var(--u));
  transform:scaleY(calc(1 - var(--pull) * .72))}
.lv-knob{left:calc(-60.6 * var(--u)); top:calc((-322.3 * (1 - var(--pull) * .72) - 67) * var(--u)); width:calc(134 * var(--u)); height:calc(134 * var(--u)); transform:scale(calc(1 + var(--pull) * .2))}
.slot-wrap.busy .lever{cursor:default}
@media (max-width:640px){                                                  /* phones: just the window, the sign and the keys (the lever stays out of the frame) */
  .slot-art{--cx:410; --cy:66; --cw:720; --ch:736;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 86%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 86%, transparent)}
  .lever,.lv-h{display:none}
}
@media (prefers-reduced-motion:reduce){ .slot.spinning #slotTitle,.slot.spinning .slot-lamp,.slot.win .slot-lamp,.slot.spinning .slot-key::after,.slot.win .slot-img,.slot.spinning .slot-reels,.slot.spinning .reel.rolling .row-lamp,.reel.won .reel-row.mid .row-lamp{animation:none} }

/* ---------- the side panel on the left (js/rail.js): the places of the wheels and the categories of the assistant ---------- */
.rail{display:flex; flex-direction:column; gap:14px; padding:14px; background:var(--bg2); border-radius:22px; border:.5px solid var(--edge); min-width:0;
  position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; overscroll-behavior:contain}
.rail[hidden]{display:none}
.rail-top{display:flex; align-items:center; justify-content:space-between; gap:8px; font:700 17px/1.2 var(--font-d); letter-spacing:-.01em}
.rail-sec{display:flex; flex-direction:column; gap:8px}
.rail-h{margin:0; font:600 12px/1.2 var(--font); color:var(--label2); letter-spacing:.02em}
.rail-list{display:flex; flex-direction:column; gap:4px}
.rail-row,.rail-cat{display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:6px 10px; border:0; border-radius:12px; background:var(--fill4); color:var(--label); font:500 14px/1.25 var(--font); text-align:left; cursor:pointer}
.rail-row:hover,.rail-cat:hover{background:var(--fill3)}
.rail-row:focus-visible,.rail-cat:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.rail-row.now{background:var(--fill2); font-weight:650; box-shadow:inset 3px 0 0 var(--btn, var(--blue))}
.rail-row.free{background:transparent; border:1.5px dashed var(--edge); color:var(--label2)}
.rail-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-dot,.rail-ic{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--fill3); font:700 12px var(--font)}
.rail-ic{background:none; font-size:18px; width:26px}
.row.done .row-main{opacity:.7}                              /* a pair wheel: had a turn in this round (off the wheel, still in the list) */
.row.done .row-sub{font-style:italic}
.task-chip.done{opacity:.55}
.task-chip.done > span:first-child{text-decoration:line-through}
.rail-res{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:5px 10px 5px 6px; border:0; border-radius:12px; background:var(--fill4); color:var(--label); font:500 14px/1.25 var(--font); text-align:left; cursor:pointer}
.rail-res:hover{background:var(--fill3)}
.rail-res:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.rail-res .rail-txt{gap:0}
.rail-res .rail-sub{order:-1}
.rail-res .rail-nm{font-weight:650}
.rail-av{flex:none; width:30px; height:30px}
.rail-av svg{width:100%; height:100%; display:block; border-radius:50%}
.rail-av .flag-badge{display:none}
.rail-time{flex:none; color:var(--label2); font:500 11.5px var(--font); font-variant-numeric:tabular-nums}
.rail-item{display:flex; align-items:stretch; gap:4px}
.rail-item .rail-row{flex:1; min-width:0}
.rail-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.rail-sub{color:var(--label2); font:500 11.5px/1.25 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rail-sub:empty{display:none}
.rail-act{flex:none; display:grid; place-items:center; width:38px; min-height:40px; padding:0; border:0; border-radius:12px; background:var(--fill4); color:var(--label2); cursor:pointer}
.rail-act svg{width:16px; height:16px}
.rail-act:hover{background:var(--fill3); color:var(--label)}
.rail-act:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.rail-act.armed{width:auto; padding:0 10px; background:#ff453a; color:#fff; font:700 12.5px var(--font)}
@media (hover:hover) and (pointer:fine){                     /* a mouse: the pencil and the bin show on the row that is pointed at, so the name has the whole width */
  .rail-item{position:relative}
  .rail-item .rail-act{position:absolute; top:5px; bottom:5px; min-height:0; width:32px; background:var(--bg2); box-shadow:0 0 0 1px var(--edge); opacity:0; pointer-events:none; transition:opacity .12s}
  .rail-item .rail-act:not(.del){right:42px}
  .rail-item .rail-act.del{right:5px}
  .rail-item:hover .rail-act,.rail-item:focus-within .rail-act,.rail-item .rail-act.armed{opacity:1; pointer-events:auto}
  .rail-item .rail-act.armed{width:auto}
}
.rail-act:disabled{opacity:.5; cursor:default}
.rail-note{margin:0; color:var(--label2); font:500 12.5px/1.4 var(--font)}
.rail-full{color:var(--orange)}
.rail-signin{display:flex; flex-direction:column; gap:6px}
.rail-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.rail-manage{height:32px; padding:0 12px; font-size:13px}
.stage-top{align-self:stretch; display:flex; justify-content:flex-start; margin-bottom:-4px}
.stage-top[hidden]{display:none}
.share-btn{font-weight:600}
.rail-signin .btn{width:100%}
.rail-back{position:fixed; inset:0; z-index:59; background:rgba(0,0,0,.5)}
.rail-back[hidden]{display:none}
@media (min-width:1280px){
  .rail{display:none}
  body.rail-pin .rail{display:flex}
  body.rail-pin main{grid-template-columns:256px minmax(0, calc(var(--stage-w) + var(--stage-pad))) 370px}
  .rail-back{display:none}
}
@media (max-width:1279px){                                  /* a drawer from the left, opened by the button in the header */
  .rail{position:fixed; z-index:60; left:0; top:0; bottom:0; width:min(320px, 88vw); max-height:none; border-radius:0 22px 22px 0; border-width:0 .5px 0 0;
    padding:calc(14px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow:0 0 60px rgba(0,0,0,.6);
    transform:translateX(-106%); visibility:hidden; transition:transform .25s ease, visibility 0s .25s}
  body.rail-open .rail{transform:none; visibility:visible; transition:transform .25s ease, visibility 0s}
}
@media (prefers-reduced-motion:reduce){ .rail{transition:none !important} }
html[data-look="sticker"] .rail{border:2.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink)}
html[data-look="sticker"] :is(.rail-row,.rail-cat,.rail-act,.rail-res){border:2px solid var(--ink); border-radius:12px; background:#fff}
html[data-look="sticker"] .rail-row.now{background:var(--btn)}
html[data-look="hold"] .rail{border:1.5px solid rgba(255,200,61,.3); border-radius:18px}
html[data-look="panel"] .rail{border:1px solid #bdb8aa; border-radius:10px}
html[data-look="ticket"] .rail{border:1.5px dashed rgba(251,243,224,.28); border-radius:14px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pod-row{order:3; flex-basis:100%}
}
@media (max-width:900px){
  .topbar{padding:12px 16px 4px; row-gap:10px}
  main{grid-template-columns:minmax(0,1fr); padding:4px 16px 16px; gap:20px}
  .wheel-wrap{width:min(100%, 70vh)}
  .panel{position:static; height:auto; min-height:0; max-height:none}
  .roster{max-height:none; flex:none}
  textarea{min-height:260px}
  .kbd-hint{display:none}
  #title{font-size:24px}
  .stage{height:210px; --dw:128px}
  .dancer{bottom:20px}
  .day-name{font-size:17px}
  .modal-body{padding:14px 18px 18px}
  .joke{font-size:15px}
  .copy-msg{text-align:center}
  .podium{flex-direction:column; align-items:stretch; gap:5px; width:100%; padding:6px 8px 7px}
  .pod-label{text-align:center; font-size:12px}
  .pod-chip{flex:1 1 0; display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:7px; row-gap:3px; padding:6px 6px 5px}
  .pod-medal{position:absolute; left:4px; top:3px; font-size:16px}
  .pod-av,.pod-n{grid-row:1}
  .pod-name{grid-row:2; grid-column:1 / -1; max-width:none; text-align:center; font-size:12.5px}
  .podium.last .pod-chip{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; padding:7px 10px}
  .podium.last .pod-name{font-size:14px}
  /* phone: small two-line chips — flag and city, then time and weather */
  .clocks{gap:5px}
  .clock-grid{grid-template-columns:repeat(var(--cols, 3), minmax(0, 168px)); gap:6px}
  .clock{grid-template-areas:"head head" "time wx"; column-gap:4px; padding:6px 8px 6px 9px; border-radius:12px}
  .ck-head{gap:5px; font:500 11.5px/1.2 var(--font); color:var(--label2)}
  .ck-flag{width:15px; height:11.25px; border-radius:2px}
  .ck-time{margin-top:2px; font-size:clamp(14px, 16cqi, 19px)}
  .ck-sub{display:none}
  .ck-wx{flex-direction:row; align-self:center; gap:1px; margin-top:2px; font-size:12.5px}
  .ck-ico svg{width:17px; height:17px}
  .clock-credit{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .modal{transition:none}
  .pointer.tick,.aurora i,.dancer.enter,.joke.swap span,[data-skin="portal"] .hub::before,.skin-cta,.list-cta,.look-btn,.lock-note::before,.row-edit::before{animation:none}
  .toast,.upd{transition:none}
  .greet.show .greet-av,.greet.show .greet-text,.greet.show .greet-joke,.greet.show .hello-go{animation:none}
}
/* =========================================================
   LOOKS: the whole interface in another coat. html[data-look] is set by the script (and by a line in <head>, so nothing flashes).
   The default look, Dark Apple, is the style sheet above and has no rules here. A look redefines the colour tokens, the fonts and
   the extra tokens of :root, and restyles a few parts (panel, banners, segments, rows, switches, buttons).
   The wheel and the slot machine keep their own skins. The previews in "Choose your look" are pictures (looks/*.webp):
   after changing a look here, take them again (see looks/README.md).
   ========================================================= */
/* dark in every look: floating cards, the greeting, the winner's day card, the avatar preview. They keep the dark tokens. */
.toast,.upd,.stale-card,.av-tip,.greet,.pv,.day-card{
  --bg2:#1c1c1e; --bg3:#2c2c2e; --bg4:#3a3a3c;
  --fill:rgba(120,120,128,.36); --fill2:rgba(120,120,128,.32); --fill3:rgba(118,118,128,.24); --fill4:rgba(116,116,128,.18);
  --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3); --sep:rgba(84,84,88,.65);
  --blue:#0a84ff; --green:#30d158; --red:#ff453a; --orange:#ff9f0a; --yellow:#ffd60a; --teal:#64d2ff;
  --btn:initial; --on-btn:initial; --on:initial; --on-fg:initial; --seg-on:#636366; --seg-on-fg:initial; --warn:initial; --hover:rgba(255,255,255,.05);
  color:var(--label); color-scheme:dark}

/* ---------- Hold: a casino key pad. Plum, gold, chunky keys. ---------- */
html[data-look="hold"]{
  --bg:#14060f; --page-img:radial-gradient(120% 50% at 50% 0%, #3a0f2a 0%, #14060f 62%);
  --bg2:#1d0c17; --bg3:#2b1424; --bg4:#3a1c30;
  --fill:rgba(255,241,214,.2); --fill2:rgba(255,241,214,.15); --fill3:rgba(255,241,214,.1); --fill4:rgba(255,241,214,.06);
  --label:#fff1d6; --label2:#c9a8b4; --label3:rgba(201,168,180,.55); --sep:rgba(255,200,61,.14);
  --blue:#ffc83d; --btn:linear-gradient(#ffe27a,#f2a81d); --on-btn:#2a1221;
  --on:radial-gradient(circle at 35% 30%,#fff3b0,#ffc83d 55%,#c97a0a); --on-fg:#2a1221;
  --seg-on:linear-gradient(#ffe27a,#f2a81d); --seg-on-fg:#2a1221;
  --cta-bg:#24101c; --hover:rgba(255,200,61,.08);
  --edge:rgba(255,200,61,.22); --edge2:rgba(255,200,61,.34);
  --glass:rgba(36,16,28,.8); --glass-hover:rgba(58,26,44,.88); --glass-bd:rgba(255,200,61,.34);
  --font:Barlow,"Segoe UI",Roboto,Arial,sans-serif; --font-d:Barlow,"Segoe UI",Roboto,Arial,sans-serif; --font-x:"Alfa Slab One",Georgia,serif;
  font-synthesis:none; color-scheme:dark}
html[data-look="hold"] body{background-attachment:fixed}
html[data-look="hold"] :is(#title,.win-name,.picker-head h3,.hello h3,.greet-text){font-family:var(--font-x); font-weight:400}
html[data-look="hold"] #title{font-size:26px}
@media (max-width:900px){ html[data-look="hold"] #title{font-size:20px; width:min(52vw,420px)} }
html[data-look="hold"] .panel{border:1.5px solid rgba(255,200,61,.3); border-radius:18px}
html[data-look="hold"] :is(.skin-cta,.list-cta,.look-btn){background:var(--cta-bg); border:1.5px solid rgba(255,200,61,.42); border-radius:14px; animation:none}
html[data-look="hold"] :is(.skin-cta,.list-cta,.look-btn)::before{display:none}
html[data-look="hold"] :is(.skin-cta,.list-cta,.look-btn):hover{animation:none}
html[data-look="hold"] .look-btn{border-radius:12px; color:#ffc83d}
html[data-look="hold"] .skin-swatch{box-shadow:0 0 0 2px #ffc83d, 0 0 14px rgba(255,200,61,.45)}
html[data-look="hold"] .list-swatch{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc83d 45%,#c97a0a)}
html[data-look="hold"] .list-swatch::after{background:none; box-shadow:none; color:#2a1221; font-size:15px; font-weight:700}
html[data-look="hold"] .skin-cta-text b{font-size:16.5px; font-weight:700}
html[data-look="hold"] .skin-cta-text small{font-style:normal}
html[data-look="hold"] .skin-cta-now{background:rgba(255,200,61,.14); color:#ffc83d}
html[data-look="hold"] .seg{background:none; padding:0; gap:6px}
html[data-look="hold"] .seg button{height:40px; border:1px solid #6a3a52; border-bottom:3px solid #1b0a13; border-radius:9px; background:linear-gradient(#4a2036,#2a1221); color:#fff1d6; font:700 16px var(--font)}
html[data-look="hold"] .seg button:hover:not(:disabled):not(.on):not(.active){background:linear-gradient(#5a2842,#34182a)}
html[data-look="hold"] .seg button.on,html[data-look="hold"] .seg button.active{border-color:#ffd34d; border-bottom-color:#b46f0a; background:var(--seg-on); color:var(--seg-on-fg); box-shadow:0 0 12px rgba(255,200,61,.45)}
html[data-look="hold"] .seg button:active:not(:disabled){transform:translateY(1px)}
html[data-look="hold"] .list-cta .seg{gap:3px}
html[data-look="hold"] .list-cta .seg button{height:34px; min-width:24px; padding:0 4px; font-size:15px}
html[data-look="hold"] .tabs{gap:4px}
html[data-look="hold"] .tabs .tab{flex-wrap:wrap; align-content:center; justify-content:center; column-gap:6px; row-gap:5px; height:auto; min-height:38px; padding:8px 4px 4px; border:0; border-radius:0; background:none; box-shadow:none; transform:none; color:var(--label2); font:600 15px var(--font)}
html[data-look="hold"] .tabs .tab.active{background:none; color:#ffc83d; font-weight:700}
html[data-look="hold"] .tabs .tab::after{content:""; flex:0 0 100%; height:6px}
html[data-look="hold"] .tabs .tab.active::after{background:radial-gradient(circle,#ffc83d 2.6px,transparent 3px) calc(50% - 13.5px) 0/9px 6px no-repeat, radial-gradient(circle,#ffc83d 2.6px,transparent 3px) calc(50% - 4.5px) 0/9px 6px no-repeat,
  radial-gradient(circle,#ffc83d 2.6px,transparent 3px) calc(50% + 4.5px) 0/9px 6px no-repeat, radial-gradient(circle,#ffc83d 2.6px,transparent 3px) calc(50% + 13.5px) 0/9px 6px no-repeat; filter:drop-shadow(0 0 4px #ffc83d)}
html[data-look="hold"] .roster{background:none; display:flex; flex-direction:column; gap:6px; padding:1px}
html[data-look="hold"] .row{flex:none; padding:6px 10px 6px 8px; border:1px solid rgba(255,200,61,.16); border-radius:14px; background:var(--bg3)}
html[data-look="hold"] .row + .row::before{display:none}
html[data-look="hold"] .row.off{background:rgba(43,20,36,.5)}
html[data-look="hold"] .row-name{font-size:17px; font-weight:600}
html[data-look="hold"] .row:not(.off) .av-wrap svg{box-shadow:0 0 0 2px #ffc83d}
html[data-look="hold"] .row.locked .av-wrap svg{box-shadow:0 0 0 2px var(--orange)}
html[data-look="hold"] .switch{width:60px; height:36px}
html[data-look="hold"] .switch i{display:grid; place-items:center; border-radius:9px; border:1px solid #6a3a52; border-bottom:3px solid #1b0a13; background:linear-gradient(#3a1a2c,#220f19); color:#b79aa6; font:700 15px/1 var(--font); letter-spacing:.06em}
html[data-look="hold"] .switch i::before{content:"OUT"}
html[data-look="hold"] .switch i::after{display:none}
html[data-look="hold"] .switch input:checked + i{border-color:#ffd34d; border-bottom-color:#b46f0a; background:linear-gradient(#ffe27a,#f2a81d); color:#2a1221; box-shadow:0 0 14px rgba(255,200,61,.5)}
html[data-look="hold"] .switch input:checked + i::before{content:"IN"}
html[data-look="hold"] .add-row{padding:6px 7px 6px 12px; border:1.5px dashed rgba(255,200,61,.5); border-radius:14px; background:none}
html[data-look="hold"] .add-ic{width:24px; height:24px}
html[data-look="hold"] .add-row .text-btn{height:34px; padding:0 14px; border:1px solid #6a3a52; border-bottom:3px solid #1b0a13; border-radius:8px; background:linear-gradient(#4a2036,#2a1221); color:#ffc83d; font-weight:700}
html[data-look="hold"] .add-row .text-btn:hover{background:linear-gradient(#5a2842,#34182a)}
html[data-look="hold"] .btn{border:1px solid #6a3a52; border-bottom:3px solid #1b0a13; border-radius:10px}
html[data-look="hold"] .btn.ghost{background:linear-gradient(#4a2036,#2a1221)}
html[data-look="hold"] .btn.ghost:hover{background:linear-gradient(#5a2842,#34182a)}
html[data-look="hold"] .btn.primary{border-color:#ffd34d; border-bottom-color:#b46f0a}

/* ---------- Stickers: lilac paper, thick outlines, hard shadows. Light. ---------- */
html[data-look="sticker"]{
  --ink:#1b1030;
  --bg:#bfaeff; --bg2:#fff6dc; --bg3:#ffffff; --bg4:#ece6ff;
  --fill:rgba(27,16,48,.2); --fill2:rgba(27,16,48,.14); --fill3:rgba(27,16,48,.09); --fill4:rgba(27,16,48,.06);
  --label:#1b1030; --label2:#5a4a78; --label3:#8f82a8; --sep:rgba(27,16,48,.18);
  --blue:#5b2fd6; --green:#0b8a5a; --red:#d92d4b; --orange:#d97706; --yellow:#8a5a00; --teal:#0a7ea4;
  --btn:#ffd23f; --on-btn:#1b1030; --on:#3de0a2; --on-fg:#1b1030; --warn:#7a3f00;
  --cta-bg:#fff6dc; --seg-on:#ffd23f; --seg-on-fg:#1b1030; --hover:rgba(27,16,48,.07);
  --edge:#1b1030; --edge2:#1b1030;
  --glass:#fff6dc; --glass-hover:#ffffff; --glass-bd:#1b1030;
  --bulb:rgba(27,16,48,.28); --bulb-major:rgba(27,16,48,.55); --bulb-on:#1b1030;
  --font:Figtree,"Segoe UI",Roboto,Arial,sans-serif; --font-d:"Lilita One",Impact,"Segoe UI",sans-serif;
  font-synthesis:none; color-scheme:light}
html[data-look="sticker"] :is(.pk-sec,.pk-it,.pk-chip), html[data-look="panel"] :is(.pk-sec,.pk-it,.pk-chip){--ra:hsl(var(--h) calc(80% * var(--c)) 36%)}
/* the picture of the machine is darker than a light page: a framed window instead of edges that fade out */
html[data-look="sticker"] .slot-art, html[data-look="panel"] .slot-art{-webkit-mask-image:none; mask-image:none; border-radius:22px}
html[data-look="sticker"] .slot-art{border:2.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink)}
html[data-look="panel"] .slot-art{border:1px solid #8f8b80; border-radius:12px; box-shadow:0 10px 26px rgba(0,0,0,.25)}
html[data-look="sticker"] .podium{border-width:2px; box-shadow:3px 3px 0 var(--ink)}
html[data-look="sticker"] .panel{border:2.5px solid var(--ink); border-radius:22px; box-shadow:5px 5px 0 var(--ink)}
html[data-look="sticker"] .modal{border:2.5px solid var(--ink); border-radius:24px; box-shadow:6px 6px 0 var(--ink)}
html[data-look="sticker"] :is(.skin-cta,.list-cta,.look-btn){background:var(--cta-bg); border:2.5px solid var(--ink); border-radius:16px; box-shadow:3px 3px 0 var(--ink); animation:none}
html[data-look="sticker"] :is(.skin-cta,.list-cta,.look-btn)::before{display:none}
html[data-look="sticker"] :is(.skin-cta,.list-cta,.look-btn):hover{animation:none}
html[data-look="sticker"] .look-btn{background:#ffd23f; color:var(--ink); border-radius:50%}
html[data-look="sticker"] .skin-swatch{box-shadow:0 0 0 2.5px var(--ink)}
html[data-look="sticker"] .skin-swatch::after{box-shadow:0 0 0 2px var(--ink)}
html[data-look="sticker"] .list-swatch{background:#ffd23f}
html[data-look="sticker"] .list-swatch::after{background:none; box-shadow:none; color:var(--ink); font-size:15px; font-weight:400}
html[data-look="sticker"] .skin-cta-text b{font-size:16px; font-weight:400}
html[data-look="sticker"] .skin-cta-text small{font-style:normal}
html[data-look="sticker"] .skin-cta-now{background:#fff; border:2px solid var(--ink); color:var(--ink); font-family:var(--font-d); font-weight:400}
html[data-look="sticker"] :is(.icon-btn,.tool,.pill-btn,.chip){border:2px solid var(--ink); background:#fff; color:var(--ink); box-shadow:2px 2px 0 var(--ink)}
html[data-look="sticker"] :is(.icon-btn,.tool,.pill-btn,.chip):hover:not(:disabled){background:#fff6dc}
html[data-look="sticker"] .seg{background:none; padding:0; gap:8px}
html[data-look="sticker"] .seg button{height:40px; border:2.5px solid var(--ink); border-radius:12px; background:#fff; color:var(--ink); font:400 17px var(--font-d)}
html[data-look="sticker"] .seg button:hover:not(:disabled):not(.on):not(.active){background:#fff6dc}
html[data-look="sticker"] .seg button.on,html[data-look="sticker"] .seg button.active{background:var(--seg-on); color:var(--seg-on-fg); font-weight:400; box-shadow:3px 3px 0 var(--ink); transform:translate(-1px,-1px)}
html[data-look="sticker"] .list-cta .seg{gap:3px}
html[data-look="sticker"] .list-cta .seg button{height:32px; min-width:24px; padding:0 3px; border-width:2px; border-radius:9px; font-size:15px}
html[data-look="sticker"] .list-cta .seg button.on{box-shadow:2px 2px 0 var(--ink)}
html[data-look="sticker"] .tabs{flex-wrap:wrap; gap:6px}
html[data-look="sticker"] .tabs .tab{flex:1 1 auto; height:36px; padding:0 12px; border-radius:999px; font-size:16px}
html[data-look="sticker"] .tabs .tab.active{background:#ff7ab6; box-shadow:2px 2px 0 var(--ink)}
html[data-look="sticker"] .roster{background:none; display:flex; flex-direction:column; gap:9px; padding:2px 6px 6px 2px}
html[data-look="sticker"] .row{flex:none; padding:6px 10px 6px 8px; border:2.5px solid var(--ink); border-radius:16px; background:#fff; box-shadow:3px 3px 0 var(--ink)}
html[data-look="sticker"] .row + .row::before{display:none}
html[data-look="sticker"] .row.off{background:#ece6ff; box-shadow:none}
html[data-look="sticker"] .row-name{font-size:17px; font-weight:700}
html[data-look="sticker"] .row .av-wrap svg{box-shadow:0 0 0 2.5px var(--ink)}
html[data-look="sticker"] .row.locked .av-wrap svg{box-shadow:0 0 0 2.5px var(--orange)}
html[data-look="sticker"] .switch{width:66px; height:36px}
html[data-look="sticker"] .switch i{border:2.5px solid var(--ink); border-radius:18px; background:#d9d0f5}
html[data-look="sticker"] .switch i::before{content:"OFF"; position:absolute; right:7px; top:50%; transform:translateY(-50%); color:#4a3a6a; font:400 12px/1 var(--font-d); letter-spacing:.04em}
html[data-look="sticker"] .switch i::after{top:2px; left:2px; width:26px; height:26px; border:2.5px solid var(--ink); box-shadow:none}
html[data-look="sticker"] .switch input:checked + i{background:var(--on)}
html[data-look="sticker"] .switch input:checked + i::before{content:"ON"; right:auto; left:8px; color:var(--ink)}
html[data-look="sticker"] .switch input:checked + i::after{transform:translateX(30px)}
html[data-look="sticker"] .add-row{border:2.5px dashed var(--ink); border-radius:16px; background:none}
html[data-look="sticker"] .add-ic{border:2.5px solid var(--ink); background:#ffd23f; color:var(--ink); font-family:var(--font-d); font-weight:400}
html[data-look="sticker"] .add-row .text-btn{padding:5px 14px; border:2.5px solid var(--ink); border-radius:999px; background:#ffd23f; color:var(--ink); box-shadow:2px 2px 0 var(--ink); font:400 15px var(--font-d)}
html[data-look="sticker"] .btn{border:2.5px solid var(--ink); border-radius:14px; box-shadow:3px 3px 0 var(--ink); font-family:var(--font-d); font-size:16px; font-weight:400}
html[data-look="sticker"] .btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
html[data-look="sticker"] .btn.ghost{background:#fff; color:var(--ink)}
html[data-look="sticker"] .btn.ghost:hover{background:#fff6dc}

/* ---------- Control panel: a beige instrument panel with lamps and keys. Light. ---------- */
html[data-look="panel"]{
  --mono:"IBM Plex Mono",Consolas,monospace;
  --bg:#e6e2d8; --bg2:#d6d2c6; --bg3:#f4f1ea; --bg4:#e7e3d9;
  --fill:rgba(29,29,27,.18); --fill2:rgba(29,29,27,.13); --fill3:rgba(29,29,27,.08); --fill4:rgba(29,29,27,.055);
  --label:#1d1d1b; --label2:#4a4a45; --label3:#8a867a; --sep:rgba(29,29,27,.16);
  --blue:#a84a00; --green:#2b7a30; --red:#c0392b; --orange:#c26a00; --yellow:#7a5600; --teal:#006f8e;
  --btn:#1a1a18; --on-btn:#f4f1ea; --on:#ff8a00; --on-fg:#1a1a18; --warn:#7a3f00;
  --cta-bg:#1a1a18; --seg-on:#cfcabd; --seg-on-fg:#1d1d1b; --hover:rgba(29,29,27,.06);
  --edge:#bdb8aa; --edge2:#bdb8aa;
  --glass:#f4f1ea; --glass-hover:#ffffff; --glass-bd:#bdb8aa;
  --bulb:rgba(29,29,27,.3); --bulb-major:rgba(29,29,27,.55); --bulb-on:#ff8a00;
  --font:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif; --font-d:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  color-scheme:light}
html[data-look="panel"] .panel{border:1px solid #bdb8aa; border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.12)}
html[data-look="panel"] .modal{border-radius:12px}
html[data-look="panel"] .pk-chip.all[aria-selected="true"]{background:#1a1a18; color:#f4f1ea}
html[data-look="panel"] :is(.skin-cta,.list-cta,.look-btn){--label:#f4f1ea; --label2:#b9b4a6; color:#f4f1ea; background:#1a1a18; border:0; border-radius:8px; box-shadow:inset 0 2px 6px rgba(0,0,0,.7); animation:none}
html[data-look="panel"] :is(.skin-cta,.list-cta,.look-btn)::before{display:none}
html[data-look="panel"] :is(.skin-cta,.list-cta,.look-btn):hover{animation:none}
html[data-look="panel"] .look-btn{color:#ff8a00; border-radius:8px}
html[data-look="panel"] .look-btn svg{filter:drop-shadow(0 0 4px rgba(255,138,0,.7))}
html[data-look="panel"] .skin-swatch{border-radius:4px; box-shadow:0 0 0 1.5px #55534b}
html[data-look="panel"] .skin-swatch::after{border-radius:2px; box-shadow:none}
html[data-look="panel"] .list-swatch{background:#000; box-shadow:inset 0 0 0 1px #4a4a44}
html[data-look="panel"] .list-swatch::after{inset:0; border-radius:0; background:none; box-shadow:none; color:#ff8a00; text-shadow:0 0 8px rgba(255,138,0,.8); font:700 17px/1 var(--mono)}
html[data-look="panel"] .skin-cta-text b{font-size:16.5px; font-weight:600}
html[data-look="panel"] .skin-cta-text small{font-style:normal}
html[data-look="panel"] .skin-cta-now{border-radius:3px; background:#000; color:#ff8a00; font-family:var(--mono); font-weight:700; text-shadow:0 0 6px rgba(255,138,0,.7)}
html[data-look="panel"] :is(.icon-btn,.tool){border:1px solid #8f8b80; border-bottom:3px solid #6e6a5f; border-radius:5px; background:linear-gradient(#f4f2ec,#d4d0c4)}
html[data-look="panel"] :is(.icon-btn,.tool):hover:not(:disabled){background:linear-gradient(#fbfaf7,#dedacd)}
html[data-look="panel"] .seg{background:none; padding:0; gap:6px}
html[data-look="panel"] .seg button{position:relative; height:38px; padding:8px 4px 0; border:1px solid #8f8b80; border-bottom:4px solid #6e6a5f; border-radius:4px; background:linear-gradient(#f4f2ec,#d4d0c4); color:#1d1d1b; font:700 14px var(--mono)}
html[data-look="panel"] .seg button::before{content:""; position:absolute; top:5px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#4a4640}
html[data-look="panel"] .seg button:hover:not(:disabled):not(.on):not(.active){background:linear-gradient(#fbfaf7,#dedacd)}
html[data-look="panel"] .seg button.on,html[data-look="panel"] .seg button.active{border-bottom-width:2px; background:var(--seg-on); box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
html[data-look="panel"] .seg button.on::before,html[data-look="panel"] .seg button.active::before{background:#ff8a00; box-shadow:0 0 6px #ff8a00}
html[data-look="panel"] .list-cta .seg{gap:4px}
html[data-look="panel"] .list-cta .seg button{height:34px; min-width:24px; padding:7px 0 0; font-size:13px}
html[data-look="panel"] .tabs{gap:4px}
html[data-look="panel"] .tabs .tab{height:auto; padding:8px 12px; border:0; border-radius:3px; background:none; box-shadow:none; color:var(--label); font:700 15px var(--font)}
html[data-look="panel"] .tabs .tab::before{display:none}
html[data-look="panel"] .tabs .tab.active{background:#1a1a18; color:#f4f1ea}
html[data-look="panel"] .tabs .tab.active .badge{color:#ff8a00}
html[data-look="panel"] .roster{background:none; display:flex; flex-direction:column; gap:6px}
html[data-look="panel"] .row{flex:none; padding:7px 10px; border:1px solid #bdb8aa; border-radius:6px; background:#f4f1ea}
html[data-look="panel"] .row + .row::before{display:none}
html[data-look="panel"] .row.off{background:#ebe8e0}
html[data-look="panel"] .row-name{font-size:17px; font-weight:600}
html[data-look="panel"] .row-main::before{content:""; flex:none; width:8px; height:8px; margin-right:-2px; border-radius:50%; background:#8d897d}
html[data-look="panel"] .row:not(.off) .row-main::before{background:#ff8a00; box-shadow:0 0 6px #ff8a00}
html[data-look="panel"] .row .av-wrap svg{box-shadow:0 0 0 2px #1d1d1b}
html[data-look="panel"] .row.locked .av-wrap svg{box-shadow:0 0 0 2px var(--orange)}
html[data-look="panel"] .switch{width:68px; height:32px}
html[data-look="panel"] .switch i{border:1px solid #111; border-radius:4px; background:#2b2b28; box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
html[data-look="panel"] .switch i::before{content:"OFF"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:#a8a498; font:700 10px/1 var(--mono)}
html[data-look="panel"] .switch i::after{top:2px; left:2px; width:34px; height:26px; border:1px solid #8f8b80; border-radius:3px; background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(0,0,0,.18) 5px 6px), linear-gradient(#f6f4ee,#c9c5ba); box-shadow:0 2px 3px rgba(0,0,0,.45)}
html[data-look="panel"] .switch input:checked + i{background:#2b2b28}
html[data-look="panel"] .switch input:checked + i::before{content:"ON"; right:auto; left:9px; color:#ff8a00; text-shadow:0 0 6px rgba(255,138,0,.8)}
html[data-look="panel"] .switch input:checked + i::after{transform:translateX(29px)}
html[data-look="panel"] .add-row{border:1.5px dashed #8a867a; border-radius:6px; background:none}
html[data-look="panel"] .add-ic{width:22px; height:22px; border:1.5px solid #1d1d1b; border-radius:3px; background:none; color:#1d1d1b; font:700 16px var(--mono)}
html[data-look="panel"] .add-row .text-btn{padding:8px 14px; border-radius:3px; background:#1a1a18; color:#f4f1ea; font-weight:700}
html[data-look="panel"] .add-row .text-btn:hover{background:#33332f}
html[data-look="panel"] .btn{border-radius:4px; font-weight:700}
html[data-look="panel"] .btn.ghost{border:1px solid #8f8b80; border-bottom:3px solid #6e6a5f; background:linear-gradient(#f4f2ec,#d4d0c4); color:#1d1d1b}
html[data-look="panel"] .btn.ghost:hover{background:linear-gradient(#fbfaf7,#dedacd)}

/* ---------- Raffle ticket: teal, cream tickets with punched edges, red stamps. ---------- */
html[data-look="ticket"]{
  --ticket:#fbf3e0; --stub:#b9ae94; --ink:#1c2b2d; --stamp:#d4312c; --notch:var(--bg);
  --bg:#0f5a62; --bg2:#0b4850; --bg3:#14707a; --bg4:#1b8590;
  --fill:rgba(251,243,224,.24); --fill2:rgba(251,243,224,.18); --fill3:rgba(251,243,224,.12); --fill4:rgba(251,243,224,.08);
  --label:#fbf3e0; --label2:rgba(251,243,224,.76); --label3:rgba(251,243,224,.48); --sep:rgba(251,243,224,.2);
  --blue:#ffcf5a; --green:#8be5b8; --red:#ff9288; --orange:#ffb347; --yellow:#ffd479; --teal:#9ee7f0;
  --btn:#d4312c; --on-btn:#fbf3e0; --on:#d4312c; --on-fg:#fbf3e0; --warn:#ffe2a8;
  --cta-bg:#fbf3e0; --seg-on:#fbf3e0; --seg-on-fg:#1c2b2d; --hover:rgba(251,243,224,.08);
  --edge:rgba(251,243,224,.22); --edge2:rgba(251,243,224,.3);
  --glass:rgba(11,72,80,.85); --glass-hover:#0b4850; --glass-bd:rgba(251,243,224,.3);
  --font:Karla,"Segoe UI",Roboto,Arial,sans-serif; --font-d:Oswald,Impact,"Segoe UI",sans-serif;
  color-scheme:dark}
html[data-look="ticket"] .panel{--notch:var(--bg2); border:1.5px dashed rgba(251,243,224,.28); border-radius:14px}
html[data-look="ticket"] .modal{border:1.5px dashed rgba(251,243,224,.3); border-radius:14px}
html[data-look="ticket"] :is(.skin-cta,.list-cta){--label:var(--ink); --label2:#4a5a5c; color:var(--ink); border:0; border-radius:8px; animation:none;
  background:radial-gradient(circle at 0 50%, var(--notch) 0 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--notch) 0 9px, transparent 9.5px), var(--ticket)}
html[data-look="ticket"] :is(.skin-cta,.list-cta,.look-btn)::before{display:none}
html[data-look="ticket"] :is(.skin-cta,.list-cta,.look-btn):hover{animation:none}
html[data-look="ticket"] .list-cta{padding:0 18px 0 12px}
html[data-look="ticket"] .look-btn{border:0; border-radius:8px; background:var(--stamp); color:var(--ticket); outline:2px dashed rgba(251,243,224,.55); outline-offset:-5px; animation:none; transform:rotate(-4deg)}
html[data-look="ticket"] .look-btn:hover{transform:rotate(-4deg) scale(1.05)}
html[data-look="ticket"] .skin-swatch{box-shadow:0 0 0 2px var(--ink)}
html[data-look="ticket"] .skin-swatch::after{box-shadow:0 0 0 1.5px var(--ink)}
html[data-look="ticket"] .list-swatch{width:34px; height:36px; border-radius:0; background:none; box-shadow:none; border-right:2px dashed var(--stub)}
html[data-look="ticket"] .list-swatch::after{inset:0; border-radius:0; background:none; box-shadow:none; color:#8a2b27; font:700 28px/1 var(--font-d); padding-right:2px}
html[data-look="ticket"] .skin-cta-text b{font-size:16.5px; font-weight:700}
html[data-look="ticket"] .skin-cta-text small{font-style:normal}
html[data-look="ticket"] .skin-cta-now{background:rgba(28,43,45,.1); color:var(--ink)}
@media (max-width:520px){   /* the ticket banner is wider than the others: tighten it so the name and the 1–4 still fit side by side on a phone */
  html[data-look="ticket"] .list-cta{padding:0 12px 0 8px; gap:6px}
  html[data-look="ticket"] .list-swatch{width:28px}
  html[data-look="ticket"] .list-swatch::after{font-size:24px}
  html[data-look="ticket"] .list-cta .skin-cta-text b{font-size:15px}
  html[data-look="ticket"] .list-cta .seg{gap:3px}
}
html[data-look="ticket"] .seg{background:none; padding:0; gap:6px}
html[data-look="ticket"] .seg button{height:36px; border:2px solid rgba(251,243,224,.55); border-radius:6px; background:none; color:var(--label); font:700 17px var(--font-d)}
html[data-look="ticket"] .seg button:hover:not(:disabled):not(.on):not(.active){background:rgba(251,243,224,.1)}
html[data-look="ticket"] .seg button.on,html[data-look="ticket"] .seg button.active{border-color:var(--ticket); background:var(--ticket); color:var(--ink); box-shadow:none}
html[data-look="ticket"] .list-cta .seg{gap:4px}
html[data-look="ticket"] .list-cta .seg button{height:32px; min-width:24px; padding:0 3px; border:1.5px solid var(--ink); border-radius:5px; color:var(--ink); font-size:16px}
html[data-look="ticket"] .list-cta .seg button:hover:not(:disabled):not(.on){background:rgba(28,43,45,.08)}
html[data-look="ticket"] .list-cta .seg button.on{border-color:var(--ink); background:var(--ink); color:var(--ticket)}
html[data-look="ticket"] .tabs{gap:4px; align-items:flex-end}
html[data-look="ticket"] .tabs .tab{height:auto; padding:8px 12px; border:0; border-bottom:3px dashed rgba(251,243,224,.4); border-radius:6px 6px 0 0; background:none; box-shadow:none; color:var(--label); font:700 15px var(--font)}
html[data-look="ticket"] .tabs .tab.active{border-bottom:3px solid var(--stamp); background:var(--ticket); color:var(--ink)}
html[data-look="ticket"] .tabs .tab.active .badge{color:#4a5a5c}
html[data-look="ticket"] .roster{background:none; display:flex; flex-direction:column; gap:8px; counter-reset:tk}
html[data-look="ticket"] .row{--label:var(--ink); --label2:#4a5a5c; --label3:#8b9593; --warn:#8a4b00; flex:none; counter-increment:tk; padding:7px 18px 7px 14px; border-radius:8px; color:var(--ink);
  background:radial-gradient(circle at 0 50%, var(--notch) 0 8px, transparent 8.5px), radial-gradient(circle at 100% 50%, var(--notch) 0 8px, transparent 8.5px), var(--ticket)}
html[data-look="ticket"] .row + .row::before{display:none}
html[data-look="ticket"] .row.off{--ticket:#e6dec9}
html[data-look="ticket"] .row-name{font-size:17px; font-weight:700}
html[data-look="ticket"] .row-main::before{content:counter(tk, decimal-leading-zero); display:flex; flex:none; align-items:center; justify-content:center; width:34px; height:40px; margin-right:-2px; padding-right:2px; border-right:2px dashed var(--stub); color:#8a2b27; font:700 17px var(--font-d)}
html[data-look="ticket"] .row-main:hover .av-wrap svg{box-shadow:0 0 0 2px var(--stamp)}
html[data-look="ticket"] .switch{width:58px; height:38px}
html[data-look="ticket"] .switch i{display:grid; place-items:center; border:2.5px solid rgba(28,43,45,.32); border-radius:6px; background:none; color:rgba(28,43,45,.4); font:700 19px/1 var(--font-d); letter-spacing:.08em; transition:transform .2s, color .2s, border-color .2s, background .2s}
html[data-look="ticket"] .switch i::before{content:"OUT"}
html[data-look="ticket"] .switch i::after{display:none}
html[data-look="ticket"] .switch input:checked + i{border-color:var(--stamp); background:rgba(212,49,44,.06); color:var(--stamp); transform:rotate(-4deg)}
html[data-look="ticket"] .switch input:checked + i::before{content:"IN"}
html[data-look="ticket"] .add-row{border:1.5px dashed rgba(251,243,224,.5); border-radius:8px; background:none}
html[data-look="ticket"] .add-row .text-btn{padding:7px 14px; border-radius:5px; background:var(--ticket); color:var(--ink); font-weight:700}
html[data-look="ticket"] .add-row .text-btn:hover{background:#fff}
html[data-look="ticket"] .btn{border-radius:6px; font-family:var(--font-d); font-weight:700; letter-spacing:.04em}

/* wheels of things and of tasks: no team (no "next working day", no one-liners) */
.win-modal.plain .day-card,.win-modal.plain .joke{display:none}

/* ===== wheels of an account (js/wheels.js): the bar above the list, "My wheels" and the assistant ===== */
.list-cta.wheel-cta .seg{flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding:0; background:none}
.list-cta.wheel-cta .seg button{min-width:0; height:30px; padding:0 11px; border-radius:15px; background:var(--fill3); color:var(--label); font-size:12.5px; white-space:nowrap}
.list-cta.wheel-cta .seg button:hover{background:var(--fill2)}
.list-cta.wheel-cta .list-swatch::after{font-size:13px}
/* the bar may take two rows when the panel is narrow (the name above, the words below); the looks give the little number buttons of the lists a 3px padding, the words need more */
.list-cta.wheel-cta{flex-wrap:wrap; height:auto; min-height:48px; padding-block:6px; row-gap:6px}
.list-cta.wheel-cta .skin-cta-text{flex:1 1 92px}
.list-cta.wheel-cta .seg{flex:1 1 auto}
html[data-look] .list-cta.wheel-cta .seg button{min-width:0; padding:0 10px; white-space:nowrap}
.wheel-sheet{width:min(620px,100%); max-height:min(88vh,860px)}
.wz-body{gap:14px; padding-bottom:18px}
.wz-sub{margin:0; font-size:13.5px; line-height:1.4; color:var(--label2)}
.wz-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:2px}
.wz-actions .btn{flex:0 1 auto}
.wz-actions .set-help{flex:1 1 100%; margin:2px 0 0}
.wz-err{margin:0; font-size:13.5px; line-height:1.35; color:#ff453a}
.wz-err:empty{display:none}
.wz-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.wz-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 12px 13px; border:0; border-radius:16px; background:var(--bg3); color:var(--label);
  font:inherit; text-align:left; cursor:pointer; min-width:0; transition:transform .15s, background .15s}
.wz-card:hover{background:var(--fill3)}
.wz-card:active{transform:scale(.97)}
.wz-card:focus-visible,.wz-chip:focus-visible,.wz-pill:focus-visible{outline:2px solid var(--label); outline-offset:2px}
.wz-card .wz-ic{font-size:28px; line-height:1.1}
.wz-card .wz-nm{font:650 15px/1.2 var(--font-d); letter-spacing:-.01em}
.wz-card .wz-hint{font-size:12.5px; line-height:1.3; color:var(--label2)}
.wz-chips{display:flex; flex-wrap:wrap; gap:8px}
.wz-chip{display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:42px; padding:6px 13px 6px 10px; border:2px solid transparent; border-radius:21px; background:var(--bg3);
  color:var(--label); font:inherit; font-size:14px; cursor:pointer; transition:background .15s, border-color .15s}
.wz-chip .wz-ic{font-size:19px; line-height:1}
.wz-chip small{color:var(--label2); font-size:12px; font-variant-numeric:tabular-nums}
.wz-chip[aria-pressed="true"]{border-color:var(--btn,var(--blue)); background:var(--fill3)}
.wz-steps{display:flex; gap:4px; margin:0 0 12px; overflow-x:auto; scrollbar-width:none}   /* the guide: where you are */
.wz-steps::-webkit-scrollbar{display:none}
.wz-step{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:10px; background:var(--fill4); color:var(--label2); font:600 12px/1.15 var(--font)}
.wz-step-n{flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--fill3); font:700 11px var(--font)}
.wz-step-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wz-step.now{background:var(--fill2); color:var(--label)}
.wz-step.now .wz-step-n{background:var(--btn, var(--blue)); color:var(--on-btn, #fff)}
.wz-step.done .wz-step-n{background:var(--green); color:#fff}
.wz-sections{display:flex; flex-direction:column; gap:14px}
.wz-sec-h{font:700 16px/1.2 var(--font-d)}
.wz-sec-hint{margin:2px 0 8px; color:var(--label2); font:500 12.5px/1.3 var(--font)}
.wz-guide{display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--label2); font:500 13px var(--font); cursor:pointer}
.wz-guide input{width:18px; height:18px; accent-color:var(--blue)}
.wz-how{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px}
.wz-how-opts{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:12px}
.wz-how-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.wz-how-l{min-width:70px; color:var(--label2); font:600 13px var(--font)}
.wz-preview{flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 auto}
.wz-preview canvas{border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.wz-preview-n{color:var(--label2); font:500 12px var(--font)}
.wz-skip{margin-right:auto}
.wz-namebox{position:relative; display:block}
.wz-namebox .wz-input{width:100%; padding-right:40px}
.wz-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:50%; background:var(--fill3); color:var(--label2); font:600 18px/1 var(--font); cursor:pointer}
.wz-clear:hover{background:var(--fill2); color:var(--label)}
.wz-url{font:500 14px var(--font); user-select:all}
@media (max-width:640px){                                     /* the guide fills a phone */
  #wheelSheet{padding:0}
  #wheelSheet .modal{width:100%; max-width:none; height:100%; max-height:none; border-radius:0; border:0; box-shadow:none; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
  .wz-step-t{display:none}
  .wz-step.now .wz-step-t{display:block}
}
.wz-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.wz-tools .btn{height:36px; padding:0 14px; font-size:14px}
.wz-tot{margin-left:auto; color:var(--label2); font-size:12.5px; font-variant-numeric:tabular-nums}
.wz-replace{display:flex; flex-direction:column; gap:8px}
.wz-replace[hidden]{display:none}
.wz-lab{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--label2)}
.wz-input{width:100%; min-width:0; box-sizing:border-box; padding:10px 12px; border:0; border-radius:12px; background:var(--bg3); color:var(--label); font:500 15px/1.35 var(--font)}
.wz-input:focus-visible{outline:2px solid var(--btn,var(--blue)); outline-offset:1px}
.wz-people{resize:vertical; min-height:96px}
.wz-copy{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.wz-copy .wz-sub{flex:1 1 100%}
.wz-copy .btn{height:36px; padding:0 14px; font-size:14px}
.wz-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:var(--label2)}
.wz-head small{font-weight:500; font-variant-numeric:tabular-nums}
.wz-pills{display:flex; flex-wrap:wrap; gap:6px; max-height:min(34vh,300px); overflow:auto; padding:2px}
.wz-pill{max-width:100%; min-height:34px; padding:5px 12px; border:1.5px solid var(--fill3); border-radius:17px; background:transparent; color:var(--label2); font:inherit; font-size:13.5px;
  text-align:left; cursor:pointer; text-decoration:line-through; text-decoration-color:transparent; transition:background .15s, color .15s}
.wz-pill[aria-pressed="true"]{background:var(--fill3); border-color:var(--fill3); color:var(--label)}
.wz-pill[aria-pressed="false"]{text-decoration-color:currentColor; opacity:.7}
.wz-add{display:flex; gap:8px}
.wz-add .btn{height:42px; padding:0 14px}
.wz-list{display:flex; flex-direction:column; gap:8px}
.wz-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:11px 12px; border-radius:16px; background:var(--bg3); border:2px solid transparent}
.wz-row.now{border-color:var(--btn,var(--blue))}
.wz-row-text{min-width:0; flex:1 1 160px}
.wz-row-name{font:650 15px/1.25 var(--font-d); overflow-wrap:anywhere}
.wz-row-sub{font-size:12.5px; color:var(--label2); margin-top:2px}
.wz-row-acts{display:flex; flex-wrap:wrap; gap:6px}
.wz-row-acts .btn{height:34px; padding:0 12px; font-size:13.5px}
.btn.danger{background:#ff453a; color:#fff}
.btn:disabled{opacity:.45; cursor:default}
@media (max-width:420px){ .wz-grid{grid-template-columns:1fr 1fr} .wheel-sheet{max-height:92vh} }

/* ===== pair wheel: the inner wheel of jobs, the job in the winner dialog, the list of jobs ===== */
.task-ring{position:absolute; left:27%; top:27%; width:46%; height:46%; z-index:4; pointer-events:none; border-radius:50%; box-shadow:0 1.2cqi 5cqi rgba(0,0,0,.55)}
.task-ring canvas{display:block; width:100%; height:100%; border-radius:50%; will-change:transform}
.task-mark{position:absolute; left:50%; top:-2.6%; width:0; height:0; margin-left:-1.1cqi; border:1.1cqi solid transparent; border-top:2cqi solid #fff; border-bottom:0; filter:drop-shadow(0 .2cqi .4cqi rgba(0,0,0,.7))}
.win-task{display:flex; flex-direction:column; align-items:center; gap:4px; margin:6px 16px 0; font:700 clamp(22px,4.4vw,32px)/1.15 var(--font-d); color:#ffd60a; text-align:center; overflow-wrap:anywhere}
.win-task .wt-row{display:block}
.win-task .wt-who{color:var(--label2,#aeaeb2); font-weight:600; font-size:.7em}
.win-task .wt-job{color:#ffd60a}
.win-modal.multi .win-task{font-size:clamp(16px,3vw,22px)}
.tasks-box{display:flex; flex-direction:column; flex:1; gap:10px; min-height:0}
.tasks-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.tasks-head h4{margin:0; font:650 15px/1.2 var(--font-d)}
.tasks-head small{color:var(--label2); font-variant-numeric:tabular-nums}
.task-list{display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; flex:1 1 auto; min-height:60px; overflow:auto; padding:2px}
.task-chip{display:inline-flex; align-items:center; gap:4px; max-width:100%; min-height:32px; padding:3px 4px 3px 12px; border-radius:16px; background:var(--fill3); color:var(--label); font-size:13.5px; overflow-wrap:anywhere}
.task-chip button{flex:none; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--label2); cursor:pointer}
.task-chip button:hover{background:var(--fill2); color:var(--label)}
.task-chip button svg{width:12px; height:12px}
.task-none{margin:0; font-size:13px; color:var(--label2)}
.tasks-box .add-row{margin:0}
.tasks-box .btn{align-self:flex-start; height:38px; font-size:14px}
.deal-table{display:flex; flex-direction:column; gap:8px}
.deal-row{display:grid; grid-template-columns:minmax(80px,32%) 1fr; gap:4px 12px; padding:10px 12px; border-radius:14px; background:var(--bg3); align-items:start}
.deal-who{font:650 15px/1.25 var(--font-d); overflow-wrap:anywhere}
.deal-jobs{display:flex; flex-wrap:wrap; gap:6px}
.deal-job{padding:3px 10px; border-radius:14px; background:var(--fill3); font-size:13.5px; overflow-wrap:anywhere}
.deal-none{color:var(--label2); font-size:13px}
@media (max-width:420px){ .deal-row{grid-template-columns:1fr} }
.wz-h{margin-top:6px}
.wz-tpl{position:relative; display:flex}
.wz-tpl .wz-card{flex:1}
.wz-tpl-del{position:absolute; top:6px; right:6px; min-width:26px; height:26px; padding:0 7px; border:0; border-radius:13px; background:var(--fill3); color:var(--label2); font:600 15px/1 var(--font); cursor:pointer}
.wz-tpl-del:hover{background:var(--fill2); color:var(--label)}
.wz-tpl-del.armed{background:#ff453a; color:#fff; font-size:12px}

/* header on a phone (after the looks, which set the width of the title for their own fonts) */
@media (max-width:520px){                                      /* phone: the title takes what the three buttons leave, so the buttons do not drop under it */
  .brand{flex:1 1 0}
  #title,html[data-look="hold"] #title{flex:1 1 0; width:auto}
  .top-actions{gap:6px}
}
html[data-look] .rail-act.armed{background:#ff453a; color:#fff; border-color:#ff453a}