/* ── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:           #0f0f0f;
  --color-surface:      #1a1a1a;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #888;
  --color-border:       #f0f0f0;

  --color-player:  #F03251;
  --color-enemy:   #8B5CF6;
  --color-potion:  #F5A700;
  --color-maxhp:   #10B981;
  --color-wall:    #D9D9D9;

  /* grid constants — kept in sync with js/render.js CONSTANTS */
  --cell-size:  84px;
  --cell-gap:   6px;
  --cell-stride: calc(var(--cell-size) + var(--cell-gap));
}

html, body {
  height: 100%;
  overflow: hidden;           /* no page scroll during drag */
  touch-action: none;         /* prevent browser pan/zoom */
  background: linear-gradient(349deg, #2B3B40 0.71%, #07252F 98.04%);
  color: var(--color-text-primary);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────── */
/* Copre anche l'area notch (safe-area-inset-top) con il suo sfondo.  */
.game-header {
  flex-shrink: 0;
  width: 100%;
  background: #334347;
  display: flex;
  align-items: flex-end;          /* logo incollato al bordo inferiore */
  padding-top:    env(safe-area-inset-top);
  padding-bottom: 10px;
  min-height: calc(55px + env(safe-area-inset-top));
}

/* padding-left impostato via JS in updateBoardSize() per allineare il
   logo al bordo sinistro della game-area, indipendentemente dallo schermo. */
.header-logo-link {
  display: flex;
  align-items: center;
}

.header-logo {
  height: 45px;
  display: block;
  pointer-events: none;
}

.header-settings-btn {
  margin-left: auto;    /* spinge il bottone al bordo destro */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header-settings-icon {
  width: 30px;
  height: 30px;
  display: block;
  pointer-events: none;
}

/* ── Layout ───────────────────────────────────────────────────────── */
.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1;                        /* occupa l'altezza rimanente dopo l'header */
  min-height: 0;
  /* safe-area-inset-top gestita dall'header; qui solo bottom e lati */
  padding-top:    1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  padding-left:   16px;
  padding-right:  16px;
  user-select: none;
}

/* ── Game area (hud + board stacked, width driven by board) ──────── */
.game-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── HUD ──────────────────────────────────────────────────────────── */
.hud {
  display: flex;
  flex-direction: column;
  width: 100%;             /* stretches to .game-area width = board width */
  font-family: 'Pirata One', cursive;
}

/* Riga 1: Level (sinistra) + Best (destra) */
.hud-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #F9314F;
}

/* Riga 2: HP + cuori (sinistra) */
.hud-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
}

.hud-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.hud-label {
  font-size: 32px;
  color: #ffffff;
  line-height: 1;
  font-family: 'Pirata One', cursive;
}

.hud-num {
  font-size: 32px;
  color: #F9314F;
  line-height: 1;
  font-family: 'Pirata One', cursive;
}

/* Cuori HP — max 8 per riga, poi wrap naturale */
/* max-width = 8 × 31px + 7 × 5px (gap) = 283px */
.hud-hearts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 5px;
  max-width: 283px;
}

.hud-heart {
  width: 31px;
  height: 29px;
  display: block;
}

/* ── Board slot — area fissa = 4×4, centra il board interno ────────── */
/* Larghezza e altezza impostati via JS in updateBoardSize().           */
/* Il flex centra il board-outer sia orizzontalmente che verticalmente, */
/* così le griglie piccole dei tutorial restano al centro del riquadro. */
.board-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Board ────────────────────────────────────────────────────────── */
.board-outer {
  position: relative;
  cursor: grab;
  overflow: visible;
  color: var(--color-border);   /* SVG border uses currentColor */
}
.board-outer:active { cursor: grabbing; }

.board-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  color: #334347;   /* colore bordo SVG via currentColor */
}

