:root{
    --ink:#1c150f;
    --ink-2:#241a12;
    --parchment:#ecdfc0;
    --parchment-2:#e2d2a8;
    --parchment-3:#d9c7a0;
    --leather:#4a2f1f;
    --leather-2:#3a2416;
    --ember:#c17a3b;
    --ember-bright:#dd9a52;
    --wax:#7a2323;
    --wax-bright:#9c3131;
    --sage:#5f6b4a;
    --ink-text:#2a1f14;
    --faded:#8a7654;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:
      radial-gradient(ellipse at 20% 10%, #2a1e14 0%, transparent 60%),
      radial-gradient(ellipse at 80% 90%, #1f150d 0%, transparent 55%),
      var(--ink);
    color:var(--ink-text);
    font-family:'EB Garamond', serif;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:28px 16px 60px;
  }
  .battle-backdrop{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0.9; transition:opacity .6s ease;
    overflow:hidden;
  }
  .battle-backdrop.dim{ opacity:0.45; }
  .sky-wash{
    position:absolute; inset:0;
    transition: background 1.2s ease;
  }
  .sky-wash.forest{
    background:
      radial-gradient(ellipse 900px 500px at 78% 14%, rgba(240,168,80,0.25), transparent 60%),
      linear-gradient(180deg, #241a3d 0%, #3a2440 20%, #55302f 42%, #6e3a28 58%, #4a2418 74%, #1c1108 100%);
  }
  .sky-wash.sky{
    background:
      radial-gradient(ellipse 800px 500px at 70% 18%, rgba(255,230,180,0.35), transparent 60%),
      linear-gradient(180deg, #2a3a6e 0%, #3d5490 22%, #6a7cb0 42%, #a8b8d0 60%, #7a6a8a 78%, #2e2038 100%);
  }
  .sky-wash.coastal{
    background:
      radial-gradient(ellipse 900px 500px at 65% 22%, rgba(255,190,120,0.4), transparent 60%),
      linear-gradient(180deg, #2a2050 0%, #5a3560 20%, #a4523f 42%, #d97e3f 58%, #3a3a5a 78%, #141828 100%);
  }
  .sky-wash.frozen{
    background:
      radial-gradient(ellipse 700px 450px at 72% 16%, rgba(200,230,255,0.3), transparent 60%),
      linear-gradient(180deg, #0e1c30 0%, #17324a 22%, #2c5060 42%, #3e7060 58%, #1a2a38 78%, #0a1420 100%);
  }
  .sky-wash.city{
    background:
      radial-gradient(ellipse 800px 450px at 74% 20%, rgba(230,160,90,0.3), transparent 60%),
      linear-gradient(180deg, #2a2230 0%, #4a3438 22%, #6e4a3a 42%, #8a5a34 58%, #3a2a26 78%, #140f0c 100%);
  }
  .sky-wash.wasteland{
    background:
      radial-gradient(ellipse 900px 500px at 70% 20%, rgba(255,170,90,0.35), transparent 60%),
      linear-gradient(180deg, #3a2a24 0%, #5c3a28 22%, #8a5030 42%, #b06830 58%, #4a2c1c 78%, #1c130c 100%);
  }
  .landscape-svg{ position:relative; width:100%; height:100%; display:block; }
  .ember-glow{ animation: emberPulse 2.6s ease-in-out infinite; }
  .ember-float{ animation: emberRise 6s ease-in infinite; transform-origin:center; }
  @keyframes emberPulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }
  @keyframes emberRise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.9; }
    80%{ opacity:0.6; }
    100%{ transform:translateY(-260px) translateX(18px); opacity:0; }
  }
  .snow-fall{ animation: snowFall 9s linear infinite; }
  @keyframes snowFall{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.85; }
    90%{ opacity:0.5; }
    100%{ transform:translateY(280px) translateX(-30px); opacity:0; }
  }
  .smoke-rise{ animation: smokeRise 8s ease-out infinite; }
  @keyframes smokeRise{
    0%{ transform:translateY(0) scale(1); opacity:0; }
    15%{ opacity:0.4; }
    100%{ transform:translateY(-180px) scale(2.2); opacity:0; }
  }
  .dust-drift{ animation: dustDrift 10s linear infinite; }
  @keyframes dustDrift{
    0%{ transform:translateX(0) translateY(0); opacity:0; }
    12%{ opacity:0.5; }
    88%{ opacity:0.3; }
    100%{ transform:translateX(220px) translateY(-30px); opacity:0; }
  }
  .aurora-shimmer{ animation: auroraShimmer 5s ease-in-out infinite; }
  @keyframes auroraShimmer{ 0%,100%{ opacity:0.25; } 50%{ opacity:0.55; } }
  .app{
    width:100%;
    max-width:1180px;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
    z-index:1;
  }
  .masthead{
    text-align:center;
    padding:6px 0 2px;
  }
  .masthead h1{
    font-family:'Cinzel Decorative', serif;
    font-size:clamp(28px,4vw,44px);
    color:var(--parchment);
    letter-spacing:2px;
    margin:0;
    text-shadow:0 2px 0 #000, 0 0 24px rgba(193,122,59,0.35);
  }
  .masthead .sub{
    font-family:'Cinzel', serif;
    font-size:12px;
    letter-spacing:5px;
    color:var(--ember);
    text-transform:uppercase;
    margin-top:6px;
  }
  .divider{
    height:2px;
    max-width:520px;
    margin:14px auto 0;
    background:linear-gradient(90deg, transparent, var(--ember), transparent);
    opacity:0.7;
  }

  .tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:4px;
  }
  .tab-btn{
    font-family:'Cinzel', serif;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    background:var(--leather-2);
    color:var(--parchment-3);
    border:1px solid #000;
    border-bottom:3px solid var(--ember);
    padding:10px 22px;
    cursor:pointer;
    border-radius:3px 3px 0 0;
    transition:all .15s ease;
  }
  .tab-btn.active{
    background:var(--ember);
    color:var(--ink);
    border-bottom-color:var(--wax);
  }
  .tab-btn:hover:not(.active){ color:var(--parchment); }

  .panel{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.08)),
      var(--parchment);
    border-radius:4px;
    box-shadow:0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(74,47,31,0.25);
    position:relative;
    clip-path:polygon(0% 1.2%, 1% 0%, 99% 0.4%, 100% 1.6%, 99.6% 98.5%, 98.7% 100%, 1.3% 99.6%, 0% 98.2%);
  }
  .panel::before{
    content:"";
    position:absolute; inset:10px;
    border:1px solid rgba(74,47,31,0.35);
    pointer-events:none;
  }

  /* ---------- CHARACTER TAB ---------- */
  #character-view{ display:none; padding:28px 30px 32px; }
  #character-view.active{ display:block; }
  .cs-title{
    font-family:'Cinzel', serif;
    font-size:22px;
    letter-spacing:1px;
    color:var(--leather);
    border-bottom:2px solid var(--leather);
    padding-bottom:8px;
    margin:0 0 18px;
  }
  .field-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
  .field{ flex:1; min-width:160px; }
  .field label{
    display:block;
    font-family:'Cinzel', serif;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--leather);
    margin-bottom:5px;
  }
  .field input, .field select, .field textarea{
    width:100%;
    font-family:'EB Garamond', serif;
    font-size:16px;
    padding:8px 10px;
    background:var(--parchment-2);
    border:1px solid var(--faded);
    border-radius:2px;
    color:var(--ink-text);
  }
  .field textarea{ resize:vertical; min-height:60px; }
  .concept-row{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
  .mini-btn{
    font-family:'Cinzel', serif; font-size:12px; letter-spacing:1px; text-transform:uppercase;
    background:var(--sage); color:var(--parchment); border:1px solid #000;
    border-radius:14px; padding:9px 18px; cursor:pointer; white-space:nowrap;
    box-shadow:0 2px 0 #2f3624;
  }
  .mini-btn:hover:not(:disabled){ filter:brightness(1.18); }
  .mini-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:none; }
  .mini-btn:disabled{ opacity:0.55; cursor:wait; }
  .concept-status{ font-size:13px; color:var(--faded); font-style:italic; }

  .stat-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    margin:18px 0;
  }
  .stat-box{
    background:var(--leather);
    color:var(--parchment);
    border-radius:6px;
    text-align:center;
    padding:10px 4px 8px;
    border:1px solid #000;
  }
  .stat-box .name{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:1px; color:var(--ember-bright); }
  .stat-box input{
    width:100%; text-align:center; background:transparent; border:none; color:var(--parchment);
    font-family:'Cinzel', serif; font-size:22px; font-weight:700; margin-top:2px;
  }
  .stat-box .mod{ font-size:12px; color:var(--parchment-3); margin-top:2px; }
  /* racial bonus shown under each stat, e.g. "+2 Elf -> 16" */
  .stat-box .race-bump{ font-family:'EB Garamond', serif; font-size:11px; color:var(--ember); margin-top:3px; min-height:14px; }
  /* explains why a stat won't go higher */
  .point-hint{
    font-family:'EB Garamond', serif; font-size:13px; font-style:italic; color:var(--wax);
    text-align:center; min-height:18px; opacity:0; transition:opacity .2s ease; margin:-8px 0 6px;
  }
  .point-hint.show{ opacity:1; }
  .hint{ font-size:13px; color:var(--faded); font-style:italic; margin-top:-6px; margin-bottom:16px;}

  .seal-btn{
    font-family:'Cinzel', serif;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-size:14px;
    background:radial-gradient(circle at 35% 30%, var(--wax-bright), var(--wax) 70%);
    color:var(--parchment);
    border:2px solid #2b0f0f;
    padding:12px 28px;
    border-radius:26px;
    cursor:pointer;
    box-shadow:0 4px 0 #3d1212, 0 8px 16px rgba(0,0,0,0.4);
  }
  .seal-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #3d1212; }
  .seal-btn:disabled{ opacity:0.5; cursor:not-allowed; }
  .btn-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .ghost-btn{
    font-family:'Cinzel', serif; letter-spacing:1px; text-transform:uppercase; font-size:13px;
    background:transparent; color:var(--leather); border:1px solid var(--leather);
    padding:11px 20px; border-radius:26px; cursor:pointer;
  }
  .ghost-btn:hover{ background:var(--leather); color:var(--parchment); }
  .points-readout{
    font-family:'Cinzel', serif; font-size:13px; letter-spacing:1px; color:var(--leather);
    margin-bottom:10px;
  }
  .points-readout.over{ color:var(--wax); }

  /* ---------- ADVENTURE TAB ---------- */
  #adventure-view{ display:none; }
  #adventure-view.active{ display:block; }
  .adventure-top{ display:flex; gap:16px; align-items:flex-start; }
  .main-col{ flex:2; min-width:0; display:flex; flex-direction:column; gap:16px; }
  .journal-col{ min-width:0; padding:0; }
  .side-col{ flex:1; min-width:260px; display:flex; flex-direction:column; gap:16px; }

  .journal-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 24px 12px; border-bottom:2px solid var(--leather);
  }
  .journal-head h2{ font-family:'Cinzel', serif; font-size:18px; color:var(--leather); margin:0; letter-spacing:1px;}
  .reset-link{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:1px; color:var(--wax); background:none; border:none; cursor:pointer; text-decoration:underline; }
  .journal-actions{ display:flex; gap:14px; align-items:center; }
  /* a destructive link waiting for its second click — must be unmissable, since
     this is the only warning the player gets before an adventure ends */
  .reset-link.armed{
    color:var(--parchment); background:var(--wax);
    padding:2px 8px; border-radius:3px; text-decoration:none; font-weight:700;
  }
  @media (prefers-reduced-motion: no-preference){
    .reset-link.armed{ animation:armed-pulse 1.1s ease-in-out infinite; }
    @keyframes armed-pulse{ 50%{ opacity:.6; } }
  }
  /* offer to put back the safety copy of a previous campaign */
  .restore-row{
    margin:10px 0 0; padding:10px 12px; background:var(--parchment-2);
    border:1px dashed var(--faded); border-radius:5px;
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  }
  .restore-text{ font-family:'EB Garamond', serif; font-size:13.5px; color:var(--ink-text); }

  /* first-run help: what's missing and how to fix it */
  .setup-panel{
    margin:0 0 22px; padding:16px 18px; border-radius:6px;
    background:var(--parchment-2); border:2px solid var(--wax);
    font-family:'EB Garamond', serif; color:var(--ink-text);
  }
  .setup-title{ font-family:'Cinzel', serif; font-size:16px; color:var(--wax); margin-bottom:8px; }
  .setup-panel p{ margin:6px 0; font-size:14px; line-height:1.55; }
  .setup-steps{ margin:8px 0 12px; padding-left:22px; font-size:14px; line-height:1.7; }
  .setup-panel code{
    font-family:ui-monospace, Consolas, monospace; font-size:12.5px;
    background:var(--parchment-3); padding:2px 6px; border-radius:3px;
  }
  .setup-note{ font-size:13px; color:var(--faded); }
  .setup-models{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px; }
  .model-pick{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    font-family:'Cinzel', serif; font-size:13px; text-align:left;
    background:var(--leather); color:var(--parchment);
    border:1px solid #000; border-radius:5px; padding:8px 12px; cursor:pointer;
  }
  .model-pick:hover{ background:var(--leather-2); }
  .model-hint{ font-family:'EB Garamond', serif; font-size:11px; color:var(--parchment-3); }
  .restore-row .ghost-btn{ padding:5px 10px; font-size:12px; }

  .log{
    height:480px;
    overflow-y:auto;
    padding:18px 26px;
    line-height:1.65;
    font-size:17px;
    background-image:repeating-linear-gradient(180deg, transparent, transparent 30px, rgba(74,47,31,0.12) 31px);
  }
  .log::-webkit-scrollbar{ width:10px; }
  .log::-webkit-scrollbar-thumb{ background:var(--leather); border-radius:6px;}
  .entry{ margin-bottom:16px; }
  .entry.dm{ color:var(--ink-text); }
  .entry.dm .tag{ color:var(--leather); }
  .entry.player{ color:#3a2b17; font-style:italic; }
  .entry.player .tag{ color:var(--wax); }
  .tag{
    font-family:'Cinzel', serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    display:block; margin-bottom:3px;
  }
  .entry.system{ color:var(--faded); font-size:14px; text-align:center; font-style:italic; }

  .input-row{
    display:flex; gap:10px; padding:16px 24px 22px; border-top:1px solid rgba(74,47,31,0.3);
  }
  .input-row input{
    flex:1; font-family:'EB Garamond', serif; font-size:16px; padding:10px 12px;
    background:var(--parchment-2); border:1px solid var(--faded); border-radius:3px; color:var(--ink-text);
  }
  .go-btn{
    font-family:'Cinzel', serif; font-size:13px; letter-spacing:1px; text-transform:uppercase;
    background:var(--ember); color:var(--ink); border:1px solid #000; border-radius:3px;
    padding:0 20px; cursor:pointer;
  }
  .go-btn:disabled{ opacity:0.5; cursor:wait; }
  .thinking{ font-size:13px; color:var(--faded); font-style:italic; padding:0 24px 10px; }

  /* dice tray */
  .dice-tray, .sheet-mini, .hp-box, .foes-box{
    padding:18px 20px 20px;
  }
  .dice-tray h3, .sheet-mini h3, .hp-box h3, .foes-box h3{
    font-family:'Cinzel', serif; font-size:14px; letter-spacing:1.5px; color:var(--leather);
    text-transform:uppercase; margin:0 0 12px; border-bottom:1px solid var(--leather); padding-bottom:6px;
  }
  .dice-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
  .die-btn{
    font-family:'Cinzel', serif; font-size:13px; background:var(--leather); color:var(--parchment);
    border:1px solid #000; border-radius:5px; padding:9px 0; cursor:pointer;
  }
  .die-btn:hover{ background:var(--leather-2); }
  /* the die the player actually needs right now */
  .die-btn.die-needed{
    background:var(--wax); color:var(--parchment); border-color:#000;
    box-shadow:0 0 0 2px var(--ember), 0 0 12px rgba(214,158,46,0.7);
    animation:die-pulse 1.4s ease-in-out infinite;
  }
  .die-btn.die-dimmed{ opacity:0.4; }
  @keyframes die-pulse{
    0%,100%{ box-shadow:0 0 0 2px var(--ember), 0 0 6px rgba(214,158,46,0.5); }
    50%    { box-shadow:0 0 0 2px var(--ember), 0 0 16px rgba(214,158,46,0.95); }
  }
  @media (prefers-reduced-motion: reduce){ .die-btn.die-needed{ animation:none; } }
  .roll-result{
    font-family:'Cinzel', serif; text-align:center; font-size:26px; color:var(--wax);
    min-height:34px; margin:6px 0;
  }
  .mod-row{ display:flex; align-items:center; gap:8px; justify-content:center; font-size:13px; color:var(--faded); }
  .mod-row input{ width:50px; text-align:center; padding:4px; }
  .roll-log{ font-size:12px; color:var(--faded); max-height:70px; overflow-y:auto; margin-top:8px; }

  .hp-controls{ display:flex; align-items:center; justify-content:center; }
  .hp-num{ font-family:'Cinzel', serif; font-size:32px; color:var(--wax); text-align:center;}
  .hp-max{ font-size:13px; color:var(--faded); text-align:center; margin-top:4px;}
  .hit-dice{ font-size:11.5px; color:var(--faded); text-align:center; margin-top:6px; font-style:italic; }
  .slot-line{ margin-top:4px; color:var(--leather); font-style:normal; letter-spacing:1px; }
  .rage-line{ margin-top:4px; color:var(--wax); font-style:normal; font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:1px; }
  /* small badge on a spell card saying whether it costs a slot */
  .spell-lvl, .spell-cantrip{
    flex:0 0 auto; font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.5px;
    text-transform:uppercase; border-radius:3px; padding:2px 6px; white-space:nowrap;
  }
  .spell-lvl{ color:var(--parchment); background:var(--wax); }
  .spell-cantrip{ color:var(--faded); border:1px solid var(--faded); }
  .swing-tag{ font-size:11px; color:var(--wax); font-family:'Cinzel',serif; letter-spacing:.5px; }

  /* conditions currently affecting the PLAYER (shown below the health) */
  .player-conditions{ display:none; margin-top:10px; padding-top:8px; border-top:1px solid var(--leather); text-align:center; }
  .player-conditions.show{ display:block; }
  .pc-label{ display:block; font-family:'Cinzel',serif; font-size:10px; letter-spacing:1px; color:var(--faded); text-transform:uppercase; margin-bottom:5px; }
  .pc-chip{ display:inline-block; font-family:'EB Garamond',serif; font-size:13px; color:var(--parchment); background:var(--wax); border-radius:4px; padding:2px 8px; margin:2px 3px; }

  .sheet-mini dl{ margin:0; font-size:14px; }
  .sheet-mini dt{ font-family:'Cinzel', serif; font-size:10px; letter-spacing:1px; color:var(--faded); text-transform:uppercase; margin-top:8px;}
  .sheet-mini dd{ margin:0; }
  .mini-subhead{ font-family:'Cinzel', serif; font-size:10px; letter-spacing:1px; color:var(--faded); text-transform:uppercase; margin:10px 0 4px; }
  /* racial trait on the character sheet */
  .race-perk{ font-size:13px; }
  .race-perk b{ color:var(--wax); }
  .race-perk.spent{ opacity:.55; }
  .perk-spent{ font-size:11px; color:var(--faded); font-style:italic; }
  .perk-desc{ font-size:12px; color:var(--faded); line-height:1.45; margin-top:2px; }
  .xp-bar{ width:100%; height:8px; background:var(--parchment-3); border:1px solid var(--faded); border-radius:4px; overflow:hidden; margin-top:4px;}
  .xp-bar-fill{ height:100%; background:var(--sage); }

  /* foes in the current fight — one health bar each (header style shared with
     the other side panels via the rule above) */
  .foe{ margin-bottom:12px; }
  .foe:last-child{ margin-bottom:0; }
  .foe-row{ display:flex; justify-content:space-between; align-items:baseline; }
  .foe-name{ font-family:'Cinzel', serif; font-size:14px; color:var(--ink-text); }
  .foe-hp{ font-family:'EB Garamond', serif; font-size:13px; color:var(--faded); }
  .foe-bar{ width:100%; height:11px; background:var(--parchment-3); border:1px solid var(--faded); border-radius:5px; overflow:hidden; margin-top:3px; }
  .foe-bar-fill{ height:100%; transition:width .35s ease; }
  .foe-bar-fill.hp-high{ background:#5a7d3c; }
  .foe-bar-fill.hp-mid{ background:#b8862c; }
  .foe-bar-fill.hp-low{ background:var(--wax); }
  .foe-meta{ font-size:11px; color:var(--faded); margin-top:2px; }
  /* combat roll buttons in the check-prompt banner */
  .atk-btn{ font-family:'Cinzel', serif; font-size:12px; letter-spacing:.5px; background:var(--wax); color:var(--parchment); border:1px solid #000; border-radius:5px; padding:7px 12px; margin-top:4px; cursor:pointer; }
  .atk-btn:hover{ background:var(--wax-bright); }
  .atk-cancel{ font-family:'EB Garamond', serif; font-size:12px; background:none; border:none; color:var(--faded); text-decoration:underline; cursor:pointer; margin-left:6px; }
  .atk-cancel:hover{ color:var(--wax); }

  /* death saving throws */
  .death-pips{ margin-left:10px; letter-spacing:2px; }
  .death-teach{ font-size:12.5px; color:var(--faded); font-style:italic; margin-top:6px; line-height:1.5; }

  /* memorial screen (shown when the character has died) */
  .memorial{ text-align:center; padding:26px 24px 30px; border-top:1px solid var(--faded); }
  .memorial-rune{ font-size:34px; margin-bottom:6px; }
  .memorial-name{ font-family:'Cinzel', serif; font-size:24px; letter-spacing:1px; color:var(--wax); }
  .memorial-line{ font-family:'EB Garamond', serif; font-size:14px; color:var(--faded); margin-top:4px; }
  .memorial-quote{ font-style:italic; margin-top:10px; }
  .memorial .seal-btn{ margin-top:18px; }


  /* check prompt banner (shown when the DM asks for a roll) */
  .check-prompt{
    display:none; margin-top:10px; padding:8px 12px; border-radius:6px;
    background:var(--leather); border:1px solid var(--ember);
    font-family:'EB Garamond', serif; font-size:14px; color:var(--parchment);
  }
  .check-prompt.show{ display:block; }
  .check-prompt b{ color:var(--ember-bright); }

  /* weapons & spells section — its own padded panel, left of the inventory */
  .arsenal{ margin-top:0; padding:16px 18px 18px; }
  .arsenal h3{ margin-top:0; }
  .ars-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; }
  .ars-col{ min-width:0; }
  .ars-col-title{ font-family:'Cinzel',serif; font-size:12px; letter-spacing:1px; color:var(--wax); text-transform:uppercase; margin-bottom:8px; border-bottom:1px solid var(--leather); padding-bottom:4px; }
  .ars-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .ars-item{ border:1px solid var(--leather-2); border-radius:8px; padding:10px 13px; background:var(--parchment-3); min-width:0; }
  .ars-head{ display:flex; align-items:baseline; gap:8px; }
  .ars-icon{ flex:0 0 auto; font-size:18px; line-height:1; }
  .ars-name{ font-family:'Cinzel',serif; font-size:15px; color:var(--leather-2); flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
  .ars-dmg{ flex:0 0 auto; font-family:'Cinzel',serif; font-size:13px; font-weight:700; color:var(--wax-bright); }
  .ars-eff{ font-family:'EB Garamond',serif; font-size:13.5px; color:var(--leather-2); font-weight:600; margin-top:3px; overflow-wrap:anywhere; }
  .ars-cond{ font-family:'EB Garamond',serif; font-size:13px; color:var(--wax); margin-top:4px; line-height:1.35; overflow-wrap:anywhere; }
  .ars-cond b{ color:var(--wax-bright); }
  .ars-desc{ font-family:'EB Garamond',serif; font-size:13.5px; color:var(--ink-text); margin-top:3px; font-style:italic; line-height:1.4; overflow-wrap:anywhere; }
  .ars-empty{ font-family:'EB Garamond',serif; font-size:14px; color:var(--leather); font-style:italic; padding:4px 0; }
  @media (max-width: 700px){ .ars-cols{ grid-template-columns:1fr; } }

  /* active enemy conditions banner (below the story log) */
  .conditions-bar{ display:none; padding:8px 12px; margin-top:8px; border-radius:6px; background:var(--leather); border:1px solid var(--wax); }
  .conditions-bar.show{ display:block; }
  .cond-label{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:1px; color:var(--ember-bright); text-transform:uppercase; margin-right:6px; }
  .cond-chip{ display:inline-block; font-family:'EB Garamond',serif; font-size:13px; color:var(--parchment); background:var(--wax); border-radius:4px; padding:2px 8px; margin:2px 3px; }

  .inv-list{ list-style:none; padding:0; margin:8px 0 10px; font-size:14px; }
  .inv-list li{ display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px dashed var(--faded); }
  .inv-icon{ flex:0 0 auto; }
  .inv-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inv-dmg{ flex:0 0 auto; font-family:'Cinzel',serif; font-size:11px; color:var(--ember-bright); background:rgba(0,0,0,0.25); border:1px solid var(--leather); border-radius:4px; padding:1px 6px; }
  .inv-qty{ flex:0 0 auto; color:var(--faded); font-size:12px; min-width:22px; text-align:right; }

  /* ---------- tablets: stack the two columns ---------- */
  @media (max-width: 860px){
    .adventure-top{ flex-direction:column; }
    .side-col{ min-width:0; }
    .log{ height:340px; }
  }

  /* ---------- phones ---------- */
  /* Everything below assumes a thumb, not a mouse: full-width panels, bigger
     tap targets (44px is the accepted minimum), and no side-scrolling. */
  @media (max-width: 620px){
    .app{ padding:14px 10px 40px; }
    .masthead h1{ font-size:34px; }
    .masthead .sub{ font-size:11px; letter-spacing:2px; }
    .divider{ margin:10px 0 14px; }

    /* forms stack; inputs stay big enough not to zoom Safari on focus */
    #character-view{ padding:18px 16px 22px; }
    .field-row{ flex-direction:column; gap:12px; }
    .field input, .field select, .field textarea{ font-size:16px; }
    .cs-title{ font-size:19px; }

    /* six stats across is unreadable on a phone — go three by two */
    .stat-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
    .stat-box{ padding:8px 4px; }
    .stat-box input{ font-size:20px; }
    .stat-box .race-bump{ font-size:10px; }

    .btn-row{ flex-direction:column; align-items:stretch; gap:10px; }
    .btn-row button{ width:100%; }

    /* the story is the main event: give it room and keep it scrollable */
    .journal-col{ padding:16px 14px; }
    .log{ height:52vh; min-height:280px; }
    .journal-head h2{ font-size:16px; }
    .journal-actions{ gap:10px; }

    /* action bar: thumb-sized */
    .input-row{ gap:8px; }
    #action-input{ font-size:16px; padding:12px 12px; }
    .go-btn{ padding:12px 18px; font-size:14px; }

    /* dice: four across, tall enough to hit reliably */
    .dice-row{ grid-template-columns:repeat(4,1fr); gap:7px; }
    .die-btn{ padding:14px 0; font-size:14px; min-height:46px; }
    .roll-result{ font-size:17px; }

    /* side panels */
    .dice-tray, .sheet-mini, .hp-box, .foes-box{ padding:14px 14px 16px; }
    .hp-num{ font-size:28px; }
    .ars-cols{ grid-template-columns:1fr; }

    /* setup help and the restore offer */
    .setup-panel{ padding:14px 15px; }
    .setup-models{ flex-direction:column; }
    .model-pick{ width:100%; }
    .restore-row{ flex-direction:column; align-items:stretch; }
  }

  /* Small phones (iPhone SE and similar) */
  @media (max-width: 380px){
    .stat-grid{ grid-template-columns:repeat(2,1fr); }
    .dice-row{ grid-template-columns:repeat(3,1fr); }
    .masthead h1{ font-size:28px; }
  }

  /* Touch devices: no hover states, and never let a tap zoom the page */
  @media (hover: none){
    .die-btn, .go-btn, .ghost-btn, .seal-btn, .atk-btn, .model-pick{ touch-action:manipulation; }
  }