/* GameDraft — views.css (Redesign 0.41, ab Etappe 3)
 * View-Inhalte im gd-Namespace: Home-Dashboard, Sektionen, Shelves, Karten.
 * Lädt als LETZTE Datei (nach shell.css).
 */

/* ==== Sektions-Grundgerüst ================================================= */
.gd-home { display: flex; flex-direction: column; gap: 28px; }
.gd-section { display: flex; flex-direction: column; gap: 12px; }
.gd-section-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.gd-section-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--gd2-text); }
.gd-section-more { margin-left: auto; height: 30px; padding: 0 10px; font-size: 13px; }

/* ==== Hero (Erstnutzer-Gast) ================================================ */
.gd-hero {
  position: relative; overflow: hidden;
  border-radius: var(--gd2-r-panel);
  border: 1px solid var(--gd2-border-strong);
  background:
    radial-gradient(720px 300px at 12% -10%, rgba(0, 215, 255, .14), transparent 60%),
    radial-gradient(680px 320px at 88% 112%, rgba(124, 77, 255, .16), transparent 60%),
    var(--gd2-surface-2);
  padding: 40px 36px;
}
.gd-hero-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gd2-text-dim); }
.gd-hero-eyebrow em { font-style: normal; background: var(--gd2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gd-hero-title { margin: 10px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: #fff; max-width: 620px; }
.gd-hero-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--gd2-text-mute); max-width: 560px; }
.gd-hero-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.gd-how { padding: 18px 20px; }
.gd-how-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--gd2-text); }
.gd-how-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gd2-text-mute); }

/* ==== «Weiter machen»-Hero =================================================== */
.gd-continue {
  display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 20px 22px; width: 100%; font: inherit; color: var(--gd2-text); cursor: pointer;
  border-radius: var(--gd2-r-panel);
}
.gd-continue-icon {
  width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center;
  border-radius: 13px; background: var(--gd2-accent-soft); color: var(--gd2-accent);
}
.gd-continue-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gd-continue-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-continue-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gd2-accent); }
.gd-continue-title { font-size: 18px; font-weight: 800; color: #fff; }
.gd-continue-desc { font-size: 13px; color: var(--gd2-text-mute); }
.gd-continue-chev { margin-left: auto; font-size: 26px; color: var(--gd2-text-dim); }

/* ==== Schnellstart-Grid ====================================================== */
.gd-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gd-quick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; font: inherit; color: var(--gd2-text); text-align: left; cursor: pointer;
}
.gd-quick-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--gd2-surface-3); color: var(--gd2-text-mute);
}
.gd-quick:hover .gd-quick-icon { color: var(--gd2-accent); }
.gd-quick-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gd-quick-label { font-size: 14px; font-weight: 700; }
.gd-quick-meta { font-size: 12px; color: var(--gd2-text-dim); }

/* ==== Shelves (horizontale Reihen) =========================================== */
.gd-shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: 240px;
  gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.gd-shelf > * { scroll-snap-align: start; }
.gd-shelf-posters { grid-auto-columns: 140px; }

/* Wide-Card 16:9 (Releases, Listen) */
.gd-wide-card {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--gd2-r-card);
  border: 1px solid var(--gd2-border); overflow: hidden; cursor: pointer; padding: 0;
  background: var(--gd2-surface-2); font: inherit; text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.gd-wide-card:hover { transform: translateY(-3px); border-color: var(--gd2-border-strong); box-shadow: var(--gd2-shadow-card); }
