/* PUZRU Sensory polish • composited motion, reduced visual noise, no external assets. */
:root{--ease-precision:cubic-bezier(.22,.75,.18,1)}
@media(hover:none){button,a{-webkit-tap-highlight-color:transparent!important}}
button,a{touch-action:manipulation}
.cta,.tiny-button,.switcher,.pill,.sound-tools button,.time-signal-button{transition:background-color .18s ease,filter .16s ease,box-shadow .18s ease,transform .16s var(--ease-precision)}
.cta:focus-visible,.time-signal-button:focus-visible{outline:2px solid #e3f6ff;outline-offset:4px}
.game-card .card-icon,.game-card .card-arrow{transition:color .2s ease,background-color .2s ease}
@media(hover:hover){.game-card:hover .card-arrow{color:#fff}.game-card:hover .card-icon{background:#ffffff1a}}
/* Time: the same physical language is used for both listening and reproducing a duration. */
.time-signal-shell{width:100%;height:100%;max-width:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.2vh,12px);color:#ffe4bd;position:relative;min-height:0;padding:6px 10px}
.time-signal-field{width:clamp(114px,22vh,220px);height:clamp(114px,22vh,220px);position:relative;display:grid;place-items:center;flex:0 1 auto;isolation:isolate;contain:layout paint;transform:translateZ(0)}
.signal-orbit{position:absolute;inset:13%;border-radius:50%;border:1.5px solid #ffdcab42;box-shadow:inset 0 0 22px #e7a86b09;opacity:.48;pointer-events:none;will-change:transform,opacity}
.signal-orbit.orbit-b{inset:4%;border-color:#9fd9ed43;opacity:.33}
.signal-orbit.orbit-c{inset:-4%;border-color:#e7bcff32;opacity:.22}
.signal-emitter{width:38%;height:38%;position:relative;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe0b548,#3b3d50b0 58%,#131c30 87%);border:1px solid #ffdfbd62;box-shadow:0 0 35px #f4be8320,inset 0 1px #fff5;transform:translateZ(0)}
.signal-core{width:30%;height:30%;border-radius:50%;background:#fff3e2;box-shadow:0 0 16px #ffe6c8ba,0 0 36px #f5b77875}
.signal-transmitting .signal-orbit.orbit-a{animation:signalExpand 1.35s ease-out infinite}
.signal-transmitting .signal-orbit.orbit-b{animation:signalExpand 1.35s ease-out -.44s infinite}
.signal-transmitting .signal-orbit.orbit-c{animation:signalExpand 1.35s ease-out -.88s infinite}
.signal-transmitting .signal-core{animation:signalBreathe .95s ease-in-out infinite alternate}
.signal-received .signal-orbit{animation:signalFade .32s ease-out both}
@keyframes signalExpand{0%{transform:scale(.79);opacity:.63}100%{transform:scale(1.12);opacity:.07}}
@keyframes signalBreathe{to{transform:scale(1.16);filter:brightness(1.13)}}
@keyframes signalFade{to{transform:scale(1.08);opacity:.05}}
.time-signal-caption{font-size:clamp(10px,2.5vw,12px);font-weight:850;letter-spacing:1.7px;text-align:center;color:#ffdeba;min-height:15px;white-space:nowrap}
.signal-lanes{width:min(94%,320px);display:flex;flex-direction:column;gap:10px;padding:5px 2px}
.signal-lane{display:flex;gap:10px;align-items:center;width:100%;opacity:.35;transition:opacity .23s ease;min-height:14px}
.signal-lane.signal-active,.signal-lane.signal-done{opacity:1}
.signal-lane-label{color:#f5d8b2;font-size:10px;letter-spacing:1px;font-weight:850;width:18px;flex:0 0 18px}
.signal-track{position:relative;flex:1;min-width:0;height:5px;border-radius:99px;background:#ffffff14}
.signal-trail{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#9de2f5,#ffcb9a 74%,#fff2dd);transform-origin:left;opacity:0;box-shadow:0 0 18px #f7c58a5c}
.signal-lane.signal-done .signal-trail{opacity:.08!important}
.signal-bead{position:absolute;top:50%;left:100%;width:10px;height:10px;border-radius:50%;background:#fff1df;box-shadow:0 0 14px #ffce98bb;transform:translate(-50%,-50%);opacity:0}
.signal-lane-done{width:14px;color:#a9edd8;font-size:9px;opacity:0;flex:0 0 14px}
.signal-done .signal-lane-done{opacity:1}
.time-signal-help{font-size:11px;color:#aeb9cb;text-align:center;white-space:nowrap;max-width:100%}
/* Guess field is an actual single-touch button, not a second unrelated UI. */
.time-signal-button{position:relative;width:clamp(174px,31vh,260px);height:clamp(174px,31vh,260px);max-width:min(74vw,270px);max-height:100%;border:0;background:transparent;padding:0;color:#fff5dd;display:grid;place-items:center;isolation:isolate;user-select:none;-webkit-user-select:none;touch-action:none;border-radius:50%;transform:translateZ(0)}
.time-signal-button .guess-field{position:absolute;inset:0;width:100%;height:100%}
.time-signal-button .signal-emitter{width:48%;height:48%;background:radial-gradient(circle at 35% 25%,#c7ceda30,#414251b0 55%,#1d2535 83%);border:1px solid #f5d9b577}
.time-signal-button .signal-orbit{inset:9%;border-color:#ffdda558}.time-signal-button .signal-orbit.orbit-b{inset:1%;border-color:#acd5f54f}.time-signal-button .signal-orbit.orbit-c{inset:-6%;border-color:#d0bfff36}
.time-guess-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center;max-width:88%;text-shadow:0 2px 10px #040812}
.time-guess-copy b{font-size:clamp(13px,3.8vw,17px);letter-spacing:.8px;white-space:nowrap;font-weight:900}
.time-guess-copy small{font-size:clamp(9px,2.7vw,11px);color:#e2d9d1;font-weight:650;line-height:1.3}
.time-signal-button.signal-holding{filter:brightness(1.12);transform:scale(.99)}
.time-signal-button.signal-holding .signal-emitter{box-shadow:0 0 46px #f4bd8e45}
.signal-meter{height:5px;flex:0 0 auto;width:min(80%,320px);align-self:center;background:#253040;overflow:hidden;border-radius:20px}
.signal-meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#7edbf2,#ffe0b4);transform:scaleX(0);transform-origin:left;box-shadow:0 0 15px #acdbef9a}
/* Keep the original time-button fallback styled for older states, but no longer render it. */
@media(max-height:620px){.time-signal-shell{gap:3px;padding:1px 4px}.time-signal-field{width:clamp(76px,17vh,130px);height:clamp(76px,17vh,130px)}.signal-lanes{gap:4px;padding:2px}.time-signal-caption{font-size:9px}.time-signal-help{font-size:9px}.time-signal-button{width:min(44vw,28vh);height:min(44vw,28vh);min-width:105px;min-height:105px}.time-guess-copy b{font-size:12px}.time-guess-copy small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.signal-orbit,.signal-core{animation:none!important;will-change:auto}.time-signal-button,.game-card{transition:none!important}}
/* Time center copy: the bright receiver must never wash out the control label. */
.time-signal-button .signal-core{opacity:.12;box-shadow:0 0 16px #fff2}
.time-signal-button .signal-emitter{background:radial-gradient(circle at 36% 25%,#6f728255,#252d3fc2 62%,#151c29 95%)}
.time-signal-button .time-guess-copy{background:#101724b8;border:1px solid #ffffff1c;padding:9px 12px;border-radius:14px;box-shadow:0 4px 16px #05091080;text-shadow:none}
.time-signal-button.signal-holding .time-guess-copy{border-color:#ffddae55;background:#152033df}