/* Shardfall fantasy skin: gilded frames, iron sockets, ribbons and gems over every screen.
   Loaded last, so it restyles the creator, HUD, backpack, forge, dialogue and menus.
   Artwork lives in img/ as SVG 9-slices (frame, frame-slim, slot, btn, btn-gold, banner). */
:root{
  --gold-1:#fbe3a3; --gold-2:#e0b060; --gold-3:#a8742e; --gold-4:#5e3f1a;
  --iron-1:#2a2129; --iron-2:#18121a; --iron-3:#0e0a10; --blood:#8f2a22;
  --skin-panel: url(../img/grain.svg), radial-gradient(130% 70% at 50% 0%, rgba(224,176,96,.13), transparent 62%), linear-gradient(180deg, rgba(36,28,35,.97), rgba(17,13,19,.98));
  --skin-plate: url(../img/grain.svg), linear-gradient(180deg, rgba(40,31,38,.94), rgba(20,15,22,.95));
  --gold-text: linear-gradient(180deg, #fff3cc 0%, #f0c674 45%, #b07a32 100%);
}

/* ---------- frame primitives ---------- */
.panel, .modal .card, .bagcard, .forgeui, .dialog, .skillbar{
  border: 1px solid transparent; border-radius: 3px;
  border-image: url(../img/frame.svg) 40 / 30px / 7px stretch;
  background: var(--skin-panel);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.pill, .chip, .cls, .toast, .hloc, .prompt, .ntag, .statgrid, .detail, .fstats, .fchance, .dock, .buff, .chatin input, #name, .netstat, .dicon, .bskills .bsk svg{
  border: 1px solid transparent; border-radius: 2px;
  border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch;
  background: var(--skin-plate);
}
.btn, .dopt{
  border: 1px solid transparent; border-radius: 0;
  border-image: url(../img/btn.svg) 12 fill / 11px stretch;
  background: none; color: var(--parch);
  font-family: var(--display); font-weight: 700; letter-spacing: .05em;
  text-shadow: 0 1px 2px #000; transition: filter .15s, transform .08s;
}
.btn:hover, .dopt:hover{ filter: brightness(1.22); background: none; }
.btn:active, .dopt:active{ transform: translateY(1px); }
.btn.primary{ border-image: url(../img/btn-gold.svg) 12 fill / 11px stretch; background: none; color: #2a1606; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
.btn.primary:hover{ background: none; }
.btn.danger{ border-image: url(../img/btn.svg) 12 fill / 11px stretch; background: none; color: #ffb0a6; }
.btn:disabled, .btn.primary:disabled{ filter: grayscale(.85) brightness(.65); cursor: not-allowed; }

/* headings in gold leaf, with a gem divider under titles */
.card h2, .bagcard h2, .brand, .cinecap b, .fresult b, .ltitle{
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.65));
}
.brand{ text-shadow: none; }
.brand small{ -webkit-text-fill-color: var(--muted); }
.modal .card h2{ text-align: center; padding-bottom: 20px; background-repeat: no-repeat; }
.modal .card h2::after{ content: ""; display: block; height: 18px; margin: 10px auto -20px; max-width: 260px; background: url(../img/divider.svg) center/contain no-repeat; }
.modal .card .eyebrow, .card .eyebrow{ text-align: center; color: var(--gold-2); letter-spacing: .26em; }
.modal .card{ padding: 30px 30px 26px; gap: 16px; }
.lore-card{ background: var(--skin-panel); }
.lore-card blockquote{ font-family: var(--body); text-align: center; color: #f3e6c8; }
.label{ color: var(--gold-2); }
.label output{ color: var(--parch); }

/* round iron buttons with a gilded rim */
.iconbtn{
  background: radial-gradient(circle at 35% 28%, #4c3f4a, #1c151e 72%);
  border: 2px solid #b98c45; box-shadow: 0 0 0 2px #0e0905, inset 0 2px 3px rgba(255,255,255,.14), 0 5px 12px rgba(0,0,0,.55);
}
.iconbtn:hover{ background: radial-gradient(circle at 35% 28%, #5e4e5a, #261d28 72%); border-color: var(--gold-1); }
.iconbtn svg{ stroke: var(--gold-1); }

/* ---------- character creator ---------- */
.brand .mark{ filter: drop-shadow(0 0 8px var(--shard)); -webkit-text-fill-color: initial; }
.panel{ overflow: visible; }
.panel > .tabs, .panel > .pane, .panel > .foot{ position: relative; }
.tabs{ border-bottom: 0; margin: 6px 10px 0; background: linear-gradient(90deg, transparent, rgba(224,176,96,.45), transparent) bottom/100% 1px no-repeat; }
.tab{ color: #9c8a6a; border-bottom: 0; position: relative; font-family: var(--display); letter-spacing: .14em; }
.tab:hover{ color: var(--gold-1); }
.tab[aria-selected="true"]{ color: var(--gold-1); text-shadow: 0 0 12px rgba(240,198,116,.45); }
.tab[aria-selected="true"]::after{ content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #d8fff8, #5fe0d0 50%, #127a70); border: 1px solid var(--gold-2); }
.foot{ border-top: 0; background: linear-gradient(90deg, transparent, rgba(224,176,96,.45), transparent) top/100% 1px no-repeat; }
.cls{ background: var(--skin-plate); }
.cls[aria-pressed="true"]{ background: url(../img/grain.svg), linear-gradient(180deg, rgba(92,58,24,.6), rgba(36,24,14,.8)); box-shadow: 0 0 18px rgba(240,198,116,.25); }
.cls svg{ background: radial-gradient(circle, rgba(95,224,208,.18), rgba(0,0,0,.3)); border: 1px solid rgba(224,176,96,.5); }
.cls h4{ color: var(--gold-1); }
.chip{ color: var(--parch); }
.chip[aria-pressed="true"]{ background: url(../img/grain.svg), linear-gradient(180deg, #e8b766, #a06a2a); color: #2a1606; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; }
.sw{ border: 2px solid #0e0905; box-shadow: 0 0 0 1.5px #b98c45, inset 0 -5px 0 rgba(0,0,0,.2); }
.sw[aria-pressed="true"]{ outline: 0; box-shadow: 0 0 0 2px #0e0905, 0 0 0 4px var(--gold-1), 0 0 12px rgba(240,198,116,.6); }
#name{ font-family: var(--display); color: var(--gold-1); }
#name.bad{ border-image: none; border: 1px solid var(--danger); }
.stat{ color: #9c8a6a; }
.bar{ background: rgba(0,0,0,.5); border: 1px solid rgba(224,176,96,.25); height: 5px; }
.bar i{ background: linear-gradient(90deg, #127a70, var(--shard)); }
.dock{ border-radius: 2px; padding: 5px 8px; }
.dock button{ background: radial-gradient(circle at 35% 28%, #4c3f4a, #1c151e 72%); border: 1px solid #b98c45; color: var(--gold-1); }
.sheet{ border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); }
.sheet b{ color: var(--gold-1); }

/* ---------- profile hub ---------- */
.prof{ background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 0; align-items: center; }
.ava{ width: 104px; height: 104px; z-index: 2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.ava::after{ content: ""; position: absolute; inset: 0; background: url(../img/portrait-ring.svg) center/100% 100% no-repeat; pointer-events: none; }
.xpring{ inset: 0; -webkit-mask: radial-gradient(circle, transparent 38.5px, #000 39.5px, #000 46.5px, transparent 47.5px); mask: radial-gradient(circle, transparent 38.5px, #000 39.5px, #000 46.5px, transparent 47.5px);
  background: conic-gradient(from 0deg, #fff0c4 0, #f0c674 calc(var(--p) * .5), #e08a3a var(--p), rgba(10,7,12,.92) var(--p)); }
.avain{ inset: 15px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.7), inset 0 -12px 22px rgba(0,0,0,.45); }
.lvl{ bottom: -14px; width: 40px; height: 46px; min-width: 0; padding: 0 0 8px; clip-path: none; background: url(../img/crest.svg) center/100% 100% no-repeat; color: var(--gold-1); font: 700 17px var(--display); text-shadow: 0 1px 2px #000; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.pinfo{ margin-left: -22px; padding: 12px 20px 12px 34px; min-width: 250px; z-index: 1; gap: 7px;
  border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.pname b{ background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.pname span{ color: #b49a6a; }
.hpbar, .xpbar{ overflow: visible; border-radius: 1px; background: #0a070a; border: 1px solid #b98c45; box-shadow: 0 0 0 1px #0e0905, inset 0 2px 5px rgba(0,0,0,.8); }
.hpbar::before, .hpbar::after, .xpbar::before, .xpbar::after{ content: ""; position: absolute; top: 50%; width: 9px; height: 9px; z-index: 3; background: linear-gradient(135deg, #fbe3a3, #8a6128); border: 1px solid #0e0905; transform: translateY(-50%) rotate(45deg); }
.hpbar::before, .xpbar::before{ left: -6px; } .hpbar::after, .xpbar::after{ right: -6px; }
.xpbar::before, .xpbar::after{ width: 6px; height: 6px; }
.hpbar{ height: 17px; }
.hpbar i{ background: linear-gradient(180deg, #ff8070 0%, #c8382c 45%, #7e1a14 100%); box-shadow: inset 0 1px 0 rgba(255,220,200,.45); }
.hpbar em{ background: linear-gradient(180deg, #fff1d2, #e6c58a); }
.hpbar span{ font-family: var(--display); font-size: 12px; letter-spacing: .08em; }
.xpbar{ height: 7px; margin-top: 2px; }
.xpbar i{ border-radius: 0; background: linear-gradient(180deg, #ffe7a8, #e0a04a 60%, #8a5a20); box-shadow: 0 0 8px rgba(240,180,90,.5); }
.xpbar span{ color: #b49a6a; top: 10px; }
.buffs{ margin-top: 14px; }
.buff{ padding: 3px 10px 3px 5px; border-radius: 2px; }
.buff i{ border: 1px solid #0e0905; box-shadow: 0 0 0 1px var(--gold-2), 0 0 8px var(--c); }

/* ---------- minimap ---------- */
.mapbox{ gap: 16px; top: calc(max(14px, env(safe-area-inset-top)) + 20px); right: calc(max(14px, env(safe-area-inset-right)) + 20px); }
.mapframe{ box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.mapframe::before{ content: ""; position: absolute; inset: -20px; background: url(../img/minimap-ring.svg) center/100% 100% no-repeat; pointer-events: none; z-index: 2; }
.mapN{ top: -17px; width: 16px; height: 14px; background: none; box-shadow: none; color: #2a1606; font: 700 10px var(--display); z-index: 3; }
.mapres .pill{ border-radius: 2px; }
.sidebtns{ top: calc(max(14px, env(safe-area-inset-top)) + 8px); right: calc(max(14px, env(safe-area-inset-right)) + 236px); }

/* ---------- hotbar ---------- */
.skillbar{ padding: 12px 16px; gap: 10px; border-radius: 3px; }
.skill, .slot{
  border: 1px solid transparent; border-radius: 4px;
  border-image: url(../img/slot.svg) 12 fill / 10px stretch;
  background: none; box-shadow: none;
}
.skill:hover, .slot:hover{ border-color: transparent; filter: brightness(1.2); }
.skill{ width: 60px; height: 60px; }
.skill > svg{ stroke: #ffe2b0; filter: drop-shadow(0 0 6px rgba(240,180,90,.45)); }
.skill .cd, .skill .lock{ inset: 4px; border-radius: 3px; }
.skill kbd{ right: 3px; bottom: 2px; min-width: 15px; height: 15px; display: grid; place-items: center; border-radius: 2px; background: linear-gradient(180deg, #3a2e36, #17111a); border: 1px solid #8a6128; color: var(--gold-1); font-size: 9.5px; }
.skill .lock{ color: #b49a6a; background: rgba(8,6,10,.85); }
.skill .lock svg{ stroke: var(--gold-2); }
.sdiv{ width: 14px; height: 50px; background: linear-gradient(180deg, transparent, var(--gold-2), transparent) center/1px 100% no-repeat; position: relative; }
.sdiv::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%,-50%) rotate(45deg); background: var(--gold-2); border: 1px solid #0e0905; }
.skill.potion b{ color: var(--gold-1); text-shadow: 0 1px 2px #000; left: 6px; top: 4px; }

/* ---------- prompts, toasts, location, chat, tags ---------- */
.prompt{ border-radius: 2px; padding: 9px 18px 9px 10px; box-shadow: 0 0 24px rgba(95,224,208,.18), 0 8px 20px rgba(0,0,0,.5); font-family: var(--display); letter-spacing: .03em; }
.prompt kbd{ width: 26px; height: 26px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, #d8fff8, #5fe0d0 50%, #127a70); border: 1.5px solid var(--gold-1); box-shadow: 0 0 10px rgba(95,224,208,.5); }
.prompt kbd{ font-size: 0; }
.prompt kbd::after{ content: "E"; display: block; transform: rotate(-45deg); font: 700 13px var(--display); color: #08302c; }
.toast{ border-radius: 2px; font-family: var(--display); letter-spacing: .03em; }
.toast.level, .toast.discover{
  border: 1px solid transparent; border-image: url(../img/banner.svg) 0 44 fill / 0 34px stretch; background: none;
  padding: 10px 46px 12px; color: var(--gold-1); font: 700 18px var(--display); text-shadow: 0 2px 3px rgba(0,0,0,.7);
}
.toast.level{ font-size: 20px; }
.hloc{ border-radius: 2px; color: #b49a6a; }
.hloc b{ background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ntag{ border-radius: 2px; }
.ntag b{ color: var(--gold-1); }
.cl{ background: linear-gradient(90deg, rgba(14,10,16,.78), rgba(14,10,16,.35)); border-left: 2px solid var(--gold-3); border-radius: 0; }
.cl b{ color: var(--gold-1); }
.cl.me b{ color: var(--shard); }
.netstat{ border-radius: 2px; color: #b49a6a; }
.ebar span{ font-family: var(--display); letter-spacing: .04em; }
.ebar i{ height: 7px; border-radius: 1px; background: #0a070a; border: 1px solid #b98c45; box-shadow: 0 0 0 1px #0e0905; }
.ebar i b{ background: linear-gradient(180deg, #ff8070, #c8382c 50%, #7e1a14); }
.ebar.boss i{ height: 9px; }
.ft{ font-family: var(--display); }
.jump{ border-radius: 50%; background: radial-gradient(circle at 35% 28%, #4c3f4a, #1c151e 72%); border: 2px solid #b98c45; color: var(--gold-1); box-shadow: 0 0 0 2px #0e0905; }

/* ---------- backpack ---------- */
.bagcard{ border-radius: 3px; overflow: visible; }
.baghead{ border-bottom: 0; background: linear-gradient(90deg, transparent, rgba(224,176,96,.5), transparent) bottom/100% 1px no-repeat; padding: 18px 24px 16px; }
.fresult.fail b{ background: none; color: #d8d0c8; filter: none; }
.baghead h2{ flex: none; padding: 6px 48px 8px; border: 1px solid transparent; border-image: url(../img/banner.svg) 0 44 fill / 0 34px stretch; background: none;
  -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-1); filter: none; text-shadow: 0 2px 3px rgba(0,0,0,.7); font-size: 24px; }
.bagres{ margin-left: auto; }
.gear{ border-right: 0; background: linear-gradient(180deg, transparent, rgba(224,176,96,.4), transparent) right/1px 100% no-repeat; }
.doll img{ border: 0; border-radius: 4px; box-shadow: 0 0 0 2px #0e0905, 0 0 0 4px #b98c45, 0 0 0 6px #0e0905, 0 10px 20px rgba(0,0,0,.5); }
.slot.filled{ box-shadow: inset 0 0 16px color-mix(in srgb, var(--r) 30%, transparent); }
.slot.filled::after{ content: ""; position: absolute; inset: 5px; border-radius: 3px; border: 1.5px solid color-mix(in srgb, var(--r) 80%, transparent); pointer-events: none; }
.slot.sel{ outline: 2px solid var(--gold-1); outline-offset: 1px; box-shadow: 0 0 14px rgba(240,198,116,.5); }
.slot .ph{ color: #6e5e48; font-family: var(--display); }
.eqslots .slot{ padding-left: 14px; }
.statgrid{ border-radius: 2px; }
.statgrid span{ color: #b49a6a; }
.statgrid b{ color: var(--gold-1); }
.detail{ border-radius: 2px; }
.dicon{ border-radius: 2px; }
.detail h3{ font-family: var(--display); }
.invhead .label, .bskills .label{ font-family: var(--display); letter-spacing: .2em; }
.bsk svg{ stroke: #ffe2b0; padding: 5px; }

/* ---------- forge, dialogue, cinematics ---------- */
.forgeui{ border-radius: 3px; padding: 22px; }
.fhead .eyebrow{ color: var(--gold-2); font-family: var(--display); }
.fweap h3{ font-family: var(--display); }
.fplus b{ color: var(--gold-1); }
.fstats, .fchance{ border-radius: 2px; }
.fbar{ border-radius: 1px; height: 9px; background: #0a070a; border: 1px solid #b98c45; box-shadow: 0 0 0 1px #0e0905; }
.fbar i{ border-radius: 0; }
.frow{ background: linear-gradient(90deg, rgba(255,255,255,.05), transparent); border-left: 2px solid var(--gold-3); border-radius: 0; }
.fcat input{ accent-color: var(--gold-2); }
.dialog{ border-radius: 3px; padding: 26px 26px 20px; background: var(--skin-panel); }
.dname{ top: -20px; left: 24px; padding: 6px 40px 9px; border-radius: 0; border: 1px solid transparent; border-image: url(../img/banner.svg) 0 44 fill / 0 32px stretch; background: none; color: var(--gold-1); text-shadow: 0 2px 3px rgba(0,0,0,.7); font-size: 16px; }
.dtext{ font-size: 17.5px; color: #f3e6c8; }
.dopt{ padding: 10px 18px 10px 12px; font-size: 14px; }
.dopt kbd{ background: linear-gradient(180deg, #3a2e36, #17111a); border: 1px solid #8a6128; color: var(--gold-1); border-radius: 2px; }
.cinecap::after{ content: ""; display: block; width: 260px; height: 18px; margin-top: 6px; background: url(../img/divider.svg) left center/contain no-repeat; }
.cinecap .eyebrow{ color: var(--gold-2); }
.cineskip{ border-radius: 2px; border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); color: var(--gold-1); }

/* ---------- quest tracker, ultimate slot, dialogs ---------- */
.questbox{ position: absolute; right: max(14px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 290px); width: 270px; padding: 12px 16px 14px;
  border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); box-shadow: 0 10px 24px rgba(0,0,0,.4); pointer-events: none; }
.questbox h4{ margin: 0 0 8px; font: 700 15px var(--display); letter-spacing: .04em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.questbox ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.questbox li{ display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: start; font-size: 12.5px; line-height: 1.35; color: var(--parch); }
.questbox li i{ width: 8px; height: 8px; margin-top: 4px; transform: rotate(45deg); border: 1px solid var(--gold-2); background: #0a070a; }
.questbox li.done{ color: #8f8a7a; text-decoration: line-through; }
.questbox li.done i{ background: var(--gold-2); }
.questbox li.go{ color: var(--gold-1); font-weight: 700; }
.questbox li.go i{ background: var(--shard); box-shadow: 0 0 8px var(--shard); animation: hpPulse 1.2s ease-in-out infinite; }
.questbox li b{ font-weight: 700; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.skill.ult{ width: 66px; height: 66px; border-image: url(../img/slot.svg) 12 fill / 10px stretch; box-shadow: 0 0 18px rgba(240,198,116,.35); }
.skill.ult > svg{ stroke: #fff2c0; filter: drop-shadow(0 0 8px rgba(255,200,90,.8)); width: 34px; height: 34px; }
.skill.ult::before{ content: ""; position: absolute; inset: -5px; border: 1px solid rgba(240,198,116,.55); transform: rotate(45deg) scale(.72); pointer-events: none; }
.skill.ult.locked::before{ display: none; }
.bsk.ult b{ color: var(--gold-1); }
.ft.poison{ color: #9fe870; font-size: 16px; }
.gmtext{ text-align: center; color: #e8dcc0 !important; font-size: 15.5px; line-height: 1.6 !important; }
.gmlist{ margin: 0; padding: 12px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); }
.gmlist li{ display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; line-height: 1.45; color: var(--parch); }
.gmlist li b{ color: var(--gold-1); white-space: nowrap; }
.gmlist li.done{ color: #8f8a7a; text-decoration: line-through; }
.gmrow{ justify-content: center; }
.gmrow .btn{ flex: 0 1 auto; padding: 11px 22px; }

/* ---------- settings ---------- */
.menu-list .btn{ text-align: center; padding: 12px 16px; }
body.no-names .ntags{ display: none; }
#settings .card{ width: min(520px, 100%); }
.settings{ display: flex; flex-direction: column; gap: 14px; }
.srow{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); }
.srow > span, .srow > label > span{ display: flex; flex-direction: column; gap: 2px; font-weight: 700; color: var(--parch); }
.modal .card{ max-height: calc(100vh - 48px); overflow-y: auto; }
.srow small{ font-weight: 500; color: #b49a6a; font-size: 12px; }
.srow input[type=range]{ width: 150px; accent-color: var(--gold-2); }
.seg{ display: flex; gap: 4px; }
.seg button{ padding: 6px 12px; font-size: 13px; }
.seg button[aria-pressed="true"]{ border-image: url(../img/btn-gold.svg) 12 fill / 11px stretch; color: #2a1606; text-shadow: none; }
.toggle{ position: relative; width: 52px; height: 26px; border-radius: 13px; cursor: pointer; background: #0a070a; border: 1px solid #b98c45; box-shadow: 0 0 0 1px #0e0905, inset 0 2px 4px rgba(0,0,0,.7); padding: 0; }
.toggle::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8a7a86, #3a2e36); border: 1px solid #0e0905; transition: transform .15s, background .15s; }
.toggle[aria-pressed="true"]::after{ transform: translateX(26px); background: radial-gradient(circle at 35% 30%, #fff0c4, #c99a4b); }
.toggle[aria-pressed="true"]{ background: linear-gradient(180deg, #3a2a12, #1a1208); }

/* ---------- townsfolk talk panel ---------- */
.npcdlg{ position: fixed; z-index: 16; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 18px); }
.npcdlg .dclose{ position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; }
.npcdlg .dclose svg{ width: 15px; height: 15px; }
.npcdlg .dtext{ padding-right: 34px; }

/* ---------- side panels: shop, bounty board, party, mercenaries ---------- */
.gpanel .bagcard{ width: min(640px, 100%); }
.gpanel .baghead{ flex-wrap: wrap; gap: 6px 14px; }
.gpanel .gpeye{ order: 3; flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.gpanel .baghead .iconbtn{ margin-left: auto; }
.pbody{ overflow-y: auto; padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.psec{ display: flex; flex-direction: column; gap: 8px; }
.psec h4{ margin: 0; font: 700 14px var(--display); letter-spacing: .08em; color: var(--gold-1); display: flex; justify-content: space-between; align-items: baseline; }
.psec h4 small{ font: 500 11px var(--body); color: #9c8a6a; letter-spacing: .04em; }
.pnote, .psec .empty{ margin: 0; color: #b49a6a; font-size: 13px; line-height: 1.5; }
.brow, .srow2{ display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); }
.brow > div, .srow2 > div:not(.dicon){ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brow b, .srow2 b{ font-size: 13.5px; color: var(--parch); }
.brow small, .srow2 small{ font-size: 11.5px; color: #9c8a6a; overflow: hidden; text-overflow: ellipsis; }
.brow > span, .srow2 > span{ font-weight: 700; color: var(--gold-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.brow.done{ box-shadow: inset 0 0 18px rgba(111,207,106,.25); }
.brow:not(:has(.seal)){ grid-template-columns: 1fr auto auto; }
.seal{ width: 18px; height: 18px; transform: rotate(45deg); background: var(--c); border: 2px solid var(--t); box-shadow: 0 0 0 1px #0e0905; }
.pay{ display: inline-flex; align-items: center; gap: 5px; }
.pay .coin, .ptabs .coin{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe6a0, #d9a441); box-shadow: inset 0 -2px 0 #a8762a; }
.srow2 .dicon{ width: 42px; height: 42px; }
.srow2 .dicon svg{ width: 24px; height: 24px; }
.srow2:has(.dot){ grid-template-columns: auto 1fr auto; }
.dot{ width: 10px; height: 10px; border-radius: 50%; background: #5a5560; border: 1px solid #0e0905; }
.dot.on{ background: #6fcf6a; box-shadow: 0 0 6px #6fcf6a; }
.dot.merc{ background: var(--gold-2); box-shadow: 0 0 6px var(--gold-2); }
.ptabs{ display: flex; gap: 8px; align-items: center; }
.ptabs .pill{ margin-left: auto; }
.clans{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.crow{ display: grid; grid-template-columns: 16px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 7px 10px; background: rgba(0,0,0,.25); border-left: 2px solid var(--gold-3); font-size: 12px; }
.crow i{ grid-row: span 2; width: 14px; height: 14px; transform: rotate(45deg); background: var(--c); border: 2px solid var(--t); }
.crow b{ color: var(--parch); font-size: 13px; } .crow span{ color: #9c8a6a; grid-column: 2; } .crow em{ grid-row: span 2; grid-column: 3; grid-row-start: 1; font-style: normal; color: var(--gold-1); font-weight: 700; }
.crow.mine{ border-left-color: var(--shard); background: rgba(95,224,208,.08); }
.questbox h4.sub{ margin-top: 10px; font-size: 13px; }

/* ---------- party frames (left, under the profile) ---------- */
.partyframes{ position: absolute; left: max(14px, env(safe-area-inset-left)); top: calc(max(14px, env(safe-area-inset-top)) + 128px); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.pf{ width: 190px; padding: 6px 10px 8px; border: 1px solid transparent; border-image: url(../img/frame-slim.svg) 14 / 9px / 2px stretch; background: var(--skin-plate); display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.pf b{ font: 700 13px var(--display); color: var(--gold-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf small{ font-size: 10px; color: #9c8a6a; text-align: right; align-self: center; }
.pf i{ grid-column: 1 / -1; height: 5px; background: #0a070a; border: 1px solid #8a6128; }
.pf i em{ display: block; height: 100%; background: linear-gradient(180deg, #ff8070, #b7352b); }
.pf.off{ opacity: .55; }
.ft.ally{ color: #bfe0ff; font-size: 17px; }
body.touch .partyframes{ top: calc(max(8px, env(safe-area-inset-top)) + 140px); }
body.touch .pf{ width: 150px; padding: 4px 8px 6px; }

/* ---------- character creator on phones ---------- */
@media (max-height: 520px) and (orientation: landscape){
  :root{ --panel-w: min(44vw, 360px); }
  .brand{ top: max(8px, env(safe-area-inset-top)); font-size: 18px; left: auto; right: max(14px, env(safe-area-inset-right)); }
  .brand small{ display: none; }
  .panel{ left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); right: auto; width: var(--panel-w); height: auto; border-radius: 3px; }
  .tabs{ margin: 2px 6px 0; }
  .tab{ padding: 9px 0 8px; font-size: 10.5px; }
  .pane{ padding: 10px 12px; gap: 12px; }
  .label{ font-size: 10.5px; }
  #name{ padding: 7px 10px; font-size: 16px; }
  .hint{ font-size: 11px; }
  .classes{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; grid-auto-flow: row dense; }
  .cls{ grid-template-columns: 30px 1fr; padding: 7px 8px; gap: 0 8px; align-items: center; }
  .cls svg{ width: 30px; height: 30px; padding: 5px; grid-row: auto; }
  .cls h4{ font-size: 14px; }
  .cls p, .cls .stats{ display: none; }
  .cls[aria-pressed="true"]{ grid-column: 1 / -1; grid-template-columns: 30px 1fr; }
  .cls[aria-pressed="true"] p{ display: block; grid-column: 1 / -1; font-size: 11.5px; margin-top: 4px; }
  .sw{ width: 28px; height: 28px; }
  .swatches{ gap: 7px; }
  .chip{ padding: 5px 10px; font-size: 12.5px; }
  .foot{ padding: 8px 10px; gap: 8px; }
  .foot .btn{ padding: 8px 10px; font-size: 13px; }
  .btn.primary{ font-size: 15px; }
  .dock{ left: calc(var(--panel-w) + (100vw - var(--panel-w)) / 2); bottom: max(8px, env(safe-area-inset-bottom)); }
  .dock span{ display: none; }
  .modal .card{ padding: 18px 20px; gap: 10px; }
  .modal .card h2{ font-size: 26px; }
}
@media (max-width: 760px) and (orientation: portrait){
  .classes{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; grid-auto-flow: row dense; }
  .cls{ grid-template-columns: 30px 1fr; padding: 8px; gap: 0 8px; align-items: center; }
  .cls svg{ width: 30px; height: 30px; padding: 5px; grid-row: auto; }
  .cls h4{ font-size: 15px; }
  .cls p, .cls .stats{ display: none; }
  .cls[aria-pressed="true"]{ grid-column: 1 / -1; }
  .cls[aria-pressed="true"] p, .cls[aria-pressed="true"] .stats{ display: grid; grid-column: 1 / -1; }
  .cls[aria-pressed="true"] p{ display: block; margin-top: 6px; }
  .brand{ font-size: 18px; }
  .pbody{ padding: 12px 14px 18px; }
  .brow, .srow2{ grid-template-columns: 1fr auto; }
  .brow .seal, .srow2 .dicon{ display: none; }
}
body.touch .npcdlg{ width: min(620px, calc(100% - 24px)); padding: 18px 16px 14px; bottom: max(8px, env(safe-area-inset-bottom)); }
body.touch .npcdlg .dtext{ font-size: 14.5px; min-height: 0; margin-bottom: 10px; }
body.touch .dopt{ padding: 8px 12px; font-size: 13px; }
body.touch .gpanel .bagcard{ max-height: calc(100vh - 20px); }
body.touch .gpanel{ padding: 10px; }

/* ---------- shift-lock ---------- */
.crosshair{ position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg); border: 2px solid rgba(255,240,200,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.4); pointer-events: none; display: none; }
.crosshair::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--gold-1); }
body.shiftlock .crosshair{ display: block; }
body.shiftlock #scene{ cursor: none; }

/* ---------- touch devices: Genshin-style controls ---------- */
.touch-only{ display: none !important; }
body.touch .touch-only{ display: revert !important; }
body.touch{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body.touch .hud button, body.touch .skill{ touch-action: none; }

/* action cluster, bottom right: big attack button with skills in an arc around it */
body.touch .skillbar{ left: auto; transform: none; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: 270px; height: 250px; padding: 0; gap: 0; border: 0; border-image: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
body.touch .skillbar .sdiv{ display: none; }
body.touch .skill{ position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid #b98c45; border-image: none;
  background: radial-gradient(circle at 50% 35%, rgba(58,46,56,.88), rgba(16,12,18,.9) 70%);
  box-shadow: 0 0 0 2px rgba(14,9,5,.9), inset 0 2px 4px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.45); width: 58px; height: 58px; }
body.touch .skill .cd, body.touch .skill .lock{ inset: 2px; border-radius: 50%; }
body.touch .skill kbd{ display: none; }
body.touch .skill.pressed{ transform: scale(.92); filter: brightness(1.3); }
body.touch .skill > svg{ width: 27px; height: 27px; }
body.touch .skill[data-i="0"]{ width: 88px; height: 88px; right: 0; bottom: 0; border-width: 3px; }
body.touch .skill[data-i="0"] > svg{ width: 40px; height: 40px; }
body.touch .skill[data-i="1"]{ right: 112px; bottom: 10px; }
body.touch .skill[data-i="2"]{ right: 92px; bottom: 80px; }
body.touch .skill[data-i="3"]{ right: 28px; bottom: 112px; }
body.touch .skill.ult{ width: 62px; height: 62px; right: 168px; bottom: 96px; border-image: none; border-color: var(--gold-1); box-shadow: 0 0 0 2px rgba(14,9,5,.9), 0 0 16px rgba(240,198,116,.45); }
body.touch .skill.ult::before{ display: none; }
body.touch .skill.potion{ width: 44px; height: 44px; right: 244px; bottom: 30px; }
body.touch .skill.potion b{ left: 50%; top: auto; bottom: -6px; transform: translateX(-50%); font-size: 11px; padding: 0 5px; border-radius: 6px; background: #120c10; border: 1px solid #8a6128; }
body.touch .skill .cdt{ font-size: 15px; }
body.touch .skill .lock{ font-size: 9px; }
body.touch .jump{ position: absolute; right: calc(max(14px, env(safe-area-inset-right)) + 184px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 12px);
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0; }
body.touch .jump svg{ width: 24px; height: 24px; stroke: var(--gold-1); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* movement stick, bottom left: a resting base shows where to put your thumb */
body.touch .joybase{ position: absolute; left: calc(max(14px, env(safe-area-inset-left)) + 40px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 34px); width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(232,214,170,.28); background: radial-gradient(circle, rgba(16,12,18,.25), rgba(16,12,18,.45)); pointer-events: none; display: grid !important; place-items: center; transition: opacity .2s; }
body.touch .joybase i{ width: 46px; height: 46px; border-radius: 50%; background: rgba(232,214,170,.25); border: 1.5px solid rgba(232,214,170,.45); }
body.touch .joybase span{ position: absolute; bottom: -20px; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,214,170,.5); }
body.touch.joy-active .joybase{ opacity: 0; }
.joy{ border: 2px solid rgba(232,214,170,.5); background: radial-gradient(circle, rgba(16,12,18,.2), rgba(16,12,18,.5)); width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.joy i{ background: radial-gradient(circle at 40% 35%, #fff0c8, #c99a4b); border: 2px solid #0e0905; }

/* compact HUD on touch screens */
body.touch .keys, body.touch .hloc{ display: none; }
body.touch .prof{ top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }
body.touch .ava{ width: 70px; height: 70px; }
body.touch .xpring{ -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px, #000 31.5px, transparent 32.5px); mask: radial-gradient(circle, transparent 26px, #000 27px, #000 31.5px, transparent 32.5px); }
body.touch .avain{ inset: 10px; }
body.touch .lvl{ width: 30px; height: 35px; bottom: -10px; font-size: 13px; padding-bottom: 6px; }
body.touch .pinfo{ min-width: 150px; margin-left: -16px; padding: 7px 12px 8px 24px; gap: 4px; }
body.touch .pname b{ font-size: 15px; }
body.touch .pname span{ display: none; }
body.touch .hpbar{ height: 14px; }
body.touch .hpbar span{ font-size: 10px; }
body.touch .xpbar span{ display: none; }
body.touch .buffs{ margin-top: 6px; }
body.touch .buff{ font-size: 0; padding: 3px; gap: 0; }
body.touch .buff b{ font-size: 10px; margin-left: 4px; }
body.touch .mapframe, body.touch .mapframe canvas{ width: 112px; height: 112px; }
body.touch .mapframe::before{ inset: -12px; }
body.touch .mapbox{ top: calc(max(8px, env(safe-area-inset-top)) + 12px); right: calc(max(10px, env(safe-area-inset-right)) + 12px); gap: 14px; }
body.touch .mapres{ gap: 4px; }
body.touch .mapres .pill{ padding: 4px 8px; font-size: 12px; }
body.touch .sidebtns{ top: calc(max(8px, env(safe-area-inset-top)) + 4px); right: calc(max(10px, env(safe-area-inset-right)) + 140px); flex-direction: row; }
body.touch .iconbtn{ width: 40px; height: 40px; }
body.touch .questbox{ top: calc(max(8px, env(safe-area-inset-top)) + 96px); left: max(10px, env(safe-area-inset-left)); right: auto; bottom: auto; width: 220px; padding: 8px 12px; pointer-events: auto; cursor: pointer; }
body.touch .questbox h4{ margin: 0; display: flex; justify-content: space-between; font-size: 13px; }
body.touch .questbox h4 small{ -webkit-text-fill-color: var(--gold-1); }
body.touch .questbox ul{ display: none; margin-top: 8px; }
body.touch .questbox.open ul{ display: flex; }
.questbox h4 small{ font: 700 12px var(--body); margin-left: 8px; }
body.touch .prompt{ left: 50%; right: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 200px); transform: translateX(-50%); padding: 10px 18px 10px 10px; font-size: 15px; }
@media (max-height: 420px){ body.touch .prompt{ left: 34%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 120px); } }
body.touch .chat{ left: max(10px, env(safe-area-inset-left)); bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 140px); width: min(300px, 40vw); }
body.touch .chat.typing{ top: 30%; width: min(460px, 70vw); left: 50%; transform: translateX(-50%); z-index: 8; }
body.touch .netstat{ display: none; }
body.touch .toasts{ top: 56px; }
body.touch .toast{ font-size: 12px; padding: 5px 12px; }
body.touch .toast.level, body.touch .toast.discover{ font-size: 14px; padding: 7px 36px 9px; }
body.touch .ft{ font-size: 16px; } body.touch .ft.crit{ font-size: 21px; }
body.touch .cineskip{ top: calc(11vh + 6px); }

/* phones held upright: ask for landscape, it is what the controls are built for */
.rotatehint{ position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px;
  background: rgba(8,6,10,.92); color: var(--parch); pointer-events: auto; }
.rotatehint svg{ width: 64px; height: 64px; stroke: var(--gold-1); stroke-width: 1.6; fill: none; animation: tilt 2s ease-in-out infinite; }
.rotatehint b{ font: 700 22px var(--display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotatehint span{ color: var(--muted); font-size: 14px; }
@keyframes tilt{ 0%, 30%{ transform: rotate(0); } 60%, 100%{ transform: rotate(-90deg); } }
body.touch.portrait:not(.portrait-ok) .rotatehint{ display: flex !important; }
body.touch.portrait.portrait-ok .rotatehint{ display: none !important; }
.rotatehint .btn{ margin-top: 10px; padding: 10px 18px; }
body.touch:not(.portrait) .rotatehint{ display: none !important; }

@media (max-width: 760px){
  .ava{ width: 74px; height: 74px; }
  .xpring{ -webkit-mask: radial-gradient(circle, transparent 27.5px, #000 28.5px, #000 33px, transparent 34px); mask: radial-gradient(circle, transparent 27.5px, #000 28.5px, #000 33px, transparent 34px); }
  .avain{ inset: 11px; }
  .lvl{ width: 30px; height: 35px; bottom: -10px; font-size: 13px; padding-bottom: 6px; }
  .pinfo{ min-width: 140px; margin-left: -16px; padding: 8px 12px 8px 24px; }
  .mapframe::before{ inset: -13px; }
  .mapbox{ top: calc(max(12px, env(safe-area-inset-top)) + 13px); right: calc(max(12px, env(safe-area-inset-right)) + 13px); }
  .sidebtns{ right: calc(max(12px, env(safe-area-inset-right)) + 150px); }
  .skillbar{ padding: 9px 10px; gap: 6px; }
  .skill{ width: 48px; height: 48px; }
  .srow{ grid-template-columns: 1fr; }
  .questbox{ top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 200px); width: 210px; }
  .skill.ult{ width: 54px; height: 54px; }
}

/* ---------- sign in ---------- */
.auth .card{ max-width: 400px; gap: 12px; }
.authtabs{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.authtabs .btn[aria-pressed="true"]{ border-color: var(--gold-1); color: var(--gold-1); box-shadow: 0 0 12px rgba(240,198,116,.25); }
.authform{ display: grid; gap: 6px; text-align: left; }
.authform label{ font: 700 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin-top: 4px; }
.authform input{ width: 100%; box-sizing: border-box; padding: 10px 12px; font: 16px var(--body, inherit); color: var(--gold-1); background: rgba(10,7,10,.75); border: 1px solid #8a6128; border-radius: 6px; outline: none; }
.authform input:focus{ border-color: var(--gold-1); box-shadow: 0 0 0 2px rgba(240,198,116,.2); }
.authform .hint{ min-height: 1.3em; margin: 2px 0; font-size: 12.5px; color: #b9a98a; }
.authform .hint.bad{ color: #ff8a7a; }
.authform .btn.primary{ margin-top: 4px; }
.linkbtn{ background: none; border: 0; padding: 4px; color: #c9b48a; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover{ color: var(--gold-1); }
.acct{ position: fixed; top: 14px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: #d8c8a8;
  background: rgba(20,14,20,.72); border: 1px solid #8a6128; border-radius: 999px; }
.acct b{ color: var(--gold-1); }
body:not([data-mode="creator"]) .acct{ display: none; }
@media (max-width: 760px){ .acct{ top: 8px; right: 8px; padding: 4px 10px; font-size: 11.5px; } }