:root {
  --bg: #c8d7b4;
  --bg-soft: #d4e2bf;
  --panel: #2f5b2f;
  --panel-dark: #254a25;
  --panel-light: #3a6b3a;
  --accent: #9ab317;
  --accent-dark: #6d840f;
  --text: #e4f0d0;
  --text-dark: #153315;
  --grid-line: #2b4f2b;
  --grid-line-strong: #244424;
  --cell: #c7d9b0;
  --cell-fill: #133913;
  --cell-x: #88a36b;
  --danger: #c23b3b;
  --shadow: rgba(22, 34, 18, 0.4);
  --font-title: "Press Start 2P", system-ui, sans-serif;
  --font-body: "VT323", monospace;
  --sprite-home: url("themes/classic/assets/mina-home.png");
  --sprite-game-neutral: url("themes/classic/assets/mina-idle.png");
  --sprite-game-hit: url("themes/classic/assets/mina-win.png");
  --sprite-game-fail: url("themes/classic/assets/mina-lose.png");
  --sprite-final-win: url("mina-celebracion-final-6frames-split/20.png");
  --sprite-final-lose: url("mina-derrota-final-6frames-split/20.png");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at top left, #d9e8c6, #c2d1ae 50%, #b8c7a4 100%);
  color: var(--text-dark);
  font-family: var(--font-body);
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 1px;
}

.top-actions { display: flex; gap: 8px; }

.brand { text-shadow: 2px 2px 0 var(--panel-dark); }

.screen {
  display: none;
  padding: 20px;
  flex: 1;
}

.screen.active { display: block; }

.btn {
  font-family: var(--font-title);
  font-size: 12px;
  padding: 12px 18px;
  background: var(--panel);
  color: var(--text);
  border: 3px solid var(--panel-dark);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--panel-dark);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--panel-dark);
}

.btn.large { font-size: 16px; width: 220px; }
.btn.small { font-size: 10px; padding: 10px 12px; }
.btn.tiny { font-size: 9px; padding: 8px 10px; }

#btn-theme {
  background: linear-gradient(180deg, #85724a, #6d5d3d);
  border-color: #584a32;
  color: #fff2cf;
  box-shadow: 0 4px 0 #584a32;
}

#btn-theme:active {
  box-shadow: 0 2px 0 #584a32;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.title-stack h1 {
  font-family: var(--font-title);
  font-size: clamp(28px, 7vw, 64px);
  color: var(--panel);
  margin: 0;
  text-shadow: 3px 3px 0 #98b07f;
}

.title-stack { text-align: center; }

.subtitle {
  font-family: var(--font-title);
  font-size: 12px;
  color: #6a7e55;
  margin-top: 8px;
}

.hero-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(circle at center, #dae8c6 0%, #cad9b7 65%, #c2d2af 100%);
  border: 4px solid var(--panel-dark);
  border-radius: 20px;
  padding: 18px 22px 12px;
  box-shadow: 0 10px 0 var(--panel-dark);
  min-width: min(92vw, 430px);
}

.hero-art-label {
  font-family: var(--font-title);
  font-size: 9px;
  color: var(--panel-dark);
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #f2f8e8;
}

