:root {
  color-scheme: light;
  --ink: #172026;
  --muted: #65717a;
  --paper: #f6f3ec;
  --surface: #fffaf0;
  --line: #d8d0c0;
  --accent: #e8503a;
  --teal: #168a8a;
  --gold: #d69b1f;
  --blue: #3267c8;
  --shadow: 0 18px 40px rgba(23, 32, 38, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family:
    Inter, "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 48px);
}

.library {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(380px, calc(100vw - 32px));
  min-height: 0;
  padding: 24px;
  border-right: 3px solid var(--ink);
  background: #fffdf7;
  box-shadow: 18px 0 42px rgba(23, 32, 38, 0.22);
  transform: translateX(-105%);
  transition: transform 180ms ease;
}

body.menu-open .library {
  transform: translateX(0);
}

.menu-toggle {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 25;
  display: grid;
  gap: 5px;
  width: 48px;
  height: 48px;
  place-content: center;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 4px 4px 0 var(--ink);
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink);
}

.menu-close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(23, 32, 38, 0.3);
}

.menu-overlay[hidden] {
  display: none;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.brand-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  background:
    linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.5) 42% 58%, transparent 58%),
    var(--accent);
  box-shadow: 5px 5px 0 var(--ink);
}

.brand-copy {
  min-width: 0;
}

.brand-subtitle,
.section-lead {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.84rem;
  font-weight: 800;
}

.eyebrow,
.label {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.1;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.7rem, 4vw, 3.6rem);
  line-height: 1.02;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.search-box {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.search-box input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #ffffff;
  outline: none;
}

.search-box input:focus {
  border-color: var(--teal);
}

.filter-row,
.tab-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.filter,
.tab,
.copy-button {
  min-height: 38px;
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #ffffff;
  font-weight: 800;
}

.filter.active,
.tab.active,
.copy-button:active {
  border-color: var(--ink);
  color: #ffffff;
  background: var(--ink);
}

.gallery-controls {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
}

.gallery-search input {
  min-height: 42px;
}

.gallery-filter-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.enemy-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.enemy-card {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  min-height: 88px;
  padding: 14px 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f2eadb;
  text-align: left;
}

.enemy-card.active {
  border-color: var(--ink);
  background: #ffffff;
  box-shadow: 4px 4px 0 var(--ink);
}

.enemy-card span:first-child {
  display: block;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  background: var(--enemy-color);
  border: 2px solid var(--ink);
}

.enemy-card strong {
  display: block;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.enemy-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workspace {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 18px;
  padding: 28px 28px 28px 88px;
}

.preview-section,
.detail-section,
.gallery-section {
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.preview-section,
.gallery-section {
  padding: 24px;
}

.detail-section {
  padding: 18px;
}

.section-head,
.panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pill {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.stage {
  position: relative;
  overflow: hidden;
  height: clamp(280px, 44vh, 520px);
  margin-top: 24px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(#dff0ff 0 62%, #b9e1c2 62% 100%);
}

.preview-section.is-boom {
  animation: previewBoom 520ms ease;
}

.preview-section.is-boom .stage {
  box-shadow: 0 0 0 5px rgba(214, 155, 31, 0.35), var(--shadow);
}

.motion-gallery {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 2px 4px 4px 2px;
}

.motion-group {
  padding: 14px;
  border: 3px solid var(--group-color);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--group-color) 14%, transparent), transparent 38%),
    #fffdf7;
}

.motion-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.motion-group-head h3 {
  margin: 2px 0 4px;
  font-size: 1.25rem;
  line-height: 1.15;
}

.motion-group-head p:last-child {
  margin: 0;
  color: #3f4a51;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.55;
}

.motion-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.gallery-empty {
  margin: 0;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--muted);
  font-weight: 900;
}

.motion-tile {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  text-align: left;
}

.motion-tile.active {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.motion-tile strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.motion-tile small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gallery-stage {
  position: relative;
  overflow: hidden;
  height: 120px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(#dff0ff 0 62%, #b9e1c2 62% 100%);
}

.gallery-stage .motion-track {
  inset: 18px 20px 32px;
}

.gallery-stage .sky-line {
  top: 24px;
}

.gallery-stage .ground {
  height: 32px;
}

.gallery-stage .enemy-sprite {
  left: 16px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  border-width: 2px;
  border-radius: 5px;
  box-shadow: 4px 4px 0 rgba(23, 32, 38, 0.28);
}

.gallery-stage .action-layer {
  transform: scale(0.66);
  transform-origin: left bottom;
}

.gallery-stage .eye {
  top: 9px;
  width: 5px;
  height: 5px;
}

.gallery-stage .eye-left {
  left: 8px;
}

.gallery-stage .eye-right {
  right: 8px;
}

.sky-line {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(23, 32, 38, 0.18) 0 14px, transparent 14px 34px);
}

.ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 54px;
  border-top: 3px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(23, 32, 38, 0.18) 0 18px, transparent 18px 36px),
    #7cc36e;
}

.motion-track {
  position: absolute;
  inset: 34px 60px 54px;
}

.enemy-sprite {
  position: absolute;
  left: 40px;
  bottom: 12px;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--enemy-color, var(--accent));
  box-shadow: 5px 5px 0 rgba(23, 32, 38, 0.35);
  transform-origin: center bottom;
}

.enemy-sprite.spike::before,
.enemy-sprite.turret::before {
  content: "";
  position: absolute;
}

.enemy-sprite.player-square::after,
.enemy-sprite.item-square::after,
.enemy-sprite.ability-square::after {
  content: "";
  position: absolute;
}

.enemy-sprite.player-square::after {
  right: 5px;
  bottom: -7px;
  left: 5px;
  height: 6px;
  border: 2px solid var(--ink);
  background: #fbf7eb;
}

.enemy-sprite.item-square::after {
  inset: 8px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  transform: rotate(45deg);
}

.enemy-sprite.item-circle,
.enemy-sprite.item-triangle,
.enemy-sprite.item-star,
.enemy-sprite.item-heart,
.enemy-sprite.item-key,
.enemy-sprite.item-spring {
  display: grid;
  place-items: center;
}

.enemy-sprite.item-circle .eye,
.enemy-sprite.item-triangle .eye,
.enemy-sprite.item-star .eye,
.enemy-sprite.item-heart .eye,
.enemy-sprite.item-key .eye,
.enemy-sprite.item-spring .eye {
  display: none;
}

.enemy-sprite.item-circle {
  border-radius: 50%;
}

.enemy-sprite.item-circle::before {
  content: "";
  position: absolute;
  inset: 9px 18px;
  border-left: 4px solid rgba(255, 255, 255, 0.78);
  border-right: 4px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.enemy-sprite.item-triangle {
  width: 54px;
  height: 50px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.enemy-sprite.item-triangle::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 15px;
  width: 10px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: rotate(-16deg);
}

.enemy-sprite.item-star {
  width: 58px;
  height: 58px;
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 33%, 96% 35%, 68% 55%, 79% 90%, 50% 69%, 21% 90%, 32% 55%, 4% 35%, 39% 33%);
}

.enemy-sprite.item-heart {
  width: 54px;
  height: 48px;
  border-radius: 18px 18px 10px 10px;
  transform-origin: center bottom;
}

.enemy-sprite.item-heart::before {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 900;
}

.enemy-sprite.item-key {
  width: 62px;
  height: 24px;
  bottom: 28px;
  border-radius: 999px 6px 6px 999px;
}

