:root {
  --classic-paper: #f7f0df;
  --classic-paper-deep: #eadfc6;
  --classic-ink: #352b20;
  --classic-muted: #736854;
  --classic-leaf: #47704c;
  --classic-leaf-soft: #dce9d7;
  --classic-gold: #bd8a35;
  --classic-coral: #d66f5d;
  --classic-teal: #4e8f8a;
  --classic-line: rgba(111, 86, 45, .26);
  --classic-shadow: 0 10px 24px rgba(74, 56, 31, .13);
  --classic-top: calc(68px + env(safe-area-inset-top, 0px));
  --classic-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

html,
body {
  width: 100%;
  min-width: 0;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden !important;
}

body[data-classic-shell-ready="true"] {
  position: relative;
  margin: 0 !important;
  padding: var(--classic-top) clamp(10px, 2.5vw, 24px) var(--classic-bottom) !important;
  color: var(--classic-ink) !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, .86) 0 8%, transparent 23%),
    radial-gradient(circle at 86% 22%, rgba(205, 224, 195, .54) 0 8%, transparent 26%),
    linear-gradient(145deg, var(--classic-paper) 0%, #f5ead2 52%, #e7edda 100%) !important;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif !important;
  touch-action: manipulation;
  isolation: isolate;
}

body[data-classic-shell-ready="true"]::before,
body[data-classic-shell-ready="true"]::after {
  position: fixed;
  z-index: -1;
  width: min(42vw, 300px);
  height: min(42vw, 300px);
  border: 1px solid rgba(71, 112, 76, .15);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

body[data-classic-shell-ready="true"]::before { top: 18%; left: -16%; }
body[data-classic-shell-ready="true"]::after { right: -17%; bottom: 12%; }

body[data-classic-shell-ready="true"] .home-strip,
body[data-classic-shell-ready="true"] .progress-strip,
body[data-classic-shell-ready="true"] .progress-strip-stars,
body[data-classic-shell-ready="true"] .next-strip,
body[data-classic-shell-ready="true"] .quest-status {
  display: none !important;
}

body[data-classic-shell-ready="true"] > .fullscreen-toggle,
body[data-classic-shell-ready="true"] > .fullscreen-restore-banner,
body[data-classic-shell-ready="true"] > .bird-game-exit-dock,
body[data-classic-shell-ready="true"] #birdGameExitDock,
body[data-classic-shell-ready="true"] #fullscreen-restore-banner,
body[data-classic-shell-ready="true"] .bird-game-exit-dock,
body[data-classic-shell-ready="true"] .bird-quest-next {
  display: none !important;
}

.aviary-classic-topbar {
  position: fixed;
  z-index: 900;
  top: 0;
  right: 0;
  left: 0;
  height: var(--classic-top);
  padding: env(safe-area-inset-top, 0px) 10px 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--classic-line);
  background: rgba(252, 247, 235, .95);
  box-shadow: 0 4px 18px rgba(82, 61, 28, .1);
  backdrop-filter: blur(14px);
}

.aviary-classic-exit,
.aviary-classic-care,
.aviary-classic-dock a,
.aviary-classic-dock button,
.aviary-classic-drawer button,
.aviary-classic-launcher-link { -webkit-tap-highlight-color: transparent; }

.aviary-classic-exit,
.aviary-classic-care {
  width: 48px;
  height: 48px;
  border: 1px solid var(--classic-line);
  border-radius: 16px;
  background: #fffaf0;
  box-shadow: 0 3px 9px rgba(76, 57, 28, .08);
}

.aviary-classic-exit { display: grid; place-items: center; }
.aviary-classic-exit img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }

.aviary-classic-care {
  padding: 5px;
  display: grid;
  place-items: center;
  border-color: var(--classic-line);
  color: var(--classic-ink);
  cursor: pointer;
}

.aviary-classic-care img { width: 29px; height: 29px; object-fit: contain; }
.aviary-classic-care span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.aviary-classic-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--classic-ink);
}

.aviary-classic-game-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(189, 138, 53, .42);
  border-radius: 13px;
  object-fit: cover;
}

