/* =============================================================================
   Cluedo Live — CSS Principal (Jugador)
   Estética: misterio oscuro, elegante, premium. Mobile-first.
   Tipografía: Playfair Display (display) + Crimson Text (body)
   ============================================================================= */

/* ─── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --c-bg:          #0a0a0f;
  --c-bg-card:     #12121a;
  --c-bg-elevated: #1a1a26;
  --c-border:      #2a2a3e;
  --c-border-glow: rgba(201,169,89,0.25);

  --c-gold:        #c9a959;
  --c-gold-dim:    #9a7c3a;
  --c-gold-bright: #e8c96e;
  --c-crimson:     #8b1a1a;
  --c-crimson-dim: #5c1010;
  --c-blood:       #c0392b;

  --c-text:        #e8dfd0;
  --c-text-muted:  #8a7f70;
  --c-text-dim:    #5a5248;

  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Crimson Text', Georgia, serif;
  --font-clue:    'HF Poet', var(--font-body);

  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(201,169,89,0.15);

  --nav-height: 64px;
  --transition: 0.2s ease;
}

/* ─── Fuente pistas (HFPoet) ────────────────────────────────────────────────── */
@font-face {
  font-family: 'HF Poet';
  src: url('/public/fonts/HFPoet.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-gold); text-decoration: none; }
a:hover { color: var(--c-gold-bright); }
button { cursor: pointer; font-family: inherit; }

/* ─── Layout jugador ────────────────────────────────────────────────────────── */
:root {
  --topbar-height: 72px;
}

.player-layout { display: flex; flex-direction: column; }

/* ─── Topbar con logo ───────────────────────────────────────────────────────── */
.player-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: rgba(10,10,15,0.92);
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 110;
}

.player-logo-link {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.player-logo {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.player-logo-link:hover .player-logo {
  opacity: 0.85;
}

/* Avatar en topbar */
.player-topbar-identity {
  display: flex;
  align-items: center;
}

.topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  object-fit: cover;
  transition: border-color var(--transition);
}

.topbar-avatar:hover { border-color: var(--c-gold-dim); }

.topbar-avatar--placeholder {
  background: var(--c-bg-elevated);
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.player-main {
  flex: 1;
  padding: calc(var(--topbar-height) + 1.25rem) 1rem calc(var(--nav-height) + 1.25rem);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Pantalla final de acusación (win/fail) ─────────────────────────────────── */
.end-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: #0a0a0f;
  background-image: url('/public/img/bgficha.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 120;
}

.end-screen-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 3.2rem 1.75rem 2.25rem;
  border-radius: var(--radius-xl);
  background: rgba(10,10,15,0.96);
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.75),
    0 0 0 1px rgba(0,0,0,0.65);
}

.end-screen-seal {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.end-screen-seal-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,0.7))
    drop-shadow(0 0 14px rgba(201,169,89,0.22));
  opacity: 0.98;
  transform-origin: center center;
  animation:
    no-event-stamp 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    no-event-pulse 2.5s ease-in-out 0.9s infinite;
}

/* Fondo texturizado para pantallas principales (prueba) */
.home-screen,
.map-screen,
.inventory-screen,
.suspects-screen,
.clues-screen,
.accusation-screen {
  position: relative;
  background-image: none;
  border-radius: var(--radius-lg);
  padding: 1rem;
}

/* Inventario, Mapa, Sospechosos, Pistas, Inicio y Libreta: fondo bginventory al 30% */
.inventory-screen,
.map-screen,
.suspects-screen,
.clues-screen,
.home-screen,
.notebook-screen,
.accusation-screen {
  background-image: none;
}
.inventory-screen::before,
.map-screen::before,
.suspects-screen::before,
.clues-screen::before,
.home-screen::before,
.notebook-screen::before,
.accusation-screen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/img/bginventory.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

/* ─── Navegación inferior ───────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(10,10,14,0.9);
  background-image: url('/public/img/dark-wood.png');
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  color: var(--c-text-muted);
  text-decoration: none;
  flex: 1;
  transition: color var(--transition);
}

.nav-item.active, .nav-item:hover { color: var(--c-gold); }
.nav-icon { font-size: 1.3rem; line-height: 1; }
.nav-label { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; }

/* ─── Botones ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--c-gold);
  color: #0a0a0f;
  border-color: var(--c-gold);
}
.btn--primary:hover:not(:disabled) {
  background: var(--c-gold-bright);
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 16px rgba(201,169,89,0.4);
}

.btn--secondary {
  background: var(--c-bg-elevated);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn--secondary:hover { border-color: var(--c-gold-dim); }

.btn--outline {
  background: transparent;
  color: var(--c-gold);
  border-color: var(--c-gold-dim);
}
.btn--outline:hover { background: rgba(201,169,89,0.1); }

.btn--danger {
  background: var(--c-crimson);
  color: #fff;
  border-color: var(--c-crimson);
}
.btn--danger:hover { background: var(--c-blood); }

.btn--lg { padding: 0.85rem 1.75rem; font-size: 0.95rem; }
.btn--full { width: 100%; }

/* ─── Alertas ───────────────────────────────────────────────────────────────── */
.alert {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  border-left: 3px solid;
}
.alert--error   { background: rgba(139,26,26,0.2); border-color: var(--c-crimson); color: #f08080; }
.alert--success { background: rgba(25,100,25,0.2); border-color: #3a8; color: #6cf; }
.alert--warning { background: rgba(180,120,0,0.2); border-color: #fa0; color: #fd8; }
.alert--info    { background: rgba(20,80,140,0.2); border-color: #46a; color: #8bf; }

/* ─── Pantalla de identificación ────────────────────────────────────────────── */
.identify-screen {
  position: relative;
  padding: 1.5rem 0;
  min-height: 100vh;
}
.identify-screen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/img/bghello.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  z-index: -1;
}

.identify-header { text-align: center; margin-bottom: 2rem; }

.crime-ribbon {
  display: inline-block;
  background: var(--c-crimson);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 1.2rem;
  border-radius: 2px;
  margin-bottom: 1rem;
  animation: identify-ribbon 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  transform: translateY(-20px);
}

.identify-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  animation: identify-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
  opacity: 0;
  transform: translateY(16px);
}

.identify-subtitle {
  color: var(--c-text);
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  animation: identify-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
  opacity: 0;
  transform: translateY(16px);
}

@keyframes identify-ribbon {
  from { opacity: 0; transform: translateY(-20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes identify-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.guest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.guest-card {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--c-border);
  transition: all var(--transition);
  background: var(--c-bg-card);
  animation: identify-card 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  transform: translateY(24px) scale(0.95);
}
.guest-card:nth-child(1) { animation-delay: 0.4s; }
.guest-card:nth-child(2) { animation-delay: 0.5s; }
.guest-card:nth-child(3) { animation-delay: 0.55s; }
.guest-card:nth-child(4) { animation-delay: 0.6s; }
.guest-card:nth-child(5) { animation-delay: 0.65s; }
.guest-card:nth-child(6) { animation-delay: 0.7s; }
.guest-card:nth-child(7) { animation-delay: 0.75s; }
.guest-card:nth-child(8) { animation-delay: 0.8s; }
.guest-card:nth-child(9) { animation-delay: 0.85s; }
.guest-card:nth-child(10) { animation-delay: 0.9s; }
.guest-card:nth-child(n+11) { animation-delay: 0.95s; }

@keyframes identify-card {
  from { opacity: 0; transform: translateY(24px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.identify-alert {
  animation: identify-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
  opacity: 0;
  transform: translateY(8px);
}

.identify-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--c-text-muted);
  animation: identify-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
  opacity: 0;
  transform: translateY(12px);
}

.guest-card:hover { border-color: var(--c-gold-dim); transform: translateY(-2px); }
.guest-card.selected {
  border-color: var(--c-gold);
  box-shadow: 0 0 20px rgba(201,169,89,0.3);
}

.guest-radio { position: absolute; opacity: 0; width: 0; height: 0; }

.guest-card-inner { padding: 0.5rem; text-align: center; }

.guest-card-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.guest-card-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-elevated);
  border-radius: var(--radius);
  aspect-ratio: 1;
  margin-bottom: 0.5rem;
}
.guest-card-photo--placeholder span {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-gold-dim);
}

.guest-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-text);
}