.home-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.lang-toggle {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.card {
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  padding: 16px;
  border: 3px solid var(--panel-dark);
  box-shadow: 0 6px 0 var(--panel-dark);
}

.card h3 { margin-top: 0; font-family: var(--font-title); font-size: 12px; }

.rules-actions { margin-top: 20px; }

.select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.select-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.select-body {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.level-tile {
  background: var(--panel);
  color: var(--text);
  padding: 18px;
  border-radius: 16px;
  border: 3px solid var(--panel-dark);
  box-shadow: 0 6px 0 var(--panel-dark);
  text-align: center;
  font-family: var(--font-title);
  cursor: pointer;
  position: relative;
  user-select: none;
}

.level-tile.selected { background: #7e9f18; }

.level-tile .done {
  position: absolute;
  right: 10px;
  top: 10px;
  background: var(--accent);
  color: var(--panel-dark);
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 6px;
}

.level-info {
  background: var(--panel);
  color: var(--text);
  padding: 16px;
  border-radius: 16px;
  border: 3px solid var(--panel-dark);
  box-shadow: 0 6px 0 var(--panel-dark);
  font-family: var(--font-title);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 16px;
  border: 3px solid var(--panel-dark);
  box-shadow: 0 6px 0 var(--panel-dark);
}

.game-top.victory {
  animation: victory-flash 0.8s ease-in-out 2;
  box-shadow: 0 0 0 4px #a7c23b, 0 6px 0 var(--panel-dark);
}

@keyframes victory-flash {
  0% { background: var(--panel); }
  50% { background: #7fa128; }
  100% { background: var(--panel); }
}

.game-status { display: flex; gap: 18px; font-family: var(--font-title); font-size: 11px; }

.board-wrap {
  margin-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-items: start;
  --board-size: min(72vmin, 520px);
}

.board-viewport {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.clues {
  display: grid;
  color: var(--panel-dark);
  font-family: var(--font-title);
  font-size: 12px;
  gap: 4px;
  line-height: 1.2;
}

.clues-top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  grid-template-columns: repeat(15, 1fr);
  text-align: center;
  width: calc(var(--board-size) - 24px);
  margin-left: 12px;
}

.clues-left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  grid-template-rows: repeat(15, 1fr);
  text-align: right;
  align-items: center;
  padding-right: 8px;
  height: calc(var(--board-size) - 24px);
  margin-top: 12px;
}

.grid {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  background: var(--panel);
  padding: 8px;
  border-radius: 16px;
  border: 4px solid var(--panel-dark);
  box-shadow: 0 8px 0 var(--panel-dark);
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
}

.grid.finish .cell {
  border-color: transparent;
}

.cell {
  background: var(--cell);
  border: 1px solid var(--grid-line);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--cell-x);
  user-select: none;
}

.cell.thick-right { border-right: 2px solid var(--grid-line-strong); }
.cell.thick-bottom { border-bottom: 2px solid var(--grid-line-strong); }

.cell.filled { background: var(--cell-fill); }

.cell.marked::after {
  content: "X";
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--cell-x);
}

.cell.error {
  animation: error-pop 0.25s ease-out;
}

@keyframes error-pop {
  0% { transform: scale(1); background: var(--danger); }
  100% { transform: scale(0); opacity: 0; }
}

.editor-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  --board-size: min(72vmin, 520px);
}

.editor-viewport { margin-top: 0; }

.editor-grid {
  width: var(--board-size);
  height: var(--board-size);
  grid-column: auto;
  grid-row: auto;
}

.level-name input {
  font-family: var(--font-title);
  padding: 8px;
  border-radius: 8px;
  border: 2px solid var(--panel-dark);
  background: #f3f7e9;
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  font-family: var(--font-title);
}

.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid var(--panel-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: var(--font-title);
  font-size: 10px;
}

.toast.show { opacity: 1; }

.mina {
  --face-pos-x: 50%;
  --face-pos-y: 20%;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 4px solid var(--panel-dark);
  box-shadow: 0 6px 0 var(--panel-dark);
  background-image: url("mina_gb_source.png");
  background-size: 170%;
  background-position: var(--face-pos-x) var(--face-pos-y);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  position: relative;
  overflow: hidden;
}

.mina-home {
  width: min(80vw, 360px);
  height: min(96vw, 460px);
  border-radius: 16px;
  border-width: 5px;
  box-shadow: 0 8px 0 var(--panel-dark);
  --face-pos-y: 14%;
  background-size: 113%;
  background-position: 50% 18%;
  animation: welcome-idle 1.1s ease-in-out infinite;
}

.mina-small {
  width: 48px;
  height: 48px;
  border-width: 3px;
  box-shadow: 0 4px 0 var(--panel-dark);
}

.hero-pickaxe {
  position: absolute;
  width: 108px;
  height: 72px;
  right: 14%;
  bottom: 19%;
  transform: rotate(-24deg);
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(16, 36, 16, 0.6));
}

.hero-pickaxe::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 8px;
  width: 12px;
  height: 60px;
  background: linear-gradient(to right, #6e5130 0 50%, #4f3721 50% 100%);
  border: 2px solid #2e2418;
  border-radius: 3px;
}

.hero-pickaxe::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  width: 92px;
  height: 24px;
  background: linear-gradient(to right, #ced9cb 0 48%, #a4b0a1 48% 100%);
  border: 2px solid #475447;
  clip-path: polygon(0% 52%, 18% 18%, 70% 18%, 100% 50%, 70% 82%, 18% 82%);
}

.gb-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(12, 44, 12, 0.08) 0 2px,
      rgba(195, 224, 165, 0) 2px 4px
    );
  pointer-events: none;
}

.gb-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 34%;
  height: 17%;
  transform: translateX(-50%) scale(0.84);
  border-bottom: 3px solid rgba(16, 49, 16, 0.82);
  border-radius: 0 0 20px 20px;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.mina-idle {
  filter: grayscale(1) contrast(1.15) brightness(1.05) sepia(0.5) hue-rotate(48deg) saturate(1.2);
}

.mina-play {
  --face-pos-y: 18%;
  filter: grayscale(1) contrast(1.2) brightness(1.08) sepia(0.6) hue-rotate(48deg) saturate(1.3);
}

.mina-win {
  --face-pos-y: 16%;
  filter: grayscale(1) contrast(1.25) brightness(1.12) sepia(0.62) hue-rotate(42deg) saturate(1.6);
  animation: dance 0.55s steps(2, end) infinite;
}

.mina-lose {
  --face-pos-y: 24%;
  filter: grayscale(1) contrast(1.05) brightness(0.96) sepia(0.45) hue-rotate(45deg) saturate(0.8);
  animation: sob 0.9s ease-in-out infinite;
}

.mina-play.mina-error {
  animation: angry-snap 0.22s ease-in-out 2;
  filter: grayscale(1) contrast(1.26) brightness(1.03) sepia(0.65) hue-rotate(35deg) saturate(1.3);
}

.mina-play.mina-happy {
  animation: happy-bob 0.26s ease-out;
  filter: grayscale(1) contrast(1.24) brightness(1.15) sepia(0.65) hue-rotate(52deg) saturate(1.45);
}

.mina-play.mina-error::after {
  content: "";
  width: 42%;
  height: 18%;
  top: 44%;
  border-bottom: 0;
  border-top: 3px solid rgba(36, 54, 18, 0.84);
  border-radius: 18px 18px 0 0;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  box-shadow: -18px -10px 0 -7px rgba(26, 48, 16, 0.8), 18px -10px 0 -7px rgba(26, 48, 16, 0.8);
}

.mina-play.mina-happy::after {
  content: "";
  width: 38%;
  height: 18%;
  top: 51%;
  border-bottom: 3px solid rgba(16, 49, 16, 0.84);
  border-radius: 0 0 20px 20px;
  opacity: 1;
  transform: translateX(-50%) scale(1.06);
  box-shadow: -16px -8px 0 -7px rgba(20, 46, 16, 0.78), 16px -8px 0 -7px rgba(20, 46, 16, 0.78);
}

.mina-win::after {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.08);
  animation: smile-loop 0.5s ease-in-out infinite;
}

.mina-lose::after {
  opacity: 0.9;
  top: 44%;
  width: 42%;
  height: 18%;
  border-bottom: 0;
  border-top: 3px solid rgba(36, 54, 18, 0.84);
  border-radius: 18px 18px 0 0;
  transform: translateX(-50%) scale(1);
  box-shadow: -18px -10px 0 -7px rgba(26, 48, 16, 0.8), 18px -10px 0 -7px rgba(26, 48, 16, 0.8);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes dance {
  0% { transform: translate(-2px, 0) rotate(-2deg); }
  50% { transform: translate(2px, -3px) rotate(2deg); }
  100% { transform: translate(-2px, 0) rotate(-2deg); }
}

@keyframes sob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(3px) rotate(-8deg); }
}

@keyframes smile-loop {
  0%, 100% { transform: translateX(-50%) scale(1.02); }
  50% { transform: translateX(-50%) scale(1.12); }
}

