/* ═══════════════════════════════════════════════════════════════════════
   SinSpace — Game UI Design System
   Extracted from UIConceptsExample for reuse across all game pages
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panels ──────────────────────────────────────────────────────────── */
.gp { background:rgba(0,0,0,0.5); border:1px solid rgba(var(--primary-rgb),.4); border-top:2px solid rgb(var(--primary-rgb)); }
.gp-d { border-color:rgba(var(--danger-rgb),.4); border-top:2px solid rgb(var(--danger-rgb)); }
.gp-s { border-color:rgba(var(--success-rgb),.4); border-top:2px solid rgb(var(--success-rgb)); }
.gp-i { border-color:rgba(var(--info-rgb),.4); border-top:2px solid rgb(var(--info-rgb)); }
.gp-w { border-color:rgba(var(--warning-rgb),.4); border-top:2px solid rgb(var(--warning-rgb)); }
.gp-head { background:rgba(var(--primary-rgb),.14); padding:4px 10px; font-size:.53rem; letter-spacing:.18em; color:rgb(var(--primary-rgb)); text-transform:uppercase; border-bottom:1px solid rgba(var(--primary-rgb),.35); }
.gp-head-d { background:rgba(var(--danger-rgb),.14); color:rgb(var(--danger-rgb)); border-bottom-color:rgba(var(--danger-rgb),.35); }
.gp-head-s { background:rgba(var(--success-rgb),.14); color:rgb(var(--success-rgb)); border-bottom-color:rgba(var(--success-rgb),.35); }
.gp-head-w { background:rgba(var(--warning-rgb),.14); color:rgb(var(--warning-rgb)); border-bottom-color:rgba(var(--warning-rgb),.35); }
.gp-head-i { background:rgba(var(--info-rgb),.14); color:rgb(var(--info-rgb)); border-bottom-color:rgba(var(--info-rgb),.35); }
.gp-body { padding:8px 10px; }
.gp-body-0 { padding:0; }
.gp-body-sm { padding:5px 10px; }

/* ── Stat labels / values ────────────────────────────────────────────── */
.gsl { font-size:.5rem; letter-spacing:.15em; color:rgba(255,255,255,.5); text-transform:uppercase; display:block; margin-bottom:2px; }
.gsv { font-weight:900; line-height:1; letter-spacing:-.01em; }

/* ── Progress bars ───────────────────────────────────────────────────── */
.g-bar-track { background:rgba(255,255,255,.1); }
.g-bar-fill-g { height:100%; background:rgb(var(--success-rgb)); transition:width .3s ease; }
.g-bar-fill-i { height:100%; background:rgb(var(--info-rgb)); transition:width .3s ease; }
.g-bar-fill-p { height:100%; background:rgb(var(--primary-rgb)); transition:width .3s ease; }
.g-bar-fill-w { height:100%; background:rgb(var(--warning-rgb)); transition:width .3s ease; }
.g-bar-fill-d { height:100%; background:rgb(var(--danger-rgb)); transition:width .3s ease; }
.g-bar-fill-s { height:100%; background:rgba(255,255,255,.5); transition:width .3s ease; }

/* ── Section headers ─────────────────────────────────────────────────── */
.g-sec { display:flex; align-items:center; gap:10px; margin:28px 0 10px; }
.g-sec:first-child { margin-top:8px; }
.g-sec-pip { width:3px; height:20px; background:rgb(var(--primary-rgb)); flex-shrink:0; }
.g-sec-label { font-size:.62rem; letter-spacing:.22em; font-weight:700; color:rgb(var(--primary-rgb)); text-transform:uppercase; white-space:nowrap; }
.g-sec-sub { font-size:.48rem; letter-spacing:.1em; color:rgba(255,255,255,.4); text-transform:uppercase; white-space:nowrap; }
.g-sec-line { flex:1; height:1px; background:linear-gradient(90deg,rgba(var(--primary-rgb),.5),transparent); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.g-table { font-size:.8rem; width:100%; border-collapse:collapse; }
.g-table th { font-size:.48rem; letter-spacing:.12em; color:rgba(255,255,255,.5); text-transform:uppercase; padding:5px 10px 3px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:400; }
.g-table td { padding:5px 10px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.g-table tr:last-child td { border-bottom:none; }
.g-table tr:hover td { background:rgba(var(--primary-rgb),.07); }

/* ── Attribute rows ──────────────────────────────────────────────────── */
.attr-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-left:2px solid rgb(var(--primary-rgb)); background:rgba(var(--primary-rgb),.05); margin-bottom:2px; }

/* ── Tags / badges ───────────────────────────────────────────────────── */
.tag { font-size:.58rem; letter-spacing:.05em; padding:1px 7px; display:inline-block; }
.tag-p { color:rgb(var(--primary-rgb)); border:1px solid rgba(var(--primary-rgb),.6); background:rgba(var(--primary-rgb),.12); }
.tag-g { color:rgb(var(--success-rgb)); border:1px solid rgba(var(--success-rgb),.6); background:rgba(var(--success-rgb),.12); }
.tag-d { color:rgb(var(--danger-rgb)); border:1px solid rgba(var(--danger-rgb),.6); background:rgba(var(--danger-rgb),.12); }
.tag-i { color:rgb(var(--info-rgb)); border:1px solid rgba(var(--info-rgb),.6); background:rgba(var(--info-rgb),.12); }
.tag-w { color:rgb(var(--warning-rgb)); border:1px solid rgba(var(--warning-rgb),.6); background:rgba(var(--warning-rgb),.12); }
.tag-s { color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); }