.guest-card-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background: var(--c-gold);
  color: #0a0a0f;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.guest-card.selected .guest-card-check { display: flex; }

.pin-field {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.pin-field.pin-field--visible {
  animation: identify-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.identify-form .btn--primary {
  animation: identify-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
  opacity: 0;
  transform: translateY(12px);
}
.pin-label { display: block; font-family: var(--font-display); color: var(--c-gold); margin-bottom: 0.5rem; font-weight: 700; }
.pin-input {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--c-text);
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5em;
  font-family: monospace;
}
.pin-input:focus { outline: none; border-color: var(--c-gold); }

/* ─── Home del jugador (mismo estilo que inventario, mapa, sospechosos, pistas) ─ */
.home-header {
  text-align: center;
  padding: 1.5rem 0 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,169,89,0.3);
}

.home-event-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem 0.2rem;
  border-radius: 999px;
  background: rgba(18,18,26,0.8);
  border: 1px solid rgba(201,169,89,0.4);
  color: var(--c-gold);
  margin-bottom: 0.6rem;
}

.home-victim {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.victim-prefix {
  font-size: 0.9rem;
  color: var(--c-text);
  opacity: 0.8;
  font-style: italic;
  margin-bottom: 0.2rem;
}
.victim-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.home-player-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(26,26,38,0.7);
  border: 1px solid rgba(201,169,89,0.3);
  border-radius: 50px;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
}
.player-badge-photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.player-badge-photo--placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(42,42,62,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-gold-dim);
}
.player-badge-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-text);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}

.home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.25rem 0.75rem;
  background: rgba(26,26,38,0.7);
  border: 1px solid rgba(201,169,89,0.25);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition);
}
.home-card:hover {
  border-color: rgba(201,169,89,0.45);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.home-card--accent {
  border-color: rgba(192,57,43,0.7);
  background: linear-gradient(145deg, rgba(139,26,26,0.85), rgba(90,8,14,0.9));
  box-shadow: 0 0 24px rgba(139,26,26,0.4);
}
.home-card--accent:hover {
  border-color: var(--c-crimson);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 4px 24px rgba(139,26,26,0.5);
}

.home-card-icon { font-size: 1.8rem; }
.home-card-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.home-card-desc {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  line-height: 1.35;
  opacity: 0.9;
}

.home-blocked {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(26,26,38,0.6);
  border: 1px solid rgba(255,170,0,0.3);
  border-radius: var(--radius);
}

/* ─── Tutorial inicial (pop-up dark wood) ───────────────────────────────────── */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: tutorial-fadeIn 0.3s ease;
}
.tutorial-overlay--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

.tutorial-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,169,89,0.1);
  overflow: visible; /* permitir que el sello sobresalga */
}

.tutorial-seal {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.tutorial-seal-img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,0.55))
    drop-shadow(0 0 10px rgba(201,169,89,0.12));
  opacity: 0.98;
  transform-origin: center center;
  animation: no-event-stamp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             no-event-pulse 2.5s ease-in-out 0.75s infinite;
}

.tutorial-panel {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201,169,89,0.22);
  overflow: hidden; /* mantener esquinas redondeadas del panel */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}

.tutorial-modal--dark-wood .tutorial-panel {
  background: rgba(18,14,10,0.98);
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  color: var(--c-text);
}

.tutorial-content {
  padding: 3.45rem 1.5rem 1.25rem;
  min-height: 0;
  overflow: hidden;
}

.tutorial-step {
  display: none;
  animation: tutorial-stepIn 0.35s ease;
}
.tutorial-step--active {
  display: block;
}

@keyframes tutorial-stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tutorial-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-gold);
  margin: 0 0 0.85rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.tutorial-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}
.tutorial-text strong {
  color: var(--c-gold-dim);
  font-weight: 600;
}

