/* ══ campaign ══════════════════════════════════════════════════════ */
    .panel {
      background: linear-gradient(140deg, rgba(12,28,26,.92) 0%, rgba(10,18,16,.96) 100%);
      border: 1px solid rgba(52,211,153,.18);
      box-shadow: inset 0 1px 0 rgba(80,220,170,.04), 0 6px 25px rgba(0,0,0,.35);
    }

/* ══ characters ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(6,78,59,.10) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(4,50,40,.07) 0%, transparent 50%);
    }
    .scroll-panel {
      background: linear-gradient(135deg, rgba(14,28,22,.90) 0%, rgba(10,20,16,.95) 100%);
      border: 1px solid rgba(52,211,153,.14);
      box-shadow: inset 0 1px 0 rgba(52,211,153,.04), 0 4px 20px rgba(0,0,0,.35);
    }
    .modal-panel {
      background: linear-gradient(160deg, #0c1a14 0%, #08120f 100%);
      border: 1px solid rgba(52,211,153,.20);
      box-shadow: 0 24px 80px rgba(0,0,0,.80), inset 0 1px 0 rgba(52,211,153,.06);
    }
    .btn-emerald {
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
      border: 1px solid rgba(52,211,153,.25);
      box-shadow: 0 2px 8px rgba(5,150,105,.35);
      transition: all .18s;
    }
    .btn-emerald:hover {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      box-shadow: 0 4px 16px rgba(5,150,105,.45);
      transform: translateY(-1px);
    }
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.50); border-color: rgba(52,211,153,.30) !important; }
    .sec-divider::before,.sec-divider::after {
      background: linear-gradient(to right, transparent, rgba(52,211,153,.20), transparent);
    }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(5,150,105,.70) !important;
      outline: none;
      box-shadow: 0 0 0 2px rgba(5,150,105,.15);
    }
    .ability-card {
      background: rgba(5,150,105,.06);
      border: 1px solid rgba(52,211,153,.12);
      border-radius: .75rem;
    }
    .level-tab { background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.14); color: #6ee7b7; transition: all .15s; border-radius: .5rem; }
    .level-tab.active, .level-tab:hover { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.35); color: #34d399; }
    .spell-item { background: rgba(14,28,22,.80); border: 1px solid rgba(52,211,153,.10); border-radius: .75rem; transition: all .15s; }
    .spell-item:hover { background: rgba(14,28,22,.95); border-color: rgba(52,211,153,.22); }

/* ══ combat ══════════════════════════════════════════════════════ */
    .panel { background: linear-gradient(140deg, rgba(34,14,14,.9), rgba(18,10,10,.96)); border: 1px solid rgba(251,113,133,.2); }

/* ══ encounters ══════════════════════════════════════════════════════ */
.panel{background:linear-gradient(140deg,rgba(22,16,40,.9),rgba(12,10,24,.96));border:1px solid rgba(129,140,248,.25)}

/* ══ gallery ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(180,120,40,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(120,60,10,0.05) 0%, transparent 50%);
    }
    .scroll-panel {
      background: linear-gradient(135deg, rgba(22,16,8,.92) 0%, rgba(16,12,6,.96) 100%);
      border: 1px solid rgba(180,120,40,.18);
      box-shadow: inset 0 1px 0 rgba(255,200,80,.04), 0 4px 20px rgba(0,0,0,.35);
    }
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.55); border-color: rgba(180,120,40,.40) !important; }
    .sec-divider::before,.sec-divider::after {
      background: linear-gradient(to right, transparent, rgba(180,120,40,.25), transparent);
    }
    .album-thumb {
      aspect-ratio: 4/3;
      object-fit: cover;
      width: 100%;
    }
    .img-thumb {
      aspect-ratio: 1/1;
      object-fit: cover;
      width: 100%;
      cursor: pointer;
      transition: opacity .15s, transform .15s;
    }
    .img-thumb:hover { opacity: .85; transform: scale(1.02); }

    /* Lightbox */
    #lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:100;
      align-items:center; justify-content:center; }
    #lightbox.active { display:flex; }
    #lightboxImg { max-width:90vw; max-height:88vh; object-fit:contain; border-radius:.75rem;
      box-shadow:0 0 80px rgba(0,0,0,.8); }
    #lightboxCaption { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
      font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.2em; color:rgba(255,200,80,.55);
      text-align:center; white-space:nowrap; }
    #lightboxPrev, #lightboxNext {
      position:absolute; top:50%; transform:translateY(-50%);
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      color:#fff; border-radius:50%; width:2.75rem; height:2.75rem;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background .15s; font-size:1rem;
    }
    #lightboxPrev:hover, #lightboxNext:hover { background:rgba(255,255,255,.14); }
    #lightboxPrev { left:1.5rem; }
    #lightboxNext { right:1.5rem; }
    #lightboxClose {
      position:absolute; top:1rem; right:1rem;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      color:#fff; border-radius:50%; width:2.5rem; height:2.5rem;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; font-size:1.1rem; transition:background .15s;
    }
    #lightboxClose:hover { background:rgba(220,40,40,.25); }

