/* Sandbox shell: warm graphite, brass and the approved realistic RPG artwork.
   Loaded after the layout's legacy styles. IDs/data-panel and behavior stay in _Layout.
   The unmodified 4 x 2 atlas is shared by every icon (one cached image request). */
:root {
    --shell-bg: #191814;
    --shell-surface: #24211b;
    --shell-raised: #2d2921;
    --shell-line: #574a32;
    --shell-brass: #c5a35e;
    --shell-light: #e9dec8;
    --shell-muted: #b3a58d;
    --shell-olive: #9eaf70;
    --shell-sage: #79a895;
    --shell-red: #bb6152;
    --dock-w: 56px;
    --bottom-panel-h: 68px;
    --panel-icon: 38px;
}

:is(.top-panel, .bottom-panel, .side-dock, .side-panel, .left-dock,
    .top-dropdown, .qa-dropdown, .dock-tip),
.side-panel .ag-page,
.side-panel .ag-page.ag-standalone {
    --ui-bg: var(--shell-bg);
    --panel-border-color: var(--shell-line);
    --g-gold: #ddc48e;
    --g-gold-hi: #f0dfba;
    --g-gold-mid: var(--shell-brass);
    --g-gold-dim: #6d5b39;
    --g-line: #363127;
    --g-well: #201e18;
    --g-well-2: var(--shell-surface);
    --ui-shadow: 0 8px 24px rgb(0 0 0 / 32%);
    --ui-glow: 0 0 0 transparent;
    --g-frame: inset 0 1px 0 rgb(233 222 200 / 4%);
    color: var(--shell-light);
}

:is(.top-panel, .bottom-panel, .side-dock, .side-panel, .left-dock) {
    background: var(--shell-bg);
    border-color: var(--shell-line);
    box-shadow: var(--g-frame), var(--ui-shadow);
}

/* The source atlas has a near-black studio backdrop. Lighten blends that backdrop
   into the dark button surface without recoloring the approved illustration. */
.shell-icon {
    display: block;
    flex: 0 0 auto;
    background-image: url("../images/ui/dock/navigation-realistic-v1.png");
    background-size: 400% 200%;
    background-repeat: no-repeat;
    background-position: var(--icon-x, 0%) var(--icon-y, 0%);
    mix-blend-mode: lighten;
    pointer-events: none;
}
.shell-icon--characters { --icon-x: 0%; --icon-y: 0%; }
.shell-icon--experience { --icon-x: 33.333333%; --icon-y: 0%; }
.shell-icon--loot { --icon-x: 66.666667%; --icon-y: 0%; }
.shell-icon--market { --icon-x: 100%; --icon-y: 0%; }
.shell-icon--bank { --icon-x: 0%; --icon-y: 100%; }
.shell-icon--equipment { --icon-x: 33.333333%; --icon-y: 100%; }
.shell-icon--map { --icon-x: 66.666667%; --icon-y: 100%; }
.shell-icon--info { --icon-x: 100%; --icon-y: 100%; }

