:root{
  --bg:#0d1220; --bg2:#141c30; --panel:#1b2336; --panel2:#222d45;
  --gold:#f5c451; --gold2:#b8862f; --parch:#e8d9b5;
  --ink:#e9eefc; --muted:#8da0c4; --line:#33406a;
  --blue:#3da9fc; --purple:#a55eea; --rare-gold:#f5a623; --red:#ff4d4d;
  --green:#37d67a; --hp:#37d67a; --fury:#ffb13b;
  --shadow:0 8px 28px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Rajdhani',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  overflow:hidden;user-select:none;
  background-image:radial-gradient(1200px 600px at 50% -10%,#1c2746 0,var(--bg) 60%);
}
h1,h2,h3,.cinzel{font-family:'Cinzel',serif}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#2c3a5e;border-radius:4px}

/* ---------- buttons ---------- */
.btn-gold,.btn-dark,.btn-blue,.btn-red{
  border-radius:8px;padding:9px 16px;font-weight:700;font-size:17px;letter-spacing:.5px;
  border:1px solid rgba(0,0,0,.4);transition:transform .08s,filter .15s;white-space:nowrap;
}
.btn-gold{background:linear-gradient(#fcd97a,var(--gold2));color:#3a2606;
  border-top-color:#ffe9a8;box-shadow:0 3px 0 #7a5410,0 5px 12px rgba(0,0,0,.4)}
.btn-gold:active{transform:translateY(2px);box-shadow:0 1px 0 #7a5410}
.btn-blue{background:linear-gradient(#5cc0ff,#2b7fc4);color:#05223a;box-shadow:0 3px 0 #1b557f}
.btn-blue:active{transform:translateY(2px);box-shadow:0 1px 0 #1b557f}
.btn-red{background:linear-gradient(#ff7a7a,#c43030);color:#fff;box-shadow:0 3px 0 #7f1b1b}
.btn-dark{background:linear-gradient(var(--panel2),#161d2e);color:var(--ink);border:1px solid var(--line)}
.btn-dark:active{transform:translateY(1px)}
.btn-gold.big{font-size:20px;padding:14px 26px}
button:disabled{filter:grayscale(.7) brightness(.6);cursor:not-allowed;box-shadow:none}
.btn-gold.glow{animation:pulseGlow 1.3s infinite}
@keyframes pulseGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25) drop-shadow(0 0 8px var(--gold))}}

/* ---------- login ---------- */
#login-screen{position:fixed;inset:0;display:flex;background:#0a0e1a;overflow:hidden}
/* hero art panel: painterly warm-dusk gradient shows as fallback if the splash is missing */
.login-hero{position:relative;flex:1 1 60%;min-width:0;overflow:hidden}
.login-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 85% at 28% 16%,rgba(255,217,122,.55) 0,transparent 46%),
    radial-gradient(95% 75% at 22% 30%,rgba(255,179,71,.42) 0,transparent 52%),
    linear-gradient(160deg,#4a2f1a 0,#2a1a0e 48%,#1a1009 100%)}
.login-hero-art{position:absolute;inset:0;z-index:1;
  background-image:url(/assets/login/village-splash.jpg);
  background-size:cover;background-position:center 40%}
.login-hero-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 52%,rgba(10,14,26,.85) 100%),
    radial-gradient(130% 100% at 45% 50%,transparent 56%,rgba(10,14,26,.65) 100%)}
.login-panel{position:relative;z-index:3;flex:0 0 clamp(360px,38%,500px);
  display:flex;align-items:center;justify-content:center;padding:32px;
  background:linear-gradient(#141c30,#0c1018);
  border-left:1px solid var(--gold2);box-shadow:-14px 0 44px rgba(0,0,0,.55)}
.login-card{width:min(92vw,380px);text-align:center}
.login-logo{width:84px;height:84px;margin:0 auto 8px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 36%,#ffe9a8 0,#f5c451 42%,#b8862f 76%,#7a5410 100%);
  border:3px solid #ffe9a8;
  box-shadow:0 6px 20px rgba(245,196,81,.5),inset 0 -5px 12px rgba(122,84,16,.6)}
.login-logo::after{content:"\273A";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:53px;color:#3a2606;text-shadow:0 1px 0 rgba(255,233,168,.7)}
.login-card h1{font-size:46px;line-height:1;margin:8px 0 2px;color:var(--gold);letter-spacing:3px;
  text-shadow:0 2px 10px rgba(245,196,81,.35)}
.login-card h1 span{display:block;color:var(--ink);font-size:41px}
.tagline{color:var(--muted);margin-bottom:22px;letter-spacing:1px}
.auth-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;
  background:#0a1020;border:1px solid var(--line);border-radius:12px;padding:5px}
.auth-tabs button{background:transparent;color:var(--muted);border-radius:8px;padding:8px 4px;font-weight:800}
.auth-tabs button.active{background:linear-gradient(#fcd97a,var(--gold2));color:#3a2606}
.auth-form{display:none;gap:10px}
.auth-form.active{display:grid}
.auth-form input{width:100%;padding:13px 14px;border-radius:10px;background:#0c1322;
  border:1px solid var(--line);color:var(--ink);font-size:19px;text-align:center;outline:none}
.auth-form input:focus{border-color:var(--gold)}
.auth-link{background:none;border:0;box-shadow:none;color:var(--muted);font-size:14px;cursor:pointer;
  text-decoration:underline;padding:2px;justify-self:center}
.auth-link:hover{color:var(--gold)}
#logout-btn{margin:8px 10px 0 auto;align-self:flex-start;background:none;border:none;
  box-shadow:none;color:#dfe7f8;font-size:24px;line-height:1;padding:6px 8px;border-radius:8px;cursor:pointer;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.9))}
#logout-btn:hover{color:#ffcaca}
.login-hint{color:var(--muted);font-size:14px;margin-top:14px;min-height:18px}
.login-hint.bad{color:#ffcaca}
.login-hint.good{color:#9be88a}

/* ---------- layout: FULL-BLEED widescreen game client (fills the viewport) ---------- */
/* 3-row grid: HUD / content / nav — but the village (#screen) spans ALL rows, so the scene art
   runs edge-to-edge under the whole HUD. The bar + nav are transparent overlays floating on the
   art; system windows still overlay the CONTENT row only. */
#game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh;width:100%;
  background:linear-gradient(#0e1424,#0a0f1c);position:relative}
#resource-bar{grid-row:1;grid-column:1}
#window-root{grid-row:2;grid-column:1}
#bottom-nav{grid-row:3;grid-column:1}
/* #screen holds ONLY the persistent village (systems open in #window-root); edge-to-edge village */
#screen{grid-row:1/-1;grid-column:1;min-height:0;overflow:hidden;padding:0;display:flex;z-index:1}
.desk-only{display:none!important}

/* ---------- HUD (owner 2026-07-12, UN-reference layout): every element floats on the
   full-bleed scene with its OWN ornate chrome — carved currency strip top-left edge,
   gold-framed portrait, name plaque, vitality bar, BP plaque. No full-width bands. ---------- */
#resource-bar{display:flex;align-items:flex-start;gap:8px;padding:0;
  background:none;border:none;box-shadow:none;position:relative;z-index:5}
.hud-left{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* slim carved currency strip pinned to the very top-left edge (ref: 192K · 30 · 476 strip) */
.cur-strip{display:flex;align-items:center;gap:0;padding:3px 12px 3px 8px;
  background:linear-gradient(#141c30ee,#0a0f1cee);border:1px solid var(--gold2);border-top:none;border-left:none;
  border-radius:0 0 12px 0;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.cs-item{display:flex;align-items:center;gap:5px;padding:2px 12px;font-size:17px;font-weight:700;
  border-right:1px solid rgba(245,196,81,.25)}
.cs-item:last-child{border-right:none}
.cs-item .ic{font-size:19px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.cs-item .val{color:var(--gold);text-shadow:0 1px 2px #000}
.cs-silver .val{color:#cfd8ee}
.cs-coupons .val{color:#7fe0b0}
.player-logo{display:flex;align-items:flex-start;gap:10px;padding:0 0 0 10px;
  background:none;border:none;border-radius:0;cursor:pointer}
/* ornate gold portrait frame (ref: carved ring around the hero icon) */
.avatar-frame{flex:none;border-radius:50%;padding:4px;
  background:conic-gradient(from 30deg,#8a5a18,#f5d67a,#b8862f,#6e4610,#f2c14e,#8a5a18);
  box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,240,200,.5)}
/* level/XP ring: conic fill nested inside the gold frame (replaces the old bottom EXP strip) */
.avatar-ring{border-radius:50%;padding:5px;
  background:conic-gradient(var(--gold) var(--xp,0%),rgba(8,12,24,.85) 0)}
.avatar-ring.maxed{background:conic-gradient(#ffd97a,var(--gold),#ffd97a);
  box-shadow:0 0 16px rgba(245,196,81,.45)}
.player-logo .avatar{width:118px;height:118px;border-radius:50%;background:radial-gradient(#3a4f86,#1a2540);
  display:grid;place-items:center;font-size:42px;border:2px solid #0a0f1c;overflow:hidden}

/* --- asset icons (resolver, assets.js): chibi art layered over an emoji fallback --- */
.a-ico{position:relative;display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;line-height:1}
.a-ico.a-fill{display:block;width:100%;height:100%;vertical-align:0;border-radius:inherit;overflow:hidden}
.a-ico .a-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.a-ico.a-fill .a-img{object-fit:cover}
.a-ico .a-fb{position:absolute;inset:0;display:none;align-items:center;justify-content:center;line-height:1}
.player-logo .pl-meta{display:flex;flex-direction:column;gap:5px;margin-top:6px}
/* name plaque (ref: slim dark banner beside the portrait — Lv · name) */
.pl-plaque{display:flex;align-items:center;gap:9px;padding:4px 14px;
  background:linear-gradient(#243156ee,#141b2eee);border:1px solid var(--gold2);border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pl-plaque .pl-lv{font-size:17px;font-weight:800;color:var(--gold)}
.pl-plaque .pl-name{font-weight:700;font-size:19px;color:#fff;text-shadow:0 1px 2px #000}
/* vitality bar (ref: the pink Энергия bar under the name, with a "+") */
.vit-bar{position:relative;display:flex;align-items:center;width:min(220px,42vw);height:20px;
  background:#0c1322dd;border:1px solid var(--gold2);border-radius:12px;overflow:hidden}
.vit-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#b0331f,#e0564e 60%,#ff8f8f);
  transition:width .4s}
.vit-txt{position:relative;z-index:1;display:flex;align-items:center;gap:4px;margin:0 auto;
  font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
.vit-bar .res-plus{position:relative;z-index:1;flex:none;margin-right:2px}
/* BP plaque (ref: the Мощь power plate — big gold number + upgrade) */
.bp-plate{display:flex;align-items:center;gap:7px;padding:3px 14px;align-self:flex-start;
  background:linear-gradient(#1a2440ee,#0f1526ee);border:1px solid var(--gold2);border-radius:12px;
  font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.bp-plate .val{color:var(--gold);font-size:22px;font-weight:800;text-shadow:0 1px 2px #000}
.bp-plate .bp-up{font-size:12px;font-weight:800;color:#3a2606;background:linear-gradient(#fcd97a,var(--gold2));
  border-radius:9px;padding:2px 8px;margin-left:2px}
.bp-badge{font-size:14px;color:var(--muted)}

/* ---------- bottom menu (UN-reference): a right-aligned cluster of gold-bezel icon
   buttons riding its own ornament shelf — the scene stays visible around it ---------- */
#bottom-nav{display:flex;justify-content:flex-end;position:relative;background:none;
  border-top:none;padding:6px 14px 8px;z-index:5;box-shadow:none}
.nav-cluster{display:flex;align-items:flex-end;gap:6px;max-width:100%;overflow-x:auto;
  padding:8px 14px 6px;border-radius:16px;
  background:linear-gradient(180deg,rgba(122,84,16,.28),rgba(38,25,6,.5));
  border:1px solid rgba(245,196,81,.5);box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,233,168,.25)}
.nav-btn{flex:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:0 3px;border-radius:10px;position:relative;color:#f0e6c8;font-size:13px;font-weight:700;
  text-shadow:0 2px 4px rgba(0,0,0,.9);transition:transform .1s}
/* gold-bezel icon medallion (ref: round carved frames on Команда/Сумка/Почта) */
.nav-btn .ic-frame{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 32%,#33466f,#141c30 78%);
  border:2px solid #b8862f;box-shadow:0 0 0 1.5px #6e4610,inset 0 1px 0 rgba(255,255,255,.18),0 3px 7px rgba(0,0,0,.55)}
.nav-btn .ic{font-size:32px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.nav-btn:hover{color:var(--parch);transform:translateY(-2px)}
.nav-btn:hover .ic-frame{border-color:var(--gold);box-shadow:0 0 0 1.5px #6e4610,0 0 10px rgba(245,196,81,.5)}
.nav-btn.active{color:var(--gold);background:none;outline:none}
.nav-btn.active .ic-frame{border-color:var(--gold);
  background:radial-gradient(circle at 50% 32%,rgba(245,196,81,.35),#141c30 80%);
  box-shadow:0 0 0 1.5px #6e4610,0 0 12px rgba(245,196,81,.65)}
.nav-btn .red-dot{top:0;right:6px}

/* ---------- red dot ---------- */
.red-dot{position:absolute;top:2px;right:14%;width:9px;height:9px;background:var(--red);
  border-radius:50%;border:1.5px solid #1a1f30;box-shadow:0 0 6px var(--red);animation:rd 1.4s infinite}
@keyframes rd{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* ---------- panels / sections ---------- */
.panel{background:linear-gradient(var(--panel),#151c2e);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.panel-title{font-family:'Cinzel',serif;font-size:22px;color:var(--gold);
  display:flex;align-items:center;gap:8px;margin-bottom:4px}
.panel-sub{color:var(--muted);font-size:16px;margin-bottom:12px}
.section-head{display:flex;align-items:center;gap:10px;margin:4px 2px 12px}
.section-head h2{font-size:26px;color:var(--gold)}
.section-head .sub{color:var(--muted);font-size:16px}
.grid{display:grid;gap:10px}
.divider{height:1px;background:var(--line);margin:12px 0}
.tag{font-size:13px;padding:2px 8px;border-radius:10px;background:#0c1322;border:1px solid var(--line);font-weight:700}
.row{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
.center{text-align:center}
.muted{color:var(--muted)}

/* role colors */
.role-vanguard{color:#6fd1ff} .role-assaulter{color:#ff8f6f} .role-support{color:#9be88a}
.bg-vanguard{background:rgba(111,209,255,.14)} .bg-assaulter{background:rgba(255,143,111,.14)} .bg-support{background:rgba(155,232,138,.14)}

/* ---------- ninja card ---------- */
.ninja-card{position:relative;border-radius:12px;padding:6px;background:linear-gradient(#212c46,#161e30);
  border:2px solid var(--line);cursor:pointer;transition:transform .1s;overflow:hidden}
.ninja-card:active{transform:scale(.97)}
.ninja-card.r-blue{border-color:var(--blue)} .ninja-card.r-purple{border-color:var(--purple)}
.ninja-card.r-yellow{border-color:#f5e050} .ninja-card.r-orange{border-color:#ff9a3c;box-shadow:0 0 10px rgba(255,154,60,.35)}
.ninja-card.r-gold{border-color:var(--rare-gold);box-shadow:0 0 10px rgba(245,166,35,.35)}
.ninja-card.r-red{border-color:var(--red);box-shadow:0 0 12px rgba(255,77,77,.4)}
.ninja-card.selected{outline:3px solid var(--gold);outline-offset:1px}
.ninja-card.is-main{border-color:var(--gold)!important;box-shadow:0 0 14px rgba(245,196,81,.5)}
.ninja-card.is-main .nc-portrait{background:radial-gradient(circle at 50% 35%,#5a4a86,#1c1430)}
.nc-portrait{position:relative;aspect-ratio:3/4;border-radius:9px;display:grid;place-items:center;font-size:55px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#33437a,#141b2e)}
/* rarity frame overlay (G2): ornate border over the portrait, transparent center */
.nc-frame{position:absolute;inset:0;z-index:2;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.nc-name{font-size:15px;font-weight:700;text-align:center;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px;font-size:13px}
.nc-lvl{color:var(--gold);font-weight:700}
.nc-role{position:absolute;top:5px;left:5px;font-size:11px;padding:1px 5px;border-radius:8px;font-weight:700}
.nc-bp{position:absolute;top:5px;right:5px;font-size:11px;background:#0009;padding:1px 5px;border-radius:8px;color:var(--gold)}
.roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:520px){.roster-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- team formation (7-tile 1/3/3 spearhead) ---------- */
.team-page{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.team-bphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:linear-gradient(#1a2440,#141b2e);border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.tstat{display:flex;flex-direction:column;gap:1px;padding:0 12px 0 4px;border-right:1px solid var(--line)}
.tstat-l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tstat-v{font-weight:900;font-size:26px;line-height:1}
.tstat-max{font-size:16px;color:var(--muted);font-weight:700}
.formation-stage{position:relative;overflow:hidden;border:1px solid #6e5527;border-radius:8px;
  background:radial-gradient(130% 115% at 50% 0%,#4c6642 0%,#2c4a30 44%,#132019 100%);
  padding:8px 8px 4px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.58),inset 0 2px 0 rgba(255,233,168,.12);
  flex:1;min-height:0;display:flex}
.formation-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(transparent,rgba(8,18,13,.32) 72%,rgba(5,12,9,.6))}
/* 7-tile SPEARHEAD board (owner spec): two diagonal lanes + one forward Vanguard tile,
   advancing toward screen-right. Board pinned low; figure headroom lives above. */
.board-iso{position:relative;z-index:1;width:min(98%,1120px);max-height:100%;margin:auto;aspect-ratio:2.18/1}
/* scoped so it beats chrome.css's shared `.slot` socket bg/shadow (which loads later) */
.formation-stage .slot{position:absolute;width:25%;height:34%;transform:translateX(-50%);cursor:pointer;
  background:none;border:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.formation-stage .slot.draggable{cursor:grab} .formation-stage .slot.locked{opacity:.45;cursor:not-allowed}
/* an empty tile's tall transparent box must NOT steal clicks from figures behind it:
   only its visible diamond/seal is interactive; the rest passes through */
.formation-stage .slot.dropzone{pointer-events:none}
.dropzone .tile,.dropzone .sigil{pointer-events:auto}
/* floor plate (owner sketch geometry + reference styling): identical 45°-right-sheared
   PARALLELOGRAM — horizontal top/bottom edges, sides leaning right at exactly 45°
   (horizontal shift = plate height), no taper. Plate is SMALLER than the lane pitch so
   every neighbor gets a clear gap (ref spacing — tiles never share edges).
   Style (ref mats): near-black raised frame → deep saturated role panel with a woven
   cross-hatch texture → large light-tone rune. Corner flames are siblings (.tf). */
.tile{position:absolute;left:50%;bottom:2%;width:118%;aspect-ratio:3.36/1;z-index:0;
  transform:translateX(-50%);
  clip-path:polygon(30% 0%,100% 0%,70% 100%,0% 100%);
  background:color-mix(in srgb,var(--sc) 52%,#0a0f1a);
  filter:drop-shadow(0 6px 2px rgba(0,0,0,.62))}
.tile::before{content:"";position:absolute;inset:9% 5.5%;z-index:1;
  clip-path:polygon(30% 0%,100% 0%,70% 100%,0% 100%);
  background:linear-gradient(155deg,color-mix(in srgb,var(--sc) 16%,#111a2c),#080d18 74%)}
.tile::after{content:"";position:absolute;inset:9% 5.5%;z-index:2;
  clip-path:polygon(30% 0%,100% 0%,70% 100%,0% 100%);
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.09) 0 2px,transparent 2px 10px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 10px);
  box-shadow:inset 0 0 22px rgba(0,0,0,.5)}
/* occupied plates: full-brightness rim + neon glow (the #2 look); empties stay dim */
.filled .tile{background:var(--sc);
  filter:drop-shadow(0 6px 2px rgba(0,0,0,.62)) drop-shadow(0 0 12px var(--sc))}
.filled .tile::before{background:linear-gradient(155deg,color-mix(in srgb,var(--sc) 26%,#111a2c),#0a101d 74%)}
/* ghosted role ring on the dark panel — skewed to REPEAT the plate's own 45° parallelogram
   (same lean, same horizontal edges), lighting up when relevant */
.tile .sigil{position:absolute;left:50%;top:50%;z-index:3;width:30%;height:48%;
  transform:translate(-50%,-50%) skewX(-45deg);
  border:2px solid var(--sc);border-radius:8px;opacity:.45;background:transparent;
  box-shadow:0 0 10px color-mix(in srgb,var(--sc) 55%,transparent),
  inset 0 0 8px color-mix(in srgb,var(--sc) 40%,transparent)}
.tile .sigil::after{content:"";position:absolute;inset:20% 24%;border:2px solid var(--sc);opacity:.7;border-radius:6px}
.filled .tile .sigil{opacity:.7}
/* deploy-order coin: gold badge on the plate's NEAR-LEFT corner */
.tile-num{position:absolute;left:-4%;bottom:2%;z-index:6;width:25px;height:25px;
  border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:900;color:#3a2606;
  background:radial-gradient(circle at 38% 30%,#ffe9a8,var(--gold) 55%,#8a5a18);
  border:1.5px solid #6e4610;box-shadow:0 2px 5px rgba(0,0,0,.6)}
/* unit: feet planted at the plate's center; name floats ABOVE the head (ref).
   Ref proportion: figure ≈ 0.65 plate-width wide so neighbors never pile up. */
.unit{position:absolute;left:0;right:0;bottom:13%;height:153%;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none}
/* the figure itself stays grabbable (events bubble to the slot); empty label gaps pass through */
.unit-fig{pointer-events:auto}
.unit::before{content:"";position:absolute;bottom:-1%;left:50%;transform:translateX(-50%);width:40%;height:3.5%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:0}
.unit-fig{position:relative;width:50%;flex:1 1 auto;min-height:0}
.unit-fig .a-ico{width:100%;height:100%}
.unit-fig .a-ico.a-fill .a-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.unit .nc-frame{display:none}
.unit-lbl{position:relative;z-index:3;max-width:140%;font-size:13.5px;font-weight:800;color:#9ecbff;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8);margin-bottom:1%}
.unit-lbl.lbl-main{color:var(--gold)}
.slot.drop-hot{outline:3px solid var(--gold);outline-offset:-2px;border-radius:10px;background:rgba(245,196,81,.12)}
.slot.can-place .tile{border-style:dashed;border-color:#ffe9a8;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.4),0 0 22px var(--gold)}
.slot.can-place .sigil{opacity:1}
.picked{filter:drop-shadow(0 0 9px var(--gold))}
.ninja-card.picked{outline:3px solid var(--gold);outline-offset:2px;border-radius:10px}
/* ✕ remove-from-board badge: visible on hover (desktop) or when the unit is picked (touch) */
.unit-x{position:absolute;top:8%;right:16%;z-index:5;width:21px;height:21px;padding:0;line-height:1;
  border-radius:50%;border:2px solid #161e30;background:var(--red);color:#fff;font-size:13px;font-weight:900;
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s}
.formation-stage .slot:hover .unit-x,.formation-stage .slot.picked .unit-x{opacity:1}
/* bench: horizontal reserve strip with role tabs */
.bench{border:1px solid var(--line);border-radius:12px;background:#0e1626;padding:8px}
.bench-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bench-tabs{display:flex;gap:5px;flex-wrap:wrap}
.bench-tab{font-size:13px;font-weight:700;padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:#131d30;color:var(--muted);cursor:pointer}
.bench-tab.active{border-color:var(--gold);color:var(--gold)}
.bench-row{display:flex;align-items:center;gap:6px}
.bench-arrow{flex:none;width:30px;align-self:stretch;border-radius:10px;
  background:linear-gradient(#243156,#141b2e);border:1px solid var(--gold2);color:var(--gold);
  font-size:24px;font-weight:900;cursor:pointer;line-height:1}
.bench-arrow:hover{border-color:var(--gold);color:#ffe9a8}
.roster-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;min-height:40px;flex:1}
/* ref bench card: square mugshot in a rarity frame + two-line colored status (no emoji glyphs) */
.roster-strip .bench-card{flex:0 0 88px;width:88px;padding:5px}
.bench-card .bc-img{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#33437a,#141b2e)}
.bench-card .bc-status{display:flex;flex-direction:column;align-items:center;line-height:1.3;margin-top:3px}
.bc-ib{font-size:11.5px;font-weight:900;color:#ff6b57;letter-spacing:.3px;text-shadow:0 1px 2px #000}
.bc-lvl{font-size:11.5px;font-weight:800;color:var(--gold)}
.bc-role{font-size:12.5px;font-weight:800;text-shadow:0 1px 2px #000}
.ninja-card.in-battle{cursor:default;opacity:.95}
.ninja-card.in-battle:active{transform:none}
.roster-strip.drop-hot,#reserve.drop-hot{outline:2px dashed var(--gold);outline-offset:2px;border-radius:10px}
/* stage footer (ref): big emblem legend bottom-left · status/hint block bottom-right */
.stage-foot{position:absolute;left:14px;right:14px;bottom:10px;z-index:2;display:flex;
  align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
.role-legend{display:flex;gap:20px}
.rl-item{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:900;color:#f2f6ff;
  letter-spacing:.3px;text-shadow:0 2px 3px #000,0 0 10px rgba(0,0,0,.7)}
/* legend swatches share the plate silhouette (45° right-sheared parallelogram) */
.rl-d{width:38px;height:15px;flex:none;
  clip-path:polygon(30% 0%,100% 0%,70% 100%,0% 100%);
  background:linear-gradient(150deg,var(--sc),color-mix(in srgb,var(--sc) 35%,#0a1120) 80%);
  filter:drop-shadow(0 0 6px var(--sc))}
/* Battle Point plaque inside the stage (ref: outlined gold text, top-left of the painting) */
.stage-bp{position:absolute;top:10px;left:16px;z-index:2;pointer-events:none}
.sbp-l{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold);text-shadow:0 1px 3px #000}
.sbp-v{font-size:31px;font-weight:900;color:#ffd97a;line-height:1.05;
  text-shadow:0 2px 4px #000,0 0 14px rgba(0,0,0,.6)}
.stage-status{text-align:right;display:flex;flex-direction:column;gap:1px}
.ss-total{font-size:15px;font-weight:800;color:var(--parch);text-shadow:0 1px 3px #000}
.ss-total b{color:#fff;font-size:17px}
.ss-max{font-size:12.5px;font-weight:800;color:#9be88a;text-shadow:0 1px 3px #000}
.ss-next{font-size:12.5px;color:var(--muted);text-shadow:0 1px 3px #000}
.ss-hint{font-size:12.5px;font-weight:700;color:var(--gold);text-shadow:0 1px 3px #000}
.ninja-card{touch-action:none}

/* ---------- stat table ---------- */
.stat-table{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:16px}
.stat-row{display:flex;justify-content:space-between;border-bottom:1px dotted #2c3a5e;padding:2px 0}
.stat-row .k{color:var(--muted)} .stat-row .v{font-weight:700}

/* ---------- gear slots ---------- */
.gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gear-slot{background:#0c1322;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;cursor:pointer;min-height:74px}
.gear-slot .gs-ic{font-size:29px}
.gear-slot .gs-name{font-size:13px;font-weight:700;margin-top:2px}
.gear-slot .gs-empty{font-size:13px;color:var(--muted);margin-top:8px}
.gear-slot.r-blue{border-color:var(--blue)} .gear-slot.r-purple{border-color:var(--purple)}
.gear-slot.r-yellow{border-color:#f5e050} .gear-slot.r-orange{border-color:#ff9a3c}
.gear-slot.r-gold{border-color:var(--rare-gold)} .gear-slot.r-red{border-color:var(--red)}
/* 16-slot hero paperdoll: left 7 / right 7 columns + bottom 2 (weapon · S.Weapon) */
.paperdoll{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.paperdoll .pd-col{display:flex;flex-direction:column;gap:6px}
.paperdoll-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.gs-fort{font-size:12px;color:var(--gold);font-weight:700}
/* hero detail window header (matches the ninja/hero screen reference) */
.hero-head{display:flex;gap:14px;margin-bottom:10px}
.hero-portrait{position:relative;width:150px;height:200px;flex:none;border-radius:12px;overflow:hidden;border:2px solid var(--gold2);display:grid;place-items:center;font-size:65px;background:#0c1322}
.hero-rating{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:900;letter-spacing:1px;background:#0c1322;border:1px solid;border-radius:6px;padding:0 6px}
.hero-desc{font-size:14px;color:var(--parch);font-style:italic;margin-top:6px;line-height:1.4}
/* Ninja Club recruit grid — portrait cards (role · name · rarity-colored soul cost) */
.club-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.club-card{position:relative;background:linear-gradient(#16203a,#0e1424);border:2px solid var(--line);border-radius:12px;padding:8px 6px 7px;text-align:center;cursor:pointer;transition:transform .12s}
.club-card:not([data-club]){cursor:default}
.club-card[data-club]:hover{transform:translateY(-2px)}
.club-card.owned{opacity:.55}
.club-card.cant{opacity:.7}
.club-card.r-blue{border-color:var(--blue)} .club-card.r-purple{border-color:var(--purple)} .club-card.r-yellow{border-color:#f5e050} .club-card.r-orange{border-color:#ff9a3c} .club-card.r-red{border-color:var(--red)}
.club-card .cc-role{font-size:13px;font-weight:800;text-transform:capitalize;line-height:1.2}
.club-card .cc-portrait{font-size:50px;line-height:1.15}
.club-card .cc-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.club-card .cc-cost{font-size:16px;font-weight:800;margin-top:3px}

/* ---------- beasts: development-path + current→next attribute table ---------- */
.beast-dev .bd-main{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch}
.beast-dev .bd-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border-radius:12px;background:radial-gradient(120% 90% at 50% 22%,rgba(124,92,255,.16),rgba(8,12,22,.5));border:1px solid var(--line)}
.beast-dev .bd-portrait{font-size:86px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.beast-dev .bd-name{font-size:18px;font-weight:800;text-align:center}
.beast-dev .bd-name .gs-fort{font-size:14px;color:var(--gold);margin-left:4px}
.beast-dev .bd-side{display:flex;flex-direction:column;justify-content:center;gap:8px}
.beast-dev .attr-cap{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800}
.beast-dev .bd-note{font-size:13px;line-height:1.4}
.beast-dev .bd-exp{margin-top:12px}
.beast-dev .bd-foot{margin-top:10px}
.pet-dev .bd-foot{justify-content:flex-end}
/* development path: stage nodes connected in a chain */
.dev-path{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;margin-top:2px}
.dev-path .dp-link{width:12px;height:2px;background:var(--line);border-radius:2px;flex:0 0 auto}
.dp-node{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);background:#0e1424;transition:transform .12s}
.dp-node .dp-ic{font-size:19px;line-height:1}
.dp-node.done{border-color:#5b8cff;background:radial-gradient(circle,rgba(91,140,255,.32),#0e1424)}
.dp-node.cur{border-color:var(--gold);background:radial-gradient(circle,rgba(245,166,35,.4),#0e1424);box-shadow:0 0 10px rgba(245,166,35,.55);transform:scale(1.18)}
.dp-node.lock{opacity:.4}
/* current → next attribute table */
.attr-tbl{width:100%;border-collapse:collapse;font-size:16px}
.attr-tbl td{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.attr-tbl tr:last-child td{border-bottom:none}
.attr-tbl .at-l{color:var(--muted);font-weight:600}
.attr-tbl .at-c{text-align:right;font-weight:700}
.attr-tbl .at-x{color:var(--muted);text-align:center;width:18px}
.attr-tbl .at-n{text-align:right;font-weight:800;color:#7dffa8}
@media(max-width:560px){.beast-dev .bd-main{grid-template-columns:1fr}}

/* ---------- guild camp: enhancement cards + enhanced-stats summary ---------- */
.camp-wrap{display:grid;grid-template-columns:1fr 200px;gap:14px;align-items:start}
.camp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.camp-card{display:flex;gap:9px;align-items:center;background:linear-gradient(#16203a,#0e1424);border:1px solid var(--line);border-radius:10px;padding:8px}
.camp-card.maxed{border-color:var(--gold)}
.camp-card .cmp-ic{width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.18),#0e1424);border:1px solid var(--line)}
.camp-card .cmp-body{flex:1;min-width:0}
.camp-card .cmp-name{font-size:16px;font-weight:700}
.camp-card .cmp-name .gs-fort{font-size:13px;color:var(--gold);margin-left:3px}
.camp-card .cmp-eff{font-size:14px;color:#7dffa8;margin:2px 0 6px}
.camp-card .cmp-up{width:100%;padding:5px;font-size:14px}
.camp-side{background:linear-gradient(#141d33,#0d1322);border:1px solid var(--line);border-radius:10px;padding:10px}
.camp-side .attr-cap{margin-bottom:6px}
.camp-feats{margin-top:8px;font-size:16px;text-align:center;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
@media(max-width:560px){.camp-wrap{grid-template-columns:1fr}.camp-grid{grid-template-columns:1fr}}

/* ---------- gear detail / enhancement panel ---------- */
.gear-detail{background:linear-gradient(#161f36,#0d1322);border:2px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
.gear-detail .gd-head{display:flex;gap:11px;align-items:center}
.gear-detail .gd-icon{width:52px;height:52px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:34px;border:2px solid var(--line);border-radius:10px;background:#0c1322}
.gear-detail .gd-name{font-size:19px;font-weight:800}
.gear-detail .gd-enchant{color:var(--gold);font-size:17px;margin-left:3px}
.gear-detail .gd-meta{font-size:14px;color:var(--muted);margin-top:2px;text-transform:capitalize}
.gear-detail .gd-stats{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.gear-detail .gd-prim{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;font-weight:800;margin-bottom:6px}
.gear-detail .gd-addcap{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:4px 0 3px}
.gear-detail .gd-add{display:flex;justify-content:space-between;font-size:16px;padding:2px 0}
.gear-detail .gd-k{color:var(--muted)}
.gear-detail .gd-v{font-weight:700;color:#7dffa8}
.gear-detail .gd-prim .gd-v{color:#fff}
.gear-detail .gd-bonus{color:#7dffa8;font-weight:700;font-size:16px}

/* ---------- mall / market: item-card grid ---------- */
.mall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
.mall-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(#16203a,#0e1424);border:2px solid var(--line);border-radius:12px;padding:12px 8px 10px;text-align:center}
.mall-card .mc-icon{font-size:48px;line-height:1.1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.mall-card .mc-name{font-size:14px;font-weight:700;min-height:30px;display:flex;align-items:center;justify-content:center;line-height:1.25}
.mall-card .mc-buy{width:100%;padding:7px 4px;font-size:16px}

/* ---------- talents: 3-column choice-based build trees ---------- */
.talent-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(#141d33,#0d1322);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:12px}
.talent-bar .tb-pts{font-size:17px;font-weight:700}
.talent-trees{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.talent-tree{background:linear-gradient(#16203a,#0e1424);border:2px solid var(--line);border-top-color:var(--tcol);border-radius:12px;padding:10px}
.talent-tree .tt-head{display:flex;align-items:center;gap:9px}
.talent-tree .tt-ic{font-size:29px;width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle,rgba(255,255,255,.08),#0e1424);border:1px solid var(--tcol)}
.talent-tree .tt-name{font-size:18px;font-weight:800;color:var(--tcol)}
.talent-tree .tt-spent{font-size:13px;color:var(--muted)}
.talent-tree .tt-blurb{font-size:13px;color:var(--muted);margin:6px 0 8px;line-height:1.35;min-height:30px}
.tt-tier{position:relative;padding:8px 0;border-top:1px dashed rgba(255,255,255,.08)}
.tt-tier:first-child{border-top:none}
.tt-gate{font-size:12px;color:var(--gold);text-align:center;margin-bottom:5px;letter-spacing:.02em}
.tt-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.tt-node{position:relative;width:48px;text-align:center;cursor:default}
.tt-node .tn-ic{width:46px;height:46px;margin:0 auto;display:grid;place-items:center;font-size:26px;border-radius:10px;background:#0c1322;border:2px solid var(--line);transition:transform .12s,border-color .12s,box-shadow .12s}
.tt-node .tn-rank{font-size:13px;font-weight:700;color:var(--muted);margin-top:2px}
.tt-node.dim .tn-ic{opacity:.4;filter:grayscale(.7)}
.tt-node.ranked .tn-ic{border-color:var(--tcol);box-shadow:0 0 8px rgba(255,255,255,.22)}
.tt-node.ranked .tn-rank{color:var(--tcol)}
.tt-node.maxed .tn-ic{border-color:var(--gold);box-shadow:0 0 10px rgba(245,166,35,.5)}
.tt-node.maxed .tn-rank{color:var(--gold)}
.tt-node.can{cursor:pointer}
.tt-node.can .tn-ic{border-color:#7dffa8;animation:talPulse 1.6s infinite}
.tt-node.can:hover .tn-ic{transform:scale(1.1)}
@keyframes talPulse{0%,100%{box-shadow:0 0 4px rgba(125,255,168,.3)}50%{box-shadow:0 0 12px rgba(125,255,168,.7)}}
@media(max-width:620px){.talent-trees{grid-template-columns:1fr}}

/* (bloodline/lineage CSS removed 2026-07-13 with the system — the bare `.sigil`
   classes further down are the FORMATION BOARD's role rings, unrelated) */

/* ---------- stage / campaign ---------- */
.stage-card{display:flex;align-items:center;gap:12px;background:linear-gradient(#1e273f,#151c2e);
  border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:9px}
.stage-card.cleared{border-color:#2f6d49}
.stage-card.locked{opacity:.5}
.stage-card.boss{border-color:var(--rare-gold);background:linear-gradient(#2a2440,#1a1726)}
.stage-no{width:42px;height:42px;border-radius:10px;background:#0c1322;display:grid;place-items:center;
  font-family:'Cinzel';font-weight:900;font-size:22px;color:var(--gold);border:1px solid var(--line)}
.stage-info{flex:1;min-width:0}
.stage-info .nm{font-weight:700;font-size:18px}
.stage-info .meta{font-size:14px;color:var(--muted)}
.chapter-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.chapter-tab{padding:7px 13px;border-radius:20px;background:#0c1322;border:1px solid var(--line);
  font-weight:700;font-size:16px;white-space:nowrap}
.chapter-tab.active{background:linear-gradient(#fcd97a,var(--gold2));color:#3a2606}

/* ---------- modal ---------- */
#modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,14,.75);z-index:40;padding:16px}
#modal-root.hidden{display:none}
.modal{width:min(94vw,460px);max-height:88vh;overflow-y:auto;background:linear-gradient(var(--panel),#10172a);
  border:2px solid var(--gold2);border-radius:16px;box-shadow:var(--shadow);animation:pop .18s}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(#243156,#1a2440);border-radius:14px 14px 0 0}
.modal-head h3{color:var(--gold);font-size:22px;flex:1}
.modal-close{background:#0c1322;border:1px solid var(--line);width:30px;height:30px;border-radius:8px;font-size:19px;color:var(--ink)}
.modal-body{padding:16px}
.modal-foot{padding:0 16px 16px;display:flex;gap:8px;justify-content:flex-end}

/* ---------- toast ---------- */
#toast-root{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:linear-gradient(#243156,#161e30);border:1px solid var(--gold2);border-radius:10px;
  padding:9px 16px;font-weight:700;box-shadow:var(--shadow);animation:toastIn .25s;font-size:17px}
.toast.bad{border-color:var(--red);color:#ffcaca}
.toast.good{border-color:var(--green)}
@keyframes toastIn{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* chest open animation */
.chest-open{font-size:72px;animation:chestShake .5s ease-in-out, chestPop .4s .5s both;filter:drop-shadow(0 0 16px var(--gold))}
@keyframes chestShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
@keyframes chestPop{from{transform:scale(1)}to{transform:scale(1.25)}}
.chest-loot{animation:lootIn .4s .7s both}
@keyframes lootIn{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}

/* visible village players */
/* (.village-folk / .folk cards removed with the fake-player strip, 2026-07-12) */

/* reward chips */
.reward-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.reward-chip{display:flex;align-items:center;gap:5px;background:#0c1322;border:1px solid var(--gold2);
  border-radius:20px;padding:5px 12px;font-weight:700;animation:pop .3s}
.reward-chip .ic{font-size:20px}

/* ---------- battle overlay ---------- */
#battle-overlay{position:fixed;inset:0;z-index:50;background:#05070d;display:flex;flex-direction:column}
#battle-canvas{flex:1;width:100%;display:block}
#battle-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
#battle-round{font-family:'Cinzel';font-size:24px;color:var(--gold);text-shadow:0 2px 6px #000}
#battle-controls{display:flex;gap:8px}
#battle-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(4,7,14,.82);gap:16px}
#battle-result .verdict{font-family:'Cinzel';font-size:65px;letter-spacing:3px}
#battle-result .verdict.win{color:var(--gold);text-shadow:0 0 24px rgba(245,196,81,.7)}
#battle-result .verdict.lose{color:#ff6b6b}

/* janken */
.janken-pick{display:flex;gap:12px;justify-content:center;margin:14px 0}
.jk-btn{width:78px;height:78px;border-radius:14px;font-size:46px;background:#0c1322;border:2px solid var(--line)}
.jk-btn:active{border-color:var(--gold)}

/* progress bar (quests / tower / guild) */
.prog-track{height:14px;background:#0c1322;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .4s}
.task-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #243150}
.task-row .ti{flex:1}
.task-row .tn{font-weight:700;font-size:17px}
.task-row .tp{font-size:14px;color:var(--gold)}

@media(max-width:430px){
  /* phone: the chrome HUD must still FIT — smaller frame, compact strip, slimmer plaques */
  .player-logo .avatar{width:84px;height:84px;font-size:30px}
  .avatar-ring{padding:4px}
  .avatar-frame{padding:3px}
  .cs-item{font-size:14px;padding:2px 8px}
  .cs-item .ic{font-size:15px}
  .pl-plaque{padding:3px 10px;gap:6px}
  .pl-plaque .pl-name{font-size:15px}
  .pl-plaque .pl-lv{font-size:14px}
  .vit-bar{width:150px;height:17px}
  .vit-txt{font-size:12px}
  .bp-plate{padding:2px 10px;font-size:13px}
  .bp-plate .val{font-size:17px}
  .bp-plate .bp-up{display:none}
  .res-plus{width:15px;height:15px;font-size:12px}
  #logout-btn{font-size:18px;padding:4px 5px}
  .nav-cluster{padding:6px 8px 4px;gap:3px}
  .nav-btn{font-size:10px}
  .nav-btn .ic-frame{width:42px;height:42px}
  .nav-btn .ic{font-size:23px}
  .vs-online-chip{top:170px;left:10px}
}


/* ---------- tooltip ---------- */
#tooltip{position:fixed;z-index:90;max-width:280px;background:linear-gradient(#243156,#141b2e);
  border:1px solid var(--gold2);border-radius:10px;padding:8px 12px;font-size:16px;line-height:1.45;
  color:var(--ink);box-shadow:var(--shadow);pointer-events:none;animation:pop .12s}
[data-tip]{cursor:help}
button[data-tip],.hotspot[data-tip]{cursor:pointer}
[data-ninjatip],[data-itemtip],[data-acctip],[data-restip]{cursor:help}
#tooltip.tip-rich{max-width:260px;text-align:left;padding:10px 12px}
#tooltip .tip-title{font-weight:800;font-size:17px;margin-bottom:1px}
#tooltip .tip-sub{font-size:13px;color:var(--muted);margin-bottom:6px}
#tooltip .tip-desc{font-size:14px;color:var(--parch);font-style:italic;margin-bottom:6px}
#tooltip .tip-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-bottom:2px}
#tooltip .tip-row{display:flex;justify-content:space-between;gap:10px;font-size:14px}
#tooltip .tip-row span:first-child{color:#9fb0d0}
#tooltip .tip-skill{font-size:13px;color:var(--parch);margin-top:5px;border-top:1px solid var(--line);padding-top:5px}
#tooltip .tip-skill b{color:var(--gold)}

/* ---------- village hub ---------- */
.village-scene{position:relative;flex:1;min-height:0;overflow:hidden}
/* generated village key-art: covers the CSS fallback scene (vs-sky/mountains/…) when it
   loads, sits BELOW the NPCs/title/folk (z-index 2-3); a 404 leaves it transparent → CSS scene shows */
.vs-art{position:absolute;inset:0;z-index:1;background-repeat:no-repeat}
.vs-sky{position:absolute;inset:0;height:62%;
  background:linear-gradient(#1b2c54 0%,#28406e 55%,#3d5375 85%,#54627c 100%)}
.vs-sky::after{content:"";position:absolute;right:9%;top:14%;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff7e0,#f5c451 65%,transparent 70%);
  box-shadow:0 0 40px 12px rgba(245,196,81,.35)}
.vs-ground{position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(#2c3b33 0%,#1f2b26 40%,#141d1c 100%)}
.vs-ground::before{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 90px at 50% 0%,rgba(245,196,81,.10),transparent 70%)}
/* (.vs-title removed — the village sign + welcome line were cut for the clean full-bleed scene) */
/* the scene now runs under the HUD, so the chip clears the currency strip + framed avatar */
.vs-online-chip{position:absolute;top:190px;left:16px;z-index:3;font-size:14px;font-weight:800;
  padding:5px 12px;border-radius:20px;color:#3a2606;background:linear-gradient(#fcd97a,var(--gold2));
  border:1px solid #7a5410;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;animation:pulseGlow 1.6s infinite}
/* scene atmosphere: drifting clouds, mountain silhouettes, a lit path */
.vs-cloud{position:absolute;z-index:1;height:18px;border-radius:20px;background:rgba(255,255,255,.07);
  filter:blur(2px);animation:cloudDrift 60s linear infinite}
.vs-cloud::after{content:"";position:absolute;left:22%;top:-9px;width:55%;height:18px;border-radius:20px;background:rgba(255,255,255,.07)}
.vs-cloud.c1{width:120px;top:12%;left:-130px}
.vs-cloud.c2{width:90px;top:22%;left:-100px;animation-duration:85s;animation-delay:-30s}
.vs-cloud.c3{width:150px;top:7%;left:-160px;animation-duration:110s;animation-delay:-70s}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 320px))}}
.vs-mountains{position:absolute;left:0;right:0;top:30%;height:34%;z-index:0;
  background:
    radial-gradient(220px 150px at 12% 100%,#1d2a4a 30%,transparent 70%),
    radial-gradient(300px 190px at 38% 100%,#16203a 30%,transparent 70%),
    radial-gradient(260px 160px at 70% 100%,#1d2a4a 30%,transparent 70%),
    radial-gradient(320px 200px at 95% 100%,#141d33 30%,transparent 70%)}
.vs-path{position:absolute;left:50%;bottom:0;width:34%;height:42%;z-index:1;transform:translateX(-50%);
  background:radial-gradient(closest-side at 50% 110%,rgba(232,217,181,.12),transparent 75%);
  clip-path:polygon(40% 0,60% 0,95% 100%,5% 100%)}
.hotspot{position:absolute;z-index:2;transform:translate(-50%,-50%);text-align:center;cursor:pointer;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));transition:transform .12s}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.12)}
/* building plate: framed pedestal with a glow lantern behind the icon */
.hs-plate{width:52px;height:52px;margin:0 auto;display:grid;place-items:center;border-radius:13px;
  background:
    radial-gradient(circle at 50% 28%,rgba(245,196,81,.22),transparent 70%),
    linear-gradient(#2a3a66,#141c30);
  border:1.5px solid var(--gold2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.5);
  animation:lanternGlow 3.4s ease-in-out infinite}
@keyframes lanternGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.5),0 0 14px rgba(245,196,81,.25)}}
.hotspot:hover .hs-plate{border-color:var(--gold);background:
  radial-gradient(circle at 50% 28%,rgba(245,196,81,.4),transparent 75%),linear-gradient(#33466f,#1a2440)}
.hotspot .hs-ic{font-size:36px;line-height:1}
.hotspot .hs-lbl{font-size:13px;font-weight:700;color:var(--parch);background:#000a;
  border:1px solid #ffffff22;border-radius:9px;padding:1px 8px;margin-top:3px;white-space:nowrap}
.hotspot:hover .hs-lbl{color:var(--gold);border-color:var(--gold2)}
/* (.vs-folk fake-player strip removed 2026-07-12 per the owner) */
@keyframes folkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.hub-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;margin-bottom:12px}
.hub-btn{position:relative;text-align:center;padding:9px 4px 7px;cursor:pointer;border-radius:12px;
  background:linear-gradient(var(--panel),#151c2e);border:1px solid var(--line);transition:transform .1s,border-color .15s}
.hub-btn:hover{border-color:var(--gold2);transform:translateY(-2px)}
.hub-btn .hb-ic{font-size:44px}
.hub-btn .hb-lbl{font-weight:700;font-size:14px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Village = full-width home scene + a few NPCs (all modes live in the menu) */
.village-full{display:flex;flex-direction:column;flex:1;min-height:0;gap:0}
/* (.village-bar removed — the daily / rewards bottom field was deleted) */
.vnpc{position:absolute;z-index:2;transform:translate(-50%,-50%);text-align:center;cursor:pointer}
.vnpc .vnpc-av{font-size:48px;line-height:1;filter:drop-shadow(0 3px 4px #000a);transition:transform .12s}
.vnpc:hover .vnpc-av{transform:scale(1.12)}
.vnpc .vnpc-lbl{display:inline-block;font-size:13px;font-weight:700;color:var(--gold);background:#000a;border:1px solid var(--gold2);border-radius:8px;padding:1px 8px;margin-top:3px;white-space:nowrap}
.vnpc .vnpc-mark{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:24px;animation:folkBob 1.3s ease-in-out infinite}
/* (.vquest removed — replaced by the persistent #quest-rail shell overlay) */

/* ---------- formation hint / team layout ---------- */
/* (old absolute .form-hint removed — the formation footer styles it in-flow above) */
.bp-chip{border-color:var(--gold2)!important}

/* ---------- battle result panel reuse ---------- */
.card-list .stage-card{margin-bottom:9px}

/* ---------- HUD extras: VIP chip, plus buttons, count-up ---------- */
.pl-vip{font-size:13px;font-weight:800;color:#3a2606;background:linear-gradient(#fcd97a,var(--gold2));
  border-radius:9px;padding:1px 7px;vertical-align:middle}
.res-plus{width:17px;height:17px;border-radius:50%;background:linear-gradient(#fcd97a,var(--gold2));
  color:#3a2606;font-weight:900;font-size:13px;line-height:1;display:grid;place-items:center;
  border:none;box-shadow:0 2px 5px rgba(0,0,0,.6);margin-left:3px}
.res-plus:hover{filter:brightness(1.2)}
@keyframes resUp{0%{color:#9be88a;transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes resDown{0%{color:#ff7a7a;transform:scale(.92)}100%{transform:scale(1)}}
.res-up{animation:resUp .7s}
.res-down{animation:resDown .7s}

/* ---------- system windows over the village shell (library file 07) ---------- */
/* system windows fill the CONTENT row (full-screen between the persistent bar + nav, not a small modal) */
#window-root{z-index:30;display:flex;min-height:0;overflow:hidden}
#window-root.hidden{display:none}
/* Formation opens as a BOUNDED, centered, framed window (UN-style) — not full-bleed.
   It spans ALL shell rows (over HUD + nav) so the board gets real height, with a dim
   backdrop like the reference's modal. */
#window-root[data-route="team"]{grid-row:1/-1;align-items:center;justify-content:center;padding:12px;
  background:rgba(4,7,14,.55)}
#window-root[data-route="team"] .gwin{width:min(1260px,100%);height:min(100%,920px);margin:auto;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.65)}
/* the formation window never scrolls: board flexes, bench stays pinned */
#window-root[data-route="team"] .gwin-body{overflow:hidden;display:flex;flex-direction:column}
.gwin,.gwin.full{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  background:linear-gradient(#141c30,#0b1120);border:0;border-radius:0;box-shadow:none;
  animation:pop .12s;overflow:hidden}
/* atmospheric mode backdrop (arena/tower/realms) behind the content */
.gwin-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.38}
.gwin-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,14,26,.35),rgba(10,14,26,.62))}
.gwin-head{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:linear-gradient(#2a3a66,#1a2440);border-bottom:2px solid var(--gold2)}
.gwin-head .gw-ic{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.gwin-head h3{font-family:'Cinzel',serif;color:var(--gold);font-size:23px;flex:1;letter-spacing:1px}
.gwin-close{background:#0c1322;border:1px solid var(--line);width:32px;height:32px;border-radius:8px;
  font-size:19px;color:var(--ink)}
.gwin-close:hover{border-color:var(--red);color:#ffb3b3}
.gwin-body{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px 20px}

/* ---------- tavern layout & tier locks ---------- */
.tavern-layout{display:flex;flex-direction:column;gap:4px}
.tier-locked{filter:saturate(.5)}
.tab-locked{opacity:.55}

/* ============================================================
   DESKTOP — top resource bar + persistent village + bottom menu
   ============================================================ */
@media(min-width:768px){
  .desk-only{display:flex!important}
  body{
    background:
      radial-gradient(1100px 520px at 18% -12%,#26365f 0,transparent 62%),
      radial-gradient(900px 520px at 88% 20%,#211a3f 0,transparent 60%),
      #070b14;
  }
  .login-card h1{font-size:53px}

  /* shell: full-bleed — the village art fills the viewport; HUD floats over it */
  #game{max-width:none;width:100%}
  .player-logo .avatar{width:138px;height:138px;font-size:56px}
  .cs-item{font-size:19px;padding:3px 14px}
  .cs-item .ic{font-size:21px}
  .pl-plaque .pl-name{font-size:21px}
  .pl-plaque .pl-lv{font-size:19px}
  .vit-bar{width:240px;height:22px}
  .bp-plate .val{font-size:26px}

  .section-head h2{font-size:30px}

  /* bottom command cluster (right-aligned like the reference) grows up */
  #bottom-nav{padding:9px 20px 12px}
  .nav-cluster{gap:10px;padding:9px 18px 7px}
  .nav-btn{font-size:14px}
  .nav-btn .ic-frame{width:64px;height:64px}
  .nav-btn .ic{font-size:38px}

  .hs-plate{width:66px;height:66px;border-radius:16px}
  .hotspot .hs-ic{font-size:46px}
  .hotspot .hs-lbl{font-size:14px}
  .vs-online-chip{top:215px;left:26px}

  /* system windows */
  .gwin-body{padding:18px 26px 24px}

  /* arena: ladder on the LEFT of the main panel (library file 29) */
  .arena-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
  .arena-layout .arena-ladder{order:-1}

  /* team: a touch more room on wide screens (still fits without scrolling) */
  .formation-stage{padding:12px 14px 6px}

  /* tavern: recruits + janken side by side */
  .tavern-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}

  /* list screens become card grids inside windows */
  #stage-list,#mall-list,#mail-list,#inh-list{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:10px;align-items:start}
  #stage-list .stage-card,#mall-list .stage-card{margin-bottom:0}
  #mail-list .panel{margin-bottom:0}

  .roster-grid{grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:10px}
  .nc-portrait{font-size:62px}
  .nc-name{font-size:16px}
  .gear-grid{grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:10px}
  .gear-slot{min-height:90px}
  .stat-table{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
  .stage-card{min-height:74px;padding:12px 14px}
  .stage-no{width:48px;height:48px;font-size:22px}
  .chapter-tab{font-size:17px;padding:8px 15px}
  .modal{width:min(92vw,620px);max-height:84vh}
  #modal-root{z-index:40}
  #toast-root{top:72px}
  #battle-hud{padding:18px 24px}
  #battle-round{font-size:30px}
  #battle-result .verdict{font-size:86px}
}

@media(min-width:1200px){
  .roster-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .nc-portrait{font-size:70px}
}

/* ---------- campaign node map (library file 31) ---------- */
/* 16:9 container so the FULL chapter backdrop shows (cover on matching aspect = no crop) */
.camp-map{position:relative;aspect-ratio:16/9;width:100%;max-width:1180px;margin:0 auto 14px;
  border:2px solid var(--gold2);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  background-color:#0f1626;background-position:center;background-size:cover}
.camp-map svg{position:absolute;inset:0;width:100%;height:100%}
.camp-path{fill:none;stroke:rgba(245,196,81,.35);stroke-width:1.2;stroke-dasharray:3 2.4;vector-effect:non-scaling-stroke;stroke-width:3px}
.camp-node{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;z-index:2;transition:transform .12s}
.camp-node:hover{transform:translate(-50%,-50%) scale(1.08)}
.cn-card{position:relative;width:58px;height:58px;margin:0 auto;border-radius:10px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 28%,#2a3a66,#141c30);border:2px solid #caa24e;
  box-shadow:0 4px 10px rgba(0,0,0,.55)}
.cn-portrait{font-size:36px;line-height:1}
.camp-node.cleared .cn-card{border-color:#2f8f5a}
.camp-node.locked .cn-card{border-color:#56607a}
.camp-node.locked .cn-portrait{filter:grayscale(.85) brightness(.5)}
.camp-node.boss .cn-card{width:64px;height:64px;border-color:var(--rare-gold);box-shadow:0 0 16px rgba(245,166,35,.5)}
.camp-node.boss .cn-portrait{font-size:43px}
.cn-badge{position:absolute;font-weight:800;line-height:1}
.cn-badge.sealed{left:50%;bottom:-7px;transform:translateX(-50%);font-size:12px;color:#fff;background:#1c8a3fdd;border:1px solid #ffffff55;padding:1px 7px;border-radius:6px;letter-spacing:.03em}
.cn-badge.cleared{top:-7px;right:-7px;font-size:14px;color:#0c1322;background:#7dffa8;border:1px solid #fff;width:19px;height:19px;display:grid;place-items:center;border-radius:50%}
.cn-name{font-size:13px;font-weight:700;color:var(--parch);background:#000a;border:1px solid #ffffff22;
  border-radius:9px;padding:1px 7px;margin-top:6px;white-space:nowrap;display:inline-block}

/* ---------- guided onboarding glow (library file 59) ---------- */
.hotspot.guide-glow .hs-plate{border-color:var(--gold);animation:guidePulse 1.2s infinite}
.hotspot.guide-glow .hs-lbl{color:var(--gold);border-color:var(--gold2)}
@keyframes guidePulse{0%,100%{box-shadow:0 0 6px rgba(245,196,81,.4)}50%{box-shadow:0 0 22px rgba(245,196,81,.85)}}
.guide-chip{animation:pulseGlow 1.3s infinite}

/* ---------- arena layout with ladder (mobile stacks; the desktop grid rule
   lives in the ≥768px block ABOVE — keep this scoped so it can't override) ---------- */
@media(max-width:767.98px){
  .arena-layout{display:flex;flex-direction:column;gap:4px}
  /* login: hero becomes a full-bleed background, card floats centered over it */
  #login-screen{display:block}
  .login-hero{position:absolute;inset:0;flex:none}
  .login-hero-art{background-position:center 30%}
  .login-hero-vignette{background:
    linear-gradient(180deg,rgba(10,14,26,.35) 0,rgba(10,14,26,.78) 100%)}
  .login-panel{position:relative;height:100%;flex:none;
    background:none;border-left:none;box-shadow:none;padding:24px}
  .login-card{width:min(92vw,400px);padding:30px 26px;border-radius:18px;
    background:linear-gradient(rgba(27,35,54,.92),rgba(15,22,38,.94));
    border:2px solid var(--gold2);box-shadow:var(--shadow);
    backdrop-filter:blur(3px)}
}

/* (village NPC wandering + chatter removed with the fake-player folk strip, 2026-07-12) */