@keyframes happy-bob {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-3px) scale(1.045); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes angry-snap {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  25% { transform: translateX(-4px) rotate(-2deg) scale(1.02); }
  50% { transform: translateX(5px) rotate(2deg) scale(1.02); }
  75% { transform: translateX(-3px) rotate(-2deg) scale(1.01); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes welcome-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 900px) {
  .select-body { grid-template-columns: 1fr; }
  .board-wrap { --board-size: min(76vmin, 360px); }
}

@media (max-width: 600px) {
  .top-bar { flex-direction: column; gap: 8px; }
  .btn.large { width: 100%; }
  .hero { align-items: center; }
  .hero-art { width: 100%; max-width: 420px; }
  .hero-pickaxe {
    right: 10%;
    bottom: 20%;
    transform: rotate(-20deg) scale(0.92);
  }
}
.game-status { position: relative; }

#game-time.penalty {
  color: var(--danger);
  animation: time-flash 0.3s ease;
}

@keyframes time-flash {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.penalty-float {
  position: absolute;
  top: -18px;
  right: 0;
  font-family: var(--font-title);
  font-size: 10px;
  color: var(--danger);
  animation: float-up 0.6s ease-out forwards;
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.grid .cell { touch-action: manipulation; }
.win-overlay {
  position: absolute;
  inset: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  font-family: var(--font-title);
  color: var(--text);
  text-shadow: 2px 2px 0 var(--panel-dark);
}

.win-overlay.show { display: flex; }

#win-overlay-level { font-size: 10px; color: #d8e6c4; }
.board-wrap { position: relative; }
.level-check {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--panel-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--panel-dark);
  background: transparent;
}

.level-check.done {
  background: var(--accent);
}
.win-overlay {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px;
}
.clues-top div { white-space: pre-line; }

/* Nonogram clue alignment fix (PC + mobile) */
.clues-top,
.clues-left {
  gap: 0;
}

.clues-top {
  align-items: stretch;
}

.clues-left {
  align-items: stretch;
  padding-right: 8px;
}

.clues-top > div {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  white-space: pre-line;
  line-height: 1.05;
  padding-bottom: 2px;
}

.clues-left > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  line-height: 1.05;
  padding-right: 2px;
}

/* Sprite-sheet integration: mina_sprites.png (4 columns x 3 rows). */
:root {
  --bg: #d9d8d3;
  --bg-soft: #e6e4df;
  --panel: #555554;
  --panel-dark: #3f3f3f;
  --panel-light: #6d6d6a;
  --accent: #d8b351;
  --accent-dark: #b58a2a;
  --text: #f4f2eb;
  --text-dark: #2c2c2b;
  --grid-line: #7d7d78;
  --grid-line-strong: #565652;
  --cell: #efeee8;
  --cell-fill: #4c4c49;
  --cell-x: #9d9a8d;
  --danger: #9f4c4c;
}

