/* ============================================================
   AKANE UI — Design System v3 · PC-98
   "After the dungeon, the feast."
   Engraved pewter frames, beveled rounded boxes with corner
   nubs, red orb gems in carved sockets, dithered gradients,
   pixel bitmap type. Palette: lavender greys over black,
   blood-red accents. Ref: Rusty / PC-98 visual novel UIs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&family=DotGothic16&family=Press+Start+2P&family=VT323&display=swap');

/* Shining Force: fonte de titulo estilo "title screen SNES" (arquivo em
   assets/fonts/; troque o .otf para redesenhar). Sem glifos japoneses, entao
   o fallback DotGothic16 garante um 茜 digno. */
@font-face {
  font-family: 'Shining Force';
  src: url("fonts/shining-force-large.otf") format("opentype");
  font-display: swap;
}

:root {
  /* Metals (engraved pewter) */
  --metal-light:  #d4cbe4;
  --metal:        #9a8db8;
  --metal-mid:    #6e6288;
  --metal-dark:   #4a4160;
  --metal-shadow: #2a2438;
  /* Depths */
  --ink:       #0a0812;
  --void:      #000000;
  --plum:      #3a2a4e;
  --plum-deep: #180f26;
  /* Text */
  --text:      #f0ecfa;
  --text-dim:  #a99cc0;
  /* Blood gem */
  --red:      #c8203c;
  --red-deep: #701020;
  --red-hi:   #ff7a8a;
  /* Muted success sage */
  --sage: #a8d8b8;
  /* Brand warmth — the ONE warm token. Only art, logo, cursors and the
     reveal glow may use it; everything else stays cold pewter. */
  --ember: #F2D59A;

  /* Panel depths + accents with no metal equivalent (first-class tokens) */
  --panel-hi:   #171021;
  --panel-lo:   #0c0812;
  --panel-edge: var(--metal-shadow);
  --emerald-deep: #4a7a5c;
  --sapphire:   #7a8fd4;
  --plum-mid:   #4a3f5e;

  /* 8px spacing grid (Achado 02) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-9: 72px;

  /* DotGothic16 antes de Press Start no fallback: Jacquard não tem glifos
     japoneses, então o 茜 cai por glifo num fallback digno, não no monospace */
  --font-display: 'Jacquard 24', 'DotGothic16', 'Press Start 2P', monospace;
  --font-title:   'Jacquard 24', 'DotGothic16', 'Press Start 2P', monospace;
  /* titulos "title screen SNES": HUB e etapas das quests (DotGothic16 cobre o 茜) */
  --font-heading: 'Shining Force', 'DotGothic16', 'Press Start 2P', monospace;
  --font-ui:      'DotGothic16', 'VT323', monospace;
  --font-pixel:   'Press Start 2P', monospace;

  /* 4×4 checker dither, the PC-98 grain */
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23ffffff' opacity='0.05'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff' opacity='0.035'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23000000' opacity='0.07'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23000000' opacity='0.05'/%3E%3C/svg%3E");

  /* dithered face gradients for buttons (Bayer, dark top to light bottom) */
  --face-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='32' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='1' fill='%23241d34'/%3E%3Crect x='0' y='1' width='4' height='1' fill='%23241d34'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%23241d34'/%3E%3Crect x='0' y='3' width='4' height='1' fill='%23241d34'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23241d34'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%23241d34'/%3E%3Crect x='0' y='6' width='2' height='1' fill='%23241d34'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='7' width='4' height='1' fill='%23241d34'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23241d34'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='11' width='3' height='1' fill='%23241d34'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='14' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='15' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='15' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='15' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='15' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='16' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='16' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='16' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='16' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='17' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='17' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='17' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='18' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='18' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='18' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='18' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='19' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='19' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='19' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='19' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='20' width='3' height='1' fill='%23443a5c'/%3E%3Crect x='3' y='20' width='1' height='1' fill='%23241d34'/%3E%3Crect x='0' y='21' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='21' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='21' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='21' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='22' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='1' y='22' width='1' height='1' fill='%23241d34'/%3E%3Crect x='2' y='22' width='2' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='23' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='23' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='23' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='24' width='4' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='25' width='2' height='1' fill='%23443a5c'/%3E%3Crect x='2' y='25' width='1' height='1' fill='%23241d34'/%3E%3Crect x='3' y='25' width='1' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='26' width='4' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='27' width='1' height='1' fill='%23241d34'/%3E%3Crect x='1' y='27' width='3' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='28' width='4' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='29' width='4' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='30' width='4' height='1' fill='%23443a5c'/%3E%3Crect x='0' y='31' width='4' height='1' fill='%23443a5c'/%3E%3C/svg%3E");
  --face-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='32' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='1' fill='%23140e22'/%3E%3Crect x='0' y='1' width='4' height='1' fill='%23140e22'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%23140e22'/%3E%3Crect x='0' y='3' width='4' height='1' fill='%23140e22'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23140e22'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%23140e22'/%3E%3Crect x='0' y='6' width='2' height='1' fill='%23140e22'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='7' width='4' height='1' fill='%23140e22'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23140e22'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='11' width='3' height='1' fill='%23140e22'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='14' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='15' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='15' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='15' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='15' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='16' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='16' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='16' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='16' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='17' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='17' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='17' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='18' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='18' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='18' width='1' height='1' fill='%232e2344'/%3E%3Crect x='3' y='18' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='19' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='19' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='19' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='19' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='20' width='3' height='1' fill='%232e2344'/%3E%3Crect x='3' y='20' width='1' height='1' fill='%23140e22'/%3E%3Crect x='0' y='21' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='21' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='21' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='21' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='22' width='1' height='1' fill='%232e2344'/%3E%3Crect x='1' y='22' width='1' height='1' fill='%23140e22'/%3E%3Crect x='2' y='22' width='2' height='1' fill='%232e2344'/%3E%3Crect x='0' y='23' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='23' width='1' height='1' fill='%232e2344'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='23' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='24' width='4' height='1' fill='%232e2344'/%3E%3Crect x='0' y='25' width='2' height='1' fill='%232e2344'/%3E%3Crect x='2' y='25' width='1' height='1' fill='%23140e22'/%3E%3Crect x='3' y='25' width='1' height='1' fill='%232e2344'/%3E%3Crect x='0' y='26' width='4' height='1' fill='%232e2344'/%3E%3Crect x='0' y='27' width='1' height='1' fill='%23140e22'/%3E%3Crect x='1' y='27' width='3' height='1' fill='%232e2344'/%3E%3Crect x='0' y='28' width='4' height='1' fill='%232e2344'/%3E%3Crect x='0' y='29' width='4' height='1' fill='%232e2344'/%3E%3Crect x='0' y='30' width='4' height='1' fill='%232e2344'/%3E%3Crect x='0' y='31' width='4' height='1' fill='%232e2344'/%3E%3C/svg%3E");
  --face-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='32' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='1' fill='%23701020'/%3E%3Crect x='0' y='1' width='4' height='1' fill='%23701020'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%23701020'/%3E%3Crect x='0' y='3' width='4' height='1' fill='%23701020'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23701020'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%23701020'/%3E%3Crect x='0' y='6' width='2' height='1' fill='%23701020'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='7' width='4' height='1' fill='%23701020'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23701020'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='11' width='3' height='1' fill='%23701020'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='14' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='15' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='15' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='15' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='15' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='16' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='16' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='16' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='16' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='17' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='17' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='17' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='18' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='18' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='18' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='18' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='19' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='19' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='19' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='19' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='20' width='3' height='1' fill='%23c8203c'/%3E%3Crect x='3' y='20' width='1' height='1' fill='%23701020'/%3E%3Crect x='0' y='21' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='21' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='21' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='21' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='22' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='1' y='22' width='1' height='1' fill='%23701020'/%3E%3Crect x='2' y='22' width='2' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='23' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='23' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='23' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='24' width='4' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='25' width='2' height='1' fill='%23c8203c'/%3E%3Crect x='2' y='25' width='1' height='1' fill='%23701020'/%3E%3Crect x='3' y='25' width='1' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='26' width='4' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='27' width='1' height='1' fill='%23701020'/%3E%3Crect x='1' y='27' width='3' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='28' width='4' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='29' width='4' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='30' width='4' height='1' fill='%23c8203c'/%3E%3Crect x='0' y='31' width='4' height='1' fill='%23c8203c'/%3E%3C/svg%3E");
  --face-bgm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='32' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='4' height='1' fill='%232a2438'/%3E%3Crect x='0' y='1' width='4' height='1' fill='%232a2438'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%232a2438'/%3E%3Crect x='0' y='3' width='4' height='1' fill='%232a2438'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%232a2438'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%232a2438'/%3E%3Crect x='0' y='6' width='2' height='1' fill='%232a2438'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='7' width='4' height='1' fill='%232a2438'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%232a2438'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='11' width='3' height='1' fill='%232a2438'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='13' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='13' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='14' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='14' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='15' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='15' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='15' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='15' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='16' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='16' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='16' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='16' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='17' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='17' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='17' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='18' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='18' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='18' width='1' height='1' fill='%236e6288'/%3E%3Crect x='3' y='18' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='19' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='19' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='19' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='19' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='20' width='3' height='1' fill='%236e6288'/%3E%3Crect x='3' y='20' width='1' height='1' fill='%232a2438'/%3E%3Crect x='0' y='21' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='21' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='21' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='21' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='22' width='1' height='1' fill='%236e6288'/%3E%3Crect x='1' y='22' width='1' height='1' fill='%232a2438'/%3E%3Crect x='2' y='22' width='2' height='1' fill='%236e6288'/%3E%3Crect x='0' y='23' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='23' width='1' height='1' fill='%236e6288'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='23' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='24' width='4' height='1' fill='%236e6288'/%3E%3Crect x='0' y='25' width='2' height='1' fill='%236e6288'/%3E%3Crect x='2' y='25' width='1' height='1' fill='%232a2438'/%3E%3Crect x='3' y='25' width='1' height='1' fill='%236e6288'/%3E%3Crect x='0' y='26' width='4' height='1' fill='%236e6288'/%3E%3Crect x='0' y='27' width='1' height='1' fill='%232a2438'/%3E%3Crect x='1' y='27' width='3' height='1' fill='%236e6288'/%3E%3Crect x='0' y='28' width='4' height='1' fill='%236e6288'/%3E%3Crect x='0' y='29' width='4' height='1' fill='%236e6288'/%3E%3Crect x='0' y='30' width='4' height='1' fill='%236e6288'/%3E%3Crect x='0' y='31' width='4' height='1' fill='%236e6288'/%3E%3C/svg%3E");
  /* stone speckle for the page floor */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect x='4' y='6' width='2' height='2' fill='%239a8db8' opacity='.10'/%3E%3Crect x='18' y='2' width='2' height='2' fill='%236e6288' opacity='.10'/%3E%3Crect x='11' y='16' width='2' height='2' fill='%23000' opacity='.5'/%3E%3Crect x='24' y='12' width='2' height='2' fill='%239a8db8' opacity='.07'/%3E%3Crect x='7' y='24' width='2' height='2' fill='%236e6288' opacity='.10'/%3E%3Crect x='20' y='22' width='2' height='2' fill='%23000' opacity='.4'/%3E%3C/svg%3E");

  /* 9-slice beveled rounded frame with corner nubs (Rusty style) */
  --bevel: url("brick-frame.png");

  /* mini faceted ruby (matches the great seal) */
  --icon-orb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 1 H8 V2 H10 V4 H11 V8 H10 V10 H8 V11 H4 V10 H2 V8 H1 V4 H2 V2 H4 Z' fill='%233a060c'/%3E%3Cpath d='M4 2 H8 V3 H9 V4 H10 V8 H9 V9 H8 V10 H4 V9 H3 V8 H2 V4 H3 V3 H4 Z' fill='%23c81e34'/%3E%3Crect x='4' y='3' width='2' height='2' fill='%23ff8ba0'/%3E%3Crect x='3' y='5' width='2' height='2' fill='%23ff8ba0'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%238c1020'/%3E%3C/svg%3E");

  /* small stepped pixel diamond — real file in assets/icons/, swap it to replace */
  --icon-diamond: url("icons/diamond.png");

  /* ============ PIXEL ICON SET ============
     Cada icone e um PNG real em assets/icons/ - para trocar um icone,
     basta substituir o arquivo de mesmo nome (fundo transparente). */
  --px-lock: url("icons/lock.png");
  --px-mail: url("icons/mail.png");
  --px-dl: url("icons/download.png");
  --px-fimg: url("icons/file-image.png");
  --px-fvid: url("icons/file-video.png");
  --px-fzip: url("icons/file-zip.png");
  --px-fpsd: url("icons/file-psd.png");
  --px-fgen: url("icons/file-generic.png");
  --px-check: url("icons/check.png");
  --px-brush: url("icons/brush.png");
  --px-heart: url("icons/heart.png");
  --px-shield: url("icons/shield.png");
  --px-x: url("icons/social-x.png");
  --px-ig: url("icons/social-instagram.png");
  --px-pixiv: url("icons/social-pixiv.png");
  --px-bsky: url("icons/social-bluesky.png");
  --px-kofi: url("icons/social-kofi.png");

  /* ============ ENGRAVED PILLAR SET (elaborate) ============
     Shaft: recessed segmented column, scaled serpent coiling
     around a clawed ruby medallion, rose carvings, bolted
     seams. Caps: stepped capital and plinth with volutes.    */
  --pillar-shaft: url("pillar-shaft.png");
  --pillar-captop: url("pillar-captop.png");
  --pillar-capbase: url("pillar-capbase.png");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  background-image: var(--dither), var(--speckle);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.55;
  /* FF-style white glove, finger pointing at the hotspot */
  cursor: url("cursor-hand.png") 46 2, auto;
}

