:root{
    --bg-deep:#0a090d;
    --bg-panel:#161219;
    --bg-panel-alt:#1e1822;
    --bg-raised:#241c29;
    --line:#3a2b38;
    --line-soft:#2a2029;
    --blood:#8f2436;
    --blood-bright:#c8425a;
    --moon:#8fa4bd;
    --moon-dim:#5c6f84;
    --bone:#ddd4c0;
    --bone-dim:#948a78;
    --gold:#c7a45c;
    --good:#5a9b6e;
    --mana:#5c7fb0;
    --shadow-deep: 0 18px 50px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 90% 60% at 50% -10%, #1c1420 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 100% 100%, #170f18 0%, transparent 55%),
      var(--bg-deep);
    color:var(--bone);
    font-family:'EB Garamond', serif;
    font-size:17px;
    min-height:100vh;
    line-height:1.5;
  }
  h1,h2,h3,h4,.display{
    font-family:'Cinzel', serif;
    letter-spacing:.02em;
    font-weight:700;
    margin:0;
  }
  button{font-family:inherit;cursor:pointer;}
  .hidden{display:none !important;}

  /* ---------- TITLE SCREEN ---------- */
  #title-screen{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px 60px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  #title-screen::before{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(circle at 50% 18%, rgba(143,36,54,.16), transparent 45%),
      repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 60px);
    pointer-events:none;
  }
  .moon-glyph{
    width:64px;height:64px;border-radius:50%;
    background:radial-gradient(circle at 35% 32%, #efe6cf, var(--moon) 70%, #3d4b5c 100%);
    box-shadow:0 0 40px 6px rgba(143,164,189,.35);
    margin-bottom:22px;
    animation:moonPulse 4s ease-in-out infinite;
  }
  @keyframes moonPulse{
    0%,100%{box-shadow:0 0 40px 6px rgba(143,164,189,.35);}
    50%{box-shadow:0 0 56px 12px rgba(143,164,189,.55);}
  }
  .title-eyebrow{
    color:var(--blood-bright);
    font-family:'Cinzel', serif;
    font-size:13px;
    letter-spacing:.35em;
    margin-bottom:10px;
  }
  #title-screen h1{
    font-size:clamp(38px,7vw,64px);
    color:var(--bone);
    text-shadow:0 0 30px rgba(200,66,90,.25);
  }
  .title-sub{
    color:var(--bone-dim);
    font-style:italic;
    font-size:19px;
    max-width:520px;
    margin:16px auto 46px;
  }
  .class-select{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    justify-content:center;
    max-width:1080px;
    position:relative;
  }
  .class-card{
    width:250px;
    background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel));
    border:1px solid var(--line);
    border-radius:4px;
    padding:26px 22px 22px;
    text-align:left;
    transition:border-color .2s, transform .2s, box-shadow .2s;
    position:relative;
  }
  .class-card::before{
    content:"";
    position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg, transparent, var(--blood), transparent);
    opacity:0;transition:opacity .2s;
  }
  .class-card:hover{
    border-color:var(--blood);
    transform:translateY(-4px);
    box-shadow:var(--shadow-deep);
  }
  .class-card:hover::before{opacity:1;}
  .class-emoji{font-size:38px;margin-bottom:10px;display:block;}
  .class-portrait-img{
    width:100%;height:120px;object-fit:cover;object-position:center 15%;
    border-radius:4px;margin-bottom:10px;display:block;
    border:1px solid var(--line);
  }
  .class-card h3{font-size:21px;color:var(--bone);margin-bottom:4px;}
  .class-tag{color:var(--blood-bright);font-size:13px;font-style:italic;margin-bottom:14px;display:block;}
  .class-stats{list-style:none;padding:0;margin:0 0 10px;font-size:14.5px;color:var(--bone-dim);}
  .class-stats li{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--line-soft);}
  .class-stats b{color:var(--bone);font-weight:600;}
  .class-skills-preview{font-size:12px;color:var(--moon);margin-bottom:16px;}
  .pick-btn{
    width:100%;
    background:transparent;
    border:1px solid var(--blood);
    color:var(--blood-bright);
    padding:10px;
    font-family:'Cinzel',serif;
    font-size:13px;
    letter-spacing:.12em;
    border-radius:2px;
    transition:background .2s,color .2s;
  }
  .pick-btn:hover{background:var(--blood);color:#0a090d;}

  /* ---------- GAME SHELL ---------- */
  #game-screen{min-height:100vh;display:flex;flex-direction:column;}
  #hud{
    position:sticky;top:0;z-index:30;
    background:linear-gradient(180deg, #150f17f2, #120d13f2);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }
  .hud-name{font-family:'Cinzel',serif;font-size:15px;color:var(--bone);white-space:nowrap;}
  .hud-name span{color:var(--blood-bright);}
  .hud-bars{display:flex;flex-direction:column;gap:5px;min-width:170px;flex:1;max-width:360px;}
  .bar-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--bone-dim);}
  .bar-track{flex:1;height:9px;border-radius:5px;background:#241a1f;border:1px solid var(--line-soft);overflow:hidden;}
  .bar-fill{height:100%;border-radius:5px;transition:width .35s ease;}
  .bar-fill.hp{background:linear-gradient(90deg,#6f1622,var(--blood-bright));}
  .bar-fill.mp{background:linear-gradient(90deg,#233a5c,var(--mana));}
  .bar-fill.xp{background:linear-gradient(90deg,#3c4f66,var(--moon));}
  .hud-coins{
    display:flex;align-items:center;gap:6px;
    color:var(--gold);font-family:'Cinzel',serif;font-size:14px;white-space:nowrap;
  }
  .hud-buff{
    display:flex;align-items:center;gap:6px;
    color:var(--good);font-size:12.5px;border:1px solid var(--good);border-radius:12px;
    padding:4px 10px;white-space:nowrap;
    animation:buffGlow 2s ease-in-out infinite;
  }
  @keyframes buffGlow{0%,100%{opacity:.75;}50%{opacity:1;}}
  #event-bar{
    display:flex;gap:14px;flex-wrap:wrap;
    background:var(--bg-panel);border-bottom:1px solid var(--line);
    padding:6px 18px;font-size:11.5px;color:var(--bone-dim);
  }
  .event-chip{white-space:nowrap;}
  .event-chip.active{color:var(--gold);animation:buffGlow 2s ease-in-out infinite;}
  .arena-buffs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:8px;}
  .arena-buff-chip{
    font-size:11px;color:var(--good);border:1px solid var(--good);border-radius:10px;
    padding:2px 8px;white-space:nowrap;animation:buffGlow 2s ease-in-out infinite;
  }
  #tabs{
    display:flex;gap:2px;
    border-bottom:1px solid var(--line);
    background:var(--bg-panel);
    overflow-x:auto;
  }
  .tab-btn{
    background:transparent;border:none;
    color:var(--bone-dim);
    padding:13px 20px;
    font-family:'Cinzel',serif;
    font-size:12.5px;
    letter-spacing:.12em;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .tab-btn.active{color:var(--bone);border-bottom-color:var(--blood);}
  .tab-btn:hover{color:var(--bone);}
  .tab-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:16px;height:16px;padding:0 4px;margin-left:6px;
    background:var(--blood-bright);color:#fff;border-radius:9px;
    font-family:'EB Garamond',serif;font-size:11px;font-weight:600;
    vertical-align:middle;
  }
  #content{flex:1;padding:26px 18px 60px;max-width:960px;margin:0 auto;width:100%;}

  /* ---------- MAP TAB ---------- */
  .map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
  .map-card{
    background:var(--bg-panel-alt);
    border:1px solid var(--line);
    border-radius:4px;
    padding:20px;
    position:relative;
    overflow:hidden;
  }
  .map-card.locked{opacity:.45;filter:grayscale(.6);}
  .map-card h3{font-size:18px;color:var(--bone);margin-bottom:3px;}
  .map-sub{font-size:13px;color:var(--blood-bright);font-style:italic;margin-bottom:12px;}
  .map-req{font-size:12.5px;color:var(--bone-dim);margin-bottom:14px;}
  .explore-box{background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:6px;padding:20px;}
  .float-num.dodge{color:var(--moon);font-size:15px;}
  .monster-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
  .monster-chip{font-size:20px;background:var(--bg-raised);border:1px solid var(--line-soft);border-radius:4px;padding:4px 7px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;}
  .avatar-img-chip{width:26px;height:26px;object-fit:cover;object-position:center 20%;border-radius:2px;}
  .enter-map-btn{
    background:var(--blood);color:#0d0a0d;border:none;
    font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.1em;
    padding:9px 16px;border-radius:2px;
  }
  .enter-map-btn:disabled{background:#3a2c31;color:#7a6c6c;cursor:not-allowed;}

  .monster-list{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
  .monster-row{
    display:flex;align-items:center;gap:14px;
    background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:4px;
    padding:12px 16px;
  }
  .monster-row.boss{border-color:var(--blood);background:linear-gradient(90deg, rgba(143,36,54,.12), var(--bg-panel-alt));}
  .monster-portrait{
    width:52px;height:52px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:26px;
    border:1px solid var(--line-soft);overflow:hidden;
  }
  .monster-info{flex:1;}
  .monster-info h4{font-size:16px;color:var(--bone);}
  .monster-info .stats{font-size:12.5px;color:var(--bone-dim);}
  .boss-tag{color:var(--blood-bright);font-size:11px;letter-spacing:.1em;font-family:'Cinzel',serif;}
  .fight-btn{
    background:transparent;border:1px solid var(--moon-dim);color:var(--moon);
    padding:8px 14px;border-radius:2px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.08em;
  }
  .fight-btn:hover{background:var(--moon-dim);color:#0a090d;}
  .back-link{
    background:none;border:none;color:var(--bone-dim);font-family:'Cinzel',serif;
    font-size:12px;letter-spacing:.08em;padding:0 0 16px;display:inline-flex;align-items:center;gap:6px;
  }
  .back-link:hover{color:var(--bone);}

  /* family portrait colors */
  .fam-lobo{background:radial-gradient(circle at 35% 30%, #33475c, #131a22); box-shadow:0 0 14px rgba(90,140,180,.25) inset;}
  .fam-troll{background:radial-gradient(circle at 35% 30%, #33471f, #141a10); box-shadow:0 0 14px rgba(120,170,70,.25) inset;}
  .fam-orc{background:radial-gradient(circle at 35% 30%, #5c3418, #1c1108); box-shadow:0 0 14px rgba(200,110,40,.25) inset;}
  .fam-vampiro{background:radial-gradient(circle at 35% 30%, #5c1424, #180509); box-shadow:0 0 14px rgba(200,50,70,.35) inset;}
  .fam-boss{border-color:var(--blood) !important; box-shadow:0 0 20px rgba(200,60,80,.45) inset, 0 0 10px rgba(200,60,80,.4);}


  /* Vertical Slice 1.1: arte como elemento central */
  .monster-row.boss .monster-portrait{width:78px;height:78px;border-radius:8px;overflow:hidden;flex:0 0 78px;}
  .monster-row.boss .monster-portrait .avatar-img-circle{border-radius:8px;}

  /* ---------- BATTLE TAB ---------- */
  .battle-arena{
    display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
    background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:6px;
    padding:30px 20px;margin-bottom:18px;position:relative;overflow:hidden;
    animation:arenaIn .4s ease;
  }
  @keyframes arenaIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  .combatant{text-align:center;position:relative;}
  .portrait-ring{
    width:156px;height:156px;border-radius:8px;margin:0 auto 12px;
    display:flex;align-items:center;justify-content:center;font-size:52px;
    border:2px solid var(--line-soft);position:relative;overflow:hidden;
  }
  .avatar-img-circle{width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:inherit;}
  .portrait-ring.player{background:radial-gradient(circle at 35% 30%, #22303d, #0f151a); box-shadow:0 0 18px rgba(90,155,110,.3) inset;}
  .portrait-ring::after{
    content:"";position:absolute;inset:-6px;border-radius:10px;
    border:1px solid rgba(255,255,255,.06);
    animation:ringSpin 9s linear infinite;
  }
  @keyframes ringSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
  .combatant h4{font-size:16px;color:var(--bone);margin-bottom:8px;}
  .vs-glyph{font-family:'Cinzel',serif;color:var(--blood-bright);font-size:20px;}
  .mini-bar{height:10px;border-radius:5px;background:#241a1f;border:1px solid var(--line-soft);overflow:hidden;margin-bottom:3px;}
  .mini-bar-fill{height:100%;transition:width .4s ease;}
  .mini-bar-fill.player{background:linear-gradient(90deg,#2d5f3f,var(--good));}
  .mini-bar-fill.enemy{background:linear-gradient(90deg,#6f1622,var(--blood-bright));}
  .mini-bar-fill.mpbar{background:linear-gradient(90deg,#233a5c,var(--mana));}
  .hp-num{font-size:12px;color:var(--bone-dim);}
  .shake{animation:shakeAnim .35s ease;}
  @keyframes shakeAnim{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-6px) rotate(-2deg);}
    40%{transform:translateX(5px) rotate(2deg);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(3px);}
  }
  .flash-hit{filter:brightness(2) saturate(0);}
  .float-num{
    position:absolute;left:50%;top:6px;transform:translateX(-50%);
    font-family:'Cinzel',serif;font-size:20px;font-weight:700;
    pointer-events:none;animation:floatUp 1s ease forwards;
    text-shadow:0 2px 6px rgba(0,0,0,.6);
  }
  .float-num.dmg{color:var(--blood-bright);}
  .float-num.heal{color:var(--good);}
  .float-num.crit{color:var(--gold);font-size:25px;text-shadow:0 0 10px rgba(199,164,92,.7),0 2px 6px rgba(0,0,0,.6);}
  @keyframes floatUp{
    0%{opacity:0;transform:translate(-50%,0) scale(.7);}
    15%{opacity:1;transform:translate(-50%,-10px) scale(1.1);}
    100%{opacity:0;transform:translate(-50%,-46px) scale(1);}
  }
  .battle-actions{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
  .action-btn{
    background:var(--blood);color:#0d0a0d;border:none;font-family:'Cinzel',serif;
    font-size:13px;letter-spacing:.1em;padding:12px 22px;border-radius:3px;transition:transform .12s;
  }
  .action-btn:active{transform:scale(.96);}
  .action-btn.secondary{background:transparent;border:1px solid var(--line);color:var(--bone-dim);}
  .action-btn.secondary:hover{border-color:var(--bone-dim);color:var(--bone);}
  .action-btn:disabled{opacity:.4;cursor:not-allowed;}
  .skills-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
  .skill-btn{
    background:var(--bg-panel-alt);border:1px solid var(--mana);color:var(--mana);
    font-family:'Cinzel',serif;font-size:12px;letter-spacing:.05em;
    padding:10px 14px;border-radius:3px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
    min-width:150px;
  }
  .skill-btn small{color:var(--bone-dim);font-family:'EB Garamond',serif;font-size:11.5px;letter-spacing:0;}
  .skill-btn:hover:not(:disabled){background:rgba(92,127,176,.15);}
  .skill-btn:disabled{opacity:.35;cursor:not-allowed;}
  .consumable-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
  .consumable-btn{
    background:var(--bg-panel-alt);border:1px solid var(--gold);color:var(--gold);
    font-family:'Cinzel',serif;font-size:12px;padding:9px 14px;border-radius:3px;
  }
  .consumable-btn:disabled{opacity:.3;cursor:not-allowed;}
  .battle-log{
    background:var(--bg-panel);border:1px solid var(--line);border-radius:4px;
    padding:14px 16px;height:170px;overflow-y:auto;font-size:14.5px;color:var(--bone-dim);
    display:flex;flex-direction:column-reverse;
  }
  .battle-log p{margin:0 0 8px;padding-bottom:8px;border-bottom:1px dashed var(--line-soft);}
  .battle-log p:last-child{color:var(--bone);}
  .battle-log .log-good{color:var(--good);}
  .battle-log .log-bad{color:var(--blood-bright);}
  .battle-log .log-drop{color:var(--gold);}
  .battle-log .log-mp{color:var(--mana);}
  .empty-battle{
    text-align:center;color:var(--bone-dim);padding:60px 20px;font-style:italic;
  }

  /* ---------- INVENTORY / EQUIP ---------- */
  .inv-layout{display:grid;grid-template-columns:280px 1fr;gap:22px;}
  @media(max-width:700px){.inv-layout{grid-template-columns:1fr;}}
  .equip-board{background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:6px;padding:18px;margin-bottom:18px;}
  .equip-slot{
    display:flex;align-items:center;gap:10px;
    padding:9px 8px;border-bottom:1px solid var(--line-soft);
    font-size:13.5px;
  }
  .equip-slot:last-child{border-bottom:none;}
  .slot-icon{width:28px;text-align:center;font-size:18px;}
  .slot-label{color:var(--bone-dim);width:70px;flex-shrink:0;font-size:12px;}
  .slot-item{flex:1;color:var(--bone);}
  .slot-item.empty{color:var(--bone-dim);font-style:italic;}
  .unequip-btn{background:none;border:none;color:var(--blood-bright);font-size:12px;}
  .rarity-comum{color:#b7ac97;}
  .rarity-raro{color:#7fb0d8;}
  .rarity-épico{color:#c07fe0;}
  .rarity-lendário{color:var(--gold);}

  .item-art-thumb{width:58px;height:58px;object-fit:contain;border-radius:6px;background:#08090b;border:1px solid var(--line);padding:3px;flex:0 0 58px;}
  .pd-slot .slot-art{width:100%;height:100%;object-fit:contain;border-radius:6px;padding:2px;}
  .equip-art-large{width:112px;height:112px;object-fit:contain;border-radius:8px;background:#08090b;border:1px solid var(--line);padding:5px;float:left;margin:0 14px 8px 0;}
  .consumable-card{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft);}
  .consumable-card:last-child{border-bottom:none}.consumable-art{width:68px;height:68px;object-fit:contain;border-radius:7px;background:#08090b;border:1px solid var(--line);padding:3px}.consumable-meta{font-size:12px;color:var(--bone-dim)}

  .consumables-board{background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:6px;padding:18px;}
  .consumables-board h4{font-size:13px;letter-spacing:.08em;color:var(--blood-bright);margin-bottom:12px;font-family:'Cinzel',serif;}
  .consumable-line{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:6px 0;}
  .inv-grid{display:flex;flex-direction:column;gap:10px;}
  .inv-item-row{
    display:flex;align-items:center;gap:12px;
    background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:4px;padding:11px 14px;
  }
  .inv-item-row .icon{font-size:22px;width:30px;text-align:center;}
  .inv-item-main{flex:1;}
  .inv-item-main .name{font-size:14.5px;}
  .inv-item-main .desc{font-size:12px;color:var(--bone-dim);}
  .inv-actions{display:flex;gap:6px;}
  .small-btn{
    font-size:11.5px;padding:7px 11px;border-radius:2px;font-family:'Cinzel',serif;letter-spacing:.05em;
    background:transparent;border:1px solid var(--line);color:var(--bone-dim);
  }
  .small-btn.equip{border-color:var(--moon-dim);color:var(--moon);}
  .small-btn.equip:hover{background:var(--moon-dim);color:#0a090d;}
  .small-btn.sell{border-color:var(--gold);color:var(--gold);}
  .small-btn.sell:hover{background:var(--gold);color:#0a090d;}
  .empty-note{color:var(--bone-dim);font-style:italic;padding:20px 0;}

  .paperdoll{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;flex-wrap:nowrap;}
  .paperdoll-col{display:flex;flex-direction:column;gap:8px;}
  .pd-slot{
    width:46px;height:46px;border-radius:8px;background:var(--bg-panel);
    border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
    font-size:21px;cursor:pointer;transition:transform .12s,border-color .12s;flex-shrink:0;
  }
  .pd-slot:hover{transform:translateY(-2px);}
  .pd-slot.empty{opacity:.35;}
  .pd-slot.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(199,164,92,.35);}
  .pd-slot.rb-comum{border-color:#8a7f6a;}
  .pd-slot.rb-raro{border-color:#4a80ad;}
  .pd-slot.rb-épico{border-color:#9a5ac2;}
  .pd-slot.rb-lendário{border-color:var(--gold);}
  .pd-slot.selected.rb-comum,.pd-slot.selected.rb-raro,.pd-slot.selected.rb-épico,.pd-slot.selected.rb-lendário{border-color:var(--gold);}
  .paperdoll-center{text-align:center;min-width:84px;flex-shrink:0;}
  .character-portrait{
    font-size:48px;width:78px;height:78px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,var(--bg-raised),var(--bg-deep));
    border:2px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;
    overflow:hidden;
  }
  .character-name{font-family:'Cinzel',serif;font-size:13px;color:var(--bone);}
  .character-level{font-size:11.5px;color:var(--bone-dim);}
  .equip-detail{
    background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:6px;padding:14px 16px;
    min-height:56px;margin-bottom:18px;
  }
  .equip-detail .placeholder{color:var(--bone-dim);font-style:italic;font-size:13px;}

  /* ---------- SHOP ---------- */
  .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:28px;}
  .shop-card{
    background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:5px;padding:18px;text-align:center;
  }
  .shop-card .icon{font-size:30px;margin-bottom:8px;display:block;}
  .shop-card h4{font-size:15px;margin-bottom:4px;}
  .shop-card p{font-size:12.5px;color:var(--bone-dim);margin:0 0 14px;min-height:34px;}
  .buy-btn{
    width:100%;background:transparent;border:1px solid var(--gold);color:var(--gold);
    padding:9px;border-radius:2px;font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.08em;
  }
  .buy-btn:hover{background:var(--gold);color:#0a090d;}
  .buy-btn:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--bone-dim);border-color:var(--line);}
  .section-title{
    font-size:14px;color:var(--blood-bright);letter-spacing:.12em;margin:0 0 14px;font-family:'Cinzel',serif;
  }
  .sell-row{
    display:flex;align-items:center;gap:12px;background:var(--bg-panel-alt);border:1px solid var(--line);
    border-radius:4px;padding:11px 14px;margin-bottom:10px;
  }

  /* ---------- STATUS ---------- */
  .status-card{background:var(--bg-panel-alt);border:1px solid var(--line);border-radius:6px;padding:26px;margin-bottom:18px;}
  .status-top{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
  .status-emoji{font-size:52px;display:inline-block;width:64px;height:64px;border-radius:50%;overflow:hidden;text-align:center;line-height:64px;}
  .status-name{font-size:22px;color:var(--bone);}
  .status-class{color:var(--blood-bright);font-style:italic;font-size:14px;}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:20px;}
  .stat-box{background:var(--bg-panel);border:1px solid var(--line-soft);border-radius:4px;padding:14px;text-align:center;}
  .stat-box .val{font-family:'Cinzel',serif;font-size:22px;color:var(--bone);}
  .stat-box .lab{font-size:11.5px;color:var(--bone-dim);letter-spacing:.08em;margin-top:2px;}
  .progress-note{font-size:13px;color:var(--bone-dim);text-align:center;}
  .alloc-grid{display:flex;flex-direction:column;gap:8px;}
  .alloc-row{display:flex;align-items:center;gap:10px;background:var(--bg-panel);border:1px solid var(--line-soft);border-radius:4px;padding:9px 12px;}
  .alloc-label{flex:1;font-size:14px;color:var(--bone);}
  .alloc-val{color:var(--good);font-family:'Cinzel',serif;font-size:13px;min-width:34px;text-align:right;}
  .skills-list{display:flex;flex-direction:column;gap:10px;}
  .skill-line{display:flex;align-items:center;gap:12px;background:var(--bg-panel);border:1px solid var(--line-soft);border-radius:4px;padding:10px 14px;}
  .skill-line .sicon{font-size:22px;width:30px;text-align:center;}
  .skill-line .sname{font-size:14.5px;color:var(--bone);}
  .skill-line .sdesc{font-size:12px;color:var(--bone-dim);}
  .skill-line.locked{opacity:.4;}

  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  ::-webkit-scrollbar-track{background:transparent;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
    background:var(--bg-raised);border:1px solid var(--blood);color:var(--bone);
    padding:12px 22px;border-radius:4px;font-size:14px;box-shadow:var(--shadow-deep);
    z-index:100;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

  /* ---------- NOTIFICATION LAYER (level up / item drop) ---------- */
  #notif-layer{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:1000;display:flex;flex-direction:column;gap:10px;align-items:center;
    pointer-events:none;width:100%;max-width:380px;
  }
  .notif-card{
    pointer-events:none;
    background:linear-gradient(180deg, var(--bg-raised), var(--bg-panel));
    border:1px solid var(--blood);
    border-radius:6px;padding:14px 20px;text-align:center;
    box-shadow:var(--shadow-deep);
    animation:notifIn .35s ease, notifOut .5s ease 5s forwards;
    width:100%;
  }
  .notif-card.levelup{border-color:var(--moon);}
  .notif-card .n-eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.25em;color:var(--blood-bright);margin-bottom:4px;}
  .notif-card.levelup .n-eyebrow{color:var(--moon);}
  .notif-card .n-title{font-family:'Cinzel',serif;font-size:18px;color:var(--bone);}
  .notif-card .n-sub{font-size:13px;color:var(--bone-dim);margin-top:3px;}
  @keyframes notifIn{from{opacity:0;transform:translateY(-16px) scale(.94);}to{opacity:1;transform:translateY(0) scale(1);}}
  @keyframes notifOut{from{opacity:1;}to{opacity:0;transform:translateY(-10px);}}


  /* ---------- TRAP VISUALS · Vertical Slice 1.2 ---------- */
  .notif-card.trap-card{padding:10px 10px 14px;max-width:360px;border-color:#7e2631;background:#100d11;}
  .trap-art{width:100%;height:190px;object-fit:cover;border-radius:5px;border:1px solid var(--line);margin-bottom:10px;display:block;background:#08090b;}
  .notif-card.trap-card .n-title{font-size:17px;}
  .notif-card.trap-card .n-sub{line-height:1.35;padding:0 8px;}
  @media (max-width:700px){.trap-art{height:180px}.notif-card.trap-card{width:calc(100vw - 24px);}}\n  /* VS 1.8 — eventos de exploração com escolhas */
  .explore-event-card{padding:18px;max-width:390px;border-color:#705d39;background:linear-gradient(180deg,#171218,#0d0b0e);pointer-events:auto;}
  .explore-event-card .n-title{font-size:21px;margin-bottom:8px;}
  .event-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
  .event-choice-btn{font-family:'Cinzel',serif;letter-spacing:.05em;font-size:12px;padding:12px 8px;border:1px solid #756a72;background:#211822;color:var(--bone);border-radius:4px;cursor:pointer;}
  .event-choice-btn.primary{border-color:var(--blood-bright);background:#4a1821;}
  .event-choice-btn:active{transform:translateY(1px);}
  @media(max-width:700px){.explore-event-card{width:calc(100vw - 24px)}.event-choice-row{grid-template-columns:1fr;}}


  /* ---------- MOBILE / iPHONE HARDENING ---------- */
  html{
    min-height:100%;
    background:var(--bg-deep);
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overscroll-behavior-y:none;
  }
  body{
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
  }
  button,.tab-btn,.pick-btn,.action-btn,.fight-btn,.enter-map-btn,.skill-btn,.consumable-btn,.small-btn{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  button{min-height:44px;}
  #title-screen,#game-screen{min-height:100vh;min-height:100svh;min-height:100dvh;}
  #title-screen{padding-top:max(32px, env(safe-area-inset-top));padding-bottom:max(48px, env(safe-area-inset-bottom));}
  #hud{padding-top:max(10px, env(safe-area-inset-top));padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));}
  #content{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));padding-bottom:max(48px, env(safe-area-inset-bottom));}
  @media (max-width:700px){
    body{font-size:16px;overflow-x:hidden;}
    #title-screen{justify-content:flex-start;padding-left:12px;padding-right:12px;}
    .moon-glyph{width:52px;height:52px;margin-top:10px;margin-bottom:14px;}
    #title-screen h1{font-size:clamp(34px,11vw,48px);}
    .title-sub{font-size:17px;margin:12px auto 28px;max-width:92vw;}
    .class-select{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:520px;}
    .class-card{width:100%;padding:18px 16px 16px;}
    .class-portrait-img{height:145px;}
    .pick-btn{min-height:48px;}
    #hud{gap:8px;padding-bottom:9px;}
    .hud-name{font-size:13px;width:100%;}
    .hud-bars{min-width:0;max-width:none;width:100%;}
    .hud-coins{position:absolute;right:max(12px, env(safe-area-inset-right));top:9px;}
    #event-bar{gap:7px;padding:6px 12px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
    #tabs{position:sticky;top:0;z-index:25;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .tab-btn{padding:12px 14px;min-width:max-content;font-size:11px;}
    #content{padding-top:16px;}
    .map-grid{grid-template-columns:1fr;gap:12px;}
    .map-card,.explore-box{padding:16px;}
    .monster-row{align-items:flex-start;gap:10px;padding:11px 12px;flex-wrap:wrap;}
    .monster-info{min-width:0;}
    .fight-btn{width:100%;min-height:44px;}
    .battle-arena{grid-template-columns:1fr auto 1fr;gap:8px;padding:18px 8px;}
    .vs-glyph{font-size:14px;}
    .portrait-ring{width:min(42vw,148px);height:min(42vw,148px);font-size:42px;}
    .battle-actions,.skills-row,.consumable-row{display:grid;grid-template-columns:1fr;gap:8px;}
    .action-btn,.skill-btn,.consumable-btn{width:100%;min-width:0;min-height:48px;}
    .battle-log{height:150px;}
    .inv-layout{grid-template-columns:1fr;gap:12px;}
    .equip-board{padding:12px;}
    .paperdoll-center{min-width:64px;}
    .alloc-grid{overflow-x:auto;}
    .toast{left:12px!important;right:12px!important;width:auto!important;}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}
  }

/* VS 1.10 — feedback mobile robusto: encontros persistentes */
#notif-layer{
  position:fixed!important; inset:0!important; transform:none!important;
  width:100%!important; max-width:none!important; z-index:10000!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  pointer-events:none!important; overflow-y:auto!important;
}
.notif-card{max-width:390px;}
.notif-card.interactive-card,.notif-card.trap-card{pointer-events:auto!important;animation:notifIn .25s ease!important;}
.explore-event-card{pointer-events:auto!important;animation:notifIn .25s ease!important;max-height:calc(100dvh - 40px);overflow-y:auto;}
.event-choice-btn{position:relative;z-index:2;touch-action:manipulation!important;pointer-events:auto!important;}
.event-result-card .event-choice-row{grid-template-columns:1fr;}
.trap-card .event-choice-row{grid-template-columns:1fr;}
.toast{left:50%!important;right:auto!important;width:min(calc(100vw - 24px),390px)!important;transform:translateX(-50%)!important;bottom:max(18px,env(safe-area-inset-bottom))!important;z-index:11000!important;text-align:center;}
.toast.show{transform:translateX(-50%) translateY(-6px)!important;}
@media(max-width:700px){
 #notif-layer{align-items:center!important;justify-content:center!important;}
 .notif-card.trap-card,.explore-event-card{width:100%!important;max-width:390px!important;}
 .trap-art{height:auto!important;aspect-ratio:16/9;object-fit:cover;}
 .event-choice-row{grid-template-columns:1fr!important;}
}


/* VS 1.12 — leitura visual do comportamento inimigo */
.arena-enemy-state{margin-top:8px;display:flex;justify-content:center;}
.arena-enemy-chip{
  display:inline-block;padding:5px 8px;border:1px solid #4b5365;border-radius:999px;
  color:#aab7d1;background:#11151e;font-size:9px;letter-spacing:.08em;line-height:1.25;
}
.arena-enemy-chip.warning{border-color:#c9a24e;color:#e1c475;background:#211b12;animation:enemyWarn 1.1s ease-in-out infinite alternate;}
.arena-enemy-chip.danger{border-color:#a92842;color:#e56b7e;background:#211017;}
@keyframes enemyWarn{from{box-shadow:0 0 0 rgba(201,162,78,0)}to{box-shadow:0 0 12px rgba(201,162,78,.28)}}
/* Romar: fallback permanece visível caso uma das artes ainda não exista. */
.romar-avatar { position:relative; display:grid; place-items:center; width:100%; height:100%; }
.romar-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.romar-transform { animation:romar-rune-pulse .65s ease-out; }
@keyframes romar-rune-pulse {
  25% { transform:translateX(-2px); filter:brightness(1.5); }
  55% { transform:translateX(2px); filter:brightness(1.2); }
  100% { transform:translateX(0); filter:brightness(1); }
}
@media (prefers-reduced-motion:reduce) { .romar-transform { animation:none; } }
/* Cenas de descoberta: arte inteira, leitura e botão sem temporizador. */
.romar-discovery { width:100%; max-width:680px; margin:0 auto; overflow:hidden; }
.romar-discovery-art { display:block; width:100%; height:auto; }
.romar-discovery-text { padding:16px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
.romar-discovery-text h2 { font-size:1.1rem; line-height:1.5; overflow-wrap:break-word; }
.romar-discovery-text p { line-height:1.65; margin:18px 0; }
.romar-discovery-text button { width:100%; white-space:normal; min-height:44px; }