/* Members area: hub, Armory and Powers. Loads after css/site.css and uses its tokens.
   Mobile first (390 px), then 720 / 1100 px. Flat fills, hard edges, no purple. */

/* ---------- Shared ---------- */
.page-head.is-compact{padding-top:calc(64px + clamp(28px,5vw,64px));padding-bottom:clamp(28px,4vw,48px)}
.page-head.is-compact .page-title{font-size:clamp(2.75rem,8vw,5rem);margin-bottom:12px}
.mem-strip{display:flex;align-items:flex-start;gap:10px;margin:0 0 22px;padding:10px 14px;border:2px solid var(--yellow);background:var(--ink);font:600 .9375rem/1.35 var(--f-body);letter-spacing:.02em;color:var(--white)!important;max-width:62ch}
.mem-strip .ic{width:18px;height:18px;margin-top:1px;color:var(--yellow)}
.mem-strip b{color:var(--yellow);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;font:600 .875rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none;padding:6px 0;transition:color .2s}
.crumbs a:hover{color:var(--yellow)}
.crumbs .ic{width:14px;height:14px}
.mem-main{padding-block:clamp(28px,5vw,56px) clamp(80px,10vw,128px)}
.mem-h2{margin:0 0 14px;font:400 clamp(1.75rem,4vw,2.5rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.mem-sub{margin:0 0 20px;font-size:1.0625rem;color:var(--muted)}

/* Filter chips that scroll sideways on a phone instead of wrapping into a wall */
.fchips{display:flex;gap:8px;margin:0 calc(var(--gutter)*-1);padding:2px var(--gutter) 10px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
@media (min-width:900px){.fchips{flex-wrap:wrap;margin:0;padding:2px 0 10px;overflow:visible}}
.fchip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--line-2);background:var(--ink-deep);color:var(--white);font:700 .9375rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;scroll-snap-align:start;transition:border-color .2s,background-color .2s,color .2s}
.fchip:hover{border-color:rgba(255,255,255,.5)}
.fchip[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt)}
.fchip .n{font:600 .75rem/1 var(--f-mono);color:var(--faint)}
.fchip[aria-pressed="true"] .n{color:var(--white)}
.fchip .dot{width:10px;height:10px;background:var(--gc,var(--white))}

