/*
 * shell.css — Shared "app chrome" reused by every lobby-adjacent page
 * (Lobby, Shop, and whatever's ported next): full-bleed screen background,
 * top HUD (brand + currency chips + logout), and the bottom 6-slot hotbar +
 * floating center button. Extracted out of lobby.css so new pages get the
 * exact same color/tone (tan sprites, dark solid backdrop) automatically
 * instead of by copy-paste — see js/shell.js for the HTML generators that
 * pair with these classes.
 */

.app-screen {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.app-bg {
    /* 2026-09-09: switched from a flat color to global_bg.png (a warm amber
       wave gradient) per explicit request — "jadikan global_bg.png sebagai
       background semua halaman". Shared by every page via this one class
       (each page's own shellView() renders <div class="app-bg">), so this
       single rule is the only thing that needed to change. The old solid
       #1c1006 stays as a background-color fallback (shows briefly before
       the image decodes, and protects against a failed image load) — same
       deep warm brown, on-palette either way.
       Outpost's map view is the one explicit exception ("kecuali map di
       outpost") — it already paints its OWN opaque background-image
       (bg_map.png) on .op-map-canvas, a separate element stacked above
       .app-bg with its own z-index, so it already fully covers this any
       time the map is showing — no extra exclusion logic needed here. */
    position: absolute; inset: 0;
    background-color: #1c1006;
    background-image: url('../bg/global_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.app-loading {
    position: relative; z-index: 5;
    margin: auto;
    color: rgba(255,232,160,.6);
    font-size: 13px; letter-spacing: 3px;
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */

/* Position matched to Lobby's own top bar (lobby.css .lb2-topbar): the
   currency chips sit 18px from the top and 24px from the right edge,
   top-aligned, gap 9px — identical on every page that shows currency.
   `min-height` (not a fixed height) so wrapped chips on a narrow screen
   grow the bar instead of clipping; on normal screens it stays 64px so
   nothing below shifts. */
.app-hud {
    position: relative; z-index: 3; flex-shrink: 0;
    min-height: 64px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px 24px 0;
    background: none;
}
.app-hud-left { display: flex; align-items: center; gap: 12px; }
.app-brand { color: rgba(200,130,40,.7); font-size: 12px; letter-spacing: 3px; font-weight: 700; }
.app-hud-right {
    display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; justify-content: flex-end;
    margin-left: auto;   /* stays pinned right even if .app-hud-left is empty on mobile */
}

/* 2026-09-09: restyled to match Lobby's own currency chips (.lb2-chip in
   lobby.css) — was a currency_bg.png sprite-background pill with a
   stacked label-over-value layout; now the same flat dark pill + colored
   border look, same icon/value/label row order, so the HUD reads as one
   consistent chip design across every page instead of Lobby looking
   different from everywhere else. */
/* Metrics kept identical to lobby.css's .lb2-chip so a chip looks the same
   whichever page you're on, not just sits in the same place. */
.app-chip {
    display: flex; align-items: center; gap: 7px;
    background: rgba(0,0,0,.4); border: 1.5px solid var(--chip-color, rgba(255,216,138,.25));
    border-radius: 999px; padding: 7px 15px 7px 11px;
}
.app-chip .ic {
    width: 20px; height: 20px; flex-shrink: 0;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    image-rendering: pixelated;
}
.app-chip .val { font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--c-cream); }
.app-chip .lbl { font-size: 10.5px; letter-spacing: .5px; color: rgba(255,232,160,.5); }

.app-logout {
    color: rgba(200,140,60,.6); font-size: 12.5px; cursor: pointer;
    border: 1px solid rgba(200,140,60,.3); border-radius: 5px;
    padding: 6px 12px;
    transition: color .15s, border-color .15s;
}
.app-logout:hover { color: #f0883e; border-color: rgba(240,136,62,.6); }

/* Entry point to the Profile page (js/pages/profile.js) — reachable from
   every page's HUD. */
.app-profile-btn {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(200,140,60,.7); font-size: 15px; cursor: pointer;
    border: 1px solid rgba(200,140,60,.3);
    transition: color .15s, border-color .15s, background .15s;
}
.app-profile-btn:hover { color: #f0883e; border-color: rgba(240,136,62,.6); background: rgba(240,136,62,.08); }

/* ── Bottom bar: back-to-Lobby only ──────────────────────────────────────
 * REPLACED the old 6-slot hotbar (bottombar_trimmed.png) + floating center
 * play/home button on 2026-09-09 ("hilangkan bottom barnya karena tidak
 * lagi digunakan... beri tombol back saja") — once Lobby's card-stack menu
 * became the app's real navigation hub (see [[project_new_ui_migration]]'s
 * Lobby redesign section), those 6 icons were pure duplicate routes one
 * tap away from Lobby already, and the center button's 'play' mode had
 * been fully dead code since Lobby itself stopped calling
 * navBarHtml()/wireShell() during that same redesign. `.app-nav-wrap`
 * kept as the outer wrapper class name (only its CONTENTS changed) since
 * outpost.js hides/shows it by that selector for its fullscreen-map mode.
 * ────────────────────────────────────────────────────────────────────────── */

.app-nav-wrap {
    position: relative; z-index: 3; flex-shrink: 0;
    /* Flush against the actual bottom edge — env() adds the iOS home-indicator
       safe-area inset where applicable, 0 elsewhere. */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: none;
}

.app-back-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 220px; margin: 0 auto;
    background-image: url('../bg/UI/Sprite sheets/button_default_bg.png');
    background-color: transparent;
    background-size: 100% 100%; background-repeat: no-repeat;
    color: #4a2f12; font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px;
    padding: 11px 14px; cursor: pointer;
    transition: filter .15s, transform .15s;
}
.app-back-bar svg { width: 16px; height: 16px; flex-shrink: 0; }
.app-back-bar:hover { filter: brightness(1.08); transform: translateY(-2px); }
.app-back-bar:active { transform: translateY(0); }

@container (max-width: 720px) {
    .app-brand { display: none; }
}
@container (max-width: 480px) {
    .app-hud { padding: 12px 14px 0; }   /* matches lobby.css's narrow .lb2-topbar */
}

/* ── Generic reusable primitives ─────────────────────────────────────────────
 * Shared by every feature page (Equipment/Inventory/Material/Fuse/Outpost/...)
 * so they don't each re-declare the same tan-panel/card/modal/toast rules.
 * Page-specific CSS files should reach for these first before inventing a
 * new one-off pattern.
 * ────────────────────────────────────────────────────────────────────────── */

.ui-panel {
    border-style: solid; border-width: 20px;
    border-image-source: url('../bg/UI/Sprite sheets/field_bg_input.png');
    border-image-slice: 16 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    color: #3a2410;
}
.ui-scroll { overflow-y: auto; scrollbar-width: none; }
.ui-scroll::-webkit-scrollbar { display: none; }

.ui-section-label { font-size: 11.5px; letter-spacing: 3px; font-weight: 700; color: #8a6a48; margin-bottom: 10px; }

.ui-tabs { display: flex; gap: 6px; }
.ui-tab-btn {
    flex: 1; text-align: center; padding: 9px 6px; border-radius: 8px; cursor: pointer;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
    color: #8a6a48; background: rgba(58,36,16,.08);
    transition: background .15s, color .15s;
}
.ui-tab-btn.active { background: rgba(200,100,26,.2); color: #c8641a; }

.ui-input {
    background: rgba(58,36,16,.08); border: 1px solid rgba(58,36,16,.2);
    border-radius: 7px; color: #2c1a08; padding: 9px 12px; font-size: 12.5px; outline: none;
}
.ui-input::placeholder { color: rgba(58,36,16,.45); }
.ui-input:focus { border-color: rgba(200,100,26,.5); }

.ui-btn {
    background-image: url('../bg/UI/Sprite sheets/button_default_bg.png');
    background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat;
    border: none; color: #4a2f12; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px;
    padding: 9px 14px; cursor: pointer; transition: filter .15s;
}
.ui-btn:hover:not(:disabled) { filter: brightness(1.06); }
.ui-btn:disabled { opacity: .5; cursor: default; }
/* Accent variant for the one primary "do this" action in a view — solid
   orange, same accent used for the XP pip bar / active tabs elsewhere. */
.ui-btn-accent {
    background-image: none;
    background: linear-gradient(180deg,#c8641a,#8a4308);
    color: #fff8ec;
}

.ui-card {
    background: rgba(58,36,16,.06); border: 1px solid rgba(58,36,16,.15);
    border-radius: 10px; padding: 12px 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    transition: transform .15s, background .15s;
}
.ui-card:hover { transform: translateY(-3px); background: rgba(58,36,16,.1); }
.ui-card.active { border-color: rgba(200,100,26,.5); box-shadow: 0 0 0 1px rgba(200,100,26,.3); }

.ui-card-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    background-image: url('../bg/UI/Sprite sheets/slot_empty.png');
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.ui-card-icon img { width: 70%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.ui-card-icon.filled { background-image: url('../bg/UI/Sprite sheets/slot_filled.png'); }

.ui-grade-pill { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: #fff8ec; padding: 1px 8px; border-radius: 3px; }

/* Retro segmented pip meter (util.js's pipBar()) — built from
   pip_empty.png/pip_fill.png (cropped from a 3-color segmented meter in
   Sprite sheet for Basic Pack.png: empty/green/pink). Every bar's fill
   color is the SAME green pip run through CSS hue-rotate rather than a
   separate asset per stat: atk -47° (~orange #f0883e), hp -72° (~red
   #e05050), def +133° (~blue #2880c0), spd +65° (~green #40b060), exp same
   -47° as atk (shared brand accent), upgrade same -47° too (equipment.css's
   level bar — same accent as .ui-btn-accent's orange), chance +193° (~purple
   #7c3fd1 — fuse.css's tier-upgrade chance meter, same purple already used
   for its chance-box/result accents). Originally lobby-only (profile card's
   XP/ATK/HP/DEF/SPD bars); promoted here once equipment.js and fuse.js
   needed the same meter for their own progress bars. */
.ui-pip-bar { flex: 1; display: flex; gap: 1px; min-width: 0; }
.ui-pip-bar .pip {
    flex: 1; height: 14px;
    background-image: url('../bg/UI/Sprite sheets/pip_empty.png');
    background-size: 100% 100%; background-repeat: no-repeat;
    image-rendering: pixelated;
}
.ui-pip-bar .pip.filled { background-image: url('../bg/UI/Sprite sheets/pip_fill.png'); }
.ui-pip-bar[data-color="atk"] .pip.filled { filter: hue-rotate(-47deg); }
.ui-pip-bar[data-color="hp"]  .pip.filled { filter: hue-rotate(-72deg); }
.ui-pip-bar[data-color="def"] .pip.filled { filter: hue-rotate(133deg); }
.ui-pip-bar[data-color="spd"] .pip.filled { filter: hue-rotate(65deg); }
.ui-pip-bar[data-color="exp"] .pip.filled { filter: hue-rotate(-47deg); }
.ui-pip-bar[data-color="upgrade"] .pip.filled { filter: hue-rotate(-47deg); }
.ui-pip-bar[data-color="chance"] .pip.filled { filter: hue-rotate(193deg); }

.ui-msg { text-align: center; padding: 60px 0; color: rgba(138,106,72,.6); font-size: 12px; letter-spacing: 2px; }
.ui-msg-error { color: #a3291d; }

.ui-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10,5,2,.75);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ui-modal {
    position: relative;
    width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto;
    border-style: solid; border-width: 20px;
    border-image-source: url('../bg/UI/Sprite sheets/field_bg_input.png');
    border-image-slice: 16 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    padding: 18px 16px 20px;
    color: #3a2410;
    scrollbar-width: none;
}
.ui-modal::-webkit-scrollbar { display: none; }
.ui-modal-close {
    position: absolute; top: -6px; right: -6px;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(58,36,16,.85); color: #f0d888; cursor: pointer; font-size: 12px;
}

.ui-toast {
    position: fixed; bottom: 96px; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(20,10,4,.95); border: 1px solid rgba(200,100,26,.5); border-radius: 7px;
    padding: 10px 22px; color: #ffe088; font-size: 12px; letter-spacing: 1px;
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
    z-index: 999; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.ui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ui-toast-success { border-color: rgba(43,138,62,.6); color: #6fe090; }
.ui-toast-error   { border-color: rgba(163,41,29,.6); color: #f08a80; }