/* =========================================================
   COCKTAILS — GUEST PWA
   Port aus Research/Design/Guest View.html (Zeilen 22-368, 459-518)
   Ohne .g-slot-* (Phase 8)
   ========================================================= */

/* ============ GUEST APP LAYOUT ============ */
html, body { background: #05030d; }

.g-app{
    width: 100%;
    min-height: 100vh;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,62,200,0.18), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(79,245,255,0.14), transparent 60%),
        linear-gradient(180deg, #05030d 0%, #0b0718 50%, #150525 100%);
    color: var(--c-text);
    font-family: var(--f-body);
}
.g-app::before{
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
    opacity: .7;
}
.g-app::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    pointer-events: none; z-index: 0;
    background:
        repeating-linear-gradient(0deg, rgba(79,245,255,0.08) 0 1px, transparent 1px 20px),
        repeating-linear-gradient(90deg, rgba(255,62,200,0.08) 0 1px, transparent 1px 32px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 100%);
            mask-image: linear-gradient(180deg, transparent 0%, black 100%);
    opacity: .55;
}
.g-app > .g-header,
.g-app > .g-scroll,
.g-app > .g-install-banner { position: relative; z-index: 1; }

/* HEADER */
.g-header{
    display: flex; align-items: center; gap: 12px;
    padding-top:    max(54px, calc(env(safe-area-inset-top) + 14px));
    padding-left:   max(16px, env(safe-area-inset-left));
    padding-right:  max(16px, env(safe-area-inset-right));
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-hairline);
    background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
    flex-shrink: 0;
}
.g-icon-btn{
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    display: grid; place-items: center; border-radius: 10px;
    color: var(--c-text-muted);
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--c-border);
}
.g-icon-btn:hover{ color: var(--c-primary); border-color: var(--c-primary); }
.g-icon-btn svg{ width: 20px; height: 20px; }
.g-back-btn{ margin: 10px 0 12px 0; }
.g-brand{ flex: 1; text-align: center; }
.g-brand-name{
    font-family: "Monoton", "Audiowide", sans-serif;
    font-size: 24px; letter-spacing: .16em;
    color: #ffe7fb;
    text-shadow: 0 0 4px #ff3ec8, 0 0 14px rgba(255,62,200,0.8);
    line-height: 1;
}
.g-brand-sub{
    font-family: var(--f-mono); font-size: 10px; color: var(--c-text-dim);
    letter-spacing: .2em; text-transform: uppercase; margin-top: 4px;
}

/* SCROLL */
.g-scroll{
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 4px 16px 40px;
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
    scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent;
}
.g-scroll::-webkit-scrollbar{ width: 4px; }
.g-scroll::-webkit-scrollbar-thumb{ background: var(--c-border); border-radius: 999px; }

/* HERO BLOCK */
.g-hero{ padding: 14px 4px 18px; }
.g-kicker{
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .26em;
    color: var(--c-accent); text-transform: uppercase;
    text-shadow: 0 0 8px rgba(79,245,255,0.6);
}
.g-hero-title{
    font-family: "Audiowide", sans-serif;
    font-size: 42px; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; margin: 4px 0 10px; line-height: 1;
    text-shadow: 0 0 10px rgba(255,62,200,0.6), 0 0 28px rgba(255,62,200,0.4);
}
.g-hero-sub{
    font-size: 14px; color: var(--c-text-muted); line-height: 1.5;
    margin: 0; max-width: 90%;
}
.g-screen-title{
    font-family: "Audiowide", sans-serif;
    font-size: 28px; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; margin: 6px 0 6px; line-height: 1;
    text-shadow: 0 0 10px rgba(255,62,200,0.55), 0 0 24px rgba(255,62,200,0.3);
}
.g-screen-sub{
    font-size: 13px; color: var(--c-text-muted); line-height: 1.5;
    margin: 0 0 14px;
}
.g-filter-head{ padding: 14px 4px 6px; }