.gd-wide-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.gd-wide-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5, 6, 9, .92)); }
.gd-wide-body { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gd-wide-title { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Poster-Card 3:4 (K2-Graft: Titel IM Cover, Fallback = generierter Gradient) */
.gd-poster {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--gd2-r-card);
  border: 1px solid var(--gd2-border); overflow: hidden; cursor: pointer; padding: 0;
  font: inherit; text-align: left; background: var(--gd2-surface-2);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.gd-poster:hover { transform: translateY(-4px) scale(1.02); border-color: var(--gd2-border-strong); box-shadow: var(--gd2-shadow-card); }
.gd-poster-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.gd-poster-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(5, 6, 9, .94)); }
.gd-poster-title {
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==== Nudge / Gast-Leiste / Mobile-Upsell ==================================== */
.gd-nudge { margin-left: auto; height: 28px; cursor: pointer; }
.gd-guestbar {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; flex-wrap: wrap;
}
.gd-guestbar-text { font-size: 14px; color: var(--gd2-text-mute); flex: 1 1 260px; line-height: 1.45; }
.gd-homeupsell { display: flex; flex-direction: column; gap: 8px; padding: 16px; align-items: flex-start; }

/* Community-Karten auf Home */
.gd-community-card .gd-quick-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Alte Hub-Reste im mainMenu neutralisieren (Home rendert gd-only Markup) */
#mainMenu { background: none; border: 0; padding: 0; }

/* ==== Views (E4): frühere Vollbild-Modals als Orte im Viewport ============== */
/* Container behalten ID + «open»-Semantik; nur die Präsentation ist neu.
   !important gezielt gegen die Modal-Geometrie aus base/legacy (90vh, fixed, …). */
.gd-view { display: none; }
.gd-view.open { display: block; position: static !important; inset: auto !important; padding: 0 !important; background: none !important; backdrop-filter: none !important; z-index: auto !important; }
body.gd-view-active .duelZone, body.gd-view-active .below { display: none !important; }
.gd-view.open > .modal {
  position: static !important;
  width: 100% !important; max-width: none !important;
  height: auto !important; max-height: none !important;
  overflow: visible !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}
.gd-view.open .modalBody { max-height: none !important; overflow: visible !important; }
/* View-Kopf: aus dem Modal-Kopf wird ein Seitenkopf */
.gd-view.open .modalHead {
  position: static !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 0 16px !important;
}
.gd-view.open .modalHead h2 { font-size: 22px !important; font-weight: 800 !important; }
.gd-view.open .modalHead .eyebrow { display: none; }
/* Close-X wird zur dezenten Zurück-Aktion oben rechts */
.gd-view.open .modalHead button[id^="close"] {
  background: var(--gd2-surface-3) !important; border: 1px solid var(--gd2-border) !important;
  border-radius: 10px !important;
}
/* Ranking-View: interne Sticky-Toolbar/-Footer an Shell-Offsets anpassen */
#rankingModal.gd-view.open .rankingModalToolbar { top: var(--gd2-topbar-h) !important; }
@media (max-width: 640px) {
  #rankingModal.gd-view.open .rankingModalToolbar { top: 48px !important; }
  #rankingModal.gd-view.open .rankingModalFooter { bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Vom Detail-View verdeckte Views bleiben logisch offen, sind aber unsichtbar */
.gd-view.gd-under { display: none !important; }

/* ==== Spiel-Detail als Store-Bühne (E5) ===================================== */
#gameDetailModal.gd-view.open > .modal { position: relative !important; overflow: hidden !important; border-radius: var(--gd2-r-panel) !important; }
#gameDetailModal.gd-view.open .gameDetailHeroBg {
  position: absolute !important; left: 0; right: 0; top: 0;
  height: 340px !important; opacity: .38 !important;
  filter: blur(34px) saturate(1.15) !important; transform: scale(1.15);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  pointer-events: none;
}
#gameDetailModal.gd-view.open .modalHead,
#gameDetailModal.gd-view.open .modalBody { position: relative; z-index: 1; }
#gameDetailModal.gd-view.open .modalBody { padding: 4px 4px 8px !important; }
#gameDetailModal.gd-view.open #gameDetailName { font-size: clamp(26px, 3.4vw, 34px) !important; font-weight: 800 !important; letter-spacing: -.015em !important; line-height: 1.1 !important; margin: 0 0 8px !important; color: #fff; }
#gameDetailModal.gd-view.open .gameDetailBodyV2 {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-areas: "cover title" "blocks blocks";
  gap: 18px 26px;
  align-items: end;
}
#gameDetailModal.gd-view.open .gdCover {
  grid-area: cover;
  aspect-ratio: 2 / 3; width: 190px; height: auto !important;
  border-radius: 14px; border: 1px solid var(--gd2-border-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  background-size: cover; background-position: center;
}
#gameDetailModal.gd-view.open .gdTitle { grid-area: title; padding-bottom: 6px; }
#gameDetailModal.gd-view.open .gdBlocks { grid-area: blocks; }
@media (max-width: 720px) {
  #gameDetailModal.gd-view.open .gameDetailBodyV2 {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  #gameDetailModal.gd-view.open .gdCover { width: 120px; }
  #gameDetailModal.gd-view.open .gameDetailHeroBg { height: 240px !important; }
}

