.app-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2300;
    height: calc(var(--app-head) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(12, 12, 14, 0.96);
    color: var(--ap-paper);
    backdrop-filter: blur(16px);
    pointer-events: none;
}

.app-topbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--shell-accent, var(--yuma-action)) 50%, transparent);
    opacity: 0.72;
}

.app-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 18px auto;
    grid-template-rows: 1.5rem 0.75rem;
    align-items: center;
    column-gap: 7px;
    text-align: start;
}

.app-identity-index {
    grid-row: 1 / 3;
    width: 18px;
    height: 36px;
    display: grid;
    place-items: center;
    border-inline-end: 1px solid var(--shell-accent, var(--yuma-action));
    color: var(--shell-accent, var(--yuma-action));
    font-family: ui-monospace, monospace;
    font-size: 0.5rem;
    writing-mode: vertical-rl;
}

.app-identity strong {
    font-family: "Lalezar", "Readex Pro", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}

.app-identity small {
    overflow: hidden;
    color: #818188;
    font-size: 0.4375rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-view-context {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a9a9b0;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.app-view-context i {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
    border: 1px solid var(--shell-accent, var(--yuma-action));
    border-radius: 50%;
}

.app-view-context i::before,
.app-view-context i::after {
    content: "";
    position: absolute;
    background: var(--shell-accent, var(--yuma-action));
}
.app-view-context i::before { inset: 50% -5px auto; height: 1px; }
.app-view-context i::after { inset: -5px 50% -5px auto; width: 1px; }

body[data-shell-view="dex"] { --shell-accent: var(--ap-magenta); }
body[data-shell-view="shop"] { --shell-accent: var(--ap-gold); }
body[data-shell-view="account"] { --shell-accent: var(--ap-blue); }
body.round-active { --shell-accent: var(--ap-mint); }

.app-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 2200;
    height: calc(var(--app-nav) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(16, 16, 19, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(16px);
    pointer-events: auto;
}

.app-bottom-nav button {
    position: relative;
    min-width: var(--touch);
    min-height: var(--touch);
    margin: 0;
    padding: 8px 4px 6px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #a3a3aa;
    box-shadow: none;
    font-size: 0.625rem;
}

.app-bottom-nav button::before {
    content: "";
    position: absolute;
    inset: 0 34% auto;
    height: 2px;
    background: transparent;
}

.app-bottom-nav button[aria-current="page"] { color: var(--ap-mint); }
.app-bottom-nav button[aria-current="page"]::before { background: var(--ap-mint); }
.app-bottom-nav button[data-app-view="hunt"][aria-current="page"] { color: var(--yuma-action); }
.app-bottom-nav button[data-app-view="hunt"][aria-current="page"]::before { background: var(--yuma-action); }
.app-bottom-nav button[data-app-view="dex"][aria-current="page"] { color: var(--ap-magenta); }
.app-bottom-nav button[data-app-view="dex"][aria-current="page"]::before { background: var(--ap-magenta); }
.app-bottom-nav button[data-app-view="account"][aria-current="page"] { color: var(--ap-blue); }
.app-bottom-nav button[data-app-view="account"][aria-current="page"]::before { background: var(--ap-blue); }
.app-bottom-nav button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}
.app-bottom-nav button:focus-visible svg { filter: drop-shadow(0 0 5px currentColor); }

.app-bottom-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.screen {
    position: fixed;
    inset: calc(var(--app-head) + env(safe-area-inset-top)) 0 calc(var(--app-nav) + env(safe-area-inset-bottom));
    z-index: 100;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--ap-ink);
    color: var(--ap-paper);
    text-align: start;
    touch-action: pan-y pinch-zoom;
}

/* Consent is a one-time game sheet, not a floating website banner. */
.privacy-consent {
    inset: auto max(12px, env(safe-area-inset-right)) calc(var(--app-nav) + env(safe-area-inset-bottom) + 10px) max(12px, env(safe-area-inset-left));
    width: min(430px, calc(100vw - 24px));
    max-width: none;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid var(--yuma-action);
    border-radius: 2px;
    background: rgba(23, 23, 25, 0.97);
    box-shadow: 0 -12px 42px rgba(0, 0, 0, 0.44);
    color: #d8d8dc;
    font-size: 0.6875rem;
    line-height: 1.55;
}

.privacy-consent p { margin: 0 0 10px; }
.privacy-consent a { color: var(--ap-mint); }
.privacy-consent div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.privacy-consent button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--ap-paper);
    box-shadow: none;
    font-size: 0.625rem;
}
.privacy-consent .privacy-accept { background: var(--yuma-action); border-color: var(--yuma-action); color: var(--ap-paper); }

.screen::before,
.screen::after { display: none; }
.screen > * { flex-shrink: 0; }

#app-loading-screen,
#auth-screen,
#camera-error-screen,
#boss-recovery-screen,
#ghost-load-recovery-screen,
#resume-countdown-screen {
    inset: 0;
    z-index: 3000;
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

body.round-active #ui-layer {
    top: calc(var(--app-head) + env(safe-area-inset-top));
    bottom: calc(var(--app-nav) + env(safe-area-inset-bottom));
    width: 100%;
    height: auto;
}

body.round-active #webcam-feed,
body.round-active #camera-fallback-bg,
body.round-active #encounter-shadow,
body.round-active a-scene {
    top: calc(var(--app-head) + env(safe-area-inset-top));
    bottom: calc(var(--app-nav) + env(safe-area-inset-bottom));
    /* A video is a replaced element: auto uses its intrinsic aspect ratio
       instead of stretching between top/bottom like the scene and overlays. */
    height: calc(100% - var(--app-head) - var(--app-nav) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

body.shell-panel-open #ui-layer { visibility: hidden; }

@media (orientation: landscape) and (max-height: 520px) {
    :root { --app-head: 44px; --app-nav: 58px; }
    .app-topbar { padding-inline: max(10px, env(safe-area-inset-left)); }
    .app-identity { grid-template-rows: 20px 10px; }
    .app-identity img { width: 28px; height: 28px; }
    .app-identity strong { font-size: 1.3125rem; }
    .app-bottom-nav button { grid-auto-flow: column; gap: 7px; padding: 3px; }
    .app-bottom-nav svg { width: 18px; height: 18px; }
}