/* ===== DESIGN TOKENS ===== */
:root {
    --color-bg:      #0E0C0A;
    --color-surface: #1A1612;
    --color-accent:  #C8872A;
    --color-text:    #F0E8D5;
    --color-muted:   #A89880;
    --color-pop:     #FF6B3D;
    --color-danger:  #8C3A2E;

    --font-display: "Bebas Neue", sans-serif;
    --font-accent:  "Cinzel", serif;
    --font-body:    "Inter", system-ui, -apple-system, sans-serif;
}

/* ===== GLOBAL ===== */
html {
    overflow-x: clip;  /* clip (not hidden) — avoids creating a scroll container that breaks position:sticky */
}

body {
    min-height: 100vh;
    width: 100%;         /* 100% excludes scrollbar; 100vw does not */
    font-family: var(--font-body);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    overflow-x: clip;
}

body::before {
    content: '';
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('/images/brick-wall.jpg') center / cover;
    opacity: 0.3;
    z-index: -1;
}

h1 {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--color-text);
}

h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* ===== LAYOUT ===== */
/*
 * Sticky-footer contract:
 *   body          → flex column, min-height 100vh
 *   .page-content → flex: 1 0 auto  (grows to fill gap, never shrinks below content height)
 *   footer        → flex-shrink: 0  (never compressed)
 *
 * .page is kept for any scaffold-generated views that use it as a wrapper;
 * we intentionally do NOT set justify-content: center here so it doesn't
 * fight the sticky-footer layout.
 */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100%;      /* relative to page-content, not the viewport */
}

.layout {
    flex: 1 0 auto;
}

/* Nav is top-fixed; height defined in navbar.css via --nav-height */
.page-content {
    flex: 1 0 auto;        /* grow to fill remaining space; never shrink below content */
    margin-left: 0;
    padding-top: var(--nav-height, 104px);
    width: 100%;
}

/* Full-height pages size their own card to the viewport — strip the bottom
   breathing room so there's no empty scrollable strip below the card. */
.page-content:has(.search-page-card),
.page-content:has(.detail-page),
.page-content:has(.coll-layout) {
    padding-bottom: 0;
}

/* ===== ALPHA BANNER ===== */
:root { --alpha-banner-h: 44px; }
@media (max-width: 768px) { :root { --alpha-banner-h: 72px; } }

.alpha-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    min-height: var(--alpha-banner-h);
    background: var(--color-surface);
    border-bottom: 1px solid rgba(200,135,42,0.35);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
}

