:root{
  --bg: #0b0b0f;
  --ink: #dedee6;
  --muted: #9aa0a6;
  --accent: #9f88ff;
  --accent-2: #7bd389;
  --card: #14141a;
  --edge: #2a2a35;
  --red: #ff6b6b;
  --green: #7aff9a;
}

/* RESET + BASE */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family:"Spectral SC", serif;
  line-height:1.6;
  overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center;
}

#embers{
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  mix-blend-mode: screen; opacity: .18;
}

/* spotlight overlay follows cursor */
:root { --spot-x: 50vw; --spot-y: 35vh; }
.spotlight {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(220px 160px at var(--spot-x) var(--spot-y),
              rgba(255,210,140,.13), rgba(30,22,10,.03) 45%, rgba(0,0,0,.5) 85%);
  transition: background-position .05s linear;
}
@media (pointer:none), (hover:none){ .spotlight{ display:none; } } /* hide on touch */



/* MOVING SPOOKY BACKGROUND */
body::before, body::after{
  content:""; position:fixed; inset:-10vmax; z-index:-2; pointer-events:none;
}
body::before{
  background: radial-gradient(1200px 800px at 50% -10%, #151521 0%, var(--bg) 55%, #07070a 100%);
  animation:bg-drift 40s linear infinite;
  box-shadow: inset 0 0 180px 80px rgba(0,0,0,.55);
}
body::after{
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.03) 0 10deg, rgba(255,255,255,0) 10deg 20deg);
  filter: blur(24px) saturate(0.9) brightness(0.9);
  opacity:.18;
  animation:fog-roll 60s linear infinite;
}
@keyframes bg-drift{
  0%{ transform:translate3d(0,0,0) }
  50%{ transform:translate3d(0,-2%,0) }
  100%{ transform:translate3d(0,0,0) }
}
@keyframes fog-roll{
  0%{ transform:rotate(0deg) scale(1.05) }
  100%{ transform:rotate(360deg) scale(1.05) }
}

/* Film grain */
.noise{
  position:fixed; inset:0; z-index:-1;
  background-image:url('https://i.imgur.com/8bForq8.png');
  opacity:.05; mix-blend-mode:overlay; pointer-events:none;
}

/* TORCH FRAME */
.torch-frame{
  position:fixed; inset:0; pointer-events:none; z-index:10;
}
.sconce{
  position:absolute; width:52px; height:52px; border-radius:50%;
  background: radial-gradient(circle at 50% 35%, #ffd27a 0%, #ff8c42 45%, transparent 70%);
  filter: blur(8px) brightness(1.2);
  box-shadow: 0 0 30px 10px rgba(255,132,31,.25), 0 0 100px 40px rgba(255,200,80,.08);
  animation:flicker .12s infinite alternate;
  opacity:.85;
}
.sconce::after{
  content:""; position:absolute; left:50%; top:50%;
  width:32px; height:48px; transform:translate(-50%,-50%);
  background:url('assets/torch.gif') center/contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,170,70,.45));
  opacity:.9;
}
/* Corners */
.sconce.tl{ top:14px; left:14px; }
.sconce.tr{ top:14px; right:14px; }
.sconce.bl{ bottom:14px; left:14px; }
.sconce.br{ bottom:14px; right:14px; }
/* Mid-sides */
.sconce.ml, .sconce.mr { top:50%; transform:translateY(-50%); opacity:.7; }
.sconce.ml{ left:14px; }
.sconce.mr{ right:14px; }
/* Bottom center only (top-center removed) */
.sconce.bm{
  left:50%; bottom:14px; transform:translate(-50%, 0) scale(.6);
  opacity:.55;
}
.sconce.bm::after{ width:24px; height:36px; opacity:.5; }

@keyframes flicker{
  from { transform:translateY(-1px) scale(0.98); opacity:.85; }
  to   { transform:translateY(1px)  scale(1.02);  opacity:1; }
}

/* HEADER */
.site-header{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1rem;
  align-items:center; padding:1.25rem 1rem .75rem;
  text-align:center;
}
.title-wrap{ text-align:center; }
.site-title{ margin:0; font-size:clamp(1.8rem,4vw,3.2rem); letter-spacing:1px; }
.site-sub{ margin:.2rem 0 0; color:var(--muted); font-size:.95rem; }