body {
  background: radial-gradient(circle at top, #ecebe8 0%, #d8d7d2 55%, #cbcac5 100%);
}

body[data-theme="energy"] {
  --bg: #dae9d8;
  --bg-soft: #edf6e9;
  --panel: #1e5a51;
  --panel-dark: #16413b;
  --panel-light: #2a7f72;
  --accent: #f2c94c;
  --accent-dark: #cd9f2f;
  --text: #ecfbf7;
  --text-dark: #17312e;
  --grid-line: #4a877e;
  --grid-line-strong: #2f675f;
  --cell: #e8f4ef;
  --cell-fill: #1f5b52;
  --cell-x: #6c978f;
  --danger: #ba4e4e;
}

body[data-theme="custom"] {
  --bg: #dce7ec;
  --bg-soft: #ecf3f7;
  --panel: #355a6f;
  --panel-dark: #274353;
  --panel-light: #4a7992;
  --accent: #efc75e;
  --accent-dark: #c39b38;
  --text: #eef6fb;
  --text-dark: #1d3441;
  --grid-line: #5f8598;
  --grid-line-strong: #3f6071;
  --cell: #ecf2f6;
  --cell-fill: #305569;
  --cell-x: #7f9daa;
  --danger: #ba5d4e;
}

body[data-theme="energy"] .brand {
  color: #ffe58a;
}

body[data-theme="custom"] .brand {
  color: #ffdf95;
}

body[data-theme="energy"] #btn-theme {
  background: linear-gradient(180deg, #3b766c, #2c5f56);
  border-color: #1d4a42;
  box-shadow: 0 4px 0 #1d4a42;
  color: #dff9f2;
}

body[data-theme="custom"] #btn-theme {
  background: linear-gradient(180deg, #4d7f98, #3a667e);
  border-color: #2a4e62;
  box-shadow: 0 4px 0 #2a4e62;
  color: #e8f5fd;
}

.top-bar {
  background: linear-gradient(180deg, #666661, #52524f);
}

.brand {
  color: #ffd874;
  text-shadow: 2px 2px 0 #3a3a39;
}

.hero {
  min-height: 0;
  width: min(96vw, 620px);
  justify-content: center;
}

.hero-art {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
  padding: 0;
}

.sprite {
  background-image: var(--sprite-home);
  background-repeat: no-repeat;
  background-size: 400% 300%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 0;
  box-shadow: none;
}

.sprite-home {
  width: min(94vw, 560px);
  height: clamp(170px, 34vw, 260px);
  background-image: var(--sprite-home);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.sprite-select {
  width: 48px;
  height: 42px;
  background-position: 100% 0%;
}

.sprite-game-face {
  width: 98px;
  height: 86px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: 3px solid #6a6a66;
  border-radius: 8px;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.sprite-game-neutral {
  background-image: var(--sprite-game-neutral);
}

.sprite-game-hit {
  background-image: var(--sprite-game-hit);
}

.sprite-game-fail {
  background-image: var(--sprite-game-fail);
}

.sprite-game-face.reaction-hit {
  transform: translateY(-2px) scale(1.05);
}

.sprite-game-face.reaction-fail {
  transform: translateY(1px) scale(0.98);
  filter: contrast(1.08) saturate(1.08);
}

.sprite-win-anim,
.sprite-lose-anim {
  width: min(45vw, 220px);
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.sprite-win-anim {
  background-image: var(--sprite-final-win);
  background-size: contain;
  background-position: center;
  animation: result-win-float 1.4s ease-in-out infinite;
}

.sprite-lose-anim {
  background-image: var(--sprite-final-lose);
  background-size: contain;
  background-position: center;
  animation: result-lose-sway 1.6s ease-in-out infinite;
}

body[data-theme="energy"] .sprite-win-anim {
  background-image: var(--sprite-final-win);
  animation: result-win-float 1.4s ease-in-out infinite;
}

body[data-theme="energy"] .sprite-lose-anim {
  background-image: var(--sprite-final-lose);
  animation: result-lose-sway 1.6s ease-in-out infinite;
}

@keyframes result-win-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.03); }
}

@keyframes result-lose-sway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-2deg) translateY(2px); }
  75% { transform: rotate(2deg) translateY(2px); }
}

.sprite-result {
  width: clamp(250px, 66vw, 380px);
  height: clamp(250px, 66vw, 380px);
  overflow: hidden;
}

.result {
  color: #2f2f2d;
  margin-top: 0;
  width: min(92vw, 760px);
  text-align: center;
}

#screen-win.active,
#screen-lose.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.subtitle,
.hero-art-label,
.hero-pickaxe,
.mina,
.gb-face {
  display: none !important;
}

.game-top {
  background: linear-gradient(180deg, #666661, #585854);
}

.game-top.victory {
  box-shadow: 0 0 0 4px #d8b351, 0 6px 0 var(--panel-dark);
}

#win-overlay-level {
  color: #ffe7a2;
}

.btn {
  background: linear-gradient(180deg, #666661, #545451);
}

.level-tile.selected,
.level-check.done {
  background: #d8b351;
  color: #2f2e2a;
}

#screen-home.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 8px;
}

#screen-home .home-actions {
  position: relative;
  margin-top: clamp(-56px, -8vw, -34px);
  z-index: 2;
  gap: 10px;
}

#screen-home .home-actions .btn.large {
  width: min(68vw, 320px);
}

#screen-home .home-actions .btn.small {
  width: min(68vw, 320px);
}

#screen-home .lang-toggle {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .sprite-game-face {
    width: 76px;
    height: 66px;
  }

  #screen-home .home-actions {
    margin-top: clamp(-38px, -6vw, -16px);
    gap: 8px;
  }

  #screen-home .home-actions .btn.large,
  #screen-home .home-actions .btn.small {
    width: min(78vw, 300px);
  }

  .sprite-result {
    width: clamp(220px, 76vw, 320px);
    height: clamp(220px, 76vw, 320px);
  }
}

