/* GAMME.AI — Home (Remix-inspired) */
:root {
    --gh-bg: #06050b;
    --gh-panel: rgba(16, 12, 28, 0.78);
    --gh-border: rgba(168, 85, 247, 0.35);
    --gh-border-soft: rgba(168, 85, 247, 0.18);
    --gh-text: #e5e7eb;
    --gh-muted: rgba(226, 232, 240, 0.72);
    --gh-purple: #a855f7;
    --gh-purple-2: #7c3aed;
    --gh-yellow: #fbbf24;
}

.gh-home {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 60% -20%, rgba(168, 85, 247, 0.22), transparent 60%),
        radial-gradient(900px 520px at 100% 55%, rgba(59, 130, 246, 0.10), transparent 58%),
        radial-gradient(700px 520px at 0% 90%, rgba(168, 85, 247, 0.10), transparent 60%),
        var(--gh-bg);
    color: var(--gh-text);
}

.gh-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.gh-mobile-nav-btn,
.gh-mobile-nav-backdrop {
    display: none;
}

.gh-home.is-collapsed .gh-shell {
    grid-template-columns: 84px 1fr;
}

.gh-home.is-collapsed .gh-brand-row {
    justify-content: center;
}

.gh-home.is-collapsed .gh-collapse {
    display: none;
}

.gh-home.is-collapsed .gh-brand {
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
}

.gh-home.is-collapsed .gh-brand-icon {
    width: 48px;
    height: 48px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.65));
}

.gh-sidebar {
    background: rgba(11, 11, 18, 0.92);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.42) rgba(0, 0, 0, 0.22);
}

.gh-sidebar::-webkit-scrollbar {
    width: 6px;
}

.gh-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
}

.gh-sidebar::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.42);
    border-radius: 999px;
}

.gh-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 100, 200, 0.52);
}

.gh-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 6px 0 6px;
    position: relative;
    flex-shrink: 0;
}

.gh-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    text-decoration: none;
    width: 100%;
    height: 70px;
    overflow: hidden;
}

.gh-brand-full {
    width: auto;
    height: 70px;
    max-height: none;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 26px rgba(168, 85, 247, 0.65));
    transform: scale(1.55);
    transform-origin: left center;
}

.gh-brand-icon {
    display: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.55));
}

.gh-home.is-collapsed .gh-brand-full { display: none; }
.gh-home.is-collapsed .gh-brand-icon { display: block; }

.gh-collapse {
    position: absolute;
    right: 0;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: rgba(226, 232, 240, 0.55);
    cursor: pointer;
}

.gh-brand-row + .gh-nav {
    margin-top: 0;
}
.gh-collapse:hover {
    color: #fff;
}

.gh-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 6px 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.42) rgba(0, 0, 0, 0.22);
}

.gh-nav::-webkit-scrollbar {
    width: 6px;
}

.gh-nav::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.42);
    border-radius: 999px;
}

.gh-nav a,
.gh-nav button {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(226, 232, 240, 0.82);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}

.gh-nav a:hover {
    background: rgba(255, 255, 255, 0.03);
}

.gh-nav-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gh-nav-right {
    opacity: 0.6;
}

.gh-ico {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: rgba(168, 85, 247, 0.95);
}

.gh-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}

.gh-ico svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gh-nav .gh-nav-item.is-active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(124, 58, 237, 0.10));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.10);
    outline: 1px solid rgba(168, 85, 247, 0.35);
}

.gh-pill-new {
    margin-left: auto;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.86);
    color: #fff;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gh-nav-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
}

.gh-nav-badge--live {
    background: #dc2626;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 12px rgba(220, 38, 38, 0.45);
}

.gh-nav-badge--live::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    border-radius: 50%;
    background: #fff;
    vertical-align: 0.05em;
}

.gh-nav-badge--soon {
    background: #14532d;
    color: rgba(220, 252, 231, 0.95);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.gh-nav-badge--end {
    background: #0a0a0a;
    color: rgba(212, 212, 216, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.gh-home.is-collapsed .gh-nav-badge {
    display: none;
}

.gh-nav-divider {
    height: 1px;
    margin: 10px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

.gh-home.is-collapsed .gh-label {
    display: none;
}
.gh-home.is-collapsed .gh-sidebar {
    align-items: center;
    padding: 10px 8px 12px;
    gap: 6px;
}
.gh-home.is-collapsed .gh-brand-row {
    width: 100%;
    margin: 4px 0 6px;
}
.gh-home.is-collapsed .gh-nav {
    width: 100%;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    gap: 4px;
}
.gh-home.is-collapsed .gh-nav a,
.gh-home.is-collapsed .gh-nav button.gh-nav-item {
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0 auto;
    border-radius: 14px;
}
.gh-home.is-collapsed .gh-nav-left {
    gap: 0;
    justify-content: center;
    width: 100%;
}
.gh-home.is-collapsed .gh-ico {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.gh-home.is-collapsed .gh-ico svg {
    width: 20px;
    height: 20px;
}

.gh-home.is-collapsed .gh-nav .gh-nav-item.is-active {
    outline: 0;
    background: rgba(168, 85, 247, 0.16);
}

.gh-expand {
    display: none;
    margin: 8px 6px 0;
    width: calc(100% - 12px);
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.25);
    background: rgba(168, 85, 247, 0.10);
    color: rgba(226, 232, 240, 0.92);
    cursor: pointer;
}
.gh-home.is-collapsed .gh-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 36px;
    margin: 4px auto 0;
    flex-shrink: 0;
}

.gh-home.is-collapsed .gh-auth {
    display: none;
}

.gh-home.is-collapsed .gh-nav-divider {
    width: 32px;
    margin: 6px auto;
}

/* Collapsed recents — thumbnail stack (Remix-style) */
.gh-home.is-collapsed .gh-recents-wrap {
    flex: 0 0 auto;
    min-height: clamp(56px, 12vh, 140px);
    max-height: min(24vh, 180px);
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.gh-home.is-collapsed .gh-recents-label,
.gh-home.is-collapsed .gh-recent-meta,
.gh-home.is-collapsed .gh-recents-empty {
    display: none;
}

.gh-home.is-collapsed .gh-recents {
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    scrollbar-width: none;
}

.gh-home.is-collapsed .gh-recents::-webkit-scrollbar {
    display: none;
}

.gh-home.is-collapsed .gh-recent {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
}

.gh-home.is-collapsed .gh-recent:hover {
    background: rgba(255, 255, 255, 0.06);
}

.gh-home.is-collapsed .gh-recent.is-selected {
    background: rgba(124, 58, 237, 0.22);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.85);
}

.gh-home.is-collapsed .gh-recent.is-selected:hover {
    background: rgba(124, 58, 237, 0.28);
}

.gh-home.is-collapsed .gh-recent-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.gh-home.is-collapsed .gh-recent.gh-recent--generating .gh-recent-meta {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gh-home.is-collapsed .gh-recent.gh-recent--generating .gh-recent-title {
    display: none;
}

.gh-home.is-collapsed .gh-recent.gh-recent--generating .gh-recent-gen-dot {
    position: absolute;
    top: 4px;
    right: 4px;
}

.gh-home.is-collapsed .gh-recent-more {
    width: 48px;
    height: 28px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.55);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    line-height: 1;
}

.gh-home.is-collapsed .gh-recent-more:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.85);
}

/* Collapsed user — avatar only at bottom */
.gh-home.is-collapsed .gh-user {
    display: block;
    width: 48px;
    margin: 0 auto 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.gh-home.is-collapsed .gh-user-meta,
.gh-home.is-collapsed .gh-user-caret {
    display: none;
}

.gh-home.is-collapsed .gh-user-sum {
    justify-content: center;
    padding: 6px 0;
}

.gh-home.is-collapsed .gh-user .gh-avatar {
    width: 40px;
    height: 40px;
}

.gh-sidebar-spacer {
    display: none;
}

.gh-studio {
    margin: 6px;
    border-radius: 18px;
    border: 1px solid rgba(168, 85, 247, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.20));
    box-shadow: 0 18px 46px rgba(0,0,0,0.55);
    overflow: hidden;
}

.gh-studio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px;
    text-decoration: none;
    color: rgba(226, 232, 240, 0.92);
    border-radius: 18px;
    background: rgba(0,0,0,0.22);
    transition: background 0.15s, transform 0.12s, border-color 0.15s;
}
.gh-studio-card:hover {
    background: rgba(168, 85, 247, 0.08);
    transform: translateY(-1px);
}

.gh-studio-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gh-studio-left .gh-ico {
    width: 22px;
    height: 22px;
}

.gh-studio-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.gh-studio-right {
    font-size: 13px;
    font-weight: 900;
    color: rgba(251, 191, 36, 0.95);
}

.gh-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 6px 6px;
}

.gh-auth a {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.92);
    text-align: center;
    text-decoration: none;
}

.gh-auth a.gh-signup {
    border-color: rgba(168, 85, 247, 0.65);
    background: rgba(168, 85, 247, 0.14);
    color: #fff;
}

.gh-main {
    position: relative;
    overflow: visible;
}

/* Home is fixed (no scroll) */
.gh-home,
.gh-shell,
.gh-main {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/* Explore / Play: scroll the main column while keeping sidebar fixed */
.gh-home--hub .gh-main.gh-main--hub {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.gh-hub-scroll {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Hub pages: full width between sidebar and viewport edge */
.gh-hub-scroll .gcm-page,
.gh-hub-scroll .gcm-page--hub {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
    box-sizing: border-box;
}

.gh-hub-scroll .gge-page,
.gh-hub-scroll .gge-page--hub,
.gh-hub-scroll .gcd-page,
.gh-hub-scroll .gcd-page--hub,
.gh-hub-scroll .gcr-page,
.gh-hub-scroll .gcr-page--hub,
.gh-hub-scroll .gca-page,
.gh-hub-scroll .ghs-page,
.gh-hub-scroll .ght-page,
.gh-hub-scroll .ghs-contained,
.gh-hub-scroll .ght-contained,
.gh-hub-scroll .gh-settings {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
    box-sizing: border-box;
}

.gh-hub-scroll .gi-page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
    padding-top: clamp(12px, 2vw, 20px);
    padding-bottom: 48px;
    box-sizing: border-box;
}

.gh-hub-scroll .ghs-contained {
    padding-bottom: 48px;
}

/* Contained to .gh-main so the vignette does not dim the left sidebar (fixed+inset:0 was painting over it). */
.gh-scene {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 520px at 70% 35%, rgba(168, 85, 247, 0.12), transparent 60%),
        radial-gradient(760px 520px at 95% 65%, rgba(59, 130, 246, 0.08), transparent 58%),
        radial-gradient(600px 520px at 55% 80%, rgba(251, 191, 36, 0.05), transparent 62%);
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

.gh-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 520px at 50% 40%, rgba(0,0,0,0.0), rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78)),
        repeating-radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px);
    opacity: 0.65;
}

/* Studio: hide large decorative gradient so preview + recents stay calm */
.gh-home.is-studio .gh-scene {
    display: none !important;
}

.gh-center {
    position: relative;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 26px 18px 10px;
    z-index: 1;
}

/* Create home: prompt stays vertically centered; featured rail sits near the footer */
.gh-home:not(.is-studio) .gh-center[data-gh-panel="create"] > .gh-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    width: min(860px, 96vw);
    max-width: 100%;
    text-align: center;
}

.gh-home:not(.is-studio) .gh-center[data-gh-panel="create"] .gh-prompt,
.gh-home:not(.is-studio) .gh-center[data-gh-panel="create"] .gh-createfor {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.gh-home:not(.is-studio) .gh-center[data-gh-panel="create"] > .gh-dev-games {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: max(8px, env(safe-area-inset-bottom));
    width: min(1040px, 94vw);
}

/* Ensure hidden panels actually hide (override display:grid) */
.gh-center[hidden] { display: none !important; }

/* Robust panel switching */
.gh-home.is-studio [data-gh-panel="create"] { display: none !important; }
.gh-home.is-studio [data-gh-panel="studio"] { display: grid !important; }

.gh-home.is-studio .gh-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.gh-home.is-studio [data-gh-panel="studio"] {
    flex: 1 1 auto;
    min-height: 0;
}

.gh-card {
    width: min(720px, 92vw);
    text-align: center;
}

/* Home embedded studio */
.gh-studio-card{
    width: min(1320px, 96vw);
    text-align: left;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgba(10, 10, 16, 0.55);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        0 40px 120px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.04) inset;
}
.gh-studio-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.gh-studio-brand{display:flex;align-items:center;gap:12px;min-width:0}
.gh-studio-ico{width:44px;height:44px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;flex:0 0 auto}
.gh-studio-ico img{width:26px;height:26px;object-fit:contain}
.gh-spin{animation:ghspin 1.1s linear infinite}
@keyframes ghspin{to{transform:rotate(360deg)}}
.gh-studio-meta{min-width:0}
.gh-studio-title{font-weight:900;color:rgba(255,255,255,.92);line-height:1.15;font-size:18px;letter-spacing:-.02em}
.gh-studio-sub{margin-top:4px;font-size:12px;color:rgba(255,255,255,.55)}
.gh-accent{color:rgba(168,85,247,.95)}
.gh-studio-back{height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);font-weight:700}
.gh-studio-back:hover{background:rgba(255,255,255,.06)}
.gh-studio-grid{
    display:grid;
    gap:14px;
    grid-template-columns:minmax(260px,1.15fr) minmax(260px,480px) minmax(220px,340px);
    align-items:stretch;
    min-height:0;
    height:100%;
}
@media (max-width: 1100px){
    .gh-studio-grid{grid-template-columns:1fr}
    .gh-col-center{order:-1}
}
.gh-studio-log,.gh-studio-preview{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;overflow:hidden}

/* Embedded studio layout (home): 3 columns — orchestrator | preview | game info */
.gh-work {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    gap: 14px;
    box-sizing: border-box;
}

.gh-work > .gh-studio-grid {
    min-height: 0;
}

.gh-col-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    flex: 1;
}

.gh-col-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.gh-preview-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(420px, 100%);
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
}