/* CARD LIST (phone) */
.g-list{ display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.g-card{
    display: flex; gap: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); overflow: hidden; text-align: left;
    padding: 0;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    width: 100%;
}
.g-card:active{ transform: scale(.985); }
.g-card:hover{ border-color: var(--c-accent); box-shadow: 0 0 18px rgba(79,245,255,0.25); }
.g-card-thumb{
    width: 108px; min-width: 108px;
    height: 108px;
    align-self: stretch;
    position: relative; overflow: hidden;
}
.g-card-thumb .plate-thumb,
.g-card-thumb .plate-thumb img,
.g-card-thumb .plate-thumb .plate{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.g-card-thumb .plate-thumb img{ object-fit: cover; }
.g-card-thumb::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(0,0,0,0.35));
    pointer-events: none;
}
.g-card-tag{
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,0.55);
    color: var(--c-accent); border: 1px solid rgba(79,245,255,0.5);
    text-shadow: 0 0 6px rgba(79,245,255,0.6);
}
.g-card-body{
    flex: 1; padding: 12px 14px 12px 2px;
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.g-card-cat{
    font-family: var(--f-mono); font-size: 10px; color: var(--c-text-dim);
    letter-spacing: .18em; text-transform: uppercase;
}
.g-card-name{
    font-weight: 700; font-size: 17px; color: var(--c-text); line-height: 1.15;
    letter-spacing: .01em;
}
.g-card-desc{
    font-size: 12px; color: var(--c-text-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-card .rating{ margin-top: auto; padding-top: 4px; }
.g-card .rating svg{ width: 14px; height: 14px; }
.g-card .rating .full{ color: var(--c-primary); filter: drop-shadow(0 0 4px rgba(255,62,200,0.7)); }
.g-card .rating .half{ color: var(--c-primary); filter: drop-shadow(0 0 4px rgba(255,62,200,0.6)); }
.g-card .rating .empty{ color: var(--c-text-dim); opacity: .5; }

/* DETAIL */
.g-detail-hero{
    position: relative; aspect-ratio: 4/3; border-radius: 16px;
    overflow: hidden; margin: 10px 0 0;
    border: 1px solid var(--c-border-strong);
    box-shadow: 0 0 30px rgba(255,62,200,0.3), inset 0 0 40px rgba(0,0,0,0.4);
}
.g-detail-hero .plate-thumb{ width: 100%; height: 100%; }
.g-detail-hero .plate-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.g-detail-hero .plate-thumb .plate{ width: 100%; height: 100%; }
.g-detail-hero-meta{
    position: absolute; inset: auto 0 0 0;
    padding: 16px;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(5,3,13,0.88) 100%);
}
.g-detail-title{
    font-family: "Audiowide", sans-serif;
    font-size: 30px; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; margin: 4px 0 6px; line-height: 1;
    text-shadow: 0 0 8px rgba(255,62,200,0.6), 0 0 20px rgba(255,62,200,0.4);
}
.g-detail-rating .rating svg{ width: 16px; height: 16px; }
.g-detail-rating .rating .full{ color: var(--c-primary); filter: drop-shadow(0 0 4px rgba(255,62,200,0.7)); }
.g-detail-rating .rating .half{ color: var(--c-primary); filter: drop-shadow(0 0 4px rgba(255,62,200,0.6)); }
.g-detail-rating .rating .empty{ color: var(--c-text-dim); opacity: .5; }
.g-detail-body{ padding: 18px 4px 24px; }
.g-detail-desc{
    font-size: 15px; line-height: 1.55; color: var(--c-text);
    margin: 0 0 18px;
}
.g-panel-title{
    font-family: "Audiowide", sans-serif; font-size: 14px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-accent); text-shadow: 0 0 8px rgba(79,245,255,0.5);
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
}
.g-panel-title::before{
    content: ""; width: 18px; height: 1px; background: var(--c-primary);
}
.g-ing-list{ display: flex; flex-wrap: wrap; gap: 8px; }
.g-ing-pill{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 7px; border-radius: 999px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    font-size: 13px; color: var(--c-text); font-weight: 500;
}
.g-ing-pill .ic{
    width: 24px; height: 24px; border-radius: 6px;
    display: grid; place-items: center;
    background: var(--c-surface-3); color: var(--c-primary); flex-shrink: 0;
}
.g-ing-pill.mixer .ic{ color: var(--c-accent); }
.g-ing-pill .ic svg{ width: 16px; height: 16px; }
.g-ing-amount{ opacity: .6; margin-right: 4px; }

/* STEPS */
.g-steps{
    list-style: none; padding: 0; margin: 0 0 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.g-step{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.g-step-num{
    width: 26px; height: 26px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--c-surface-3); color: var(--c-primary);
    border: 1px solid rgba(255,62,200,0.3);
    font-family: "Audiowide", sans-serif; font-size: 12px;
    text-shadow: 0 0 4px rgba(255,62,200,0.5);
}
.g-step-txt{ flex: 1; font-size: 14px; line-height: 1.45; color: var(--c-text); }

/* BADGE */
.g-badge{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--f-mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    margin-bottom: 14px;
}
.g-badge-party{
    background: rgba(255,62,200,0.12); color: var(--c-primary);
    border: 1px solid rgba(255,62,200,0.5);
    text-shadow: 0 0 8px rgba(255,62,200,0.4);
}

.g-ing-hint{ color: var(--c-text-dim); font-size: 11px; margin-left: 4px; }

/* ============ GLAS-TOGGLE (Slider, Variante C) ============
   Same neon-magenta sliding pill as the admin overlay; ported from
   Research/Design/Glass Toggle.html. */
.glass-toggle-wrap{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    margin:14px 0;
}
.glass-toggle-label{
    font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
    color:var(--c-text-dim); text-transform:uppercase;
}
.glass-toggle{
    position:relative; display:inline-flex;
    background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:999px; padding:4px;
    max-width:100%;
}
.glass-toggle .thumb{
    position:absolute; top:4px; bottom:4px; width:calc(50% - 4px);
    left:4px; border-radius:999px;
    background:linear-gradient(180deg, rgba(255,62,200,0.22), rgba(79,245,255,0.08));
    border:1px solid var(--c-primary);
    box-shadow:0 0 14px rgba(255,62,200,0.55), inset 0 0 8px rgba(255,62,200,0.25);
    transition:transform .25s cubic-bezier(.5,0,.2,1);
    pointer-events:none;
}
.glass-toggle.right .thumb{ transform:translateX(100%); }
.glass-toggle button{
    position:relative; z-index:1;
    height:54px; padding:0 14px; border:0; background:transparent;
    border-radius:999px; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px;
    color:var(--c-text-muted); flex:1; min-width:130px; justify-content:center;
    transition:color .2s;
    -webkit-tap-highlight-color:transparent;
}
.glass-toggle button.on{ color:#fff; }
.glass-toggle button .ic{
    width:30px; height:30px; flex-shrink:0;
    display:grid; place-items:center; transition:filter .2s;
}
.glass-toggle button .ic svg{ width:30px; height:30px; }
.glass-toggle button.on .ic{ filter:drop-shadow(0 0 8px rgba(255,62,200,.7)); }
.glass-toggle button .lb{
    display:flex; flex-direction:column; align-items:flex-start; line-height:1.1;
}
.glass-toggle button .lb b{ font-size:13px; font-weight:600; }
.glass-toggle button .lb span{
    font-family:var(--f-mono); font-size:9px;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--c-text-dim); white-space:nowrap;
}
.glass-toggle button.on .lb span{ color:rgba(255,255,255,.75); }

/* SEARCH */
.g-search-bar{
    padding: 10px 16px 6px;
    flex-shrink: 0;
}
.g-search-bar .search{
    display: flex; align-items: center; gap: 10px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: 0 12px;
}
.g-search-bar .search svg{ width: 18px; height: 18px; color: var(--c-text-dim); flex-shrink: 0; }
.g-search-bar .search input{
    flex: 1; height: 48px; font-size: 14px; color: var(--c-text);
    background: transparent; border: 0; outline: 0;
}
.g-search-bar .search input::placeholder{ color: var(--c-text-dim); }
.g-empty{
    padding: 40px 20px; text-align: center;
    color: var(--c-text-muted);
}
.g-empty-icon{
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: grid; place-items: center; border-radius: 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    color: var(--c-text-dim);
}
.g-empty-icon svg{ width: 26px; height: 26px; }
.g-empty-title{
    font-family: "Audiowide", sans-serif; font-size: 16px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--c-text);
    margin-bottom: 6px;
}
.g-empty-sub{ font-size: 13px; color: var(--c-text-muted); max-width: 240px; margin: 0 auto; }
.g-count-label{
    font-family: var(--f-mono); font-size: 10px;
    color: var(--c-text-dim); letter-spacing: .2em; text-transform: uppercase;
    padding: 10px 4px 4px;
}

/* FILTER CHIPS / CATEGORIES */
.g-chip-grid{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding-bottom: calc(72px + max(16px, env(safe-area-inset-bottom)) + 16px);
}
.g-chip{
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 8px 10px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); color: var(--c-text); text-align: left;
    width: 100%;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.g-chip .icon{
    width: 36px; height: 36px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 8px;
    background: var(--c-surface-3); color: var(--c-primary);
    border: 1px solid rgba(255,62,200,0.3);
}
.g-chip .icon svg{ width: 20px; height: 20px; }
.g-chip .label{ font-size: 13px; color: var(--c-text); }
.g-chip.active{
    background: linear-gradient(160deg, rgba(255,62,200,0.18), rgba(79,245,255,0.06));
    border-color: var(--c-primary);
    box-shadow: 0 0 14px rgba(255,62,200,0.5);
}
.g-chip.active .label{ color: #fff; text-shadow: 0 0 6px rgba(255,62,200,0.5); }

.g-cat-grid{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding-bottom: calc(72px + max(16px, env(safe-area-inset-bottom)) + 16px);
}
.g-cat-btn{
    min-height: 80px; padding: 14px 16px;
    border-radius: var(--r-md); text-align: left;
    background: var(--c-surface); border: 1px solid var(--c-border);
    color: var(--c-text); width: 100%;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    transition: all .18s;
}
.g-cat-btn:hover{ border-color: var(--c-border-strong); }
.g-cat-btn.active{
    background: linear-gradient(160deg, rgba(255,62,200,0.16), rgba(79,245,255,0.05));
    border-color: var(--c-primary);
    box-shadow: 0 0 14px rgba(255,62,200,0.5), inset 0 0 8px rgba(255,62,200,0.2);
}
.g-cat-btn-name{
    font-family: "Audiowide", sans-serif; font-size: 15px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--c-text);
}
.g-cat-btn.active .g-cat-btn-name{
    text-shadow: 0 0 8px rgba(255,62,200,0.6);
}
.g-cat-btn-count{
    font-family: var(--f-mono); font-size: 10px;
    color: var(--c-text-dim); letter-spacing: .14em; text-transform: uppercase;
}

.g-sticky-cta{
    position: fixed; left: 16px; right: 16px;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    display: flex; gap: 10px; z-index: 5;
}
.g-sticky-cta .btn{ flex: 1; justify-content: center; height: 52px; }
.g-sticky-cta .btn-ghost{ flex: 0 0 auto; min-width: 52px; padding: 0 18px; }

.btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; padding: 0 22px;
    border-radius: var(--r-pill);
    font-family: var(--f-body); font-weight: 600; font-size: 15px;
    letter-spacing: .04em;
    border: 1px solid transparent;
    cursor: pointer; transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:disabled,
.btn[disabled]{
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    filter: none;
    pointer-events: none;
}
.btn-primary{
    background: linear-gradient(180deg, #39ff9a 0%, #19b267 100%);
    color: #051a0e;
    box-shadow: var(--glow-green), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{
    background: rgba(0,0,0,0.35); color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    height: 48px; font-size: 13px;
}
.btn-ghost:hover{ color: var(--c-primary); border-color: var(--c-primary); }
.btn .badge{
    background: rgba(0,0,0,0.28); color: inherit; border-radius: 999px;
    min-width: 28px; height: 28px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--f-mono); font-size: 13px; font-weight: 700;
}

/* SIDE MENU */
.g-menu-backdrop{
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.g-menu-backdrop.open{ opacity: 1; pointer-events: auto; }
.g-side-menu{
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 41;
    width: 78%; max-width: 320px;
    background: linear-gradient(180deg, #1a0f2e 0%, #0c0619 100%);
    border-right: 1px solid var(--c-border-strong);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column;
    padding-top: max(24px, calc(env(safe-area-inset-top) + 10px));
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 10px));
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 0 40px rgba(255,62,200,0.3);
}
.g-side-menu.open{ transform: translateX(0); }
.g-side-title{
    font-family: "Audiowide", sans-serif; font-size: 16px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-text);
    padding: 8px 10px 18px;
    border-bottom: 1px solid var(--c-hairline);
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(79,245,255,0.4);
}
.g-menu-item{
    display: flex; align-items: center; gap: 14px;
    padding: 12px 10px; min-height: 60px;
    border-radius: var(--r-md);
    color: var(--c-text); text-align: left; width: 100%;
    font-family: var(--f-body);
    cursor: pointer;
}
.g-menu-item:hover{ background: var(--c-surface-2); }
.g-menu-item:active{ background: rgba(255,62,200,0.15); }
.g-menu-item[disabled]{ opacity: .45; cursor: not-allowed; }
.g-menu-item .ic{
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 10px;
    background: var(--c-surface-3); color: var(--c-primary);
    border: 1px solid rgba(255,62,200,0.3);
}
.g-menu-item .ic svg{ width: 20px; height: 20px; }
.g-menu-item .n{
    display: block; font-weight: 600; font-size: 15px; line-height: 1.2;
}
.g-menu-item .s{
    display: block; font-family: var(--f-mono); font-size: 10px;
    color: var(--c-text-dim); letter-spacing: .1em; margin-top: 2px;
    text-transform: uppercase;
}
.g-side-foot{
    margin-top: auto; padding: 14px 10px 0;
    border-top: 1px solid var(--c-hairline);
    font-family: var(--f-mono); font-size: 10px; color: var(--c-text-dim);
    letter-spacing: .1em;
    display: flex; justify-content: space-between; align-items: center;
}
.g-open-dot{ display: inline-flex; align-items: center; gap: 8px; color: var(--c-success); }
.g-open-dot span{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-success); box-shadow: 0 0 8px var(--c-success);
}