/* Final level win overlay: keep puzzle/name visible and continue on tap. */
.win-overlay {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px;
  pointer-events: auto;
}

#win-overlay-text,
#win-overlay-level {
  align-self: center;
  text-align: center;
  position: relative;
  z-index: 2;
  background: rgba(32, 56, 24, 0.72);
  border: 2px solid rgba(212, 231, 178, 0.6);
  border-radius: 8px;
  padding: 4px 8px;
}

#win-overlay .sprite {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: clamp(96px, 24vw, 150px);
  height: clamp(96px, 24vw, 150px);
  z-index: 1;
}

/* In-game completion overlay: no character here, only text/level name. */
#win-overlay .sprite {
  display: none;
}

/* Mina Puzzle Legacy overrides */
.top-bar .brand {
  letter-spacing: 0.4px;
}

#screen-home.active {
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  align-items: center;
  min-height: calc(100vh - 72px);
  padding: 10px 10px 8px;
  gap: 10px;
  overflow: hidden;
}

#screen-home .hero {
  width: 100%;
  max-width: 560px;
  min-height: 0;
}

#screen-home .sprite-home {
  width: min(70vw, 420px);
  height: clamp(150px, 30vw, 220px);
  max-height: 42vh;
  margin: 0 auto;
}

#screen-home .home-actions {
  margin-top: 0;
  gap: 8px;
}

#screen-home .home-actions .btn.large,
#screen-home .home-actions .btn.small {
  width: min(78vw, 320px);
}

#screen-home .lang-toggle {
  margin-top: 2px;
}

#screen-select {
  position: relative;
  overflow: hidden;
}

#screen-select::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sprite-home);
  background-repeat: no-repeat;
  background-size: 250% auto;
  background-position: -24% -2%;
  opacity: 0.15;
  filter: blur(3px) grayscale(1);
  transform: scale(1.12);
  pointer-events: none;
}

#screen-select > * {
  position: relative;
  z-index: 1;
}

#screen-select .select-title h2 {
  margin: 0;
  font-size: clamp(14px, 2.4vw, 24px);
  color: #1d3917;
  text-shadow: 1px 1px 0 #cbe1b2;
}

#screen-select .select-body {
  grid-template-columns: minmax(0, 2.2fr) minmax(250px, 1fr);
  gap: 12px;
}

.level-browser {
  background: rgba(198, 221, 168, 0.84);
  border: 3px solid #2f4e22;
  box-shadow: 0 6px 0 #2a4420;
  border-radius: 14px;
  padding: 10px;
}

.level-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.level-tile {
  min-height: 82px;
  padding: 9px 10px 8px;
  border-radius: 10px;
  text-align: left;
  box-shadow: 0 4px 0 var(--panel-dark);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
}

.level-tile strong {
  font-size: 10px;
  line-height: 1.2;
}

.level-tile small {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.level-check {
  width: 24px;
  height: 24px;
  right: 8px;
  top: 8px;
  border-radius: 5px;
  font-size: 13px;
  border-width: 2px;
}

.level-pages {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.page-btn {
  font-family: var(--font-title);
  font-size: 10px;
  padding: 8px 0;
  border-radius: 8px;
  border: 2px solid #2f4e22;
  background: #5c7d40;
  color: #eef5de;
  cursor: pointer;
}

.page-btn.active {
  background: #d8b351;
  color: #2f2e2a;
}

.level-info {
  background: rgba(72, 98, 54, 0.93);
}

/* Frame order in game face: neutral, celebration, error */
/* order: neutral, celebration, error */

@media (max-width: 900px) {
  #screen-select .select-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #screen-home.active {
    min-height: calc(100vh - 102px);
    gap: 8px;
  }

  #screen-home .sprite-home {
    width: min(78vw, 320px);
    max-height: 36vh;
  }

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

  .level-pages {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.mark-mode-btn {
  min-width: 42px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.mark-mode-btn.active {
  background: var(--accent);
  color: var(--panel-dark);
  box-shadow: 0 0 0 2px var(--accent-dark), 0 4px 0 var(--panel-dark);
}