a, button, .clickable, input[type="submit"] {
  /* gold glove for anything clickable */
  cursor: url("cursor-hand-gold.png") 46 2, pointer !important;
}

::selection { background: var(--plum); color: var(--text); }

img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* pixel text outline, the PC-98 white-on-black lettering */
.px-outline, .display-xl, .display-md, .title-serif, .stage-title, .btn {
  text-shadow:
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 8vw, 76px);
  letter-spacing: 1px;
  color: var(--text);
  text-shadow:
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000,
    7px 7px 0 rgba(0,0,0,.55);
}

.display-md {
  /* titulos do HUB em Shining Force (title screen SNES) */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 40px);
  color: var(--text);
}

.title-serif {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--metal-light);
}

.motto {
  font-family: var(--font-ui);
  letter-spacing: 3px;
  color: var(--text-dim);
  font-size: 17px;
  text-shadow: 1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000;
}

.label-pixel {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.text-gold     { color: var(--metal-light); }
.text-emerald  { color: var(--sage); }
.text-ruby     { color: var(--red-hi); }
.text-lavender { color: var(--text-dim); }
.text-dim      { color: var(--text-dim); }

/* ------------------------------------------------------------
   BEVELED PANEL — rounded engraved frame with corner nubs,
   flanked inside by carved vine pillars.
   ------------------------------------------------------------ */

.panel {
  position: relative;
  border: 15px solid transparent;
  border-image: var(--bevel) 33.33% / 15px round;
  image-rendering: pixelated;
  background:
    var(--dither),
    var(--speckle),
    linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
  background-clip: padding-box;
  box-shadow: 0 10px 0 rgba(0,0,0,.45);
  /* padding simétrico no grid de 8px; 72px nas laterais cobre os pilares */
  padding: var(--sp-3) var(--sp-9);
}

.panel::before, .panel::after {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px;
  width: 44px;
  background-image:
    var(--pillar-captop),
    var(--pillar-capbase),
    var(--dither),
    var(--pillar-shaft);
  background-size: 44px 48px, 44px 48px, 4px 4px, 40px 168px;
  background-repeat: no-repeat, no-repeat, repeat, repeat-y;
  background-position: center top, center bottom, 0 0, center 48px;
  /* os PNGs dos pilares sao 2x (80x336 / 88x96) exibidos no tamanho de display,
     entao 'auto' faz o downscale suave e fica nitido no retina; a camada de
     dither e exibida 1:1 (4px), sem escala, entao nao e afetada */
  image-rendering: auto;
  pointer-events: none;
  z-index: 1;
}
.panel::before { left: 3px; }
.panel::after  { right: 3px; transform: scaleX(-1); }

.corner-b { display: none; }

/* pewter variant, no pillars */
.panel-pewter {
  position: relative;
  border: 12px solid transparent;
  border-image: var(--bevel) 33.33% / 12px round;
  image-rendering: pixelated;
  background:
    var(--dither),
    linear-gradient(180deg, #120c1c 0%, #0a0712 100%);
  background-clip: padding-box;
  padding: var(--sp-2);
}

/* ------------------------------------------------------------
   DIVIDER — engraved groove meeting a pixel diamond
   ------------------------------------------------------------ */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}
.divider .line {
  flex: 1; height: 4px;
  background: linear-gradient(180deg, #000 0 2px, var(--metal-dark) 2px 100%);
  box-shadow: 0 2px 0 rgba(185,173,220,.28);
}
.divider .line.rev { transform: scaleX(-1); }
.divider .gem, .divider .gem.ruby {
  width: 18px; height: 18px;
  background-image: url("icons/diamond.png");
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: auto;
  filter: drop-shadow(0 0 6px rgba(200,32,60,.5));
}

/* ------------------------------------------------------------
   DIALOG BOX — rounded bevel, black glass, white bitmap text
   ------------------------------------------------------------ */
.dialog {
  position: relative;
  border: 13px solid transparent;
  border-image: var(--bevel) 33.33% / 13px round;
  border-radius: 8px;
  image-rendering: pixelated;
  background: #030208;
  background-clip: border-box;
  padding: var(--sp-2);
  font-family: var(--font-ui);
  font-size: 21px;
  color: var(--text);
  text-shadow: 1.5px 1.5px 0 #000;
}
.dialog .speaker {
  position: absolute;
  top: -24px; left: 10px;
  background: linear-gradient(180deg, var(--metal) 0%, var(--metal-mid) 100%);
  color: var(--text);
  border: 2px solid #000;
  box-shadow: inset 0 2px 0 var(--metal-light), inset 0 -2px 0 var(--metal-shadow), 3px 3px 0 rgba(0,0,0,.6);
  padding: 3px 12px 1px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}
/* seta de "tem mais dialogo": PNG real em assets/icons/arrow-down.png,
   troque o arquivo para redesenhar (fundo transparente) */
.dialog .adv {
  position: absolute;
  right: 14px; bottom: 10px;
  width: 26px; height: 17px;
  font-size: 0;
  background: url("icons/arrow-down.png") center / contain no-repeat;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.8)) drop-shadow(0 0 7px rgba(255,255,255,.95));
  animation: advBob 0.85s infinite ease-in-out;
}
@keyframes bob { 0%,49% { transform: translateY(0); } 50%,100% { transform: translateY(3px); } }
/* prominent "there is more, tap to continue" arrow, shared by all dialog boxes */
@keyframes advBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ------------------------------------------------------------
   BUTTONS — engraved pewter plaques with a red orb stud
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  /* botões falam a voz do diálogo (DotGothic16), não a dos labels (Achado 01).
     Rótulos em Title Case ("Break the Seal"), não caixa alta: a DotGothic16
     desenha o "T" maiúsculo 1px mais baixo que os outros caps, então evitamos
     "T" maiúsculo isolado escrevendo em Title Case no HTML. */
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 1px;
  text-transform: none;
  text-decoration: none;
  color: #ffffff;
  border: 11px solid transparent;
  border-image: var(--bevel) 33.33% / 11px round;
  border-radius: 8px;
  image-rendering: pixelated;
  background:
    var(--face-btn) 0 0 / 6px 100% repeat-x,
    var(--metal-dark);
  background-clip: border-box;
  padding: 5px 18px 7px;
  box-shadow: 0 5px 0 rgba(0,0,0,.55);
  transition: filter .12s ease, transform .08s ease, box-shadow .08s ease;
}
.btn::before {
  content: '';
  width: 25px; height: 25px;   /* gems shown at their native resolution */
  flex-shrink: 0;
  /* Murasaki's red gem, static until the cursor lands on the button */
  background-image: url("gem-red.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.btn:hover { filter: brightness(1.18); }
/* hover swaps the still gem for its animated version */
.btn:hover::before {
  background-image: url("gem-red.gif");
  filter: drop-shadow(0 0 5px rgba(255,122,138,.9));
}
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.btn-ghost {
  background:
    var(--face-ghost) 0 0 / 6px 100% repeat-x,
    #1c142c;
  background-clip: border-box;
  color: var(--text-dim);
}
.btn-ghost:hover { color: var(--text); }

/* ------------------------------------------------------------
   ARTWORK FRAME — engraved display case
   ------------------------------------------------------------ */
.art-frame {
  position: relative;
  border: 14px solid transparent;
  border-image: var(--bevel) 33.33% / 14px round;
  image-rendering: pixelated;
  background: #050309;
  background-clip: padding-box;
  padding: 8px;
}
.art-frame .mat {
  border: 2px solid var(--metal-dark);
  outline: 2px solid #000;
  background: #000;
  padding: 6px;
}
.art-frame img {
  display: block;
  width: 100%;
  height: auto;
  /* the frame is pixel art, but the illustration inside is not: stop it from
     inheriting nearest-neighbor scaling, which serrates smooth artwork */
  image-rendering: auto;
}
/* na pagina de recompensa a moldura ocupa a largura toda e fica centralizada:
   o iOS as vezes a encolhia para o tamanho da arte e deixava um vao ao lado */
.reveal-wrap .art-frame { width: 100%; margin-left: auto; margin-right: auto; }
.art-frame .plate {
  position: absolute;
  left: 50%; bottom: -20px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--metal) 0%, var(--metal-mid) 100%);
  border: 2px solid #000;
  box-shadow: inset 0 2px 0 var(--metal-light), inset 0 -2px 0 var(--metal-shadow), 3px 3px 0 rgba(0,0,0,.6);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 5px 14px 4px;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
  z-index: 2;
}

/* ------------------------------------------------------------
   QUEST STAGE MARKERS
   ------------------------------------------------------------ */
.stage-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.stage-num {
  font-family: var(--font-pixel);
  font-size: 26px;
  line-height: 1.2;
  color: var(--metal-light);
  text-shadow:
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000, 4px 4px 0 rgba(0,0,0,.5);
}
.stage-title {
  /* nome poético da etapa em Shining Force (title screen SNES) */
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1.05;
  color: var(--text);
}
.stage-sub {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   INFO TILES (status screen)
   ------------------------------------------------------------ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  position: relative;
  z-index: 2;
}
.info-tile {
  background: #04030a;
  border: 2px solid var(--metal-dark);
  outline: 2px solid #000;
  box-shadow: inset 0 2px 0 rgba(185,173,220,.14), inset 0 0 14px rgba(0,0,0,.9);
  padding: var(--sp-1) var(--sp-2);
}
.info-tile .k {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--metal-light);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}
.info-tile .v {
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--text);
  text-shadow: 1.5px 1.5px 0 #000;
}

/* ------------------------------------------------------------
   LOOT ROWS — selection-bar highlight like a VN choice list
   ------------------------------------------------------------ */
.loot-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: rgba(0,0,0,.55);
  border: 2px solid var(--metal-shadow);
  outline: 1px solid #000;
  margin-bottom: var(--sp-1);
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.loot-row:hover {
  background: var(--plum);
  border-color: var(--metal);
}
.loot-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--metal-dark);
  outline: 2px solid #000;
  background:
    var(--dither),
    linear-gradient(180deg, #171021 0%, #05030a 100%);
  box-shadow: inset 0 2px 0 rgba(185,173,220,.16);
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--metal-light);
  text-shadow: 1px 1px 0 #000;
}
/* pixel file-type icon inside the box (replaces the old extension text) */
.loot-icon::after {
  content: '';
  width: 32px; height: 32px;
  background: url("icons/file-generic.png") center / contain no-repeat;
  image-rendering: pixelated;
}
.loot-icon.i-img::after { background-image: url("icons/file-image.png"); }
.loot-icon.i-vid::after { background-image: url("icons/file-video.png"); }
.loot-icon.i-zip::after { background-image: url("icons/file-zip.png"); }
.loot-icon.i-psd::after { background-image: url("icons/file-psd.png"); }
/* min-width:0 deixa o nome encolher no flex; o break-word quebra nomes de
   arquivo longos (sem espacos) para nao vazarem para fora do quadro */