/* ── Stat tiles ──────────────────────────────────────────────────────── */
.stat-tile { background:rgba(0,0,0,0.5); border:1px solid rgba(var(--primary-rgb),.4); border-top:2px solid rgb(var(--primary-rgb)); padding:10px 12px; text-align:center; }

/* ── Vertical divider ────────────────────────────────────────────────── */
.gp-vdiv { width:1px; background:rgba(var(--primary-rgb),.35); align-self:stretch; flex-shrink:0; margin:0 2px; }

/* ── Page header ─────────────────────────────────────────────────────── */
.g-page-header { border-bottom:1px solid rgba(var(--primary-rgb),.2); padding-bottom:10px; margin-bottom:4px; margin-top:8px; }
.g-page-header-super { font-size:.5rem; letter-spacing:.22em; color:rgba(var(--primary-rgb),.4); text-transform:uppercase; }
.g-page-header-title { font-size:1.1rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin:3px 0 2px; line-height:1; }
.g-page-header-sub { font-size:.55rem; opacity:.28; letter-spacing:.06em; text-transform:uppercase; }

/* ── Character sub-nav ───────────────────────────────────────────────── */
.char-subnav { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:14px; }
.char-subnav-item {
    font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px;
    color:rgba(255,255,255,.35); text-decoration:none;
    border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);
    transition:color .12s, background .12s, border-color .12s;
}
.char-subnav-item:hover {
    color:rgba(var(--primary-rgb),.85); background:rgba(var(--primary-rgb),.06);
    border-color:rgba(var(--primary-rgb),.3);
}
.char-subnav-item.active {
    color:rgb(var(--primary-rgb)); background:rgba(var(--primary-rgb),.12);
    border-color:rgba(var(--primary-rgb),.5); border-top:2px solid rgb(var(--primary-rgb));
}

/* ── Form elements (game style) ──────────────────────────────────────── */
.g-input {
    background:rgba(255,255,255,.04); border:1px solid rgba(var(--primary-rgb),.25);
    color:rgba(255,255,255,.85); padding:5px 10px; font-size:.78rem;
    font-family:inherit; width:100%; outline:none;
    transition:border-color .12s, background .12s;
}
.g-input:focus {
    border-color:rgba(var(--primary-rgb),.6); background:rgba(var(--primary-rgb),.06);
}
.g-input::placeholder { color:rgba(255,255,255,.2); }
.g-input-label { font-size:.5rem; letter-spacing:.15em; color:rgba(255,255,255,.5); text-transform:uppercase; display:block; margin-bottom:4px; }
.g-select {
    background:rgba(255,255,255,.04); border:1px solid rgba(var(--primary-rgb),.25);
    color:rgba(255,255,255,.85); padding:5px 10px; font-size:.78rem;
    font-family:inherit; width:100%; outline:none;
}
.g-select:focus { border-color:rgba(var(--primary-rgb),.6); }
.g-textarea {
    background:rgba(255,255,255,.04); border:1px solid rgba(var(--primary-rgb),.25);
    color:rgba(255,255,255,.85); padding:8px 10px; font-size:.78rem;
    font-family:inherit; width:100%; outline:none; resize:vertical;
}
.g-textarea:focus { border-color:rgba(var(--primary-rgb),.6); background:rgba(var(--primary-rgb),.06); }