/* ---------- Hub ---------- */
.hub-grid{display:grid;gap:clamp(28px,4vw,48px);align-items:start}
@media (min-width:1000px){.hub-grid{grid-template-columns:7fr 5fr}}
.how4{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px;padding:0;list-style:none;counter-reset:how}
@media (min-width:720px){.how4{grid-template-columns:repeat(4,1fr)}}
.how4 li{position:relative;display:flex;flex-direction:column;gap:8px;min-height:132px;padding:14px 14px 16px;background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--cobalt)}
.how4 li.is-you{border-top-color:var(--yellow)}
.how4 .how-ic{display:grid;place-items:center;width:40px;height:40px;background:var(--cobalt);color:var(--white);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.how4 li.is-you .how-ic{background:var(--yellow);color:var(--ink)}
.how4 .how-ic .ic{width:20px;height:20px}
.how4 .how4-n{font:600 .75rem/1 var(--f-mono);letter-spacing:.1em;color:var(--yellow)}
.how4 h3{margin:0;font:400 1.375rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.how4 p{margin:0;font-size:1rem;line-height:1.35;color:var(--muted)}

.login{margin:0 8px 8px 0;padding:clamp(20px,4vw,30px);background:var(--ink-2)}
.login .form-title{margin-bottom:8px}
.login-sub{margin:0 0 18px;font-size:1.0625rem;color:var(--muted)}
.login .field{margin-bottom:14px}
.login-facts{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.login-facts li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.35;color:var(--muted)}
.login-facts .ic{width:18px;height:18px;margin-top:1px;color:var(--yellow)}
.login-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:10px 12px;border-left:3px solid var(--yellow);background:rgba(255,213,42,.08);font-size:1rem;line-height:1.35;color:var(--white)}
.login-note .ic{flex:none;width:18px;height:18px;margin-top:1px;color:var(--yellow)}
.login-note.is-warn{border-left-color:var(--red);background:rgba(231,29,54,.12)}
.login-note.is-warn .ic{color:var(--red)}
.member-in{padding:8px 0}
.member-in:focus{outline:none}
.member-in p{margin:0;color:var(--muted)}
.in-links{display:grid;gap:12px;margin:20px 0 0}
.logout{margin:18px 0 0}
.link-btn{padding:6px 0;border:0;background:none;font:600 1rem/1.3 var(--f-body);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.link-btn:hover,.link-btn:focus-visible{color:var(--yellow)}
.done-ic.is-warn{background:var(--red);color:var(--white)}
.signin-card{max-width:560px}
.signin-card .done-ic{margin-bottom:16px}

.tiles{display:grid;gap:12px;margin-top:clamp(36px,5vw,56px)}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--ink-2);border:1px solid var(--line);color:var(--white);text-decoration:none;overflow:hidden;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
a.tile:hover{transform:translate(-2px,-2px);border-color:var(--white);box-shadow:6px 6px 0 var(--cobalt)}
.tile-media{position:relative;aspect-ratio:16/9;background:var(--ink-deep);overflow:hidden}
.tile-media img{width:100%;height:100%;object-fit:cover}
.tile-media.is-icon{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--ink-deep) 0 14px,var(--ink-2) 14px 28px)}
.tile-media.is-icon .ic{width:48px;height:48px;color:var(--line-2)}
.tile-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 16px 18px;border-top:3px solid var(--ink)}
.tile h3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font:400 1.75rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.tile h3 .ic{width:22px;height:22px;color:var(--yellow);transition:transform .2s var(--ease)}
a.tile:hover h3 .ic{transform:translateX(4px)}
.tile p{margin:0;font-size:1.0625rem;line-height:1.35;color:var(--muted)}
.tile .count{font:600 .8125rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.tile.is-locked{color:var(--muted)}
.tile.is-locked h3 .ic{color:var(--faint)}
.lock-plate{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:.42em .6em .36em;background:var(--ink);border:1px solid var(--line-2);font:400 .75rem/1 var(--f-plate);letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.lock-plate .ic{width:13px;height:13px}

/* ---------- Armory ---------- */
.rules{display:grid;gap:8px;margin:0 0 26px;padding:0;list-style:none}
@media (min-width:900px){.rules{grid-template-columns:repeat(3,1fr)}}
.rules li{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--ink-2);border-left:4px solid var(--yellow);font-size:1.0625rem;line-height:1.35}
.rules .ic{width:20px;height:20px;margin-top:1px;color:var(--yellow)}
.list-count{margin:4px 0 16px;font:600 .875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

.gun-grid{display:grid;gap:14px;align-items:start;margin:0;padding:0;list-style:none}
@media (min-width:720px){.gun-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.gun-grid{grid-template-columns:repeat(3,1fr)}}
.gun{display:flex;flex-direction:column;min-width:0;background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--cobalt);transition:border-color .2s,box-shadow .2s}
.gun:hover{box-shadow:6px 6px 0 rgba(40,84,219,.55)}
.gun.is-rare{border-top-color:var(--yellow)}
.gun-pic{margin:0;aspect-ratio:16/9;background:var(--ink-deep);border-bottom:1px solid var(--line)}
.gun-pic img{width:100%;height:100%;object-fit:contain}
.gun-top{padding:14px 16px 0}
.gun-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gun-tags .tag{margin:0!important}
.tag.is-rare{background:var(--yellow);color:var(--ink)!important}
.gun h3{margin:0 0 6px;font:400 clamp(1.75rem,6vw,2.125rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.gun-meta{margin:0 0 10px;font:600 .8125rem/1.35 var(--f-mono);letter-spacing:.04em;color:var(--faint)}
.gun-about{margin:0 0 14px;font-size:1.0625rem;line-height:1.4;color:var(--muted)}

/* The big number: damage per shot, with a bar against the hardest-hitting gun */
.dmg{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4px 14px;margin:0 16px 12px;padding:12px 14px;background:var(--ink-deep);border:1px solid var(--line)}
.dmg-num{grid-row:span 2;font:400 3rem/.9 var(--f-display);color:var(--yellow)}
.dmg-label{font:700 .875rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.meter{position:relative;height:10px;background:var(--ink-3);overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0)*100%);background:var(--yellow)}
.meter.is-cobalt i{background:var(--cobalt)}

.nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 16px 14px;background:var(--line);border:1px solid var(--line)}
.nums div{display:flex;flex-direction:column;gap:5px;padding:10px 12px;background:var(--ink-2);min-width:0}
.nums div.wide{grid-column:span 2}
.nums dt{font:600 .75rem/1.1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.nums dd{margin:0;font:700 1.1875rem/1.1 var(--f-body);letter-spacing:.02em}

.starts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 16px 12px}
.starts-label{font:600 .75rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.starts .part-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px dashed var(--line-2);font:600 .9375rem/1 var(--f-body);letter-spacing:.03em}
.starts .part-chip small{font:600 .6875rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)}
.starts .ic{width:15px;height:15px;color:var(--yellow)}