.enemy-sprite.item-key::before,
.enemy-sprite.item-key::after {
  content: "";
  position: absolute;
  border: 3px solid var(--ink);
  background: #fff7cf;
}

.enemy-sprite.item-key::before {
  left: -4px;
  top: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.enemy-sprite.item-key::after {
  right: -5px;
  bottom: -13px;
  width: 20px;
  height: 13px;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.enemy-sprite.item-spring {
  width: 58px;
  height: 36px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.82) 7px 11px),
    var(--enemy-color, var(--accent));
}

.enemy-sprite.item-spring::before,
.enemy-sprite.item-spring::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  height: 8px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #fffdf7;
}

.enemy-sprite.item-spring::before {
  top: -9px;
}

.enemy-sprite.item-spring::after {
  bottom: -9px;
}

.enemy-sprite.ability-square::after {
  top: -12px;
  right: -10px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
}

.enemy-sprite.spike::before {
  left: 4px;
  right: 4px;
  top: -15px;
  height: 14px;
  background: repeating-linear-gradient(135deg, var(--ink) 0 10px, transparent 10px 20px);
  clip-path: polygon(0 100%, 12% 0, 24% 100%, 36% 0, 48% 100%, 60% 0, 72% 100%, 84% 0, 100% 100%);
}

.enemy-sprite.turret::before {
  top: 16px;
  right: -28px;
  width: 32px;
  height: 13px;
  border: 3px solid var(--ink);
  background: #fbf7eb;
}

.eye {
  position: absolute;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.eye-left {
  left: 13px;
}

.eye-right {
  right: 13px;
}

.projectile-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.action-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.demo-prop {
  position: absolute;
  display: block;
  pointer-events: none;
}

.demo-spring-pad {
  left: 38px;
  bottom: 0;
  width: 54px;
  height: 28px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.9) 7px 12px),
    #84cc16;
  box-shadow: 4px 4px 0 rgba(23, 32, 38, 0.25);
  animation: springPadUse 2.1s ease-in-out infinite;
}

.demo-spring-pad::before,
.demo-spring-pad::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  height: 7px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #fffdf7;
}

.demo-spring-pad::before {
  top: -9px;
}

.demo-spring-pad::after {
  bottom: -9px;
}

.demo-fireball {
  left: 86px;
  bottom: 34px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7a8 0 24%, #f97316 25% 68%, #dc2626 69%);
  animation: demoFireball 2.1s ease-in-out infinite;
}

.demo-ice-cloud {
  left: 84px;
  bottom: 32px;
  width: 34px;
  height: 20px;
  border: 3px solid #0f5f8f;
  border-radius: 999px;
  background: #bae6fd;
  transform-origin: left center;
  animation: demoIceCloud 2.3s ease-in-out infinite;
}

.demo-boomerang {
  left: 82px;
  bottom: 40px;
  width: 34px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 999px 999px 4px 999px;
  background: #fbbf24;
  transform-origin: 20% 60%;
  animation: demoBoomerang 2.2s ease-in-out infinite;
}

.demo-beam {
  left: 80px;
  bottom: 36px;
  width: 34px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #f0abfc;
  transform-origin: left center;
  animation: demoBeam 2.2s ease-in-out infinite;
}

.demo-bomb {
  left: 82px;
  bottom: 40px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #64748b;
  animation: demoBomb 2.5s ease-in-out infinite;
}

.demo-bomb::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 10px;
  width: 12px;
  height: 8px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fbf7eb;
}

.demo-bomb-burst {
  left: 220px;
  bottom: 16px;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fbbf24;
  opacity: 0;
  animation: demoBombBurst 2.5s ease-in-out infinite;
}

.demo-tornado-ring {
  left: 28px;
  bottom: 5px;
  width: 70px;
  height: 58px;
  border: 3px solid rgba(6, 182, 212, 0.9);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  animation: demoTornadoRing 2.2s ease-in-out infinite;
}

.demo-star-aura {
  left: 24px;
  bottom: 6px;
  width: 78px;
  height: 58px;
  border: 4px solid rgba(250, 204, 21, 0.8);
  border-radius: 50%;
  opacity: 0;
  animation: demoStarAura 1.8s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.demo-drill {
  left: 82px;
  bottom: 26px;
  width: 42px;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 999px 6px 6px 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 6px, transparent 6px 12px),
    #b45309;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
  animation: demoDrill 2.4s ease-in-out infinite;
}

.demo-shell {
  left: 84px;
  bottom: 10px;
  width: 34px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 999px 999px 7px 7px;
  background: #16a34a;
  animation: demoShellKick 2.6s ease-in-out infinite;
}

.demo-slash {
  left: 76px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  border: 5px solid #bfdbfe;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: demoSlash 1.8s ease-in-out infinite;
}

.demo-hammer {
  left: 74px;
  bottom: 38px;
  width: 14px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #92400e;
  transform-origin: 50% 90%;
  animation: demoHammer 2.2s ease-in-out infinite;
}

.demo-hammer::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -15px;
  width: 42px;
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #f59e0b;
}

.projectile-layer.active::before,
.projectile-layer.active::after {
  content: "";
  position: absolute;
  left: 115px;
  bottom: 28px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  animation: projectile 1.6s linear infinite;
}

.projectile-layer.active::after {
  animation-delay: 0.8s;
}

.summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 20px;
  margin-top: 18px;
}

#movementSummary,
#mechanicList,
.panel p {
  color: #2c3840;
  line-height: 1.75;
}

.visual-abstract {
  margin: 16px 0 22px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 5px 5px 0 rgba(23, 32, 38, 0.16);
}

.visual-abstract[hidden] {
  display: none;
}

.visual-abstract img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.visual-abstract figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.6;
}

#mechanicList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

#mechanicList li {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.tab-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

pre {
  overflow: auto;
  max-height: 440px;
  margin: 0;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: #f8fbff;
  background: #172026;
  line-height: 1.55;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--code-font-size, 0.9rem);
}

.copy-button {
  min-width: 84px;
}

.copy-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.code-overview {
  margin: 12px 0 4px;
  padding: 14px 16px;
  border: 1px solid #cfe0f5;
  border-left: 5px solid #2563eb;
  border-radius: 8px;
  background: #f1f6fe;
  color: #25323c;
  line-height: 1.85;
  font-size: 0.95rem;
}

