/* Integrační vrstva nad app.css a gui.css.
   Neruší herní tokeny. Dorovnává prioritu, desktop od 1100 px a formuláře. */

body.game-ui {
    padding-bottom: 0;
    background: var(--game-bg-deep);
    color: var(--game-text-primary);
}

body.game-ui .ui-maincol { min-width: 0; }

body.game-ui .ui-header { position: sticky; top: 0; z-index: 6; }

body.game-ui main.ui-content {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px 12px calc(var(--ui-nav) + env(safe-area-inset-bottom) + 16px);
    display: grid;
    gap: 12px;
}

body.game-ui h1,
body.game-ui h2,
body.game-ui h3,
body.game-ui p { overflow-wrap: break-word; }

body.game-ui .flash {
    margin: 12px 12px 0;
    padding: 8px 12px;
    border: 1px solid var(--game-line-muted);
    border-radius: 8px;
    background: var(--game-surface);
    font-size: 14px;
}

body.game-ui a.ui-button,
body.game-ui a.ui-filter,
body.game-ui .ui-bottom-nav a,
body.game-ui .ui-brand,
body.game-ui .ui-wallet { text-decoration: none; }

body.game-ui .ui-crop {
    display: block;
    position: relative;
    overflow: hidden;
    width: 64px;
    height: 64px;
}

body.game-ui .ui-crop[data-slot="head"] { --vx: 184; --vy: 54; --vw: 144; --vh: 120; }
body.game-ui .ui-crop[data-slot="body"] { --vx: 152; --vy: 147; --vw: 208; --vh: 193; }
body.game-ui .ui-crop[data-slot="left_arm"] { --vx: 83; --vy: 170; --vw: 113; --vh: 170; }
body.game-ui .ui-crop[data-slot="right_arm"] { --vx: 316; --vy: 170; --vw: 113; --vh: 170; }
body.game-ui .ui-crop[data-slot="legs"] { --vx: 165; --vy: 300; --vw: 182; --vh: 188; }
body.game-ui .ui-crop[data-slot="weapon_left"] { --vx: 38; --vy: 216; --vw: 110; --vh: 152; }
body.game-ui .ui-crop[data-slot="weapon_right"] { --vx: 364; --vy: 216; --vw: 110; --vh: 152; }

body.game-ui .ui-crop img {
    position: absolute;
    max-width: none;
    width: calc(51200% / var(--vw, 512));
    height: calc(51200% / var(--vh, 512));
    left: calc(var(--vx, 0) / var(--vw, 512) * -100%);
    top: calc(var(--vy, 0) / var(--vh, 512) * -100%);
}

body.game-ui .ui-slot .ui-crop { width: 100%; height: 100%; }

body.game-ui .ui-filters { flex-wrap: wrap; }

body.game-ui a.ui-filter[aria-current="page"] {
    color: var(--game-glow-cyan);
    border-color: var(--game-glow-cyan);
    background: color-mix(in srgb, var(--game-glow-cyan) 8%, var(--game-bg-deep));
}

body.game-ui .ui-hero { display: grid; gap: 12px; }

body.game-ui .ui-field input,
body.game-ui .ui-field select,
body.game-ui .ui-field textarea,
body.game-ui .ui-panel input:not([type="checkbox"]):not([type="radio"]),
body.game-ui .ui-panel select,
body.game-ui .ui-panel textarea,
body.game-ui .ui-stack input:not([type="checkbox"]):not([type="radio"]),
body.game-ui .ui-stack select {
    font-size: 16px;
}

body.game-ui label.ui-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 44px;
    font-weight: 400;
    color: var(--game-text-primary);
}

body.game-ui label.ui-check input {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    margin-top: 2px;
    padding: 0;
}

body.game-ui dialog.ui-dialog {
    max-height: calc(100dvh - 24px);
    overflow: auto;
}

body.game-ui details.ui-panel > summary,
body.game-ui .ui-disclosure {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

body.game-ui .ui-difficulties > form { display: contents; }

body.game-ui a.ui-item { grid-template-columns: 64px minmax(0, 1fr); color: inherit; }

body.game-ui .ui-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

body.game-ui .ui-ledger li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--game-line-muted) 65%, transparent);
}

