/* Bombozzi editor — dark professional theme. */

:root {
  --bg: #07060a;
  --panel: #120f18;
  --panel2: #1c1725;
  --border: #3c3048;
  --text: #ded8e7;
  --text-dim: #968a9f;
  --accent: #b27be5;
  --accent2: #d8b66a;
  --danger: #a83250;
  --ok: #75b992;
  --glow: rgba(178, 123, 229, 0.25);
  --glass: rgba(17, 13, 23, 0.95);
  font-size: 13px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
}

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

/* --- toolbar --- */

#toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(34, 22, 40, 0.99), rgba(13, 10, 19, 0.99));
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
  position: relative;
  z-index: 10;
}

.tb-title {
  font: 700 14px Georgia, serif;
  letter-spacing: 0.06em;
  color: var(--accent2);
  margin-right: 6px;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(240, 195, 62, 0.35);
}

.project-picker {
  background: rgba(240, 195, 62, 0.07);
  border-color: rgba(240, 195, 62, 0.28);
  text-align: left;
}
.project-picker:hover { border-color: var(--accent2); }
.btn.source-dirty { border-color: #e6a84e; color: #ffd07c; box-shadow: inset 0 -2px rgba(230, 168, 78, 0.25); }

.tb-group {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 0 8px;
  border-left: 1px solid var(--border);
}

.tb-label { color: var(--text-dim); margin-right: 4px; }

.btn {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  transition: border-color 120ms, background 120ms, color 120ms, transform 120ms, box-shadow 120ms;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.btn.active { background: linear-gradient(180deg, #c99aef, #8154ac); color: #150c1c; border-color: var(--accent); box-shadow: 0 0 16px var(--glow); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn.danger { color: #ff9a9a; }
.btn.danger:hover { border-color: var(--danger); }
.btn.play { background: var(--ok); color: #06281a; border-color: var(--ok); font-weight: 600; }
.btn.play.stop { background: var(--danger); color: #fff; border-color: #ff8b8b; box-shadow: 0 0 18px rgba(255, 76, 92, 0.28); }
.btn.tiny { padding: 1px 5px; font-size: 11px; }

/* --- layout --- */

#main {
  flex: 1;
  display: flex;
  min-height: 0;
}

#left, #right {
  width: 230px;
  background: linear-gradient(180deg, var(--glass), rgba(12, 16, 25, 0.97));
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
#left { border-right: 1px solid var(--border); }
#right { border-left: 1px solid var(--border); width: 304px; }

.panel { padding: 8px; border-bottom: 1px solid var(--border); }

.panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 6px 0 4px;
}
/* Intestazione di categoria collassabile nella palette entità. */
.ent-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 3px 4px;
  border-radius: 4px;
}
.ent-cat:hover { background: var(--panel2); color: var(--text); }
.ent-caret { width: 10px; font-size: 9px; opacity: 0.7; }
.ent-cat-name { flex: 1; }
.ent-count {
  font-size: 10px;
  opacity: 0.55;
  background: var(--panel2);
  border-radius: 999px;
  padding: 0 6px;
  letter-spacing: 0;
}
/* Miniatura sprite nella palette entità e bottone 📍 del Cutscene Lab. */
.ent-thumb { width: 22px; height: 22px; flex: 0 0 22px; image-rendering: pixelated; border-radius: 4px; background: rgba(255,255,255,0.04); }
.cs-pick { margin-left: 4px; padding: 0 6px; line-height: 1.6; }
/* Anteprima di una def da piazzare, nell'inspector. */
.def-preview-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 116px;
  background:
    repeating-conic-gradient(#1a1f2b 0% 25%, #12161f 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  margin: 4px 0 8px;
}
.def-preview { image-rendering: pixelated; }
.def-comp-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.def-comp-chip {
  font-size: 10px;
  background: var(--panel2);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 1px 7px;
}

#center {
  flex: 1;
  position: relative;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(105, 59, 125, 0.2), transparent 44%),
    linear-gradient(135deg, #07060a, #100b15 55%, #08070d);
}

#edit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

#statusbar {
  padding: 4px 10px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-family: Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

/* --- rooms panel --- */

.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  gap: 4px;
}
.room-row:hover { background: var(--panel2); }
.room-row.active { background: var(--panel2); outline: 1px solid var(--accent); }
.room-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-actions { display: flex; gap: 4px; margin-top: 6px; }

/* --- campo di ricerca dei pannelli --- */

.panel-search {
  width: 100%;
  margin: 2px 0 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 12px;
}
.panel-search:focus { outline: none; border-color: var(--accent); }
.panel-search::placeholder { color: var(--text-dim); }

/* --- palette --- */

.tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.tabs .btn { flex: 1; }

.layer-list { margin-bottom: 8px; }
.layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.layer-row:hover { background: var(--panel2); }
.layer-row.active { background: var(--panel2); outline: 1px solid var(--accent); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 38px);
  gap: 4px;
}
.tile-cell {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-dim);
}
.tile-cell:hover { border-color: var(--accent); }
.tile-cell.active { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2); }
.tile-cell canvas { image-rendering: pixelated; }

.ent-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.ent-row:hover { background: var(--panel2); }
.ent-row.active { background: var(--panel2); outline: 1px solid var(--accent2); }
.ent-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* --- inspector --- */

.insp-group {
  background: linear-gradient(180deg, rgba(31,24,40,0.96), rgba(21,16,28,0.98));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}
.insp-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--accent);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.insp-title::after { content: '⌄'; color: var(--text-dim); transition: transform 120ms; }
.insp-group.collapsed .insp-title { margin-bottom: 0; }
.insp-group.collapsed .insp-title::after { transform: rotate(-90deg); }
.insp-group.collapsed > :not(.insp-title) { display: none; }
.insp-sub {
  color: var(--text-dim);
  font-size: 11px;
  margin-bottom: 6px;
  word-break: break-all;
}

/* --- pannello selezione multipla --- */

.insp-multi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.insp-multi-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  padding: 2px 9px;
  font-size: 11px;
  cursor: pointer;
}
.insp-multi-row:hover { border-color: var(--accent2); color: var(--text); }

.insp-btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0;
}
.insp-btn-row .btn { width: auto; margin-top: 0; }
.insp-btn-row .btn.tiny { min-width: 28px; font-size: 13px; line-height: 1; padding: 4px 6px; }
.insp-btn-label {
  color: var(--text-dim);
  font-size: 11px;
  width: 74px;
  flex: none;
}
.insp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0;
}
.insp-row > span { color: var(--text-dim); flex: 1; }
.insp-row input[type='number'], .insp-row input[type='text'], .insp-row select {
  width: 120px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
}
.insp-row input[type='color'] { width: 120px; height: 24px; padding: 0 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.insp-group .btn { margin-top: 4px; width: 100%; }
.tuning-presets { display: flex; gap: 5px; margin-top: 8px; }
.tuning-presets .btn { width: auto; flex: 1; padding-inline: 5px; }
.jump-stats { margin: 8px 0 5px; color: var(--text-dim); font-size: 11px; line-height: 1.35; }
.jump-preview { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 5px; }
.atmosphere-label { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--accent2); letter-spacing: 0.06em; text-transform: uppercase; }

/* --- visual direction controls (the JSON remains the source of truth) --- */

.visual-slider {
  width: 172px;
  display: grid;
  grid-template-columns: minmax(54px, 1fr) 52px 23px;
  align-items: center;
  gap: 4px;
}
.visual-slider input[type='range'] {
  width: 100%;
  min-width: 0;
  height: 16px;
  accent-color: var(--accent);
  cursor: ew-resize;
}
.visual-slider input[type='number'] {
  width: 52px;
  min-width: 0;
  padding: 2px 3px;
  text-align: right;
  background: #0b0910;
  color: var(--accent2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 10px Consolas, monospace;
}
.visual-reset {
  width: 23px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel2);
  color: var(--text-dim);
  cursor: pointer;
}
.visual-reset:hover { color: var(--accent2); border-color: var(--accent); }
.visual-button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0 9px;
}
.insp-group .visual-button-grid .btn { width: 100%; margin: 0; padding-inline: 4px; }
.visual-button-grid-wide { grid-template-columns: 1fr; }

.visual-layer-card {
  margin: 5px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(8, 6, 12, 0.45);
  overflow: hidden;
}
.visual-layer-card[open] { border-color: #654d78; }
.visual-layer-card summary {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  padding: 7px;
  cursor: pointer;
  list-style: none;
}
.visual-layer-card summary::-webkit-details-marker { display: none; }
.visual-layer-card summary b { color: var(--text); font-size: 11px; }
.visual-layer-card summary span { color: var(--text-dim); font: 9px Consolas, monospace; white-space: nowrap; }
.visual-layer-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 6px 5px; }
.insp-group .visual-layer-actions .btn { width: 100%; margin: 0; padding: 2px; }
.visual-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  color: var(--text-dim);
  font-size: 10px;
}
.visual-layer-row > select,
.visual-layer-row > input[type='color'] {
  width: 172px;
  min-width: 0;
  padding: 3px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.visual-layer-row > input[type='color'] { height: 24px; }
.visual-light-list { display: flex; flex-direction: column; gap: 4px; }
.visual-light-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(8, 6, 12, 0.45);
  color: var(--text-dim);
  cursor: pointer;
  text-align: left;
}
.visual-light-chip:hover { color: var(--text); border-color: var(--accent2); }
.visual-light-chip i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}

/* --- play mode --- */

#play-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #16101e, #030306 72%);
}
#play-wrap[hidden] { display: none; }