/* Push fixed top-nav below the banner */
.top-nav { top: var(--alpha-banner-h, 0) !important; }
/* Extend page-content padding to clear nav + banner */
.page-content { padding-top: calc(var(--nav-height, 104px) + var(--alpha-banner-h, 0px)) !important; }
.alpha-banner__pill {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    background: var(--color-accent);
    color: #1a120a;
    font-weight: 700;
    flex-shrink: 0;
}
.alpha-banner__text {
    color: var(--color-muted);
    line-height: 1.4;
    text-align: center;
}
.alpha-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(200,135,42,0.4);
    border-radius: 6px;
    color: var(--color-accent);
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.alpha-banner__btn:hover {
    background: rgba(200,135,42,0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.alpha-banner__btn--discord {
    color: #7289da;
    border-color: rgba(114,137,218,0.4);
}
.alpha-banner__btn--discord:hover {
    background: rgba(114,137,218,0.12);
    border-color: #7289da;
    color: #7289da;
}
.alpha-banner__close {
    background: transparent;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s ease;
}
.alpha-banner__close:hover { color: var(--color-text); }

@media (max-width: 768px) {
    .alpha-banner { padding: 0.55rem 0.75rem; font-size: 0.82rem; gap: 0.6rem; }
    .alpha-banner__text { flex-basis: 100%; order: 3; }
    .alpha-banner__btn { justify-content: center; padding: 0.4rem 0.6rem; }
    .alpha-banner__btn-label { display: none; }
    .alpha-banner__pill { order: 1; }
    .alpha-banner__close { order: 2; position: absolute; right: 0.5rem; top: 0.4rem; }
}

/* ===== BUTTONS ===== */
.btn-card {
    border-color: var(--color-accent) !important;
    background-color: unset !important;
    color: var(--color-accent) !important;
    font-family: var(--font-body);
    font-weight: 600;
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.btn-card:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 14px rgba(200, 135, 42, 0.45);
}

/* ===== NEON / DISPLAY TEXT ===== */
.neon-text {
    font-family: var(--font-display);
    color: var(--color-accent);
    text-shadow: 0 0 8px rgba(200, 135, 42, 0.5);
    letter-spacing: 0.06em;
}


/* ===== FORM CONTROLS ===== */
.form-control {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    border-radius: 999px;
    caret-color: var(--color-accent);
    background-color: unset !important;
    border-color: var(--color-accent) !important;
}

.form-control:focus {
    background-color: unset !important;
    border-color: var(--color-accent) !important;
    outline: none;
    box-shadow: 0 0 5px rgba(200, 135, 42, 0.6) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Keyboard push-up is handled by interactive-widget=resizes-content in the
       viewport meta — the layout viewport shrinks when the keyboard opens, so
       #mob-shell (100dvh) shrinks with it and no document scroll is needed.
       Leaving html/body unlocked so pull-to-refresh still works. */
    html, body {
        height: 100%;
    }

    /* ── #mob-shell: flex column fills full viewport; nav is in-flow, not fixed ── */
    #mob-shell {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .page-content {
        /* Flex item in #mob-shell — fills space above ActionBar + nav automatically */
        flex: 1;
        min-height: 0;      /* critical: allows flex:1 to shrink below content height */
        padding: 0 !important; /* override alpha-banner's global padding-top !important; top-nav is hidden on mobile */
        overflow-y: auto;
        overflow-x: hidden;
        /* Contain horizontal overscroll only — prevents rubber-band x-jank without
           killing native pull-to-refresh (overscroll-y stays auto). */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Home page: allow horizontal child scroll containers (carousel) */
    body.is-home .page-content { overflow-x: visible; }

    /* Non-Home pages: hide brick wall, use solid surface color, enable document scroll */
    body:not(.is-home)::before {
        display: none;
    }
    body:not(.is-home) {
        background-color: var(--color-surface);
    }

    /* Hide scrollbar on page-content */
    .page-content { scrollbar-width: none; }
    .page-content::-webkit-scrollbar { display: none; }

    /* Simple pages: seamless card, page-content is scroll container */
    body:not(.is-home) .page-card:not(.search-page-card):not(.detail-page):not(.coll-layout) {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        width: 100%;
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    /* Complex app pages: seamless, fill page-content height, inner scroll handles the rest */
    body:not(.is-home) .page-card.search-page-card,
    body:not(.is-home) .page-card.detail-page,
    body:not(.is-home) .page-card.coll-layout {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        width: 100%;
        height: 100%;       /* fills .page-content which is flex:1 in #mob-shell */
        overflow: hidden;
    }

    /* Propagate definite height through intermediary wrappers for complex pages only.
       :has() lets us avoid adding body classes server-side. */
    .page-content:has(.search-page-card) > .container-fluid,
    .page-content:has(.detail-page) > .container-fluid,
    .page-content:has(.coll-layout) > .container-fluid {
        height: 100%;
    }
    .page-content:has(.search-page-card) > .container-fluid > main,
    .page-content:has(.detail-page) > .container-fluid > main,
    .page-content:has(.coll-layout) > .container-fluid > main {
        height: 100%;
    }

    body:not(.is-home) .builder-app-card {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        width: 100%;
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    /* Action-sheet mobile override moved below its base rule (near line 908)
       so it can win the cascade. Leaving this comment as a signpost. */
}

/* ===== FOCUS RING (WCAG 2.4.7) ===== */
:focus-visible {
    outline: 2px solid var(--color-pop);
    outline-offset: 3px;
    border-radius: 3px;
}

.form-control:focus-visible {
    outline: none;
    box-shadow: 0 0 5px rgba(200, 135, 42, 0.6) !important;
}

.font-cinzel {
    font-family: var(--font-accent);
}


/* ===== ACCESSIBILITY ===== */
.skip-nav {
    position: absolute;
    left: -9999px;
    top: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-bg);
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    font-weight: bold;
    text-decoration: none;
    font-family: var(--font-body);
}
.skip-nav:focus {
    left: 1rem;
    outline: 2px solid var(--color-accent);
}

::placeholder {
    color: var(--color-muted) !important;
    opacity: 1;
}

/* ===== LINK UNDERLINE (WCAG 1.4.1) ===== */
a:not(.btn):not(.nav-link):not(.account-link):not(.cart-icon-link):not(.skip-nav):not(.sidebar-menu a):not([class*="carousel"]):not(.product-link):not(.breadcrumb-nav a):not(.home-hero-games a):not(.product-card):not(.hero-game-logo):not(.btn-tile-action):not(.deck-new-cta):not(.filter-chip):not(.pm-card):not(.opt-back) {
    text-decoration: underline;
}
a:not(.btn):not(.nav-link):not(.account-link):not(.cart-icon-link):not(.skip-nav):not(.sidebar-menu a):not([class*="carousel"]):not(.product-link):not(.breadcrumb-nav a):not(.home-hero-games a):not(.product-card):not(.hero-game-logo):not(.btn-tile-action):not(.deck-new-cta):not(.filter-chip):not(.pm-card):not(.opt-back):hover {
    text-decoration: none;
}

/* ===== FOOTER ===== */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    font-family: var(--font-body);
    color: var(--color-muted);
}

@media (max-width: 768px) {
    footer.footer {
        padding-bottom: calc(var(--nav-height, 64px) + 0.75rem);
    }
}

/* ===== SHARED FORM FIELDS (.dc-field) =====
   Used by any in-page form (Contact, future flows). Matches the aesthetic
   of .filter-search-input — translucent surface + gold border + cream text +
   no Bootstrap focus baggage. Pair <label class="dc-field"> wrapping a
   <span class="dc-field__label"> + <input class="dc-field__input">.
   ============================================================================ */
.dc-field {
    display: block;
    margin-bottom: 1rem;
}

.dc-field__label {
    display: block;
    color: var(--color-accent);
    font-family: var(--font-accent);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.dc-field__input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(200, 135, 42, 0.3);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    caret-color: var(--color-accent);
}

.dc-field__input:focus {
    border-color: rgba(200, 135, 42, 0.7);
    box-shadow: 0 0 0 3px rgba(200, 135, 42, 0.15);
    color: var(--color-text); /* explicit — overrides Bootstrap focus default */
}

.dc-field__input::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
}

.dc-field__input--area {
    min-height: 140px;
    resize: vertical;
    font-family: var(--font-body);
    line-height: 1.5;
}

/* Autofill: keep cream text instead of browser blue/black */
.dc-field__input:-webkit-autofill,
.dc-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== LEGAL PAGES ===== */
.legal-page {
    max-width: 860px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid rgba(200, 135, 42, 0.2);
    border-radius: 10px;
}

.legal-page h1 {
    margin-bottom: 0.25rem;
}

.legal-page h2 {
    color: var(--color-accent);
    font-size: 1.15rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(200, 135, 42, 0.2);
    padding-bottom: 0.25rem;
    font-family: var(--font-accent);
}

.legal-effective {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.legal-notice {
    background: rgba(200, 135, 42, 0.1);
    border: 1px solid rgba(200, 135, 42, 0.4);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(200, 135, 42, 0.2);
}

.legal-table th {
    background: rgba(200, 135, 42, 0.1);
    color: var(--color-accent);
    font-weight: bold;
    font-family: var(--font-accent);
}

.legal-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

/* ===== CONTACT PAGE LAYOUT ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.contact-col { min-width: 0; }

.contact-tile {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 135, 42, 0.25);
    border-radius: 8px;
}

.contact-tile i {
    color: var(--color-accent);
    font-size: 1.05rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.contact-tile__label {
    display: block;
    color: var(--color-accent);
    font-family: var(--font-accent);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.contact-tile a {
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.contact-tile a:hover { color: var(--color-accent); text-decoration: underline; }

.contact-blurb {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-top: 1rem;
}

.contact-form { margin-top: 0.25rem; }


/* ===== ART DECO SECTION DIVIDER ===== */
.section-divider {
    width: 100%;
    max-width: 640px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.section-divider::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
}
.section-divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-accent);
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;
}

