:root{
    --bg-deep:#12100c;
    --bg-deep-2:#1a1610;
    --panel:#e9dcbd;
    --panel-shade:#d9c89e;
    --panel-line:#b79f6f;
    --ink:#2c2013;
    --ink-soft:#4a3826;
    --gold:#c9a13a;
    --gold-bright:#e8c766;
    --gold-dim:#8a6f2c;
    --blood:#7c2222;
    --blood-bright:#9e2d2d;
    --blood-dark:#4c1414;
    --forest:#33513f;
    --forest-bright:#4a7259;
    --sky-hint:#3a4a5c;
    --font-display:'Cinzel', serif;
    --font-deco:'Cinzel Decorative', serif;
    --font-body:'EB Garamond', serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse at 50% -10%, #241d14 0%, var(--bg-deep) 55%, #0a0806 100%);
    color:var(--panel);
    font-family:var(--font-body);
    min-height:100vh;
    padding:28px 14px 60px;
  }
  .wrap{max-width:880px;margin:0 auto;}

  /* ---------- crest / banner ---------- */
  .banner{
    text-align:center;
    margin-bottom:22px;
    position:relative;
  }
  .crest{width:74px;height:74px;margin:0 auto 6px;display:block;}
  .title{
    font-family:var(--font-deco);
    font-size:clamp(30px,6vw,50px);
    color:var(--gold-bright);
    letter-spacing:2px;
    text-shadow:0 2px 0 #000, 0 0 22px rgba(201,161,58,0.35);
    margin:0;
  }
  .subtitle{
    font-family:var(--font-display);
    font-size:12px;
    letter-spacing:6px;
    color:var(--gold-dim);
    text-transform:uppercase;
    margin-top:2px;
  }
  .rule{
    width:220px;height:1px;margin:14px auto;
    background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
    position:relative;
  }
  .rule::before{
    content:'\2726';
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    color:var(--gold);background:var(--bg-deep);padding:0 10px;font-size:12px;
  }

  /* ---------- parchment panel ---------- */
  .panel{
    background:
      linear-gradient(180deg, var(--panel) 0%, var(--panel-shade) 100%);
    border-radius:3px;
    padding:26px 26px 22px;
    position:relative;
    color:var(--ink);
    box-shadow:
      0 0 0 2px #0d0b08,
      0 0 0 6px var(--gold-dim),
      0 0 0 8px #0d0b08,
      0 18px 40px rgba(0,0,0,0.55);
  }
  .panel::before{
    content:'';
    position:absolute;inset:10px;
    border:1px solid var(--panel-line);
    pointer-events:none;
    opacity:0.6;
  }
  .corner{
    position:absolute;width:16px;height:16px;border:2px solid var(--gold-dim);opacity:0.85;
  }
  .corner.tl{top:2px;left:2px;border-right:none;border-bottom:none;}
  .corner.tr{top:2px;right:2px;border-left:none;border-bottom:none;}
  .corner.bl{bottom:2px;left:2px;border-right:none;border-top:none;}
  .corner.br{bottom:2px;right:2px;border-left:none;border-top:none;}

  h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0 0 10px;font-weight:600;}
  h2{font-size:20px;letter-spacing:1px;}
  h3{font-size:15px;letter-spacing:0.5px;color:var(--blood);text-transform:uppercase;font-size:13px;}
  p{line-height:1.65;margin:0 0 12px;font-size:16.5px;}
  .flavor{font-style:italic;color:var(--ink-soft);}

  .dropcap:first-letter{
    font-family:var(--font-deco);
    font-size:52px;
    float:left;
    line-height:0.75;
    padding:6px 8px 0 0;
    color:var(--blood);
  }

  /* ---------- buttons ---------- */
  .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
  button{
    font-family:var(--font-display);
    font-size:13.5px;
    letter-spacing:0.5px;
    cursor:pointer;
    border-radius:2px;
    padding:11px 20px;
    transition:transform 0.08s ease, filter 0.15s ease;
  }
  button:active{transform:translateY(1px) scale(0.98);}
  button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;}

  .btn-seal{
    background:radial-gradient(circle at 35% 30%, var(--blood-bright), var(--blood) 60%, var(--blood-dark) 100%);
    color:#f2e4c8;
    border:2px solid var(--gold-dim);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.4);
    text-transform:uppercase;
  }
  .btn-seal:hover{filter:brightness(1.1);}
  .btn-seal:disabled{filter:grayscale(0.6) brightness(0.7);cursor:not-allowed;}

  .btn-parch{
    background:var(--panel-shade);
    border:1.5px solid var(--ink-soft);
    color:var(--ink);
  }
  .btn-parch:hover{background:#cabb92;}

  .btn-ghost{
    background:transparent;
    border:1px solid var(--gold-dim);
    color:var(--ink-soft);
  }
  .btn-ghost:hover{background:rgba(0,0,0,0.05);}

  /* ---------- class cards ---------- */
  .class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0;}
  .class-card{
    border:1.5px solid var(--panel-line);
    background:rgba(255,255,255,0.15);
    padding:14px;border-radius:2px;cursor:pointer;
    transition:border-color 0.15s, background 0.15s;
    text-align:left;
  }
  .class-card:hover{border-color:var(--blood);background:rgba(255,255,255,0.3);}
  .class-card.selected{border-color:var(--blood);background:rgba(124,34,34,0.1);box-shadow:0 0 0 1px var(--blood);}
  .class-icon{font-size:26px;}
  .class-name{font-family:var(--font-display);font-weight:600;font-size:16px;margin:6px 0 4px;}
  .class-stats{font-size:12.5px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
  .class-skill{font-size:12.5px;font-style:italic;margin-top:6px;color:var(--blood);}

  input[type=text]{
    font-family:var(--font-body);
    font-size:17px;
    padding:9px 12px;
    border:1.5px solid var(--ink-soft);
    background:rgba(255,255,255,0.4);
    color:var(--ink);
    border-radius:2px;
    width:100%;
    max-width:320px;
  }
  label{font-family:var(--font-display);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;}

  /* ---------- HUD ---------- */
  .hud{
    display:flex;flex-wrap:wrap;gap:14px;align-items:center;
    padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--panel-line);
  }
  .hud-name{font-family:var(--font-display);font-weight:600;font-size:16px;min-width:130px;}
  .hud-sub{font-size:12px;color:var(--ink-soft);display:block;}
  .bars{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px;}
  .bar-row{display:flex;align-items:center;gap:8px;}
  .bar-label{font-size:11px;width:26px;font-family:var(--font-display);color:var(--ink-soft);}
  .bar-track{flex:1;height:11px;background:rgba(0,0,0,0.25);border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,0.3);}
  .bar-fill{height:100%;transition:width 0.35s ease;}
  .bar-fill.hp{background:linear-gradient(90deg, var(--blood-dark), var(--blood-bright));}
  .bar-fill.mp{background:linear-gradient(90deg, #1f3a4d, #3f7ea3);}
  .bar-fill.xp{background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright));}
  .bar-num{font-size:10.5px;width:56px;text-align:right;color:var(--ink-soft);}
  .gold-badge{font-family:var(--font-display);font-size:13px;color:var(--gold-dim);white-space:nowrap;}

  /* ---------- location grid ---------- */
  .loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px;}
  .loc-card{
    border:1.5px solid var(--panel-line);padding:14px;border-radius:2px;
    background:rgba(255,255,255,0.15);cursor:pointer;text-align:left;
    transition:border-color 0.15s, background 0.15s;
  }
  .loc-card:hover{border-color:var(--forest);background:rgba(255,255,255,0.3);}
  .loc-card.locked{opacity:0.55;cursor:not-allowed;}
  .loc-card.locked:hover{border-color:var(--panel-line);background:rgba(255,255,255,0.15);}
  .loc-title{font-family:var(--font-display);font-weight:600;font-size:15px;margin-bottom:4px;}
  .loc-desc{font-size:13px;color:var(--ink-soft);line-height:1.4;}
  .loc-tier{font-size:11px;color:var(--blood);font-family:var(--font-display);letter-spacing:0.5px;margin-top:6px;display:block;}

  /* ---------- combat ---------- */
  .combat-stage{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px 0;flex-wrap:wrap;}
  .fighter{text-align:center;flex:1;min-width:140px;}
  .fighter-emoji{font-size:44px;display:block;margin-bottom:6px;}
  .fighter-name{font-family:var(--font-display);font-weight:600;font-size:14px;}
  .vs{font-family:var(--font-deco);color:var(--blood);font-size:22px;}
  .mini-bar-track{height:9px;background:rgba(0,0,0,0.25);border-radius:5px;overflow:hidden;margin-top:6px;border:1px solid rgba(0,0,0,0.3);}
  .mini-bar-fill{height:100%;background:linear-gradient(90deg,var(--blood-dark),var(--blood-bright));transition:width 0.35s ease;}
  .log{
    background:rgba(0,0,0,0.08);border:1px solid var(--panel-line);
    padding:10px 12px;border-radius:2px;max-height:150px;overflow-y:auto;
    font-size:13.5px;color:var(--ink-soft);margin:14px 0;
  }
  .log div{padding:2px 0;border-bottom:1px dotted rgba(0,0,0,0.1);}
  .log div:last-child{border-bottom:none;font-weight:600;color:var(--ink);}

  /* ---------- inventory ---------- */
  .inv-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
  .inv-item{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 12px;background:rgba(255,255,255,0.18);border:1px solid var(--panel-line);border-radius:2px;
  }
  .inv-name{font-size:14px;}
  .inv-qty{font-size:12px;color:var(--ink-soft);}

  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0;}
  .stat-box{background:rgba(255,255,255,0.18);border:1px solid var(--panel-line);padding:10px 12px;border-radius:2px;text-align:center;}
  .stat-val{font-family:var(--font-display);font-size:20px;font-weight:600;}
  .stat-lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);}

  .toast{
    position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
    background:var(--ink);color:var(--gold-bright);
    font-family:var(--font-display);font-size:13px;
    padding:10px 20px;border-radius:2px;border:1px solid var(--gold-dim);
    opacity:0;pointer-events:none;transition:opacity 0.3s ease, transform 0.3s ease;
    z-index:50;letter-spacing:0.5px;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

  .footer-note{text-align:center;color:var(--gold-dim);font-family:var(--font-display);font-size:11px;letter-spacing:2px;margin-top:20px;text-transform:uppercase;}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }