:root{--gold:#f8c65d;--gold2:#ffec9f;--cyan:#37d9ff;--blue:#1366ff;--red:#ff334f;--ink:#05080d;--panel:rgba(5,11,19,.93);--line:rgba(248,198,93,.28);--text:#eef6ff;--muted:#9cb0c3}
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010307;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;touch-action:none}
    #shell,#shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
    button{font:inherit;color:inherit}
    #stage{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#122339 0,#05080e 46%,#010203 100%)}
    #shell{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));overflow:hidden;background:#071019;box-shadow:0 0 80px #000;isolation:isolate}
    #gameCanvas,#preview3d{position:absolute;inset:0;width:100%;height:100%}
    #gameCanvas canvas,#preview3d canvas{display:block;width:100%;height:100%}
    #gameCanvas{background:linear-gradient(#07111d,#020406)}
    .screen{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow:auto;padding:clamp(14px,2vw,28px);background:radial-gradient(circle at 72% 26%,rgba(30,83,98,.38),transparent 34%),linear-gradient(135deg,rgba(2,8,14,.96),rgba(8,18,26,.84));backdrop-filter:blur(5px)}
    .screen.hidden,.hidden{display:none!important}
    .title-wrap{width:min(900px,94%);text-align:center}
    .eyebrow{font-size:clamp(9px,1vw,13px);letter-spacing:.34em;text-transform:uppercase;color:#84c7d8;margin-bottom:8px}
    h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(31px,5.4vw,76px);line-height:.88;margin:0;text-transform:uppercase;letter-spacing:.035em;color:#fff2ba;text-shadow:0 3px 0 #6d4515,0 0 28px rgba(255,192,70,.42)}
    .sun-seal{width:clamp(54px,7vw,92px);height:clamp(54px,7vw,92px);margin:18px auto;border:3px solid var(--gold);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 26px rgba(248,198,93,.42),inset 0 0 25px rgba(248,198,93,.2);font-size:clamp(25px,3vw,42px);transform:rotate(45deg);background:rgba(248,198,93,.06)}
    .sun-seal span{transform:rotate(-45deg)}
    .subtitle{max-width:670px;margin:12px auto 22px;color:#b7c8d5;font-size:clamp(11px,1.25vw,16px);line-height:1.55}
    .mode-label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);margin:12px}
    .modes{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
    .observer-entry{width:min(620px,94vw);margin:13px auto 0;padding:9px 11px;border:1px solid rgba(80,211,255,.28);border-radius:9px;background:linear-gradient(145deg,rgba(7,24,34,.88),rgba(3,10,16,.9));box-shadow:inset 0 1px rgba(255,255,255,.05)}
    .observer-entry-label{margin-bottom:7px;color:#80dfff;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.observer-modes{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.observe-btn{min-width:112px;padding:8px 11px;border:1px solid #32788f;border-radius:6px;background:linear-gradient(180deg,#163d4d,#071923);color:#d9f8ff;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.16s}.observe-btn:hover{transform:translateY(-1px);border-color:#7de7ff;filter:brightness(1.12)}
    .primary,.mode-btn,.ghost,.hero-card,.shop-item{border:1px solid var(--line);background:linear-gradient(180deg,rgba(36,53,65,.94),rgba(8,15,23,.96));border-radius:8px;cursor:pointer;transition:.16s transform,.16s border-color,.16s filter;box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 25px rgba(0,0,0,.28)}
    .primary:hover,.mode-btn:hover,.ghost:hover,.hero-card:hover,.shop-item:hover{transform:translateY(-2px);border-color:var(--gold);filter:brightness(1.1)}
    .mode-btn{min-width:126px;padding:14px 20px;text-align:left}
    .mode-btn strong{display:block;color:#fff2b6;font:700 23px Georgia,serif}
    .mode-btn small{color:var(--muted);font-size:10px}
    .ghost{padding:8px 13px;background:rgba(5,10,16,.76);font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
    .corner-actions{position:absolute;right:14px;top:14px;z-index:80;display:flex;gap:8px}#titleScreen .corner-actions{left:14px;right:auto}
    .selection-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:clamp(5px,.8vmin,10px)}
    .selection-nav .ghost{min-width:86px;padding:clamp(5px,.7vmin,8px) clamp(8px,1vw,13px)}
    #loadingLine{margin-top:15px;color:#8ecbda;font-size:11px;letter-spacing:.12em}
    .player-name-box{width:min(420px,88vw);margin:0 auto 12px;padding:9px 11px;border:1px solid rgba(248,198,93,.3);border-radius:8px;background:rgba(3,9,15,.78);text-align:left}.player-name-box label{display:block;margin-bottom:5px;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:#ffe49a}.player-name-box input{width:100%;border:1px solid #426070;border-radius:6px;background:#07131d;color:#fff4c8;padding:10px 12px;font:800 clamp(13px,1.3vw,17px) Georgia,serif;outline:none;touch-action:auto}.player-name-box input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(248,198,93,.14)}.player-name-error{min-height:13px;margin-top:4px;color:#ff7184;font-size:9px}
    .main-menu-shell{width:min(1120px,96%);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:clamp(20px,4vw,64px);align-items:center}.main-menu-brand{text-align:left}.main-menu-brand h1{font-size:clamp(35px,5.8vw,76px)}.main-menu-brand .subtitle{margin:18px 0 0;max-width:620px}.main-menu-seal{margin:16px 0;width:clamp(50px,6vw,78px);height:clamp(50px,6vw,78px)}.main-menu-panel{padding:clamp(12px,1.8vw,24px);border:1px solid rgba(248,198,93,.34);border-radius:12px;background:linear-gradient(150deg,rgba(10,24,34,.96),rgba(3,8,14,.98));box-shadow:inset 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.45)}.main-menu-title{margin-bottom:10px;color:#85d9ea;font-size:9px;font-weight:900;letter-spacing:.25em;text-transform:uppercase}.main-menu-list{display:grid;gap:clamp(5px,.9vmin,9px)}.menu-command{width:100%;min-height:clamp(42px,7vmin,68px);padding:clamp(7px,1vmin,12px) clamp(10px,1.3vw,16px);display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;border:1px solid #314955;border-radius:7px;background:linear-gradient(110deg,#122432,#081017);color:#edfaff;text-align:left;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.05);transition:.16s}.menu-command:hover,.menu-command:focus-visible{outline:none;border-color:var(--gold);transform:translateX(3px);filter:brightness(1.12)}.menu-command-index{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(248,198,93,.45);border-radius:50%;color:#ffe18a;font:800 12px Georgia,serif}.menu-command-copy strong{display:block;color:#fff0b1;font:700 clamp(12px,1.25vw,17px) Georgia,serif;text-transform:uppercase;letter-spacing:.035em}.menu-command-copy small{display:block;margin-top:2px;color:#89a5b5;font-size:clamp(7px,.68vw,9px);letter-spacing:.08em;text-transform:uppercase}.menu-command-state{color:#65dff5;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.menu-command:disabled{cursor:not-allowed;opacity:.45;filter:saturate(.35)}.menu-command:disabled:hover{border-color:#314955;transform:none;filter:saturate(.35)}.menu-command.exit{border-color:rgba(255,88,105,.34)}.menu-command.exit .menu-command-state{color:#ff8492}.menu-status{min-height:15px;margin-top:10px;color:#8fffc8;font-size:8px;letter-spacing:.12em;text-align:center;text-transform:uppercase}
    .game-version{margin-top:8px;color:#688493;font:800 8px ui-monospace,monospace;letter-spacing:.16em;text-align:right;text-transform:uppercase}
    .setup-card{width:min(720px,94%);padding:clamp(16px,2.5vmin,28px);border:1px solid rgba(248,198,93,.34);border-radius:12px;background:linear-gradient(145deg,rgba(9,22,32,.97),rgba(3,8,14,.98));box-shadow:inset 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.45);text-align:center}.setup-card-nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:clamp(10px,1.5vmin,18px)}.setup-card h2{margin:0;color:#fff0b0;font:700 clamp(25px,3.7vw,50px) Georgia,serif;text-transform:uppercase}.setup-card-copy{max-width:560px;margin:8px auto 16px;color:#9fb4c2;font-size:clamp(9px,1vw,13px);line-height:1.5}.setup-card .player-name-box{margin-bottom:14px}.setup-card .modes{margin-top:8px}.setup-card .mode-btn{flex:1;min-width:130px}.setup-card .mode-btn strong{font-size:clamp(20px,2.3vw,29px)}.setup-card .mode-btn small{display:block;margin-top:3px}.observer-mode-btn{border-color:#32788f}.exit-message{min-height:15px;margin-top:9px;color:#ff9eaa;font-size:9px;line-height:1.4}
    #encyclopediaScreen{padding:clamp(6px,1.3vmin,16px);align-items:stretch}.encyclopedia-shell{width:100%;max-width:1600px;min-height:0;display:grid;grid-template-columns:clamp(230px,27vw,390px) minmax(0,1fr);gap:clamp(7px,1.1vmin,15px)}.encyclopedia-sidebar,.encyclopedia-detail{min-height:0;border:1px solid var(--line);border-radius:10px;background:linear-gradient(155deg,rgba(10,22,32,.97),rgba(3,8,13,.97));box-shadow:inset 0 1px rgba(255,255,255,.05)}.encyclopedia-sidebar{padding:clamp(8px,1.2vmin,15px);display:flex;flex-direction:column}.encyclopedia-nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}.encyclopedia-sidebar h2{margin:0;color:#ffe9a0;font:700 clamp(20px,2.3vw,34px) Georgia,serif;line-height:1;text-transform:uppercase}.encyclopedia-sidebar-copy{margin:7px 0 10px;color:#7593a4;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.encyclopedia-roster{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:clamp(4px,.7vmin,8px);padding:2px;scrollbar-width:thin}.encyclopedia-hero-card{position:relative;min-width:0;aspect-ratio:.86;padding:4px;border:1px solid #2d4654;border-radius:7px;background:linear-gradient(150deg,#14232e,#071018);cursor:pointer;transition:.16s;overflow:hidden}.encyclopedia-hero-card:hover,.encyclopedia-hero-card:focus-visible{outline:none;border-color:#76dcef;transform:translateY(-2px)}.encyclopedia-hero-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px rgba(248,198,93,.4),inset 0 0 22px rgba(248,198,93,.12)}.encyclopedia-thumb{position:absolute;inset:4px}.encyclopedia-detail{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:clamp(11px,1.7vmin,24px)}.encyclopedia-hero-head{display:grid;grid-template-columns:clamp(120px,16vw,220px) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center;padding-bottom:clamp(12px,1.8vmin,22px);border-bottom:1px solid rgba(248,198,93,.18)}.encyclopedia-portrait{aspect-ratio:1;border:1px solid rgba(248,198,93,.42);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 34%,rgba(55,126,140,.54),#071018 72%);box-shadow:inset 0 0 35px rgba(0,0,0,.35)}.encyclopedia-portrait img{display:block;width:100%;height:100%;object-fit:cover}.encyclopedia-kicker{color:#72d6e9;font-size:8px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.encyclopedia-name{margin:3px 0 0;color:#ffeca8;font:700 clamp(26px,4vw,58px) Georgia,serif;line-height:.92;text-transform:uppercase}.encyclopedia-title{margin-top:7px;color:#f6c95f;font:italic 700 clamp(12px,1.45vw,19px) Georgia,serif}.encyclopedia-role{margin-top:6px;color:#85a9b9;font-size:clamp(8px,.86vw,11px);letter-spacing:.13em;text-transform:uppercase}.encyclopedia-lore{margin:10px 0 0;max-width:760px;color:#bed0d9;font-size:clamp(9px,1vw,13px);line-height:1.6}.encyclopedia-section{margin-top:clamp(13px,2vmin,24px)}.encyclopedia-section-title{margin-bottom:7px;color:#7acfe1;font-size:8px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.encyclopedia-identity{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.encyclopedia-fact{padding:8px 10px;border-left:2px solid #40687b;background:rgba(8,20,29,.82);color:#7892a1;font-size:8px;letter-spacing:.08em;text-transform:uppercase}.encyclopedia-fact b{display:block;margin-top:3px;color:#edf8fb;font:700 clamp(11px,1.2vw,15px) Georgia,serif;line-height:1.25;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}.encyclopedia-stat-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(7px,1.2vmin,13px)}.encyclopedia-stat-panel{padding:clamp(8px,1.2vmin,13px);border:1px solid #263e4b;border-radius:8px;background:rgba(5,14,21,.76)}.encyclopedia-stat-panel h3{margin:0 0 7px;color:#ffe6a0;font:700 clamp(11px,1.15vw,15px) Georgia,serif;text-transform:uppercase}.encyclopedia-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.encyclopedia-stat{padding:6px;border-left:2px solid #315469;background:#0a1822;color:#718b9a;font-size:7px;text-transform:uppercase}.encyclopedia-stat b{display:block;margin-top:2px;color:#edf9fd;font-size:clamp(10px,1vw,13px);text-transform:none}.encyclopedia-abilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,1vmin,10px)}.encyclopedia-ability{min-width:0;padding:clamp(9px,1.2vmin,14px);border:1px solid #2d4654;border-left:3px solid var(--ability-color,#f5ca67);border-radius:8px;background:linear-gradient(140deg,rgba(14,29,39,.94),rgba(5,11,17,.96))}.encyclopedia-ability.passive{border-color:rgba(255,91,177,.5);border-left-color:#ff6fb7}.encyclopedia-ability-head{display:flex;gap:9px;align-items:center}.encyclopedia-ability-icon{width:clamp(36px,4.2vmin,52px);height:clamp(36px,4.2vmin,52px);flex:0 0 auto}.encyclopedia-ability-slot{color:#76d7e9;font-size:7px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.encyclopedia-ability-name{margin-top:2px;color:#ffeba9;font:700 clamp(11px,1.25vw,16px) Georgia,serif;line-height:1.15;text-transform:uppercase;overflow-wrap:anywhere}.encyclopedia-ability p{margin:8px 0;color:#aec2cd;font-size:clamp(8px,.85vw,11px);line-height:1.48}.encyclopedia-ability-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.encyclopedia-ability-meta span{min-width:0;padding:5px 6px;background:rgba(3,11,17,.72);color:#718a98;font-size:6px;letter-spacing:.06em;text-transform:uppercase}.encyclopedia-ability-meta b{display:block;margin-top:2px;color:#e8f6fa;font-size:8px;line-height:1.3;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
    #heroScreen{padding:clamp(6px,1.4vmin,18px);align-items:stretch}
    .select-layout{width:100%;max-width:1600px;display:grid;grid-template-columns:clamp(220px,25vw,360px) minmax(0,1fr);gap:clamp(6px,1.1vmin,16px);align-items:stretch;min-height:0}
    .select-copy{display:flex;flex-direction:column;min-width:0;padding:clamp(7px,1.15vmin,15px);border:1px solid var(--line);border-radius:10px;background:linear-gradient(160deg,rgba(10,21,31,.96),rgba(3,8,13,.94));box-shadow:inset 0 1px rgba(255,255,255,.06)}
    .select-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 10px;gap:8px}
    .select-head h2{font:700 clamp(20px,2.4vw,36px) Georgia,serif;margin:0;color:#ffe9a0;text-transform:uppercase}
    .select-head p{margin:0;color:#8ea9b8;font-size:10px;white-space:nowrap}
    .roster-label{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#7593a4;margin-bottom:7px}
    .hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(42px,5.3vw,76px),1fr));align-content:start;gap:clamp(4px,.75vmin,9px);overflow:auto;padding:2px;scrollbar-width:thin;flex:1}
    .hero-card{padding:4px;text-align:left;display:block;position:relative;min-height:0;aspect-ratio:.82;overflow:hidden}
    .hero-card.selected{border-color:var(--gold);transform:translateY(-2px);box-shadow:inset 0 0 26px rgba(248,198,93,.2),0 0 0 1px rgba(248,198,93,.45),0 0 18px color-mix(in srgb,var(--hero) 45%,transparent)}
    .hero-card.selected:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,239,171,.65);border-radius:5px;pointer-events:none}
    .portrait{width:100%;height:100%;border-radius:5px;display:grid;place-items:center;font:700 clamp(15px,1.7vw,24px) Georgia,serif;color:white;background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--hero) 60%,#17222d),#080d13 74%);border:1px solid rgba(255,255,255,.12);text-shadow:0 2px 8px #000;overflow:hidden;position:relative}
    .portrait:after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(2,5,8,.93));z-index:2;pointer-events:none}
    .portrait-fallback{position:relative;z-index:1;transition:opacity .2s}.portrait img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s}.portrait.ready img{opacity:1}.portrait.ready .portrait-fallback{opacity:0}
    .hero-icon-name{position:absolute;z-index:4;left:6px;right:6px;bottom:6px;text-align:center;font:700 clamp(7px,.72vw,10px) Georgia,serif;color:#fff0b5;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 5px #000}
    .preview-panel{position:relative;min-height:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 28% 42%,rgba(34,87,91,.62),rgba(4,8,13,.98) 68%);box-shadow:inset 0 0 70px rgba(0,0,0,.45)}
    .hero-showcase{position:absolute;inset:0;display:grid;grid-template-columns:minmax(clamp(190px,30vw,470px),.88fr) minmax(260px,1.12fr)}
    .model-stage{position:relative;min-width:0;overflow:hidden;border-right:1px solid rgba(248,198,93,.18);background:radial-gradient(circle at 50% 42%,rgba(41,112,116,.34),transparent 58%)}
    .model-stage:after{content:"";position:absolute;left:8%;right:8%;bottom:5%;height:13%;border-radius:50%;background:radial-gradient(ellipse,rgba(248,198,93,.2),transparent 68%);filter:blur(7px);pointer-events:none}
    #preview3d{inset:0}
    .model-tag{position:absolute;z-index:2;left:12px;top:12px;padding:5px 8px;border:1px solid rgba(117,210,228,.35);background:rgba(3,10,15,.68);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#8bd5e6}
    .hero-dossier{position:relative;z-index:3;min-height:0;padding:clamp(9px,1.75vmin,28px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:linear-gradient(100deg,rgba(5,10,16,.8),rgba(4,8,13,.98));display:flex;flex-direction:column}
    #previewName{font:700 clamp(24px,3vw,48px) Georgia,serif;line-height:.9;color:#ffe9a2;text-transform:uppercase;text-shadow:0 2px 10px rgba(248,198,93,.22)}
    #previewRole{margin-top:8px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#72cde1}
    #previewLore{font-size:10px;color:#9eb3c2;max-width:520px;line-height:1.5;margin-top:9px}
    .info-label{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#718998;margin:14px 0 6px}
    .preview-attributes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.attribute-chip{padding:8px 9px;background:#09141d;border:1px solid #263b48;font-size:9px;color:#9fb2bf}.attribute-chip b{display:block;margin-top:2px;font:700 18px Georgia,serif}.attribute-chip.str b{color:#ff8f82}.attribute-chip.agi b{color:#8effa7}.attribute-chip.int b{color:#77caff}
    .preview-combat{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.combat-stat{padding:6px 8px;background:rgba(14,27,37,.72);border-left:2px solid #355565;font-size:8px;color:#78909f;text-transform:uppercase}.combat-stat b{display:block;color:#e8f3f7;font-size:11px;margin-top:2px}
    .preview-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(108px,11vw,168px),1fr));gap:clamp(3px,.65vmin,8px)}.preview-skill{min-width:0;min-height:clamp(54px,8.5vmin,92px);padding:clamp(4px,.8vmin,10px);background:linear-gradient(145deg,#101e29,#081017);border:1px solid #2b404d;border-radius:6px}.preview-skill.passive{border-color:rgba(255,91,177,.55);background:linear-gradient(145deg,rgba(73,17,51,.9),#081017)}.preview-skill-head{display:flex;align-items:flex-start;gap:clamp(4px,.6vmin,7px);min-width:0}.preview-skill-icon{width:clamp(22px,3.2vmin,36px);height:clamp(22px,3.2vmin,36px);flex:0 0 auto;filter:drop-shadow(0 2px 4px #000)}.preview-skill-copy{min-width:0;flex:1}.preview-skill-slot{display:block;margin-bottom:2px;font-size:clamp(5px,.58vmin,7px);font-weight:900;letter-spacing:.11em;color:#6fcfe6;text-transform:uppercase}.preview-skill-name{display:block;font:700 clamp(7px,.82vmin,11px) Georgia,serif;line-height:1.2;color:#ffe7a1;text-transform:uppercase;white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:normal}.preview-skill-meta{font-size:clamp(6px,.66vmin,8px);color:#758c9b;margin-top:clamp(3px,.5vmin,6px);line-height:1.35;overflow-wrap:anywhere}
    button.preview-skill{appearance:none;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:border-color .16s,background .16s,transform .16s,box-shadow .16s}.preview-skill:hover,.preview-skill:focus-visible{border-color:#72d9ef;outline:none;transform:translateY(-1px)}.preview-skill.selected{border-color:#f5ca67;background:linear-gradient(145deg,#263040,#10151c);box-shadow:inset 0 0 18px rgba(245,202,103,.12),0 0 0 1px rgba(245,202,103,.18)}.preview-skill.passive.selected{border-color:#ff79bd;background:linear-gradient(145deg,rgba(89,20,62,.96),#10151c);box-shadow:inset 0 0 18px rgba(255,91,177,.13),0 0 0 1px rgba(255,121,189,.18)}.preview-skill-detail{flex:0 0 auto;min-width:0;margin-top:clamp(6px,.8vmin,10px);display:flex;flex-direction:column;gap:clamp(5px,.7vmin,8px)}.skill-detail-summary{height:auto;min-height:clamp(90px,12vmin,132px);padding:clamp(8px,1.1vmin,13px);border:1px solid #334c5a;border-left:3px solid var(--skill-accent,#f5c968);border-radius:7px;background:linear-gradient(120deg,rgba(14,29,39,.96),rgba(5,11,17,.96));box-shadow:inset 0 0 24px rgba(63,165,199,.04)}.skill-detail-head{display:flex;align-items:center;gap:10px}.skill-detail-icon{width:clamp(38px,4.8vmin,56px);height:clamp(38px,4.8vmin,56px);flex:0 0 auto;filter:drop-shadow(0 2px 6px #000)}.skill-detail-copy{min-width:0}.skill-detail-slot{display:block;color:#78d5e8;font-size:clamp(6px,.7vmin,8px);font-weight:950;letter-spacing:.16em;text-transform:uppercase}.skill-detail-name{display:block;margin-top:2px;font:700 clamp(13px,1.55vmin,20px) Georgia,serif;line-height:1.1;color:#ffeba9;text-transform:uppercase;overflow-wrap:anywhere}.skill-detail-description{margin:clamp(6px,.8vmin,10px) 0 0;color:#b8cbd5;font-size:clamp(8px,.9vmin,11px);line-height:1.45;white-space:normal;overflow-wrap:anywhere}.skill-detail-stats{position:relative;display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr));gap:5px;min-width:0}.skill-detail-stat{min-width:0;padding:5px 7px;border-left:2px solid #42677a;background:rgba(5,14,20,.72);color:#6f8b9b;font-size:clamp(6px,.66vmin,8px);letter-spacing:.06em;text-transform:uppercase}.skill-detail-stat b{display:block;margin-top:2px;color:#e7f5fa;font-size:clamp(7px,.77vmin,9px);line-height:1.25;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
    .encyclopedia-roster,.encyclopedia-detail{touch-action:pan-y}
    .hero-start{flex:0 0 auto;align-self:flex-start;margin-top:clamp(8px,1vmin,12px);min-width:clamp(150px,13vw,205px)}.dossier-actions{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:auto;padding-top:14px}.selection-hint{font-size:8px;color:#708796;letter-spacing:.08em;text-transform:uppercase}
    .primary{padding:12px 20px;background:linear-gradient(180deg,#bd7f23,#71420e);border-color:#ffde7a;text-transform:uppercase;font-weight:900;letter-spacing:.1em;white-space:nowrap}
    #hud{position:absolute;inset:0;z-index:20;pointer-events:none;font-size:11px}
    #hud button,#hud .clickable,#joystick,#actions{pointer-events:auto}
    .top-hud{position:absolute;left:8px;top:8px;display:flex;gap:8px;align-items:start}
    .hero-hud{width:clamp(214px,24vw,330px);padding:7px 9px;background:linear-gradient(90deg,rgba(3,8,14,.94),rgba(7,16,25,.73));border-left:3px solid var(--gold);box-shadow:0 5px 18px #0008}
    .hud-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
    #hudHero{font:700 13px Georgia,serif;color:#fff1b3;text-transform:uppercase}#hudPlayerName{font-size:8px;color:#73dfff;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}
    .bar{height:9px;background:#111a21;border:1px solid #000;margin-top:3px;position:relative;overflow:hidden}
    .bar>i{display:block;height:100%;width:50%;transition:width .15s}.hp>i{background:linear-gradient(90deg,#1b9e58,#48e784)}.mana>i{background:linear-gradient(90deg,#1768d4,#48cfff)}
    .bar span{position:absolute;inset:0;text-align:center;font-size:7px;line-height:8px;text-shadow:0 1px #000}
    .attributes{display:flex;gap:10px;margin-top:5px;color:#b8c4ce;font-size:9px}.attributes b{color:#fff}.attributes .str b{color:#ff8f82}.attributes .agi b{color:#8effa7}.attributes .int b{color:#77caff}
    .hero-progression{display:flex;align-items:center;gap:6px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(114,183,205,.18);font-size:8px;color:#86a4b4;text-transform:uppercase;letter-spacing:.06em}.hero-progression span{flex:1;min-width:0;padding:3px 5px;background:rgba(5,16,24,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-progression b{color:#ffe07a}#skillPoints{animation:pulse 1s infinite}@keyframes pulse{50%{filter:brightness(1.5)}}
    .match-hud{position:absolute;left:50%;top:7px;transform:translateX(-50%);min-width:235px;text-align:center;padding:6px 12px;background:rgba(3,8,13,.87);border-top:2px solid var(--gold);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
    .score{font:700 14px Georgia,serif}.blue{color:#58d7ff}.red{color:#ff6477}.vs{font-size:8px;color:#8294a2;padding:0 7px}.match-time{display:inline-block;margin-left:7px;padding-left:7px;border-left:1px solid rgba(248,198,93,.32);color:#ffe49a;font:800 10px ui-monospace,monospace;letter-spacing:.08em}.core-line{font-size:8px;color:#9fb0bc;margin-top:2px}.core-mini{display:inline-block;width:54px;height:4px;background:#1c2025;vertical-align:middle;margin:0 3px}.core-mini i{display:block;height:100%;background:var(--red);width:100%}.core-mini.blue-core i{background:var(--cyan)}
    .day-night{display:flex;align-items:center;justify-content:center;gap:5px;margin:3px auto 1px;width:max-content;padding:2px 8px;border:1px solid rgba(255,211,103,.32);border-radius:10px;background:rgba(90,56,10,.22);color:#ffe29a;font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transition:color 1s,border-color 1s,background 1s}.day-night-icon{font-size:10px;line-height:1}.day-night-timer{padding-left:5px;border-left:1px solid currentColor;font:800 8px ui-monospace,monospace;letter-spacing:.06em}.day-night.night{border-color:rgba(113,153,255,.48);background:rgba(24,36,90,.42);color:#a9c5ff;text-shadow:0 0 7px rgba(100,142,255,.45)}
    #minimapWrap{position:absolute;right:8px;top:8px;width:clamp(118px,15vw,190px);aspect-ratio:1;border:2px solid rgba(255,224,133,.7);background:#06100e;box-shadow:0 4px 20px #000;pointer-events:auto}
    #minimap{width:100%;height:100%;display:block}
    .hud-actions{position:absolute;right:8px;top:calc(clamp(118px,15vw,190px) + 22px);display:flex;gap:5px;flex-wrap:wrap;justify-content:end;max-width:220px}
    .hud-actions button{padding:6px 8px;border:1px solid #637382;background:rgba(5,10,16,.86);border-radius:5px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
    .bottom-info{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);display:flex;gap:8px;align-items:end}
    .pill{background:rgba(3,8,14,.9);border:1px solid #374958;padding:5px 8px;color:#c8d7df;white-space:nowrap}.pill b{color:#ffe08a}
    #joystick{position:absolute;left:clamp(16px,4vw,52px);bottom:clamp(18px,6vh,58px);width:clamp(96px,13vw,142px);height:clamp(96px,13vw,142px);border:2px solid rgba(104,205,226,.34);border-radius:50%;background:radial-gradient(circle,rgba(41,107,129,.18),rgba(3,8,14,.5));display:grid;place-items:center;touch-action:none}
    #stick{width:44%;height:44%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7fd5e4,#194458);border:2px solid rgba(255,255,255,.25);box-shadow:0 3px 15px #0008;transform:translate(0,0)}
    #actions{position:absolute;right:clamp(16px,3vw,48px);bottom:clamp(15px,4vh,44px);width:clamp(230px,28vw,370px);height:clamp(170px,20vw,250px)}
    .action-btn{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:radial-gradient(circle at 35% 25%,var(--c1),var(--c2) 70%);box-shadow:0 5px 18px #0009,inset 0 0 13px rgba(255,255,255,.12);font-weight:900;text-shadow:0 2px 3px #000;display:grid;place-items:center;text-align:center;line-height:1.05;overflow:visible}
    .action-btn:active{transform:scale(.92)}
    .action-btn.active{filter:none;box-shadow:0 0 18px rgba(74,255,180,.7),inset 0 0 16px rgba(255,255,255,.2)}
    .action-btn.cooling{filter:grayscale(.65) brightness(.62)}
    .action-btn .cool{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:white;text-shadow:0 2px 5px #000}.action-btn .label{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:clamp(6px,.58vw,8px);max-width:72px}.action-btn .level{font-size:7px;color:#ffe08a}.skill-icon{display:block;width:clamp(25px,3vw,35px);height:clamp(25px,3vw,35px);filter:drop-shadow(0 2px 3px #000)}.skill-name{display:block;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-icon{display:block;width:100%;height:100%}
    #attackBtn{right:0;bottom:0;width:clamp(74px,9vw,108px);height:clamp(74px,9vw,108px);--c1:#ffbf5b;--c2:#87340f}
    #skill1Btn{right:clamp(84px,10vw,126px);bottom:clamp(12px,2vw,30px);width:clamp(58px,7vw,82px);height:clamp(58px,7vw,82px);--c1:#55cdf0;--c2:#135083}
    #skill2Btn{right:clamp(88px,11vw,136px);bottom:clamp(82px,10vw,122px);width:clamp(58px,7vw,82px);height:clamp(58px,7vw,82px);--c1:#a279ff;--c2:#412477}
    #ultimateBtn{right:0;bottom:clamp(96px,12vw,146px);width:clamp(68px,8vw,96px);height:clamp(68px,8vw,96px);--c1:#ffe27a;--c2:#a33f16;border-color:#ffeaa5}
    #recallBtn{left:0;bottom:0;width:clamp(48px,5.5vw,66px);height:clamp(48px,5.5vw,66px);--c1:#66d9ff;--c2:#2350a0}#regenBtn{left:0;bottom:clamp(58px,7vw,82px);width:clamp(48px,5.5vw,66px);height:clamp(48px,5.5vw,66px);--c1:#66ffc1;--c2:#16735a;border-color:#9effd6}#itemSpellBtn{left:clamp(58px,7vw,82px);bottom:0;width:clamp(48px,5.5vw,66px);height:clamp(48px,5.5vw,66px);--c1:#a9efff;--c2:#3351a8;border-color:#d7f7ff}.plus{position:absolute;right:-3px;top:-7px;width:22px;height:22px;border-radius:50%;border:1px solid #fff2a6;background:#b67b17;color:white;font-size:16px;font-weight:900;line-height:17px;z-index:3;box-shadow:0 0 10px #ffc94c}
    #announcement{position:absolute;z-index:70;left:50%;top:25%;transform:translate(-50%,-50%) scale(.9);font:700 clamp(23px,4vw,58px) Georgia,serif;color:#fff1ab;text-shadow:0 3px 0 #6e3511,0 0 25px #ffae3b;text-align:center;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
    #announcement.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
    #subAnnouncement{display:block;font:600 10px system-ui;color:#d7e7ef;letter-spacing:.25em;text-transform:uppercase;margin-top:4px}
    #subAnnouncement .hero-name{font-weight:950;letter-spacing:.12em;text-shadow:0 1px 4px #000,0 0 12px currentColor}
    #subAnnouncement .team-blue{color:#49d7ff}#subAnnouncement .team-red{color:#ff536b}#subAnnouncement .team-neutral{color:#f1c95f}
    #statusText{position:absolute;z-index:25;left:50%;top:17%;transform:translateX(-50%);font-weight:900;color:#c9f5ff;text-shadow:0 2px 5px #000;letter-spacing:.08em;pointer-events:none}
    #toast{position:absolute;z-index:90;left:50%;bottom:24%;transform:translateX(-50%);padding:7px 12px;background:rgba(2,7,11,.9);border:1px solid #4c697a;border-radius:6px;color:#d5e9f3;font-size:10px;opacity:0;transition:.2s;pointer-events:none;max-width:70%;text-align:center}#toast.show{opacity:1}
    #damageFlash{position:absolute;inset:0;z-index:19;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(255,30,50,0);transition:.12s}#damageFlash.hit{box-shadow:inset 0 0 75px 12px rgba(255,30,50,.28)}
    .observer-panel{display:none;position:absolute;left:14px;top:14px;width:330px;padding:10px 12px;border:1px solid rgba(105,224,255,.5);border-left:3px solid #54dcff;background:linear-gradient(135deg,rgba(4,17,25,.95),rgba(7,30,38,.82));box-shadow:0 6px 24px #0009;pointer-events:auto}.observer-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.observer-panel strong{font:800 15px Georgia,serif;color:#dffaff;letter-spacing:.08em;text-transform:uppercase}.observer-live{padding:3px 6px;border-radius:10px;background:#0e5a48;color:#9effdc;font-size:7px;font-weight:950;letter-spacing:.12em}.observer-help{margin:5px 0 8px;color:#8fb4c1;font-size:8px;line-height:1.4}.observer-controls{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:5px}.observer-controls button,.observer-auto,.observer-exit{padding:7px 5px;border:1px solid #3f6d7c;border-radius:5px;background:#091923;color:#d9f6ff;font-size:8px;font-weight:900;text-transform:uppercase;cursor:pointer}.observer-controls button:hover,.observer-auto:hover{border-color:#76deff}.observer-auto{width:100%;margin-top:6px;letter-spacing:.1em}.observer-auto.active{border-color:#70efbd;background:linear-gradient(180deg,#17654d,#0a3028);color:#c8ffe8;box-shadow:inset 0 0 14px rgba(76,255,187,.13),0 0 10px rgba(45,217,159,.13)}.observer-follow{margin-top:7px;color:#ffe49a;font-size:8px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.observer-exit{width:100%;margin-top:7px;border-color:#8f4751;background:linear-gradient(180deg,#54232c,#281319);color:#ffdbe0;letter-spacing:.1em}.observer-exit:hover{border-color:#ff8292;filter:brightness(1.12)}
    #hud.observer .top-hud,#hud.observer #actions,#hud.observer .bottom-info,#hud.observer #shopBtn,#hud.observer #inventoryBtn{display:none!important}#hud.observer .observer-panel{display:block}#hud.observer #joystick{border-color:rgba(83,222,255,.62);background:radial-gradient(circle,rgba(41,139,164,.25),rgba(3,8,14,.58))}#hud.observer #joystick:before{content:"CAMERA";position:absolute;top:-20px;color:#8cecff;font-size:8px;font-weight:950;letter-spacing:.14em}#hud.observer~#damageFlash{display:none}
    .overlay{position:absolute;inset:5%;z-index:100;background:linear-gradient(160deg,rgba(6,13,20,.98),rgba(2,6,10,.98));border:1px solid var(--line);box-shadow:0 18px 70px #000;overflow:auto;padding:16px;border-radius:10px;pointer-events:auto}
    .overlay-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #263845;padding-bottom:10px;margin-bottom:10px}.overlay h2{margin:0;font:700 24px Georgia,serif;color:#ffe596;text-transform:uppercase}.close{background:#70242e;border:1px solid #ff6d7c;border-radius:4px;padding:6px 12px;font-weight:900;cursor:pointer}
    table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:#84adbd;text-transform:uppercase;letter-spacing:.06em;padding:7px 5px;border-bottom:1px solid #3a4a54}td{padding:7px 5px;border-bottom:1px solid #182631}.player-row{background:rgba(248,198,93,.1);color:#fff3b3}.team-blue td:first-child{color:#5fdcff}.team-red td:first-child{color:#ff6c7d}
    #leaderboard table{min-width:1320px}.leaderboard-item-cell{min-width:190px}.leaderboard-loadout{display:grid;grid-template-columns:repeat(6,26px);gap:4px;align-items:center}.loadout-item{width:26px;height:26px;display:grid;place-items:center;border:1px solid #496271;border-radius:4px;background:linear-gradient(145deg,#152733,#071018);box-shadow:inset 0 0 8px rgba(255,255,255,.05)}.loadout-item .game-icon{width:22px;height:22px;filter:drop-shadow(0 1px 3px #000)}.loadout-item.empty{border-style:dashed;color:#425866;font-size:8px}.loadout-hidden{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #3a4650;border-radius:12px;background:#0b1117;color:#74828c;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.leaderboard-privacy{margin-left:10px;color:#8297a3;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
    .shop-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(225px,.75fr);gap:12px;min-height:0}.shop-catalog{min-width:0}.shop-section-label{margin:8px 0 7px;color:#7996a7;font-size:8px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.shop-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:7px 0 9px}.shop-category{padding:7px 5px;border:1px solid #38505f;border-radius:5px;background:#091721;color:#9ab2c0;font-size:8px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}.shop-category.active{border-color:#f2c258;background:linear-gradient(180deg,#795018,#3e270b);color:#fff0b1;box-shadow:inset 0 0 13px rgba(255,211,104,.16)}.shop-category[data-category="Recommended"]{color:#ffe59a}.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:min(62vh,520px);overflow:auto;padding:2px}.shop-item{padding:9px;text-align:left;position:relative;min-height:105px}.shop-item.recommended{background:linear-gradient(145deg,rgba(77,52,15,.8),rgba(8,17,23,.98));border-color:#8d6b2d}.shop-item.owned{border-color:#68d9ff}.shop-item.selected{border-color:#ffe17b;box-shadow:inset 0 0 23px rgba(248,198,93,.18),0 0 0 1px rgba(248,198,93,.32)}.item-tier{position:absolute;right:5px;top:5px;padding:2px 5px;border-radius:8px;background:#152631;color:#91adbc;font-size:6px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.item-tier.advanced{background:#704713;color:#ffe79a;border:1px solid #d99f3e}.item-tier.build{background:#1d6247;color:#a7ffd3;border:1px solid #43a979}.item-icon{width:42px;height:42px;margin-bottom:4px;filter:drop-shadow(0 2px 5px #000)}.item-name{font:700 13px Georgia,serif;color:#ffecaf}.item-desc{font-size:9px;color:#9aafbd;line-height:1.5;margin:4px 0 8px}.price{color:#ffda6b;font-weight:900}.shop-detail{display:flex;flex-direction:column;min-height:260px;padding:14px;border:1px solid #3a4e5c;border-radius:8px;background:linear-gradient(155deg,#101d27,#050b11)}.shop-detail-icon{width:76px;height:76px;filter:drop-shadow(0 3px 12px #000)}.shop-detail-tier{margin-top:7px;color:#dda94c;font-size:8px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.shop-detail h3{margin:4px 0 7px;font:700 clamp(18px,2vw,27px) Georgia,serif;color:#ffeba8}.shop-detail-desc{color:#9eb4c2;font-size:10px;line-height:1.5}.shop-detail-stats{display:grid;gap:5px;margin:11px 0}.shop-stat{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;background:#08141c;border-left:2px solid #d49b38;color:#91a8b7;font-size:9px}.shop-stat b{color:#dff7ff}.shop-requirement{margin:3px 0 10px;padding:7px 8px;border:1px solid #3a4b58;color:#b7c8d2;font-size:9px;line-height:1.45}.shop-requirement.ready{border-color:#42a972;color:#86efb0}.shop-detail-price{margin-top:auto;font:900 14px Georgia,serif;color:#ffdb70}.buy-btn{margin-top:10px;padding:11px;border:1px solid #ffdd77;border-radius:6px;background:linear-gradient(#b9761d,#70400d);color:#fff1bd;font-weight:950;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.buy-btn:disabled{cursor:not-allowed;filter:grayscale(.75);opacity:.48}.shop-foot{margin-top:12px;color:#86a1b0;font-size:10px}.shop-foot b{color:#fff}
    .inventory-summary{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#09131b;border:1px solid #263945;color:#adc1ce}.shop-recent{display:grid;grid-template-columns:145px minmax(0,1fr);gap:10px;align-items:center;margin:8px 0 10px;padding:8px 10px;border:1px solid #314857;background:linear-gradient(90deg,rgba(18,40,53,.9),rgba(7,17,24,.9))}.shop-recent-head{color:#ffe39a;font-size:9px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.shop-recent-head small{display:block;margin-top:2px;color:#708994;font-size:7px;font-weight:700;letter-spacing:.07em}.shop-recent-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;min-width:0}.shop-recent-item{min-width:0;display:flex;align-items:center;gap:5px;padding:5px 6px;border:1px solid #3c5969;border-radius:5px;background:#0a1720;color:#d9edf5;cursor:pointer;text-align:left}.shop-recent-item:hover{border-color:#ffd46a}.shop-recent-item .item-icon{width:27px;height:27px;margin:0;flex:0 0 auto}.shop-recent-item-copy{min-width:0}.shop-recent-item-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 8px Georgia,serif;color:#ffebaa}.shop-recent-rank{display:block;margin-top:2px;color:#718c9b;font-size:6px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.shop-recent-rank.newest{color:#77ffd0}.shop-recent-empty{grid-column:1/-1;padding:8px;border:1px dashed #344a57;color:#657b87;font-size:8px;text-align:center;text-transform:uppercase}.inventory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.inventory-slot{min-height:116px;padding:10px;border:1px solid #3b4d5a;border-radius:7px;background:linear-gradient(145deg,#101c25,#080f15);display:flex;flex-direction:column}.inventory-slot.empty{display:grid;place-items:center;border-style:dashed;color:#50616d;font-size:9px;text-transform:uppercase}.inventory-item-head{display:flex;align-items:center;gap:8px}.inventory-item-head .item-icon{width:38px;height:38px;margin:0;flex:0 0 auto}.inventory-slot .item-desc{flex:1}.sell-btn{padding:7px 9px;border:1px solid #e0a949;border-radius:5px;background:linear-gradient(#8b5519,#50300f);font-size:9px;font-weight:900;text-transform:uppercase;color:#fff1b3;cursor:pointer}.sell-btn:hover{filter:brightness(1.15)}
    #endScreen{background:radial-gradient(circle,rgba(34,89,91,.62),rgba(2,5,9,.97) 57%);text-align:center}.end-wrap h2{font:700 clamp(46px,8vw,120px) Georgia,serif;margin:0;color:#fff0ad;text-shadow:0 4px #784212,0 0 30px #eeb74c}.end-wrap p{color:#b9cbd7}.end-actions{display:flex;gap:10px;justify-content:center}
    #rotateHint{position:fixed;z-index:200;left:50%;bottom:6px;transform:translateX(-50%);font-size:9px;color:#8ba2af;background:#03070bcc;padding:5px 9px;border-radius:12px;display:none;pointer-events:none}
    @media (pointer:fine){#joystick{opacity:.55}.action-btn{opacity:.88}}
    @media (orientation:portrait){#rotateHint{display:block}.screen.setup{position:fixed;inset:0;width:100vw;height:100vh}.select-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(430px,1fr);height:auto}.select-copy{padding:10px}.hero-grid{grid-template-columns:repeat(auto-fit,minmax(52px,1fr));overflow:visible}.hero-card{aspect-ratio:1}.hero-start{width:100%;align-self:stretch}.preview-panel{display:block;min-height:430px}.hero-showcase{grid-template-columns:42% 58%}.hero-dossier{padding:14px}.preview-skills{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-skill{padding:6px}.preview-skill-meta{display:none}.skill-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#shell.running{width:100vw;height:56.25vw}.hud-actions{display:none}.shop-layout{grid-template-columns:1fr}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:900px) and (orientation:landscape){.select-layout{grid-template-columns:minmax(185px,31%) 1fr}.hero-grid{grid-template-columns:repeat(4,minmax(38px,1fr))}.hero-showcase{grid-template-columns:40% 60%}.select-head p,.preview-skill-meta{display:none}.preview-skills{gap:4px}.selection-hint{display:none}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media (max-height:520px){.subtitle{margin:7px auto 10px}.sun-seal{margin:7px auto}.player-name-box{margin-bottom:7px;padding:6px 8px}.player-name-box input{padding:7px 9px}.observer-entry{margin-top:7px;padding:6px 8px}.observer-entry-label{display:none}.observe-btn{padding:6px 9px}.select-copy{padding:8px}.selection-nav{margin-bottom:4px}.selection-nav .ghost{padding:4px 8px}.select-head{margin:0 0 5px}.roster-label{margin-bottom:4px}.hero-grid{gap:5px}.hero-card{aspect-ratio:.9}.hero-dossier{padding:9px 13px}.info-label{margin:7px 0 3px}.attribute-chip{padding:4px 6px}.attribute-chip b{font-size:13px}.preview-combat{grid-template-columns:repeat(6,1fr)}.combat-stat{padding:4px;font-size:6px}.combat-stat b{font-size:9px}.preview-skill{min-height:50px;padding:4px}.preview-skill-icon{width:23px;height:23px}.preview-skill-meta{display:none}.preview-skill-detail{gap:5px}.skill-detail-summary{min-height:0;padding:7px 9px}.skill-detail-icon{width:34px;height:34px}.skill-detail-description{margin-top:5px;line-height:1.35}.skill-detail-stat{padding:4px 5px}.dossier-actions{padding-top:6px}.shop-layout{grid-template-columns:minmax(0,1.8fr) minmax(205px,.65fr);gap:8px}.shop-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:58vh}.shop-item{min-height:86px;padding:6px}.shop-item .item-desc{display:none}.shop-detail{padding:10px;min-height:220px}.shop-detail-icon{width:48px;height:48px}.shop-detail-stats{margin:6px 0}.shop-stat{padding:4px 6px}.inventory-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.inventory-slot{min-height:96px;padding:7px}.inventory-slot .item-desc{display:none}.overlay{inset:2%}}
    @media (orientation:portrait){.main-menu-shell{grid-template-columns:1fr;gap:16px;padding-top:36px}.main-menu-brand{text-align:center}.main-menu-brand .subtitle{margin:12px auto 0}.main-menu-seal{margin:12px auto}.main-menu-panel{width:min(520px,100%);margin:auto}.setup-card{margin-top:32px}.encyclopedia-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(520px,1fr);height:auto}.encyclopedia-roster{grid-template-columns:repeat(4,minmax(0,1fr));max-height:320px}.encyclopedia-hero-head{grid-template-columns:120px minmax(0,1fr)}.encyclopedia-abilities{grid-template-columns:1fr}}
    @media (max-width:900px) and (orientation:landscape){.main-menu-shell{grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:16px}.main-menu-panel{padding:10px}.menu-command{grid-template-columns:30px 1fr auto;gap:7px}.menu-command-index{width:26px;height:26px}.setup-card{width:min(650px,92%);padding:12px}.setup-card-copy{margin:5px auto 9px}.encyclopedia-shell{grid-template-columns:minmax(210px,30%) 1fr}.encyclopedia-roster{grid-template-columns:repeat(3,minmax(0,1fr))}.encyclopedia-detail{padding:10px}.encyclopedia-hero-head{grid-template-columns:115px minmax(0,1fr)}.encyclopedia-lore{line-height:1.45}.encyclopedia-section{margin-top:10px}.encyclopedia-abilities{gap:6px}}
    @media (max-height:520px){.main-menu-brand h1{font-size:clamp(31px,5.4vw,58px)}.main-menu-brand .subtitle{margin-top:8px;font-size:9px;line-height:1.4}.main-menu-seal{display:none}.main-menu-panel{padding:9px 11px}.main-menu-title{margin-bottom:5px}.main-menu-list{gap:4px}.menu-command{min-height:38px;padding:5px 8px}.menu-command-copy small{display:none}.menu-status{margin-top:5px}.setup-card-nav{margin-bottom:5px}.setup-card h2{font-size:27px}.setup-card-copy{margin:3px auto 7px;font-size:8px}.setup-card .player-name-box{margin-bottom:6px}.setup-card .mode-label{margin:6px}.setup-card .mode-btn{padding:8px 12px}.setup-card .mode-btn strong{font-size:20px}.encyclopedia-sidebar{padding:7px}.encyclopedia-nav{margin-bottom:5px}.encyclopedia-sidebar-copy{margin:4px 0 6px}.encyclopedia-detail{padding:8px 11px}.encyclopedia-hero-head{grid-template-columns:100px minmax(0,1fr);gap:10px;padding-bottom:8px}.encyclopedia-name{font-size:26px}.encyclopedia-lore{margin-top:5px;font-size:8px;line-height:1.4}.encyclopedia-section{margin-top:8px}.encyclopedia-section-title{margin-bottom:4px}.encyclopedia-fact,.encyclopedia-stat-panel,.encyclopedia-ability{padding:6px}.encyclopedia-ability p{margin:5px 0;font-size:7px;line-height:1.35}.encyclopedia-ability-icon{width:32px;height:32px}.encyclopedia-ability-meta span{padding:3px 5px}}
    /* Gameplay UI uses a fixed 1600x900 design canvas, then scales uniformly to the actual 16:9 shell. */
    #gameUi{position:absolute;left:0;top:0;width:var(--game-ui-width,1600px);height:var(--game-ui-height,900px);z-index:20;transform:scale(var(--game-ui-scale,1));transform-origin:top left;pointer-events:none;contain:layout style}
    #battleLoading{position:absolute;inset:0;z-index:75;overflow:hidden;background:radial-gradient(circle at 18% 45%,rgba(16,126,184,.3),transparent 34%),radial-gradient(circle at 82% 45%,rgba(190,32,57,.3),transparent 34%),linear-gradient(115deg,#03101b 0,#071017 46%,#13090d 54%,#16050a 100%);opacity:1;transition:opacity .45s ease;pointer-events:auto}
    #battleLoading.leaving{opacity:0}
    #battleLoading:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,122,190,.18),transparent 35%,rgba(0,0,0,.44) 49.5%,rgba(0,0,0,.44) 50.5%,transparent 65%,rgba(207,36,61,.18)),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px);pointer-events:none}
    #battleLoading:after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 90px rgba(0,0,0,.92);pointer-events:none}
    #battleLoadingScene{position:absolute;inset:15% 0 18%;z-index:0}
    #battleLoadingScene canvas{display:block;width:100%;height:100%}
    .battle-loading-copy{position:absolute;inset:0;z-index:3;display:block}
    .battle-loading-head{position:absolute;left:50%;top:3.5%;width:min(650px,72%);transform:translateX(-50%);text-align:center}
    .battle-loading-kicker{color:#83d8e8;font-size:clamp(7px,.75vw,10px);font-weight:900;letter-spacing:.34em;text-transform:uppercase}
    .battle-loading-head h2{margin:4px 0 0;color:#fff0b2;font:700 clamp(23px,3.4vw,47px) Georgia,serif;line-height:.95;letter-spacing:.045em;text-transform:uppercase;text-shadow:0 3px 16px #000}
    #loadingMode{margin-top:6px;color:#a7bac5;font-size:clamp(7px,.72vw,10px);font-weight:800;letter-spacing:.18em;text-transform:uppercase}
    .loading-team-title{position:absolute;top:18%;width:45%;font:700 clamp(13px,1.55vw,22px) Georgia,serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 3px 12px #000}
    .loading-team-title.blue{left:2.5%;color:#75e6ff;text-align:left}.loading-team-title.red{right:2.5%;color:#ff7c8e;text-align:right}
    .loading-versus{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(45px,5.3vw,74px);height:clamp(45px,5.3vw,74px);border:1px solid rgba(248,198,93,.62);border-radius:50%;background:radial-gradient(circle,#2a2110,#08090b 72%);box-shadow:0 0 30px rgba(248,198,93,.24),inset 0 0 18px rgba(248,198,93,.14);color:#ffe596;font:700 clamp(14px,1.7vw,24px) Georgia,serif}
    .loading-roster{position:absolute;bottom:10.5%;width:45.5%;display:grid;grid-template-columns:repeat(var(--team-size,5),minmax(0,1fr));gap:clamp(3px,.48vw,7px)}
    .loading-roster.blue{left:2%}.loading-roster.red{right:2%}
    .loading-roster[data-size="1"]{grid-template-columns:minmax(145px,235px);justify-content:center}.loading-roster[data-size="3"]{padding-inline:4%}
    .loading-player-card{position:relative;min-width:0;padding:clamp(5px,.62vw,9px);border:1px solid rgba(255,255,255,.15);border-radius:6px;background:linear-gradient(150deg,rgba(9,23,32,.94),rgba(3,8,13,.96));box-shadow:0 8px 22px rgba(0,0,0,.38);text-align:center;overflow:hidden}
    .loading-roster.blue .loading-player-card{border-top:2px solid #31cfff}.loading-roster.red .loading-player-card{border-top:2px solid #ff3f59}
    .loading-player-card.user{box-shadow:0 0 0 1px rgba(255,224,126,.72),0 8px 22px rgba(0,0,0,.4);background:linear-gradient(150deg,rgba(46,38,14,.96),rgba(7,17,23,.96))}
    .loading-player-name{display:block;color:#f6fbff;font:700 clamp(8px,.82vw,12px) Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .loading-hero-name{display:block;margin-top:2px;color:#8ca8b6;font-size:clamp(5px,.52vw,8px);font-weight:900;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
    .loading-you{position:absolute;right:3px;top:2px;color:#ffe280;font-size:clamp(4px,.42vw,6px);font-weight:900;letter-spacing:.09em}
    .battle-loading-foot{position:absolute;left:50%;bottom:3.2%;width:min(720px,68%);transform:translateX(-50%);text-align:center}
    .battle-loading-status{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;color:#c4d5dc;font-size:clamp(6px,.62vw,9px);font-weight:900;letter-spacing:.13em;text-transform:uppercase}
    .battle-loading-track{height:clamp(4px,.5vw,7px);overflow:hidden;border:1px solid rgba(248,198,93,.38);border-radius:99px;background:#020508;box-shadow:0 0 16px rgba(0,0,0,.7)}
    #loadingProgressFill{display:block;width:0;height:100%;background:linear-gradient(90deg,#29c9ff 0,#ffe07a 50%,#ff4058 100%);box-shadow:0 0 12px rgba(255,222,116,.62);transition:width .12s linear}
    @media(max-width:700px){.loading-team-title{top:17%}.loading-roster{bottom:10%;gap:2px}.loading-player-card{padding:4px 2px}.battle-loading-foot{width:74%}}
    #gameUi #hud{width:100%;height:100%;font-size:11px}#gameUi .screen{pointer-events:auto}
    #gameUi .top-hud{left:8px;top:8px;gap:8px}
    #gameUi .hero-hud{width:330px;padding:7px 9px}
    #gameUi #hudHero{font-size:13px}#gameUi #hudPlayerName{font-size:8px;max-width:175px}
    #gameUi .bar{height:9px;margin-top:3px}#gameUi .bar span{font-size:7px;line-height:8px}
    #gameUi .attributes{gap:10px;margin-top:5px;font-size:9px}
    #gameUi .match-hud{top:7px;min-width:235px;padding:6px 12px}
    #gameUi .score{font-size:14px}#gameUi .vs{font-size:8px;padding:0 7px}#gameUi .match-time{margin-left:7px;padding-left:7px;font-size:10px}#gameUi .core-line{font-size:8px}#gameUi .core-mini{width:54px;height:4px}
    #gameUi #minimapWrap{right:8px;top:8px;width:190px}
    #gameUi .hud-actions{display:flex;right:8px;top:212px;gap:5px;max-width:220px}
    #gameUi .hud-actions button{padding:6px 8px;font-size:8px}
    #gameUi .observer-panel{left:14px;top:14px;width:330px;padding:10px 12px}#gameUi .observer-panel strong{font-size:15px}#gameUi .observer-help,#gameUi .observer-follow,#gameUi .observer-controls button,#gameUi .observer-auto,#gameUi .observer-exit{font-size:8px}
    #gameUi .bottom-info{bottom:7px;gap:8px}#gameUi .pill{padding:5px 8px}
    #gameUi #joystick{left:52px;bottom:58px;width:142px;height:142px}
    #gameUi #actions{right:48px;bottom:44px;width:370px;height:250px}
    #gameUi .action-btn .cool{font-size:18px}#gameUi .action-btn .label{font-size:8px;max-width:72px}#gameUi .action-btn .level{font-size:7px}#gameUi .skill-icon{width:35px;height:35px}
    #gameUi #attackBtn{width:108px;height:108px}
    #gameUi #skill1Btn{right:126px;bottom:30px;width:82px;height:82px}
    #gameUi #skill2Btn{right:136px;bottom:122px;width:82px;height:82px}
    #gameUi #ultimateBtn{right:0;bottom:146px;width:96px;height:96px}
    #gameUi #recallBtn{left:0;bottom:0;width:66px;height:66px}#gameUi #regenBtn{left:0;bottom:76px;width:66px;height:66px}#gameUi #itemSpellBtn{left:76px;bottom:0;width:66px;height:66px}
    #gameUi .plus{right:-3px;top:-7px;width:22px;height:22px;font-size:16px}
    #gameUi #announcement{font-size:58px}#gameUi #subAnnouncement{font-size:10px}#gameUi #toast{font-size:10px;padding:7px 12px}
    #gameUi .overlay{inset:5%;padding:16px}#gameUi .overlay h2{font-size:24px}
    #gameUi .shop-layout{grid-template-columns:minmax(0,1.75fr) minmax(225px,.75fr);gap:12px}
    #gameUi .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:520px}
    #gameUi .shop-item{min-height:105px;padding:9px}#gameUi .shop-item .item-desc{display:block}
    #gameUi .shop-detail{min-height:260px;padding:14px}#gameUi .shop-detail-icon{width:76px;height:76px}#gameUi .shop-detail h3{font-size:27px}
    #gameUi .inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#gameUi .inventory-slot{min-height:116px;padding:10px}#gameUi .inventory-slot .item-desc{display:block}
    #gameUi #endScreen .end-wrap h2{font-size:120px}
    @media (pointer:coarse){
      #gameUi #joystick{left:46px;bottom:50px;width:156px;height:156px}
      #gameUi #skill1Btn{right:126px;bottom:24px;width:90px;height:90px}
      #gameUi #skill2Btn{right:136px;bottom:122px;width:90px;height:90px}
      #gameUi #ultimateBtn{right:0;bottom:146px;width:104px;height:104px}
      #gameUi .skill-icon{width:38px;height:38px}
    }