/* ==========================================================================
   CYBERZ — Arsenal — 360° silah görüntüleyici
   HTML : index.html → "ARSENAL" bölümü
   CSS  : css/home/07-arsenal.css
   JS   : js/home/07-arsenal.js
   ========================================================================== */

.armory .vault{ margin-top:0; }

.vault-head{ margin-bottom:clamp(22px,3vw,34px); }
.vault-head h1{
    font-size:clamp(2.2rem,5.4vw,3.6rem);
    text-transform:uppercase;
    margin:10px 0 10px;
}

.vault{
    display:grid; gap:clamp(14px,2vw,22px);
    grid-template-columns:210px minmax(0,1fr);
    align-items:start;
}
/* grid cocuklarinin varsayilan min-width:auto degeri yatay tasmaya yol aciyor */
.vault > *{ min-width:0; }
.rail{ min-width:0; max-width:100%; }
@media (max-width:900px){
    .vault{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------ RAIL */
.rail{ display:flex; flex-direction:column; gap:7px; }
.rail__title{
    font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--fg-3); margin-bottom:5px;
}
@media (max-width:900px){
    .rail{
        flex-direction:row; overflow-x:auto;
        padding-bottom:8px; margin-bottom:2px;
        scroll-snap-type:x mandatory;
        scrollbar-width:thin;
    }
    .rail__title{ display:none; }
    .rail__pick{ flex:0 0 176px; scroll-snap-align:start; }
}

.rail__pick{
    display:flex; flex-direction:column; gap:3px;
    min-height:58px; padding:12px 15px;
    text-align:left; cursor:pointer;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-left:2px solid transparent;
    transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.rail__pick:hover{ background:var(--bg-3); border-color:var(--line-2); }
.rail__pick[aria-selected="true"]{
    background:var(--bg-3);
    border-left-color:var(--cyan);
}
.rail__id{ font-size:.75rem; letter-spacing:.13em; color:var(--fg-3); }
.rail__name{
    font-family:var(--font-display); font-weight:700;
    font-size:.8125rem; letter-spacing:.03em; text-transform:uppercase;
    color:var(--fg-2);
}
.rail__pick[aria-selected="true"] .rail__name{ color:var(--fg); }
.rail__pick[aria-selected="true"] .rail__id{ color:var(--cyan); }

/* ----------------------------------------------------------------- STAGE */
.stage{
    position:relative;
    /* aspect-ratio tek basina birakilirsa genislik min-height'tan turetiliyor
       ve grid sutununu tasiriyor; genisligi acikca sabitliyoruz */
    width:100%;
    aspect-ratio:16/9;
    min-height:300px;
    background:
        radial-gradient(ellipse 62% 52% at 50% 84%, rgba(0,212,200,.13), transparent 70%),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border:1px solid var(--line);
    overflow:hidden;
    touch-action:none;
    cursor:grab;
    display:flex; align-items:center; justify-content:center;
}
.stage:active{ cursor:grabbing; }

.stage__sprite{
    position:absolute; inset:0;
    background-repeat:no-repeat;
    background-position:0 0;
    /* switching weapons crossfades — never a blackout */
    opacity:1;
    transition:opacity 260ms var(--ease);
}
.stage.is-swapping .stage__sprite{ opacity:0; }

/* visibility de kapaniyor: yalniz opacity:0 iken spinner sonsuza kadar donuyor
   (bos compositor isi) ve "Loading" metni erisilebilirlik agacinda kaliyordu. */
.stage__loader{
    position:absolute; inset:0; z-index:4;
    display:flex; align-items:center; justify-content:center; gap:12px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 180ms var(--ease), visibility 0s linear 180ms;
    font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--fg-3);
}
.stage.is-loading .stage__loader{ opacity:1; visibility:visible; transition-delay:0s; }
.stage__spin{
    width:22px; height:22px;
    border:2px solid rgba(0,212,200,.2);
    border-top-color:var(--cyan);
    border-radius:50%;
    animation:vault-spin .8s linear infinite;
}
@keyframes vault-spin{ to{ transform:rotate(360deg); } }

.stage__hud{
    position:absolute; left:14px; top:14px; z-index:3;
    display:flex; align-items:center; gap:8px;
    font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--cyan);
    pointer-events:none;
}
.stage__reset{
    position:absolute; right:12px; bottom:12px; z-index:3;
    min-height:44px; padding:10px 16px;
    background:rgba(3,5,10,.78);
    border:1px solid var(--line-2);
    color:var(--fg-2);
    font-family:var(--font-display);
    font-size:.75rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    cursor:pointer;
    transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.stage__reset:hover{ color:var(--cyan); border-color:var(--cyan); }
.stage__hint{
    margin-top:10px;
    font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--fg-3);
}
@media (max-width:640px){
    .stage{ min-height:210px; }
}

/* ------------------------------------------------------------------ INFO */
.winfo{
    margin-top:14px;
    display:grid; gap:clamp(16px,2.5vw,30px);
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:start;
    padding:clamp(20px,2.5vw,26px);
    background:var(--bg-2);
    border:1px solid var(--line);
}
@media (max-width:820px){ .winfo{ grid-template-columns:1fr; } }

.winfo__type{
    font-size:.75rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--cyan);
}
.winfo h2{
    font-size:clamp(1.4rem,2.6vw,2rem);
    text-transform:uppercase;
    margin:6px 0 10px;
}
.winfo p{ margin:0; color:var(--fg-2); font-size:.9375rem; max-width:46ch; }

.wstats{
    display:grid; gap:14px 22px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:420px){ .wstats{ grid-template-columns:1fr; } }
.wstat__top{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    margin-bottom:6px;
}
.wstat__k{ font-size:.75rem; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3); }
.wstat__v{
    font-family:var(--font-display); font-weight:700;
    font-size:.875rem; color:var(--tone);
}
.wstat__track{ height:6px; background:#000; border:1px solid var(--line); overflow:hidden; }
.wstat__fill{ height:100%; width:0; background:var(--tone); transition:width 480ms var(--ease); }
.wstat--dmg  { --tone:var(--danger-hard); }
.wstat--rate { --tone:var(--amber); }
.wstat--ergo { --tone:var(--cyan); }
.wstat--mag  { --tone:var(--fg-2); }