/* ============ TOKENS ============ */
  :root{
    --ink:#1a0e07;
    --ink-soft:#3b2516;
    --parchment:#e8d8a8;
    --parchment-2:#d9c285;
    --parchment-dark:#b89a55;
    --wood:#4a2a14;
    --wood-2:#2c1608;
    --blood:#8b1a1a;
    --blood-bright:#c42626;
    --gold:#d4af37;
    --gold-bright:#f5d76e;
    --stain:rgba(70,40,15,.18);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden}
  body{
    font-family:'IM Fell English',Georgia,serif;
    color:var(--ink);
    background:#1a0a04;
    background-image:
      radial-gradient(ellipse at center, #3a1d0c 0%, #1a0a04 70%, #0a0402 100%);
    min-height:100vh;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  /* paper texture overlay */
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,.15) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(0,0,0,.2) 0%, transparent 50%),
      repeating-conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,.02) 0deg, transparent 1deg, transparent 2deg, rgba(0,0,0,.02) 3deg);
    mix-blend-mode:multiply;
  }
  /* vignette */
  body::after{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.7) 100%);
  }

  #app{
    position:relative;z-index:3;
    max-width:920px;margin:0 auto;
    padding:24px 16px 80px;
    min-height:100vh;
  }

  /* ============ PARCHMENT PANELS ============ */
  .parchment{
    background:
      radial-gradient(ellipse at 20% 10%, rgba(255,255,200,.4) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.3) 0%, transparent 60%),
      linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
    border-radius:6px;
    padding:28px 24px;
    position:relative;
    box-shadow:
      inset 0 0 60px rgba(120,80,30,.25),
      inset 0 0 0 1px rgba(70,40,15,.3),
      0 8px 30px rgba(0,0,0,.6),
      0 2px 0 rgba(0,0,0,.4);
    /* ragged edge */
    clip-path:polygon(
      0% 2%, 2% 0%, 8% 1%, 15% 0%, 22% 2%, 35% 0%, 48% 1%, 60% 0%, 72% 2%, 85% 0%, 95% 1%, 100% 3%,
      99% 15%, 100% 30%, 98% 50%, 100% 70%, 99% 85%, 100% 98%,
      96% 100%, 85% 99%, 70% 100%, 55% 99%, 40% 100%, 25% 99%, 10% 100%, 2% 99%,
      0% 90%, 1% 75%, 0% 60%, 2% 40%, 0% 25%, 1% 10%
    );
  }
  .parchment::before{
    content:"";
    position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 30% 20%, var(--stain) 0%, transparent 5%),
      radial-gradient(circle at 70% 60%, var(--stain) 0%, transparent 4%),
      radial-gradient(circle at 15% 80%, var(--stain) 0%, transparent 6%),
      radial-gradient(circle at 85% 30%, rgba(120,40,10,.15) 0%, transparent 3%);
    pointer-events:none;
  }

  /* ============ TYPOGRAPHY ============ */
  h1,h2,h3{
    font-family:'Cinzel',serif;
    font-weight:900;
    margin:0;
    color:var(--blood);
    text-shadow:
      2px 2px 0 var(--ink),
      4px 4px 0 rgba(0,0,0,.3);
    letter-spacing:.02em;
  }
  h1{font-size:clamp(28px,5vw,52px);line-height:.95}
  h2{font-size:clamp(22px,3.5vw,36px)}
  h3{font-size:18px;color:var(--ink-soft);text-shadow:none}
  p{margin:0 0 12px;line-height:1.4;font-size:17px}
  .flavor{font-style:italic;color:var(--ink-soft);font-size:15px}

  /* ============ STAGE HEADER ============ */
  .stage-bar{
    display:flex;align-items:center;gap:8px;
    margin-bottom:16px;
    padding:8px 14px;
    background:linear-gradient(180deg,#3a1d0c,#1a0a04);
    border:1px solid var(--wood);
    border-radius:4px;
    box-shadow:inset 0 1px 0 rgba(255,200,100,.1), 0 2px 8px rgba(0,0,0,.5);
  }
  .stage-bar .label{
    font-family:'Cinzel',serif;font-weight:700;
    color:var(--gold-bright);font-size:13px;letter-spacing:.15em;
    text-transform:uppercase;
  }
  .stage-bar .dots{display:flex;gap:6px;margin-left:auto}
  .dot{
    width:10px;height:10px;border-radius:50%;
    background:#2a1408;border:1px solid var(--wood);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  }
  .dot.done{background:radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 60%, #8a6a1a);box-shadow:0 0 6px var(--gold)}
  .dot.current{background:radial-gradient(circle at 30% 30%, #ff6b6b, var(--blood-bright));box-shadow:0 0 8px var(--blood-bright);animation:pulse 1.2s infinite}
  @keyframes pulse{50%{transform:scale(1.2)}}

  /* ============ SKELETON NARRATOR ============ */
  .narrator{
    display:flex;gap:12px;align-items:flex-start;
    margin-bottom:18px;
    animation:fadeUp .5s both;
  }
  .skull{
    width:64px;height:64px;flex-shrink:0;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  }
  .bubble{
    flex:1;
    background:var(--parchment);
    border:2px solid var(--ink-soft);
    border-radius:10px;
    padding:10px 14px;
    position:relative;
    font-family:'IM Fell English',serif;
    font-style:italic;
    font-size:16px;
    color:var(--ink);
    box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 20px rgba(120,80,30,.15);
  }
  .bubble::before{
    content:"";position:absolute;left:-10px;top:18px;
    width:0;height:0;
    border:8px solid transparent;
    border-right-color:var(--ink-soft);
  }
  .bubble::after{
    content:"";position:absolute;left:-6px;top:20px;
    width:0;height:0;
    border:6px solid transparent;
    border-right-color:var(--parchment);
  }

  /* ============ BUTTONS / CARDS ============ */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin:14px 0;
  }
  .card{
    background:linear-gradient(180deg,#f0dfa8 0%,#d9c285 100%);
    border:2px solid var(--ink-soft);
    border-radius:6px;
    padding:14px 12px;
    cursor:pointer;
    position:relative;
    transition:transform .15s, box-shadow .15s;
    box-shadow:0 3px 0 var(--wood-2), 0 5px 12px rgba(0,0,0,.4);
    text-align:center;
    overflow:hidden;
  }
  .card::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(255,255,200,.4), transparent 60%);
    pointer-events:none;
  }
  .card:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--wood-2), 0 8px 18px rgba(0,0,0,.5)}
  .card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wood-2), 0 2px 5px rgba(0,0,0,.4)}
  .card.selected{
    background:linear-gradient(180deg,#e8b878 0%,#c89855 100%);
    box-shadow:0 0 0 3px var(--gold), 0 3px 0 var(--wood-2), 0 5px 12px rgba(0,0,0,.4);
  }
  .card .icon{font-size:32px;display:block;margin-bottom:4px}
  .card .name{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:var(--ink);margin-bottom:4px}
  .card .desc{font-size:13px;font-style:italic;color:var(--ink-soft);line-height:1.3}
  .meta-list{
    margin-top:8px;
    padding-top:6px;
    border-top:1px dashed rgba(70,40,15,.28);
    display:grid;
    gap:3px;
    text-align:left;
    font-size:11px;
    line-height:1.25;
    color:var(--ink-soft);
  }
  .meta-list strong{
    font-family:'Cinzel',serif;
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .meta-list span::before{
    content:"+ ";
    color:#2f5d3a;
    font-weight:700;
  }
  .meta-list.cons span::before{
    content:"- ";
    color:var(--blood);
  }
  .meta-list.skills span::before{
    content:"• ";
    color:#315f9c;
  }

  /* ============ PRIMARY BUTTON ============ */
  .btn{
    display:inline-block;
    font-family:'Cinzel',serif;font-weight:900;
    font-size:18px;letter-spacing:.08em;
    padding:14px 28px;
    background:
      radial-gradient(ellipse at center top, var(--blood-bright), var(--blood) 70%, #5a0e0e);
    color:var(--gold-bright);
    border:2px solid var(--ink);
    border-radius:6px;
    cursor:pointer;
    text-shadow:1px 1px 0 var(--ink), 0 0 8px rgba(0,0,0,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,200,100,.3),
      inset 0 -3px 0 rgba(0,0,0,.4),
      0 4px 0 var(--ink),
      0 6px 14px rgba(0,0,0,.6);
    transition:transform .1s, box-shadow .1s;
    text-transform:uppercase;
  }
  .btn:hover{filter:brightness(1.1)}
  .btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,200,100,.3),inset 0 -2px 0 rgba(0,0,0,.4),0 1px 0 var(--ink),0 2px 5px rgba(0,0,0,.5)}
  .btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
  .btn.ghost{
    background:linear-gradient(180deg,#5a3a1a,#3a2210);
    color:var(--parchment);
    font-size:14px;padding:10px 18px;
  }

  .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}

  /* ============ STATS ============ */
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
    margin:14px 0;
  }
  .stat{
    background:linear-gradient(180deg,#3a1d0c,#1a0a04);
    border:2px solid var(--wood);
    border-radius:6px;
    padding:10px;
    text-align:center;
    color:var(--parchment);
    box-shadow:inset 0 1px 0 rgba(255,200,100,.15), 0 2px 6px rgba(0,0,0,.5);
    position:relative;
  }
  .stat .stat-name{font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:.15em;color:var(--gold-bright)}
  .stat .stat-val{font-family:'Cinzel',serif;font-weight:900;font-size:38px;line-height:1;margin:6px 0;color:#fff;text-shadow:0 0 8px rgba(255,200,100,.5)}
  .stat .stat-mod{font-size:13px;color:var(--parchment-dark)}
  .stat.rolling .stat-val{animation:roll .4s steps(6) infinite}
  .stat .reroll{
    position:absolute;top:4px;right:4px;
    width:22px;height:22px;border-radius:50%;
    background:var(--blood);color:var(--gold-bright);
    border:1px solid var(--ink);font-size:12px;
    cursor:pointer;display:grid;place-items:center;
    box-shadow:0 1px 2px rgba(0,0,0,.5);
  }
  .stat .reroll:disabled{opacity:.3;cursor:not-allowed}
  @keyframes roll{0%{transform:translateY(-3px) rotate(-5deg)}100%{transform:translateY(3px) rotate(5deg)}}

  .rerolls-remaining{
    text-align:center;font-size:14px;color:var(--ink-soft);
    margin-top:8px;font-style:italic;
  }

  /* ============ INPUT ============ */
  input[type=text]{
    width:100%;
    font-family:'IM Fell English',serif;
    font-size:22px;
    padding:10px 14px;
    background:rgba(255,250,220,.5);
    border:2px solid var(--ink-soft);
    border-radius:4px;
    color:var(--ink);
    text-align:center;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.2);
  }
  input[type=text]:focus{outline:none;border-color:var(--blood);box-shadow:inset 0 2px 6px rgba(0,0,0,.2), 0 0 0 3px rgba(196,38,38,.3)}

  label.field{display:block;margin:14px 0}
  label.field .lbl{font-family:'Cinzel',serif;font-weight:700;font-size:13px;letter-spacing:.15em;color:var(--ink-soft);text-transform:uppercase;display:block;margin-bottom:4px}

  /* ============ SPLASH ============ */
  .splash-title{
    text-align:center;
    margin:20px 0 8px;
    position:relative;
  }
  .splash-title h1{
    font-size:clamp(34px,7vw,72px);
    color:var(--gold-bright);
    text-shadow:
      0 0 0 var(--ink),
      2px 2px 0 var(--ink),
      4px 4px 0 var(--blood),
      6px 6px 0 var(--ink),
      8px 8px 20px rgba(0,0,0,.8);
    transform:rotate(-1deg);
  }
  .splash-title .subtitle{
    font-family:'IM Fell English',serif;
    font-style:italic;
    color:var(--parchment-dark);
    font-size:18px;
    margin-top:8px;
  }
  .skull-big{
    width:180px;height:180px;
    margin:10px auto;
    display:block;
    filter:drop-shadow(0 0 30px rgba(255,100,50,.4)) drop-shadow(0 6px 12px rgba(0,0,0,.6));
    animation:float 4s ease-in-out infinite;
  }
  @keyframes float{50%{transform:translateY(-8px)}}

  /* ============ CHARACTER PREVIEW ============ */
  .creator-layout{
    display:grid;
    grid-template-columns:minmax(220px,300px) minmax(0,1fr);
    gap:18px;
    align-items:start;
  }
  .preview-panel{
    background:rgba(70,40,15,.12);
    border:1px solid rgba(70,40,15,.35);
    border-radius:6px;
    padding:12px;
    text-align:center;
  }
  .preview-title{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:.14em;
    color:var(--ink-soft);
    text-transform:uppercase;
    margin-bottom:8px;
  }
  .avatar{
    width:min(100%,250px);
    aspect-ratio:3/4;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));
  }
  .sheet-avatar{
    width:170px;
    max-width:44vw;
    margin:0 auto 10px;
  }
  .mini-avatar{
    width:58px;
    height:76px;
    display:block;
    margin:0 auto 4px;
  }
  .swatch-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(42px,1fr));
    gap:8px;
    margin-top:6px;
  }
  .swatch{
    min-height:38px;
    border:2px solid var(--ink-soft);
    border-radius:4px;
    cursor:pointer;
    box-shadow:0 2px 0 var(--wood-2), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .swatch.selected{
    outline:3px solid var(--gold);
    outline-offset:1px;
  }
  .control-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
  }
  select{
    width:100%;
    padding:10px 14px;
    background:rgba(255,250,220,.5);
    border:2px solid var(--ink-soft);
    border-radius:4px;
    font-family:'IM Fell English',serif;
    font-size:17px;
    color:var(--ink);
  }

  /* ============ HALL OF GUYS ============ */
  .hall{
    margin-top:24px;
    padding:20px;
    background:rgba(0,0,0,.3);
    border:1px solid var(--wood);
    border-radius:6px;
  }
  .hall h2{text-align:center;color:var(--gold-bright);font-size:24px;text-shadow:2px 2px 0 var(--ink)}
  .hall-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:10px;
    margin-top:12px;
  }
  .hall-card{
    background:linear-gradient(180deg,var(--parchment),var(--parchment-2));
    border:1px solid var(--ink-soft);
    border-radius:4px;
    padding:8px;
    text-align:center;
    font-size:13px;
    color:var(--ink);
    position:relative;
    transform:rotate(var(--rot, 0deg));
    box-shadow:0 2px 6px rgba(0,0,0,.5);
  }
  button.hall-card{
    width:100%;
    font-family:inherit;
    cursor:pointer;
  }
  button.hall-card:hover{
    transform:rotate(var(--rot, 0deg)) translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.55);
  }
  .hall-card .hall-name{font-family:'Cinzel',serif;font-weight:700;font-size:14px;color:var(--blood)}
  .hall-card .hall-sub{font-size:11px;font-style:italic;color:var(--ink-soft);margin-top:2px}
  .hall-screen{
    max-width:none;
  }

  /* ============ LEADERBOARD / BATTLE ============ */
  .leaderboard{
    margin:24px auto 0;
    max-width:680px;
    padding:16px;
    background:rgba(0,0,0,.34);
    border:1px solid var(--wood);
    border-radius:6px;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
  }
  .leaderboard h2{
    text-align:center;
    color:var(--gold-bright);
    font-size:24px;
    text-shadow:2px 2px 0 var(--ink);
    margin-bottom:10px;
  }
  .leader-row{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) minmax(90px,.75fr) 62px;
    gap:8px;
    align-items:center;
    padding:7px 8px;
    border-bottom:1px dashed rgba(232,216,168,.22);
    color:var(--parchment);
    font-size:15px;
  }
  .leader-row:last-child{border-bottom:0}
  .leader-rank,.leader-score{
    font-family:'Cinzel',serif;
    font-weight:900;
    color:var(--gold-bright);
  }
  .leader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .leader-meta{font-style:italic;color:var(--parchment-dark);font-size:13px;text-align:right}
  .leader-score{text-align:right;font-size:20px}
  .leader-row.current-run{
    background:rgba(212,175,55,.16);
    outline:1px solid rgba(212,175,55,.35);
  }
  .leaderboard-gallery{
    max-width:none;
  }
  .leaderboard-grid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  }
  .leader-card{
    min-height:220px;
  }
  .leader-card .seal{
    position:absolute;
    top:6px;
    left:6px;
    background:var(--blood);
    color:var(--gold-bright);
    border:1px solid var(--ink);
    border-radius:50%;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    font-size:12px;
    box-shadow:0 2px 4px rgba(0,0,0,.35);
  }
  .leader-card-score{
    font-family:'Cinzel',serif;
    font-weight:900;
    color:var(--blood);
    font-size:24px;
    line-height:1;
    margin:8px 0 4px;
  }

  .battle-shell{
    background:
      radial-gradient(ellipse at 50% 0%, rgba(139,26,26,.22), transparent 60%),
      linear-gradient(180deg, rgba(42,20,8,.92), rgba(10,4,2,.94));
    border:1px solid var(--wood);
    border-radius:6px;
    padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,200,100,.1);
  }
  .battle-top{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(190px,.85fr) minmax(180px,1fr);
    gap:14px;
    align-items:stretch;
  }
  .combatant,.score-board,.battle-log{
    background:linear-gradient(180deg,var(--parchment),var(--parchment-2));
    border:2px solid var(--ink-soft);
    border-radius:6px;
    padding:14px;
    text-align:center;
    box-shadow:0 3px 0 var(--wood-2), 0 6px 14px rgba(0,0,0,.35);
  }
  .combatant h2{
    font-size:22px;
    text-shadow:none;
    color:var(--blood);
    overflow-wrap:anywhere;
  }
  .combatant .epithet{
    font-style:italic;
    color:var(--ink-soft);
    margin:4px 0 10px;
  }
  .level-badge{
    display:inline-block;
    font-family:'Cinzel',serif;
    font-weight:900;
    font-size:14px;
    letter-spacing:.08em;
    color:var(--gold-bright);
    background:linear-gradient(180deg,#3a1d0c,#1a0a04);
    border:1px solid var(--wood);
    border-radius:999px;
    padding:4px 10px;
    margin-bottom:10px;
    box-shadow:inset 0 1px 0 rgba(255,200,100,.16), 0 2px 4px rgba(0,0,0,.35);
    text-transform:uppercase;
  }
  .skill-strip,.skill-ledger{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
    margin:0 0 10px;
  }
  .skill-strip span,.skill-ledger span{
    background:rgba(49,95,156,.14);
    border:1px solid rgba(49,95,156,.35);
    border-radius:999px;
    padding:3px 8px;
    font-size:12px;
    color:var(--ink-soft);
  }
  .skill-ledger{
    justify-content:flex-start;
  }
  .battle-avatar{
    width:150px;
    max-width:100%;
  }
  .rat-card{
    background:linear-gradient(180deg,#d8c184,#b89a55);
  }
  .rat-big{
    font-size:86px;
    line-height:1;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));
    animation:ratJitter .12s steps(2) infinite;
  }
  .rat-trait{
    display:inline-block;
    margin:0 0 10px;
    padding:3px 8px;
    background:rgba(70,40,15,.14);
    border:1px solid rgba(70,40,15,.3);
    border-radius:999px;
    font-style:italic;
    color:var(--ink-soft);
  }
  @keyframes ratJitter{
    50%{transform:translate(2px,-1px) rotate(2deg)}
  }
  .meter{
    height:18px;
    background:#2a1408;
    border:1px solid var(--ink);
    border-radius:999px;
    overflow:hidden;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.55);
  }
  .meter span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#3f8f3f,#b8d86b);
    transition:width .08s linear;
  }
  .rat-meter span{background:linear-gradient(90deg,var(--blood),var(--blood-bright))}
  .xp-meter{
    height:12px;
    margin-top:9px;
  }
  .xp-meter span{background:linear-gradient(90deg,#315f9c,#f5d76e)}
  .meter-label{
    font-family:'Cinzel',serif;
    font-weight:700;
    color:var(--ink-soft);
    font-size:12px;
    letter-spacing:.08em;
    margin-top:5px;
  }
  .score-board{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:260px;
    color:var(--ink);
  }
  .score-label{
    font-family:'Cinzel',serif;
    font-weight:700;
    letter-spacing:.12em;
    color:var(--ink-soft);
    text-transform:uppercase;
    font-size:12px;
  }
  .score-value{
    font-family:'Cinzel',serif;
    font-weight:900;
    font-size:72px;
    line-height:1;
    color:var(--blood);
    text-shadow:2px 2px 0 rgba(0,0,0,.18);
  }
  .rat-swarm{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2px;
    min-height:62px;
    margin-top:12px;
  }
  .rat-swarm span{
    display:inline-block;
    font-size:18px;
    animation:ratRun .28s alternate infinite;
    animation-delay:calc(var(--i) * -30ms);
  }
  @keyframes ratRun{
    to{transform:translateY(-4px) rotate(6deg)}
  }
  .battle-log{
    margin-top:14px;
    text-align:left;
    font-size:16px;
    color:var(--ink);
  }
  .battle-log div{
    padding:4px 0;
    border-bottom:1px dashed rgba(70,40,15,.28);
  }
  .battle-log div:last-child{border-bottom:0}
  .battle-leaders{max-width:none}

  .detail-layout{
    display:grid;
    grid-template-columns:minmax(280px,380px) minmax(0,1fr);
    gap:18px;
    align-items:start;
  }
  .detail-sheet{
    max-width:none;
  }
  .exploits-panel{
    background:linear-gradient(180deg,var(--parchment),var(--parchment-2));
    border:2px solid var(--ink-soft);
    border-radius:6px;
    padding:18px;
    box-shadow:0 3px 0 var(--wood-2), 0 6px 14px rgba(0,0,0,.35);
  }
  .exploits-panel h2{
    text-align:center;
    margin-bottom:12px;
  }
  .exploits-panel h3{
    margin:16px 0 8px;
    font-size:16px;
  }
  .exploit-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:12px;
  }
  .exploit-summary div{
    background:rgba(70,40,15,.12);
    border:1px solid rgba(70,40,15,.28);
    border-radius:4px;
    padding:10px 6px;
    text-align:center;
  }
  .exploit-summary strong{
    display:block;
    font-family:'Cinzel',serif;
    font-size:26px;
    color:var(--blood);
    line-height:1;
  }
  .exploit-summary span{
    display:block;
    font-size:12px;
    color:var(--ink-soft);
    font-style:italic;
  }
  .exploit-note{
    color:var(--ink-soft);
    font-style:italic;
    text-align:center;
  }
  .rat-ledger{
    max-height:260px;
    overflow:auto;
    border:1px solid rgba(70,40,15,.28);
    border-radius:4px;
    background:rgba(255,250,220,.25);
  }
  .rat-entry{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 54px 62px;
    gap:8px;
    padding:7px 8px;
    border-bottom:1px dashed rgba(70,40,15,.25);
    font-size:14px;
    align-items:center;
  }
  .rat-entry:last-child{border-bottom:0}
  .rat-num{
    font-family:'Cinzel',serif;
    font-weight:900;
    color:var(--blood);
  }
  .detail-log{
    max-height:240px;
    overflow:auto;
  }

  /* ============ FINAL REVEAL ============ */
  #reveal-stage{display:flex;flex-direction:column;align-items:center}
  .scroll-wrap{
    width:100%;
    max-width:680px;
    margin:10px auto;
    perspective:1200px;
  }
  .sheet{
    background:
      radial-gradient(ellipse at 20% 10%, rgba(255,255,200,.5) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.3) 0%, transparent 60%),
      linear-gradient(180deg, #f0dfa8 0%, #d9c285 100%);
    padding:30px 26px;
    border-radius:4px;
    box-shadow:
      inset 0 0 80px rgba(120,80,30,.3),
      0 10px 40px rgba(0,0,0,.7);
    position:relative;
    transform-origin:top center;
  }
  .sheet::before, .sheet::after{
    content:"";
    position:absolute;left:-20px;right:-20px;height:30px;
    background:linear-gradient(90deg,var(--wood-2),var(--wood),var(--wood-2));
    border-radius:18px;
    box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,200,100,.2);
  }
  .sheet::before{top:-24px}
  .sheet::after{bottom:-24px}

  .sheet h1{
    text-align:center;
    color:var(--blood);
    font-size:clamp(24px,4vw,38px);
    margin-bottom:6px;
  }
  .sheet .epithet{
    text-align:center;
    font-style:italic;
    color:var(--ink-soft);
    margin-bottom:18px;
    font-size:18px;
  }
  .sheet-row{
    display:flex;justify-content:space-between;
    padding:6px 0;
    border-bottom:1px dashed rgba(70,40,15,.4);
    font-size:16px;
  }
  .sheet-row .k{font-family:'Cinzel',serif;font-weight:700;color:var(--ink-soft);letter-spacing:.05em}
  .sheet-row .v{color:var(--ink);text-align:right}
  .sheet-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:14px 0;
    padding:12px;
    background:rgba(70,40,15,.1);
    border:1px solid rgba(70,40,15,.3);
    border-radius:4px;
  }
  .sheet-stats .ss{
    text-align:center;
  }
  .sheet-stats .ss-name{font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
  .sheet-stats .ss-val{font-family:'Cinzel',serif;font-weight:900;font-size:28px;color:var(--blood);line-height:1}

  .reveal-line{
    opacity:0;
    animation:stampIn .4s forwards;
  }
  @keyframes stampIn{
    0%{opacity:0;transform:scale(2) rotate(-3deg)}
    60%{opacity:1;transform:scale(.9) rotate(1deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
  }

  .sigil{
    width:120px;height:120px;
    margin:0 auto 12px;
    display:block;
  }

  /* ============ DICE ============ */
  .dice-tray{
    display:flex;justify-content:center;gap:8px;
    margin:10px 0;
    min-height:50px;
  }
  .die{
    width:40px;height:40px;
    background:linear-gradient(135deg,#f0dfa8,#b89a55);
    border:2px solid var(--ink);
    border-radius:6px;
    display:grid;place-items:center;
    font-family:'Cinzel',serif;font-weight:900;font-size:20px;color:var(--ink);
    box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .die.dropped{opacity:.3;text-decoration:line-through;background:#7a5a30}

  /* ============ ANIMATIONS ============ */
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes scrollUnfurl{
    0%{transform:scaleY(0);opacity:0}
    60%{transform:scaleY(1.04);opacity:1}
    100%{transform:scaleY(1)}
  }
  .stage{animation:fadeUp .4s both}
  .scroll-unfurl{animation:scrollUnfurl 1.2s cubic-bezier(.34,1.56,.64,1) both}

  /* mute btn */
  #mute{
    position:fixed;top:10px;right:10px;
    width:38px;height:38px;
    background:rgba(0,0,0,.5);
    border:1px solid var(--wood);
    color:var(--gold-bright);
    border-radius:50%;
    cursor:pointer;font-size:18px;
    z-index:10;
  }

  @media (max-width:760px){
    .creator-layout{grid-template-columns:1fr}
    .control-grid{grid-template-columns:1fr}
    .battle-top{grid-template-columns:1fr}
    .detail-layout{grid-template-columns:1fr}
    .score-board{min-height:auto}
    .leader-row{grid-template-columns:28px minmax(0,1fr) 52px}
    .leader-meta{display:none}
    .rat-entry{grid-template-columns:38px minmax(0,1fr)}
    .rat-entry span:nth-child(3),.rat-entry span:nth-child(4){text-align:left}
  }

  /* small screens */
  @media (max-width:480px){
    h1{font-size:32px}
    .skull{width:48px;height:48px}
    .skull-big{width:130px;height:130px}
    .card{padding:10px 8px}
    .card .icon{font-size:24px}
    .card .name{font-size:14px}
    .card .desc{font-size:11px}
    .btn{font-size:15px;padding:12px 20px}
    .stat .stat-val{font-size:30px}
    .preview-panel{position:static}
  }