/* ---------- Tick Tock Town ---------- */
.tk { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; --cs: min(60vh, 44vw); --kh: #ff4f9f; --km: #2f8cf0; --ks: #ff5b3a; }
.tk-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tk-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 250, 245, .45); }
.tk-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.tk-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font); font-weight: 700; }
/* top bar: stars, next unlock, the five games */
.tk-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 15; }
.tk-score { display: flex; align-items: center; gap: 8px; padding: 6px 20px 6px 12px; border-radius: 40px; background: #fff; box-shadow: var(--shadow); font-size: 40px; line-height: 1; color: var(--ink); }
.tk-score .ico { width: 44px; height: 44px; }
.tk-stars.bump { display: inline-block; animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.tk-next { width: 60px; height: 60px; flex: none; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p, 0) * 360deg), #eee4f2 0); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.tk-next::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.tk-next > span { position: relative; width: 64%; height: 64%; display: grid; place-items: center; filter: grayscale(.7); opacity: .85; }
.tk-next img, .tk-next svg { width: 100%; height: 100%; object-fit: contain; }
.tk-modes { display: flex; gap: 8px; margin-left: 8px; }
.tk-mode { position: relative; width: clamp(60px, 9.5vh, 78px); height: clamp(60px, 9.5vh, 78px); }
.tk-mode.active { box-shadow: 0 0 0 5px var(--yellow), var(--shadow); background: linear-gradient(135deg, #fff, #fff3c4); }
.tk-mode .tk-price, .tk-mode:not(.tk-locked)::after { display: none; }
.tk-mode.tk-locked .tk-price { display: flex; }
.tk-locked > .ico, .tk-locked > svg, .tk-locked > span:not(.tk-price) { filter: grayscale(1); opacity: .4; }
.tk-locked::after { content: ""; position: absolute; left: 50%; top: 46%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(../assets/img/ui_lock.png) center / contain no-repeat; }
.tk-price { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 1px 8px 1px 4px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-size: 18px; color: var(--ink); white-space: nowrap; z-index: 2; }
.tk-price .ico { width: 22px; height: 22px; }
/* main area */
.tk-main { position: absolute; left: 0; right: 0; top: clamp(92px, 14vh, 112px); bottom: 0; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 56px); padding: 0 16px max(10px, env(safe-area-inset-bottom)); }
.tk-left { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.tk-clock { position: relative; width: var(--cs); height: var(--cs); touch-action: none; cursor: grab; filter: drop-shadow(0 10px 0 rgba(120, 70, 140, .16)) drop-shadow(0 16px 24px rgba(120, 70, 140, .2)); }
.tk-clock.tk-grab { cursor: grabbing; }
.tk-clock .tk-svg [data-show] { transition: opacity .3s; }
.tk-svg[data-show="bird"] .tk-mh, .tk-svg[data-show="bird"] .tk-hh, .tk-svg[data-show="bunny"] .tk-hh, .tk-svg[data-show="tortoise"] .tk-sh { opacity: .25; }
/* the cuckoo lives behind a little door at the top of the clock */
.tk-cuckoo { position: absolute; left: 50%; top: -3%; width: 20%; aspect-ratio: 1; transform: translate(-50%, 10%) scale(0); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); z-index: 3; pointer-events: none; }
.tk-cuckoo.out { transform: translate(-50%, -62%) scale(1); }
.tk-cuckoo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.tk-cuckoo.peck img { animation: tk-peck .4s ease-out; }
@keyframes tk-peck { 30% { transform: translateY(-14%) rotate(-10deg) scale(1.12); } }
.tk-cuckoo b { position: absolute; left: 96%; top: -6%; min-width: 1.5em; padding: 0 .3em; border-radius: 1em; background: #fff; box-shadow: var(--shadow); font-size: clamp(24px, 5vh, 40px); line-height: 1.5em; text-align: center; color: var(--kh); }
.tk-cuckoo b:empty { display: none; }
.tk-cuckoo.peck b { animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
/* under the clock: the digital display in the hands' colours, and the step buttons */
.tk-under { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 18px); }
.tk-digi-btn { display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-radius: 22px; background: #3a2f4f; border: 5px solid #fff; box-shadow: var(--shadow); }
.tk-digi { display: inline-flex; align-items: baseline; font-size: clamp(34px, 7.4vh, 58px); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.tk-digi .tk-dh { color: #ff8cc3; min-width: 1.15em; text-align: right; } .tk-digi .tk-dm { color: #7cc0ff; } .tk-digi .tk-ds { color: #ff9a7a; font-size: .7em; }
.tk-digi i { font-style: normal; color: #fff; opacity: .8; margin: 0 2px; }
.tk[data-mode="hands"] .tk-digi i { animation: tk-blink 1s steps(2) infinite; }
@keyframes tk-blink { 50% { opacity: .2; } }
.tk-ampm { width: clamp(30px, 6vh, 46px); height: clamp(30px, 6vh, 46px); object-fit: contain; }
.tk-step { width: clamp(60px, 10vh, 80px); height: clamp(60px, 10vh, 80px); border-radius: 50%; transition: transform .12s; filter: drop-shadow(0 6px 0 rgba(120, 70, 140, .18)); }
.tk-step svg { width: 100%; height: 100%; display: block; }
.tk-step:active { transform: scale(.9); }
.tk-key { width: clamp(60px, 10vh, 80px); height: clamp(60px, 10vh, 80px); }
.tk-key.on { box-shadow: 0 0 0 5px var(--yellow), var(--shadow); }
.tk-key.on .ico { animation: tk-wind .6s linear infinite; }
@keyframes tk-wind { to { transform: rotate(360deg); } }
/* day: a window on the world that follows the clock */
.tk-right { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(46vw, 560px); min-width: 0; }
.tk-window { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 58vh; border-radius: 30px; border: 8px solid #fff; box-shadow: var(--shadow); overflow: hidden; background: #cdeeff; }
.tk-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tk-starfield { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(3px 3px at 28% 42%, #fff, transparent), radial-gradient(2px 2px at 44% 12%, #fff, transparent), radial-gradient(2px 2px at 58% 34%, #ffe9a8, transparent), radial-gradient(3px 3px at 72% 16%, #fff, transparent), radial-gradient(2px 2px at 86% 40%, #fff, transparent), radial-gradient(2px 2px at 20% 58%, #fff, transparent), radial-gradient(2px 2px at 66% 54%, #fff, transparent), radial-gradient(3px 3px at 92% 10%, #ffe9a8, transparent), radial-gradient(2px 2px at 36% 26%, #fff, transparent); animation: tk-twinkle 2.4s ease-in-out infinite alternate; }
@keyframes tk-twinkle { from { filter: brightness(.7); } to { filter: brightness(1.3); } }
.tk-starfield, .tk-sun, .tk-moon { z-index: 2; }
.tk-sun, .tk-moon { position: absolute; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: opacity .3s; }
.tk-sun img, .tk-moon img { width: 100%; height: 100%; object-fit: contain; }
.tk-hills { position: absolute; left: -10%; right: -10%; bottom: -34%; height: 62%; border-radius: 50%; background: #8fdc8a; box-shadow: 46% -8% 0 -4% #7dd07a; }
.tk-hills::before { content: ""; position: absolute; right: 2%; top: -14%; width: 52%; height: 80%; border-radius: 50%; background: #7acb78; }
.tk-house { position: absolute; left: 12%; bottom: 14%; width: 22%; aspect-ratio: 1 / .8; background: #ffd9b0; border-radius: 6px; }
.tk-roof { position: absolute; left: -12%; right: -12%; bottom: 96%; height: 62%; background: #ff7a7a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tk-win { position: absolute; left: 14%; top: 22%; width: 26%; aspect-ratio: 1; border-radius: 4px; background: #bfe6ff; border: 3px solid #fff; transition: background .4s, box-shadow .4s; }
.tk-win.w2 { left: auto; right: 14%; }
.tk-lit .tk-win { background: #ffe066; box-shadow: 0 0 18px 6px rgba(255, 224, 102, .7); }
.tk-door { position: absolute; left: 40%; bottom: 0; width: 20%; height: 44%; border-radius: 40% 40% 0 0; background: #b5793f; }
.tk-dark { position: absolute; inset: 0; z-index: 1; background: #14164a; opacity: 0; pointer-events: none; }
.tk-lit .tk-dark { mask-image: radial-gradient(circle at 23% 72%, transparent 0 9%, #000 22%); -webkit-mask-image: radial-gradient(circle at 23% 72%, transparent 0 9%, #000 22%); }
.tk-act { z-index: 3; position: absolute; right: 4%; bottom: 5%; width: 42%; aspect-ratio: 1; border-radius: 28px; background: rgba(255, 255, 255, .92); border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.tk-act img { width: 88%; height: 88%; object-fit: contain; }
.tk-act.pop { animation: tk-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tk-pop { from { transform: scale(.4) rotate(-8deg); } }
.tk-strip { display: flex; gap: 6px; padding: 6px 10px; border-radius: 30px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); max-width: 100%; }
.tk-slot { width: clamp(34px, 5.6vh, 46px); height: clamp(34px, 5.6vh, 46px); flex: 0 1 auto; border-radius: 12px; display: grid; place-items: center; min-width: 0; }
.tk-slot img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) opacity(.18); }
.tk-slot.found img { filter: none; }
.tk-slot.now { background: #fff3c4; box-shadow: 0 0 0 3px var(--yellow); }
/* meet the hands */
.tk-hands-right { gap: clamp(10px, 3vh, 26px); }
.tk-friends { display: flex; gap: 12px; width: 100%; }
.tk-friend { position: relative; flex: 1; min-width: 0; aspect-ratio: 1 / 1.12; border-radius: 26px; background: #fff; border: 6px solid var(--c); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; transition: transform .12s; }
.tk-friend:active { transform: scale(.94); }
.tk-friend.active { background: #fff8dc; animation: pulse-plain 1s ease-in-out infinite; }
.tk-friend img { width: 72%; height: 58%; object-fit: contain; }
.tk-len { display: block; width: calc(var(--n) * 5% + 4%); min-width: 6px; height: calc(62% / var(--n)); max-height: 34%; border-radius: 8px; background: var(--c); }
.tk-friend[data-f="bird"] .tk-len { height: 30%; width: 4%; } .tk-friend[data-f="bunny"] .tk-len { height: 26%; width: 8%; } .tk-friend[data-f="tortoise"] .tk-len { height: 14%; width: 13%; }
.tk-new { position: absolute; right: -10px; top: -12px; width: 38px; height: 38px; animation: pulse-plain 1.2s ease-in-out infinite; }
.tk-new .ico { width: 100%; height: 100%; }
.tk-launch { display: flex; align-items: flex-end; justify-content: center; gap: 22px; width: 100%; }
.tk-pad { position: relative; width: 30%; aspect-ratio: 1 / 1.1; border-bottom: 10px solid #9a8aa8; border-radius: 0 0 14px 14px; }
.tk-rocket { position: absolute; left: 8%; bottom: 0; width: 84%; height: 92%; object-fit: contain; }
.tk-rocket.go { animation: tk-liftoff 2s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes tk-liftoff { 0% { transform: translate(0, 0); } 10% { transform: translate(-3px, 2px); } 16% { transform: translate(3px, -2px); } 22% { transform: translate(-2px, 0); } 100% { transform: translate(0, -130vh); } }
.tk-hold { width: clamp(110px, 20vh, 160px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--ks) calc(var(--p, 0) * 360deg), #fff 0); box-shadow: var(--shadow); display: grid; place-items: center; touch-action: none; transition: transform .12s; }
.tk-hold.on { transform: scale(.94); }
.tk-hold > span { position: relative; width: 80%; height: 80%; border-radius: 50%; background: linear-gradient(180deg, #ff8a6e, #ff5b3a); border: 5px solid #fff; display: grid; place-items: center; }
.tk-hold i { width: 62%; height: 62%; background: center / contain no-repeat; pointer-events: none; }   /* a background, not an <img>: nothing for a long press to offer to save */
.tk-hold, .tk-hold * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tk-hold b { position: absolute; right: -6%; top: -6%; min-width: 1.6em; line-height: 1.6em; border-radius: 1em; background: #fff; color: var(--ks); font-size: clamp(22px, 4.4vh, 34px); text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
/* quizzes: which clock, which takes longer */
.tk-quiz { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.6vh, 24px); }
.tk-prompt { display: flex; align-items: center; gap: 16px; }
.tk-speaker { position: relative; width: clamp(90px, 16vh, 130px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; animation: pulse-plain 1.6s ease-in-out infinite; }
.tk-speaker img { width: 74%; height: 74%; object-fit: contain; }
.tk-speaker i { position: absolute; left: 100%; top: 50%; width: 10px; height: 26%; margin-left: 8px; border-radius: 0 40px 40px 0; border: 4px solid var(--km); border-left: 0; transform: translateY(-50%); opacity: .8; }
.tk-speaker i:nth-child(3) { margin-left: 22px; height: 44%; opacity: .55; } .tk-speaker i:nth-child(4) { margin-left: 36px; height: 62%; opacity: .3; }
.tk-bigclock { width: clamp(150px, 30vh, 250px); aspect-ratio: 1; filter: drop-shadow(0 8px 0 rgba(120, 70, 140, .16)); }
.tk-choices { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 30px); width: 100%; }
.tk-card { position: relative; width: min(26vw, 40vh, 300px); aspect-ratio: 1; padding: 1%; border-radius: 34px; background: rgba(255, 255, 255, .9); border: 6px solid #fff; box-shadow: var(--shadow); transition: transform .12s, opacity .3s; }
.tk-choices[data-n="4"] .tk-card { width: min(21vw, 38vh, 260px); }
.tk-card:active { transform: scale(.95); }
.tk-card-digi { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #3a2f4f; }
.tk-card-digi .tk-digi { font-size: clamp(36px, 6vw, 76px); }
.tk-card.dim { opacity: .35; }
.tk-card.right, .tk-dur.right { border-color: #6ddc7a; box-shadow: 0 0 0 6px rgba(109, 220, 122, .5), var(--shadow); animation: tk-yes .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tk-yes { 50% { transform: scale(1.1); } }
.tk-card.shake, .tk-dur.shake { animation: tk-shake .4s; }
@keyframes tk-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.tk-levels { display: flex; gap: 10px; padding: 6px 12px; border-radius: 30px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); }
.tk-level { position: relative; width: clamp(44px, 7vh, 56px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#6ddc7a calc(var(--p, 0) * 360deg), #ece4f6 0); display: grid; place-items: center; font-size: clamp(20px, 3.6vh, 28px); color: var(--ink); }
.tk-level > span { width: 78%; height: 78%; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.tk-level.active > span { background: var(--yellow); }
.tk-level.tk-locked::after { width: 60%; top: 50%; }
.tk-dur { position: relative; width: min(36vw, 52vh, 380px); aspect-ratio: 1 / 1.08; border-radius: 36px; background: rgba(255, 255, 255, .92); border: 6px solid #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; transition: transform .12s; }
.tk-dur:active { transform: scale(.96); }
.tk-dur > img { width: 78%; height: 70%; object-fit: contain; }
.tk-unit { display: flex; align-items: center; gap: 8px; width: 86%; height: 15%; opacity: 0; transition: opacity .4s; }
.tk-unit img { height: 100%; aspect-ratio: 1; object-fit: contain; flex: none; }
.tk-unit i { display: block; height: 46%; width: 0; border-radius: 20px; background: var(--c); transition: width 1s ease-out .2s; }
.tk-choices.reveal .tk-unit { opacity: 1; } .tk-choices.reveal .tk-unit i { width: calc(var(--w) * .8); }
/* set the clock: a friend asks */
.tk-set-right { justify-content: center; }
.tk-bubble { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 34px 34px 34px 8px; background: #3a2f4f; border: 6px solid #fff; box-shadow: var(--shadow); animation: tk-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.tk-bubble .tk-digi { font-size: clamp(40px, 9vh, 76px); }
.tk-mini { width: clamp(80px, 16vh, 130px); aspect-ratio: 1; }
.tk-asker { width: clamp(150px, 34vh, 280px); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.tk-asker.arrive { transform: translateX(60vw); transition: none; }
.tk-asker img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.tk-asker.happy img { animation: tk-bounce .5s ease-in-out infinite alternate; }
@keyframes tk-bounce { to { translate: 0 -14px; } }
/* stars, hearts, unlock card, clock-face picker */
.tk-heart { position: absolute; width: 46px; transform: translate(-50%, -50%); animation: tk-heart 1.5s ease-out forwards; }
.tk-heart .ico { width: 100%; }
@keyframes tk-heart { to { transform: translate(-50%, -260%) scale(1.4); opacity: 0; } }
.tk-starfly { position: absolute; width: 44px; transform: translate(-50%, -50%); animation: tk-tostar .85s ease-in forwards; }
.tk-starfly .ico { width: 100%; }
@keyframes tk-tostar { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5); } }
.tk-unlock { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, .22); }
.tk-unlock-card { width: clamp(200px, 44vh, 320px); aspect-ratio: 1; padding: 5%; border-radius: 40px; background: #fff; border: 8px solid var(--yellow); box-shadow: var(--shadow); display: grid; place-items: center; animation: tk-card .6s cubic-bezier(.34, 1.56, .64, 1); }
.tk-unlock-card img, .tk-unlock-card svg { width: 88%; height: 88%; object-fit: contain; }
@keyframes tk-card { from { transform: scale(0) rotate(-12deg); } }
.tk-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(120, 90, 150, .55); animation: fadein .18s ease-out; }
.tk-panel { width: min(92%, 980px); max-height: 86%; overflow-y: auto; border-radius: 30px; background: #fff; box-shadow: var(--shadow); padding: 22px; animation: slidein .22s ease-out; }
.tk-close { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); }
.tk-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.tk-skin-card { position: relative; aspect-ratio: 1; padding: 10px; border-radius: 26px; border: 5px solid #ece4f6; background: #f6f0ff; box-shadow: 0 6px 0 rgba(120, 70, 140, .14); }
.tk-skin-card.active { border-color: var(--yellow); box-shadow: 0 6px 0 #f4c20d; }
.tk-skin-card .tk-price { bottom: 6px; font-size: 22px; }
@media (orientation: landscape) and (max-height: 640px) {
  .tk { --cs: min(56vh, 40vw); }
  .tk-score { font-size: 30px; } .tk-score .ico { width: 34px; height: 34px; }
  .tk-next { width: 48px; height: 48px; }
}
@media (orientation: portrait) {
  .tk { --cs: min(74vw, 40vh); }
  .tk-top { flex-wrap: wrap; justify-content: center; width: calc(100% - 210px); }
  .tk-main { flex-direction: column; top: clamp(150px, 20vh, 190px); gap: 14px; }
  .tk-right { width: min(92vw, 560px); }
  .tk-window { max-height: 26vh; aspect-ratio: auto; height: 26vh; }
  .tk-act { width: auto; height: 86%; }
  .tk-choices { flex-wrap: wrap; }
  .tk-card, .tk-choices[data-n="4"] .tk-card { width: min(40vw, 22vh); }
  .tk-dur { width: min(44vw, 30vh); }
  .tk-friend { aspect-ratio: 1 / .9; }
}
/* countdown: something to look forward to, as sleeps, as a live counter and as a wedge on the clock */
.tk-mode[data-mode="wait"] { margin-left: 10px; }
.tk-wait { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 18px); }
.tk-ev-tabs { display: flex; gap: 10px; padding: 6px 12px; border-radius: 30px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); }
.tk-ev-tab { width: clamp(50px, 8.5vh, 68px); aspect-ratio: 1; border-radius: 18px; background: #fff; border: 4px solid #ece4f6; display: grid; place-items: center; }
.tk-ev-tab img, .tk-ev-tab svg { width: 84%; height: 84%; object-fit: contain; }
.tk-ev-tab.active { border-color: var(--yellow); background: #fff8dc; }
.tk-wait-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(12px, 2.4vw, 30px); width: min(96%, 1120px); align-items: center; }
.tk-wait-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.tk-ev-card { width: 100%; max-width: 40vh; aspect-ratio: 1; border-radius: 36px; background: rgba(255, 255, 255, .92); border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .12s; }
.tk-ev-card:active, .tk-sleeps:active, .tk-count:active, .tk-wedge:active { transform: scale(.96); }
.tk-ev-card img { width: 86%; height: 86%; object-fit: contain; }
.tk-ev-card.now img { animation: tk-bounce .45s ease-in-out infinite alternate; }
.tk-ev-cap { display: flex; flex-direction: column; align-items: center; font-size: clamp(13px, 2.2vh, 17px); font-weight: 500; color: var(--ink); opacity: .85; text-align: center; line-height: 1.25; }
.tk-ev-cap b { font-weight: 700; }
.tk-ev-bin { width: clamp(48px, 8vh, 64px); height: clamp(48px, 8vh, 64px); opacity: .8; }
.tk-ev-bin.armed { opacity: 1; box-shadow: 0 0 0 5px var(--red), var(--shadow); animation: pulse-plain .6s ease-in-out infinite; }
.tk-sleeps { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; min-height: 40vh; border-radius: 36px; background: linear-gradient(180deg, #2d2a6e, #5a4a9a); border: 6px solid #fff; box-shadow: var(--shadow); transition: transform .12s; }
.tk-sleeps.today { background: linear-gradient(180deg, #6ec0ff, #cdeeff); justify-content: center; }
.tk-sleeps.today .tk-sleeps-n img { height: 1.5em; width: 1.5em; animation: tk-wind 12s linear infinite; }
.tk-sleeps-n { display: flex; align-items: center; gap: 10px; color: #fff; font-size: clamp(54px, 13vh, 110px); line-height: 1; }
.tk-sleeps-n img { height: .9em; width: .9em; object-fit: contain; }
.tk-moons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.tk-moons img { width: clamp(24px, 4.6vh, 38px); aspect-ratio: 1; object-fit: contain; }
.tk-moons.few img { width: clamp(38px, 7.4vh, 60px); }
.tk-moons.many { gap: 2px; } .tk-moons.many img:not(.tk-moons-end) { width: clamp(15px, 2.9vh, 24px); }
.tk-moons .tk-moons-end { width: clamp(44px, 8vh, 66px); margin-left: 6px; background: #fff; border-radius: 14px; padding: 3px; }
.tk-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; transition: transform .12s; }
.tk-count.tk-count5 { grid-template-columns: repeat(5, 1fr); gap: 5px; } .tk-count5 .tk-tile b { font-size: clamp(22px, 4.6vh, 38px); }
.tk-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 20px; background: #3a2f4f; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(120, 70, 140, .16); min-width: 0; }
.tk-tile b { display: block; font-size: clamp(26px, 5.6vh, 46px); line-height: 1.1; color: color-mix(in srgb, var(--c) 55%, #fff); font-variant-numeric: tabular-nums; }
.tk-tile b.bump { animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.tk-tile img { width: clamp(26px, 5vh, 40px); aspect-ratio: 1; object-fit: contain; }
.tk-wedge { display: block; transition: transform .12s; width: min(100%, 34vh); aspect-ratio: 1; filter: drop-shadow(0 8px 0 rgba(120, 70, 140, .16)); }
.tk-wait-empty { position: relative; width: min(46vh, 60vw); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 8px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; animation: pulse-plain 1.6s ease-in-out infinite; }
.tk-wait-empty img { width: 70%; height: 70%; object-fit: contain; }
.tk-wait-empty svg { position: absolute; right: 2%; bottom: 2%; width: 30%; background: #fff; border-radius: 50%; box-shadow: var(--shadow); }
/* the setup panel: pictures, sleeps and a clock for her; a date box, a time box and a name for a parent */
.tk-setup-panel { display: flex; flex-direction: column; gap: clamp(8px, 2vh, 16px); width: min(94%, 900px); }
.tk-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tk-kind { width: clamp(58px, 10.5vh, 86px); aspect-ratio: 1; border-radius: 20px; border: 4px solid #ece4f6; background: #f6f0ff; display: grid; place-items: center; }
.tk-kind img { width: 86%; height: 86%; object-fit: contain; }
.tk-kind.active { border-color: var(--yellow); background: #fff8dc; box-shadow: 0 5px 0 #f4c20d; }
.tk-when { display: flex; flex-direction: column; gap: 8px; }
.tk-when-row { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 16px); }
.tk-pm { width: clamp(56px, 10vh, 76px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 4px solid #ece4f6; box-shadow: 0 5px 0 rgba(120, 70, 140, .14); flex: none; }
.tk-pm svg { width: 100%; height: 100%; }
.tk-pm:active { transform: scale(.9); }
.tk-when-box { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: min(46vw, 330px); height: clamp(74px, 14vh, 110px); padding: 0 16px; border-radius: 24px; background: #3a2f4f; color: #fff; }
.tk-when-n { font-size: clamp(40px, 9vh, 70px); line-height: 1; }
.tk-when-box > img { height: 56%; aspect-ratio: 1; object-fit: contain; }
.tk-when-date { font-size: clamp(14px, 2.6vh, 20px); font-weight: 500; opacity: .85; }
.tk-when-clock { height: 88%; aspect-ratio: 1; flex: none; }
.tk-when-digi .tk-digi { font-size: clamp(30px, 6.4vh, 50px); }
.tk-setup input { -webkit-user-select: text !important; user-select: text !important; font: 500 16px var(--font); color: var(--ink); padding: 10px 12px; border-radius: 16px; border: 3px solid #ece4f6; background: #fff; min-width: 0; }
.tk-in-date, .tk-in-time { width: clamp(120px, 17vw, 170px); }
.tk-setup-foot { display: flex; align-items: center; gap: 14px; }
.tk-in-name { flex: 1; }
.tk-save { flex: none; }
@media (orientation: portrait) {
  .tk-wait-cols { grid-template-columns: 1fr 1fr; } .tk-sleeps { grid-column: 1 / -1; order: -1; min-height: 0; }
  .tk-ev-card { max-width: 24vh; } .tk-wedge { width: min(100%, 22vh); }
  .tk-when-row { flex-wrap: wrap; }
}