/* ── Cells ────────────────────────────────────────────────────────── */
.cell {
  position: absolute;
  will-change: transform;
}
.cell-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.c-potion .cell-inner { color: #7a4e00; }
.c-enemy  .cell-inner { color: #2d1a6e; }
.c-maxhp  .cell-inner { color: #064e3b; }
.c-heavy  .cell-inner { color: #2B3B40; }

.cell.c-player { z-index: 10; }

/* Icon image — riempie tutta la cella; overflow:hidden su .cell-inner clippa il border SVG */
.cell-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Value badge — top-left corner (HP, danno, cura) */
.cell-val {
  position: absolute;
  top: 4px;
  left: 5px;
  font-family: 'Pirata One', cursive;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* ── Animations ───────────────────────────────────────────────────── */
.cell.bounce .cell-inner { animation: bounce 0.22s ease-out; }
@keyframes bounce {
  0%   { transform: scaleY(1)    scaleX(1); }
  40%  { transform: scaleY(0.7)  scaleX(1.25); }
  65%  { transform: scaleY(1.15) scaleX(0.9); }
  85%  { transform: scaleY(0.95) scaleX(1.05); }
  100% { transform: scaleY(1)    scaleX(1); }
}

.blocked { animation: shake 0.25s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

/* ── Floating labels ──────────────────────────────────────────────── */
.float-label {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  font-size: 17px;
  font-weight: 700;
  animation: floatUp 0.9s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  20%  { transform: translateY(-8px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-48px) scale(0.9); }
}

/* ── Grid-grow banner ─────────────────────────────────────────────── */
.grid-grow-banner {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  animation: bannerIn 0.2s ease-out;
}
@keyframes bannerIn { from { opacity: 0; } to { opacity: 1; } }
.grid-grow-banner span {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Game over overlay ────────────────────────────────────────────── */
.game-over {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 32px;
  background: linear-gradient(349deg, rgba(43,59,64,0.9) 0.71%, rgba(7,37,47,0.9) 98.04%);
  animation: bannerIn 0.3s ease-out;
}

/* Titolo GameOver (SVG) */
.go-title {
  width: min(300px, 80vw);
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* Contenitore tomba: la larghezza guida tutto il layout interno */
.go-grave-wrap {
  position: relative;
  width: min(240px, 62vw);
  flex-shrink: 0;
  transform: translateX(12%);
}

/* Tomba SVG — occupa tutta la larghezza del contenitore */
.go-grave {
  width: 100%;
  height: auto;
  display: block;
}

/* Faccia dell'eroe sovrapposta alla lapide
   Valori derivati dal Figma: hero è al 8% dal left, 0% dal top,
   larghezza = 63% della tomba (copre l'area circolare) */
.go-hero {
  position: absolute;
  width: 63%;
  left: 8%;
  top: 20%;
  pointer-events: none;
}

/* RIP — sul corpo della lapide */
.go-rip {
  position: absolute;
  top: 75%;
  left: 42%;
  transform: translateX(-50%);
  font-family: 'Pirata One', cursive;
  font-size: clamp(22px, 6vw, 34px);
  color: #2b3b40;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Range livelli — sotto RIP */
.go-level {
  position: absolute;
  top: 86%;
  left: 42%;
  transform: translateX(-50%);
  font-family: 'Pirata One', cursive;
  font-size: clamp(18px, 5vw, 28px);
  color: #2b3b40;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Bottone Start again */
.go-btn {
  flex-shrink: 0;
  background: #740012;
  color: #f9314f;
  font-family: 'Pirata One', cursive;
  font-size: clamp(28px, 8vw, 48px);
  line-height: 1;
  border: none;
  border-radius: 10px;
  padding: 12px 40px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.go-btn:hover  { opacity: 0.85; }
.go-btn:active { opacity: 0.7; }

/* ── Hit flash ────────────────────────────────────────────────────── */
#hit-flash {
  position: fixed;
  inset: 0;
  background: linear-gradient(349deg, #F9314F 0.71%, #740012 98.04%);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}
#hit-flash.active {
  animation: hitFlash 0.9s ease-out forwards;
}
@keyframes hitFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Ouch icon ────────────────────────────────────────────────────── */
.ouch-icon {
  position: absolute;
  width: 72px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 25;
  animation: ouchIn 0.18s cubic-bezier(0.34,1.56,0.64,1) forwards,
             ouchOut 0.35s ease-in 1.65s forwards;
}
@keyframes ouchIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.4); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes ouchOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Exit unlock animation ────────────────────────────────────────── */
.exit-appear {
  animation: exitAppear 0.5s ease-out forwards;
}
@keyframes exitAppear {
  0%   { opacity: 0; }
  60%  { opacity: 1.2; }
  100% { opacity: 1; }
}

.border-rumble {
  animation: borderRumble 0.7s ease-out, borderColorFade 1.1s ease-out forwards;
  transform-origin: center;
}
@keyframes borderRumble {
  0%   { transform: translate(0,    0);    }
  8%   { transform: translate(-5px, -3px); }
  16%  { transform: translate( 5px,  3px); }
  24%  { transform: translate(-5px,  3px); }
  32%  { transform: translate( 5px, -3px); }
  42%  { transform: translate(-4px, -2px); }
  52%  { transform: translate( 4px,  2px); }
  62%  { transform: translate(-2px,  1px); }
  74%  { transform: translate( 2px, -1px); }
  88%  { transform: translate(-1px,  0);   }
  100% { transform: translate(0,    0);    }
}
@keyframes borderColorFade {
  0%   { color: #ffffff; }
  55%  { color: #ffffff; }
  100% { color: #334347; }
}

/* ── Special ability panel ────────────────────────────────────────── */
.special-panel {
  display: none;                /* hidden during levels 1–2 */
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #879783;
  border-radius: 10px;
}
.special-panel.visible {
  display: flex;
  animation: specialSlideIn 0.4s ease-out forwards;
}
@keyframes specialSlideIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.special-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}
.special-btn.special-on {
  animation: specialGlow 1.2s ease-in-out infinite alternate;
}
@keyframes specialGlow {
  from { filter: drop-shadow(0 0 4px #FF9900) drop-shadow(0 0 8px rgba(255,153,0,0.5)); }
  to   { filter: drop-shadow(0 0 10px #FF9900) drop-shadow(0 0 20px rgba(255,153,0,0.8)); }
}
.special-btn-icon {
  width: 40px;
  height: 40px;
  display: block;
  pointer-events: none;
}

.special-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.special-label {
  font-family: 'Pirata One', cursive;
  font-size: 22px;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
}

.special-gauge {
  display: flex;
  align-items: center;
  gap: 3px;
}
.gauge-seg {
  display: block;
  height: 12px;
  width: auto;
  flex-shrink: 0;
}

/* ── Settings sheet ───────────────────────────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.settings-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.settings-sheet {
  position: fixed;
  top: 0;
  right: 0;
  width: 330px;
  height: 100%;
  height: 100dvh;
  background: #47606c;
  box-shadow: none;
  z-index: 201;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 70px 32px;
  padding-top: max(70px, calc(env(safe-area-inset-top) + 24px));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0, 0.67, 0),
              box-shadow 0s ease 0.35s;
}
.settings-sheet.open {
  transform: translateX(0);
  box-shadow: -20px 4px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
              box-shadow 0s ease 0s;
}

.settings-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.settings-title {
  font-family: 'Pirata One', cursive;
  font-size: 32px;
  color: #d9d9d9;
  line-height: 1;
}
.settings-close-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-close-icon {
  width: 30px;
  height: 30px;
  display: block;
  pointer-events: none;
}

.settings-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;  /* centra verticalmente la/le righe */
}
.settings-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.settings-row-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #d9d9d9;
  line-height: 1;
}

/* Toggle */
.settings-toggle {
  width: 35px;
  height: 20px;
  background: #334347;
  border: none;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d9d9d9;
  transition: left 0.2s ease, background 0.2s ease;
  pointer-events: none;
}
.settings-toggle[aria-checked="true"] .toggle-dot {
  left: 17px;
  background: #F9314F;
}

.settings-footer {
  display: flex;
  justify-content: center;
}
.settings-dok-logo {
  height: 60px;
  width: auto;
  display: block;
}

/* ── Mighty Slash beam ────────────────────────────────────────────── */
.slash-beam {
  position: absolute;
  height: 12px;
  width: 0;
  opacity: 0;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255, 220, 80, 0)   0%,
    rgba(255, 220, 80, 0.9) 20%,
    #ffffff                 50%,
    rgba(255, 220, 80, 0.9) 80%,
    rgba(255, 220, 80, 0)   100%
  );
  box-shadow:
    0 0  6px  3px rgba(255, 255, 255, 0.95),
    0 0 18px  9px rgba(255, 210, 60, 0.7),
    0 0 40px 20px rgba(255, 180, 0, 0.35);
  pointer-events: none;
  z-index: 50;
  transition: width 0.32s ease-out, opacity 0.12s ease;
}

/* ── Responsive: scale cell size on small screens ─────────────────── */
@media (max-width: 400px) {
  :root {
    --cell-size: 68px;
    --cell-gap:  5px;
  }
}