/* ══ index ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top center, rgba(120,53,15,.12) 0%, transparent 55%),
        radial-gradient(ellipse at bottom, rgba(30,10,5,.40) 0%, transparent 60%);
    }
    .hero-bg {
      background: linear-gradient(180deg, rgba(28,18,8,.0) 0%, rgba(12,8,4,.95) 100%),
                  url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b45309' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .scroll-panel {
      background: linear-gradient(135deg, rgba(28,22,14,.90) 0%, rgba(22,18,12,.95) 100%);
      border: 1px solid rgba(180,130,30,.18);
      box-shadow: inset 0 1px 0 rgba(255,200,50,.04), 0 4px 20px rgba(0,0,0,.35);
      transition: all .22s;
    }
    .scroll-panel:hover {
      border-color: rgba(180,130,30,.38);
      box-shadow: 0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,200,50,.06);
      transform: translateY(-2px);
    }
    .nav-card-emerald:hover { border-color: rgba(52,211,153,.35) !important; }
    .nav-card-amber:hover   { border-color: rgba(251,191,36,.35) !important; }
    .nav-card-purple:hover  { border-color: rgba(192,132,252,.35) !important; }
    .nav-card-sky:hover     { border-color: rgba(56,189,248,.35) !important; }
    .title-glow { text-shadow: 0 0 60px rgba(251,191,36,.15), 0 0 120px rgba(180,83,9,.08); }
    .divider-ornament {
      display: flex; align-items: center; gap: 1rem;
    }
    .divider-ornament::before, .divider-ornament::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, transparent, rgba(180,130,30,.30), transparent);
    }

/* ══ login ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(180,130,30,.14) 0%, transparent 55%),
        radial-gradient(ellipse at bottom, rgba(6,40,30,.30) 0%, transparent 60%);
    }

/* ══ loot ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(120,53,15,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(90,40,12,0.06) 0%, transparent 50%);
    }
    /* Rarity left borders */
    .rb-common    { border-left: 3px solid #a8a29e; }
    .rb-uncommon  { border-left: 3px solid #34d399; }
    .rb-rare      { border-left: 3px solid #60a5fa; }
    .rb-very-rare { border-left: 3px solid #c084fc; }
    .rb-legendary { border-left: 3px solid #fbbf24; }
    .rb-artifact  { border-left: 3px solid #f87171; }
    /* Rarity pills */
    .rp-common    { background:rgba(168,162,158,.12);color:#a8a29e;border:1px solid rgba(168,162,158,.25); }
    .rp-uncommon  { background:rgba(52,211,153,.10); color:#34d399;border:1px solid rgba(52,211,153,.22); }
    .rp-rare      { background:rgba(96,165,250,.10); color:#60a5fa;border:1px solid rgba(96,165,250,.22); }
    .rp-very-rare { background:rgba(192,132,252,.10);color:#c084fc;border:1px solid rgba(192,132,252,.22); }
    .rp-legendary { background:rgba(251,191,36,.10); color:#fbbf24;border:1px solid rgba(251,191,36,.28); }
    .rp-artifact  { background:rgba(248,113,113,.10);color:#f87171;border:1px solid rgba(248,113,113,.22);box-shadow:0 0 8px rgba(248,113,113,.12); }
    /* Panels */
    .scroll-panel {
      background: linear-gradient(135deg, rgba(28,22,14,.90) 0%, rgba(22,18,12,.95) 100%);
      border: 1px solid rgba(180,130,30,.20);
      box-shadow: inset 0 1px 0 rgba(255,200,50,.04), 0 4px 20px rgba(0,0,0,.35);
    }
    .modal-panel {
      background: linear-gradient(160deg, #1c1611 0%, #161210 100%);
      border: 1px solid rgba(180,130,30,.30);
      box-shadow: 0 24px 80px rgba(0,0,0,.80), inset 0 1px 0 rgba(255,200,50,.05);
    }
    /* Buttons */
    .btn-gold {
      background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
      border: 1px solid rgba(251,191,36,.28);
      box-shadow: 0 2px 8px rgba(180,83,9,.35);
      transition: all .18s;
    }
    .btn-gold:hover {
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
      box-shadow: 0 4px 16px rgba(180,83,9,.45);
      transform: translateY(-1px);
    }
    /* Card hover */
    .card-hover { transition: box-shadow .18s, transform .15s; }
    .card-hover:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.45); }
    /* Treasury */
    .treasury-card {
      background: linear-gradient(135deg, rgba(120,53,15,.14) 0%, rgba(28,14,4,.80) 100%);
      border: 1px solid rgba(251,191,36,.18);
      box-shadow: 0 0 30px rgba(251,191,36,.05);
    }
    .gold-glow { text-shadow: 0 0 20px rgba(251,191,36,.35); }
    /* Section divider */
    .sec-divider::before,.sec-divider::after {
      background: linear-gradient(to right, transparent, rgba(180,130,30,.30), transparent);
    }
    /* Focus ring */
    input:focus, select:focus, textarea:focus {
      border-color: rgba(180,83,9,.70) !important;
      outline: none;
      box-shadow: 0 0 0 2px rgba(180,83,9,.15);
    }

/* ══ narrative ══════════════════════════════════════════════════════ */
.panel{background:linear-gradient(140deg,rgba(24,10,32,.9),rgba(14,8,20,.96));border:1px solid rgba(217,70,239,.2)}

/* ══ player ══════════════════════════════════════════════════════ */
.panel{background:linear-gradient(140deg,rgba(10,24,32,.9),rgba(8,14,20,.96));border:1px solid rgba(34,211,238,.2)}

/* ══ register ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(16,185,129,.12) 0%, transparent 55%),
        radial-gradient(ellipse at bottom, rgba(6,40,30,.28) 0%, transparent 60%);
    }

/* ══ sessions ══════════════════════════════════════════════════════ */
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(88,28,135,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(60,20,100,0.06) 0%, transparent 50%);
    }
    .scroll-panel {
      background: linear-gradient(135deg, rgba(20,14,28,.90) 0%, rgba(16,12,22,.95) 100%);
      border: 1px solid rgba(150,80,200,.18);
      box-shadow: inset 0 1px 0 rgba(200,150,255,.04), 0 4px 20px rgba(0,0,0,.35);
    }
    .modal-panel {
      background: linear-gradient(160deg, #150d20 0%, #100c18 100%);
      border: 1px solid rgba(150,80,200,.28);
      box-shadow: 0 24px 80px rgba(0,0,0,.80), inset 0 1px 0 rgba(200,150,255,.05);
    }
    .btn-purple {
      background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
      border: 1px solid rgba(167,139,250,.25);
      box-shadow: 0 2px 8px rgba(109,40,217,.35);
      transition: all .18s;
    }
    .btn-purple:hover {
      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
      box-shadow: 0 4px 16px rgba(109,40,217,.48);
      transform: translateY(-1px);
    }
    .card-hover:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.50); border-color: rgba(139,92,246,.35) !important; }
    .sec-divider::before,.sec-divider::after {
      background: linear-gradient(to right, transparent, rgba(139,92,246,.25), transparent);
    }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(124,58,237,.70) !important;
      outline: none;
      box-shadow: 0 0 0 2px rgba(124,58,237,.15);
    }
    .session-num {
      background: linear-gradient(135deg, rgba(109,40,217,.20) 0%, rgba(76,29,149,.15) 100%);
      border: 1px solid rgba(139,92,246,.20);
    }

/* ══ spells ══════════════════════════════════════════════════════ */
      #modal { display: none; }
      #modal:not(.hidden) { display: flex; }
    body {
      background-image:
        radial-gradient(ellipse at top, rgba(120,53,15,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(90,40,12,0.06) 0%, transparent 50%);
    }
    .scroll-panel {
      background: linear-gradient(135deg, rgba(28,22,14,.90) 0%, rgba(22,18,12,.95) 100%);
      border: 1px solid rgba(180,130,30,.20);
      box-shadow: inset 0 1px 0 rgba(255,200,50,.04), 0 4px 20px rgba(0,0,0,.35);
    }
    .spell-card {
      background: linear-gradient(135deg, rgba(28,22,14,.88) 0%, rgba(20,16,10,.94) 100%);
      border: 1px solid rgba(180,130,30,.16);
      transition: border-color .18s, transform .18s, box-shadow .18s;
      cursor: pointer;
    }
    .spell-card:hover {
      border-color: rgba(251,191,36,.38);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0,0,0,.5);
    }
    .spell-card.selected {
      border-color: rgba(251,191,36,.60);
      box-shadow: 0 0 0 2px rgba(251,191,36,.15), 0 8px 28px rgba(0,0,0,.5);
    }
    .filter-select, .filter-input {
      background: rgba(28,22,14,.90);
      border: 1px solid rgba(180,130,30,.25);
      color: #d6d3d1;
      border-radius: 0.5rem;
      padding: 0.375rem 0.625rem;
      font-size: 0.8rem;
      width: 100%;
      transition: border-color .15s;
    }
    .filter-select:focus, .filter-input:focus {
      outline: none;
      border-color: rgba(251,191,36,.50);
    }
    .filter-select option { background: #1c1611; }
    .pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 999px; font-size: 0.7rem;
    }
    .school-A { background:rgba(96,165,250,.12); color:#93c5fd; border:1px solid rgba(96,165,250,.22); }
    .school-C { background:rgba(52,211,153,.11); color:#6ee7b7; border:1px solid rgba(52,211,153,.22); }
    .school-D { background:rgba(251,191,36,.11); color:#fcd34d; border:1px solid rgba(251,191,36,.22); }
    .school-E { background:rgba(248,113,113,.11); color:#fca5a5; border:1px solid rgba(248,113,113,.22); }
    .school-I { background:rgba(192,132,252,.11); color:#d8b4fe; border:1px solid rgba(192,132,252,.22); }
    .school-N { background:rgba(156,163,175,.11); color:#d1d5db; border:1px solid rgba(156,163,175,.22); }
    .school-T { background:rgba(251,146,60,.11); color:#fdba74; border:1px solid rgba(251,146,60,.22); }
    .school-V { background:rgba(244,63,94,.11); color:#fda4af; border:1px solid rgba(244,63,94,.22); }
    .level-pill {
      background:rgba(180,130,30,.14); color:#fcd34d;
      border:1px solid rgba(180,130,30,.28); padding:1px 7px;
      border-radius:999px; font-size:0.7rem; font-family:'Cinzel',serif;
    }
    .modal-overlay {
      position:fixed;inset:0;background:rgba(30,20,5,0.82); /* lighter for contrast */
      display:flex;align-items:center;justify-content:center;
      z-index:100;padding:1rem;
    }
    .modal-panel {
      background:linear-gradient(160deg,#1c1611 0%,#161210 100%);
      border:1px solid rgba(180,130,30,.35);
      box-shadow:0 24px 80px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,200,50,.05);
      border-radius:1rem;
      max-width:680px;width:100%;
      max-height:85vh;overflow-y:auto;
      padding:2rem;
      position:relative;
    }
    @media (max-width: 600px) {
      .modal-panel {
        padding: 1rem;
        max-width: 98vw;
        max-height: 90vh;
      }
    }
    .modal-panel button[onclick^="closeModal"] {
      z-index: 10;
      background: rgba(30,20,5,0.12);
      border-radius: 50%;
      border: 1.5px solid rgba(251,191,36,0.25);
      color: #fde68a !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
      transition: background 0.15s, color 0.15s;
    }
    .modal-panel button[onclick^="closeModal"]:hover {
      background: rgba(251,191,36,0.18);
      color: #fffbe8 !important;
      border-color: #fcd34d;
    }
    .tag-btn {
      background:rgba(28,22,14,.8);
      border:1px solid rgba(180,130,30,.22);
      color:#a8a29e; border-radius:0.375rem;
      padding:3px 10px; font-size:0.75rem;
      cursor:pointer; transition:all .15s;
    }
    .tag-btn:hover, .tag-btn.active {
      border-color:rgba(251,191,36,.55);
      color:#fcd34d;
      background:rgba(180,130,30,.15);
    }
    .entry-text { line-height:1.65; color:#d6d3d1; }
    .entry-text p { margin-bottom:.5em; }
    #spellGrid { min-height: 200px; }