.loot-name { flex: 1; min-width: 0; font-size: 20px; color: var(--text); text-shadow: 1.5px 1.5px 0 #000; overflow-wrap: anywhere; word-break: break-word; }
.loot-name small { display: block; font-size: 16px; color: var(--text-dim); }
.loot-size { color: var(--text-dim); font-size: 16px; }
/* download arrow at the right edge; nudges on hover like a VN cursor */
.loot-dl {
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: url("icons/download.png") center / contain no-repeat;
  image-rendering: pixelated;
}
.loot-row:hover .loot-dl { animation: lootNudge .5s infinite steps(2); }
@keyframes lootNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ------------------------------------------------------------
   PIXEL ICON HELPERS + scannable license list
   ------------------------------------------------------------ */
.px-ico {
  display: inline-block;
  width: 14px; height: 14px;
  flex-shrink: 0;
  vertical-align: -2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}
.px-ico.i-lock   { background-image: url("icons/lock.png"); }
.px-ico.i-mail   { background-image: url("icons/mail.png"); }
.px-ico.i-check  { background-image: url("icons/check.png"); }
.px-ico.i-brush  { background-image: url("icons/brush.png"); }
.px-ico.i-heart  { background-image: url("icons/heart.png"); }
.px-ico.i-shield { background-image: url("icons/shield.png"); }
.px-ico.i-gem    { background-image: url("icons/diamond.png"); }
.px-ico.i-x      { background-image: url("icons/social-x.png"); }
.px-ico.i-ig     { background-image: url("icons/social-instagram.png"); }
.px-ico.i-pixiv  { background-image: url("icons/social-pixiv.png"); }
.px-ico.i-bsky   { background-image: url("icons/social-bluesky.png"); }
.px-ico.i-kofi   { background-image: url("icons/social-kofi.png"); }

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: 19px; color: var(--text-dim);
  padding: 4px 0;
}
.rule-list .px-ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   HUD EXP BAR
   ------------------------------------------------------------ */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: linear-gradient(180deg, #0c0916 0%, #060410 100%);
  border-bottom: 2px solid var(--metal-dark);
  box-shadow: 0 2px 0 #000;
}
.hud .hud-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--metal-light);
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
}
.hud .exp-track {
  flex: 1;
  height: 10px;
  background: #04030a;
  border: 2px solid var(--metal-dark);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.9);
}
.hud .exp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 60%, var(--red-hi));
  box-shadow: 0 0 8px rgba(200,32,60,.8);
  transition: width .18s ease-out;
}

