/* Ruby’s Lounge · shared Turn Timer (v20261101tt1): see turn-timer.js. Everything is SVG/CSS, crisp at any size; nothing animates in a way that blocks a tap. */
#tt-root{--tt-c:#ff4f9a;--tt-d:#d12a74;--tt-s:44px;position:fixed;inset:0;z-index:2147483000;pointer-events:none;font-family:ui-rounded,"Arial Rounded MT Bold","Nunito",system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#tt-root[hidden]{display:none!important}
#tt-root *{box-sizing:border-box}
#tt-root button{font:inherit;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:none;cursor:pointer;padding:0;margin:0}
#tt-root [hidden]{display:none!important}
/* ---- the corner key: little ones' games keep it in the top strip, right after the back + sound keys; the lounge games, bottom-left ---- */
.tt-key{position:absolute;pointer-events:auto;width:var(--tt-s);height:var(--tt-s);border:0;border-radius:50%;background:rgba(120,130,150,.22);color:#6b7386;display:grid;place-items:center;opacity:.6;transition:opacity .2s}
.tt-tots .tt-key{left:calc(94px + env(safe-area-inset-left));top:calc(5px + env(safe-area-inset-top))}
#tt-root.tt-lounge{--tt-s:56px}
.tt-lounge .tt-key{left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.16);color:#d8d2e0}
@media (min-width:1000px) and (min-height:700px){#tt-root.tt-lounge{--tt-s:66px}#tt-root.tt-tots{--tt-s:46px}}
.tt-key .tt-off svg{width:56%;height:56%;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt-key .tt-off{display:grid;place-items:center;width:100%;height:100%}
.tt-key:focus-visible{opacity:1;outline:3px solid #5a6a8a;outline-offset:2px}
.tt-ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none}
.tt-ring circle{fill:none;stroke:#5a6478;stroke-width:6;stroke-dasharray:289.03;stroke-dashoffset:289.03}
.tt-key.hold{opacity:1}.tt-key.hold .tt-ring circle{transition:stroke-dashoffset 2s linear;stroke-dashoffset:0}
.tt-lounge .tt-ring circle{stroke:#fbefe0}
/* the pie: the current kid's color, shrinking clockwise; their shape rides in the middle */
.tt-pie{display:none;position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}
.tt-key.pie{opacity:1;background:transparent}
.tt-key.pie .tt-pie{display:block}.tt-key.pie .tt-off{display:none}
.tt-pbg{fill:#fff}
.tt-ptrack{fill:#eef0f6}
.tt-pfill{fill:none;stroke:var(--tt-c);stroke-width:39;stroke-dasharray:122.52;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .2s}
.tt-key.last .tt-pbg{fill:#fff6c9}
.tt-warn .tt-key.pie{animation:tt-bob 1.1s ease-in-out 3}
@keyframes tt-bob{50%{transform:scale(1.18)}}
/* one-minute bubble: a soft yellow "1" by the pie for a few seconds */
.tt-one{position:absolute;width:calc(var(--tt-s) * .95);height:calc(var(--tt-s) * .95);opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s;pointer-events:none}
.tt-tots .tt-one{left:calc(94px + var(--tt-s) + 8px + env(safe-area-inset-left));top:calc(5px + env(safe-area-inset-top))}
.tt-lounge .tt-one{left:calc(12px + var(--tt-s) + 10px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom))}
.tt-warn .tt-one{opacity:1;transform:none}
.tt-one svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.tt-one circle{fill:#ffe36b;stroke:#fff;stroke-width:6}.tt-one text{font:900 52px ui-rounded,system-ui,sans-serif;fill:#8a5a00}
@media (prefers-reduced-motion:reduce){.tt-warn .tt-key.pie{animation:none}}
/* ---- cards (time up) ---- */
.tt-card{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vmin,28px);padding:calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));touch-action:none;animation:tt-in .3s ease-out}
@keyframes tt-in{from{opacity:0}}
.tt-up{background:radial-gradient(120% 90% at 50% 0%,#fffaf0 0%,#ffeef6 55%,#e9f3ff 100%)}
.tt-done{background:radial-gradient(120% 90% at 50% 10%,#5a6fd0 0%,#3b4aa6 55%,#283680 100%);color:#fff}
.tt-h{margin:0;font-weight:900;line-height:1;letter-spacing:.01em;text-align:center}
.tt-up .tt-h{font-size:clamp(54px,11vmin,130px);color:var(--tt-c);text-shadow:0 4px 0 #fff,0 8px 0 rgba(0,0,0,.08)}
.tt-done .tt-h{font-size:clamp(34px,7vmin,80px);color:#fff6d8;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.tt-share{width:min(84vw,62vmin,640px)}
.tt-hands{display:block;width:100%;height:auto;overflow:visible}
.tt-heart{animation:tt-pass 2.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
@keyframes tt-pass{from{transform:translateX(-26px) rotate(-6deg)}to{transform:translateX(26px) rotate(6deg)}}
.tt-hL{animation:tt-wl 2.6s ease-in-out infinite alternate}.tt-hR{animation:tt-wr 2.6s ease-in-out infinite alternate}
@keyframes tt-wl{to{transform:translateY(-6px)}}@keyframes tt-wr{from{transform:translate(400px,-6px) scale(-1,1)}to{transform:translate(400px,0) scale(-1,1)}}
.tt-spark{animation:tt-tw 1.8s ease-in-out infinite alternate}@keyframes tt-tw{to{opacity:.35}}
.tt-pass{display:flex;align-items:center;gap:clamp(8px,2vmin,22px)}
.tt-pass .tt-badge{display:block}.tt-badge.sm{width:clamp(48px,9vmin,96px);height:auto;opacity:.8}.tt-badge.lg{width:clamp(76px,15vmin,160px);height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.tt-arrow{width:clamp(44px,8vmin,90px);fill:none;stroke:#b7a9c4;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.tt-my{--tt-n:#2f8cff;--tt-nd:#1b62c4;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vmin,26px);width:min(88vw,620px);height:clamp(96px,19vmin,200px);border:7px solid #fff!important;border-radius:999px;background:var(--tt-n);color:#fff;box-shadow:0 10px 0 var(--tt-nd),0 18px 34px rgba(0,0,0,.22);transition:transform .08s,box-shadow .08s,opacity .2s,filter .2s}
.tt-my:active{transform:translateY(6px);box-shadow:0 4px 0 var(--tt-nd),0 8px 18px rgba(0,0,0,.2)}
.tt-my b{font-size:clamp(34px,7vmin,76px);font-weight:900;text-shadow:0 3px 0 var(--tt-nd)}
.tt-my .tt-myb{display:block;height:74%;aspect-ratio:1}.tt-my .tt-myb svg{width:100%;height:100%;display:block}
.tt-my.wait{opacity:.55;filter:saturate(.6);transform:scale(.96)}
.tt-my:focus-visible{outline:5px solid #3a2a5a;outline-offset:6px}
.tt-sleepy{width:min(70vw,50vmin,420px)}.tt-sleepy svg{display:block;width:100%;height:auto}
/* the grey key stays reachable above a card (grown-ups: hold 2 s) */
#tt-root.tt-modal .tt-key{z-index:3}
#tt-root[data-phase=up] .tt-key,#tt-root[data-phase=done] .tt-key{background:rgba(110,120,140,.22);color:#6b7386;opacity:.7}
#tt-root[data-phase=done] .tt-key{background:rgba(255,255,255,.18);color:#e6e9ff}
#tt-root[data-phase=done] .tt-ring circle{stroke:#fff}
/* ---- grown-up setup panel ---- */
.tt-set{position:absolute;inset:0;z-index:4;pointer-events:auto;display:grid;place-items:center;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:rgba(30,24,48,.55);touch-action:none}
.tt-panel{width:min(100%,680px);max-height:100%;overflow:auto;background:#fff;border-radius:34px;padding:clamp(16px,3vmin,30px);display:flex;flex-direction:column;gap:clamp(16px,3vmin,28px);box-shadow:0 24px 60px rgba(0,0,0,.35);color:#3a3550}
.tt-top{display:flex;align-items:center;gap:12px;font-size:clamp(22px,3.4vmin,30px);font-weight:900}
.tt-top b{flex:1}
.tt-ti svg{width:38px;height:38px;fill:none;stroke:#7a7390;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.tt-x{width:60px;height:60px;border:0!important;border-radius:50%;background:#efedf5;color:#5a5470;font-size:40px!important;line-height:1;font-weight:700}
.tt-x:active{background:#e0dcea}
.tt-row{display:flex;gap:clamp(10px,2vmin,18px);align-items:stretch}
/* the lever: one big track, two giant stops (5 and 10), a chunky knob that jumps to whichever side you touch or drag to */
.tt-lever{position:relative;flex:1;min-width:0;height:clamp(110px,18vmin,150px);border-radius:999px;background:linear-gradient(#e9e4f4,#f7f5fb);box-shadow:inset 0 5px 10px rgba(60,40,100,.18),inset 0 -2px 0 #fff;display:grid;grid-template-columns:1fr 1fr;touch-action:none}
.tt-pos{position:relative;z-index:2;border:0!important;background:none;display:flex;align-items:baseline;justify-content:center;gap:4px;color:#8f88a6;transition:color .1s}
.tt-pos b{font-size:clamp(52px,9vmin,80px);font-weight:900;line-height:1;align-self:center}
.tt-pos i{font-style:normal;font-weight:800;font-size:clamp(16px,2.4vmin,22px);align-self:center;margin-top:.9em}
.tt-pos[aria-checked=true]{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.tt-knob{position:absolute;z-index:1;top:8px;bottom:8px;left:8px;width:calc(50% - 8px);border-radius:999px;background:linear-gradient(160deg,#a77bff,#7b4fe0);box-shadow:0 6px 0 #5a2fc0,0 10px 18px rgba(80,40,160,.35);transition:left .12s cubic-bezier(.3,1.4,.5,1),background .12s;cursor:grab;touch-action:none}
.tt-lever.m10 .tt-knob{left:50%}
.tt-knob.drag{cursor:grabbing;box-shadow:0 3px 0 #5a2fc0,0 6px 12px rgba(80,40,160,.3)}
.tt-knob .tt-grip{position:absolute;top:50%;left:50%;width:6px;height:40%;transform:translate(-50%,-50%);border-radius:3px;background:rgba(255,255,255,0);pointer-events:none}
.tt-lever.isoff .tt-knob{background:linear-gradient(160deg,#d4d0de,#bdb7cc);box-shadow:0 6px 0 #9e97b2,0 10px 18px rgba(60,50,90,.2)}
.tt-lever.isoff .tt-pos[aria-checked]{color:#8f88a6}
.tt-offb{flex:none;width:clamp(86px,14vmin,118px);border:4px solid #e2deec!important;border-radius:28px;background:#f6f4fa;color:#8f88a6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tt-offb svg{width:46%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.tt-offb i{font-style:normal;font-weight:900;font-size:clamp(16px,2.4vmin,22px)}
.tt-offb.on{background:#5c566e;border-color:#5c566e!important;color:#fff}
.tt-kids{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vmin,18px)}
.tt-kid{border:0!important;background:none;aspect-ratio:1;border-radius:50%;opacity:.28;filter:grayscale(.5);transform:scale(.9);transition:opacity .08s,transform .08s,filter .08s}
.tt-kid.on{opacity:1;filter:none;transform:none}
.tt-kid .tt-badge{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 0 rgba(0,0,0,.12))}
.tt-kid:active{transform:scale(.94)}
.tt-go{align-self:center;width:clamp(120px,22vmin,170px);height:clamp(120px,22vmin,170px);border:7px solid #fff!important;border-radius:50%;background:linear-gradient(160deg,#5be08f,#22b864);box-shadow:0 8px 0 #14874a,0 14px 26px rgba(20,120,70,.35);display:grid;place-items:center}
.tt-go:active{transform:translateY(5px);box-shadow:0 3px 0 #14874a}
.tt-go svg{width:52%;height:52%;fill:#fff}.tt-go .g-stop{display:none}
.tt-go.stop{background:linear-gradient(160deg,#9a94ad,#6f6884);box-shadow:0 8px 0 #514b65,0 14px 26px rgba(40,30,70,.3)}
.tt-go.stop .g-stop{display:inline}.tt-go.stop .g-play{display:none}
.tt-pos:focus-visible,.tt-offb:focus-visible,.tt-kid:focus-visible,.tt-go:focus-visible,.tt-x:focus-visible{outline:4px solid #5a2fc0;outline-offset:3px}
@media (max-height:560px){.tt-panel{gap:12px;padding:14px}.tt-lever{height:92px}.tt-go{width:96px;height:96px}.tt-kids{max-width:340px;align-self:center;width:100%}}