@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url("./assets/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-display: swap; src: url("./assets/fonts/roboto-latin-600-normal.woff2") format("woff2"); }
/* Reference theme. Structural scrolling stays in the supplied app-shell.css. */
:root {
 --bg: #081016;
 --surface: #101923;
 --surface-2: #0d1620;
 --surface-3: #21263f;
 --border: #1c2935;
 --primary: #813cd4;
 --primary-2: #bc88fb;
 --primary-deep: #50208b;
 --gradient-card-a: #31255e;
 --gradient-card-b: #6833a3;
 --text: #f4f5fa;
 --ink: #f4f5fa;
 --dim: #b7bac8;
 --text-dim: #b7bac8;
 --forest: #813cd4;
 --forest-deep: #50208b;
 --gold: #ffcd32;
 --safe-top: 18px;
 --bottom-nav-height: 76px;
 --shell-width: 390px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body { margin: 0; background: #090e17; color: var(--text); font-family: Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; }
.prototype-stage { background: radial-gradient(ellipse at 50% 35%, #1d253c, #090e17 70%); }
.device-shell { min-height: 0; height: min(800px, calc(100dvh - 38px)); padding: 6px; border: 1px solid #4c505c; border-radius: 43px; box-shadow: 0 24px 70px #0008, inset 0 0 0 2px #101216; }
.app-surface { border-radius: 36px; background: var(--bg); }
.screen { background: radial-gradient(ellipse at 25% 0%, #0b1522, var(--bg) 65%); }
.screen-scroll { padding: 0 18px 16px; }
.app-root { padding-top: var(--safe-top); }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; flex: 0 0 auto; margin: 0 -6px 6px; }
.screen-title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; }
[data-route="home"] .screen-title { font-size: 19px; font-weight: 600; padding-left: 6px; }
.icon-btn { width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--dim); border-radius: 9px; padding: 0; }
.icon-btn:active { background: var(--surface); }
.section-label { margin: 19px 0 10px; font-size: 16px; line-height: 1.3; font-weight: 500; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.card { background: linear-gradient(120deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: 10px; padding: 15px; box-shadow: none; }
.profile-card { display: flex; align-items: center; gap: 14px; min-height: 96px; background: #09121b; }
.profile-avatar { width: 66px; height: 66px; flex: 0 0 auto; border-radius: 19px; display: grid; place-items: center; overflow: hidden; border: 1px solid #293143; }
.profile-avatar img { width: 100%; height: 100%; display: block; }
.profile-name { display: block; font-size: 15px; line-height: 1.4; font-weight: 500; }
.profile-meta { display: flex; gap: 5px; align-items: center; margin-top: 1px; font-size: 17px; line-height: 1.4; }
.profile-meta .star { color: var(--gold); display: flex; }
.profile-rank { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.daily-card { margin-top: 14px; display: grid; grid-template-columns: 34px 1fr 78px; align-items: start; gap: 10px; min-height: 108px; padding: 17px 13px; border-color: #65518e; background: linear-gradient(115deg, #2c275d, #60358f 65%, #482367); }
.daily-card .tile { width: 34px; height: 40px; background: #ffffff0a; color: #d2b7ff; }
.daily-body { min-width: 0; }
.daily-title { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.daily-sub { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #ebe5f5; }
.pill-btn { align-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 1px solid #725394; border-radius: 8px; background: #33194e80; color: #fff; font-size: 13px; }
.row-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: linear-gradient(110deg, #101822, #101821 55%, #18212c); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--ink); min-height: 70px; }
.row:active { background: var(--surface-3); }
.row-body { flex: 1; min-width: 0; }
.row-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.row-sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--dim); }
.row-chevron { color: var(--dim); flex: 0 0 auto; display: flex; }
.tile { width: 38px; height: 42px; border-radius: 10px; background: radial-gradient(ellipse,#33294c, #171b2b); display: grid; place-items: center; flex: 0 0 auto; color: #c5a0f0; }
.stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; flex: 0 0 auto; }
.stat { background: linear-gradient(120deg,#111c28,#0e1720); border: 1px solid var(--border); border-radius: 9px; padding: 11px 5px; text-align: center; }
.stat-label { display: block; font-size: 12px; color: var(--dim); }
.stat-value { display: block; margin-top: 4px; font-size: 19px; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.mini { background: linear-gradient(130deg,#101c27,#0d1720); border: 1px solid var(--border); border-radius: 8px; padding: 12px 10px; min-width: 0; }
.mini-label { font-size: 12px; line-height: 1.3; color: var(--dim); }
.mini-value { margin-top: 4px; font-size: 19px; font-weight: 500; white-space: nowrap; }
.overview-grid .mini:nth-child(2) .mini-value { color: #ffe270; }
.level-card { display: flex; align-items: center; gap: 12px; }
.level-body { flex: 1; min-width: 0; }
.level-label { display: block; font-size: 13px; }
.level-num { display: block; font-size: 28px; font-weight: 500; line-height: 1.2; }
.level-rank { display: block; font-size: 12px; color: var(--dim); margin-top: 5px; }
.stats-level { display: grid; grid-template-columns: 1fr 64px; background: linear-gradient(120deg,#191833,#12162b); padding: 16px 14px; row-gap: 10px; }
.crown { width: 55px; height: 59px; display: grid; place-items: center; background: linear-gradient(140deg,#7950b4,#492876 50%,#25163c); color: #ffc65b; border: 2px solid #aa72e7; clip-path: polygon(50% 0,95% 23%,91% 77%,50% 100%,9% 77%,5% 23%); }
.crown svg { width: 34px; height: 34px; }
.xp-row { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; }
.xp-bar { flex: 1; height: 9px; border-radius: 99px; background: #25213c; overflow: hidden; }
.xp-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7643d4,#ae67ef); }
.xp-caption { font-size: 12px; color: var(--dim); white-space: nowrap; }
.progress-card { padding: 9px 8px; }
.chart { display: block; width: 100%; height: auto; aspect-ratio: 1.95; }
.chart-axis { fill: var(--dim); font-size: 9px; }
.chart-grid { stroke: var(--border); stroke-width: .6; }
.chart-line { fill: none; stroke: #b581f4; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: #bd8bfd; }
.sample-note { margin: 9px 0 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dim); }
.text-btn { border: 0; padding: 3px 0; background: none; color: #d0a6ff; font-size: 12px; min-height: 32px; }
.screen-scroll.is-stage { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 10px; }
.cube-stage { flex: 1; min-height: 180px; position: relative; touch-action: none; margin: 0 -10px; }
.cube-canvas { display: block; width: 100%; height: 100%; }
.stage-toast { position: absolute; z-index: 3; left: 50%; top: 12px; transform: translateX(-50%); width: max-content; max-width: 94%; padding: 9px 13px; border: 1px solid #695084; border-radius: 9px; background: #261938f2; font-size: 13px; line-height: 1.4; text-align: center; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.stage-toast.is-visible { opacity: 1; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 9px 1px 6px; flex: 0 0 auto; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; background: linear-gradient(#0c1822b0,#08101600); }
.ctrl { flex: 1; min-width: 44px; min-height: 68px; padding: 0; border: 0; background: none; color: var(--dim); font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ctrl .glyph { width: 38px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.ctrl .glyph svg { width: 24px; height: 24px; }
.ctrl:disabled { opacity: .38; }
.ctrl.is-primary { color: var(--ink); }
.ctrl.is-primary .glyph { width: 57px; height: 57px; margin-top: -12px; border: 2px solid #b277e2; border-radius: 50%; color: #d6b5ff; background: radial-gradient(#38204e,#1d172d 70%); box-shadow: 0 0 17px #9746e04d; }
.ctrl.is-active .glyph { background: #632d9c; }
.ctrl[data-act="hint"] .glyph { color: #ffdc58; }
.hint-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #101a24; border: 1px solid var(--border); border-radius: 8px; padding: 0; margin: 0; flex: 0 0 auto; }
.segmented button { min-height: 44px; border: 0; border-radius: 7px; background: none; color: var(--ink); font-size: 14px; }
.segmented button[aria-selected="true"] { background: linear-gradient(120deg,#2c274f,#242942); box-shadow: inset 0 0 0 1px #46416c; }
[data-route="cube"] { display: flex; flex-direction: column; }
.customize-stage { flex: 1 0 220px; min-height: 220px; margin: 0 -10px; }
.customize-panel { flex: 0 0 auto; padding-bottom: 10px; }
.swatch-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; padding: 8px 0; }
.swatch { width: 100%; height: 44px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.swatch::before { content: ''; width: 31px; height: 31px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #ffffff22; }
.swatch[aria-pressed="true"]::before { outline: 2px solid #c693ff; outline-offset: 4px; box-shadow: 0 0 11px #814cf366; }
.color-editor { background: var(--surface); border: 1px solid #4e3969; border-radius: 9px; padding: 10px 12px; margin: 3px 0 8px; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 13px; }
.editor-head .icon-btn { min-height: 32px; height: 32px; }
.color-options { grid-template-columns: repeat(9,minmax(0,1fr)); gap: 0; }
.color-options .swatch::before { width: 23px; height: 23px; }
.cta { width: 100%; min-height: 49px; margin-top: 8px; padding: 10px; border: 1px solid #a264df; border-radius: 9px; background: linear-gradient(#8845d6,#652aac); color: #fff; font-size: 14px; font-weight: 500; }
.cta:disabled { opacity: .45; }
.cta.is-ghost { background: none; border-color: var(--border); color: var(--ink); }
.apply-status { text-align: center; color: #d1b4f5; font-size: 12px; margin: 4px 0; min-height: 0; }
.apply-status:empty { display: none; }
.bottom-nav { width: 100%; background: linear-gradient(#101923,#090f17); border-top: 1px solid var(--border); padding: 5px 9px 8px; }
.nav-item { flex: 1; position: relative; border: 0; background: none; color: var(--dim); font-size: 12px; min-height: 57px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 5px 0; }
.nav-item svg { position: relative; width: 23px; height: 23px; }
.nav-item[aria-current="page"] { color: #ca9cff; }
.nav-item[aria-current="page"]::before { content: ''; position: absolute; top: 1px; width: 40px; height: 38px; background: radial-gradient(#7543b969,#44216a22); box-shadow: 0 0 14px #804ac83d; border-radius: 13px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--dim); }
.badge.is-on { color: #d2b1ff; border-color: #66488a; }
.locked .row-chevron { color: #c19fe9; }
.theme-preview { width: 44px; height: 44px; border-radius: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 4px; background: #06090f; flex: 0 0 auto; }
.theme-preview span { border-radius: 2px; }
.empty { text-align: center; color: var(--dim); font-size: 14px; line-height: 1.5; padding: 28px 15px; }
.empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.details-copy { font-size: 13px; line-height: 1.6; color: var(--dim); }
@media(max-width:520px) {
 :root { --safe-top: 0px; }
 .prototype-stage { background: var(--bg); }
 .device-shell { border: 0; padding: 0; height: 100dvh; border-radius: 0; box-shadow: none; }
 .app-surface { border-radius: 0; }
 .screen-scroll { padding-bottom: 12px; }
 .bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom,0px)); }
}
@media(max-height:730px) {
 .profile-card { min-height: 82px; padding: 10px 12px; }
 .profile-avatar { width: 57px; height: 57px; }
 .daily-card { min-height: 95px; margin-top: 11px; padding-top: 12px; padding-bottom: 12px; }
 .row { min-height: 61px; padding: 8px 10px; }
 .row-list { gap: 8px; margin-top: 11px; }
 .section-label { margin-top: 13px; margin-bottom: 8px; }
 .stats-level { padding: 13px; }
 .mini { padding: 9px 8px; }
}
@media(max-width:350px) {
 .screen-scroll { padding-left: 12px; padding-right: 12px; }
 .row { gap: 8px; }
 .daily-card { grid-template-columns: 27px 1fr 66px; gap: 6px; padding-left: 10px; padding-right: 10px; }
 .daily-card .tile { width: 27px; }
 .daily-title { font-size: 14px; }
 .mini-label { font-size: 11px; }
 .mini-value { font-size: 17px; }
 .swatch-row { gap: 2px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- gesture coach ---------- */

/* Sits above the canvas and is never a pointer target — the coach must
   not swallow the first real swipe it has just finished teaching. */
.coach-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coach-layer.is-on {
  opacity: 1;
}

.coach-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coach-trail {
  stroke: var(--primary-2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
  opacity: 0;
}

.coach-hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 46px;
  margin: -6px 0 0 -13px;
  opacity: 0;
  will-change: transform, opacity;
}

.coach-ripple {
  position: absolute;
  top: -13px;
  left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-2);
  opacity: 0;
}

.coach-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 560;
  color: var(--primary-2);
}

/* Reduced motion: no travelling hand, just a static direction cue. */
.coach-layer.is-static .coach-hand,
.coach-layer.is-static .coach-svg {
  display: none;
}

/* v1.3: keep the game controls low and give the cube the main area. */
:root { --bottom-nav-height: 64px; }
.play-head { min-height: 44px; margin-bottom: 2px; }
.play-head .screen-title { font-size: 14px; }
.play-head .icon-btn svg { width: 18px; height: 18px; }
.is-stage .stat-row { gap: 7px; }
.is-stage .stat { padding: 7px 4px; border-radius: 8px; }
.is-stage .stat-label { font-size: 11px; }
.is-stage .stat-value { font-size: 16px; margin-top: 2px; }
.screen-scroll.is-stage { padding-bottom: 2px; }
.play-stage { min-height: 210px; }
.controls { padding: 3px 0 1px; gap: 2px; border-radius: 12px 12px 0 0; }
.ctrl { min-height: 46px; font-size: 11px; gap: 1px; }
.ctrl .glyph { width: 27px; height: 26px; }
.ctrl .glyph svg { width: 19px; height: 19px; }
.ctrl.is-primary .glyph { width: 35px; height: 35px; margin-top: -3px; border-width: 1.5px; box-shadow: 0 0 10px #9746e030; }
.nav-item { min-height: 48px; font-size: 11px; gap: 4px; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item[aria-current="page"]::before { width: 34px; height: 31px; }
.bottom-nav { padding-top: 3px; }
.hint-guide { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; border: 1px solid #594274; border-radius: 8px; padding: 3px 7px; margin-bottom: 5px; background: #1b1729; font-size: 12px; color: #dfc5ff; }
.hint-guide > span { flex: 1; line-height: 1.35; }
.hint-guide button { min-width: 44px; min-height: 44px; border: 0; background: none; color: #ffe188; padding: 0 5px; font-size: 12px; }
.hint-guide .hint-close { font-size: 20px; color: var(--dim); }
.result-reopen { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 8px 16px; border-radius: 8px; background: #3c2456; color: #f3e6ff; border: 1px solid #8963b2; }
.result-dialog { color: var(--ink); width: min(350px,calc(100vw - 36px)); max-height: 88dvh; overflow-y: auto; background: linear-gradient(150deg,#201a35,#0e1720); border: 1px solid #735493; border-radius: 20px; padding: 24px 19px 15px; text-align: center; box-shadow: 0 16px 70px #0009; }
.result-dialog::backdrop { background: #02060cb8; backdrop-filter: blur(4px); }
.result-mark { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: #3b2657; color: #dfb6ff; border: 1px solid #996bc6; }
.result-mode { font-size: 12px; color: var(--dim); margin: 0 0 5px; }
.result-dialog h2 { margin: 0; font-size: 25px; }
.personal-record { color: #ffe184; font-size: 13px; margin: 9px 0; }
.result-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 20px 0 12px; }
.result-metrics div { background: #0e1720; border: 1px solid var(--border); border-radius: 9px; padding: 12px 4px; }
.result-metrics strong { display: block; font-size: 20px; font-weight: 500; }
.result-metrics span { display: block; font-size: 12px; color: var(--dim); margin-top: 4px; }
.result-note { font-size: 12px; color: var(--dim); line-height: 1.45; }
.result-home { min-height: 44px; margin-top: 5px; }
.streak-result,.reward-result { font-size: 14px; color: #e0c3ff; }
.celebrate { animation: solve-pop .65s ease-out; }
@keyframes solve-pop { 0% {transform:scale(.7);box-shadow:0 0 0 0 #bf84ff80;} 60% {transform:scale(1.12);box-shadow:0 0 0 20px #bf84ff00;} 100% {transform:scale(1);} }
.daily-streak { display: block; margin-top: 4px; font-size: 11px; color: #ead6ff; }
.beginner-entry,.resume-row { margin-top: 12px; }
.beginner-entry { border-color: #413257; background: linear-gradient(110deg,#191829,#101923); }
.resume-row { border-color: #39586c; }
.learn-intro { text-align: center; padding: 22px 18px; }
.learn-intro .tile { margin: 0 auto; width: 48px; height: 48px; }
.learn-intro h2 { margin: 13px 0 8px; font-size: 20px; }
.lesson-row { min-height: 100px; }
.lesson-number { display: grid; place-items: center; width: 48px; height: 54px; border-radius: 10px; background: #2d2342; color: #d8b3ff; font-size: 26px; }
.lesson-meta { display: block; color: #d1b0f4; font-size: 12px; margin-top: 7px; }
.learn-help { margin-top: 18px; }
.name-form label { display: block; font-size: 14px; }
.name-input-row { display: flex; gap: 8px; margin-top: 10px; }
.name-input-row input { min-width: 0; flex: 1; width: 100%; padding: 10px; color: var(--ink); background: #081016; border: 1px solid #405064; border-radius: 8px; }
.name-save { color: #fff; background: #642b9c; border: 1px solid #9561c8; border-radius: 8px; padding: 9px 13px; font-size: 13px; }
.streak-count { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.streak-count > strong { font-size: 30px; color: #d7b1ff; }
.streak-count > span { font-size: 12px; color: var(--dim); }
.streak-count .badge { margin-left: auto; }
.streak-rewards { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 14px 0; }
.streak-reward { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 3px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--dim); }
.streak-reward.earned { color: #e0bfff; border-color: #8c5fc0; background: #2b2040; }
.reset-actions { display: flex; gap: 7px; }
@media(max-width:350px) { .hint-guide {font-size:11px;} .hint-guide button {font-size:11px;} }
@media(prefers-reduced-motion:reduce) { .celebrate {animation:none;} }

/* Supplied studio background sits behind the transparent live 3D canvas.
   Cover preserves its proportions. The edge fade joins the surrounding UI. */
.cube-stage {
  background-color: #081016;
  background-image: linear-gradient(to bottom,#081016 0%,transparent 12%,transparent 86%,#081016 100%),url('./assets/cube-studio-background.png');
  background-size: 100% 100%,cover;
  background-position: center,center 65%;
  background-repeat: no-repeat;
}
.cube-canvas { position: relative; z-index: 1; }
.hint-guide { position: relative; z-index: 2; }

/* Compact customization controls. Cube stage and camera sizing stay unchanged. */
[data-route="cube"] .app-head { min-height:44px; margin-bottom:4px; }
[data-route="cube"] .segmented button { min-height:36px; font-size:13px; }
[data-route="cube"] .customize-panel { padding-bottom:0; }
[data-route="cube"] .customize-panel > .swatch-row { padding:2px 0; gap:4px; }
[data-route="cube"] .swatch { height:36px; min-height:36px; }
[data-route="cube"] .swatch::before { width:25px; height:25px; }
[data-route="cube"] .swatch[aria-pressed="true"]::before { outline-offset:2px; }
[data-route="cube"] .color-editor { padding:3px 7px; margin:2px 0 4px; border-radius:8px; }
[data-route="cube"] .editor-head { min-height:28px; font-size:12px; gap:4px; }
[data-route="cube"] .editor-head > span { flex:1; }
[data-route="cube"] .editor-head .text-btn { min-height:28px; padding:0 4px; font-size:11px; }
[data-route="cube"] .editor-head .icon-btn { width:28px; height:28px; min-height:28px; }
[data-route="cube"] .color-options { padding:0; }
[data-route="cube"] .color-options .swatch { height:32px; min-height:32px; }
[data-route="cube"] .color-options .swatch::before { width:21px; height:21px; }
[data-route="cube"] .customize-panel > .cta { min-height:40px; margin-top:4px; padding:6px 10px; font-size:13px; }
[data-route="cube"] .apply-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Earned studios are background layers only, never filters on the cube. */
.cube-stage[data-background="purple"],.cube-stage[data-background="sunset"],.cube-stage[data-background="dark"] { background-image:none; }
.cube-stage[data-background="purple"]::before,.cube-stage[data-background="sunset"]::before { content:'';position:absolute;inset:0;pointer-events:none;background:url('./assets/cube-studio-background.png') center 65%/cover no-repeat; }
.cube-stage[data-background="purple"]::before { filter:hue-rotate(55deg) saturate(.85); }
.cube-stage[data-background="sunset"]::before { filter:hue-rotate(155deg) saturate(.7); }
.cube-stage[data-background="dark"] { background:radial-gradient(ellipse at 50% 68%,#202b39,#080e15 65%); }
.cube-stage[data-background="purple"]::after,.cube-stage[data-background="sunset"]::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#081016,transparent 12%,transparent 86%,#081016); }
.celebration-ring { animation:reward-ring .9s ease-out; }
.celebration-glow { animation:reward-glow 1.2s ease-out; }
.celebration-sparkles { position:relative;animation:solve-pop .7s ease-out; }
.celebration-sparkles::after { content:'';position:absolute;inset:-15px;border-radius:50%;background:radial-gradient(circle at 8% 40%,#ffe58b 0 2px,transparent 3px),radial-gradient(circle at 86% 16%,#e5c0ff 0 3px,transparent 4px),radial-gradient(circle at 75% 92%,#ffe58b 0 2px,transparent 3px),radial-gradient(circle at 20% 90%,#c3deff 0 2px,transparent 3px);animation:reward-stars 1.1s ease-out both; }
@keyframes reward-ring { 0%{box-shadow:0 0 0 0 #b983ffb0;}100%{box-shadow:0 0 0 35px #b983ff00;} }
@keyframes reward-glow { 0%,100%{box-shadow:0 0 6px #be80ff30;}45%{box-shadow:0 0 45px #be80ffcc;} }
@keyframes reward-stars { from{transform:scale(.7);opacity:0;}30%{opacity:1;}to{transform:scale(1.55);opacity:0;} }
.reward-category { width:100%;min-height:42px;padding:7px 10px;background:#101923;color:var(--ink);border:1px solid #514064;border-radius:8px;margin:12px 0; }
.reward-preview { display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:9px;border:1px solid #536077;background:linear-gradient(135deg,#48405a,#111821);color:#d7b7ff; }
.reward-preview[data-reward="carbon"] { background:repeating-conic-gradient(#10151b 0% 25%,#343a43 0% 50%) 0 0/8px 8px; }
.reward-preview[data-reward="metal"] { background:repeating-linear-gradient(0deg,#59636e 0 1px,#87909b 1px 2px); }
.reward-preview[data-reward="pearl"] { background:linear-gradient(135deg,#d9c9e5,#eef0eb,#b6c5e5);color:#493764; }
.reward-preview[data-reward="blue"] { background:radial-gradient(#175dcc,#050d1a); }
.reward-preview[data-reward="purple"] { background:radial-gradient(#7732ba,#12091d); }
.reward-preview[data-reward="sunset"] { background:radial-gradient(#b3672d,#241021); }
.reward-preview[data-reward="dark"] { background:radial-gradient(#303944,#05080b); }
.reward-progress { display:block;font-size:11px;color:#d1b4f5;margin-top:4px; }
@media(prefers-reduced-motion:reduce) { .celebration-ring,.celebration-glow,.celebration-sparkles,.celebration-sparkles::after { animation:none; } }

/* The bottom navigation already identifies the current route. Hide duplicate
   route titles and keep only useful header actions, reclaiming vertical space. */
.app-head { min-height: 28px; margin-bottom: 0; }
.app-head .screen-title { display: none; }
.app-head .icon-btn { min-height: 28px; width: 32px; }
.play-head { min-height: 28px; }
.play-head .icon-btn svg { width: 18px; height: 18px; }
[data-route="cube"] .app-head { min-height: 28px; margin-bottom: 0; }