/* Sidebar-Ziele brauchen keinen Zurueck-Pfeil im Inhalt (Nav übernimmt das);
   in Flows (neue Liste → Modi/Presets) bleibt er erhalten. */
#mainMenu[data-level="discover"] .menuBackBtn[data-menu-level="root"],
#mainMenu[data-level="stats"] .menuBackBtn[data-menu-level="root"],
#mainMenu[data-level="community"] .menuBackBtn[data-menu-level="root"] { display: none; }

/* ==== Einheitliches Overlay-Frame (E7) ====================================== */
/* Verbleibende Unterbrechungs-Modals: ein Backdrop, eine Fläche, ein Stil. */
.modalBackdrop { background: rgba(4, 5, 8, .62) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modalBackdrop > .modal {
  border: 1px solid var(--gd2-border-strong) !important;
  border-radius: var(--gd2-r-panel) !important;
  background: linear-gradient(180deg, var(--gd2-surface-2), var(--gd2-surface-1)) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .6) !important;
}
.modalBackdrop .modalHead button[id^="close"] {
  background: var(--gd2-surface-3) !important; border: 1px solid var(--gd2-border) !important;
  border-radius: 10px !important;
}

/* Mobile: alle Overlays als Bottom-Sheets (ein CSS-Pfad, kein JS-Fork) */
@media (max-width: 640px) {
  .modalBackdrop { align-items: flex-end !important; padding: 0 !important; }
  .modalBackdrop > .modal {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 92dvh !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 0 !important;
    animation: gdSheetUp .24s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modalBackdrop > .modal::before {
    content: ""; display: block; width: 38px; height: 4px; border-radius: 999px;
    background: var(--gd2-border-strong); margin: 10px auto 2px; flex: 0 0 auto;
  }
}
@keyframes gdSheetUp { from { transform: translateY(48px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ==== Globale Suche ========================================================== */
.gd-search-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--gd2-border); background: var(--gd2-surface-2);
  color: var(--gd2-text-mute); font: inherit; font-size: 13px; font-weight: 600;
}
.gd-search-btn:hover { border-color: var(--gd2-border-strong); color: var(--gd2-text); }
.gd-search-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gd-search-kbd {
  font: 600 10.5px/1 Inter, sans-serif; color: var(--gd2-text-dim);
  border: 1px solid var(--gd2-border); border-radius: 5px; padding: 3px 5px;
}
.gd-search {
  position: fixed; inset: 0; z-index: 70; display: none;
  background: rgba(4, 5, 8, .66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 10vh 16px 16px;
}
.gd-search.open { display: flex; justify-content: center; align-items: flex-start; }
.gd-search-panel {
  width: min(620px, 100%);
  background: var(--gd2-surface-2); border: 1px solid var(--gd2-border-strong);
  border-radius: 18px; box-shadow: 0 32px 90px rgba(0, 0, 0, .6); overflow: hidden;
}
.gd-search-panel input {
  width: 100%; height: 54px; padding: 0 18px; border: 0; outline: none;
  background: none; color: var(--gd2-text); font: inherit; font-size: 16px;
  border-bottom: 1px solid var(--gd2-border);
}
.gd-search-results { max-height: min(56vh, 480px); overflow-y: auto; padding: 8px; }
.gd-search-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--gd2-text); font: inherit;
}
.gd-search-row:hover, .gd-search-row:focus-visible { background: var(--gd2-surface-3); }
.gd-search-cover { width: 40px; height: 54px; flex: 0 0 40px; border-radius: 7px; background-size: cover; background-position: center; border: 1px solid var(--gd2-border); }
.gd-search-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gd-search-title { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-search-meta { font-size: 12px; color: var(--gd2-text-dim); }
.gd-search-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--gd2-text-dim); }
@media (max-width: 640px) {
  .gd-search-btn { padding: 0; width: 36px; justify-content: center; }
  .gd-search-btn-label, .gd-search-kbd { display: none; }
  .gd-search { padding: 12px; }
}

/* ==== Mobile ================================================================= */
@media (max-width: 640px) {
  .gd-home { gap: 22px; }
  .gd-hero { padding: 26px 20px; }
  .gd-hero-title { font-size: 24px; }
  .gd-quick-grid { grid-template-columns: 1fr 1fr; }
  .gd-shelf { grid-auto-columns: 200px; }
  .gd-shelf-posters { grid-auto-columns: 118px; }
  .gd-continue { padding: 16px; }
  .gd-continue-title { font-size: 16px; }
}