body.game-ui .ui-skill[data-state="active"] { border-color: var(--game-glow-cyan); }
body.game-ui .ui-skill[data-state="ready"] { border-color: var(--game-signal-amber); }
body.game-ui .ui-skill[data-state="unlocked"] { border-color: var(--game-glow-blue); }
body.game-ui .ui-skill[data-state="locked"] { opacity: 0.72; }

body.game-ui .ui-status[data-state="active"] { color: var(--game-glow-cyan); }
body.game-ui .ui-status[data-state="equipped"] { color: var(--game-glow-cyan); }
body.game-ui .ui-status[data-state="unlocked"] { color: var(--game-glow-blue); }
body.game-ui .ui-status[data-state="available"] { color: var(--game-signal-amber); }
body.game-ui .ui-item[data-state="equipped"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-glow-cyan) 55%, transparent);
}

body.game-ui .button,
body.game-ui button.button,
body.game-ui a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--game-glow-cyan);
    border-radius: 8px 3px 8px 3px;
    color: var(--game-bg-deep);
    background: var(--game-glow-cyan);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

body.game-ui .button-quiet {
    color: var(--game-text-muted);
    background: transparent;
    border-color: var(--game-line-muted);
}

body.game-ui .slot-card,
body.game-ui .panel,
body.game-ui .offer,
body.game-ui .product {
    border: 1px solid var(--game-line-muted);
    border-radius: 12px 4px 12px 4px;
    background: var(--game-surface-high);
    box-shadow: inset 0 1px color-mix(in srgb, var(--game-metal-light) 16%, transparent);
}

body.game-ui .admin-jump {
    position: sticky;
    top: calc(var(--ui-hud, 56px) + env(safe-area-inset-top));
    z-index: 4;
    padding: 8px 0;
    background: color-mix(in srgb, var(--game-bg-deep) 92%, transparent);
}

body.game-ui .admin-loot {
    display: grid;
    gap: 12px;
}

body.game-ui #reward-preview {
    width: 100%;
    max-height: 240px;
    background: var(--game-bg-deep);
    border-radius: 8px;
}

body.game-ui .ui-combat .ui-robot {
    transition: transform 180ms ease-out;
}

body.game-ui .ui-combat .ui-robot.is-attacking[data-combat-robot="left"] {
    transform: translateX(16px);
}

body.game-ui .ui-combat .ui-robot.is-attacking[data-combat-robot="right"] {
    transform: translateX(-16px);
}

body.game-ui .ui-combat .ui-robot.is-opponent {
    filter: hue-rotate(160deg);
}

body.game-ui .ui-combat .ui-robot.is-hit {
    filter: brightness(1.7);
}

body.game-ui .ui-combat .ui-fx--hit[data-side="left"],
body.game-ui .ui-combat .ui-fx--shield[data-side="left"] {
    inset: 28% auto auto 18%;
}

body.game-ui .ui-combat .ui-fx--hit[data-side="right"],
body.game-ui .ui-combat .ui-fx--shield[data-side="right"] {
    inset: 28% 18% auto auto;
}

body.game-ui .ui-combat-line {
    position: relative;
    z-index: 2;
    min-height: 44px;
    margin-top: 118px;
    padding: 8px 12px;
}

body.game-ui .ui-omega-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.game-ui .ui-omega-phases li {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--line, #34536d);
    border-radius: 999px;
}