.tutorial-footer {
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--c-border);
  background: rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.tutorial-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-border);
  transition: background var(--transition), transform var(--transition);
}
.tutorial-dot--active {
  background: var(--c-gold);
  transform: scale(1.2);
}

.tutorial-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  width: 100%;
}

.tutorial-actions .btn {
  min-width: 120px;
}

.tutorial-actions .btn {
  position: relative;
  border-color: rgba(201,169,89,0.28);
  background: rgba(20,14,10,0.9);
  background-image: url('/public/img/dark-wood.png');
  background-size: 240px 240px;
  background-repeat: repeat;
  background-position: center;
  color: var(--c-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 18px rgba(0,0,0,0.35);
}

.tutorial-actions .btn:hover:not(:disabled) {
  border-color: rgba(201,169,89,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 22px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}

.tutorial-actions .btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 14px rgba(0,0,0,0.35);
}

.tutorial-actions .btn.btn--primary {
  border-color: rgba(201,169,89,0.55);
  color: #120e0a;
  background: linear-gradient(180deg, rgba(232,201,110,0.98), rgba(201,169,89,0.95));
  box-shadow: 0 12px 22px rgba(0,0,0,0.42), 0 0 0 1px rgba(201,169,89,0.15);
}

.tutorial-actions .btn.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(242,219,130,1), rgba(215,182,96,0.98));
  box-shadow: 0 16px 28px rgba(0,0,0,0.5), 0 0 18px rgba(201,169,89,0.2);
}

.tutorial-btn-done[hidden],
.tutorial-btn-next[hidden] {
  display: none !important;
}

@keyframes tutorial-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Screen genérico ───────────────────────────────────────────────────────── */
.screen-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}
.screen-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-gold);
}
.screen-subtitle { color: var(--c-text-muted); font-size: 0.9rem; margin-top: 0.25rem; }

/* ─── Sospechosos (mismo estilo que inventario y mapa) ───────────────────────── */
.suspects-screen .screen-header {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,169,89,0.3);
}
.suspects-screen .screen-title {
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.suspects-screen .screen-subtitle {
  max-width: 320px;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-text);
  opacity: 0.85;
  font-style: italic;
}
.suspects-screen .screen-subtitle .link-gold {
  color: var(--c-gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.suspects-screen .screen-subtitle .link-gold:hover {
  color: var(--c-gold-bright);
}

.suspects-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}

.suspect-card {
  background: rgba(26,26,38,0.7);
  border: 1px solid rgba(201,169,89,0.25);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.suspect-card:hover {
  border-color: rgba(201,169,89,0.45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.suspect-card--discarded { opacity: 0.5; border-color: rgba(138,127,112,0.5); }
.suspect-card--suspected { border-color: #fa0; box-shadow: 0 0 12px rgba(255,170,0,0.15); }
.suspect-card--confirmed { border-color: var(--c-crimson); box-shadow: 0 0 16px rgba(139,26,26,0.3); }

.suspect-card-photo-wrap { position: relative; flex-shrink: 0; }

.suspect-card-photo {
  width: 90px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radius);
}
.suspect-card-photo--placeholder {
  width: 90px;
  height: 110px;
  background: rgba(42,42,62,0.5);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.suspect-card-photo--placeholder span {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--c-gold-dim);
}

.suspect-status-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.suspect-status-badge--discarded { background: #333; color: #999; }
.suspect-status-badge--suspected { background: rgba(255,170,0,0.9); color: #000; }
.suspect-status-badge--confirmed { background: var(--c-crimson); color: #fff; }

.suspect-card-body { flex: 1; min-width: 0; }
.suspect-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-bottom: 0.25rem;
}
.suspect-desc { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.5rem; }

.suspect-attrs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.attr-tag {
  font-size: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(201,169,89,0.1);
  border: 1px solid var(--c-gold-dim);
  color: var(--c-gold-dim);
}

.suspect-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.btn-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 700;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-muted);
  transition: all var(--transition);
}
.btn-status--discard:hover { border-color: #888; color: #888; }
.btn-status--suspect:hover { border-color: #fa0; color: #fa0; }
.btn-status--confirm:hover { border-color: var(--c-crimson); color: #f88; }

/* ─── Inventario ────────────────────────────────────────────────────────────── */
.inventory-screen .screen-header {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,169,89,0.3);
}
.inventory-screen .screen-title {
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.inventory-screen .screen-subtitle {
  font-size: 0.9rem;
  color: var(--c-text);
  opacity: 0.85;
  font-style: italic;
}

.inventory-section {
  margin-bottom: 2.25rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.inventory-section-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inventory-section .section-icon {
  font-size: 1.1rem;
  opacity: 0.9;
}
.section-count {
  margin-left: auto;
  background: rgba(201,169,89,0.2);
  color: var(--c-gold);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(201,169,89,0.4);
}

.weapon-grid, .place-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.9rem;
  grid-auto-rows: 1fr;
  transition: grid-template-columns 0.2s ease;
}

/* Modo 1 carta por fila: cartas más grandes */
.inventory-screen.inv-layout--single .weapon-grid,
.inventory-screen.inv-layout--single .place-grid {
  grid-template-columns: 1fr;
  max-width: 360px;
  margin-inline: auto;
}

@media (min-width: 520px) {
  .weapon-grid, .place-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .inventory-screen.inv-layout--single .weapon-grid,
  .inventory-screen.inv-layout--single .place-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* Toggle de layout */
.inv-layout-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 0.85rem;
  background: rgba(201,169,89,0.1);
  border: 1px solid rgba(201,169,89,0.25);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.inv-layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(201,169,89,0.8);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inv-layout-btn:hover {
  color: var(--c-gold);
}

.inv-layout-btn--active {
  background: linear-gradient(135deg, rgba(201,169,89,0.35), rgba(201,169,89,0.2));
  color: var(--c-gold);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.inv-layout-icon {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.95;
}

.inv-item {
  position: relative;
  height: 100%;
  cursor: pointer;
}

.inv-item-frame {
  background: radial-gradient(circle at top, rgba(201,169,89,0.08), rgba(10,10,18,0.9));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  border: 1px solid rgba(201,169,89,0.15);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), filter var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.inv-item-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0,0,0,0.8);
  pointer-events: none;
}

.inv-item:hover .inv-item-frame {
  transform: translateY(-2px);
  border-color: rgba(201,169,89,0.4);
  box-shadow: 0 14px 32px rgba(0,0,0,0.6);
}

.inv-item--mundane .inv-item-frame {
  filter: saturate(0.7);
  border-style: dashed;
  border-color: rgba(138,127,112,0.6);
}

.inv-thumb {
  width: 100%;
  aspect-ratio: 2 / 3; /* más vertical, tipo carta */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #252436 0%, #11121b 100%);
  border-bottom: 1px solid rgba(0,0,0,0.6);
  padding: 0.35rem;
}

.inv-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: 0.9;
}

.inv-info {
  padding: 0.8rem 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.inv-header {
  padding: 0.45rem 0.8rem 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.inv-name--compact {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.02em;
}

.inv-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inv-tag--mundane {
  position: relative;
  background: rgba(30,28,24,0.85);
  border: 1px solid rgba(138,127,112,0.7);
  color: #c8bb9d;
  padding-inline: 0.5rem;
}

.inv-tag i {
  font-size: 0.8rem;
}

.inv-desc {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

.inv-attrs {
  margin: 0;
  padding: 0.25rem 0 0.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  align-items: baseline;
}

.inv-attr-row {
  display: contents;
  font-size: 0.8rem;
  line-height: 1.3;
}

.inv-attr-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8d2a0;
}

.inv-attr-value {
  color: var(--c-text);
}

  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}
.weapon-mundane-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: rgba(90,85,75,0.25);
  border: 1px solid rgba(138,127,112,0.35);
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.weapon-mundane-badge i {
  font-size: 0.8rem;
  opacity: 0.9;
}
.weapon-desc, .place-desc {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

.inventory-screen .empty-state {
  padding: 2rem 1rem;
  text-align: center;
  background: rgba(26,26,38,0.4);
  border-radius: var(--radius);
  border: 1px dashed rgba(201,169,89,0.25);
}
.inventory-screen .empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}
.inventory-screen .empty-state p {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* ─── Visor de carta desde inventario ────────────────────────────────────── */
.card-viewer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 130;
}

.card-viewer--open {
  display: flex;
}

.card-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(0,0,0,0.8), rgba(0,0,0,0.96));
}

.card-viewer-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 1.25rem 1rem 1.5rem;
}

.card-viewer-flip {
  max-width: 420px;
}

.card-viewer-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(248,241,223,0.4);
  background: rgba(10,10,10,0.8);
  color: #f8f1df;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-viewer-title {
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* ─── Pistas (mismo estilo que inventario, mapa y sospechosos) ─────────────────── */
.clues-screen .screen-header {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,169,89,0.3);
}
.clues-screen .screen-title {
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.clues-screen .screen-subtitle {
  font-size: 0.9rem;
  color: var(--c-text);
  opacity: 0.85;
  font-style: italic;
}
.clues-screen .empty-state {
  padding: 2rem 1rem;
  text-align: center;
  background: rgba(26,26,38,0.4);
  border-radius: var(--radius);
  border: 1px dashed rgba(201,169,89,0.25);
}
.clues-screen .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6; }
.clues-screen .empty-state p { font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.5; }

.clues-list { display: flex; flex-direction: column; gap: 0.75rem; }

.clue-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(26,26,38,0.7);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201,169,89,0.25);
  border-left: 3px solid rgba(201,169,89,0.5);
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.clue-card:hover {
  border-color: rgba(201,169,89,0.45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.clue-card--guest  { border-left-color: #6a9; }
.clue-card--weapon { border-left-color: var(--c-crimson); }
.clue-card--place  { border-left-color: var(--c-gold-dim); }
.clue-card--deleted { opacity: 0.4; border-color: rgba(80,80,90,0.5); border-left-color: #333; }
.clue-card--big { padding: 1.5rem; border-left-width: 4px; }

/* Pista destruida por ti (la conservas, otros no la tienen) */
.clue-card--destroyed-by-me {
  position: relative;
  border-color: rgba(180,100,40,0.4);
  border-left-color: #c96a2a;
  background: linear-gradient(135deg, rgba(26,26,38,0.85) 0%, rgba(40,28,20,0.5) 100%);
  box-shadow: 0 0 0 1px rgba(201,106,42,0.2) inset;
}

.clue-card--destroyed-by-me:hover {
  border-color: rgba(201,106,42,0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(201,106,42,0.25) inset;
}

.clue-destroyed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e8a050;
  background: rgba(180,80,30,0.25);
  border: 1px solid rgba(201,106,42,0.5);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  margin-bottom: 0;
  width: fit-content;
}

.clue-destroyed-badge i {
  font-size: 0.75rem;
  opacity: 0.95;
}

.clue-type-indicator { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
.clue-body { flex: 1; min-width: 0; }
.clue-text {
  font-family: var(--font-clue);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 0.35rem;
}
.clue-text--redacted { color: transparent; text-shadow: 0 0 8px #555; letter-spacing: 0.3em; }
.clue-meta { font-size: 0.75rem; color: var(--c-text-muted); font-style: italic; }

.clues-section {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.clues-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clues-section-title .section-count {
  margin-left: auto;
  background: rgba(201,169,89,0.2);
  color: var(--c-gold);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(201,169,89,0.4);
}
.clues-section-icon { font-size: 1.1rem; opacity: 0.9; }

.clue-delete-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  opacity: 0.5;
  transition: opacity var(--transition);
  padding: 4px;
}
.clue-delete-btn:hover { opacity: 1; }

.clues-deleted-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(100,80,80,0.3);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.deleted-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--c-text-dim);
  margin-bottom: 0.75rem;
}

/* ─── Mapa (mismo estilo que inventario) ─────────────────────────────────────── */
.map-screen .screen-header {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,169,89,0.3);
}
.map-screen .screen-title {
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.map-screen .screen-subtitle {
  font-size: 0.9rem;
  color: var(--c-text);
  opacity: 0.85;
  font-style: italic;
}
.map-screen .empty-state {
  padding: 2rem 1rem;
  text-align: center;
  background: rgba(26,26,38,0.4);
  border-radius: var(--radius);
  border: 1px dashed rgba(201,169,89,0.25);
}
.map-screen .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6; }
.map-screen .empty-state p { font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.5; }

/* Mapa más ancho: rompe el padding del contenedor */
.map-screen {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.map-container {
  margin-bottom: 1.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding: 0.65rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.map-wrapper {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(201,169,89,0.25);
}
.map-image { width: 100%; height: auto; display: block; }

/* SVG overlay — ocupa exactamente la imagen */
.map-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Grupos de zona (zona + label): reciben los clicks */
.map-zone-group { cursor: pointer; }
.map-zone-group:hover .map-zone--unlocked { fill: rgba(201,169,89,0.4); }
.map-zone-group:hover .map-zone--visited  { fill: rgba(76,175,80,0.45); }

/* Polígonos */
.map-zone { transition: fill 0.25s; }
.map-zone--unlocked { fill: rgba(201,169,89,0.18); stroke: #c9a959; stroke-width: 0.5; }
.map-zone--locked   { fill: rgba(10,10,30,0.55);   stroke: #3a3a5a; stroke-width: 0.4; }
.map-zone--visited  { fill: rgba(76,175,80,0.22);  stroke: #4caf50; stroke-width: 0.6; }

/* Labels dentro del SVG */
.map-zone-label {
  font-size: 4px;
  font-weight: 700;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.map-zone-label--unlocked { fill: #c9a959; }
.map-zone-label--locked   { fill: rgba(150,150,170,0.7); }
.map-zone-label--visited  { fill: #4caf50; }

.map-zone-check {
  font-size: 3.5px;
  fill: #4caf50;
  pointer-events: none;
}

/* Tooltip flotante */
.map-tooltip {
  background: rgba(5,5,15,0.92);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.map-tooltip-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-bottom: 0.4rem;
}
.tooltip-tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
}
.tooltip-tag--visited   { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.4); }
.tooltip-tag--available { background: rgba(201,169,89,0.12); color: var(--c-gold); border: 1px solid var(--c-gold-dim); }
.tooltip-tag--locked    { background: rgba(30,30,60,0.5); color: #666; border: 1px solid #333; }

/* HUD sobre el mapa */
.map-hud {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 5;
}
.map-timer {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(5,5,12,0.88);
  border: 1px solid rgba(201,169,89,0.55);
  font-size: 0.72rem;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.map-timer .countdown {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Leyenda */
.zones-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.zone-legend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: rgba(26,26,38,0.7);
  border-radius: var(--radius);
  border: 1px solid rgba(201,169,89,0.25);
  transition: border-color var(--transition);
}
.zone-legend-item--unlocked { border-color: rgba(201,169,89,0.35); }
.zone-legend-item--locked   { opacity: 0.55; }
.zone-legend-item--visited  { border-color: rgba(76,175,80,0.6); background: rgba(76,175,80,0.04); }

.zone-legend-icon { font-size: 1rem; flex-shrink: 0; }
.zone-legend-body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.zone-legend-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.zone-legend-name--hidden { color: var(--c-text-muted); font-style: italic; font-weight: 400; letter-spacing: 0.02em; }
.zone-legend-time { font-size: 0.75rem; color: var(--c-text-muted); }
.zone-legend-status { font-size: 0.75rem; }
.zone-legend-status--visited   { color: #4caf50; font-weight: 700; }
.zone-legend-status--available { color: var(--c-gold-dim); }

/* ─── Libreta de deducción (mismo estilo, optimizada para uso intensivo) ───────── */
.notebook-screen {
  position: relative;
}

.notebook-screen .screen-header {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(201,169,89,0.3);
}
.notebook-screen .screen-title {
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.notebook-screen .screen-subtitle {
  font-size: 0.9rem;
  color: var(--c-text);
  opacity: 0.85;
  font-style: italic;
}

/* Leyenda de estados: clara y táctil */
.notebook-legend {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.notebook-legend .nb-btn {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  pointer-events: none;
}

/* Secciones con panel */
.notebook-section {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: rgba(18,18,26,0.6);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}
.notebook-section-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201,169,89,0.25);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notebook-grid { display: flex; flex-direction: column; gap: 0.6rem; }

/* Items: táctiles, claros */
.notebook-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(26,26,38,0.7);
  border: 1px solid rgba(201,169,89,0.25);
  border-radius: var(--radius);
  transition: all var(--transition);
  min-height: 52px;
}
.notebook-item:hover {
  border-color: rgba(201,169,89,0.4);
}
.notebook-item--discarded {
  border-color: rgba(100,100,110,0.25);
  background: rgba(30,30,40,0.35);
  opacity: 0.7;
}
.notebook-item--discarded .notebook-entity-name {
  text-decoration: line-through;
  color: rgba(200,190,170,0.35);
}
.notebook-item--suspected {
  border-color: rgba(255,170,0,0.55);
  background: rgba(255,170,0,0.08);
}
.notebook-item--confirmed {
  border-color: rgba(139,26,26,0.65);
  background: rgba(139,26,26,0.12);
}

.notebook-entity-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
  color: var(--c-text);
}

/* Botones: grandes para móvil, fáciles de pulsar */
.notebook-buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nb-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  border: 1px solid rgba(201,169,89,0.3);
  background: rgba(42,42,62,0.5);
  color: var(--c-text-muted);
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nb-btn:hover {
  border-color: rgba(201,169,89,0.5);
  color: var(--c-text);
}
.nb-btn--discard.active {
  border-color: #888;
  color: #888;
  background: rgba(128,128,128,0.2);
}
.nb-btn--suspect.active {
  border-color: #fa0;
  color: #fa0;
  background: rgba(255,170,0,0.2);
}
.nb-btn--confirm.active {
  border-color: var(--c-crimson);
  color: #f99;
  background: rgba(139,26,26,0.25);
}

.notebook-empty {
  padding: 1.5rem 1rem;
  font-size: 0.9rem;
  color: var(--c-text-muted);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  background: rgba(26,26,38,0.4);
  border-radius: var(--radius);
  border: 1px dashed rgba(201,169,89,0.2);
}

/* ─── Acusación ─────────────────────────────────────────────────────────────── */
.accusation-screen {
  position: relative;
}

.accusation-screen .screen-header {
  text-align: center;
}

.accusation-screen .screen-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.accusation-screen .screen-subtitle {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-text);
  opacity: 0.85;
  font-style: italic;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.accusation-warning {
  padding: 0.75rem 1rem;
  background: rgba(180,100,0,0.15);
  border: 1px solid rgba(255,170,0,0.3);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: #fda;
  margin-bottom: 1.5rem;
}

.accusation-form { display: flex; flex-direction: column; gap: 1.25rem; }

.accusation-notice {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: rgba(18,18,26,0.65);
  border: 1px solid rgba(201,169,89,0.18);
  color: var(--c-text-muted);
  font-size: 0.9rem;
}

.accuse-section {
  background: rgba(18,18,26,0.65);
  border: 1px solid rgba(201,169,89,0.16);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

.accuse-section-head {
  padding: 1.1rem 1.1rem 0.9rem;
  background: rgba(0,0,0,0.25);
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.accuse-section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.accuse-section-hint {
  margin-top: 0.25rem;
  color: rgba(232,223,208,0.72);
  font-size: 0.9rem;
  font-style: italic;
}

.accuse-grid {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 480px) {
  .accuse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.accuse-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,15,0.75);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.6rem;
  transform: translateY(0);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.accuse-card:focus-within {
  outline: 2px solid rgba(201,169,89,0.85);
  outline-offset: 3px;
}

.accuse-card:hover {
  transform: translateY(-2px);
  border-color: rgba(201,169,89,0.35);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}

.accuse-media {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201,169,89,0.14);
  background: rgba(18,18,26,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.accuse-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.02);
  transform: scale(1.02);
}

.accuse-placeholder {
  font-size: 2rem;
  opacity: 0.9;
}

.accuse-name {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.2rem 0.2rem 0.35rem;
  letter-spacing: 0.02em;
}

.accuse-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.accuse-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,169,89,0.28), transparent 55%),
    linear-gradient(180deg, rgba(201,169,89,0.12), transparent 40%);
  mix-blend-mode: screen;
}

.accuse-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition), box-shadow var(--transition);
  box-shadow:
    0 0 0 2px rgba(201,169,89,0.38),
    0 0 52px rgba(201,169,89,0.32);
}

.accuse-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  background: rgba(201,169,89,0.92);
  color: #0a0a0f;
  box-shadow: 0 10px 20px rgba(0,0,0,0.45);
  font-size: 1.05rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

/* Estado seleccionado (JS añade .accuse-card--selected) */
.accuse-input:checked ~ .accuse-glow {
  opacity: 1;
}

.accuse-input:checked ~ .accuse-border {
  opacity: 1;
}

.accuse-input:checked ~ .accuse-media {
  border-color: rgba(201,169,89,0.65);
  box-shadow: 0 0 0 2px rgba(201,169,89,0.18), 0 18px 30px rgba(0,0,0,0.45);
}

.accuse-input:checked ~ .accuse-media .accuse-img {
  transform: scale(1.05);
  filter: contrast(1.1) saturate(1.08);
}

.accuse-input:checked ~ .accuse-selected-tag {
  opacity: 1;
  transform: translateY(0);
  color: var(--c-gold);
  border-color: rgba(201,169,89,0.72);
  background: rgba(10,10,15,0.88);
}

.accuse-input:checked ~ .accuse-check {
  opacity: 1;
  transform: scale(1);
}

.accuse-selected-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 900;
  background: rgba(10,10,15,0.75);
  color: rgba(232,223,208,0.85);
  border: 1px solid rgba(201,169,89,0.38);
  box-shadow: 0 10px 18px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
  pointer-events: none;
}

.accuse-submit {
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  border-color: rgba(201,169,89,0.5);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 18px rgba(201,169,89,0.14);
}

.accuse-submit:hover:not(:disabled) {
  box-shadow: 0 22px 52px rgba(0,0,0,0.6), 0 0 22px rgba(201,169,89,0.22);
  transform: translateY(-1px);
}

.accuse-disabled-hint {
  margin: 0;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 0.9rem;
  padding: 0.25rem 0.25rem 0;
}

/* Confirm modal: resumen en 3 cartas */
.field-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.field-select {
  width: 100%;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a959' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field-select:focus { outline: none; border-color: var(--c-gold-dim); }

.accusation-result {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--c-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.accusation-result--win {
  position: relative;
  overflow: hidden;
  border-color: rgba(99, 199, 120, 0.9);
  box-shadow:
    0 0 40px rgba(99,199,120,0.5),
    0 0 0 1px rgba(99,199,120,0.55);
}
.accusation-result--win::before {
  content: '';
  position: absolute;
  inset: -40%;
  background-image:
    url('/public/img/dark-wood.png'),
    radial-gradient(circle at top, rgba(56, 176, 90, 0.65), transparent 62%);
  background-size: 320px 320px, 220% 220%;
  background-repeat: repeat, no-repeat;
  background-position: center, top;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}
.accusation-result--win > * { position: relative; z-index: 1; }

.accusation-result--fail {
  position: relative;
  overflow: hidden;
  border-color: rgba(139,26,26,0.9);
  box-shadow:
    0 0 38px rgba(139,26,26,0.45),
    0 0 0 1px rgba(139,26,26,0.6);
}
.accusation-result--fail::before {
  content: '';
  position: absolute;
  inset: -40%;
  background-image:
    url('/public/img/dark-wood.png'),
    radial-gradient(circle at top, rgba(192,57,43,0.38), transparent 60%);
  background-size: 320px 320px, cover;
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}
.accusation-result--fail > * { position: relative; z-index: 1; }

.result-icon { font-size: 3.5rem; }
.result-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--c-gold);
}
.result-desc { color: var(--c-text-muted); max-width: 520px; margin: 0 auto; }
.result-desc--small { font-size: 0.85rem; margin-top: 0.75rem; }
.result-meta { color: rgba(232,223,208,0.7); font-style: italic; }

/* Resumen visual de acusación bloqueada */
.accusation-summary-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
  width: 100%;
  max-width: 520px;
}
.accusation-summary-card {
  background: rgba(10,10,18,0.7);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.75rem 0.9rem;
}
.accusation-summary-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
  margin-bottom: 0.4rem;
}
.accusation-summary-body {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.accusation-summary-photo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}
.accusation-summary-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,20,30,0.9);
  border: 1px solid var(--c-border);
  font-size: 1.4rem;
}
.accusation-summary-text { flex: 1; min-width: 0; }
.accusation-summary-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--c-gold);
}

/* ─── Intro narrativa ───────────────────────────────────────────────────────── */
.intro-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: #0a0a0f;
  z-index: 115;
}
.intro-screen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/img/bgnews.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.intro-screen > .intro-paper {
  position: relative;
  z-index: 1;
}
.intro-paper {
  width: 100%;
  max-width: 520px;
  background: #f3f0e7;
  color: #1b1b1b;
  border-radius: 6px;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.3);
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
}
.intro-paper::before,
.intro-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
}
.intro-paper::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 100% 22px;
  opacity: 0.4;
}
.intro-paper::after {
  background: radial-gradient(circle at top left, rgba(0,0,0,0.16), transparent 55%),
              radial-gradient(circle at bottom right, rgba(0,0,0,0.18), transparent 55%);
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.intro-header {
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}
.intro-newspaper-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.intro-newspaper-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.2);
}
.intro-newspaper-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}
.intro-newspaper-date {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-left: 2px solid rgba(0,0,0,0.35);
  border-right: 2px solid rgba(0,0,0,0.35);
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(240,238,235,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset;
}
.intro-article {
  position: relative;
  z-index: 1;
}
.intro-headline {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.intro-lead {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.intro-body-text {
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.intro-actions {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
}

/* Typewriter effect */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(0,0,0,0.4);
  animation: typewriter 2.8s steps(32, end), caret 0.9s step-end infinite;
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes caret {
  from, to { border-color: transparent; }
  50%      { border-color: rgba(0,0,0,0.5); }
}

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.accusation-confirm-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  z-index: 200;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.modal-box {
  position: relative;
  background: var(--c-bg-elevated);
  border-top: 1px solid var(--c-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1.5rem;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-box h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--c-gold);
}
.modal-summary {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  font-size: 0.9rem;
  line-height: 1.8;
}
.modal-buttons { display: flex; gap: 0.75rem; margin-top: 1rem; }
.modal-buttons .btn { flex: 1; }

/* ─── Scan result ───────────────────────────────────────────────────────────── */
.scan-result-screen {
  position: relative;
  min-height: calc(100vh - var(--topbar-height) - var(--nav-height, 0px));
  padding: 1.5rem 1rem 2rem;
}
.scan-result-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0f;
  background-image: url('/public/img/bghello.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.scan-result-content {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
}

.scan-result {
  text-align: center;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-xl);
  background: rgba(18,18,26,0.85);
  border: 1px solid rgba(201,169,89,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: scan-result-enter 0.5s ease-out forwards;
}
@keyframes scan-result-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scan-result--found {
  border-color: rgba(201,169,89,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,169,89,0.1);
}
.scan-result--weapon.scan-result--found {
  border-color: rgba(139,26,26,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(139,26,26,0.15);
}
.scan-result--clue.scan-result--found {
  border-color: rgba(68,102,170,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(68,102,170,0.15);
}
.scan-result--info { border-color: rgba(52,68,136,0.4); }
.scan-result--deleted {
  border-color: rgba(180,80,60,0.5);
  background: rgba(30,18,18,0.9);
}
.scan-result--locked { border-color: rgba(80,80,90,0.5); }
.scan-result--error {
  border-color: rgba(139,26,26,0.5);
  background: rgba(30,18,18,0.9);
}

.scan-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold);
  background: rgba(201,169,89,0.15);
  border: 1px solid rgba(201,169,89,0.35);
  border-radius: 50px;
}
.scan-result-badge--weapon {
  color: #e8a0a0;
  background: rgba(139,26,26,0.2);
  border-color: rgba(139,26,26,0.4);
}
.scan-result-badge--clue {
  color: #8ab;
  background: rgba(68,102,170,0.2);
  border-color: rgba(68,102,170,0.4);
}
.scan-result-badge--mundane {
  color: var(--c-text-muted);
  background: rgba(90,90,100,0.2);
  border-color: rgba(90,90,100,0.3);
}
.scan-result-badge--info {
  color: #7a9;
  background: rgba(52,68,136,0.2);
  border-color: rgba(52,68,136,0.35);
}
.scan-result-badge--deleted {
  color: #c08070;
  background: rgba(180,80,60,0.2);
  border-color: rgba(180,80,60,0.4);
}
.scan-result-badge--locked {
  color: #8a8a95;
  background: rgba(80,80,90,0.25);
  border-color: rgba(80,80,90,0.4);
}
.scan-result-badge--error {
  color: #c07070;
  background: rgba(139,26,26,0.2);
  border-color: rgba(139,26,26,0.4);
}

.scan-result-icon { font-size: 0.9rem; opacity: 0.9; }
.scan-result-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--c-text);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.scan-result-lead {
  font-size: 0.95rem;
  color: var(--c-text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.scan-result-unlock {
  font-size: 0.9rem;
  color: var(--c-gold-dim);
  margin-top: 0.5rem;
}

.scan-result-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin: 0 auto 1rem;
  max-width: 360px;
  text-align: left;
  animation: scan-card-enter 0.5s ease-out 0.15s forwards;
  opacity: 0;
  transform: translateY(12px);
}
@keyframes scan-card-enter {
  to { opacity: 1; transform: translateY(0); }
}
.scan-result-card--place { border-color: rgba(201,169,89,0.35); }
.scan-result-card--weapon { border-color: rgba(139,26,26,0.35); }
.scan-result-card--mundane { border-color: var(--c-border); }
.scan-result-card--mini {
  max-width: 220px;
  padding: 0;
  text-align: center;
}
.scan-result-card--mini .scan-result-card-body {
  padding: 0.75rem 1rem;
}
.scan-result-card--mini .scan-result-card-photo {
  height: 120px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.scan-result-card-photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-bg);
}
.scan-result-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scan-result-card-body { padding: 1rem; }
.scan-result-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-bottom: 0.4rem;
}
.scan-result-card-desc {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.scan-result-card-attrs { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ─── Animación de volteo de carta (QR armas/objetos) ───────────────────────── */
.scan-card-flip {
  margin: 0 auto;
  max-width: 360px;
  perspective: 1200px;
}

.scan-card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.scan-card-inner--flipped {
  transform: rotateY(180deg);
}

.scan-card-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
}

.scan-card-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.scan-card-face--back {
  background: #000;
}

.scan-card-face--front {
  transform: rotateY(180deg);
}

.scan-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.75rem;
}

.scan-card-hint {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 241, 223, 0.85);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(201,169,89,0.6);
}

.scan-result-clue-main {
  margin: 0 auto 1rem;
  max-width: 360px;
  text-align: left;
  animation: scan-card-enter 0.5s ease-out 0.15s forwards;
  opacity: 0;
  transform: translateY(12px);
}
.scan-result-clues {
  text-align: left;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201,169,89,0.2);
}
.scan-result-clues-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-gold-dim);
  margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scan-result-clues .clue-card { margin-bottom: 0.5rem; }

