/* Shardfall "Realm" skin: a classic fantasy JRPG look. Deep starlit-blue windows with gilded borders,
   parchment text, Cinzel for titles and Pixelify Sans for text (a soft pixel font), DotGothic16 for
   Japanese. Crimson, emerald and sky-blue accents. Loaded last, so it restyles every screen. */
:root{
  --r-ink:#080a1c; --r-night:#0d1030; --r-deep:#161a45; --r-blue:#2a2f6e; --r-hi:#3a4296;
  --r-gold:#f0c96a; --r-gold2:#c9a24a; --r-gold3:#8a6a2a; --r-parch:#f3e9cf; --r-mute:#b9b0d6; --r-dim:#7c769c;
  --r-red:#d8443c; --r-red2:#8f1f1a; --r-grn:#4fc07a; --r-sky:#7fd6f0; --r-vio:#b58cff; --r-pink:#f38fc0;
  --display:'Cinzel', 'Alegreya SC', Georgia, serif;
  --body:'Pixelify Sans', 'DotGothic16', 'Alegreya Sans', system-ui, sans-serif;
  --jp:'DotGothic16', 'Pixelify Sans', sans-serif;
  --parch:#f3e9cf; --muted:#b9b0d6; --gold-1:#f0c96a; --gold-2:#c9a24a; --ember:#f0c96a;
  --r-win: linear-gradient(180deg, rgba(46,52,120,.97) 0%, rgba(24,28,72,.97) 55%, rgba(13,16,48,.98) 100%);
  --r-plate: linear-gradient(180deg, rgba(36,41,98,.95), rgba(16,19,54,.96));
  --r-frame: 0 0 0 2px var(--r-ink), inset 0 0 0 1px rgba(255,236,180,.28), inset 0 1px 0 2px rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.5);
}
html, body{ font-family: var(--body); }

/* ---------- windows ---------- */
.panel, .modal .card, .bagcard, .forgeui, .dialog, .skillbar, .pill, .chip, .cls, .toast, .hloc, .prompt, .ntag, .statgrid, .detail, .fstats, .fchance,
.dock, .buff, .chatin input, #name, .netstat, .dicon, .bskills .bsk svg, .questbox, .partyframes .pf, .gpanel .bagcard, .npcdlg, .srow, .srow2, .brow, .psec,
.chat, .authform input, .acct, .cinecap, .mapres .pill, .keys, .lore-card, .slot, .skill, .rotatehint{
  border-image: none !important; background: var(--r-plate) !important; color: var(--r-parch);
  border: 2px solid var(--r-gold2) !important; border-radius: 7px !important; box-shadow: var(--r-frame) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.panel, .modal .card, .bagcard, .forgeui, .dialog, .npcdlg, .questbox, .skillbar, .gpanel .bagcard{
  background: var(--r-win) !important; border: 2px solid var(--r-gold) !important; border-radius: 10px !important;
  box-shadow: 0 0 0 2px var(--r-ink), 0 0 0 4px var(--r-gold3), inset 0 0 0 1px rgba(255,236,180,.3), 0 16px 40px rgba(0,0,0,.55) !important;
}
.modal{ background: rgba(6,7,20,.55) !important; }
.card h2, .bagcard h2, .brand, .cinecap b, .fresult b, .ltitle, .modal .card h2, .baghead h2{
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--r-gold) !important;
  font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: .06em; text-shadow: 0 2px 0 var(--r-ink), 0 0 14px rgba(240,201,106,.25) !important;
}
.modal .card h2{ font-size: 24px !important; }
.modal .card h2::after{ background: linear-gradient(90deg, transparent, var(--r-gold2), transparent) !important; height: 1px !important; }
.eyebrow, .card .eyebrow, .modal .card .eyebrow, .gpanel .gpeye, .label, .psec h4, .srow > span, .authform label, .invhead .label, .bskills .label, .fhead .eyebrow{
  font-family: var(--display) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .16em !important; color: var(--r-gold) !important; text-transform: uppercase;
}
.srow small, .pnote, .hint, .brow small, .srow2 small, .detail .dflav, .dtype{ color: var(--r-mute) !important; }
.brand small{ color: var(--r-mute) !important; }

/* ---------- buttons ---------- */
.btn, .dopt, .seg button, .tab, .iconbtn, .dock button, .toggle{
  border-image: none !important; font-family: var(--display) !important; font-weight: 700; letter-spacing: .05em;
  background: linear-gradient(180deg, #343b8c, #1a1e52) !important; color: var(--r-parch) !important;
  border: 2px solid var(--r-gold2) !important; border-radius: 6px !important;
  box-shadow: 0 0 0 1px var(--r-ink), inset 0 1px 0 rgba(255,255,255,.12) !important; filter: none !important; text-shadow: 0 1px 0 var(--r-ink) !important;
}
.btn:hover, .dopt:hover, .seg button:hover, .iconbtn:hover, .dock button:hover{ border-color: var(--r-gold) !important; background: linear-gradient(180deg, #4048a6, #23286a) !important; box-shadow: 0 0 0 1px var(--r-ink), 0 0 12px rgba(240,201,106,.35) !important; }
.btn.primary{ background: linear-gradient(180deg, #f6dc8a, #c9932f) !important; color: #2a1606 !important; border-color: #fff0c0 !important; text-shadow: 0 1px 0 rgba(255,240,200,.5) !important; }
.btn.primary:hover{ background: linear-gradient(180deg, #ffe7a0, #d9a33f) !important; }
.btn.danger{ border-color: var(--r-red) !important; color: #ffb0a6 !important; }
.btn:disabled, .btn.primary:disabled{ filter: grayscale(.8) brightness(.7) !important; cursor: not-allowed; }
.btn[aria-pressed="true"], .seg button[aria-pressed="true"], .authtabs .btn[aria-pressed="true"], .chip[aria-pressed="true"], .cls[aria-pressed="true"]{
  border-color: var(--r-gold) !important; background: linear-gradient(180deg, #4a52b8, #262c78) !important; box-shadow: 0 0 0 1px var(--r-ink), 0 0 14px rgba(240,201,106,.4) !important;
}
.tab{ background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--r-mute) !important; }
.tab[aria-selected="true"]{ color: var(--r-gold) !important; border-bottom-color: var(--r-gold) !important; }
.iconbtn svg{ stroke: var(--r-gold) !important; }
.linkbtn{ color: var(--r-mute) !important; font-family: var(--body) !important; }
.linkbtn:hover{ color: var(--r-gold) !important; }
kbd, .dopt kbd, .prompt kbd, .skill kbd{ font-family: var(--display) !important; font-weight: 700; background: linear-gradient(180deg, #f6dc8a, #c9932f) !important; color: #2a1606 !important; border: 0 !important; border-radius: 4px !important; border-image: none !important; box-shadow: 0 1px 0 var(--r-ink) !important; }
.prompt kbd::after{ display: none !important; }
.dopt{ text-align: left; }
.dopt:hover::before{ content: "▸ "; color: var(--r-gold); }
.toggle::after{ background: var(--r-parch) !important; }
.toggle[aria-pressed="true"]{ background: linear-gradient(180deg, #5fd08a, #2f8a52) !important; }
input[type=range]{ accent-color: var(--r-gold); }

/* ---------- creator ---------- */
.cls h4{ font-family: var(--display) !important; color: var(--r-gold) !important; }
.cls svg{ background: radial-gradient(circle, rgba(127,214,240,.2), rgba(8,10,28,.6)) !important; border: 1px solid var(--r-gold2) !important; stroke: var(--r-sky) !important; }
#name{ font-family: var(--display) !important; color: var(--r-gold) !important; }
.sw[aria-pressed="true"]{ box-shadow: 0 0 0 2px var(--r-ink), 0 0 0 4px var(--r-gold), 0 0 10px rgba(240,201,106,.6) !important; }
.sheet b, .statgrid b{ color: var(--r-gold) !important; font-family: var(--display) !important; }

/* ---------- HUD ---------- */
.avain{ border: 2px solid var(--r-gold); box-shadow: 0 0 0 2px var(--r-ink), 0 0 12px rgba(240,201,106,.3) !important; background: radial-gradient(circle at 50% 35%, #3a4296, #0d1030 75%) !important; }
.lvl{ font-family: var(--display) !important; }
.pname b{ font-family: var(--display) !important; color: var(--r-gold) !important; }
.pname span{ color: var(--r-sky) !important; }
.hpbar, .xpbar{ border-radius: 4px !important; background: #1a0a12 !important; border: 1px solid var(--r-gold2) !important; box-shadow: 0 0 0 1px var(--r-ink) !important; }
.hpbar::before, .hpbar::after, .xpbar::before, .xpbar::after{ display: none !important; }
.hpbar i{ border-radius: 3px !important; background: linear-gradient(180deg, #ff6a5a, var(--r-red) 50%, var(--r-red2)) !important; }
.hpbar em{ background: rgba(255,230,190,.55) !important; border-radius: 3px !important; }
.xpbar i{ border-radius: 3px !important; background: linear-gradient(180deg, #b0f0ff, var(--r-sky) 45%, #4a5ad8) !important; }
.hpbar span, .xpbar span{ font-family: var(--body) !important; color: var(--r-parch) !important; text-shadow: 0 1px 0 var(--r-ink), 0 0 3px var(--r-ink) !important; }
.mapframe{ border: 3px solid var(--r-gold) !important; box-shadow: 0 0 0 2px var(--r-ink), 0 0 0 5px var(--r-gold3), 0 10px 28px rgba(0,0,0,.5) !important; background: var(--r-night) !important; }
.mapframe::before, .mapframe::after{ display: none !important; }
.mapN{ font-family: var(--display) !important; font-weight: 700; background: var(--r-red) !important; color: #fff !important; border: 1px solid var(--r-gold) !important; border-radius: 50% !important; }
.skill > svg{ stroke: var(--r-parch) !important; }
.skill.ult{ border-color: var(--r-gold) !important; box-shadow: 0 0 0 2px var(--r-ink), 0 0 14px rgba(240,201,106,.4) !important; }
.skill.ult::before{ display: none !important; }
.skill .cdt{ color: var(--r-gold) !important; font-family: var(--display) !important; }
.skill .lock{ background: rgba(8,10,28,.85) !important; color: var(--r-mute) !important; }
.skill.potion b{ background: var(--r-red) !important; color: #fff !important; }
.sdiv{ background: linear-gradient(180deg, transparent, var(--r-gold2), transparent) !important; }
.prompt{ font-family: var(--display) !important; font-weight: 700; }
.toast{ font-family: var(--display) !important; font-weight: 700; }
.toast.level, .toast.discover{ color: var(--r-gold) !important; border-color: var(--r-gold) !important; }
.toast.gold{ color: var(--r-gold) !important; } .toast.shard{ color: var(--r-sky) !important; } .toast.warn{ color: #ff9a8a !important; border-color: var(--r-red) !important; }
.toast.loot{ color: #9ff0b0 !important; } .toast.buff{ color: var(--r-pink) !important; }
.hloc b{ font-family: var(--display) !important; color: var(--r-gold) !important; }
.hloc{ color: var(--r-mute) !important; }
.ft{ font-family: var(--display) !important; font-weight: 700; text-shadow: 0 2px 0 var(--r-ink), 0 0 4px var(--r-ink) !important; }
.ft.crit{ color: var(--r-gold) !important; } .ft.xp{ color: var(--r-vio) !important; } .ft.heal{ color: #9ff0b0 !important; } .ft.hurt{ color: #ff7a6a !important; }
.ebar span{ font-family: var(--display) !important; color: var(--r-parch) !important; text-shadow: 0 1px 0 var(--r-ink), 0 0 3px var(--r-ink) !important; }
.ebar i{ background: #1a0a12 !important; border: 1px solid var(--r-gold2) !important; border-radius: 3px !important; }
.ebar i b{ background: linear-gradient(180deg, #ff6a5a, var(--r-red2)) !important; border-radius: 2px !important; }
.ebar.boss i{ border-color: var(--r-gold) !important; }

/* quest tracker */
.questbox h4{ font-family: var(--display) !important; color: var(--r-parch) !important; }
.questbox h4.story{ color: var(--r-gold) !important; }
.questbox h4.side, .questbox h4.side.sub{ color: #8fe8d2 !important; }
/* the dodge button sits just above jump; a dark sweep drains away while it recharges */
body.touch .jump.dodge svg{ position: relative; z-index: 1; }
.dcd{ position: absolute; inset: 0; background: rgba(5,6,20,.7); transform: scaleY(0); transform-origin: bottom; pointer-events: none; border-radius: 50%; }
.questbox h4.sub{ color: var(--r-sky) !important; border-top: 1px solid rgba(240,201,106,.25) !important; padding-top: 8px; }
.questbox li{ color: var(--r-parch) !important; }
.questbox li i{ background: var(--r-night) !important; border: 1px solid var(--r-gold2) !important; }
.questbox li.done{ color: var(--r-dim) !important; } .questbox li.done i{ background: var(--r-grn) !important; }
.questbox li.go{ color: var(--r-gold) !important; } .questbox li.go i{ background: var(--r-gold) !important; box-shadow: 0 0 8px var(--r-gold) !important; }
.questbox li b{ color: var(--r-sky) !important; }

/* panels */
.slot.sel{ border-color: var(--r-gold) !important; box-shadow: 0 0 0 2px var(--r-ink), 0 0 12px rgba(240,201,106,.45) !important; }
.detail h3, .brow b, .srow2 b, .pf b{ font-family: var(--display) !important; color: var(--r-parch) !important; }
.pay{ color: var(--r-gold) !important; font-family: var(--display) !important; }
.pf i{ border: 1px solid var(--r-gold2) !important; background: #1a0a12 !important; }
.pf i em{ background: linear-gradient(180deg, #8ff0a8, #2f8a52) !important; }

/* dialogue */
.dname, .npcdlg .dname{ background: linear-gradient(180deg, #f6dc8a, #c9932f) !important; color: #2a1606 !important; border: 1px solid #fff0c0 !important; border-image: none !important;
  border-radius: 6px !important; clip-path: none !important; padding: 5px 14px !important; font-family: var(--display) !important; font-weight: 700; box-shadow: 0 0 0 2px var(--r-ink) !important; text-shadow: none !important; }
.dname::before, .dname::after{ display: none !important; }
.djp{ font-family: var(--jp); font-size: 16px; color: var(--r-sky); margin: 8px 0 2px; }
.dtext, .npcdlg .dtext{ font-family: var(--body) !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--r-parch) !important; }
.lore-card blockquote{ color: var(--r-parch) !important; border-left: 3px solid var(--r-gold2) !important; }

/* loading */
.lsub{ font-family: var(--display) !important; color: var(--r-sky) !important; }
.lbar{ border: 1px solid var(--r-gold2) !important; background: var(--r-night) !important; border-radius: 4px !important; }
.lbar i{ background: linear-gradient(90deg, var(--r-sky), var(--r-vio)) !important; }

/* ---------- compass, voice lines, Kira, world map, boss bar ---------- */
.compass{ position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(440px, 34vw); height: 44px; z-index: 3;
  background: none; border: 0; box-shadow: none; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.compass::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,201,106,.55), transparent); }
.compass .ctrack{ position: absolute; inset: 0; }
.compass .cmid{ position: absolute; left: 50%; top: 0; width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--r-gold); transform: translateX(-50%); }
.cdir{ position: absolute; bottom: 2px; transform: translateX(-50%); font: 700 11px var(--display); color: var(--r-parch); text-shadow: 0 1px 2px #000, 0 0 4px #000 !important; }
.cdir.n{ color: var(--r-red); }
.cmark{ position: absolute; top: 4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; filter: drop-shadow(0 1px 0 #080a1c); }
.cmark b{ font: 15px/1 var(--jp); }
.cmark small{ font: 11px/1.2 var(--body); color: var(--r-parch); text-shadow: 0 1px 2px #000, 0 0 4px #000 !important; }
.cmark.edge small{ display: none; }
.cmark.edge.l b::before{ content: "◂"; } .cmark.edge.r b::after{ content: "▸"; }
.vline{ position: fixed; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 60px); transform: translateX(-50%); z-index: 9; pointer-events: none;
  background: var(--r-win); border: 2px solid var(--r-gold); border-radius: 10px; box-shadow: 0 0 0 2px var(--r-ink), 0 10px 24px rgba(0,0,0,.45); padding: 8px 18px; transition: opacity .35s; }
.vline span{ font: 22px var(--jp); color: var(--r-gold); text-shadow: 0 0 12px rgba(240,201,106,.4); }
.vline b{ font: 700 11px var(--display); color: var(--r-sky); margin-right: 8px; }
.vline.out{ opacity: 0; }
.kira{ position: fixed; left: 0; top: 0; z-index: 8; max-width: 280px; pointer-events: none; background: var(--r-win); border: 2px solid var(--r-sky); border-radius: 12px;
  box-shadow: 0 0 0 2px var(--r-ink), 0 0 16px rgba(127,214,240,.3); padding: 8px 12px; }
.kira::after{ content: ""; position: absolute; left: 50%; bottom: -11px; width: 0; height: 0; border: 7px solid transparent; border-top-color: var(--r-sky); transform: translateX(-50%); }
.kira b{ font: 700 11px var(--display); color: var(--r-sky); display: block; margin-bottom: 3px; letter-spacing: .1em; }
.kira .kjp{ font: 15px var(--jp); color: var(--r-gold); display: block; }
.kira p{ font: 14px/1.45 var(--body); color: var(--r-parch); margin: 4px 0 0; }
.worldmap .wmcard{ width: min(640px, 96vw); max-height: 96vh; padding: 16px !important; gap: 10px; }
.wmhead{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wmhead h2{ margin: 0 auto 0 0 !important; }
.wmview{ position: relative; width: 100%; aspect-ratio: 1; border: 2px solid var(--r-gold2); border-radius: 6px; overflow: hidden; background: var(--r-night); }
.wmview canvas{ position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.wmwait{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 12px var(--display); color: var(--r-parch); background: var(--r-night); padding: 8px 12px; border-radius: 6px; margin: 0; }
.wmlegend{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 14px var(--body); color: var(--r-parch); }
.wmlegend .wmkeys{ margin-left: auto; color: var(--r-mute); }
.bossbar{ position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 58px); left: 50%; transform: translateX(-50%); width: min(420px, 60vw); pointer-events: none; text-align: center; }
.bossbar b{ font: 700 13px var(--display); color: var(--r-gold); text-shadow: 0 2px 0 var(--r-ink), 0 0 6px var(--r-ink); letter-spacing: .06em; }
.bossbar i{ display: block; height: 14px; margin-top: 5px; border: 2px solid var(--r-gold); border-radius: 7px; background: #1a0a12; box-shadow: 0 0 0 2px var(--r-ink); overflow: hidden; }
.bossbar i em{ display: block; height: 100%; background: linear-gradient(180deg, #ff6a5a, var(--r-red) 50%, var(--r-red2)); }
body.pixel #scene{ image-rendering: pixelated; }

@media (max-width: 760px), (max-height: 520px){
  .compass{ width: 34vw; height: 38px; }
  .cmark small{ font-size: 9px; }
  .kira{ max-width: 210px; } .kira p{ font-size: 12px; }
  .vline span{ font-size: 17px; }
  .dtext, .npcdlg .dtext{ font-size: 15px !important; }
}
@media (max-height: 520px){
  .questbox{ top: calc(max(10px, env(safe-area-inset-top)) + 196px) !important; width: 210px !important; max-height: calc(100vh - 300px); overflow: hidden; }
}
/* five side buttons now (bag, menu, map, party, Kira): keep the column short enough to clear the quest panel */
@media (min-height: 521px){
  .sidebtns{ gap: 6px !important; }
  .sidebtns .iconbtn{ width: 40px !important; height: 40px !important; }
  .questbox{ top: calc(max(14px, env(safe-area-inset-top)) + 300px) !important; bottom: auto !important; max-height: calc(100vh - 420px); overflow: hidden; }
}

/* ---------- profile: no box. The portrait, and two slim bars that grow out of its ring on a tight angled rail;
   the name floats above the rail and the buffs below it ---------- */
.pinfo{ border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; color: var(--r-parch);
  margin-left: -16px !important; padding: 0 !important; gap: 3px !important; min-width: 0 !important; width: 236px; z-index: 1; }
.pname{ padding-left: 26px; align-items: baseline; }
.pname b{ font-size: 19px !important; text-shadow: 0 1px 0 var(--r-ink), 0 0 6px rgba(8,10,28,.9), 0 0 2px var(--r-ink); filter: none !important; }
.pname span{ font-size: 10px !important; text-shadow: 0 1px 0 var(--r-ink), 0 0 4px var(--r-ink); }
.bars{ position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 3px; padding: 4px 22px 5px 22px; }
.bars::before, .bars::after{ content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.bars::after{ inset: 0; background: linear-gradient(180deg, #232a66, #0b0e2c 70%); }                         /* the dark rail */
.bars::before{ inset: -2px -3px -2px 0; z-index: -2; background: linear-gradient(180deg, var(--r-gold), var(--r-gold2) 60%, var(--r-gold3)); }   /* its gold rim */
.hpbar, .xpbar{ border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: #12051a !important; overflow: hidden !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.hpbar{ height: 15px !important; }
.hpbar i, .hpbar em, .xpbar i{ border-radius: 0 !important; }
.hpbar i{ box-shadow: inset 0 2px 0 rgba(255,210,190,.35) !important; }
.hpbar span{ font-size: 10px !important; letter-spacing: .08em; }
.xpbar{ height: 5px !important; width: 86%; margin: 0 !important; }
.xpbar span{ display: none !important; }           /* the ring around the portrait already shows experience */
.xpbar{ background: #2c2a5e !important; }
.xpbar i{ clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.buffs{ margin-top: 5px !important; padding-left: 24px; }
.ava::after{ z-index: 1; }
.ava{ z-index: 2; }
.lvl{ z-index: 3 !important; }

/* =====================================================================
   Phones and tablets
   ===================================================================== */
body.touch .hud button, body.touch .skill, body.touch .iconbtn{ touch-action: manipulation; }
/* top left: portrait, name and bars, then a row of buttons, then the quest and the party */
body.touch .prof{ top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
body.touch .ava{ width: 58px !important; height: 58px !important; }
body.touch .avain{ inset: 8px !important; }
body.touch .lvl{ width: 26px !important; height: 30px !important; font-size: 11px !important; bottom: -8px !important; }
body.touch .pinfo{ width: 160px; margin-left: -10px !important; gap: 2px !important; }
body.touch .pname{ padding-left: 16px; }
body.touch .bars{ padding: 3px 16px 4px 15px; }
body.touch .bars::before, body.touch .bars::after{ clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }
body.touch .xpbar span{ display: none; }
body.touch .buffs{ margin-top: 4px !important; padding-left: 16px; }
body.touch .pname b{ font-size: 13px !important; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
body.touch .hpbar{ height: 11px !important; }
body.touch .xpbar{ height: 4px !important; }
body.touch .hpbar span{ font-size: 9px !important; }
body.touch .sidebtns{ top: calc(max(6px, env(safe-area-inset-top)) + 70px) !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; flex-direction: row !important; gap: 7px !important; }
body.touch .sidebtns .iconbtn{ width: 38px !important; height: 38px !important; border-radius: 50% !important; }
body.touch .sidebtns .iconbtn svg{ width: 18px; height: 18px; }
body.touch .questbox{ top: calc(max(6px, env(safe-area-inset-top)) + 118px) !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; bottom: auto !important;
  width: 210px !important; max-height: calc(100vh - 140px); overflow: hidden; padding: 6px 22px 6px 10px !important; pointer-events: auto; z-index: 2; }
body.touch .questbox h4{ font-size: 12px !important; margin: 0 !important; }
body.touch .questbox h4.sub{ display: none; }
body.touch .questbox.open h4.sub{ display: block; }
body.touch .questbox li{ font-size: 12px !important; }
body.touch .questbox::after{ content: "▾"; position: absolute; right: 8px; top: 6px; color: var(--r-gold); font-size: 12px; }
body.touch .questbox.open::after{ content: "▴"; }
body.touch .partyframes{ top: calc(max(6px, env(safe-area-inset-top)) + 160px) !important; left: max(8px, env(safe-area-inset-left)) !important; }
body.touch .pf{ width: 140px !important; padding: 3px 8px 5px !important; }
body.touch .pf b{ font-size: 10px !important; }
/* top right: a smaller minimap with gems and gold under it */
body.touch .mapbox{ top: calc(max(6px, env(safe-area-inset-top)) + 8px) !important; right: calc(max(8px, env(safe-area-inset-right)) + 6px) !important; gap: 8px !important; }
body.touch .mapframe, body.touch .mapframe canvas{ width: 100px !important; height: 100px !important; }
body.touch .mapres .pill{ padding: 3px 8px !important; font-size: 11px !important; }
/* the compass stays top centre and narrow */
body.touch .compass{ width: 32vw; height: 38px; top: max(4px, env(safe-area-inset-top)); }
body.touch .cmark small{ font-size: 9px; }
/* bottom right: round action buttons in an arc, no box behind them */
body.touch .skillbar{ background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 270px !important; height: 250px !important;
  right: max(10px, env(safe-area-inset-right)) !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; left: auto !important; transform-origin: 100% 100%; }
body.touch .skill{ border-radius: 50% !important; border: 2px solid var(--r-gold2) !important; background: radial-gradient(circle at 50% 35%, rgba(58,66,150,.92), rgba(13,16,48,.92) 72%) !important;
  box-shadow: 0 0 0 2px var(--r-ink), 0 6px 14px rgba(0,0,0,.45) !important; }
body.touch .skill[data-i="0"]{ border-width: 3px !important; border-color: var(--r-gold) !important; }
body.touch .skill.ult{ border-color: var(--r-gold) !important; box-shadow: 0 0 0 2px var(--r-ink), 0 0 16px rgba(240,201,106,.5) !important; }
body.touch .skill .cd, body.touch .skill .lock{ border-radius: 50% !important; }
body.touch .skill.locked > svg{ opacity: .35; }
body.touch .jump{ border-radius: 50% !important; border: 2px solid var(--r-gold2) !important; background: radial-gradient(circle at 50% 35%, rgba(58,66,150,.85), rgba(13,16,48,.88) 72%) !important; box-shadow: 0 0 0 2px var(--r-ink) !important; transform-origin: 100% 100%; }
@media (max-height: 460px){ body.touch .skillbar{ transform: scale(.82) !important; } body.touch .jump{ transform: scale(.82); right: calc(max(10px, env(safe-area-inset-right)) + 152px) !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 8px) !important; } }
@media (max-height: 380px){ body.touch .skillbar{ transform: scale(.72) !important; } body.touch .jump{ transform: scale(.72); right: calc(max(10px, env(safe-area-inset-right)) + 134px) !important; } }
/* bottom left: the movement stick as a faint ring */
body.touch .joybase{ background: radial-gradient(circle, rgba(13,16,48,.15), rgba(13,16,48,.4)) !important; border: 2px solid rgba(240,201,106,.35) !important; border-radius: 50% !important; box-shadow: none !important;
  width: 104px !important; height: 104px !important; left: calc(max(10px, env(safe-area-inset-left)) + 30px) !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 26px) !important; }
body.touch .joybase i{ background: rgba(240,201,106,.22) !important; border-color: rgba(240,201,106,.5) !important; }
body.touch .joybase span{ color: rgba(240,201,106,.55) !important; font-family: var(--display) !important; }
@media (max-height: 380px){ body.touch .joybase{ width: 88px !important; height: 88px !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 18px) !important; } }
/* middle: the use prompt sits low in the centre, clear of both thumbs */
body.touch .prompt{ left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 14px) !important;
  max-width: 40vw; padding: 9px 14px 9px 9px !important; font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 4; animation: none !important; }
body.touch .prompt kbd{ display: none; }
/* toasts, boss bar, spoken lines and Kira stay small and high */
body.touch .toasts{ top: calc(max(6px, env(safe-area-inset-top)) + 44px) !important; }
body.touch .toast{ font-size: 11px !important; padding: 4px 12px !important; }
body.touch .toast.level, body.touch .toast.discover{ font-size: 12px !important; padding: 5px 14px !important; }
body.touch .bossbar{ top: calc(max(6px, env(safe-area-inset-top)) + 40px); width: 40vw; }
body.touch .bossbar b{ font-size: 10px; }
body.touch .vline{ top: calc(max(6px, env(safe-area-inset-top)) + 70px); padding: 5px 12px; }
body.touch .vline span{ font-size: 15px; }
body.touch .kira{ max-width: 200px; padding: 6px 9px; }
body.touch .kira b{ display: none; }
body.touch .kira .kjp{ font-size: 12px; }
body.touch .kira p{ font-size: 11px; }
/* chat: a few faint lines above the prompt; the full box only while typing */
body.touch .chat{ top: auto !important; left: 50% !important; transform: translateX(-50%); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px) !important; width: min(300px, 38vw) !important;
  background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none; }
body.touch .chat .cl{ font-size: 11px; text-shadow: 0 1px 2px #000 !important; }
body.touch .chat.typing{ top: 22% !important; bottom: auto !important; width: min(460px, 80vw) !important; background: var(--r-win) !important; border: 2px solid var(--r-gold) !important; pointer-events: auto; z-index: 12; }
body.touch .netstat, body.touch .hloc, body.touch .keys{ display: none !important; }
/* dialogue and panels: big, easy tap targets */
body.touch .npcdlg{ z-index: 14; width: min(640px, calc(100% - 20px)) !important; padding: 14px 14px 10px !important; max-height: calc(100vh - 16px); overflow-y: auto; }
body.touch .npcdlg .dtext{ font-size: 14px !important; margin-bottom: 8px !important; }
body.touch .djp{ font-size: 13px; margin-top: 4px; }
body.touch .dopts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
body.touch .dopt{ min-height: 40px; font-size: 12px !important; padding: 8px 10px !important; }
body.touch .dname{ font-size: 12px !important; }
body.touch .bag, body.touch .gpanel{ padding: 6px !important; }
body.touch .bagcard, body.touch .gpanel .bagcard{ max-height: calc(100vh - 12px) !important; width: min(96vw, 900px) !important; }
body.touch .btn{ min-height: 38px; }
body.touch .btn.small{ min-height: 32px; }
/* modals on short screens: compact and scrollable */
@media (max-height: 460px){
  .modal{ padding: 6px !important; align-items: start; overflow-y: auto; }
  .modal .card{ padding: 14px 18px !important; gap: 8px !important; max-height: none; margin: auto; }
  .modal .card h2{ font-size: 18px !important; }
  .auth .card .eyebrow{ display: none; }
  .authform{ gap: 3px !important; }
  .authform input{ padding: 7px 10px !important; }
  #settings .card{ max-height: calc(100vh - 12px); overflow-y: auto; }
  .worldmap .wmcard{ padding: 10px !important; }
  .wmview{ width: min(100%, calc(100vh - 110px)) !important; margin: 0 auto; }
  .wmlegend{ display: none !important; }
  .wmhead h2{ font-size: 15px !important; }
}
/* holding the phone upright: the compass drops under the top row */
body.touch.portrait .compass{ top: calc(max(6px, env(safe-area-inset-top)) + 160px); width: 70vw; }
body.touch.portrait .questbox{ width: 180px !important; }
body.touch.portrait .compass{ top: calc(max(6px, env(safe-area-inset-top)) + 205px); width: 80vw; }
body.touch.portrait .skillbar{ transform: scale(.74) !important; }
body.touch.portrait .jump{ transform: scale(.74); right: calc(max(10px, env(safe-area-inset-right)) + 140px) !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 4px) !important; }
body.touch.portrait .joybase{ bottom: calc(max(8px, env(safe-area-inset-bottom)) + 70px) !important; left: calc(max(10px, env(safe-area-inset-left)) + 12px) !important; }
body.touch.portrait .prompt{ bottom: calc(max(8px, env(safe-area-inset-bottom)) + 200px) !important; max-width: 80vw; }
body.touch.portrait .chat{ bottom: calc(max(8px, env(safe-area-inset-bottom)) + 250px) !important; width: 70vw !important; }
body.touch.portrait .partyframes{ top: calc(max(6px, env(safe-area-inset-top)) + 172px) !important; }
body.touch .npcdlg{ overflow: visible !important; max-height: none !important; padding-top: 22px !important; }
body.touch .npcdlg .dtext{ max-height: 34vh; overflow-y: auto; }
body.touch .npcdlg .dname{ top: -14px !important; }
/* backpack on a phone held sideways: gear on the left, the bag on the right, both scroll on their own */
@media (orientation: landscape) and (max-height: 520px){
  .bagbody{ grid-template-columns: minmax(220px, 38%) 1fr !important; overflow: hidden !important; }
  .gear{ border-bottom: 0 !important; padding: 10px 12px !important; gap: 10px !important; overflow-y: auto; }
  .inv{ padding: 10px 12px !important; overflow-y: auto; }
  .doll img{ width: 74px !important; height: 74px !important; }
  .baghead{ padding: 8px 14px !important; }
  .detail{ min-height: 0 !important; }
}

/* ---------- backpack on phones and tablets: two columns that each scroll on their own ----------
   left: portrait, gear, stats and skills. right: the item grid with the item details under it. */
@media (max-width: 860px), (max-height: 560px){
  .bag{ padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; }
  .bagcard{ width: min(98vw, 980px) !important; height: calc(100vh - 12px) !important; max-height: calc(100vh - 12px) !important; display: flex !important; flex-direction: column !important; }
  .baghead{ padding: 8px 12px !important; flex: none; }
  .baghead h2{ font-size: 18px !important; }
  .bagbody{ flex: 1; min-height: 0; display: grid !important; grid-template-columns: minmax(170px, 36%) 1fr !important; overflow: hidden !important; }
  .gear{ border-right: 1px solid rgba(240,201,106,.25) !important; border-bottom: 0 !important; padding: 10px !important; gap: 10px !important; overflow-y: auto; min-height: 0; }
  .inv{ padding: 10px !important; gap: 8px !important; overflow-y: auto; min-height: 0; }
  .doll{ gap: 8px !important; align-items: flex-start !important; }
  .doll img{ width: 64px !important; height: 64px !important; flex: none; }
  .eqslots{ gap: 6px !important; flex: 1; min-width: 0; }
  .eqslots .slot{ min-height: 0 !important; padding: 4px 8px !important; }
  .eqname{ font-size: 11px !important; }
  .statgrid{ padding: 8px 10px !important; gap: 4px 10px !important; font-size: 12px; }
  .bsk{ padding: 4px 6px !important; }
  .grid{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; }
  .detail{ min-height: 0 !important; padding: 10px 12px !important; }
  .detail h3{ font-size: 14px !important; }
}
/* upright phones: a narrower left column and a four-wide grid */
@media (max-width: 520px){
  .bagbody{ grid-template-columns: 40% 1fr !important; }
  .doll{ flex-direction: column !important; align-items: stretch !important; }
  .doll img{ width: 56px !important; height: 56px !important; align-self: center; }
  .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .statgrid{ grid-template-columns: 1fr !important; }
}
.vrow{ display: flex; gap: 6px; align-items: center; min-width: 0; }
.vrow select{ max-width: 170px; min-width: 0; background: var(--r-night); color: var(--r-parch); border: 1px solid var(--r-gold2); border-radius: 6px; padding: 6px 8px; font: 13px var(--body); }
@media (max-width: 860px), (max-height: 560px){
  .eqslots .slot{ width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden; }
  .eqname{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bagres{ gap: 4px !important; } .bagres .pill{ padding: 3px 7px !important; font-size: 11px !important; }
}
@media (max-width: 520px){ .baghead h2{ font-size: 15px !important; } .baghead{ gap: 6px !important; } }
@media (orientation: landscape) and (max-height: 560px){ .grid{ grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 5px !important; } }
.credits{ margin: 6px 0 0; font: 11px/1.5 var(--body); color: var(--r-mute); text-align: center; }

/* =====================================================================
   Action cluster (phones): the attack button in the corner, the three skills on an inner arc,
   then the potion, jump, dodge and the ultimate on a low outer arc. Everything is placed in the same
   275 x 210 box and scaled together, so nothing can drift onto anything else.
   ===================================================================== */
.skillbar .jump{ display: none; }
body.touch .skillbar{ width: 275px !important; height: 210px !important; }
body.touch .skillbar .skill[data-i="0"]{ width: 88px !important; height: 88px !important; right: 0 !important; bottom: 0 !important; }
body.touch .skillbar .skill[data-i="1"]{ width: 58px !important; height: 58px !important; right: 105px !important; bottom: 18px !important; }
body.touch .skillbar .skill[data-i="2"]{ width: 58px !important; height: 58px !important; right: 77px !important; bottom: 80px !important; }
body.touch .skillbar .skill[data-i="3"]{ width: 58px !important; height: 58px !important; right: 15px !important; bottom: 105px !important; }
body.touch .skillbar .skill.ult{ width: 62px !important; height: 62px !important; right: 88px !important; bottom: 143px !important; }
body.touch .skillbar .skill.potion{ width: 44px !important; height: 44px !important; right: 228px !important; bottom: 8px !important; }
body.touch .skillbar .jump{ display: grid !important; position: absolute !important; pointer-events: auto; width: 52px !important; height: 52px !important;
  right: 166px !important; bottom: 39px !important; margin: 0 !important; transform: none !important; }
body.touch .skillbar .jump.dodge{ right: 144px !important; bottom: 100px !important; overflow: hidden; }
body.touch .skillbar .jump.pressed, body.touch .skillbar .jump:active{ filter: brightness(1.3); }
/* narrow phones held upright: a smaller row of round buttons so it clears the minimap */
@media (max-width: 380px){ body.touch.portrait .sidebtns{ gap: 5px !important; } body.touch.portrait .sidebtns .iconbtn{ width: 32px !important; height: 32px !important; } body.touch.portrait .sidebtns .iconbtn svg{ width: 16px; height: 16px; } }

/* =====================================================================
   Talent tree (js/talents.js): three branches side by side, five tiers each, a details card below
   ===================================================================== */
.iconbtn{ position: relative; }
.tdot{ position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--r-gold); box-shadow: 0 0 0 2px var(--r-ink), 0 0 8px var(--r-gold); animation: tdot 1.4s ease-in-out infinite; }
@keyframes tdot{ 50%{ transform: scale(1.35); } }
.gpanel .bagcard.tpanel{ width: min(820px, 100%) !important; }
.thead{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--r-parch); }
.thead small{ display: block; color: var(--r-mute); font-size: 11px; margin-top: 2px; }
.tpts{ font: 700 24px var(--display); color: var(--r-gold); margin-right: 4px; }
.tgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tbranch{ border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 8px; padding: 8px 8px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 12%, transparent), rgba(8,10,28,.4)); }
.tbranch header{ display: grid; grid-template-columns: 1fr auto; align-items: baseline; margin-bottom: 6px; }
.tbranch h3{ margin: 0; font: 700 15px var(--display); color: var(--tc); letter-spacing: .04em; }
.tbranch header span{ font-size: 11px; color: var(--r-mute); }
.tbranch header p{ grid-column: 1 / -1; margin: 2px 0 0; font-size: 11px; color: var(--r-mute); }
.ttier{ position: relative; display: flex; justify-content: center; gap: 14px; padding: 7px 0; }
.ttier + .ttier::before{ content: ""; position: absolute; top: -3px; left: 50%; width: 2px; height: 8px; background: color-mix(in srgb, var(--tc) 40%, transparent); }
.treq{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--r-dim); }
.ttier.tlock .tnode{ filter: grayscale(.9) brightness(.55); }
.tnode{ position: relative; width: 50px; height: 50px; border-radius: 10px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px solid rgba(201,162,74,.45); background: radial-gradient(circle at 50% 35%, #262c66, #0b0e2c 75%); box-shadow: 0 0 0 2px var(--r-ink); transition: transform .12s; }
.tnode svg{ width: 24px; height: 24px; fill: none; stroke: var(--r-mute); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tnode b{ position: absolute; bottom: -7px; right: -7px; min-width: 22px; padding: 0 4px; font: 700 10px var(--body); color: var(--r-parch); background: #10132e; border: 1px solid rgba(201,162,74,.6); border-radius: 8px; }
.tnode.tkey{ width: 58px; height: 58px; border-radius: 50%; border-width: 3px; }
.tnode.tcan{ border-color: var(--r-gold); box-shadow: 0 0 0 2px var(--r-ink), 0 0 12px rgba(240,201,106,.45); }
.tnode.tlearned{ border-color: var(--tc); }
.tnode.tlearned svg{ stroke: var(--tc); }
.tnode.tmax{ background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 45%, #20255a), #0b0e2c 80%); }
.tnode.tmax b{ color: var(--r-gold); border-color: var(--r-gold); }
.tnode.tsel{ transform: scale(1.08); outline: 2px solid var(--r-parch); outline-offset: 3px; }
.tnode:hover{ transform: scale(1.06); }
.tinfo{ position: sticky; bottom: 0; margin-top: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  background: linear-gradient(180deg, #161a45, #0b0e2c); box-shadow: 0 -8px 18px rgba(0,0,0,.4); }
.tinfo-t{ display: flex; align-items: center; gap: 10px; }
.tinfo-t svg{ width: 30px; height: 30px; flex: none; fill: none; stroke: var(--tc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tinfo h4{ margin: 0; font: 700 15px var(--display); color: var(--r-gold); }
.tinfo h4 em{ font: 700 10px var(--body); font-style: normal; color: var(--r-ink); background: var(--tc); padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.tinfo small{ color: var(--r-mute); font-size: 11px; }
.tinfo p{ margin: 6px 0 0; font-size: 13px; color: var(--r-parch); line-height: 1.35; }
.tinfo p span{ color: var(--tc); font-weight: 700; }
.tinfo .btn{ margin-top: 8px; width: 100%; }
/* phones: tighter nodes; upright phones stack the branches */
body.touch .tgrid{ gap: 6px; }
body.touch .tnode{ width: 42px; height: 42px; }
body.touch .tnode.tkey{ width: 48px; height: 48px; }
body.touch .tnode svg{ width: 20px; height: 20px; }
body.touch .ttier{ gap: 10px; padding: 6px 0; }
body.touch .tbranch{ padding: 6px 4px 8px; }
body.touch .tinfo p{ font-size: 12px; }
@media (max-width: 560px){ .tgrid{ grid-template-columns: 1fr; } }
@media (max-height: 460px){
  /* short landscape phones: the details card moves to a column on the right instead of covering the tree */
  .tpanel .pbody{ display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 10px; align-items: start; }
  .tpanel .thead{ grid-column: 1 / -1; margin-bottom: 6px; }
  .tpanel .tinfo{ position: sticky; top: 0; bottom: auto; margin-top: 0; box-shadow: none; padding: 8px 10px; }
  .tpanel .tinfo p{ margin-top: 4px; }
  .tpanel .tinfo .btn{ padding: 7px 8px !important; font-size: 13px !important; }
  .tbranch header p{ display: none; }
  .tpts{ font-size: 20px; }
}
@media (max-width: 380px){ body.touch.portrait .sidebtns .iconbtn{ width: 29px !important; height: 29px !important; } body.touch.portrait .sidebtns{ gap: 3px !important; } }