.gh-preview-column .gh-thumb-aside-head {
    padding-left: 2px;
    padding-right: 2px;
}

.gh-stream-head-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 0 4px 10px;
    flex-shrink: 0;
}

.gh-agent-debug-btn {
    margin-left: 0;
    cursor: pointer;
    white-space: nowrap;
}

.gh-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ghost dropdown: label + chevron only (matches .gh-thumb-aside-head tone) */
.gh-model-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: rgba(226, 232, 240, 0.42);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0 14px 0 0;
    cursor: pointer;
    line-height: 1.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 10px 10px;
}

.gh-model-select:hover {
    color: rgba(226, 232, 240, 0.58);
}

.gh-model-select:focus {
    outline: none;
}

.gh-model-select:focus-visible {
    color: rgba(226, 232, 240, 0.72);
    box-shadow: 0 1px 0 rgba(168, 85, 247, 0.45);
}

.gh-model-select option {
    background: #05040a;
    color: rgba(226, 232, 240, 0.72);
}

/* Single scroll column: stream + chat (no panel frames) */
.gh-stream-chat {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.gh-stream-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 2px 12px;
}

.gh-status-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gh-status-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

.gh-status-txt {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.9);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
}

/* Timer / animated dots — never shrink off-screen */
.gh-status-trail {
    flex-shrink: 0;
    display: inline-flex;
    align-items: flex-end;
    align-self: flex-start;
    padding-top: 1px;
}

.gh-status-elapsed {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(148, 163, 184, 0.92);
}

.gh-status-elapsed-inner {
    font-variant-numeric: tabular-nums;
}

.gh-status-elapsed--done {
    font-weight: 450;
    max-width: 100%;
}

/* Active step: large purple “thinking” dots (replaces live timer while step runs) */
.gh-status-thinking-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    margin-left: 3px;
    height: 1.35em;
    vertical-align: -0.12em;
}
.gh-status-thinking-dots span {
    display: inline-block;
    font-size: 2.15em;
    font-weight: 900;
    line-height: 0.62;
    color: #a855f7;
    text-shadow: 0 0 14px rgba(168, 85, 247, 0.6);
    animation: gh-think-dot 1.05s ease-in-out infinite;
}
.gh-status-thinking-dots span:nth-child(1) { animation-delay: 0s; }
.gh-status-thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.gh-status-thinking-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes gh-think-dot {
    0%,
    100% {
        opacity: 0.25;
        transform: translateY(3px) scale(0.88);
    }
    50% {
        opacity: 1;
        transform: translateY(-2px) scale(1.05);
    }
}

.gh-msg.is-status-line {
    animation: gh-line-in 0.35s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes gh-line-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gh-preview-stage {
    width: 100%;
    max-width: min(420px, 100%);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
    container-name: gh-preview;
}

.gh-preview-shell {
    position: relative;
    aspect-ratio: 9 / 16;
    width: min(100cqw, calc(100cqh * 9 / 16));
    height: min(100cqh, calc(100cqw * 16 / 9));
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px;
    box-sizing: border-box;
    background: rgba(12, 10, 18, 0.96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

@supports not (container-type: size) {
    .gh-preview-shell {
        width: 100%;
        height: auto;
        max-height: min(58vh, 620px);
    }
}

.gh-preview-overlay {
    position: absolute;
    inset: 10px;
    border-radius: 12px;
    background: rgba(10, 8, 18, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 4;
    pointer-events: none;
}

/* Made with GAMME.AI — subtle centered load hold between robot and game */
.gh-preview-overlay.is-made-splash {
    inset: 0;
    border-radius: inherit;
    background: #3a3a3a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 0;
}

.gh-preview-overlay.is-made-splash .gh-preview-overlay-logo,
.gh-preview-overlay.is-made-splash .gh-preview-overlay-label {
    display: none !important;
}

.gh-preview-overlay-made {
    display: none;
    width: clamp(64px, 18%, 96px);
    max-width: 96px;
    height: auto;
    object-fit: contain;
    opacity: 0.7;
    mix-blend-mode: screen;
}

.gh-preview-overlay.is-made-splash .gh-preview-overlay-made {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    animation: gge-made-pulse 1.5s ease-in-out infinite;
}

.gh-preview-boot-ui {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    width: min(52vw, 220px);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.gh-preview-overlay.is-made-splash .gh-preview-boot-ui {
    display: flex !important;
}

.gh-preview-boot-bar {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.gh-preview-boot-bar > i {
    display: block;
    height: 100%;
    width: 8%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a78bfa, #60a5fa);
    transition: width 0.25s ease;
}

.gh-preview-boot-status,
.gh-preview-boot-hint {
    margin: 0;
    max-width: 100%;
    text-align: center;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

.gh-preview-boot-status {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.9);
}

.gh-preview-boot-hint {
    font-size: 11px;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.92);
}

@keyframes gge-made-pulse {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.82;
    }
}

/* [hidden] alone can lose to .gh-preview-overlay { display:flex } in author CSS */
.gh-preview-overlay[hidden],
.gh-preview-overlay.gh-preview-overlay--off {
    display: none !important;
}

/* Single crisp loader icon only (animated robot GIF) */
.gh-preview-overlay-logo {
    width: clamp(150px, 34%, 250px);
    height: clamp(150px, 34%, 250px);
    object-fit: contain;
    opacity: 1;
    animation: none;
    transform: none;
    filter: drop-shadow(0 6px 22px rgba(168, 85, 247, 0.35));
}

.gh-preview-overlay-label {
    margin: 0;
    font-size: 13px;
    font-weight: 750;
    color: rgba(226, 232, 240, 0.9);
    text-align: center;
    padding: 0 12px;
}

.gh-delete-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 4, 12, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gh-delete-overlay[hidden] {
    display: none !important;
}

.gh-delete-overlay-panel {
    width: min(420px, 92vw);
    padding: 28px 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(18, 12, 28, 0.92);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.gh-delete-overlay-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid rgba(167, 139, 250, 0.22);
    border-top-color: #c4b5fd;
    animation: ghDeleteSpin 0.8s linear infinite;
}

@keyframes ghDeleteSpin {
    to { transform: rotate(360deg); }
}

.gh-delete-overlay-label {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
}

.gh-delete-overlay-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.78);
}

.gh-home.is-delete-busy {
    pointer-events: none;
}

.gh-home.is-delete-busy .gh-delete-overlay {
    pointer-events: auto;
}

.gh-preview-shell iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    background: #121018;
    filter: brightness(1.1) contrast(1.04) saturate(1.05);
}

/* Admin / subscriber: in-studio build source viewer (replaces center preview) */
.gh-preview-column.is-code-view {
    max-width: min(920px, 100%);
    width: 100%;
}

.gh-preview-column.is-code-view .gh-preview-stage {
    display: none !important;
}

.gh-preview-column.is-code-view .gh-code-stage {
    display: flex !important;
}

.gh-code-stage {
    display: none;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    min-height: min(72vh, 820px);
    max-height: min(78vh, 900px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 10, 16, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.gh-code-stage-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.gh-code-stage-inner.is-code-editor .gh-code-paywall {
    display: none !important;
}

.gh-code-stage-inner.is-code-paywall .gh-code-editor-panel {
    display: none !important;
}

.gh-code-stage-inner.is-code-editor .gh-code-editor-panel {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.gh-code-stage-inner.is-code-paywall .gh-code-paywall {
    display: flex !important;
    flex: 1;
    min-height: 0;
}

.gh-code-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.gh-code-toolbar .gh-code-meta {
    flex: 0 1 auto;
    max-width: 38%;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-code-search-wrap {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.gh-code-search-wrap:focus-within {
    border-color: rgba(120, 80, 180, 0.45);
    background: rgba(0, 0, 0, 0.5);
}

.gh-code-search-wrap.is-miss,
.gh-code-search-wrap:has(.gh-code-search.is-miss) {
    border-color: rgba(248, 113, 113, 0.45);
}

.gh-code-search-ico {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.32);
}

.gh-code-search-wrap:focus-within .gh-code-search-ico {
    color: rgba(196, 181, 253, 0.75);
}

.gh-code-search {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.gh-code-search::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.gh-code-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.gh-code-toolbar .gh-code-actions {
    margin-left: auto;
    flex-shrink: 0;
}

.gh-code-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.gh-code-action {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(226, 232, 240, 0.88);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.gh-code-action:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.gh-code-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gh-code-action-primary {
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(124, 58, 237, 0.28);
    color: #f5f3ff;
}

.gh-code-action-primary:hover:not(:disabled) {
    background: rgba(124, 58, 237, 0.42);
    border-color: rgba(196, 181, 253, 0.55);
}

.gh-code-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.gh-code-icon-btn:hover:not(:disabled) {
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
}

.gh-code-icon-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.gh-code-icon-btn.is-dirty,
.gh-code-icon-btn--save.is-dirty {
    color: rgba(196, 181, 253, 0.95);
}

.gh-code-actions-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
    flex-shrink: 0;
}

.gh-code-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.gh-code-tab {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.78);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.gh-code-tab.is-active {
    border-color: rgba(167, 139, 250, 0.55);
    background: rgba(124, 58, 237, 0.22);
    color: #f5f3ff;
}

.gh-code-meta {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.85);
    white-space: nowrap;
}

.gh-code-scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    background: #000;
}

.gh-code-cm-host {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.gh-code-cm-host .CodeMirror {
    height: 100% !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    background: #000 !important;
    color: #e2e8f0;
}

/* CodeMirror default CSS paints these white — override to match studio scrollbars */
.gh-code-cm-host .CodeMirror-scrollbar-filler,
.gh-code-cm-host .CodeMirror-gutter-filler {
    background: #000 !important;
}

.gh-code-cm-host .CodeMirror-vscrollbar,
.gh-code-cm-host .CodeMirror-hscrollbar {
    background: #000 !important;
}

.gh-code-cm-host .CodeMirror-vscrollbar::-webkit-scrollbar,
.gh-code-cm-host .CodeMirror-hscrollbar::-webkit-scrollbar,
.gh-code-cm-host .CodeMirror-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.gh-code-cm-host .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.gh-code-cm-host .CodeMirror-hscrollbar::-webkit-scrollbar-track,
.gh-code-cm-host .CodeMirror-scroll::-webkit-scrollbar-track {
    background: #000 !important;
    border-radius: 999px;
}

.gh-code-cm-host .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.gh-code-cm-host .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
.gh-code-cm-host .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.55) !important;
    border-radius: 999px;
    border: 2px solid #000;
}

.gh-code-cm-host .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.gh-code-cm-host .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover,
.gh-code-cm-host .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 100, 200, 0.72) !important;
}

.gh-code-cm-host .CodeMirror-vscrollbar,
.gh-code-cm-host .CodeMirror-hscrollbar,
.gh-code-cm-host .CodeMirror-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.55) #000;
}

.gh-code-cm-host .CodeMirror-vscrollbar div,
.gh-code-cm-host .CodeMirror-hscrollbar div {
    background: rgba(120, 80, 180, 0.55) !important;
    border-radius: 999px;
}

.gh-code-cm-host .CodeMirror-gutters {
    background: #050508 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.gh-code-cm-host .CodeMirror-scroll {
    min-height: 100%;
    background: #000 !important;
}

.gh-code-editor {
    flex: 1;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px 16px 18px;
    border: 0;
    outline: none;
    resize: none;
    background: #000;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    line-height: 1.55;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.55) #000;
}

.gh-code-editor::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.gh-code-editor::-webkit-scrollbar-track {
    background: #000;
    border-radius: 999px;
}

.gh-code-editor::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.55);
    border-radius: 999px;
    border: 2px solid #000;
}

.gh-code-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 100, 200, 0.72);
}

.gh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

/* Studio code editor — center column replaces preview */
.gh-code-paywall[hidden],
.gh-code-editor-panel[hidden],
.gh-code-stage[hidden] {
    display: none !important;
}

.gh-code-paywall {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 6, 12, 0.98);
}

.gh-code-fake {
    flex: 1;
    margin: 0;
    padding: 14px 16px 120px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.55;
    color: rgba(148, 163, 184, 0.55);
    white-space: pre-wrap;
    user-select: none;
    pointer-events: none;
    filter: blur(7px);
    opacity: 0.85;
}

.gh-code-upgrade-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(280px, calc(100% - 32px));
    padding: 22px 20px 18px;
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, 0.45);
    background: rgba(12, 14, 22, 0.96);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    text-align: left;
    z-index: 2;
}

.gh-code-upgrade-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.gh-code-upgrade-text {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.82);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.gh-code-upgrade-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.gh-code-upgrade-btn:hover {
    filter: brightness(1.08);
    color: #fff;
}

.gh-code-editor-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(4, 6, 12, 0.98);
}

.gh-studio-body {
    min-height: 0;
    overflow: hidden;
}

/* ── Preview head row (label + landscape button) ────────────────────────── */
.gh-preview-head-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.gh-landscape-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.45);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .13s, color .13s, border-color .13s;
    margin-bottom: 2px;
}
.gh-landscape-btn:hover {
    background: rgba(139,92,246,.22);
    color: #c4b5fd;
    border-color: rgba(139,92,246,.4);
}
.gh-landscape-btn svg { display:block; }
/* icon swap */
.gh-landscape-btn .ico-landscape { display:block; }
.gh-landscape-btn .ico-portrait  { display:none; }
.gh-home.is-landscape .gh-landscape-btn .ico-landscape { display:none; }
.gh-home.is-landscape .gh-landscape-btn .ico-portrait  { display:block; }

.gh-preview-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.gh-fullscreen-btn,
.gge-play-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.gh-fullscreen-btn:hover,
.gge-play-fullscreen-btn:hover {
    border-color: rgba(139,92,246,.4);
    background: rgba(139,92,246,.12);
}
.gh-fullscreen-btn.is-active,
.gge-play-fullscreen-btn.is-active {
    border-color: rgba(139,92,246,.55);
    background: rgba(139,92,246,.2);
}
.gh-fullscreen-btn svg,
.gge-play-fullscreen-btn svg { display:block; }
.gh-fullscreen-btn .ico-exit-fs,
.gge-play-fullscreen-btn .ico-exit-fs { display:none; }
.gh-fullscreen-btn.is-active .ico-enter-fs,
.gge-play-fullscreen-btn.is-active .ico-enter-fs { display:none; }
.gh-fullscreen-btn.is-active .ico-exit-fs,
.gge-play-fullscreen-btn.is-active .ico-exit-fs { display:block; }