.code-overview::before {
  content: "この動き全体の説明";
  display: block;
  margin-bottom: 6px;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.code-overview[hidden] {
  display: none;
}

.code-split {
  display: grid;
  grid-template-columns:
    minmax(280px, 1fr)
    16px
    minmax(280px, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
  --code-font-size: 0.9rem;
  --note-font-size: 0.96rem;
}

.code-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  height: min(62vh, 680px);
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: #172026;
}

.code-split-handle {
  position: relative;
  align-self: stretch;
  width: 16px;
  min-width: 16px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.code-split-handle::before {
  content: "";
  position: absolute;
  inset: 7px 5px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(#172026, #172026) 50% 35% / 2px 18px no-repeat,
    linear-gradient(#172026, #172026) 50% 65% / 2px 18px no-repeat,
    #fffdf7;
  box-shadow: 0 0 0 3px rgba(255, 253, 247, 0.85);
}

.code-split-handle:hover::before,
.code-split-handle:focus-visible::before,
.code-split.is-resizing .code-split-handle::before {
  border-color: var(--gold);
  background:
    linear-gradient(#172026, #172026) 50% 35% / 2px 18px no-repeat,
    linear-gradient(#172026, #172026) 50% 65% / 2px 18px no-repeat,
    #fff2bf;
  box-shadow: 0 0 0 3px rgba(214, 155, 31, 0.18);
}

.code-split.is-resizing,
.code-split.is-resizing * {
  cursor: col-resize;
  user-select: none;
}

.code-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fbff;
  background: #172026;
}

.code-pane-head h3,
.code-note-head h3 {
  margin: 0;
}

.code-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.code-tools .copy-button {
  min-width: 62px;
  padding: 8px 10px;
}

.code-pane-head .copy-button {
  border-color: rgba(255, 255, 255, 0.28);
  color: #f8fbff;
  background: rgba(255, 255, 255, 0.06);
}

.code-pane {
  min-width: 0;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  white-space: normal;
}

#codeBlock {
  display: block;
  font-size: var(--code-font-size, 0.9rem);
}

.code-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  min-width: max-content;
  padding: 3px 14px;
  border-left: 5px solid transparent;
  outline: none;
  white-space: pre;
}

.code-line:first-child {
  padding-top: 14px;
}

.code-line:last-child {
  padding-bottom: 14px;
}

.code-line:hover,
.code-line:focus,
.code-line.is-linked,
.code-line.is-selected {
  border-left-color: var(--gold);
  background: rgba(214, 155, 31, 0.18);
}

.code-line-no {
  color: #8fa0aa;
  text-align: right;
  user-select: none;
}

.code-line-text {
  color: #f8fbff;
}

.code-note {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(62vh, 680px);
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.code-note p,
.line-notes {
  color: #2c3840;
  line-height: 1.75;
}

.code-note-head {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.mini-pill {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.line-notes {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 16px;
  list-style: none;
  font-size: var(--note-font-size, 0.96rem);
  overflow: auto;
}

.line-notes li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid transparent;
  border-radius: 8px;
  background: #fffaf0;
  cursor: pointer;
  outline: none;
}

.line-notes li:hover,
.line-notes li:focus,
.line-notes li.is-linked,
.line-notes li.is-selected {
  border-color: #e8c46b;
  border-left-color: var(--gold);
  background: #fff2bf;
  box-shadow: 0 0 0 2px rgba(214, 155, 31, 0.16);
}

.line-no {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 900;
}

.line-desc {
  overflow-wrap: anywhere;
}

/* この行が動きの何に当たるか個別の説明がある行を目立たせる */
.line-notes li.has-note {
  background: #eef5ff;
  border-color: #b9d3f5;
  border-left-color: #2563eb;
}

.code-line.has-note {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

/* has-note 行でも、ホバー/選択時のハイライトが優先されるようにする */
.line-notes li.has-note:hover,
.line-notes li.has-note:focus,
.line-notes li.has-note.is-linked,
.line-notes li.has-note.is-selected {
  border-color: #e8c46b;
  border-left-color: var(--gold);
  background: #fff2bf;
  box-shadow: 0 0 0 2px rgba(214, 155, 31, 0.16);
}

.code-line.has-note:hover,
.code-line.has-note:focus,
.code-line.has-note.is-linked,
.code-line.has-note.is-selected {
  border-left-color: var(--gold);
  background: rgba(214, 155, 31, 0.18);
}

.asset-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.asset-columns section {
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.asset-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.asset-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 82px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.asset-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--asset-color, var(--accent));
  box-shadow: 3px 3px 0 rgba(23, 32, 38, 0.22);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.asset-name {
  display: block;
  margin-bottom: 4px;
  font-weight: 900;
}

.asset-note {
  display: block;
  color: #2c3840;
  line-height: 1.6;
}

.asset-mini {
  position: relative;
  width: 76px;
  height: 58px;
  justify-self: end;
  --mini-line: #172026;
}

.asset-mini span {
  position: absolute;
  display: block;
}

.mini-shadow {
  left: 17px;
  bottom: 4px;
  width: 44px;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 32, 38, 0.16);
}

.mini-head,
.mini-body,
.mini-arm,
.mini-leg {
  border: 2px solid var(--mini-line);
  background: var(--asset-color, var(--accent));
  box-shadow: 2px 2px 0 rgba(23, 32, 38, 0.22);
}

.mini-head {
  left: 25px;
  top: 2px;
  width: 28px;
  height: 25px;
  border-radius: 7px;
}

.mini-eye {
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mini-line);
}

.mini-eye.left {
  left: 8px;
}

.mini-eye.right {
  right: 8px;
}

.mini-body {
  left: 30px;
  top: 29px;
  width: 18px;
  height: 17px;
  border-radius: 5px;
}

.mini-arm {
  top: 29px;
  width: 7px;
  height: 22px;
  border-radius: 999px;
  transform-origin: 50% 2px;
}

.mini-arm.left {
  left: 25px;
  transform: rotate(36deg);
}

.mini-arm.right {
  left: 47px;
  transform: rotate(-36deg);
}

.mini-leg {
  top: 44px;
  width: 7px;
  height: 18px;
  border-radius: 999px;
  transform-origin: 50% 2px;
}

.mini-leg.left {
  left: 31px;
  transform: rotate(14deg);
}

.mini-leg.right {
  left: 41px;
  transform: rotate(-14deg);
}

.mini-effect {
  display: none;
}

.pose-walk .mini-arm.left {
  transform: rotate(44deg);
}

.pose-walk .mini-arm.right {
  transform: rotate(-18deg);
}

.pose-walk .mini-leg.left {
  transform: translateX(-2px) rotate(-24deg);
}

.pose-walk .mini-leg.right {
  transform: translateX(2px) rotate(14deg);
}

.pose-jump .mini-head,
.pose-jump .mini-body,
.pose-jump .mini-arm,
.pose-jump .mini-leg {
  transform: translateY(-9px);
}

.pose-jump .mini-arm.left {
  transform: translateY(-9px) rotate(-58deg);
}

.pose-jump .mini-arm.right {
  transform: translateY(-9px) rotate(58deg);
}

.pose-jump .mini-leg.left {
  transform: translate(-3px, -9px) rotate(28deg);
}

.pose-jump .mini-leg.right {
  transform: translate(3px, -9px) rotate(-28deg);
}

.pose-jump .mini-shadow {
  transform: scaleX(0.72);
  opacity: 0.55;
}

.pose-dash .mini-head {
  transform: translate(8px, 5px) scale(1.04, 0.82);
}

.pose-dash .mini-body {
  transform: translate(7px, 5px) scale(1.12, 0.8);
}

.pose-dash .mini-arm.left {
  transform: translate(8px, 8px) rotate(84deg);
}

.pose-dash .mini-arm.right {
  transform: translate(12px, 8px) rotate(84deg);
}

.pose-dash .mini-leg.left {
  transform: translate(-8px, 4px) rotate(78deg);
}

.pose-dash .mini-leg.right {
  transform: translate(7px, 4px) rotate(78deg);
}

.pose-dash .mini-effect {
  display: block;
  left: 3px;
  top: 21px;
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(23, 32, 38, 0.3);
  box-shadow: -8px 10px 0 rgba(23, 32, 38, 0.18);
}

.pose-crouch .mini-head {
  transform: translateY(13px) scale(1.05, 0.8);
}

.pose-crouch .mini-body {
  transform: translateY(12px) scale(1.08, 0.68);
}

.pose-crouch .mini-arm {
  transform: translateY(12px) rotate(78deg);
}

.pose-crouch .mini-leg {
  transform: translateY(8px) rotate(74deg) scaleY(0.8);
}

.pose-slide .mini-head {
  transform: translate(8px, 15px) scale(1.05, 0.76);
}

.pose-slide .mini-body {
  transform: translate(7px, 15px) scale(1.15, 0.62);
}

.pose-slide .mini-arm.left,
.pose-slide .mini-arm.right,
.pose-slide .mini-leg.left,
.pose-slide .mini-leg.right {
  transform: translateY(14px) rotate(86deg);
}

.pose-slide .mini-effect {
  display: block;
  left: 2px;
  bottom: 11px;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(23, 32, 38, 0.28);
  box-shadow: -11px 6px 0 rgba(23, 32, 38, 0.16);
}

.pose-attack .mini-head {
  transform: translateX(4px);
}

.pose-attack .mini-arm.right {
  height: 27px;
  transform: translate(7px, -1px) rotate(82deg);
}

.pose-attack .mini-effect {
  display: block;
  right: 0;
  top: 26px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mini-line);
  border-radius: 50%;
  background: #ffffff;
}

.pose-item .mini-head,
.pose-item .mini-body,
.pose-item .mini-arm,
.pose-item .mini-leg {
  display: none;
}

.pose-item .mini-effect {
  display: block;
  left: 28px;
  top: 14px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--mini-line);
  border-radius: 6px;
  background: var(--asset-color, var(--accent));
  box-shadow: 0 -8px 0 -5px #ffffff, 3px 3px 0 rgba(23, 32, 38, 0.22);
  transform: rotate(10deg);
}

.pose-coin .mini-head,
.pose-coin .mini-body,
.pose-coin .mini-arm,
.pose-coin .mini-leg,
.pose-triangle .mini-head,
.pose-triangle .mini-body,
.pose-triangle .mini-arm,
.pose-triangle .mini-leg,
.pose-star .mini-head,
.pose-star .mini-body,
.pose-star .mini-arm,
.pose-star .mini-leg,
.pose-heart .mini-head,
.pose-heart .mini-body,
.pose-heart .mini-arm,
.pose-heart .mini-leg,
.pose-key .mini-head,
.pose-key .mini-body,
.pose-key .mini-arm,
.pose-key .mini-leg,
.pose-spring .mini-head,
.pose-spring .mini-body,
.pose-spring .mini-arm,
.pose-spring .mini-leg,
.pose-bubble .mini-head,
.pose-bubble .mini-body,
.pose-bubble .mini-arm,
.pose-bubble .mini-leg {
  display: none;
}

.pose-coin .mini-effect,
.pose-bubble .mini-effect {
  display: block;
  left: 25px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--mini-line);
  border-radius: 50%;
  background: var(--asset-color, var(--accent));
  box-shadow: inset 7px 0 0 rgba(255, 255, 255, 0.38), 3px 3px 0 rgba(23, 32, 38, 0.22);
}

.pose-bubble .mini-effect {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 7px 0 0 rgba(167, 139, 250, 0.34), 3px 3px 0 rgba(23, 32, 38, 0.18);
}

.pose-triangle .mini-effect {
  display: block;
  left: 24px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--mini-line);
  background: var(--asset-color, var(--accent));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 3px 3px 0 rgba(23, 32, 38, 0.22);
}