/* ------------------------------------------------------------
   AUDIO TOGGLE
   ------------------------------------------------------------ */
:root {
  /* pixel music note, playing (emerald) */
  --icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='2' width='9' height='3' fill='%23a8d8b8'/%3E%3Crect x='5' y='5' width='9' height='1' fill='%235c8a6e'/%3E%3Crect x='5' y='4' width='2' height='6' fill='%23a8d8b8'/%3E%3Crect x='12' y='4' width='2' height='4' fill='%23a8d8b8'/%3E%3Crect x='2' y='10' width='5' height='4' fill='%23a8d8b8'/%3E%3Crect x='2' y='13' width='5' height='1' fill='%235c8a6e'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%23cdead6'/%3E%3Crect x='9' y='8' width='5' height='4' fill='%23a8d8b8'/%3E%3Crect x='9' y='11' width='5' height='1' fill='%235c8a6e'/%3E%3Crect x='9' y='8' width='2' height='1' fill='%23cdead6'/%3E%3C/svg%3E");
  /* pixel music note, muted (grey + red slash) */
  --icon-note-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='5' y='2' width='9' height='3' fill='%23b4a8cc'/%3E%3Crect x='5' y='5' width='9' height='1' fill='%23574c6e'/%3E%3Crect x='5' y='4' width='2' height='6' fill='%23b4a8cc'/%3E%3Crect x='12' y='4' width='2' height='4' fill='%23b4a8cc'/%3E%3Crect x='2' y='10' width='5' height='4' fill='%23b4a8cc'/%3E%3Crect x='2' y='13' width='5' height='1' fill='%23574c6e'/%3E%3Crect x='9' y='8' width='5' height='4' fill='%23b4a8cc'/%3E%3Crect x='9' y='11' width='5' height='1' fill='%23574c6e'/%3E%3Crect x='0' y='1' width='3' height='3' fill='%23000000'/%3E%3Crect x='2' y='3' width='3' height='3' fill='%23000000'/%3E%3Crect x='4' y='5' width='3' height='3' fill='%23000000'/%3E%3Crect x='6' y='7' width='3' height='3' fill='%23000000'/%3E%3Crect x='8' y='9' width='3' height='3' fill='%23000000'/%3E%3Crect x='10' y='11' width='3' height='3' fill='%23000000'/%3E%3Crect x='12' y='13' width='3' height='2' fill='%23000000'/%3E%3Crect x='1' y='2' width='2' height='2' fill='%23ff5a6e'/%3E%3Crect x='3' y='4' width='2' height='2' fill='%23ff5a6e'/%3E%3Crect x='5' y='6' width='2' height='2' fill='%23ff5a6e'/%3E%3Crect x='7' y='8' width='2' height='2' fill='%23ff5a6e'/%3E%3Crect x='9' y='10' width='2' height='2' fill='%23ff5a6e'/%3E%3Crect x='11' y='12' width='2' height='2' fill='%23ff5a6e'/%3E%3C/svg%3E");
}
.bgm-btn {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 600;
  width: 54px; height: 54px;
  font-size: 0;
  border: 10px solid transparent;
  border-image: var(--bevel) 33.33% / 10px round;
  border-radius: 8px;
  image-rendering: pixelated;
  background:
    var(--icon-note) center / 56% no-repeat,
    var(--face-bgm) 0 0 / 6px 100% repeat-x,
    var(--plum-mid);
  background-clip: border-box;
  box-shadow: 0 4px 0 rgba(0,0,0,.55);
}
.bgm-btn:hover { filter: brightness(1.2); }
.bgm-btn.off {
  background:
    var(--icon-note-off) center / 56% no-repeat,
    var(--face-bgm) 0 0 / 6px 100% repeat-x,
    var(--plum-mid);
  background-clip: border-box;
}