.scan-result-delete {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201,169,89,0.15);
}
.scan-delete-hint {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.scan-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

/* Legacy entity-card for clue-card compatibility */
.entity-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin: 1rem auto;
  max-width: 280px;
  text-align: left;
}
.entity-photo { width: 100%; border-radius: var(--radius); margin-bottom: 0.75rem; max-height: 200px; object-fit: cover; }
.entity-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--c-gold); margin-bottom: 0.4rem; }
.entity-desc { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.5rem; }
.entity-attrs { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ─── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--c-text-muted);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

/* ─── Sin evento ────────────────────────────────────────────────────────────── */
/* ─── No event (sin menú, fondo dark wood) ───────────────────────────────────── */
.no-event-layout {
  min-height: 100vh;
  overflow-x: hidden;
}

.no-event-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.no-event-bg {
  position: absolute;
  inset: 0;
  background: #0a0a0f;
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  z-index: 0;
}

.no-event-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 420px;
  width: 100%;
  animation: no-event-fade 0.6s ease-out;
}

@keyframes no-event-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.no-event-logo-wrap {
  margin-bottom: 2rem;
  cursor: pointer;
}

.no-event-logo-wrap:hover .no-event-logo {
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(201,169,89,0.15));
}

.no-event-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
  transform-origin: center center;
  animation: no-event-stamp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             no-event-pulse 2.5s ease-in-out 0.75s infinite;
}