.toast {
    background: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    animation: toastIn 0.25s ease forwards;
    max-width: 320px;
}

.toast.toast-error {
    border-left-color: var(--color-danger);
}

.toast.toast-hide {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(8px); }
}

/* ===== GLOBAL CONFIRM / ALERT MODAL ===== */
.gm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.gm-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
.gm-dialog {
    background: var(--color-surface, #1A1612);
    border: 1px solid rgba(200,135,42,0.3);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.5rem;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.gm-icon {
    font-size: 1.8rem;
    text-align: center;
    color: var(--color-accent, #C8872A);
}
.gm-icon.gm-icon--danger { color: #ef5350; }
.gm-message {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.95rem;
    color: var(--color-text, #F0E8D5);
    text-align: center;
    line-height: 1.5;
}
.gm-actions {
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 0.25rem;
}
.gm-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    transition: filter 0.15s;
}
.gm-btn:hover { filter: brightness(1.1); }
.gm-btn-confirm {
    background: linear-gradient(135deg, #C8872A, #E8A84A);
    color: #000;
}
.gm-btn-confirm.danger {
    background: #c0392b;
    color: #fff;
}
.gm-btn-cancel {
    background: rgba(255,255,255,0.06);
    color: var(--color-muted, #A89880);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-pop);
}

/* ===== PAGE CARD WRAPPER =====
 * A surface card that sits on top of the brick background.
 * Used on Decks, Collection, and similar app pages.
 * The brick shows as a thin border/gutter around the card.
 * ======================================================= */
.page-card {
  background: var(--color-surface);
  border: 1px solid rgba(200,135,42,0.12);
  border-radius: 12px;
  box-shadow: 0 6px 48px rgba(0,0,0,0.55);
  margin: 1.5rem auto;
  max-width: 1420px;
  width: calc(100% - 3rem);
  overflow: hidden;
}

/* Builder variant — fixed height so the two-column layout fills the card */
.builder-app-card {
  background: var(--color-surface);
  border: 1px solid rgba(200,135,42,0.12);
  border-radius: 12px;
  box-shadow: 0 6px 48px rgba(0,0,0,0.55);
  margin: 1rem auto;
  max-width: 1600px;
  width: calc(100% - 2rem);
  height: calc(100dvh - var(--nav-height, 104px) - 2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 960px) {
  .builder-app-card {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    width: 100%;
    height: calc(100dvh - var(--nav-height, 104px));
  }
}

/* ===== PAGE FADE-IN ===== */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#main-content {
    animation: pageFadeIn 200ms ease;
}


/* ============================================================
   GLOBAL FORM ELEMENT THEMING — Obsidian Design System
   Overrides browser defaults for select, input[type=number],
   textarea, and plain input elements to match the dark/gold
   aesthetic across ALL pages.
   ============================================================ */

/* ── Select ── */
select:not(.form-select) {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8872A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
    border: 1px solid rgba(200,135,42,0.3);
    border-radius: 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.5rem 2.2rem 0.5rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.4;
}

select:not(.form-select):hover {
    border-color: rgba(200,135,42,0.6);
}

select:not(.form-select):focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200,135,42,0.18);
}

select:not(.form-select) option {
    background: #1A1612;
    color: var(--color-text);
}

/* ── Number input ── */
input[type="number"] {
    background: var(--color-surface);
    border: 1px solid rgba(200,135,42,0.3);
    border-radius: 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]:hover {
    border-color: rgba(200,135,42,0.6);
}

input[type="number"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200,135,42,0.18);
}

/* ── Text / email / password / search inputs (non-Bootstrap) ── */
input[type="text"]:not(.form-control):not([class*="form-"]),
input[type="email"]:not(.form-control):not([class*="form-"]),
input[type="password"]:not(.form-control):not([class*="form-"]),
input[type="search"]:not(.form-control):not([class*="form-"]) {
    background: var(--color-surface);
    border: 1px solid rgba(200,135,42,0.3);
    border-radius: 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:not(.form-control):not([class*="form-"]):focus,
input[type="email"]:not(.form-control):not([class*="form-"]):focus,
input[type="password"]:not(.form-control):not([class*="form-"]):focus,
input[type="search"]:not(.form-control):not([class*="form-"]):focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200,135,42,0.18);
}

/* ── Textarea (non-Bootstrap) ── */
textarea:not(.form-control):not([class*="form-"]) {
    background: var(--color-surface);
    border: 1px solid rgba(200,135,42,0.3);
    border-radius: 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.65rem 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
}

textarea:not(.form-control):not([class*="form-"]):focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200,135,42,0.18);
}

/* ===== GAME SYMBOLS ===== */

/* MTG mana symbol SVG icons (Scryfall) */
.mana-symbol-icon { vertical-align: middle; margin: 0 1px; display: inline-block; }
.mana-cost-display .mana-symbol-icon { width: 18px; height: 18px; margin: 0 1.5px; }
.card-text-body .mana-symbol-icon { width: 14px; height: 14px; margin: 0 1px; }
.symbol-unknown { display: inline-block; background: #333; color: #ccc; font-size: 0.75em; padding: 0 3px; border-radius: 3px; vertical-align: middle; }

/* Pokemon energy icons */
.poke-energy-icon { vertical-align: middle; margin: 0 1px; border-radius: 50%; }
.poke-energy-dot  { display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin: 0 1px; }
.poke-symbol      { display: inline-block; vertical-align: middle; }

/* FAB pitch pips */
.fab-pitch-pip {
    display: inline-block;
    width: 12px; height: 12px;
    transform: rotate(45deg);
    margin: 0 2px;
    vertical-align: middle;
    border-radius: 2px;
}
.fab-pitch-1 { background: #E8432D; box-shadow: 0 0 4px #E8432D88; }
.fab-pitch-2 { background: #F5A623; box-shadow: 0 0 4px #F5A62388; }
.fab-pitch-3 { background: #3B82F6; box-shadow: 0 0 4px #3B82F688; }

/* FAB resource */
.fab-symbol-icon  { vertical-align: middle; margin-right: 3px; }
.fab-cost-value   { vertical-align: middle; font-weight: 600; }

/* Mana cost display in card detail attrs */
.mana-cost-display  { display: inline-flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.poke-energy-display { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.fab-pitch-display  { display: inline-flex; align-items: center; gap: 2px; }
.fab-resource-display { display: inline-flex; align-items: center; gap: 2px; }

.stat-symbol-icon { vertical-align: middle; margin-right: 3px; }

/* Sorcery element badge */
.sorc-element-display { display: inline-flex; }
.sorc-element-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sorc-el-color, #8B5CF6);
    background: color-mix(in srgb, var(--sorc-el-color, #8B5CF6) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--sorc-el-color, #8B5CF6) 40%, transparent);
}
.sorc-element-unknown {
    color: var(--color-muted, #A89880);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ===== LEGAL / PRIVACY PAGES — MOBILE ===== */
@media (max-width: 768px) {
    .legal-page {
        margin: 1rem auto;
        padding: 1.25rem 1rem;
        border-radius: 8px;
    }

    .legal-page h1 {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .legal-page h2 {
        font-size: 1rem;
        margin-top: 1.25rem;
    }

    .legal-notice {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Tables: allow horizontal scroll instead of breaking layout */
    .legal-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .legal-table th,
    .legal-table td {
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }

    /* Ensure page bottom clears the mobile nav bar */
    .legal-page {
        margin-bottom: calc(var(--nav-height, 64px) + 1rem);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Standard mobile search bar (.mob-search)
   Usage:
     <div class="mob-search">
       <input class="mob-search__input" type="search" placeholder="…" />
       <button class="mob-search__clear" style="display:none"><i class="fa-solid fa-xmark"></i></button>
       <i class="fa-solid fa-magnifying-glass mob-search__icon"></i>
     </div>
   Icon sits on the right; clear button (× ) sits just to its left when
   text is present. Input padding reserves room for both.
   ══════════════════════════════════════════════════════════════════════ */
.mob-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.mob-search__input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 0.87rem;
  padding: 0.55rem 3.2rem 0.55rem 0.8rem;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.mob-search__input::placeholder { color: var(--color-muted); }
.mob-search__input:focus { border-color: rgba(200,135,42,0.5); }
.mob-search__input::-webkit-search-cancel-button { display: none; }
.mob-search__icon {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: 0.78rem;
  pointer-events: none;
}
.mob-search__clear {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  font-size: 0.75rem;
  border-radius: 50%;
}
.mob-search__clear:hover { color: var(--color-text); }

/* ── Rarity badges (shared — collection, decks, product pages) ── */
.rarity-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-weight: 700;
    vertical-align: middle;
    line-height: 1.6;
}
/* Default (MTG + Pokemon) rarities */
.rarity-common     { background: rgba(160,160,160,0.15); color: #aaa;    border: 1px solid #555; }
.rarity-token      { background: rgba(160,160,160,0.15); color: #aaa;    border: 1px solid #555; }
.rarity-uncommon   { background: rgba(180,200,220,0.15); color: #9ac0d8; border: 1px solid #5a8da8; }
.rarity-mythic     { background: linear-gradient(135deg,rgba(220,90,30,0.25),rgba(200,135,42,0.25)); color: #e87040; border: 1px solid #b05020; }

/* FAB rarities (also apply to MTG "Rare" when not overridden) */
.rarity-rare       { background: rgba(90,160,220,0.18);  color: #6bb6ff; border: 1px solid #4080b8; }
.rarity-super-rare { background: rgba(160,90,220,0.18);  color: #c084f0; border: 1px solid #8050c0; }
.rarity-majestic   { background: rgba(200,50,50,0.18);   color: #ff6b6b; border: 1px solid #b03030; }
.rarity-legendary  { background: linear-gradient(135deg,rgba(220,180,60,0.25),rgba(240,210,90,0.25)); color: #f0d060; border: 1px solid #c8a040; }

/* "Shining" variants — distinct with subtle animated gradient */
.rarity-fabled {
  background: linear-gradient(110deg, #f0d060 0%, #fff7b0 25%, #f0d060 50%, #fff7b0 75%, #f0d060 100%);
  background-size: 200% 100%;
  color: #1a1612;
  border: 1px solid #c8a040;
  animation: rarity-shimmer 3.5s linear infinite;
  text-shadow: 0 0 2px rgba(255,240,180,0.5);
}
.rarity-marvel {
  background: linear-gradient(110deg, #8050c0 0%, #d8b0ff 25%, #8050c0 50%, #d8b0ff 75%, #8050c0 100%);
  background-size: 200% 100%;
  color: #fff;
  border: 1px solid #8050c0;
  animation: rarity-shimmer 3.5s linear infinite;
  text-shadow: 0 0 2px rgba(216,176,255,0.5);
}
@keyframes rarity-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ===== ACTION SHEET — shared slide-up dialog component =====
   Stack: .mob-nav 12000 > [page action-bar, if any] > .action-sheet 11800
   > .action-sheet-overlay 11700 > body. Nav (and any docked action bar)
   stay visible and tappable; overlay only dims the page body. */
.action-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 11700;  /* behind the sheet, above page body */
    transition: background 0.25s ease;
    pointer-events: none;
}
.action-sheet-overlay.is-open {
    background: rgba(0, 0, 0, 0.65);
    pointer-events: all;
}

.action-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11800;  /* above overlay, below .mob-nav (12000) */
    background: var(--color-surface);
    border-top: 1px solid rgba(200, 135, 42, 0.2);
    border-radius: 20px 20px 0 0;
    height: 95dvh;
    max-height: 95dvh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.action-sheet.is-open {
    transform: translateY(0);
    pointer-events: all;
}

/* Mobile: action sheets sit above the bottom nav so nav stays visible.
   Placed AFTER the base rule so the cascade picks this override when it matches.
   Transform must clear the nav gap too, otherwise the sheet's top edge peeks
   above the nav while the sheet is "closed". */
@media (max-width: 768px) {
    .action-sheet {
        bottom: var(--nav-height, 64px);
        height: calc(100dvh - var(--nav-height, 64px));
        max-height: calc(100dvh - var(--nav-height, 64px));
        transform: translateY(calc(100% + var(--nav-height, 64px)));
    }
    .action-sheet.is-open {
        transform: translateY(0);
    }
}

.action-sheet__handle-bar {
    display: flex;
    justify-content: center;
    padding: 0.65rem 0 0.25rem;
    flex-shrink: 0;
}
.action-sheet__handle {
    width: 40px;
    height: 4px;
    background: rgba(200, 135, 42, 0.3);
    border-radius: 2px;
}

.action-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(200, 135, 42, 0.12);
    flex-shrink: 0;
}
.action-sheet__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin: 0;
}
.action-sheet__close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(200, 135, 42, 0.25);
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.action-sheet__close:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.action-sheet__body {
    flex: 1;
    min-height: 0;  /* allow flex child to shrink below content size so scroll can kick in */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 135, 42, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}
.action-sheet__body::-webkit-scrollbar { width: 4px; }
.action-sheet__body::-webkit-scrollbar-thumb {
    background: rgba(200, 135, 42, 0.3);
    border-radius: 2px;
}

/* ── Desktop modal variant ─────────────────────────────────────────────
   On desktop, .action-sheet--desktop repositions the sheet as a centered
   modal: fixed max-width, full rounded corners, fade+scale-in from below
   instead of slide-up from the edge.
   The class is toggled by JS on sheet open via matchMedia so mobile users
   who happen to resize past 769px don't get the wrong animation mid-open.
   -------------------------------------------------------------------- */
.action-sheet.action-sheet--desktop {
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    width: min(1040px, calc(100vw - 3rem));
    height: min(92vh, 960px);
    max-height: 92vh;
    border-radius: 16px;
    border-top: 1px solid rgba(200, 135, 42, 0.2);
    border: 1px solid rgba(200, 135, 42, 0.2);
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6);
}
.action-sheet.action-sheet--desktop.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
/* Hide the drag handle bar when rendered as a modal */
.action-sheet.action-sheet--desktop .action-sheet__handle-bar {
    display: none;
}
.action-sheet.action-sheet--desktop .action-sheet__header {
    padding-top: 1rem;
}
/* Desktop modal: let decks/lists panels fill remaining body height so the
   card-tile grid (and lists list) extend all the way to the bottom of the
   modal card instead of floating in the middle. */
.action-sheet.action-sheet--desktop .action-sheet__body {
    display: flex;
    flex-direction: column;
}
.action-sheet.action-sheet--desktop #atd-decks-panel,
.action-sheet.action-sheet--desktop #atd-lists-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.action-sheet.action-sheet--desktop #atd-step1 {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.action-sheet.action-sheet--desktop #atd-deck-list,
.action-sheet.action-sheet--desktop #atd-lists-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    align-content: start;
    grid-auto-rows: min-content;
}

/* ── ATD (Add to Collections / Deck) sheet content ── */
.atd-card-info {
    background: rgba(200, 135, 42, 0.06);
    border: 1px solid rgba(200, 135, 42, 0.2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.atd-card-info__text { min-width: 0; flex: 1; }
.atd-card-name { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.atd-card-sub  { font-size: 0.78rem; color: var(--color-muted); margin-top: 0.1rem; }
/* Card thumbnail — desktop modal only; mobile hides it to keep sheet compact */
.atd-card-img { display: none; }
.action-sheet.action-sheet--desktop .atd-card-img {
    display: block;
    width: 60px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(200, 135, 42, 0.25);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.4);
}

.atd-tabs {
    display: flex;
    border-bottom: 1px solid rgba(200, 135, 42, 0.2);
    margin-bottom: 1rem;
}
.atd-tab {
    flex: 1;
    padding: 0.55rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    font-family: var(--font-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
}
.atd-tab.is-active {
    border-bottom-color: var(--color-accent);
    color: var(--color-text);
}

.atd-section-label {
    font-family: var(--font-accent);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    display: block;
    margin-bottom: 0.35rem;
}
.atd-section-select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(14, 12, 10, 0.65);
    border: 1.5px solid rgba(200, 135, 42, 0.28);
    border-radius: 9px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    appearance: none;
    cursor: pointer;
}
.atd-section-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 135, 42, 0.14);
}

.atd-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.atd-btn-primary {
    background: linear-gradient(135deg, var(--color-accent), #E8A84A);
    color: #000;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: filter 0.18s;
}
.atd-btn-primary:hover { filter: brightness(1.1); }
.atd-btn-cancel {
    background: none;
    border: none;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
}
.atd-btn-cancel:hover { color: var(--color-text); }

.atd-shared-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.atd-shared-opt { min-width: 0; }

.atd-actions--dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.atd-actions--dual .atd-btn-primary,
.atd-actions--dual .atd-btn-primary.atd-btn-secondary {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 220px;
    height: auto;
    padding: 0.85rem;
    border-radius: 14px;
    background: transparent;
    border: 1.5px solid rgba(200, 135, 42, 0.5);
    color: var(--color-accent);
    font-size: 0.9rem;
    font-family: var(--font-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: auto;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.atd-actions--dual .atd-btn-primary:hover,
.atd-actions--dual .atd-btn-primary.atd-btn-secondary:hover {
    background: rgba(200, 135, 42, 0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
    filter: none;
}
.atd-actions--dual .atd-btn-primary i {
    font-size: 1.75rem;
}
.atd-btn-secondary {
    background: linear-gradient(135deg, rgba(200, 135, 42, 0.18), rgba(200, 135, 42, 0.08));
    color: var(--color-accent);
    border: 1.5px solid rgba(200, 135, 42, 0.5);
}
.atd-btn-secondary:hover {
    filter: none;
    background: linear-gradient(135deg, rgba(200, 135, 42, 0.28), rgba(200, 135, 42, 0.15));
    color: var(--color-accent);
}

.atd-result {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
}

.atd-deck-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 135, 42, 0.3) transparent;
}
.atd-deck-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: rgba(14, 12, 10, 0.4);
    border: 1px solid rgba(200, 135, 42, 0.15);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.atd-deck-item:hover {
    border-color: rgba(200, 135, 42, 0.4);
    background: rgba(200, 135, 42, 0.06);
}
.atd-deck-name { font-size: 0.9rem; color: var(--color-text); font-weight: 600; }
.atd-deck-meta { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.1rem; }
.atd-deck-game {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    border: 1px solid;
    flex-shrink: 0;
}

.atd-step-meta {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: 0.75rem;
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.atd-step-meta strong { color: var(--color-text); }

.atd-back-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
}
.atd-back-btn:hover { color: var(--color-accent); }

.atd-create-link {
    font-size: 0.82rem;
    color: var(--color-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(200, 135, 42, 0.18);
    width: 100%;
}

/* ── Feedback notification sheet ── */
.feedback-sheet {
    position: fixed;
    bottom: calc(var(--nav-height, 64px) + 0.75rem);
    left: 1rem;
    right: 1rem;
    z-index: 11300;
    background: var(--color-surface);
    border: 1px solid rgba(200, 135, 42, 0.25);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transform: translateY(calc(100% + var(--nav-height, 64px) + 1.5rem));
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.feedback-sheet.is-open {
    transform: translateY(0);
}
.feedback-sheet__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.feedback-sheet__icon--success { color: var(--color-success, #4caf50); }
.feedback-sheet__icon--error   { color: var(--color-danger, #c0392b); }
.feedback-sheet__body { flex: 1; }
.feedback-sheet__title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.2rem;
}
.feedback-sheet__msg {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-muted);
    margin: 0;
}
.feedback-sheet__close {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}
.feedback-sheet__close:hover { color: var(--color-accent); }