/* chainCRYPT v2 - Painted-Pixel Gothic global styles.
   Loaded alongside Tailwind CDN with the v2 token map in tailwind-config.js. */

html, body {
  margin: 0; padding: 0;
  background-color: #0a0a14;
  color: #e3e0f1;
  font-family: 'Courier Prime', monospace;
  min-height: 100vh;
}

::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: #0d0d18; border-left: 1px solid #524434; }
::-webkit-scrollbar-thumb   { background: #524434; }
::-webkit-scrollbar-thumb:hover { background: #a08e7a; }
::selection                 { background: #f0a020; color: #2a1800; }

/* === Decorative components === */

/* Gothic frame: 2px iron border with stud ornaments at corners */
.gothic-frame {
  border: 2px solid #524434;
  position: relative;
}
.gothic-frame::before, .gothic-frame::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background-color: #524434;
  border-radius: 50%;
}
.gothic-frame::before { top: -4px; left: -4px;  box-shadow: calc(100% + 4px) 0 0 #524434; }
.gothic-frame::after  { bottom: -4px; left: -4px; box-shadow: calc(100% + 4px) 0 0 #524434; }

/* Gothic border alt - same idea, different stud spacing */
.gothic-border {
  border: 2px solid #524434;
  position: relative;
}
.gothic-border::before, .gothic-border::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background-color: #524434;
  border-radius: 50%;
}
.gothic-border::before { top: -4px; left: -4px; }
.gothic-border::after  { bottom: -4px; right: -4px; }

/* Iron-studded ARPG panel (used in play.html) */
.iron-frame {
  border: 2px solid #524434;
  position: relative;
}
.iron-frame::before, .iron-frame::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: #a08e7a;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}
.iron-frame::before { top: 4px; left: 4px;  box-shadow: calc(100% - 14px) 0 #a08e7a; }
.iron-frame::after  { bottom: 4px; left: 4px; box-shadow: calc(100% - 14px) 0 #a08e7a; }

/* Wax seal motif - red dot stamped on the right edge of buttons */
.wax-seal {
  position: relative;
}
.wax-seal::after {
  content: '';
  position: absolute;
  right: -12px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background-color: #8b1b27;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5),
              inset 0 2px 4px rgba(255,255,255,0.18),
              inset 0 -2px 4px rgba(0,0,0,0.4);
  z-index: 10;
}

/* Illuminated drop cap (gold-leaf -> blood gradient) */
.drop-cap::first-letter {
  font-family: 'MedievalSharp', serif;
  font-size: 4em;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  color: #d72b14;
  background: linear-gradient(45deg, #241a00, #f0a020 60%, #8b1b27);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Rim light - a thin warm highlight along the top of a panel */
.rim-light {
  box-shadow: inset 0 1px 0 rgba(240, 160, 32, 0.22);
}

/* Rare/Unique glows for items */
.rare-glow {
  box-shadow: 0 0 24px rgba(139, 27, 39, 0.45);
}
.rarity-rare {
  box-shadow: 0 0 18px rgba(68, 136, 255, 0.4);
  border: 1px solid rgba(68, 136, 255, 0.7);
}
.rarity-epic {
  box-shadow: 0 0 22px rgba(150, 0, 255, 0.4);
  border: 1px solid rgba(150, 0, 255, 0.8);
}
.rarity-unique {
  box-shadow: 0 0 28px rgba(240, 160, 32, 0.55);
  border: 1px solid rgba(240, 160, 32, 0.85);
}

/* Tapestry / parchment background for content body */
.tapestry-bg {
  background-image:
    radial-gradient(circle at center, rgba(31,31,42,0.85) 0%, rgba(18,18,29,1) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path d="M50 0L100 50L50 100L0 50Z" fill="white"/></svg>');
}
.texture-parchment {
  background-image:
    url('data:image/svg+xml;utf8,<svg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.05%22/></svg>');
}

/* Blood vial - vertical fill in a vial shape */
.blood-vial {
  background: linear-gradient(to bottom,
    #12121d 0%,
    #12121d 28%,
    #bc1400 35%,
    #93000a 100%);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.85);
  border-bottom: 2px solid #f0a020;
}

/* Active mood pulses */
.mood-pulse-red {
  animation: pulse-red 2.4s infinite;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 10px rgba(147, 0, 10, 0.7); }
  50%      { box-shadow: 0 0 30px rgba(255, 180, 171, 0.9); }
}

.mood-pulse-gold {
  animation: pulse-gold 3s infinite;
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 12px rgba(240, 160, 32, 0.5); }
  50%      { box-shadow: 0 0 28px rgba(255, 193, 112, 0.9); }
}

/* Gothic trefoil corner ornament shape */
.gothic-trefoil {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Crispedges for pixel canvases */
.pixel-canvas, canvas.pixel-canvas, .pixelated, .pixel-art {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Painted-pixel hero scene fallback (used when CDN images don't load) */
.scene-crypt {
  background:
    radial-gradient(ellipse at 20% 100%, rgba(240, 160, 32, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(215, 43, 20, 0.14), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 70%),
    linear-gradient(180deg, #0a0a14 0%, #1b1b26 60%, #1f1f2a 100%);
}
.scene-forest {
  background:
    radial-gradient(ellipse at 30% 100%, rgba(79, 157, 79, 0.18), transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(174, 198, 255, 0.08), transparent 50%),
    linear-gradient(180deg, #0a0a14 0%, #14181b 60%, #1b1b26 100%);
}
.scene-ash {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(240, 160, 32, 0.25), transparent 55%),
    radial-gradient(ellipse at 30% 20%, rgba(215, 43, 20, 0.18), transparent 50%),
    linear-gradient(180deg, #0a0a14 0%, #1f1614 50%, #2a1c14 100%);
}
.scene-void {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(82, 60, 224, 0.20), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(240, 45, 120, 0.10), transparent 50%),
    linear-gradient(180deg, #0a0a14 0%, #14101f 60%, #1b162a 100%);
}
.scene-altar {
  background:
    radial-gradient(circle at 50% 60%, rgba(240, 160, 32, 0.30), transparent 35%),
    radial-gradient(circle at 30% 40%, rgba(240, 160, 32, 0.18), transparent 25%),
    radial-gradient(circle at 70% 40%, rgba(240, 160, 32, 0.18), transparent 25%),
    radial-gradient(circle at 50% 20%, rgba(240, 160, 32, 0.18), transparent 25%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.8), transparent 60%),
    linear-gradient(180deg, #0a0a14 0%, #1b1b26 100%);
}
.scene-amphitheater {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(240, 160, 32, 0.22), transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(215, 43, 20, 0.18), transparent 45%),
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.85), transparent 70%),
    linear-gradient(180deg, #0a0a14 0%, #14141f 100%);
}

/* Ember particles - purely cosmetic */
.embers {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.embers::before, .embers::after {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  background-image:
    radial-gradient(2px 2px at 20% 80%, rgba(240,160,32,0.8), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,193,112,0.6), transparent),
    radial-gradient(2px 2px at 80% 90%, rgba(240,160,32,0.7), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,193,112,0.5), transparent),
    radial-gradient(2px 2px at 50% 95%, rgba(240,160,32,0.8), transparent);
  animation: ember-drift 10s linear infinite;
  opacity: 0.7;
}
.embers::after { animation-delay: -5s; }
@keyframes ember-drift {
  0%   { transform: translateY(0) }
  100% { transform: translateY(-100%) }
}

/* Material Symbols small alignment fix in flex rows */
.material-symbols-outlined { vertical-align: middle; line-height: 1; }