/* Color Flask — UI styles. Palette: deep navy, electric cyan, vibrant purple, lime, coral pink, warm yellow. */
/* Fredoka (SIL OFL 1.1, see assets/fonts/OFL.txt) — bundled so the game never loads fonts from a CDN. */
@font-face {
  font-family: "Fredoka";
  src: url("../assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy: #19223f;
  --navy-2: #26345f;
  --purple: #7b4dff;
  --purple-2: #5a32d4;
  --purple-dark: #3a1d8f;
  --purple-ink: #2a1466;
  --cyan: #2fd4ee;
  --cyan-dark: #127a9e;
  --lime: #8fdc2c;
  --lime-dark: #4a8a0e;
  --pink: #ff5aa8;
  --yellow: #ffcc33;
  --coral: #ff7a6b;
  --white: #ffffff;
  --text-shadow: 0 2px 0 rgba(30, 10, 80, .55);
  --font: "Fredoka", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--navy);
  font-family: var(--font); color: var(--white); font-synthesis: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
svg { width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* The game frame. src/ui/display.js sets its size and position; sizes inside use container units. */
html { background: radial-gradient(ellipse at 50% 45%, #1f2a55 0%, #121834 60%, #0c1028 100%) fixed; }
body { background: transparent; }
#app {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
  container-type: size; background: var(--navy);
}
/* Mobile View on a wide screen: a portrait game frame centered in quiet space. */
#app.framed {
  border-radius: 26px;
  box-shadow: 0 0 0 3px rgba(160, 140, 255, .14), 0 0 0 9px rgba(8, 10, 32, .55), 0 28px 80px rgba(0, 0, 0, .55);
}
#stage { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }

/* ---------- shared widgets ---------- */
.icon-btn {
  width: 48px; height: 48px; flex: none; border-radius: 16px; padding: 11px;
  background: linear-gradient(#8f66ff, var(--purple-2));
  box-shadow: inset 0 -4px 0 var(--purple-dark), 0 4px 0 rgba(10, 6, 40, .45);
  border: 2.5px solid var(--purple-ink);
  transition: transform .08s;
}
.icon-btn:active { transform: translateY(3px) scale(.96); box-shadow: inset 0 -2px 0 var(--purple-dark); }
.icon-btn.flip svg { transform: scaleX(-1); }
.icon-btn.gift { background: linear-gradient(#ffd75a, #f19a1a); border-color: #7a3d00; box-shadow: inset 0 -4px 0 #b05f00, 0 4px 0 rgba(10,6,40,.45); animation: wiggle 1.6s infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-5deg); } }

.coin {
  display: inline-block; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff3a6 0 18%, #ffd23f 19% 58%, #f0a10f 59%);
  border: 2.5px solid #8a4b00; box-shadow: inset 0 -2px 0 rgba(140, 70, 0, .45);
  position: relative;
}
.coin::after { content: ""; position: absolute; inset: 5px 7px; border-radius: 3px; border: 2px solid rgba(160, 90, 0, .55); }
.coin-pill {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 9px; border-radius: 22px;
  background: rgba(14, 18, 48, .72); border: 2.5px solid rgba(160, 140, 255, .45);
  font-size: 20px; font-weight: 800; text-shadow: var(--text-shadow); min-width: 96px;
}
.coin-pill.bump { animation: bump .45s; }
.coin-pill.deny { animation: deny .5s; }
@keyframes bump { 40% { transform: scale(1.18); } }
@keyframes deny { 0%, 90% { border-color: var(--coral); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

.ribbon {
  display: inline-block; margin: 0; padding: 8px 26px 10px; border-radius: 14px;
  background: linear-gradient(#8c5cff, #6a3ee6); border: 3px solid var(--purple-ink);
  box-shadow: inset 0 -5px 0 rgba(40, 10, 120, .45), 0 5px 0 rgba(10, 6, 40, .45);
  font-weight: 900; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(30, 10, 80, .6);
  transform: rotate(-2deg);
}

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 10px 24px; border-radius: 20px; font-size: 22px; font-weight: 900;
  letter-spacing: .03em; text-shadow: var(--text-shadow); border: 3px solid rgba(0, 0, 0, .35);
  transition: transform .08s, filter .15s;
}
.btn svg { width: 24px; height: 24px; flex: none; }
.btn:active { transform: translateY(4px); }
.btn[disabled] { filter: grayscale(.8) brightness(.7); pointer-events: none; }
.btn-lime { background: linear-gradient(#b4f04a, #78c71c); box-shadow: inset 0 -6px 0 var(--lime-dark), 0 6px 0 rgba(10, 6, 40, .5); border-color: #2f5a06; }
.btn-cyan { background: linear-gradient(#5fe7ff, #19a8d6); box-shadow: inset 0 -6px 0 var(--cyan-dark), 0 6px 0 rgba(10, 6, 40, .5); border-color: #0b4c66; }
.btn-purple { background: linear-gradient(#9b74ff, #6a3ee6); box-shadow: inset 0 -6px 0 var(--purple-dark), 0 6px 0 rgba(10, 6, 40, .5); border-color: var(--purple-ink); }
.btn-pink { background: linear-gradient(#ff8cc4, #f0438f); box-shadow: inset 0 -6px 0 #9c1c58, 0 6px 0 rgba(10, 6, 40, .5); border-color: #6a0f3a; }
.btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); box-shadow: 0 4px 0 rgba(10, 6, 40, .35); }
.btn-equipped { background: rgba(30, 70, 0, .45); border-color: #2f5a06; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .2); pointer-events: none; }
.btn-big { min-height: 72px; font-size: 32px; padding: 10px 40px; flex-direction: column; gap: 0; line-height: 1.05; }
.btn-big svg { display: none; }
.btn-big small { font-size: 15px; font-weight: 700; opacity: .9; letter-spacing: .02em; }
.btn-sm { min-height: 44px; font-size: 17px; padding: 6px 16px; border-radius: 15px; }

/* ---------- HUD ---------- */
.hud-top {
  position: absolute; top: calc(10px + var(--safe-top)); left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.level-pill { display: flex; flex-direction: column; align-items: center; pointer-events: none; min-width: 0; white-space: nowrap; }
#hud-level {
  font-size: 26px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 3px 0 rgba(30, 10, 80, .7);
  padding: 4px 20px 6px; border-radius: 14px; background: linear-gradient(#8c5cff, #6a3ee6);
  border: 3px solid var(--purple-ink); box-shadow: inset 0 -4px 0 rgba(40, 10, 120, .45), 0 4px 0 rgba(10, 6, 40, .45);
}
.tag {
  margin-top: 6px; font-size: 12px; font-weight: 900; letter-spacing: .1em; padding: 2px 10px; border-radius: 10px;
  background: var(--coral); border: 2px solid #7a1f14; text-shadow: none;
}
.hud-moves { margin-top: 5px; font-size: 15px; font-weight: 700; opacity: .8; text-shadow: var(--text-shadow); }
.hud-top { align-items: flex-start; }
.hud-bottom {
  position: absolute; bottom: calc(12px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; padding: 10px 12px; border-radius: 26px;
  background: rgba(14, 18, 48, .62); border: 2.5px solid rgba(160, 140, 255, .3);
}
.tool-btn {
  position: relative; width: 70px; height: 70px; border-radius: 20px; padding: 10px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(#8f66ff, var(--purple-2)); border: 3px solid var(--purple-ink);
  box-shadow: inset 0 -5px 0 var(--purple-dark), 0 5px 0 rgba(10, 6, 40, .45);
  transition: transform .08s, filter .15s;
}
.tool-btn svg { width: 28px; height: 28px; }
.tool-btn .lbl { font-size: 13px; font-weight: 800; text-shadow: var(--text-shadow); }
.tool-btn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 var(--purple-dark); }
.tool-btn.off { filter: grayscale(.85) brightness(.65); }
.tool-hint { background: linear-gradient(#b4f04a, #78c71c); border-color: #2f5a06; box-shadow: inset 0 -5px 0 var(--lime-dark), 0 5px 0 rgba(10, 6, 40, .45); }
.tool-btn.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.badge {
  position: absolute; top: -10px; right: -10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 13px; font-weight: 900; background: var(--pink); border: 2.5px solid #6a0f3a; text-shadow: none;
}
.badge:empty { display: none; }
.badge.price { background: #ffd23f; color: #5a2e00; border-color: #8a4b00; }
.badge.free { background: var(--lime); color: #1d3a02; border-color: #2f5a06; }

/* ---------- tutorial coach ---------- */
.coach { position: absolute; left: 50%; top: calc(96px + var(--safe-top)); transform: translateX(-50%); pointer-events: none; width: min(92cqw, 460px); }
.coach-text {
  text-align: center; font-size: 19px; font-weight: 800; line-height: 1.3; padding: 12px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .96); color: #2a1466; box-shadow: 0 5px 0 rgba(10, 6, 40, .45);
  border: 3px solid var(--purple-ink); animation: pop .35s;
}
.coach.ghost { visibility: hidden; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

/* ---------- title ---------- */
#title { display: flex; flex-direction: column; align-items: center; background: none; }
.title-top {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: calc(12px + var(--safe-top)) 12px 0;
}
.spacer { flex: 1; }
.logo { margin-top: max(3cqh, 8px); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.logo-color { display: flex; font-size: clamp(56px, 15cqmin, 120px); font-weight: 900; line-height: 1; letter-spacing: .02em; }
.logo-color span {
  -webkit-text-stroke: 6px var(--purple-ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 rgba(20, 8, 60, .7); display: inline-block; animation: bob 2.4s ease-in-out infinite;
}
.logo-color span:nth-child(1) { color: #ff4fae; }
.logo-color span:nth-child(2) { color: #ffcc33; animation-delay: .15s; }
.logo-color span:nth-child(3) { color: #9be12f; animation-delay: .3s; }
.logo-color span:nth-child(4) { color: #2fd4ee; animation-delay: .45s; }
.logo-color span:nth-child(5) { color: #b38bff; animation-delay: .6s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.logo-flask { font-size: clamp(36px, 9cqmin, 70px); padding: 2px 34px 8px; margin-top: -6px; }
.logo-sub { margin-top: 14px; font-size: 17px; font-weight: 700; opacity: .85; text-shadow: var(--text-shadow); }
.title-buttons { margin-top: clamp(20px, 6cqh, 70px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.btn-row { display: flex; gap: 14px; }
#app.short .title-buttons { margin-top: 12px; }
#app.short .logo { margin-top: 0; }

/* ---------- screens with a header ---------- */
.screen { background: rgba(10, 12, 36, .45); }
#levels, #shop { display: flex; flex-direction: column; align-items: center; }
.screen-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + var(--safe-top)) 12px 6px;
}
.screen-head h2 { font-size: 28px; }

.level-grid {
  margin: 14px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  width: min(94cqw, 460px);
}
.level-tile {
  aspect-ratio: 1; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(#9b74ff, #6a3ee6); border: 3px solid var(--purple-ink);
  box-shadow: inset 0 -6px 0 var(--purple-dark), 0 5px 0 rgba(10, 6, 40, .5);
  font-size: 26px; font-weight: 900; text-shadow: var(--text-shadow); position: relative;
}
.level-tile:nth-child(odd) { transform: rotate(-1.5deg); }
.level-tile:nth-child(even) { transform: rotate(1.5deg); }
.level-tile:active { transform: translateY(3px); }
.level-tile .stars { display: flex; gap: 1px; height: 16px; margin-top: 2px; }
.level-tile .stars svg { width: 16px; height: 16px; color: rgba(20, 8, 70, .5); }
.level-tile .stars svg.on { color: #ffd23f; filter: drop-shadow(0 1px 0 #8a4b00); }
.level-tile.current { background: linear-gradient(#b4f04a, #78c71c); border-color: #2f5a06; box-shadow: inset 0 -6px 0 var(--lime-dark), 0 5px 0 rgba(10, 6, 40, .5); animation: pulse 1.4s infinite; }
.level-tile.challenge::after {
  content: "!"; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--coral); border: 2.5px solid #7a1f14; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.level-tile.locked { background: linear-gradient(#3a3070, #2a2258); box-shadow: inset 0 -6px 0 #1c1640, 0 5px 0 rgba(10, 6, 40, .5); pointer-events: none; }
.level-tile.locked .lock { width: 52%; height: 52%; }
.pager { margin-top: auto; margin-bottom: calc(20px + var(--safe-bottom)); display: flex; align-items: center; gap: 22px; font-size: 22px; font-weight: 800; text-shadow: var(--text-shadow); }
.pager .icon-btn[disabled] { opacity: .35; pointer-events: none; }

/* ---------- shop ---------- */
.tabs { display: flex; gap: 10px; margin: 10px 0 6px; }
.tab {
  padding: 8px 18px; border-radius: 14px; font-size: 18px; font-weight: 800; text-shadow: var(--text-shadow);
  background: rgba(255, 255, 255, .1); border: 2.5px solid rgba(255, 255, 255, .2);
}
.tab.active { background: linear-gradient(#5fe7ff, #19a8d6); border-color: #0b4c66; box-shadow: inset 0 -4px 0 var(--cyan-dark); }
.shop-grid {
  flex: 1; overflow-y: auto; width: min(96cqw, 760px); padding: 14px 10px 90px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; align-content: start;
}
.card {
  border-radius: 24px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(#9b74ff, #6a3ee6); border: 3px solid var(--purple-ink);
  box-shadow: inset 0 -6px 0 var(--purple-dark), 0 6px 0 rgba(10, 6, 40, .5);
}
.card:nth-child(odd) { transform: rotate(-1.6deg); }
.card:nth-child(even) { transform: rotate(1.4deg); }
.card .preview {
  width: 100%; aspect-ratio: 1; border-radius: 16px; background: #2b2466; border: 3px solid var(--purple-ink);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .08); overflow: hidden; position: relative;
}
.card .preview canvas { width: 100%; height: 100%; display: block; }
.card .preview .lock { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; }
.card .name { font-size: 18px; font-weight: 900; text-shadow: var(--text-shadow); text-align: center; }
.card .btn { width: 100%; }
.card.equipped { background: linear-gradient(#b4f04a, #78c71c); border-color: #2f5a06; box-shadow: inset 0 -6px 0 var(--lime-dark), 0 6px 0 rgba(10, 6, 40, .5); }
.shop-banner { position: absolute; bottom: calc(14px + var(--safe-bottom)); font-size: clamp(18px, 5cqw, 28px); pointer-events: none; }

/* ---------- modal ---------- */
.modal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 10, 32, .62); backdrop-filter: blur(2px); z-index: 20;
}
.panel {
  width: min(92cqw, 400px); max-height: 92cqh; overflow-y: auto; border-radius: 30px; padding: 20px 20px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: linear-gradient(#8c5cff, #5a32d4); border: 4px solid var(--purple-ink);
  box-shadow: inset 0 -8px 0 rgba(40, 10, 120, .5), 0 10px 0 rgba(10, 6, 40, .55);
  animation: pop .3s cubic-bezier(.3, 1.5, .5, 1);
}
.panel h3 { margin: 0; font-size: clamp(22px, 6.5cqw, 28px); }
.panel h3.ribbon { background: linear-gradient(#ff8cc4, #f0438f); border-color: #6a0f3a; box-shadow: inset 0 -5px 0 #9c1c58, 0 5px 0 rgba(10, 6, 40, .45); }
.panel p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; text-shadow: var(--text-shadow); }
.panel .inner {
  width: 100%; border-radius: 20px; padding: 14px; background: rgba(20, 10, 70, .45); border: 2.5px solid rgba(20, 8, 70, .6);
  display: flex; flex-direction: column; gap: 10px;
}
.panel .actions { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.panel .actions .btn { width: 100%; }
.panel .actions-row { display: flex; gap: 12px; width: 100%; }
.panel .actions-row .btn { flex: 1; }
.panel canvas.unlock-preview { width: 150px; height: 150px; border-radius: 20px; background: #2b2466; border: 3px solid var(--purple-ink); }

.win-stars { display: flex; gap: 6px; align-items: flex-end; height: 70px; }
.win-stars svg { width: 54px; height: 54px; color: rgba(20, 8, 70, .55); }
.win-stars svg:nth-child(2) { width: 68px; height: 68px; }
.win-stars svg.on { color: #ffd23f; filter: drop-shadow(0 3px 0 #8a4b00); animation: starIn .5s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.win-stars svg.on:nth-child(2) { animation-delay: .2s; }
.win-stars svg.on:nth-child(3) { animation-delay: .4s; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.reward-line { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; opacity: .9; }
.reward-total { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 34px; font-weight: 900; text-shadow: 0 3px 0 rgba(30, 10, 80, .6); }
.reward-total .coin { width: 34px; height: 34px; }
.reward-total .coin::after { inset: 7px 10px; }

.setting-row { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; text-shadow: var(--text-shadow); }
.setting-row .ico { width: 26px; height: 26px; flex: none; }
.setting-row .name { flex: 1; text-align: left; }
.setting-row input[type=range] { width: 110px; accent-color: var(--lime); }
.toggle {
  width: 58px; height: 32px; border-radius: 16px; position: relative; flex: none;
  background: rgba(10, 6, 40, .55); border: 2.5px solid rgba(10, 6, 40, .7); transition: background .2s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%;
  background: #fff; transition: transform .2s; box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.toggle.on { background: var(--lime); }
.toggle.on::after { transform: translateX(26px); }
.version { font-size: 12px; opacity: .55; }
.mode-group { display: flex; flex-direction: column; gap: 8px; }
.mode-title { font-size: 15px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .08em; opacity: .85; text-shadow: var(--text-shadow); }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-option { min-height: 58px; padding: 6px 10px; flex-direction: column; gap: 0; line-height: 1.1; font-size: 16px; border-radius: 16px; }
.mode-option svg { width: 22px; height: 22px; margin-bottom: 2px; }
.mode-option small { font-size: 11px; font-weight: 600; opacity: .9; letter-spacing: .02em; }

/* ---------- toast ---------- */
.toast {
  position: absolute; left: 50%; top: calc(100px + var(--safe-top)); transform: translate(-50%, -14px);
  max-width: 90cqw; padding: 10px 20px; border-radius: 18px; font-size: 17px; font-weight: 800; text-align: center;
  background: rgba(255, 255, 255, .96); color: var(--purple-ink); border: 3px solid var(--purple-ink);
  box-shadow: 0 5px 0 rgba(10, 6, 40, .45); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 30;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { background: #ffe1dc; }
.toast.good { background: #eaffd0; }

/* ---------- studio splash + real loading progress ---------- */
/* Grid rows 1fr | logos | 1fr keep the logos exactly centered; the loader sits at the bottom of row 3. */
.splash {
  --wm: min(54cqw, 300px);              /* wordmark width; everything in the logo row scales from it */
  position: absolute; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center;
  padding: 24px 16px calc(clamp(20px, 6cqh, 56px) + var(--safe-bottom));
  background: radial-gradient(ellipse at 50% 46%, #3b5089 0%, #212c55 60%, #19223f 100%);
  transition: opacity .4s;
}
.splash::before {
  content: ""; position: absolute; left: 50%; top: 48%; width: min(130cqw, 860px); height: min(70cqw, 440px);
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse, rgba(123, 77, 255, .3) 0%, rgba(47, 212, 238, .1) 45%, transparent 70%);
}
.splash.done { opacity: 0; pointer-events: none; }
/* Both studio logos are shown exactly as supplied: no recoloring, cropping, outlines or effects. */
.splash-brand {
  grid-row: 2; position: relative; display: flex; align-items: center; gap: calc(var(--wm) * .11);
  animation: pop .6s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.splash-symbol { width: auto; height: calc(var(--wm) * .245); display: block; }
.splash-divider { width: 2px; height: calc(var(--wm) * .12); border-radius: 1px; background: rgba(255, 255, 255, .8); }
.splash-logo { width: var(--wm); height: auto; display: block; }
.splash-loader {
  grid-row: 3; align-self: end; position: relative; width: min(78cqw, 300px);
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 24px;
}
.splash-bar {
  position: relative; width: 100%; height: 20px; border-radius: 12px; overflow: hidden;
  border: 3px solid #fff; background: rgba(190, 228, 255, .14);
  box-shadow: 0 0 0 3px rgba(8, 12, 36, .5), 0 5px 0 rgba(10, 6, 40, .4);
}
.splash-fill {
  height: 100%; width: 0; border-radius: 0 9px 9px 0; transition: width .35s ease-out;
  background-color: var(--purple);
  background-image: radial-gradient(circle at 20% 60%, rgba(40, 8, 60, .2) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 70% 40%, rgba(40, 8, 60, .2) 0 2px, transparent 3px),
    linear-gradient(rgba(255, 255, 255, .45) 0 3px, transparent 3px),
    linear-gradient(90deg, var(--purple), #9b74ff 45%, var(--cyan));
  background-size: 28px 100%, 22px 100%, 100% 100%, 100% 100%;
}
.splash-status { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; text-shadow: var(--text-shadow); }
#splash-pct { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
#splash-stage { font-size: 13px; font-weight: 600; opacity: .7; min-height: 1.2em; }
.splash-error {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 10, 32, .62);
}
.splash-error-detail { font-size: 13px; font-weight: 600; opacity: .7; word-break: break-word; }
#app.compact .splash { --wm: min(36cqw, 260px); grid-template-rows: 1fr auto auto; padding-top: 12px; }
#app.compact .splash::before { top: 40%; }
#app.compact .splash-brand { align-self: center; }
#app.compact .splash-loader { gap: 7px; padding-top: 14px; width: min(46cqw, 280px); }
#app.compact .splash-bar { height: 16px; }
#app.compact #splash-pct { font-size: 13px; }
#app.compact #splash-stage { font-size: 12px; }

.win-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.win-left { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---------- wide frames: side toolbar arrangement (phone landscape and Desktop View) ---------- */
#app.wide .level-pill { flex-direction: row; gap: 8px; align-items: center; }
#app.wide .tag { margin-top: 0; }
#app.wide .hud-moves { margin-top: 0; }
#app.wide .hud-bottom {
  left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: auto; top: calc(50% + 28px);
  transform: translateY(-50%); flex-direction: column; gap: 10px; padding: 9px;
}
#app.wide .level-grid { grid-template-columns: repeat(10, 1fr); width: min(94cqw, 820px); gap: 12px; margin-top: 12px; }
#app.wide .panel { width: min(94cqw, 580px); }
#app.wide .panel .inner.settings { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
#app.wide .panel .inner.settings .mode-group { grid-column: 1 / -1; }
#app.wide .panel .actions { flex-direction: row; align-items: stretch; }
#app.wide .panel .actions > .btn { flex: 1.3; }
#app.wide .panel .actions-row { flex: 1; }
#app.wide .win-body { flex-direction: row; align-items: center; }
#app.wide .win-left { flex: 1; }
#app.wide .win-body .inner { flex: 1.2; }

/* ---------- compact: wide and short (phones on their side) ---------- */
#app.compact .icon-btn { width: 40px; height: 40px; padding: 9px; border-radius: 13px; }
#app.compact .coin-pill { height: 38px; font-size: 17px; min-width: 84px; }
#app.compact .coin-pill .coin { width: 20px; height: 20px; }
#app.compact .hud-top { top: calc(6px + var(--safe-top)); }
#app.compact #hud-level { font-size: 19px; padding: 2px 14px 4px; }
#app.compact .hud-bottom { right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(50% + 24px); gap: 7px; padding: 7px; }
#app.compact .tool-btn { width: 58px; height: 50px; padding-top: 4px; border-radius: 15px; }
#app.compact .tool-btn svg { width: 22px; height: 22px; }
#app.compact .tool-btn .lbl { font-size: 11px; }
#app.compact .badge { top: -7px; right: -9px; height: 22px; min-width: 22px; font-size: 11px; }
#app.compact .coach { top: calc(52px + var(--safe-top)); }
#app.compact .coach-text { font-size: 15px; padding: 7px 14px; }
#app.compact .toast { top: calc(56px + var(--safe-top)); }

#app.compact .title-top { padding-top: calc(8px + var(--safe-top)); }
#app.compact .logo { margin-top: -30px; }
#app.compact .logo-color { font-size: clamp(36px, 13cqh, 64px); }
#app.compact .logo-color span { -webkit-text-stroke-width: 4px; }
#app.compact .logo-flask { font-size: clamp(24px, 8cqh, 40px); padding: 0 22px 4px; }
#app.compact .logo-sub { display: none; }
#app.compact .title-buttons { margin-top: 12px; gap: 12px; }
#app.compact .btn-big { min-height: 54px; font-size: 24px; padding: 6px 34px; }
#app.compact .btn { min-height: 46px; font-size: 18px; }

#app.compact .screen-head { padding-top: calc(6px + var(--safe-top)); }
#app.compact .screen-head h2 { font-size: 22px; }
#app.compact .level-grid { width: min(94cqw, 760px); gap: 10px; margin-top: 8px; }
#app.compact .level-tile { font-size: 18px; border-radius: 14px; }
#app.compact .level-tile .stars { height: 11px; }
#app.compact .level-tile .stars svg { width: 11px; height: 11px; }
#app.compact .pager { margin-bottom: calc(8px + var(--safe-bottom)); font-size: 18px; }
#app.compact .tabs { margin: 4px 0; }
#app.compact .shop-grid { padding-bottom: 16px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
#app.compact .shop-banner { display: none; }

#app.compact .panel { width: min(94cqw, 560px); max-height: 96cqh; padding: 12px 16px 14px; gap: 9px; }
#app.compact .panel p { font-size: 15px; }
#app.compact .panel .inner { padding: 10px; gap: 6px; }
#app.compact .setting-row { font-size: 15px; gap: 8px; }
#app.compact .setting-row input[type=range] { width: 70px; }
#app.compact .mode-option { min-height: 40px; }
#app.compact .panel .btn-big { min-height: 50px; font-size: 22px; }
#app.compact .win-stars { height: 46px; }
#app.compact .win-stars svg { width: 36px; height: 36px; }
#app.compact .win-stars svg:nth-child(2) { width: 46px; height: 46px; }
#app.compact .reward-total { font-size: 26px; }
#app.compact .panel canvas.unlock-preview { width: 110px; height: 110px; }

/* ---------- narrow frames ---------- */
#app.narrow .tool-btn { width: 60px; height: 62px; }
#app.narrow .tool-btn svg { width: 24px; height: 24px; }
#app.narrow .hud-bottom { gap: 8px; }
#app.narrow #hud-level { font-size: 19px; padding: 3px 12px 5px; }
#app.narrow .coin-pill { min-width: 0; height: 40px; padding: 0 12px 0 7px; font-size: 17px; }
#app.narrow .icon-btn { width: 42px; height: 42px; padding: 10px; }
#app.narrow .btn-row { gap: 10px; }
#app.narrow .btn-row .btn { min-height: 50px; font-size: 18px; padding: 8px 14px; gap: 7px; }
#app.narrow .btn-row .btn svg { width: 20px; height: 20px; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }