#app[data-game=abc-tracing] {
  display: grid;
  grid-template: minmax(0,1fr) / minmax(0,1fr);
  place-items: center;
  padding: 0;
  background: linear-gradient(#56cef6,#c6f6ff 52%,#8bc92d);
}
.abc-scene {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%,177.57dvh);
  aspect-ratio: 1140 / 642;
  background: url('./guides/abc-scene.webp') center / 100% 100% no-repeat;
}
.abc-scene :is(.game-banner,.game-panel,.game-actions,.play-viewport,.playfield,
  .play-area,.cartoon-guide,.trace-footer,.trace-tools,.trace-tools .controls) {
  display: contents;
}
.abc-scene .guide-avatar { display: none; }
.abc-scene .abc-sign {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.abc-scene :is(.stage-status,.round-button,.prompt,.trace-board,.guide-line,.reaction-character,
  .example-card,.trace-tools button,.trace-tools label,.trace-footer .next-stage,.scene-paper,.scene-fox-spark) {
  position: absolute;
  margin: 0;
}
.abc-scene .stage-status {
  left: 36%; top: 2.65%; width: 39.8%; height: 7.6%; min-height: 0;
  justify-content: flex-start; gap: 2cqw; padding: 1% 3%;
  box-shadow: none; border: 0; background: transparent; color: transparent;
  font-size: 1.85cqw; pointer-events: none;
}
.abc-scene .stage-status progress { opacity: 0; width: 45%; }
.abc-scene .stage-stars { color: inherit; }
.abc-scene .stage-stars::first-letter { color: inherit; }
.abc-scene:is(:not([data-reference-letter]),[data-has-stars],[data-practice]) .stage-status {
  background: #fff1d6; color: #43205b;
}
.abc-scene:is(:not([data-reference-letter]),[data-has-stars]) .stage-status progress { opacity: 1; }
.abc-scene .round-button,.abc-scene .trace-tools button,.abc-scene .trace-footer .next-stage,
.abc-scene .example-card button {
  border: 0; min-height: 0; box-shadow: none; background: transparent; color: transparent;
  text-shadow: none; line-height: 1; z-index: 5; cursor: pointer;
}
.abc-scene button:focus-visible,.abc-scene a:focus-visible { outline: 3px solid #4913a0; outline-offset: 2px; }
.abc-scene .sound-button { left: 82.05%; top: .8%; width: 8.3%; height: 11.4%; }
.abc-scene .sound-button[aria-pressed=false]::after {
  content: ""; position: absolute; inset: 47% 20% auto; height: 8%;
  background: #fff; box-shadow: 0 1px 2px #48228e; transform: rotate(-43deg);
}
.abc-scene .home-button { left: 91%; top: .8%; width: 8.3%; height: 11.4%; }
.abc-scene .game-actions button:nth-child(2) {
  left: 36%; top: 2.5%; width: 40%; height: 7.9%; border-radius: 2rem;
}
.abc-scene .play-area .prompt {
  left: 30.3%; top: 12.1%; width: 21%; height: 7.1%;
  padding: 0; display: grid; place-items: center; color: transparent; background: transparent;
  box-shadow: none; border: 0; font-size: 2.45cqw; line-height: 1;
}
.abc-scene:not([data-reference-letter]) .play-area .prompt {
  top: 12.5%; height: 8.5%; color: #44204e;
  background: linear-gradient(#ffed84,#ffdb38); border-radius: 12%;
}
.abc-scene .scene-paper {
  z-index: 1;
  display: none; left: 21%; top: 25%; width: 28%; height: 51.7%;
  background: url('./guides/abc-paper.webp') 0 0 / 5.5cqw 100% repeat-x;
}
.abc-scene:not([data-reference-letter]) .scene-paper { display: block; }
.abc-scene .play-area .trace-board {
  z-index: 2; left: 18.65%; top: 15.5%; width: 34.9%; height: 70%;
  max-width: none; background: none; border: 0; overflow: visible;
  user-select: none; -webkit-user-select: none;
}
.abc-scene[data-reference-letter] :is(.trace-route,.trace-direction) { opacity: 0; }
.abc-scene[data-reference-letter] .trace-board[data-stroke="0"] .trace-start { opacity: 0; }
.abc-scene .play-area .feedback {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.abc-scene .guide-line {
  z-index: 4; left: 64.25%; top: 26.4%; width: 10.7%; height: 12.45%;
  display: grid; place-items: center; border: none; padding: 0 .5cqw;
  border-radius: 40%; color: #481a61; background: #fffefd; box-shadow: none;
  font-size: 1.65cqw; font-weight: 900; line-height: 1.06; text-align: center;
  pointer-events: none;
}
.abc-scene[data-opening-hint] .guide-line { color: transparent; background: transparent; }
.abc-scene .scene-fox-spark {
  z-index: 3; width: 1.6%; aspect-ratio: 1; left: 57.1%; top: 55.2%; pointer-events: none;
  border-radius: 50%; background: #fff4a4; box-shadow: 0 0 1.4cqw .4cqw #ffce57;
  opacity: 0; animation: fox-point 4.6s ease-in-out infinite;
}
@keyframes fox-point { 50%,100% { opacity: 0; } 58% { opacity: .8; } 70% { opacity: 0; } }
#app[data-no-motion] .scene-fox-spark { animation: none; }
.abc-scene .reaction-character {
  z-index: 3; left: 80.55%; top: 29.8%; width: 14.2%; max-width: none; aspect-ratio: 1.05;
}
.abc-scene[data-reference-letter] .reaction-character {
  left: 83.1%; top: 32.8%; width: 8.6%; height: 9.7%; aspect-ratio: auto; animation: none;
}
.abc-scene[data-reference-letter] .reaction-character[data-mood=ready] { opacity: 0; }
.abc-scene[data-reference-letter] .reaction-character .character-body {
  inset: 0;
  background: linear-gradient(145deg,#f83949,#ed2c3a); border-radius: 46%;
  box-shadow: 0 0 .55cqw .27cqw #f32a3e;
}
.abc-scene[data-reference-letter] .character-body::before,
.abc-scene[data-reference-letter] .character-body::after { display: none; }
.abc-scene[data-reference-letter] .character-face { inset: 12% 0 3%; }
.abc-scene[data-reference-letter] .reaction-character[data-mood=happy] .character-mouth {
  animation: apple-laugh .28s ease-in-out 3 alternate;
}
@keyframes apple-laugh { to { transform: scale(1.65,1.85); } }
#app[data-no-motion] .reaction-character .character-mouth { animation: none; }
.abc-scene:not([data-reference-letter]) .reaction-character {
  background: radial-gradient(ellipse,#c0e563 46%,#84ce6c 63%,transparent 72%);
}
.abc-scene:not([data-reference-letter])::before {
  content: ""; position: absolute; z-index: 1;
  left: 80.7%; top: 24.1%; width: 15.1%; height: 27%;
  border-radius: 47%; background: linear-gradient(165deg,#acda9c 8%,#d9eb93 52%,#84c94b);
  box-shadow: 0 0 .55cqw .3cqw #b4d981; pointer-events: none;
}
.abc-scene .example-card {
  display: block; width: 21.5%; max-width: none; height: 14.4%; left: 76.7%; top: 54.7%;
  z-index: 4; pointer-events: auto;
}
.abc-scene .example-card button { width: 100%; height: 100%; padding: 0; }
.abc-scene .example-card button[hidden],.abc-scene .trace-footer button[hidden] { display: none; }
.abc-scene:not([data-reference-letter]) .example-card button {
  color: #44204e; font-size: 2.4cqw; width: 61%; height: 80%; margin: 4% 1% 0 36%;
  background: repeating-linear-gradient(2deg,#efd1a36b 0 2px,transparent 2px 7px),#ffecbd;
  border-radius: 7%;
}
.abc-scene .letter-example b { color: #d12653; }
.abc-scene .letter-example strong { display: block; }
.abc-scene .trace-tools button,.abc-scene .trace-footer .next-stage { top: 81.5%; height: 14.2%; }
.abc-scene .trace-tools .trace-hear { left: 5.5%; width: 19.8%; }
.abc-scene .trace-tools .trace-show { left: 26%; width: 20.6%; }
.abc-scene .trace-tools .trace-reset { left: 47.5%; width: 20.7%; }
.abc-scene .trace-footer .next-stage { left: 69.1%; width: 27.2%; opacity: 1; }
.abc-scene .trace-footer .next-stage:enabled { box-shadow: inset 0 0 0 2px #fff4a7; }
.abc-scene:not([data-reference-letter]) .trace-tools .trace-hear {
  top: 84.4%; left: 12.4%; width: 10%; height: 7.7%;
  color: #582236; background: linear-gradient(#ffdf5e,#ffcf26);
  font-size: 2.5cqw; border-radius: 20%; white-space: nowrap;
}
.abc-scene .trace-tools label {
  z-index: 6; left: 5%; bottom: 1%; font-size: 1.4cqw;
  display: inline-flex; align-items: center; gap: .5cqw;
}
.abc-scene .trace-tools label select { min-height: 0; padding: .18em; }
.abc-scene .trace-tools .trace-practice-next {
  z-index: 6; top: auto; bottom: 1%; left: 26%; height: auto; width: auto;
  padding: .25em .65em; color: #35164c; background: #fff6d2; font-size: 1.5cqw;
}
.abc-scene[data-journey-finished] .next-stage {
  color: #fff; font-size: 2.65cqw; text-shadow: 0 2px #176119;
  background: linear-gradient(#69d724,#178623);
}
@media (max-width:600px) and (orientation:portrait) {
  .abc-scene { margin-block: auto; }
  .abc-scene :is(.sound-button,.home-button) { min-height: min(44px,11vw); }
  .abc-scene .trace-tools button,.abc-scene .trace-footer .next-stage { min-height: min(44px,11vw); }
}