.pose-star .mini-effect {
  display: block;
  left: 21px;
  top: 7px;
  width: 38px;
  height: 38px;
  border: 2px solid var(--mini-line);
  background: var(--asset-color, var(--accent));
  clip-path: polygon(50% 0, 61% 33%, 96% 35%, 68% 55%, 79% 90%, 50% 69%, 21% 90%, 32% 55%, 4% 35%, 39% 33%);
}

.pose-heart .mini-effect {
  display: grid;
  left: 23px;
  top: 12px;
  width: 34px;
  height: 30px;
  place-items: center;
  border: 2px solid var(--mini-line);
  border-radius: 13px 13px 8px 8px;
  background: var(--asset-color, var(--accent));
  color: #ffffff;
  font-weight: 900;
}

.pose-heart .mini-effect::before {
  content: "+";
}

.pose-key .mini-effect {
  display: block;
  left: 15px;
  top: 21px;
  width: 47px;
  height: 13px;
  border: 2px solid var(--mini-line);
  border-radius: 999px 4px 4px 999px;
  background: var(--asset-color, var(--accent));
  box-shadow: 3px 3px 0 rgba(23, 32, 38, 0.2);
}

.pose-key .mini-effect::before,
.pose-key .mini-effect::after {
  content: "";
  position: absolute;
  border: 2px solid var(--mini-line);
  background: #fff7cf;
}

.pose-key .mini-effect::before {
  left: -5px;
  top: -8px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
}

.pose-key .mini-effect::after {
  right: -4px;
  bottom: -9px;
  width: 14px;
  height: 9px;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.pose-spring .mini-effect {
  display: block;
  left: 18px;
  top: 19px;
  width: 44px;
  height: 20px;
  border: 2px solid var(--mini-line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.86) 6px 10px),
    var(--asset-color, var(--accent));
}

.pose-spring .mini-effect::before,
.pose-spring .mini-effect::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  height: 6px;
  border: 2px solid var(--mini-line);
  border-radius: 5px;
  background: #fffdf7;
}

.pose-spring .mini-effect::before {
  top: -8px;
}

.pose-spring .mini-effect::after {
  bottom: -8px;
}

.pose-fx .mini-head,
.pose-fx .mini-body,
.pose-fx .mini-arm,
.pose-fx .mini-leg {
  display: none;
}