/* Header torches near title */
.torch{
  width:48px; height:48px; border-radius:50%;
  filter: blur(8px) brightness(1.3);
  box-shadow: 0 0 30px 10px rgba(255,132,31,.25), 0 0 100px 40px rgba(255,200,80,.08);
  background: radial-gradient(circle at 50% 30%, #ffd27a 0%, #ff8c42 40%, transparent 70%);
  animation: flicker .12s infinite alternate;
}
.torch-left{ justify-self:start; }
.torch-right{ justify-self:end; }

/* NAV */
.nav{
  display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;
  padding:.5rem 1rem 1rem; border-bottom:1px solid var(--edge);
}
.nav a, .btn-sfx{
  color:var(--ink); text-decoration:none; background:transparent;
  border:1px solid var(--edge); padding:.45rem .7rem; border-radius:6px;
  font-family:"JetBrains Mono", monospace; font-size:.9rem; cursor:pointer;
  text-align:center;
}
.nav a:hover, .btn-sfx:hover{ border-color:var(--accent); }

/* LAYOUT */
.wrap{
  width:100%; max-width:980px;
  padding:1rem; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-align:center;
}

/* HERO & CARDS */
.hero{ width:100%; }
.gate{
  border:1px solid var(--edge); border-radius:12px; padding:.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.gate-inner{
  border:1px dashed var(--edge); border-radius:10px; padding:1rem;
  color:var(--muted);
}
.hero-gif {
  display:block;
  margin:.75rem auto 0;
  width:200px;              /* fixed width */
  max-width:60%;            /* shrink on smaller screens */
  height:auto;
  object-fit:contain;        /* keep full GIF visible */
  border-radius:8px;
  opacity:.8;                /* tone it down */
  filter: drop-shadow(0 0 8px rgba(255,170,70,.4));
}

.hero-gif {
  animation: hero-flicker 2.5s ease-in-out infinite alternate;
}
@keyframes hero-flicker {
  from { opacity:.65; transform:scale(.95); }
  to   { opacity:.85; transform:scale(1); }
}


.card{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--edge); border-radius:12px; padding:1rem; margin:0;
}

/* TYPE */
h2{ margin:0 0 .6rem; font-size:1.4rem; }
p, li, label, input, select, button, textarea{ font-family:"JetBrains Mono", monospace; }
.small{ font-size:.9rem; color:var(--muted); }
.tiny{ font-size:.8rem; }

/* QUESTS */
.quest-list{ padding-left:0; list-style:none; }
.quest-list li + li{ margin-top:.35rem; }
.tag{
  display:inline-block; font-size:.75rem; padding:.05rem .4rem; border-radius:4px;
  background:#232333; color:var(--accent-2); margin-right:.4rem; border:1px solid var(--edge);
}
.tag-main{ color:var(--accent); }
.readable summary{ cursor:pointer; color:var(--accent); }

/* PARTY */
.grid.party{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.8rem;
}
.pc{
  border:1px dashed var(--edge); border-radius:10px; padding:.8rem;
  background: rgba(0,0,0,.25);
}
.pc .meta{ color:var(--muted); font-size:.9rem; margin-top:-.2rem; }
.pc-portrait{ width:100%; border-radius:8px; margin-top:.4rem; }

/* DICE ROLLER */
.roller{
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap:.6rem; align-items:end; justify-items:center;
}
.roller label{ grid-column: span 2; font-size:.85rem; color:var(--muted); }
#diceType, #diceCount, #diceMod{ grid-column: span 2; width:100%; max-width:220px; }
input, select, textarea{
  background:#0e0e15; color:var(--ink); border:1px solid var(--edge);
  border-radius:6px; padding:.45rem .5rem;
}
.btn{
  grid-column: span 2; background:#1b1b28; border:1px solid var(--edge);
  color:var(--ink); padding:.5rem .7rem; border-radius:6px; cursor:pointer;
}
.btn:hover{ border-color:var(--accent); }
.btn-secondary{ background:#1b2220; }

.roll-result{
  margin-top:.8rem; border-top:1px dashed var(--edge); padding-top:.6rem; min-height:2.2rem;
}
.roll-line{ color:var(--muted); }
.mono{ font-family:"JetBrains Mono", monospace; }
.total{ font-size:1.2rem; margin-top:.35rem; }
.crit{ margin-top:.3rem; font-weight:bold; }
.crit.good{ color:var(--green); }
.crit.bad{ color:var(--red); }

/* DICE GIF — Firefox-safe sizing (no crop) */
.dice-gif{
  display:flex; justify-content:center; margin:.6rem auto 0; width:100%;
}
.dice-gif img{
  width: min(100%, 420px);
  max-height: 140px;
  object-fit: contain;
  border-radius: 8px;
}

/* HISTORY (always visible, better contrast) */
.history-card{
  margin-top:.8rem; text-align:left; max-height:180px; overflow:auto;
  background: rgba(0,0,0,.35); border:1px solid var(--edge);
}
#histList{ margin:.4rem 0 0; padding:0 1rem 0 1.2rem; }
#histList li{ margin:.18rem 0; color:#cfd3da; } /* brighter than muted */

/* ENCOUNTER / LOOT OUTPUT */
.enc-out{
  margin-top:.6rem; padding:.6rem; border:1px dashed var(--edge); border-radius:8px;
  min-height:2.2rem; background:rgba(0,0,0,.25);
}

/* NOTES */
.notes-wrap{ display:grid; gap:.6rem; }
textarea#notesArea{
  background:#0e0e15; color:var(--ink); border:1px solid var(--edge);
  border-radius:8px; padding:.7rem;
  min-height:11rem; resize:vertical; width:100%; max-width:920px;
}
.notes-controls{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* FOOTER */
.site-footer{ text-align:center; color:var(--muted); margin:1.5rem 0 2rem; }

/* SMALL SCREENS */
@media (max-width:520px){
  .roller{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .btn{ grid-column: span 4; }
}

/* REDUCE MOTION */
@media (prefers-reduced-motion: reduce){
  .torch, .sconce{ animation:none; }
  body::before, body::after{ animation:none; }
}