.gh-preview-shell.is-browser-fullscreen,
.gge-play-frame.is-browser-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #000;
}
.gh-preview-shell.is-browser-fullscreen iframe,
.gge-play-frame.is-browser-fullscreen iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

/* ── Landscape mode ─────────────────────────────────────────────────────── */
.gh-home.is-landscape .gh-studio-grid {
    grid-template-columns: minmax(100px, 0.3fr) 1fr minmax(180px, 260px);
}
.gh-home.is-landscape .gh-col-center {
    align-items: stretch;
}
.gh-home.is-landscape .gh-preview-column {
    max-width: 100%;
    width: 100%;
}
.gh-home.is-landscape .gh-preview-stage {
    max-width: 100%;
    width: 100%;
}
.gh-home.is-landscape .gh-preview-shell {
    aspect-ratio: 4 / 3;
    width: min(100cqw, calc(100cqh * 4 / 3));
    height: min(100cqh, calc(100cqw * 3 / 4));
}

@media (max-width: 1100px) {
    .gh-stream-chat {
        max-height: 42vh;
    }
}

.gh-dock {
    position: sticky;
    bottom: 0;
    width: min(920px, 96vw);
    justify-self: center;
    transform: translateY(18px);
    opacity: 0;
    transition: transform 520ms cubic-bezier(.2, 0.9, 0.2, 1), opacity 520ms ease;
    pointer-events: none;
    z-index: 20;
}

/* Studio dock: stay inside main column and leave room for fixed credits pill */
.gh-home.is-studio .gh-work {
    padding-right: clamp(148px, 12vw, 188px);
}

.gh-home.is-studio .gh-dock {
    width: min(820px, 100%);
    max-width: 100%;
    justify-self: center;
}

.gh-home.is-studio .gh-studio-credits--corner-fixed {
    z-index: 52;
}

.gh-home.gh-dock-ready .gh-dock {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.gh-dock-prompt {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    overflow: visible;
    border-radius: 28px;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(168, 85, 247, 0.18);
}
.gh-dock-prompt .gh-prompt-add {
    width: 42px;
    height: 42px;
    font-size: 22px;
}
.gh-dock-prompt input,
.gh-dock-prompt textarea.gh-prompt-field {
    flex: 1;
    border: 0;
    outline: none;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(226, 232, 240, 0.95);
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 16px;
    font-family: inherit;
}
.gh-dock-prompt textarea.gh-prompt-field {
    min-height: 44px;
    max-height: 168px;
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
}
.gh-dock-prompt textarea.gh-prompt-field::-webkit-scrollbar {
    width: 6px;
}
.gh-dock-prompt textarea.gh-prompt-field::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.35);
    border-radius: 999px;
}
.gh-dock-prompt .gh-send {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.6);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(135deg, rgba(168, 85, 247, 0.45), rgba(124, 58, 237, 0.18));
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.gh-dock-prompt .gh-send svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.gh-dock-prompt input::placeholder,
.gh-dock-prompt textarea.gh-prompt-field::placeholder {
    color: rgba(226, 232, 240, 0.38);
    font-weight: 500;
}

.gh-dock-prompt .gh-send.is-stop {
    border-color: rgba(248, 113, 113, 0.38);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.88), rgba(185, 28, 28, 0.9));
}

.gh-dock-prompt .gh-send.is-stop:hover {
    filter: brightness(1.06);
}

/*
 * Studio credits widget: fixed bottom-right for both home (pre-search) and studio dock.
 * Input bars keep their original centered width; credits do not sit in the same row.
 */
.gh-studio-credits {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gh-studio-credits--corner-fixed {
    position: fixed;
    z-index: 48;
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: calc(14px + env(safe-area-inset-right));
    margin: 0;
    pointer-events: auto;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.5));
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(168, 85, 247, 0.08) inset;
}

.gh-studio-credits-coin {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.gh-studio-credits--corner-fixed .gh-studio-credits-coin {
    width: 46px;
    height: 46px;
}

.gh-studio-credits-value {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: rgba(252, 211, 77, 0.96);
    min-width: 2.5ch;
    text-align: right;
    line-height: 1;
}

.gh-studio-credits-bolt {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: rgba(250, 204, 21, 0.96);
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.32);
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.gh-studio-credits-bolt:hover {
    background: rgba(250, 204, 21, 0.2);
    border-color: rgba(250, 204, 21, 0.45);
    transform: scale(1.05);
}

@media (max-width: 520px) {
    .gh-studio-credits--corner-fixed {
        bottom: calc(10px + env(safe-area-inset-bottom));
        right: calc(10px + env(safe-area-inset-right));
        padding: 5px 10px 5px 8px;
    }

    .gh-studio-credits {
        gap: 5px;
    }

    .gh-studio-credits-value {
        font-size: 15px;
    }

    .gh-studio-credits-coin,
    .gh-studio-credits--corner-fixed .gh-studio-credits-coin {
        width: 38px;
        height: 38px;
    }

    .gh-studio-credits-bolt {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
}

/* Sidebar recents (ChatGPT-like, minimal) */
.gh-nav-divider {
    height: 1px;
    margin: 10px 10px 8px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* Recents pinned above profile; nav scrolls independently above */
.gh-recents-wrap {
    flex: 0 0 auto;
    min-height: clamp(72px, 14vh, 160px);
    max-height: min(28vh, 220px);
    display: flex;
    flex-direction: column;
    padding: 0 8px 4px;
    flex-shrink: 0;
}

.gh-recents-wrap[hidden] {
    display: none !important;
}

.gh-recents-wrap ~ .gh-sidebar-spacer {
    display: none;
}

.gh-sidebar-spacer {
    display: none;
}

.gh-recents-label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    color: rgba(226, 232, 240, 0.38);
    padding: 4px 8px 8px;
    margin: 0;
}

.gh-recents {
    flex: 1 1 auto;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 4px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.42) rgba(0, 0, 0, 0.22);
}

.gh-recents::-webkit-scrollbar {
    width: 6px;
}

.gh-recents::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
}

.gh-recents::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.42);
    border-radius: 999px;
}

.gh-recents::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 100, 200, 0.52);
}

.gh-recent {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 8px 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    color: rgba(226, 232, 240, 0.86);
}

.gh-recent:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gh-recent.is-selected {
    background: rgba(124, 58, 237, 0.18);
    box-shadow: inset 0 0 0 1.5px rgba(167, 139, 250, 0.7);
}

.gh-recent.is-selected:hover {
    background: rgba(124, 58, 237, 0.24);
}

.gh-recent-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    place-items: center;
}

.gh-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gh-recent-thumb--empty {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.35));
}

.gh-recent-thumb--empty::after {
    content: '';
    width: 18px;
    height: 18px;
    opacity: 0.35;
    background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.9), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.55), transparent 50%);
    border-radius: 6px;
}

.gh-recent-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    justify-content: center;
}

.gh-recent-title {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gh-recent.gh-recent--generating .gh-recent-meta {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.gh-recent.gh-recent--generating .gh-recent-title {
    flex: 1;
    min-width: 0;
}

.gh-recent-gen-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #e9d5ff, #7c3aed 55%, #4c1d95);
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.75);
    animation: gh-recent-gen-pulse 1.1s ease-in-out infinite;
}

@keyframes gh-recent-gen-pulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.92);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.gh-nav .gh-nav-item.is-building {
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
}

.gh-nav .gh-nav-item.is-building .gh-label {
    letter-spacing: 0.02em;
}
.gh-studio-loghead,.gh-studio-previewhead{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:800;color:rgba(255,255,255,.75)}
.gh-studio-logbox{height:260px;overflow:auto;padding:10px 12px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.68);background:rgba(0,0,0,.28)}
.gh-studio-frame{background:rgba(0,0,0,.35);padding:10px;overflow:hidden}
.gh-studio-frame iframe{display:block;width:100%;height:720px;border:0;border-radius:16px;background:#000;overflow:hidden}
.gh-studio-thumbbox{padding:12px;position:relative;flex-shrink:0}
.gh-studio-thumbbox img{width:100%;aspect-ratio:4/3;border-radius:14px;object-fit:cover;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 40px rgba(0,0,0,.4);display:block}
.gh-studio-thumb-fill{
    width:100%;
    aspect-ratio:4/3;
    border-radius:14px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(0,0,0,.35));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.gh-studio-thumb-fill::after{
    content:'';
    width:42px;
    height:42px;
    opacity:.35;
    border-radius:10px;
    background:radial-gradient(circle at 30% 30%,rgba(168,85,247,.9),transparent 55%),
        radial-gradient(circle at 70% 60%,rgba(59,130,246,.55),transparent 50%);
}
.gh-studio-thumbbox:not(.is-empty) .gh-studio-thumb-fill{display:none}
.gh-studio-thumbbox.is-empty img{display:none!important}
.gh-studio-thumbbox.is-thumb-loading .gh-studio-thumb-fill{display:none}
.gh-studio-thumbbox.is-thumb-loading img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:contain;
    padding:28%;
    background:rgba(0,0,0,.28);
    box-shadow:none;
}
.gh-studio-thumb{display:flex;flex-direction:column;min-width:0}

.gh-studio-thumb.gh-thumb-aside {
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    min-height: 0;
    height: 100%;
}

.gh-thumb-aside-head {
    padding: 0 4px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.42);
}

.gh-thumb-aside .gh-studio-thumbbox {
    padding: 0 4px 8px;
}

/* Chat stream (frameless bubbles) — scrollbar matches sidebar recents */
.gh-chat-box {
    flex: 1;
    overflow: auto;
    padding: 4px 4px 8px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.42) rgba(0, 0, 0, 0.22);
}

.gh-chat-box::-webkit-scrollbar {
    width: 6px;
}

.gh-chat-box::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
}

.gh-chat-box::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.42);
    border-radius: 999px;
}

.gh-chat-box::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 100, 200, 0.52);
}

.gh-msg {
    display: flex;
}

.gh-msg.is-agent {
    justify-content: flex-start;
}

.gh-msg.is-user {
    justify-content: flex-end;
}

.gh-bubble {
    max-width: 92%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.55;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.8);
}

.gh-bubble.gh-bubble-plain,
.gh-msg.is-status-line .gh-bubble {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 5px 0 5px 2px;
    max-width: 100%;
}

.gh-msg.is-user .gh-bubble {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.18);
    color: rgba(255, 255, 255, 0.9);
}

.gh-msg.is-plain-agent .gh-bubble-plain-agent {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
    padding: 10px 12px;
    max-width: 92%;
    max-height: 11rem;
    overflow-y: auto;
    word-break: break-word;
}

.gh-msg.is-plain-agent.gh-msg-kickoff .gh-bubble-plain-agent {
    max-height: none;
    overflow: visible;
}

.gh-plain-agent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gh-plain-agent-txt {
    flex: 1;
    min-width: 0;
}

.gh-chat-input{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02)}
.gh-chat-input input{
    flex:1;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.46);
    padding:0 16px;
    color:rgba(255,255,255,.92);
    outline:none;
}
.gh-chat-input input::placeholder{color:rgba(255,255,255,.35)}
.gh-chat-input button{
    height:46px;
    width:46px;
    border-radius:999px;
    border:1px solid rgba(168,85,247,.28);
    background:linear-gradient(180deg, rgba(168,85,247,.95), rgba(124,58,237,.92));
    color:white;
    font-weight:900;
    display:grid;
    place-items:center;
    padding:0;
}
.gh-chat-input button:hover{filter:brightness(1.05)}

.gh-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gh-chat-reset{height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font-weight:800;font-size:12px}
.gh-chat-reset:hover{background:rgba(255,255,255,.06)}

/* Creative kickoff — option chips inside existing chat bubbles */
.gh-chat-box.gh-kickoff-open{overflow:visible;flex:1 1 auto;min-height:min(52vh,420px)}
.gh-kickoff-wrap{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px;pointer-events:auto;max-height:none;overflow:visible}
.gh-kickoff-wrap.gh-kickoff-wrap--many{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:480px){.gh-kickoff-wrap.gh-kickoff-wrap--many{grid-template-columns:1fr}}
.gh-kickoff-opt{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.92);cursor:pointer;font:inherit;line-height:1.32}
.gh-kickoff-opt:hover{background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.38)}
.gh-kickoff-opt-title{font-weight:800;font-size:13px;display:block}
.gh-kickoff-opt-desc{font-size:11px;color:rgba(255,255,255,.55);margin-top:3px;display:block;line-height:1.35}
.gh-kickoff-pick{grid-column:1/-1;margin-top:2px;font-size:11px;background:none;border:none;color:rgba(168,85,247,.95);cursor:pointer;padding:4px 0;font-weight:700;text-align:left}
.gh-kickoff-manifest{margin-top:10px;font-size:12px;color:rgba(255,255,255,.62);line-height:1.5}
.gh-kickoff-warn{color:#f87171;font-size:12px;margin-top:6px}
.gh-plain-agent-txt.gh-typing::after{content:'▋';opacity:.65;animation:gh-cursor-blink .85s step-end infinite;margin-left:1px}
@keyframes gh-cursor-blink{50%{opacity:0}}

/* Right column info */
.gh-studio-sideinfo {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 8px 14px 12px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 180, 0.42) rgba(0, 0, 0, 0.22);
}

.gh-studio-sideinfo::-webkit-scrollbar {
    width: 6px;
}

.gh-studio-sideinfo::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
}

.gh-studio-sideinfo::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 180, 0.42);
    border-radius: 999px;
}

.gh-studio-sideinfo::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 100, 200, 0.52);
}

.gh-game-title{margin-top:2px;font-weight:900;color:rgba(255,255,255,.92);letter-spacing:-.02em}

.gh-game-meta-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 650;
    color: rgba(226, 232, 240, 0.72);
}