.no-event-logo--paused {
  animation-play-state: paused;
}

@keyframes no-event-stamp {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-60px);
  }
  65% {
    opacity: 1;
    transform: scale(1.06) translateY(4px);
  }
  85% {
    transform: scale(0.98) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes no-event-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.92; transform: scale(1.03); }
}

.no-event-message {
  background: rgba(18,18,26,0.75);
  border: 1px solid rgba(201,169,89,0.2);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.no-event-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-gold);
  margin: 0 0 0.6rem;
  line-height: 1.3;
  animation: no-event-text-in 0.6s ease-out 0.4s both;
}

.no-event-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
  animation: no-event-text-in 0.6s ease-out 0.55s both;
}

@keyframes no-event-text-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Splash (presentación inicial) ─────────────────────────────────────────── */
.splash-layout {
  min-height: 100vh;
  overflow-x: hidden;
}
.splash-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.splash-bg {
  position: absolute;
  inset: 0;
  background: #0a0a0f;
  background-image: url('/public/img/dark-wood.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  background-position: center;
  z-index: 0;
}
.splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 420px;
  width: 100%;
}
.splash-logo-wrap {
  margin-bottom: 1.5rem;
}
.splash-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  animation: splash-stamp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             splash-pulse 2.5s ease-in-out 0.75s infinite;
}
@keyframes splash-stamp {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-80px);
  }
  65% {
    opacity: 1;
    transform: scale(1.08) translateY(4px);
  }
  85% {
    transform: scale(0.98) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes splash-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.92; transform: scale(1.04); }
}
.splash-tagline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,223,208,0.5);
  margin-bottom: 2.5rem;
}
.splash-form {
  width: 100%;
  display: flex;
  justify-content: center;
}
.splash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.1rem 2.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0f;
  background: linear-gradient(180deg, #e8d48a 0%, #c9a959 35%, #a68b3a 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset,
              0 0 0 1px rgba(201,169,89,0.5),
              0 4px 0 #7a6428,
              0 6px 20px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-height: 56px;
  min-width: 180px;
  position: relative;
  overflow: hidden;
}
.splash-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}
.splash-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #f0dc9a 0%, #d4b35a 35%, #b89640 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset,
              0 0 0 1px rgba(201,169,89,0.6),
              0 6px 0 #7a6428,
              0 8px 28px rgba(0,0,0,0.4),
              0 0 24px rgba(201,169,89,0.15);
}
.splash-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset,
              0 0 0 1px rgba(201,169,89,0.5),
              0 2px 0 #7a6428,
              0 3px 12px rgba(0,0,0,0.3);
}
.splash-btn-icon {
  font-size: 1rem;
  opacity: 0.95;
}
.splash-btn-text {
  letter-spacing: 0.12em;
}

/* ─── Accusation blocked/closed ─────────────────────────────────────────────── */
.accusation-screen {
  max-width: 480px;
  margin: 0 auto;
}

/* ─── Responsive médium+ ────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .player-main { padding-left: 1.5rem; padding-right: 1.5rem; }
  .guest-grid { grid-template-columns: repeat(3, 1fr); }
  .home-grid { grid-template-columns: repeat(3, 1fr); }
}