.pose-fx .mini-effect {
  display: block;
  left: 18px;
  top: 11px;
  width: 38px;
  height: 38px;
  border: 2px solid var(--mini-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 22%, transparent 23%),
    conic-gradient(from 12deg, var(--asset-color, var(--accent)), #ffffff, var(--asset-color, var(--accent)));
}

.prompt-text {
  padding: 16px;
  border-left: 5px solid var(--teal);
  background: #ffffff;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #fffdf7;
  font-size: 0.82rem;
}

.site-footer a {
  color: var(--blue);
  font-weight: 800;
}

.motion-walk {
  animation: walk 2.4s ease-in-out infinite;
}

.motion-shell {
  animation: shell 2.1s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.motion-fly {
  bottom: 92px;
  animation: fly 2.8s ease-in-out infinite;
}

.motion-hop {
  animation: hop 1.15s ease-in-out infinite;
}

.motion-bounce {
  animation: bounce 1.5s ease-in-out infinite;
}

.motion-turret {
  bottom: 18px;
  animation: turret 1.8s steps(2, end) infinite;
}

.motion-aim {
  bottom: 72px;
  animation: aim 2.4s ease-in-out infinite;
}

.motion-chase {
  animation: chase 2.6s ease-in-out infinite;
}

.motion-charge {
  animation: charge 2.1s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.motion-drop {
  bottom: auto;
  top: 4px;
  animation: drop 2.2s ease-in infinite;
}

.motion-burrow {
  animation: burrow 2.2s ease-in-out infinite;
}

.motion-sine {
  bottom: 88px;
  animation: sine 3.2s ease-in-out infinite;
}

.motion-platform {
  animation: platform 2s ease-in-out infinite;
}

.motion-throw {
  animation: thrower 1.7s ease-in-out infinite;
}

.motion-stomp {
  width: 58px;
  height: 58px;
  animation: stomp 1.9s ease-in infinite;
}

.motion-fish-arc {
  animation: fishArc 2.4s ease-in-out infinite;
}

.motion-lava {
  animation: lavaBubble 1.7s ease-in-out infinite;
}

.motion-boomerang {
  animation: boomerang 2.2s ease-in-out infinite;
}

.motion-cloud-drop {
  bottom: 104px;
  animation: cloudDrop 2.8s ease-in-out infinite;
}

.motion-ghost {
  bottom: 72px;
  animation: ghostApproach 2.6s ease-in-out infinite;
}

.motion-crusher {
  bottom: auto;
  top: 0;
  width: 64px;
  height: 64px;
  animation: crusher 2.4s ease-in-out infinite;
}

.motion-firebar {
  bottom: 64px;
  animation: firebar 2.2s linear infinite;
}

.motion-wall-crawl {
  animation: wallCrawl 3.8s linear infinite;
}

.motion-swoop {
  bottom: 118px;
  animation: swoop 2.6s ease-in-out infinite;
}

.motion-roll {
  animation: roll 1.9s linear infinite;
}

.motion-floaty {
  bottom: 82px;
  animation: floaty 2.7s ease-in-out infinite;
}

.motion-inhale {
  animation: inhale 2.2s ease-in-out infinite;
}

.motion-cutter {
  animation: cutter 2.3s ease-in-out infinite;
}

.motion-spark {
  bottom: 70px;
  animation: spark 2.1s ease-in-out infinite;
}

.motion-run {
  animation: runAccel 2.4s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.motion-jump-variable {
  animation: variableJump 2.2s ease-in-out infinite;
}

.motion-dash-player {
  animation: dashPlayer 1.8s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.motion-slide {
  animation: slide 1.8s ease-in-out infinite;
}

.motion-float-player {
  bottom: 76px;
  animation: playerFloat 3s ease-in-out infinite;
}

.motion-copy-attack {
  animation: copyAttack 2.4s ease-in-out infinite;
}

.motion-swim-player {
  bottom: 78px;
  animation: swimPlayer 2.5s ease-in-out infinite;
}

.motion-climb {
  animation: climb 2.8s steps(5, end) infinite;
}

.motion-wall-jump {
  animation: wallJump 2.2s ease-in-out infinite;
}

.motion-coin {
  bottom: 74px;
  animation: coinArc 1.7s ease-in-out infinite;
}

.motion-powerup {
  animation: powerupWalk 2.7s ease-in-out infinite;
}

.motion-star {
  animation: starBounce 1.8s ease-in-out infinite;
}

.motion-heal {
  bottom: 76px;
  animation: healFloat 2.4s ease-in-out infinite;
}

.motion-key-follow {
  bottom: 70px;
  animation: keyFollow 2.6s ease-in-out infinite;
}

.motion-spring {
  animation: springLaunch 2.1s ease-in-out infinite;
}

.motion-spring-player {
  animation: springPlayerLaunch 2.1s ease-in-out infinite;
}

.motion-fire-shot {
  animation: fireShot 2.1s ease-in-out infinite;
}

.motion-ice-breath {
  animation: iceBreath 2.3s ease-in-out infinite;
}

.motion-sword-slash {
  animation: swordSlash 1.8s ease-in-out infinite;
}

.motion-hammer-slam {
  animation: hammerSlam 2.1s ease-in-out infinite;
}

.motion-player-boomerang {
  animation: playerThrowPose 2.4s ease-in-out infinite;
}

.motion-beam-whip {
  animation: playerBeamPose 2.2s ease-in-out infinite;
}

.motion-bomb-toss {
  animation: playerBombPose 2.5s ease-in-out infinite;
}

.motion-star-dash {
  animation: starDash 1.8s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.motion-drill-dive {
  animation: drillDive 2.4s ease-in-out infinite;
}

.motion-tornado-spin {
  bottom: 58px;
  animation: tornadoSpin 2.2s ease-in-out infinite;
}

.motion-ground-pound {
  bottom: 118px;
  animation: groundPound 2s ease-in infinite;
}

.motion-shell-kick {
  animation: shellKick 2.1s ease-in-out infinite;
}

.motion-double-jump {
  animation: doubleJump 2s ease-in-out infinite;
}

.motion-wall-slide {
  animation: wallSlide 2s linear infinite;
}

.motion-glide {
  animation: glide 3s ease-in-out infinite;
}

.motion-dodge-roll {
  animation: dodgeRoll 1.4s ease-in-out infinite;
}

.motion-crouch {
  animation: crouch 2s ease-in-out infinite;
}

.motion-charge-shot {
  animation: chargeShot 1.8s ease-in-out infinite;
}

.motion-pendulum {
  animation: pendulum 2s ease-in-out infinite;
}

.motion-moving-platform {
  animation: movingPlatform 2.6s ease-in-out infinite;
}

.motion-falling-platform {
  animation: fallingPlatform 2.4s ease-in-out infinite;
}

.motion-saw {
  animation: saw 2.4s linear infinite;
}

.motion-spitter {
  animation: spitter 1.6s ease-in-out infinite;
}

.motion-1up {
  animation: oneUp 3s ease-in-out infinite;
}

.motion-magnet {
  animation: magnet 1.2s cubic-bezier(0.6, 0, 0.9, 0.3) infinite;
}

.motion-flag {
  animation: flagRaise 2.6s ease-in-out infinite;
}

.motion-ledge-grab {
  animation: ledgeGrab 2.6s ease-in-out infinite;
}

.motion-carry-throw {
  animation: carryThrow 2.2s ease-in-out infinite;
}

.motion-air-dash {
  animation: airDash 2s cubic-bezier(0.2, 0.9, 0.1, 1) infinite;
}

.motion-guard {
  animation: guard 2s ease-in-out infinite;
}

.motion-multi-jump-boss {
  animation: multiJumpBoss 2.4s ease-in-out infinite;
}

.motion-edge-boss {
  animation: edgeBouncerBoss 2.8s ease-in-out infinite;
}

.motion-conveyor {
  animation: conveyor 2.2s linear infinite;
}

.motion-seesaw {
  animation: seesaw 2.5s ease-in-out infinite;
}

.motion-water {
  animation: waterCurrent 2.6s linear infinite;
}

.motion-wall-hand {
  animation: wallHand 1.8s ease-in-out infinite;
}

.motion-mine {
  animation: mineSetter 2.4s ease-in-out infinite;
}

@keyframes walk {
  0%, 100% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(190px) scaleX(1); }
  50% { transform: translateX(190px) scaleX(-1); }
  95% { transform: translateX(0) scaleX(-1); }
}

@keyframes shell {
  0%, 24% { transform: translateX(0) scale(1); }
  34%, 70% { transform: translateX(235px) scale(0.78) rotate(720deg); }
  82%, 100% { transform: translateX(0) scale(0.78) rotate(1080deg); }
}

@keyframes fly {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(210px, -26px); }
}

@keyframes hop {
  0%, 100% { transform: translate(0, 0) scale(1.08, 0.92); }
  50% { transform: translate(92px, -78px) scale(0.94, 1.08); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1.14, 0.86); }
  48% { transform: translateY(-128px) scale(0.92, 1.1); }
}

@keyframes turret {
  0%, 35%, 100% { transform: translateX(0); }
  42% { transform: translateX(-8px); }
}

@keyframes aim {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(160px, 34px) rotate(8deg); }
}

@keyframes chase {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(220px) scaleX(1.08); }
}

@keyframes charge {
  0%, 32% { transform: translateX(0); }
  8%, 24% { transform: translateX(-5px); }
  42%, 70% { transform: translateX(250px) scaleX(1.35); }
  100% { transform: translateX(0); }
}

@keyframes drop {
  0%, 38% { transform: translateY(0); }
  58%, 72% { transform: translateY(186px) scale(1.18, 0.78); }
  100% { transform: translateY(0); }
}

@keyframes burrow {
  0%, 30%, 100% { transform: translateY(42px) scaleY(0.22); opacity: 0.65; }
  45%, 74% { transform: translateY(0) scaleY(1); opacity: 1; }
}

@keyframes sine {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(60px, -34px); }
  50% { transform: translate(128px, 26px); }
  75% { transform: translate(190px, -28px); }
}