.gh-game-platform .gh-plat-ico {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.14);
    border: 1px solid rgba(168, 85, 247, 0.28);
}

.gh-game-platform .gh-plat-ico svg {
    width: 14px;
    height: 14px;
    stroke: rgba(192, 132, 252, 0.95);
    fill: none;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gh-game-platform .gh-plat-lbl {
    letter-spacing: 0.06em;
    font-weight: 800;
    color: rgba(226, 232, 240, 0.88);
}

.gh-game-platform .gh-meta-sep {
    color: rgba(226, 232, 240, 0.35);
    font-weight: 700;
    user-select: none;
}

.gh-game-platform .gh-game-ver {
    letter-spacing: 0.04em;
    font-weight: 750;
    color: rgba(192, 132, 252, 0.92);
}

.gh-game-cat .gh-cat-k {
    color: rgba(226, 232, 240, 0.45);
    font-weight: 700;
}

.gh-game-cat .gh-cat-v {
    color: rgba(226, 232, 240, 0.82);
}

.gh-game-stats {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}

.gh-game-stats .gh-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 750;
    color: rgba(226, 232, 240, 0.88);
}

.gh-game-stats .gh-stat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.14);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: rgba(192, 132, 252, 0.95);
}

.gh-game-stats .gh-stat-ico svg {
    display: block;
    stroke: currentColor;
    fill: none;
}

.gh-game-stats .gh-stat-ico--fill svg {
    fill: rgba(192, 132, 252, 0.95);
    stroke: none;
}

.gh-admin-learn{
    display:flex;
    gap:8px;
    align-items:center;
    margin-right:auto;
}

.gh-btn-lite{
    height:34px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.92);
    font-weight:700;
    font-size:12px;
    cursor:pointer;
}
.gh-btn-lite:hover{background:rgba(255,255,255,.06)}
.gh-btn-lite:disabled{opacity:.6;cursor:not-allowed}

.gh-btn-publish {
    flex: 1;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.45);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.95), rgba(124, 58, 237, 0.9));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.gh-btn-publish--sm {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    gap: 0;
}
.gh-btn-publish--sm .gh-btn-publish-label {
    display: inline;
}
.gh-btn-publish--sm .gh-btn-publish-ico {
    display: none;
}
.gh-btn-publish.is-ready-publish:not(:disabled):not(.is-unpublish):not(.is-pending-review):not(.is-listing-blocked) {
    background: linear-gradient(180deg, #34d399, #16a34a);
    border-color: rgba(52, 211, 153, 0.55);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 8px 20px rgba(22, 163, 74, 0.28);
}
.gh-game-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.gh-btn-trash {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.2);
    color: rgba(252, 165, 165, 0.95);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gh-btn-publish-ico {
    display: flex;
    flex-shrink: 0;
    color: #fff;
}

.gh-btn-publish-ico .gh-ico-upload {
    display: block;
}

.gh-btn-publish-label {
    flex: 0 1 auto;
}

.gh-btn-export.gh-btn-export--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
}
.gh-btn-export.gh-btn-export--icon svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* Landscape preview: Gamme Studio collapses to cube icon only */
.gh-home.is-landscape .gh-btn-editor {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
    gap: 0;
}
.gh-home.is-landscape .gh-btn-editor .gh-btn-publish-label {
    display: none;
}

.gh-btn-publish:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

.gh-btn-publish:not(:disabled):hover {
    filter: brightness(1.06);
}

.gh-btn-publish.is-unpublish {
    background: linear-gradient(180deg, rgba(55, 55, 65, 0.95), rgba(40, 40, 48, 0.92));
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(226, 232, 240, 0.9);
}

.gh-btn-trash:hover {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.4);
}

.gh-delete-modal .gh-delete-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.gh-delete-modal .gh-delete-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    cursor: pointer;
}

.gh-delete-confirm {
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.88));
    color: #fff;
    font-weight: 800;
    padding: 8px 16px;
    cursor: pointer;
}

.gh-howto{margin-top:6px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.62);word-break:break-word;white-space:pre-wrap}

.gh-title {
    margin: 0 0 8px;
    font-size: clamp(34px, 4.5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.gh-title em {
    font-style: normal;
    color: var(--gh-purple);
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.35);
}

.gh-sub {
    margin: 0 auto 22px;
    max-width: 44rem;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gh-muted);
}

/* Create bar: add assets / reference (before main input) */
.gh-prompt-add {
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.95);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.gh-prompt-add:hover {
    border-color: rgba(168, 85, 247, 0.75);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}
.gh-prompt-add.has-att {
    border-color: rgba(52, 211, 153, 0.75);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.12);
}

.gh-prompt-add:disabled,
.gh-prompt-add.is-busy {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
.gh-prompt-add-ico {
    display: block;
    margin-top: -2px;
}

/* Wrap: + button, notification badge, quick menu popover */
.gh-prompt-add-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    vertical-align: middle;
    z-index: 5;
}
/* Notification badge: bottom-right of + circle */
.gh-prompt-add .gh-asset-total-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    left: auto;
    top: auto;
    min-width: 18px;
    min-height: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid rgba(7, 6, 14, 0.98);
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.gh-prompt-add:hover .gh-asset-total-badge {
    background: #f87171;
}
.gh-asset-total-badge[hidden] {
    display: none !important;
}
/* “+” → Create Your Game — compact, subtle */
.gh-modal.gh-create-choice-modal {
    z-index: 105;
    padding: min(16px, 3vw) min(18px, 3vw);
    box-sizing: border-box;
}
.gh-modal-card.gh-create-choice-card {
    width: min(1020px, calc(100vw - 36px));
    max-width: min(1020px, calc(100vw - 36px));
    text-align: left;
    padding: 20px 22px 16px;
    border-radius: 18px;
    border: 1px solid rgba(168, 85, 247, 0.22);
    background: linear-gradient(165deg, rgba(14, 14, 22, 0.96) 0%, rgba(8, 8, 14, 0.97) 100%);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(176, 132, 255, 0.04) inset;
}
.gh-create-choice-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-right: 38px;
}
.gh-create-choice-cube {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.22);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.12);
}
.gh-create-choice-cube svg {
    display: block;
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.28));
}
.gh-create-choice-head-text {
    min-width: 0;
}
.gh-create-choice-title {
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.28rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f1f5f9;
}
.gh-create-choice-title-accent {
    color: #a78bfa;
    font-weight: 800;
}
.gh-create-choice-sub {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.68);
}
.gh-create-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 18px);
    align-items: stretch;
}
.gh-create-choice-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: none;
}
.gh-create-choice-hero {
    display: grid;
    place-items: center;
    min-height: 76px;
    margin-bottom: 10px;
}
.gh-create-choice-bigico {
    width: 72px;
    height: auto;
    max-width: 100%;
}
.gh-create-choice-panel-title {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #e2e8f0;
}
.gh-create-choice-panel-desc {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.65);
    flex: 1;
}
.gh-create-choice-chips,
.gh-create-choice-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-bottom: 12px;
    min-height: 26px;
}
.gh-create-choice-thumbs--assets {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
}
.gh-create-choice-thumbs--assets .gh-create-choice-thumb {
    flex: 0 0 auto;
    width: 48px;
}
.gh-create-choice-thumbs--ref {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
}
.gh-create-choice-thumbs--ref .gh-create-choice-thumb {
    flex: 0 0 auto;
    width: 48px;
}
.gh-create-choice-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 6px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.88);
    background: rgba(15, 15, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.gh-cc-chip-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(196, 181, 253, 0.92);
    opacity: 0.95;
}
.gh-cc-chip-ico svg {
    display: block;
    width: 12px;
    height: 12px;
}
.gh-cc-chip-dot {
    display: inline-block;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-create-choice-chip--more {
    padding: 4px 10px;
    color: rgba(148, 163, 184, 0.9);
    background: transparent;
    border-style: dashed;
}
.gh-create-choice-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 48px;
    height: 40px;
    padding-bottom: 2px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(6, 8, 14, 0.45);
    box-shadow: none;
}
.gh-create-choice-thumb-ico {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    pointer-events: none;
}
.gh-create-choice-thumb-ico svg {
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0.95;
    filter: none;
}
.gh-create-choice-thumb-lbl {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 0 2px;
    font-size: 6.5px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    color: rgba(248, 250, 252, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.gh-create-choice-chip--thumb-more {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    background: rgba(6, 8, 14, 0.35);
    color: rgba(255, 255, 255, 0.65);
}
.gh-create-choice-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.92) 0%, rgba(109, 40, 217, 0.88) 100%);
    box-shadow: 0 4px 14px rgba(91, 33, 182, 0.28);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.gh-create-choice-cta:hover {
    filter: brightness(1.05);
    transform: translateY(-0.5px);
}
.gh-create-choice-cta-arrow {
    font-size: 0.9rem;
    opacity: 0.88;
}
.gh-create-choice-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.6875rem;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.82);
    text-align: center;
}
.gh-create-choice-tip-ico {
    opacity: 0.85;
}
@media (max-width: 900px) {
    .gh-create-choice-grid {
        grid-template-columns: 1fr;
    }
    .gh-create-choice-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.gh-add-modal-card {
    max-width: min(560px, 94vw);
    width: 100%;
}
.gh-add-modal .gh-modal-backdrop {
    background: rgba(7, 6, 14, 0.82);
}
/* Add-assets modal — layout replication: mgmt zone (top) vs wizard card (bottom), palette #0B0B12 / #7B3FF2–#B084FF */
.gh-add-modal-card--studio {
    --gh-add-bg: #0b0b12;
    --gh-add-purple-a: #7b3ff2;
    --gh-add-purple-b: #b084ff;
    max-width: min(860px, 94vw);
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(123, 63, 242, 0.38);
    background: var(--gh-add-bg);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(176, 132, 255, 0.12) inset,
        0 0 60px rgba(123, 63, 242, 0.12);
    font-family: ui-sans-serif, system-ui, Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.gh-add-modal .gh-modal-x {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.45);
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
}
.gh-add-studio-head {
    margin-bottom: 12px;
}
.gh-add-studio-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: rgba(248, 250, 252, 0.96);
}
.gh-add-title-accent {
    color: #b084ff;
    text-shadow: 0 0 22px rgba(123, 63, 242, 0.45);
}
.gh-add-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.gh-add-tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(226, 232, 240, 0.72);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.gh-add-tab.is-active {
    border-color: rgba(176, 132, 255, 0.65);
    background: linear-gradient(135deg, rgba(123, 63, 242, 0.55), rgba(176, 132, 255, 0.28));
    color: #fff;
    box-shadow: 0 0 24px rgba(123, 63, 242, 0.35);
}
.gh-add-tab--soon {
    opacity: 0.45;
    cursor: not-allowed;
}
.gh-add-panel {
    margin-bottom: 0;
}
.gh-add-didactic {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.68);
}
/* Two-column: library (left) + wizard (right) */
.gh-add-split {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(240px, 1fr);
    gap: 14px;
    align-items: start;
}
.gh-add-lib-tabs--above-split {
    margin-bottom: 10px;
}
.gh-add-library {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
/* Empty library: dashed hero (upload CTA) + large empty panel below toolbar */
.gh-add-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(123, 63, 242, 0.45);
    background: rgba(0, 0, 0, 0.35);
    text-align: center;
    min-height: 212px;
    box-sizing: border-box;
}
.gh-add-empty-hero[hidden] {
    display: none !important;
}
.gh-add-empty-hero-ico {
    color: rgba(176, 132, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gh-add-empty-hero-txt {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.78);
    max-width: 280px;
}
.gh-add-empty-hero-btn {
    margin-top: 4px;
    padding: 10px 20px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg, #7b3ff2, #9d5cff);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(123, 63, 242, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gh-add-empty-hero-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(123, 63, 242, 0.45);
}
.gh-add-lib-empty-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    padding: 18px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.35);
    text-align: center;
}
.gh-add-lib-empty-panel[hidden] {
    display: none !important;
}
.gh-add-lib-empty-panel-ico {
    color: rgba(226, 232, 240, 0.35);
}
.gh-add-lib-empty-panel-txt {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.55);
    max-width: 260px;
}
.gh-add-lib-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 2px;
}
.gh-add-lib-tab {
    padding: 8px 4px 10px;
    margin-right: 16px;
    border: 0;
    background: none;
    color: rgba(226, 232, 240, 0.5);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.gh-add-lib-tab.is-active {
    color: #fff;
    border-bottom-color: #b084ff;
}
.gh-add-lib-tab--packs {
    opacity: 0.45;
    cursor: not-allowed;
}
.gh-add-badge-new {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    background: rgba(123, 63, 242, 0.45);
    color: #fff;
}
.gh-add-lib-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.gh-add-search {
    flex: 1;
    min-width: 120px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(248, 250, 252, 0.95);
    font-size: 13px;
}
.gh-add-filter {
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.9);
    font-size: 12px;
    max-width: 140px;
}
.gh-add-view-toggle {
    display: flex;
    gap: 4px;
}
.gh-add-view-toggle button {
    width: 36px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(226, 232, 240, 0.55);
    cursor: pointer;
    font-size: 14px;
}
.gh-add-view-toggle button.is-active {
    border-color: rgba(176, 132, 255, 0.55);
    color: #fff;
    box-shadow: 0 0 16px rgba(123, 63, 242, 0.22);
}
.gh-add-asset-grid--lib {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.gh-add-asset-grid--lib.gh-add-asset-grid--list {
    grid-template-columns: 1fr;
}
.gh-add-asset-grid--lib.gh-add-asset-grid--list .gh-asset-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
}
.gh-add-asset-grid--lib.gh-add-asset-grid--list .gh-asset-card-thumb {
    grid-row: 1 / span 2;
    aspect-ratio: 1;
}
.gh-add-asset-grid--lib.gh-add-asset-grid--list .gh-add-card-dash {
    grid-column: 1 / -1;
}
.gh-add-card-dash {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 132px;
    padding: 16px;
    border-radius: 16px;
    border: 2px dashed rgba(123, 63, 242, 0.45);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(226, 232, 240, 0.75);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.gh-add-card-dash:hover {
    border-color: rgba(176, 132, 255, 0.75);
    background: rgba(123, 63, 242, 0.08);
    box-shadow: 0 0 28px rgba(123, 63, 242, 0.15);
}
.gh-add-card-dash-plus {
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    color: rgba(176, 132, 255, 0.95);
}
.gh-add-card-dash-txt {
    font-size: 13px;
    font-weight: 800;
}
.gh-add-wizard-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.gh-add-wizard-placeholder {
    padding: 24px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
    text-align: left;
    min-height: 212px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gh-add-wizard-placeholder-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 900;
    color: rgba(248, 250, 252, 0.92);
}
.gh-add-wizard-placeholder-txt {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.55);
}
.gh-add-wizard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.gh-add-wizard-head-txt {
    min-width: 0;
}
.gh-add-wizard-product-title {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: rgba(248, 250, 252, 0.95);
}
.gh-add-wizard-step-of {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: rgba(176, 132, 255, 0.95);
}
.gh-add-wizard-x {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.85);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.gh-wiz-file-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.gh-wiz-file-meta {
    margin: 0;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.65);
    word-break: break-all;
}
.gh-wiz-change-file {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(176, 132, 255, 0.35);
    background: rgba(123, 63, 242, 0.15);
    color: rgba(237, 233, 254, 0.95);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.gh-asset-card-menu {
    position: absolute;
    top: 8px;
    right: 36px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.65);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    z-index: 3;
}
.gh-asset-card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gh-asset-card-edit {
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0.55;
}
.gh-asset-card-ok {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    color: rgba(52, 211, 153, 0.95);
    z-index: 2;
}
@media (max-width: 880px) {
    .gh-add-split {
        grid-template-columns: 1fr;
    }
    .gh-add-wizard-column {
        position: static;
    }
    /* While the add wizard is open, show it above the asset list so atlas/upload is not off-screen */
    .gh-add-split:has(.gh-add-wizard-card:not([hidden])) .gh-add-wizard-column {
        order: -1;
    }
}
.gh-add-tip-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.58);
}
.gh-add-tip-ico {
    flex: 0 0 auto;
    color: rgba(251, 191, 36, 0.95);
}
.gh-asset-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.38);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.gh-asset-card-thumb {
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.45);
}
.gh-asset-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gh-asset-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    z-index: 2;
}
.gh-asset-card-badge--player {
    border-color: rgba(167, 139, 250, 0.65);
    color: rgba(237, 233, 254, 0.98);
}
.gh-asset-card-badge--enemy {
    border-color: rgba(248, 113, 113, 0.55);
    color: rgba(254, 226, 226, 0.95);
}
.gh-asset-card-badge--projectile {
    border-color: rgba(251, 146, 60, 0.55);
}
.gh-asset-card-badge--collectible {
    border-color: rgba(250, 204, 21, 0.55);
}
.gh-asset-card-badge--background {
    border-color: rgba(56, 189, 248, 0.45);
}
.gh-asset-card-badge--ui {
    border-color: rgba(52, 211, 153, 0.45);
}
.gh-asset-card-body {
    padding: 10px 10px 12px;
}
.gh-asset-card-title {
    font-size: 12px;
    font-weight: 800;
    color: rgba(248, 250, 252, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-asset-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.gh-asset-pill {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: rgba(237, 233, 254, 0.88);
}
.gh-asset-pill--tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(226, 232, 240, 0.75);
}
.gh-asset-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(254, 226, 226, 0.95);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    z-index: 3;
}
/* Wizard = separate inner card (never visually merged with asset zone above) */
.gh-add-wizard-card {
    margin-top: 0;
    padding: 18px 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(123, 63, 242, 0.42);
    background: rgba(18, 16, 28, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 48px rgba(0, 0, 0, 0.45);
}
.gh-add-wizard-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
}
.gh-add-wizard-backtop {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.78);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.gh-add-stepper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
    flex-wrap: nowrap;
    min-width: 0;
}
.gh-step {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.55);
}
.gh-step.is-active {
    border-color: rgba(176, 132, 255, 0.95);
    background: linear-gradient(145deg, rgba(123, 63, 242, 0.65), rgba(176, 132, 255, 0.35));
    color: #fff;
    box-shadow: 0 0 22px rgba(123, 63, 242, 0.55);
}
.gh-step.is-done {
    border-color: rgba(52, 211, 153, 0.45);
    color: rgba(209, 250, 229, 0.95);
}
.gh-step-line {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
}
.gh-wiz-heading {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 900;
    color: rgba(248, 250, 252, 0.95);
}
.gh-wiz-lead {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.62);
}
.gh-wiz-lead-tip {
    margin: -6px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(167, 139, 250, 0.25);
    background: rgba(123, 63, 242, 0.08);
    font-size: 12px;
    line-height: 1.48;
    color: rgba(233, 213, 255, 0.88);
}
.gh-wiz-drop {
    display: block;
    cursor: pointer;
    border-radius: 16px;
    border: 2px dashed rgba(167, 139, 250, 0.35);
    background: rgba(0, 0, 0, 0.35);
    padding: 28px 16px;
    text-align: center;
    position: relative;
    transition: border-color 0.18s, background 0.18s;
}
.gh-wiz-drop:hover,
.gh-wiz-drop.is-drag {
    border-color: rgba(167, 139, 250, 0.75);
    background: rgba(139, 92, 246, 0.08);
}
.gh-wiz-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.gh-wiz-drop-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.gh-wiz-drop-title {
    font-size: 14px;
    font-weight: 900;
    color: rgba(248, 250, 252, 0.92);
}
.gh-wiz-drop-sub {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.55);
}
.gh-wiz-preview {
    margin-top: 14px;
    max-height: 160px;
    width: auto;
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/* Role picker: fixed 2 rows × 4 columns */
.gh-wiz-role-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    max-width: 520px;
}
.gh-wiz-role-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 76px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.42);
    color: rgba(226, 232, 240, 0.9);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.gh-wiz-role-btn:hover {
    border-color: rgba(176, 132, 255, 0.45);
}
.gh-wiz-role-btn.is-selected {
    border-color: rgba(176, 132, 255, 0.95);
    background: rgba(123, 63, 242, 0.18);
    box-shadow: 0 0 26px rgba(123, 63, 242, 0.42);
    color: #fff;
}
.gh-wiz-role-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: rgba(237, 233, 254, 0.92);
}
.gh-wiz-role-ico svg {
    width: 26px;
    height: 26px;
}
.gh-wiz-role-lbl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.2;
}
.gh-wiz-behave {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gh-wiz-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(226, 232, 240, 0.82);
    cursor: pointer;
}
.gh-wiz-check input {
    width: 16px;
    height: 16px;
    accent-color: #a855f7;
}
.gh-wiz-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.gh-wiz-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.45);
}
.gh-wiz-input {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(248, 250, 252, 0.92);
    font-size: 13px;
}
.gh-wiz-dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    font-size: 13px;
}
.gh-wiz-dl dt {
    margin: 0;
    color: rgba(226, 232, 240, 0.45);
    font-weight: 800;
}
.gh-wiz-dl dd {
    margin: 0;
    color: rgba(248, 250, 252, 0.88);
}
.gh-add-wizard-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gh-add-wiz-back {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.82);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.gh-add-wiz-back:hover {
    background: rgba(255, 255, 255, 0.06);
}
.gh-add-wiz-next,
.gh-add-wiz-commit {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(176, 132, 255, 0.55);
    background: linear-gradient(135deg, #7b3ff2, #b084ff);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(123, 63, 242, 0.35);
}
.gh-add-wiz-commit {
    border-color: rgba(52, 211, 153, 0.45);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.55), rgba(16, 185, 129, 0.35));
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.22);
}
@media (max-width: 560px) {
    .gh-add-wizard-top {
        flex-wrap: wrap;
    }
    .gh-add-stepper {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .gh-wiz-role-grid {
        max-width: none;
    }
}
.gh-add-ref-steps {
    margin: 0 0 14px 1rem;
    padding: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.72);
}
.gh-add-ref-steps li {
    margin-bottom: 8px;
}
.gh-add-ref-dropzone {
    display: block;
    position: relative;
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px dashed rgba(167, 139, 250, 0.28);
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.gh-add-ref-dropzone:hover,
.gh-add-ref-dropzone.is-drag {
    border-color: rgba(167, 139, 250, 0.65);
    background: rgba(139, 92, 246, 0.08);
}
.gh-add-ref-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}
.gh-add-ref-drop-hint {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.62);
}
.gh-add-codearea--glass {
    min-height: 180px;
    border-radius: 16px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    background: rgba(0, 0, 0, 0.5);
}
.gh-add-footer--studio {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.gh-add-footer--studio .gh-modal-link,
.gh-add-footer--studio .gh-add-done {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.gh-add-footer--studio .gh-add-done {
    background: linear-gradient(135deg, #7b3ff2, #b084ff);
    border-color: rgba(176, 132, 255, 0.65);
    box-shadow: 0 8px 28px rgba(123, 63, 242, 0.35);
}
.gh-add-hint {
    font-size: 13px;
    color: rgba(226, 232, 240, 0.65);
    margin: 0 0 10px;
    line-height: 1.45;
}
.gh-add-asset-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.gh-add-role {
    min-width: 120px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.45);
    color: rgba(226, 232, 240, 0.95);
    font-size: 13px;
}
.gh-add-file {
    flex: 1;
    min-width: 160px;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.75);
}
.gh-add-fname {
    font-size: 12px;
    color: rgba(52, 211, 153, 0.85);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-add-remove {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(248, 113, 113, 0.95);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.gh-add-row-btn {
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(168, 85, 247, 0.35);
    background: transparent;
    color: rgba(168, 85, 247, 0.95);
    font-size: 13px;
    cursor: pointer;
}
.gh-add-codearea {
    width: 100%;
    min-height: 220px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(226, 232, 240, 0.92);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}
.gh-add-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gh-add-done {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.55);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.45), rgba(124, 58, 237, 0.25));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.gh-prompt {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--gh-border);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 18px 55px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
    overflow: visible;
}

.gh-prompt.is-focus {
    border-color: rgba(168, 85, 247, 0.9);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18) inset, 0 0 44px rgba(168, 85, 247, 0.18);
    background: rgba(0, 0, 0, 0.45);
}

.gh-prompt input,
.gh-prompt textarea.gh-prompt-field {
    flex: 1;
    border: 0;
    outline: none;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(226, 232, 240, 0.95);
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 16px;
    font-family: inherit;
}

.gh-prompt input {
    border-radius: 999px;
}

.gh-prompt textarea.gh-prompt-field {
    min-height: 44px;
    max-height: 168px;
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
}

.gh-prompt textarea.gh-prompt-field::-webkit-scrollbar {
    width: 6px;
}

.gh-prompt textarea.gh-prompt-field::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.35);
    border-radius: 999px;
}

.gh-prompt input::placeholder,
.gh-prompt textarea.gh-prompt-field::placeholder {
    color: rgba(226, 232, 240, 0.45);
}

.gh-prompt button {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.6);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
        linear-gradient(135deg, rgba(168, 85, 247, 0.45), rgba(124, 58, 237, 0.18));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.15);
}

.gh-send {
    display: grid;
    place-items: center;
}
.gh-send svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.gh-tips {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.52);
}

/* suggestions removed from create panel */

.gh-store {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    opacity: 0.9;
}

.gh-store--section {
    justify-content: flex-start;
}

.gh-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.20));
    color: rgba(226, 232, 240, 0.9);
    cursor: pointer;
    transition: transform 0.12s, border-color 0.16s, background 0.16s;
}
.gh-store-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.10);
}

.gh-store-ico {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.16);
    color: rgba(255,255,255,0.96);
    font-weight: 800;
}

.gh-store-ico svg {
    width: 20px;
    height: 20px;
    display: block;
    color: rgba(255,255,255,0.96);
}

.gh-store-ico--google svg {
    width: 22px;
    height: 22px;
}
.gh-store-ico--desktop svg {
    width: 22px;
    height: 22px;
}

.gh-store-txt small {
    display: block;
    font-size: 10px;
    opacity: 0.75;
    line-height: 1.1;
}
.gh-store-txt strong {
    display: block;
    font-size: 13px;
    line-height: 1.1;
}

/* Landing sections removed (center is sidebar-driven) */

/* Modal (downloads) */
.gh-home.is-modal-open .gh-shell {
    filter: blur(6px);
}

.gh-home.is-auth-open .gh-shell {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}

body.gh-bonus-body-open {
    overflow: hidden;
}

body.gh-bonus-body-open .gh-shell {
    filter: blur(6px);
}

.gh-bonus-modal[hidden] {
    display: none;
}

.gh-bonus-modal {
    position: fixed;
    inset: 0;
    z-index: 1240;
    display: grid;
    place-items: center;
    padding: 20px;
}

.gh-bonus-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(5, 4, 12, 0.42);
    backdrop-filter: blur(8px);
}

.gh-bonus-dialog {
    position: relative;
    width: min(940px, 95vw);
    max-height: 94vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.92fr);
    grid-template-areas:
        "body side"
        "proof proof";
    gap: 0;
    border-radius: 28px;
    border: 1px solid rgba(168, 139, 250, 0.28);
    background:
        radial-gradient(circle at 18% 8%, rgba(168, 85, 247, 0.26), transparent 38%),
        radial-gradient(circle at 92% 92%, rgba(59, 130, 246, 0.18), transparent 40%),
        linear-gradient(150deg, rgba(20, 14, 38, 0.99), rgba(8, 7, 14, 0.99));
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.gh-bonus-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(10, 8, 18, 0.6);
    color: rgba(255, 255, 255, 0.82);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.gh-bonus-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.gh-bonus-body {
    grid-area: body;
    padding: 34px 30px 28px 36px;
    min-width: 0;
}

.gh-bonus-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: rgba(237, 233, 254, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gh-bonus-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 10px;
}

.gh-bonus-gift {
    font-size: 38px;
    line-height: 1;
    flex-shrink: 0;
}