.aviary-classic-identity strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 5vw, 28px);
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aviary-classic-dock {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--classic-bottom);
  padding: 7px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border-top: 1px solid var(--classic-line);
  background: rgba(252, 247, 235, .97);
  box-shadow: 0 -6px 20px rgba(82, 61, 28, .1);
  backdrop-filter: blur(14px);
}

.aviary-classic-dock a,
.aviary-classic-dock button {
  min-width: 0;
  min-height: 56px;
  padding: 4px 3px;
  display: grid;
  grid-template-rows: 32px 14px;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--classic-line);
  border-radius: 15px;
  color: var(--classic-ink);
  background: #fffaf0;
  box-shadow: 0 2px 8px rgba(76, 57, 28, .07);
  font: 700 11px/1 system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
}

.aviary-classic-dock button { appearance: none; }

.aviary-classic-dock-worlds {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aviary-classic-dock-worlds a,
.aviary-classic-dock-worlds button {
  font-size: clamp(8px, 2.5vw, 11px);
  letter-spacing: .015em;
  text-transform: uppercase;
}

.aviary-classic-dock img { width: 31px; height: 31px; border-radius: 9px; object-fit: cover; }

.aviary-classic-dock .aviary-classic-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  grid-template-rows: 1fr;
  place-items: stretch;
  border-color: rgba(71, 112, 76, .46);
  background: #e2eee0;
}

.aviary-classic-dock .aviary-classic-home::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(25, 52, 38, .34));
}

.aviary-classic-dock .aviary-classic-home img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.aviary-classic-dock .aviary-classic-home span {
  position: absolute;
  z-index: 2;
  right: 6px;
  bottom: 4px;
  left: 6px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid rgba(151, 117, 55, .4);
  border-radius: 999px;
  color: #304836;
  background: rgba(255, 250, 236, .93);
  box-shadow: 0 2px 7px rgba(46, 39, 28, .18);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.classic-arrow {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  border: 3px solid var(--classic-leaf);
  border-radius: 50%;
}

.classic-arrow::before,
.classic-arrow::after {
  position: absolute;
  top: 50%;
  content: "";
  transform: translateY(-50%);
}

.classic-arrow::before {
  right: 6px;
  left: 6px;
  height: 3px;
  border-radius: 999px;
  background: var(--classic-leaf);
}

.classic-arrow::after {
  width: 8px;
  height: 8px;
  border-top: 3px solid var(--classic-leaf);
  border-left: 3px solid var(--classic-leaf);
}

.classic-arrow--back::after { left: 6px; transform: translateY(-50%) rotate(-45deg); }
.classic-arrow--next::after { right: 6px; transform: translateY(-50%) rotate(135deg); }

.classic-restart-mark {
  position: relative;
  width: 28px;
  height: 28px;
  display: block;
  border: 3px solid var(--classic-leaf);
  border-left-color: transparent;
  border-radius: 50%;
}

.classic-restart-mark::after {
  position: absolute;
  top: -5px;
  left: -3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 9px solid var(--classic-leaf);
  border-bottom: 6px solid transparent;
  content: "";
  transform: rotate(22deg);
}

.aviary-classic-backdrop {
  position: fixed;
  z-index: 980;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(46, 39, 30, .33);
  backdrop-filter: blur(2px);
}

.aviary-classic-drawer {
  position: fixed;
  z-index: 990;
  right: 10px;
  bottom: calc(var(--classic-bottom) + 8px);
  left: 10px;
  max-width: 480px;
  max-height: calc(100dvh - var(--classic-top) - var(--classic-bottom) - 20px);
  margin-left: auto;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--classic-line);
  border-radius: 24px;
  color: var(--classic-ink);
  background: rgba(255, 250, 240, .99);
  box-shadow: 0 24px 70px rgba(58, 43, 23, .28);
  transform: translateY(calc(100% + var(--classic-bottom) + 24px));
  transition: transform 220ms ease;
}

.aviary-classic-drawer.is-open { transform: translateY(0); }

.aviary-classic-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--classic-line);
}