@keyframes platform {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(118px); }
}

@keyframes thrower {
  0%, 100% { transform: translateX(0) rotate(0); }
  45% { transform: translateX(36px) rotate(-8deg); }
  58% { transform: translateX(26px) rotate(10deg); }
}

@keyframes stomp {
  0%, 100% { transform: translateY(0); }
  38% { transform: translateY(-118px); }
  58%, 68% { transform: translateY(0) scale(1.2, 0.74); }
}

@keyframes projectile {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(120px, -48px) scale(1); }
  100% { transform: translate(245px, 4px) scale(0.8); opacity: 0; }
}

@keyframes previewBoom {
  0% { transform: scale(0.985); }
  55% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

@keyframes fishArc {
  0%, 100% { transform: translate(0, 70px) rotate(-8deg); opacity: 0.35; }
  45% { transform: translate(150px, -96px) rotate(10deg); opacity: 1; }
  70% { transform: translate(230px, 48px) rotate(24deg); opacity: 0.8; }
}

@keyframes lavaBubble {
  0%, 100% { transform: translateY(56px) scale(0.8); opacity: 0.5; }
  48% { transform: translateY(-138px) scale(1); opacity: 1; }
}

@keyframes boomerang {
  0%, 100% { transform: translateX(0) rotate(0); }
  45% { transform: translate(170px, -54px) rotate(420deg); }
  78% { transform: translate(70px, -18px) rotate(720deg); }
}

@keyframes cloudDrop {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(190px); }
  58% { transform: translate(190px, 52px); }
  72% { transform: translate(190px, 0); }
}

@keyframes ghostApproach {
  0%, 28%, 100% { transform: translateX(0); opacity: 0.7; }
  58% { transform: translateX(170px); opacity: 1; }
  72% { transform: translateX(170px) scale(1.08); }
}

@keyframes crusher {
  0%, 38%, 100% { transform: translateY(0); }
  54%, 68% { transform: translateY(190px) scale(1.08, 0.86); }
}

@keyframes firebar {
  0% { transform: translateX(115px) rotate(0deg); }
  100% { transform: translateX(115px) rotate(360deg); }
}

@keyframes wallCrawl {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(185px, 0) rotate(90deg); }
  50% { transform: translate(185px, -108px) rotate(180deg); }
  75% { transform: translate(0, -108px) rotate(270deg); }
}

@keyframes swoop {
  0%, 30%, 100% { transform: translate(0, 0); }
  55% { transform: translate(135px, 118px) rotate(-18deg); }
  72% { transform: translate(230px, 72px) rotate(8deg); }
}

@keyframes roll {
  0%, 100% { transform: translateX(0) rotate(0); }
  50% { transform: translateX(225px) rotate(540deg); }
}

@keyframes floaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(70px, -28px) scale(1.05); }
  70% { transform: translate(150px, 22px) scale(0.96); }
}

@keyframes inhale {
  /* コードに合わせ、横移動せずその場で膨らんでしぼむ */
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.32, 1.18); }
  60% { transform: scale(0.92, 0.96); }
}

@keyframes cutter {
  0%, 100% { transform: translateX(0) rotate(0); }
  42% { transform: translate(175px, -42px) rotate(360deg); }
  80% { transform: translate(34px, -12px) rotate(720deg); }
}

@keyframes spark {
  /* コードに合わせ、横移動せずその場で広がって戻る */
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3); filter: brightness(1.4); }
}

@keyframes runAccel {
  0% { transform: translateX(0) skewX(0); }
  35% { transform: translateX(80px) skewX(-4deg); }
  70% { transform: translateX(245px) skewX(-10deg); }
  100% { transform: translateX(0) skewX(0); }
}

@keyframes variableJump {
  /* コードに合わせ、低い跳びと高い跳びを交互に見せる（押す時間で高さが変わる） */
  0%, 45%, 90%, 100% { transform: translateY(0); }
  22% { transform: translateY(-58px); }
  68% { transform: translateY(-132px); }
}

@keyframes dashPlayer {
  0%, 24%, 100% { transform: translateX(0) scale(1); }
  52% { transform: translateX(245px) scale(1.45, 0.82); }
}

@keyframes slide {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(210px) scale(1.42, 0.58); }
}

@keyframes playerFloat {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(60px, -18px); }
  50% { transform: translate(126px, 10px); }
  75% { transform: translate(190px, -24px); }
}

@keyframes copyAttack {
  0%, 100% { transform: translateX(0) rotate(0); }
  42% { transform: translateX(120px) rotate(-14deg) scale(1.12); }
  58% { transform: translateX(155px) rotate(12deg) scale(0.92); }
}

@keyframes swimPlayer {
  0%, 100% { transform: translate(0, 8px) rotate(0); }
  30% { transform: translate(80px, -22px) rotate(-8deg); }
  62% { transform: translate(160px, 24px) rotate(8deg); }
}

@keyframes climb {
  0% { transform: translateY(72px); }
  100% { transform: translateY(-118px); }
}

@keyframes wallJump {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  28% { transform: translate(34px, -102px) rotate(-10deg); }
  62% { transform: translate(170px, -46px) rotate(8deg); }
}

@keyframes coinArc {
  /* コードに合わせ、その場で上へ飛び出し回りながら落ちる（横移動なし） */
  0%, 100% { transform: translateY(36px) rotateY(0deg); opacity: 0.2; }
  45% { transform: translateY(-84px) rotateY(180deg); opacity: 1; }
  75% { transform: translateY(-16px) rotateY(360deg); opacity: 0.8; }
}

@keyframes powerupWalk {
  0%, 18% { transform: translateY(54px) scale(0.8); opacity: 0.7; }
  38% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translate(210px, 0); }
}

@keyframes starBounce {
  0%, 100% { transform: translate(0, 0) rotate(0); filter: brightness(1); }
  40% { transform: translate(95px, -92px) rotate(180deg); filter: brightness(1.4); }
  78% { transform: translate(210px, 0) rotate(360deg); }
}

@keyframes healFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(130px, -38px) scale(1.16); }
}

@keyframes keyFollow {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  45% { transform: translate(125px, -28px) rotate(10deg); }
  70% { transform: translate(92px, 10px) rotate(-4deg); }
}

@keyframes springLaunch {
  0%, 20%, 100% { transform: translate(0, 0) scale(1.15, 0.78); }
  48% { transform: translate(85px, -138px) scale(0.86, 1.22); }
  72% { transform: translate(170px, 0) scale(1); }
}

@keyframes springPlayerLaunch {
  /* コードに合わせ、その場で縮んで真上へ打ち上がる（横移動なし） */
  0%, 20%, 100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(8px) scale(1.1, 0.78); }
  50% { transform: translateY(-138px) scale(0.9, 1.16); }
  74% { transform: translateY(-52px) scale(1); }
}

@keyframes springPadUse {
  0%, 24%, 100% { transform: scaleY(1); }
  32% { transform: scaleY(0.55); }
  42% { transform: scaleY(1.18); }
}

@keyframes demoFireball {
  0%, 18%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  34% { transform: translate(78px, -26px) scale(1); opacity: 1; }
  62% { transform: translate(170px, -6px) scale(1.08); opacity: 1; }
  82% { transform: translate(232px, -22px) scale(0.8); opacity: 0; }
}