body.game-ui .ui-omega-phases li[aria-current="step"] {
    color: var(--accent, #2ad7d0);
    border-color: var(--accent, #2ad7d0);
}

body.game-ui .ui-item-art { position: relative; }

body.game-ui .ui-skill { grid-template-columns: 48px minmax(0, 1fr) auto; }
body.game-ui .ui-skill .ui-item-art { width: 48px; overflow: hidden; }
body.game-ui .ui-skill .ui-fx { max-width: none; width: 100%; height: 100%; }
body.game-ui .ui-skill .ui-item-action .ui-button { width: auto; min-width: 44px; }
body.game-ui .ui-filter img { width: 20px; height: 20px; object-fit: contain; }
body.game-ui .ui-item .ui-status { white-space: normal; }
body.game-ui .ui-job-title { min-width: 0; flex: 1; }

@media (max-width: 390px) {
    body.game-ui .ui-combat .ui-robot { width: 108px; height: 108px; }
}

@media (max-width: 359px) {
    body.game-ui main.ui-content { padding: 10px 10px calc(var(--ui-nav) + env(safe-area-inset-bottom) + 16px); gap: 10px; }
    body.game-ui .ui-item-art .ui-crop,
    body.game-ui a.ui-item { grid-template-columns: 48px minmax(0, 1fr); }
    body.game-ui .ui-item-art .ui-crop { width: 48px; height: 48px; }
}

@media (min-width: 768px) {
    body.game-ui .admin-loot { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 1100px) {
    body.game-ui.has-nav { display: block; }

    body.game-ui .ui-screen {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        max-width: none;
        min-height: 100svh;
        padding-bottom: 0;
    }

    body.game-ui .ui-header { grid-column: 1 / -1; }

    body.game-ui .ui-maincol {
        grid-column: 2;
        grid-row: 2;
        width: min(960px, 100%);
    }

    body.game-ui main.ui-content { padding: 24px; }

    body.game-ui .ui-bottom-nav {
        position: sticky;
        top: calc(var(--ui-hud, 56px) + env(safe-area-inset-top));
        left: auto;
        transform: none;
        grid-column: 1;
        grid-row: 2;
        width: auto;
        height: calc(100svh - var(--ui-hud, 56px) - env(safe-area-inset-top));
        display: flex;
        flex-direction: column;
        align-content: start;
        border-top: 0;
        border-right: 1px solid var(--game-line-muted);
        padding: 12px;
        background: var(--game-surface);
    }

    body.game-ui .ui-bottom-nav a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        min-height: 44px;
        padding: 0 12px;
        font-size: 14px;
        border-radius: 8px;
    }

    body.game-ui .ui-hero {
        grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
        align-items: stretch;
    }

    body.game-ui .ui-hero .ui-stage { height: auto; min-height: 280px; }
    body.game-ui .ui-hero .ui-stage > .ui-robot { width: 280px; height: 280px; left: calc(50% - 140px); }
}

body.game-ui .ui-crate-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.game-ui .ui-crate-grid > li {
    display: flex;
    min-width: 0;
}

body.game-ui .ui-crate-grid .ui-frame {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 92px;
    padding: 8px 2px;
}

body.game-ui .ui-crate-grid .ui-frame img {
    width: min(48px, 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

body.game-ui .ui-crate-count {
    color: var(--ui-rarity, var(--game-text-primary));
    font-size: 18px;
    line-height: 1;
}

body.game-ui a.ui-crate-pick:hover {
    filter: brightness(1.12);
}

body.game-ui .ui-crate-pick[aria-disabled="true"] {
    cursor: default;
}

body.game-ui .ui-chest-open {
    display: grid;
    gap: 12px;
    align-content: center;
    min-height: min(68svh, 520px);
}

body.game-ui .ui-chest-open .strip-window {
    height: min(42svh, 280px);
    margin: 0;
}

body.game-ui .ui-chest-open .strip-card {
    flex-basis: 132px;
    min-height: 108px;
    font-size: 15px;
}

body.game-ui .strip-card[data-rarity="common"] { --crate: var(--common); }
body.game-ui .strip-card[data-rarity="uncommon"] { --crate: var(--uncommon); }
body.game-ui .strip-card[data-rarity="rare"] { --crate: var(--rare); }
body.game-ui .strip-card[data-rarity="epic"] { --crate: var(--epic); }
body.game-ui .strip-card[data-rarity="credits"] { --crate: var(--accent); }

body.game-ui .ui-compare {
    display: grid;
    gap: 6px;
    margin: 8px 0;
}

body.game-ui .ui-compare p {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

body.game-ui .ui-compare ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

body.game-ui .ui-compare li[data-delta="up"] { color: var(--ok, #8ef0c4); }
body.game-ui .ui-compare li[data-delta="down"] { color: var(--danger, #fc6c76); }

@media (min-width: 480px) {
    body.game-ui .ui-compare ul { grid-template-columns: 1fr 1fr; }
}