/* ============================================================
   Sunshine Lots - Phase 4 Auth UI
   Account bar (all pages) + login modal
   ============================================================ */

:root {
    --sl-bg-deep:     #0d0410;
    --sl-bg-purple:   #1a0820;
    --sl-bg-card:     #2B0F4A;
    --sl-gold:        #D4A017;
    --sl-gold-bright: #FFCC00;
    --sl-gold-soft:   rgba(212, 160, 23, 0.1);
    --sl-gold-mid:    rgba(212, 160, 23, 0.22);
    --sl-text:        #ffffff;
    --sl-text-dim:    rgba(255, 255, 255, 0.65);
    --sl-text-faint:  rgba(255, 255, 255, 0.4);
    --sl-error:       #FF6B35;
    --sl-success:     #5BD480;
    --sl-info:        #6FA8DC;
}

/* ============================================================
   ACCOUNT BANNER — top horizontal strip, all authenticated pages.
   The banner is fixed at the top of the viewport. Page content
   below is pushed down by --sl-bar-h via the rules at the end of
   this section so the banner never overlays game/arcade content.
   ============================================================ */

:root { --sl-bar-h: 52px; }

#sl-account-chip-wrap {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sl-bar-h);
    z-index: 1000000;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    display: none;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}
#sl-account-chip-wrap.sl-active { display: block; }

#sl-account-bar {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(43,15,74,0.98) 0%, rgba(26,8,32,0.98) 100%);
    border-bottom: 1.5px solid var(--sl-gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    color: var(--sl-text);
    font-size: 12px;
    box-sizing: border-box;
}

/* Sections never shrink — prevents number truncation in narrow viewports */
.sl-bar-section { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.sl-bar-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--sl-text-dim); white-space: nowrap;
}
.sl-bar-value {
    font-weight: 700; color: var(--sl-text); font-size: 15px;
    white-space: nowrap;
}
#sl-account-bar .sl-balance-value {
    font-variant-numeric: tabular-nums; font-size: 17px;
}
/* GC balance — gold */
#sl-account-bar .sl-balance-gc {
    color: #FFCC00;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.45);
}
/* SC balance — purple/sweep */
#sl-account-bar .sl-balance-sc {
    color: #C080FF;
    text-shadow: 0 0 8px rgba(180, 80, 255, 0.45);
}

/* Promo timer hidden — no longer used */
#sl-promo-timer { display: none; }

/* Bottom band — companion strip that hosts rotating promotional messages
   from /messages.json. Empty/no file → blank but still preserves layout. */
#sl-account-bar-bottom {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--sl-bar-h);
    z-index: 1000000;
    background: linear-gradient(0deg, rgba(43,15,74,0.98) 0%, rgba(26,8,32,0.98) 100%);
    border-top: 1.5px solid var(--sl-gold);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
    color: var(--sl-text);
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
body.sl-bar-active #sl-account-bar-bottom { display: flex; }
body.sl-bar-active #sl-account-bar-bottom {
    /* Centered single message that fades between values. The previous
       implementation used a left-to-right scrolling ticker; this version
       holds each message still in the center for full readability. */
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    overflow: hidden;
}

/* Centered message that swaps with a cross-fade. JS toggles the
   `.sl-message-out` class to drive the fade-out, then swaps textContent
   and removes the class so the new message fades back in. */
.sl-message-slot {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--sl-gold-bright);
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.35);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.sl-message-slot.sl-message-out {
    opacity: 0;
}

@media (max-width: 480px) {
    .sl-message-slot { font-size: 11px; letter-spacing: 0.3px; }
}

#sl-account-bar #sl-logout-btn {
    background: transparent;
    border: 1px solid var(--sl-gold-mid);
    color: var(--sl-gold);
    padding: 6px 12px; border-radius: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit; flex-shrink: 0;
}
#sl-account-bar #sl-logout-btn:hover,
#sl-account-bar #sl-logout-btn:active {
    background: var(--sl-gold-mid);
    color: var(--sl-gold-bright);
    border-color: var(--sl-gold-bright);
}

@keyframes sl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Buy-points chip default position (inline JS used to set top:18px; moved here
   so the bar-active override below can win without !important). */
#sl-buy-chip-wrap { top: 18px; }
body.sl-bar-active #sl-buy-chip-wrap { top: calc(var(--sl-bar-h) + 12px); }

/* ── BANNER-AWARE LAYOUT ────────────────────────────────────────────────────
   When the banner is visible, body gets `.sl-bar-active`. The banner takes
   `var(--sl-bar-h)` at the top of the viewport. Page content must use the
   REMAINING space, not 100vh.

   The trick: anything that uses 100vh internally (arcade-stage, game roots)
   needs to be told to use (100vh - bar height) instead. We do that by
   overriding the CSS values on the known wrappers. */

/* 1. Arcade landscape — wrapper is position:fixed inset:0, inner stage uses 100vh */
body.sl-bar-active #arcade-stage-wrapper {
    top: var(--sl-bar-h);
    bottom: var(--sl-bar-h);
    /* wrapper is now (viewport - 2*bar) tall, framed between the two banners */
}
body.sl-bar-active #arcade-stage {
    /* Replace 100vh with (100vh - 2*bar) so the 16:9 stage fits between the
       top banner and the bottom band. */
    width:  min(100vw, calc(100dvh - 2 * var(--sl-bar-h)) * 16 / 9);
    height: min(calc(100dvh - 2 * var(--sl-bar-h)), 100vw * 9 / 16);
}

/* 2. Arcade portrait — stage-wrapper switches to position:static and the
   document scrolls. Body padding-top reserves the bar's space; stage uses
   min-height: 100vh so we shrink that too. */
@media (orientation: portrait) {
    body.sl-bar-active {
        padding-top: var(--sl-bar-h);
        padding-bottom: var(--sl-bar-h);
        box-sizing: border-box;
    }
    body.sl-bar-active #arcade-stage-wrapper {
        top: 0;
        min-height: calc(100dvh - 2 * var(--sl-bar-h));
    }
    body.sl-bar-active #arcade-stage {
        min-height: calc(100dvh - 2 * var(--sl-bar-h));
        width: 100vw;
        height: auto;
    }
}

/* 3. Generic pages and games — pad the body itself. Pages whose root sizes
   to 100% (of body) will fit. Pages whose root uses 100vh need the override
   below. */
body.sl-bar-active {
    padding-top: var(--sl-bar-h);
    padding-bottom: var(--sl-bar-h);
    box-sizing: border-box;
}

/* 4. Game pages whose root is a position:fixed full-viewport container.
   Auth.js detects this at runtime (markGameRoots) and applies inline style to
   push the root down by the bar height. Inline is required because the games'
   own CSS targets the root by ID (#fs-reel-popup, etc.) — class-based rules
   here would be beaten by ID specificity. The .sl-game-root class below is
   kept as a marker only; the actual top/height are set inline. */

@media (max-width: 480px) {
    :root { --sl-bar-h: 48px; }
    #sl-account-bar { gap: 12px; padding: 0 12px; }
    .sl-bar-value { max-width: 140px; font-size: 14px; }
    .sl-bar-label { font-size: 10px; }
    #sl-account-bar .sl-balance-gc { font-size: 15px; }
    #sl-account-bar .sl-balance-sc { font-size: 15px; }
    #sl-account-bar #sl-logout-btn { padding: 5px 8px; font-size: 9px; }
}

/* ============================================================
   LOGIN BUTTON - small fixed button on game pages
   when NOT authenticated. Click goes to /arcade/.
   ============================================================ */

#sl-login-button {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 999998;
    background: var(--sl-gold);
    color: var(--sl-bg-deep);
    border: 1px solid var(--sl-gold-bright);
    padding: 8px 18px;
    border-radius: 6px;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 12px rgba(212, 160, 23, 0.4);
    display: none;
}

#sl-login-button.sl-active {
    display: block;
}

#sl-login-button:active {
    transform: translateY(1px);
}

/* ============================================================
   LOGIN MODAL - DISMISSIBLE TOAST-STYLE
   - Centered card that floats above content
   - Backdrop is semi-transparent (NOT a takeover)
   - Has X button to close (but blocks game actions until login)
   - Styled to match arcade tropical-deco aesthetic
   ============================================================ */