/* ── Buttons (game style) ────────────────────────────────────────────── */
.g-btn {
    font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 14px;
    border:1px solid rgba(var(--primary-rgb),.5); background:rgba(var(--primary-rgb),.1);
    color:rgb(var(--primary-rgb)); cursor:pointer; transition:all .12s;
}
.g-btn:hover { background:rgba(var(--primary-rgb),.2); border-color:rgba(var(--primary-rgb),.7); }
.g-btn-d { border-color:rgba(var(--danger-rgb),.5); background:rgba(var(--danger-rgb),.1); color:rgb(var(--danger-rgb)); }
.g-btn-d:hover { background:rgba(var(--danger-rgb),.2); border-color:rgba(var(--danger-rgb),.7); }
.g-btn-s { border-color:rgba(var(--success-rgb),.5); background:rgba(var(--success-rgb),.1); color:rgb(var(--success-rgb)); }
.g-btn-s:hover { background:rgba(var(--success-rgb),.2); border-color:rgba(var(--success-rgb),.7); }
.g-btn-ghost { border-color:rgba(255,255,255,.15); background:transparent; color:rgba(255,255,255,.5); }
.g-btn-ghost:hover { border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.7); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.g-breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.g-breadcrumb a { font-size:.5rem; letter-spacing:.1em; color:rgba(var(--primary-rgb),.5); text-transform:uppercase; text-decoration:none; transition:color .12s; }
.g-breadcrumb a:hover { color:rgb(var(--primary-rgb)); }
.g-breadcrumb-sep { font-size:.5rem; color:rgba(255,255,255,.15); }
.g-breadcrumb-current { font-size:.5rem; letter-spacing:.1em; color:rgba(255,255,255,.5); text-transform:uppercase; }

/* ── Ship cards ──────────────────────────────────────────────────────── */
.ship-card { background:rgba(0,0,0,0.5); border:1px solid rgba(var(--primary-rgb),.4); border-top:2px solid rgb(var(--primary-rgb)); }
.ship-card-warn { border-color:rgba(var(--warning-rgb),.4); border-top:2px solid rgb(var(--warning-rgb)); }
.ship-card-flag { border-color:rgba(var(--primary-rgb),.6); }

/* ── Overview dashboard cards ────────────────────────────────────────── */
.g-dash-card {
    background:rgba(0,0,0,0.5); border:1px solid rgba(var(--primary-rgb),.3);
    border-top:2px solid rgb(var(--primary-rgb)); padding:10px 12px;
    text-decoration:none; color:inherit; display:block;
    transition:border-color .15s, background .15s;
}
.g-dash-card:hover {
    border-color:rgba(var(--primary-rgb),.6); background:rgba(var(--primary-rgb),.06);
    color:inherit; text-decoration:none;
}
.g-dash-card-title { font-size:.52rem; letter-spacing:.18em; color:rgb(var(--primary-rgb)); text-transform:uppercase; margin-bottom:6px; }
.g-dash-card-value { font-weight:900; font-size:1.2rem; line-height:1; margin-bottom:3px; }
.g-dash-card-sub { font-size:.6rem; opacity:.35; letter-spacing:.04em; }

/* ── Inline option picker (replaces <select> dropdowns) ──────────────── */
.g-pick { display:inline-flex; flex-wrap:wrap; gap:3px; }
.g-pick-opt {
    font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px;
    border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);
    color:rgba(255,255,255,.35); cursor:pointer;
    transition:all .12s ease;
}
.g-pick-opt:hover { color:rgba(var(--primary-rgb),.7); border-color:rgba(var(--primary-rgb),.3); background:rgba(var(--primary-rgb),.04); }
.g-pick-opt.active {
    color:rgb(var(--primary-rgb)); border-color:rgba(var(--primary-rgb),.5);
    background:rgba(var(--primary-rgb),.12); border-top:2px solid rgb(var(--primary-rgb));
}

/* ── Section nav links (v3 overview) ─────────────────────────────────── */
.g-nav-link {
    display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:2px;
    text-decoration:none; color:inherit;
    border:1px solid rgba(255,255,255,.04); border-left:2px solid transparent;
    background:rgba(255,255,255,.01);
    transition:all .15s ease;
}
.g-nav-link:hover {
    border-left-color:rgb(var(--primary-rgb)); background:rgba(var(--primary-rgb),.06);
    color:inherit; text-decoration:none;
}
.g-nav-link:hover .g-nav-arrow { opacity:1; transform:translateX(2px); }
.g-nav-link-title { font-size:.78rem; font-weight:600; letter-spacing:.03em; }
.g-nav-link-sub { font-size:.58rem; opacity:.3; letter-spacing:.02em; margin-top:1px; }
.g-nav-arrow { font-size:.7rem; opacity:.15; margin-left:auto; transition:all .15s ease; flex-shrink:0; }

/* ── Confirmation modal ──────────────────────────────────────────────── */
.g-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:5000; display:flex; align-items:center; justify-content:center; }
.g-modal { background:rgb(8,10,16); border:1px solid rgba(var(--primary-rgb),.4); border-top:2px solid rgb(var(--primary-rgb)); min-width:320px; max-width:460px; }
.g-modal-head { background:rgba(var(--primary-rgb),.14); padding:6px 12px; font-size:.53rem; letter-spacing:.18em; color:rgb(var(--primary-rgb)); text-transform:uppercase; border-bottom:1px solid rgba(var(--primary-rgb),.35); }
.g-modal-body { padding:14px; }
.g-modal-actions { display:flex; gap:8px; justify-content:flex-end; padding:0 14px 14px; }