/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */
.reveal-up {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.19,1,.22,1);
}
.reveal-up.shown { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------
   MODAL
   ------------------------------------------------------------ */
.inspect-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 900;
  background: rgba(2, 1, 8, .93);
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  overflow: hidden;
}
.inspect-modal img {
  transform-origin: center center;
  will-change: transform;
}
.inspect-modal.open { display: flex; }
.inspect-modal figure {
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.inspect-modal img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  /* carved-light: uma das duas únicas receitas de borda (Achado 08) */
  border: 2px solid var(--metal-dark);
  outline: 2px solid #000;
  border-radius: 0;
  background: #000;
}

/* ------------------------------------------------------------
   UTILS
   ------------------------------------------------------------ */
.center { text-align: center; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-4); } .mt-4 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-4); } .mb-4 { margin-bottom: var(--sp-6); }

.shake { animation: shake .45s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.blink { animation: blink 1s infinite steps(2); }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ------------------------------------------------------------
   AKANE PIXEL LOGO
   ------------------------------------------------------------ */
.akane-logo svg,
.akane-logo-img {
  display: block;
  width: 100%;
  height: auto;
  /* the vertical logo is low-res pixel art shown near 1:1, so nearest-neighbor
     keeps it crisp; 'auto' interpolation is what blurred it */
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.5));
}
/* the horizontal logo is hi-res and always downscaled, so smooth scaling
   keeps it crisp (pixelated would serrate it) */
