* { box-sizing: border-box; }

/* BARRES DE DESPLAÇAMENT: primes i discretes, a joc amb el tema fosc */
* { scrollbar-width: thin; scrollbar-color: #4b5361 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4b5361; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #f2c200; }

:root {
  --l-green: #009b48;   /* verd de la L de novell */
  --player-dmg: #ffd23f;
  --enemy-dmg: #ff4d4d;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #1e2229;
  color: #e6e6e6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* CAPÇALERA */
header {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #2b313b;
  border-bottom: 3px solid #f2c200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
header h1 { margin: 0; font-size: 1.2rem; color: #f2c200; }
.stats-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Placa L verda clàssica */
.lplate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  background: var(--l-green);
  color: #fff;
  font-weight: 900;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.l-stat { display: inline-flex; align-items: center; gap: 4px; }

/* ESCENARI: ocupa tot l'espai sobrant */
/* ZONA CENTRAL: escenari + panell dret */
#middle {
  flex: 1;
  min-height: 0;
  display: flex;
}

#scene {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background-color: var(--scene-bg, #3a4250);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.scene-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 0.9rem; color: #d5dbe4; }

.arena {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.fighter {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.fighter.attacking { z-index: 2; }
.fighter-name {
  align-self: center;
  font-weight: bold;
  margin-bottom: 6px;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(15, 17, 22, 0.7);
  /* els noms llargs (p. ex. variants amb estreles) es tallen amb "…" en lloc d'eixir del requadre */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* etiquetes llegibles damunt del fons */
.scene-top > div { background: rgba(15, 17, 22, 0.7); padding: 3px 10px; border-radius: 12px; }
.bar { box-shadow: 0 0 0 2px rgba(15, 17, 22, 0.6); }

.avatar {
  position: relative;
  flex: 1;
  min-height: 60px;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/* SPRITES */
.sprite {
  --h: clamp(4rem, 17vh, 9.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  line-height: 1;
  font-size: calc(var(--h) * 0.85 * var(--size, 1));
  animation: idle 1.8s ease-in-out infinite;
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.35));
}
.sprite svg { height: calc(var(--h) * var(--size, 1)); width: auto; display: block; }
/* Caps amb foto (Pixel, Marc): la foto sencera, amb les proporcions originals */
.boss-photo { display: block; user-select: none; }
.sprite .boss-photo { height: calc(var(--h) * var(--size, 1)); width: auto; }
.beast-icon .boss-photo { max-width: 2.6rem; max-height: 2.6rem; width: auto; height: auto; }
.sprite .badge { position: absolute; right: -0.15em; bottom: 0; font-size: 0.45em; }
/* Pixel dormint: més quiet i amb 💤 */
.sprite.asleep { animation: idle 3.6s ease-in-out infinite; filter: brightness(0.75) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.35)); }
.sprite.asleep::after { content: "💤"; position: absolute; top: -0.2em; right: -0.3em; font-size: calc(var(--h) * 0.3); animation: zzz 1.6s ease-in-out infinite; }
@keyframes zzz {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(-8px); opacity: 1; }
}
/* Avió fantasma: sura i brilla en verd; quan és intangible, quasi desapareix */
.sprite .ghost-plane { animation: ghost-float 2.6s ease-in-out infinite; filter: drop-shadow(0 0 10px #5dff9a); }
.sprite.phased { opacity: 0.25; transition: opacity 0.3s; }
.sprite:not(.phased) { transition: opacity 0.3s; }
@keyframes ghost-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); opacity: 0.9; }
  50%      { transform: translateY(-10px) rotate(2deg); opacity: 0.7; }
}
@keyframes idle {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.04, 0.96); }
}
/* l'enemic nou apareix botant */
.sprite.spawn { animation: spawn 0.45s cubic-bezier(.3, 1.6, .5, 1), idle 1.8s ease-in-out 0.45s infinite; }
@keyframes spawn {
  0%   { transform: translateY(-40px) scale(0.3); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* la granoteta parpella */
.frog-eyes { transform-origin: 70px 36px; animation: blink 4s infinite; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97%           { transform: scaleY(0.1); }
}
/* només el personatge colpejat es tenyix de roig un moment */
/* només tremola la imatge (el nom i la barra de vida es queden quiets) */
.fighter.hit .sprite { animation: hit-flash 0.35s ease-out, shake 0.35s linear; }
@keyframes hit-flash {
  0%, 60% { filter: url(#hurt-tint) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.35)); }
  100%    { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.35)); }
}

/* EQUIPAMENT damunt/al costat de la granoteta (js/inventory.js). Fa servir la mateixa --h que el sprite. */
/* la granoteta va dins d'.avatar-wrap: l'equipament n'és germà, així no es mou quan la granoteta envestix */
.avatar-wrap { position: relative; flex: 1; min-height: 60px; display: flex; flex-direction: column; margin-bottom: 8px; }
.avatar-wrap > .avatar { margin-bottom: 0; }
.gear-layer { --h: clamp(4rem, 17vh, 9.5rem); position: absolute; inset: 0; pointer-events: none; }
/* Aliat: assegut darrere de la granoteta, a l'esquerra, amb el seu propi balanceig */
.gear-ally {
  position: absolute;
  bottom: 6px;
  right: calc(50% + var(--h) * 0.32);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.35));
}
.gear-ally .ally-img { display: block; height: calc(var(--h) * 0.62); width: auto; }
.gear-ally > .ally-img, .gear-ally > .pet { animation: idle 2.3s ease-in-out infinite; transform-origin: bottom center; }
/* Mascota evolucionada: el seu SVG amb capes damunt (collars, barrets...) en les mateixes coordenades */
.pet { position: relative; display: inline-block; line-height: 0; }
.pet-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Pell «Aura fantasma»: brillantor verda que palpita al voltant de la granoteta */
.sprite.aura-ghost { animation: idle 1.8s ease-in-out infinite, ghost-aura 2.4s ease-in-out infinite; }
@keyframes ghost-aura {
  0%, 100% { filter: drop-shadow(0 0 6px #5dff9a) drop-shadow(0 0 16px rgba(125, 255, 176, 0.55)); opacity: 0.95; }
  50%      { filter: drop-shadow(0 0 12px #5dff9a) drop-shadow(0 0 28px rgba(125, 255, 176, 0.75)); opacity: 0.82; }
}

/* Auras de les evolucions */
.sprite.aura-ghost-strong { animation: idle 1.8s ease-in-out infinite, ghost-aura-strong 2s ease-in-out infinite; }
@keyframes ghost-aura-strong {
  0%, 100% { filter: drop-shadow(0 0 8px #2dff8a) drop-shadow(0 0 22px rgba(60, 255, 150, 0.7)); }
  50%      { filter: drop-shadow(0 0 14px #2dff8a) drop-shadow(0 0 36px rgba(60, 255, 150, 0.9)); }
}
.sprite.aura-possess { animation: idle 1.8s ease-in-out infinite, possess-aura 2.2s ease-in-out infinite; }
.sprite.aura-possess-strong { animation: idle 1.8s ease-in-out infinite, possess-aura 1.6s ease-in-out infinite; opacity: 0.7; }
@keyframes possess-aura {
  0%, 100% { filter: drop-shadow(0 0 8px #b48cff) drop-shadow(0 0 20px rgba(160, 110, 255, 0.6)); }
  50%      { filter: drop-shadow(0 0 14px #b48cff) drop-shadow(0 0 32px rgba(160, 110, 255, 0.85)); }
}
.sprite.aura-fire-blue { animation: idle 1.8s ease-in-out infinite, fire-aura-blue 0.8s ease-in-out infinite alternate; }
@keyframes fire-aura-blue {
  from { filter: drop-shadow(0 0 6px #4aa8ff) drop-shadow(0 -4px 14px rgba(60, 140, 255, 0.6)); }
  to   { filter: drop-shadow(0 0 10px #bfe4ff) drop-shadow(0 -8px 24px rgba(60, 140, 255, 0.8)); }
}

/* Pell de foc: flama taronja que tremola */
.sprite.aura-fire { animation: idle 1.8s ease-in-out infinite, fire-aura 0.9s ease-in-out infinite alternate; }
@keyframes fire-aura {
  from { filter: drop-shadow(0 0 6px #ff7a1a) drop-shadow(0 -4px 14px rgba(255, 90, 20, 0.6)); }
  to   { filter: drop-shadow(0 0 10px #ffb02e) drop-shadow(0 -8px 22px rgba(255, 60, 10, 0.75)); }
}
/* Ninot de la falla: crema tot el rato (les flames tremolen) */
.sprite.on-fire { animation: idle 1.8s ease-in-out infinite, fire-aura 0.7s ease-in-out infinite alternate; }
.on-fire-svg .flames { transform-origin: 50% 100%; animation: flames 0.5s ease-in-out infinite alternate; }
@keyframes flames { from { transform: scaleY(0.9); } to { transform: scaleY(1.12); } }

/* Peces posades (ulleres...): la mateixa mida i posició que el SVG de la granoteta, dins del sprite (es mouen amb ella) */
.wear-holder { position: absolute; inset: 0; pointer-events: none; }
.wear-layer { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: calc(var(--h) * var(--size, 1)); width: auto; }
.item-icon { height: 2.2rem; width: auto; display: block; }
/* Aliat d'un cap (el gos del Pastor): a la dreta de l'enemic i mirant cap a la granoteta */
#enemy-gear .gear-ally { right: auto; left: calc(50% + var(--h) * 0.45); }
#enemy-gear .ally-img { scale: -1 1; height: calc(var(--h) * 0.5); }
.gear-ally.lunge { animation: lunge 0.38s cubic-bezier(.3, .7, .4, 1); z-index: 3; }

/* --- EFECTES --- */

/* Envestida: l'atacant es llança sobre l'altre. --dx/--dy/--rot els posa el JS */
.avatar.lunge { animation: lunge 0.38s cubic-bezier(.3, .7, .4, 1); z-index: 3; }
@keyframes lunge {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(calc(var(--dx) * -0.1), calc(var(--dy) * -0.1)) rotate(calc(var(--rot) * -0.6)); }
  50%  { transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) rotate(var(--rot)) scale(1.08); }
  65%  { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) rotate(calc(var(--rot) * 0.8)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Tremolor violent del qui rep el colp */
@keyframes shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-16px, 5px) rotate(-6deg); }
  25%  { transform: translate(14px, -7px) rotate(5deg); }
  40%  { transform: translate(-12px, 4px) rotate(-4deg); }
  55%  { transform: translate(9px, -3px) rotate(3deg); }
  70%  { transform: translate(-5px, 2px) rotate(-1.5deg); }
  85%  { transform: translate(2px, 0) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Numerets de dany */
.dmg {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 1.8rem;
  font-weight: 900;
  pointer-events: none;
  text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8);
  animation: dmg-float 0.9s ease-out forwards;
  z-index: 5;
  white-space: nowrap;
}
.dmg.by-player { color: var(--player-dmg); }
.dmg.by-enemy  { color: var(--enemy-dmg); }
.dmg.by-ally   { color: #ffb36b; font-size: 1.4rem; }
.dmg.burn      { color: #ff8a1f; font-size: 1.2rem; }
.dmg.crit   { color: #ff8a1f; font-size: 2.4rem; }
.dmg.thorns { color: #9be36a; font-size: 1.3rem; }
.dmg.parry  { color: #7fd1ff; font-size: 1.5rem; }
/* habilitats dels caps especials (js/bosses.js) */
.dmg.skill  { color: #ffe27a; font-size: 1.3rem; top: 15%; }
.dmg.skill.big { color: #ff5a3a; font-size: 2rem; }
.dmg.heal   { color: #7dffb0; font-size: 1.3rem; }
@keyframes dmg-float {
  0%   { transform: translate(calc(-50% + var(--ox)), 0) scale(0.6); opacity: 0; }
  15%  { transform: translate(calc(-50% + var(--ox)), -10px) scale(1.35); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--ox) * 2), -80px) scale(1); opacity: 0; }
}

/* Avisos flotants (substitueixen la consola) */
#toasts {
  position: absolute;
  top: 48px; /* davall dels noms dels combatents */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 6;
}
.toast {
  background: rgba(15, 17, 22, 0.9);
  border: 2px solid #f2c200;
  color: #fff;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
  animation: toast 2.2s ease forwards;
}
.toast.bad { border-color: var(--enemy-dmg); }
.toast.good { border-color: var(--l-green); }
@keyframes toast {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.9); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.bar { height: 16px; background: #151820; border-radius: 6px; overflow: hidden; margin: 4px 0; }
.bar-fill { height: 100%; width: 0; }
.bar-fill.hp { background: #3cc46a; transition: width 0.15s; }
.bar-fill.hp.enemy { background: #e0514a; }

/* MILLORES: franja inferior a tot l'ample */
#upgrades {
  flex-shrink: 0;
  width: 100%;
  height: 300px; /* la mateixa alçada tinga les millores que tinga (la de l'inici) */
  background: #2b313b;
  border-top: 3px solid #f2c200;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
}
#upgrade-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: 1fr;
  /* minmax(0, 1fr): les columnes poden encongir (si no, a 820 px les 4 targetes desbordaven la pantalla) */
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 14px;
}
.upgrade {
  background: #3a4250;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 2px solid transparent;
}
.upgrade.maxed { border-color: rgba(242, 194, 0, 0.5); }
.upgrade.new { animation: pop-in 0.6s ease; }
@keyframes pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
.upgrade-head { display: flex; align-items: center; gap: 8px; }
.upgrade-icon {
  font-size: 1.4rem;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  flex-shrink: 0;
}
.upgrade-title { font-weight: bold; font-size: 1.1rem; flex: 1; min-width: 0; }
.upgrade-level { font-size: 0.85rem; color: #c3cad5; white-space: nowrap; }
.upgrade.maxed .upgrade-level { color: #f2c200; }
.upgrade-progress { height: 6px; background: #1e2229; border-radius: 3px; overflow: hidden; }
.upgrade-progress div { height: 100%; background: #3cc46a; transition: width 0.3s; }
.upgrade.maxed .upgrade-progress div { background: #f2c200; }
.upgrade-total { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1.2; margin-top: 2px; }
.upgrade-total small { font-size: 0.8rem; font-weight: 600; color: #aab3c0; text-transform: uppercase; letter-spacing: 0.05em; }
.upgrade-stat { font-size: 0.85rem; color: #aab3c0; }
.upgrade-next { font-size: 0.85rem; color: #7fd49c; }
.upgrade.maxed .upgrade-next { color: #f2c200; }
.upgrade-buttons { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.upgrade-buttons .buy { flex: 1; padding: 12px; font-size: 1rem; }

/* Botó de la L amb tooltip en passar el ratolí */
.lwrap { position: relative; display: flex; }
.lwrap .lbtn { padding: 12px 14px; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; }
.lwrap .lbtn:disabled { pointer-events: none; } /* perquè el hover arribe al contenidor encara que estiga desactivat */
.ltip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 330px;
  background: #15181e;
  border: 2px solid var(--l-green);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 20;
}
.ltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 18px;
  border: 8px solid transparent;
  border-top-color: var(--l-green);
}
.lwrap:hover .ltip { opacity: 1; transform: translateY(0); }
.ltip-title { font-weight: bold; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.ltip-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.ltip-row span { color: #aab3c0; white-space: nowrap; }
.ltip-row b { color: #7fd49c; text-align: right; }
.ltip-foot { margin-top: 6px; font-size: 0.75rem; color: #8893a3; }

/* BOTONS */
button {
  font: inherit;
  font-size: 0.85rem;
  padding: 7px 10px;
  border: none;
  border-radius: 5px;
  background: #f2c200;
  color: #1e2229;
  font-weight: bold;
  cursor: pointer;
}
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #f2c200; outline-offset: 2px; }
button:disabled { background: #444b57; color: #a9b1bd; cursor: not-allowed; }
button.secondary { background: #555c68; color: #e6e6e6; }
button.danger { background: #a33; color: #fff; }
button.big { padding: 12px 24px; font-size: 1.05rem; }
button.small { padding: 4px 8px; font-size: 0.75rem; }
button.lbtn { background: var(--l-green); color: #fff; }
button.lbtn:disabled { background: #555c68; color: #8893a3; }

/* MODALS */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.modal[hidden] { display: none; }
.modal-box {
  background: #2b313b;
  border-radius: 8px;
  padding: 16px 20px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box h2 { margin-top: 0; font-size: 1.1rem; }
.muted { color: #aab3c0; font-size: 0.85rem; }
.test-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.question { background: #3a4250; border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.question p { margin: 0 0 6px; font-weight: bold; }
.question label { display: block; padding: 3px 4px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.question label.correct { background: #2d6b40; }
.question label.wrong { background: #7a2b2b; }
#exam-result { font-weight: bold; margin-top: 8px; }
#exam-result.ok { color: #3cc46a; }
#exam-result.ko { color: #e0514a; }

.test-options button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.streak { color: #ff9f1c; font-weight: bold; }

/* Icona L en línia (botons, avisos, textos) */
.lplate.sm { width: 1.3em; height: 1.3em; font-size: 0.85em; vertical-align: middle; }
.upgrade-next { font-size: 0.85rem; color: #7fd49c; }

/* BOTIGA */
.shop-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #3a4250;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.shop-amount { font-size: 1.6rem; font-weight: 900; color: #f2c200; }
#btn-shop-buy { display: inline-flex; align-items: center; gap: 6px; }

/* INVENTARI: finestra al mig de la pantalla (granoteta a l'esquerra; espais, objectes i evolució a la dreta) */
#inventory-modal {
  position: fixed; inset: 0; z-index: 40; background: rgba(10, 12, 16, 0.75);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#inventory-modal[hidden] { display: none; }
.inv-box {
  width: 100%; max-width: 980px; max-height: calc(100vh - 32px); overflow: auto;
  background: #2b313b; border: 2px solid #f2c200; border-radius: 12px; padding: 16px 20px;
}
.inv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.inv-head h2 { margin: 0; font-size: 1.2rem; }
#btn-inv-close { width: 36px; height: 36px; font-size: 1rem; padding: 0; }
.inv-body { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; }
.inv-left { display: flex; flex-direction: column; gap: 6px; }
/* Escenari de la granoteta amb els espais en triangle isòsceles d'angle 100° a dalt:
   cada espai de davall està a --dx del centre i --dy per davall del de dalt (--dy = --dx / tan 50°) */
.inv-stage {
  --dx: min(155px, calc(50% - 46px)); --dy: calc(var(--dx) / 1.1918);
  position: relative; height: 340px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 88%, #4a5568 0%, #323946 55%, #262b34 100%);
}
.inv-preview { position: absolute; inset: 0; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; }
.inv-preview .inv-frog { --h: 8.5rem; }
.inv-preview .gear-layer { --h: 8.5rem; inset: auto 0 16px 0; height: 100%; }
.inv-preview .gear-ally { bottom: 0; right: calc(50% + 8.5rem * 0.32); }
.inv-preview-label { text-align: center; min-height: 1.2em; font-size: 0.8rem; }
.inv-slots { position: absolute; inset: 0; pointer-events: none; }
.inv-slot {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 84px; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 10px; background: rgba(58, 66, 80, 0.92); border: 2px solid #6b7480; color: inherit;
}
.inv-slot-1 { left: calc(50% - var(--dx)); top: calc(12px + var(--dy)); }
.inv-slot-2 { left: calc(50% + var(--dx)); top: calc(12px + var(--dy)); }
.inv-slot.empty .inv-slot-item { opacity: 0.35; filter: grayscale(1); }
.inv-slot.selected { border-color: #f2c200; background: #424b5b; box-shadow: 0 0 0 3px rgba(242, 194, 0, 0.25); }
.inv-slot-item { height: 2.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.inv-slot-item .ally-img, .inv-item .ally-img { height: 2.4rem; width: auto; }
.inv-slot-name { font-size: 0.75rem; font-weight: 600; color: #cfd6e0; }
.inv-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inv-section-title { font-weight: bold; color: #cfd6e0; }
.inv-items { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-items .muted { margin: 0; }
.inv-item {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  background: #3a4250; border: 2px solid #4b5361; color: inherit; font-size: 0.9rem;
}
.inv-item.equipped { border-color: #3cc46a; background: #2f4a3a; }
.inv-item-check { font-size: 0.75rem; color: #7fd49c; font-weight: bold; }
.inv-item .item-icon { height: 1.8rem; }
.inv-detail { background: #3a4250; border-radius: 8px; padding: 10px 12px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 6px; }
.inv-detail:empty, .inv-detail > p.muted:only-child:empty { display: none; }
.inv-detail-name { font-weight: bold; font-size: 1rem; }
.inv-detail-desc { font-style: italic; color: #d5dbe4; }
.inv-effect { color: #ffb36b; font-weight: 600; }
.item-icon { height: 2.2rem; width: auto; display: block; }
/* Evolució */
.evo { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid #4b5361; }
.evo-now { color: #7fd49c; }
.evo-label { font-weight: bold; font-size: 0.8rem; color: #cfd6e0; }
.evo-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.evo-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: #2b313b; color: inherit; font-weight: normal; border: 2px solid #4b5361; border-radius: 8px; padding: 6px 8px;
}
.evo-opt span { font-size: 0.8rem; color: #cfd6e0; }
.evo-opt.on { border-color: #f2c200; background: #323946; }
.evo-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.evo-done { color: #7fd49c; font-weight: bold; }
.evo-lock { color: #aab3c0; }
@media (max-width: 700px) {
  #inventory-modal { padding: 8px; align-items: flex-start; }
  .inv-box { max-height: calc(100vh - 16px); padding: 12px; }
  .inv-body { grid-template-columns: 1fr; gap: 10px; }
  .inv-stage { height: 270px; }
  .inv-slot { width: 76px; }
  .inv-preview .inv-frog, .inv-preview .gear-layer { --h: 6.5rem; }
  .inv-preview .gear-ally { right: calc(50% + 6.5rem * 0.32); }
}

/* DGT: ESPAI COMÚ (js/hub.js) */
/* velocitat del combat: secundari a ×1, groc quan va a ×2 */
.speed-btn { font-size: 0.95rem; padding: 6px 12px; display: inline-flex; align-items: center; gap: 2px; min-width: 64px; justify-content: center; }
.speed-btn.on { background: #f2c200; color: #1e2229; }
.hub-btn { font-size: 0.95rem; padding: 6px 14px; display: inline-flex; align-items: center; gap: 4px; }
#hub { position: fixed; inset: 0; z-index: 30; background: #1e2229; display: flex; flex-direction: column; animation: screen-in 0.3s ease; }
#hub[hidden] { display: none; }
.hub-top { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #2b313b; border-bottom: 3px solid #f2c200; }
.hub-top h2 { margin: 0; font-size: 1.2rem; color: #f2c200; }
.hub-stats { display: flex; gap: 16px; align-items: center; margin-left: auto; font-size: 1rem; }
/* fora de l'escena (si la pantalla no és 16:9) continuen la paret i el terra */
.hub-scene { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#ebe5d6 50%, #d6d2c8 50%); }
.hub-scene svg { width: 100%; height: 100%; display: block; }
/* punts interactius: la zona de toc (.hub-hit) va damunt de tot; el dibuix (.hub-art) brilla suaument de tant en tant */
.hub-hit { cursor: pointer; outline: none; }
.hub-hit.locked { cursor: not-allowed; }
.hub-hit:focus-visible { stroke: #f2c200; stroke-width: 3; stroke-dasharray: 8 6; }
.hub-art { animation: hub-hint 3.2s ease-in-out infinite; }
@keyframes hub-hint {
  0%, 70%, 100% { filter: none; }
  82%           { filter: drop-shadow(0 0 8px rgba(242, 194, 0, 0.75)); }
}
.hub-art.hot { animation: none; filter: drop-shadow(0 0 10px #f2c200) drop-shadow(0 0 2px #f2c200); }
.hub-art.locked { animation: none; }
/* reflex de la granoteta a l'espill (girada, com en un espill de debò) */
.hub-reflection {
  width: 100%; height: 100%; position: relative; overflow: hidden; transform: scaleX(-1); /* el fons és el del cristal */
}
.hub-reflection .inv-preview { position: absolute; inset: 0; }
.hub-reflection .inv-preview { padding-bottom: 14px; }
.hub-reflection .inv-frog, .hub-reflection .gear-layer { --h: 54px; }
.hub-reflection .gear-layer { inset: auto 0 14px 0; }
.hub-reflection .gear-ally { right: calc(50% + 54px * 0.32); }
.hub-reflection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 42%, transparent 52%); pointer-events: none; }
.hub-reflection.locked { transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #3a4250; }
.hub-reflection.locked span { font-size: 2rem; }
.hub-actions { display: none; }
#hub-dialog { position: absolute; inset: 0; z-index: 2; background: rgba(10, 12, 16, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
#hub-dialog[hidden] { display: none; }
.hub-card {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 120px); overflow: auto;
  background: #2b313b; border: 2px solid #f2c200; border-radius: 12px; padding: 16px 20px;
}
.hub-card-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; font-size: 1rem; }
.hub-panel h2 { margin: 0 44px 8px 0; font-size: 1.15rem; }
.hub-panel p { margin: 6px 0; }
/* pantalles verticals (tauleta): l'escena no omplia; davall, els accessos ràpids en una fila */
@media (max-aspect-ratio: 1/1) and (min-width: 701px) {
  .hub-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 16px 20px; }
  .hub-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; font-size: 2rem; background: #3a4250; color: #e6e6e6; border: 2px solid #4b5361; border-radius: 10px; }
  .hub-actions button span { font-size: 0.95rem; }
}
/* vídeo de la tele de la DGT (sense controls: tocar-lo només li posa el so si l'havia engegat mut) */
video.hub-tv-media { cursor: pointer; }
video.hub-tv-media::-webkit-media-controls { display: none !important; }
.hub-tv-media { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: cover; } /* el vídeo és vertical: omple la tele (retallat dalt i baix) perquè es veja gran */
/* tele de la DGT en local (file://) sense el fitxer de vídeo: botó per a obrir-lo fora */
.hub-tv-play { width: 100%; height: 100%; border-radius: 0; background: #0b0d12; color: #fff; font-size: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; }
.hub-tv-play span { font-size: 10px; font-weight: 600; }
.hub-tv-play:hover { background: #1a1f2a; color: #f2c200; }
/* accés ràpid per a reiniciar (mòbil): en vermell i ocupant tota la fila */
.hub-actions .hub-action-reset span { color: #ff9a8a; }
@media (max-width: 700px) { .hub-actions .hub-action-reset { grid-column: 1 / -1; } }
/* els avisos han de veure's també dins de la DGT */
body.hub-open #toasts { position: fixed; top: 70px; left: 50%; z-index: 45; }
body.hub-open:has(#hub-dialog:not([hidden])) #toasts { top: auto; bottom: 16px; flex-direction: column-reverse; }
@media (max-width: 700px) {
  .hub-btn-label { display: none; }
  .hub-btn { padding: 4px 10px; }
  .speed-btn { padding: 4px 8px; min-width: 0; font-size: 0.85rem; }
  .hub-top { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .hub-top h2 { font-size: 1rem; }
  .hub-stats { gap: 10px; font-size: 0.9rem; }
  #btn-hub-close { order: 3; width: 100%; }
  .hub-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
  .hub-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; font-size: 1.6rem; background: #3a4250; color: #e6e6e6; border: 2px solid #4b5361; border-radius: 10px; }
  .hub-actions button span { font-size: 0.85rem; }
  .hub-card { padding: 14px; max-height: calc(100vh - 32px); }
}

/* ===== MENÚS DE LA DGT: cada finestreta es vestix com l'objecte d'on ix =====
   Colors de la mateixa escena: metall i pantalla del caixer, paper i blau de la DGT, pell i paper del diari, fusta de l'espill.
   Contrastos mesurats (WCAG): pantalla 11,9 · carcassa 5,6 · paper 14,0 / 7,0 · diari 12,0 / 5,8 / «???» 5,0 */

/* --- 🏧 Caixer: carcassa de metall, franja verda, pantalla de caixer i tecla física --- */
.hub-card[data-panel="shop"] { max-width: 440px; background: linear-gradient(#5d7284, #4f6274); border: 3px solid #3a4b5a; border-radius: 18px; padding: 0 20px 20px; color: #eef3f7; }
.hub-card[data-panel="shop"] h2 { margin: 0 -20px 14px; padding: 12px 56px 12px 20px; background: #2fa84f; color: #fff; border-radius: 15px 15px 0 0; }
.hub-card[data-panel="shop"] .atm-hint { color: #eef3f7; }
.hub-card[data-panel="shop"] .shop-offer {
  background: #0f2a3a; border: 6px solid #1d2a36; border-radius: 10px; padding: 16px;
  box-shadow: inset 0 0 24px rgba(125, 255, 176, 0.12); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.hub-card[data-panel="shop"] .shop-amount { color: #7dffb0; font-size: 2rem; text-shadow: 0 0 10px rgba(125, 255, 176, 0.45); }
.hub-card[data-panel="shop"] #btn-shop-buy {
  justify-content: center; background: #d6dde2; color: #1d1d1f; border-radius: 8px;
  box-shadow: 0 4px 0 #8a949c; font-family: inherit; transition: transform 0.06s, box-shadow 0.06s;
}
.hub-card[data-panel="shop"] #btn-shop-buy:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a949c; }
.hub-card[data-panel="shop"] #btn-shop-buy:disabled { background: #44515d; color: #a9b8c4; box-shadow: 0 4px 0 #2f3a44; }
.hub-card[data-panel="shop"] #shop-info { color: #dfe8ef; font-size: 0.82rem; }
.hub-card[data-panel="shop"] .hub-card-close { background: #1d7a3a; color: #fff; }

/* --- ☕ Tests: l'imprés oficial que t'omple el funcionari (paper ratllat, franja blava, caselles i segell) --- */
.hub-card[data-panel="test"] {
  max-width: 480px; color: #2b2622; border: 0; border-radius: 4px; padding: 0 22px 18px;
  background: repeating-linear-gradient(#fbf7ec 0 27px, #e7e0cf 27px 28px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.hub-card[data-panel="test"] h2 { margin: 0 -22px 14px; padding: 14px 56px 14px 22px; background: #1f4f9e; color: #fff; border-radius: 4px 4px 0 0; }
.hub-card[data-panel="test"] p { color: #2b2622; }
.hub-card[data-panel="test"] .muted { color: #5c5348; }
.hub-card[data-panel="test"] .test-options button {
  background: #fff; color: #1f4f9e; border: 2px solid #1f4f9e; border-radius: 4px; font-weight: 700;
}
.hub-card[data-panel="test"] .test-options button:hover { background: #1f4f9e; color: #fff; }
.hub-card[data-panel="test"] .test-options button.secondary { color: #5c5348; border-color: #8a8070; }
.hub-card[data-panel="test"] .test-options button.secondary:hover { background: #5c5348; color: #fff; }
.hub-card[data-panel="test"] .streak {
  display: inline-block; color: #b3141a; border: 2px solid #b3141a; border-radius: 6px; padding: 0 6px; transform: rotate(-2deg); margin-right: 4px;
}
.hub-card[data-panel="test"] .hub-card-close { background: #173a76; color: #fff; }

/* --- 📖 Compendi: el diari obert (tapes de pell granat; índex a l'esquerra i fitxa a la dreta, lletra serif) --- */
.hub-card[data-panel="bestiary"] { max-width: 820px; background: #7a1a1a; border: 0; border-radius: 10px; padding: 12px; box-shadow: inset 0 0 0 3px #5a1010, 0 12px 30px rgba(0, 0, 0, 0.45); }
.hub-card[data-panel="bestiary"] #tab-bestiary {
  background: #f6efdc; color: #3a2a1a; border-radius: 4px; padding: 14px 18px 12px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
.hub-card[data-panel="bestiary"] h2 { color: #5a1010; }
.hub-card[data-panel="bestiary"] .muted { color: #6b5a44; }
.hub-card[data-panel="bestiary"] .hub-card-close { top: 18px; right: 18px; background: #7a1a1a; color: #fff; }
#tab-bestiary #bestiary-list { display: block; margin-top: 6px; }
.book { display: grid; grid-template-columns: 1fr 1fr; min-height: 430px;
  background: linear-gradient(90deg, transparent calc(50% - 14px), rgba(90, 60, 30, 0.18) 50%, transparent calc(50% + 14px)); }
.book-page { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-index { padding-right: 22px; }
.book-detail { padding-left: 22px; gap: 6px; }
/* índex: files de quadern */
#tab-bestiary .beast { all: unset; display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-bottom: 1px dashed #c9b48e; cursor: pointer; }
#tab-bestiary .beast:hover { background: rgba(201, 180, 142, 0.2); }
#tab-bestiary .beast:focus-visible { outline: 2px solid #7a1a1a; outline-offset: 1px; }
#tab-bestiary .beast.open { background: rgba(122, 26, 26, 0.1); box-shadow: inset 3px 0 0 #7a1a1a; }
#tab-bestiary .beast-icon { width: 2.2rem; height: 2.2rem; font-size: 1.4rem; background: #ebdfc2; flex-shrink: 0; }
#tab-bestiary .beast-icon svg { width: 1.7rem; }
#tab-bestiary .beast-info { display: flex; flex-direction: column; min-width: 0; }
#tab-bestiary .beast-name { color: #3a2a1a; font-weight: 700; }
#tab-bestiary .beast-meta { color: #6b5a44; font-size: 0.78rem; margin: 0; }
#tab-bestiary .beast.unknown .beast-name { color: #75644e; letter-spacing: 0.2em; }
.book-pager { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; color: #6b5a44; font-size: 0.85rem; }
.book-pager button { width: 36px; height: 32px; padding: 0; font-size: 1.1rem; background: #7a1a1a; color: #fff; }
.book-pager button:disabled { background: #d9c9a6; color: #8a7a64; }
/* fitxa */
.beast-big { width: 120px; height: 120px; align-self: center; display: flex; align-items: center; justify-content: center; font-size: 4.5rem;
  background: radial-gradient(circle, #ebdfc2 60%, transparent 61%); position: relative; }
.beast-big svg, .beast-big .boss-photo { max-width: 96px; max-height: 96px; width: auto; height: auto; }
.beast-big .badge { position: absolute; right: 8px; bottom: 8px; font-size: 1.8rem; }
.book-detail.unknown .beast-big { filter: brightness(0) opacity(0.45); }
.book-detail h3 { margin: 4px 0 0; font-size: 1.35rem; color: #3a2a1a; text-align: center; }
.book-detail .beast-meta { text-align: center; }
.book-detail .beast-desc { display: block; margin: 6px 0 0; padding: 0; border: 0; font-style: italic; color: #3a2a1a; font-size: 0.92rem; line-height: 1.45; }
.book-detail .beast-ability { margin: 2px 0 0; color: #8a3a12; font-weight: 700; font-style: normal; font-size: 0.88rem; }
#tab-bestiary .beast-stats { background: #ebdfc2; color: #3a2a1a; margin-top: 6px; }
#tab-bestiary .beast-stats-title { color: #6b5a44; text-transform: none; letter-spacing: 0; }
.book-back { align-self: flex-start; background: #7a1a1a; color: #fff; }
@media (max-width: 700px) {
  .hub-card[data-panel="bestiary"] { padding: 8px; }
  #tab-bestiary .book-page { padding: 0; min-height: 0; }
  .beast-big { width: 96px; height: 96px; font-size: 3.6rem; }
}

/* --- 🎒 Inventari: l'espill (marc de fusta i la granoteta reflectida en el cristal) --- */
.inv-box { border: 12px solid #a8844f; outline: 3px solid #6b4f2a; outline-offset: -3px; box-shadow: inset 0 0 0 3px #6b4f2a, 0 16px 40px rgba(0, 0, 0, 0.5); border-radius: 14px; }
.inv-stage { background: linear-gradient(160deg, #e3eff5 0%, #b8ccd8 55%, #8fa8b8 100%); box-shadow: inset 0 0 0 4px #8a6a3a, inset 0 0 18px rgba(0, 0, 0, 0.25); }
.inv-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.35) 34%, transparent 44%); }
.inv-preview-label { color: #cfd6e0; }

/* PANTALLA COMPLETA D'EXAMEN */
#exam-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 12, 16, 0.96);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
  animation: screen-in 0.4s ease;
}
#exam-screen[hidden] { display: none; }
@keyframes screen-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.exam-inner { width: 100%; max-width: 760px; margin: auto; }
#exam-intro { text-align: center; }
#exam-intro h2 { font-size: 1.8rem; color: #f2c200; margin: 8px 0 16px; }
#exam-intro p { font-size: 1.1rem; }
.exam-big { font-size: 5rem; }
#exam-body h2 { color: #f2c200; }
.exam-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

/* MÒBIL */

/* COMPENDI */
#bestiary-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.beast { background: #3a4250; border-radius: 8px; padding: 8px 10px; cursor: pointer; border: 2px solid transparent; }
.beast:hover { border-color: rgba(242, 194, 0, 0.4); }
.beast.open { border-color: #f2c200; }
.beast-row { display: flex; align-items: center; gap: 10px; }
.beast-info { min-width: 0; } /* perquè el nom llarg es talle amb "…" */
.beast-desc { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; color: #d5dbe4; font-style: italic; }
.beast.open .beast-desc { display: block; }
.beast-ability { margin-top: 6px; font-style: normal; font-weight: 600; color: #ffe27a; }
/* fitxa amb les stats de l'enemic (en obrir-lo) */
.beast-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; font-style: normal; font-weight: 600; color: #e6e6e6; }
.beast-stats-title { flex-basis: 100%; font-size: 0.75rem; font-weight: 700; color: #aab3c0; text-transform: uppercase; letter-spacing: 0.04em; }
.beast-icon {
  position: relative;
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.beast-icon svg { width: 2.2rem; height: auto; }
.beast-icon .badge { position: absolute; right: 0; bottom: 0; font-size: 0.9rem; }
.beast-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beast-meta { font-size: 0.78rem; color: #aab3c0; }
.beast.unknown .beast-icon { filter: brightness(0) opacity(0.45); }
.beast.unknown .beast-name { color: #aab3c0; letter-spacing: 0.2em; } /* 4,8:1 (abans 3,4) */

.hub-panel .shop-offer { flex-direction: column; align-items: stretch; text-align: center; }
.hub-panel .test-options button { padding: 12px 8px; font-size: 0.95rem; }

#debug-badge {
  font-size: 0.75rem;
  background: #7b3fe4;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
}

/* CONSOLA DE DESENVOLUPADOR (només en local o amb ?dev) */
#dev-console {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #2b313b;
  border: 2px solid #7b3fe4;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem;
  z-index: 100; /* per damunt de l'examen, per a poder saltar-lo */
}
#dev-console[hidden] { display: none; }
.dev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #7b3fe4;
  color: #fff;
  font-weight: bold;
}
.dev-section { padding: 8px 10px; border-top: 1px solid #3a4250; display: flex; flex-direction: column; gap: 6px; }
.dev-head + .dev-section { border-top: none; }
.dev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dev-section label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#dev-console button[data-speed].active, #dev-console button[data-item].active { background: #7b3fe4; color: #fff; }
#dev-level { width: 80px; }
#dev-level, #dev-save {
  font: inherit;
  background: #1e2229;
  color: #e6e6e6;
  border: 1px solid #555c68;
  border-radius: 4px;
  padding: 4px 6px;
}
#dev-save { width: 100%; font-family: ui-monospace, monospace; font-size: 0.75rem; resize: vertical; }

@media (max-width: 480px) {
  #dev-console { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 70vh; }
}

/* Amb més de 4 millores (dues files) la franja manté l'alçada i les targetes es fan compactes.
   La info amagada (estadística i següent nivell) es veu passant el ratolí pel total. */
@media (min-width: 701px) and (min-height: 521px) {
  /* Textos en una sola línia: així les targetes no creixen en pantalles estretes */
  .upgrade-title, .upgrade-total, .upgrade-stat, .upgrade-next { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
  #upgrade-list.compact { gap: 10px 14px; }
  #upgrade-list.compact .upgrade { padding: 8px 12px; gap: 4px; min-height: 0; }
  #upgrade-list.compact .upgrade-head { gap: 8px; }
  #upgrade-list.compact .upgrade-icon { width: 1.8rem; height: 1.8rem; font-size: 1.1rem; border-radius: 6px; }
  #upgrade-list.compact .upgrade-title { font-size: 0.95rem; }
  #upgrade-list.compact .upgrade-level { font-size: 0.78rem; }
  #upgrade-list.compact .upgrade-progress { height: 5px; }
  #upgrade-list.compact .upgrade-total { font-size: 1.15rem; line-height: 1.3; margin-top: 0; cursor: help; }
  #upgrade-list.compact .upgrade-total small,
  #upgrade-list.compact .upgrade-stat,
  #upgrade-list.compact .upgrade-next { display: none; }
  #upgrade-list.compact .upgrade-buttons { padding-top: 0; gap: 6px; }
  #upgrade-list.compact .upgrade-buttons .buy,
  #upgrade-list.compact .lbtn { padding: 6px 10px; font-size: 0.85rem; }
}

/* Pantalles mitjanes (tauleta): 4 columnes de targetes quedaven massa estretes (títols tallats, preus en dues línies).
   Columnes d'almenys 240 px (3 a una tauleta) i la franja creix el que calga perquè no s'amague cap fila. */
@media (min-width: 701px) and (max-width: 1100px) {
  #upgrade-list, #upgrade-list.compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  #upgrades { height: auto; }
}

/* ===== MÒBIL I PANTALLES XICOTETES ===== */

/* Botó ⓘ de la L: només en pantalles tàctils (on no hi ha "hover") */
.linfo { display: none; }
@media (hover: none) {
  .linfo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 1.1rem;
    background: #555c68;
    color: #fff;
  }
  .upgrade.show-ltip .linfo { background: var(--l-green); }
  /* el tooltip no s'obri en tocar: s'obri amb ⓘ i es mostra dins de la targeta */
  .lwrap:hover .ltip { opacity: 0; }
  .upgrade { position: relative; }
  .upgrade .lwrap { position: static; }
  .upgrade.show-ltip .ltip {
    position: static;
    order: 10;
    width: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: 4px;
  }
  .upgrade.show-ltip .ltip::after { display: none; }
  .upgrade.show-ltip .upgrade-buttons { flex-wrap: wrap; }
  .upgrade.show-ltip .lwrap { display: contents; } /* el tooltip passa a ocupar una fila sencera */
  .upgrade.show-ltip .ltip { flex-basis: 100%; }
}

/* Pantalles baixes (mòbil en horitzontal): es pot fer scroll */
@media (max-height: 520px) {
  body { overflow: auto; height: auto; }
  #middle { min-height: 360px; }
  #upgrades { min-height: 0; height: auto; }
}

@media (max-width: 700px) {
  body { overflow: auto; height: auto; }

  header { padding: 6px 10px; gap: 4px; }
  header h1 { font-size: 1rem; }
  .stats-top { width: 100%; justify-content: space-between; gap: 6px; font-size: 0.85rem; }
  #debug-badge { display: none; }

  #middle { flex-direction: column; flex: none; }

  /* Escenari: alçada fixa, combatents l'un al costat de l'altre */
  #scene { flex: none; height: max(270px, 46vh); padding: 8px 10px; gap: 6px; }
  .scene-top { font-size: 0.75rem; }
  .arena { gap: 8px; }
  .fighter { padding: 4px; }
  .gear-ally { right: calc(50% + var(--h) * 0.2); } /* a la vora de l'escenari no cap: més arrimat a la granoteta */
  .fighter-name { font-size: 0.78rem; padding: 2px 8px; }
  .sprite { --h: clamp(3.2rem, 12vh, 6rem); }
  .dmg { font-size: 1.3rem; }
  .toast { white-space: normal; text-align: center; font-size: 0.8rem; padding: 4px 10px; max-width: 90vw; }
  #toasts { width: 100%; top: 34px; }

  html, body { overflow-x: hidden; }

  /* Millores */
  #upgrades { min-height: 0; padding: 10px 10px 16px; }
  #upgrades { height: auto; }
  #upgrade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .upgrade { padding: 10px; }
  .upgrade-title { font-size: 0.95rem; }
  .upgrade-icon { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
  .upgrade-total { font-size: 1.15rem; }
  .upgrade-buttons .buy { padding: 10px 6px; font-size: 0.85rem; }
  .lwrap .lbtn { padding: 10px; font-size: 0.85rem; }

  /* Examen */
  #exam-screen { padding: 16px 10px; }
  #exam-intro h2 { font-size: 1.3rem; }
  .exam-big { font-size: 3.5rem; }
}

@media (max-width: 480px) {
  #upgrade-list { grid-template-columns: 1fr; }
}