.gh-bonus-title-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gh-bonus-title-top {
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.gh-bonus-title-accent {
    background: linear-gradient(92deg, #c4b5fd, #a855f7 60%, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.gh-bonus-lead {
    margin: 0 0 22px;
    max-width: 440px;
    color: rgba(226, 232, 240, 0.72);
    font-size: 15px;
    line-height: 1.55;
}

.gh-bonus-benefits {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-bonus-benefits li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.gh-bonus-ico {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.16);
    font-size: 18px;
}

.gh-bonus-benefit-text {
    min-width: 0;
}

.gh-bonus-benefit-text strong,
.gh-bonus-benefit-text em {
    display: block;
}

.gh-bonus-benefit-text strong {
    color: rgba(255, 255, 255, 0.94);
    font-size: 14px;
    font-weight: 800;
}

.gh-bonus-benefit-text em {
    margin-top: 1px;
    color: rgba(226, 232, 240, 0.6);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.gh-bonus-side {
    grid-area: side;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gh-bonus-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 150px;
    overflow: hidden;
}

.gh-bonus-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.gh-bonus-media.is-fallback {
    background:
        radial-gradient(circle at 50% 35%, rgba(168, 85, 247, 0.4), transparent 60%),
        linear-gradient(160deg, rgba(76, 29, 149, 0.6), rgba(8, 7, 14, 0.9));
}

.gh-bonus-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8, 7, 14, 0) 30%, rgba(8, 7, 14, 0.55) 72%, rgba(8, 7, 14, 0.92) 100%);
}

.gh-bonus-panel {
    position: relative;
    z-index: 2;
    margin: -64px 22px 22px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 10, 20, 0.82);
    backdrop-filter: blur(8px);
}

.gh-bonus-remaining {
    margin: 0 0 9px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 800;
}

.gh-bonus-remaining strong {
    color: #fca5f5;
}

.gh-bonus-progress {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.gh-bonus-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a855f7, #6366f1);
}

.gh-bonus-joined {
    margin: 8px 0 14px;
    color: rgba(226, 232, 240, 0.66);
    font-size: 12px;
    font-weight: 650;
}

.gh-bonus-google,
.gh-bonus-email {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.gh-bonus-google {
    border: 0;
    background: linear-gradient(92deg, #7c3aed, #6366f1);
    color: #fff;
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.4);
    transition: transform 0.14s, box-shadow 0.14s;
}

.gh-bonus-google:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 52px rgba(124, 58, 237, 0.5);
}

.gh-bonus-google svg path {
    fill: #fff;
}

.gh-bonus-email {
    margin-top: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
}

.gh-bonus-email:hover {
    background: rgba(255, 255, 255, 0.11);
}

.gh-bonus-note {
    margin: 11px 0 0;
    color: rgba(226, 232, 240, 0.5);
    font-size: 11.5px;
    text-align: center;
}

.gh-bonus-proof {
    grid-area: proof;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.18);
}

.gh-bonus-avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.gh-bonus-avatar {
    position: relative;
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid rgba(14, 11, 22, 0.95);
    background: rgba(124, 58, 237, 0.2);
    flex-shrink: 0;
}

.gh-bonus-avatar:first-child {
    margin-left: 0;
}

.gh-bonus-avatar .gh-bonus-avatar-img,
.gh-bonus-avatar .gh-bonus-avatar-atlas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.gh-bonus-stars {
    color: #fbbf24;
    letter-spacing: 2px;
    font-size: 14px;
}

.gh-bonus-proof-text {
    color: rgba(226, 232, 240, 0.66);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .gh-bonus-dialog {
        grid-template-columns: 1fr;
        grid-template-areas:
            "side"
            "body"
            "proof";
        overflow-y: auto;
    }

    .gh-bonus-body {
        padding: 22px 20px 20px;
    }

    .gh-bonus-media {
        min-height: 150px;
    }

    .gh-bonus-panel {
        margin: -56px 16px 16px;
    }

    .gh-bonus-proof {
        padding: 12px 20px;
    }
}

body.gh-auth-body-open {
    overflow: hidden;
}

.gh-auth-modal[hidden] {
    display: none;
}

.gh-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
    padding: 18px;
}

.gh-auth-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 16%, rgba(168, 85, 247, 0.18), transparent 38%),
        rgba(2, 2, 6, 0.78);
    backdrop-filter: blur(14px);
    cursor: default;
}

.gh-auth-dialog {
    position: relative;
    width: min(960px, calc(100vw - 28px));
    max-height: min(92vh, 620px);
    overflow: hidden;
    border: 1px solid rgba(168, 139, 250, 0.22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.18), transparent 42%),
        linear-gradient(165deg, rgba(14, 11, 24, 0.99), rgba(6, 5, 12, 0.99));
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.65);
    color: #f8fafc;
}

.gh-auth-dialog:has([data-gh-auth-panel="email"]:not([hidden])) {
    overflow-y: auto;
    scrollbar-width: none;
}

.gh-auth-dialog:has([data-gh-auth-panel="email"]:not([hidden]))::-webkit-scrollbar {
    display: none;
}

.gh-auth-panel[hidden] {
    display: none !important;
}

.gh-auth-intro {
    display: flex;
    flex-direction: column;
}

.gh-auth-intro-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
    min-height: 260px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gh-auth-intro-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 22px 22px 28px;
    min-width: 0;
}

.gh-auth-intro-bottom {
    padding: 14px 28px 18px;
}

.gh-auth-banner {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.gh-auth-banner img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.gh-auth-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(8, 6, 14, 0) 55%, rgba(8, 6, 14, 0.35) 100%);
    pointer-events: none;
}

.gh-auth-panel[data-gh-auth-panel="email"] {
    padding: 0;
    max-width: none;
    margin: 0;
}

.gh-auth-email-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
    min-height: 420px;
}

.gh-auth-email-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 22px 22px 28px;
    overflow-y: auto;
    max-height: min(92vh, 620px);
    scrollbar-width: none;
}

.gh-auth-email-main::-webkit-scrollbar {
    display: none;
}

.gh-auth-email-layout .gh-auth-banner--email {
    min-height: 100%;
}

.gh-auth-email-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.gh-auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(8, 6, 16, 0.72);
    color: rgba(255, 255, 255, 0.82);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.gh-auth-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.gh-auth-logo {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 10px;
}

.gh-auth-logo img {
    width: auto;
    height: 34px;
    object-fit: contain;
}

.gh-auth-logo--intro {
    margin-bottom: 10px;
}

.gh-auth-title {
    margin: 0 0 8px;
    text-align: left;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.gh-auth-title-white {
    color: #ffffff;
}

.gh-auth-title-accent {
    background: linear-gradient(92deg, #e9d5ff, #a855f7 55%, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gh-auth-sub {
    margin: 0 0 14px;
    color: rgba(226, 232, 240, 0.62);
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
}

.gh-auth-sub--intro {
    max-width: 38ch;
    font-size: 13px;
    margin-bottom: 14px;
}

.gh-auth-perks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 0;
}

.gh-auth-perk {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.18);
    background: rgba(168, 85, 247, 0.08);
    color: rgba(237, 233, 254, 0.9);
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 650;
}

.gh-auth-perk-ico {
    flex-shrink: 0;
    font-size: 16px;
}

.gh-auth-live {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    background: rgba(168, 85, 247, 0.08);
}

.gh-auth-live-avatars {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
}

.gh-auth-live-avatar {
    width: 48px;
    height: 48px;
    margin-left: -12px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.gh-auth-live-avatar:first-child {
    margin-left: 0;
}

.gh-auth-live-avatar-img,
.gh-auth-live-avatar-atlas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.gh-auth-live-line {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.gh-auth-live-sub {
    margin: 4px 0 0;
    color: rgba(226, 232, 240, 0.62);
    font-size: 12px;
}

.gh-auth-live-stars {
    color: #fbbf24;
    letter-spacing: 1px;
    margin-right: 4px;
}

.gh-auth-live-online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 5px 0 2px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.75);
    vertical-align: middle;
    animation: ghAuthLivePulse 1.8s ease-in-out infinite;
}

@keyframes ghAuthLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.92); }
}

.gh-auth-live-online-count {
    color: #4ade80;
    font-weight: 800;
}

.gh-auth-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gh-auth-or {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 400px);
    color: rgba(226, 232, 240, 0.42);
    font-size: 11px;
    text-transform: lowercase;
}

.gh-auth-or::before,
.gh-auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.gh-auth-or--compact {
    margin: 8px 0;
}

.gh-auth-email-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: min(100%, 400px);
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(226, 232, 240, 0.55);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gh-auth-email-link:hover {
    color: rgba(255, 255, 255, 0.82);
}

.gh-auth-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 14px;
    color: rgba(226, 232, 240, 0.5);
    font-size: 10.5px;
    font-weight: 650;
}

.gh-auth-spots {
    margin: 10px 0 0;
    text-align: center;
    color: rgba(226, 232, 240, 0.55);
    font-size: 11px;
}

.gh-auth-spots strong {
    color: #f0abfc;
}

.gh-auth-email-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.gh-auth-back {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    cursor: pointer;
}

.gh-auth-email-title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.gh-auth-email-sub {
    margin: 2px 0 0;
    color: rgba(226, 232, 240, 0.58);
    font-size: 12px;
}

.gh-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
}

.gh-auth-tabs button {
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(226, 232, 240, 0.68);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.gh-auth-tabs button.is-active {
    background: #fff;
    color: #09090b;
    box-shadow: 0 10px 26px rgba(255, 255, 255, 0.10);
}

.gh-auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    border-radius: 13px;
    background: #fff;
    color: #0b0b12;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.gh-auth-google--hero {
    min-height: 50px;
    width: auto;
    max-width: min(100%, 400px);
    min-width: 260px;
    align-self: center;
    border: 0;
    background: linear-gradient(92deg, #7c3aed, #6366f1);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.42);
    transition: transform 0.14s, box-shadow 0.14s;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
}

.gh-auth-google-main {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.gh-auth-google--hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 52px rgba(124, 58, 237, 0.5);
    color: #fff;
    filter: none;
}

.gh-auth-google--hero svg path {
    fill: #fff;
}

.gh-auth-google-badge {
    grid-column: 3;
    justify-self: end;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.gh-auth-google:hover {
    filter: brightness(0.94);
}

.gh-auth-error {
    margin: 0 0 10px;
    white-space: pre-line;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 12px;
    background: rgba(248, 113, 113, 0.1);
    color: #fecaca;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.4;
}

.gh-auth-form {
    display: grid;
    gap: 10px;
}

.gh-auth-form[hidden] {
    display: none !important;
}

.gh-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gh-auth-field {
    display: grid;
    gap: 5px;
    color: rgba(226, 232, 240, 0.72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gh-auth-field input {
    width: 100%;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    padding: 0 12px;
    outline: none;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.gh-auth-field input:focus {
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14);
}

.gh-auth-field input::placeholder {
    color: rgba(226, 232, 240, 0.34);
}

.gh-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(226, 232, 240, 0.62);
    font-size: 12px;
}

.gh-auth-row a,
.gh-auth-legal a {
    color: #c4b5fd;
    text-decoration: none;
}

.gh-auth-row a:hover,
.gh-auth-legal a:hover {
    text-decoration: underline;
}

.gh-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gh-auth-check input {
    accent-color: #a855f7;
}

.gh-auth-recaptcha {
    overflow: hidden;
    max-width: 100%;
}

.gh-auth-submit {
    height: 42px;
    margin-top: 4px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(92deg, #7c3aed, #6366f1);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}

.gh-auth-submit:hover {
    filter: brightness(1.04);
}

.gh-auth-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

.gh-auth-legal,
.gh-auth-unavailable {
    margin: 10px 0 0;
    color: rgba(226, 232, 240, 0.46);
    font-size: 10.5px;
    line-height: 1.45;
    text-align: left;
    max-width: 520px;
}

@media (max-width: 720px) {
    .gh-auth-intro-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .gh-auth-banner {
        order: -1;
        min-height: 160px;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .gh-auth-banner img {
        min-height: 160px;
    }

    .gh-auth-banner::after {
        background: linear-gradient(to bottom, rgba(8, 6, 14, 0) 40%, rgba(8, 6, 14, 0.5) 100%);
    }

    .gh-auth-intro-copy {
        padding: 18px 18px 16px;
    }

    .gh-auth-intro-bottom {
        padding: 14px 18px 18px;
    }

    .gh-auth-email-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .gh-auth-email-main {
        padding: 18px 18px 18px;
        max-height: none;
        overflow: visible;
    }

    .gh-auth-email-layout .gh-auth-banner--email {
        order: -1;
        min-height: 160px;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .gh-auth-dialog {
        width: min(560px, calc(100vw - 20px));
        max-height: min(94vh, 820px);
    }

    .gh-auth-google-badge {
        display: none;
    }

    .gh-auth-google--hero {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .gh-auth-google-main {
        grid-column: 1;
    }
}

@media (max-width: 520px) {
    .gh-auth-perks {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .gh-auth-grid {
        grid-template-columns: 1fr;
    }
}

.gh-auth-unavailable {
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.08);
    color: rgba(254, 243, 199, 0.88);
    padding: 12px;
}

.gh-modal[hidden] { display: none; }
.gh-modal.gh-delete-modal {
    z-index: 120;
}
.gh-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px;
}
.gh-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.68);
    border: 0;
}
.gh-modal-card {
    position: relative;
    width: min(560px, 92vw);
    border-radius: 22px;
    border: 1px solid rgba(168, 85, 247, 0.22);
    background: rgba(10, 10, 16, 0.92);
    box-shadow: 0 30px 110px rgba(0,0,0,0.75);
    padding: 22px 18px 18px;
    text-align: center;
    backdrop-filter: blur(14px);
}
.gh-modal-card.gh-add-modal-card--studio {
    text-align: left;
    width: min(860px, 94vw);
    max-width: min(860px, 94vw);
    max-height: min(86vh, 680px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 18px 14px;
    box-sizing: border-box;
    border-radius: 16px;
    scrollbar-width: thin;
    scrollbar-color: #7b3ff2 #050508;
}
.gh-modal-card.gh-add-modal-card--studio::-webkit-scrollbar {
    width: 8px;
}
.gh-modal-card.gh-add-modal-card--studio::-webkit-scrollbar-track {
    background: #050508;
    border-radius: 6px;
}
.gh-modal-card.gh-add-modal-card--studio::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a855f7 0%, #7b3ff2 55%, #6d28d9 100%);
    border-radius: 6px;
    border: 2px solid #050508;
}
.gh-modal-card.gh-add-modal-card--studio::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c084fc 0%, #9333ea 100%);
}
.gh-modal-x {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.gh-modal-logo {
    width: min(260px, 70vw);
    height: auto;
    display: block;
    margin: 6px auto 12px;
    filter: drop-shadow(0 0 28px rgba(168,85,247,0.40));
}
.gh-modal-title {
    margin: 0;
    font-size: 22px;
    font-weight: 950;
    color: #fff;
}
.gh-modal-sub {
    margin: 10px auto 0;
    max-width: 46ch;
    color: rgba(226,232,240,0.72);
    line-height: 1.6;
}
.gh-modal-link {
    display: inline-flex;
    margin-top: 14px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.12);
    color: rgba(255,255,255,0.95);
    text-decoration: none;
    font-weight: 900;
}
.gh-modal-link:hover {
    background: rgba(251, 191, 36, 0.16);
}

.gh-foot {
    pointer-events: auto;
    width: min(720px, 92vw);
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.55);
}

.gh-foot a {
    color: rgba(226, 232, 240, 0.78);
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 85, 247, 0.18);
}
.gh-foot a:hover {
    color: #fff;
    border-bottom-color: rgba(168, 85, 247, 0.55);
}

.gh-user {
    margin: auto 6px 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(52, 53, 65, 0.65);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    overflow: visible;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Solid footer card when menu is open so nothing bleeds through behind the popover. */
.gh-user[open] {
    z-index: 30;
    background: #343541;
    border-color: rgba(255, 255, 255, 0.12);
}

.gh-home:not(.is-collapsed):has(.gh-user[open]) .gh-sidebar {
    overflow: visible;
    z-index: 40;
}

.gh-user-sum {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    cursor: pointer;
}
.gh-user-sum::-webkit-details-marker { display:none; }

.gh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.95), rgba(124, 58, 237, 0.70));
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #fff;
    font-weight: 750;
    font-size: 12px;
    letter-spacing: -0.02em;
}