.aviary-classic-drawer-head div { display: grid; gap: 3px; }
.aviary-classic-drawer-head span { color: var(--classic-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.aviary-classic-drawer-head strong { font: 700 25px/1.1 Georgia, serif; }

.aviary-classic-drawer-head > button {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--classic-line);
  border-radius: 14px;
  background: var(--classic-paper);
}

.aviary-classic-drawer-head > button span::before,
.aviary-classic-drawer-head > button span::after {
  position: absolute;
  top: 21px;
  left: 13px;
  width: 20px;
  height: 2px;
  background: var(--classic-ink);
  content: "";
}

.aviary-classic-drawer-head > button span::before { transform: rotate(45deg); }
.aviary-classic-drawer-head > button span::after { transform: rotate(-45deg); }

.aviary-classic-setting-list {
  margin: 14px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.aviary-classic-setting-list button {
  min-height: 78px;
  padding: 8px 5px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid var(--classic-line);
  border-radius: 17px;
  color: var(--classic-ink);
  background: var(--classic-paper);
  font-weight: 750;
}

.aviary-classic-setting-list img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.aviary-classic-setting-list strong { color: var(--classic-leaf); font-size: 12px; }
.aviary-classic-authored-settings {
  position: static !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 10px !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px !important;
  border: 1px solid var(--classic-line) !important;
  border-radius: 16px !important;
  background: var(--classic-paper) !important;
  transform: none !important;
}
.aviary-classic-authored-settings .mode-btn,
.aviary-classic-authored-settings .setting-btn {
  min-height: 44px;
  color: var(--classic-ink) !important;
  background: #fffaf0 !important;
  border: 1px solid var(--classic-line) !important;
}
.aviary-classic-authored-settings .mode-btn.active,
.aviary-classic-authored-settings .setting-btn.active {
  color: #fff !important;
  background: var(--classic-leaf) !important;
}
.aviary-classic-profile { margin: 0 0 12px; color: var(--classic-muted); text-align: center; }

.aviary-classic-launcher-link {
  min-height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--classic-gold);
  border-radius: 16px;
  color: var(--classic-ink);
  background: #fff8e8;
  font-weight: 800;
  text-decoration: none;
}

.aviary-classic-toast {
  position: fixed;
  z-index: 1100;
  bottom: calc(var(--classic-bottom) + 12px);
  left: 50%;
  max-width: calc(100vw - 32px);
  padding: 9px 14px;
  border: 1px solid var(--classic-line);
  border-radius: 999px;
  color: #fff;
  background: rgba(53, 43, 32, .92);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.aviary-classic-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.aviary-classic-context {
  position: fixed;
  z-index: 1120;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--classic-line);
  border-radius: 16px;
  background: #fffaf0;
  box-shadow: var(--classic-shadow);
}

.aviary-classic-context button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 11px;
  color: var(--classic-ink);
  background: transparent;
  font-weight: 750;
}