.parts{margin:auto 0 0;border-top:1px solid var(--line)}
.parts-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 4px;font:700 .875rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.parts-head .n{font:600 .75rem/1 var(--f-mono);color:var(--faint)}
.part{border-top:1px solid var(--line)}
.parts-head + .part{border-top:0}
.part summary{display:grid;grid-template-columns:1fr auto 20px;align-items:center;gap:10px;min-height:52px;padding:8px 16px;cursor:pointer;list-style:none;transition:background-color .2s}
.part summary::-webkit-details-marker{display:none}
.part summary::marker{content:""}
.part summary:hover{background:var(--ink-3)}
.part-name{font:700 1.125rem/1.15 var(--f-body);letter-spacing:.03em}
.slot{padding:.36em .5em .3em;border:1px solid var(--line-2);font:600 .6875rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.part summary .ic{width:18px;height:18px;color:var(--muted);transition:transform .2s var(--ease)}
.part[open] summary .ic{transform:rotate(180deg);color:var(--yellow)}
.part[open] summary{background:var(--ink-3)}
.chg{display:grid;gap:6px;margin:0;padding:10px 16px 14px;list-style:none;background:var(--ink-3)}
.chg li{display:grid;grid-template-columns:1fr;gap:4px;padding:8px 10px;background:var(--ink-deep);border-left:3px solid var(--cobalt)}
.chg li.is-same{border-left-color:var(--line-2)}
.chg-label{font:600 .75rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.chg-vals{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:700 1.0625rem/1.2 var(--f-body)}
.chg-vals .from{color:var(--muted);font-weight:600}
.chg-vals .to{color:var(--yellow)}
.chg-vals .ic{width:16px;height:16px;color:var(--yellow)}
.chg li.is-same .chg-vals{color:var(--muted);font-weight:600}

.modes{border-top:1px solid var(--line)}
.modes summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 16px;cursor:pointer;list-style:none;font:700 .875rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:background-color .2s,color .2s}
.modes summary::-webkit-details-marker{display:none}
.modes summary::marker{content:""}
.modes summary:hover{background:var(--ink-3);color:var(--white)}
.modes summary .ic{width:18px;height:18px;transition:transform .2s var(--ease)}
.modes[open] summary .ic{transform:rotate(180deg);color:var(--yellow)}
.mode-list{display:grid;gap:6px;margin:0;padding:4px 16px 16px;list-style:none}
.mode-list li{display:grid;gap:3px;padding:8px 10px;background:var(--ink-deep)}
.mode-list b{font:700 1rem/1.2 var(--f-body);letter-spacing:.03em}
.mode-list span{font-size:.9375rem;line-height:1.35;color:var(--muted)}

.blade-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:600px){.blade-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.blade-grid{grid-template-columns:repeat(4,1fr)}}
.blade{display:grid;gap:8px;padding:14px 16px 16px;background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--line-2)}
.blade h3{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:400 1.5rem/1 var(--f-display);text-transform:uppercase}
.blade h3 .mono{font-size:1.125rem;color:var(--yellow)}
.blade p{margin:0;font-size:1rem;line-height:1.35;color:var(--muted)}
.blades-wrap{margin-top:clamp(40px,6vw,64px)}
.empty{padding:24px 16px;border:1px dashed var(--line-2);text-align:center;color:var(--muted)}