.akane-logo-img.akane-logo-h {
  image-rendering: auto;
}

/* ------------------------------------------------------------
   RUBY SEAL + BREAK FX
   ------------------------------------------------------------ */
.ruby-svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* image-based seal (ruby-seal.png) with crack + shine overlays */
.ruby-seal { position: relative; }
.ruby-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;   /* the seal art is smooth, not pixel art */
}
.ruby-crack-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ruby-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ruby-shine i {
  position: absolute;
  top: -25%;
  height: 150%;
  width: 16%;
  left: -30%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,.22) 65%, transparent 100%);
  transform: rotate(18deg);
  animation: rubySweep 3.8s linear infinite;
}
@keyframes rubySweep {
  0%   { left: -30%; }
  38%  { left: 118%; }
  100% { left: 118%; }
}

.rumble { animation: rumble .38s steps(2) infinite; }
@keyframes rumble {
  0%   { transform: translate(1px, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 1px); }
}

.seal-white {
  position: fixed; inset: 0;
  z-index: 960;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.seal-white.on { opacity: 1; }

/* arrival veil: white from the very first paint when coming
   through the gate, so the destination never flashes before
   fading in. Toggled by the html.akane-arriving class. */
.seal-white-static {
  position: fixed; inset: 0;
  z-index: 960;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
html.akane-arriving .seal-white-static { opacity: 1; }

.seal-burst {
  position: fixed;
  z-index: 955;
  width: 22px; height: 22px;
  background: #fff;
  /* redondo: o clarao cresce como um circulo, acompanhando a forma do selo */
  border-radius: 50%;
  pointer-events: none;
}

/* Luz que nasce ATRAS do selo e cresce em aceleracao ate o estouro.
   Fica atras da arte (z-index 0 contra z-index 1 do sprite), entao o selo
   aparece em silhueta contra o clarao, em vez de um halo chapado em volta. */
.seal-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  background: radial-gradient(circle at 50% 50%,
    #ffffff 0%,
    rgba(255,255,255,.92) 20%,
    rgba(255,228,236,.6) 38%,
    rgba(255,150,175,.28) 58%,
    rgba(255,120,150,0) 76%);
}
.ruby-seal .ruby-img { position: relative; z-index: 1; }

.light-beam {
  position: fixed;
  z-index: 945;
  width: 6px;
  height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 70%);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.gem-fall {
  position: fixed;
  top: -40px;
  z-index: 948;
  pointer-events: none;
}
.gem-fall svg {
  display: block;
  width: 100%; height: 100%;
  image-rendering: auto;
}

/* ------------------------------------------------------------
   FULLSCREEN ARTIFACT REVEAL
   ------------------------------------------------------------ */
.artifact-fs {
  position: fixed; inset: 0;
  z-index: 920;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 3vh 3vw;
  overflow: hidden;
  background:
    var(--dither),
    radial-gradient(ellipse 90% 60% at 50% 92%, #6e2a2e 0%, transparent 55%),
    radial-gradient(circle at 50% 42%, #2e2050 0%, #0c0816 66%);
}
.artifact-fs.on { display: flex; }
.artifact-fs .fs-beams {
  position: absolute;
  inset: -15%;
  /* soft radial base glow behind the artifact, breathing gently */
  background: radial-gradient(circle at 50% 46%,
    rgba(240,236,250,.09) 0%,
    rgba(240,236,250,.045) 32%,
    rgba(240,236,250,.02) 55%,
    transparent 80%);
  animation: fsGlow 7s ease-in-out infinite;
  pointer-events: none;
}
/* rotating shafts of light. Kept small enough (150vmax) to never exceed a
   GPU's max texture size, which is what clipped the old 300vmax layer and
   made the rotating "cut" edge. The radial mask fades the shafts to nothing
   before the layer's own edge is ever reached, so no square boundary or
   clip line can show; the light just dims toward the screen edges. Distinct
   transparent gaps keep it reading as rays, not a diffuse wash. */
.artifact-fs .fs-beams::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(240,236,250,.17) 9deg, transparent 20deg,
    transparent 60deg, rgba(240,236,250,.12) 69deg, transparent 80deg,
    transparent 120deg, rgba(240,236,250,.17) 129deg, transparent 140deg,
    transparent 180deg, rgba(240,236,250,.12) 189deg, transparent 200deg,
    transparent 240deg, rgba(240,236,250,.17) 249deg, transparent 260deg,
    transparent 300deg, rgba(240,236,250,.12) 309deg, transparent 320deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 8%, #000 32%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 8%, #000 32%, transparent 58%);
  animation: fsSpin 60s linear infinite;
}
@keyframes fsSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes fsGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); }
}
/* Moldura de tijolos (a mesma dos paineis) no quadro do reveal. O quadro
   INTEIRO (moldura + arte) da zoom junto no ken burns, como uma tela emoldurada
   sendo examinada de perto. image-rendering:pixelated deixa os tijolos nitidos
   ao ampliar; a arte tem image-rendering:auto (regra abaixo), entao nao
   serrilha. will-change:transform forca uma camada de composicao propria, o que
   tambem evita o antigo bug de a border-image sumir sob transform no Safari. */
