:root {
  --bg-night-top: #203f3a;
  --bg-night-bottom: #10261f;
  --panel-warm-wood: #6a4a2f;
  --panel-warm-wood-dark: #3f2f22;
  --panel-parchment: #f3ecd7;
  --panel-parchment-deep: #dfd0a8;
  --accent-brass: #dcae4c;
  --accent-brass-dark: #9b6f2a;
  --accent-forest: #426b4f;
  --accent-forest-dark: #244633;
  --text-ink: #26301f;
  --text-light: #f5f1df;
  --danger: #a33a2b;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text-light);
  background: radial-gradient(circle at 20% 5%, #23465c 0%, transparent 35%),
              radial-gradient(circle at 80% 20%, #2f523f 0%, transparent 34%),
              linear-gradient(180deg, var(--bg-night-top), var(--bg-night-bottom));
  min-height: 100vh;
}

.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: radial-gradient(circle, #f3c66d 1px, transparent 2px);
  background-size: 36px 36px;
}

.app-shell {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem 1rem 5.2rem;
  position: relative;
  z-index: 1;
}

.site-header {
  text-align: center;
  margin: 0.6rem 0 1rem;
  padding: 1rem;
}

.wood-panel {
  background: linear-gradient(180deg, rgba(95, 60, 36, 0.9), rgba(63, 39, 24, 0.95));
  border: 1px solid rgba(247, 215, 151, 0.25);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.eyebrow { letter-spacing: 0.1em; font-size: 0.78rem; opacity: 0.92; text-transform: uppercase; margin: 0; }
.logo {
  margin: 0.4rem 0 0.25rem;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: #ffd57e;
  text-shadow: 0 2px 0 #6d441f, 0 6px 14px rgba(0, 0, 0, 0.35);
}
.mentor-line { margin: 0; opacity: 0.96; font-size: 1rem; }

.content-wrap { display: grid; gap: 1rem; }
.card {
  background: linear-gradient(180deg, var(--panel-parchment), var(--panel-parchment-deep));
  color: var(--text-ink);
  border: 1px solid #dec89d;
  border-radius: var(--radius-xl);
  padding: 1.1rem;
  box-shadow: var(--shadow-soft);
}

.section-head h2 { margin: 0; font-size: 1.8rem; }
.section-head .body-copy { margin-top: 0.35rem; }

.hero-card { display: grid; gap: 1rem; }
@media (min-width: 760px) {
  .hero-card { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
}

.hero-title {
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
}
.body-copy { line-height: 1.52; font-size: 1.02rem; }
.chip {
  display: inline-block;
  padding: 0.25rem 0.66rem;
  border-radius: 999px;
  background: #f7d58f;
  color: #5b3a24;
  border: 1px solid #d4a444;
  font-weight: 800;
  font-size: 0.78rem;
}

.art-frame {
  background: linear-gradient(180deg, #694326, #3e2819);
  border: 1px solid rgba(255, 225, 155, 0.2);
  border-radius: var(--radius-lg);
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: 0.9rem;
}

.asset-hook {
  width: 100%;
  text-align: center;
  color: #fbeacb;
  background: rgba(18, 11, 8, 0.35);
  border: 1px dashed rgba(255, 218, 143, 0.6);
  border-radius: var(--radius-md);
  padding: 0.9rem;
}
.asset-hook.compact { min-height: 150px; display: grid; place-content: center; }
.asset-title { margin: 0 0 0.35rem; font-weight: 800; }
.asset-hook p { margin: 0.2rem 0; }
.asset-hook small { opacity: 0.95; }
.asset-hook code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.72rem 1.22rem;
  text-decoration: none;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, #ffd36f, var(--accent-brass), var(--accent-brass-dark));
  color: #2d1d12;
  box-shadow: inset 0 1px 0 rgba(255, 244, 208, 0.8), 0 5px 12px rgba(102, 62, 14, 0.35);
}
.btn-secondary {
  background: linear-gradient(180deg, #4f7a55, var(--accent-forest-dark));
  color: #fff7e9;
  box-shadow: inset 0 1px 0 rgba(212, 236, 204, 0.5), 0 5px 10px rgba(25, 40, 28, 0.35);
}
.btn-green {
  background: linear-gradient(180deg, #6fbf73, #2f7d3b);
  color: #fffdf4;
  box-shadow: inset 0 1px 0 rgba(222, 255, 220, 0.55), 0 5px 10px rgba(24, 80, 34, 0.32);
}
.btn-red {
  background: linear-gradient(180deg, #d95b4f, #9f2f28);
  color: #fff8f3;
  box-shadow: inset 0 1px 0 rgba(255, 219, 210, 0.65), 0 5px 10px rgba(80, 24, 20, 0.35);
}
.btn.disabled { opacity: 0.7; cursor: not-allowed; }
.button-row { display: flex; gap: 0.66rem; flex-wrap: wrap; margin-top: 0.8rem; }

.section-divider {
  border: 0;
  border-top: 1px solid #e0cea6;
  margin: 1.2rem 0;
}

.setup-layout { display: grid; gap: 1rem; }
@media (min-width: 860px) { .setup-layout { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.trusted-verifier-relationships .setup-layout { grid-template-columns: minmax(0, 1fr); }

.stack-form { display: grid; gap: 0.72rem; }
label { font-weight: 800; }
select {
  padding: 0.66rem;
  border-radius: 10px;
  border: 1px solid #d0bc92;
  background: #fffaf0;
  color: #2a1d12;
  font-size: 1rem;
}

.shed-edit-profile-button {
  border: 1px solid rgba(69, 48, 29, 0.24);
  border-radius: 999px;
  background: rgba(255, 250, 231, 0.9);
  color: var(--brown);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 44px;
  padding: 0.65rem 1rem;
}

.shed-edit-profile-button:hover,
.shed-edit-profile-button:focus-visible {
  background: #fff8d7;
  box-shadow: 0 0 0 3px rgba(233, 176, 73, 0.28);
}

.shed-edit-profile-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.75rem 0 1rem;
}

@media (max-width: 420px) {
  .shed-edit-profile-button { flex: 1 1 9rem; }
}

.shed-instrument-image {
  display: block;
  height: 1.45em;
  max-width: 1.8em;
  object-fit: contain;
  width: auto;
}

.shed-profile-field {
  cursor: pointer;
  font: inherit;
}

.shed-profile-field:focus-visible {
  outline: 4px solid #f4d35e;
  outline-offset: 3px;
}

.change-instrument-panel {
  margin-bottom: 1rem;
}

.change-instrument-panel .section-head {
  margin-bottom: 0.5rem;
}

.practice-detail-grid {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.practice-detail-grid label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.35;
}

@media (min-width: 680px) {
  .practice-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.success-callout {
  background: #f5ffe8;
  border: 1px solid #9acb72;
  border-radius: 14px;
  color: #24451f;
  font-weight: 800;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 5px 12px rgba(43, 91, 35, 0.16);
}

.error-text { color: var(--danger); min-height: 1.2rem; margin: 0; font-weight: 700; }

.mentor-card {
  background: linear-gradient(180deg, #f8edd6, #ecd7ad);
  border: 1px solid #dcc18e;
  border-radius: var(--radius-lg);
  padding: 0.85rem;
}
.mentor-card h3 { margin: 0.4rem 0; }
.mentor-card p { margin: 0.35rem 0; line-height: 1.45; }
.mt-md { margin-top: 0.9rem; }

.home-grid { display: grid; gap: 1rem; }
@media (min-width: 840px) { .home-grid { grid-template-columns: 0.95fr 1.35fr; } }

.stats-grid { display: grid; gap: 0.7rem; }
@media (min-width: 700px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  background: #fbf1dc;
  border: 1px solid #e0cea6;
  border-radius: 12px;
  padding: 0.75rem;
}
.stat-card h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.stat-card p { margin: 0; font-weight: 800; font-size: 1.1rem; }

.store-placeholder-grid { display: grid; gap: 0.7rem; }
@media (min-width: 640px) { .store-placeholder-grid { grid-template-columns: repeat(3, 1fr); } }

.main-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 0.72rem;
  padding: 0.72rem;
  background: linear-gradient(180deg, rgba(23, 39, 31, 0.95), rgba(16, 29, 23, 0.98));
  border-top: 1px solid rgba(255, 223, 170, 0.2);
  z-index: 2;
}
.nav-pill {
  color: #faefd8;
  text-decoration: none;
  background: linear-gradient(180deg, #496d4b, #2d4a31);
  border: 1px solid rgba(255, 235, 191, 0.18);
  border-radius: 999px;
  padding: 0.52rem 1.12rem;
  font-weight: 800;
}
.nav-pill.active {
  background: linear-gradient(180deg, #ffd069, #cc9329);
  color: #2f1f13;
  border-color: #9f7020;
}


.character-art {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.mentor-card {
  display: grid;
  gap: 0.75rem;
}

.mentor-portrait {
  width: 100%;
  max-width: 220px;
  border-radius: 12px;
  border: 1px solid rgba(120, 84, 34, 0.35);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

@media (min-width: 860px) {
  .mentor-card {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

.woodshed-page {
  overflow: hidden;
}

.woodshed-intro {
  margin-top: 0;
  font-weight: 700;
  text-align: center;
}

.woodshed-scene {
  position: relative;
  min-height: calc(100dvh - 6.5rem);
  overflow: hidden;
  border: 1px solid rgba(79, 58, 34, 0.35);
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.25);
}

.woodshed-character-layer {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 1;
  width: min(94%, 800px);
  transform: translateX(-50%);
  text-align: center;
}

.woodshed-character-art {
  width: 100%;
  max-height: 590px;
  object-fit: contain;
}

.woodshed-foreground {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(115px, 0.42fr)
    minmax(280px, 1.4fr)
    minmax(115px, 0.42fr);
  gap: 0.7rem;
  min-height: calc(100dvh - 6.5rem);
  padding: 1rem;
}

.woodshed-object-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 0.45rem;
}

.woodshed-object-column-center {
  pointer-events: none;
}

.shed-decoration-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}

.shed-decoration {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(1.65rem, 3.5vw, 2.25rem);
  height: clamp(1.65rem, 3.5vw, 2.25rem);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(35, 24, 16, .65));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.woodshed-scene.is-decorating .shed-decoration-layer,
.woodshed-scene.is-decorating .shed-decoration {
  pointer-events: auto;
}

.woodshed-scene.is-decorating .shed-decoration {
  border: 1px dashed rgba(255, 248, 214, .9);
  border-radius: .45rem;
  cursor: grab;
  touch-action: none;
}

.woodshed-scene.is-decorating .shed-decoration.is-dragging {
  z-index: 1;
  cursor: grabbing;
  filter: drop-shadow(0 4px 4px rgba(35, 24, 16, .8));
}

.shed-decoration:focus-visible,
.shed-decorate-button:focus-visible,
.shed-decorate-close:focus-visible {
  outline: 3px solid #fff4d4;
  outline-offset: 2px;
}

.shed-decorate-button {
  cursor: pointer;
  font: inherit;
}

.shed-decorate-panel {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  max-width: 36rem;
  margin: 1rem auto 0;
  text-align: left;
}

.shed-decorate-panel-head {
  display: flex;
  justify-content: flex-end;
}
.shed-decorate-close {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 1200;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(108, 76, 42, .35);
  border-radius: 50%;
  color: #352616;
  background: #fff8e8;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.shed-decoration-inventory {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: .65rem;
}

.shed-decoration-inventory-item {
  display: flex;
  min-width: 0;
  padding: .55rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border: 1px solid rgba(108, 76, 42, .35);
  border-radius: .75rem;
  background: rgba(255, 248, 232, .72);
}

.shed-decoration-inventory-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .4rem;
  overflow-wrap: anywhere;
}

.shed-decoration-inventory-emoji { font-size: 1.5rem; }
.shed-decoration-error { color: #9f1d1d; font-weight: 800; }

@media (max-width: 480px) {
  .shed-decoration {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1.5rem;
  }

  .shed-decoration-inventory {
    grid-template-columns: minmax(0, 1fr);
  }

}

.shed-readout {
  max-width: 100%;
  color: #fff4d4;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow:
    0 2px 2px rgba(35, 24, 16, 0.95),
    0 0 7px rgba(35, 24, 16, 0.8);
}

.shed-readout-name {
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.shed-readout-class {
  font-size: clamp(1.05rem, 2.3vw, 1.55rem);
}

.shed-member-since {
  max-width: 10rem;
  font-size: clamp(0.72rem, 1.65vw, 1rem);
  line-height: 1.2;
}

.board-contest-card.board-activity {
  display: block;
}

.board-activity > summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.board-activity > summary::-webkit-details-marker {
  display: none;
}

.board-activity > summary::before {
  content: "▶";
  flex: 0 0 auto;
  font-size: 0.8em;
  transition: transform 120ms ease;
}

.board-activity[open] > summary::before {
  transform: rotate(90deg);
}

.board-activity > summary small {
  margin-left: auto;
  text-align: right;
  font-weight: 700;
}

.board-activity {
  align-self: start;
  min-height: 0;
}

.board-activity-body {
  display: flex;
  gap: 1rem;
  padding-top: 0.65rem;
}

.board-activity:not([open]) > .board-activity-body {
  display: none;
}

.camp-hours-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.5rem;
  padding: 0.65rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 800;
}

.camp-hours-checkbox-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0;
  accent-color: #7d2d26;
  cursor: pointer;
}

.camp-hours-checkbox-label input[type="checkbox"]:disabled,
.camp-hours-checkbox-label input[type="checkbox"]:disabled + span {
  cursor: default;
}

.p-book-bold-divider {
  height: 0;
  margin: 1.6rem -1rem 0;
  border: 0;
  border-top: 7px solid #263f58;
  box-shadow: 0 3px 0 #9fb6c9;
}

.p-book-lower-region {
  margin: 0 -1rem -1rem;
  padding: 0 1rem 1.2rem;
  overflow-x: clip;
  background: linear-gradient(160deg, #bfd3e2, #7897b1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.p-book-lower-spacer {
  min-height: 1.35rem;
}

.practice-stat-stone {
  color: #202a31;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.28) 0 2px, transparent 3px),
    linear-gradient(145deg, #c9ced0, #858f94 52%, #b7bec1);
  border: 3px ridge #657076;
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.45), inset -3px -3px 7px rgba(35,43,47,.35), 0 5px 8px rgba(28,45,58,.3);
  text-shadow: 0 1px rgba(255,255,255,.55);
}

.is-confirmed-success {
  color: #fff !important;
  background: #267447 !important;
  border-color: #174c2e !important;
}

.confirmed-checkmark { color: #16833d; font-weight: 1000; }

.camp-hours-checkbox-label.is-confirmed-success input[type="checkbox"] {
  accent-color: #2fa85f;
}

@media (max-width: 640px) {
  .board-activity > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .board-activity > summary small {
    width: 100%;
    margin-left: 1.45rem;
    text-align: left;
  }
}

.shed-readout-level {
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
}

.woodshed-scene > .shed-secret-button {
  position: absolute;
  top: auto;
  bottom: max(0.45rem, env(safe-area-inset-bottom));
  left: max(0.45rem, env(safe-area-inset-left));
  z-index: 4;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #d7263d;
  font-weight: 900;
  font-size: 1.4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-shadow: 0 1px 2px rgba(255,255,255,.8), 0 2px 2px rgba(35,20,12,.6);
  cursor: pointer;
}

.shed-secret-panel {
  max-width: 30rem;
  margin: 1rem auto 0;
}

.woodshed-scene > .shed-secret-button:focus-visible {
  outline: 3px dashed #fff;
  outline-offset: 1px;
}

@media (max-width: 640px) {
  .shed-readout-level { width: 2.4rem; min-height: 2.4rem; }

}

.shed-icon-object,
.room-object {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
  color: #fff4d4;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 4px rgba(35, 24, 16, 0.8));
}

.shed-icon-object {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1;
}

.room-object,
.shed-icon-object,
.xp-level-control,
.shed-readout-level,
.shed-sound-effects-controls .sound-effects-button,
.shop-scene-control {
  transition:
    scale 150ms ease,
    filter 150ms ease;
  transform-origin: center;
  scale: 1;
}

:is(
  .room-object,
  .shed-icon-object,
  .xp-level-control,
  .shed-readout-level,
  .shed-sound-effects-controls .sound-effects-button,
  .shop-scene-control
):is(:hover, :focus-visible):not(:disabled) {
  scale: 1.1;
  filter:
    brightness(1.08)
    drop-shadow(0 5px 6px rgba(35, 24, 16, 0.9));
}

:is(
  .room-object,
  .shed-icon-object,
  .xp-level-control,
  .shed-readout-level,
  .shed-sound-effects-controls .sound-effects-button,
  .shop-scene-control
):active:not(:disabled) {
  scale: 1.16;
  transition-duration: 60ms;
}

.room-object:focus-visible {
  outline: 3px solid rgba(255, 244, 212, 0.95);
  outline-offset: 5px;
}

.room-object-icon {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1;
}

.dandelion-object {
  gap: 0.15rem;
}

.dandelion-count {
  color: #fff4d4;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 2px 2px rgba(35, 24, 16, 0.95),
    0 0 6px rgba(35, 24, 16, 0.85);
}


.metronome-object {
  cursor: pointer;
  font: inherit;
}

.metronome-panel {
  max-width: 620px;
  margin: 1rem auto 0;
  padding: 1rem;
  background:
    linear-gradient(180deg, #fff8e8, #ead5a8);
  border: 1px solid rgba(108, 76, 42, 0.38);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 18px rgba(36, 24, 16, 0.18);
}

.metronome-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.metronome-panel-head h2 {
  margin: 0.25rem 0 0;
}

.metronome-close-button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--text-ink);
  font-size: 1.8rem;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(108, 76, 42, 0.35);
  border-radius: 999px;
  cursor: pointer;
}

.metronome-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 1.2rem 0;
}

.metronome-pulse {
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  color: #fff4d4;
  font-size: 2rem;
  font-weight: 900;
  background: #7d2d26;
  border: 5px solid #4b211e;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 4px rgba(255, 244, 212, 0.14),
    0 7px 16px rgba(36, 24, 16, 0.26);
  transform: scale(0.92);
  transition:
    transform 70ms ease,
    filter 70ms ease;
}

.metronome-pulse.is-active {
  transform: scale(1.06);
  filter: brightness(1.18);
}

.metronome-tempo-readout {
  display: grid;
  text-align: center;
}

.metronome-tempo-readout strong {
  font-size: clamp(2.5rem, 8vw, 4.4rem);
  line-height: 0.9;
}

.metronome-tempo-readout span {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.metronome-controls {
  display: grid;
  gap: 0.75rem;
}

.metronome-controls > label {
  font-weight: 900;
}

.metronome-controls input[type="range"] {
  width: 100%;
}

.metronome-number-row {
  display: grid;
  grid-template-columns: auto minmax(90px, 130px) auto;
  gap: 0.6rem;
  justify-content: center;
}

.metronome-number-row input {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
}

.metronome-button-row {
  justify-content: center;
}

.metronome-stop-button {
  background: #7d2d26;
}

.metronome-status {
  min-height: 1.3rem;
  margin: 0.9rem 0 0;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 520px) {
  .metronome-display {
    gap: 0.8rem;
  }

  .metronome-pulse {
    width: 4.5rem;
    height: 4.5rem;
  }

  .metronome-number-row {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .metronome-button-row {
    display: grid;
  }
}


.tuner-object {
  cursor: pointer;
  font: inherit;
}

.tuner-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  place-items: start center;
  color: #ffffff;
  touch-action: none;
  background: #27313b;
  transition: background-color 140ms ease;
}

.tuner-panel[hidden] {
  display: none;
}

.tuner-reading {
  width: 100%;
  padding: clamp(5.5rem, 13vh, 9rem) 1rem 1rem;
  text-align: center;
}

.tuner-note {
  margin: 0;
  font-size: clamp(6rem, 24vw, 15rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-shadow: 0 0.04em 0.12em rgba(0, 0, 0, 0.2);
}

.tuner-diagnosis {
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.2);
}

.tuner-close-button {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 9001;
  min-width: 5.5rem;
  min-height: 3rem;
  padding: 0.65rem 1rem;
  color: #ffffff;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.tuner-close-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.tuner-state-neutral {
  background: #27313b;
}

.tuner-state-pristine {
  background: #1769d2;
}

.tuner-state-flat,
.tuner-state-sharp {
  background: #a94f00;
}

.tuner-state-very-flat,
.tuner-state-very-sharp {
  background: #c62828;
}


.chair-object {
  cursor: pointer;
  font: inherit;
}

.digital-rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #020603;
  touch-action: none;
}

.digital-rain-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.digital-rain-stop {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  min-width: 5.5rem;
  min-height: 3rem;
  border: 2px solid #75ff98;
  border-radius: 999px;
  background: rgba(2, 18, 7, 0.92);
  color: #b8ffc9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: manipulation;
}

.digital-rain-stop:focus-visible {
  outline: 3px solid #fff3a6;
  outline-offset: 3px;
}

.mum-panel {
  display: grid;
  gap: 1rem;
  max-width: 680px;
  margin: 1rem auto 0;
  padding: 1rem;
  background:
    linear-gradient(180deg, #fff4dc, #e5cfa3);
  border: 1px solid rgba(108, 76, 42, 0.38);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 18px rgba(36, 24, 16, 0.18);
}

.mum-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.mum-panel-head h2 {
  margin: 0.25rem 0 0;
}

.mum-artwork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  overflow: hidden;
}

.mum-artwork img {
  display: block;
  width: 100%;
  height: clamp(10rem, 28vw, 14rem);
  border: 2px solid rgba(108, 76, 42, 0.38);
  border-radius: 12px;
  object-fit: cover;
  object-position: center 24%;
  pointer-events: none;
}

.mum-close-button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--text-ink);
  font-size: 1.8rem;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(108, 76, 42, 0.35);
  border-radius: 999px;
  cursor: pointer;
}

.mum-message {
  min-height: 3rem;
  margin: 0;
  padding: 0.85rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
  background: rgba(255, 248, 232, 0.72);
  border-left: 5px solid #8b5d36;
  border-radius: 8px;
}

.mum-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

#mum-ready-button {
  justify-self: center;
}

.mum-snack-chooser {
  display: grid;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid rgba(108, 76, 42, .28);
  border-radius: .75rem;
  background: rgba(255, 248, 232, .72);
}

.mum-snack-chooser p { margin: 0; font-weight: 800; }

.mum-snack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
}

.mum-snack-grid button {
  min-height: 2.7rem;
  padding: .2rem;
  border: 1px solid rgba(108, 76, 42, .35);
  border-radius: .6rem;
  background: #fff8e8;
  font-size: 1.5rem;
  cursor: pointer;
}

.mum-snack-grid button:disabled { opacity: .6; cursor: wait; }

@media (max-width: 520px) {
  .mum-choice-grid {
    grid-template-columns: 1fr;
  }

  .mum-snack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #mum-ready-button {
    width: 100%;
  }
}

.support-line {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.92rem;
}

.support-line a {
  display: inline-block;
  color: var(--accent-forest-dark);
  font-weight: 800;
  background: rgba(251, 241, 220, 0.8);
  border: 1px solid rgba(108, 76, 42, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}

@media (max-width: 520px) {
  .woodshed-scene,
  .woodshed-foreground {
    min-height: 680px;
  }

  .woodshed-foreground {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.7rem;
  }

  .woodshed-object-column-center {
    display: none;
  }

  .woodshed-character-layer {
    width: min(88%, 390px);
    bottom: 4rem;
  }

  .shed-readout {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }

  .room-object-icon,
  .shed-icon-object {
    font-size: clamp(2.5rem, 12vw, 3.8rem);
  }
}

.hidden {
  display: none !important;
}

.quest-choice-list {
  display: grid;
  gap: 0.65rem;
}

.quest-choice-card {
  width: 100%;
  text-align: left;
  border: 1px solid #d8bf8a;
  border-radius: var(--radius-md);
  background: #fff8e8;
  color: var(--text-ink);
  padding: 0.72rem;
  cursor: pointer;
}

.quest-choice-card strong {
  display: block;
  margin-bottom: 0.25rem;
}

.quest-choice-card small {
  display: block;
  line-height: 1.35;
}


.board-page {
  overflow: hidden;
}

.board-banner {
  display: grid;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  color: #fff4d4;
  background:
    linear-gradient(135deg, rgba(44, 79, 52, 0.96), rgba(88, 55, 30, 0.96));
  border: 1px solid rgba(68, 47, 28, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: 0 7px 16px rgba(36, 24, 16, 0.2);
}

.board-banner h3,
.board-banner p {
  margin: 0.25rem 0;
}

.board-kicker {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-leader {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  background: rgba(255, 244, 212, 0.14);
  border: 1px solid rgba(255, 244, 212, 0.3);
  border-radius: var(--radius-md);
}

.board-leader small {
  font-weight: 800;
  text-transform: uppercase;
}

.board-leader strong {
  font-size: 1.15rem;
}

.board-layout {
  display: grid;
  gap: 1rem;
}

.board-contests {
  display: grid;
  gap: 0.85rem;
}

.board-contest-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.9rem;
  background: #fff8e8;
  border: 1px solid #d8bf8a;
  border-radius: var(--radius-md);
  box-shadow: 0 5px 12px rgba(36, 24, 16, 0.14);
}

.board-contest-card h3 {
  margin: 0 0 0.3rem;
}

.board-contest-card p {
  margin: 0 0 0.7rem;
  line-height: 1.4;
}

.board-contest-card small {
  display: block;
  margin-top: 0.5rem;
  font-weight: 700;
}

.board-contest-icon {
  font-size: 2.45rem;
  line-height: 1;
  text-align: center;
}

.board-inline-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.board-inline-form input {
  flex: 1 1 110px;
  min-width: 0;
}

.trivia-options {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.trivia-option {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: rgba(239, 225, 190, 0.55);
  border: 1px solid rgba(120, 84, 34, 0.24);
  border-radius: 10px;
  cursor: pointer;
}

.trivia-option input {
  width: auto;
  margin: 0;
}

.trivia-option.is-selected {
  border: 3px solid #315f8f;
  padding: calc(0.55rem - 2px) calc(0.65rem - 2px);
  box-shadow: 0 0 0 2px rgba(255,255,255,.72), 0 3px 7px rgba(35,24,16,.25);
  font-weight: 900;
}

.trivia-option.is-selected:not(.is-confirmed-success)::after {
  content: "Selected";
  margin-left: auto;
  font-size: .75rem;
  font-weight: 900;
}

.quest-stereo-dial {
  position: relative;
  display: inline-flex;
  width: clamp(7.5rem, 20vw, 9rem);
  min-width: 7.5rem;
  min-height: 7.5rem;
  aspect-ratio: 1;
  padding: 1.1rem;
  align-items: center;
  justify-content: center;
  border: 5px ridge #8c6416;
  border-radius: 50%;
  color: #2d210c;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.88) 0 5%, transparent 20%),
    radial-gradient(circle, #fff0a8 0 18%, #e8b83f 48%, #9b6812 78%, #f5ce62 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,246,185,.72),
    inset -8px -10px 14px rgba(91,54,4,.38),
    0 7px 0 #69430b,
    0 11px 18px rgba(44,28,7,.38);
  font-weight: 950;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px rgba(255,255,255,.7);
}

.quest-stereo-dial:hover {
  transform: translateY(-2px);
}

.quest-stereo-dial:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 0 0 3px rgba(255,246,185,.72),
    inset -8px -10px 14px rgba(91,54,4,.38),
    0 3px 0 #69430b,
    0 6px 10px rgba(44,28,7,.32);
}

.quest-stereo-dial:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px #315f8f, 0 7px 0 #69430b, 0 11px 18px rgba(44,28,7,.38);
}

.bonus-challenge-section .button-row {
  justify-content: center;
}

.bonus-challenge-section .stack-form .quest-stereo-dial {
  justify-self: center;
}

.board-scoreboard {
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.board-panel {
  padding: 0.9rem;
  background:
    linear-gradient(180deg, #f5e6bd, #e5c98f);
  border: 1px solid rgba(108, 76, 42, 0.38);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 12px rgba(36, 24, 16, 0.16);
}

.board-panel h3 {
  margin: 0 0 0.45rem;
}

.board-panel p {
  margin: 0 0 0.65rem;
  line-height: 1.4;
}

.board-panel.board-standings-panel {
  min-width: 0;
  padding: 0.75rem;
  color: #fff9df;
  background:
    linear-gradient(145deg, rgba(91, 27, 38, 0.99), rgba(48, 12, 22, 0.99));
  border: 4px solid #8c4d25;
  box-shadow:
    inset 0 0 0 2px rgba(255, 216, 129, 0.35),
    0 8px 18px rgba(36, 24, 16, 0.28);
}

.scoreboard-header {
  padding: 0.7rem 0.75rem;
  background: linear-gradient(135deg, #a63d2f, #d56a2b);
  border: 2px solid #ffce6d;
  border-radius: 10px;
  box-shadow: 0 4px 0 #5f2a20;
}

.scoreboard-header h3 {
  margin: 0.1rem 0 0.35rem;
  color: #fff9df;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  letter-spacing: 0.02em;
}

.scoreboard-kicker {
  margin: 0;
  color: #ffe6a5;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.board-standings-week {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: #fff9df;
  font-size: 0.82rem;
  font-weight: 800;
}

#contest-week-context {
  color: #ffe6a5;
}

.scoreboard-status {
  padding: 0.2rem 0.45rem;
  color: #183c42;
  background: #ffe08a;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.scoreboard-notice {
  margin: 0.75rem 0 0;
  padding: 0.7rem;
  color: #3d291a;
  text-align: center;
  background: #fff3c7;
  border: 2px dashed #e4a545;
  border-radius: 9px;
}

.scoreboard-error p {
  margin-bottom: 0.55rem;
}

.contest-division-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.contest-division-tab {
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  color: #fff9df;
  font: inherit;
  font-weight: 900;
  background: #315e63;
  border: 2px solid #79a7a4;
  border-radius: 10px;
  cursor: pointer;
}

.contest-division-tab[aria-selected="true"] {
  color: #3d291a;
  background: #ffd46b;
  border-color: #fff0b0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.contest-division-tab:focus-visible {
  outline: 3px solid #1f5f8b;
  outline-offset: 2px;
}

.contest-division-explanation,
.contest-empty-state {
  font-size: 0.88rem;
}

.contest-points-section,
.contest-camp-points-section {
  margin-bottom: 0.85rem;
}

.contest-points-section h4,
.contest-camp-points-section h4,
.contest-instrument-section h4 {
  margin: 0 0 0.55rem;
  color: #fff4c4;
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
}

.contest-camp-points-section {
  padding-top: 0.8rem;
  border-top: 2px solid rgba(255, 214, 107, 0.45);
}

.contest-camp-points-section .contest-division-explanation {
  margin: -0.35rem 0 0.55rem;
  color: #ffe6a5;
}

.contest-camp-points-list .contest-ranked-row {
  border-left: 6px solid #a63d2f;
}

.contest-instrument-section {
  padding-top: 0.8rem;
  border-top: 2px solid rgba(255, 214, 107, 0.45);
}

.contest-instrument-section .contest-division-explanation {
  margin: -0.35rem 0 0.55rem;
  color: #bfe0dc;
}

.contest-position-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  align-items: baseline;
  margin-bottom: 0.65rem;
  padding: 0.45rem 0.6rem;
  color: #183c42;
  background: #d8f0df;
  border-left: 5px solid #f2a93b;
  border-radius: 7px;
}

.contest-position-card strong {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contest-current-user-row {
  font-weight: 900;
  outline: 3px solid #62b6cb;
  outline-offset: -3px;
}

.contest-empty-state {
  padding: 0.7rem;
  color: #3d291a;
  text-align: center;
  background: #fff3c7;
  border: 2px dashed #e4a545;
  border-radius: 8px;
}

.contest-ranked-list {
  display: grid;
  gap: 0.45rem;
}

.contest-ranked-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  color: #342619;
  background: #fff8df;
  border: 2px solid #d6b56e;
  border-radius: 9px;
  box-shadow: 0 3px 0 rgba(69, 39, 22, 0.35);
}

.contest-rank-badge {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: #fff;
  font-weight: 1000;
  background: #52727a;
  border-radius: 50%;
}

.contest-rank-1 {
  background: #fff0af;
  border-color: #d99a19;
}

.contest-rank-1 .contest-rank-badge {
  color: #4b3300;
  background: #ffc83d;
}

.contest-rank-2 {
  background: #edf2f2;
  border-color: #9cadb0;
}

.contest-rank-2 .contest-rank-badge {
  color: #293638;
  background: #c5d0d2;
}

.contest-rank-3 {
  background: #f7d3b6;
  border-color: #b66b39;
}

.contest-rank-3 .contest-rank-badge {
  background: #b96c38;
}

.contest-ranked-subject {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.contest-ranked-score {
  text-align: right;
  white-space: nowrap;
}

.medal-board-intro,
.medal-week-label {
  font-size: 0.88rem;
  font-weight: 800;
}

.medal-board-state {
  padding: 0.75rem;
  text-align: center;
  background: rgba(255, 248, 232, 0.62);
  border: 1px dashed rgba(92, 63, 32, 0.45);
  border-radius: 8px;
}

.medal-board-state p {
  margin-bottom: 0.55rem;
}

.medal-week-label {
  display: block;
  margin-bottom: 0.3rem;
}

.medal-week-select {
  width: 100%;
  min-height: 44px;
  margin-bottom: 0.25rem;
  color: #3d2a18;
  background: #fff8e8;
  border: 2px solid #8a6a3e;
  border-radius: 10px;
}

.medal-contest + .medal-contest {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 2px solid rgba(92, 63, 32, 0.35);
}

.medal-contest h4 {
  margin: 0 0 0.55rem;
  line-height: 1.3;
}

.medal-rows {
  display: grid;
  gap: 0.5rem;
}

.medal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.65rem;
  background: rgba(255, 248, 232, 0.78);
  border: 1px solid rgba(92, 63, 32, 0.32);
  border-radius: 10px;
}

.medal-row-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.medal-row-subject {
  min-width: 0;
  overflow-wrap: anywhere;
}

.medal-row-subject strong,
.medal-row-subject small {
  display: block;
}

.medal-row-score {
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .medal-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .medal-row-score {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .board-standings-panel {
    padding: 0.55rem;
  }

  .scoreboard-header {
    padding: 0.6rem;
  }

  .contest-ranked-row {
    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
    gap: 0.4rem;
    padding: 0.45rem;
    font-size: 0.82rem;
  }

  .contest-rank-badge {
    width: 1.8rem;
    height: 1.8rem;
  }
}

.crown-progress-list {
  display: grid;
  gap: 0.5rem;
}

.crown-progress-list div {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(92, 63, 32, 0.3);
}

.personal-crown-progress {
  min-width: 0;
}

.personal-crown-content {
  display: grid;
  gap: 0.45rem;
}

.personal-crown-content p {
  margin: 0;
}

.personal-crown-status {
  font-size: 1.05rem;
  font-weight: 900;
}

.personal-crown-earned {
  padding: 0.7rem;
  color: #4c3700;
  background: rgba(255, 223, 105, 0.55);
  border: 2px solid #9b7413;
  border-radius: 10px;
}

.personal-crown-count {
  font-size: 1rem;
}

.personal-crown-meter {
  width: 100%;
  height: 1.1rem;
  accent-color: #526b3f;
}

.personal-crown-remaining,
.personal-crown-earned-date {
  font-weight: 800;
}

.personal-crown-explanation {
  font-size: 0.82rem;
  line-height: 1.4;
}

.personal-crown-loading,
.personal-crown-error {
  padding: 0.65rem;
  text-align: center;
  background: rgba(255, 248, 232, 0.62);
  border: 1px dashed rgba(92, 63, 32, 0.45);
  border-radius: 8px;
}

@media (max-width: 420px) {
  .personal-crown-progress {
    padding-inline: 0.65rem;
  }
}

.board-name-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.2rem;
}

.hall-of-champions {
  background:
    linear-gradient(180deg, #f1db9d, #d8b666);
}

.champions-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin: 0.7rem 0 1rem;
}

.champions-filter {
  min-height: 44px;
  padding: 0.5rem 0.35rem;
  color: #3d2a18;
  font: inherit;
  font-weight: 900;
  background: rgba(255, 248, 232, 0.72);
  border: 2px solid #8a6a3e;
  border-radius: 9px;
  cursor: pointer;
}

.champions-filter[aria-pressed="true"] {
  color: #fff8e8;
  background: #526b3f;
  border-color: #304725;
}

.champions-filter:focus-visible,
.champions-show-all:focus-visible {
  outline: 3px solid #1f5f8b;
  outline-offset: 2px;
}

.champions-panel + .champions-panel {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 2px solid rgba(92, 63, 32, 0.35);
}

.champions-panel h4 {
  margin: 0 0 0.6rem;
}

.champions-list {
  display: grid;
  gap: 0.55rem;
}

.champion-card {
  min-width: 0;
  padding: 0.7rem;
  background: rgba(255, 248, 232, 0.8);
  border: 1px solid rgba(92, 63, 32, 0.34);
  border-radius: 10px;
}

.champion-card-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.champion-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.champion-podium-total {
  flex: none;
  font-size: 0.78rem;
  font-weight: 900;
}

.champion-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 800;
}

.champion-crown,
.champion-divisions {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 800;
}

.champion-crown-earned {
  color: #594000;
}

.champions-show-all {
  width: 100%;
  margin-top: 0.65rem;
}

@media (max-width: 420px) {
  .hall-of-champions {
    padding-inline: 0.65rem;
  }

  .champion-card-head {
    align-items: flex-start;
  }
}

.board-feedback {
  min-height: 1.35rem;
  margin: 1rem 0;
  padding: 0.75rem;
  font-weight: 900;
  text-align: center;
  background: rgba(239, 225, 190, 0.62);
  border: 1px solid rgba(120, 84, 34, 0.24);
  border-radius: var(--radius-md);
}

.board-practice-section {
  margin-top: 1.2rem;
  padding: 1rem;
  background: rgba(255, 248, 232, 0.78);
  border: 1px solid #d8bf8a;
  border-radius: var(--radius-lg);
}

.board-practice-section.bonus-challenge-section {
  border: 4px solid #f4d35e;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.25), transparent 18%),
    linear-gradient(145deg, #173f78, #6b287a 58%, #a52f49);
  color: #fffbea;
  box-shadow: 0 8px 0 #54203a, 0 14px 24px rgba(44, 15, 38, 0.35);
}

.board-practice-section.bonus-challenge-section > .section-head {
  color: #2f2419;
}

.bonus-challenge-title {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 950;
}

.practice-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.practice-tool-slot { padding: 0.8rem; border: 2px dashed #987442; border-radius: 10px; background: #fff6da; }
.practice-tool-slot h4, .practice-tool-slot p { margin: 0; }
.practice-tool-slot p { margin-top: 0.35rem; font-weight: 900; }

.success-confetti {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}

.success-confetti span {
  --confetti-x: 0vw;
  --confetti-delay: 0ms;
  position: absolute;
  top: 45%;
  left: 50%;
  width: 9px;
  height: 15px;
  animation: success-confetti-burst 1.1s ease-out var(--confetti-delay) both;
}

@keyframes success-confetti-burst {
  from { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  to { transform: translate(var(--confetti-x), 48vh) rotate(620deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .success-confetti { display: none; }
}

/* Band Director Dashboard */
.director-dashboard {
  width: min(72rem, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.director-dashboard-header,
.director-team-selector-row,
.director-inline-form,
.director-contest-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.director-dashboard-header {
  justify-content: space-between;
}

.director-dashboard-header h1,
.director-dashboard-header p {
  margin: 0;
}

.director-team-toolbar h2 {
  margin-top: 0;
}

.director-team-selector-row select {
  min-width: min(18rem, 100%);
}

.director-inline-form,
.director-contest-form {
  align-items: end;
  margin-top: 1rem;
}

.director-contest-form label,
.director-contest-form fieldset {
  flex: 1 1 13rem;
}

.director-contest-form label {
  display: grid;
  gap: 0.3rem;
}

.director-contest-form fieldset {
  display: grid;
  gap: 0.35rem;
  min-width: 100%;
}

.director-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.director-metric-card {
  min-width: 0;
  padding: 1rem;
  border: 2px solid var(--green, #377449);
  border-radius: 0.8rem;
  background: rgba(255, 255, 246, 0.94);
  display: grid;
  align-content: start;
  gap: 0.3rem;
}

.director-metric-card h2 {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.director-metric-card strong {
  color: #224d31;
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  line-height: 1;
}

.director-chart-grid,
.director-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.director-management-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.director-bar-chart {
  display: grid;
  gap: 0.45rem;
}

.director-bar-row {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) minmax(3rem, 1fr) minmax(3rem, auto);
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.director-bar-track {
  height: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: #dfdac6;
}

.director-bar-fill {
  display: block;
  height: 100%;
  min-width: 0.15rem;
  border-radius: inherit;
  background: #3d8b57;
}

.director-contest-section {
  margin-top: 1rem;
}

.director-contest-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.director-contest-card {
  padding: 0.8rem;
  border: 1px solid rgba(67, 91, 56, 0.35);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.6);
}

.director-contest-card h3,
.director-contest-card p {
  margin: 0 0 0.4rem;
}

@media (max-width: 760px) {
  .director-metric-grid,
  .director-chart-grid,
  .director-management-grid {
    grid-template-columns: 1fr;
  }

  .director-dashboard-header {
    align-items: flex-start;
  }

  .director-team-selector-row > *,
  .director-inline-form > *,
  .director-contest-form > * {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .practice-tool-grid { grid-template-columns: 1fr; }
  .bonus-challenge-section { padding: 0.75rem; }
}

.board-practice-feedback {
  padding: 0.8rem;
  font-weight: 800;
  background: #f1ead3;
  border: 1px solid #d8bf8a;
  border-radius: var(--radius-md);
}

.board-practice-feedback p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

@media (min-width: 760px) {
  .board-banner {
    grid-template-columns: 1.4fr 0.8fr;
  }

  .board-layout {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 72rem);
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .board-contest-card {
    grid-template-columns: 1fr;
  }

  .board-contest-icon {
    text-align: left;
  }

  .board-inline-form {
    display: grid;
  }
}

.shop-page {
  overflow: hidden;
}

.shop-intro {
  margin-top: 0;
  font-weight: 800;
}

.shop-feedback {
  margin: 0.8rem 0 0;
  min-height: 1.2rem;
  font-weight: 800;
}

.shop-scene {
  display: grid;
  grid-template-columns: minmax(130px, 0.42fr) minmax(280px, 1.4fr) minmax(130px, 0.42fr);
  gap: 0.55rem;
  align-items: stretch;
  min-height: 560px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(79, 58, 34, 0.35);
  background:
    linear-gradient(180deg, rgba(86, 43, 21, 0.18), rgba(44, 29, 20, 0.4)),
    linear-gradient(180deg, #d8c28f, #8c633a 56%, #4a3423);
  padding: 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.25);
}

.shop-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.shop-column-left,
.shop-column-right {
  justify-content: space-between;
}

.shop-column-center {
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.shop-character-art {
  width: min(94%, 620px);
  max-height: 520px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255, 247, 224, 0.18);
  box-shadow: 0 8px 18px rgba(36, 24, 16, 0.22);
}

.shop-shelf-list {
  display: grid;
  gap: 0.55rem;
}

.shop-shelf,
.shop-status-card {
  background: rgba(251, 241, 220, 0.9);
  border: 1px solid rgba(108, 76, 42, 0.32);
  border-radius: var(--radius-md);
  box-shadow: 0 5px 12px rgba(36, 24, 16, 0.18);
}

.shop-shelf {
  padding: 0.4rem 0.5rem;
}

.shop-shelf summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.shop-shelf-items {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
  max-height: 300px;
  overflow-y: auto;
}

.shop-shelf .store-item-card {
  padding: 0.55rem;
  gap: 0.4rem;
}

.shop-shelf .store-item-card h3 {
  font-size: 0.95rem;
}

.shop-shelf .store-item-card p {
  font-size: 0.85rem;
}

.shop-status-card {
  display: grid;
  gap: 0.25rem;
  min-height: 72px;
  padding: 0.55rem 0.65rem;
}

.shop-status-card strong {
  font-size: 0.95rem;
}

.shop-status-card small {
  line-height: 1.3;
}

@media (max-width: 640px) {
  .shop-scene {
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
  }

  .shop-column-center {
    grid-column: 1 / -1;
    order: -1;
  }

  .shop-character-art {
    max-height: 300px;
  }
}

.store-item-grid {
  display: grid;
  gap: 0.75rem;
}

.store-item-card {
  background: #fff8e8;
  border: 1px solid #d8bf8a;
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: grid;
  gap: 0.55rem;
}

.store-item-card h3 {
  margin: 0;
}

.store-item-card p {
  margin: 0;
  line-height: 1.35;
}

.store-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.store-item-card.owned {
  background: #f1ead3;
}

.store-item-card.equipped {
  border-color: var(--accent-forest-dark);
  box-shadow: inset 0 0 0 2px rgba(36, 70, 51, 0.28);
}

@media (min-width: 720px) {
  .store-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quest-advice-card {
  grid-template-columns: 72px 1fr;
  align-items: center;
}

.quest-advice-portrait {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid rgba(120, 84, 34, 0.45);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
}

/* Persistent Woodchuck accounts */
.account-layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .account-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
    align-items: start;
  }
}

.stack-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.66rem;
  border-radius: 10px;
  border: 1px solid #d0bc92;
  background: #fffaf0;
  color: #2a1d12;
  font-size: 1rem;
}

.form-help {
  margin: -0.3rem 0 0;
  color: #67533d;
  font-size: 0.92rem;
  line-height: 1.4;
}

.account-success {
  padding: 1rem;
  border: 2px solid #8aad63;
  border-radius: var(--radius-lg);
  background: #f5ffe8;
  box-shadow: 0 8px 20px rgba(43, 91, 35, 0.14);
}

.account-success h3 {
  margin-bottom: 0.4rem;
}

.account-id {
  display: inline-block;
  margin: 0.35rem 0 0.7rem;
  padding: 0.65rem 0.85rem;
  border: 1px dashed #6d854d;
  border-radius: 10px;
  background: #ffffff;
  font-family: monospace;
  font-size: clamp(1.1rem, 4vw, 1.55rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Mobile Woodshed layout cleanup */
@media (max-width: 640px) {
  body {
    min-height: 100dvh;
  }

  .app-shell {
    padding:
      0.45rem
      0.45rem
      calc(5.4rem + env(safe-area-inset-bottom));
  }

  .card.woodshed-page {
    padding: 0.65rem;
    border-radius: 16px;
  }

  .woodshed-intro {
    margin: 0 0 0.65rem;
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .woodshed-scene {
    min-height: 500px;
    border-radius: 16px;
  }

  .woodshed-character-layer {
    width: min(72%, 285px);
    bottom: 0.65rem;
  }

  .woodshed-character-art {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
  }

  .woodshed-foreground {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem;
    min-height: 500px;
    padding: 0.7rem;
  }

  .woodshed-object-column-center {
    display: none;
  }

  .woodshed-object-column {
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.2rem;
  }

  .woodshed-object-column-left {
    justify-items: start;
  }

  .woodshed-object-column-right {
    justify-items: end;
  }

  .woodshed-object-column-left .shed-readout {
    text-align: left;
  }

  .woodshed-object-column-right .shed-readout {
    text-align: right;
  }

  .shed-readout {
    max-width: 8.5rem;
    font-size: 1rem;
    line-height: 1.05;
  }

  .shed-readout-name {
    font-size: 1.08rem;
  }

  .shed-readout-class {
    font-size: 0.95rem;
  }

  .shed-icon-object,
  .room-object {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .shed-icon-object,
  .room-object-icon {
    font-size: 2.35rem;
  }

  .dandelion-count {
    font-size: 0.95rem;
  }

  .main-nav {
    gap: 0.4rem;
    padding:
      0.6rem
      0.5rem
      calc(0.6rem + env(safe-area-inset-bottom));
  }

  .nav-pill {
    flex: 1 1 0;
    min-width: 0;
    max-width: 9rem;
    padding: 0.55rem 0.35rem;
    font-size: 0.88rem;
    text-align: center;
  }
}


/* Keep both Woodshed object columns visible on phones */
@media (max-width: 640px) {
  .woodshed-foreground {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woodshed-object-column-left {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
    justify-items: start;
  }

  .woodshed-object-column-right {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
    justify-items: end;
  }

  .woodshed-object-column-left > *,
  .woodshed-object-column-right > * {
    max-width: 100%;
  }
}

/* Use the Woodshed artwork as the full room background */
.woodshed-scene {
  background-image: url("/static/img/shed-cabin-new.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;
}

/* The artwork now belongs to the scene itself, not a separate image layer */
.woodshed-character-layer {
  display: none;
}

@media (max-width: 640px) {
  .woodshed-scene {
    background-position: center top;
    background-size: cover;
  }
}

/* Spread Woodshed controls vertically across the mobile scene */
@media (max-width: 640px) {
  .woodshed-scene,
  .woodshed-foreground {
    min-height: 590px;
  }

  .woodshed-foreground {
    padding: 1rem 0.75rem 1.2rem;
  }

  .woodshed-object-column {
    grid-template-rows: repeat(6, auto);
    align-content: space-between;
    row-gap: 0;
    height: 100%;
  }
}

/* Correct mobile Woodshed vertical spacing */
@media (max-width: 640px) {
  .woodshed-scene,
  .woodshed-foreground {
    min-height: 620px;
  }

  .woodshed-object-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 0;
  }

  .woodshed-object-column-left {
    align-items: flex-start;
  }

  .woodshed-object-column-right {
    align-items: flex-end;
  }
}

/* Mobile SHED: show the full room and spread controls independently */
@media (max-width: 640px) {
  .woodshed-scene {
    position: relative;
    min-height: 620px;

    background-image: url("/static/img/shed-cabin-new.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #9a7047;
  }

  .woodshed-foreground {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 1rem 0.75rem 1.25rem;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woodshed-object-column {
    height: 100%;
    min-height: 0;

    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    align-items: center;
  }

  .woodshed-object-column-left {
    grid-column: 1;
    justify-items: start;
  }

  .woodshed-object-column-right {
    grid-column: 2;
    justify-items: end;
  }
}

/* Mobile SHED artwork: retain the room shelves with a little more breathing room */
@media (max-width: 640px) {
  .woodshed-scene {
    background-size: auto 86%;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

/* Mobile SHED: full-height left/right control columns */
@media (max-width: 640px) {
  .woodshed-foreground {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .woodshed-object-column-left,
  .woodshed-object-column-right {
    position: absolute;
    top: 1rem;
    bottom: 1.25rem;
    width: 3.5rem;

    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
  }

  .woodshed-object-column-left {
    left: 0.65rem;
    align-items: center;
  }

  .woodshed-object-column-right {
    right: 0.65rem;
    left: auto;
    align-items: center;
  }

  .woodshed-object-column-left > *,
  .woodshed-object-column-right > * {
    align-self: center;
    margin-left: 0;
  }

  .woodshed-object-column-right .shed-readout {
    text-align: right;
  }
}

/* Mobile SHED fine-tuning */
@media (max-width: 640px) {
  .woodshed-scene {
    background-size: auto 83%;
    background-position: center center;
  }

  .woodshed-object-column-right {
    right: 10%;
  }
}

/* Mobile SHED: slightly smaller controls and clearer dandelion placement */
@media (max-width: 640px) {
  .shed-icon-object,
  .room-object-icon {
    font-size: 2.05rem;
  }

  .shed-icon-object,
  .room-object {
    min-width: 2.4rem;
    min-height: 2.4rem;
  }

  .dandelion-object {
    transform: translate(0.7rem, -0.45rem);
  }

  .dandelion-count {
    font-size: 0.88rem;
  }
}

/* Mobile SHED: explicit control positions */
@media (max-width: 640px) {
  .woodshed-object-column-left,
  .woodshed-object-column-right {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: block !important;
  }

  .woodshed-object-column-left {
    left: 0.6rem !important;
  }

  .woodshed-object-column-right {
    right: 0.25rem !important;
    left: auto !important;
  }

  .woodshed-object-column-left > *,
  .woodshed-object-column-right > * {
    position: absolute !important;
  }

  /* Left column */
  #woodchuck-name-value {
    top: 1rem;
    left: 0;
  }

  #camp-level-value {
    top: 18%;
    left: 0;
  }

  #instrument-object {
    top: 10% !important;
    left: 0;
  }

  #level-value {
    top: 57%;
    left: 0;
  }




  /* Right column */


  .dandelion-object {
    top: 43%;
    right: 0;
    transform: none !important;
  }

  .metronome-object {
    top: 61%;
    right: 0;
  }

  .tuner-object {
    top: 78%;
    right: 0;
  }

  .chair-object {
    right: 0;
    bottom: 1rem;
  }

  .shed-icon-object,
  .room-object-icon {
    font-size: 1.9rem;
  }
}

/* Mobile SHED: reveal more space below the artwork without zooming it */
@media (max-width: 640px) {
  .woodshed-scene {
    min-height: 700px;
    background-size: auto 515px;
    background-position: center top;
  }

  .woodshed-foreground {
    height: 100%;
  }
}

/* Phase 4C: final Android SHED layout */
@media (max-width: 640px) {
  /* End the SHED scene with the artwork—no brown extension below it. */
  .woodshed-scene {
    min-height: calc(100dvh - 6.5rem);
    height: calc(100dvh - 6.5rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .woodshed-foreground {
    height: calc(100dvh - 6.5rem);
    min-height: calc(100dvh - 6.5rem);
  }

  /* Left side */
  #woodchuck-name-value {
    top: 1rem;
  }

  #camp-level-value {
    top: 9%;
  }

  #instrument-object {
    top: 27% !important;
  }

  #level-value {
    top: 47%;
  }




  /* Right side */


  .dandelion-object {
    top: 12%;
  }

  .metronome-object {
    top: 34%;
  }

  .tuner-object {
    top: 55%;
  }

  .chair-object {
    top: 76%;
    bottom: auto;
  }

  .shed-icon-object,
  .room-object-icon {
    font-size: 1.9rem;
  }
}
/* Phase 4C: page-wide visual tidy */

/* BOOK: metallic timer */
.practice-timer-metal {
  background:
    linear-gradient(
      145deg,
      #d9dde0 0%,
      #8b949b 32%,
      #e7eaec 55%,
      #737d84 100%
    );
  border: 3px solid #4e575d;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.45),
    inset 0 -8px 16px rgba(35, 40, 44, 0.24);
  color: #172027;
}

.practice-timer-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.practice-timer-row .btn {
  flex: 0 0 auto;
  min-width: 9rem;
}

#practice-timer-display {
  margin: 0;
  min-width: 6ch;
  font-family: "Courier New", monospace;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: left;
  color: #11181d;
  text-shadow: 0 1px rgba(255, 255, 255, 0.65);
}

/* BOOK: left-aligned checkbox list */
.practice-detail-grid {
  justify-items: start;
  align-items: start;
  text-align: left;
}

.practice-detail-grid label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  text-align: left;
}

.practice-detail-grid input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

/* BOOK: same-size vertical actions */
.p-book-action-column {
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}

.p-book-action-column .btn,
.p-book-verifier-manage {
  width: 100%;
  min-height: 3rem;
  font-size: 1rem;
}

.btn-book-copy {
  color: #f7fcff;
  background: linear-gradient(145deg, #367ca5, #1f5578);
  border-color: #173f5b;
}

.btn-book-copy:hover,
.btn-book-copy:focus-visible {
  background: linear-gradient(145deg, #438db8, #276789);
}

.p-book-verifier-manage {
  width: min(100%, 22rem);
  color: #fff8fc;
  background: linear-gradient(145deg, #c72c83, #83124f);
  border-color: #65103f;
  box-shadow: inset 0 1px 0 rgba(255, 210, 237, 0.5), 0 5px 10px rgba(89, 12, 55, 0.32);
}

.p-book-verifier-manage:hover,
.p-book-verifier-manage:focus-visible {
  background: linear-gradient(145deg, #dd3d98, #971b61);
}

.practice-minutes-definition {
  max-width: 38rem;
  padding: 0.7rem 0.85rem;
  border: 2px dashed #8b5a9b;
  border-radius: 10px;
  color: #402445;
  background: #f8eafa;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.4;
}

.contest-opt-in-control {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.7rem 0.8rem;
  border: 2px solid #527a58;
  border-radius: 10px;
  background: #eef7e8;
}

.contest-opt-in-control input { width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; }
.contest-opt-in-control span { display: grid; gap: 0.2rem; }
.contest-opt-in-control small { font-weight: 600; line-height: 1.35; }
.p-book-option-card { margin-top: 0.2rem; padding: 0.62rem 0.72rem; }
.p-book-option-detail {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.72rem;
  border: 1px solid #bd8c3e;
  border-radius: 0 0 12px 12px;
  background: #fff1b8;
}
.p-book-option-card + .p-book-option-detail { margin-top: -0.72rem; }

.p-book-option-group {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  margin-top: 0.2rem;
  padding: 0.72rem;
  border: 2px solid #527a58;
  border-radius: 12px;
  background: #eef7e8;
}

.p-book-option-group .p-book-option-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.p-book-option-group .p-book-option-detail {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.p-book-option-group .p-book-option-card + .p-book-option-detail {
  margin-top: 0;
}
.p-book-email-preset-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.65rem;
  min-width: 0;
}
.p-book-email-preset-manager > summary,
.p-book-email-preset-manager > p,
.p-book-email-preset-manager > label { margin: 0; }
.p-book-email-preset-manager > .btn { justify-self: start; }
.p-book-warm-field,
.p-book-work-field { border-radius: 12px; background: #fff1b8; }
#p-book-form input:not([type="checkbox"]):not([type="radio"]),
#p-book-form select,
#p-book-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.66rem;
  border: 1px solid #aa7834;
  border-radius: 10px;
  color: #2a1d12;
  background: #fff1b8;
}
#p-book-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
#p-book-form select:focus-visible,
#p-book-form textarea:focus-visible,
#p-book-form details > summary:focus-visible {
  outline: 3px solid #356da0;
  outline-offset: 2px;
}
#p-book-form select:disabled,
#p-book-form input:disabled,
#p-book-form textarea:disabled { color: #6d6250; background: #ddd0a9; opacity: 1; }
#p-book-form .p-book-work-field { padding: 0; overflow: hidden; }
#p-book-form .p-book-work-field > summary {
  padding: 0.72rem 0.8rem;
  border-radius: 10px;
  color: #3f2a12;
  background: #fff1b8;
}
#p-book-form .p-book-work-field[open] > summary { border-radius: 10px 10px 0 0; }
#p-book-form .p-book-work-field > :not(summary) { margin-inline: 0.8rem; }
.team-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.45rem; }
.team-radio-tile { display: flex; gap: 0.45rem; align-items: center; min-height: 44px; padding: 0.5rem; border: 1px solid #8b6330; border-radius: 9px; background: #fff8db; }
.team-radio-tile input { width: 1.2rem; height: 1.2rem; }
.team-emblem-visual {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.7rem;
  min-height: 1.7rem;
  vertical-align: middle;
}
.team-emblem-letter {
  border: 2px solid #65451f;
  border-radius: 50%;
  color: #fff9da;
  background: #744b24;
  font-weight: 900;
}
.team-emblem-shield {
  width: 1.55rem;
  height: 1.75rem;
  border: 2px solid #513b22;
  border-radius: 45% 45% 55% 55% / 24% 24% 70% 70%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
}
.team-emblem-shield-blue { background: #3678b5; }
.team-emblem-shield-red { background: #b84638; }
.team-emblem-shield-green { background: #4f8b4c; }
.team-emblem-shield-gold { background: linear-gradient(145deg, #ffe78a, #c58b1f); }
.team-emblem-shield-purple { background: #76539b; }
.team-emblem-shield-orange { background: #d7792c; }
.team-emblem-shield-black { background: #292929; }
.team-emblem-shield-silver { background: linear-gradient(145deg, #f0f0ec, #949a9e); }
.team-captain-label { white-space: normal; }
.p-book-submit-gold {
  color: #2f220d;
  background: linear-gradient(145deg, #ffe88a, #d8a832);
  box-shadow: 0 0 0.7rem rgba(210, 158, 28, 0.7);
  animation: p-book-gold-pulse 2.4s ease-in-out infinite;
}
@keyframes p-book-gold-pulse {
  50% { box-shadow: 0 0 1.15rem rgba(210, 158, 28, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .p-book-submit-gold { animation: none; box-shadow: 0 0 0 3px #b78718; }
}

.crown-category-chart { margin-top: 1rem; padding-top: 0.8rem; border-top: 2px solid rgba(92, 63, 32, 0.3); }
.crown-category-list { display: grid; gap: 0.5rem; }
.crown-category-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #b9944d;
  border-radius: 9px;
  background: #fff5cf;
}
.crown-category-card strong { min-width: 0; overflow-wrap: anywhere; }
.crown-category-card span { flex: none; font-weight: 950; }

.p-book-submit-dialog {
  width: min(92vw, 32rem);
  border: 3px solid #6d4126;
  border-radius: 12px;
  color: #332617;
  background: #fff3c7;
}

.p-book-submit-dialog::backdrop { background: rgba(24, 13, 8, 0.68); }

/* BOOK: antique pirate logbook */
.pirate-logbook {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 5px double #4a2c18;
  border-radius: 10px;
  background:
    linear-gradient(
      rgba(255, 248, 215, 0.82),
      rgba(219, 184, 116, 0.82)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 29px,
      rgba(91, 57, 28, 0.15) 30px
    );
  color: #382310;
  box-shadow:
    inset 0 0 30px rgba(83, 47, 15, 0.34),
    0 7px 15px rgba(45, 27, 14, 0.2);
}

.pirate-logbook > .p-book-title {
  margin-bottom: 1rem;
  margin-top: 0;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid rgba(72, 40, 17, 0.55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
}
.p-book-work-label { display: block; font-weight: 800; }

/* BOOK: open metallic spiral Practice Book */
.p-book-page {
  padding: clamp(0.55rem, 1.5vw, 1rem);
  overflow-x: clip;
  background: linear-gradient(145deg, #6f7b83, #c9d0d4 48%, #69747b);
}

.p-book-notebook {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  align-items: stretch;
  max-width: 100%;
}

.p-book-page-sheet {
  min-width: 0;
  padding: clamp(0.8rem, 2vw, 1.3rem);
  color: #20272b;
  background:
    linear-gradient(105deg, rgba(255,255,255,.52), transparent 18%),
    linear-gradient(145deg, #d9dee1, #a8b0b5 52%, #e0e4e6);
  border: 2px solid #626c72;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), inset 0 -12px 24px rgba(45,54,59,.16);
}

.p-book-page-left { border-radius: 18px 4px 4px 18px; }
.p-book-page-right { border-radius: 4px 18px 18px 4px; }

.p-book-spiral {
  position: relative;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #505a60, #dfe5e8 35%, #737e84 65%, #edf1f2);
  box-shadow: inset 5px 0 8px rgba(17,25,29,.32), inset -5px 0 8px rgba(255,255,255,.48);
}

.p-book-spiral::after {
  content: "";
  position: absolute;
  inset: 7px -8px;
  background: repeating-radial-gradient(ellipse at center, transparent 0 7px, #f4f7f8 8px 10px, #69747a 11px 13px, transparent 14px 25px);
  filter: drop-shadow(1px 2px 1px rgba(20,28,32,.42));
}

.p-book-page .practice-timer-metal,
.p-book-page .practice-stat-stone,
.p-book-page .pirate-logbook,
.p-book-page .p-book-lower-region {
  color: #172027;
  background: linear-gradient(145deg, #e0e4e6 0%, #90999f 35%, #d9dde0 58%, #7b858b 100%);
  border: 3px solid #59636a;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), inset 0 -8px 16px rgba(35,40,44,.2), 0 5px 10px rgba(29,38,43,.2);
  text-shadow: 0 1px rgba(255,255,255,.48);
}

.p-book-page .p-book-lower-region {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.p-book-page .practice-total-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-book-page .practice-stat-stone { min-width: 0; }
.p-book-page .practice-timer-metal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.p-book-page .practice-timer-row { grid-row: 1; min-width: 0; }
.p-book-page .practice-timer-status {
  position: static;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ww-character-reaction {
  position: fixed;
  z-index: 1450;
  inset: 0;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.8rem;
  justify-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  opacity: 0;
  color: #fff8df;
  background: linear-gradient(180deg, rgba(54, 29, 18, 0.985), rgba(18, 12, 10, 0.99));
  box-shadow: none;
  transform: scale(0.985);
  transition: opacity 160ms ease, transform 160ms ease;
  cursor: pointer;
}
.ww-character-reaction.is-visible { opacity: 1; transform: none; }
.ww-character-reaction img {
  display: block;
  width: min(48rem, 100%);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
}
.ww-character-reaction-speech {
  box-sizing: border-box;
  width: min(44rem, 100%);
  min-width: 0;
  margin: 0;
  padding: 0.8rem 3.5rem 0.8rem 1rem;
  border: 2px solid rgba(255, 226, 164, 0.76);
  border-radius: 16px;
  color: #2f1b12;
  background: #fff4ce;
  font-size: 1.3rem;
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.ww-character-reaction-speaker { font-weight: 950; }
.ww-character-reaction-quote { font-weight: 800; }
.ww-character-reaction-dismiss {
  position: absolute;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #2f1b12;
  background: #fff4ce;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}
.p-book-page .pirate-logbook {
  display: block;
  padding: 1rem;
  border-radius: 14px;
}
.p-book-page .pirate-logbook > .p-book-title { border-bottom-color: #4e5960; font-family: inherit; }
.p-book-page .p-book-entry-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  width: 100%;
}
.p-book-page .p-book-entry-list > p {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgba(58,67,72,.48);
  border-radius: 9px;
  background: rgba(239,243,244,.58);
  overflow-wrap: anywhere;
}
.p-book-preset-list { display: grid; gap: 0.5rem; margin-top: 0.55rem; }
.p-book-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid #aa7834;
  border-radius: 9px;
  background: #fff1b8;
}
.p-book-preset-row > span { min-width: 0; overflow-wrap: anywhere; }
.p-book-page .p-book-delete-preset { width: auto; min-height: 44px; }

.p-book-page .btn {
  min-height: 44px;
  color: #172027;
  background: linear-gradient(145deg, #f0f3f4, #90999f 48%, #dce1e3);
  border: 2px solid #555f65;
  border-radius: 10px;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.72), inset 0 -3px 4px rgba(45,54,59,.28), 0 4px 0 #485158;
  text-shadow: 0 1px rgba(255,255,255,.7);
}

.p-book-page .btn:hover,
.p-book-page .btn:focus-visible { background: linear-gradient(145deg, #fff, #a3acb1 50%, #e5e9ea); }
.p-book-page .btn:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(32,40,44,.32), 0 1px 0 #485158; }

.p-book-page #p-book-team-shed-link,
.p-book-page .p-book-verifier-manage {
  color: #f7fff4;
  background: linear-gradient(145deg, #74a965, #2f6d3d 55%, #4d8951);
  border-color: #244e2d;
  text-shadow: 0 1px #17331d;
}

.p-book-page #submit-p-chart-btn {
  width: 112px;
  height: 112px;
  min-height: 112px;
  padding: 0.8rem;
  align-self: center;
  border-radius: 50%;
  color: #f8fff4;
  background: radial-gradient(circle at 35% 28%, #9bc486, #367744 48%, #1f4c2c 76%);
  border: 5px ridge #5f7863;
  box-shadow: inset 4px 4px 7px rgba(255,255,255,.34), inset -5px -6px 9px rgba(17,49,25,.44), 0 7px 0 #263f2d, 0 10px 16px rgba(25,36,30,.35);
  text-shadow: 0 1px 2px #17331d;
}

.p-book-page #submit-p-chart-btn.p-book-submit-gold {
  color: #302309;
  background: radial-gradient(circle at 35% 28%, #fff2a5, #d5a52c 50%, #936512 78%);
  border-color: #9b761e;
  box-shadow: inset 4px 4px 7px rgba(255,255,255,.42), inset -5px -6px 9px rgba(92,59,5,.35), 0 7px 0 #73520f, 0 0 1rem rgba(222,170,38,.75);
}

.p-book-entry-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  margin-inline-start: 0.3rem;
  vertical-align: middle;
}

.p-book-verified-badge {
  border: 2px ridge #a7c4ae;
  border-radius: 50%;
  color: #f3fff2;
  background: linear-gradient(145deg, #65a874, #1f6337 58%, #8ac294);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 2px 3px rgba(22,48,29,.28);
  font-weight: 950;
  text-shadow: 0 1px #163d24;
}

.p-book-pristine-badge { font-size: 1.35rem; }

@media (max-width: 760px) {
  .p-book-notebook { grid-template-columns: minmax(0, 1fr); }
  .p-book-page-left { border-radius: 16px 16px 4px 4px; }
  .p-book-page-right { border-radius: 4px 4px 16px 16px; }
  .p-book-spiral { min-height: 42px; background: linear-gradient(180deg, #505a60, #dfe5e8 35%, #737e84 65%, #edf1f2); }
  .p-book-spiral::after {
    inset: -8px 7px;
    background: repeating-radial-gradient(ellipse at center, transparent 0 7px, #f4f7f8 8px 10px, #69747a 11px 13px, transparent 14px 25px);
  }
  .p-book-page #submit-p-chart-btn { width: 100px; height: 100px; min-height: 100px; }
  .p-book-page .practice-timer-row { flex-wrap: wrap; }
  .p-book-page .practice-timer-status { grid-column: 1 / -1; }
  .p-book-preset-row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .p-book-page #submit-p-chart-btn.p-book-submit-gold { animation: none; box-shadow: 0 0 0 4px #b78718; }
}

/* SHED: compact, accessible team selection hierarchy. */
.woodshed-page #shed-team-panel {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.9rem;
}

.login-streak-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.7fr);
  gap: 0.8rem 1rem;
  align-items: center;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid #6d8a52;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff8cf, #e6efc8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.login-streak-summary,
.login-streak-crown-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.login-streak-icon { font-size: 1.85rem; }
.login-streak-summary h2,
.login-streak-summary p { margin: 0; }
.login-streak-summary h2 { font-size: 1rem; }
.login-streak-summary p { margin-top: 0.15rem; font-size: 0.84rem; }
.login-streak-crown-progress progress { flex: 1 1 auto; min-width: 4rem; }
.login-streak-crown-progress span:last-child {
  flex: 0 0 auto;
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .login-streak-card { grid-template-columns: minmax(0, 1fr); }
}

.shed-team-current,
.shed-team-subsection { min-width: 0; }
.shed-team-subsection {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  padding-top: 0.8rem;
  border-top: 1px solid #b68a4c;
}
.shed-team-subsection[hidden] { display: none; }
.shed-team-subsection h3 { margin: 0; }
.shed-team-choice-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 54px;
  padding: 0.7rem 0.8rem;
  border: 2px solid #8c6a35;
  border-radius: 12px;
  color: #2a1d12;
  background: #fff1b8;
  cursor: pointer;
}
.shed-team-choice-card.is-selected {
  border-color: #356d42;
  background: linear-gradient(145deg, #f6e8ad, #d6e5bd);
  box-shadow: inset 0 0 0 2px rgba(66,115,70,.25);
  cursor: default;
}
.team-radio-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.shed-team-choice-card:has(.team-radio-native:focus-visible) {
  outline: 3px solid #356da0;
  outline-offset: 3px;
}
.shed-team-choice-card:has(.team-radio-native:disabled):not(.is-selected) {
  cursor: not-allowed;
  opacity: 0.58;
}
.shed-team-choice-content { display: grid; gap: 0.3rem; min-width: 0; }
.shed-team-choice-main { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.shed-team-choice-main strong { overflow-wrap: anywhere; }
.shed-team-choice-captain { font-size: 0.88rem; color: #51422f; }
.shed-team-selected-status {
  width: fit-content;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  color: #f7fff4;
  background: #356d42;
  font-size: 0.78rem;
  font-weight: 850;
}
.shed-team-create-section input,
.shed-team-create-section select {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.65rem;
  border: 1px solid #aa7834;
  border-radius: 10px;
  color: #2a1d12;
  background: #fff1b8;
}
.shed-team-emblem-field {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}
.shed-team-emblem-preview {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #aa7834;
  border-radius: 10px;
  background: #fff1b8;
}
.shed-team-create-section .btn-green {
  justify-self: start;
  min-height: 44px;
  color: #f7fff4;
  background: linear-gradient(145deg, #74a965, #2f6d3d 55%, #4d8951);
  border-color: #244e2d;
}

/* BOARD: centered public-events heading */
.board-page {
  background:
    linear-gradient(rgba(112, 67, 35, 0.08), rgba(112, 67, 35, 0.08)),
    #b77b45;
  border-color: #6d4126;
}

.board-page > .section-head {
  text-align: center;
}

.board-season-title {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.65rem;
  padding: 0.55rem 2rem;
  border: 3px double #5f3b21;
  background: #f2dfb2;
  color: #4a2a16;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.08em;
  text-align: center;
  transform: rotate(-0.5deg);
  box-shadow: 0 4px 8px rgba(55, 31, 15, 0.26);
}

/* BOARD: paper notices pinned to cork */
.board-contest-card,
.board-panel,
.board-banner {
  position: relative;
  border: 1px solid #8a6a3e;
  background:
    linear-gradient(
      165deg,
      rgba(255, 253, 230, 0.98),
      rgba(231, 215, 166, 0.98)
    );
  color: #332617;
  box-shadow:
    0 5px 10px rgba(61, 37, 21, 0.25),
    inset 0 0 16px rgba(126, 91, 43, 0.1);
}

.board-contest-card:nth-child(even),
.board-panel:nth-child(even) {
  transform: rotate(0.35deg);
}

.board-contest-card:nth-child(odd),
.board-panel:nth-child(odd) {
  transform: rotate(-0.25deg);
}

.board-contest-card::before,
.board-panel::before,
.board-banner::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid #7b1f18;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffb2a8 0 12%, #c94235 30%, #751c17 75%);
  box-shadow: 0 2px 3px rgba(35, 20, 12, 0.45);
  transform: translateX(-50%);
}

.cork-paper {
  padding-top: 1.7rem;
}

.weekly-top-five {
  list-style-position: inside;
}

/* Protected contest operations: compact cards, no student navigation. */
.contest-admin-page {
  min-height: 100vh;
  color: #fff9df;
  background: linear-gradient(145deg, #5b1b26, #300c16);
}

.contest-admin-shell {
  width: min(960px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

.contest-admin-header,
.contest-admin-actions,
.contest-admin-card,
.contest-admin-message {
  padding: 1rem;
  border: 2px solid #d6b56e;
  border-radius: 12px;
  background: #fff8df;
  color: #342619;
  box-shadow: 0 5px 12px rgba(20, 6, 10, 0.35);
}

.contest-admin-header {
  color: #fff9df;
  background: linear-gradient(135deg, #7f2934, #4a131e);
}

.contest-admin-header h1,
.contest-admin-card h2,
.contest-admin-actions h2 {
  margin-top: 0;
}

.contest-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.contest-admin-facts {
  margin: 0;
}

.contest-admin-facts div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(92, 63, 32, 0.3);
}

.contest-admin-facts dt {
  font-weight: 850;
}

.contest-admin-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.contest-admin-actions {
  margin-top: 0.75rem;
}

.contest-admin-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.contest-admin-button-row .btn,
.contest-admin-rollover-form .btn {
  min-height: 44px;
}

.contest-admin-rollover-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.contest-admin-rollover-form label {
  display: grid;
  gap: 0.3rem;
  font-weight: 800;
}

.contest-admin-rollover-form input {
  width: 100%;
  min-height: 44px;
}

.contest-admin-rollover-form p,
.contest-admin-rollover-form button {
  grid-column: 1 / -1;
}

.contest-admin-message-success { border-color: #4d8a5b; }
.contest-admin-message-error { border-color: #a63d2f; }
.contest-admin-message-info { border-color: #52727a; }

@media (max-width: 600px) {
  .contest-admin-grid,
  .contest-admin-rollover-form {
    grid-template-columns: 1fr;
  }

  .contest-admin-facts div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .contest-admin-button-row,
  .contest-admin-button-row form,
  .contest-admin-button-row .btn {
    width: 100%;
  }
}

/* BOARD: lower practice layer becomes corkboard */
.board-practice-section {
  border: 10px ridge #6d3d20;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 20%),
    radial-gradient(circle at 75% 40%, rgba(77,39,17,0.12), transparent 18%),
    #a96e3c;
  box-shadow:
    inset 0 0 28px rgba(62, 31, 13, 0.38),
    0 8px 16px rgba(49, 29, 16, 0.24);
}

.board-practice-section > .section-head,
.board-practice-section > form,
.board-practice-section > article,
.board-practice-section > .button-row {
  position: relative;
  padding: 1rem;
  background: #f3e5ba;
  color: #352616;
  box-shadow: 0 4px 9px rgba(55, 31, 15, 0.24);
}

/* SHOP */
.shop-page { width: 100%; min-width: 0; }

.shop-scene {
  position: relative;
  width: min(100%, 760px);
  min-height: calc(100dvh - 6.5rem);
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #f4d35e;
  border-radius: var(--radius-xl);
  background: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.25);
}

.shop-viking-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.shop-object-column {
  position: absolute;
  z-index: 2;
  top: 4%;
  bottom: 4%;
  display: flex;
  width: clamp(70px, 12%, 92px);
  flex-direction: column;
  justify-content: space-around;
  gap: .45rem;
}
.shop-object-column-left { left: 3%; }
.shop-object-column-right { right: 3%; }

.shop-scene-control {
  display: flex;
  min-width: 0;
  min-height: 70px;
  padding: .25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.shop-scene-control:hover { transform: translateY(-2px); }
.shop-scene-control:focus-visible { outline: 4px solid #1565c0; outline-offset: 3px; }
.shop-control-emoji { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; filter: drop-shadow(0 2px 2px rgba(255,255,255,.9)) drop-shadow(0 3px 3px rgba(28,16,8,.7)); }
.shop-share-arrow { font-weight: 950; }
.shop-dandelion-control { flex-direction: row; gap: .2rem; cursor: default; }
.shop-dandelion-count {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(35,20,10,.95), 0 0 5px rgba(35,20,10,.75);
  display: none;
}

#dandelion-object {
  cursor: pointer;
}

#dandelion-object:focus-visible {
  outline: 4px solid #f4d35e;
  outline-offset: 4px;
  border-radius: 999px;
}

.shop-dandelion-balance-burst {
  position: fixed;
  left: 50%;
  top: 48%;
  z-index: 10020;
  pointer-events: none;
  color: #ffd84f;
  font-size: clamp(5rem, 24vw, 10rem);
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 4px 0 #87591d,
    0 9px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  animation:
    shop-dandelion-balance-fly
    1250ms
    cubic-bezier(.18, .82, .28, 1)
    forwards;
}

@keyframes shop-dandelion-balance-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.85);
  }

  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-dandelion-balance-burst {
    animation-duration: 500ms;
  }
}

.shop-feature-dialog {
  width: min(92vw, 570px);
  max-width: calc(100vw - 1.5rem);
  max-height: min(78vh, 650px);
  padding: 0;
  overflow: hidden;
  border: 5px solid #704321;
  border-radius: 18px;
  color: #352616;
  background: #fff6da;
  box-shadow: 0 20px 55px rgba(25, 14, 6, .55);
}
.shop-feature-dialog::backdrop { background: rgba(35, 22, 13, .65); }
.shop-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; color: #fff8df; background: #684125; }
.shop-dialog-head h2 { margin: 0; font-size: 1.35rem; }
.shop-dialog-close { width: 44px; height: 44px; flex: 0 0 44px; border: 2px solid #fff8df; border-radius: 50%; color: #fff8df; background: #4d2c17; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.shop-dialog-scroll { max-height: calc(min(78vh, 650px) - 68px); padding: 1rem; overflow-y: auto; overscroll-behavior: contain; }
.shop-dialog-scroll section > :first-child { margin-top: 0; }
.shop-dialog-scroll section > :last-child { margin-bottom: 0; }
.shop-qr-image { display: block; width: min(100%, 360px); height: auto; margin: 1rem auto; padding: .5rem; border: 2px solid #352616; background: #fff; }
.shop-dialog-scroll .shop-share-account-controls {
  position: static;
  left: auto;
  bottom: auto;
  z-index: auto;
  margin-top: 1rem;
}

.shop-dialog-scroll .shop-share-account-controls .authenticated-student-name {
  color: #352616;
  text-shadow: none;
}

.shop-catalog-panel { min-width: 0; }
.shop-daily-finds-note {
  margin: 0 0 .65rem;
  color: #65441f;
  font-size: .9rem;
  text-align: center;
}
.shop-catalog-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.shop-catalog-item {
  display: grid;
  min-width: 0;
  padding: .75rem;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .55rem;
  align-items: center;
  border: 2px solid rgba(112, 67, 33, .42);
  border-radius: 14px;
  background: rgba(255, 255, 255, .56);
}
.shop-catalog-item-emoji {
  grid-row: 1 / 3;
  font-size: 2rem;
  line-height: 1;
}
.shop-catalog-item-name,
.shop-catalog-item-price,
.shop-catalog-owned {
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-catalog-item-name { line-height: 1.1; }
.shop-catalog-item-price,
.shop-catalog-owned { font-size: .85rem; }
.shop-catalog-item-price { grid-column: 1 / -1; }
.shop-catalog-owned { grid-column: 1 / -1; font-weight: 800; }
.shop-catalog-daily-find {
  grid-column: 1 / -1;
  justify-self: start;
  padding: .12rem .42rem;
  border-radius: 999px;
  color: #fff8df;
  background: #6b3f1f;
  font-size: .72rem;
  font-weight: 900;
}
.shop-buy-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-column: 1 / -1;
}
.shop-shelf-status,
.shop-purchase-feedback { margin: .75rem 0 0; }
.shop-purchase-error { color: #9f1d1d; font-weight: 800; }

.shop-practice-definition { font-size: 1.1rem; line-height: 1.55; }
.shop-panel-sign { display: inline-block; padding: .35rem .75rem; border: 3px dashed #7f5429; transform: rotate(-2deg); font-weight: 950; background: #f4d35e; }
.shop-crown-history-note { font-size: .9rem; }
.crown-category-card small { grid-column: 1 / -1; font-size: .75rem; }

@media (max-width: 430px) {
  .shop-scene {
    display: block;
    min-height: calc(100dvh - 6.5rem);
    border-radius: var(--radius-xl);
  }
  .shop-viking-art { object-position: 50% 30%; }
  .shop-object-column {
    position: absolute;
    top: .65rem;
    bottom: .65rem;
    display: flex;
    width: 58px;
    flex-direction: column;
    justify-content: space-between;
    gap: .2rem;
  }
  .shop-object-column-left { left: .35rem; }
  .shop-object-column-right { right: .35rem; }
  .shop-scene-control { min-height: 44px; padding: .15rem; }
  .shop-control-emoji { font-size: 2rem; }
  .shop-dandelion-count { font-size: .95rem; }
  .practice-tool-grid { grid-template-columns: 1fr; }
  .crown-category-card { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  .practice-timer-row {
    gap: 0.7rem;
  }

  .practice-timer-row .btn {
    min-width: 8rem;
  }

  #practice-timer-display {
    font-size: 2.1rem;
  }

  .board-season-title {
    width: 100%;
    padding-inline: 0.75rem;
  }
}

/* BOARD: kindergarten cutout season title */
.board-season-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.12rem;
  margin: 0 auto 1rem;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

.board-season-title span:not(.letter-gap) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.9em;
  padding: 0.08em 0.16em;
  border: 2px solid rgba(55, 35, 20, 0.45);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 900;
  line-height: 1;
  color: #2f2419;
  background: #f4d35e;
  box-shadow: 2px 3px 0 rgba(60, 38, 20, 0.28);
}

.board-season-title span:nth-child(2n) {
  background: #ee964b;
  transform: rotate(3deg);
}

.board-season-title span:nth-child(3n) {
  background: #f95738;
  transform: rotate(-4deg);
}

.board-season-title span:nth-child(4n) {
  background: #74c0fc;
  transform: rotate(2deg);
}

.board-season-title span:nth-child(5n) {
  background: #90be6d;
  transform: rotate(-2deg);
}

.board-season-title .letter-gap {
  width: 0.7em;
}

@media (max-width: 640px) {
  .board-season-title {
    width: 100%;
    row-gap: 0.35rem;
    padding-inline: 0.35rem;
  }

  .board-season-title span:not(.letter-gap) {
    font-size: 2.15rem;
  }

  .board-season-title .letter-gap {
    flex-basis: 100%;
    width: 100%;
    height: 0;
  }
}
/* Phase 4C: BOOK final alignment and stereo button */

/* Clean, left-aligned practice checkbox list */
.practice-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  justify-items: stretch;
  gap: 0.65rem 1rem;
  width: 100%;
  text-align: left;
}

.practice-detail-grid label {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0;
  text-align: left;
  line-height: 1.25;
}

.p-book-work-field { container-type: inline-size; }
.practice-work-option > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@container (max-width: 30rem) {
  .p-book-page .practice-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

.practice-detail-grid input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  justify-self: start;
}

/* Metallic stereo-style timer control */
#practice-timer-toggle-btn {
  position: relative;
  min-width: 10rem;
  padding: 0.8rem 1.15rem;
  border: 2px solid #353b3f;
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      #f4f6f7 0%,
      #aeb5ba 18%,
      #737b80 52%,
      #cdd2d5 78%,
      #686f74 100%
    );
  color: #15191c;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 4px rgba(25, 29, 32, 0.45),
    0 4px 0 #3d4347,
    0 6px 9px rgba(24, 29, 32, 0.35);
}

#practice-timer-toggle-btn:hover {
  filter: brightness(1.08);
}

#practice-timer-toggle-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(20, 24, 27, 0.55),
    0 1px 0 #3d4347;
}

/* Stop state: retain the metal face with a red indicator */
#practice-timer-toggle-btn.btn-red {
  border-color: #49211e;
  background:
    radial-gradient(circle at 88% 50%, #ffb1a8 0 4%, #d33427 5% 9%, transparent 10%),
    linear-gradient(
      180deg,
      #f4f6f7 0%,
      #aeb5ba 18%,
      #737b80 52%,
      #cdd2d5 78%,
      #686f74 100%
    );
  color: #42110d;
}

@media (max-width: 760px) {
  .practice-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .practice-detail-grid {
    grid-template-columns: 1fr;
  }
}
/* Phase 4C: landing-page hero background */
.welcome-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 2rem);
  background-image:
    linear-gradient(
      90deg,
      rgba(42, 27, 17, 0.82) 0%,
      rgba(42, 27, 17, 0.56) 42%,
      rgba(42, 27, 17, 0.08) 72%
    ),
    url("/static/img/woodchuck-hero.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.welcome-hero-content {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  padding: 1rem;
  border-radius: 14px;
  background: rgba(255, 247, 220, 0.83);
  box-shadow: 0 6px 18px rgba(38, 24, 14, 0.28);
  backdrop-filter: blur(2px);
}

.welcome-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.welcome-button-row .btn {
  width: 100%;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 540px;
    align-items: flex-end;
    background-position: center top;
  }

  .welcome-hero-content {
    width: 100%;
  }

  .welcome-button-row {
    grid-template-columns: 1fr;
  }
}
/* Phase 4C: landing buttons directly over artwork */
.welcome-hero {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);

  background-image: url("/static/img/woodchuck-hero.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Remove the pale table so the artwork sits directly behind the buttons. */
.welcome-hero-content {
  width: min(100%, 34rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Keep the buttons readable against the artwork. */
.welcome-button-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.welcome-button-row .btn {
  width: 100%;
  min-height: 3.35rem;
  box-shadow:
    0 5px 10px rgba(20, 13, 8, 0.4),
    inset 0 1px rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 540px;
    padding: 1.25rem;
    background-position: center top;
  }
}
/* Phase 4C: landing artwork framing and bottom buttons */
.welcome-hero {
  min-height: 650px;
  align-items: flex-end;
  justify-content: center;
  padding: 1.25rem;

  /* Show the entire illustration instead of cropping it with cover. */
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #21170f;
}

.welcome-hero-content {
  width: min(100%, 34rem);
  margin-top: auto;
  padding: 0 0 0.5rem;
}

.welcome-button-row {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 620px;
    align-items: flex-end;
    padding: 1rem;
    background-size: contain;
    background-position: center top;
  }

  .welcome-hero-content {
    padding-bottom: 0.25rem;
  }
}

/* Phase 4C: rounded landing artwork */
.welcome-hero {
  overflow: hidden;
  border: 3px solid rgba(91, 55, 28, 0.9);
  border-radius: 28px;
  box-shadow:
    0 8px 18px rgba(35, 20, 11, 0.35),
    inset 0 0 0 2px rgba(255, 240, 205, 0.18);
}

@media (max-width: 640px) {
  .welcome-hero {
    border-radius: 22px;
  }
}
/* Phase 4C: directly rounded landing image */
.welcome-hero {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background-image: none !important;
  background-color: #21170f;
}

.welcome-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  border-radius: 25px;
  clip-path: inset(0 round 25px);
}

.welcome-hero-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

@media (max-width: 640px) {
  .welcome-hero {
    border-radius: 22px !important;
  }

  .welcome-hero-art {
    border-radius: 19px;
    clip-path: inset(0 round 19px);
  }
}
/* Phase 4C: taller landing art and left button stack */
.welcome-hero {
  min-height: 760px;
  height: 760px;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.5rem;
}

.welcome-hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.welcome-hero-content {
  width: 100%;
  margin-top: auto;
  margin-right: auto;
  margin-left: 0;
}

.welcome-button-row {
  width: min(50%, 19rem);
  margin-right: auto;
  margin-left: 0;
}

.welcome-button-row .btn {
  width: 100%;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 700px;
    height: 700px;
    padding: 1rem;
  }

  .welcome-button-row {
    width: 50%;
    margin-right: auto;
    margin-left: 0;
  }

  .welcome-button-row .btn {
    min-height: 3rem;
    padding-inline: 0.55rem;
    font-size: 0.9rem;
  }
}
/* Phase 4C: narrow right-aligned landing buttons */
.welcome-hero-content {
  width: 100%;
  margin-top: auto;
}

.welcome-button-row {
  width: 25%;
  margin-right: 0;
  margin-left: auto;
}

.welcome-button-row .btn {
  width: 100%;
  min-width: 0;
  padding-inline: 0.45rem;
  font-size: 0.88rem;
  white-space: normal;
}

@media (max-width: 640px) {
  .welcome-button-row {
    width: 25%;
    margin-right: 0;
    margin-left: auto;
  }

  .welcome-button-row .btn {
    padding-inline: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.15;
  }
}
/* Phase 4C: final landing framing adjustment */
.welcome-hero {
  min-height: 790px;
  height: 790px;
}

/*
 * Show slightly more of the lower artwork.
 * Extend the image beyond the right edge to hide its white border.
 */
.welcome-hero-art {
  inset: 0 auto 0 0;
  width: calc(100% + 14px);
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 48% 18%;
}

/* Move the narrow button stack slightly upward and inward. */
.welcome-button-row {
  margin-right: 2rem;
  margin-bottom: 2.25rem;
  margin-left: auto;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 730px;
    height: 730px;
  }

  .welcome-hero-art {
    width: calc(100% + 10px);
    object-position: 48% 16%;
  }

  .welcome-button-row {
    margin-right: 0.8rem;
    margin-bottom: 1.5rem;
  }
}
/* Phase 4C: landing trim midpoint */
.welcome-hero {
  min-height: 775px;
  height: 775px;
}

.welcome-button-row {
  margin-bottom: 3rem;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 715px;
    height: 715px;
  }

  .welcome-button-row {
    margin-bottom: 2.1rem;
  }
}
/* Phase 4C: slightly higher landing bottom trim */
.welcome-hero {
  min-height: 765px;
  height: 765px;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 705px;
    height: 705px;
  }
}
/* Phase 4C: final landing edge trim */
.welcome-hero {
  min-height: 755px;
  height: 755px;
}

/* Extend farther past the container to crop more from the right edge. */
.welcome-hero-art {
  width: calc(100% + 22px);
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 695px;
    height: 695px;
  }

  .welcome-hero-art {
    width: calc(100% + 16px);
  }
}
/* Phase 4C: landing edge trim final nudge */
.welcome-hero {
  min-height: 745px;
  height: 745px;
}

.welcome-hero-art {
  width: calc(100% + 30px);
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 685px;
    height: 685px;
  }

  .welcome-hero-art {
    width: calc(100% + 22px);
  }
}

/* Phase 4C: taller landing window without image shift */
.welcome-hero {
  min-height: 775px;
  height: 775px;
}

@media (max-width: 640px) {
  .welcome-hero {
    min-height: 715px;
    height: 715px;
  }
}
/* Phase 4C: tiny landing image downward nudge */
.welcome-hero-art {
  object-position: 48% 16%;
}

@media (max-width: 640px) {
  .welcome-hero-art {
    object-position: 48% 14%;
  }
}

/* Phase 4C: corrected tiny landing image nudge */

/* Bonus Challenge: metallic-gold interior over the superhero frame. */
.board-practice-section.bonus-challenge-section > .section-head,
.board-practice-section.bonus-challenge-section > form,
.board-practice-section.bonus-challenge-section > article,
.board-practice-section.bonus-challenge-section > .button-row {
  color: #241708;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255, 250, 202, 0.72) 28%, transparent 39%),
    linear-gradient(145deg, #8f5b09 0%, #e2ae32 24%, #fff0a0 48%, #bd7c0c 72%, #f1c64d 100%);
  border: 2px solid #6f4305;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 185, 0.85),
    inset 0 -3px 0 rgba(91, 49, 2, 0.3),
    0 5px 10px rgba(35, 12, 29, 0.32);
}
.welcome-hero-art {
  object-position: 48% 14%;
}

@media (max-width: 640px) {
  .welcome-hero-art {
    object-position: 48% 12%;
  }
}

.sound-effects-controls {
  position: fixed;
  z-index: 1200;
  top: max(0.65rem, env(safe-area-inset-top));
  right: 0.7rem;
}

.sound-effects-button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid #6b3f1f;
  border-radius: 50%;
  background: #fff5cf;
  box-shadow: 0 3px 8px rgba(35, 12, 29, 0.3);
  font-size: 1.25rem;
  cursor: pointer;
}

.sound-effects-panel {
  position: absolute;
  top: 3.15rem;
  right: 0;
  width: min(14rem, calc(100vw - 1.4rem));
  padding: 0.75rem;
  border: 2px solid #6b3f1f;
  border-radius: 0.75rem;
  background: #fffaf0;
  box-shadow: 0 5px 16px rgba(35, 12, 29, 0.35);
  color: #2b1a10;
}

.sound-effects-panel label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  font-weight: 700;
}

.sound-effects-panel input[type="range"] {
  width: 100%;
  min-height: 2.25rem;
  accent-color: #6b3f1f;
}

.sound-effects-toggle input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #34733b;
}

.sound-effects-button:focus-visible,
.sound-effects-panel input:focus-visible {
  outline: 3px solid #1677c8;
  outline-offset: 3px;
}

@media (max-width: 420px) {
  .sound-effects-controls { right: 0.45rem; }
  .sound-effects-button { width: 2.6rem; height: 2.6rem; }
}

/* Main pages share a predictable lower launcher above fixed navigation. */
.main-app-page .sound-effects-controls {
  top: auto;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: calc(4.75rem + env(safe-area-inset-bottom));
  z-index: 6;
}

.main-app-page .sound-effects-button {
  width: 2.75rem;
  height: 2.75rem;
}

.main-app-page .sound-effects-panel {
  top: auto;
  right: 0;
  bottom: 3.15rem;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}

.woodshed-object-column-right > .shed-sound-effects-controls {
  position: relative;
  inset: auto;
  z-index: 4;
}

.woodshed-object-column-right > .shed-sound-effects-controls .sound-effects-button {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 4px 4px rgba(35, 24, 16, 0.8));
  font-size: clamp(2.2rem, 5vw, 3.1rem);
}

.woodshed-object-column-right > .shed-sound-effects-controls .sound-effects-panel {
  top: auto;
  right: 0;
  bottom: 3.15rem;
  max-height: min(18rem, calc(100vh - 9rem));
  overflow-y: auto;
}

/* Phase 8 main-page polish */
.welcome-enter-button {
  color: #fff;
  background: linear-gradient(145deg, #4a83ad, #235477);
  border-color: #173e5a;
}

.shed-readout-name {
  position: relative;
  min-width: 10rem;
  padding: calc(0.65rem + 3px) calc(1rem + 3px);
  border: 0;
  border-radius: 0;
  color: #fff8e8;
  background: transparent;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  box-shadow: none;
  text-shadow: 0 2px 3px rgba(20, 12, 8, 0.95), 0 0 7px rgba(20, 12, 8, 0.8);
}
.shed-readout-name::before,
.shed-readout-name::after { content: none; }
.shed-readout-level {
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
  color: #2d210f;
  background: radial-gradient(circle at 35% 28%, #fff4ad, #f2bd3f 58%, #b66b18) !important;
  border: 3px ridge #8b5c1d !important;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 248, 185, 0.65), 0 5px 8px rgba(35, 24, 16, 0.55) !important;
  font-weight: 1000;
}

.board-page { position: relative; }
.board-plunge-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #76502d;
  border-radius: 50%;
  background: #f5d890;
  text-decoration: none;
  font-size: 1.5rem;
  z-index: 2;
}
.contest-points-section > h4,
.contest-camp-points-section > h4,
.contest-instrument-section > h4,
.team-competition > h3 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); }
.contest-description-warm { color: #5d3c16; background: #fff0b0; border-color: #c3943d; }
.contest-description-plain { color: #38260f; background: transparent; border-color: transparent; }
.p-book-team-summary { align-items: start; }
.p-book-team-summary #p-book-current-team,
.p-book-team-summary #p-book-current-team > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.p-book-team-summary .btn { justify-self: start; }
.team-competition { margin-top: 1rem; padding-top: 1rem; border-top: 3px solid #9a6b28; }
.team-leaderboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.8rem; }
.team-leaderboard-card {
  min-width: 0;
  padding: 0.75rem;
  border: 2px solid #aa792c;
  border-radius: 12px;
  color: #38260f;
  background: #fff0b5;
}
.team-leaderboard-card h4,
.team-leaderboard-card h5,
.team-leaderboard-card .contest-ranked-row,
.team-leaderboard-card .contest-ranked-subject,
.team-leaderboard-card .contest-ranked-score,
.team-leaderboard-card .contest-empty-state { color: #38260f; }
.team-ranked-subject { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
.board-member-since { margin: 0.15rem 0 0.55rem; color: #4d3319; }

.medal-board,
.hall-of-champions {
  border: 7px ridge #77736b;
  background: linear-gradient(145deg, #aba69b, #716e67 52%, #aaa59a);
  box-shadow: inset 0 0 0 3px rgba(45,42,37,.38), 0 8px 16px rgba(40,29,19,.3);
}
.medal-board > h3,
.hall-of-champions > h3 {
  padding: 0.55rem;
  border: 3px ridge #9b7023;
  border-radius: 5px;
  color: #2e210c;
  background: linear-gradient(145deg, #f0d577, #ad7d27);
  text-align: center;
}
.medal-row,
.champions-row { border: 1px solid #7e673f; background: #f7e4ae; }

.bonus-challenge-section {
  position: relative;
  overflow: hidden;
  border: 5px ridge #a8751f;
  border-radius: 14px;
  background: linear-gradient(145deg, #f5d76e, #bb8526);
}

.bonus-challenge-screw {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  border: 2px solid #46515a;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, #4b555c 44% 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #4b555c 44% 56%, transparent 57%),
    radial-gradient(circle at 34% 28%, #fff 0 13%, #d9dfe1 26%, #858f95 52%, #c8ced0 70%, #59636a 100%);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(53, 37, 16, 0.65);
  pointer-events: none;
}

.bonus-challenge-screw-top-left { top: 0.7rem; left: 0.7rem; }
.bonus-challenge-screw-top-right { top: 0.7rem; right: 0.7rem; }
.bonus-challenge-screw-bottom-left { bottom: 0.7rem; left: 0.7rem; }
.bonus-challenge-screw-bottom-right { right: 0.7rem; bottom: 0.7rem; }
.bonus-challenge-section > * { margin-block: 0; padding: 1rem; }
.bonus-challenge-section > * + * { border-top: 2px solid rgba(113,73,16,.45); }

.bonus-challenge-section > .bonus-challenge-screw {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-top: 2px solid #46515a;
}

@media (max-width: 430px) {
  .mum-artwork { gap: 0.45rem; }
  .mum-artwork img { height: 9rem; }
  .ww-character-reaction {
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    gap: 0.45rem;
  }
  .ww-character-reaction img { width: 100%; height: 100%; max-height: 100%; }
  .ww-character-reaction-speech {
    width: 100%;
    padding: 0.65rem 3rem 0.65rem 0.75rem;
    font-size: 1rem;
  }
}

.practice-room-emoji-control {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 64px;
  border: 2px solid #755029;
  border-radius: 14px;
  background: #ffe8a2;
  font-size: 2rem;
  text-decoration: none;
}
.practice-room-emoji-control:disabled { opacity: 0.58; cursor: not-allowed; }

.practice-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.7rem;
}

.practice-room-door {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 14rem;
  padding: 0.65rem 0.55rem 1rem;
  grid-template-rows: 2rem 3.4rem 2.25rem;
  align-content: start;
  justify-items: center;
  gap: 0.55rem;
  border: 4px solid #5b371f;
  border-radius: 0.35rem 0.35rem 0.1rem 0.1rem;
  color: #fff5d5;
  background: #b77a4d;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 164, 0.32), 0 5px 0 #3f281a, 0 8px 12px rgba(42, 25, 14, 0.24);
  text-align: center;
}

.practice-room-door-tag {
  position: static;
  min-width: 2.4rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #3f281a;
  border-radius: 0.3rem;
  color: #3b2618;
  background: #f7dfa1;
  box-shadow: 0 1px 2px rgba(38, 21, 11, 0.32);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-shadow: none;
}

.practice-room-door-window {
  display: grid;
  width: min(4.6rem, calc(100% - 3.1rem));
  min-height: 3.15rem;
  place-items: center;
  border: 3px solid #4b2d1c;
  border-radius: 0.25rem;
  background: linear-gradient(180deg, #d9f4f5, #8ebbc2);
  box-shadow: 0 1px 2px rgba(38, 21, 11, 0.38);
  font-size: 1.65rem;
  line-height: 1;
}

.practice-room-door::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  top: 5.45rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid #59400d;
  border-radius: 50%;
  background: #f4d35e;
  box-shadow: 0 1px 2px rgba(30, 18, 8, 0.65);
}

.practice-room-door strong {
  display: grid;
  box-sizing: border-box;
  width: min(100%, 8rem);
  min-height: 2.25rem;
  place-items: center;
  margin: 0;
  padding: 0.25rem 0.42rem;
  border: 1px solid #5a3821;
  border-radius: 0.2rem;
  color: #3a2516;
  background: #ead29a;
  box-shadow: 0 1px 2px rgba(38, 21, 11, 0.3);
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  line-height: 1.15;
  text-shadow: none;
}

.practice-room-door:hover:not(:disabled),
.practice-room-door:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.pristine-practice {
  width: min(100%, 42rem);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem);
  border: 4px solid #5b371f;
  border-radius: var(--radius-xl);
  color: #2f2117;
  background: rgba(255, 246, 218, 0.96);
  box-shadow: 0 10px 24px rgba(42, 25, 14, 0.28);
}
.pristine-practice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.pristine-practice-header h1,
.pristine-practice-header p { margin: 0; }
.pristine-privacy { margin: 1rem 0; }
.pristine-practice-console {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: clamp(1rem, 4vw, 1.6rem);
  border: 3px solid #755029;
  border-radius: 1rem;
  background: #fffdf4;
  text-align: center;
}
.pristine-microphone,
.pristine-feedback { min-height: 1.4em; margin: 0; }
.pristine-timer {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(2.4rem, 12vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pristine-status {
  min-width: min(100%, 24rem);
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  color: #fff;
  background: #6d552f;
}
.pristine-practice[data-pristine-state="playing"] .pristine-status { background: #267045; }
.pristine-practice[data-pristine-state="paused"] .pristine-status,
.pristine-practice[data-pristine-state="safety-paused"] .pristine-status { background: #9a552d; }
.pristine-practice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.pristine-practice-actions .btn { min-height: 2.8rem; }

/* Arcade Room and short-session games */
.arcade-room,
.arcade-game,
.wheel-game,
.scale-keyboard-game,
.thirds-game,
.nines-game,
.interval-game {
  width: min(100%, 72rem);
  min-width: 0;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 5px solid #5b371f;
  border-radius: var(--radius-xl);
  color: #fff7db;
  background:
    radial-gradient(circle at 50% 0, rgba(62, 190, 211, 0.18), transparent 38%),
    linear-gradient(180deg, #24243b, #171627 58%, #2d1b24);
  box-shadow: inset 0 0 0 2px rgba(244, 211, 94, 0.3), 0 10px 24px rgba(28, 17, 12, 0.35);
}

.arcade-room-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.arcade-room-header h1,
.arcade-room-header p { margin-block: 0 0.35rem; }
.arcade-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}
.arcade-soundtrack-toggle {
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 2px solid #f4d35e;
  border-radius: 50%;
  color: #fff7db;
  background: #24243b;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  font-size: 1.35rem;
}
.arcade-soundtrack-toggle:hover,
.arcade-soundtrack-toggle:focus-visible { filter: brightness(1.16); }
.arcade-kicker {
  color: #6ee7f2;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arcade-cabinet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.arcade-cabinet {
  --arcade-cabinet-frame-start: #5d6a7b;
  --arcade-cabinet-frame-middle: #293140;
  --arcade-cabinet-frame-end: #151923;
  --arcade-cabinet-border: #10111a;
  position: relative;
  min-width: 0;
  padding: 0.8rem 0.65rem 0.7rem;
  border: 5px solid var(--arcade-cabinet-border);
  border-radius: 1.2rem 1.2rem 0.45rem 0.45rem;
  background: linear-gradient(
    145deg,
    var(--arcade-cabinet-frame-start),
    var(--arcade-cabinet-frame-middle) 58%,
    var(--arcade-cabinet-frame-end)
  );
  box-shadow: inset 0 0 0 2px rgba(216, 240, 255, 0.35), 0 8px 0 #0d0d14, 0 13px 18px rgba(0, 0, 0, 0.42);
}

.arcade-cabinet-plunge {
  --arcade-cabinet-frame-start: #a46a38;
  --arcade-cabinet-frame-middle: #69401f;
  --arcade-cabinet-frame-end: #392112;
  --arcade-cabinet-border: #4b2c16;
}
.arcade-cabinet-blue {
  --arcade-cabinet-frame-start: #4298e4;
  --arcade-cabinet-frame-middle: #1760ad;
  --arcade-cabinet-frame-end: #0b315f;
  --arcade-cabinet-border: #0a4383;
}
.arcade-cabinet-radio {
  --arcade-cabinet-frame-start: #eef2f5;
  --arcade-cabinet-frame-middle: #aab1b8;
  --arcade-cabinet-frame-end: #555e68;
  --arcade-cabinet-border: #c4ccd2;
}
.arcade-cabinet-wheel {
  --arcade-cabinet-frame-start: #55a86d;
  --arcade-cabinet-frame-middle: #287542;
  --arcade-cabinet-frame-end: #123d24;
  --arcade-cabinet-border: #1f6036;
}
.arcade-cabinet-scale {
  --arcade-cabinet-frame-start: #fffdf4;
  --arcade-cabinet-frame-middle: #e8e5db;
  --arcade-cabinet-frame-end: #a8adb3;
  --arcade-cabinet-border: #f8f5eb;
}
.arcade-cabinet-thirds {
  --arcade-cabinet-frame-start: #e55858;
  --arcade-cabinet-frame-middle: #a82e38;
  --arcade-cabinet-frame-end: #5d1720;
  --arcade-cabinet-border: #8d202b;
}
.arcade-cabinet-nines {
  --arcade-cabinet-frame-start: #a876d4;
  --arcade-cabinet-frame-middle: #663b91;
  --arcade-cabinet-frame-end: #351d50;
  --arcade-cabinet-border: #7447a0;
}
.arcade-cabinet-intervals {
  --arcade-cabinet-frame-start: #f0a24a;
  --arcade-cabinet-frame-middle: #a95a24;
  --arcade-cabinet-frame-end: #573016;
  --arcade-cabinet-border: #ba6829;
}
.arcade-cabinet-history {
  --arcade-cabinet-frame-start: #3f9c98;
  --arcade-cabinet-frame-middle: #23645f;
  --arcade-cabinet-frame-end: #123936;
  --arcade-cabinet-border: #2b7771;
}

.arcade-cabinet-link {
  display: grid;
  min-height: 17rem;
  padding: 0.65rem;
  place-items: center;
  align-content: start;
  grid-template-rows: auto minmax(6rem, 1fr) auto auto auto;
  gap: 0.45rem;
  border: 3px solid #090910;
  border-radius: 0.75rem 0.75rem 0.4rem 0.4rem;
  color: #fff;
  background: linear-gradient(180deg, #2a2d45, #131422);
  text-align: center;
  text-decoration: none;
}

.arcade-cabinet-link::after {
  content: "";
}

.arcade-cabinet-link:hover,
.arcade-cabinet-link:focus-visible { outline: 4px solid #6ee7f2; outline-offset: -4px; }
.arcade-cabinet-screen {
  display: grid;
  width: min(100%, 9rem);
  aspect-ratio: 1.1 / 1;
  place-items: center;
  border: 4px solid #090910;
  border-radius: 0.6rem;
  background: #071724;
  box-shadow: inset 0 0 18px rgba(68, 214, 238, 0.3), 0 2px 0 rgba(255, 255, 255, 0.12);
  font-size: 3.2rem;
}
.arcade-cabinet-marquee {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border: 2px solid rgba(255, 244, 210, 0.72);
  border-radius: 0.45rem;
  color: #fff9df;
  background: linear-gradient(180deg, #a54943, #61262d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 rgba(0, 0, 0, 0.38);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.arcade-cabinet-copy { min-height: 2.3em; font-size: 0.85rem; }
.arcade-cabinet-economy {
  color: #f4d35e;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}
.arcade-cabinet-control-panel {
  display: flex;
  width: min(100%, 12rem);
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .45rem;
  border: 2px solid #090910;
  border-bottom-width: 5px;
  border-radius: .3rem .3rem .7rem .7rem;
  background: linear-gradient(#657181, #303744);
  pointer-events: none;
}
.arcade-joystick {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  border-bottom: .4rem solid #111;
  border-radius: 30%;
  background: linear-gradient(90deg, transparent 40%, #ccc 40% 60%, transparent 60%);
}
.arcade-joystick::before {
  content: "";
  position: absolute;
  top: -.2rem;
  left: .3rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffaaa1, #d53030 55%, #761717);
  box-shadow: 0 2px 0 #17171c;
}
.arcade-action-button {
  flex: 0 0 .9rem;
  height: .9rem;
  border: 2px solid #191923;
  border-radius: 50%;
  background: #f4d35e;
  box-shadow: 0 3px 0 #14141d, inset 0 2px 0 #fff7;
}
.arcade-action-button + .arcade-action-button { background: #49c7d4; }
.arcade-token-slot {
  display: grid;
  justify-items: center;
  padding: .2rem;
  border: 1px solid #abb4bf;
  border-radius: .2rem;
  color: #ffe48b;
  background: #252b33;
  font-size: .55rem;
  line-height: 1.2;
}
.arcade-token-slot span { font-size: 1rem; }
.arcade-token-slot::after {
  content: "";
  width: 1.1rem;
  height: .2rem;
  margin-top: .15rem;
  background: #050609;
  box-shadow: 0 1px 0 #8994a1;
}
.arcade-cabinet-best { font-size: 0.82rem; font-weight: 900; color: #f4d35e; }
.arcade-cabinet-best output { color: #fff; font: inherit; }
.arcade-cabinet-plunge .arcade-cabinet-screen { background: radial-gradient(circle at 50% 72%, #442815 0 20%, transparent 21%), linear-gradient(#7c4b28, #301d15); }
.arcade-cabinet-blue .arcade-cabinet-screen { background: radial-gradient(circle at 25% 24%, #ddfbff 0 5%, transparent 6%), radial-gradient(circle at 70% 38%, #6ee7f2 0 7%, transparent 8%), linear-gradient(#2588df 0 72%, #163f75 73%); }
.arcade-cabinet-radio .arcade-cabinet-screen { background: repeating-linear-gradient(90deg, #0c0c11 0 10%, #383840 11% 12%), radial-gradient(circle at center, #f4d35e 0 15%, #352e1a 16% 30%, transparent 31%); }
.arcade-cabinet-wheel .arcade-cabinet-screen {
  border-radius: 50%;
  background: conic-gradient(
    #b43d53 0 12.5%, #f4d35e 12.5% 25%, #3c9c77 25% 37.5%,
    #4a77c7 37.5% 50%, #a04ab2 50% 62.5%, #e67838 62.5% 75%,
    #2f8c99 75% 87.5%, #d35f8d 87.5% 100%
  );
}
.arcade-cabinet-scale .arcade-cabinet-screen {
  position: relative;
  overflow: hidden;
  padding: 0.25rem;
  background: linear-gradient(150deg, #f7f0d8, #b9c9df);
}
.keyboard-tie-person {
  position: relative;
  display: block;
  width: 5.2rem;
  height: 5.3rem;
}
.keyboard-tie-hair,
.keyboard-tie-head,
.keyboard-tie-shirt,
.keyboard-necktie { position: absolute; display: block; }
.keyboard-tie-hair {
  top: 0.1rem;
  left: 1.25rem;
  z-index: 2;
  width: 2.8rem;
  height: 1rem;
  border-radius: 70% 45% 25% 20%;
  background: #56341e;
  transform: rotate(-7deg);
}
.keyboard-tie-head {
  top: 0.45rem;
  left: 1.45rem;
  z-index: 1;
  width: 2.45rem;
  height: 2.25rem;
  border: 2px solid #724729;
  border-radius: 48% 48% 44% 44%;
  background: #f0b784;
}
.keyboard-tie-head b {
  position: absolute;
  top: 0.75rem;
  width: 0.28rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #18212d;
}
.keyboard-tie-head b:first-child { left: 0.48rem; }
.keyboard-tie-head b:nth-child(2) { right: 0.48rem; }
.keyboard-tie-head em {
  position: absolute;
  left: 0.72rem;
  bottom: 0.35rem;
  width: 0.8rem;
  height: 0.35rem;
  border-bottom: 3px solid #8c3d3d;
  border-radius: 50%;
  transform: rotate(8deg);
}
.keyboard-tie-shirt {
  left: 0.55rem;
  bottom: 0;
  width: 4.2rem;
  height: 2.9rem;
  border-radius: 48% 48% 0 0;
  background: linear-gradient(90deg, #243e75 0 40%, #f5f0df 41% 59%, #243e75 60%);
}
.keyboard-necktie {
  left: 2.15rem;
  bottom: 0.1rem;
  z-index: 3;
  width: 1rem;
  height: 2.85rem;
  clip-path: polygon(25% 0, 75% 0, 90% 80%, 50% 100%, 10% 80%);
  background: repeating-linear-gradient(180deg, #fff 0 0.43rem, #222 0.44rem 0.51rem);
  box-shadow: inset 0 0 0 1px #171923;
}
.keyboard-necktie b {
  position: absolute;
  left: 0.45rem;
  width: 0.34rem;
  height: 0.28rem;
  background: #171923;
}
.keyboard-necktie b:nth-child(1) { top: 0.24rem; }
.keyboard-necktie b:nth-child(2) { top: 0.76rem; }
.keyboard-necktie b:nth-child(3) { top: 1.28rem; }
.keyboard-necktie b:nth-child(4) { top: 1.8rem; }
.arcade-thirds-screen {
  grid-template-columns: 1fr auto 1fr;
  gap: 0.3rem;
  color: #fff;
  background: linear-gradient(145deg, #40151a, #17090d);
}
.arcade-nines-screen {
  grid-template-columns: 1fr auto 1fr;
  gap: 0.3rem;
  color: #fff;
  background: linear-gradient(145deg, #301741, #110819);
}
.arcade-nines-screen i,
.arcade-nines-screen b { font-style: normal; }
.arcade-nines-screen i { font-size: 2.2rem; font-weight: 950; }
.arcade-nines-screen b {
  padding: 0.3rem;
  border: 2px solid #f4d35e;
  border-radius: 50%;
  color: #f4d35e;
  font-size: 0.85rem;
}
.arcade-interval-screen {
  grid-template-columns: 1fr auto 1fr;
  gap: 0.3rem;
  color: #fff;
  background: linear-gradient(145deg, #35200f, #100b07);
}
.arcade-interval-screen i,
.arcade-interval-screen b { font-style: normal; }
.arcade-interval-screen i { font-size: 2rem; font-weight: 950; }
.arcade-interval-screen b { color: #f4d35e; font-size: 1.7rem; }
.arcade-history-screen {
  grid-template-columns: 1fr auto 1fr;
  gap: 0.35rem;
  color: #fff9df;
  background: linear-gradient(145deg, #153c3b, #071918);
}
.arcade-history-screen i,
.arcade-history-screen b { font-style: normal; }
.arcade-history-screen i { font-size: 2.25rem; font-weight: 950; }
.arcade-history-screen b { color: #f4d35e; font-size: 1.4rem; }
.arcade-thirds-screen i,
.arcade-thirds-screen b { font-style: normal; }
.arcade-thirds-screen i { font-size: 2.2rem; font-weight: 950; }
.arcade-thirds-screen b {
  padding: 0.3rem;
  border: 2px solid #f4d35e;
  border-radius: 50%;
  color: #f4d35e;
  font-size: 0.85rem;
}
.arcade-wheel-screen i {
  display: grid;
  width: 42%;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid #fff7db;
  border-radius: 50%;
  color: #fff7db;
  background: #24243b;
  font-size: 1.7rem;
  font-style: normal;
}
.arcade-cabinet:hover { transform: translateY(-2px); }

.arcade-leaderboard,
.arcade-game-leaderboard {
  margin-top: 0.8rem;
  padding: 0.7rem;
  border: 1px solid rgba(110, 231, 242, 0.45);
  border-radius: 0.55rem;
  background: rgba(5, 12, 20, 0.72);
}
.arcade-leaderboard h2,
.arcade-game-leaderboard h2 { margin: 0 0 0.45rem; font-size: 1rem; }
.arcade-leaderboard ol,
.arcade-game-leaderboard ol { margin: 0; padding-left: 1.5rem; }
.arcade-leaderboard li,
.arcade-game-leaderboard li { margin: 0.25rem 0; overflow-wrap: anywhere; }
.arcade-leaderboard .is-current-user,
.arcade-game-leaderboard .is-current-user { color: #f4d35e; font-weight: 900; }
.arcade-game-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.arcade-economy-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(244, 211, 94, 0.55);
  border-radius: 0.55rem;
  color: #f4d35e;
  background: rgba(5, 12, 20, 0.64);
  font-size: 0.88rem;
  font-weight: 900;
}
.arcade-economy-message { min-height: 1.35em; margin: 0 0 0.6rem; color: #f4d35e; font-weight: 850; }
.arcade-game-status p {
  margin: 0;
  padding: 0.65rem;
  border-radius: 0.6rem;
  background: rgba(5, 12, 20, 0.72);
  text-align: center;
}

.blue-game-field,
.radio-game-field {
  position: relative;
  overflow: hidden;
  border: 4px solid #10111d;
  border-radius: 0.8rem;
  background: linear-gradient(155deg, #d8f2ff, #8ecff0 50%, #4c8bc5);
}
.blue-game-field {
  min-height: 0;
  background: #2467a3;
}
.blue-game-field.is-playing,
.blue-game-field.is-playing * { touch-action: none; }
.blue-game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  background: #5aa9df;
}
.blue-game-touch-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(3.25rem, 5.5rem));
  justify-content: center;
  gap: clamp(0.6rem, 3vw, 1.2rem);
  padding: 0.75rem;
  border-top: 4px solid #10111d;
  background: #16263e;
}
.blue-game-touch-controls button {
  min-width: 3.25rem;
  min-height: 3.25rem;
  border: 3px solid #dff7ff;
  border-radius: 50%;
  color: #fff;
  background: #075ed1;
  box-shadow: 0 4px 0 #073b83;
  font-size: 1.4rem;
  font-weight: 950;
  user-select: none;
  -webkit-user-select: none;
}
.blue-game-touch-controls button:disabled { opacity: 0.45; }

.radio-game-field {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 214, 102, 0.22);
  border-radius: 20px;
  color: #f8f2df;
  background: linear-gradient(180deg, #070707, #111111 52%, #050505);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 28px rgba(0, 0, 0, 0.82),
    0 12px 30px rgba(0, 0, 0, 0.36);
}
.radio-game-track {
  position: relative;
  height: 64px;
  overflow: hidden;
  border: 1px solid rgba(248, 242, 223, 0.2);
  border-radius: 999px;
  background: #191919;
}
.radio-game-target {
  position: absolute;
  inset-block: 0;
  left: 42%;
  width: 16%;
  background: rgba(255, 210, 94, 0.28);
  box-shadow: 0 0 24px rgba(255, 210, 94, 0.26);
}
.radio-game-needle {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 8px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #ffd25e;
  box-shadow: 0 0 18px rgba(255, 210, 94, 0.65);
}
.arcade-game-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.arcade-game-actions p { margin: 0; }
.arcade-game[data-arcade-game="radio-tuner"] .arcade-game-actions {
  justify-content: center;
}
.arcade-game[data-arcade-game="radio-tuner"] .arcade-game-actions p {
  flex-basis: 100%;
  min-height: 1.4em;
  color: #cfc2e9;
  font-weight: 800;
  text-align: center;
}
.arcade-game[data-arcade-game="radio-tuner"] #arcade-game-start,
#radio-game-tap {
  width: 5.75rem;
  min-width: 5.75rem;
  height: 5.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: #111;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(214, 216, 218, 0.96) 24%, rgba(132, 136, 142, 0.96) 58%, rgba(54, 57, 62, 0.98) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -5px 9px rgba(0, 0, 0, 0.38),
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 12px 22px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}
.arcade-game[data-arcade-game="radio-tuner"] #arcade-game-start:active:not(:disabled),
#radio-game-tap:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 -2px 4px rgba(255, 255, 255, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 6px 12px rgba(0, 0, 0, 0.32);
}
#radio-game-tap:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.45);
  transform: none;
}

/* Wheel of Woodchuck */
.wheel-active-area {
  display: grid;
  grid-template-columns: minmax(14rem, 0.9fr) minmax(16rem, 1.1fr);
  grid-template-areas:
    "wheel summary"
    "wheel controls"
    "letters letters";
  gap: 0.7rem 0.9rem;
  padding: 0.8rem;
  border: 3px solid #10111d;
  border-radius: 0.85rem;
  color: #fff7db;
  background: linear-gradient(155deg, #28324c, #17182a 62%, #35203b);
}
.wheel-game-summary { grid-area: summary; min-width: 0; }
.wheel-game-summary h2 {
  min-height: 1.35em;
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  text-align: center;
}
.wheel-visual {
  grid-area: wheel;
  display: grid;
  place-items: center;
  min-width: 0;
}
.wheel-control-panel {
  grid-area: controls;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.wheel-action-stack {
  display: grid;
  width: min(100%, 14rem);
  gap: 0.45rem;
}
.wheel-action-stack .btn { width: 100%; }
.wheel-control-panel #wheel-spin-result,
.wheel-control-panel #wheel-message {
  min-height: 1.35em;
  margin: 0;
  font-weight: 800;
  text-align: center;
}
.wheel-game-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
}
.wheel-game-status p {
  margin: 0;
  padding: 0.45rem 0.25rem;
  border-radius: 0.6rem;
  background: rgba(5, 12, 20, 0.72);
  text-align: center;
}
.wheel-puzzle {
  padding: clamp(0.85rem, 2.5vw, 1.35rem);
  border: 3px solid #10111d;
  border-radius: 0.85rem;
  color: #fff7db;
  background: linear-gradient(155deg, #28324c, #17182a 62%, #35203b);
}
.wheel-puzzle h2 {
  min-height: 1.4em;
  margin: 0;
  text-align: center;
}
.wheel-masked-answer {
  min-height: 1.8em;
  margin: 0.35rem 0 0.5rem;
  overflow-wrap: anywhere;
  color: #f4d35e;
  font-size: clamp(1.35rem, 5vw, 2.3rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
}
.wheel-play-area {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(9rem, 1fr);
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2rem);
  width: min(100%, 38rem);
  margin: 0 auto 1rem;
}
.wheel-spinner-wrap {
  position: relative;
  width: min(100%, 14rem);
  aspect-ratio: 1;
  margin: auto;
}
.wheel-spinner {
  --wheel-content-counter-rotation: 0turn;
  position: absolute;
  inset: 0;
  border: 6px solid #fff7db;
  border-radius: 50%;
  background: conic-gradient(
    #b43d53 0 12.5%, #f4d35e 12.5% 25%, #3c9c77 25% 37.5%,
    #4a77c7 37.5% 50%, #a04ab2 50% 62.5%, #e67838 62.5% 75%,
    #2f8c99 75% 87.5%, #d35f8d 87.5% 100%
  );
  box-shadow: 0 0 0 4px #16131f, 0 8px 16px rgba(0, 0, 0, 0.42);
  transition: transform 700ms cubic-bezier(0.12, 0.68, 0.16, 1);
}
.wheel-spinner::after {
  content: "♫";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3.4rem;
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--wheel-content-counter-rotation));
  border: 3px solid #fff7db;
  border-radius: 50%;
  background: #24243b;
  font-size: 1.35rem;
}
.wheel-spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  margin-left: -1.25rem;
  margin-top: -0.65rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.wheel-spinner span:nth-child(1) { --wheel-slice-angle: 22.5deg; --wheel-slice-counter: -22.5deg; }
.wheel-spinner span:nth-child(2) { --wheel-slice-angle: 67.5deg; --wheel-slice-counter: -67.5deg; }
.wheel-spinner span:nth-child(3) { --wheel-slice-angle: 112.5deg; --wheel-slice-counter: -112.5deg; }
.wheel-spinner span:nth-child(4) { --wheel-slice-angle: 157.5deg; --wheel-slice-counter: -157.5deg; }
.wheel-spinner span:nth-child(5) { --wheel-slice-angle: 202.5deg; --wheel-slice-counter: -202.5deg; }
.wheel-spinner span:nth-child(6) { --wheel-slice-angle: 247.5deg; --wheel-slice-counter: -247.5deg; }
.wheel-spinner span:nth-child(7) { --wheel-slice-angle: 292.5deg; --wheel-slice-counter: -292.5deg; }
.wheel-spinner span:nth-child(8) { --wheel-slice-angle: 337.5deg; --wheel-slice-counter: -337.5deg; }
.wheel-spinner span {
  transform:
    rotate(var(--wheel-slice-angle))
    translateY(-5.1rem)
    rotate(var(--wheel-slice-counter))
    rotate(var(--wheel-content-counter-rotation));
}
.wheel-pointer {
  position: absolute;
  top: -0.35rem;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-right: 0.65rem solid transparent;
  border-left: 0.65rem solid transparent;
  border-top: 1.25rem solid #fff7db;
}
.wheel-spin-actions {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  text-align: center;
}
.wheel-spin-actions p { min-height: 2.8em; margin: 0; font-weight: 800; }
.wheel-letter-grid {
  grid-area: letters;
  display: grid;
  grid-template-columns: repeat(13, minmax(2.55rem, 1fr));
  gap: 0.35rem;
  align-self: start;
  margin: 0;
}
.wheel-letter-grid button {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.25rem;
  border: 2px solid #fff7db;
  border-radius: 0.45rem;
  color: #172033;
  background: #f9eed0;
  box-shadow: 0 3px 0 #94784d;
  font-size: 1rem;
  font-weight: 950;
}
.wheel-letter-grid button:disabled { opacity: 0.42; box-shadow: none; }
.wheel-letter-grid button.is-used { text-decoration: line-through; }
.wheel-spell-area {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}
.wheel-spell-form { width: min(100%, 14rem); }
.wheel-spell-form label { display: block; margin-bottom: 0.35rem; font-weight: 850; }
.wheel-spell-form > div { display: flex; gap: 0.5rem; }
.wheel-spell-form input { min-width: 0; flex: 1; text-transform: uppercase; }
.wheel-game-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.wheel-game-actions p { margin: 0; }

/* Scale Keyboard */
.scale-keyboard-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.scale-keyboard-status p {
  margin: 0;
  padding: 0.65rem;
  border-radius: 0.6rem;
  background: rgba(5, 12, 20, 0.72);
  text-align: center;
}
.scale-keyboard-challenge {
  padding: clamp(0.8rem, 2.5vw, 1.4rem);
  border: 3px solid #10111d;
  border-radius: 0.85rem;
  background: linear-gradient(155deg, #493b58, #20213b 60%, #182b37);
}
.scale-keyboard-challenge h2 { margin: 0; text-align: center; }
.scale-keyboard-progress {
  min-height: 1.8em;
  margin: 0.65rem 0 1rem;
  color: #f4d35e;
  font-size: clamp(1rem, 4vw, 1.45rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
}
.scale-piano {
  --scale-black-key-shift: 0.22rem;
  position: relative;
  display: flex;
  width: min(100%, 58rem);
  height: clamp(9rem, 28vw, 17rem);
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid #0d0e13;
  border-radius: 0.45rem;
  background: #11131a;
  touch-action: manipulation;
}
.scale-piano-key {
  min-width: 0;
  padding: 0;
  border-radius: 0 0 0.3rem 0.3rem;
  transition: filter 90ms ease, transform 90ms ease;
}
.scale-piano-key.is-white {
  position: relative;
  flex: 1;
  height: 100%;
  border: 1px solid #353640;
  background: linear-gradient(90deg, #e5e2d9, #fffdf4 24% 72%, #d6d2c8);
  box-shadow: inset 0 -6px 0 #c7c2b6;
}
.scale-piano-key.is-black {
  position: absolute;
  z-index: 2;
  top: 0;
  width: clamp(1rem, 4.6%, 2.4rem);
  height: 62%;
  transform: translateX(calc(-50% + var(--scale-black-key-shift)));
  border: 1px solid #030306;
  background: linear-gradient(90deg, #090a0f, #383b47 55%, #08090d);
  box-shadow: inset 0 -5px 0 #050508, 0 4px 5px rgba(0, 0, 0, 0.45);
}
.scale-piano-key:disabled { cursor: default; }
.scale-piano-key.is-correct { filter: drop-shadow(0 0 0.65rem #65e6a7) brightness(1.22); }
.scale-piano-key.is-wrong { filter: drop-shadow(0 0 0.65rem #ff6262) brightness(0.82); }
.scale-piano-key:active:not(:disabled) { transform: translateY(3px); }
.scale-piano-key.is-black:active:not(:disabled) { transform: translate(calc(-50% + var(--scale-black-key-shift)), 3px); }
.scale-keyboard-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.scale-keyboard-actions p { margin: 0; }

.thirds-game,
.nines-game,
.interval-game,
.history-mystery-game {
  width: min(100%, 48rem);
}
.thirds-active-area,
.nines-active-area {
  display: grid;
  width: min(100%, 32rem);
  margin: 0 auto;
  gap: 0.7rem;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 3px solid #751f29;
  border-radius: 0.9rem;
  background: rgba(5, 12, 20, 0.72);
}
.thirds-status,
.nines-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
.thirds-status p,
.nines-status p {
  margin: 0;
  padding: 0.45rem 0.2rem;
  border-radius: 0.45rem;
  background: #24243b;
  text-align: center;
}
.thirds-card,
.nines-card {
  display: grid;
  min-height: 7.5rem;
  place-content: center;
  gap: 0.45rem;
  padding: 0.75rem;
  border: 4px double #f4d35e;
  border-radius: 0.65rem;
  color: #291512;
  background: #fff4d4;
  text-align: center;
  text-transform: uppercase;
}
.thirds-card strong { font-size: clamp(1.8rem, 7vw, 3rem); }
.thirds-card span { font-weight: 950; letter-spacing: 0.1em; }
.nines-card strong { font-size: clamp(1.65rem, 6vw, 2.7rem); text-transform: none; }
.nines-card span { font-weight: 950; letter-spacing: 0.07em; }
.nines-answer-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(2.75rem, 1fr));
  gap: 0.45rem;
}
.nines-answer-grid button {
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.45rem 0.2rem;
  font-size: 1.2rem;
  font-weight: 950;
}
.thirds-answer-form {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}
.thirds-answer-form label { font-weight: 900; }
.thirds-answer-form input {
  min-width: 0;
  min-height: 3rem;
  border: 3px solid #f4d35e;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}
.thirds-start { width: 100%; }
.thirds-message { min-height: 1.4em; margin: 0; text-align: center; }
.nines-start { width: 100%; }
.nines-message { min-height: 1.4em; margin: 0; text-align: center; }

.interval-active-area {
  display: grid;
  width: min(100%, 34rem);
  margin: 0 auto;
  gap: 0.65rem;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 3px solid #ba6829;
  border-radius: 0.9rem;
  background: rgba(5, 12, 20, 0.72);
}
.interval-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
.interval-status p,
.interval-mistakes {
  margin: 0;
  padding: 0.45rem 0.2rem;
  border-radius: 0.45rem;
  background: #24243b;
  text-align: center;
}
.interval-answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.interval-answer-grid button {
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.5rem 0.25rem;
  font-size: clamp(0.9rem, 3.3vw, 1.1rem);
  font-weight: 950;
}
.interval-replay,
.interval-start { width: 100%; }
.interval-message { min-height: 1.4em; margin: 0; text-align: center; }

.history-mystery-active-area {
  display: grid;
  width: min(100%, 34rem);
  margin: 0 auto;
  gap: 0.7rem;
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 3px solid #2b7771;
  border-radius: 0.9rem;
  background: rgba(5, 12, 20, 0.76);
}
.history-mystery-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.history-mystery-status p {
  margin: 0;
  padding: 0.45rem 0.2rem;
  border-radius: 0.45rem;
  background: #24243b;
  text-align: center;
}
.history-mystery-card {
  display: grid;
  min-height: 15rem;
  align-content: center;
  gap: 0.75rem;
  padding: clamp(0.75rem, 3vw, 1.25rem);
  border: 4px double #f4d35e;
  border-radius: 0.65rem;
  color: #211913;
  background: #fff4d4;
  text-align: center;
}
.history-mystery-card > strong {
  color: #23645f;
  font-size: clamp(1rem, 4vw, 1.35rem);
  letter-spacing: 0.08em;
}
.history-mystery-card > p {
  margin: 0;
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  font-weight: 850;
}
.history-mystery-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.history-mystery-answer-grid button {
  min-width: 0;
  min-height: 3.4rem;
  padding: 0.55rem 0.4rem;
  white-space: normal;
  font-weight: 900;
}
.history-mystery-start { width: 100%; }
.history-mystery-message {
  min-height: 2.8em;
  margin: 0;
  text-align: center;
}
.history-mystery-date {
  margin: 0.55rem 0 0;
  color: #c8d4dc;
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 760px) {
  .arcade-cabinet-grid { grid-template-columns: 1fr; }
  .practice-room-door { min-height: 11rem; }
  .arcade-room-header { align-items: stretch; flex-direction: column; }
  .arcade-header-actions { justify-content: space-between; }
  .arcade-room-header .btn { width: 100%; }
  .arcade-cabinet-link { min-height: 12rem; }
  .blue-game-touch-controls { position: sticky; bottom: 0; }
  .wheel-active-area {
    grid-template-columns: minmax(10.5rem, 1fr) minmax(7.25rem, 0.68fr);
    grid-template-areas:
      "summary summary"
      "wheel controls"
      "letters letters";
    gap: 0.55rem;
    padding: 0.6rem;
  }
  .wheel-spinner-wrap { width: min(100%, 12rem); }
  .wheel-letter-grid { grid-template-columns: repeat(9, minmax(2rem, 1fr)); gap: 0.25rem; }
  .wheel-letter-grid button { min-height: 2.5rem; }
}

@media (max-width: 430px) {
  .arcade-room,
  .arcade-game,
  .wheel-game,
  .scale-keyboard-game,
  .thirds-game,
  .nines-game,
  .interval-game,
  .history-mystery-game { padding: 0.75rem; }
  .arcade-game-status { gap: 0.35rem; }
  .arcade-game-status p { padding: 0.5rem 0.25rem; font-size: 0.88rem; }
  .arcade-game-actions .btn { width: 100%; }
  .wheel-game-status { gap: 0.25rem; }
  .wheel-game-status p { padding: 0.35rem 0.15rem; font-size: 0.76rem; }
  .scale-keyboard-actions .btn { width: 100%; }
  .thirds-answer-form { grid-template-columns: 1fr 1fr; }
  .thirds-answer-form label { grid-column: 1 / -1; }
  .nines-answer-grid { grid-template-columns: repeat(4, minmax(3rem, 1fr)); }
  .history-mystery-status { gap: 0.25rem; }
  .history-mystery-status p { padding: 0.4rem 0.12rem; font-size: 0.82rem; }
  .history-mystery-answer-grid button { min-height: 3.6rem; }
  .pristine-practice { padding: 0.8rem; }
  .pristine-practice-header { align-items: stretch; flex-direction: column; }
  .pristine-practice-header .btn,
  .pristine-practice-actions,
  .pristine-practice-actions .btn { width: 100%; }
  .arcade-economy-status { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .shed-readout-name { min-width: 7.5rem; }
  .team-leaderboard-grid { grid-template-columns: 1fr; }
}

/* Keep mobile SHED controls in intentional left/right column rows. */
@media (max-width: 640px) {
  #instrument-object { top: 12% !important; }
  #xp-level-control { top: 34% !important; }
  .woodshed-object-column-left .dandelion-object { top: 55% !important; }
  #level-value { top: 76% !important; }

  .woodshed-object-column-left .dandelion-object {
    right: auto;
    left: 0;
    transform: none !important;
  }

  .metronome-object { top: 10% !important; }
  .tuner-object { top: 29% !important; }
  .chair-object { top: 48% !important; }
  .shed-decorate-button { top: 67% !important; right: 0; }
  .woodshed-object-column-right > .shed-sound-effects-controls {
    top: 86% !important;
    right: 0;
    bottom: auto !important;
  }

  .woodshed-object-column-right > .shed-sound-effects-controls .sound-effects-button {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.9rem;
  }
}

/* SHED lifetime XP badge and compact panel */
.xp-level-control {
  display: grid;
  place-items: center;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  color: #2d210f;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 4px rgba(35, 24, 16, 0.72));
  cursor: pointer;
}

.xp-level-symbol,
.xp-level-number {
  grid-area: 1 / 1;
}

.xp-level-symbol {
  font-size: clamp(2.6rem, 5vw, 3.2rem);
  line-height: 1;
}

.xp-level-number {
  z-index: 1;
  color: #3c2607;
  font-size: 0.9rem;
  font-weight: 1000;
  text-shadow: 0 1px rgba(255, 250, 204, 0.9);
}

.xp-level-control:hover,
.xp-level-control:focus-visible {
  filter: brightness(1.06);
}

.xp-level-control:focus-visible {
  outline: 3px solid #fff4d4;
  outline-offset: 3px;
}

.xp-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20;
  display: block;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  margin: 0;
  padding: 1rem;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 3px ridge #9a6b28;
  box-shadow: 0 12px 30px rgba(35, 24, 16, 0.45);
}

.xp-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.xp-panel-head h2,
.xp-panel-head p,
.xp-panel-status {
  margin: 0;
}

.xp-panel-close {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--text-ink);
  font-size: 1.8rem;
  line-height: 1;
  background: transparent;
  border: 0;
}

.xp-panel progress {
  display: block;
  width: 100%;
  height: 1rem;
  margin: 0.8rem 0 0.35rem;
  accent-color: #cc9329;
}

.xp-progress-text,
.xp-max-level-label {
  font-weight: 900;
}

.xp-max-level-label {
  color: #7d3f12;
}

.xp-source-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.8rem 0 0;
}

.xp-source-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(121, 83, 33, 0.28);
}

.xp-source-list dt {
  font-weight: 800;
}

.xp-source-list dd {
  margin: 0;
  font-weight: 1000;
}

.xp-panel-status {
  min-height: 1.2rem;
  margin-top: 0.6rem;
}

@media (max-width: 640px) {
  #xp-level-control {
    top: 37%;
    left: 0;
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    font-size: 1.2rem;
  }

  #level-value {
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
    font-size: 1.1rem;
  }
}

/* Plunge Burrow prototype */
.plunge-burrow-page {
  max-width: 70rem;
  margin-inline: auto;
  overflow: hidden;
  background: linear-gradient(160deg, #f4dfb9 0%, #d6a96f 100%);
}

.plunge-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.plunge-header h1 { margin: 0.1rem 0 0.3rem; color: #4b2b19; }

.plunge-status {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.plunge-status p {
  margin: 0;
  padding: 0.65rem 0.8rem;
  border: 2px solid #86552e;
  border-radius: 0.8rem;
  background: #fff3d3;
  color: #4a2a17;
  text-align: center;
}

#plunge-hearts { color: #a72e2e; letter-spacing: 0.08em; }
.plunge-band-set {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid #86552e;
  border-radius: 0.85rem;
  background: rgba(255, 243, 211, 0.82);
  color: #4a2a17;
}

.plunge-band-set h2, .plunge-band-set p { margin: 0; }
.plunge-band-set h2 { font-size: 1.05rem; }
.plunge-band-set p { font-size: 0.86rem; }
.plunge-band-set ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.plunge-band-set li { padding: 0.25rem 0.45rem; border-radius: 999px; background: #ead095; font-size: 0.88rem; font-weight: 700; }
.plunge-band-set .plunge-band-empty { background: transparent; color: #76502f; font-weight: 600; }
.plunge-band-complete { color: #28623c; white-space: nowrap; }
.plunge-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; gap: 1rem; }

.plunge-board-wrap {
  position: relative;
  width: min(100%, 38rem);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 0.55rem solid #3c2519;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #5a351f;
  box-shadow: inset 0 0 0 0.2rem #94663d, 0 0.6rem 1.2rem rgba(52, 30, 16, 0.25);
  touch-action: none;
}

#plunge-canvas { display: block; width: 100%; height: 100%; outline-offset: -0.3rem; }
#plunge-canvas:focus-visible { outline: 0.25rem solid #ffd75b; }
#plunge-canvas.is-hit { filter: sepia(0.35) brightness(1.22); }
#plunge-canvas.is-portal { filter: brightness(1.16) saturate(1.2); }

.plunge-overlay {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(19rem, calc(100% - 2rem));
  transform: translate(-50%, -50%);
  padding: 0.85rem;
  border: 2px solid #f2d491;
  border-radius: 0.85rem;
  background: rgba(58, 34, 22, 0.92);
  color: #fff7df;
  text-align: center;
  pointer-events: none;
}

.plunge-overlay[hidden] { display: none; }
.plunge-overlay strong, .plunge-overlay span { display: block; }
.plunge-overlay strong { margin-bottom: 0.25rem; font-size: 1.25rem; }
.plunge-controls { display: grid; gap: 1rem; }
.plunge-action-row { display: grid; gap: 0.55rem; }

.plunge-direction-pad {
  display: grid;
  grid-template: repeat(3, 3.25rem) / repeat(3, 3.25rem);
  justify-content: center;
  gap: 0.25rem;
}

.plunge-direction {
  min-width: 3.25rem;
  min-height: 3.25rem;
  border: 2px solid #57351f;
  border-radius: 0.8rem;
  background: #f0c56e;
  color: #3f2718;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0.18rem 0 #704326;
}

.plunge-direction:focus-visible { outline: 0.2rem solid #1e5f8b; outline-offset: 0.15rem; }
.plunge-direction:active { transform: translateY(0.12rem); box-shadow: none; }
.plunge-up { grid-area: 1 / 2; }
.plunge-left { grid-area: 2 / 1; }
.plunge-down { grid-area: 2 / 2; }
.plunge-right { grid-area: 2 / 3; }

.plunge-scoreboard {
  width: min(100%, 24rem);
  margin: 1rem auto 0;
  padding: 0.7rem;
  border: 0.35rem solid #4d3821;
  border-radius: 0.35rem;
  background: #17281c;
  box-shadow: inset 0 0 0 0.12rem #809468, 0 0.3rem 0.6rem rgba(52, 30, 16, 0.2);
  color: #f7ebc8;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.plunge-scoreboard h2 { margin: 0 0 0.45rem; color: #f7ebc8; font: 900 1rem/1.1 system-ui, sans-serif; letter-spacing: 0.08em; text-align: center; }
.plunge-scoreboard ol { display: grid; gap: 0.16rem; margin: 0; padding: 0; list-style: none; }
.plunge-scoreboard li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; min-height: 1.45rem; border-top: 1px solid rgba(247, 235, 200, 0.22); font-size: 0.88rem; }
.plunge-scoreboard-rank { text-align: center; }
.plunge-scoreboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plunge-scoreboard-value { min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .plunge-burrow-page { padding-inline: 0.65rem; }
  .plunge-header { align-items: stretch; flex-direction: column; }
  .plunge-header .btn { align-self: flex-start; }
  .plunge-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plunge-band-set { grid-template-columns: 1fr; }
  .plunge-band-complete { white-space: normal; }
  .plunge-layout { grid-template-columns: minmax(0, 1fr); }
  .plunge-controls { grid-template-columns: minmax(0, 1fr) minmax(10rem, 1fr); }
  .plunge-action-row { align-content: start; }
}

@media (max-width: 460px) {
  .plunge-controls { grid-template-columns: 1fr; }
  .plunge-action-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plunge-action-row .btn { min-width: 0; padding-inline: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .plunge-direction { transition: none; }
  .plunge-direction:active { transform: none; }
  #plunge-canvas.is-hit { filter: none; }
  #plunge-canvas.is-portal { filter: none; }
}
.account-privacy-page {
  width: min(760px, calc(100% - 2rem));
  margin: 1rem auto 5rem;
}

.account-danger-zone {
  margin-top: 1.5rem;
  border: 3px solid #8b1e1e;
  background: #fff4e5;
}

.account-danger-zone h2 { color: #751616; }
.account-danger-zone input { max-width: 28rem; }
.account-access-control {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  bottom: calc(8.25rem + env(safe-area-inset-bottom));
  z-index: 6;
  max-width: min(10.5rem, calc(100vw - 5.5rem));
  color: #24180e;
  background: rgba(255, 244, 205, 0.92);
  padding: 0.4rem 0.65rem;
  border: 2px solid #6b3f1f;
  border-radius: 0.6rem;
  box-shadow: 0 3px 8px rgba(35, 12, 29, 0.25);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.account-access-control:focus-visible {
  outline: 3px solid #1677c8;
  outline-offset: 3px;
}
.board-account-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  max-width: 100%;
  margin: 0.2rem 0 0.65rem;
  overflow-wrap: anywhere;
}
.board-account-identity strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.board-copy-id {
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid #6b3f1f;
  border-radius: 0.45rem;
  background: #fff5cf;
  color: #24180e;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.board-copy-id:focus-visible { outline: 3px solid #1677c8; outline-offset: 2px; }
.board-copy-status { min-width: 4.5rem; font-size: 0.78rem; font-weight: 700; }
.account-id-reference {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  border-radius: 0.6rem;
  background: #fff9df;
  overflow-wrap: anywhere;
}
.account-id-reference span { font-size: 0.88rem; }
.authenticated-access-controls {
  position: fixed;
  left: max(0.5rem, env(safe-area-inset-left));
  bottom: calc(8.15rem + env(safe-area-inset-bottom));
  z-index: 7;
  display: grid;
  gap: 0.3rem;
  justify-items: start;
}

.authenticated-access-controls .account-access-control {
  position: static;
  left: auto;
  bottom: auto;
}

.authenticated-student-name { max-width: 11rem; color: #fff5cf; font-size: 0.78rem; font-weight: 800; overflow-wrap: anywhere; text-shadow: 0 1px 2px #24180e; }
.logout-access-control { border: 2px solid #6b3f1f; border-radius: 0.6rem; padding: 0.35rem 0.65rem; color: #fffaf0; background: #6f2f28; font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.logout-access-control:focus-visible { outline: 3px solid #1677c8; outline-offset: 3px; }
.team-emblem-letter { border: 0; border-radius: 0; color: #b42323; background: transparent; font-weight: 1000; }
.bonus-challenge-section .section-head { padding-bottom: 0.5rem; }

/* Phase 10 BOARD-only Back to School presentation. */
.board-page > .back-to-school-streamers {
  display: flex;
  justify-content: space-around;
  gap: 0.35rem;
  height: 2.4rem;
  margin: -0.35rem 0 0.35rem;
  overflow: hidden;
  pointer-events: none;
}

.back-to-school-streamers span {
  width: clamp(0.55rem, 2vw, 0.9rem);
  height: 3rem;
  border-radius: 999px;
  background: #ef5350;
  transform: rotate(14deg) translateY(-0.65rem);
  box-shadow: 0 2px 3px rgba(57, 34, 19, 0.25);
}

.back-to-school-streamers span:nth-child(3n + 2) {
  background: #42a5f5;
  transform: rotate(-12deg) translateY(-0.25rem);
}

.back-to-school-streamers span:nth-child(3n) {
  background: #fdd835;
  transform: rotate(8deg) translateY(-0.85rem);
}

.board-locker {
  overflow: hidden;
  border: 3px solid #274d68;
  border-radius: 0.45rem;
  background: linear-gradient(100deg, #5688a5, #32647f 52%, #5c91ac);
  box-shadow:
    inset 3px 0 rgba(255, 255, 255, 0.16),
    inset -4px 0 rgba(18, 49, 68, 0.28),
    0 5px 10px rgba(49, 29, 16, 0.25);
  color: #fffdf0;
  transform: none !important;
}

.board-locker::before { display: none; }

.board-locker > summary {
  min-height: 7.25rem;
  padding: 1rem 4.5rem 1rem 1rem;
  border: 2px solid rgba(218, 236, 244, 0.48);
  border-radius: 0.25rem;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 0.35rem,
      rgba(21, 56, 76, 0.7) 0.38rem 0.48rem,
      transparent 0.51rem 0.88rem
    ) top 1rem right 1rem / 2.5rem 2.8rem no-repeat,
    linear-gradient(100deg, rgba(255, 255, 255, 0.08), transparent 55%);
  color: inherit;
  text-shadow: 0 1px 2px #17384d;
}

.board-locker > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid #d8e4e9;
  border-radius: 50%;
  background: #1f4c65;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.board-locker[open] > summary {
  min-height: 4.5rem;
  border-bottom-color: #17384d;
}

.board-locker[open] > summary::before {
  content: "−";
  transform: none;
}

.board-locker[data-server-complete="true"] > summary {
  box-shadow: inset 0 0 0 4px #7bd889;
}

.board-locker .confirmed-checkmark {
  color: #b8ffbf;
  font-size: 1.15em;
}

.board-locker > .board-activity-body {
  padding: 1rem;
  background: #fff8e8;
  color: #332617;
}

.champion-achievements {
  display: grid;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.champion-achievements li {
  padding: 0.4rem 0.5rem;
  border-left: 4px solid #527a92;
  background: rgba(232, 221, 180, 0.55);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.contest-category-list,
.hall-seasonal-categories {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.contest-category-card,
.hall-category-card {
  overflow: hidden;
  border: 2px solid rgba(255, 224, 138, 0.72);
  border-radius: 0.7rem;
  background: rgba(20, 38, 45, 0.38);
}

.contest-category-card > summary,
.hall-category-card > summary,
.history-disclosure > summary {
  display: flex;
  min-height: 3.25rem;
  padding: 0.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.contest-category-card > summary::-webkit-details-marker,
.hall-category-card > summary::-webkit-details-marker,
.history-disclosure > summary::-webkit-details-marker { display: none; }

.contest-category-card > summary::after,
.hall-category-card > summary::after,
.history-disclosure > summary::after {
  content: "+";
  flex: none;
  font-size: 1.25rem;
}

.contest-category-card[open] > summary::after,
.hall-category-card[open] > summary::after,
.history-disclosure[open] > summary::after { content: "−"; }

.contest-category-divisions,
.hall-category-divisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.7rem;
  border-top: 1px solid rgba(255, 224, 138, 0.45);
}

.contest-category-divisions {
  grid-template-columns: minmax(0, 1fr);
}

.contest-unified-board {
  padding: 0.7rem;
  border-top: 1px solid rgba(255, 224, 138, 0.45);
}

.contest-division-card,
.hall-division-card {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(121, 167, 164, 0.68);
  border-radius: 0.55rem;
  background: rgba(5, 12, 20, 0.68);
}

.contest-division-card > h4,
.hall-division-card > h4 { margin: 0 0 0.5rem; }

.contest-division-coming-soon {
  display: grid;
  min-height: 5.5rem;
  place-content: center;
  color: #4a3824;
  background: #e8d8ae;
  border-style: dashed;
  text-align: center;
}

.contest-division-coming-soon p { margin: 0; }

.history-disclosure {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.history-disclosure > summary {
  padding: 0.8rem;
  border: 3px ridge #9b7023;
  border-radius: 5px;
  color: #2e210c;
  background: linear-gradient(145deg, #f0d577, #ad7d27);
  font-size: 1.2rem;
  text-align: left;
}

.history-disclosure-body { padding: 0.8rem; }
.hall-seasonal > h3 { margin: 0.35rem 0; }
.hall-category-card { border-color: rgba(92, 63, 32, 0.55); background: rgba(247, 228, 174, 0.55); }
.hall-category-card > summary { color: #302314; }
.hall-division-card { color: #302314; background: rgba(255, 248, 232, 0.78); border-color: rgba(92, 63, 32, 0.34); }
.hall-division-card .champion-card + .champion-card { margin-top: 0.55rem; }

@media (max-width: 640px) {
  .contest-category-divisions,
  .hall-category-divisions { grid-template-columns: 1fr; }
  .board-page > .back-to-school-streamers { height: 1.9rem; }
  .board-locker > summary {
    min-height: 6.5rem;
    padding-right: 3.75rem;
    background-size: 2rem 2.4rem, auto;
  }
}


@media (max-width: 420px) {
  .account-access-control {
    left: max(0.5rem, env(safe-area-inset-left));
    bottom: calc(8.15rem + env(safe-area-inset-bottom));
    max-width: 8.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.76rem;
  }
  .board-account-identity { align-items: flex-start; }
  .authenticated-access-controls { bottom: calc(8.05rem + env(safe-area-inset-bottom)); }
}

/* SHED Stickerbook and discrete decoration sizes */
.shed-decorate-panel {
  width: min(58rem, calc(100vw - 1.5rem));
  max-width: 58rem;
}

.shed-decorate-panel-head {
  align-items: center;
  justify-content: space-between;
}

.shed-decorate-panel-head h2,
.shed-decorate-panel > h3 {
  margin: 0.3rem 0;
  text-align: left;
}

.shed-decoration-inventory {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  grid-auto-rows: 1fr;
}

.shed-decoration-inventory-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "identity displayed"
    "controls controls";
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  justify-items: stretch;
  min-width: 0;
  min-height: 9.5rem;
  row-gap: 0.65rem;
  padding: 0.75rem;
}

.shed-decoration-inventory-identity {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  width: 100%;
  min-width: 0;
  grid-area: identity;
}

.shed-decoration-inventory-emoji {
  font-size: 2.25rem;
  line-height: 1;
}

.shed-decoration-inventory-details {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.shed-decoration-inventory-details strong,
.shed-decoration-inventory-details small {
  overflow-wrap: anywhere;
}

.shed-decoration-inventory-details small {
  color: #6e5638;
  font-size: 0.76rem;
  font-weight: 800;
}

.shed-decoration-card-controls {
  display: grid;
  grid-area: controls;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  align-self: end;
}

.shed-decoration-display-toggle {
  display: inline-flex;
  grid-area: displayed;
  align-items: flex-start;
  justify-self: end;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.15;
}

.shed-decoration-display-toggle input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: 0 0 auto;
}

.shed-decoration-size-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 0.3rem;
}

.shed-decoration-size-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem;
  border: 1px solid #8b6728;
  border-radius: 0.5rem;
  color: #3d2b16;
  background: #fff8e8;
  font-weight: 1000;
}

.shed-decoration-size-button[aria-pressed="true"] {
  color: #fff8e8;
  background: #76502d;
  box-shadow: inset 0 0 0 2px #f4d35e;
}

.shed-decoration-size-small {
  width: 10%;
  height: 10cqw;
  aspect-ratio: 1 / 1;
  font-size: 9cqw;
}

.shed-decoration-size-medium {
  width: 19%;
  height: 19cqw;
  aspect-ratio: 1 / 1;
  font-size: 17cqw;
}

.shed-decoration-size-large {
  width: 33%;
  height: 33cqw;
  aspect-ratio: 1 / 1;
  font-size: 29cqw;
}

.shed-decoration-size-xlarge {
  width: 47%;
  height: 47cqw;
  aspect-ratio: 1 / 1;
  font-size: 42cqw;
}

@media (max-width: 640px) {
  .woodshed-scene {
    background-size: cover;
    background-position: center;
    background-color: #9a7047;
  }

  .shed-decoration-layer {
    inset: 7% 0;
  }

  .shed-decoration-inventory {
    grid-template-columns: minmax(0, 1fr);
  }

  .shed-decoration-inventory-item {
    min-height: 12rem;
  }

}

/* Production mobile SHED 5×2 control grid. */
@media (max-width: 640px) {
  .woodshed-foreground {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0;
    display: block !important;
    z-index: 10;
    pointer-events: none;
  }

  .woodshed-foreground > .woodshed-object-column-left,
  .woodshed-foreground > .woodshed-object-column-right {
    position: absolute !important;
    top: 4% !important;
    bottom: 4% !important;
    width: 3.5rem;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 0;
    pointer-events: none;
  }

  .woodshed-foreground > .woodshed-object-column-left {
    left: 0.65rem !important;
    right: auto !important;
  }

  .woodshed-foreground > .woodshed-object-column-right {
    right: 0.65rem !important;
    left: auto !important;
  }

  .woodshed-foreground > .woodshed-object-column-center {
    display: none;
  }

  .woodshed-foreground > .woodshed-object-column-left > *,
  .woodshed-foreground > .woodshed-object-column-right > * {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center;
    justify-self: center;
    pointer-events: auto;
    z-index: 6;
  }

  .woodshed-foreground
    > .woodshed-object-column-right
    > .shed-sound-effects-controls {
    position: relative !important;
    display: block;
    visibility: visible;
    opacity: 1;
  }

  .woodshed-foreground
    > .woodshed-object-column-right
    > .shed-sound-effects-controls
    #sound-effects-button {
    position: relative;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    visibility: visible;
    opacity: 1;
    font-size: 2rem;
  }

  .woodshed-foreground
    > .woodshed-object-column-right
    > .shed-sound-effects-controls
    .sound-effects-panel {
    top: auto;
    right: calc(100% + 0.5rem);
    bottom: 0;
    z-index: 7;
    width: min(14rem, calc(100vw - 5.5rem));
    max-height: min(18rem, calc(100dvh - 1.5rem));
  }
}


/* Approved 2172 × 724 sheet: three equal 724px cells, left to right.
   Retain each full panel (including its title) and the original file path. */
.arcade-cabinet-screen.arcade-keeper-screen {
  position: relative;
  overflow: hidden;
  width: min(100%, 12rem);
  aspect-ratio: 1;
}
.arcade-keeper-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  max-width: none;
  height: 100%;
}
.arcade-keeper-intervals .arcade-keeper-art { left: -100%; }
.arcade-keeper-history .arcade-keeper-art { left: -200%; }

/* Family / under-13 parent permission */
.family-page {
  padding: 1rem;
}

.family-card {
  width: min(760px, 100%);
  margin: 1rem auto;
  padding: clamp(1rem, 4vw, 2rem);
}

.family-title {
  margin-top: 0;
}

.family-notice {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 0.96rem;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid #d8c49c;
  border-radius: 12px;
  padding: 1rem;
}

.family-card form {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0;
}

.family-card label {
  display: grid;
  gap: 0.35rem;
  line-height: 1.4;
}

.family-card input:not([type="checkbox"]),
.family-card textarea {
  box-sizing: border-box;
  width: 100%;
}

.family-card input[type="checkbox"] {
  margin-right: 0.45rem;
}

.family-card button {
  width: fit-content;
  min-height: 44px;
}

.family-intro {
  margin-bottom: 1.25rem;
}

.family-intro h2,
.family-section h3 {
  margin-top: 0;
}

.family-account-scope {
  font-size: 1.05rem;
}

.family-section {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #d8c49c;
  border-radius: 12px;
  background: rgba(255,255,255,.32);
}

.family-notice {
  max-height: 24rem;
  overflow-y: auto;
}

.family-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: .65rem !important;
  padding: .55rem 0;
}

.family-check input {
  flex: 0 0 auto;
  margin-top: .2rem;
}

.family-optional {
  background: rgba(255,255,255,.18);
}

.family-fine-print {
  font-size: .9rem;
  line-height: 1.45;
  opacity: .82;
}

.family-primary-action {
  width: 100% !important;
  justify-self: stretch;
  font-weight: 800;
}

.family-parent-hero {
  margin-bottom: 1.2rem;
}

.family-kicker {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .7;
}

.family-parent-hero h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
}

.family-lede {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.5;
}

.family-scope-card {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  background: #f6dfac;
  border: 1px solid #d6b66f;
  line-height: 1.45;
}

.family-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  margin-top: 1rem;
}

.family-steps > div {
  display: grid;
  gap: .2rem;
  padding: .8rem;
  border-radius: 10px;
  background: rgba(255,255,255,.42);
}

.family-steps span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #6b3f1f;
  color: white;
  font-weight: 800;
}

.family-steps small {
  line-height: 1.3;
}

.family-summary ul {
  padding-left: 1.25rem;
  line-height: 1.5;
}

.family-summary li + li {
  margin-top: .4rem;
}

.family-notice-details {
  margin-top: 1rem;
  border-top: 1px solid #d8c49c;
  padding-top: .8rem;
}

.family-notice-details summary {
  cursor: pointer;
  font-weight: 800;
}

.family-notice-details .family-notice {
  margin-top: .85rem;
  max-height: 20rem;
}

.family-status {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #d6b66f;
  border-radius: 10px;
  background: #f6dfac;
}

.family-status h3 {
  margin-top: 0;
}

.family-withdraw {
  margin-top: 1.5rem;
  font-size: .9rem;
}

@media (max-width: 560px) {
  .family-steps {
    grid-template-columns: 1fr;
  }
}

.family-kws-explainer {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-left: 4px solid #6b3f1f;
  background: rgba(255,255,255,.38);
  border-radius: 8px;
}

.family-kws-explainer p {
  margin: .35rem 0 0;
  line-height: 1.5;
}

/* Reserve standings space without adding fake rows or including it in the link. */
.arcade-cabinet-grid { align-items: stretch; }
.arcade-cabinet { display: grid; grid-template-rows: auto 1fr; }
.arcade-cabinet-history { grid-template-rows: 1fr; }
.arcade-cabinet .arcade-leaderboard { margin: 0 0 .8rem; min-height: 12rem; }
@media (max-width: 480px) {
  .practice-tool-grid { grid-template-columns: 1fr; }
}

/* R4 shared behavior foundation; artwork hotspot geometry is deliberately deferred. */
.woodchuck-editor { width: min(92vw, 30rem); max-height: 85dvh; overflow: auto; border-radius: 1rem; }
.woodchuck-editor form { display: grid; gap: .65rem; }
.woodchuck-editor select, .woodchuck-editor button, .shared-recovery button, .shared-recovery a { min-height: 44px; font-size: 1rem; }
.woodchuck-editor::backdrop { background: rgb(0 0 0 / .55); }
.shared-recovery { position: fixed; z-index: 10000; inset: auto 1rem calc(1rem + env(safe-area-inset-bottom)); padding: 1rem; background: #fff8e7; color: #302315; border: 2px solid #715137; border-radius: .75rem; box-shadow: 0 3px 20px #0005; }
.shared-recovery p { margin: 0 0 .5rem; }
.shared-recovery a { display: inline-flex; align-items: center; }
.woodchuck-editor :focus-visible, .shared-recovery :focus-visible { outline: 3px solid #2371c2; outline-offset: 3px; }
.shop-student-character-layer { position: absolute; z-index: 2; left: 50%; bottom: 12%; width: 38%; height: 52%; transform: translateX(-50%); pointer-events: none; }
.shop-student-character { width: 100%; height: 100%; object-fit: contain; }
.practice-room-door[aria-disabled="true"] { opacity: .7; cursor: default; }