/*
 * Portrait casual-game art direction.
 * Authored around a 1080 x 1920 reference canvas and scaled to CSS pixels.
 */
:root {
  --portrait-width: 1080px;
  --candy-navy: #171442;
  --candy-purple: #5525ce;
  --candy-purple-dark: #2a127e;
  --candy-pink: #ff35b4;
  --candy-lime: #7df31b;
  --candy-lime-dark: #2e9f08;
  --candy-cyan: #42d7ff;
  --candy-sky: #8fe8ff;
  --panel-radius: 26px;
  --scene-gutter: clamp(12px, 4.45cqw, 48px);
}

html { background: #151236; }
html,
body { width:100%; height:100%; overflow:hidden; }
body {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(102,72,238,.34), transparent 28rem),
    radial-gradient(circle at 82% 72%, rgba(42,202,255,.2), transparent 34rem),
    #100d2a;
}

.app-shell {
  container-type: size;
  container-name: portrait-game;
  width: min(100cqw, calc(var(--app-height, 100dvh) * .5625), var(--portrait-width));
  height: min(var(--app-height, 100dvh), calc(100cqw * 1.7777778), 1920px);
  min-height: 0;
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(circle at 50% -8%, rgba(84,219,255,.48), transparent 34%),
    linear-gradient(180deg, #352a8e 0%, #241d68 30%, #171541 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 90px rgba(3,2,23,.78);
}

.app-shell::before {
  opacity: .16;
  background-image:
    radial-gradient(circle at 16px 16px, rgba(255,255,255,.3) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,.045) 25%, transparent 25% 75%, rgba(255,255,255,.045) 75%);
  background-size: 44px 44px, 62px 62px;
  mask-image: linear-gradient(#000, transparent 82%);
}

.scene { width: 100%; max-width: var(--portrait-width); height:100%; min-height:100%; overflow-y:auto; }
#titleScene,
#levelScene,
#gameScene,
#editorScene { height:100%; min-height:100%; }
.eyebrow { color: #d9f9ff; text-shadow: 0 2px 0 #137dba, 0 4px 12px rgba(0,0,0,.28); }

/* Candy-plastic controls ---------------------------------------------------- */
.brick-button,
.round-action,
.icon-button,
.level-step-button,
.settings-button {
  border: 2px solid rgba(255,255,255,.68);
  background: linear-gradient(180deg,#9c66ff 0 9%,#7040e9 10% 68%,#4e23b8 69% 100%);
  box-shadow: inset 0 3px rgba(255,255,255,.42), inset 0 -7px rgba(42,12,116,.32), 0 7px #2b137a, 0 12px 20px rgba(18,8,61,.34);
  text-shadow: 0 2px 0 rgba(36,12,104,.8);
}

.brick-button--primary,
#startButton {
  border-color: #eaffae;
  color: #245c04;
  background: linear-gradient(180deg,#d8ff5b 0 8%,#8dff19 9% 63%,#62d908 64% 100%);
  box-shadow: inset 0 4px rgba(255,255,255,.75), inset 0 -8px rgba(50,145,0,.24), 0 8px #238c05, 0 16px 28px rgba(23,92,11,.3);
  text-shadow: 0 2px 0 #dfff9c;
}

.brick-button:active,
.round-action:active,
.settings-button:active { transform: translateY(6px); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 2px #291171; }

/* Title -------------------------------------------------------------------- */
#titleScene {
  background:
    radial-gradient(circle at 12% 19%, rgba(255,255,255,.88) 0 4%, transparent 4.4%),
    radial-gradient(circle at 92% 27%, rgba(255,255,255,.72) 0 5%, transparent 5.4%),
    linear-gradient(180deg,#40ceff 0%,#7beaff 43%,#8adfff 60%,#7358e9 100%);
}

#titleScene::before,
#titleScene::after {
  position: absolute;
  z-index: 0;
  width: 46%;
  height: 11%;
  border-radius: 999px;
  content: "";
  opacity: .88;
  background: rgba(255,255,255,.86);
  filter: blur(1px);
  box-shadow: 54px 10px 0 -16px rgba(255,255,255,.9), -42px 17px 0 -19px rgba(255,255,255,.84);
}
#titleScene::before { top: 8%; left: -16%; }
#titleScene::after { top: 67%; right: -19%; transform: scale(.8); }

.title-content { width: min(100%,940px); min-height: min(78%,1420px); }
#titleScene .eyebrow { color: #173568; }
#titleScene h1 {
  position: relative;
  z-index: 1;
  width: min(88cqw,900px);
  margin-bottom: clamp(28px,4.5cqh,46px);
  padding: clamp(30px,5cqh,52px) clamp(20px,5cqw,38px);
  gap: 5px;
  font-size: clamp(66px,14cqw,148px);
  line-height: .78;
  filter: drop-shadow(0 18px 20px rgba(27,14,100,.36));
}

#titleScene h1::before {
  position: absolute;
  z-index: -1;
  inset: 4% -1% -3%;
  border: 7px solid #30117d;
  border-radius: 38% 31% 34% 29% / 31% 37% 29% 40%;
  content: "";
  background: linear-gradient(155deg,#8549f0,#5421bb 60%,#34117f);
  box-shadow: inset 0 5px rgba(255,255,255,.24), inset 0 -10px rgba(29,7,94,.28), 0 10px #21085c;
  transform: rotate(-2deg);
}

#titleScene h1 .title-word {
  display: flex;
  justify-content: center;
  gap: .01em;
  color: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.title-word i {
  display: inline-block;
  font-style: normal;
  -webkit-text-stroke: clamp(2px,.7cqw,5px) rgba(255,255,255,.28);
  filter: drop-shadow(0 6px 0 var(--letter-shadow)) drop-shadow(0 10px 5px rgba(35,5,80,.28));
  transform: rotate(var(--tilt,0deg));
}
.title-word i:nth-child(1) { color:#ff3f54; --letter-shadow:#a3132b; --tilt:-5deg; }
.title-word i:nth-child(2) { color:#ffd21f; --letter-shadow:#bf7a00; --tilt:2deg; }
.title-word i:nth-child(3) { color:#75e62b; --letter-shadow:#258e18; --tilt:-2deg; }
.title-word i:nth-child(4) { color:#38c8ff; --letter-shadow:#1075b6; --tilt:4deg; }
.title-word i:nth-child(5) { color:#ff8c17; --letter-shadow:#b84700; --tilt:5deg; }
.title-word:last-child i:nth-child(1) { color:#ff58ca; --letter-shadow:#a81878; }
.title-word:last-child i:nth-child(2) { color:#43d8ff; --letter-shadow:#107eb6; }
.title-word:last-child i:nth-child(3) { color:#93ed29; --letter-shadow:#2e9812; }
.title-word:last-child i:nth-child(4) { color:#ffd126; --letter-shadow:#b97800; }

.title-copy { color:#183663; text-shadow:0 2px rgba(255,255,255,.5); }
#startButton {
  width:min(420px,68%);
  min-height:clamp(58px,7cqw,76px);
  border-width:2px;
  border-radius:clamp(15px,2cqw,22px);
  font-size:clamp(19px,2.6cqw,28px);
  animation:none;
  box-shadow:inset 0 3px rgba(255,255,255,.58),inset 0 -5px rgba(50,145,0,.18),0 6px #238c05,0 11px 18px rgba(23,92,11,.22);
}
#startButton .button-studs { display:none; }
.title-footer { color:rgba(22,47,93,.72); text-shadow:none; }
.title-bricks { z-index:1; opacity:.74; filter:saturate(1.12); }
.floating-brick:nth-child(n) { display:block; }

/* Blocks and board ---------------------------------------------------------- */
.game-board,
.editor-board {
  --board-pad: clamp(7px,1.7cqw,11px);
  gap: clamp(3px,.75cqw,5px);
  border: clamp(8px,2cqw,13px) solid #6c3de0;
  border-radius: clamp(21px,5cqw,32px);
  background: radial-gradient(circle at 50% 20%,rgba(78,65,173,.32),transparent 60%),#171342;
  box-shadow: inset 0 6px 13px #0d092f, inset 0 0 0 3px rgba(255,255,255,.13), 0 8px #31147f, 0 17px 30px rgba(17,7,55,.45);
}

.brick-cell,
.editor-cell {
  --plate-radius: clamp(5px,1.5cqw,10px);
  border-width: 1px;
  background: linear-gradient(145deg,rgba(255,255,255,.72) 0 3%,rgba(255,255,255,.24) 12%,transparent 33%),linear-gradient(180deg,color-mix(in srgb,var(--brick-face),white 20%) 0 68%,var(--brick-face) 69% 82%,var(--brick-rim) 83% 100%);
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.46), inset -2px -2px 2px rgba(0,0,0,.12), 0 3px 0 var(--brick-rim), 0 5px 5px rgba(7,2,35,.42);
}

.brick-cell::before,
.editor-cell::before {
  inset: 22%;
  border-radius: 36%;
  background: linear-gradient(145deg,rgba(255,255,255,.48),transparent 38%),color-mix(in srgb,var(--brick-face),white 7%);
  box-shadow: inset 1px 1px rgba(255,255,255,.55), inset -2px -2px color-mix(in srgb,var(--brick-face),black 22%), 0 2px 2px rgba(0,0,0,.2);
}
.brick-cell::after,
.editor-cell::after { inset:3px 3px 6px; opacity:.5; }
.brick-cell.color-empty,
.editor-cell.color-empty { background:#211b56; box-shadow:inset 2px 3px 5px rgba(7,4,32,.66),inset -1px -1px rgba(150,133,255,.08); }

/* Game portrait composition ------------------------------------------------ */
#gameScene {
  display:flex;
  height:100%;
  min-height:100%;
  padding:max(12px,env(safe-area-inset-top)) var(--scene-gutter) max(14px,env(safe-area-inset-bottom));
  flex-direction:column;
  background:linear-gradient(180deg,#3e2e99 0%,#292074 34%,#1a174b 100%);
}

.game-header {
  display:grid;
  width:100%;
  min-height:clamp(56px,12.2cqw,132px);
  margin:0 auto clamp(12px,1.8cqh,18px);
  grid-template-columns:1.55fr .82fr .82fr .58fr;
  gap:clamp(5px,1.65cqw,18px);
}

.game-level-nav,
.move-counter,
.coin-counter,
.settings-button {
  min-width:0;
  min-height:clamp(52px,11cqw,118px);
  border:2px solid rgba(255,255,255,.52);
  border-radius:clamp(15px,3cqw,32px);
  background:linear-gradient(180deg,#8058ef,#5630cb);
  box-shadow:inset 0 3px rgba(255,255,255,.28),inset 0 -6px rgba(35,12,108,.25),0 6px #27106f;
}
.game-level-nav { display:grid; padding:clamp(3px,.8cqw,9px); grid-template-columns:clamp(24px,4.6cqw,50px) 1fr clamp(24px,4.6cqw,50px); align-items:center; gap:2px; }
.game-level-heading { display:flex; min-width:0; padding:0; border:0; align-items:center; justify-content:center; flex-direction:column; color:#fff; background:transparent; }
.game-level-heading span,
.move-counter span { display:block; color:#e9e2ff; font-size:clamp(7px,1.55cqw,17px); font-weight:1000; letter-spacing:.12em; }
.game-level-heading strong { font-size:clamp(22px,4.6cqw,50px); line-height:1; text-shadow:0 3px #321085; }
.level-step-button { width:100%; min-width:0; min-height:clamp(36px,7.6cqw,82px); border:0; border-radius:clamp(10px,1.8cqw,20px); background:rgba(37,13,110,.3); box-shadow:none; font-size:clamp(19px,4cqw,42px); }
.move-counter { display:flex; padding:6px; align-items:center; justify-content:center; flex-direction:column; gap:2px; }
.move-counter strong { color:#fff43b; font-size:clamp(22px,4.8cqw,52px); text-shadow:0 3px #af6500; }
.coin-counter { display:flex; padding:7px 5px; align-items:center; justify-content:center; gap:5px; }
.coin-counter span { display:grid; width:clamp(18px,4cqw,43px); aspect-ratio:1; place-items:center; border:2px solid #fff3a5; border-radius:50%; color:#fff77e; background:linear-gradient(#ffd92d,#ff9d0a); box-shadow:inset 0 2px rgba(255,255,255,.65),0 2px #a84e00; font-size:clamp(8px,1.6cqw,17px); }
.coin-counter strong { overflow:hidden; font-size:clamp(14px,3.4cqw,36px); text-overflow:ellipsis; text-shadow:0 2px #2f147b; }
.settings-button { display:grid; padding:0; place-items:center; color:#fff; font-size:clamp(22px,5cqw,54px); }

.game-layout {
  display:flex;
  width:100%;
  margin:0 auto;
  flex:1;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  gap:clamp(11px,1.8cqh,18px);
}

.target-card,
#gameScene.is-target-open .target-card {
  position:relative;
  z-index:2;
  top:auto;
  left:auto;
  display:grid !important;
  width:100%;
  min-height:clamp(92px,24cqw,260px);
  margin:0;
  padding:clamp(8px,2.6cqw,28px) clamp(10px,3.4cqw,38px);
  grid-template-columns:minmax(64px,.72fr) clamp(72px,20.5cqw,222px) minmax(116px,1.35fr);
  grid-template-rows:auto 1fr;
  align-items:center;
  gap:clamp(4px,1cqw,11px) clamp(8px,2.4cqw,26px);
  overflow:hidden;
  border:3px solid #8d69f4;
  border-radius:clamp(19px,4.25cqw,46px);
  background:linear-gradient(145deg,#6834d4,#43209d);
  box-shadow:inset 0 4px rgba(255,255,255,.22),inset 0 -7px rgba(30,8,91,.26),0 7px #26106a,0 13px 24px rgba(15,6,49,.34);
  transform:none;
}
.target-label { margin:0; grid-column:1; grid-row:1; align-self:end; }
.target-label span { color:#fff; font-size:clamp(9px,2.3cqw,25px); }
.target-label i { color:#fff642; font-size:clamp(11px,2.8cqw,30px); }
.target-card > .mini-board,
.target-preview-wrap { width:clamp(68px,19.5cqw,210px); grid-column:2; grid-row:1/3; }
.target-card .mini-board { width:100%; padding:5px; gap:1px; border:2px solid rgba(255,255,255,.26); border-radius:12px; background:#211059; }
.target-card .mini-board .mini-cell.is-filled { background:var(--brick-face,#fff); box-shadow:inset 0 1px rgba(255,255,255,.5),0 1px rgba(16,4,62,.6); }
.target-stars { margin:0; grid-column:3; grid-row:1/3; gap:clamp(2px,.6cqw,7px); color:#eeeaff; font-size:clamp(7px,1.75cqw,19px); }
.target-stars span { min-height:clamp(16px,4.3cqw,46px); padding:2px clamp(4px,1.2cqw,13px); align-items:center; border-radius:clamp(7px,1.4cqw,15px); background:rgba(26,7,90,.24); }
.target-stars b { color:#fff13c; font-size:clamp(8px,2cqw,22px); }
.stage-progress { margin:2px 0 0; grid-column:1; grid-row:2; }
.stage-next,.confirm-budget { display:none; }
.target-close,.target-backdrop { display:none !important; }

.board-stage { width:100%; flex:0 1 auto; }
.game-board {
  width:min(calc(100cqw - 2 * var(--scene-gutter)),calc(var(--app-height,100dvh) * .5125),984px);
  max-width:100%;
}
.board-shadow { bottom:-12px; height:26px; }

[data-mobile-dock].game-actions,
.game-actions {
  position:static;
  display:grid;
  width:100%;
  min-height:clamp(64px,14.8cqw,160px);
  margin:0;
  padding:clamp(6px,1.7cqw,18px) clamp(7px,5.2cqw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(7px,5cqw,54px);
  border:2px solid rgba(163,140,255,.42);
  border-radius:clamp(19px,3.9cqw,42px);
  background:rgba(38,21,101,.76);
  box-shadow:inset 0 2px rgba(255,255,255,.12),0 7px #160b48;
  backdrop-filter:blur(12px);
}
.round-action { width:100%; min-width:0; min-height:clamp(52px,11.5cqw,124px); max-height:none; aspect-ratio:auto; border-radius:clamp(15px,3cqw,32px); gap:2px; }
.round-action span { color:#fff; font-size:clamp(21px,4.8cqw,52px); }
.round-action b { font-size:clamp(7px,1.8cqw,19px); letter-spacing:.09em; }
.round-action--target { display:none !important; }
.gesture-guide,.game-dev-tools { display:none !important; }

/* Level select -------------------------------------------------------------- */
#levelScene { background:linear-gradient(180deg,#49d6ff,#7661ef 42%,#29206f); }
#levelScene .scene-header h2 { color:#fff; text-shadow:0 4px #2d1687; }
.progress-panel { border:3px solid #8e6df2; background:linear-gradient(145deg,#6737d4,#3b2093); box-shadow:inset 0 3px rgba(255,255,255,.2),0 7px #25106c; }
.progress-panel strong { color:#fff33f; text-shadow:0 3px #a55b00; }
.progress-track { background:#24105f; }
.progress-track i { background:linear-gradient(90deg,#7aff23,#e8ff43); }
.level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.level-card { border:3px solid #8b66ed; border-radius:25px; background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.22),transparent 35%),linear-gradient(145deg,#6e3ee0,#412098); box-shadow:inset 0 4px rgba(255,255,255,.2),inset 0 -9px rgba(28,7,87,.2),0 7px #26106d,0 15px 26px rgba(15,6,50,.25); }
.level-card.is-cleared { border-color:#dfff55; }
.level-number { color:#fff541; text-shadow:0 3px #ad5f00,0 7px 12px rgba(28,7,87,.4); }
.level-name { color:#f1eaff; }
.level-silhouette { border-color:rgba(255,255,255,.25); background:#25125d; }

/* Results and settings ------------------------------------------------------ */
.result-overlay,
.settings-overlay {
  position:fixed;
  z-index:100;
  inset:0;
  display:grid;
  width:100%;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  place-items:center;
  opacity:0;
  background:rgba(20,8,65,.72);
  backdrop-filter:blur(12px) saturate(1.2);
}
.result-overlay.is-visible,
.settings-overlay.is-visible { opacity:1; animation:overlay-in .24s ease-out both; }
.result-card,
.settings-card {
  position:relative;
  width:min(86cqw,850px);
  padding:54px 24px 27px;
  overflow:visible;
  border:5px solid #8f5cff;
  border-radius:42px;
  text-align:center;
  background:repeating-conic-gradient(from -12deg at 50% 36%,rgba(255,255,255,.08) 0 8deg,transparent 8deg 18deg),linear-gradient(155deg,#7b3df1,#4c1fc3 65%,#35128d);
  box-shadow:inset 0 5px rgba(255,255,255,.24),inset 0 -12px rgba(32,7,104,.24),0 10px #240969,0 30px 60px rgba(12,3,47,.58);
  animation:result-pop .5s var(--ease-brick) both;
}
.result-card::before,
.settings-card::before {
  position:absolute;
  top:-24px;
  left:50%;
  width:min(74%,300px);
  height:58px;
  border:4px solid #ff8bd7;
  border-radius:18px;
  content:"";
  background:linear-gradient(#ff52c2,#ef159b);
  box-shadow:inset 0 4px rgba(255,255,255,.48),0 6px #9e0868;
  transform:translateX(-50%) rotate(-1deg);
}
.result-card::after { border-color:rgba(255,255,255,.11); box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.016); }
.result-kicker { z-index:2; margin-bottom:10px; border-color:rgba(255,255,255,.24); color:#fff; background:rgba(38,8,116,.3); }
.result-card h2,
.settings-card h2 { margin:0; color:#fff33b; font-size:clamp(42px,12cqw,68px); text-shadow:0 4px #b35d00,0 9px 18px rgba(33,7,100,.45); }
.result-stars { border:0; background:rgba(32,8,105,.43); box-shadow:inset 0 4px 10px rgba(18,3,72,.33); }
.result-summary { color:#fff; font-size:15px; }
.result-actions { gap:12px; }
.result-actions .brick-button { border-radius:18px; }
.result-overlay.is-failure .result-card { border-color:#ff6f9f; background:linear-gradient(155deg,#b63a77,#6b1859); }
.result-overlay.is-final .result-card { border-color:#ffef58; background:repeating-conic-gradient(from -12deg at 50% 36%,rgba(255,255,255,.09) 0 8deg,transparent 8deg 18deg),linear-gradient(155deg,#7a3ff0,#4720bc 65%,#321487); }
.settings-overlay { z-index:110; }
.settings-card { display:grid; gap:16px; }
.settings-card h2 { margin-bottom:14px; font-size:clamp(37px,10cqw,56px); }
.settings-card .brick-button { width:100%; border-radius:18px; }

/* Editor -------------------------------------------------------------------- */
#editorScene { background:linear-gradient(180deg,#45d4ff,#6651df 28%,#241b65); }
.editor-canvas-card,.editor-settings { border:3px solid #8a67ec; background:linear-gradient(145deg,rgba(103,58,213,.96),rgba(54,27,133,.96)); box-shadow:inset 0 3px rgba(255,255,255,.18),0 7px #241068; }
.editor-tool.is-active { border-color:#eaff98; color:#265e05; background:linear-gradient(#caff51,#79eb17); box-shadow:inset 0 3px rgba(255,255,255,.58),0 5px #2c9a08; }
.editor-settings input,.editor-settings select,.editor-output { border-color:rgba(255,255,255,.24); background:#27125f; }

/* Narrow portrait tuning --------------------------------------------------- */
@media (max-width:700px) {
  .app-shell { max-width:100%; }
  .scene { max-width:none; }
  #titleScene { height:100%; min-height:100%; }
  #titleScene h1 { font-size:clamp(57px,18.5cqw,92px); }
  .title-bricks { opacity:.58; }
  .floating-brick:nth-child(n) { display:block; }
  .game-header { min-height:56px; margin-bottom:10px; gap:5px; }
  .game-level-nav,.move-counter,.coin-counter,.settings-button { min-height:52px; border-radius:15px; }
  .game-level-nav { grid-template-columns:24px 1fr 24px; padding:3px; }
  .level-step-button { width:24px; min-width:24px; min-height:36px; font-size:18px; }
  .game-level-heading span,.move-counter span { display:block; font-size:6.5px; }
  .game-level-heading strong,.move-counter strong { font-size:21px; }
  .coin-counter span { width:18px; }
  .coin-counter strong { font-size:13px; }
  .settings-button { font-size:22px; }
  .target-card,#gameScene.is-target-open .target-card { min-height:92px; padding:8px 10px; grid-template-columns:minmax(53px,.7fr) 72px minmax(103px,1.4fr); gap:4px 8px; border-radius:19px; }
  .target-card > .mini-board,.target-preview-wrap { width:68px; }
  .target-label span { font-size:9px; }
  .target-label i { font-size:11px; }
  .target-stars { font-size:7px; }
  .target-stars span { min-height:16px; padding:1px 4px; }
  .target-stars b { font-size:8px; }
  .game-board { width:min(calc(100cqw - 2 * var(--scene-gutter)),calc(var(--app-height,100dvh) * .5),520px); }
  [data-mobile-dock].game-actions,.game-actions { min-height:64px; padding:6px; gap:7px; border-radius:19px; }
  .round-action { min-height:52px; border-radius:15px; }
  .result-overlay { align-items:center; }
  .result-card { width:min(100%,430px); padding:46px 18px 22px; border-radius:34px; }
  .result-card h2 { font-size:clamp(40px,13cqw,58px); }
  .result-stars { min-height:64px; margin-top:18px; }
}

@media (max-width:360px), (max-height:720px) and (orientation:portrait) {
  #gameScene { padding-inline:9px; }
  .game-layout { gap:8px; }
  .target-card,#gameScene.is-target-open .target-card { min-height:78px; grid-template-columns:48px 58px 1fr; padding:6px 8px; }
  .target-label { align-self:center; align-items:flex-start; flex-direction:column; gap:1px; }
  .target-card > .mini-board,.target-preview-wrap { width:56px; }
  .target-stars span:nth-child(3) { display:none; }
  .game-board { width:min(calc(100cqw - 18px),calc(var(--app-height,100dvh) * .47)); }
  [data-mobile-dock].game-actions,.game-actions { min-height:57px; padding:5px; }
  .round-action { min-height:46px; }
}

@media (orientation:landscape) and (max-height:520px) {
  #gameScene { overflow:auto; }
  .game-layout { padding-bottom:12px; }
}

/* Compact target: silhouette first, percentage only. ----------------------- */
.target-card,
#gameScene.is-target-open .target-card {
  position:relative;
  inset:auto;
  display:grid !important;
  width:100%;
  min-height:clamp(76px,20cqw,216px);
  padding:0;
  grid-template-columns:clamp(68px,19.5cqw,210px) auto;
  grid-template-rows:1fr;
  justify-content:center;
  align-items:start;
  gap:clamp(6px,1.3cqw,14px);
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  transform:none;
}
.target-card > .mini-board,
.target-preview-wrap {
  width:clamp(68px,19.5cqw,210px);
  grid-column:1;
  grid-row:1;
}
.target-card .mini-board {
  padding:0;
  gap:1px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.target-card .mini-board > * { background:transparent; }
.target-label {
  position:static;
  grid-column:2;
  grid-row:1;
  align-self:start;
  margin:clamp(3px,.8cqw,8px) 0 0;
}
.target-label i {
  color:rgba(255,255,255,.78);
  font-size:clamp(9px,1.6cqw,17px);
}
.target-stars,
.stage-progress,
.stage-next,
.confirm-budget { display:none !important; }

/* Settings: one clean panel, persisted sound switch and direct home action. */
.settings-card { padding:clamp(26px,7cqw,52px) clamp(20px,5cqw,38px) clamp(24px,6cqw,44px); }
.settings-card::before { display:none; }
.settings-card h2 { margin-bottom:clamp(8px,2cqw,16px); }
.sound-toggle {
  display:flex;
  width:100%;
  min-height:clamp(54px,14cqw,88px);
  padding:0 clamp(16px,4cqw,28px);
  align-items:center;
  justify-content:space-between;
  border:3px solid rgba(255,255,255,.34);
  border-radius:18px;
  color:#fff;
  font:900 clamp(15px,4cqw,25px)/1 var(--font-display);
  letter-spacing:.06em;
  background:rgba(31,10,101,.52);
  box-shadow:inset 0 3px rgba(255,255,255,.12),0 5px rgba(27,7,83,.52);
}
.sound-toggle strong {
  min-width:clamp(58px,16cqw,104px);
  padding:9px 12px;
  border-radius:999px;
  color:#235800;
  background:linear-gradient(#dfff5f,#78ec17);
  box-shadow:inset 0 3px rgba(255,255,255,.5),0 4px #329709;
}
.sound-toggle[aria-checked="false"] strong {
  color:#e9e4f8;
  background:linear-gradient(#6e638d,#44385f);
  box-shadow:inset 0 3px rgba(255,255,255,.13),0 4px #281d43;
}

/* A committed line may refresh, but the board frame itself stays fixed. */
.game-board.is-release-impact { animation:none !important; }
.move-counter.is-low strong { color:#ff425f; text-shadow:0 2px #7b1022; }

/* Temporary result-flow controls; later this surface can move into admin UI. */
.game-dev-tools {
  position:absolute;
  z-index:75;
  right:clamp(8px,2cqw,22px);
  bottom:clamp(8px,2cqw,22px);
  display:flex !important;
  padding:5px;
  align-items:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  background:rgba(20,10,64,.82);
  box-shadow:0 5px 16px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
}
.game-dev-tools > span { padding:0 4px; color:#c8bff3; font-size:7px; font-weight:900; letter-spacing:.08em; }
.game-dev-tools button {
  min-width:0;
  min-height:27px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:7px;
  color:#fff;
  font-size:8px;
  font-weight:1000;
}
.test-success-button { background:#36a819; }
.test-failure-button { background:#c62c51; }

/* The editor remains a desktop web workspace, independent of the 9:16 game. */
body[data-scene="editor"] {
  display:block;
  min-width:1100px;
  overflow:auto;
  background:#151236;
}
body[data-scene="editor"] .app-shell {
  width:100%;
  height:auto;
  min-width:1100px;
  min-height:100svh;
  max-width:none;
  aspect-ratio:auto;
  container-type:inline-size;
  box-shadow:none;
}
body[data-scene="editor"] #editorScene {
  width:100%;
  height:auto;
  min-width:1100px;
  min-height:100svh;
  max-width:none;
  padding:24px;
  overflow:visible;
}
body[data-scene="editor"] .editor-layout {
  width:min(1180px,calc(100% - 48px));
  grid-template-columns:minmax(650px,1fr) 360px;
  gap:28px;
}
body[data-scene="editor"] .editor-board { width:540px; max-width:540px; }
body[data-scene="editor"] .editor-settings { max-height:calc(100svh - 118px); }
body[data-scene="editor"] .editor-action-dock {
  display:grid;
  width:min(1180px,calc(100% - 48px));
  margin:22px auto 34px;
  padding:18px 20px;
  grid-template-columns:minmax(240px,1fr) minmax(570px,1.4fr);
  align-items:center;
  gap:24px;
  border:3px solid #8a67ec;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(103,58,213,.96),rgba(54,27,133,.96));
  box-shadow:inset 0 3px rgba(255,255,255,.18),0 7px #241068,0 18px 32px rgba(15,6,49,.28);
}
.editor-action-copy { display:grid; gap:5px; }
.editor-action-copy strong { color:#fff541; font-size:18px; text-shadow:0 2px #9a5700; }
.editor-action-copy span { color:#ddd4ff; font-size:11px; font-weight:700; }
body[data-scene="editor"] .editor-action-dock .editor-buttons {
  position:static;
  display:grid;
  padding:0;
  grid-template-columns:.72fr 1.18fr 1fr;
  gap:12px;
  background:none;
}
.editor-action-dock .brick-button { min-width:0; min-height:58px; padding-inline:14px; }
.editor-publish-button {
  border-color:#ffe898;
  color:#572600;
  background:linear-gradient(180deg,#ffe96a,#ffb51d 68%,#ef8610);
  box-shadow:inset 0 4px rgba(255,255,255,.65),inset 0 -7px rgba(168,70,0,.2),0 7px #a94b00,0 13px 22px rgba(83,30,0,.25);
  text-shadow:0 2px rgba(255,245,164,.75);
}
.editor-publish-button:disabled { opacity:.58; filter:saturate(.6); }

/* Polished temporary test controls. */
.game-dev-tools {
  width:clamp(230px,48cqw,320px);
  grid-template-columns:auto minmax(76px,1fr) minmax(76px,1fr);
}
.game-dev-tools button {
  width:100%;
  min-width:76px;
  padding-inline:7px;
  white-space:nowrap;
}
body:not(.is-admin) .game-dev-tools,
.game-dev-tools[hidden] { display:none !important; }

/* One-card-at-a-time level carousel. */
#levelScene { overflow:hidden; }
.level-grid {
  display:flex;
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(10px,2cqh,24px) var(--scene-gutter) clamp(32px,5cqh,70px);
  grid-template-columns:none;
  gap:clamp(18px,4cqw,44px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--scene-gutter);
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
}
.level-grid::-webkit-scrollbar { display:none; }
.level-card {
  flex:0 0 calc(100% - 2 * var(--scene-gutter));
  max-width:none;
  aspect-ratio:auto;
  min-height:clamp(330px,86cqw,920px);
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.level-number {
  top:clamp(18px,4cqw,42px);
  left:clamp(20px,5cqw,54px);
  font-size:clamp(42px,10cqw,105px);
}
.level-name {
  top:clamp(27px,6.2cqw,67px);
  left:clamp(92px,22cqw,238px);
  color:#fff;
  font-size:clamp(14px,3.2cqw,34px);
  text-shadow:0 2px #2d147f;
}
.level-silhouette { width:clamp(180px,48cqw,520px); }
.level-stars { bottom:clamp(18px,4cqw,44px); }

/* Result popup: title and primary action only. */
.result-kicker,
.result-summary { display:none !important; }
.result-overlay.is-final .result-summary {
  display:block !important;
  margin:12px 0 20px;
  color:#fff;
  font-size:clamp(13px,3.8cqw,17px);
  font-weight:900;
  line-height:1.65;
  text-align:center;
  text-shadow:0 2px 3px rgba(35,8,98,.55);
}
.result-card h2 {
  position:absolute;
  z-index:3;
  top:-18px;
  left:50%;
  width:min(74%,300px);
  margin:0;
  color:#fff;
  font-size:clamp(25px,7cqw,44px);
  line-height:52px;
  white-space:nowrap;
  text-shadow:0 3px #a3086d,0 6px 12px rgba(67,4,65,.3);
  transform:translateX(-50%) rotate(-1deg);
}
.result-actions.is-retry-only { grid-template-columns:1fr; }
.result-actions.is-retry-only .brick-button { width:100%; }

/* Percentage visually belongs to the silhouette without adding a backplate. */
.target-card,
#gameScene.is-target-open .target-card {
  grid-template-columns:clamp(68px,19.5cqw,210px) clamp(52px,13cqw,140px);
  gap:clamp(12px,3cqw,32px);
}
.target-label {
  align-self:center;
  justify-self:start;
  margin:0;
}
.target-label i {
  color:#fff;
  font-size:clamp(17px,4cqw,42px);
  font-weight:1000;
  letter-spacing:-.03em;
  -webkit-text-stroke:clamp(1px,.45cqw,4px) #32127e;
  paint-order:stroke fill;
  text-shadow:0 3px 0 #1d0a59,0 7px 14px rgba(13,5,48,.42);
}

/* Restore spatial context: a separated target panel with the full 9x9 grid. */
.target-card,
#gameScene.is-target-open .target-card {
  min-height:clamp(94px,24cqw,258px);
  padding:clamp(9px,2.2cqw,24px) clamp(12px,3cqw,32px);
  align-items:center;
  overflow:hidden;
  border:3px solid #8d69f4;
  border-radius:clamp(18px,4cqw,42px);
  background:linear-gradient(145deg,rgba(105,55,218,.96),rgba(63,29,151,.96));
  box-shadow:inset 0 4px rgba(255,255,255,.2),inset 0 -7px rgba(28,7,88,.24),0 7px #26106a,0 14px 24px rgba(16,6,54,.28);
}
.target-card > .mini-board,
.target-preview-wrap {
  width:clamp(74px,20.5cqw,222px);
}
.target-card .mini-board {
  padding:clamp(5px,1.25cqw,13px);
  gap:clamp(1px,.28cqw,3px);
  border:2px solid rgba(205,190,255,.58);
  border-radius:clamp(10px,2.2cqw,24px);
  background:#211052;
  box-shadow:inset 0 3px 8px rgba(10,3,45,.62),0 3px rgba(255,255,255,.11);
}
.target-card .mini-board > .mini-cell {
  border:1px solid rgba(180,160,242,.11);
  border-radius:clamp(1px,.3cqw,4px);
  background:rgba(154,130,225,.13);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.target-card .mini-board > .mini-cell.is-filled {
  border-color:color-mix(in srgb,var(--brick-face,#fff),white 34%);
  background:var(--brick-face,#fff);
  box-shadow:inset 0 1px rgba(255,255,255,.58),inset 0 -2px rgba(32,8,90,.16),0 1px 2px rgba(10,3,45,.7);
}
.target-label {
  min-width:clamp(58px,14cqw,150px);
  min-height:clamp(46px,11cqw,118px);
  padding:clamp(6px,1.4cqw,15px);
  justify-content:center;
  border-left:2px solid rgba(215,200,255,.26);
}

/* Three-digit level selector with a full-size, candy-button hit area. */
.game-level-nav {
  display:grid;
  width:100%;
  padding:clamp(3px,.8cqw,9px);
  grid-template-columns:clamp(24px,4.6cqw,50px) minmax(4.8em,1fr) clamp(24px,4.6cqw,50px);
  align-items:center;
  gap:2px;
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.game-level-heading {
  display:flex;
  width:100%;
  min-width:4.8em;
  min-height:100%;
  align-self:stretch;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:2px;
  background:transparent;
}
.game-level-heading > span { margin:0; line-height:.8; }
.game-level-heading strong {
  display:block;
  width:3.8ch;
  min-width:3.8ch;
  text-align:center;
  font-variant-numeric:tabular-nums;
  line-height:.92;
  letter-spacing:0;
}
.game-level-nav .level-step-button {
  display:grid;
  place-items:center;
  pointer-events:none;
}
.game-level-nav .level-step-button.is-disabled { opacity:.28; filter:grayscale(.7); }
.game-level-nav:active {
  filter:brightness(.94);
  box-shadow:inset 0 5px rgba(35,10,105,.36),inset 0 -2px rgba(255,255,255,.1),0 2px #27106f;
  transform:translateY(5px);
}
@media (max-width:700px) {
  .game-level-nav { grid-template-columns:24px minmax(58px,1fr) 24px; }
  .game-level-heading { min-width:58px; }
}

/* Failure turns the disabled star area into a colorful progress snapshot. */
.result-stars.is-failure-image {
  display:grid;
  width:100%;
  min-height:clamp(122px,31cqw,190px);
  padding:clamp(8px,2cqw,14px);
  place-items:center;
  pointer-events:none;
  background:rgba(26,8,81,.5);
}
.failure-progress-image {
  position:relative;
  display:grid;
  width:clamp(260px,68cqw,420px);
  max-width:100%;
  min-height:clamp(102px,26cqw,160px);
  padding:clamp(9px,2.2cqw,15px) clamp(58px,15cqw,94px) clamp(19px,4.8cqw,30px) clamp(11px,2.8cqw,18px);
  align-items:center;
  border:3px solid transparent;
  border-radius:clamp(17px,4cqw,27px);
  background:linear-gradient(145deg,#34206f,#211349) padding-box,conic-gradient(from 40deg,#ff4c72,#ffd739,#79ee35,#3ed8ff,#a56aff,#ff4cba,#ff4c72) border-box;
  box-shadow:inset 0 3px rgba(255,255,255,.1),inset 0 -7px rgba(10,4,37,.22),0 7px 14px rgba(10,3,37,.28);
  filter:saturate(.88);
}
.failure-progress-grid {
  display:grid;
  width:100%;
  aspect-ratio:1;
  grid-template-columns:repeat(9,1fr);
  grid-template-rows:repeat(9,1fr);
  gap:1px;
}
.failure-progress-cell { min-width:0; min-height:0; border-radius:2px; background:transparent; }
.failure-progress-cell.is-progress-pending {
  opacity:.25;
  background:var(--brick-face,#756b92);
  box-shadow:inset 0 1px rgba(255,255,255,.16);
  filter:grayscale(.55);
}
.failure-progress-cell.is-progress-match {
  background:var(--brick-face,#fff);
  box-shadow:inset 0 1px rgba(255,255,255,.65),0 0 5px var(--brick-face,#fff);
}
.failure-progress-image > strong {
  position:absolute;
  top:50%;
  right:clamp(13px,3.4cqw,22px);
  width:clamp(48px,12cqw,76px);
  color:#fff;
  font-size:clamp(21px,5.5cqw,35px);
  font-weight:1000;
  text-align:center;
  -webkit-text-stroke:1px #30116f;
  paint-order:stroke fill;
  text-shadow:0 3px #17083d;
  transform:translateY(-58%);
}
.failure-progress-bar {
  position:absolute;
  right:clamp(12px,3cqw,20px);
  bottom:clamp(10px,2.5cqw,16px);
  left:clamp(12px,3cqw,20px);
  height:clamp(7px,1.8cqw,11px);
  overflow:hidden;
  border-radius:99px;
  background:#140a37;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.55);
}
.failure-progress-bar::after {
  display:block;
  width:var(--failure-progress,0%);
  height:100%;
  border-radius:inherit;
  content:"";
  background:linear-gradient(90deg,#ff4f91,#ffcf32 34%,#75ef36 67%,#3ed8ff);
  box-shadow:0 0 9px rgba(108,232,255,.45);
}