:root {
  --kids-font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --tm-ink: #33334d;
  --tm-green: #3fbf87;
  --tm-green-dark: #2a9a69;
  --tm-yellow: #ffc857;
  --tm-pink: #ff6b8b;
  --tm-blue: #4c9dff;
  --flower: #ff6b8b;
  --flower-center: #ffd34d;
}

html,
body.tm-body {
  background: linear-gradient(180deg, #d9f3ff 0%, #f3ffe9 55%, #fff4dc 100%) fixed;
}

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

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

.tm-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.tm-title span {
  display: inline-block;
  animation: tm-float 3s ease-in-out infinite;
}

.tm-title .tm-title-a { color: var(--tm-green); }
.tm-title .tm-title-b { color: #f59f1b; animation-delay: 0.2s; }
.tm-title .tm-title-rest { color: var(--tm-blue); animation-delay: 0.4s; }

.tm-lead {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  word-break: keep-all;
}

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

/* 場面 */

.tm-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tm-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 0 rgba(60, 90, 70, 0.08), 0 16px 30px rgba(60, 90, 70, 0.16);
}

.tm-garden,
.tm-tank {
  display: block;
  width: 100%;
  height: 100%;
}

.tm-scene[data-theme="flower"] .tm-tank,
.tm-scene[data-theme="fish"] .tm-garden {
  display: none;
}

.tm-bubble {
  position: absolute;
  top: 14px;
  left: 50%;
  max-width: 86%;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(60, 70, 120, 0.15);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}

.tm-bubble.is-pop {
  animation: tm-bubble-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

/* 花 */

.tm-sun {
  transform-box: view-box;
  transform-origin: 330px 70px;
  animation: tm-sun-bob 4s ease-in-out infinite;
}

.tm-sun-rays path {
  stroke: #ffd34d;
  stroke-width: 6;
  stroke-linecap: round;
}

.tm-sun-rays {
  transform-box: view-box;
  transform-origin: 330px 70px;
  animation: tm-spin 24s linear infinite;
}

.tm-cloud-a {
  animation: tm-drift 16s ease-in-out infinite alternate;
}

.tm-cloud-b {
  animation: tm-drift 22s ease-in-out infinite alternate-reverse;
}

.tm-plant {
  transform-box: view-box;
  transform-origin: 200px 284px;
}

.tm-scene.is-running .tm-plant,
.tm-scene.is-done .tm-plant {
  animation: tm-sway 4s ease-in-out infinite;
}

.tm-stem {
  fill: none;
  stroke: #3fa45b;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s linear;
}

.tm-leaf path {
  fill: #56c271;
  transform: scale(0);
  transition: transform 0.7s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.tm-leaf.is-shown path {
  transform: scale(1);
}

.tm-leaf path + path {
  fill: none;
  stroke: #3fa45b;
  stroke-width: 2;
}

.tm-tip {
  transition: transform 0.4s linear;
}

.tm-tip > g {
  transition: transform 0.6s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.4s ease;
}

.tm-futaba,
.tm-bud,
.tm-flower {
  transform: scale(0);
}

.tm-scene.is-running .tm-futaba,
.tm-scene.is-paused .tm-futaba {
  transform: scale(1);
}

.tm-scene.has-bud .tm-futaba {
  transform: scale(0);
}

.tm-bud-body {
  fill: var(--flower);
}

.tm-scene.has-bud .tm-bud {
  transform: scale(var(--bud-scale, 0.4));
}

.tm-scene.is-done .tm-bud {
  transform: scale(0);
}

.tm-flower .tm-petal {
  fill: var(--flower);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
}

.tm-flower .tm-flower-center {
  fill: var(--flower-center);
}

.tm-scene.is-done .tm-flower {
  transform: scale(1);
  animation: tm-bloom-spin 1.1s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.tm-butterfly {
  opacity: 0;
  pointer-events: none;
}

.tm-wings {
  animation: tm-flap 0.35s ease-in-out infinite alternate;
}

.tm-scene.is-done .tm-butterfly {
  opacity: 1;
  transition: opacity 0.6s ease 0.6s;
}

.tm-scene.is-done .tm-butterfly-a {
  animation: tm-fly-a 7s ease-in-out infinite;
}

.tm-scene.is-done .tm-butterfly-b {
  animation: tm-fly-b 9s ease-in-out infinite;
}

.tm-sparkle {
  fill: #fff6b0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tm-twinkle 1.4s ease-in-out infinite;
}

/* 水そう */

.tm-surface {
  animation: tm-wave 3s linear infinite;
}

.tm-weed {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tm-weed 3.2s ease-in-out infinite alternate;
}

.tm-weed-b {
  animation-duration: 2.6s;
}

.tm-weed-c {
  animation-duration: 3.8s;
  animation-direction: alternate-reverse;
}

.tm-air {
  fill: rgba(255, 255, 255, 0.7);
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.5;
  animation: tm-rise linear infinite;
}

.tm-splash {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: tm-splash 0.8s ease-out forwards;
}

.tm-chest-lid {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transition: transform 0.8s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.tm-chest-glow {
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}

.tm-scene.is-done .tm-chest-lid {
  transform: rotate(-40deg) translate(-4px, -6px);
}

.tm-scene.is-done .tm-chest-glow {
  opacity: 0.9;
}

/* 進みぐあい */

.tm-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tm-progress-track {
  flex: 1;
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(60, 70, 120, 0.12);
}

.tm-progress-bar {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8be0a4, var(--tm-green));
  transition: width 0.4s linear;
}

.tm-scene[data-theme="fish"] ~ .tm-progress .tm-progress-bar {
  background: linear-gradient(90deg, #9ad8ff, var(--tm-blue));
}

.tm-progress-goal svg {
  display: block;
  width: 34px;
  height: 34px;
}

/* パネル */

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

.tm-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;
}

.tm-time {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.tm-time.is-done {
  color: var(--tm-green);
}

.tm-time-sub {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  color: #7a7a99;
}

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

.tm-btn {
  min-height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: #eef3ff;
  color: var(--tm-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;
}

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

.tm-btn-big {
  min-width: 180px;
  min-height: 58px;
  padding: 0 32px;
  background: var(--tm-green);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 5px 0 var(--tm-green-dark);
}

.tm-btn-big:active {
  box-shadow: 0 2px 0 var(--tm-green-dark);
}

.tm-btn-big.is-pause {
  background: var(--tm-yellow);
  color: var(--tm-ink);
  box-shadow: 0 5px 0 #e0a53a;
}

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

.tm-btn-ghost {
  margin-top: 0;
  background: transparent;
  box-shadow: none;
  color: #9a9ab5;
}

.tm-label {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: #7a7a99;
}

.tm-label + .tm-chips {
  margin-top: 8px;
}

.tm-chips + .tm-label {
  margin-top: 14px;
}

.tm-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tm-chips-theme {
  grid-template-columns: 1fr 1fr;
}

.tm-chip {
  min-height: 42px;
  border: 2px solid #e1e6f5;
  border-radius: 12px;
  background: #fff;
  color: var(--tm-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.tm-chip[aria-checked="true"] {
  border-color: var(--tm-green);
  background: var(--tm-green);
  color: #fff;
}

.tm-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tm-record-card {
  text-align: left;
}

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

.tm-record-total {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
}

.tm-record-total b {
  font-size: 20px;
  color: #f59f1b;
}

.tm-record-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 6px;
  min-height: 48px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg, #f3fbe9 0 20px, #eaf7dc 20px 40px);
}

.tm-record-board:empty::before {
  content: "さいごまで がんばると ここに ふえていくよ";
  grid-column: 1 / -1;
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: #8fb07a;
  text-align: center;
}

.tm-record-icon {
  display: block;
  width: 36px;
  height: 36px;
}

.tm-record-icon.is-new {
  animation: tm-stamp 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}

/* できた！ */

.tm-popup {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(40, 50, 70, 0.25);
}

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

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

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

.tm-popup-icon svg {
  width: 96px;
  height: 96px;
  animation: tm-spin-in 0.8s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.tm-popup-sub {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  white-space: pre-line;
  word-break: keep-all;
}

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

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

@keyframes tm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes tm-sun-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes tm-spin {
  to { transform: rotate(360deg); }
}

@keyframes tm-drift {
  from { transform: translateX(-10px); }
  to { transform: translateX(40px); }
}

@keyframes tm-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes tm-bloom-spin {
  0% { transform: scale(0) rotate(-120deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes tm-flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.3); }
}

@keyframes tm-fly-a {
  0% { transform: translate(90px, 200px); }
  25% { transform: translate(150px, 110px); }
  50% { transform: translate(250px, 150px); }
  75% { transform: translate(300px, 230px); }
  100% { transform: translate(90px, 200px); }
}

@keyframes tm-fly-b {
  0% { transform: translate(320px, 170px); }
  30% { transform: translate(260px, 100px); }
  60% { transform: translate(130px, 140px); }
  100% { transform: translate(320px, 170px); }
}

@keyframes tm-twinkle {
  0%, 100% { transform: scale(0.4); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes tm-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-100px); }
}

@keyframes tm-weed {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}

@keyframes tm-rise {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-300px); opacity: 0; }
}

@keyframes tm-splash {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes tm-bubble-pop {
  0% { transform: translateX(-50%) scale(0.6); }
  100% { transform: translateX(-50%) scale(1); }
}

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

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

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

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

  .tm-title {
    font-size: 30px;
  }

  .tm-time {
    font-size: 60px;
  }

  .tm-bubble {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-title span,
  .tm-sun,
  .tm-sun-rays,
  .tm-cloud,
  .tm-scene .tm-plant,
  .tm-wings,
  .tm-scene .tm-butterfly-a,
  .tm-scene .tm-butterfly-b,
  .tm-sparkle,
  .tm-surface,
  .tm-weed,
  .tm-air,
  .tm-bubble.is-pop,
  .tm-record-icon.is-new,
  .tm-popup-card,
  .tm-popup-icon svg,
  .tm-scene.is-done .tm-flower {
    animation: none !important;
  }
}