/* CLOSED SCREEN */
.g-closed{
    width: 100%; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 28px;
    padding-top:    max(40px, calc(env(safe-area-inset-top) + 24px));
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
    text-align: center;
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255,62,200,0.18), transparent 60%),
        linear-gradient(180deg, #05030d 0%, #0b0718 50%, #150525 100%);
    color: var(--c-text);
}
.g-closed::before{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
    opacity: .8;
}
.g-closed > *{ position: relative; z-index: 1; }
.g-closed-badge{
    width: 84px; height: 84px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--c-surface);
    border: 2px solid var(--c-primary);
    color: var(--c-primary);
    margin-bottom: 22px;
    box-shadow: 0 0 40px rgba(255,62,200,0.5), inset 0 0 20px rgba(255,62,200,0.15);
    animation: closedPulse 2.8s ease-in-out infinite;
}
.g-closed-badge svg{ width: 36px; height: 36px; }
@keyframes closedPulse{
    0%, 100%{ box-shadow: 0 0 40px rgba(255,62,200,0.5), inset 0 0 20px rgba(255,62,200,0.15); }
    50%{ box-shadow: 0 0 60px rgba(255,62,200,0.8), inset 0 0 30px rgba(255,62,200,0.25); }
}
.g-closed-title{
    font-family: "Monoton", "Audiowide", sans-serif;
    font-size: 54px; letter-spacing: .1em;
    color: #ffe7fb;
    text-shadow: 0 0 6px #ff3ec8, 0 0 24px rgba(255,62,200,0.8), 0 0 48px rgba(255,62,200,0.4);
    margin: 8px 0 14px; line-height: 1;
}
.g-closed-desc{
    font-size: 14px; line-height: 1.6; color: var(--c-text-muted);
    max-width: 300px; margin: 0 auto 20px;
}
.g-closed-schedule{
    font-family: var(--f-mono); font-size: 12px;
    color: var(--c-accent); letter-spacing: .14em; text-transform: uppercase;
    text-shadow: 0 0 6px rgba(79,245,255,0.5);
    margin: 4px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .g-closed-badge{ animation: none; }
    .g-side-menu{ transition: none; }
    .g-menu-backdrop{ transition: none; }
}