button:focus-visible,
a:focus-visible { outline: 3px solid #397d77 !important; outline-offset: 2px !important; }

body[data-motion="off"] *,
body[data-motion="off"] *::before,
body[data-motion="off"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* Classic interiors retain their proven game loops while this layer gives
   their stages the same calm, light AVIARY ARCADE frame. */
body[data-arcade-game="piano"] .header {
  width: min(100%, 980px);
  margin: 0 auto 8px;
  padding: 6px 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  border: 1px solid var(--classic-line);
  border-radius: 17px;
  color: var(--classic-ink);
  background: rgba(255, 250, 240, .9);
  box-shadow: var(--classic-shadow);
}

body[data-arcade-game="piano"] .title { display: none; }
body[data-arcade-game="piano"] .mode-buttons { padding: 4px; gap: 5px; background: var(--classic-paper-deep); }
body[data-arcade-game="piano"] .mode-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid transparent;
  color: var(--classic-muted);
}
body[data-arcade-game="piano"] .mode-btn.active { border-color: var(--classic-leaf); color: #fff; background: var(--classic-leaf); }
body[data-arcade-game="piano"] .fullscreen-toggle {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--classic-line);
  color: var(--classic-ink);
  background: #fffaf0;
  font-size: 13px;
  font-weight: 800;
}
body[data-arcade-game="piano"] .freq-display { color: var(--classic-muted); background: var(--classic-paper-deep); text-shadow: none; }
body[data-arcade-game="piano"] .piano-container {
  width: min(100%, 1080px);
  min-height: clamp(260px, 52vh, 560px);
  margin: 0 auto;
  padding: 8px;
  flex: 1 1 auto;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
body[data-arcade-game="piano"] .piano {
  min-width: calc(var(--piano-keys, 10) * 54px);
  min-height: 250px;
  height: 100%;
  max-height: none;
  align-items: stretch;
  gap: clamp(3px, 1vw, 8px);
}
body[data-arcade-game="piano"] .key {
  min-width: 48px;
  min-height: 250px;
  border: 2px solid rgba(255,255,255,.68);
}

/* Count and Piano opt into the WIDGET Worlds-style five-node activity dock. */
body[data-arcade-dock="worlds"] .aviary-classic-dock-worlds .classic-restart-mark {
  width: 30px;
  height: 30px;
}

/* Piano v3: every instrument fits its stage; pads are the touch-first default. */
body[data-arcade-game="piano"] .header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

body[data-arcade-game="piano"] .piano-layout-switch {
  min-width: 0;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  border-radius: 15px;
  background: var(--classic-paper-deep);
}

body[data-arcade-game="piano"] .layout-btn {
  min-width: 54px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--classic-muted);
  background: transparent;
  font: 850 11px/1 system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

body[data-arcade-game="piano"] .layout-btn.active {
  border-color: var(--classic-leaf);
  color: #fff;
  background: var(--classic-leaf);
}

body[data-arcade-game="piano"] .piano-container {
  width: min(100%, 1080px);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(5px, 1.5vw, 10px);
  flex: 1 1 0;
  align-items: stretch;
  overflow: hidden;
}

body[data-arcade-game="piano"] .piano {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: clamp(4px, 1vw, 9px);
}

body[data-arcade-game="piano"] .key {
  min-width: 0;
  min-height: 44px;
  max-width: none;
  height: auto;
}

body[data-arcade-game="piano"][data-piano-layout="keys"] .piano {
  grid-template-columns: repeat(var(--piano-keys, 10), minmax(0, 1fr));
}

body[data-arcade-game="piano"][data-piano-layout="keys"] .key {
  padding: 0 1px clamp(8px, 2vh, 18px);
}

body[data-arcade-game="piano"][data-piano-layout="pads"] .piano {
  grid-template-columns: repeat(var(--piano-pad-cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(44px, 1fr);
}

body[data-arcade-game="piano"][data-piano-layout="pads"] .key {
  padding: 5px;
  justify-content: center;
  border-radius: clamp(14px, 4vw, 24px);
  box-shadow: 0 6px 0 rgba(52, 56, 44, .2), 0 10px 20px rgba(66, 58, 36, .12), inset 0 5px 13px rgba(255,255,255,.38);
}

body[data-arcade-game="piano"][data-piano-layout="pads"] .key::after {
  content: '';
  width: clamp(12px, 4vw, 26px);
  aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(50, 52, 39, .2);
}

body[data-arcade-game="piano"][data-piano-layout="pads"] .key .num {
  position: absolute;
  right: 7px;
  bottom: 6px;
  font-size: clamp(11px, 3vw, 16px);
}

body[data-arcade-game="piano"][data-piano-layout="pads"] .key .freq { display: none; }

body[data-arcade-game="piano"] .aviary-classic-drawer .piano-note-settings {
  position: static;
  margin: 12px 0 0;
  padding: 12px;
  display: grid !important;
  gap: 9px;
  border: 1px solid var(--classic-line);
  border-radius: 16px;
  background: var(--classic-paper);
}

body[data-arcade-game="piano"] .aviary-classic-drawer .piano-setting-label {
  color: var(--classic-ink);
  font: 850 13px/1.2 system-ui, sans-serif;
}

body[data-arcade-game="piano"] .aviary-classic-drawer .mode-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
}

@media (max-width: 520px) {
  body[data-arcade-game="piano"] .fullscreen-toggle { display: none; }
  body[data-arcade-game="piano"] .header { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-arcade-game="piano"] .freq-display { min-width: 82px; padding-inline: 8px; font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body[data-arcade-game="piano"][data-piano-layout="pads"] .piano {
    grid-template-columns: repeat(var(--piano-pad-cols-landscape, 10), minmax(0, 1fr));
  }
  body[data-arcade-game="piano"] .header { padding-block: 3px; }
}
body[data-arcade-game="piano"] .exit-fullscreen {
  top: calc(var(--classic-top) + 8px);
  right: 8px;
  width: auto;
  min-width: 56px;
  height: 44px;
  padding: 0 12px;
  border-radius: 13px;
  color: var(--classic-ink);
  background: #fffaf0;
  font-size: 13px;
  font-weight: 800;
}

body[data-arcade-game="piano"].fullscreen-mode {
  padding: 8px !important;
}
body[data-arcade-game="piano"].fullscreen-mode .aviary-classic-topbar,
body[data-arcade-game="piano"].fullscreen-mode .aviary-classic-dock,
body[data-arcade-game="piano"].fullscreen-mode .aviary-classic-backdrop,
body[data-arcade-game="piano"].fullscreen-mode .aviary-classic-drawer {
  display: none !important;
}

body[data-arcade-game="sound-match"] {
  justify-content: center;
  gap: clamp(8px, 2vh, 16px);
}
body[data-arcade-game="sound-match"] .level-display {
  position: static;
  transform: none;
  padding: 7px 14px;
  border: 1px solid var(--classic-line);
  border-radius: 999px;
  color: var(--classic-leaf);
  background: rgba(255, 250, 240, .9);
  font-size: 15px;
  text-shadow: none;
}
body[data-arcade-game="sound-match"] .play-btn {
  width: clamp(104px, 24vh, 156px);
  height: clamp(104px, 24vh, 156px);
  border: 5px solid rgba(255,255,255,.75);
  background: linear-gradient(145deg, var(--classic-teal), #376d69);
  box-shadow: 0 8px 0 rgba(66, 85, 70, .22), var(--classic-shadow);
}
body[data-arcade-game="sound-match"] .speaker-icon { width: 64px; height: 64px; }
body[data-arcade-game="sound-match"] .status {
  min-height: 24px;
  color: var(--classic-ink);
  font-size: clamp(15px, 4vw, 20px);
  text-align: center;
  text-shadow: none;
}
body[data-arcade-game="sound-match"] .touch-hint {
  color: var(--classic-muted);
  font-size: clamp(12px, 3.4vw, 14px);
}
body[data-arcade-game="sound-match"] .options {
  min-height: 0;
  max-height: min(42vh, 390px);
  gap: clamp(8px, 2vw, 14px);
}
body[data-arcade-game="sound-match"] .option {
  min-width: 54px;
  min-height: 54px;
  border: 3px solid rgba(255,255,255,.78);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(91, 71, 41, .18), 0 10px 20px rgba(74, 56, 31, .12);
}
body[data-arcade-game="sound-match"] .streak-display {
  position: static;
  transform: none;
  min-height: 20px;
  color: var(--classic-gold);
  font-size: 15px;
  text-shadow: none;
}

@media (orientation: landscape) and (max-height: 560px) {
  body[data-arcade-game="piano"] .header { margin-bottom: 3px; padding: 3px 6px; }
  body[data-arcade-game="piano"] .piano-container { min-height: 0; padding: 3px; }
  body[data-arcade-game="piano"] .piano { min-height: 0; }
  body[data-arcade-game="piano"] .key { min-height: 0; }
  body[data-arcade-game="sound-match"] { gap: 5px; }
  body[data-arcade-game="sound-match"] .play-btn { width: 86px; height: 86px; }
  body[data-arcade-game="sound-match"] .options { max-height: 38vh; }
}

body[data-arcade-game="peek"] .target {
  flex: 0 0 clamp(92px, 20vh, 142px);
  gap: 12px;
  border: 1px solid var(--classic-line);
  border-radius: 20px;
  background: rgba(255, 250, 240, .88);
  box-shadow: var(--classic-shadow);
}
body[data-arcade-game="peek"] .target-label { color: var(--classic-ink); text-shadow: none; }
body[data-arcade-game="peek"] .target-animal { width: min(19vw, 104px); height: min(19vw, 104px); filter: drop-shadow(0 5px 10px rgba(63,48,26,.15)); }
body[data-arcade-game="peek"] .grid { min-height: 0; gap: clamp(8px, 2vw, 13px); padding: 10px 0 0; }
body[data-arcade-game="peek"] .box {
  min-width: 64px;
  min-height: 64px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 22px;
  background: linear-gradient(145deg, #b9cdb7, #789477);
  box-shadow: 0 7px 0 rgba(84,68,40,.18), var(--classic-shadow);
}
body[data-arcade-game="peek"] .box.color-0 { background: linear-gradient(145deg, #e9a897, #c76f5d); }
body[data-arcade-game="peek"] .box.color-1 { background: linear-gradient(145deg, #9bc9bd, #548f83); }
body[data-arcade-game="peek"] .box.color-2 { background: linear-gradient(145deg, #efd49b, #c89b45); }
body[data-arcade-game="peek"] .box.color-3 { background: linear-gradient(145deg, #c5bedc, #867aaa); }
body[data-arcade-game="peek"] .box.color-4 { background: linear-gradient(145deg, #aecbdc, #678fa4); }
body[data-arcade-game="peek"] .box.color-5 { background: linear-gradient(145deg, #e9b7c6, #b97b8d); }
body[data-arcade-game="peek"] .box .lid { color: rgba(255,255,255,.86); }
body[data-arcade-game="peek"] .status {
  bottom: calc(var(--classic-bottom) + 8px);
  padding: 7px 15px;
  border: 1px solid var(--classic-line);
  color: var(--classic-ink);
  background: rgba(255,250,240,.94);
  font-size: 14px;
}
body[data-arcade-game="peek"] .mode-toggle {
  top: calc(var(--classic-top) + 7px);
  right: 12px;
  padding: 4px;
  border: 1px solid var(--classic-line);
  border-radius: 15px;
  background: rgba(255,250,240,.94);
}
body[data-arcade-game="peek"] .mode-btn { min-height: 44px; color: var(--classic-muted); background: transparent; font-weight: 800; }
body[data-arcade-game="peek"] .mode-btn.active { color: #fff; background: var(--classic-leaf); }
body[data-arcade-game="peek"] .phase-banner { border: 1px solid var(--classic-line); color: var(--classic-ink); background: rgba(255,250,240,.98); box-shadow: var(--classic-shadow); }

body[data-arcade-game="tag"] .score {
  top: calc(var(--classic-top) + 8px);
  right: 12px;
  min-width: 56px;
  padding: 7px 13px;
  border: 1px solid var(--classic-line);
  border-radius: 16px;
  color: var(--classic-leaf);
  background: rgba(255,250,240,.9);
  font-size: clamp(25px, 7vw, 40px);
  text-align: center;
  box-shadow: var(--classic-shadow);
}
body[data-arcade-game="tag"] .parrot { border-color: rgba(255,250,240,.94); box-shadow: 0 8px 18px rgba(74,56,31,.17); }
body[data-arcade-game="tag"] .cloud { background: rgba(255,255,255,.58); }

body[data-arcade-game="shapes"] .game-area {
  min-height: 0;
  max-height: 100%;
  gap: clamp(8px, 2vh, 18px);
}
body[data-arcade-game="shapes"] .target-area {
  padding: clamp(9px, 2vh, 16px) clamp(16px, 5vw, 30px);
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 23px;
  background: rgba(255,250,240,.9);
  box-shadow: 0 7px 0 rgba(84,68,40,.13), var(--classic-shadow);
}
body[data-arcade-game="shapes"] .target-label { color: var(--classic-ink); text-shadow: none; }
body[data-arcade-game="shapes"] .target-shape { width: clamp(62px, 13vh, 90px); height: clamp(62px, 13vh, 90px); }
body[data-arcade-game="shapes"] .options { min-height: 0; max-height: min(47vh, 430px); gap: clamp(8px, 2vw, 14px); }
body[data-arcade-game="shapes"] .option {
  min-width: 64px;
  min-height: 64px;
  padding: 9px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 20px;
  background: rgba(255,250,240,.92);
  box-shadow: 0 6px 0 rgba(84,68,40,.14), var(--classic-shadow);
}
body[data-arcade-game="shapes"] .status { color: var(--classic-ink); font-size: 17px; text-shadow: none; }
body[data-arcade-game="shapes"] .streak-display { padding: 7px 14px; border: 1px solid var(--classic-line); color: var(--classic-leaf); background: rgba(255,250,240,.9); font-size: 14px; }
body[data-arcade-game="shapes"] .shape-settings-toggle { display: none !important; }
body[data-arcade-game="shapes"] .aviary-classic-drawer .shape-settings-panel {
  position: static;
  min-width: 0;
  margin: 13px 0 0;
  padding: 12px;
  display: flex !important;
  border: 1px solid var(--classic-line);
  border-radius: 16px;
  color: var(--classic-ink);
  background: var(--classic-paper);
  animation: none;
}
body[data-arcade-game="shapes"] .aviary-classic-drawer .setting-label { color: var(--classic-muted); }
body[data-arcade-game="shapes"] .aviary-classic-drawer .setting-btn { min-width: 44px; min-height: 44px; border-color: var(--classic-line); color: var(--classic-ink); background: #fffaf0; }
body[data-arcade-game="shapes"] .aviary-classic-drawer .setting-btn.active { border-color: var(--classic-leaf); color: #fff; background: var(--classic-leaf); }

@media (max-height: 650px) {
  :root {
    --classic-top: calc(58px + env(safe-area-inset-top, 0px));
    --classic-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  .aviary-classic-topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .aviary-classic-exit, .aviary-classic-care { width: 44px; height: 44px; border-radius: 13px; }
  .aviary-classic-exit img { width: 34px; height: 34px; }
  .aviary-classic-game-icon { width: 38px; height: 38px; }
  .aviary-classic-dock button { min-height: 48px; grid-template-rows: 27px 12px; }
  .aviary-classic-dock img { width: 27px; height: 27px; }
  .classic-restart-mark { width: 24px; height: 24px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --classic-top: calc(54px + env(safe-area-inset-top, 0px));
    --classic-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  .aviary-classic-identity strong { font-size: 20px; }
  .aviary-classic-game-icon { width: 36px; height: 36px; }
  .aviary-classic-dock button { min-height: 44px; grid-template-columns: 26px auto; grid-template-rows: 1fr; }
  .aviary-classic-dock img { width: 26px; height: 26px; }
  body[data-arcade-game="sound-match"] { gap: 6px; }
  body[data-arcade-game="sound-match"] .level-display { padding-block: 4px; }
  body[data-arcade-game="sound-match"] .play-btn { width: 92px; height: 66px; border-radius: 26px; }
  body[data-arcade-game="sound-match"] .speaker-icon { width: 52px; height: 52px; }
  body[data-arcade-game="sound-match"] .options { max-height: 82px; }
  body[data-arcade-game="sound-match"] .option { aspect-ratio: auto; min-height: 72px; }
  body[data-arcade-game="sound-match"] .tone-glyph { height: 29px; padding-block: 3px; }
  body[data-arcade-game="sound-match"] .tone-band { padding-block: 2px; }
  body[data-arcade-game="shapes"] .target-area { padding-block: 6px; }
  body[data-arcade-game="shapes"] .target-shape { width: 58px; height: 58px; }
  body[data-arcade-game="shapes"] .options { max-height: calc(100dvh - var(--classic-top) - var(--classic-bottom) - 86px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}