/* ---------- Powers ---------- */
.pw-tools{display:grid;gap:12px;margin:0 0 6px}
@media (min-width:900px){.pw-tools{grid-template-columns:1fr 240px;align-items:end}}
.search{position:relative}
.search .ic{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.search input{width:100%;height:52px;padding:0 14px 0 44px;border:2px solid var(--line-2);border-radius:0;background:var(--ink-deep);color:var(--white);font-size:1.1875rem;transition:border-color .2s}
.search input:hover{border-color:rgba(255,255,255,.5)}
.search input:focus{outline:none;border-color:var(--yellow)}
.search input::placeholder{color:rgba(255,255,255,.42)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pw-tools .field{margin:0}
.pw-tools .field label{font-size:.8125rem}
.pw-tools select{height:52px!important}

.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:600px){.pw-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.pw-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.pw-grid{grid-template-columns:repeat(6,1fr)}}
.pw-grid > li{min-width:0}
.pw{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:1px solid var(--line);border-top:3px solid var(--gc,var(--cobalt));background:var(--ink-2);color:var(--white);text-align:left;cursor:pointer;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.pw:hover{transform:translate(-2px,-2px);border-color:var(--white);border-top-color:var(--gc,var(--cobalt));box-shadow:5px 5px 0 var(--gc,var(--cobalt))}
.pw-img{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--ink-deep)}
.pw-img img{width:78%;height:78%;object-fit:contain;image-rendering:auto}
.pw-rank{position:absolute;right:6px;top:6px;padding:.3em .45em .26em;background:var(--ink);border:1px solid var(--line-2);font:600 .6875rem/1 var(--f-mono);letter-spacing:.04em;color:var(--white)}
.pw-rank b{color:var(--yellow);font-weight:600}
.pw-body{display:flex;flex-direction:column;gap:4px;padding:10px 10px 12px}
.pw-title{font:700 1.0625rem/1.1 var(--f-body);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.pw-group{display:flex;align-items:center;gap:6px;font:600 .75rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.pw-group i,.pwm-group i{flex:none;width:8px;height:8px;background:var(--gc,var(--cobalt))}
.pw-s{display:none;margin:2px 0 0;font-size:.9375rem;line-height:1.3;color:var(--muted)}
@media (min-width:600px){.pw-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

[data-g="Biological"]{--gc:#CF3B34}
[data-g="Cosmic"]{--gc:#B8912F}
[data-g="Elemental"]{--gc:#E2581D}
[data-g="Force"]{--gc:#2F5FD0}
[data-g="Psionic"]{--gc:#14B3A6}
[data-g="Tech"]{--gc:#4FAF3A}

.more-row{display:flex;justify-content:center;margin-top:22px}
.pw-empty{grid-column:1/-1}

/* Power detail: a native dialog */
.pwm{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:3px solid var(--ink);background:var(--ink-2);color:var(--white);box-shadow:8px 8px 0 var(--gc,var(--cobalt)),8px 8px 0 3px var(--ink);overflow:auto;overscroll-behavior:contain}
.pwm::backdrop{background:rgba(10,13,22,.82)}
.pwm-head{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:72px 1fr 44px;gap:12px;align-items:center;padding:14px;background:var(--ink-2);border-bottom:1px solid var(--line)}
.pwm-head img{width:72px;height:72px}
.pwm-title{margin:0 0 6px;font:400 clamp(1.5rem,5vw,2rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.pwm-tags{display:flex;flex-wrap:wrap;gap:6px}
.pwm-group,.pwm-chip{display:inline-flex;align-items:center;gap:6px;padding:.36em .5em .3em;border:1px solid var(--line-2);font:600 .6875rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pwm-chip.is-rank{border-color:var(--yellow);color:var(--yellow)}
.pwm-body{padding:16px 16px 20px}
.pwm-s{margin:0 0 16px;font:700 1.25rem/1.3 var(--f-body);color:var(--white)}
.pwm-news{margin:0 0 18px;padding:12px 14px;background:var(--ink-deep);border-left:4px solid var(--gc,var(--cobalt))}
.pwm-news h3{margin:0 0 6px;font:700 1rem/1.25 var(--f-body);letter-spacing:.04em;text-transform:uppercase}
.pwm-news p{margin:0;font-size:1rem;line-height:1.45;color:var(--muted)}
.pwm-kicker{display:block;margin-bottom:6px;font:600 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pwm-fields{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:1px;margin:0 0 18px;background:var(--line);border:1px solid var(--line)}
.pwm-fields .wide{grid-column:1/-1}
.pwm-fields div{display:grid;gap:4px;padding:9px 12px;background:var(--ink-2)}
.pwm-fields dt{font:600 .6875rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pwm-fields dd{margin:0;font-size:1.0625rem;line-height:1.3}
.pwm-h{margin:0 0 10px;font:700 .875rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pwm-moves{display:grid;gap:8px;margin:0;padding:0;list-style:none}
@media (min-width:560px){.pwm-moves{grid-template-columns:1fr 1fr}}
.pwm-moves li{display:grid;gap:4px;padding:10px 12px;background:var(--ink-deep);border:1px solid var(--line)}
.pwm-moves b{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:700 1.0625rem/1.15 var(--f-body);letter-spacing:.03em;text-transform:uppercase}
.pwm-moves small{font:600 .6875rem/1 var(--f-mono);letter-spacing:.06em;color:var(--yellow)}
.pwm-moves span{font-size:.9375rem;line-height:1.35;color:var(--muted)}
.pwm-wait{padding:18px 0;color:var(--muted)}
html.has-modal{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .tile,.pw,.gun,.fchip,.part summary .ic,.modes summary .ic{transition:none}
  a.tile:hover,.pw:hover{transform:none}
}
.tiles-title{margin:clamp(44px,6vw,72px) 0 0}
.tiles-title + .tiles{margin-top:14px}
.arm-source{margin-top:28px}