.gh-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.gh-inbox-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid rgba(12, 10, 20, 0.95);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45);
}

.gh-pop-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
}

.gh-user-popover-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.gh-mod-queue-badge {
    background: #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45);
}

.gh-avatar--photo {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(168, 85, 247, 0.35);
    overflow: hidden;
}
.gh-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gh-avatar--photo .gh-avatar-atlas {
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(12, 12, 18, 0.95);
}

.gh-recents-empty {
    font-size: 12px;
    color: rgba(226, 232, 240, 0.48);
    padding: 6px 4px;
}

.gh-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.gh-user-name {
    font-size: 13px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.gh-user-plan {
    font-size: 12px;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.48);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* Create-for tabs removed (create stays minimal) */
/* Create-for tabs */
.gh-createfor {
    margin-top: 12px;
    width: min(620px, 92vw);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.gh-createfor-label {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.46);
    margin: 0;
}
.gh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.gh-tab {
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: rgba(226,232,240,0.86);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.16s, background 0.16s;
    padding: 0 12px;
}
.gh-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.06);
}
.gh-tab.is-active {
    border-color: rgba(168, 85, 247, 0.55);
    background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(124,58,237,0.10));
    color: #fff;
    box-shadow: 0 14px 46px rgba(168,85,247,0.12);
}
.gh-tab-ico {
    display: grid;
    place-items: center;
    color: rgba(168, 85, 247, 0.95); /* purple by default */
}
.gh-tab-ico svg {
    width: 16px;
    height: 16px;
    display: block;
}
.gh-tab-ico svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gh-tab.is-active .gh-tab-ico {
    color: rgba(255,255,255,0.96); /* white when active */
}
.gh-tab-txt {
    font-weight: 900;
    font-size: 12px;
}

.gh-foot--home {
    padding: 34px 18px 22px;
}

/* Center pages */
.gh-page {
    text-align: left;
    width: min(920px, 92vw);
    margin: 0 auto;
}
.gh-page-kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(251, 191, 36, 0.82);
    margin-bottom: 10px;
}
.gh-page-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 950;
    letter-spacing: -0.02em;
    color: #fff;
}
.gh-page-sub {
    margin: 12px 0 0;
    color: rgba(226,232,240,0.70);
    line-height: 1.7;
}

.gh-page-cta {
    margin-top: 18px;
    display: grid;
    gap: 10px;
    justify-items: start;
}
.gh-page-cta .gh-page-note {
    color: rgba(226,232,240,0.62);
    font-size: 13px;
}

.gh-cta {
    display: inline-flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.12);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}
.gh-cta:hover {
    background: rgba(168, 85, 247, 0.18);
}
.gh-page-box {
    margin-top: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.26);
    padding: 16px 16px;
}
.gh-page-note {
    margin: 0;
    color: rgba(226,232,240,0.66);
}
.gh-page-link {
    display: inline-flex;
    margin-top: 12px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: rgba(168, 85, 247, 0.12);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}
.gh-page-link:hover {
    background: rgba(168, 85, 247, 0.18);
}

.gh-dl-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.gh-dl-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    padding: 14px 14px;
}
.gh-dl-head { display: flex; align-items: center; gap: 12px; }
.gh-dl-ico {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(168,85,247,0.22);
    background: rgba(168,85,247,0.10);
    color: rgba(255,255,255,0.94);
    font-weight: 900;
}
.gh-dl-title { font-weight: 950; color: rgba(226,232,240,0.94); }
.gh-dl-sub { margin-top: 2px; font-size: 12px; color: rgba(226,232,240,0.58); }
.gh-dl-tag {
    margin-top: 12px;
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(251,191,36,0.22);
    background: rgba(251,191,36,0.10);
    color: rgba(255,255,255,0.92);
    font-size: 12px;
    font-weight: 900;
}

.gh-studio-hero {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: center;
    border-radius: 22px;
    border: 1px solid rgba(168,85,247,0.14);
    background: rgba(0,0,0,0.24);
    padding: 16px 16px;
    overflow: hidden;
}
.gh-studio-title { margin: 0; font-weight: 950; font-size: 22px; color: #fff; }
.gh-studio-sub { margin: 10px 0 0; color: rgba(226,232,240,0.70); line-height: 1.65; }
.gh-studio-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.gh-studio-shot img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    display: block;
}
.gh-user-caret {
    margin-left: auto;
    opacity: 0.65;
    font-size: 18px;
    transform: translateY(-1px);
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.gh-user[open] .gh-user-caret {
    transform: translateY(-1px) rotate(90deg);
    opacity: 0.9;
}

.gh-user-popover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    top: auto;
    margin-top: 0;
    padding: 6px 0 8px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    /* Fully opaque — avoids Recents / summary text showing through */
    background-color: #1f1f23;
    background: #1f1f23;
    isolation: isolate;
    mix-blend-mode: normal;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 16px 48px rgba(0, 0, 0, 0.75);
    z-index: 2;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

.gh-help-popover {
    position: fixed;
    left: 0;
    top: 0;
    width: 292px;
    padding: 8px 0;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: #1f1f23;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 18px 54px rgba(0, 0, 0, 0.78);
    z-index: 10050;
}

.gh-help-popover[hidden] {
    display: none !important;
}

.gh-user-popover-chevron {
    flex-shrink: 0;
    opacity: 0.55;
    color: rgba(226, 232, 240, 0.75);
    display: grid;
    place-items: center;
}

.gh-user-popover-chevron--end {
    margin-left: auto;
}

.gh-user-popover-sep {
    height: 1px;
    margin: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
}

.gh-user-popover-group {
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
}

.gh-user-popover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 8px);
    margin: 0 auto;
    padding: 10px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(237, 237, 237, 0.95);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.gh-user-popover-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.gh-pop-ico {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: rgba(226, 232, 240, 0.72);
}

.gh-pop-ico svg {
    width: 18px;
    height: 18px;
    display: block;
}

.gh-pop-ico svg path,
.gh-pop-ico svg circle {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}

.gh-user-popover-item--danger {
    color: rgba(254, 202, 202, 0.96);
}

.gh-user-popover-item--danger:hover {
    background: rgba(248, 113, 113, 0.12);
}

.gh-user-popover-item--danger .gh-pop-ico {
    color: rgba(252, 165, 165, 0.85);
}

.gh-user-popover-logout {
    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {
    .gh-shell {
        grid-template-columns: 1fr;
    }

    .gh-mobile-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
        z-index: 1202;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(168, 85, 247, 0.35);
        background: rgba(12, 10, 22, 0.92);
        color: rgba(226, 232, 240, 0.95);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        cursor: pointer;
    }

    .gh-mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(3px);
    }

    .gh-mobile-nav-backdrop[hidden] {
        display: none !important;
    }

    .gh-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1201;
        width: min(280px, 86vw);
        max-width: 280px;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
    }

    .gh-home.is-mobile-nav-open .gh-sidebar {
        transform: translateX(0);
    }

    .gh-main,
    .gh-home--hub .gh-main.gh-main--hub {
        padding-top: 52px;
    }

    .gh-home:not(.is-studio) .gh-center[data-gh-panel="create"] > .gh-card {
        flex: 1 1 auto;
        justify-content: center;
        width: min(860px, 96vw);
        padding-top: 0;
    }

    .gh-card {
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .gh-title {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    .gh-createfor .gh-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .gh-dl-grid,
    .gh-studio-hero {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 901px) {
    .gh-mobile-nav-btn,
    .gh-mobile-nav-backdrop {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .gh-help-popover {
        width: min(292px, calc(100vw - 28px));
    }
}

/* Asset wizard atlas layout */
.gh-wiz-layout-fieldset {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 14px;
}
.gh-wiz-layout-fieldset .gh-wiz-label {
    margin-bottom: 8px;
    display: block;
}
.gh-wiz-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    cursor: pointer;
}
.gh-wiz-atlas-fields {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}
.gh-wiz-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gh-wiz-input--xs {
    width: 4.5rem;
}
.gh-wiz-hint {
    margin: 0;
    font-size: 11px;
    opacity: 0.72;
    line-height: 1.45;
}

/* Admin-only: promote generation → draft library template */
.gh-game-learn {
    margin-top: 14px;
}

.gh-learn-panel {
    padding: 12px 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.22);
    background: linear-gradient(
        165deg,
        rgba(124, 58, 237, 0.14) 0%,
        rgba(15, 12, 28, 0.65) 48%,
        rgba(10, 9, 18, 0.85) 100%
    );
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
}

.gh-learn-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.gh-learn-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(233, 213, 255, 0.98);
    border: 1px solid rgba(192, 132, 252, 0.42);
    background: rgba(88, 28, 135, 0.55);
}

.gh-learn-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(248, 250, 252, 0.96);
}

.gh-learn-hint {
    margin: 0 0 12px;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.56);
}

.gh-learn-promote {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(196, 181, 253, 0.38);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(245, 243, 255, 0.97);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.gh-learn-promote-ico {
    display: flex;
    flex-shrink: 0;
    color: rgba(216, 180, 254, 0.95);
}

.gh-learn-promote-label {
    flex: 1;
    text-align: center;
}

.gh-learn-promote:hover:not(:disabled) {
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(196, 181, 253, 0.55);
    filter: brightness(1.04);
}

.gh-learn-promote:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

/* Create Asset modal — Blox / Pixel Lab / Art Studio */
.gh-modal.gh-create-asset-modal {
    z-index: 1200;
    padding: min(20px, 3vw);
}
.gh-ca-backdrop {
    background:
        radial-gradient(circle at 50% 18%, rgba(123, 63, 242, 0.16), transparent 42%),
        rgba(2, 2, 8, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
body.gh-create-asset-open {
    overflow: hidden;
}
.gh-ca-card {
    position: relative;
    width: min(1180px, calc(100vw - 40px));
    max-height: min(92vh, 860px);
    overflow: auto;
    text-align: left;
    padding: 28px 30px 24px;
    border-radius: 24px;
    border: 1px solid rgba(168, 85, 247, 0.24);
    background:
        linear-gradient(165deg, rgba(18, 12, 32, 0.97) 0%, rgba(8, 8, 14, 0.98) 48%, rgba(6, 6, 12, 0.99) 100%);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(176, 132, 255, 0.06) inset,
        0 0 80px rgba(123, 63, 242, 0.14);
    scrollbar-width: thin;
    scrollbar-color: rgba(123, 63, 242, 0.55) transparent;
}
.gh-ca-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background 0.15s ease;
}
.gh-ca-close:hover {
    background: rgba(255, 255, 255, 0.1);
}
.gh-ca-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-right: 44px;
}
.gh-ca-head-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 247, 0.28);
    background: rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.18);
    color: #c4b5fd;
}
.gh-ca-head-icon svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.35));
}
.gh-ca-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f8fafc;
}
.gh-ca-sub {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.62);
}
.gh-ca-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    align-items: stretch;
}
.gh-ca-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.gh-ca-panel--blox {
    border-color: rgba(168, 85, 247, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(168, 85, 247, 0.06);
}
.gh-ca-panel--pixel {
    border-color: rgba(59, 130, 246, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(59, 130, 246, 0.06);
}
.gh-ca-panel--art {
    border-color: rgba(249, 115, 22, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(249, 115, 22, 0.06);
}
.gh-ca-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 10, 18, 0.95), rgba(4, 4, 10, 0.98));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gh-ca-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.gh-ca-panel-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 16px 18px;
}
.gh-ca-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.gh-ca-panel-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
}
.gh-ca-panel--blox .gh-ca-panel-icon {
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.28);
    color: #c4b5fd;
}
.gh-ca-panel--pixel .gh-ca-panel-icon {
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: #93c5fd;
}
.gh-ca-panel--art .gh-ca-panel-icon {
    background: rgba(249, 115, 22, 0.16);
    border: 1px solid rgba(249, 115, 22, 0.28);
    color: #fdba74;
}
.gh-ca-panel-icon svg {
    width: 16px;
    height: 16px;
}
.gh-ca-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.gh-ca-panel--blox .gh-ca-panel-title { color: #c4b5fd; }
.gh-ca-panel--pixel .gh-ca-panel-title { color: #93c5fd; }
.gh-ca-panel--art .gh-ca-panel-title { color: #fdba74; }
.gh-ca-desc {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.62);
}
.gh-ca-features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
    flex: 1;
}
.gh-ca-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.78);
}
.gh-ca-feat-ico {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(203, 213, 225, 0.85);
    flex-shrink: 0;
}
.gh-ca-feat-ico svg {
    width: 12px;
    height: 12px;
}
.gh-ca-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.gh-ca-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff;
}
.gh-ca-cta--blox {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.95) 0%, rgba(109, 40, 217, 0.92) 100%);
    box-shadow: 0 6px 20px rgba(91, 33, 182, 0.35);
}
.gh-ca-cta--pixel {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.92) 100%);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.32);
}
.gh-ca-cta--art {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.95) 0%, rgba(234, 88, 12, 0.92) 100%);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.32);
}
.gh-ca-cta-arrow {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.9;
}
.gh-ca-foot {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.06) inset;
}
.gh-ca-foot-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.22);
    color: #c4b5fd;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.15);
}
.gh-ca-foot-icon svg {
    width: 18px;
    height: 18px;
}
.gh-ca-foot-line {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.92);
}
.gh-ca-foot-sub {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.82);
}
@media (max-width: 980px) {
    .gh-ca-grid {
        grid-template-columns: 1fr;
    }
    .gh-ca-card {
        padding: 22px 18px 18px;
    }
}

