/* 타임킬링 button (bottom centre of the character stage) and minigame dialog. */
.warp-button {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4;
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto;
  align-items: center; column-gap: 7px;
  min-width: 150px; padding: 5px 14px; border-radius: 20px;
  border-color: rgba(240, 210, 146, .8); background: rgba(7, 30, 35, .88);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45); line-height: 1.15; text-align: left;
}
.warp-button[hidden] { display: none; }
.warp-button svg { grid-row: span 3; width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.warp-main { font-size: 13px; font-weight: 700; color: #ffe6ad; }
.warp-sub { font-size: 10px; color: var(--muted); white-space: nowrap; }
.warp-pips { grid-column: 2; display: flex; gap: 3px; margin-top: 2px; }
.warp-pips i { width: 14px; height: 3px; border-radius: 2px; background: rgba(164, 183, 171, .28); }
.warp-button[data-charges="1"] .warp-pips i:nth-child(1),
.warp-button[data-charges="2"] .warp-pips i:nth-child(-n+2),
.warp-button[data-charges="3"] .warp-pips i {
  background: #f0d292; box-shadow: 0 0 4px rgba(240, 210, 146, .45);
}
.warp-button.warping { border-color: #9fe0ff; box-shadow: 0 0 16px rgba(120, 210, 255, .45); }
.warp-button.warping .warp-sub { color: #bfe9ff; }
.warp-button.warping svg { stroke: #9fe0ff; transform-origin: 50% 50%; animation: tk-spin 1.2s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }

.tk-dialog { width: min(520px, 94vw); overflow-x: hidden; }
.tk-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tk-head h2 { margin: 0; }
.tk-status { flex: 1; margin: 0 !important; font-size: 12px !important; color: var(--gold) !important; }
.tk-close { min-height: 36px; min-width: 36px; padding: 2px 9px; }
.tk-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tk-card { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; min-height: 72px; transition: transform .12s, border-color .12s; }
.tk-card:hover:not(:disabled) { transform: translateY(-2px); }
.tk-card-icon { font-size: 24px; line-height: 1.2; }
.tk-card strong { font-size: 12px; line-height: 1.3; text-align: center; }
.tk-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.tk-primary { border-color: var(--gold); color: #ffe6ad; font-weight: 700; }
.tk-link { border: none; background: none; min-height: 32px; padding: 2px 6px; color: var(--gold); text-decoration: underline; }
.tk-game-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-game-head h3 { margin: 0 !important; font-size: 16px !important; }
.tk-progress { padding: 2px 10px; border: 1px solid rgba(240, 210, 146, .6); border-radius: 12px; font-size: 13px; font-weight: 700;
  color: #ffe6ad; background: rgba(240, 210, 146, .1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-progress.bump { animation: tk-pop .3s; }
.tk-desc { color: var(--muted) !important; margin: 4px 0 8px !important; }
.tk-timer { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tk-timer i { display: block; height: 100%; background: linear-gradient(90deg, #c9a660, var(--gold)); }
.tk-timer.low i { background: #e8827a; }
/* Every board sits in the same framed stage so rounds never jump in size. */
.tk-stage { position: relative; margin-top: 12px; padding: 14px 10px; border: 1px solid rgba(94, 125, 115, .55); border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 210, 146, .07), transparent 70%), rgba(4, 22, 26, .55); }
.tk-stage.won { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240, 210, 146, .35), 0 0 28px rgba(240, 210, 146, .35) inset; }
.tk-stage.won::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; font-weight: 900;
  color: #ffe6ad; text-shadow: 0 0 24px rgba(240, 210, 146, .9); background: rgba(4, 22, 26, .45); border-radius: inherit; animation: tk-pop .3s; }
.tk-area { display: grid; justify-items: center; gap: 12px; min-height: 250px; align-content: center; }
.tk-area:focus, .tk-area:focus-visible { outline: none; }
.tk-area > * { max-width: 100%; }
.tk-hint { min-height: 22px; text-align: center; color: var(--gold) !important; }
.tk-area button:not(:disabled):active { transform: scale(.95); }
.tk-key { position: absolute; right: 4px; bottom: 2px; font: 600 10px/1 ui-monospace, Consolas, monospace; color: currentColor; opacity: .45; pointer-events: none; }
@media (hover: none) { .tk-key { display: none; } }
.wrong { animation: tk-shake .3s; border-color: #e8827a !important; }
.good { animation: tk-good .35s; }
.pop { animation: tk-pop .25s; }
@keyframes tk-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes tk-good { 0% { box-shadow: 0 0 0 0 rgba(240, 210, 146, .8); transform: scale(1.05); } 100% { box-shadow: 0 0 0 10px rgba(240, 210, 146, 0); } }
@keyframes tk-pop { 0% { transform: scale(.85); opacity: .4; } 70% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }

/* shared choice buttons (math, count, stroop, pattern) */
.tk-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 132px)); gap: 8px; width: 100%; justify-content: center; }
.tk-choice { position: relative; min-height: 50px; font-size: 20px; font-weight: 700; }
.tk-choice:disabled { opacity: .35; text-decoration: line-through; }
.tk-ask { margin: 0 !important; font-size: 18px !important; font-weight: 700; }
.tk-emoji { font-size: 28px; line-height: 1; }

/* robot check */
.tk-captcha-gate { display: flex; align-items: center; gap: 12px; width: min(300px, 100%); box-sizing: border-box; padding: 14px 16px; border-radius: 4px; background: #f6f6f6; color: #222; }
.tk-captcha-check { width: 28px; height: 28px; min-height: 0; padding: 0; border: 2px solid #9a9a9a; border-radius: 3px; background: #fff; }
.tk-captcha-check:hover:not(:disabled) { background: #fff; border-color: #666; }
.tk-captcha-check.loading { border-radius: 50%; border-color: #4a90e2 transparent; animation: tk-spin .8s linear infinite; opacity: 1; }
.tk-captcha-brand { margin-left: auto; font-size: 10px; color: #777 !important; }
.tk-captcha-check { min-width: 44px; min-height: 44px !important; width: 44px !important; height: 44px !important; }
.tk-captcha-box { width: min(300px, 100%); box-sizing: border-box; border: 1px solid #ccc; background: #fff; color: #222; padding: 6px; border-radius: 4px; }
.tk-captcha-box.busy { pointer-events: none; opacity: .75; }
.tk-captcha-tile { transition: transform .12s, background .12s; }
.tk-captcha-tile[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 3px; left: 5px; font-size: 14px; color: #fff; background: #4a90e2; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; }
.tk-captcha-tile { position: relative; }
.tk-captcha-head { padding: 14px 12px; background: #4a90e2; color: #fff; font-weight: 700; }
.tk-captcha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0; }
.tk-captcha-tile { aspect-ratio: 1; font-size: 38px; padding: 0; background: #eef1f3; border: 3px solid transparent; color: #222; }
.tk-captcha-tile:hover:not(:disabled) { background: #e2e7ea; border-color: transparent; }
.tk-captcha-tile[aria-pressed="true"] { border-color: #4a90e2; background: #d6e7fb; transform: scale(.92); }
.tk-captcha-box .tk-primary { width: 100%; background: #4a90e2; border-color: #4a90e2; color: #fff; }

/* text captcha */
.tk-text-plate { position: relative; display: flex; gap: 6px; padding: 12px 22px; border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(35deg, #e9e2cf 0 7px, #d8d0bb 7px 13px); font: 900 34px/1 Georgia, serif; letter-spacing: 2px; user-select: none; }
.tk-text-plate span { display: inline-block; }
.tk-text-strike { position: absolute; left: 8px; right: 8px; top: 52%; height: 2px; background: rgba(60, 40, 30, .55); transform: rotate(-6deg); }
.tk-text-form { display: flex; gap: 8px; }
.tk-text-input { width: 150px; min-height: 36px; padding: 4px 10px; font: 700 18px/1 ui-monospace, Consolas, monospace; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ivory); background: rgba(9, 36, 40, .82); border: 1px solid var(--line); border-radius: 3px; }

/* sudoku */
.tk-sudoku { display: grid; grid-template-columns: repeat(4, 52px); gap: 3px; }
.tk-sudoku-cell { width: 52px; height: 52px; padding: 0; font-size: 22px; font-weight: 700; }
.tk-sudoku-cell:nth-child(4n + 2) { margin-right: 5px; }
.tk-sudoku-cell:nth-child(n + 5):nth-child(-n + 8) { margin-bottom: 5px; }
.tk-sudoku-cell.given { color: var(--gold); border-style: solid; opacity: 1; cursor: default; background: rgba(240, 210, 146, .08); }
.tk-sudoku-cell.selected { border: 2px solid var(--gold); background: rgba(24, 68, 64, .95); }
.tk-sudoku-cell.conflict { color: #ff9a90; }
.tk-pad { display: flex; gap: 6px; }
.tk-pad-key { min-width: 48px; min-height: 44px; font-size: 17px; font-weight: 700; }

/* memory */
.tk-memory { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
.tk-memory-card { width: 64px; height: 64px; padding: 0; font-size: 30px; background: linear-gradient(135deg, #18454a, #0d2e33); }
.tk-memory-card.open { background: #f5efe0; }
.tk-memory-card.done { opacity: .6; border-style: solid; border-color: var(--gold); }
.tk-memory-card.flip { animation: tk-flip .22s ease-out; }
@keyframes tk-flip { 0% { transform: scaleX(.1); } 100% { transform: none; } }

/* sudoku/order polish */
.tk-sudoku-cell, .tk-order-cell, .tk-memory-card { transition: background .12s, opacity .2s, border-color .12s; }
.tk-order-cell.done { border-color: var(--gold); }

/* order */
.tk-order { display: grid; grid-template-columns: repeat(4, 58px); gap: 6px; }
.tk-order-cell { width: 58px; height: 52px; padding: 0; font-size: 20px; font-weight: 700; }
.tk-order-cell.done { opacity: .25; }

/* math */
.tk-math-question { font-size: 34px !important; font-weight: 800; margin: 0 !important; color: #ffe6ad; font-variant-numeric: tabular-nums; }

/* odd colour */
.tk-odd { display: grid; gap: 6px; width: 240px; }
.tk-odd-cell { aspect-ratio: 1; min-height: 0; padding: 0; border: none; border-radius: 6px; }
.tk-odd-cell:hover:not(:disabled) { filter: brightness(1.05); }

/* simon */
.tk-simon { display: grid; grid-template-columns: repeat(2, 96px); gap: 12px; }
.tk-simon-pad { position: relative; width: 96px; height: 96px; border: none; border-radius: 16px; opacity: .4; color: #10262a;
  transition: opacity .12s, transform .12s, box-shadow .12s, filter .12s; }
.tk-simon-pad:hover:not(:disabled) { border: none; opacity: .6; }
.tk-simon-pad.p0 { background: #e86f6f; } .tk-simon-pad.p1 { background: #6fb0e8; }
.tk-simon-pad.p2 { background: #7fd08a; } .tk-simon-pad.p3 { background: #f0d26e; }
.tk-simon.watching .tk-simon-pad { cursor: wait; }
.tk-simon-pad.lit, .tk-simon-pad.lit:hover:not(:disabled) { opacity: 1; filter: brightness(1.2); transform: scale(1.06); box-shadow: 0 0 26px rgba(255, 255, 255, .55); }

/* timing */
.tk-timing-track { position: relative; width: 320px; max-width: 80vw; height: 30px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.tk-timing-zone { position: absolute; top: 0; bottom: 0; background: rgba(240, 210, 146, .55); }
.tk-timing-marker { position: absolute; top: 2px; bottom: 2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 8px #fff; }
.tk-timing-track.hit { animation: tk-hit .4s; }
.tk-timing-track.miss { animation: tk-shake .3s; }
@keyframes tk-hit { 0% { box-shadow: 0 0 22px var(--gold); } }
.tk-timing-stop { min-width: 160px; min-height: 48px; }
.tk-timing-track { width: min(320px, 100%); max-width: none; height: 36px; border-radius: 18px; }

/* slider captcha */
.tk-slider-board { position: relative; width: min(300px, 100%); height: 120px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(160deg, #2b6f6a, #16404a 55%, #0d2a31); border: 1px solid var(--line); touch-action: none; }
.tk-slider-scene { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; letter-spacing: 20px; opacity: .3; user-select: none; }
.tk-slider-gap, .tk-slider-piece { position: absolute; top: 30px; width: 18%; height: 60px; border-radius: 8px; box-sizing: border-box; }
.tk-slider-gap { border: 2px dashed rgba(255, 245, 223, .8); background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 12px rgba(0, 0, 0, .6); }
.tk-slider-piece { display: grid; place-items: center; font-size: 32px; cursor: grab; touch-action: none; user-select: none;
  background: linear-gradient(160deg, #3d8b84, #1d5560); border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.tk-slider-board.dragging .tk-slider-piece { cursor: grabbing; box-shadow: 0 8px 18px rgba(0, 0, 0, .6); }
.tk-slider-piece.snap { transition: left .15s; border-color: #fff; }
.tk-slider-rail { position: relative; width: min(300px, 100%); height: 44px; box-sizing: border-box; border-radius: 22px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.tk-slider-rail::before { content: "→ 끌어서 맞추기"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); pointer-events: none; }
/* Same width as the piece and the board, so the handle always sits under it. */
.tk-slider-handle { position: absolute; top: -1px; left: 0; width: 18%; height: 44px; border-radius: 22px; padding: 0;
  border-color: var(--gold); background: #1d5560; color: #ffe6ad; font-size: 20px; touch-action: none; cursor: grab; }

/* rotate */
.tk-rotate-dial { position: relative; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: radial-gradient(circle, rgba(240, 210, 146, .12), rgba(4, 22, 26, .6) 70%); }
.tk-rotate-pic { font-size: 84px; line-height: 1; transition: transform .2s ease-out; user-select: none; }
.tk-rotate-pic.instant { transition: none; }
.tk-rotate-up { position: absolute; top: -9px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom: 12px solid var(--gold); }
.tk-rotate-controls { display: flex; gap: 14px; }
.tk-rotate-btn { min-width: 72px; min-height: 52px; font-size: 26px; }

/* whack */
.tk-whack { display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; }
.tk-whack-hole { position: relative; width: 84px; height: 84px; padding: 0; overflow: hidden; border-radius: 50% 50% 14px 14px;
  background: radial-gradient(ellipse at 50% 85%, #05161a 40%, #18393c 42%, #0c2a30 70%); }
.tk-whack-critter { display: block; font-size: 44px; line-height: 84px; transform: translateY(80%); transition: transform .12s ease-out; }
.tk-whack-hole.up .tk-whack-critter { transform: translateY(4%); }
.tk-whack-hole.up { border-color: var(--gold); }
.tk-whack-hole.bonk .tk-whack-critter { transform: translateY(80%) scale(.7); }
.tk-whack-hole.bonk { box-shadow: 0 0 18px rgba(240, 210, 146, .7); }

/* slide puzzle */
.tk-slide { position: relative; width: 246px; height: 246px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.tk-slide-tile { position: absolute; left: 3px; top: 3px; width: 78px; height: 78px; padding: 0; font-size: 28px; font-weight: 800;
  border-radius: 6px; transition: transform .14s ease-out, border-color .12s; background: linear-gradient(160deg, #1d5560, #11373e); }
.tk-slide-tile.movable { border-color: rgba(255, 245, 223, .75); }
.tk-slide-tile.home { color: #ffe6ad; border-color: var(--gold); }

/* lights out */
.tk-lights { display: grid; grid-template-columns: repeat(3, 78px); gap: 10px; }
.tk-light { position: relative; width: 78px; height: 78px; padding: 0; border-radius: 14px; background: #0b2126; transition: background .15s, box-shadow .15s; }
.tk-light::before { content: "💡"; font-size: 34px; opacity: .25; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.tk-light.on { background: radial-gradient(circle, #fff1b8, #f0d292 55%, #b48b3c); box-shadow: 0 0 20px rgba(240, 210, 146, .6); color: #3a2a08; }
.tk-light.on::before { opacity: 1; filter: none; }

/* maze */
.tk-maze { display: grid; width: min(264px, 100%); aspect-ratio: 1; border-radius: 4px; background: rgba(0, 0, 0, .3); }
.tk-maze-cell { position: relative; display: grid; place-items: center; font-size: 22px; line-height: 1; box-sizing: border-box; border: 2px solid transparent; }
.tk-maze-cell.wn { border-top-color: var(--gold); } .tk-maze-cell.ws { border-bottom-color: var(--gold); }
.tk-maze-cell.ww { border-left-color: var(--gold); } .tk-maze-cell.we { border-right-color: var(--gold); }
.tk-maze-cell.trail { background: rgba(120, 210, 255, .12); }
.tk-maze-hero { position: absolute; font-size: 24px; }
.tk-maze.bump { animation: tk-shake .2s; }
.tk-dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 48px); gap: 6px; }
.tk-dpad-key { padding: 0; font-size: 18px; }
.tk-dpad-key.dn { grid-column: 2; grid-row: 1; } .tk-dpad-key.dw { grid-column: 1; grid-row: 2; }
.tk-dpad-key.ds { grid-column: 2; grid-row: 2; } .tk-dpad-key.de { grid-column: 3; grid-row: 2; }

/* count */
.tk-count-field { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(290px, 100%); padding: 10px; box-sizing: border-box;
  min-height: 134px; align-content: center; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 28px; line-height: 1.1; }

/* stroop */
.tk-stroop-word { margin: 4px 0 !important; font-size: 52px !important; font-weight: 900; line-height: 1.1 !important;
  padding: 6px 22px; border-radius: 10px; background: #061518; border: 1px solid var(--line); }
.tk-swatch-label { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.tk-swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255, 255, 255, .6); }

/* pattern */
.tk-pattern { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
.tk-pattern-item { display: grid; place-items: center; width: 33px; height: 44px; font-size: 23px; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.tk-pattern-item.blank { border: 2px dashed var(--gold); color: var(--gold); font-weight: 800; font-size: 22px; box-sizing: border-box; }

@media (max-width: 420px) {
  .tk-stage { padding: 12px 4px; }
  .tk-whack { grid-template-columns: repeat(3, 78px); }
  .tk-whack-hole { width: 78px; height: 78px; }
}

/* result */
.tk-result { text-align: center; padding: 18px 0 4px; }
.tk-result-icon { font-size: 44px !important; margin: 0 !important; }
.tk-result h3 { font-size: 20px !important; margin: 4px 0 !important; color: #ff9a90 !important; }

/* Time warp afterimages: tinted copies of the character trail off and fade
   while the warp runs; a clear adds a short, stronger burst. */
.goddess.warping::before, .goddess.warping::after,
.goddess.warp-burst::before, .goddess.warp-burst::after {
  content: ""; position: absolute; inset: 0; background: inherit; pointer-events: none;
  mix-blend-mode: screen; filter: sepia(1) hue-rotate(150deg) saturate(2.4) brightness(1.05);
  animation: tk-ghost-left .9s ease-out infinite;
}
.goddess.warping::after, .goddess.warp-burst::after { animation-name: tk-ghost-right; animation-delay: -.45s; }
@keyframes tk-ghost-left {
  0% { opacity: .85; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-80px, -8px) scale(1.04); }
}
@keyframes tk-ghost-right {
  0% { opacity: .75; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(70px, -12px) scale(1.05); }
}
.goddess.warping { --goddess-bob: 1.8s; }
.goddess.warp-burst {
  animation: goddess-bob var(--goddess-bob) ease-in-out infinite, tk-burst 1.2s ease-out;
}
.goddess.warp-burst::before, .goddess.warp-burst::after { animation-duration: .6s; animation-iteration-count: 2; }
@keyframes tk-burst {
  0% { filter: brightness(1.7) saturate(1.3); }
  100% { filter: none; }
}

/* Special-button gimmicks. The bob stays on `translate`; these keyframes use
   the individual `scale` and `filter` properties so they compose with it. */
.goddess.sprite-boost { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, sprite-boost .95s ease-out; }
.goddess.sprite-sacrifice { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, sprite-sacrifice .95s ease-out; }
.goddess.sprite-galaxy { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, sprite-galaxy 1s ease-out; }
.goddess.sprite-rebirth { animation: goddess-bob var(--goddess-bob) ease-in-out infinite, sprite-rebirth 1.1s ease-out; }
@keyframes sprite-boost {
  0% { scale: 1; filter: none; }
  30% { scale: 1.035; filter: brightness(1.35) saturate(1.1); }
  100% { scale: 1; filter: none; }
}
@keyframes sprite-sacrifice {
  0% { scale: 1; filter: none; }
  18% { scale: 1.02 .96; filter: brightness(.92) saturate(1.25) sepia(.18); }
  42% { scale: .985 1.015; filter: brightness(1.12) sepia(.32); }
  68% { scale: 1.012 .992; filter: brightness(1.04) sepia(.12); }
  100% { scale: 1; filter: none; }
}
@keyframes sprite-galaxy {
  0% { scale: 1; filter: none; }
  35% { scale: 1.018; filter: brightness(1.18) saturate(1.3) hue-rotate(-8deg); }
  100% { scale: 1; filter: none; }
}
@keyframes sprite-rebirth {
  0% { scale: 1; filter: none; }
  16% { scale: .985; filter: brightness(1.55) saturate(.7); }
  42% { scale: 1.04; filter: brightness(1.9) saturate(1.35); }
  100% { scale: 1; filter: none; }
}

@media (max-width: 750px) {
  .warp-button { bottom: 8px; min-width: 132px; padding: 3px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .goddess, .goddess.warping, .goddess.warp-burst,
  .goddess.sprite-boost, .goddess.sprite-sacrifice,
  .goddess.sprite-galaxy, .goddess.sprite-rebirth { animation: none !important; }
  .tk-captcha-check.loading, .goddess.warp-burst { animation: none; }
  .tk-dialog .good, .tk-dialog .pop, .tk-dialog .wrong, .tk-dialog .flip, .tk-dialog .bump,
  .tk-stage.won::after, .tk-timing-track.hit, .tk-timing-track.miss { animation-duration: .01ms !important; }
  .tk-dialog * { transition: none !important; }
  .tk-card:hover:not(:disabled), .tk-area button:not(:disabled):active { transform: none; }
  .goddess.warping::before, .goddess.warping::after { animation: none; opacity: .22; transform: translateX(-14px); }
  .goddess.warping::after { transform: translateX(12px); }
}