.side-dock { gap: 6px; padding: 8px 5px; border-radius: 10px 0 0 10px; }
.dock-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 1px solid #443c2d;
    border-radius: 8px;
    background: linear-gradient(145deg, #26231c, #1b1915);
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 5%);
    isolation: isolate;
}
.dock-icon.shell-icon { width: 38px; height: 38px; }
:is(.dock-btn, .panel-btn) {
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
:is(.dock-btn, .panel-btn):hover,
:is(.dock-btn, .panel-btn):focus-visible {
    transform: none;
    border-color: var(--shell-brass);
    background: #302a1f;
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 8%);
}
:is(.dock-btn, .panel-btn).active {
    border-color: #bfa365;
    background: linear-gradient(145deg, #383221, #26231b);
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 10%);
}
.dock-btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 2px;
    border-radius: 2px;
    background: #e1c17c;
}
.dock-btn .dock-icon,
.dock-btn.active .dock-icon,
.panel-btn .panel-icon,
.panel-btn:is(:hover, :focus-visible, .active) .panel-icon {
    filter: none;
    transform: none;
    transition: none;
}
.bottom-panel { gap: 3px; }
.panel-btn {
    flex: 1 1 0;
    width: 20%;
    min-width: 0;
    height: 100%;
    gap: 1px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 1px 2px 3px;
    background: var(--shell-bg);
    isolation: isolate;
}
.panel-label {
    margin: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .5px;
    color: #c9bda6;
    text-shadow: none;
    text-transform: uppercase;
}
.panel-btn:is(:hover, :focus-visible, .active) .panel-label {
    color: #f0dfba;
    text-shadow: none;
}
.panel-btn.active::after { bottom: 0; height: 2px; background: #d1b171; }

/* Flexible name column keeps notifications reachable with a long nickname. */
.top-panel { gap: 10px; padding: 8px 12px; }
.top-left { flex: 1 1 auto; min-width: 0; gap: 10px; }
.top-right { flex: 0 0 auto; }
.home-tile { flex: 0 0 auto; }
.top-character-wrap {
    flex: 1 1 auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
}
.char-left { width: auto; min-width: 0; }
.name-row { display: flex; min-width: 0; }
.top-character__name { max-width: 100%; font-size: 14px; color: #e9d2a3; text-shadow: none; }
.top-avatar-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid #c5a35e;
    outline: 1px solid #50452f;
    outline-offset: 2px;
    background: #191814;
    box-shadow: none;
    isolation: isolate;
}
.shell-avatar-default { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.top-avatar-img[src$="/avatar_default.svg"] { visibility: hidden; }
.top-avatar-img[src$="/avatar_default.svg"] + .shell-avatar-default { display: block; }
.top-avatar-wrap .presence-dot.online { background: #98b975; box-shadow: 0 0 0 1px #1a1a14; animation: none; }
.top-avatar-wrap .presence-dot.offline { background: #a75446; box-shadow: none; }
.hpbar { height: 12px; border-color: #695039; border-radius: 4px; background: #32201b; box-shadow: none; }
.hpbar__fill { border-radius: 3px; background: linear-gradient(90deg, #8f382e, #bf5b46); }
.hpbar__text { color: #f8e9df; font-size: 9px; }
.char-right { padding: 4px 5px 4px 7px; border-color: #514630; border-radius: 8px; background: #222019; box-shadow: none; }
.inline-resource .amount { min-width: 34px; font-family: "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; color: inherit; }
.inline-resource img { width: 16px; height: 16px; filter: none; }
.resource.gold { color: #e1be72; text-shadow: none; }
.resource.silver { color: #cbd7df; text-shadow: none; }

:is(.home-tile, .qa-btn, .gold-trade-btn, .side-panel-back, .side-panel-x, .side-panel-info) {
    border: 1px solid #665537;
    background: linear-gradient(155deg, #302a1e, #201e18);
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 6%);
    color: #ddc48e;
    border-radius: 8px;
}
:is(.home-tile, .qa-btn, .gold-trade-btn, .side-panel-back, .side-panel-x, .side-panel-info):hover {
    border-color: #c5a35e;
    background: #393122;
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 10%);
    transform: none;
}
.home-tile svg, .home-tile:hover svg, .qa-icon { fill: #ddc48e; filter: drop-shadow(0 1px 1px #080806); }
.gold-trade-btn svg { stroke: #ddc48e; }
.side-panel-back__icon, .side-panel-x__icon, .side-panel-info__icon { stroke: #ddc48e; filter: none; }
.qa-badge { background: #ae4f43; color: #fff1e5; border: 2px solid #191814; box-shadow: none; }
.qa-dropdown, .top-dropdown { background: #201e18; border-color: #665537; border-radius: 10px; }
.qa-dd-head { border-color: #443d2d; }
.qa-item { border-color: #403b2f; }
.qa-item-title { color: #e9dec8; }
.qa-item-meta, .qa-subrow .qa-item-meta { color: #b3a58d; }
.qa-unread { background: rgb(197 163 94 / 7%); }
.qa-sev.success { color: #bfd099; background: rgb(142 157 96 / 14%); border-color: #6a7948; }
.qa-sev.info { color: #a5c5b8; border-color: #587a6b; background: rgb(121 168 149 / 10%); }
.qa-sev.error { color: #e9aa9c; background: rgb(174 81 68 / 13%); border-color: #855044; }
.top-dd-item { border-color: #4e432f; background: #28241c; }
.top-dd-item:hover { background: #322d21; }

/* Inherit the new surfaces in async-loaded player panels, including standalone partials. */
.side-panel .ag-page {
    --ag-text: #e9dec8;
    --ag-muted: #b3a58d;
    --ag-edge: #574a32;
    --ag-well-shadow: inset 0 1px 3px rgb(0 0 0 / 22%);
}
.side-panel .ag-page :is(.ag-head, .ag-card, .ag-stat) {
    border-color: #574a32;
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 3%);
}
.side-panel .ag-page .ag-card { background: #201e18; }
.side-panel .ag-page .ag-stat dt { color: var(--shell-muted); }
.side-panel .ag-page .ag-card-head { border-bottom-color: #3c362a; }
.side-panel .ag-page .chr-card--active { border-color: #a48c55; }
.side-panel .ag-page .ag-btn--primary {
    color: #211d14;
    border-color: #c6a86b;
    background: linear-gradient(180deg, #e0c486, #b59451);
    box-shadow: inset 0 1px 0 rgb(255 248 223 / 24%);
}
.side-panel .ag-page .ag-btn--danger { background: #502820; border-color: #854739; color: #efc2b6; }

/* Keep the notification reference's severity colors and clear circular symbols. */
.sbx-toast {
    color: #e9dec8;
    background: radial-gradient(circle at 0 0, var(--sbx-accent-soft), transparent 65%),
        linear-gradient(145deg, #29251d, #191814);
    border-color: #625136;
    border-left-color: var(--sbx-accent);
    box-shadow: inset 0 1px 0 rgb(255 245 213 / 4%), 0 10px 30px rgb(0 0 0 / 42%);
}
.sbx-toast--ok { --sbx-accent: #a2b36d; --sbx-accent-soft: rgb(142 157 96 / 16%); }
.sbx-toast--info { --sbx-accent: #89b4a1; --sbx-accent-soft: rgb(121 168 149 / 12%); }
.sbx-toast--trade { --sbx-accent: #d3af63; --sbx-accent-soft: rgb(197 163 94 / 15%); }
.sbx-toast--err { --sbx-accent: #c57763; --sbx-accent-soft: rgb(174 81 68 / 15%); }
.sbx-toast__title { color: #e2c991; }
.sbx-toast__msg { color: #ded4bf; }

:is(.dock-btn, .panel-btn, .home-tile, .qa-btn, .gold-trade-btn, .top-avatar-btn,
    .side-panel-back, .side-panel-x, .side-panel-info):focus-visible {
    outline: 2px solid #ead297;
    outline-offset: -3px;
}

/* Match the existing mobile breakpoint; retain the dock's hide/slide behavior. */
@media (max-width: 600px) {
    .top-panel { gap: 6px; padding: 8px; }
    .top-left { gap: 6px; }
    .top-avatar-btn { width: 36px; height: 36px; }
    .top-character-wrap { column-gap: 6px; }
    .top-character__name { font-size: 12px; }
    .char-left { min-width: 0; }
    .char-right { gap: 4px; padding: 3px 4px; }
    .inline-resource { gap: 3px; }
    .inline-resource .amount { min-width: 28px; font-size: 11px; }
    .gold-trade-btn { width: 26px; height: 26px; }
    .qa-btn { width: 32px; height: 32px; }
    .home-tile { width: 30px; height: 32px; }
    .bottom-panel { padding: 5px; gap: 2px; }
    .panel-label { font-size: 9px; letter-spacing: .25px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.dock-btn, .panel-btn, .home-tile, .qa-btn, .top-avatar-btn, .hpbar__fill) { transition: none; }
}