/* Hero collection and profile: bevelled blue frames over the paused battlefield. */
body:is([data-screen=heroes],[data-screen=bag]){overflow:hidden}
body:is([data-screen=heroes],[data-screen=bag]) .app-header{display:none}
body:is([data-screen=heroes],[data-screen=bag]) .field-screen{height:calc(100dvh - 126px);min-height:520px}
body:is([data-screen=heroes],[data-screen=bag]) .campaign-wallet{position:relative;z-index:41;background:linear-gradient(#515774,#32374e);border-color:#959dd0;color:#e9eafb;text-shadow:0 2px 2px #17192f;letter-spacing:0;font-weight:800}
body:is([data-screen=heroes],[data-screen=bag]) .campaign-wallet b{color:#fff}
body:is([data-screen=heroes],[data-screen=bag]) .hub-navigation{z-index:44;background:linear-gradient(#51546e,#36374f);border-top:3px solid #a3a9d0;box-shadow:0 -3px 0 #292b44}
body:is([data-screen=heroes],[data-screen=bag]) .hub-navigation button{color:#c6c8de;border-inline:1px solid #9297bd45;font-weight:800;text-shadow:0 2px 2px #171b2e}
body:is([data-screen=heroes],[data-screen=bag]) .hub-navigation button[aria-current=page]{color:#fff;background:linear-gradient(#777cad,#555985);box-shadow:inset 0 2px 0 #c4d3ff}
.heroes-screen{position:fixed;inset:64px 0 84px;z-index:40;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:16px 20px 24px;color:#fff;font-weight:700}
.heroes-shade{position:fixed;inset:0;background:#141523ad;z-index:-1}
.heroes-window{position:relative;width:min(560px,100%);height:100%;min-height:0;max-height:900px;display:flex;flex-direction:column;border:3px solid #9fa9d8;border-bottom-color:#77b7db;border-radius:15px 15px 9px 9px;background:linear-gradient(115deg,#646780,#53556e 45%,#656781);box-shadow:0 0 0 2px #33374d,0 16px 60px #090a1666,inset 0 0 0 3px #777b9d}
.heroes-window-header{flex:none;height:60px;position:relative;display:flex;align-items:center;justify-content:center;margin:-3px -7px 0;border:3px solid #a9b6e5;border-bottom-color:#373b60;border-radius:15px 15px 4px 4px;background:linear-gradient(#929fcc 0%,#7e8bb7 46%,#6b769f 49%,#6f79a2);box-shadow:0 3px 0 #404766, inset 0 2px 2px #d6e4ff80;z-index:3}
.heroes-window-header h1{margin:0;font:900 21px Inter,Arial,sans-serif;letter-spacing:-.5px;color:#fff;text-shadow:0 2px 1px #343954,1px 0 #343954,-1px 0 #343954}
.hero-square{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:7px;border:2px solid #894164;color:#fff;font:bold 38px/1 Arial;box-shadow:inset 0 3px 0 #ffffff60,0 3px 0 #34354e;text-shadow:0 2px 2px #542e50;cursor:pointer}
.hero-square.red{background:linear-gradient(#f682a6,#d73568)}.hero-square.blue{border-color:#3b639e;background:linear-gradient(#88c9ff,#4573bd);font-size:30px}.hero-square.green{background:linear-gradient(#a7ec45,#4cb62d);border-color:#438d30;width:32px;height:32px;font-size:30px}
#heroes-close{position:absolute;right:13px;top:7px}#heroes-back{position:absolute;left:13px;top:7px}
.heroes-library{min-height:0;flex:1;display:flex;flex-direction:column;padding:18px 18px 0}
.heroes-capacity{display:flex;align-items:center;gap:10px;min-height:34px;margin-bottom:14px;font-size:11px;color:#d4d8ed}
.heroes-capacity>span{margin-right:auto;letter-spacing:1px}.heroes-capacity strong{background:#37394faa;padding:8px 22px;color:#fff;box-shadow:inset 0 2px 4px #1c203344;font-size:13px}
.heroes-grid-wrap{flex:1;min-height:0;border:2px solid #9096b9;border-radius:8px;box-shadow:inset 0 2px 7px #21243b80;background:linear-gradient(120deg,#3d3f5d,#373951);padding:16px;overflow:auto}
.heroes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:24px 17px}
.hero-tile{position:relative;aspect-ratio:.88;min-width:0;padding:0;border:3px solid #c5a4f5;border-bottom-color:#806da9;border-radius:4px;background:radial-gradient(ellipse at 50% 85%,#c9b0fa,#615293 60%,#30264d);box-shadow:0 3px 3px #171a2b,inset 0 0 0 2px #402d5f;cursor:pointer;overflow:visible;color:#fff}
.hero-tile.warrior{border-color:#efc46c;background:radial-gradient(ellipse at 50% 85%,#ebc67c,#997444 60%,#4f3440)}
.hero-tile.priest{border-color:#8fdcff;background:radial-gradient(ellipse at 50% 85%,#abecff,#4272a0 60%,#284357)}
.hero-tile.archer{border-color:#81c3ed;background:radial-gradient(ellipse at 50% 85%,#a3d2fb,#455b94 60%,#29334e)}
.hero-tile-art{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:radial-gradient(circle at 50% 32%,rgba(var(--hero-faction-rgb,118,132,180),.78),#262b47 68%,#171a2b);pointer-events:none}
.hero-tile-art:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#ffffff38 0 8%,transparent 24% 67%,#0008),linear-gradient(transparent 62%,#11152dc7);box-shadow:inset 0 0 0 1px #ffffff45;pointer-events:none}
.hero-tile-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.hero-tile-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#eef5ff;font-size:28px;text-shadow:0 2px 5px #000}
.hero-tile-class{position:absolute;top:-9px;left:-9px;width:30px;height:31px;display:grid;place-items:center;background:linear-gradient(#b1d7ff,#5c65a2);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 2px 2px #10152a)}
.hero-tile-class svg{width:22px;height:22px}.hero-tile-level{position:absolute;right:3px;top:1px;font-size:15px;text-shadow:0 2px 2px #16182d,1px 0 #16182d}
.hero-tile-rank{position:absolute;bottom:2px;left:0;right:0;font-size:14px;color:#fff07c;text-shadow:0 2px 1px #87551d}.hero-tile-name{position:absolute;top:calc(100% + 7px);left:-5px;right:-5px;font-size:10px;text-align:center;font-weight:700;color:#dce4fb;white-space:nowrap}
.hero-tile.is-locked{filter:grayscale(.8);opacity:.58}.hero-tile.is-locked .hero-tile-rank{font-size:8px;color:#fff}.heroes-empty{padding:35px 8px;text-align:center;font-size:13px;line-height:1.8;color:#aeb4d4}
.heroes-filters{display:flex;justify-content:center;gap:17px;padding:23px 6px 17px}
.heroes-filters{flex-shrink:0;overflow-x:auto;justify-content:safe center}.heroes-pager{display:flex;justify-content:center;align-items:center;gap:25px;padding-top:12px;font-size:11px}.heroes-pager button{border:1px solid #939dc5;border-radius:4px;background:#414563;color:#fff;font-size:22px;width:32px}
.hero-filter{display:grid;place-items:center;width:45px;height:45px;flex-shrink:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border:0;background:linear-gradient(#bccbf2,#64729e);padding:7px;cursor:pointer}.hero-filter svg{width:100%;height:100%}.hero-filter[aria-pressed=true]{background:linear-gradient(#ffec97,#e6a646);filter:drop-shadow(0 0 5px #f6d077)}
.hero-panel-tabs{position:relative;display:flex;flex:none;justify-content:center;gap:3px;height:54px;margin:0 14px -23px;z-index:2}
.hero-panel-tabs button{flex:1;max-width:160px;border:2px solid #474a6b;border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(#565975,#393b59);box-shadow:0 3px 0 #25293d;color:#e3e8f8;font-weight:800;font-size:12px;line-height:1.2;padding:8px 12px;cursor:pointer;text-shadow:0 2px 1px #2c314e}
.hero-panel-tabs button[aria-pressed=true],.hero-panel-tabs button[aria-selected=true]{background:linear-gradient(#7888bf,#7e94e2);border-color:#899fd9;color:#fff;box-shadow:0 3px 0 #424e89,inset 0 -3px 5px #abb7ff}
.heroes-profile{min-height:0;flex:1;display:flex;flex-direction:column;overflow:visible}
.hero-profile-scroll{min-height:0;flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a3acd0 #444764}
.hero-profile-details{margin:12px 0;padding:10px 12px;border:1px solid #969dc44d;border-radius:7px;font-size:12px;line-height:1.6}.hero-profile-details summary{cursor:pointer;color:#ffe49a}.hero-profile-details p{margin:8px 0 0}.hero-profile-details summary:focus-visible{outline:2px solid #ffe49a;outline-offset:3px}
.hero-showcase{position:relative;flex:1;min-height:250px;max-height:470px;isolation:isolate;background:radial-gradient(ellipse at 50% 85%,#b965ff,#6a43ab 48%,#332b66);border-bottom:5px solid #aabce6;box-shadow:0 3px 0 #43456c;margin-bottom:0}
.hero-banner{position:absolute;inset:0 12% 9%;z-index:-1;background:linear-gradient(120deg,#a295db,#8582bf 50%,#7b6cb0);clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);border-inline:12px solid #d8d5e9;box-shadow:inset 4px 0 0 #797599,inset -4px 0 0 #797599}
.hero-banner-symbol{position:absolute;top:18%;left:9%;right:9%;opacity:.14;transform:rotate(-9deg)}.hero-banner-symbol svg{width:100%;height:100%;filter:grayscale(1) brightness(2)}
.hero-rank{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1px;text-shadow:0 2px 2px #645124}
.hero-rank>span{background:linear-gradient(#fff09b,#c7943b);padding:4px 25px;color:#62471d;font-size:10px;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}.hero-rank strong{font-size:23px;color:#ffe76d;white-space:nowrap}
.hero-profile-stage{position:absolute;inset:35px 10px 52px;min-height:0}
.hero-profile-stage:before{content:'';position:absolute;bottom:2%;left:20%;right:20%;height:13%;border-radius:50%;border:3px solid #d6a3fa;background:radial-gradient(ellipse,#d9aaff,#b670d8 60%,#6b459d 65%);box-shadow:0 7px 0 #4a326e,0 10px 20px #322047}
.hero-profile-stage #hero-stage{width:100%;height:100%;display:block}
.hero-profile-name{position:absolute;bottom:54px;left:20%;right:20%;z-index:2;text-align:center;background:linear-gradient(90deg,transparent,#282644bd 20%,#282644bd 80%,transparent);padding:5px}
.hero-profile-name h2{margin:0;color:#fff;font-size:19px;text-shadow:0 2px 2px #171829}.hero-profile-name span{font-size:9px;color:#d5d3e9;letter-spacing:.4px}
.hero-cycle{position:absolute;top:48%;z-index:3;border:0;background:none;color:#a9d5ff;font:900 53px/1 Arial;text-shadow:0 3px #5566aa;cursor:pointer;padding:0 7px}.hero-cycle.previous{left:5px}.hero-cycle.next{right:5px}.hero-cycle:disabled{opacity:.2;cursor:default}
.hero-skill-buttons{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:20px;z-index:2}
.hero-skill-tile{width:51px;height:51px;background:radial-gradient(ellipse at 50% 75%,#bfa8e8,#443454);border:3px solid #bbb4d9;border-radius:3px;box-shadow:0 3px 0 #34283f,inset 0 0 0 2px #4f4362;padding:5px;cursor:pointer;filter:saturate(.45)}
.hero-skill-tile svg{width:100%;height:100%}.hero-skill-tile[aria-pressed=true]{border-color:#e8b4ff;background:radial-gradient(ellipse at 50% 75%,#c878e9,#7021a3);filter:none;box-shadow:0 0 12px #e396ef88,inset 0 0 0 2px #5d357b}
.hero-profile-body{padding:0 23px 10px;flex:none;min-height:220px;background:linear-gradient(135deg,#595c77dd,#4e526bee)}
.hero-skill-description{font-weight:500;text-align:center;color:#dce0f1;font-size:10px;line-height:1.5;min-height:30px;margin:10px 0;border-bottom:1px solid #9097b940;padding-bottom:8px}
.hero-level-line{display:flex;justify-content:space-between;font-size:12px;align-items:center;margin:10px 0 14px}.hero-level-line>span{font-size:10px;color:#b8e5b7}
.hero-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:10px 10px 17px}
.hero-stat{display:flex;align-items:center;flex-direction:column;background:linear-gradient(#45465d88,#45465d22);padding:6px 3px;gap:4px}.hero-stat svg{width:45px;height:45px;filter:drop-shadow(0 3px 2px #24253655)}.hero-stat strong{font-size:15px;color:#fff;text-shadow:0 2px 2px #30334b}.hero-stat small{font-size:9px;font-weight:500;color:#c8cce0}
.hero-gold-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;min-width:220px;max-width:100%;margin:0 auto;padding:6px 20px;color:#514326;border:3px solid #f3db72;border-bottom-color:#c99234;border-radius:6px;background:linear-gradient(#ffe875 0%,#ffe760 46%,#ffc628 49%,#efb32e);box-shadow:0 4px 0 #76604b,inset 0 2px 0 #fff5b1;cursor:pointer;text-shadow:0 1px #fff3b2;font-weight:900;font-size:13px}
.hero-gold-button:disabled{filter:saturate(.4);opacity:.6;cursor:default}.hero-cost{display:flex;align-items:center;justify-content:center;gap:19px}.hero-cost>span{display:flex;align-items:center;gap:5px;font-weight:900;font-size:12px}.hero-cost svg{width:21px;height:21px}
.heroes-profile .growth-hint{font-size:10px;line-height:1.4;background:none;border:0;padding:0;margin:11px 0 0;text-align:center;color:#e0dce9;font-weight:500;min-height:15px}
.heroes-profile #hero-claim-loot{display:block;margin:3px auto 0;padding:3px;color:#ffe884;font-size:10px;text-align:center}
.heroes-profile>.hero-panel-tabs{margin-top:auto;min-height:50px}.hero-equipment-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;margin:18px auto;max-width:360px}.hero-equipped{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;border:0;background:none;padding:0;color:inherit;cursor:pointer}.hero-equipped:disabled{cursor:default;opacity:.65}.hero-equipment-box{position:relative;display:grid;place-items:center;width:76px;height:76px;border:3px solid #7b81a6;background:radial-gradient(#4f5479,#383b59);box-shadow:inset 0 0 0 2px #303551,0 2px 3px #343753}.hero-equipped .hero-equipment-box img{width:63px;height:63px;padding:5px;object-fit:contain;border:0;background:none}.hero-equipment-box.is-empty img{opacity:.18;filter:grayscale(1)}.hero-equipment-plus{position:absolute;right:-7px;top:-15px;font:bold 36px Arial;color:#bdf677;text-shadow:0 2px #557246,1px 0 #557246;pointer-events:none}.hero-equipped small{font-size:10px;color:#eef0ff}.hero-equipped strong{font-size:9px;font-weight:500;color:#c7c9df;line-height:1.4}.hero-equipped:focus-visible{outline:2px solid #ffe17e;outline-offset:5px;border-radius:3px}
.hero-panel-note{font-weight:500;text-align:center;font-size:11px;line-height:1.6;color:#d5d7eb;margin:12px 0}.hero-mastery-emblem{color:#ffe085;text-shadow:0 3px #a98341;text-align:center;font-size:42px;line-height:1}#hero-mastery-title{text-align:center;margin:4px 0;font-size:17px;color:#ffdc7b}
.heroes-asset-status{position:absolute;top:42%;left:20px;right:20px;text-align:center;color:#fff0b7;font-size:12px;background:#373952ed;padding:16px;border-radius:6px;z-index:5}#heroes-asset-retry{position:absolute;z-index:6;top:55%;left:50%;transform:translateX(-50%)}
.heroes-screen button:focus-visible{outline:3px solid #ffec9c;outline-offset:4px}.heroes-screen button:disabled{cursor:default}
body[data-screen=heroes] .guide{top:124px;bottom:auto;right:20px;max-width:310px;padding:12px;background:#3c405bed;border-color:#aeb7de}
body[data-screen=heroes] .guide img{width:45px;height:65px}body[data-screen=heroes] .guide p{font-size:11px}
body[data-screen=heroes] .inventory-dialog{--text:#eef0ff;--gold:#ffe080;--line:#9099bf55;background:#4d516e;color:#eef0ff;border:3px solid #a1afd8;box-shadow:0 20px 80px #10112499}
body[data-screen=heroes] .inventory-header{background:linear-gradient(#8d9ac7,#65739f);border-bottom:3px solid #414867}body[data-screen=heroes] .inventory-header h2{font-weight:800;text-shadow:0 2px #394060}
body[data-screen=heroes] .inventory-character{background:radial-gradient(ellipse at 50% 40%,#9f80c9,#564775 70%)}body[data-screen=heroes] .inventory-slot,body[data-screen=heroes] .inventory-cell{background:#3a3e59;border-color:#8d96bc}
body[data-screen=heroes] .inventory-slot.is-selected,body[data-screen=heroes] .inventory-cell.is-selected{background:#645789;border-color:#ffe17e}
body[data-screen=heroes] .inventory-footer{background:#454b68}body[data-screen=heroes] .inventory-close{background:linear-gradient(#ef81a4,#c83764);border-color:#8c4165;color:#fff}
body[data-screen=heroes] .inventory-dialog p,body[data-screen=heroes] .inventory-dialog small,body[data-screen=heroes] .inventory-dialog .eyebrow,body[data-screen=heroes] .inventory-stats span,body[data-screen=heroes] #inventory-count{color:#d0d7f1}
body[data-screen=heroes] .inventory-dialog .primary-button{background:linear-gradient(#ffe981,#ffc52f);border:2px solid #f3d873;color:#504126;font-weight:800}
@media(min-width:700px){.heroes-screen[data-view=list]{padding-top:60px;padding-bottom:50px}.heroes-screen[data-view=list] .heroes-window{max-height:720px}}
@media(max-width:600px){.heroes-screen{inset:54px 0 83px;padding:15px 13px 20px}.heroes-window-header{height:47px}.heroes-window-header h1{font-size:18px}.hero-square{width:33px;height:33px;font-size:31px}#heroes-close,#heroes-back{top:5px;right:9px}#heroes-back{left:9px;right:auto}.heroes-library{padding:13px 10px 0}.heroes-capacity{font-size:8px;gap:6px;margin-bottom:11px}.heroes-capacity strong{font-size:11px;padding:7px 13px}.heroes-grid-wrap{padding:15px 12px}.heroes-grid{gap:26px 12px}.hero-tile-class{width:24px;height:25px;left:-7px;top:-7px}.hero-tile-class svg{width:18px;height:18px}.hero-tile-level{font-size:12px}.hero-tile-rank{font-size:11px}.hero-tile-name{font-size:8px}.heroes-filters{gap:14px;padding:18px 4px 13px}.hero-filter{width:35px;height:36px;padding:6px}.hero-panel-tabs{height:48px;margin-inline:5px;margin-bottom:-21px}.hero-panel-tabs button{font-size:11px;padding:6px 8px}.hero-showcase{min-height:230px}.hero-banner{border-inline-width:9px}.hero-rank{top:7px}.hero-rank>span{font-size:8px}.hero-rank strong{font-size:20px}.hero-profile-stage{inset:31px 5px 52px}.hero-profile-name h2{font-size:17px}.hero-profile-name span{font-size:8px}.hero-skill-buttons{gap:16px}.hero-skill-tile{width:43px;height:43px;padding:4px}.hero-profile-name{bottom:51px}.hero-profile-body{padding:0 15px 7px;min-height:210px}.hero-skill-description{font-size:9px;margin:7px 0;min-height:28px}.hero-level-line{font-size:11px;margin:9px 0}.hero-stat-grid{gap:8px;margin:8px 0 12px}.hero-stat svg{width:34px;height:34px}.hero-stat strong{font-size:13px}.hero-stat small{font-size:8px}.hero-stat{gap:3px;padding:5px 2px}.hero-gold-button{min-width:190px;min-height:47px;font-size:12px;padding:5px 13px}.hero-cost>span{font-size:11px}.hero-cost svg{width:18px;height:18px}.heroes-profile .growth-hint{font-size:9px;margin-top:8px}.hero-cycle{font-size:43px}.hero-equipped img,.hero-empty-slot{width:37px;height:37px}.hero-panel-note{font-size:10px}}
@media(max-height:740px){.heroes-screen{inset:48px 0 79px;padding-top:8px}.hero-showcase{flex:none;height:240px;min-height:240px}.heroes-profile>.hero-panel-tabs{margin:0 6px;min-height:45px}.heroes-profile .hero-panel-tabs button{border-top:2px solid #a0afd8}}
@media(prefers-reduced-motion:no-preference){.hero-tile{transition:filter .15s,transform .15s}.hero-tile:hover{filter:brightness(1.18);transform:translateY(-2px)}}

.copy-tools{display:flex;gap:8px;align-items:center;justify-content:center;margin:10px 0}.copy-tools button,.copy-grid button{color:#fff;background:#424f77;border:1px solid #a6b4da;border-radius:6px;padding:10px;cursor:pointer}.copy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.copy-grid button{white-space:pre-line;font-size:11px;min-height:70px}.copy-grid button[aria-pressed=true]{outline:3px solid #d7e975}.copy-flags{position:absolute;top:25px;right:2px;font-size:8px;color:#d7ffac}.faction-cycle{line-height:3;text-align:center;font-size:20px}#copy-preview{white-space:pre-wrap;line-height:1.7}#copy-star,#copy-exp{margin:10px 0}#copy-dialog{max-height:85dvh;overflow:auto}@media(max-width:480px){.copy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hero-tile-quality{position:absolute;bottom:20px;left:1px;right:1px;background:#191627ba;display:block;font-size:9px;line-height:1.3;color:#d3d9eb;padding:3px 1px;overflow-wrap:anywhere}
.hero-tile[data-quality=elite]{border-color:#bc91ec}.hero-tile[data-quality=legend]{border-color:#eac55f}
.hero-tile[data-quality=legend] .hero-tile-quality{color:#ffe695}.hero-tile[data-quality=elite] .hero-tile-quality{color:#dfb9ff}
.hero-promotion{border-top:1px solid #aeb8df55;margin-top:18px;padding:14px 0;text-align:center;font-size:12px;line-height:1.6}
.hero-promotion .hero-gold-button{min-width:0;width:100%;white-space:normal}
#copy-legacy{min-width:0;margin:14px auto}#promotion-preview{line-height:1.7;overflow-wrap:anywhere}

/* Give the hero a stable stage; short screens scroll the growth summary. */
.heroes-screen[data-view=detail]{inset:48px 0 calc(74px + env(safe-area-inset-bottom));padding:6px 13px 4px}
.heroes-screen[data-view=detail] .heroes-window{max-height:880px}
.heroes-screen[data-view=detail] .heroes-window-header{height:44px}
.heroes-profile>.hero-panel-tabs{height:44px;min-height:44px;margin:0 5px;gap:3px}
.heroes-profile>.hero-panel-tabs button{border-top:2px solid #9eaad7;border-radius:0 0 7px 7px;padding:5px 8px}
.hero-profile-scroll{display:grid;grid-template-rows:minmax(330px,1fr) auto;overflow-y:auto;overscroll-behavior:contain}
.heroes-profile .hero-showcase{height:auto;min-height:330px;max-height:none;border-bottom-width:3px}
.hero-profile-stage{inset:66px 30px 70px}
.hero-profile-name{bottom:63px;left:16%;right:16%;padding:4px}
.hero-profile-name h2{font-size:18px;line-height:1.15}.hero-profile-name span{font-size:9px}
.hero-rank{top:5px}.hero-rank>span{padding:3px 24px}.hero-rank strong{font-size:23px;line-height:1.1;filter:drop-shadow(0 2px 1px #76431e)}
.heroes-profile{--banner-top:#5c3c8d;--banner-bottom:#9573c1;--stage-glow:#c68dff}
.heroes-profile[data-faction=alliance]{--banner-top:#135d98;--banner-bottom:#4cbad4;--stage-glow:#75e5ff}
.heroes-profile[data-faction=wild]{--banner-top:#617e25;--banner-bottom:#a8bd66;--stage-glow:#bdec69}
.heroes-profile[data-faction=shadow]{--banner-top:#76223f;--banner-bottom:#b34665;--stage-glow:#f160c4}
.heroes-profile[data-faction=undead]{--banner-top:#185e49;--banner-bottom:#49a87b;--stage-glow:#71efbd}
.heroes-profile .hero-showcase{background:radial-gradient(ellipse at 50% 83%,var(--stage-glow),#302653 66%,#232642)}
.heroes-profile .hero-banner{inset:0 12% 13%;background:linear-gradient(145deg,var(--banner-top),var(--banner-bottom));border-inline-color:#c9d0e2}
.heroes-profile .hero-banner-symbol{top:21%;left:5%;right:5%;opacity:.15}
.heroes-profile .hero-profile-stage:before{left:9%;right:9%;height:9%;border-color:var(--stage-glow);background:radial-gradient(ellipse,var(--stage-glow),#515177 65%);box-shadow:0 5px 0 #333650,0 10px 23px var(--stage-glow)}
.heroes-profile:is([data-quality=elite],[data-quality=legend]) .hero-rank>span{padding:28px 18px 0;background:url('/icons/quality-crest.svg') center top/85px 32px no-repeat;clip-path:none;color:#ffd26d;font-size:11px;text-shadow:0 2px 1px #4a2823}
.heroes-profile[data-quality=legend] .hero-rank>span{color:#ff705c}
.heroes-profile:has(.hero-promotion-rank:is([data-rank="4"],[data-rank="5"])) .hero-rank strong{color:#d183ff;text-shadow:0 2px 1px #6d288f}
.heroes-profile:is([data-quality=elite],[data-quality=legend]) .hero-profile-stage{top:78px}
.hero-profile-actions{position:absolute;top:8px;left:9px;display:grid;gap:7px;z-index:4}
.hero-profile-actions button{width:38px;height:38px;border:2px solid #90acd6;border-radius:6px;background:linear-gradient(#799cce,#3c608c);box-shadow:0 2px 0 #252e59,inset 0 2px 0 #d7ebff80;color:#fff;font:bold 23px/1 Georgia,serif;cursor:pointer;text-shadow:0 2px #33405d}
.hero-skill-buttons{bottom:7px;gap:14px}
.hero-skill-tile{position:relative;width:50px;height:50px;padding:0;filter:none;border-color:#adb8e1;background:#24203f;overflow:hidden}
.hero-skill-image{display:block;width:100%;height:100%;object-fit:cover}
.hero-skill-tile[data-unlocked=false] .hero-skill-image{filter:saturate(.5) brightness(.7)}
.hero-skill-lock{position:absolute;bottom:0;left:0;right:0;padding:2px 0;background:#15162de8;color:#fff;font:700 9px/1.2 Arial,sans-serif;text-align:center}
.hero-skill-tile[aria-pressed=true]{border-color:#ffe59d;box-shadow:0 0 9px #efc16499}
.hero-profile-body{min-height:0;padding:5px 16px 10px}
.hero-level-line{margin:0 0 4px;min-height:32px;font-size:12px}
.hero-detail-link{background:#373f5c;border:1px solid #9eabd5;border-radius:5px;color:#e7efff;padding:8px 10px;min-height:34px;font-size:11px;cursor:pointer}
.hero-stat-grid{gap:8px;margin:0 0 9px}.hero-stat{padding:4px 2px;gap:2px}
.hero-stat svg{width:36px;height:36px}.hero-stat strong{font-size:14px}.hero-stat small{font-size:9px}
.heroes-profile .hero-gold-button{min-height:47px;font-size:12px}
.hero-equipment-summary{margin:6px auto 8px;gap:8px 12px}.hero-equipment-box{width:52px;height:52px}
.hero-equipped .hero-equipment-box img{width:44px;height:44px;padding:3px}.hero-equipped strong{display:none}
.hero-equipment-plus{font-size:26px;top:-10px;right:-5px}.hero-equipped small{font-size:9px}
.hero-panel-note{margin:7px 0;font-size:10px}.hero-mastery-emblem{font-size:25px}
#hero-equipment-panel .hero-panel-note{display:none}
#hero-mastery-panel .hero-gold-button{min-height:38px;margin:7px auto;font-size:11px}
.hero-detail-dialog{max-height:85dvh;overflow:auto;line-height:1.6;background:linear-gradient(135deg,#515b80,#343d5c);border:2px solid #a5b6e0;color:#eff3ff}
.hero-detail-dialog .hero-skill-description{text-align:left;font-size:14px;line-height:1.7;border:0;margin:15px 0}
.hero-detail-dialog .hero-gold-button{min-width:0;width:100%;white-space:normal}
.hero-skill-art{width:88px;height:88px;margin:16px auto 8px;border:3px solid #c3cbea;border-radius:7px;box-shadow:0 0 24px #8389d64d}
.hero-skill-art img{width:100%;height:100%}#hero-skill-state{text-align:center;color:#ffe5a5;font-weight:700}
#hero-development-dialog .growth-hint{font-size:13px;line-height:1.6}
@media(max-height:650px){.hero-profile-actions button{width:33px;height:33px}.hero-profile-actions{gap:5px}.hero-profile-body{padding:3px 13px 7px}.hero-stat svg{width:30px;height:30px}.hero-stat-grid{margin-bottom:6px}.hero-stat small{font-size:8px}.hero-profile-name h2{font-size:16px}}
@media(min-width:700px){.heroes-screen[data-view=detail]{top:64px}}
@media(max-height:700px){.heroes-profile .hero-showcase{min-height:300px}.hero-profile-scroll{grid-template-rows:minmax(300px,1fr) auto}}
@media(min-width:700px) and (min-height:850px){.hero-profile-body{padding:8px 24px 18px}.hero-stat svg{width:46px;height:46px}.hero-stat-grid{margin:8px 0 16px}.hero-skill-tile{width:58px;height:58px}.hero-profile-stage{bottom:77px}.hero-profile-name{bottom:72px}.heroes-profile .hero-showcase{min-height:400px}.hero-profile-scroll{grid-template-rows:minmax(400px,1fr) auto}}

/* Thirty portrait-first collection cards: five columns and six rows on tall screens. */
.heroes-screen[data-view=list]{inset:48px 0 calc(74px + env(safe-area-inset-bottom));padding:6px 10px 4px}
.heroes-screen[data-view=list] .heroes-window{max-height:780px}
.heroes-screen[data-view=list] .heroes-window-header{height:44px}
.heroes-library{padding:8px 8px 0}
.heroes-capacity{min-height:26px;gap:6px;margin-bottom:6px;font-size:9px}.heroes-capacity strong{font-size:11px;padding:5px 10px}.heroes-capacity .hero-square{width:27px;height:27px;font-size:25px}
.heroes-grid-wrap{padding:9px 6px;scrollbar-width:thin;overscroll-behavior:contain}
.heroes-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px 7px;max-width:430px;margin:0 auto}
.heroes-grid .hero-tile{--hero-frame:#aeb7c9;--hero-glow:#dce8ff66;aspect-ratio:1;border-width:2px;border-color:var(--hero-frame);background:#20263f;box-shadow:0 2px 3px #101323,inset 0 0 0 1px #f7fbff4d,0 0 5px var(--hero-glow)}
.heroes-grid .hero-tile[data-quality=normal]{--hero-frame:#70d592;--hero-glow:#55d98966}.heroes-grid .hero-tile[data-quality=rare]{--hero-frame:#55c9ff;--hero-glow:#39aefc7a}.heroes-grid .hero-tile[data-quality=elite]{--hero-frame:#bb77ff;--hero-glow:#a44cff80}.heroes-grid .hero-tile[data-quality=legend]{--hero-frame:#ff4f72;--hero-glow:#ff315c8c;border-bottom-color:#ffc75b}
.heroes-grid .hero-tile[data-faction=alliance]{--hero-faction-rgb:74,178,255;--hero-badge-top:#66d7ff;--hero-badge-bottom:#2474d3}.heroes-grid .hero-tile[data-faction=wild]{--hero-faction-rgb:78,207,124;--hero-badge-top:#8cf272;--hero-badge-bottom:#2ca64b}.heroes-grid .hero-tile[data-faction=shadow]{--hero-faction-rgb:210,92,104;--hero-badge-top:#ff8b68;--hero-badge-bottom:#c93455}.heroes-grid .hero-tile[data-faction=undead]{--hero-faction-rgb:161,92,213;--hero-badge-top:#cf82ff;--hero-badge-bottom:#6c34b1}
.heroes-grid .hero-tile.is-locked{filter:none;opacity:1}.heroes-grid .hero-tile.is-locked .hero-tile-art{filter:saturate(.82) brightness(.86)}
.heroes-grid .hero-tile-name,.heroes-grid .hero-tile-quality{display:none}
.heroes-grid .hero-tile-class{z-index:3;width:19px;height:20px;left:-4px;top:-5px;border:1px solid #e9f5ff;background:linear-gradient(var(--hero-badge-top,#b1d7ff),var(--hero-badge-bottom,#5c65a2));font-size:12px;color:#fff;text-shadow:0 1px 2px #10213c;filter:drop-shadow(0 2px 1px #0c1024)}
.heroes-grid .hero-tile-level{z-index:3;right:2px;top:0;padding:0 2px;font-size:11px;font-weight:900;color:#fff;text-shadow:0 2px 1px #111936,1px 0 #111936,-1px 0 #111936;font-variant-numeric:tabular-nums}
.heroes-grid .hero-tile-rank,.heroes-grid .hero-tile.is-locked .hero-tile-rank{z-index:3;bottom:1px;left:1px;right:1px;padding-top:5px;font-size:10px;line-height:1;letter-spacing:-1.5px;white-space:nowrap;background:linear-gradient(transparent,#11162dcc);color:#ffe65b;text-shadow:0 1px 1px #7b4213}
.heroes-grid .copy-flags{top:13px;right:0;font-size:9px;line-height:1.1;text-shadow:0 1px 2px #000}
.heroes-grid .hero-tile:focus-visible{outline:2px solid #ffe79a;outline-offset:2px}
.heroes-pager{flex:none;gap:20px;padding:4px 0 0;font-size:10px}.heroes-pager button{height:23px;line-height:1;font-size:20px}
.heroes-filters{gap:13px;padding:6px 2px}.heroes-filters .hero-filter{width:29px;height:29px;padding:5px}
.heroes-library-controls{display:flex;flex:none;gap:6px;margin:0 0 5px}.heroes-library-controls select{flex:1;min-width:0;width:0;max-width:100%;height:28px;margin:0;padding:3px 6px;background:#424f77;border:1px solid #a6b4da;border-radius:5px;color:white;font-size:11px}
.heroes-library>.hero-panel-tabs{height:36px;min-height:36px;margin:0 4px;gap:3px}.heroes-library>.hero-panel-tabs button{padding:4px 8px;font-size:11px}
@media(max-width:600px) and (max-height:699px){.heroes-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px 5px;max-width:450px}.heroes-grid .hero-tile-level{font-size:10px}.heroes-grid .hero-tile-class{width:17px;height:18px;font-size:11px}}
@media(min-width:700px){.heroes-screen[data-view=list]{top:64px}}
@media(min-width:700px) and (max-height:760px){.heroes-screen[data-view=list] .heroes-window{width:min(820px,100%)}.heroes-grid{grid-template-columns:repeat(10,minmax(0,1fr));max-width:650px;gap:8px 5px}}
#heroes-grid .hero-tile[data-awakened=true]{--hero-frame:#e22b58;border-color:#e22b58}#heroes-grid .hero-tile[data-awakened=true] .hero-tile-rank,.heroes-profile[data-awakened=true] #hero-rank-value{color:#c77cff;text-shadow:0 1px #713fb2,0 0 5px #7445db;letter-spacing:0}