/* =========================================================
   Sceriffo di Dust Hollow — stile dell'interfaccia 2D
   (usata su desktop e nella schermata di avvio; in VR
    l'interfaccia e' quella tridimensionale sul polso)
   ========================================================= */

:root {
  --ink:        #16100a;
  --parchment:  #e8d5ab;
  --gold:       #e0a537;
  --gold-dim:   #9a6f22;
  --rust:       #a03c22;
  --leather:    #3a2716;
  --leather-lo: #241708;
  --ok:         #6fa03c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0a0705;
  color: var(--parchment);
  font-family: "Georgia", "Times New Roman", serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

canvas { display: block; }

/* ---------------- Puntatore del mouse ----------------
 *
 * Mentre si gioca il puntatore sparisce. Se resta visibile ci si ritrova due
 * mire sullo schermo — la freccetta e il mirino al centro — e l occhio segue
 * quella sbagliata: la freccetta si muove, quindi attira lo sguardo, ma non
 * è lei a dire dove va il colpo.
 *
 * Il puntatore continua a esistere e a muovere la visuale, è solo invisibile.
 * Con la cattura attiva sarebbe il browser a nasconderlo; ma senza cattura
 * resterebbe lì, ed è proprio il caso in cui il gioco è comunque giocabile.
 *
 * La classe la mette e la toglie DesktopControls: solo giocando a schermo,
 * solo con la mira col mouse accesa, e mai mentre un pannello è aperto. */
body.mira-mouse,
body.mira-mouse canvas,
body.mira-mouse #hud { cursor: none; }

/* Tutto ciò su cui si può cliccare riprende il puntatore, altrimenti si
   cercherebbe a tentoni un pulsante che non si vede. */
body.mira-mouse #boot,
body.mira-mouse #boot *,
body.mira-mouse #gameover,
body.mira-mouse #gameover *,
body.mira-mouse #comfort-desktop,
body.mira-mouse #comfort-desktop * { cursor: auto; }

body.mira-mouse .btn,
body.mira-mouse button { cursor: pointer; }

/* ---------------- Schermata di avvio ---------------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 35%, #4a2f14 0%, #1b1108 55%, #0a0705 100%);
  transition: opacity .6s ease;
}
#boot.hidden { opacity: 0; pointer-events: none; }

.boot-card {
  width: min(560px, 100%);
  text-align: center;
  padding: 34px 28px;
  border: 2px solid var(--gold-dim);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(32,20,10,.92), rgba(14,9,5,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.5);
}

.boot-star {
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 22px rgba(224,165,55,.55);
}

.boot-card h1 {
  margin: 10px 0 6px;
  font-size: clamp(21px, 5.2vw, 33px);
  letter-spacing: .10em;
  color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 26px rgba(224,165,55,.28);
}

.boot-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: #b39a72;
  font-style: italic;
}

#boot-progress {
  height: 7px;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  overflow: hidden;
  background: #170e06;
}
#boot-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rust), var(--gold));
  transition: width .25s ease;
}

#boot-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: #9c8560;
  min-height: 1.2em;
}

#boot-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.boot-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8a7550;
}
.boot-note.warn { color: #d98b4a; }

/* ---------------- Pulsanti ---------------- */

.btn {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .06em;
  padding: 12px 22px;
  color: var(--parchment);
  background: linear-gradient(180deg, #4a3018, #2a1a0c);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: transform .1s ease, filter .15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.25); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Interruttore della musica sulla schermata d avvio: secondario rispetto a
   "Inizia", che deve restare l unica cosa evidente da premere. */
.btn-piccolo {
  font-size: 12.5px;
  padding: 7px 14px;
  opacity: .78;
}
.btn-piccolo.spento { opacity: .5; text-decoration: line-through; }

.btn-primary {
  color: #1b1108;
  font-weight: bold;
  background: linear-gradient(180deg, var(--gold), #a8741f);
  border-color: var(--gold);
}

/* ---------------- HUD desktop ---------------- */

#hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}
#hud[hidden] { display: none; }

.hud-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hud-bottom { align-items: flex-end; }

.panel {
  background: linear-gradient(180deg, rgba(30,19,9,.86), rgba(14,9,4,.9));
  border: 1px solid rgba(154,111,34,.7);
  border-radius: 5px;
  padding: 10px 14px;
  min-width: 148px;
  backdrop-filter: blur(3px);
}
.panel-right { text-align: right; }
.panel-wide { min-width: 0; font-size: 12px; color: #b39a72; line-height: 1.6; }
.panel-wide strong { color: var(--gold); }

.panel-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a7550;
}
.panel-value {
  font-size: 26px;
  line-height: 1.15;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.panel-sub { font-size: 11px; color: #a08a63; }

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  opacity: .85;
}
#crosshair span,
#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: rgba(232,213,171,.9);
}
#crosshair::before { left: 50%; top: 0;  width: 1px; height: 7px; margin-left: -.5px; }
#crosshair::after  { left: 50%; bottom: 0; width: 1px; height: 7px; margin-left: -.5px; }
#crosshair span {
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
}

/* ---------------- Pannello dell'incarico ---------------- */

.mission {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  max-width: 70vw;
  padding: 10px 18px 11px;
  text-align: center;
  background: linear-gradient(180deg, rgba(26,17,8,.82), rgba(12,8,4,.86));
  border: 1px solid rgba(154,111,34,.55);
  border-radius: 5px;
  backdrop-filter: blur(3px);
  text-shadow: 0 2px 5px #000;
}
.mission[hidden] { display: none; }

.mission-label {
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8a7550;
}
.mission-title {
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--gold);
  margin-top: 2px;
}
.mission-progress {
  font-size: 13px;
  color: var(--parchment);
  margin-top: 3px;
}
.mission-route {
  font-size: 12px;
  color: #a08a63;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.mission-route[hidden] { display: none; }

/* La freccia ruota verso l'obiettivo: 0 gradi = dritto davanti a te. */
.mission-arrow {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  color: var(--gold);
  transition: transform .12s linear;
}

.mission.done   { border-color: var(--ok); }
.mission.urgent { border-color: var(--rust); }
.mission.urgent .mission-progress { color: #f0b39c; }

/* ---------------- Messaggi temporanei ---------------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast-item {
  padding: 9px 20px;
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--parchment);
  background: rgba(16,10,5,.88);
  border: 1px solid rgba(154,111,34,.75);
  border-radius: 4px;
  animation: toastIn .3s ease both;
}
.toast-item.good  { border-color: var(--ok);   color: #cfe8ab; }
.toast-item.bad   { border-color: var(--rust); color: #f0b39c; }
.toast-item.fade  { animation: toastOut .5s ease both; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(-8px); } }

/* ---------------- Flash di danno -----------------
   Deliberatamente NON scuotiamo la telecamera quando il giocatore
   viene colpito: qualunque movimento di camera non richiesto dal
   giocatore e' una delle cause principali di nausea in VR.
   Usiamo invece un bagliore rosso ai bordi del campo visivo.       */

#damage-flash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
              rgba(120,0,0,0) 35%, rgba(150,10,10,.75) 100%);
  transition: opacity .45s ease-out;
}
#damage-flash.on { opacity: 1; transition: opacity .05s linear; }

/* ---------------- Pannello comfort desktop ---------------- */

#comfort-desktop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,4,2,.78);
  padding: 20px;
}
#comfort-desktop[hidden] { display: none; }

.comfort-card {
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px;
  border: 2px solid var(--gold-dim);
  border-radius: 6px;
  background: linear-gradient(180deg, #241708, #120b05);
}
.comfort-card h2 {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 20px;
  letter-spacing: .08em;
}

.opt-row { margin: 16px 0; }
.opt-row > label {
  display: block;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--parchment);
  margin-bottom: 6px;
}
.opt-help {
  font-size: 11px;
  color: #8a7550;
  font-style: italic;
  margin-top: 4px;
  line-height: 1.45;
}
.opt-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.opt-choice {
  font-family: inherit;
  font-size: 12px;
  padding: 7px 13px;
  color: #b39a72;
  background: #1d1208;
  border: 1px solid #4a3018;
  border-radius: 3px;
  cursor: pointer;
}
.opt-choice.active {
  color: #1b1108;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: bold;
}
.opt-row input[type=range] { width: 100%; accent-color: var(--gold); }

/* ---------------- Filmati (intro, morte) ---------------- */

#cinema-overlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#cinema-overlay[hidden] { display: none; }

.cinema-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Sottotitoli: scritti dal gioco, non dal filmato. Restano sotto l'immagine
   invece che sopra — il testo su un video in movimento è illeggibile. */
.cinema-sub {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  max-width: min(900px, 86vw);
  padding: 12px 26px;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height: 1.45;
  letter-spacing: .02em;
  color: #f0dcb0;
  background: rgba(10, 6, 3, .82);
  border: 1px solid rgba(224, 165, 55, .45);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.cinema-sub.visibile { opacity: 1; }

.cinema-skip {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .08em;
  color: rgba(224, 165, 55, .7);
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
}

/* ---------------- Fine partita ---------------- */

#gameover {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, #2a0f0a 0%, #120705 60%, #060302 100%);
}
#gameover[hidden] { display: none; }

.gameover-card {
  width: min(560px, 100%);
  text-align: center;
  padding: 34px 28px;
  border: 2px solid var(--rust);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(32, 14, 8, .94), rgba(14, 6, 4, .96));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .8);
}
.gameover-card h2 {
  margin: 6px 0 4px;
  font-size: clamp(24px, 6vw, 38px);
  letter-spacing: .10em;
  color: #d9633f;
  text-shadow: 0 2px 0 #000;
}
.gameover-sub { margin: 0 0 20px; font-size: 14px; font-style: italic; color: #a08a72; }
.gameover-stats {
  margin: 0 auto 22px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--parchment);
  max-width: 340px;
  text-align: left;
}
.gameover-stats span { float: right; color: var(--gold); }