@keyframes demoIceCloud {
  0%, 20%, 100% { transform: scaleX(0.12); opacity: 0; }
  42% { transform: scaleX(3.4) skewX(-8deg); opacity: 0.95; }
  64% { transform: scaleX(4.8) skewX(6deg); opacity: 0.35; }
}

@keyframes fireShot {
  0%, 100% { transform: translateX(0) scale(1); filter: brightness(1); }
  24% { transform: translateX(30px) scale(1.08); filter: brightness(1.25); }
  55% { transform: translateX(150px) scale(0.95); }
  72% { transform: translate(220px, -22px) scale(1.05); filter: brightness(1.35); }
}

@keyframes iceBreath {
  0%, 100% { transform: translateX(0) scale(1); opacity: 1; }
  30% { transform: translateX(42px) scale(1.12, 0.92); }
  58% { transform: translateX(118px) scale(1.42, 0.86); opacity: 0.82; }
  76% { transform: translateX(118px) scale(0.95); opacity: 1; }
}

@keyframes swordSlash {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  34% { transform: translateX(70px) rotate(-18deg) scale(1.16); }
  52% { transform: translateX(108px) rotate(24deg) scale(0.92); }
}

@keyframes hammerSlam {
  /* コードに合わせ、その場で振り上げて振り下ろす（横移動なし・回転で表現） */
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(-16deg); }
  52%, 64% { transform: rotate(18deg) scale(1.18, 0.78); }
}

@keyframes playerThrowPose {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  24% { transform: translate(18px, -6px) rotate(-10deg) scale(1.06); }
  42% { transform: translate(32px, 0) rotate(8deg) scale(0.96); }
  72% { transform: translate(10px, 0) rotate(0); }
}

@keyframes demoBoomerang {
  0%, 18%, 100% { transform: translate(0, 0) rotate(-18deg); opacity: 0; }
  32% { transform: translate(92px, -56px) rotate(260deg); opacity: 1; }
  56% { transform: translate(190px, -24px) rotate(560deg); opacity: 1; }
  82% { transform: translate(34px, -10px) rotate(860deg); opacity: 1; }
}

@keyframes playerBeamPose {
  0%, 100% { transform: translateX(0) scale(1); }
  32% { transform: translateX(24px) scale(1.08, 0.92) skewX(-8deg); }
  58% { transform: translateX(18px) scale(0.96, 1.04) skewX(4deg); }
}

@keyframes demoBeam {
  0%, 18%, 100% { transform: scaleX(0.15); opacity: 0; }
  35% { transform: scaleX(4.2) skewX(-8deg); opacity: 1; }
  58% { transform: scaleX(3.1) skewX(8deg); opacity: 0.9; }
  72% { opacity: 0; }
}

@keyframes playerBombPose {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  28% { transform: translate(24px, -18px) rotate(-14deg) scale(1.08); }
  52% { transform: translate(30px, 0) rotate(8deg) scale(0.96); }
  78% { transform: translate(10px, 0) scale(1); }
}

@keyframes demoBomb {
  0%, 20%, 100% { transform: translate(0, 0) rotate(0); opacity: 0; }
  34% { transform: translate(56px, -96px) rotate(160deg); opacity: 1; }
  62% { transform: translate(140px, -34px) rotate(320deg); opacity: 1; }
  74% { transform: translate(168px, 0) rotate(380deg); opacity: 0; }
}

@keyframes demoBombBurst {
  0%, 66%, 100% { transform: scale(0.4); opacity: 0; }
  76% { transform: scale(1.25); opacity: 1; }
  88% { transform: scale(1.7); opacity: 0; }
}

@keyframes demoTornadoRing {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.8); opacity: 0; }
  34% { transform: translate(58px, -54px) rotate(220deg) scale(1.15); opacity: 1; }
  68% { transform: translate(138px, 8px) rotate(520deg) scale(1); opacity: 0.86; }
}

@keyframes demoStarAura {
  0%, 18%, 100% { transform: translateX(0) scale(0.75); opacity: 0; }
  48% { transform: translateX(250px) scale(1.15); opacity: 0.9; }
  70% { opacity: 0.25; }
}

@keyframes demoDrill {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  28% { transform: translate(50px, 34px) rotate(260deg); opacity: 0.85; }
  58% { transform: translate(128px, 22px) rotate(620deg); opacity: 1; }
  78% { transform: translate(204px, -50px) rotate(820deg); opacity: 0.9; }
}

@keyframes demoShellKick {
  0%, 20%, 100% { transform: translateX(0) rotate(0); opacity: 0; }
  36% { transform: translateX(52px) rotate(-12deg); opacity: 1; }
  64% { transform: translateX(205px) rotate(680deg); opacity: 1; }
}

@keyframes demoSlash {
  0%, 22%, 100% { transform: rotate(-35deg) scale(0.6); opacity: 0; }
  38% { transform: rotate(25deg) scale(1.1); opacity: 1; }
  56% { transform: rotate(55deg) scale(0.9); opacity: 0.2; }
}

@keyframes demoHammer {
  0%, 100% { transform: rotate(-18deg); opacity: 0.95; }
  28% { transform: translate(30px, -48px) rotate(-58deg); }
  52%, 64% { transform: translate(70px, 14px) rotate(68deg); }
}

@keyframes starDash {
  0%, 18%, 100% { transform: translateX(0) scale(1); filter: brightness(1); }
  48% { transform: translateX(250px) scale(1.35, 0.84); filter: brightness(1.7); }
}

@keyframes drillDive {
  0%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
  28% { transform: translate(64px, 42px) rotate(260deg) scale(0.72); opacity: 0.55; }
  58% { transform: translate(146px, 28px) rotate(620deg) scale(0.84); opacity: 0.72; }
  78% { transform: translate(214px, -42px) rotate(820deg) scale(1.05); opacity: 1; }
}

@keyframes tornadoSpin {
  /* コードに合わせ、その場で回転しながら浮き上がって下りる（横移動なし） */
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  34% { transform: translateY(-54px) rotate(360deg) scale(1.18); }
  68% { transform: translateY(8px) rotate(720deg) scale(0.98); }
}

@keyframes groundPound {
  0%, 32%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(92px) rotate(180deg) scale(1.05); }
  62%, 70% { transform: translateY(118px) rotate(180deg) scale(1.24, 0.68); }
}

@keyframes shellKick {
  0%, 20%, 100% { transform: translateX(0) rotate(0); }
  36% { transform: translateX(46px) rotate(-12deg); }
  58% { transform: translateX(205px) rotate(720deg) scale(0.86); }
}

@keyframes doubleJump {
  /* 1回目のジャンプ→落ち始め→空中で2回目(高い)→着地。前へ進む */
  0%, 100% { transform: translate(0, 0); }
  22% { transform: translate(52px, -78px); }
  40% { transform: translate(95px, -40px); }
  64% { transform: translate(150px, -120px); }
  88% { transform: translate(218px, 0); }
}

@keyframes wallSlide {
  /* 壁に張り付き、上から下へ一定速度でずり落ちる(横移動なし) */
  0% { transform: translateY(-118px) rotate(6deg); }
  100% { transform: translateY(0) rotate(6deg); }
}

@keyframes glide {
  /* 高い位置から前へ進みながらゆっくり降りる */
  0% { transform: translate(0, -110px) rotate(-4deg); }
  50% { transform: translate(120px, -66px) rotate(3deg); }
  100% { transform: translate(240px, 0) rotate(-4deg); }
}

@keyframes dodgeRoll {
  /* 低い姿勢で前へ素早く転がり、立ち上がる */
  0%, 100% { transform: translateX(0) rotate(0) scaleY(1); }
  35% { transform: translateX(95px) rotate(-280deg) scaleY(0.7); }
  60% { transform: translateX(150px) rotate(-360deg) scaleY(0.7); }
  80%, 92% { transform: translateX(150px) rotate(-360deg) scaleY(1); }
}

@keyframes crouch {
  /* その場で縦に縮んでしゃがみ、立ち上がる(横移動なし) */
  0%, 100% { transform: scaleY(1); }
  25%, 70% { transform: scaleY(0.6); }
}

@keyframes chargeShot {
  /* その場で縮んでため(小刻みに震える)、ぐっと膨らんで解放、戻る */
  0%, 100% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(0.85); }
  40% { transform: scale(0.82); }
  55% { transform: scale(0.85); }
  68% { transform: scale(1.3); filter: brightness(1.5); }
  82% { transform: scale(1); }
}

@keyframes pendulum {
  /* 支点からぶら下がり左右に振れる。中央が最も低い */
  0%, 100% { transform: translate(-120px, 18px) rotate(-46deg); }
  25% { transform: translate(0, 54px) rotate(0deg); }
  50% { transform: translate(120px, 18px) rotate(46deg); }
  75% { transform: translate(0, 54px) rotate(0deg); }
}

@keyframes movingPlatform {
  /* 一定範囲を左右に往復する足場 */
  0%, 100% { transform: translateX(-110px); }
  50% { transform: translateX(110px); }
}

@keyframes fallingPlatform {
  /* 静止→予兆の揺れ→落下→下で待つ→復帰 */
  0%, 14% { transform: translate(0, 0); }
  6% { transform: translate(3px, 0); }
  10% { transform: translate(-3px, 0); }
  42% { transform: translateY(190px); }
  66% { transform: translateY(190px); }
  90%, 100% { transform: translateY(0); }
}

@keyframes saw {
  /* 回転しながらレール上を往復 */
  0% { transform: translateX(-110px) rotate(0deg); }
  50% { transform: translateX(110px) rotate(1800deg); }
  100% { transform: translateX(-110px) rotate(3600deg); }
}

@keyframes spitter {
  /* その場でため、上へ伸びて吐く反動、戻る */
  0%, 60%, 100% { transform: translateY(0) scaleY(0.8); }
  68% { transform: translateY(-12px) scaleY(1.3); }
  80% { transform: translateY(0) scaleY(1); }
}

@keyframes oneUp {
  /* 8の字を描くようにふわふわ漂う */
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(26px, -22px); }
  50% { transform: translate(0, -36px); }
  75% { transform: translate(-26px, -22px); }
}

@keyframes magnet {
  /* 遠くから加速しながら手元へ吸い寄せられる(ease-inで加速) */
  0% { transform: translateX(150px); opacity: 0.85; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes flagRaise {
  /* 旗がポールを上がって、上ではためく */
  0% { transform: translateY(60px) rotate(0deg); }
  25% { transform: translateY(-30px) rotate(0deg); }
  40% { transform: translateY(-30px) rotate(-6deg); }
  55% { transform: translateY(-30px) rotate(6deg); }
  70%, 100% { transform: translateY(-30px) rotate(0deg); }
}

@keyframes ledgeGrab {
  /* ふちをつかむ→ぶら下がる→乗り越えて登る */
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0, -90px); }
  55% { transform: translate(0, -90px); }
  80%, 92% { transform: translate(40px, -140px); }
}

@keyframes carryThrow {
  /* しゃがんで持ち上げ→立つ→ため→前へ投げ→戻る */
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  18% { transform: scaleY(0.7) rotate(0deg); }
  40% { transform: scaleY(1) rotate(0deg); }
  55% { transform: scaleY(1) rotate(14deg); }
  68% { transform: scaleY(1) rotate(-20deg); }
  82% { transform: scaleY(1) rotate(0deg); }
}

@keyframes airDash {
  /* 浮く→空中で横へ一気にダッシュ→落下 */
  0% { transform: translate(0, 0); }
  26% { transform: translate(0, -100px); }
  46% { transform: translate(220px, -100px) scaleX(1.35); }
  52% { transform: translate(220px, -100px) scaleX(1); }
  85% { transform: translate(220px, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes multiJumpBoss {
  /* 大きなジャンプを連続して前へ迫る(3回) */
  0% { transform: translate(0, 0); }
  16% { transform: translate(40px, -80px); }
  33% { transform: translate(75px, 0); }
  50% { transform: translate(115px, -80px); }
  66% { transform: translate(150px, 0); }
  83% { transform: translate(190px, -80px); }
  100% { transform: translate(225px, 0); }
}

@keyframes edgeBouncerBoss {
  /* 画面端から端へ弧を描いて往復 */
  0%, 100% { transform: translate(-120px, 0); }
  25% { transform: translate(-10px, -70px); }
  50% { transform: translate(120px, 0); }
  75% { transform: translate(-10px, -70px); }
}

@keyframes conveyor {
  /* ベルトで一定速度搬送、端で戻る(linearでループ=のこぎり) */
  0% { transform: translateX(-110px); }
  100% { transform: translateX(130px); }
}

@keyframes seesaw {
  /* 中心を軸に左右へ傾く */
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}

@keyframes waterCurrent {
  /* 一方向へ流されつつ上下に波打つ */
  0% { transform: translate(-110px, 0); }
  25% { transform: translate(-50px, -12px); }
  50% { transform: translate(10px, 0); }
  75% { transform: translate(70px, -12px); }
  100% { transform: translate(130px, 0); }
}

@keyframes wallHand {
  /* 壁から手が伸び出て、待って、引っ込む */
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(70px); }
  55% { transform: translateX(70px); }
  85% { transform: translateX(0); }
}

@keyframes mineSetter {
  /* 出現→点滅→ふくらんで爆発→消える */
  0% { transform: scale(0); opacity: 1; }
  8% { transform: scale(1); }
  20% { transform: scale(0.92); }
  32% { transform: scale(1.05); }
  44% { transform: scale(0.92); }
  56% { transform: scale(1.05); }
  68% { transform: scale(1); }
  80% { transform: scale(2.2); opacity: 0.5; }
  86%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes guard {
  /* 身構える→パリィでぐっと張る→戻る */
  0%, 100% { transform: scale(1, 1); filter: brightness(1); }
  25%, 50% { transform: scale(1.08, 0.92); }
  58% { transform: scale(1.25, 1.05); filter: brightness(1.4); }
  72% { transform: scale(1, 1); }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .library {
    border-bottom: 0;
  }

  .enemy-list {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    max-height: 300px;
  }

  .workspace {
    padding: 86px 18px 18px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .gallery-controls {
    grid-template-columns: 1fr;
  }

  .gallery-filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .code-split {
    grid-template-columns: repeat(2, 420px) !important;
    width: 100%;
    max-width: calc(100vw - 76px);
    overflow-x: auto;
  }

  .code-split-handle {
    display: none;
  }

  .code-column,
  .code-pane,
  .code-note {
    min-width: 420px;
  }

  .asset-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-head,
  .panel-title-row,
  .motion-group-head {
    display: grid;
  }

  .motion-group {
    padding: 10px;
  }

  .motion-track {
    inset: 34px 24px 54px;
  }

  .stage {
    height: 260px;
  }

  .asset-list li {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .asset-icon {
    grid-row: 1 / span 2;
  }

  .asset-mini {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }
}