.artifact-fs .art-cam {
  position: relative;
  z-index: 2;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 15px solid transparent;
  border-image: var(--bevel) 33.33% / 15px round;
  border-radius: 8px;
  image-rendering: pixelated;
  background: #000;
  transform-origin: center center;
  will-change: transform;
  box-shadow: 0 6px 0 rgba(0,0,0,.5);
}
.artifact-fs .art-cam img {
  display: block;
  max-width: 86vw;
  max-height: 78vh;
  object-fit: contain;
  image-rendering: auto;   /* smooth artwork, not pixel art (frame stays crisp) */
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
/* the caption fades in only after the zoom settles back */
.artifact-fs .fs-ui {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  text-align: center;
  padding: 26px 20px 22px;
  background: linear-gradient(180deg, transparent, rgba(12,9,28,.82) 42%, rgba(12,9,28,.96));
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.artifact-fs .fs-ui.shown { opacity: 1; }
.artifact-fs .fs-ui.shown > * { pointer-events: auto; }
/* proud Akane, featured at the reveal / when the seal is received */
.artifact-fs .fs-portrait {
  width: clamp(96px, 15vh, 150px);
  margin: 0 auto 12px;
  /* calor da marca (--ember #F2D59A = rgb(242,213,154)); glow de revelação */
  filter: drop-shadow(0 0 18px rgba(242,213,154,.75));
  animation: proudRise .7s ease-out both;
  /* pewter frame lives on the wrapper: bevel stays crisp, portrait stays smooth */
  box-sizing: border-box;
  border: 9px solid transparent;
  border-image: var(--bevel) 33.33% / 9px round;
  border-radius: 8px;
  background: #050309;
  background-clip: border-box;
  image-rendering: pixelated;
}
.artifact-fs .fs-portrait img {
  width: 100%; display: block; image-rendering: auto;
}
/* the bottom VN portrait glows when she turns proud */
.hp.proud, .vn-portrait.proud {
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(242,213,154,.85));
}
@keyframes proudRise {
  0%   { opacity: 0; transform: translateY(14px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.artifact-fs .fs-ui .label-pixel {
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 2px 2px 0 #000;
}

@media (max-width: 720px) {
  /* sem pilares no mobile, então padding simétrico no grid de 8px */
  .panel { padding: var(--sp-2) var(--sp-3); }
  .panel::before, .panel::after { display: none; }
  body { font-size: 18px; }
  .stage-num { font-size: 44px; }
  .stage-title { font-size: 26px; }
  .bgm-btn { width: 44px; height: 44px; right: 8px; bottom: 8px; font-size: 20px; }
  /* reveal: limita a arte para que, mesmo com o zoom (1.2x no mobile), a
     moldura de peltre continue dentro da tela durante toda a animacao */
  .artifact-fs .art-cam img { max-width: 74vw; max-height: 62vh; }
}