/* ---------------- Trailer ---------------- */

#trailer-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 3, 2, .93);
}
#trailer-overlay[hidden] { display: none; }

.trailer-frame {
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Il "palco" tiene insieme video e titolo sovrimpresso. */
.trailer-stage {
  position: relative;
  width: 100%;
  line-height: 0;
}

.trailer-video {
  width: 100%;
  max-height: 76vh;
  border: 2px solid var(--gold-dim);
  border-radius: 5px;
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .8);
}

/* ---- Titolo sovrimpresso sul finale ----
   Scritto in HTML e non generato dal video: i generatori sbagliano il testo
   quasi sempre, mentre qui esce nitido e con lo stesso carattere del gioco. */
.trailer-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .78) 100%);
  border-radius: 5px;
}
.trailer-title.visibile { opacity: 1; }

.trailer-title-star {
  font-size: clamp(22px, 3.4vw, 40px);
  color: var(--gold);
  text-shadow: 0 0 28px rgba(224, 165, 55, .6);
}

.trailer-title-main {
  font-size: clamp(38px, 9vw, 104px);
  letter-spacing: .14em;
  font-weight: bold;
  color: var(--gold);
  text-shadow:
     0 3px 0 #2a1a0a,
     0 6px 22px rgba(0, 0, 0, .9),
     0 0 46px rgba(224, 165, 55, .35);
  /* Leggero ingrandimento in entrata: dà peso al titolo senza animazioni
     appariscenti che stonerebbero con il tono del gioco. */
  transform: scale(1.06);
  transition: transform 1.4s ease-out;
}
.trailer-title.visibile .trailer-title-main { transform: scale(1); }

.trailer-title-sub {
  margin-top: 4px;
  font-size: clamp(13px, 1.9vw, 21px);
  letter-spacing: .18em;
  font-style: italic;
  color: var(--parchment);
  text-shadow: 0 2px 10px #000;
}

.trailer-close { min-width: 160px; }

/* ---------------- Errore fatale ---------------- */

#fatal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.7;
  color: #f0b39c;
  background: rgba(20,4,4,.96);
  white-space: pre-wrap;
}
#fatal[hidden] { display: none; }