/* ── GammeAI mode selector (dock) — override .gh-prompt button purple circle ── */
.gh-mode-pill-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 60;
    overflow: visible;
}

.gh-prompt .gh-mode-pill,
.gh-dock-prompt .gh-mode-pill {
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    box-shadow: none;
    place-items: unset;
}

.gh-prompt .gh-mode-pill:hover,
.gh-dock-prompt .gh-mode-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    filter: none;
    box-shadow: none;
}

.gh-mode-pill-chevron {
    opacity: 0.65;
    flex-shrink: 0;
}

.gh-mode-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 260px;
    max-width: min(260px, 88vw);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(22, 22, 28, 0.98);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    z-index: 200;
    overflow: visible;
}

.gh-mode-popup[hidden] {
    display: none !important;
}

/* Popup rows are buttons inside .gh-prompt — must reset global .gh-prompt button circle styles */
.gh-prompt .gh-mode-popup-item,
.gh-dock-prompt .gh-mode-popup-item {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 11px 12px !important;
    margin: 0;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    cursor: pointer;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    text-align: left;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    place-items: unset !important;
}

.gh-prompt .gh-mode-popup-item:hover,
.gh-dock-prompt .gh-mode-popup-item:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.gh-prompt .gh-mode-popup-item.is-active,
.gh-dock-prompt .gh-mode-popup-item.is-active {
    background: rgba(255, 255, 255, 0.09) !important;
}

.gh-mode-popup-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.gh-mode-popup-name {
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.25;
    white-space: normal;
}

.gh-mode-popup-desc {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
    white-space: normal;
}

.gh-mode-popup-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0;
    margin-top: 2px;
    stroke: rgba(255, 255, 255, 0.9);
}

.gh-mode-popup-item.is-active .gh-mode-popup-check {
    opacity: 1;
}

.gh-mode-popup-foot {
    margin-top: 2px;
    padding: 8px 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    line-height: 1.35;
}

.gh-mode-popup-foot a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
}

.gh-mode-popup-foot a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.gh-starter-no-match-hint {
    margin-top: 14px;
    opacity: 0.75;
    font-size: 12px;
    line-height: 1.5;
}

/* ── Sidebar Events submenu (always open) ── */
.gh-nav-divider--events {
    margin-top: 4px;
}

.gh-nav-group {
    width: 100%;
    margin: 0;
}

.gh-nav-group-label {
    padding: 6px 12px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.38);
    user-select: none;
}

.gh-nav-group-label--static {
    cursor: default;
}

.gh-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px 4px;
}

.gh-nav-subitem {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(226, 232, 240, 0.82);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.gh-nav-subitem:hover,
.gh-nav-subitem.is-active {
    background: rgba(255, 255, 255, 0.04);
}

.gh-nav-subitem.is-active {
    background: rgba(168, 85, 247, 0.12);
}

.gh-nav-subitem .gh-nav-sub-ico {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: rgba(168, 85, 247, 0.95);
    flex-shrink: 0;
}

.gh-nav-subitem .gh-nav-sub-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}

.gh-nav-subitem .gh-nav-sub-ico svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gh-nav-sub-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gh-nav-subitem .gh-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.gh-home.is-collapsed .gh-nav-group--events {
    display: none;
}

/* Collapsed sidebar — user menu above main content vignette */
.gh-home.is-collapsed:has(.gh-user[open]) .gh-sidebar {
    z-index: 10100;
}

.gh-home.is-collapsed.gh-user-menu-open .gh-sidebar {
    z-index: 10100;
}

.gh-home.is-collapsed:has(.gh-user[open])::before,
.gh-home.is-collapsed.gh-user-menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 10090;
    pointer-events: auto;
}

/* Collapsed sidebar — expanded user menu overlay */
.gh-home.is-collapsed .gh-user[open] {
    position: fixed;
    left: 10px;
    bottom: 56px;
    width: min(292px, calc(100vw - 20px));
    z-index: 10110;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #343541;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 20px 56px rgba(0, 0, 0, 0.78);
    border-radius: 14px;
    overflow: visible;
}

.gh-home.is-collapsed .gh-user[open] .gh-user-sum {
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
}

.gh-home.is-collapsed .gh-user[open] .gh-user-meta {
    display: flex;
}

.gh-home.is-collapsed .gh-user[open] .gh-user-caret {
    display: grid;
}

.gh-home.is-collapsed .gh-user[open] .gh-user-name {
    max-width: none;
}

.gh-home.is-collapsed .gh-user[open] .gh-user-popover {
    margin-top: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 14px 14px;
    box-shadow: none;
    background: #343541;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    z-index: 1;
}

/* ── Game Jam coming-soon modal ── */
.gh-game-jam-modal .gh-modal-card {
    max-width: 420px;
    padding: 24px 22px 20px;
    text-align: center;
}

.gh-game-jam-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.gh-game-jam-copy {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.72);
}

.gh-game-jam-ok {
    min-width: 96px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

/* ── Create home: mode pill + larger platform tabs ── */
.gh-center .gh-prompt-add-wrap--create {
    display: inline-flex;
}

.gh-center .gh-prompt .gh-mode-pill-wrap {
    flex-shrink: 0;
}

.gh-center .gh-prompt .gh-mode-pill {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13px;
}

.gh-center .gh-createfor {
    margin-top: 18px;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gh-center .gh-createfor-label {
    font-size: 10px;
    letter-spacing: 0.18em;
}

.gh-center .gh-tabs {
    gap: 10px;
}

.gh-center .gh-tab {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 14px;
}

.gh-center .gh-tab-ico svg {
    width: 18px;
    height: 18px;
}

/* ── Home: featured games rail (pinned near footer on create view) ── */
.gh-dev-games {
    margin-top: 0;
    width: 100%;
    max-width: 1040px;
    justify-self: center;
    text-align: left;
    flex-shrink: 0;
}

.gh-dev-games-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.gh-dev-games-title {
    margin: 0;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.94);
}

.gh-dev-games-explore {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: rgba(216, 205, 255, 0.72);
    text-decoration: none;
    padding: 0;
    border: 0;
    background: transparent;
    transition: color 0.15s, opacity 0.15s;
}

.gh-dev-games-explore:hover {
    color: rgba(255, 255, 255, 0.82);
    opacity: 1;
}

.gh-dev-games-rail-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gh-dev-games-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88px;
    display: none;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(6, 5, 11, 0) 0%,
        rgba(6, 5, 11, 0.55) 42%,
        rgba(6, 5, 11, 0.92) 78%,
        rgba(6, 5, 11, 1) 100%
    );
}

.gh-dev-games-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 2px 1px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gh-dev-games-rail::-webkit-scrollbar {
    display: none;
}

.gh-dev-games-tile {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.14s ease;
}

.gh-dev-games-tile:hover {
    transform: translateY(-3px);
}

.gh-dev-games-meta {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
    font-size: 12.5px;
    font-weight: 650;
    color: rgba(226, 232, 240, 0.66);
}

.gh-dev-games-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1.1 / 1;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.gh-dev-games-tile:hover .gh-dev-games-thumb {
    border-color: rgba(167, 139, 250, 0.42);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
}

.gh-dev-games-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gh-dev-games-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(99, 102, 241, 0.12));
}

.gh-dev-games-body {
    position: absolute;
    inset: auto 0 0;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 30px 11px 10px;
    background: linear-gradient(
        to top,
        rgba(7, 6, 12, 0.96) 0%,
        rgba(7, 6, 12, 0.76) 58%,
        rgba(7, 6, 12, 0) 100%
    );
}

.gh-dev-games-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.96);
}

.gh-dev-games-plays {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 750;
    color: rgba(226, 232, 240, 0.78);
}

.gh-dev-games-plays svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.gh-home.is-studio .gh-dev-games {
    display: none;
}

@media (max-width: 640px) {
    .gh-dev-games {
        margin-top: 0;
        margin-bottom: max(6px, env(safe-area-inset-bottom));
        width: min(680px, 94vw);
    }

    .gh-dev-games-rail {
        display: flex;
        grid-template-columns: none;
        justify-content: flex-start;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .gh-dev-games-tile {
        flex: 0 0 158px;
        scroll-snap-align: center;
    }

    .gh-dev-games-rail-wrap::after {
        display: block;
        width: 56px;
    }
}

/* PC viewport tuning — smaller laptops / HD height (mobile uses separate rules) */
@media (max-width: 1366px) {
    .gh-studio-grid {
        grid-template-columns: minmax(180px, 1fr) minmax(220px, 360px) minmax(180px, 280px);
        gap: 10px;
    }
}

@media (max-width: 1200px) {
    .gh-studio-grid {
        grid-template-columns: 1fr minmax(240px, 380px);
    }

    .gh-studio-thumb {
        grid-column: 1 / -1;
    }
}

@media (max-height: 880px) {
    .gh-brand .gh-brand-full {
        height: 58px;
        transform: scale(1.35);
    }

    .gh-brand-row .gh-brand {
        height: 58px;
    }

    .gh-recents-wrap {
        min-height: 64px;
        max-height: min(22vh, 160px);
    }

    .gh-work {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        gap: 10px;
    }

    .gh-home.is-studio .gh-work {
        padding-right: clamp(136px, 11vw, 168px);
    }

    .gh-nav a,
    .gh-nav button {
        padding: 8px 10px;
        font-size: 13px;
    }

    .gh-stream-chat {
        max-height: min(46vh, 420px);
    }

    .gh-preview-head-row {
        margin-bottom: 2px;
    }
}

@media (max-height: 720px) {
    .gh-recents-wrap {
        min-height: 56px;
        max-height: 108px;
    }

    .gh-home.is-collapsed .gh-recents-wrap {
        min-height: 48px;
        max-height: 96px;
    }

    .gh-user-popover {
        max-height: min(58vh, 380px);
    }

    .gh-home.is-studio .gh-work {
        padding-right: clamp(124px, 10vw, 150px);
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .gh-home.is-studio .gh-dock {
        width: min(720px, 100%);
    }

    .gh-studio-credits--corner-fixed {
        bottom: calc(10px + env(safe-area-inset-bottom));
        padding: 4px 8px 4px 6px;
    }

    .gh-studio-credits-coin,
    .gh-studio-credits--corner-fixed .gh-studio-credits-coin {
        width: 38px;
        height: 38px;
    }

    .gh-studio-credits-value {
        font-size: 15px;
    }

    .gh-studio-credits-bolt {
        width: 34px;
        height: 34px;
    }
}

/* ── Play page guest rewards modal ── */
.gh-play-guest-modal {
    z-index: 1260;
}

.gh-play-guest-dialog {
    padding: 0;
}

.gh-play-guest-title {
    margin: 0;
    text-align: left;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.gh-play-guest-sub {
    margin: 12px 0 0;
    max-width: none;
    text-align: left;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.72);
}

.gh-play-guest-val {
    color: #facc15;
    font-weight: 900;
    text-shadow: 0 0 28px rgba(250, 204, 21, 0.35);
}

.gh-play-guest-val--hero {
    font-size: clamp(34px, 4.2vw, 48px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.gh-play-guest-val--lg {
    font-size: clamp(22px, 2.8vw, 30px);
}

.gh-play-guest-val-label {
    color: #fde047;
    font-weight: 850;
    font-size: 0.92em;
}

.gh-play-guest-banner {
    position: relative;
}

.gh-play-guest-banner-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px 18px;
    background: linear-gradient(to top, rgba(8, 6, 14, 0.92) 0%, rgba(8, 6, 14, 0.55) 55%, transparent 100%);
}

.gh-play-guest-banner-kicker {
    color: rgba(250, 204, 21, 0.82);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gh-play-guest-banner-prize {
    color: #fff;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 900;
    line-height: 1.2;
}

.gh-play-guest-banner-prize .gh-play-guest-val {
    font-size: 1.15em;
}

.gh-play-guest-google {
    max-width: min(100%, 460px);
    min-width: 280px;
}

.gh-play-guest-skip {
    display: block;
    margin: 10px auto 0;
    border: 0;
    background: transparent;
    color: rgba(226, 232, 240, 0.48);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gh-play-guest-skip:hover {
    color: rgba(255, 255, 255, 0.78);
}

.gh-play-guest-legal {
    text-align: center;
    max-width: none;
}

@media (max-width: 720px) {
    .gh-play-guest-google {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}