.game-frame {
  position: relative;
  width: min(100%, calc((100vh - 90px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 1px solid #4a3558;
  box-shadow: 0 0 0 1px #120c18, 0 22px 70px rgba(0,0,0,0.72), 0 0 32px rgba(107,48,132,0.14);
}
#game-canvas {
  width: 100%;
  height: 100%;
  image-rendering: auto;
  background: #000;
  display: block;
}

/* --- HUD --- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
#hud [hidden] { display: none !important; }

.hud-top {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-shadow: 0 1px 2px #000;
}
.hud-top[hidden], .hud-hint[hidden] { display: none; }
.hud-hearts { color: #d94260; font-size: 18px; letter-spacing: 2px; filter: drop-shadow(0 0 4px rgba(217,66,96,0.55)); }
.hud-needs {
  display: grid;
  gap: 2px;
  width: 126px;
  padding: 3px 5px;
  border: 1px solid rgba(116, 90, 130, 0.5);
  background: rgba(5, 6, 13, 0.76);
  box-shadow: inset 0 0 10px #020207, 0 0 8px rgba(80, 34, 83, 0.24);
}
.hud-needs[hidden] { display: none; }
.need { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 4px; }
.need span { font: 700 7px/1 Consolas, monospace; letter-spacing: 0.08em; }
.need em { color: #ddd5e8; font: normal 7px/1 Consolas, monospace; text-align: right; }
.need i { display: block; height: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); background: #09070f; }
.need i b { display: block; width: 0; height: 100%; transition: width 120ms linear; }
.need.blood span { color: #ff6b78; }
.need.blood i b { background: linear-gradient(90deg, #641423, #e3384f 72%, #ff8a83); box-shadow: 0 0 6px #d82746; }
.need.drug span { color: #c28af0; }
.need.drug i b { background: linear-gradient(90deg, #43205d, #9254c8 70%, #dc9aff); box-shadow: 0 0 6px #9554cc; }
/* Lucidità: la droga alta è un VANTAGGIO, e deve vedersi che lo è. */
.need.drug.lucid span { color: #e6b8ff; }
.need.drug.lucid i {
  border-color: #a86fd6;
  box-shadow: 0 0 7px rgba(190, 120, 255, 0.55);
}
.need.drug.lucid i b { background: linear-gradient(90deg, #6b2f96, #c07af0 66%, #f2d0ff); }

.need.low { animation: need-pulse 1.1s steps(2, end) infinite; }
.need.critical { filter: saturate(1.45) brightness(1.18); animation-duration: 0.45s; }
@keyframes need-pulse { 50% { opacity: 0.58; } }
.hud-coins { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--accent2); }
.coin-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9a0, #f0c33e 60%, #a8811f);
}
.hud-sub {
  color: #cfe3ff;
  background: rgba(10, 14, 24, 0.55);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.hud-sub.magic { color: #efc8ff; border: 1px solid rgba(190, 105, 255, 0.32); }
.hud-mana {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 112px;
  color: #d9b4ff;
  font-size: 10px;
}
.hud-mana[hidden] { display: none; }
.hud-mana > span { text-shadow: 0 0 7px #b35cff; }
.hud-mana b { min-width: 36px; color: #e8d8ff; font: 9px Consolas, monospace; }
.mana-bar {
  width: 62px;
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(196, 133, 255, 0.56);
  border-radius: 5px;
  background: rgba(12, 5, 25, 0.82);
  box-shadow: inset 0 0 5px #05010a;
}
.mana-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #554cff, #c956ed 62%, #f4b8ff);
  box-shadow: 0 0 8px #a85cff;
  transition: width 90ms linear;
}
.hud-mana.cooling .mana-bar { filter: saturate(0.45) brightness(0.75); }
.hud-items { color: #d9c9f0; font-size: 12px; }

.hud-boss {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.boss-name { color: #ff8c8c; font-weight: 700; letter-spacing: 0.15em; font-size: 13px; text-transform: uppercase; }
.boss-bar {
  height: 7px;
  margin-top: 3px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #692832;
  border-radius: 4px;
  overflow: hidden;
}
.boss-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ff6a5e, #b3202c);
  transition: width 0.15s;
}

.hud-quest {
  position: absolute;
  top: 8px;
  right: 10px;
  max-width: 40%;
  color: #ffe9a0;
  font-size: 12px;
  text-align: right;
  text-shadow: 0 1px 2px #000;
}

/* Anello delle Arti. Non è un menu di pausa: il mondo resta visibile e scorre
   al tempo scelto dal progetto, mentre puntatore/stick selezionano in tempo
   reale. Tutto resta pointer-events:none per non rubare il rilascio del tasto. */
.hud-arcana-wheel {
  --arcana-accent: #65e7ff;
  position: absolute;
  z-index: 24;
  left: 50%;
  top: 50%;
  width: min(78%, 440px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 18px 45px rgba(0, 0, 0, .72));
  animation: arcanaWheelIn .14s cubic-bezier(.16,.8,.28,1) both;
}
.hud-arcana-wheel::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 50%, transparent 12%, rgba(2, 5, 12, .48) 54%, rgba(1, 2, 7, .78) 100%),
    linear-gradient(105deg, rgba(38, 120, 156, .1), transparent 46%, rgba(92, 41, 132, .12));
  backdrop-filter: blur(1.6px) saturate(.72);
}
.arcana-wheel-ring {
  position: absolute;
  inset: 11%;
  border: 1px solid color-mix(in srgb, var(--arcana-accent) 58%, transparent);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -2deg, color-mix(in srgb, var(--arcana-accent) 34%, transparent) 0 1deg, transparent 1deg 29deg),
    radial-gradient(circle, rgba(5, 11, 20, .84) 0 33%, rgba(7, 12, 23, .48) 34% 67%, rgba(3, 6, 13, .78) 68% 100%);
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, .88),
    inset 0 0 0 9px rgba(4, 8, 16, .32),
    0 0 28px color-mix(in srgb, var(--arcana-accent) 20%, transparent);
  animation: arcanaRing 18s linear infinite;
}
.arcana-wheel-slots { position: absolute; inset: 0; }
.arcana-wheel-slot {
  position: absolute;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: clamp(92px, 24%, 136px);
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid rgba(133, 177, 208, .32);
  border-left: 2px solid rgba(133, 177, 208, .56);
  background: linear-gradient(110deg, rgba(4, 9, 17, .94), rgba(12, 18, 30, .88));
  color: rgba(220, 229, 238, .72);
  transform: translate(-50%, -50%) scale(.9);
  transition: transform 80ms ease, color 80ms ease, border-color 80ms ease, background 80ms ease;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.arcana-wheel-slot i {
  grid-row: 1 / 3;
  color: var(--arcana-accent);
  font: normal 23px/1 Georgia, serif;
  text-align: center;
  text-shadow: 0 0 11px color-mix(in srgb, var(--arcana-accent) 65%, transparent);
}
.arcana-wheel-slot b {
  overflow: hidden;
  color: inherit;
  font: 700 clamp(8px, .8vw, 11px)/1.05 system-ui, sans-serif;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.arcana-wheel-slot small {
  color: rgba(167, 187, 205, .62);
  font: 7px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
}
.arcana-wheel-slot.selected {
  z-index: 3;
  color: #f4fbff;
  border-color: color-mix(in srgb, var(--arcana-accent) 88%, white 12%);
  border-left-color: #fff;
  background: linear-gradient(105deg, color-mix(in srgb, var(--arcana-accent) 34%, #061019), rgba(5, 11, 20, .96));
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 22px color-mix(in srgb, var(--arcana-accent) 28%, transparent);
}
.arcana-wheel-center {
  position: absolute;
  inset: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}
.arcana-wheel-center small,
.arcana-wheel-center em {
  color: color-mix(in srgb, var(--arcana-accent) 76%, #cbd4df);
  font: normal 7px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .18em;
}
.arcana-wheel-center b {
  color: #f3f6f9;
  font: 800 clamp(11px, 1.25vw, 17px)/1.05 system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}
.arcana-wheel-center span {
  display: -webkit-box;
  overflow: hidden;
  max-width: 24em;
  color: rgba(205, 215, 225, .74);
  font: clamp(8px, .72vw, 10px)/1.25 Georgia, serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.arcana-wheel-center em { margin-top: 3px; color: rgba(213, 228, 239, .52); }
@keyframes arcanaWheelIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes arcanaRing { to { transform: rotate(360deg); } }
@media (max-height: 520px) {
  .hud-arcana-wheel { width: min(72vh, 430px); }
  .arcana-wheel-center span { display: none; }
  .arcana-wheel-slot { width: clamp(84px, 22%, 118px); min-height: 42px; padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-arcana-wheel, .arcana-wheel-ring { animation: none; }
  .arcana-wheel-slot { transition: none; }
}

/* Cartello d'area: compare attraversando una porta e si dissolve da solo.
   Non intercetta il puntatore — sta sopra il gioco, non davanti. */
.hud-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 26%;
  text-align: center;
  pointer-events: none;
  animation: area-in 0.45s ease-out both;
}

.hud-area .area-kicker {
  font-size: 9px;
  letter-spacing: 0.34em;
  color: #b08a72;
  text-shadow: 0 1px 2px #000;
}

.hud-area .area-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f2e4cf;
  text-shadow: 0 2px 6px #000, 0 0 18px rgba(255, 190, 130, 0.25);
}

/* La prima visita è un'insegna piena; il ritorno resta discreto. */
.hud-area.first .area-kicker { color: #ffd27a; }
.hud-area.first .area-name {
  font-size: 25px;
  color: #fff3dd;
}

@keyframes area-in {
  from { opacity: 0; transform: translateY(7px); letter-spacing: 0.2em; }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-area { animation: none; }
}

.hud-toasts {
  position: absolute;
  bottom: 86px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.toast {
  background: rgba(10, 14, 24, 0.85);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  animation: toast-in 2.6s both;
}
@keyframes toast-in {
  0% { opacity: 0; transform: translateY(6px); }
  8%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

.hud-dialogue {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 26px;
  background: linear-gradient(180deg, rgba(21,14,28,0.97), rgba(7,6,11,0.98));
  border: 1px solid #725187;
  border-radius: 2px;
  padding: 12px 18px;
  pointer-events: auto;
  box-shadow: inset 0 0 0 2px rgba(207,174,113,0.08), 0 12px 42px rgba(0,0,0,0.72), 0 0 22px rgba(118,61,139,0.16);
  --dlg-accent: var(--accent2);
  transition: padding 0.18s ease;
}
.hud-dialogue.has-portrait { min-height: 120px; padding-left: 150px; }
.hud-dialogue.has-portrait.portrait-right { padding-left: 18px; padding-right: 150px; }
.dlg-body { position: relative; z-index: 2; min-width: 0; }
.dlg-portrait {
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: 0;
  width: 128px;
  height: 154px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dlg-accent) 58%, transparent);
  background: #080910;
  box-shadow: inset 0 0 25px #05050a, 0 0 24px color-mix(in srgb, var(--dlg-accent) 18%, transparent);
  clip-path: polygon(0 7%, 9% 0, 100% 0, 100% 93%, 91% 100%, 0 100%);
}
.portrait-right .dlg-portrait { left: auto; right: 10px; }
.dlg-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(7,6,11,0.9) 100%);
  box-shadow: inset 0 -10px 20px rgba(7,6,11,0.72);
}
.dlg-portrait-canvas { width: 100%; height: 100%; display: block; }
.dlg-portrait.enter { animation: dlgPortraitLeft 0.24s cubic-bezier(.2,.8,.2,1) both; }
.portrait-right .dlg-portrait.enter { animation-name: dlgPortraitRight; }
@keyframes dlgPortraitLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes dlgPortraitRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.dlg-speaker { color: var(--dlg-accent); font: 700 12px Georgia, serif; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
.dlg-text { font: 14px/1.45 Georgia, serif; white-space: pre-line; }
.dlg-choices { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.dlg-choice {
  text-align: left;
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.dlg-choice.sel { color: var(--text); border-color: var(--accent); background: rgba(94, 200, 240, 0.08); }
.dlg-hint { color: var(--text-dim); font-size: 10px; text-align: right; margin-top: 4px; }

.hud-dead {
  --death-accent: #ff5d6e;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: clamp(34px, 11vh, 82px) 18px 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 3, 7, 0.7), transparent 38%);
  animation: deathVerdictIn 0.34s cubic-bezier(.16,.78,.25,1) both;
}
.hud-dead[hidden] { display: none; }
.dead-kicker {
  color: var(--death-accent);
  font: 700 clamp(8px, .8vw, 11px)/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
}
.dead-title {
  max-width: 92%;
  color: #f1f4f7;
  font: 800 clamp(20px, 3vw, 38px)/1.08 system-ui, sans-serif;
  letter-spacing: clamp(.08em, .8vw, .22em);
  text-align: center;
  text-shadow: 0 2px 14px #000, 0 0 22px color-mix(in srgb, var(--death-accent) 26%, transparent);
}
.dead-sub {
  margin-top: 5px;
  color: rgba(226, 233, 241, .72);
  font-size: clamp(9px, .9vw, 12px);
  letter-spacing: .06em;
  animation: deathPromptIn .26s ease-out both;
}
.dead-sub[hidden] { display: none; }
@keyframes deathVerdictIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes deathPromptIn { from { opacity: 0; } to { opacity: 1; } }

.hud-hint {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border: 1px solid rgba(159, 224, 255, 0.18);
  border-radius: 12px;
  background: rgba(5, 7, 13, 0.76);
  text-align: center;
  color: rgba(232, 237, 248, 0.88);
  font-size: clamp(9px, 0.9vw, 12px);
  line-height: 1.15;
  text-shadow: 0 1px 3px #000;
}

.hud-abil { color: #9fe0ff; font-size: 15px; letter-spacing: 3px; }

/* --- menu di pausa --- */

.menu-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(5,7,10,0.98), rgba(18,9,17,0.96)),
    radial-gradient(circle at 72% 18%, rgba(125,32,61,0.2), transparent 38%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 5;
}
.menu-overlay[hidden] { display: none; }

.menu-box {
  position: relative;
  width: min(94%, 760px);
  max-height: 94%;
  overflow: auto;
  background: linear-gradient(155deg, rgba(30,24,29,0.98), rgba(8,10,13,0.99) 68%);
  border: 1px solid #5f5150;
  border-top-color: #a77d69;
  border-radius: 8px;
  padding: 16px;
  box-shadow: inset 0 0 0 1px rgba(225,190,148,0.055), 0 22px 80px rgba(0,0,0,0.86);
}
.menu-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 12px;
  border-bottom: 1px solid rgba(183,147,117,0.38);
}
.menu-crest {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid #a77d69;
  transform: rotate(45deg);
  color: #e5c39f;
  font: 700 22px Georgia, serif;
  background: linear-gradient(135deg, #3c1724, #171015);
  box-shadow: inset 0 0 12px rgba(203,74,94,0.18);
}
.menu-crest span { transform: rotate(-45deg); }
.menu-kicker { color: #a98e7d; font: 9px Consolas, monospace; letter-spacing: .2em; }
.menu-player { color: #eee3d5; font: 700 19px Georgia, serif; letter-spacing: .08em; }
.menu-location { color: #9a9290; font-size: 10px; margin-top: 2px; }
.menu-pause-label { color: #b84b63; font: 700 10px Consolas, monospace; letter-spacing: .3em; }
.menu-vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.menu-vital {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 10px;
  border: 1px solid #3d3535;
  background: rgba(8,10,13,.74);
}
.menu-vital::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #8e3b4f; }
.menu-vital.drug::before { background: #be9b5c; }
.menu-vital.hp::before { background: #d5c4af; }
.menu-vital span { color: #8c8380; font: 8px Consolas, monospace; letter-spacing: .12em; }
.menu-vital strong { color: #eee3d5; font: 700 13px Consolas, monospace; }
.menu-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 10px; }
.menu-col { min-width: 0; }
.menu-panel {
  padding: 10px;
  border: 1px solid #393235;
  background: rgba(8,9,12,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.menu-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 700 10px Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #d8c2ad;
  margin: 4px 0 7px;
  border-bottom: 1px solid #403638;
  padding-bottom: 5px;
}
.menu-title small { color: #746c6b; font-size: 8px; letter-spacing: .06em; }
.menu-loadout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 11px; }
.menu-slot {
  position: relative;
  min-height: 36px;
  padding: 6px 24px 5px 7px;
  border: 1px solid #3a3436;
  background: linear-gradient(135deg, rgba(36,28,31,.88), rgba(14,14,17,.88));
}
.menu-slot span { display: block; color: #7f7370; font: 7px Consolas, monospace; letter-spacing: .12em; }
.menu-slot strong { display: block; color: #c7bbb0; font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-slot.filled { border-color: #554347; }
.menu-slot { cursor: pointer; }
.menu-slot:hover, .menu-slot.active { border-color: #b45a6d; background: linear-gradient(135deg, rgba(71,35,45,.92), rgba(20,15,20,.92)); }
.menu-slot i { position: absolute; right: 7px; top: 10px; color: #a94b61; font: 700 9px Consolas, monospace; font-style: normal; }
.menu-inv { display: grid; gap: 4px; max-height: 230px; overflow: auto; padding-right: 3px; }
.menu-inv-group { position: sticky; top: 0; z-index: 1; padding: 5px 3px 2px; color: #b9997b; background: rgba(11,10,13,.96); font: 700 8px Consolas, monospace; letter-spacing: .14em; }
.menu-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 1px 7px;
  padding: 5px;
  border: 1px solid rgba(76,65,66,.55);
  background: rgba(27,23,25,.62);
}
.menu-item.actionable { cursor: pointer; transition: border-color 100ms ease, background 100ms ease; }
.menu-item.actionable:hover { border-color: rgba(196,87,110,.8); background: rgba(52,34,40,.82); }
.menu-item.equipped { border-color: rgba(204,145,91,.78); box-shadow: inset 3px 0 #b94c62; }
.menu-item-icon { grid-row: 1 / 3; width: 20px; height: 20px; display: grid; place-items: center; color: #c4576e; border: 1px solid #5a3942; }
.menu-item-line { display: flex; align-items: baseline; gap: 6px; }
.menu-item-name { color: #ded3c7; font-size: 10px; }
/* Targhetta di stato: dice cosa succede cliccando, senza invadere il nome. */
.menu-item-tag {
  margin-left: auto;
  flex: none;
  font: 700 7px Consolas, monospace;
  letter-spacing: 0.1em;
  font-style: normal;
  padding: 1px 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.menu-item-tag.on { color: #f0d3a6; border-color: #7a5a3c; background: rgba(122, 90, 60, 0.2); }
.menu-item-tag.auto { color: #a9bfa2; border-color: #4a5a44; background: rgba(74, 90, 68, 0.18); }
.menu-item-tag.do { color: #9a8f8c; border-color: #4c4142; }
.menu-desc { color: #817979; font-size: 8px; line-height: 1.25; }
.menu-use-now { grid-column: 2; justify-self: start; margin-top: 3px; padding: 3px 7px; border: 1px solid #72505a; background: #27171d; color: #e4c7ba; font: 700 8px Consolas, monospace; cursor: pointer; }
.menu-use-now:hover { border-color: #c66a7d; background: #4a1d2b; }
.menu-empty { color: var(--text-dim); font-size: 12px; font-style: italic; }
/* Diario delle missioni. Le concluse restano visibili ma spente: si legge
   subito cosa manca senza perdere di vista quanta strada è già fatta. */
.menu-quests { display: flex; flex-direction: column; gap: 7px; }
.menu-quest {
  border-left: 2px solid #7a5a3c;
  padding: 2px 0 2px 7px;
}
.menu-quest.done { border-left-color: #3d4a38; opacity: 0.62; }
.menu-quest-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: #e8d9c4;
}
.menu-quest.done .menu-quest-head { color: #8fa287; }
.menu-quest-head b { color: #e4bd83; font-size: 10px; }
.menu-quest.done .menu-quest-head b { color: #8fbf83; }
.menu-quest-head i {
  margin-left: auto;
  font-style: normal;
  font-size: 9px;
  color: #8b7e79;
}
.menu-quest-desc {
  font-size: 9px;
  color: #8b7e79;
  font-style: italic;
  margin: 1px 0 2px;
}
.menu-quest-stage { font-size: 9px; color: #9c9290; padding-left: 2px; }
.menu-quest-stage.done { color: #6f8a68; text-decoration: line-through; }

.menu-abil-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 9px;
  color: #5e5a60;
}
.menu-abil-row.owned { color: var(--text); }
.menu-abil-row.found { color: #9b8880; }
.menu-abil-icon {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #40383c;
  background: #121216; color: #746c72;
}
.menu-abil-row.owned .menu-abil-icon { color: #e4bd83; border-color: #765642; background: rgba(126,71,47,.16); }
.menu-map {
  width: 100%;
  height: auto;
  max-height: 190px;
  background: radial-gradient(circle, rgba(32,27,34,.8), rgba(5,7,10,.9));
  border: 1px solid #483b3f;
}
.menu-room { color: #8b7e79; }
.menu-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 10px; }
.menu-btn {
  background: #161519;
  border: 1px solid #40383b;
  color: #9c9290;
  border-radius: 2px;
  padding: 7px 5px;
  cursor: pointer;
  font: 9px Consolas, monospace;
  text-transform: uppercase;
}
/* Fuoco della navigazione da tastiera. Vale per slot, righe dell'inventario e
   pulsanti allo stesso modo: il menu è una lista sola, e si deve vedere dove
   si è senza dover indovinare quale zona risponda ai tasti. */
.menu-overlay .focused {
  outline: 1px solid #d8788c;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(216, 120, 140, 0.16);
}
.menu-btn.focused { color: #f2e3d3; background: linear-gradient(180deg, #74283d, #3c1724); border-color: #bc6071; }
.menu-slot.focused { border-color: #d8788c; }
.menu-hint { text-align: center; color: #777071; font: 8px Consolas, monospace; margin-top: 8px; }

/* Assemblaggio: una schermata compatta, fisica, separata dall'inventario.
   Le ricette restano JSON; qui chi non vuole editarlo può usarle e capirle. */
.crafting-box { width: min(92%, 700px); }
.crafting-layout {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
  gap: 10px;
  margin-top: 12px;
}
.crafting-recipes { display: grid; align-content: start; gap: 5px; }
.crafting-recipe {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #453a3b;
  background: linear-gradient(110deg, rgba(47,31,35,.84), rgba(13,14,17,.92));
  color: #ded3c7;
  text-align: left;
  cursor: pointer;
}
.crafting-recipe b { font: 700 11px Consolas, monospace; letter-spacing: .04em; }
.crafting-recipe span { color: #938886; font-size: 9px; }
.crafting-recipe.unavailable { filter: saturate(.35); opacity: .6; }
.crafting-detail { min-height: 180px; }
.crafting-detail h3 { margin: 2px 0 8px; color: #ead8c4; font: 700 18px Georgia, serif; letter-spacing: .06em; }
.crafting-detail p { min-height: 38px; margin: 0 0 12px; color: #998d8a; font-size: 10px; line-height: 1.45; }
.crafting-costs { display: grid; gap: 4px; margin: 8px 0 15px; font: 10px Consolas, monospace; }
.crafting-costs > div { padding: 5px 7px; border-left: 2px solid #7a3648; background: rgba(73,31,43,.18); color: #ba8d93; }
.crafting-costs > .enough { border-left-color: #72876c; background: rgba(71,95,65,.16); color: #b8c5ad; }
.crafting-costs > .crafting-choice {
  margin-top: 4px;
  border-left-color: #6b59a5;
  color: #b9a8ec;
  background: rgba(74,55,126,.15);
  font-size: 8px;
  letter-spacing: .08em;
}
.crafting-status { color: #aa7780; font: 700 9px Consolas, monospace; letter-spacing: .12em; }
.crafting-status.ready { color: #d9bc82; text-shadow: 0 0 12px rgba(217,188,130,.24); }

@media (max-width: 680px) {
  .crafting-layout { grid-template-columns: 1fr; }
  .crafting-detail { min-height: 120px; }
}
.menu-controls {
  position: absolute;
  inset: 9px;
  z-index: 3;
  overflow: auto;
  padding: 15px;
  border: 1px solid #74535a;
  border-top-color: #bd826e;
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(31,24,29,.995), rgba(7,9,12,.995) 70%);
  box-shadow: 0 15px 60px rgba(0,0,0,.9), inset 0 0 0 1px rgba(225,190,148,.04);
}
.menu-controls[hidden] { display: none; }
.menu-controls-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #4b3d40; }
.menu-controls-head h2 { margin: 2px 0 0; color: #eee3d5; font: 700 22px Georgia, serif; letter-spacing: .12em; }
.menu-controls-close,
.menu-controls-reset {
  border: 1px solid #60464c;
  background: #1b1519;
  color: #d4bcb0;
  padding: 7px 10px;
  font: 700 9px Consolas, monospace;
  cursor: pointer;
}
.menu-controls-close:hover,
.menu-controls-reset:hover { border-color: #c46577; background: #421c29; color: #fff0df; }
.menu-controls-copy { margin: 10px 0; color: #918687; font-size: 10px; line-height: 1.45; }
.menu-controls-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.menu-control-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #3d3538;
  background: rgba(18,17,20,.9);
  color: #b0a4a0;
  cursor: pointer;
  text-align: left;
  font: 9px Consolas, monospace;
}
.menu-control-row:hover { border-color: #80515c; background: rgba(54,29,37,.9); }
.menu-control-row strong { flex: none; color: #e4c294; font-size: 9px; }
.menu-control-row.waiting { border-color: #df7589; background: rgba(99,30,48,.85); box-shadow: 0 0 18px rgba(191,63,87,.22); }
.menu-controls.listening .menu-controls-status { color: #f08ca0; }
.menu-controls-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.menu-controls-status { color: #7e7676; font: 8px Consolas, monospace; }
@media (max-width: 680px) {
  .menu-cols { grid-template-columns: 1fr; }
  .menu-actions { grid-template-columns: repeat(4, 1fr); }
  .menu-player { font-size: 15px; }
  .menu-controls-list { grid-template-columns: 1fr; }
  .menu-controls-foot { align-items: stretch; flex-direction: column; }
}

/* --- player standalone --- */

body.standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  background: #05070c;
}
body.standalone .game-frame {
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  position: relative;
}
body.standalone.touch-player { touch-action: none; }
body.standalone .game-frame.has-touch { border: 0; }
/* Safe-area touch: il canvas si ferma sopra la fascia dei controlli (misurata
   dai pad veri e scritta in --tc-band dal player); sotto resta solo la UI. */
.game-frame.has-touch { --tc-band: 0px; background: #05070c; }
.game-frame.has-touch #game-canvas { height: calc(100% - var(--tc-band)); }
body.standalone.embedded {
  min-height: 100%;
  overflow: hidden;
  background: #000;
}
body.standalone.embedded .game-frame {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  aspect-ratio: auto;
}

/* --- Controlli touch (mobile) ------------------------------------------- */
.touch-controls {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  touch-action: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  transition: opacity 120ms ease;
}
.tc-pad {
  position: absolute;
  bottom: max(clamp(9px, 2.8vh, 24px), env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
}
.tc-pad-left { left: max(clamp(12px, 3vw, 34px), env(safe-area-inset-left)); }
.tc-pad-right {
  right: max(clamp(12px, 3vw, 34px), env(safe-area-inset-right));
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(5px, 1.4vh, 11px);
}
.tc-row { display: flex; align-items: center; gap: clamp(6px, 1.35vw, 14px); }
.tc-row-sub { justify-content: flex-end; }
.tc-stick {
  --stick-size: clamp(104px, 19vw, 154px);
  pointer-events: auto;
  touch-action: none;
  position: relative;
  width: var(--stick-size);
  height: var(--stick-size);
  border: 1px solid rgba(134, 205, 226, 0.44);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(132, 202, 222, 0.14) 49%, rgba(132, 202, 222, 0.14) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(132, 202, 222, 0.14) 49%, rgba(132, 202, 222, 0.14) 51%, transparent 52%),
    radial-gradient(circle, rgba(14, 24, 34, 0.5) 0 27%, rgba(7, 13, 22, 0.28) 28% 66%, rgba(70, 139, 164, 0.1));
  box-shadow: inset 0 0 22px rgba(4, 9, 15, 0.55), 0 7px 28px rgba(0, 0, 0, 0.28);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tc-stick::before,
.tc-stick::after {
  position: absolute;
  color: rgba(203, 235, 244, 0.42);
  font: 700 clamp(12px, 2.4vw, 18px)/1 Consolas, monospace;
  pointer-events: none;
}
.tc-stick::before { content: '◀     ▶'; left: 13%; right: 13%; top: 47%; white-space: pre; }
.tc-stick::after { content: '▲\A\A▼'; top: 14%; bottom: 14%; left: 46%; white-space: pre; }
.tc-stick-knob {
  --stick-x: 0%;
  --stick-y: 0%;
  position: absolute;
  left: 29%;
  top: 29%;
  width: 42%;
  height: 42%;
  border: 1px solid rgba(154, 227, 246, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(170, 231, 247, 0.44), rgba(34, 78, 100, 0.64));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48), inset 0 0 12px rgba(188, 237, 250, 0.18);
  transform: translate(var(--stick-x), var(--stick-y));
  transition: transform 45ms linear;
  pointer-events: none;
}
.tc-stick.on { border-color: rgba(151, 230, 250, 0.8); background-color: rgba(56, 133, 159, 0.12); }
.tc-stick.on .tc-stick-knob { transition: none; }
/* Su touch la barra dei comandi da tastiera è inutile e copre la scena. */
.has-touch .hud-hint { display: none !important; }
.has-touch .hud-dialogue { bottom: clamp(104px, 27vh, 148px); }
.has-touch .hud-toasts { top: 48px; bottom: auto; }
.game-frame:has(.menu-overlay:not([hidden])) .touch-controls {
  opacity: 0;
  visibility: hidden;
}

/* --- Pannello link esterno (portali del gioco-vetrina) ------------------ */
.link-panel-back {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 6, 12, 0.55);
  backdrop-filter: blur(2px);
}
.link-panel {
  max-width: min(420px, 88%);
  background: #10141e;
  border: 1px solid #2c3549;
  border-radius: 12px;
  padding: clamp(14px, 3vw, 22px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #d6dcea;
}
.link-panel-title { font-size: clamp(17px, 4.5vw, 22px); font-weight: 700; color: #f0c33e; }
.link-panel-text { margin-top: 8px; color: #9aa6bc; font-size: clamp(13px, 3.4vw, 15px); line-height: 1.5; }
.link-panel-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.link-panel-go, .link-panel-close {
  font: inherit;
  font-size: clamp(14px, 3.6vw, 16px);
  padding: 11px 20px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #2c3549;
  text-decoration: none;
}
.link-panel-go { background: #5ec8f0; border-color: #5ec8f0; color: #06222e; font-weight: 700; }
.link-panel-go:hover { background: #9fe2ff; }
.link-panel-close { background: #161b26; color: #d6dcea; }
.link-panel-close:hover { border-color: #5ec8f0; }
.tc-btn {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: clamp(48px, 8.4vw, 70px);
  height: clamp(48px, 8.4vw, 70px);
  border-radius: 50%;
  border: 2px solid rgba(94, 200, 240, 0.5);
  background: rgba(12, 16, 26, 0.42);
  color: #cfeaff;
  font-size: clamp(17px, 3vw, 27px);
  line-height: 1;
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
  transition: transform 0.05s ease, background 0.05s ease;
}
.tc-btn span { display: block; line-height: 0.9; }
.tc-btn small {
  display: block;
  margin-top: 2px;
  color: currentColor;
  font: 700 clamp(6px, 0.88vw, 9px)/1 Consolas, monospace;
  letter-spacing: 0.04em;
  opacity: 0.72;
}
.tc-btn.on {
  background: rgba(94, 200, 240, 0.32);
  border-color: #9fe2ff;
  transform: scale(0.92);
}
.tc-jump { border-color: rgba(240, 195, 62, 0.6); color: #ffe9a0; width: clamp(62px, 10.5vw, 88px); height: clamp(62px, 10.5vw, 88px); }
.tc-attack { border-color: rgba(230, 0, 126, 0.55); color: #ff9ecb; width: clamp(56px, 9.4vw, 78px); height: clamp(56px, 9.4vw, 78px); }
.tc-spell { border-color: rgba(150, 110, 230, 0.6); color: #cdb6ff; }
.tc-interact, .tc-dash, .tc-spell, .tc-item { width: clamp(40px, 6.3vw, 53px); height: clamp(40px, 6.3vw, 53px); font-size: clamp(13px, 2.3vw, 20px); opacity: 0.94; }
.tc-item { border-color: rgba(104, 195, 147, 0.58); color: #b8f3d0; }
/* Controlli semitrasparenti a riposo: sul terreno piatto stanno sopra l'area di
   gioco, ma così la scena resta visibile sotto; a pieno solo quando premuti. */
.touch-controls .tc-btn:not(.on) { opacity: 0.6; }
.touch-controls .tc-stick:not(.on) { opacity: 0.66; }
.tc-utility {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.tc-utility-btn {
  width: clamp(38px, 5.7vw, 48px);
  height: clamp(38px, 5.7vw, 48px);
  border-radius: 11px;
  border-width: 1px;
  font-size: clamp(13px, 2vw, 18px);
  background: rgba(7, 12, 20, 0.62);
  color: rgba(218, 234, 240, 0.78);
}
.tc-utility-btn small { font-size: clamp(5px, 0.67vw, 7px); }
.touch-orientation {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 30px;
  background: rgba(3, 7, 12, 0.9);
  text-align: center;
  color: #e9edf0;
}
.touch-orientation b { color: #8ee8ff; font: 800 18px/1 Consolas, monospace; letter-spacing: 0.12em; }
.touch-orientation span { color: #91a4ad; font-size: 13px; }

@media (orientation: portrait) and (max-width: 900px) {
  body.standalone .game-frame.has-touch { width: 100vw; }
  .touch-controls .tc-pad { opacity: 0; visibility: hidden; }
  .touch-controls .touch-orientation { display: flex; }
  .touch-controls .tc-pause { display: none; }
  .touch-controls .tc-utility { z-index: 1; }
}

@media (max-height: 520px) and (pointer: coarse) {
  .menu-box { width: 98%; max-height: 98%; padding: 8px; }
  .menu-head { grid-template-columns: 34px 1fr auto; gap: 8px; padding-bottom: 6px; }
  .menu-crest { width: 30px; height: 30px; font-size: 15px; }
  .menu-vitals { margin: 5px 0; gap: 4px; }
  .menu-vital { padding: 4px 7px; }
  .menu-panel { padding: 6px; }
  .menu-loadout { margin-bottom: 5px; }
  .menu-inv { max-height: 112px; }
  .menu-map { max-height: 96px; }
  .menu-actions { margin-top: 5px; }
  .menu-btn { min-height: 38px; }
  .hud-dialogue { padding: 8px 12px; }
  .hud-dialogue.has-portrait { min-height: 94px; padding-left: 105px; }
  .hud-dialogue.has-portrait.portrait-right { padding-left: 12px; padding-right: 105px; }
  .dlg-portrait { left: 7px; width: 88px; height: 106px; }
  .portrait-right .dlg-portrait { right: 7px; }
  .dlg-text { font-size: 12px; line-height: 1.3; }
  .dlg-choice { min-height: 34px; padding: 6px 8px; }
}

@media (max-width: 560px) {
  .hud-dialogue { left: 3%; right: 3%; }
  .hud-dialogue.has-portrait { min-height: 92px; padding-left: 94px; }
  .hud-dialogue.has-portrait.portrait-right { padding-left: 12px; padding-right: 94px; }
  .dlg-portrait { left: 6px; width: 78px; height: 98px; }
  .portrait-right .dlg-portrait { right: 6px; }
}

@media (pointer: coarse) {
  #title { touch-action: pan-y; }
  .screen-row { min-height: 44px; }
  .screen-row.type-range { position: relative; padding-left: 34px; padding-right: 34px; }
  .screen-row.type-range::before,
  .screen-row.type-range::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: currentColor;
    font: 800 17px/1 Consolas, monospace;
    opacity: 0.7;
  }
  .screen-row.type-range::before { content: '−'; left: 12px; }
  .screen-row.type-range::after { content: '+'; right: 12px; }
  .link-panel-go, .link-panel-close { min-height: 44px; }
}

#title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(104,53,122,0.36), transparent 25%),
    radial-gradient(circle at 50% 38%, #1d1023, #030306 72%);
  overflow: auto;
}
#title[hidden] { display: none; }

/* --- Preloader del gioco --- */
.game-loader {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(24, 140, 255, 0.10), transparent 55%),
    radial-gradient(circle at 50% 45%, #10131c, #030306 78%);
  opacity: 1;
  transition: opacity 0.24s ease;
}
.game-loader.is-gone { opacity: 0; pointer-events: none; }
.game-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
.game-loader-spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(159, 226, 255, 0.18);
  border-top-color: #6de5ff;
  animation: game-loader-spin 0.8s linear infinite;
}
@keyframes game-loader-spin { to { transform: rotate(360deg); } }
.game-loader-label {
  color: rgba(214, 226, 235, 0.82);
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.game-loader-bar {
  width: min(46vw, 220px);
  height: 3px;
  border-radius: 3px;
  background: rgba(159, 226, 255, 0.14);
  overflow: hidden;
}
.game-loader-bar > i {
  display: block;
  width: 5%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #198cff, #6de5ff);
  transition: width 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .game-loader-spin { animation-duration: 1.6s; }
}

/* --- Cinematic introduttiva, caricata soltanto dopo Nuova partita --- */
.game-cinematic {
  position: absolute;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  background: #020406;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.game-cinematic.is-gone { opacity: 0; pointer-events: none; }
.game-cinematic-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #020406;
}
.game-cinematic-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 4, 8, 0.22));
}
.game-cinematic-status {
  position: absolute;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  translate: -50% 0;
  color: rgba(220, 239, 245, 0.72);
  font: 650 clamp(9px, 1vw, 12px)/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #000;
  transition: opacity 0.2s ease;
}
.game-cinematic-status.is-gone { opacity: 0; }
.game-cinematic-skip {
  position: absolute;
  top: max(14px, calc(env(safe-area-inset-top) + 10px));
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(134, 222, 244, 0.34);
  border-radius: 3px;
  color: rgba(226, 242, 247, 0.82);
  background: rgba(3, 10, 15, 0.58);
  font: 650 clamp(9px, 0.86vw, 11px)/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
  cursor: pointer;
}
.game-cinematic-skip:hover,
.game-cinematic-skip:focus-visible {
  color: #07141a;
  border-color: #b9f3ff;
  background: rgba(126, 226, 249, 0.94);
  outline: 0;
}
.game-cinematic-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(140, 224, 245, 0.12);
}
.game-cinematic-progress > i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #38d9ff, #7767ff);
}
.game-cinematic.needs-tap .game-cinematic-video { cursor: pointer; }
@media (pointer: coarse) {
  .game-cinematic-skip { min-width: 112px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-cinematic { transition: none; }
}

/* --- SFX Lab --- */

.sfx-list { max-height: 56vh; overflow: auto; margin-top: 6px; }
.sfx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}
.sfx-row:hover { background: var(--panel2); }
.sfx-name { width: 120px; flex: none; color: var(--text-dim); }
.sfx-row.custom .sfx-name { color: var(--accent2); font-weight: 600; }
.sfx-params { flex: 1; color: var(--text-dim); font-size: 11px; font-family: Consolas, monospace; }

/* --- schermate di menu (titolo, opzioni, comandi) --- */

.screen-box {
  width: min(92%, 620px);
  max-height: 92vh;
  overflow: auto;
  padding: 20px 0;
  text-align: center;
  margin: 0 auto;
}
.screen-title {
  font-size: clamp(22px, 4.2vw, 34px);
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--accent2);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.85);
}
.screen-sub { color: var(--text-dim); font-size: 12px; margin-bottom: 18px; }
.screen-list { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.screen-label {
  text-align: left;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 12px 0 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  min-height: 1px;
}
.screen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(26, 33, 50, 0.72);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  font-family: inherit;
}
.screen-row-name { flex: 1; }
.screen-row em { font-style: normal; color: var(--text); font-size: 12px; opacity: 0.85; }
.screen-row.sel {
  color: #08131c;
  background: var(--accent);
  border-color: var(--accent);
  border-left-color: var(--accent2);
  font-weight: 600;
}
.screen-row.sel em { color: #08131c; opacity: 0.75; }
.screen-row.danger { color: #ff9a9a; }
.screen-row.danger.sel { background: var(--danger); color: #fff; border-color: var(--danger); }
.screen-meter {
  width: 130px;
  height: 6px;
  flex: none;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.screen-meter i { display: block; height: 100%; background: var(--accent2); }
.screen-row.sel .screen-meter { border-color: rgba(0, 0, 0, 0.35); }
.screen-row.sel .screen-meter i { background: #08131c; }
.screen-help {
  margin-top: 16px;
  min-height: 30px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
}

/* Ingresso pubblico del player: una libreria, non BettolMania scelto di
   nascosto. Le voci restano normali MenuScreen, quindi tastiera, touch e
   gamepad condividono esattamente la stessa navigazione. */
#title.library-title {
  background:
    linear-gradient(135deg, rgba(4, 7, 13, 0.96), rgba(20, 9, 27, 0.92)),
    radial-gradient(circle at 72% 18%, rgba(81, 37, 104, 0.44), transparent 34%);
}
.library-title .screen-box { width: min(94%, 940px); }
.library-title .screen-title {
  color: #ece4d5;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: 0.13em;
}
.library-title .screen-sub { margin: 4px 0 20px; color: #9a8fa5; }
.library-title .screen-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.library-title .screen-label { grid-column: 1 / -1; margin-top: 10px; }
.library-title .screen-row {
  min-height: 62px;
  padding: 11px 15px;
  border-color: rgba(133, 106, 145, 0.34);
  border-left-color: rgba(192, 83, 111, 0.42);
  background: linear-gradient(110deg, rgba(28, 22, 34, 0.9), rgba(15, 21, 31, 0.82));
}
.library-title .screen-row-name { color: #ded6ca; font-size: 15px; line-height: 1.2; }
.library-title .screen-row em {
  max-width: 34%;
  color: #bb8da6;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}
.library-title .screen-row.sel {
  color: #170d16;
  border-color: #d17996;
  border-left-color: #f1c583;
  background: linear-gradient(100deg, #d7829d, #dfb272);
  box-shadow: 0 10px 34px rgba(139, 52, 91, 0.24);
  transform: translateY(-1px);
}
.library-title .screen-row.sel .screen-row-name,
.library-title .screen-row.sel em { color: #170d16; }
.library-title .screen-help { color: #958b9b; }

@media (max-width: 680px), (max-aspect-ratio: 4 / 3) {
  .library-title .screen-list { grid-template-columns: 1fr; }
  .library-title .screen-box { max-height: 96%; padding: 12px 0; }
  .library-title .screen-row { min-height: 50px; }
}

/* Titolo-vetrina dichiarato dal singolo progetto. Il video è scenografia:
   resta muto, non intercetta input e viene tagliato in cover senza deformarsi. */
#title.showcase-title {
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
  background: #050a10;
}
.screen-bg-video,
.screen-bg-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.screen-bg-video {
  z-index: 0;
  object-fit: cover;
  object-position: 50% 52%;
  background: #050a10;
}
.screen-bg-shade {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(3, 8, 13, 0.96) 0%,
      rgba(3, 8, 13, 0.88) 20%,
      rgba(3, 8, 13, 0.55) 34%,
      rgba(3, 8, 13, 0.12) 58%,
      rgba(3, 8, 13, 0.02) 78%),
    linear-gradient(180deg, rgba(2, 6, 10, 0.2), transparent 46%, rgba(2, 6, 10, 0.3));
}
.screen-box-showcase {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(34%, 410px);
  min-width: 300px;
  max-height: 94%;
  overflow: visible;
  margin: 0 0 0 clamp(26px, 5vw, 76px);
  padding: clamp(16px, 2.4vw, 34px) 0;
  text-align: left;
}
.screen-kicker {
  margin-bottom: clamp(7px, 1.1vw, 14px);
  color: rgba(144, 225, 244, 0.82);
  font-size: clamp(7px, 0.72vw, 10px);
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.showcase-title .screen-title {
  max-width: 100%;
  color: #f1eee7;
  font-size: clamp(30px, 4.65vw, 64px);
  font-weight: 820;
  line-height: 0.88;
  letter-spacing: 0.025em;
  text-shadow: 0 5px 26px rgba(0, 0, 0, 0.88);
}
.showcase-title .screen-sub {
  margin: clamp(7px, 1vw, 13px) 0 0;
  color: #6de5ff;
  font-size: clamp(10px, 1.18vw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.31em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(17, 179, 226, 0.34);
}
.screen-tagline {
  max-width: 35em;
  margin: clamp(9px, 1.4vw, 18px) 0 clamp(12px, 1.8vw, 24px);
  color: rgba(226, 232, 235, 0.74);
  font-size: clamp(9px, 0.93vw, 13px);
  line-height: 1.45;
}
.showcase-title .screen-list { gap: clamp(3px, 0.38vw, 6px); }
.showcase-title .screen-row {
  min-height: clamp(30px, 3.25vw, 42px);
  padding: clamp(6px, 0.7vw, 10px) clamp(10px, 1.05vw, 15px);
  border: 1px solid rgba(129, 208, 229, 0.18);
  border-left: 2px solid rgba(129, 208, 229, 0.34);
  border-radius: 3px;
  background: rgba(5, 14, 20, 0.7);
  color: rgba(230, 238, 241, 0.82);
  font-size: clamp(9px, 1.02vw, 14px);
  font-weight: 550;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
  transition: transform 100ms ease, color 100ms ease, background 100ms ease;
}
.showcase-title .screen-row.sel {
  color: #04141a;
  background: linear-gradient(90deg, rgba(102, 229, 255, 0.95), rgba(91, 165, 221, 0.92));
  border-color: rgba(151, 237, 255, 0.94);
  border-left-color: #e8fbff;
  font-weight: 720;
  transform: translateX(5px);
  box-shadow: 0 7px 24px rgba(30, 167, 214, 0.2);
}
.showcase-title .screen-row.sel em { color: #04141a; }
.showcase-title .screen-row.danger { color: rgba(242, 155, 161, 0.78); }
.showcase-title .screen-row.danger.sel {
  color: #fff;
  background: rgba(170, 55, 75, 0.94);
  border-color: rgba(244, 137, 153, 0.85);
}
.showcase-title .screen-help {
  max-width: 34em;
  min-height: clamp(22px, 2.8vw, 36px);
  margin-top: clamp(9px, 1.25vw, 16px);
  color: rgba(200, 214, 220, 0.58);
  font-size: clamp(8px, 0.82vw, 11px);
  line-height: 1.4;
}

@media (max-aspect-ratio: 4 / 3) {
  .screen-bg-video { object-position: 54% 52%; }
  .screen-bg-shade {
    background: linear-gradient(90deg, rgba(3, 8, 13, 0.94), rgba(3, 8, 13, 0.64) 62%, rgba(3, 8, 13, 0.18));
  }
  .screen-box-showcase {
    width: min(70%, 410px);
    min-width: 0;
    margin-left: clamp(18px, 5vw, 50px);
  }
}
@media (max-height: 480px) {
  .screen-box-showcase { padding: 10px 0; }
  .screen-tagline { margin: 6px 0 10px; line-height: 1.25; }
  .showcase-title .screen-help { margin-top: 6px; min-height: 18px; }
}
/* Telefono in orizzontale: il menu resta stretto e a sinistra, così il
   personaggio al centro-basso non finisce coperto dai bottoni. */
@media (min-aspect-ratio: 3 / 2) and (max-height: 540px) {
  .screen-box-showcase {
    width: min(36%, 250px);
    min-width: 0;
    margin-left: clamp(14px, 3vw, 32px);
    padding: 6px 0;
  }
  .screen-tagline { max-width: 20em; margin: 6px 0 10px; line-height: 1.3; }
  .showcase-title .screen-help { margin-top: 6px; min-height: 16px; }
  .screen-bg-shade {
    background: linear-gradient(90deg, rgba(3, 8, 13, 0.92), rgba(3, 8, 13, 0.5) 42%, rgba(3, 8, 13, 0) 66%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-title .screen-row { transition: none; }
}

.title-box { width: min(92%, 560px); padding: 18px 0; text-align: center; }
.title-name {
  font-size: 30px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent2);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.8);
}
.title-sub { color: var(--text-dim); font-size: 12px; margin-bottom: 16px; }
.title-menu { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.title-btn {
  width: min(100%, 400px);
  background: rgba(26, 33, 50, 0.8);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}
.title-btn.sel { color: #08131c; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.title-controls {
  margin: 18px auto 0;
  max-width: 440px;
  text-align: left;
  color: var(--text-dim);
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.ctrl-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin-top: 6px;
}
.ctrl-grid span:nth-child(odd) { color: var(--text); font-family: Consolas, monospace; white-space: nowrap; }

/* --- modals --- */

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  width: min(720px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 28px 90px rgba(0,0,0,0.72), 0 0 0 1px rgba(94,200,240,0.06);
}
.modal-title { font-weight: 700; color: var(--accent); }
.modal-json {
  width: 100%;
  height: 52vh;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: Consolas, monospace;
  font-size: 12px;
  padding: 8px;
  resize: vertical;
}
.modal-err { color: var(--danger); font-size: 12px; min-height: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-help ul { margin: 4px 0 12px; padding-left: 18px; color: var(--text-dim); }
.modal-help li { margin: 3px 0; }
.modal-help b { color: var(--text); }

.project-chooser { min-height: 180px; }
.project-chooser-intro { color: var(--text-dim); margin-bottom: 10px; }
.project-list { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.project-row:hover { border-color: var(--accent); background: var(--panel2); }
.project-row.current { border-color: var(--accent2); background: rgba(240, 195, 62, 0.06); }
.project-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.project-copy strong { color: var(--accent2); }
.project-meta { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.project-summary { color: var(--text-dim); font-size: 12px; }
.project-action { flex: none; color: var(--accent); font-size: 11px; font-weight: 700; }

/* --- Cutscene Lab ------------------------------------------------------- */
.cutscene-modal-box { width: min(1080px, 96vw); height: min(760px, 92vh); }
.cutscene-lab {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  overflow: auto;
  background: var(--bg);
}
.cs-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cs-item {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 5px;
}
.cs-item.sel { border-color: #5ec8f0; background: rgba(94,200,240,0.09); }
.cs-item-name {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 7px 8px;
  cursor: pointer;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}
.cs-meta { display: flex; align-items: center; gap: 8px; }
.cs-name-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
}
.cs-id { color: #f0c33e; font-size: 12px; background: rgba(240,195,62,0.08); padding: 3px 7px; border-radius: 4px; }
.cs-steps { display: flex; flex-direction: column; gap: 6px; }
.cs-step {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.015);
}
.cs-step-order { display: flex; flex-direction: column; gap: 1px; }
.cs-step-num {
  min-width: 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.cs-step-type { min-width: 190px; }
.cs-step-args { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; align-items: center; }
.cs-step-noargs { color: var(--text-dim); }
.cs-arg { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); }
.cs-arg-in { width: 72px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 4px 6px; }
.cs-arg-sel { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 4px 6px; }
.cs-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.cs-add-type { min-width: 220px; }
.cs-empty, .cs-hint { color: var(--text-dim); font-size: 13px; padding: 10px 4px; }
.btn.tiny { padding: 1px 5px; font-size: 10px; line-height: 1.1; }
.btn.ghost { background: none; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { color: var(--danger); }
.btn.small { padding: 3px 8px; font-size: 11px; }

/* --- Esporta gioco: il pacchetto da passare a qualcuno ------------------- */

.export-box { min-width: min(560px, 80vw); }
.export-facts {
  margin: 8px 0 12px;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: 12px;
}
.export-facts li { margin: 4px 0; }
.export-facts b { color: var(--text); }
.export-log {
  font-family: Consolas, monospace;
  font-size: 12px;
  color: var(--accent2);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 9px;
  /* Il nome del file scorre mentre comprime: senza altezza fissa la finestra
     sobbalza a ogni riga e il pulsante scappa da sotto il cursore. */
  min-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.export-report:not(:empty) { margin-top: 10px; }
/* Stesso ambra dell'audit: un avviso è un avviso, ovunque compaia. */
.export-warn {
  font-size: 12px;
  color: #d3a567;
  border-left: 3px solid #b5844e;
  background: rgba(181, 132, 78, 0.07);
  padding: 7px 9px;
}
.export-warn ul {
  margin: 5px 0 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-family: Consolas, monospace;
  max-height: 130px;
  overflow: auto;
}

/* --- Node Lab: vista visuale sopra il JSON runtime ---------------------- */

.btn.node-lab-launch {
  color: #ead7ff;
  border-color: #76519b;
  background: linear-gradient(180deg, rgba(84,49,108,0.86), rgba(39,25,54,0.9));
}
.node-modal-box {
  width: min(1480px, 97vw);
  height: min(900px, 93vh);
  max-height: 93vh;
  padding: 10px;
}
.node-lab {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #30273d;
  border-radius: 7px;
  overflow: hidden;
  background: #08070c;
}
.node-lab-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-bottom: 1px solid #3b3048;
  background: linear-gradient(180deg, #1c1725, #110e17);
}
.node-history {
  min-width: 30px;
  padding-inline: 7px;
  font-size: 16px;
  line-height: 1;
}
.node-select {
  min-width: 180px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #0c0a11;
  color: var(--text);
}
.node-select.resource { min-width: 310px; }
.node-lab-summary {
  margin-left: auto;
  color: var(--text-dim);
  font: 11px Consolas, monospace;
  white-space: nowrap;
}
.node-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background-color: #09080e;
  background-image:
    linear-gradient(rgba(116,89,137,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,89,137,0.09) 1px, transparent 1px),
    linear-gradient(rgba(116,89,137,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,89,137,0.035) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
}
.node-stage {
  position: relative;
  width: 2600px;
  height: 1800px;
}
.node-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.node-wire {
  fill: none;
  stroke: rgba(201,151,234,0.68);
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(178,123,229,0.2));
}
.node-wire.choice { stroke: rgba(95,198,223,0.74); }
.node-wire.branch { stroke: rgba(216,182,106,0.76); stroke-dasharray: 6 4; }
.node-wire-label {
  fill: #b8a8c2;
  font: 10px Consolas, monospace;
  paint-order: stroke;
  stroke: #09080e;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.graph-node {
  --node-accent: #a878c6;
  position: absolute;
  width: 260px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 62%, #21192a);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(29,24,37,0.98), rgba(13,11,18,0.98));
  box-shadow: 0 12px 28px rgba(0,0,0,0.52), inset 0 1px rgba(255,255,255,0.025);
  overflow: hidden;
}
.graph-node.link-source {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-accent) 72%, white), 0 12px 28px rgba(0,0,0,0.52);
}
.graph-node-head {
  height: 31px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 28%, #19131f), #15111b);
  border-bottom: 1px solid color-mix(in srgb, var(--node-accent) 48%, #2b2233);
  cursor: grab;
  user-select: none;
}
.graph-node-head:active { cursor: grabbing; }
.graph-node-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  color: #eee8f2;
}
.graph-node-kind {
  color: color-mix(in srgb, var(--node-accent) 76%, #ddd);
  font: 9px Consolas, monospace;
  text-transform: uppercase;
}
.graph-node-actions { display: inline-flex; align-items: center; gap: 2px; }
.node-icon-btn,
.node-small-btn,
.node-inline-port {
  border: 1px solid #493a55;
  border-radius: 4px;
  background: #15101b;
  color: #bdb0c6;
  cursor: pointer;
}
.node-icon-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 18px;
}
.node-icon-btn:hover,
.node-small-btn:hover,
.node-inline-port:hover { border-color: var(--node-accent); color: #f2eaf6; }
.node-icon-btn.active { color: #e6c66f; }
.node-icon-btn.danger:hover { border-color: #a84f62; color: #ff9eae; }
.node-port {
  width: 8px;
  height: 8px;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--node-accent) 65%, transparent);
}
.node-port.out.enabled,
.node-port.in.ready { cursor: crosshair; }
.node-port.out:disabled { opacity: 0.24; }
.node-port.in.ready {
  outline: 2px solid color-mix(in srgb, var(--node-accent) 45%, transparent);
  outline-offset: 3px;
  animation: node-port-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes node-port-pulse { to { outline-width: 4px; filter: brightness(1.5); } }
.graph-node-body { padding: 8px; }
.node-field {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--text-dim);
  font-size: 10px;
}
.node-field input,
.node-field select,
.node-field textarea {
  width: 100%;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid #3c3148;
  border-radius: 4px;
  background: #08070c;
  color: #ddd7e2;
  font: 10px 'Segoe UI', sans-serif;
}
.node-field textarea { resize: vertical; line-height: 1.25; }
.node-field input[type="color"] { height: 25px; padding: 2px; }
.node-choice {
  margin-top: 7px;
  padding: 6px;
  border-left: 2px solid #5fc6df;
  border-radius: 3px;
  background: rgba(51,91,108,0.12);
}
.node-branch {
  margin-top: 7px;
  padding: 6px;
  border-left: 2px solid #d8b66a;
  border-radius: 3px;
  background: rgba(110,83,38,0.13);
}
.node-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}
.node-link-row .node-field { margin: 0; }
.node-link-tools {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.node-inline-port {
  width: 23px;
  height: 23px;
  padding: 0;
  color: #ba84dc;
  border-radius: 50%;
}
.node-link-row.choice .node-inline-port { color: #6fc6df; }
.node-link-row.branch .node-inline-port { color: #d8b66a; }
.node-small-btn {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 10px;
}
.node-add-row {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #30263a;
}
.node-add-row .node-small-btn { flex: 1; }
.node-chip-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.node-chip-label { width: 100%; color: #756c7d; font: 8px Consolas, monospace; }
.node-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 5px;
  border: 1px solid #4b3c57;
  border-radius: 8px;
  background: #17121d;
  color: #bdb1c5;
  font: 9px Consolas, monospace;
}
.node-chip.flag { border-color: #79602f; color: #d8bd79; }
.node-chip.action { border-color: #3e6672; color: #8ed3e2; }
.node-chip.branch { border-color: #705071; color: #d29ad1; }
.node-readonly { color: #81758a; font-style: italic; font-size: 11px; }

@media (max-width: 900px) {
  .node-lab-summary { display: none; }
  .node-select { min-width: 130px; }
  .node-select.resource { min-width: 190px; }
  .node-lab-bar { flex-wrap: wrap; }
}

/* --- asset browser + command palette --- */

.asset-browser { min-height: 360px; overflow: auto; }
.asset-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.asset-stats span {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--panel2), rgba(18,23,35,0.65));
  color: var(--text-dim);
}
.asset-stats b { color: var(--accent2); font-size: 16px; margin-right: 4px; }
.asset-section-title { margin: 12px 0 6px; color: var(--text); font-weight: 600; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
.asset-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel2);
}
.asset-card:hover { border-color: #3e6782; }
.asset-thumb {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  background-color: #0a0d14;
  background-image: linear-gradient(45deg,#151b28 25%,transparent 25%),linear-gradient(-45deg,#151b28 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#151b28 75%),linear-gradient(-45deg,transparent 75%,#151b28 75%);
  background-size: 12px 12px;
  background-position: 0 0,0 6px,6px -6px,-6px 0;
}
.asset-thumb img,
.asset-thumb video { max-width: 100%; max-height: 100%; image-rendering: auto; }
.asset-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.asset-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }
.asset-info span { color: var(--text-dim); font-size: 10px; }
.asset-card-actions { display: flex; flex-direction: column; gap: 3px; }
.asset-empty { grid-column: 1 / -1; color: var(--text-dim); padding: 38px; text-align: center; border: 1px dashed var(--border); border-radius: 7px; }
.asset-chips { display: flex; flex-wrap: wrap; gap: 5px; color: var(--text-dim); }
.asset-chips span { padding: 3px 8px; border-radius: 12px; background: rgba(94,200,240,0.1); border: 1px solid rgba(94,200,240,0.24); color: #bfeaff; }

.command-palette > input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid #3d5870;
  background: #090d15;
  color: var(--text);
  outline: none;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(94,200,240,0.06);
}
.command-list { display: flex; flex-direction: column; gap: 3px; min-height: 220px; margin-top: 8px; color: var(--text-dim); }
.command-row {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 7px 9px;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
}
.command-row:hover, .command-row:focus { background: var(--panel2); border-color: var(--accent); color: var(--text); outline: 0; }
.command-empty { padding: 18px 9px; color: #68738a; font-size: 12px; line-height: 1.5; }

/* --- ricerca globale (Ctrl+F) --- */

.search-row { display: grid; grid-template-columns: 88px 1fr; gap: 2px 9px; align-items: baseline; }
.search-kind {
  grid-row: span 2;
  align-self: center;
  padding: 2px 0;
  border-right: 1px solid var(--border);
  color: #68738a;
  font: 9px Consolas, monospace;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-row b { color: var(--text); font-size: 12px; }
.search-detail { color: #68738a; font-size: 10px; }
.search-row:hover .search-detail { color: var(--text-dim); }

/* Il peso del progetto: compare in barra di stato solo quando comincia a
   contare, e diventa caldo quando il muro di localStorage è vicino. */
.status-weight { color: var(--accent2); }
.status-weight.hot { color: #ef7590; font-weight: 600; }

/* --- animation studio --- */

.animation-studio { min-height: 330px; }
.studio-bar, .studio-controls, .studio-clip {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-bottom: 10px;
}
.studio-bar select { flex: 1; }
.studio-controls label, .studio-clip label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-dim);
  font-size: 11px;
}
.studio-controls label { flex: 1; }
.studio-clip label:first-child { flex: 1; }
.studio-loop { flex-direction: row !important; align-items: center; padding-bottom: 5px; }
.animation-studio select, .animation-studio input[type='text'], .animation-studio input[type='number'] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 7px;
}
.studio-preview-wrap {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.studio-preview-wrap canvas {
  max-width: 100%;
  background: #0b0e14;
  border: 1px solid var(--border);
  border-radius: 5px;
  image-rendering: auto;
}
.studio-empty { color: var(--text-dim); padding: 60px 0; text-align: center; }
.studio-events { display: flex; flex-direction: column; gap: 4px; color: var(--text-dim); font-size: 11px; margin-bottom: 10px; }
.studio-events textarea {
  min-height: 72px;
  resize: vertical;
  background: var(--bg);
  color: #bfe3ff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  font: 11px Consolas, monospace;
}
.studio-events span { color: var(--danger); min-height: 13px; }

/* --- Sprite Lab: atlas ibridi, onion skin e look a layer ---------------- */

.sprite-modal-box {
  width: min(1180px, 97vw);
  height: min(880px, 94vh);
  max-height: 94vh;
  padding: 10px;
}
.sprite-lab {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 0 4px 8px 0;
  color: var(--text);
}
.sprite-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  margin-bottom: 8px;
  border: 1px solid #28354a;
  border-radius: 7px;
  background: rgba(10,14,22,.96);
  backdrop-filter: blur(12px);
}
.sprite-tab {
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.sprite-tab.active { color: #d8f5ff; border-color: #39728c; background: rgba(62,162,201,.15); }
.sprite-lab-note { margin-left: auto; color: #6e7e96; font: 10px Consolas, monospace; }
.sprite-toolbar, .sprite-transport, .sprite-section-head, .sprite-assign {
  display: flex;
  align-items: end;
  gap: 7px;
}
.sprite-toolbar {
  padding: 7px;
  margin-bottom: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #111723;
}
.sprite-toolbar .sprite-control:first-child { flex: 1; }
.sprite-control { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #8896aa; font-size: 10px; }
.sprite-control > span { white-space: nowrap; }
.sprite-lab select, .sprite-lab input[type='text'], .sprite-lab input[type='number'] {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid #303c51;
  border-radius: 4px;
  background: #080c13;
  color: #d9e1ee;
}
.sprite-workspace {
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(360px, .85fr);
  gap: 9px;
  margin-bottom: 9px;
}
.sprite-stage-panel, .sprite-properties, .sprite-strip-section, .sprite-picker-section,
.sprite-usage, .sprite-layer-row, .sprite-layer-preview-panel {
  border: 1px solid #29364a;
  border-radius: 7px;
  background: linear-gradient(180deg, #101722, #0b1019);
}
.sprite-stage-panel { display: flex; flex-direction: column; align-items: stretch; padding: 8px; }
.sprite-stage {
  width: 100%;
  min-height: 250px;
  border: 1px solid #35445c;
  border-radius: 6px;
  background-color: #080b11;
  background-image: linear-gradient(45deg,#121a27 25%,transparent 25%),linear-gradient(-45deg,#121a27 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121a27 75%),linear-gradient(-45deg,transparent 75%,#121a27 75%);
  background-size: 18px 18px;
  background-position: 0 0,0 9px,9px -9px,-9px 0;
}
.sprite-transport { margin-top: 7px; }
.sprite-transport .sprite-control { flex-direction: row; align-items: center; }
.sprite-transport input[type='range'] { width: 110px; }
.sprite-readout { color: var(--accent2); font: 10px Consolas, monospace; }
.sprite-properties { padding: 9px; overflow: auto; }
.sprite-properties h3, .sprite-section-head h3, .sprite-layer-preview-panel h3 {
  margin: 2px 0 7px;
  color: #d9e7fa;
  font-size: 12px;
}
.sprite-property-grid, .sprite-rect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.sprite-rect-grid { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
.sprite-details { margin: 7px 0; padding: 6px; border: 1px solid #263349; border-radius: 5px; }
.sprite-details summary, .sprite-picker-section summary, .sprite-usage summary { cursor: pointer; color: #9fc9dd; font-weight: 600; }
.sprite-strip-section { padding: 8px; margin-bottom: 8px; }
.sprite-section-head { margin-bottom: 7px; }
.sprite-section-head h3 { flex: 1; }
.sprite-timeline, .sprite-frame-bank {
  display: flex;
  gap: 6px;
  overflow: auto;
  padding: 5px 2px;
}
.sprite-frame-cell, .sprite-bank-cell {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 4px;
  border: 1px solid #2b3b52;
  border-radius: 5px;
  background: #080d15;
  color: #7f8da2;
  font: 9px Consolas, monospace;
  cursor: pointer;
}
.sprite-frame-cell.selected { border-color: #65cdec; box-shadow: 0 0 0 2px rgba(73,197,235,.15); color: #d9f7ff; }
.sprite-frame-cell canvas { width: 72px; height: 72px; }
.sprite-picker-section { padding: 8px; margin-bottom: 8px; }
.sprite-frame-bank { flex-wrap: wrap; max-height: 235px; }
.sprite-bank-cell canvas { width: 64px; height: 64px; }
.sprite-frame-cell canvas, .sprite-bank-cell canvas { border-radius: 3px; background: #070a10; }
.sprite-usage { padding: 8px; margin-bottom: 8px; }
.sprite-usage-list { display: flex; flex-direction: column; gap: 4px; margin: 7px 0; }
.sprite-usage-row { display: grid; grid-template-columns: minmax(130px, 1fr) 1fr auto; align-items: center; gap: 8px; padding: 5px 7px; background: #0a1019; border-radius: 4px; }
.sprite-usage-row span, .sprite-muted { color: #718096; font-size: 10px; }
.sprite-assign select { flex: 1; }
.sprite-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 90px 20px; color: #738198; }
.sprite-layer-intro { padding: 8px 10px; margin-bottom: 8px; border-left: 3px solid #6e4bb0; background: rgba(84,52,128,.12); color: #9ba8ba; }
.sprite-layer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 9px; margin-bottom: 9px; }
.sprite-layer-stack { display: flex; flex-direction: column; gap: 7px; }
.sprite-layer-row { padding: 8px; }
.sprite-layer-head { display: flex; gap: 5px; align-items: center; margin-bottom: 7px; }
.sprite-layer-head b { flex: 1; color: #d5e5f6; }
.sprite-layer-grid { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 6px; }
.sprite-layer-preview-panel { padding: 8px; align-self: start; position: sticky; top: 58px; }
.sprite-layer-preview-panel .sprite-stage { min-height: 280px; }

@media (max-width: 850px) {
  .sprite-workspace, .sprite-layer-layout { grid-template-columns: 1fr; }
  .sprite-layer-preview-panel { position: static; }
  .sprite-property-grid, .sprite-layer-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .sprite-lab-note { display: none; }
  .sprite-toolbar { flex-wrap: wrap; }
}

/* --- Gattofrigi (il sequencer) ---
   Le classi restano `music-*`: descrivono i pezzi — rullo, stem, giri — non il
   nome del laboratorio. Se un giorno cambia nome di nuovo, il CSS non si muove. */

.music-lab { min-height: 480px; overflow: auto; padding-right: 3px; }
.music-topbar, .music-globals, .music-track-controls, .music-simulator, .music-assignment {
  display: flex;
  gap: 7px;
  align-items: end;
  margin-bottom: 9px;
}
.music-topbar select { flex: 1; }
.music-lab select, .music-lab input[type='text'], .music-lab input[type='number'] {
  background: #090c13;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 6px;
  min-width: 0;
}
.music-globals, .music-track-controls {
  display: grid;
  grid-template-columns: 1.8fr repeat(5, minmax(74px, 1fr));
  align-items: end;
}
.music-track-controls { grid-template-columns: 1.5fr repeat(6, minmax(68px, 1fr)) auto; }
.music-globals label, .music-track-controls label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--text-dim);
  font-size: 10px;
}
.music-enabled { flex-direction: row !important; align-items: center; padding-bottom: 6px; white-space: nowrap; }

/* Timbro ed effetti: manopole fitte che vanno a capo da sole. Stesse etichette
   minute delle altre barre, ma a griglia fluida perché sono tante. */
.music-timbre, .music-effects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 7px;
  align-items: end;
  margin-bottom: 9px;
  padding: 7px 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.music-effects { border-color: #3a3050; }
.music-timbre label, .music-effects label {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  color: var(--text-dim); font-size: 10px;
}
.music-timbre input, .music-effects input { width: 100%; }
/* Strumenti del piano roll: una riga di bottoncini sopra la griglia. */
.music-rolltools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.music-rolltools .btn { padding: 3px 9px; font-size: 11px; }
.music-assignment {
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(207,174,113,0.22);
  background: rgba(207,174,113,0.05);
  color: var(--accent2);
  border-radius: 5px;
}
.music-assignment select { margin-left: auto; min-width: 210px; }
.music-simulator {
  align-items: center;
  padding: 7px 8px;
  background: linear-gradient(90deg, rgba(113,28,50,0.13), rgba(73,44,109,0.14));
  border: 1px solid #34263f;
  border-radius: 6px;
}
.music-simulator { flex-wrap: wrap; }
.music-simulator > label:not(.music-combat) { display: grid; grid-template-columns: 78px 108px; align-items: center; color: var(--text-dim); font-size: 10px; }
.music-simulator input[type='text'] { width: 132px; font-size: 10px; }
.music-combat { color: var(--text-dim); white-space: nowrap; }
.music-preview { margin-left: auto; color: #d9c2ff; border-color: #694a84; }
.music-preview.active { background: #6d315f; color: white; }
.music-layers { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 7px; }
.music-layer {
  flex: 0 0 auto;
  min-width: 132px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #101522;
}
.music-layer-open {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
}
.music-layer-open b, .music-layer-open span { display: block; }
.music-layer-open b { color: var(--text); font-size: 11px; }
.music-layer-open span { margin-top: 2px; font-size: 9px; }
.music-layer.active { border-color: #9a62b9; background: linear-gradient(180deg, #302039, #171221); box-shadow: 0 0 13px rgba(144,74,176,0.18); }
/* Uno stem che le manopole del simulatore stanno zittendo: si vede a colpo
   d'occhio invece di scoprirlo non sentendolo. */
.music-layer.silent { opacity: 0.42; }
.music-layer.silent .music-layer-open b { color: var(--text-dim); font-style: italic; }
.music-layer-keys { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 3px; }
.music-key {
  width: 19px;
  height: 17px;
  padding: 0;
  border: 1px solid #2a3347;
  border-radius: 3px;
  background: #0c1018;
  color: #68738a;
  font: 9px Consolas, monospace;
  cursor: pointer;
}
.music-key:hover { border-color: #4a5670; color: var(--text); }
.music-key.on { background: #d8b66a; border-color: #f0d79a; color: #1a1408; font-weight: 700; }

/* --- arrangiamento: lunghezza del pattern e struttura a giri --- */

.music-arrange {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-bottom: 9px;
  padding: 7px 9px;
  border: 1px solid #2b3a33;
  border-radius: 5px;
  background: rgba(72,128,104,0.07);
}
.music-arrange > label { display: flex; flex-direction: column; gap: 3px; color: var(--text-dim); font-size: 10px; }
.music-loops { display: flex; align-items: center; gap: 3px; }
.music-loop {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid #2a3347;
  border-radius: 3px;
  background: #0c1018;
  color: #68738a;
  font: 10px Consolas, monospace;
  cursor: pointer;
}
.music-loop.on { background: #3f7d63; border-color: #6fc79c; color: #eafff4; }
.music-loop-now { margin-left: 6px; color: #6fc79c; font: 9px Consolas, monospace; }

/* Con 64 step il rullo non si schiaccia: scorre. */
.music-roll-scroll { overflow-x: auto; padding-bottom: 4px; }
.music-roll {
  display: grid;
  grid-template-columns: 46px repeat(16, minmax(22px, 1fr));
  gap: 2px;
  min-width: 580px;
  padding: 6px;
  background: #080b11;
  border: 1px solid #293247;
  border-radius: 6px;
}
/* L'inizio di ogni battuta si vede, altrimenti su 64 caselle si perde il conto. */
.music-step-head.bar { color: #d8b66a; font-weight: 700; }
.music-cell.bar { border-left-color: #4a5670; }
.music-step-head, .music-row-label {
  color: #68738a;
  font: 9px Consolas, monospace;
  text-align: center;
  align-self: center;
}
.music-row-label { text-align: right; padding-right: 6px; color: #a7afc0; }
.music-row-label.drum { text-align: left; font: 600 11px/1 system-ui, sans-serif; color: #d7c4e2; padding: 0 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-cell {
  height: 18px;
  min-width: 0;
  padding: 0;
  border: 1px solid #222a39;
  border-radius: 2px;
  background: #111622;
  cursor: pointer;
}
.music-cell:nth-child(8n + 6), .music-cell:nth-child(8n + 10) { border-left-color: #495269; }
.music-cell:hover { border-color: #9b72b5; background: #21182c; }
.music-cell.on { background: linear-gradient(180deg, #bc4b72, #6e284d); border-color: #e2789b; box-shadow: 0 0 7px rgba(213,69,123,0.3); }
.music-roll.drums .music-cell.on { background: linear-gradient(180deg, #d4a653, #8a5925); border-color: #f2cf83; }
.music-cell.playing { outline: 1px solid #d9ecff; filter: brightness(1.5); }
.music-hint { color: #69748a; font-size: 9px; margin-top: 5px; text-align: right; }

@media (max-width: 820px) {
  .music-globals, .music-track-controls { grid-template-columns: repeat(3, 1fr); }
  .music-simulator { flex-wrap: wrap; }
}

/* --- project audit + starting loadout ----------------------------------- */

.loadout-list { display: flex; flex-direction: column; gap: 4px; }
.loadout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 25px;
  gap: 5px;
  align-items: center;
  padding: 4px 5px;
  border: 1px solid rgba(122,104,139,0.2);
  border-radius: 4px;
  background: rgba(8,10,15,0.38);
}
.loadout-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.loadout-row input, .loadout-add input, .loadout-add select {
  min-width: 0;
  width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}
.insp-group .loadout-row .btn { width: 25px; margin: 0; padding: 2px; }
.loadout-add { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 5px; margin-top: 7px; }
.loadout-add .btn { grid-column: 1 / -1; margin-top: 0; }

.project-audit { min-height: 320px; max-height: 66vh; overflow: auto; padding-right: 3px; }
.audit-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 12px 14px;
  border: 1px solid #394458;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(61,89,78,0.25), rgba(22,31,39,0.55));
}
.audit-hero.bad { border-color: #71384a; background: linear-gradient(90deg, rgba(119,35,58,0.25), rgba(35,19,27,0.6)); }
.audit-hero strong { color: #9bdfbd; font-size: 17px; }
.audit-hero.bad strong { color: #f08aa1; }
.audit-hero span { color: var(--text-dim); font-size: 11px; }
.audit-stats { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin: 8px 0; }
.audit-stats > div { padding: 7px 5px; border: 1px solid var(--border); border-radius: 5px; background: #0c1018; text-align: center; }
.audit-stats b, .audit-stats span { display: block; }
.audit-stats b { color: var(--accent2); font-size: 16px; }
.audit-stats span { color: var(--text-dim); font-size: 9px; text-transform: uppercase; }
.audit-list { display: flex; flex-direction: column; gap: 5px; }
.audit-empty { padding: 34px 20px; border: 1px dashed #416b59; border-radius: 6px; color: #91bea7; text-align: center; }
.audit-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 7px; border-left: 3px solid #b5844e; background: rgba(181,132,78,0.07); }
.audit-row.error { border-left-color: #cb4d69; background: rgba(203,77,105,0.08); }
.audit-row > b { color: #d3a567; font: 9px Consolas, monospace; }
.audit-row.error > b { color: #ef7590; }
.audit-row span, .audit-row code { display: block; }
.audit-row span { color: var(--text); }
.audit-row code { margin-top: 3px; color: #78869b; font-size: 10px; word-break: break-all; }

@media (max-width: 820px) {
  .audit-stats { grid-template-columns: repeat(3, 1fr); }
  .audit-hero { align-items: flex-start; flex-direction: column; }
}

/* --- scrollbars --- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel2); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }