/* =====================================================================
   WILDLIGHT DESIGN SYSTEM (Release 2)
   Deep forest greens, dark stone and wood, muted bronze and gold, with
   magical turquoise for the Wildlight itself. Every screen is built from
   the components in this file: panels (.sheet), buttons (.btn), bars,
   tags, item slots, creature frames, lists and overlays.
   ===================================================================== */
:root{
  --bg0:#070b09;--bg1:#0c1310;--bg2:#121c17;
  --panel:#16211b;--panel2:#1c2a22;--panel3:#24352b;--inset:#0b120e;
  --line:#3c3a2a;--line2:#5d4c2e;--bronze:#a8814a;--bronze2:#7a5c32;--gold:#e3bd63;--gold2:#b88a2e;
  --teal:#4fd8c8;--teal2:#1f9488;--ember:#d9542f;--crimson:#a3322a;
  --text:#ece4cf;--text2:#bcb39b;--text3:#8d8670;
  --good:#7fd36a;--bad:#ef6155;--warn:#e8a83a;--xp:#6aa8ff;
  --vuur:#e0602a;--water:#3f8fe0;--plant:#4fae4a;--steen:#a88a5a;--schaduw:#8a66d8;--neutraal:#9a8f80;
  --r0:#b9b3a4;--r1:#7fd36a;--r2:#5aa8ff;--r3:#b98aff;--r4:#f2a531;--r5:#ff5266;--r6:#4fd8c8;
  --f-display:"Cinzel",Georgia,serif;--f-body:"Alegreya",Georgia,"Times New Roman",serif;
  --radius:10px;--shadow:0 14px 34px rgba(0,0,0,.5);
  --side:250px;--hud:64px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg0);color:var(--text)}
body{font-family:var(--f-body);font-size:16px;line-height:1.45;min-height:100dvh;
  background:radial-gradient(120% 70% at 50% -10%,rgba(79,216,200,.08),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(168,129,74,.08),transparent 60%),linear-gradient(180deg,#0d1612,#070b09) fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
button,input,select,textarea{font:inherit;color:inherit}
html,body{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,.btn,nav,.chip,.tabbar{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
[hidden]{display:none!important}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:.02em;text-wrap:balance;color:#f0e4c4}
h1{font-size:28px;font-weight:900}
h2{font-size:21px;font-weight:700}
h3{font-size:16px;font-weight:700}
.label{font-family:var(--f-display);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--bronze);font-weight:700}
.muted,.sheet .muted{color:var(--text2)}
.dim{color:var(--text3)}
.small{font-size:14px}.tiny{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.gold-t{color:var(--gold)}.teal-t{color:var(--teal)}.good-t{color:var(--good)}.bad-t{color:var(--bad)}
.dmg{font-weight:800;color:#ff8a7a}.heal{font-weight:800;color:var(--good)}.crit{font-weight:800;color:var(--gold)}
.phase{color:#ff9b6a}
.up{color:var(--good);font-weight:800}.down{color:var(--bad);font-weight:800}
.err{color:var(--bad);font-weight:700;margin:0}
.rule{height:1px;border:0;margin:2px 0;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.ornament{display:flex;align-items:center;gap:10px;color:var(--bronze)}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.ornament::after{background:linear-gradient(90deg,var(--line2),transparent)}

/* ---------- Layout ---------- */
.app{position:relative;z-index:1;min-height:100dvh;display:flex}
.col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100dvh}
main{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:1120px;margin:0 auto;
  padding:12px max(14px,env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center}
.row.wr{flex-wrap:wrap}.row.top{align-items:flex-start}.row.sb{justify-content:space-between}
.grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.narrow{max-width:760px;width:100%;margin:0 auto}
@media (min-width:860px){.grid2{grid-template-columns:1fr 1fr}.span2{grid-column:1/-1}}

/* ---------- Panels ---------- */
.sheet{position:relative;padding:16px;border-radius:var(--radius);color:var(--text);
  background:var(--noise),linear-gradient(180deg,rgba(255,240,200,.035),rgba(255,240,200,0) 38%),linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,190,.07),var(--shadow)}
.sheet::before{content:"";position:absolute;inset:5px;pointer-events:none;border-radius:6px;opacity:.75;
  background:linear-gradient(var(--bronze),var(--bronze)) top left/14px 1.5px no-repeat,linear-gradient(var(--bronze),var(--bronze)) top left/1.5px 14px no-repeat,
  linear-gradient(var(--bronze),var(--bronze)) top right/14px 1.5px no-repeat,linear-gradient(var(--bronze),var(--bronze)) top right/1.5px 14px no-repeat,
  linear-gradient(var(--bronze),var(--bronze)) bottom left/14px 1.5px no-repeat,linear-gradient(var(--bronze),var(--bronze)) bottom left/1.5px 14px no-repeat,
  linear-gradient(var(--bronze),var(--bronze)) bottom right/14px 1.5px no-repeat,linear-gradient(var(--bronze),var(--bronze)) bottom right/1.5px 14px no-repeat}
.sheet.plain::before{display:none}
.sheet.tight{padding:12px}
.sheet.glow{border-color:var(--teal2);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 24px rgba(79,216,200,.18),var(--shadow)}
.sheet.goldframe{border-color:var(--gold2);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 22px rgba(227,189,99,.16),var(--shadow)}
.ptitle{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.ptitle .ic{color:var(--gold);width:20px;height:20px}
.ptitle h2,.ptitle h3{flex:1;min-width:0}
.ptitle .aside{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums}
.pagehead{display:flex;align-items:flex-end;gap:12px;padding:4px 2px 2px}
.pagehead h1{font-size:24px}
.pagehead .sub{color:var(--text2);font-size:14px}
.lines{display:flex;flex-direction:column;gap:4px}.lines p{margin:0}
.list>*{border-bottom:1px solid rgba(168,129,74,.16)}.list>*:last-child{border-bottom:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;padding:9px 14px;font-weight:700;color:var(--text);
  background:linear-gradient(180deg,#2c3a31,#1d2721);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,236,190,.1),0 2px 0 rgba(0,0,0,.5);
  transition:transform .08s,filter .15s,background .15s;text-align:center}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.4)}
.btn.red{background:linear-gradient(180deg,#c0472f,#7e2117);border-color:#e0a24a;color:#fff4e2;font-family:var(--f-display);letter-spacing:.05em;text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,220,180,.3),0 0 18px rgba(217,84,47,.25),0 2px 0 rgba(0,0,0,.6)}
.btn.gold{background:linear-gradient(180deg,#f0cf7a,#b4842a);border-color:#f6dd98;color:#2a1a05;font-family:var(--f-display);letter-spacing:.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(227,189,99,.2),0 2px 0 rgba(0,0,0,.6)}
.btn.teal{background:linear-gradient(180deg,#2fb3a5,#14665e);border-color:#7ff0e2;color:#effffd;font-family:var(--f-display);letter-spacing:.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 16px rgba(79,216,200,.25),0 2px 0 rgba(0,0,0,.6)}
.btn.ghost{background:rgba(0,0,0,.2);border-color:var(--line2)}
.btn.sm{padding:6px 11px;font-size:14px;border-radius:7px}
.btn.xs{padding:4px 8px;font-size:13px;border-radius:6px}
.btn.wide{width:100%}
.btn.big{font-size:20px;padding:16px}
.btn.on{background:linear-gradient(180deg,#3c4e40,#283830);border-color:var(--gold);color:var(--gold)}
.btn small,.btn .sub{font-family:var(--f-body);font-weight:500;font-size:12.5px;opacity:.85;letter-spacing:0}
.btn .ic{width:18px;height:18px}
.linkbtn{background:none;border:0;color:var(--teal);text-decoration:underline;text-underline-offset:3px;padding:4px;font-weight:700}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--text);position:relative}
.iconbtn .ic{width:20px;height:20px}
.badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ember);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:1.5px solid var(--bg0)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 8px var(--ember)}
.seg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.seg::-webkit-scrollbar{display:none}
.seg .btn{white-space:nowrap;padding:7px 12px;font-size:14px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .btn{padding:6px 10px;font-size:13.5px}

/* ---------- Inputs ---------- */
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--inset);color:var(--text);font-size:16px;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
textarea{resize:vertical;min-height:70px}
input::placeholder,textarea::placeholder{color:var(--text3)}
form.row input{min-width:0}

/* ---------- Bars ---------- */
.bar{position:relative;height:10px;background:var(--inset);border:1px solid #2a2a1f;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.bar>i{display:block;height:100%;border-radius:99px;transition:width .35s;background:linear-gradient(180deg,#9be07f,#3f8f35)}
.bar>i::after{content:"";display:block;height:45%;margin:1px 3px 0;border-radius:99px;background:rgba(255,255,255,.28)}
.bar.mid>i{background:linear-gradient(180deg,#f2c35a,#a8761c)}.bar.lo>i{background:linear-gradient(180deg,#ff7a6a,#a3261c)}
.bar.xp>i{background:linear-gradient(180deg,#9cc6ff,#3d6fc4)}
.bar.qp>i{background:linear-gradient(180deg,#f0cf7a,#a8761c)}
.bar.teal>i{background:linear-gradient(180deg,#8ff5e8,#1f9488)}
.bar.shield>i{background:linear-gradient(180deg,#d6e6ff,#7b93b8)}
.bar.thin{height:6px}
.bar.boss{height:16px;border-color:var(--gold2);box-shadow:0 0 12px rgba(227,189,99,.25),inset 0 1px 3px rgba(0,0,0,.7)}
.bar.boss>i{background:linear-gradient(180deg,#ff6a5a,#8a1a14)}
.bar .mark{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,236,190,.75);box-shadow:0 0 4px #000}
.hpn{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums}

/* ---------- Tags, chips, status ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px 2px 6px;border-radius:99px;color:#fff;vertical-align:middle;border:1px solid rgba(255,255,255,.18)}
.tag .ic{width:11px;height:11px}
.t-vuur{background:linear-gradient(180deg,#e8743e,#a83a14)}.t-water{background:linear-gradient(180deg,#4f9ef0,#22589c)}.t-plant{background:linear-gradient(180deg,#5fbf55,#2c6e26)}
.t-steen{background:linear-gradient(180deg,#b89868,#6e5532)}.t-schaduw{background:linear-gradient(180deg,#9a78e6,#4e3496)}.t-neutraal{background:linear-gradient(180deg,#a89c8a,#625a4c)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:700;background:rgba(0,0,0,.35);border:1px solid var(--line2);color:var(--text2);white-space:nowrap}
.scene .facts button.pill{cursor:pointer;font:inherit;font-size:12.5px;font-weight:700}.scene .facts button.pill:hover{filter:brightness(1.25)}
.pill.teal{color:var(--teal);border-color:rgba(79,216,200,.4)}.pill.gold{color:var(--gold);border-color:rgba(227,189,99,.45)}.pill.bad{color:var(--bad);border-color:rgba(239,97,85,.45)}.pill.good{color:var(--good);border-color:rgba(127,211,106,.4)}
.st{display:inline-block;padding:0 7px;border-radius:99px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.2);color:#fff;line-height:1.5}
.st-burn{background:#a8441c}.st-poison{background:#3d7a2a}.st-stun{background:#7a6438}.st-weak{background:#5a3e9a}.st-soak{background:#2a5f9a}.st-shield{background:#5b6b86}.st-regen{background:#2d7d5e}.st-valor{background:#a8761c}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);border:1px solid var(--line2);border-radius:99px;padding:3px 10px 3px 6px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.chip .ic{width:18px;height:18px}
.r0{color:var(--r0)}.r1{color:var(--r1)}.r2{color:var(--r2)}.r3{color:var(--r3)}.r4{color:var(--r4)}
.r5{color:var(--r5);text-shadow:0 0 8px rgba(255,82,102,.45)}.r6{color:var(--r6);text-shadow:0 0 8px rgba(79,216,200,.45)}
/* Animated rarity names: Mythic pulses, Relic shimmers, Fated flows through every colour. */
.r5:not(.slot){animation:mythglow 2.4s ease-in-out infinite}
@keyframes mythglow{50%{text-shadow:0 0 14px rgba(255,82,102,.9),0 0 2px #fff}}
.r6:not(.slot){background:linear-gradient(100deg,var(--r6) 0%,var(--r6) 40%,#effffd 50%,var(--r6) 60%,var(--r6) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 5px rgba(79,216,200,.45));animation:shimmer 3.2s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.r7:not(.slot){background:linear-gradient(90deg,#ff5266,#f2a531,#ffe9a8,#4fd8c8,#b98aff,#ff5266);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;filter:drop-shadow(0 0 6px rgba(185,138,255,.55));animation:fateflow 4s linear infinite}
@keyframes fateflow{from{background-position:0% 0}to{background-position:300% 0}}

/* ---------- Item slots and tiles ---------- */
.slot{--rc:var(--r0);width:44px;height:44px;flex:none;border-radius:9px;display:grid;place-items:center;position:relative;color:var(--rc);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 28%,transparent),transparent 70%),linear-gradient(180deg,#1f2b24,#111914);
  border:1.5px solid color-mix(in srgb,var(--rc) 70%,#000);box-shadow:inset 0 0 10px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6)}
.slot .ic{width:24px;height:24px}
.slot.r1{--rc:var(--r1)}.slot.r2{--rc:var(--r2)}.slot.r3{--rc:var(--r3)}.slot.r4{--rc:var(--r4);box-shadow:0 0 12px rgba(242,165,49,.35),inset 0 0 10px rgba(0,0,0,.6)}
.slot.r5{--rc:var(--r5);box-shadow:0 0 14px rgba(255,82,102,.45),inset 0 0 10px rgba(0,0,0,.6)}.slot.r6{--rc:var(--r6);box-shadow:0 0 14px rgba(79,216,200,.45),inset 0 0 10px rgba(0,0,0,.6)}
.slot.r7{--rc:#b98aff;box-shadow:0 0 16px rgba(185,138,255,.6),inset 0 0 10px rgba(0,0,0,.6);animation:fated 3s linear infinite}
@keyframes fated{0%,100%{border-color:#ff5266}33%{border-color:#4fd8c8}66%{border-color:#f2a531}}
.slot.empty{--rc:#4a4a3a;opacity:.6}
.slot .plus{position:absolute;right:-4px;bottom:-5px;font-size:10.5px;font-weight:900;background:var(--bg0);border:1px solid var(--line2);color:var(--gold);border-radius:6px;padding:0 4px;line-height:1.4}
.slot .en{position:absolute;left:-4px;top:-5px;font-size:10px;color:var(--teal)}
.slot.lg{width:64px;height:64px;border-radius:12px}.slot.lg .ic{width:34px;height:34px}
.item{display:flex;align-items:center;gap:10px;padding:9px 0}
.item .nm{font-weight:800}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid transparent;font-size:11.5px;line-height:1.15;text-align:center;color:var(--text2)}
.tile:hover{border-color:var(--line2)}
.tile .slot{width:48px;height:48px}
.doll-head{display:flex;align-items:center;gap:14px}
.doll-head .portrait{width:76px;height:76px}
.paperdoll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.paperdoll .eqslot{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;text-align:center;padding:10px 6px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid rgba(168,129,74,.3);min-width:0;color:var(--text)}
.paperdoll .eqslot:not(:disabled):hover{border-color:var(--line2)}
.paperdoll .eqslot:disabled{cursor:default}
.paperdoll .eqslot .label{font-size:10px;letter-spacing:.12em}
.paperdoll .eqslot .nm{font-weight:800;font-size:13px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.paperdoll .eqslot .slot.lg{width:56px;height:56px}
.tile span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- Portraits and creature frames ---------- */
.art{width:72px;height:72px;flex:none;overflow:visible}
.art.xl{width:120px;height:120px}
.art.xxl{width:180px;height:180px}
.frame{--el:#9a8f80;position:relative;flex:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--el) 45%,transparent),transparent 68%),radial-gradient(circle,#1d2a22,#0b120e);
  border:2px solid color-mix(in srgb,var(--el) 60%,var(--bronze));box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 18px color-mix(in srgb,var(--el) 30%,transparent),inset 0 0 14px rgba(0,0,0,.7)}
.frame .art{width:82%;height:82%}
.frame.sm{width:48px;height:48px;border-width:1.5px}.frame.md{width:64px;height:64px}.frame.lg{width:110px;height:110px}
.frame.boss{border-color:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 30px rgba(227,189,99,.35),inset 0 0 14px rgba(0,0,0,.7)}
.frame.shinyf{border-color:#ffe28a;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 22px rgba(255,226,138,.55)}
.frame .lvb{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:900;font-size:11px;background:var(--bg0);border:1px solid var(--bronze);color:var(--gold);border-radius:8px;padding:0 6px;white-space:nowrap}
.f-vuur{--el:var(--vuur)}.f-water{--el:var(--water)}.f-plant{--el:var(--plant)}.f-steen{--el:var(--steen)}.f-schaduw{--el:var(--schaduw)}.f-neutraal{--el:var(--neutraal)}
.shiny{filter:hue-rotate(150deg) saturate(1.5) drop-shadow(0 0 5px rgba(255,226,120,.95))}
.portrait{width:84px;height:84px;flex:none}
.hearts{display:inline-flex;gap:2px;color:#ff6f86}.hearts .ic{width:13px;height:13px}.hearts .off{color:#3e3a33}
.icon{width:42px;height:42px;flex:none}

/* ---------- HUD (top bar) ---------- */
.hud{position:sticky;top:0;z-index:25;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,rgba(9,14,11,.97),rgba(12,19,15,.94));border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.hud .in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:10px}
.hud .me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:0;padding:0;text-align:left}
.hud .pf{position:relative;width:46px;height:46px;flex:none}
.hud .pf svg{width:46px;height:46px}
.hud .pf .lv{position:absolute;bottom:-4px;right:-6px;font-family:var(--f-display);font-weight:900;font-size:11px;background:linear-gradient(180deg,#f0cf7a,#b4842a);color:#2a1a05;border-radius:8px;padding:0 5px;border:1px solid #000;line-height:1.5}
.hud .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hud .nm{font-family:var(--f-display);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0e4c4}
.hud .nm small{font-family:var(--f-body);font-weight:500;color:var(--text2);font-size:12.5px}
.hud .bars{display:grid;grid-template-columns:1fr;gap:3px}
.hud .bars .bar{height:7px}
.hud .res{display:flex;align-items:center;gap:6px}
.hud .res .chip{font-size:13px;padding:2px 8px 2px 4px}
.hud .wide{display:none}
.hud .logo{display:none}
@media (min-width:700px){.hud .wide{display:inline-flex}.hud .bars{grid-template-columns:1fr 1fr;gap:8px}.hud .who{max-width:520px}}

/* ---------- Side navigation (desktop) ---------- */
.side{display:none}
@media (min-width:1024px){
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:var(--side);flex:none;overflow:auto;z-index:20;
    background:var(--noise),linear-gradient(180deg,#101a15,#0a110d);border-right:1px solid var(--line);box-shadow:6px 0 24px rgba(0,0,0,.45);padding:16px 12px 24px}
  .tabbar,.subnav{display:none!important}
  main{padding-bottom:28px}
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.brand svg{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(79,216,200,.4))}
.brand b{font-family:var(--f-display);font-weight:900;font-size:22px;letter-spacing:.1em;background:linear-gradient(180deg,#fff0c8,#d6a64a);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-size:11px;letter-spacing:.2em;color:var(--teal);font-family:var(--f-display);text-transform:uppercase}
.navgrp{margin-top:12px}
.navgrp .label{padding:0 10px 6px;display:block}
.navitem{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;border:0;background:none;color:var(--text2);font-weight:700;font-size:15px;text-align:left;position:relative}
.navitem .ic{width:19px;height:19px;color:var(--bronze)}
.navitem:hover{background:rgba(255,236,190,.05);color:var(--text)}
.navitem.on{background:linear-gradient(90deg,rgba(79,216,200,.16),rgba(79,216,200,0));color:#effffd}
.navitem.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.navitem.on .ic{color:var(--teal)}
.navitem .dot{margin-left:auto}
.navitem .cnt{margin-left:auto;font-size:11px;font-weight:800;background:var(--ember);color:#fff;border-radius:9px;padding:0 6px}

/* ---------- Mobile tab bar and sub navigation ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(180deg,rgba(14,22,18,.97),rgba(7,11,9,.99));border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.5);
  padding:0 max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px))}
.tabbar .in{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tabbar button{background:none;border:0;padding:9px 2px 10px;font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.tabbar button .ic{width:23px;height:23px}
.tabbar button.on{color:var(--gold)}
.tabbar button.on .ic{color:var(--teal);filter:drop-shadow(0 0 6px rgba(79,216,200,.6))}
.tabbar button.on::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:var(--teal);box-shadow:0 0 8px var(--teal);border-radius:2px}
.tabbar .dot{position:absolute;top:7px;right:calc(50% - 18px)}
.subnav{max-width:1120px;width:100%;margin:0 auto;padding:8px max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))}
.subnav .seg .btn{position:relative}
.subnav .seg .btn .dot{position:absolute;top:3px;right:3px;width:7px;height:7px}

/* ---------- Toast, overlays, celebrations ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;background:linear-gradient(180deg,#24352b,#16211b);color:var(--text);border:1px solid var(--gold2);font-weight:700;padding:11px 18px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 18px rgba(227,189,99,.2);max-width:calc(100% - 32px);text-align:center;animation:toastin .25s ease-out}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:1024px){.toast{bottom:24px;left:calc(50% + var(--side)/2)}}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(3,6,5,.72);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(84px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));animation:fade .18s}
.overlay.center{align-items:center}
@media (min-width:1024px){.overlay{align-items:center;padding-bottom:24px}}
.overlay>.sheet{width:100%;max-width:560px;max-height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px));overflow:auto;display:flex;flex-direction:column;gap:10px;animation:rise .22s ease-out}
@keyframes fade{from{opacity:0}}@keyframes rise{from{transform:translateY(16px);opacity:0}}
.closex{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid var(--line2);display:grid;place-items:center;color:var(--text2);z-index:2}
.closex .ic{width:16px;height:16px}
.celebrate{position:fixed;inset:0;z-index:80;pointer-events:none;display:grid;place-items:center;animation:celfade 2.6s ease-out forwards;overflow:hidden}
.celebrate .glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 45%,var(--c) 0%,transparent 55%);opacity:.55}
.celebrate .msg{position:relative;font-family:var(--f-display);font-weight:900;font-size:28px;text-align:center;color:#fff8ea;text-shadow:0 3px 0 #000,0 0 22px var(--c);padding:0 24px;animation:celpop .5s cubic-bezier(.2,1.6,.4,1)}
.celebrate i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:confetti var(--d) linear var(--dl) forwards}
@keyframes celfade{0%{opacity:0}8%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes celpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes confetti{to{transform:translate(var(--x),110vh) rotate(var(--r))}}
.float{position:fixed;z-index:60;pointer-events:none;font-family:var(--f-display);font-weight:900;font-size:24px;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.8);animation:floatup 1.1s ease-out forwards;white-space:nowrap}
.float.dmg{color:#ffe1d6}.float.crit{color:var(--gold);font-size:31px}.float.heal{color:#a6f09a}.float.miss{color:var(--text);font-size:17px}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

/* ---------- Ambient area effects (behind everything) ---------- */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;transition:background .8s}
#fx .p{position:absolute;border-radius:50%;opacity:0}
.fx-hollow{background:radial-gradient(120% 60% at 50% 0%,rgba(110,170,80,.16),transparent 62%)}
.fx-hollow .p{width:5px;height:5px;background:#d9f58a;box-shadow:0 0 10px 3px rgba(210,245,120,.7);animation:firefly var(--d) ease-in-out var(--dl) infinite alternate}
.fx-caverns{background:radial-gradient(120% 60% at 50% 0%,rgba(70,130,210,.18),transparent 62%)}
.fx-caverns .p{width:2px;height:16px;border-radius:2px;background:linear-gradient(#bfe2ff,transparent);animation:drip var(--d) linear var(--dl) infinite}
.fx-keep{background:radial-gradient(120% 60% at 50% 0%,rgba(230,100,40,.18),transparent 62%)}
.fx-keep .p{width:4px;height:4px;background:#ffb070;box-shadow:0 0 8px 2px rgba(255,140,60,.8);animation:ember var(--d) linear var(--dl) infinite}
.fx-crypt{background:radial-gradient(120% 60% at 50% 0%,rgba(140,100,220,.18),transparent 62%)}
.fx-crypt .p{width:260px;height:70px;background:radial-gradient(closest-side,rgba(210,200,255,.12),transparent);filter:blur(4px);animation:fog var(--d) linear var(--dl) infinite}
.fx-depths{background:radial-gradient(120% 60% at 50% 0%,rgba(30,170,160,.16),transparent 62%)}
.fx-depths .p,.fx-dungeon .p{width:3px;height:3px;background:#e6fffb;box-shadow:0 0 6px 2px rgba(160,255,240,.6);animation:twinkle var(--d) ease-in-out var(--dl) infinite}
.fx-dungeon{background:radial-gradient(120% 60% at 50% 0%,rgba(160,30,40,.18),transparent 62%)}
.fx-dungeon .p{background:#ff9a8a;box-shadow:0 0 6px 2px rgba(255,90,70,.6)}
@keyframes firefly{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}70%{opacity:.4}100%{opacity:.9;transform:translate(var(--x),var(--y))}}
@keyframes drip{0%{opacity:0;transform:translateY(-20px)}10%{opacity:.8}100%{opacity:0;transform:translateY(105vh)}}
@keyframes ember{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),-100vh)}}
@keyframes fog{0%{opacity:0;transform:translateX(-120px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(120vw)}}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:1}}

/* ---------- Scene (area artwork panel) ---------- */
.scene{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line2);box-shadow:0 0 0 1px rgba(0,0,0,.6),var(--shadow);
  background-color:#0b120e;background-position:center;background-size:cover;background-repeat:no-repeat;isolation:isolate}
.scene::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,9,7,.15) 0%,rgba(5,9,7,0) 30%,rgba(5,9,7,.55) 70%,rgba(5,9,7,.88) 100%)}
.scene-hollow{background-image:url(../assets/areas/hollow.svg)}.scene-caverns{background-image:url(../assets/areas/caverns.svg)}.scene-keep{background-image:url(../assets/areas/keep.svg)}
.scene-crypt{background-image:url(../assets/areas/crypt.svg)}.scene-depths{background-image:url(../assets/areas/depths.svg)}.scene-dungeon{background-image:url(../assets/areas/dungeon.svg)}
.scene .loc{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:flex-start;gap:8px;z-index:2}
.locbtn{display:flex;align-items:center;gap:8px;background:rgba(5,9,7,.72);border:1px solid var(--line2);border-radius:10px;padding:6px 10px;color:var(--text);backdrop-filter:blur(3px);min-width:0;text-align:left}
.locbtn b{font-family:var(--f-display);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.locbtn small{display:block;font-size:11.5px;color:var(--text2);font-weight:600}
.locbtn .ic{width:18px;height:18px;color:var(--gold)}
.scene .facts{margin-left:auto;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.scene .facts .pill{background:rgba(5,9,7,.72)}
.scene .say{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:12px 14px;border-radius:10px;background:rgba(8,13,10,.82);border:1px solid rgba(168,129,74,.35);backdrop-filter:blur(3px);text-align:center}
.say .big-t{font-family:var(--f-display);font-size:18px;font-weight:700;margin:0 0 4px;color:#f6e7bf}
.say p{margin:0}
.say.discovery{border-color:var(--teal);box-shadow:0 0 18px rgba(79,216,200,.3)}
.say.milestone,.say.region{border-color:var(--gold2);box-shadow:0 0 18px rgba(227,189,99,.25)}
.gain{display:flex;justify-content:center;gap:12px;margin-top:6px;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.gain .x{color:var(--xp)}.gain .g{color:var(--gold)}

/* ---------- Explore / battle one-screen layout ---------- */
html.fixed,html.fixed body{height:100%;overflow:hidden}
html.fixed .app,html.fixed .col{height:100%;min-height:0}
html.fixed main{min-height:0;overflow:hidden;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){html.fixed main{padding-bottom:16px}}
.screen{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0;width:100%;max-width:820px;margin:0 auto}
.screen>.scene{flex:1;min-height:170px}
.dock{flex:none;display:flex;flex-direction:column;gap:8px}
.dock .main{height:62px;display:grid;gap:8px}
.dock .main.one{grid-template-columns:1fr}.dock .main.two{grid-template-columns:2fr 1fr}.dock .main.three{grid-template-columns:1.4fr 1fr 1fr}
.dock .main .btn{height:100%;padding:0 8px;flex-direction:column;gap:1px;font-size:19px;line-height:1.1}
.dock .main .btn.gold,.dock .main .btn.teal{font-size:14.5px}
.dock .sec{height:44px;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:8px}
.dock .sec .btn{height:100%;padding:0 4px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:5px}
.dock .sec .btn .ic{width:17px;height:17px}
.stepbtn{position:relative;overflow:hidden}
.stepbtn .fill{position:absolute;inset:0;background:rgba(0,0,0,.3);transform-origin:left;transform:scaleX(0)}
.stepbtn.cool .fill{animation:cool 1s linear}
@keyframes cool{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.stepbtn span{position:relative;display:flex;align-items:center;gap:8px}
.strip{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.strip .cell{display:flex;align-items:center;gap:8px;min-width:0;border-radius:10px;padding:6px 8px;background:linear-gradient(180deg,rgba(28,42,34,.95),rgba(16,24,20,.95));border:1px solid var(--line)}
.strip .cell .frame,.strip .cell .pfm{width:38px;height:38px}
.strip .cell .pfm svg{width:38px;height:38px}
.strip .cell .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.strip .cell .t b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .bar{height:7px}
.strip .sts{display:flex;gap:3px;flex-wrap:wrap}
.strip .sts .st{font-size:10.5px;padding:0 5px}
.notes{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.notes .btn{flex:1;padding:8px 10px;font-size:14px;white-space:nowrap}

/* Battle */
.arena{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line2);background-color:#0b120e;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:var(--shadow)}
.arena::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,7,.05),rgba(5,9,7,.3) 45%,rgba(5,9,7,.88))}
.arena>*{position:relative}
.arena .kind{display:flex;align-items:center;gap:8px;padding:10px 12px 0}
.foe{display:flex;align-items:center;gap:14px;padding:6px 12px}
.foe .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.foe .info h2{font-size:20px;text-shadow:0 2px 6px #000}
.foe .sts{display:flex;gap:4px;flex-wrap:wrap;min-height:4px}
.foe.boss .frame{width:128px;height:128px}
.arena .log{flex:1;min-height:56px;overflow:auto;margin:6px 10px 10px;padding:8px 12px;border-radius:9px;background:rgba(5,9,7,.7);border:1px solid rgba(168,129,74,.25);display:flex;flex-direction:column;gap:3px;font-size:15px}
.arena .log p{margin:0}
.result{margin:auto 10px 10px;padding:12px;border-radius:10px;background:rgba(5,9,7,.85);border:1px solid var(--gold2);text-align:center;display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0;flex:0 1 auto;animation:rise .3s ease-out}
.result h2{font-size:26px;letter-spacing:.12em;background:linear-gradient(180deg,#fff0c8,#d6a64a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(227,189,99,.35))}
.result.lost{border-color:#7a2a22}.result.lost h2{background:linear-gradient(180deg,#ffb4a8,#b03a2c);-webkit-background-clip:text;background-clip:text}
.result.caught{border-color:var(--teal)}.result.caught h2{background:linear-gradient(180deg,#e6fffb,#4fd8c8);-webkit-background-clip:text;background-clip:text}
.loot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.loot .lc{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid var(--line2);text-align:left;font-size:13.5px;max-width:100%;animation:lootin .45s ease-out both}
.loot .lc:nth-child(2){animation-delay:.12s}.loot .lc:nth-child(3){animation-delay:.24s}
@keyframes lootin{from{opacity:0;transform:translateY(10px) scale(.9)}}
.result .lines{text-align:left;font-size:14px;color:var(--text2)}
.hit{animation:hit .35s}
@keyframes hit{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.catching{animation:catching .9s ease-in-out}
@keyframes catching{0%{filter:none}40%{filter:brightness(2.2) drop-shadow(0 0 18px #ffd87a);transform:scale(.85)}100%{filter:none}}
.defeated{animation:defeat .8s ease-out forwards}
@keyframes defeat{to{opacity:.12;filter:grayscale(1);transform:translateY(12px) scale(.88)}}
.charging{animation:charge 1s ease-in-out infinite}
@keyframes charge{50%{filter:drop-shadow(0 0 16px #ff5a3a) brightness(1.2)}}

/* ---------- Generic cards ---------- */
.card{display:flex;gap:12px;align-items:flex-start}
.card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mv{display:flex;flex-wrap:wrap;gap:4px}
.mv span{font-size:12.5px;background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:99px;padding:0 8px;color:var(--text2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats>div{border:1px solid var(--line2);border-radius:10px;text-align:center;padding:10px 4px;background:rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.stats b{font-family:var(--f-display);font-size:24px;color:#f6e7bf}
.stats .m{font-size:12px;color:var(--text2);line-height:1.25}
.derived{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 16px;font-size:14px;font-variant-numeric:tabular-nums}
.derived div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted rgba(168,129,74,.3);padding:4px 0}
.derived b{color:#f6e7bf}
.banner{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(227,189,99,.22),rgba(227,189,99,.05));border:1px solid var(--gold2);color:var(--gold);border-radius:9px;padding:9px 12px;font-weight:700}
.banner.teal{background:linear-gradient(90deg,rgba(79,216,200,.2),rgba(79,216,200,.04));border-color:var(--teal2);color:var(--teal)}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.act{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--line);text-align:left;color:var(--text);position:relative;min-width:0}
.act:hover{border-color:var(--line2);background:rgba(255,236,190,.04)}
.act .ic{width:26px;height:26px;color:var(--gold)}
.act b{font-family:var(--f-display);font-size:14.5px}
.act small{color:var(--text2);font-size:12.5px;line-height:1.3}
.act .dot{position:absolute;top:10px;right:10px}
.quest{display:flex;flex-direction:column;gap:6px;padding:11px 0}
.pct{font-family:var(--f-display);font-weight:900;font-size:18px;min-width:56px;text-align:right}
.ring{--p:50;--c:var(--good);width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.08) 0);position:relative}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.ring b{position:relative;font-family:var(--f-display);font-size:14px}
.stat-ic{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(0,0,0,.3)}
.stat-ic.s-str{color:#ff8a6a}.stat-ic.s-def{color:#9cc6ff}.stat-ic.s-dex{color:#9be07f}
.stat-ic.s-int{color:#b49cff}.stat-ic.s-vit{color:#ff6f8a}.stat-ic.s-cha{color:#ffd36a}
.stat-ic .ic{width:18px;height:18px}
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.dex .cell{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px 6px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text)}
.dex .cell.unseen{opacity:.6}
.dex .num{font-family:var(--f-display);font-size:11px;color:var(--text3)}
.creature{display:flex;gap:12px;align-items:center;padding:10px 0;text-align:left;width:100%;background:none;border:0;color:var(--text)}
.creature .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.creature .info b{font-size:15.5px}
.ccard{display:flex;flex-direction:column;gap:10px}
.ccard .top{display:flex;gap:14px;align-items:center}
.classes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.classes button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:12px;border-radius:10px}
.classes button:last-child:nth-child(odd){grid-column:1/-1}
.classes button.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 18px rgba(79,216,200,.25);filter:none}
.starters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.starters button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px}
.areas-map{display:flex;flex-direction:column;gap:10px}
.areacard{position:relative;display:flex;align-items:flex-end;min-height:104px;border-radius:10px;overflow:hidden;border:1px solid var(--line2);background-color:#0b120e;background-position:center;background-size:cover;background-repeat:no-repeat;text-align:left;padding:0;color:var(--text);isolation:isolate}
.areacard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,9,7,.92),rgba(5,9,7,.45) 70%,rgba(5,9,7,.2))}
.areacard .tx{padding:10px 12px;display:flex;flex-direction:column;gap:4px;width:100%}
.areacard b{font-family:var(--f-display);font-size:17px}
.areacard.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 18px rgba(79,216,200,.25)}
.areacard:disabled{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
.wheelwrap{position:relative;width:280px;max-width:100%;aspect-ratio:1;margin:4px auto 0}
.wheel{width:100%;height:100%;display:block;transition:transform 1.6s cubic-bezier(.15,.7,.2,1);filter:drop-shadow(0 0 18px rgba(79,216,200,.25))}
.pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid var(--gold);filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));z-index:2}
.odds{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--text2)}
.evbar{display:flex;align-items:center;gap:8px;background:rgba(5,9,7,.72);border:1px solid var(--line2);border-radius:9px;padding:6px 10px;font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums}
.evbar b{color:var(--gold)}
.evbar.on{background:linear-gradient(90deg,rgba(168,122,31,.55),rgba(79,216,200,.25));border-color:var(--gold2);color:#fff3d6}
.rank{display:flex;align-items:center;gap:10px;padding:8px 0}
.rank .n{width:30px;flex:none;text-align:center;font-family:var(--f-display);font-weight:900;font-size:16px;color:var(--text3)}
.rank .n.m1{color:#f0c75a}.rank .n.m2{color:#c9d3db}.rank .n.m3{color:#d08a55}
.rank.me{background:rgba(79,216,200,.1);border-radius:8px;padding-left:4px;padding-right:4px}
.ach{display:flex;gap:10px;align-items:center;padding:8px 0}
.ach .seal{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);color:var(--text3);background:rgba(0,0,0,.3)}
.ach .seal .ic{width:16px;height:16px}
.ach.done .seal{background:radial-gradient(circle at 35% 30%,#ffe7a6,#b4842a);border-color:#f6dd98;color:#2a1a05;box-shadow:0 0 10px rgba(227,189,99,.4)}
.ach:not(.done){opacity:.75}
.mats{display:flex;gap:8px;flex-wrap:wrap}
.forge{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.forge .btn{flex-direction:column;gap:4px;padding:12px 4px}
.forge .btn .ic{width:26px;height:26px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar .d{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:9px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:11.5px;text-align:center;color:var(--text2)}
.calendar .d b{font-family:var(--f-display);font-size:13px;color:var(--text)}
.calendar .d .ic{width:20px;height:20px}
.calendar .d.got{opacity:.5}.calendar .d.today{border-color:var(--gold);box-shadow:0 0 12px rgba(227,189,99,.3);color:var(--gold)}
.crest{display:flex;gap:6px}
.crest i{width:20px;height:28px;clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%);background:#2a332d;border:0}
.crest i.on{background:linear-gradient(180deg,#e6fffb,#4fd8c8);filter:drop-shadow(0 0 6px rgba(79,216,200,.8))}
.objective{display:flex;align-items:center;gap:10px;padding:7px 0}
.objective .ck{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);color:transparent}
.objective.ok .ck{background:var(--teal2);border-color:var(--teal);color:#fff}
.objective .ck .ic{width:13px;height:13px}
.quote{font-style:italic;color:#e4dac0;border-left:3px solid var(--teal2);padding:4px 0 4px 12px;margin:0}
.npc{display:flex;align-items:center;gap:10px}
.npc .face{width:44px;height:44px;flex:none}
.emblem{width:56px;height:56px;flex:none}
.emblem.sm{width:34px;height:34px}.emblem.lg{width:88px;height:88px}
.chatlog{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;padding:4px 2px}
.bubble{max-width:82%;padding:7px 11px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line);font-size:14.5px;overflow-wrap:anywhere}
.bubble.mine{align-self:flex-end;background:rgba(79,216,200,.14);border-color:rgba(79,216,200,.35)}
.bubble small{display:block;color:var(--text3);font-size:11px}
.listing{display:flex;align-items:center;gap:10px;padding:10px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13.5px}
.kv span{color:var(--text3)}
pre.audit{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text2);margin:0}

/* ---------- Login / creation ---------- */
.auth{max-width:440px;width:100%;margin:6vh auto 0}
.auth form{display:flex;flex-direction:column;gap:10px}
.hero-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px;text-align:center}
.hero-logo svg{width:76px;height:76px;filter:drop-shadow(0 0 16px rgba(79,216,200,.55))}
.hero-logo b{font-family:var(--f-display);font-weight:900;font-size:40px;letter-spacing:.14em;background:linear-gradient(180deg,#fff0c8,#d6a64a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-logo small{color:var(--teal);font-family:var(--f-display);letter-spacing:.3em;font-size:12px;text-transform:uppercase}

@media (max-width:440px){
  .art.xl{width:92px;height:92px}.foe.boss .frame{width:104px;height:104px}
  .sheet{padding:13px}.derived{grid-template-columns:1fr}.stats .m{display:block;font-size:11px}
  .dock .main{height:58px}.dock .main .btn{font-size:17px}
  h2{font-size:19px}
}
@media (max-height:700px){.dock .main{height:52px}.dock .sec{height:40px}.hud .pf,.hud .pf svg{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important}
/* Fated item icons cycle through every colour, in step with their name. */
.slot.r7 .ic{animation:fatehue 4s linear infinite;filter:drop-shadow(0 0 4px currentColor)}
@keyframes fatehue{from{filter:hue-rotate(0deg) drop-shadow(0 0 4px currentColor)}to{filter:hue-rotate(360deg) drop-shadow(0 0 4px currentColor)}}

/* Bag tiles: stat and comparison with what you wear. */
.tile{position:relative}
.tile .tst{font-size:11.5px;color:var(--text);font-weight:700}
.tile .up,.tile .down{font-size:11.5px}
.tile .down{color:#e0857a}
.tile.better{border-color:rgba(127,211,106,.45);background:rgba(127,211,106,.07)}
.tile .upb{position:absolute;top:2px;right:4px;width:18px;height:18px;border-radius:50%;background:var(--good);color:#0b120e;font-size:10px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 8px rgba(127,211,106,.6)}

/* ---------- Release 2.1 polish ---------- */
/* Combat impact: the target flashes when hit; big hits shake the arena a little. */
#foeart.hit .frame{animation:hitflash .35s}
@keyframes hitflash{30%{filter:brightness(2.2) saturate(.4)}}
.arena.crit{animation:shake .32s}
@keyframes shake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}
/* Boss presentation: a ribbon above the name and a slow golden pulse on the frame. */
.foe.boss .info h2::before{content:"BOSS";display:block;font-size:10px;letter-spacing:.3em;color:var(--gold);margin-bottom:2px}
.foe.boss .frame{animation:bosspulse 3s ease-in-out infinite}
@keyframes bosspulse{50%{box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 42px rgba(227,189,99,.55),inset 0 0 14px rgba(0,0,0,.7)}}
/* Notifications: an icon next to toast text, readable on every background. */
.toast{display:flex;align-items:center;gap:10px;justify-content:center;line-height:1.35}
/* Typography: consistent headings inside panels, slightly more air between stacked panels on phones. */
.sheet h3{font-size:16.5px}
.pagehead h1{text-shadow:0 2px 10px rgba(0,0,0,.6)}
@media (max-width:440px){.stack{gap:11px}.pagehead h1{font-size:22px}}
/* Accessibility: clearly visible keyboard focus on every control, also inside panels. */
.btn:focus-visible,.tile:focus-visible,.navitem:focus-visible,.creature:focus-visible,.eqslot:focus-visible,.areacard:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- Avatars ---------- */
.av{position:relative;display:inline-grid;place-items:center;flex:none}
.av>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1.5px var(--bronze)}
.av.icon{width:42px;height:42px}.av.icon>svg{width:42px;height:42px}
.hud .pf .av,.hud .pf .av>svg{width:46px;height:46px}
.pfm .av,.pfm .av>svg{width:38px;height:38px}
.avbig .av,.avbig .av>svg,.avbig>svg{width:84px;height:84px}

/* ---------- Install banner ---------- */
.installbar{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));z-index:65;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:12px;background:linear-gradient(180deg,#24352b,#16211b);border:1px solid var(--gold2);box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 18px rgba(227,189,99,.18);animation:rise .3s ease-out}
.installbar .ic.lg{width:36px;height:36px;flex:none;filter:drop-shadow(0 0 6px rgba(79,216,200,.5))}
.installbar b{display:block;font-family:var(--f-display);font-size:14px;color:#f0e4c4}
.installbar small{display:block;color:var(--text2);font-size:12.5px;line-height:1.35}
.installbar small b{display:inline;font-family:var(--f-body);font-size:12.5px}
.installbar .shareic{display:inline-grid;place-items:center;vertical-align:-3px;color:var(--teal)}
.installbar .iconbtn{width:32px;height:32px}

/* ===== Release 2.4: battle dock, jobs, arena, global chat ===== */
.dock .skills{height:48px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dock .skills .btn{height:100%;padding:0 8px;gap:7px;font-size:14.5px;line-height:1.1;justify-content:center}
.dock .skills .btn>span{display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden}
.dock .skills .btn small{font-size:11.5px;opacity:.8;font-weight:600}
.dock .skills .btn .ic{width:18px;height:18px;flex:none}
.dock .main.one .btn[data-act="attack"]{font-size:20px;gap:8px;flex-direction:row}
.battle .foe{padding:4px 12px;gap:12px}
.battle .foe .info{gap:3px}.battle .foe .info h2{font-size:18px}
.battle .foe.boss .frame{width:92px;height:92px}
.battle .arena .kind{padding-top:8px}
@media (max-width:640px){.battle .foe.boss .frame{width:80px;height:80px}.battle .foe .frame.md{width:58px;height:58px}}
@media (max-height:700px){.dock .skills{height:42px}}
.jobcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.28);color:var(--text);font:inherit;cursor:pointer}
.jobcard .ic{width:26px;height:26px;color:var(--gold)}
.jobcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:rgba(227,189,99,.08)}
.stepper{display:flex;align-items:center;gap:8px}.stepper b{min-width:26px;text-align:center;font-size:18px}
.chipbtn{display:inline-flex;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.pvpvs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.pvpvs .vs{font-family:Cinzel,serif;font-weight:900;color:var(--gold)}
.pvplog{max-height:220px;overflow:auto;padding:8px 12px;border-radius:9px;background:rgba(5,9,7,.55);border:1px solid rgba(168,129,74,.25);display:flex;flex-direction:column;gap:3px;font-size:14px}
.pvplog p{margin:0}
.pvpic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid var(--line2);flex:none}
.pvpic .ic{width:20px;height:20px}
#gchat[hidden]{display:none}
.gc-handle{position:fixed;right:0;top:46%;z-index:60;width:34px;height:52px;border-radius:12px 0 0 12px;border:1px solid var(--line2);border-right:0;background:rgba(14,22,17,.94);color:var(--gold);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .25s}
.gc-handle .ic{width:19px;height:19px}
.gc-badge{position:absolute;top:6px;left:6px;width:9px;height:9px;border-radius:50%;background:#e2553f;box-shadow:0 0 0 2px #0e1611}
.gc-panel{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(360px,88vw);display:flex;flex-direction:column;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#121c16,#0b120e);border-left:1px solid var(--line2);box-shadow:-12px 0 30px rgba(0,0,0,.5);transform:translateX(105%);transition:transform .28s ease}
#gchat.open .gc-panel{transform:none}#gchat.open .gc-handle{transform:translateX(100%)}
.gc-head{display:flex;align-items:center;gap:8px;padding-right:36px;position:relative}.gc-head .ic{color:var(--gold)}
.gc-head .closex{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.gc-log{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px;overflow-wrap:anywhere}
.gc-line{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(168,129,74,.14);font-size:14.5px}
.gc-line.mine{background:rgba(227,189,99,.08);border-color:rgba(227,189,99,.3)}
.gc-who{margin-bottom:2px}
.gc-form{display:flex;gap:8px}.gc-form input{flex:1;min-width:0}
.gc-msg:empty{display:none}
.linkbtn{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit}
@media (prefers-reduced-motion:reduce){.gc-panel,.gc-handle{transition:none}}
.jobgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:640px){.jobcard{padding:10px 8px;align-items:center;text-align:center}.jobcard .jd{display:none}.jobcard b{font-size:14.5px}}
.pill.xs{padding:0 6px;font-size:10.5px;letter-spacing:.04em;vertical-align:1px}
.ts-box{min-height:0;margin:10px 0 2px}.ts-box:not(:empty){min-height:66px}
.sheet.danger{border-color:rgba(226,85,63,.45)}
.sheet.danger .ptitle .ic,.sheet.danger h3 .ic{color:#e2553f}
.btn.red-o{background:transparent;border-color:rgba(226,85,63,.7);color:#f0a395}
.btn.red-o:hover{background:rgba(226,85,63,.12)}
.danger .confirm{padding:10px 12px;border-radius:10px;background:rgba(226,85,63,.08);border:1px solid rgba(226,85,63,.35)}

/* iOS: no backdrop blur on the sticky HUD (it made the hero name render blurry); keep text crisp. */
.hud .nm{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Toasts sit at the top, just under the HUD, and never block a tap. */
.toast{top:calc(66px + env(safe-area-inset-top,0px));bottom:auto;pointer-events:none;padding:7px 14px;font-size:14px;font-weight:600;border-radius:99px;background:#16211b;box-shadow:0 6px 18px rgba(0,0,0,.6);animation:toastdown .22s ease-out}
.toast .ic{width:16px;height:16px;flex:none}
@keyframes toastdown{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:1024px){.toast{top:76px;bottom:auto}}
/* Pull to refresh (our own, so the browser's own pull does not fire twice). */
html,body{overscroll-behavior-y:contain}
#ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:80;transform:translate(-50%,-48px);opacity:0;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:99px;background:rgba(18,28,22,.95);border:1px solid var(--gold2);color:var(--text);font-weight:700;font-size:13.5px;box-shadow:0 6px 18px rgba(0,0,0,.5);pointer-events:none}
#ptr .ptr-ring{--p:0;width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*360deg),rgba(255,255,255,.12) 0);-webkit-mask:radial-gradient(circle,transparent 6px,#000 7px);mask:radial-gradient(circle,transparent 6px,#000 7px)}
#ptr.ready{border-color:var(--teal)}#ptr.ready .ptr-ring{background:var(--teal)}
#ptr.spin .ptr-ring{background:conic-gradient(var(--teal) 0 90deg,rgba(255,255,255,.12) 0);animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
/* Sub-tabs: all screens of a group in one row, icon above a short label. */
.subtabs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:rgba(5,9,7,.55);border:1px solid var(--line)}
.subtabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:7px 2px 6px;border:1px solid transparent;border-radius:10px;background:none;color:var(--text2);font:inherit;font-size:11.5px;font-weight:700;line-height:1.1;cursor:pointer}
.subtabs button .ic{width:20px;height:20px}
.subtabs button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subtabs button.on{background:linear-gradient(180deg,rgba(227,189,99,.18),rgba(227,189,99,.06));border-color:rgba(227,189,99,.55);color:var(--gold)}
.subtabs button .dot{position:absolute;top:4px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:#e2553f;box-shadow:0 0 0 2px #0b120e}
@media (max-width:380px){.subtabs{gap:2px;padding:3px}.subtabs button{font-size:10.5px;letter-spacing:-.02em;padding:6px 1px 5px}.subtabs button .ic{width:18px;height:18px}}
/* Skill buttons: icon on the left, name and status neatly left-aligned under each other. */
.dock .skills{height:auto;min-height:48px}
.dock .skills .btn{min-height:50px;height:auto;justify-content:flex-start;text-align:left;padding:6px 10px;gap:8px;font-size:13.5px;line-height:1.12;letter-spacing:.03em}
.dock .skills .btn>span{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:2px;min-width:0}
.dock .skills .btn small{display:block;font-size:11.5px;line-height:1.1;letter-spacing:0;text-transform:none}
@media (max-width:360px){.dock .skills .btn{font-size:12.5px;padding:6px 8px}}
/* Quests: two ways to do each quest (Release 2.5). */
.qways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.qway{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:1px 8px;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.28);color:var(--text);font:inherit;cursor:pointer}
.qway .qw-t{font-weight:800;font-size:14px}
.qway .tiny{grid-column:1}
.qway .qw-c{grid-column:2;grid-row:1/3;font-size:17px}
.qway.good{border-color:rgba(108,201,120,.55)}.qway.good .qw-c{color:var(--good)}
.qway.mid .qw-c{color:var(--warn)}.qway.low .qw-c{color:var(--bad)}
.qway:disabled{opacity:.45;cursor:not-allowed}
/* ===== Release 2.5: versus battle layout with acted-out attacks ===== */
.versus{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 12px 8px;align-items:start;min-height:0}
.vside{display:flex;flex-direction:column;gap:6px;min-width:0}
.vbar .bar{position:relative;height:22px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.6)}
.vbar .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#e7766b,#c9443a);transition:width .45s ease}
.vbar .bar.mid i{background:linear-gradient(180deg,#e9b25b,#c47f22)}.vbar .bar.lo i{background:linear-gradient(180deg,#ff6a5a,#9c1f16)}
.vbar .bar b{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:14px;color:#1b0e0a;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.vbar .vn{display:flex;justify-content:space-between;font-weight:800;font-size:14px;margin-top:2px;gap:6px}.vbar .vn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar.sub .bar{height:12px}.vbar.sub .bar b{font-size:10px;right:6px}.vbar.sub .vn{font-size:12px;font-weight:700;color:var(--text2)}
.vbar.boss .bar{border-color:var(--gold2)}
.vmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.actors{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:118px;padding-top:10px}
.actor{position:relative;display:grid;place-items:center}
.actor.hero>svg,.actor.hero>.av,.actor.hero .av>svg{width:92px;height:92px}
.actor.hero{width:92px;height:92px;border-radius:50%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.actor.pet .frame{width:58px;height:58px}.actor.pet.ko{filter:grayscale(1) brightness(.5)}
.actor.enemy .frame{width:110px;height:110px}.versus.boss .actor.enemy .frame{width:132px;height:132px}
.vside .sts{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:4px}
.versus .whp{font-size:12px}
@media (max-width:380px){.actor.hero,.actor.hero>svg,.actor.hero>.av,.actor.hero .av>svg{width:76px;height:76px}.actor.enemy .frame{width:92px;height:92px}.versus.boss .actor.enemy .frame{width:108px;height:108px}.actor.pet .frame{width:48px;height:48px}}
/* the hero lunges at the enemy, the creature follows */
@keyframes lunge{0%{transform:none}35%{transform:translateX(46%) scale(1.06)}60%{transform:translateX(40%)}100%{transform:none}}
@keyframes lunge2{0%,20%{transform:none}55%{transform:translateX(60%)}100%{transform:none}}
@keyframes cast{0%{transform:none}40%{transform:translateY(-10px) scale(1.06)}100%{transform:none}}
@keyframes struck{0%,30%{transform:none;filter:none}40%{transform:translateX(8px);filter:brightness(2.2)}55%{transform:translateX(-5px)}70%{transform:translateX(3px);filter:none}100%{transform:none}}
@keyframes counter{0%,55%{transform:none}72%{transform:translateX(-40%) scale(1.05)}100%{transform:none}}
@keyframes hurt{0%,68%{filter:none;transform:none}74%{filter:brightness(2) saturate(.3) sepia(1) hue-rotate(-40deg);transform:translateX(-6px)}86%{transform:translateX(4px)}100%{filter:none;transform:none}}
.actor.lunge{animation:lunge .5s cubic-bezier(.3,.7,.3,1)}
.actor.lunge2{animation:lunge2 .6s ease}
.actor.cast{animation:cast .5s ease}
.actor.struck{animation:struck .55s ease}
.actor.struck.crit{animation:struck .55s ease,critshake .4s .15s}
@keyframes critshake{25%{transform:translate(-6px,3px) rotate(-3deg)}50%{transform:translate(6px,-3px) rotate(3deg)}75%{transform:translate(-3px,2px)}}
.actor.enemy.counter{animation:counter .9s ease}
.actor.enemy.struck.counter{animation:struck .55s ease,counter .9s ease}
.actor.hurt{animation:hurt .95s ease}
.actor.hero.lunge.hurt{animation:lunge .5s cubic-bezier(.3,.7,.3,1),hurt .95s ease}
/* effects that play on the target */
.vfx{position:absolute;inset:-14%;pointer-events:none;opacity:0;animation:vfx .6s .16s ease-out forwards}
@keyframes vfx{0%{opacity:0;transform:scale(.6)}25%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.vfx-slash{background:linear-gradient(135deg,transparent 44%,rgba(255,255,255,.95) 49%,rgba(255,240,200,.9) 51%,transparent 56%)}
.vfx-slash2{background:linear-gradient(135deg,transparent 40%,#fff 45%,transparent 50%),linear-gradient(45deg,transparent 50%,#fff 55%,transparent 60%)}
.vfx-smash{background:radial-gradient(circle,rgba(255,236,170,.95) 0 18%,rgba(255,170,60,.6) 30%,transparent 60%);animation-duration:.7s}
.vfx-stab{background:linear-gradient(90deg,transparent 30%,#fff 48%,#ffd0d0 52%,transparent 70%),radial-gradient(circle,rgba(255,60,80,.55),transparent 55%)}
.vfx-fire{background:radial-gradient(circle at 50% 55%,#fff6c0 0 10%,#ffb340 22%,#ff5a1f 38%,rgba(200,30,0,.4) 55%,transparent 68%);animation:fire .75s .1s ease-out forwards}
@keyframes fire{0%{opacity:0;transform:translateX(-160%) scale(.35)}45%{opacity:1;transform:translateX(0) scale(.7)}100%{opacity:0;transform:scale(1.3)}}
.vfx-bolt{background:radial-gradient(circle,#efe0ff 0 10%,#a77dff 26%,rgba(120,70,220,.35) 45%,transparent 60%);animation:fire .6s .1s ease-out forwards}
.vfx-frost{background:radial-gradient(circle,rgba(230,250,255,.95) 0 14%,rgba(120,200,255,.7) 32%,rgba(70,140,230,.3) 52%,transparent 65%),repeating-conic-gradient(rgba(200,240,255,.8) 0 6deg,transparent 6deg 45deg);animation-duration:.8s}
.vfx-poison{background:radial-gradient(circle at 35% 40%,rgba(150,255,110,.85) 0 8%,transparent 12%),radial-gradient(circle at 65% 60%,rgba(120,230,80,.8) 0 10%,transparent 14%),radial-gradient(circle,rgba(80,200,60,.45),transparent 60%);animation-duration:.85s}
.vfx-claw{background:repeating-linear-gradient(120deg,transparent 0 16%,rgba(255,255,255,.9) 17% 19%,transparent 20% 30%)}
.vfx-mark{background:radial-gradient(circle,transparent 30%,rgba(255,80,80,.9) 32% 35%,transparent 37% 48%,rgba(255,80,80,.8) 50% 52%,transparent 54%),linear-gradient(90deg,transparent 48%,rgba(255,90,90,.85) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(255,90,90,.85) 49% 51%,transparent 52%);animation-duration:.9s}
.vfx-arrow{background:linear-gradient(90deg,transparent 10%,rgba(255,240,200,.95) 45%,#fff 50%,transparent 52%);animation:fire .5s .08s ease-out forwards}
.vfx-note{background:radial-gradient(circle at 40% 45%,#ffe9a6 0 7%,transparent 9%),radial-gradient(circle,rgba(255,220,120,.5),transparent 55%)}
.vfx-heal{inset:-20%;background:radial-gradient(circle,rgba(170,255,170,.75) 0 20%,rgba(90,220,120,.35) 40%,transparent 62%);animation:vfx .8s ease-out forwards}
.vfx-shield{inset:-12%;border-radius:50%;border:4px solid rgba(140,200,255,.9);box-shadow:0 0 18px rgba(120,190,255,.8),inset 0 0 18px rgba(120,190,255,.6);animation:vfx .9s ease-out forwards}
.vfx-song{inset:-24%;background:radial-gradient(circle,rgba(255,215,120,.6) 0 18%,rgba(255,180,80,.25) 40%,transparent 62%);animation:vfx .9s ease-out forwards}
@media (prefers-reduced-motion:reduce){.actor,.vfx{animation:none!important}.vfx{display:none}}
html.calm .actor,html.calm .vfx{animation:none!important}
.versus{flex:0 0 auto}
.battle .arena .log{min-height:64px}
.battle .arena .kind .label{font-size:11px;letter-spacing:.18em}
@media (max-height:760px){.actors{min-height:96px;padding-top:4px}.actor.hero,.actor.hero>svg,.actor.hero>.av,.actor.hero .av>svg{width:74px;height:74px}.actor.enemy .frame{width:88px;height:88px}.versus.boss .actor.enemy .frame{width:100px;height:100px}}
/* ===== Release 2.5: co-op dungeon and party ===== */
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.diffbtn{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px;border-radius:10px;border:1px solid var(--line2);background:rgba(0,0,0,.28);color:var(--text);font:inherit;cursor:pointer}
.diffbtn.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:rgba(227,189,99,.08)}
@media (max-width:420px){.diffs{grid-template-columns:1fr}}
.coop .arena{gap:6px}
.foes{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:4px 10px 0}
.foecard{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:7px 8px;border-radius:10px;border:1px solid rgba(226,85,63,.35);background:rgba(20,8,8,.62);color:var(--text);font:inherit;cursor:pointer;min-width:0;overflow:hidden}
.foecard .fc-top{display:flex;gap:5px;align-items:center;min-width:0}.foecard .fc-top b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.foecard .fc-top .ic{width:15px;height:15px;flex:none;color:#e9897b}
.foecard.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(227,189,99,.55),0 0 18px rgba(227,189,99,.25)}
.foecard.dead{opacity:.35;filter:grayscale(1)}
.foecard.r-boss{border-color:var(--gold2);background:rgba(40,16,8,.75)}
.foecard .bar{height:8px}
.foecard .intent{display:flex;gap:4px;align-items:center;font-size:12px;font-weight:800;color:#f2c06b;min-height:16px}.foecard .intent .ic{width:13px;height:13px}
.foecard.struck{animation:struck .55s ease}.foecard.healed{animation:healglow .8s ease}
@keyframes healglow{40%{box-shadow:0 0 0 2px rgba(110,220,120,.8),0 0 20px rgba(110,220,120,.5)}}
.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:0 10px}
.herocard{display:flex;flex-direction:column;gap:3px;padding:7px 8px;border-radius:10px;border:1px solid var(--line2);background:rgba(5,12,9,.7);min-width:0}
.herocard.me{border-color:rgba(79,216,200,.6)}
.herocard .hc-top{display:flex;gap:5px;align-items:center;min-width:0}.herocard .hc-top b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.herocard .hc-top .ic{width:15px;height:15px;flex:none;color:var(--gold)}
.herocard .ok .ic{color:var(--good)}
.herocard .bar{height:8px}
.herocard.dead{opacity:.45;filter:grayscale(.8)}
.herocard.hurt{animation:hurt .7s ease}.herocard.healed{animation:healglow .8s ease}.herocard.lunge{animation:cast .45s ease}
.coop .log p.lg-room{color:var(--gold);font-weight:800}.coop .log p.lg-heal,.coop .log p.lg-eheal{color:#9be59b}.coop .log p.lg-ehit{color:#f2a597}.coop .log p.lg-crit{color:#ffd36b}
.pill.bad{background:rgba(226,85,63,.25);border-color:rgba(226,85,63,.6);color:#ffb4a6}
/* Arena replay */
.arenavs .actors{min-height:104px}
.actor.mirror>svg,.actor.mirror>.av>svg{transform:scaleX(-1)}
@keyframes counterhero{0%{transform:none}35%{transform:translateX(-46%) scale(1.06)}60%{transform:translateX(-40%)}100%{transform:none}}
.actor.counterhero{animation:counterhero .5s cubic-bezier(.3,.7,.3,1)}
.actor.ko{filter:grayscale(1) brightness(.55);transform:rotate(-8deg)}
.pvplog p.now{color:var(--text);font-weight:700}
.actor.hero .av.portrait,.actor.hero .av.portrait>svg,.actor.hero .av.portrait>img{width:100%;height:100%}
/* Portrait only (Release 2.5). Android follows the manifest; iPhones cannot be
   locked by a web app, so a phone held sideways sees this cover instead. */
#rotate{display:none}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  #rotate{display:grid;place-items:center;position:fixed;inset:0;z-index:999;background:#090e0b;color:var(--text);text-align:center}
  #rotate>div{display:flex;flex-direction:column;align-items:center;gap:8px}
  #rotate svg{color:var(--gold);animation:rotback 1.6s ease-in-out infinite}
  #rotate b{font-family:var(--f-display);font-size:20px}#rotate span{color:var(--text2);font-size:14px}
  body>*:not(#rotate){visibility:hidden}
}
@keyframes rotback{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}
.vside.foe{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0}
/* ===== Release 2.6: skill bar ===== */
.dock .skbar{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.skbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 4px;border-radius:12px;border:1px solid rgba(227,189,99,.55);background:linear-gradient(180deg,#3a3220,#211c12);color:#f6e7c1;font:inherit;cursor:pointer;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.skbtn .ic{width:24px;height:24px;color:var(--gold)}
.skbtn .skn{font-size:11.5px;font-weight:800;line-height:1.1;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skbtn.cool{opacity:.45;filter:saturate(.3)}
.skbtn .skcd{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:900;color:#fff;background:rgba(0,0,0,.45);border-radius:12px}
.atkrow{display:flex!important;gap:8px}.atkrow .btn{flex:1}
.ultbtn{flex:0 0 auto!important;width:auto;min-width:96px;gap:6px;background:linear-gradient(180deg,#5a3d8f,#2f1f55);border-color:#b48cff;color:#f1e6ff;font-size:14px}
.ultbtn .ic{width:22px;height:22px}
.ultbtn.ready{animation:ultglow 1.6s ease-in-out infinite;border-color:#e3c3ff}
@keyframes ultglow{50%{box-shadow:0 0 0 2px rgba(200,160,255,.6),0 0 22px rgba(170,120,255,.6)}}
@media (max-width:380px){.skbtn{min-height:50px}.skbtn .skn{font-size:10.5px}.ultbtn{min-width:80px}}
/* ===== Release 2.6: skill tree ===== */
.sktree{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,minmax(92px,auto));gap:6px;padding:6px 0;border-radius:14px;background:radial-gradient(120% 80% at 50% 0%,rgba(227,189,99,.08),transparent 60%)}
.sktree.cls-warrior{--k:#d9694f}.sktree.cls-mage{--k:#9c7cf0}.sktree.cls-rogue{--k:#7fd0a0}.sktree.cls-ranger{--k:#8fcf5f}.sktree.cls-bard{--k:#f0a6d0}
.sklines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sklines line{stroke:rgba(255,255,255,.12);stroke-width:3;vector-effect:non-scaling-stroke}
.sklines line.on{stroke:var(--k,var(--gold));stroke-width:3.5;filter:drop-shadow(0 0 4px var(--k,var(--gold)))}
.sknode{position:relative;z-index:1;place-self:center;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:0;width:96px}
.sknode .skn-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3324,#14110b);border:2px solid rgba(255,255,255,.18);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.sknode .skn-ic .ic{width:28px;height:28px;color:#a99e86}
.sknode.t-passive .skn-ic{border-radius:14px;transform:rotate(45deg)}.sknode.t-passive .skn-ic .ic{transform:rotate(-45deg)}
.sknode.t-ult .skn-ic{width:68px;height:68px;clip-path:polygon(50% 0,63% 32%,98% 35%,71% 57%,80% 92%,50% 73%,20% 92%,29% 57%,2% 35%,37% 32%);border-radius:0;border:0;background:radial-gradient(circle,#4d3a7a,#1c1430)}
.sknode.got .skn-ic{border-color:var(--k,var(--gold));background:radial-gradient(circle at 35% 30%,#5a4a26,#211a0c);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 14px color-mix(in srgb,var(--k,#e3bd63) 55%,transparent)}
.sknode.got .skn-ic .ic{color:var(--k,var(--gold))}
.sknode.t-ult.got .skn-ic{background:radial-gradient(circle,#8a63d6,#2f1f55)}.sknode.t-ult.got .skn-ic .ic{color:#fff}
.sknode.st-can .skn-ic{animation:canlearn 1.8s ease-in-out infinite}
@keyframes canlearn{50%{box-shadow:0 0 0 3px rgba(227,189,99,.55),0 0 18px rgba(227,189,99,.5)}}
.sknode.st-locked,.sknode.st-needs{opacity:.42;filter:grayscale(.8)}
.sknode .skn-n{font-size:11.5px;font-weight:800;line-height:1.1;text-align:center}
.sknode .skn-r{font-size:11px;font-weight:800;color:var(--gold);background:rgba(0,0,0,.45);padding:0 7px;border-radius:99px}
.sknode .skn-bar{position:absolute;top:0;right:14px;color:var(--teal);font-size:12px}
.sknode.big{width:auto;cursor:default}.sknode.big .skn-ic{width:64px;height:64px}
.lg{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border:2px solid var(--gold)}.lg-a{border-radius:50%}.lg-p{transform:rotate(45deg);border-radius:2px}.lg-u{border-color:#b48cff;border-radius:2px}
.skbar.inline{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.skbtn.empty{border-style:dashed;opacity:.5;cursor:default}
.prof .ic{width:24px;height:24px;color:var(--gold);flex:none}.prof:not(.on) .ic{color:var(--text3)}
.pips{display:flex;gap:3px}.pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--gold2);display:block}.pips i.on{background:var(--gold)}
@media (max-width:380px){.sknode{width:84px}.sknode .skn-ic{width:50px;height:50px}.sknode.t-ult .skn-ic{width:60px;height:60px}.sktree{grid-template-rows:repeat(5,minmax(84px,auto))}}
/* ===== Release 2.6: character screen ===== */
.paperdoll2{display:grid;grid-template-columns:66px 1fr 66px;gap:8px;align-items:stretch;padding:10px 6px;border-radius:14px;background:radial-gradient(70% 60% at 50% 45%,rgba(79,216,200,.12),transparent 70%),linear-gradient(180deg,rgba(10,20,26,.9),rgba(6,12,14,.95));border:1px solid rgba(79,216,200,.28);box-shadow:inset 0 0 40px rgba(79,216,200,.08)}
.gcol{display:flex;flex-direction:column;gap:7px;justify-content:space-between}
.gslot{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;border:2px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#1f2b2f,#10181b);color:#7f8d8f;cursor:pointer;padding:0}
.gslot .ic{width:30px;height:30px}
.gslot .gl{position:absolute;bottom:-1px;left:0;right:0;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.gslot[class*=" r"]{color:#fff}
.gslot.r0{border-color:#b8a88e}.gslot.r1{border-color:#5fae57}.gslot.r2{border-color:#4f8de0}.gslot.r3{border-color:#a46ce0}.gslot.r4{border-color:#e09a2a;box-shadow:0 0 10px rgba(224,154,42,.4)}.gslot.r5{border-color:#e0384f;box-shadow:0 0 12px rgba(224,56,79,.5)}.gslot.r6{border-color:#2fc0b6;box-shadow:0 0 12px rgba(47,192,182,.5)}.gslot.r7{border-color:#c38cff;box-shadow:0 0 14px rgba(195,140,255,.6)}
.gslot .plus{position:absolute;top:2px;right:4px;font-size:10px;font-weight:900;color:var(--gold)}
.figwrap{display:grid;place-items:center;min-height:300px}
.figwrap .figure{width:100%;max-width:220px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));animation:idle 3.2s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-3px)}}
.slot.wk-demon,.gslot.wk-demon{background:radial-gradient(circle,#4a1015,#1a0507)}.slot.wk-angel,.gslot.wk-angel{background:radial-gradient(circle,#4a4636,#1b1a12)}.slot.wk-fae,.gslot.wk-fae{background:radial-gradient(circle,#173f3c,#071614)}
.charsheet .derived{grid-template-columns:repeat(3,1fr)}
@media (max-width:380px){.paperdoll2{grid-template-columns:56px 1fr 56px}.gslot .ic{width:24px;height:24px}.figwrap{min-height:250px}}
html.calm .figwrap .figure{animation:none}
.skpts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.skpts>div{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid var(--line2);text-align:center}
.skpts .big{font-size:26px;color:var(--gold);line-height:1.1}.skpts span{font-size:11.5px;color:var(--text2)}
/* ===== Release 2.7: pixel hero ===== */
.pixhero{position:relative;display:grid;place-items:center;width:100%;max-width:264px;aspect-ratio:66/82;margin:0 auto}
.pixhero img{position:relative;z-index:1;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:pixidle 2.4s steps(2,end) infinite}
@keyframes pixidle{50%{transform:translateY(-1.5%)}}
.pixshadow{position:absolute;bottom:2%;left:22%;right:22%;height:5%;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(2px)}
.pixhero.aura::before{content:"";position:absolute;inset:6% 10% 10%;border-radius:50%;background:radial-gradient(circle,var(--au) 0,transparent 65%);opacity:.55;animation:aurapulse 2.6s ease-in-out infinite}
.aura-r4{--au:rgba(224,154,42,.6)}.aura-r5{--au:rgba(224,56,79,.6)}.aura-r6{--au:rgba(47,192,182,.6)}.aura-r7{--au:rgba(195,140,255,.7)}
@keyframes aurapulse{50%{opacity:.85;transform:scale(1.05)}}
.pixhero .sparks{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(2px 2px at 75% 20%,#fff8,transparent),radial-gradient(1.5px 1.5px at 60% 70%,#fff8,transparent),radial-gradient(1.5px 1.5px at 30% 80%,#fff8,transparent);animation:sparkfloat 3s linear infinite}
@keyframes sparkfloat{from{transform:translateY(4%);opacity:.2}50%{opacity:1}to{transform:translateY(-6%);opacity:.2}}
html.calm .pixhero img,html.calm .pixhero::before,html.calm .pixhero .sparks{animation:none}

/* ---------- Looks (Release 2.7) ---------- */
.lookface{display:inline-grid;place-items:end center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 35%,#5a2a2a,#1c1014 70%);border:2px solid #d4a23a;box-shadow:0 0 0 2px #2b1d14 inset;flex:none}
.lookface img{width:100%;height:100%;object-fit:cover;object-position:50% 0;image-rendering:pixelated}
.lookface.icon{width:40px;height:40px;border-width:1.5px}
.lookface.portrait{width:84px;height:84px}
.lookface.lk{width:56px;height:56px}
.actor.hero .lookface.portrait,.pf .lookface.portrait,.pfm .lookface.portrait{width:100%;height:100%}
.doll-head .lookface.portrait{width:76px;height:76px}
.lookstage{position:relative;display:grid;place-items:end center;height:300px;border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 85%,rgba(212,70,40,.45),transparent 60%),radial-gradient(ellipse at 50% 30%,#2a1720,#0f0a0d 75%);border:1px solid #4a2c22}
.lookstage .lookbody{position:relative;z-index:1;height:280px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));animation:lookbreath 3.2s ease-in-out infinite;transform-origin:50% 100%}
.lookstage .lookclassic{width:180px;height:180px;margin-bottom:40px}.lookstage .lookclassic svg{width:100%;height:100%}
.lookglow{position:absolute;left:15%;right:15%;bottom:6px;height:22px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.65),transparent 70%)}
@keyframes lookbreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@media (prefers-reduced-motion:reduce){.lookstage .lookbody{animation:none}}
.lookgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lookopt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid transparent;color:inherit;font:inherit;cursor:pointer}
.lookopt.on{border-color:#d4a23a;background:rgba(212,162,58,.12)}
.lookopt .lookface.lk svg{width:100%;height:100%}
.lookstage .pixhero{margin-bottom:14px}
/* Ultimate as a long bar above the skills (2.7) */
.ultbar{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 14px;border-radius:12px;
  border:1.5px solid #6b4fa8;background:#1d1430;color:#e9dcff;font:inherit;text-align:left;cursor:pointer}
.ultbar .ultfill{position:absolute;inset:0;width:var(--f);background:linear-gradient(90deg,#3a2470,#6a3fc0);transition:width .4s ease;z-index:0}
.ultbar>*:not(.ultfill){position:relative;z-index:1}
.ultbar .ic{width:24px;height:24px;flex:none}
.ultbar .ultn{display:flex;flex-direction:column;flex:1;min-width:0;font-weight:800;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ultbar .ultn small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#bfa6ff;font-weight:700}
.ultbar .ults{font-size:13px;white-space:nowrap}
.ultbar:disabled{cursor:default;color:#b7a6d6}
.ultbar.ready{border-color:#e3c3ff;color:#fff;animation:ultglow 1.6s ease-in-out infinite}
.ultbar.ready .ultfill{background:linear-gradient(90deg,#6a3fc0,#b07aff)}
.ultbar.ready .ults{color:#ffe08a}
html.calm .ultbar.ready{animation:none}
/* 2.7: three quest ways side by side */
.qways .qway{grid-template-columns:1fr;text-align:center;padding:8px 4px;gap:2px}
.qways .qway .qw-t{font-size:13px;line-height:1.15}.qways .qway .tiny{grid-column:auto;font-size:11px}.qways .qway .qw-c{grid-row:auto;grid-column:auto}
/* Gear screen: the class demon with wings and glow (2.7) */
.demonfig{position:relative;display:grid;place-items:end center;width:100%;max-width:230px;height:300px;margin:0 auto}
.demonfig .lookbody{position:relative;z-index:1;height:280px;width:auto;max-width:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));animation:lookbreath 3.2s ease-in-out infinite;transform-origin:50% 100%}
.demonfig .dwings{position:absolute;z-index:0;left:50%;top:30px;width:118%;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:wingflap 3.2s ease-in-out infinite;transform-origin:50% 45%}
@keyframes wingflap{50%{transform:translateX(-50%) scaleX(1.04) translateY(-2px)}}
.demonfig.aura::before{content:"";position:absolute;inset:4% 0 6%;border-radius:50%;background:radial-gradient(circle,var(--au) 0,transparent 65%);opacity:.6;animation:aurapulse 2.6s ease-in-out infinite}
.demonfig .sparks{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(2px 2px at 75% 20%,#fff8,transparent),radial-gradient(1.5px 1.5px at 60% 70%,#fff8,transparent),radial-gradient(1.5px 1.5px at 30% 80%,#fff8,transparent);animation:sparkfloat 3s linear infinite}
.demonfig .pixshadow{bottom:0}
.aura-r3{--au:rgba(164,108,224,.55)}
@media (max-width:380px){.demonfig{height:250px}.demonfig .lookbody{height:232px}}
.paperdoll2 .gcol{position:relative;z-index:2}
html.calm .demonfig .lookbody,html.calm .demonfig .dwings,html.calm .demonfig::before,html.calm .demonfig .sparks{animation:none}
/* ---------- Paper doll (2.8) ---------- */
.doll{position:relative;width:100%;max-width:220px;aspect-ratio:128/200;margin:0 auto}
.doll .pdl{position:absolute;display:block;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;max-width:none}
.doll .pd-base{z-index:2;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.doll .pd-wings{z-index:1;animation:pdwing 3.2s ease-in-out infinite;transform-origin:50% 40%}
.doll .pd-amulet{z-index:3}.doll .pd-offhand{z-index:4}.doll .pd-weapon{z-index:5}
.doll .pixshadow{z-index:0;bottom:1%}
@keyframes pdwing{50%{transform:scaleX(1.04) translateY(-1%)}}
.doll.aura::before{content:"";position:absolute;inset:8% -6% 4%;border-radius:50%;background:radial-gradient(circle,var(--au) 0,transparent 65%);opacity:.6;animation:aurapulse 2.6s ease-in-out infinite;z-index:0}
.doll .sparks{position:absolute;inset:0;z-index:6;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(2px 2px at 75% 20%,#fff8,transparent),radial-gradient(1.5px 1.5px at 60% 70%,#fff8,transparent),radial-gradient(1.5px 1.5px at 30% 80%,#fff8,transparent);animation:sparkfloat 3s linear infinite}
.figwrap .doll{max-width:200px}
.lookstage .doll{height:280px;width:auto;max-width:none}
html.calm .doll .pd-wings,html.calm .doll::before,html.calm .doll .sparks{animation:none}
.heroface{display:inline-block;flex:none;border-radius:50%;border:2px solid #d4a23a;background-color:#2a1d24;background-repeat:no-repeat;background-size:230% auto;background-position:50% 21%;image-rendering:pixelated;box-shadow:0 0 0 2px #2b1d14 inset}
.heroface.icon{width:40px;height:40px;border-width:1.5px}
.heroface.portrait{width:84px;height:84px}
.heroface.lk{width:56px;height:56px}
.actor.hero .heroface.portrait,.pf .heroface.portrait,.pfm .heroface.portrait,.av.portrait .heroface{width:100%;height:100%}
.doll-head .heroface.portrait{width:76px;height:76px}
.slot .iart,.gslot .iart{width:78%;height:78%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.gslot .iart{width:44px;height:44px}
@media (max-width:380px){.gslot .iart{width:36px;height:36px}}
.atl{display:inline-block;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges}
.slot .atl.iart{width:78%;aspect-ratio:1}.gslot .atl.iart{width:44px;height:44px}
@media (max-width:380px){.gslot .atl.iart{width:36px;height:36px}}
.doll .atl.pdl{aspect-ratio:1}
/* ---------- Paper doll 2.9: full-canvas layers, glow, wings ---------- */
.doll .pdl.full{left:0;top:0;width:100%;height:100%;background-repeat:no-repeat}
.doll .pd-base{z-index:2}.doll .pd-quiver{z-index:1}.doll .pd-legs{z-index:3}.doll .pd-feet{z-index:3}.doll .pd-armour{z-index:4}.doll .pd-hands{z-index:5}
.doll .pd-head{z-index:6}.doll .pd-amulet{z-index:7}.doll .pd-offhand{z-index:8}.doll .pd-weapon{z-index:9}
.doll .pdl.glow{filter:drop-shadow(0 0 2px var(--gc)) drop-shadow(0 0 5px var(--gc));animation:gearglow 2.4s ease-in-out infinite}
.g-r4{--gc:rgba(224,154,42,.75)}.g-r5{--gc:rgba(224,56,79,.75)}.g-r6{--gc:rgba(47,192,182,.75)}.g-r7{--gc:rgba(195,140,255,.9)}
@keyframes gearglow{50%{filter:drop-shadow(0 0 3px var(--gc)) drop-shadow(0 0 9px var(--gc))}}
.doll .pd-wingwrap{position:absolute;z-index:0;pointer-events:none;animation:pdwing 3.2s ease-in-out infinite;transform-origin:50% 45%}
.doll .pd-wingwrap .pd-wings{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;animation:none}
.pd-wingwrap{--wc:rgba(224,154,42,.85)}.pd-wingwrap.wr-5{--wc:rgba(255,70,90,.9)}.pd-wingwrap.wr-6{--wc:rgba(47,220,200,.9)}.pd-wingwrap.wr-7{--wc:rgba(205,150,255,1)}
.pd-wingwrap .pd-wings{filter:drop-shadow(0 0 3px var(--wc)) drop-shadow(0 0 10px var(--wc)) drop-shadow(0 0 18px var(--wc))}
.pd-wingwrap .wingfx{position:absolute;inset:-10%;pointer-events:none;background-image:radial-gradient(2px 2px at 12% 30%,#fff,transparent),radial-gradient(2px 2px at 88% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 22% 70%,var(--wc),transparent),radial-gradient(1.5px 1.5px at 78% 64%,var(--wc),transparent),radial-gradient(2px 2px at 50% 8%,var(--wc),transparent),radial-gradient(1.5px 1.5px at 6% 55%,#fff,transparent),radial-gradient(1.5px 1.5px at 94% 50%,#fff,transparent);animation:wingspark 2.6s linear infinite}
@keyframes wingspark{0%{transform:translateY(6%);opacity:.3}50%{opacity:1}100%{transform:translateY(-10%);opacity:.2}}
.pd-wingwrap.wr-7 .pd-wings{animation:fatedhue 6s linear infinite}
@keyframes fatedhue{0%{filter:drop-shadow(0 0 4px var(--wc)) drop-shadow(0 0 14px var(--wc)) hue-rotate(0deg)}100%{filter:drop-shadow(0 0 4px var(--wc)) drop-shadow(0 0 14px var(--wc)) hue-rotate(360deg)}}
.gslot.wk-demon,.gslot.wk-angel,.gslot.wk-fae{box-shadow:0 0 12px rgba(224,154,42,.5),inset 0 0 10px rgba(224,154,42,.25)}
html.calm .doll .pdl.glow,html.calm .pd-wingwrap,html.calm .pd-wingwrap .wingfx,html.calm .pd-wingwrap .pd-wings{animation:none}
/* ---------- 2.9: shiny warning, continue wait ---------- */
.shinypill{background:linear-gradient(90deg,#ffe08a,#ff9ad6,#9ae6ff,#ffe08a);background-size:300% 100%;color:#2a1a08;font-weight:800;animation:shinyslide 2.5s linear infinite;border:0}
@keyframes shinyslide{to{background-position:300% 0}}
.shinybanner{margin:6px 0;padding:8px 12px;border-radius:12px;text-align:center;font-weight:800;color:#2a1a08;background:linear-gradient(90deg,#ffe08a,#ffd0f0,#c8f0ff,#ffe08a);background-size:300% 100%;animation:shinyslide 3s linear infinite;box-shadow:0 0 18px rgba(255,224,138,.6)}
.actor.enemy.shinyfoe{filter:drop-shadow(0 0 6px #ffe08a) drop-shadow(0 0 14px #ff9ad6);animation:shinyfoe 1.4s ease-in-out infinite}
@keyframes shinyfoe{50%{filter:drop-shadow(0 0 10px #fff3b0) drop-shadow(0 0 22px #9ae6ff)}}
.btn.shinycatch{border-color:#ffe08a;box-shadow:0 0 0 2px rgba(255,224,138,.5),0 0 14px rgba(255,224,138,.7);animation:shinybtn 1s ease-in-out infinite}
@keyframes shinybtn{50%{box-shadow:0 0 0 3px rgba(255,224,138,.8),0 0 22px rgba(255,224,138,.9)}}
.btn.shinylock{width:100%;opacity:1;font-size:15px}
.btn.waiting{opacity:.55}
html.calm .shinypill,html.calm .shinybanner,html.calm .actor.enemy.shinyfoe,html.calm .btn.shinycatch{animation:none}
/* ---------- 2.9: clearer dungeon ---------- */
.heroface.xs{width:22px;height:22px;border-width:1px;background-size:230% auto}
.herocard{position:relative}
.herocard .hc-top{display:flex;gap:6px;align-items:center;min-width:0}.herocard .hc-top b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.herocard .ok{display:inline-flex;gap:3px;align-items:center;font-size:11px;font-weight:800;color:#7fe0a4}.herocard .ok .ic{width:12px;height:12px}
.herocard .wait{font-size:11px;color:#f2c06b;font-weight:700}
.herocard.me{border-color:var(--gold);box-shadow:0 0 0 1px rgba(227,189,99,.4)}
.herocard .did,.foecard .did{font-size:11.5px;color:#cfe;opacity:.85;line-height:1.25}
.dgnum{position:absolute;right:8px;top:4px;font-weight:900;font-size:17px;pointer-events:none;text-shadow:0 2px 0 #000,0 0 6px #000;animation:dgnum 1.6s ease-out forwards}
.dgnum.neg{color:#ff6b5b}.dgnum.pos{color:#7fe0a4}
@keyframes dgnum{0%{transform:translateY(6px) scale(.8);opacity:0}15%{transform:translateY(0) scale(1.2);opacity:1}70%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.dglog p{display:flex;gap:6px;align-items:flex-start;margin:2px 0;padding:2px 4px;border-radius:6px}
.dglog p .heroface,.dglog p .lgfoe,.dglog p .lgsys{flex:none;margin-top:1px}
.dglog .lgfoe .ic,.dglog .lgsys .ic{width:18px;height:18px}
.dglog .lg-foe{color:#ffb4a8}.dglog .lg-foe .lgfoe{color:#ff7a66}
.dglog .lg-hero{color:#e8f4ea}.dglog .lg-me{background:rgba(227,189,99,.10)}
.dglog .lg-sys{color:#f2c06b;font-weight:700}
.dglog .lg-crit span{font-weight:800}.dglog .lg-heal span{color:#7fe0a4}
.dglog .lgr{margin:6px 0 2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.08)}
.coop .arena .dglog{flex:0 0 auto;min-height:130px;max-height:210px}
.screen.battle.coop{height:auto;min-height:0}.coop .arena{flex:0 0 auto;overflow:visible;height:auto;max-height:none}
/* ---------- 2.9: iPhone top. The game starts a little lower and the strip under the
   status bar is solid, so nothing scrolls (blurred) behind the clock and battery. ---------- */
:root{--topgap:12px}
@media (display-mode:standalone),(max-width:700px){
  .hud{padding-top:calc(8px + var(--topgap) + env(safe-area-inset-top,0px))}
  body::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--topgap) + env(safe-area-inset-top,0px));background:#090e0b;z-index:30;pointer-events:none}
  .installbar{top:calc(10px + var(--topgap) + env(safe-area-inset-top,0px))}
  .toast{top:calc(66px + var(--topgap) + env(safe-area-inset-top,0px))}
  #ptr{top:calc(env(safe-area-inset-top,0px) + var(--topgap) + 8px)}
  .gc-panel{padding-top:calc(10px + var(--topgap) + env(safe-area-inset-top))}
}
/* ===== Release 2.10: skill icons, battle effects, status and item icons (assets/skills, assets/fx, assets/ui) ===== */
.skpic{display:inline-block;flex:none;width:40px;height:40px;border-radius:8px;background:url(../assets/skills/skills.png) no-repeat;background-size:1000% 500%}
.pix{background:url(../assets/ui/items.png) no-repeat;background-size:1600% 100%;vertical-align:-.25em}
/* skill tree: the framed picture replaces the round / diamond / star glyph */
.sknode .skn-ic{border-radius:12px;padding:0;overflow:hidden;background:#14110b;border:2px solid rgba(255,255,255,.14)}
.sknode.t-passive .skn-ic{transform:none;border-radius:12px;border-color:rgba(79,216,200,.4)}
.sknode.t-ult .skn-ic{width:66px;height:66px;clip-path:none;border-radius:14px;border:2px solid #b48cff;background:#1c1430}
.sknode.t-ult.got .skn-ic{background:#1c1430;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 18px rgba(180,140,255,.7)}
.sknode .skn-ic .skpic{display:block;width:100%;height:100%;border-radius:9px}
.sknode:not(.got) .skn-ic .skpic{filter:saturate(.45) brightness(.7)}
.sknode.t-passive::before{content:'';position:absolute;z-index:2;top:-3px;left:14px;width:9px;height:9px;transform:rotate(45deg);background:#4fd8c8;border:1.5px solid #10201c;border-radius:2px}
.sknode.big.t-passive::before{left:-3px}
.sknode.big .skn-ic{width:64px;height:64px}
@media (max-width:380px){.sknode.t-passive::before{left:12px}.sknode.t-ult .skn-ic{width:58px;height:58px}}
.skbtn .skpic{width:32px;height:32px;border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.45)}
.skbtn.cool .skpic{filter:grayscale(.6)}
.ultbar .skpic{width:32px;height:32px;border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.ultbar.ready .skpic{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 12px rgba(200,160,255,.9)}
@media (max-width:380px){.skbtn .skpic{width:28px;height:28px}}
/* status chips get their glyph */
.st-burn::before,.st-poison::before,.st-stun::before,.st-weak::before,.st-soak::before,.st-shield::before,.st-regen::before,.st-valor::before{content:'';display:inline-block;width:1.2em;height:1.2em;margin:0 3px 0 -4px;vertical-align:-.25em;background:url(../assets/ui/status.png) no-repeat;background-size:1500% 100%}
.st-valor::before{background-position:0 0}.st-weak::before{background-position:7.1429% 0}.st-shield::before{background-position:14.2857% 0}
.st-regen::before{background-position:35.7143% 0}.st-poison::before{background-position:64.2857% 0}.st-soak::before{background-position:71.4286% 0}
.st-stun::before{background-position:78.5714% 0}.st-burn::before{background-position:100% 0}
/* battle effects: pictures instead of CSS gradients */
.vfx[class*="vfx-"]{background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;border:0;border-radius:0;box-shadow:none}
.vfx-slash{background-image:url(../assets/fx/crescent.png);background-size:85%;animation:vfxslash .55s .12s ease-out forwards}
@keyframes vfxslash{0%{opacity:0;transform:rotate(-35deg) scale(.6)}30%{opacity:1}100%{opacity:0;transform:rotate(20deg) scale(1.15)}}
.vfx-slash2{background-image:url(../assets/fx/redslash.png);background-size:62%;background-position:30% 50%}
.vfx-slash2::after{content:'';position:absolute;inset:0;background:url(../assets/fx/redslash.png) 30% 50%/62% no-repeat;transform:scaleX(-1)}
.vfx-smash{background-image:url(../assets/fx/burst.png),url(../assets/fx/goldburst.png);background-size:62%,105%;background-position:center 38%,center 100%}
.vfx-stab{background-image:url(../assets/fx/dash.png);background-size:95%;animation:vfxfly .55s .06s ease-out forwards}
.vfx-stab::after{content:'';position:absolute;inset:0;background:url(../assets/fx/redslash.png) center/55% no-repeat;opacity:0;animation:vfxlate .55s .06s ease-out forwards}
@keyframes vfxfly{0%{opacity:0;transform:translateX(-140%) scale(.7)}30%{opacity:1}65%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(8%) scale(1.1)}}
@keyframes vfxlate{0%,55%{opacity:0;transform:scale(.6)}75%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
.vfx-fire{background-image:url(../assets/fx/burst.png),url(../assets/fx/fire.png);background-size:50%,110%;background-position:center 35%,center 100%;animation:vfxrise .8s .1s ease-out forwards}
@keyframes vfxrise{0%{opacity:0;transform:translateY(12%) scale(.55)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.vfx-bolt{background-image:url(../assets/fx/spark.png),url(../assets/fx/pillars.png);background-size:45%,110%;background-position:center 38%,center 100%;animation:vfxrise .7s .1s ease-out forwards}
.vfx-frost{background-image:url(../assets/fx/icecrown.png),url(../assets/fx/ice.png);background-size:55%,110%;background-position:center 30%,center 100%;animation:vfxrise .85s .1s ease-out forwards}
.vfx-poison{background-image:url(../assets/fx/sparkles.png);background-size:62%;filter:hue-rotate(-50deg) saturate(1.4);animation-duration:.85s}
.vfx-claw{background-image:url(../assets/fx/claws.png);background-size:72%}
.vfx-mark{background-image:url(../assets/fx/alert.png);background-size:55%;animation-duration:.9s}
.vfx-arrow{background-image:url(../assets/fx/volley.png);background-size:92%;animation:vfxfly .5s .06s ease-out forwards}
.vfx-note{background-image:url(../assets/fx/ring.png);background-size:100%;background-position:center 75%;animation:vfxrise .8s .1s ease-out forwards}
.vfx-heal{inset:-20%;background-image:url(../assets/fx/sparkles.png),url(../assets/fx/healring.png);background-size:48%,100%;background-position:center 30%,center 100%;animation:vfxrise .9s ease-out forwards}
.vfx-shield{inset:-10%;background-image:url(../assets/fx/shield.png);background-size:68%;animation:vfx .9s ease-out forwards}
.vfx-song{inset:-24%;background-image:url(../assets/fx/music.png);background-size:100%;background-position:center 92%;animation:vfxrise .95s ease-out forwards}
.herocard{position:relative}
.herocard .vfx{inset:-6%}
/* Release 2.10: BonfireMMO brand */
.brand img.brandic{width:40px;height:40px;border-radius:9px;flex:none;box-shadow:0 0 12px rgba(255,120,40,.35)}
.installbar img.brandic{width:36px;height:36px;border-radius:8px;flex:none}
.hero-logo .brandlogo{width:min(220px,60vw);height:auto;filter:drop-shadow(0 0 18px rgba(255,110,40,.35))}