/* INSTALL BANNER */
.g-install-banner{
    position: fixed; left: 16px; right: 16px;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px));
    display: flex; gap: 10px; align-items: center;
    padding: 12px 14px;
    background: linear-gradient(180deg, #1a0f2e 0%, #0c0619 100%);
    border: 1px solid var(--c-primary);
    border-radius: var(--r-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 18px rgba(255,62,200,0.4);
    z-index: 6;
}
.g-install-banner[hidden]{ display: none; }
.g-install-text{
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    font-size: 12px; color: var(--c-text-muted);
}
.g-install-text strong{ color: var(--c-text); font-size: 13px; font-weight: 600; }
.g-install-banner .btn{ height: 40px; padding: 0 14px; font-size: 12px; }

/* ============ TABLET LAYOUT OVERRIDES ============ */
@media (min-width: 768px) {
    .g-header{ padding: 22px 24px 14px; }
    .g-brand-name{ font-size: 28px; }
    .g-scroll{ padding: 6px 28px 60px; }
    .g-search-bar{ padding: 12px 28px; }
    .g-sticky-cta{ left: 28px; right: 28px; }
    .g-install-banner{ left: 28px; right: 28px; }
    .g-hero-title{ font-size: 62px; }
    .g-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .g-card-thumb{ width: 160px; min-width: 160px; }
    .g-card-name{ font-size: 20px; }
    .g-card-desc{ font-size: 13px; }
    .g-chip-grid{ grid-template-columns: repeat(3, 1fr); }
    .g-cat-grid{ grid-template-columns: repeat(3, 1fr); }
    .g-detail-hero{ aspect-ratio: 16/7; }
    .g-detail-body{ max-width: 700px; margin: 0 auto; }
    .g-closed-title{ font-size: 80px; }
}

/* ============ REDUCED MOTION ============ */
/* Respect prefers-reduced-motion — user preference overrides design intent. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .g-menu,
    .g-menu-backdrop,
    .g-side-menu,
    .g-install-banner,
    .g-screen,
    .g-card {
        transition: none !important;
    }
}