#sl-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    background: rgba(13, 4, 16, 0.55);
    z-index: 999998;
    display: none;
}

#sl-modal-backdrop.sl-active {
    display: block;
    animation: sl-fade-in 0.25s ease-out;
}

@keyframes sl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#sl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 380px;
    z-index: 999999;
    display: none;
    box-sizing: border-box;
    padding: 0 16px;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--sl-text);
}

#sl-modal.sl-active {
    display: block;
    animation: sl-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sl-slide-in {
    from { transform: translate(-50%, -45%); opacity: 0; }
    to   { transform: translate(-50%, -50%); opacity: 1; }
}

.sl-modal-card {
    position: relative;
    width: 100%;
    background: linear-gradient(160deg,
        rgba(43, 15, 74, 0.97) 0%,
        rgba(26, 8, 32, 0.98) 100%);
    border: 1.5px solid var(--sl-gold);
    border-radius: 12px;
    box-shadow:
        0 0 30px rgba(212, 160, 23, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.6);
    padding: 24px 22px 20px;
    box-sizing: border-box;
}

#sl-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--sl-text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
}

#sl-modal-close:hover,
#sl-modal-close:active {
    color: var(--sl-gold-bright);
    background: var(--sl-gold-soft);
}

#sl-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--sl-gold-bright);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(212, 160, 23, 0.4);
}

#sl-modal-subtitle {
    font-size: 12px;
    color: var(--sl-text-dim);
    margin-bottom: 18px;
    line-height: 1.45;
}

.sl-form-group {
    margin-bottom: 14px;
    text-align: left;
}

.sl-form-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sl-text-dim);
    margin-bottom: 6px;
}

.sl-form-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(212, 160, 23, 0.25);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--sl-text);
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.sl-form-input:focus {
    outline: none;
    border-color: var(--sl-gold);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 3px var(--sl-gold-soft);
}

.sl-form-input::placeholder {
    color: var(--sl-text-faint);
}

#sl-otp-input {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 8px;
    font-variant-numeric: tabular-nums;
}

.sl-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--sl-text-dim);
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.sl-terms-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 1px 0 0 0;
    accent-color: var(--sl-gold);
    cursor: pointer;
}

.sl-terms-row a {
    color: var(--sl-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sl-terms-row a:hover {
    color: var(--sl-gold-bright);
}

.sl-btn-primary {
    width: 100%;
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid var(--sl-gold-bright);
    background: linear-gradient(180deg, var(--sl-gold-bright) 0%, var(--sl-gold) 100%);
    color: var(--sl-bg-deep);
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 2px 10px rgba(212, 160, 23, 0.35);
}

.sl-btn-primary:hover:not(:disabled) {
    box-shadow: 0 2px 16px rgba(212, 160, 23, 0.5);
}

.sl-btn-primary:active {
    transform: translateY(1px);
}

.sl-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.sl-btn-secondary {
    background: transparent;
    border: 1px solid rgba(212, 160, 23, 0.3);
    color: var(--sl-text-dim);
    padding: 8px 14px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, border-color 0.15s;
}

.sl-btn-secondary:hover,
.sl-btn-secondary:active {
    color: var(--sl-gold-bright);
    border-color: var(--sl-gold);
}

.sl-message {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    display: none;
}

.sl-message.sl-active {
    display: block;
}

.sl-message.sl-error {
    background: rgba(255, 107, 53, 0.12);
    border: 1px solid rgba(255, 107, 53, 0.4);
    color: var(--sl-error);
}

.sl-message.sl-success {
    background: rgba(91, 212, 128, 0.12);
    border: 1px solid rgba(91, 212, 128, 0.4);
    color: var(--sl-success);
}

.sl-message.sl-info {
    background: rgba(111, 168, 220, 0.1);
    border: 1px solid rgba(111, 168, 220, 0.3);
    color: var(--sl-info);
}

.sl-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--sl-bg-deep);
    border-radius: 50%;
    animation: sl-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes sl-spin {
    to { transform: rotate(360deg); }
}

.sl-resend-row {
    margin-top: 12px;
    font-size: 11px;
    color: var(--sl-text-dim);
    text-align: center;
}

.sl-resend-link {
    color: var(--sl-info);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    font: inherit;
    padding: 0;
    margin-left: 4px;
}

.sl-resend-link:disabled {
    color: var(--sl-text-faint);
    cursor: not-allowed;
    text-decoration: none;
}

/* ============================================================
   RESPONSIVE - mobile tweaks
   ============================================================ */

@media (max-width: 480px) {
    #sl-modal-title  { font-size: 16px; }
    #sl-modal-subtitle { font-size: 11px; }
    #sl-account-panel { font-size: 11px; min-width: 200px; }
    .sl-panel-label   { font-size: 9px; }
}


/* Terms row — red highlight + shake when Create Account is hit without checking */
.sl-terms-row.sl-terms-error {
    outline:    2px solid rgba(255, 107, 53, 0.85);
    background: rgba(255, 107, 53, 0.09);
    border-radius: 5px;
    padding:    5px 8px;
    animation:  sl-terms-shake 0.45s ease;
}

@keyframes sl-terms-shake {
    0%, 100% { transform: translateX(0);   }
    20%, 60%  { transform: translateX(-5px); }
    40%, 80%  { transform: translateX(5px);  }
}

/* ============================================================
   MERGED SIGN-IN + REGISTER LAYOUT
   Both panels are visible simultaneously — register first,
   sign-in below. The .sl-tabs buttons are kept in the DOM
   for JS compatibility but hidden from view.

   When a step-2 panel (verify-email / reset-request / reset-code)
   is active, JS adds .sl-merged-step2 to #sl-modal — CSS then
   hides both merged panels and the divider so only the step-2
   panel is visible. No JS logic was changed.
   ============================================================ */

/* Hide the tab nav — both forms are always visible */
#sl-modal .sl-tabs {
    display: none !important;
}

/* Both main panels always shown — !important overrides JS inline display:none */
#sl-panel-signin,
#sl-panel-register {
    display: block !important;
}

/* Step-2 active: hide merged panels + divider (higher specificity beats the rule above) */
#sl-modal.sl-merged-step2 #sl-panel-signin,
#sl-modal.sl-merged-step2 #sl-panel-register,
#sl-modal.sl-merged-step2 #sl-merged-divider {
    display: none !important;
}

/* Modal card scrolls when both panels are stacked */
.sl-modal-card {
    max-height: calc(90dvh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 160, 23, 0.25) transparent;
}
.sl-modal-card::-webkit-scrollbar { width: 4px; }
.sl-modal-card::-webkit-scrollbar-track { background: transparent; }
.sl-modal-card::-webkit-scrollbar-thumb {
    background: rgba(212, 160, 23, 0.3);
    border-radius: 4px;
}

/* Divider between register and sign-in */
#sl-merged-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 20px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sl-merged-divider-line {
    flex: 1;
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.sl-merged-divider-text {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bottom padding so the Sign In button doesn't crowd the card edge */
#sl-panel-signin {
    padding-bottom: 4px;
}

.sl-registration-login {
    display: block;
    width: 100%;
    margin: -8px 0 14px;
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}
.sl-registration-login span {
    color: #FFCC00;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sl-registration-login:hover span {
    color: #fff2a8;
}

/* ============================================================
   PORTRAIT — no scrolling.
   Both forms must fit the viewport. We achieve this by:
   1. Removing max-height / overflow from the card.
   2. Hiding the promo banner inside the register panel (it
      still shows in the verify-email step-2 panel which has
      its own copy, so users see it at the right moment).
   3. Hiding the helper-text descriptions (tall, low value).
   4. Tightening all vertical spacing.
   ============================================================ */
@media (orientation: portrait) {

    /* No scroll — card grows to fit content */
    .sl-modal-card {
        max-height: none !important;
        overflow:   visible !important;
        padding: 16px 16px 10px;
    }

    /* Promo banner — kept visible but compacted to save ~25px in portrait */
    #sl-panel-register .sl-promo-banner {
        padding:       8px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }
    #sl-panel-register .sl-promo-banner > div:first-child  { font-size: 0.66rem !important; margin-bottom: 1px !important; }
    #sl-panel-register .sl-promo-banner > div:nth-child(2)  { font-size: 1.05rem !important; line-height: 1.1 !important; }
    #sl-panel-register .sl-promo-banner > div:last-child    { font-size: 0.72rem !important; margin-top: 2px !important; }

    /* Helper descriptions hidden — saves ~60px */
    #sl-register-desc,
    #sl-signin-desc { display: none !important; }

    /* Tighter vertical rhythm */
    #sl-modal-title              { font-size: 16px; margin-bottom: 2px; }
    #sl-modal-subtitle           { margin-bottom: 10px; }
    .sl-form-group               { margin-bottom: 8px; }
    .sl-form-input               { padding: 8px 12px; }
    .sl-btn-primary              { padding: 10px 16px; font-size: 12px; }
    .sl-terms-row                { margin-bottom: 8px; font-size: 10px; }
    #sl-merged-divider           { margin: 10px 0 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   SAFE-AREA / NOTCH SUPPORT
   Pads auth UI away from iPhone notch, Dynamic Island, and home
   indicator using env(safe-area-inset-*). Only applies when the page
   is served with viewport-fit=cover (set by injectPWAMeta in auth.js).
   ══════════════════════════════════════════════════════════════════════ */

/* Account bar — push down below notch/Dynamic Island */
#sl-account-bar {
    padding-top: max(var(--sl-bar-pad-v, 6px), env(safe-area-inset-top));
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

/* Buy chip / Redeem button — clear the notch */
#sl-buy-chip-wrap {
    top: max(18px, calc(env(safe-area-inset-top) + 6px));
}
body.sl-bar-active #sl-buy-chip-wrap {
    top: max(calc(var(--sl-bar-h) + 12px),
             calc(env(safe-area-inset-top) + var(--sl-bar-h) + 6px));
}

/* Login / auth modal — keep above home indicator */
#sl-modal-backdrop {
    padding-bottom: env(safe-area-inset-bottom);
}
.sl-modal-card {
    margin-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Daily bonus banner — clear home indicator at bottom */
#sl-daily-banner,
#sl-daily-toast {
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 64px));
}

/* Standalone / PWA mode — extra breathing room at top on iOS */
@media (display-mode: standalone) {
    #sl-account-bar {
        padding-top: max(10px, env(safe-area-inset-top));
    }
}

/* ============================================================
   ROTATE-TO-PORTRAIT OVERLAY  (phone-only)
   ------------------------------------------------------------
   Pure-CSS detection of phone-landscape orientation. Shows a
   full-screen black overlay with a "rotate your device" GIF
   instructing the user to return to portrait.

   Detection: orientation: landscape AND max-width: 950px AND max-height: 500px
   Phones in landscape are both narrow AND short — both conditions together
   are the only reliable way to single them out.

   - Phone in landscape (e.g. 852×393):  triggers (both ≤ thresholds)
   - Touchscreen PC (e.g. 2880×1920):    ignored (width > 950)
   - Laptop with short window:           ignored (width > 950)
   - Tablet in landscape (≥1024 wide):   ignored (width > 950)
   - Kiosk (16:9 wide):                  ignored (width > 950)

   Auto-dismiss: rotating back to portrait makes the @media
   query stop matching, so the overlay disappears instantly
   without any JavaScript event handlers.

   iOS Rotation Lock: if the user has enabled Control Center
   "Rotation Lock", iOS keeps the screen in portrait even when
   the phone is physically rotated - the orientation media
   query stays 'portrait', so the overlay never appears. Best
   UX for free.
   ============================================================ */
#sl-rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;          /* max - above auth banner, modals, everything */
    background: #000;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    overscroll-behavior: contain;
    touch-action: none;           /* swallow gestures while shown */
    -webkit-user-select: none;
    user-select: none;
}

#sl-rotate-overlay img {
    max-width: min(90vw, 600px);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* The only trigger: phone in landscape.
   Phones in landscape are SHORT (≤500px) AND NARROW (≤950px) — both conditions
   together exclude every PC (always wider than 950px even with small window),
   touchscreen PC, tablet (≥1024px wide), and kiosk. iPhone 15 Pro Max landscape
   is 932×430 — fits both. Touch-PC detection (pointer:coarse) is unreliable
   because touchscreen laptops report coarse as primary pointer too. */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
    #sl-rotate-overlay {
        display: flex;
    }
}