:root {
  --kids-font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --tk-hour: #ef4a5b;
  --tk-minute: #2f7de1;
  --tk-ink: #33334d;
  --tk-yellow: #ffc857;
  --tk-green: #3fbf87;
}

html,
body.tk-body {
  background: linear-gradient(180deg, #c9ecff 0%, #fff4d6 55%, #ffe3ee 100%) fixed;
}

.tk-body {
  font-family: var(--kids-font);
  color: var(--tk-ink);
}

.tk-header {
  padding: 18px 18px 4px;
  text-align: center;
}

.tk-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.tk-title span {
  display: inline-block;
  animation: tk-wobble 2.4s ease-in-out infinite;
}

.tk-title .tk-title-a { color: var(--tk-hour); }
.tk-title .tk-title-b { color: #f59f1b; animation-delay: 0.15s; }
.tk-title .tk-title-c { color: var(--tk-green); animation-delay: 0.3s; }
.tk-title .tk-title-rest { color: var(--tk-minute); animation-delay: 0.45s; }

.tk-lead {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
}

.tk-main {
  display: grid;
  grid-template-columns: minmax(280px, 540px) minmax(280px, 400px);
  justify-content: center;
  align-items: start;
  gap: 20px 32px;
  padding: 12px 18px 28px;
}

.tk-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tk-clock-wrap {
  width: 100%;
  max-width: 540px;
}

.tk-clock {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 12px 20px rgba(60, 70, 120, 0.22));
  outline: none;
}

.tk-clock:focus-visible {
  outline: 4px solid var(--tk-yellow);
  outline-offset: 6px;
  border-radius: 50%;
}

.tk-rim {
  fill: url(#tk-rim-grad);
}

.tk-ring {
  fill: #e6f2ff;
}

.tk-face {
  fill: #fffdf5;
}

.tk-sector {
  fill: rgba(47, 125, 225, 0.12);
  pointer-events: none;
}

.tk-tick {
  stroke: #9aa3c2;
  stroke-width: 2;
  stroke-linecap: round;
}

.tk-tick.is-five {
  stroke: var(--tk-ink);
  stroke-width: 5;
}

.tk-number {
  fill: var(--tk-ink);
  font-family: var(--kids-font);
  font-size: 38px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.tk-min-label {
  fill: var(--tk-minute);
  font-family: var(--kids-font);
  font-size: 15px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.tk-clock.hide-labels .tk-min-labels,
.tk-clock.hide-labels .tk-sector {
  display: none;
}

.tk-hand {
  cursor: grab;
}

.tk-hand.is-active {
  cursor: grabbing;
}

.tk-hand-hit {
  stroke: transparent;
  stroke-width: 46;
  stroke-linecap: round;
  pointer-events: stroke;
}

.tk-hand-body {
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke-width 0.15s ease;
}

.tk-hand-hour .tk-hand-body {
  stroke: var(--tk-hour);
  stroke-width: 16;
}

.tk-hand-minute .tk-hand-body {
  stroke: var(--tk-minute);
  stroke-width: 10;
}

.tk-hand-hour.is-active .tk-hand-body {
  stroke-width: 20;
}

.tk-hand-minute.is-active .tk-hand-body {
  stroke-width: 14;
}

.tk-cap {
  fill: var(--tk-ink);
  pointer-events: none;
}

.tk-cap-dot {
  fill: var(--tk-yellow);
  pointer-events: none;
}

.tk-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.tk-chip {
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
}

.tk-chip.is-minute {
  background: var(--tk-minute);
}

.tk-chip.is-hour {
  background: var(--tk-hour);
}

.tk-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tk-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.tk-mode {
  min-height: 46px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--tk-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.tk-mode[aria-selected="true"] {
  background: var(--tk-yellow);
  box-shadow: 0 4px 0 #e0a53a;
}

.tk-card {
  padding: 16px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(60, 70, 120, 0.08), 0 12px 24px rgba(60, 70, 120, 0.1);
  text-align: center;
}

.tk-label {
  font-size: 15px;
  font-weight: 800;
  color: #7a7a99;
}

.tk-readout {
  margin-top: 6px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.tk-readout .is-h {
  color: var(--tk-hour);
}

.tk-readout .is-m {
  color: var(--tk-minute);
}

.tk-readout.is-hidden {
  color: transparent;
  background: repeating-linear-gradient(45deg, #eef0f7 0 10px, #e2e6f2 10px 20px);
  border-radius: 14px;
}

.tk-readout.is-hidden span {
  color: transparent;
}

.tk-reading {
  min-height: 1.4em;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #7a7a99;
}

.tk-reading.is-hidden {
  visibility: hidden;
}

.tk-target {
  animation: tk-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.tk-feedback {
  min-height: 1.5em;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--tk-hour);
}

.tk-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.tk-btn {
  min-height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: #eef3ff;
  color: var(--tk-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 0 #cdd6ee;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.tk-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #cdd6ee;
}

.tk-btn[aria-pressed="true"]#tk-hide {
  background: var(--tk-yellow);
  box-shadow: 0 4px 0 #e0a53a;
}

.tk-btn-big {
  min-height: 56px;
  padding: 0 32px;
  background: var(--tk-green);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 5px 0 #2a9a69;
}

.tk-btn-big:active {
  box-shadow: 0 2px 0 #2a9a69;
}

.tk-btn-small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
  box-shadow: 0 3px 0 #cdd6ee;
}

.tk-btn-ghost {
  background: transparent;
  box-shadow: none;
  color: #9a9ab5;
}

.tk-levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.tk-level {
  min-height: 38px;
  border: 2px solid #e1e6f5;
  border-radius: 12px;
  background: #fff;
  color: var(--tk-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.tk-level[aria-checked="true"] {
  border-color: var(--tk-minute);
  background: var(--tk-minute);
  color: #fff;
}

.tk-streak {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
}

.tk-streak b {
  display: inline-block;
  min-width: 1.4em;
  font-size: 26px;
  color: #f59f1b;
}

.tk-streak b.is-bump {
  animation: tk-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.tk-sticker-card {
  text-align: left;
}

.tk-sticker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
}

.tk-sticker-head b {
  font-size: 22px;
  color: var(--tk-hour);
}

.tk-sticker-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tk-sticker-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  min-height: 46px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg, #fff8e6 0 20px, #fff2d4 20px 40px);
}

.tk-sticker-board:empty::before {
  content: "せいかいすると シールが もらえるよ";
  grid-column: 1 / -1;
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: #b3a47f;
  text-align: center;
}

.tk-sticker {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.18));
}

.tk-sticker.is-new {
  animation: tk-stamp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.tk-popup {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tk-popup-card {
  padding: 22px 40px 18px;
  border: 6px solid var(--tk-yellow);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(60, 70, 120, 0.3);
  text-align: center;
  animation: tk-popup-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.tk-popup-title {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--tk-hour), #f59f1b, var(--tk-green), var(--tk-minute));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tk-popup-sub {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
}

.tk-popup-sticker {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.tk-popup-sticker .tk-sticker {
  width: 72px;
  height: 72px;
  animation: tk-spin-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.tk-confetti {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tk-clock-wrap.is-bounce {
  animation: tk-bounce 0.7s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.tk-clock-wrap.is-shake {
  animation: tk-shake 0.45s ease;
}

.tk-body .site-footer {
  color: #6b6b88;
}

@keyframes tk-wobble {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-4px) rotate(-4deg); }
  75% { transform: translateY(2px) rotate(3deg); }
}

@keyframes tk-pop {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}

@keyframes tk-stamp {
  0% { transform: scale(2.2) rotate(-25deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes tk-spin-in {
  0% { transform: scale(0) rotate(-200deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes tk-popup-in {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes tk-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.08) translateY(-14px); }
  55% { transform: scale(0.97) translateY(0); }
  75% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes tk-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-2deg); }
  40% { transform: translateX(9px) rotate(2deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

@media (max-width: 760px) {
  .tk-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-title {
    font-size: 32px;
  }

  .tk-readout {
    font-size: 38px;
  }

  .tk-popup-title {
    font-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-title span,
  .tk-target,
  .tk-streak b.is-bump,
  .tk-sticker.is-new,
  .tk-popup-card,
  .tk-popup-sticker .tk-sticker,
  .tk-clock-wrap.is-bounce,
  .tk-clock-wrap.is-shake {
    animation: none !important;
  }
}