/*
 * builder.css — eigener Namespace `.__Builder_` fuer punktuelle Style-Overrides.
 * Diese Praefixe werden sonst NIRGENDS verwendet, daher kollisionsfrei und nie ueberschrieben.
 * Reines CSS (kein Sass-Build noetig). Nach Aenderung ?v= in layouts/default.blade.php hochzaehlen.
 */

/* Bottom "Latest Blockchain Games News" Heading (pages/home/last_news.blade.php) */
.__Builder_H2_id10 {
  font-size: 32px;
  font-weight: 800;
}

/* Device-Sprite zentriert im Avatar-Kreis (gamelistitems / gameitems_ad), wenn (noch) kein SVG-Icon vorhanden */
.__Builder_DeviceSprite {
  align-items: center;
  justify-content: center;
}

/* ===== Top Boxes (pages/home/trending_top.blade.php) ===== */
.__Builder_TrendAd { position: relative; }
.__Builder_TrendAdBadge { position: absolute; left: 10px; top: 0; }
.__Builder_Icon16 { width: 16px !important; height: 16px !important; }
.__Builder_Img16 { width: 16px; height: 16px; }
.__Builder_LabelBlack { color: #000; }
.__Builder_ImgCover { width: 100%; height: 100%; object-fit: cover; }
.__Builder_InlineFlexGap { display: inline-flex; align-items: center; gap: 0.2rem; }
.__Builder_PtHalf { padding-top: 0.5rem; }
.__Builder_Pointer { cursor: pointer; }
/* Trend-Badge im P2E100-Slider: Plus gruen, Minus sattes Rot.
   !important, weil app.v1.css nach der builder.css geladen wird und
   .SmallButtonRed / .SmallButtonGreen sonst die Farben zurueckziehen. */
.__Builder_TrendBadge { display: inline-flex !important; align-items: center; gap: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 18px; }
.__Builder_TrendBadge.Down { background: #ff2f45 !important; color: #fff !important; }
.__Builder_TrendBadge.Up { background: #12b76a !important; color: #fff !important; }
.__Builder_TrendIcon { display: inline-flex; align-items: center; }
.__Builder_TrendIcon svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* ===== Topbar / Tab-Filter (pages/home/topbar.blade.php) ===== */
.__Builder_TabFilterBar { justify-content: space-between; align-items: center; border-bottom: 0; }
.__Builder_FlexGapHalf { display: flex; align-items: center; gap: 0.5rem; }
.__Builder_FlexCenter { display: flex; align-items: center; }
/* "Add Game"-Button neben dem Filter (Stil wie auf /games) */
.__Builder_AddGameBtn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 0; border-radius: 8px; height: 38px; padding: 0 14px; color: #000; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.__Builder_AddGameBtn:hover { background: #f2f2f1; color: #000; }

/* ===== Top-Boxen Preload-Placeholder (pages/home/trending.blade.php) ===== */
.__Builder_ShimmerW200 { width: 200px; }
.__Builder_ShimmerW120 { width: 120px; }
/* col4-Placeholder (zwei gestapelte Boxen): Spaltenhoehe fuellen statt feste Hoehe,
   damit sie nicht hoeher werden als die echten geladenen Boxen / die anderen Spalten.
   !important noetig, da .HomeTopBoxPreloadElement .BigHolderContent (2 Klassen) height:152px setzt. */
.__Builder_PreloadVertical { height: 100%; }
.__Builder_PreloadVertical .BigHolderContent { height: auto !important; flex: 1 1 0; min-height: 0; }

/* ===== Tabellen-Rahmen (pages/home/gameitems.blade.php) ===== */
.__Builder_NoFound { padding: 6rem 0; border-bottom: 1px solid #e2e2e2; margin-bottom: 2rem; height: auto; }
.__Builder_NoFoundIcon { width: 300px; height: 300px; }
.__Builder_TextCenter { text-align: center; }
.__Builder_LastUpdated { text-align: right; font-size: 9px; }

/* ===== Tabellen-Zeilen (pages/home/gamelistitems.blade.php) ===== */
.__Builder_Hidden { display: none; }
.__Builder_AlignCenter { align-items: center; }
.__Builder_GameLogoBox { width: 80px !important; height: 80px !important; border-radius: 15px !important; position: relative; }
.__Builder_LogoBadge { position: absolute; top: 0.3rem; right: 0.3rem; z-index: 1; }
.__Builder_InlineFlexGapHalf { display: inline-flex; align-items: center; gap: 0.5rem; }
.__Builder_InlineFlex { display: inline-flex; }
.__Builder_Sparkline { width: 120px; height: 50px; }

/* ===== Index-Wrapper (pages/index.blade.php) ===== */
.__Builder_FlexCol { flex-direction: column; }
/* Sichtbar-Zustand = flex (per Stylesheet, NICHT none!), damit slideToggle korrekt auf flex zurueckstellt.
   Verstecken passiert per Inline display:none am Element (jQuery entfernt das beim Anzeigen). */
.__Builder_CategoryFilters {
  padding-top: 1rem !important;
  border-top: 1px solid #eee;
  display: flex; }

/* ===== Status-Badge (Soft Pill, Farbe inline aus status_color) ===== */
/* gamelistitems / gameitems_ad — background = rgba(status_color, .12), color = status_color (inline) */
.__Builder_StatusBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

/* P2E-Spalte: Original buttonYes-Struktur (inkl. Top/Bottom-Stack) behalten, nur grau einfaerben.
   !important noetig, da .buttonYes Farbe per !important setzt. */
.__Builder_P2eGrey { background: #f2f2f1 !important; color: #333 !important; }

/* ===== Sort-Icon im Thead: Tabler "selector" statt fa-sort (pages/home/gameitems.blade.php) ===== */
/* Ersetzt das FontAwesome fa-sort-Glyph (ungesorteter Zustand) per CSS-Mask durch das
   Tabler-"selector"-SVG. background-color: currentColor uebernimmt die Textfarbe (inkl. Hover). */
table.SnowTable thead th.SortTrue a i.fa-sort {
  font-size: 0 !important;
  line-height: 0;
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4 -4l4 4'/%3E%3Cpath d='M16 15l-4 4l-4 -4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4 -4l4 4'/%3E%3Cpath d='M16 15l-4 4l-4 -4'/%3E%3C/svg%3E") no-repeat center / contain;
}
table.SnowTable thead th.SortTrue a i.fa-sort::before { content: none !important; }

/* ===== Earnings-Spalte vorerst komplett ausgeblendet (Thead + gamelistitems + gameitems_ad) ===== */
.__Builder_HideEarn { display: none !important; }

/* ===== /blockchaingames/tokens: Top-Boxen, 3 gleich breite Spalten statt 449/200/449/200 ===== */
.__Builder_BoxItems3 { grid-template-columns: repeat(3, 1fr) !important; }
/* Grauer Rahmen um die Top-Boxen, wie .setHomeTopElements auf der Startseite */
.__Builder_TokenTopWrap { box-sizing: border-box; width: 100%; margin-top: 1.25rem; padding: 10px; background: #f6f7f8; border-radius: 20px; }
.__Builder_TokenTopWrap .HeaderBoxItems { padding-top: 0 !important; padding-bottom: 0 !important; grid-gap: 10px !important; }
.__Builder_TokenTopWrap .HeaderBoxItems > * { min-width: 0 !important; }
.__Builder_BoxPlaceholder { flex: 1; min-height: 150px; }
/* Token-Boxen: vertikaler Swiper, 2 Zeilen a 77px sichtbar (CoinList aus app.update.css) */
.__Builder_CoinList2 { height: 154px; overflow: hidden; }
/* Icon in der Box-Ueberschrift (Gainers gruen, Losers rot) */
.__Builder_BoxIcon { display: inline-flex; align-items: center; }
.__Builder_BoxIcon.Up { color: #16a34a; }
.__Builder_BoxIcon.Down { color: #dc2626; }
.__Builder_BoxIcon.Fire { color: #f97316; }

/* ===== /blockchaingames/tokens: AI-Empfehlung (token_analysis), Segment-Meter ===== */
.__Builder_AiCell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; text-align: left; cursor: help; }
.__Builder_AiHead { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.__Builder_AiVerdictText { font-size: 17px; font-weight: 700; white-space: nowrap; }
.__Builder_AiCell.Buy .__Builder_AiVerdictText { color: #16a34a; }
.__Builder_AiCell.DoNotBuy .__Builder_AiVerdictText { color: #dc2626; }
.__Builder_AiRiskPill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #f2f2f1; color: #666; }
.__Builder_AiRiskPill svg { flex: 0 0 14px; }
.__Builder_AiRiskPill.Low { background: #e6f6ec; color: #16a34a; }
.__Builder_AiRiskPill.Medium { background: #fdf3e3; color: #b45309; }
.__Builder_AiRiskPill.High { background: #fbe3e3; color: #dc2626; }
.__Builder_AiSegments { display: flex; gap: 5px; width: 100%; }
.__Builder_AiSegment { flex: 1; height: 9px; border-radius: 100px; }
.__Builder_AiCell.Buy .__Builder_AiSegment { background: #d9f0e0; }
.__Builder_AiCell.Buy .__Builder_AiSegment.Filled { background: #16a34a; }
.__Builder_AiCell.DoNotBuy .__Builder_AiSegment { background: #f8d7d7; }
.__Builder_AiCell.DoNotBuy .__Builder_AiSegment.Filled { background: #e05252; }
.__Builder_AiConfidence { font-size: 12px; color: #888; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.__Builder_AiDisclaimer { display: flex; gap: 0.6rem; align-items: flex-start; width: 100%; margin: 1.5rem 0 2.5rem; padding: 1rem 1.2rem; background: #f2f2f1; border-radius: 12px; font-size: 13px; line-height: 1.5; color: #666; }
.__Builder_AiDisclaimer svg { flex: 0 0 22px; margin-top: 1px; color: #b45309; }

/* /blockchaingames/tokens: Spiel-Avatare der Chain-Tokens groesser als die 28px der Startseite.
   app.css setzt .TableGameBlockchainItems.ChainAvatarStack .ChainAvatar .BlockchainIcon (4 Klassen),
   deshalb hier !important, sonst gewinnt die alte 28px-Regel trotz spaeterem Laden. */
.TableGameBlockchainItems.ChainAvatarStack.__Builder_GameAvatars .ChainAvatar .BlockchainIcon { width: 50px !important; height: 50px !important; }
.TableGameBlockchainItems.ChainAvatarStack.__Builder_GameAvatars .ChainAvatar .BlockchainIcon img { width: 100% !important; height: 100% !important; }
.TableGameBlockchainItems.ChainAvatarStack.__Builder_GameAvatars .ChainAvatar:not(:first-child) { margin-left: -16px !important; }
.TableGameBlockchainItems.ChainAvatarStack.__Builder_GameAvatars .ChainMore { width: 50px !important; height: 50px !important; margin-left: -16px !important; font-size: 13px !important; }
/* ChainMore ist jetzt ein Link -> Link-Styling der Seite neutralisieren */
a.ChainMore { color: #555 !important; text-decoration: none !important; transition: background 0.15s ease; }
a.ChainMore:hover { background: #e2e2e0 !important; color: #000 !important; }

/* ===== /crypto-token/{slug}: Token-Detailseite (data-news game/token/view) ===== */
/* Seiten-Tabs (Chart / AI Recommendation / Investor-Score / Games) unter dem Token-Kopf */
/* Tab-Leiste muss ueber dem klebenden Tabellenkopf liegen (SnowTable thead: z-index 10) */
.__Builder_TokenPanelTabs { margin-top: 2rem; z-index: 20 !important; background: #fff; }
.__Builder_TokenPanelTabs .TabItem { user-select: none; }
/* Sprungziel-Abstand, damit die klebende Tab-Leiste die Ueberschrift nicht verdeckt */
.__Builder_TokenPanel { scroll-margin-top: 150px; }
.__Builder_TokenView { display: grid; grid-template-columns: 1fr 340px; gap: 48px; width: 100%; padding: 2rem 0; align-items: start; }
.__Builder_TokenMain { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.__Builder_TokenSide { position: sticky; top: 90px; }

/* Kopfbereich im CoinMarketCap-Stil: links Identitaet, rechts Preis + Kennzahlen */
.__Builder_TokenTop { display: grid; grid-template-columns: 340px 1fr; gap: 40px; width: 100%; padding: 2rem 0 0; align-items: start; }
.__Builder_TokenTopLeft { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.__Builder_TokenCrumbs { display: flex; align-items: center; gap: 0.4rem; font-size: 13px; color: #8a94a6; }
.__Builder_TokenCrumbs a { color: #8a94a6; text-decoration: none; }
.__Builder_TokenCrumbs a:hover { color: #000; }
.__Builder_TokenCrumbs b { color: #000; font-weight: 600; }
.__Builder_TokenIdent { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.__Builder_TokenLogo { display: flex; width: 48px; height: 48px; border-radius: 100px; overflow: hidden; background: #f2f2f1; flex-shrink: 0; }
.__Builder_TokenLogo img { width: 100%; height: 100%; object-fit: cover; }
.__Builder_TokenIdent h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.1; }
.__Builder_TokenSymbol { padding: 3px 10px; border-radius: 8px; background: #f2f2f1; font-size: 13px; font-weight: 700; color: #8a94a6; }
.__Builder_TokenBadges { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.__Builder_TokenRank { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 8px; background: #f2f2f1; font-size: 12px; font-weight: 700; color: #58667e; }
/* Rank-Badge ist ein Link -> Link-Styling der Seite neutralisieren */
a.__Builder_TokenRank { text-decoration: none !important; transition: background 0.15s ease; }
a.__Builder_TokenRank:hover { background: #e4e4e2; color: #000 !important; }
/* Fliesstext-Variante (Box-Kopf 'Top 20 of 74') */
.__Builder_TokenGamesCount { font-size: 13px; font-weight: 400; color: #8a94a6; }
/* Badge-Variante im Token-Kopf, gleiche Optik wie Rank und P2E-Score */
.__Builder_TokenGamesBadge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 8px; background: #f2f2f1; font-size: 12px; font-weight: 700; color: #58667e; }
a.__Builder_TokenScoreBadge { text-decoration: none !important; cursor: pointer; transition: background 0.15s ease; }
a.__Builder_TokenScoreBadge:hover { background: #e4e4e2; color: #000 !important; }
.__Builder_TokenScoreDot { display: inline-block; width: 8px; height: 8px; margin-right: 0.15rem; border-radius: 100px; flex: 0 0 8px; }
a.__Builder_TokenGamesBadge { text-decoration: none !important; transition: background 0.15s ease; }
a.__Builder_TokenGamesBadge:hover { background: #e4e4e2; color: #000 !important; }
/* 'Show all N games' im Box-Kopf der Spiele-Tabelle */
.__Builder_TokenGamesLink { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 13px; font-weight: 600; color: var(--blueColor, #0012ff); text-decoration: none; }
.__Builder_TokenGamesLink:hover { text-decoration: underline; }
.__Builder_TokenScoreBadge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 4px 12px; border-radius: 8px; background: #f2f2f1; font-size: 12px; font-weight: 700; color: #58667e; overflow: hidden; }
/* Mit AVG-Chip: rechts kein Padding, damit die Trennlinie bis zum Rand geht */
.__Builder_TokenScoreBadge:has(i) { padding-right: 0; }
.__Builder_TokenScoreBadge i { align-self: stretch; display: inline-flex; align-items: center; padding: 0 10px; border-left: 1px solid #dcdcda; font-size: 10px; font-style: normal; font-weight: 700; text-transform: uppercase; color: #8a94a6; }

.__Builder_TokenTopRight { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.__Builder_TokenPriceLabel { display: flex; align-items: center; gap: 0.6rem; font-size: 13px; font-weight: 600; color: #58667e; }
.__Builder_TokenPriceTime { padding-left: 0.6rem; border-left: 1px solid #e2e4e9; font-weight: 400; color: #8a94a6; }
.__Builder_TokenPrice { display: flex; align-items: center; gap: 0.75rem; }
.__Builder_TokenPriceValue { font-size: 40px; font-weight: 800; line-height: 1.1; }

.__Builder_TokenRangeBar { display: flex; flex-direction: column; gap: 0.5rem; max-width: 520px; margin-top: 0.5rem; }
.__Builder_TokenRangeTrack { display: block; width: 100%; height: 8px; border-radius: 100px; background: #eff2f5; overflow: hidden; }
.__Builder_TokenRangeFill { display: block; height: 100%; min-width: 8px; border-radius: 100px; background: linear-gradient(90deg, rgba(0, 18, 255, 0.35) 0%, var(--blueColor, #0012ff) 100%); }
.__Builder_TokenRangeLabels { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 13px; }
.__Builder_TokenRangeLabels b { font-weight: 600; color: #0d1117; }
.__Builder_TokenRangeLabels > span { color: #8a94a6; }

.__Builder_TokenTopStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid #eff2f5; }
.__Builder_TokenTopStat { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 1.25rem; border-right: 1px solid #eff2f5; min-width: 0; }
.__Builder_TokenTopStat:first-child { padding-left: 0; }
.__Builder_TokenTopStat:last-child { border-right: 0; }
.__Builder_TokenTopStatLabel { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 13px; color: #58667e; }
.__Builder_TokenTopStatLabel i { padding: 1px 5px; border-radius: 5px; background: #f2f2f1; font-size: 11px; font-style: normal; font-weight: 600; }
.__Builder_TokenTopStat b { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.__Builder_TokenSupply { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.__Builder_TokenSupplyTrack { flex: 1; height: 5px; border-radius: 100px; background: #eff2f5; overflow: hidden; }
.__Builder_TokenSupplyTrack span { display: block; height: 100%; border-radius: 100px; background: var(--blueColor, #0012ff); }
.__Builder_TokenSupplyPct { font-size: 12px; font-weight: 600; color: #58667e; }
.__Builder_TokenSupplyRow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 12px; color: #58667e; }
.__Builder_TokenSupplyRow span:last-child { font-weight: 600; color: #000; }

.__Builder_TokenBox { display: flex; flex-direction: column; width: 100%; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.__Builder_TokenBoxHead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 1rem; font-size: 18px; font-weight: 700; }
.__Builder_TokenBox #tokenPriceChart { padding: 0; background: #fff; border-radius: 12px; }
/* Charts bleiben immer hell, auch im Night-Mode der Seite */
body.night-mode .__Builder_TokenBox #tokenPriceChart { background: #fff !important; }
body.night-mode .__Builder_TokenBox #tokenPriceChart text { fill: #0d1117 !important; }
body.night-mode .__Builder_TokenChartHead .__Builder_TokenSwitch { background: #f6f7f8 !important; }
body.night-mode .__Builder_TokenMetric, body.night-mode .__Builder_TokenRange { color: #58667e !important; }
body.night-mode .__Builder_TokenMetric.Active, body.night-mode .__Builder_TokenRange.Active { background: #fff !important; color: #000 !important; }

.__Builder_TokenChartHead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0 0 1rem; }
.__Builder_TokenChartTitle { flex: 1; font-size: 18px; font-weight: 700; }
.__Builder_TokenSwitch { display: inline-flex; gap: 2px; padding: 3px; background: #f6f7f8; border-radius: 10px; }
.__Builder_TokenMetric, .__Builder_TokenRange { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #58667e; cursor: pointer; transition: all 0.15s ease; }
.__Builder_TokenMetric:hover, .__Builder_TokenRange:hover { color: #000; }
.__Builder_TokenMetric.Active, .__Builder_TokenRange.Active { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }

.__Builder_TokenAi { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; padding: 0; align-items: start; }
.__Builder_TokenAiText { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.__Builder_TokenAiText b { font-size: 16px; font-weight: 700; }
.__Builder_TokenAiText p { margin: 0; font-size: 14px; line-height: 1.6; color: #555; }
.__Builder_TokenAiLabel { margin-top: 0.5rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a94a6; }

.__Builder_TokenScore { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; padding: 0; align-items: center; }
.__Builder_TokenScoreValue { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1rem; background: #f6f7f8; border-radius: 16px; }
.__Builder_TokenScoreValue b { font-size: 34px; font-weight: 800; line-height: 1; }
.__Builder_TokenScoreValue span { font-size: 12px; color: #8a94a6; }
.__Builder_TokenFactors { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.__Builder_TokenFactor { display: grid; grid-template-columns: 120px 1fr 70px; gap: 0.75rem; align-items: center; }
.__Builder_TokenFactorName { font-size: 13px; color: #555; }
.__Builder_TokenFactorBar { display: block; height: 8px; background: #f0f1f4; border-radius: 100px; overflow: hidden; }
.__Builder_TokenFactorBar span { display: block; height: 100%; background: var(--blueColor, #0012ff); border-radius: 100px; }
.__Builder_TokenFactorPoints { font-size: 12px; color: #8a94a6; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.__Builder_TokenScoreEmpty { padding: 0; font-size: 14px; line-height: 1.6; color: #666; }

.__Builder_TokenStats { display: flex; flex-direction: column; }
.__Builder_TokenStatGroup { padding: 1.25rem 0 0.5rem; font-size: 12px; font-weight: 600; color: #8a94a6; }
.__Builder_TokenStat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #eff2f5; font-size: 14px; }
.__Builder_TokenStat:last-child { border-bottom: 0; }
.__Builder_TokenStat > span:first-child { display: inline-flex; align-items: center; gap: 0.35rem; color: #0d1117; font-weight: 600; }
.__Builder_TokenStat > span:first-child i { padding: 1px 5px; border-radius: 5px; background: #f2f2f1; font-size: 11px; font-style: normal; font-weight: 600; color: #8a94a6; }
.__Builder_TokenStat > span:last-child { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; white-space: nowrap; }

.__Builder_TokenTags { display: inline-flex; gap: 4px; justify-content: center; }
/* P2E-Score in der Spiele-Tabelle rechtsbuendig (PriceAlert zentriert sonst) */
.PriceAlert.__Builder_ScoreRight { justify-content: flex-end !important; align-items: flex-end !important; text-align: right !important; }
/* Tokens-Liste: Preis mit dem 7d-Badge darunter, rechtsbuendig */
.__Builder_TokenPriceCell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
/* Tokens-Liste: Investor-Score als Zahl mit farbiger Underline */
.__Builder_InvestorScore { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; cursor: help; }
.__Builder_InvestorScore b { font-size: 20px; font-weight: 700; line-height: 1; color: #0d1117; }
.__Builder_InvestorScoreTrack { display: block; width: 64px; height: 4px; border-radius: 100px; background: #eff2f5; overflow: hidden; }
.__Builder_InvestorScoreTrack span { display: block; height: 100%; border-radius: 100px; }
.__Builder_TokenPriceCell b { font-weight: 600; }
.__Builder_TokenTag { padding: 2px 8px; border-radius: 100px; background: #f2f2f1; font-size: 11px; font-weight: 600; color: #555; }

@media screen and (max-width: 1100px) {
  .__Builder_TokenTop { grid-template-columns: 1fr; gap: 1.5rem; }
  .__Builder_TokenTopStats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .__Builder_TokenTopStat:nth-child(3) { padding-left: 0; }
  .__Builder_TokenTopStat:nth-child(2n) { border-right: 0; }
  .__Builder_TokenView { grid-template-columns: 1fr; }
  .__Builder_TokenSide { position: static; }
  .__Builder_TokenAi, .__Builder_TokenScore { grid-template-columns: 1fr; }
}

/* ===== Logo-Wechsel im Header (includes/header.blade.php) ===== */
/* Das Logo wechselt in einer 9-Sekunden-Schleife zwischen dem normalen
   PlayToEarn-Zeichen und dem Jubilaeums-Motiv: rund 3s normales Logo,
   5s Jubilaeum, der Uebergang dazwischen jeweils rund 0,5s. Icon klappt wie eine Karte
   um (rotateY), der Schriftzug zieht nach oben weg, der neue kommt von
   unten hoch. Beide Zustaende liegen jeweils uebereinander, die Breite
   kommt vom unsichtbaren Sizer mit dem laengeren Text - dadurch springt
   im Header nichts. */
.__Builder_LogoIcons {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    perspective: 320px;
}
.__Builder_LogoIcons img {
    position: absolute;
    inset: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
    backface-visibility: hidden;
    animation: 9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.__Builder_LogoIcons .__IsA { animation-name: __BuilderLogoFaceA; }
.__Builder_LogoIcons .__IsB { animation-name: __BuilderLogoFaceB; }

.__Builder_LogoSwap {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
}
/* Unsichtbarer Platzhalter, gibt dem Block die Breite des laengeren Textes */
.__Builder_LogoSizer {
    display: block;
    visibility: hidden;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}
.__Builder_LogoText {
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    will-change: transform, opacity;
    animation: 9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.__Builder_LogoText.__IsA {
    color: var(--logoTextColor);
    animation-name: __BuilderLogoTextA;
}
.__Builder_LogoText.__IsB {
    background: linear-gradient(90deg, #ff7a18 0%, #e8203a 55%, #ff7a18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation-name: __BuilderLogoTextB;
}

@keyframes __BuilderLogoFaceA {
    0%, 33%   { opacity: 1; transform: rotateY(0deg) scale(1); }
    39%, 94%  { opacity: 0; transform: rotateY(90deg) scale(.92); }
    100%      { opacity: 1; transform: rotateY(0deg) scale(1); }
}
@keyframes __BuilderLogoFaceB {
    0%, 33%   { opacity: 0; transform: rotateY(-90deg) scale(.92); }
    39%, 94%  { opacity: 1; transform: rotateY(0deg) scale(1); }
    100%      { opacity: 0; transform: rotateY(-90deg) scale(.92); }
}
/* translateY(-50%) haelt den Text mittig, die zweite Verschiebung ist die
   Animation selbst - deshalb steht -50% in jedem Schritt mit drin. */
@keyframes __BuilderLogoTextA {
    0%, 33%   { opacity: 1; transform: translateY(-50%); filter: blur(0); }
    39%, 94%  { opacity: 0; transform: translateY(-140%); filter: blur(4px); }
    100%      { opacity: 1; transform: translateY(-50%); filter: blur(0); }
}
@keyframes __BuilderLogoTextB {
    0%, 33%   { opacity: 0; transform: translateY(40%); filter: blur(4px); }
    39%, 94%  { opacity: 1; transform: translateY(-50%); filter: blur(0); }
    100%      { opacity: 0; transform: translateY(40%); filter: blur(4px); }
}
/* Wer Animationen abgeschaltet hat, sieht dauerhaft das normale Logo. */
@media (prefers-reduced-motion: reduce) {
    .__Builder_LogoIcons img,
    .__Builder_LogoText { animation: none; }
    .__Builder_LogoIcons .__IsB,
    .__Builder_LogoText.__IsB { opacity: 0; }
    .__Builder_LogoIcons .__IsA { opacity: 1; transform: none; }
    .__Builder_LogoText.__IsA { opacity: 1; transform: translateY(-50%); filter: none; }
}

/* ===== Jubilaeums-Leiste unter dem Header (pages/header/anniversary_bar) ===== */
/* Voll ueber die Breite, direkt ueber dem News-Ticker. Schwarzer Verlauf,
   der langsam durchwandert, dazu ein Glanzstreifen alle paar Sekunden.
   Gerendert wird die Leiste nur auf der Startseite und im Game-Item-View,
   die Bedingung steht im Blade-Template.
   Bei prefers-reduced-motion steht alles still. */
.__Builder_AnniBar {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Schwarzer Verlauf mit leichtem Blauschimmer, wandert langsam durch.
       WICHTIG: background-size 200% + background-position von 0% auf 100% -
       in Prozent gerechnet bleibt der Verlauf immer im Element. Mit Werten
       ueber 100% schiebt er sich raus und hinterlaesst eine graue Flaeche. */
    background-image: linear-gradient(90deg, #000000 0%, #07070c 14%, #101018 28%, #16161f 42%, #1c1c28 50%, #16161f 58%, #101018 72%, #07070c 86%, #000000 100%);
    background-size: 200% 100%;
    animation: __BuilderAnniFlow 16s linear infinite;
}
.__Builder_AnniInner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1370px;
    margin: 0 auto;
    padding: 9px 16px;
    color: #fff;
    white-space: nowrap;
}
.__Builder_AnniBall {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    animation: __BuilderAnniBob 2.8s ease-in-out infinite;
}
.__Builder_AnniChip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 13px;
    font-weight: 800;
}
/* Aktionen laufen als vertikaler Ticker durch (Swiper).
   margin: 0 ist Pflicht: Swipers Basis-CSS setzt margin-left/right auf auto,
   im Flex-Container reisst das den Ticker vom Chip weg in die Mitte. */
.__Builder_AnniBar .__Builder_AnniTicker {
    flex: 0 1 auto;
    width: auto;
    min-width: 260px;
    max-width: 100%;
    height: 22px;
    margin: 0;
    overflow: hidden;
}
.__Builder_AnniTicker .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 22px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Glanzstreifen ueber die ganze Leiste */
.__Builder_AnniShine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 22%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: __BuilderAnniShine 6s ease-in-out infinite;
}
@keyframes __BuilderAnniFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
@keyframes __BuilderAnniBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-2px) rotate(-8deg); }
}
@keyframes __BuilderAnniShine {
    0%, 60%  { left: -30%; }
    100%     { left: 120%; }
}
@media (max-width: 720px) {
    .__Builder_AnniInner { gap: 8px; padding: 7px 12px; }
    .__Builder_AnniChip { font-size: 11px; padding: 2px 9px; }
    .__Builder_AnniBar .__Builder_AnniTicker { min-width: 0; flex: 1 1 auto; }
    .__Builder_AnniTicker .swiper-slide { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .__Builder_AnniBar,
    .__Builder_AnniBall { animation: none; }
    .__Builder_AnniShine { display: none; }
}

/* Details-Button in der Jubilaeums-Leiste, oeffnet den Dialog */
.__Builder_AnniBtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    appearance: none;
    border: 0;
    padding: 4px 10px 4px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.__Builder_AnniBtn:hover { background: rgba(255, 255, 255, .32); transform: translateY(-1px); }
.__Builder_AnniBtn:active { transform: translateY(0); }

/* ===== Jubilaeums-Dialog (pages/header/anniversary_dialog) ===== */
/* Kopf ist komplett das Key-Visual. Seitenverhaeltnis 1600x903, damit
   nichts vom Motiv abgeschnitten wird. */
.__Builder_Anni8Head {
    position: relative;
    aspect-ratio: 1600 / 903;
    background: #05060a url("https://assets.playtoearn.com/_8th.jpg") center / cover no-repeat;
    border-radius: 10px 10px 0 0;
}
.__Builder_Anni8Head .HeaderClose {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: rgba(255, 255, 255, .9);
    cursor: pointer;
    line-height: 0;
}
.__Builder_Anni8Head .HeaderClose:hover { color: #fff; }
.__Builder_Anni8Body { padding: 20px 22px 22px !important; background: #fff; }
.__Builder_Anni8Intro { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: #1f2430; }
/* Zwischenueberschriften "For players" / "For game studios ..." */
.__Builder_Anni8Section {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    color: #7a828f;
}
.__Builder_Anni8Section.__HasLine {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eceef2;
}
.__Builder_Anni8List { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.__Builder_Anni8List li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.45; color: #3b4252; }
.__Builder_Anni8List b { color: #1f2430; }
/* Links als kleiner CTA-Button statt als gepunktete Pille - gleiche Farbe
   wie die grossen Buttons darunter, nur kompakter. */
.__Builder_Anni8List a {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 4px 12px;
    border: 0;
    border-radius: 10px;
    background: #0012ff;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: filter .15s ease;
}
.__Builder_Anni8List a:hover { filter: brightness(1.12); text-decoration: none; }
/* Grosse Konturzahlen im Netflix-Top-10-Stil statt kleiner Badges.
   color liefert eine leichte Fuellung als Rueckfall, falls ein Browser
   -webkit-text-stroke nicht kann - dann ist die Zahl blass statt unsichtbar.
   ACHTUNG bei neuen Punkten: Ziffern mit geschlossenem Innenraum (4, 6, 8, 9)
   zeigen als Kontur ein Kaestchen in der Mitte. Dann entweder duennere Kontur
   oder eine Schrift mit offener Vier setzen ("Trebuchet MS", "Century Gothic"). */
.__Builder_Anni8Dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(0, 18, 255, .10);
    -webkit-text-stroke: 2px rgba(0, 18, 255, .45);
}
/* x2-Badge aus dem Reward Center, hier fest im aktiven Zustand.
   Nachgebaut statt .__RcPlusBadge wiederverwendet: die Regeln dafuer stehen
   in rewardcenter.css, und die wird nur auf /earn geladen. */
.__Builder_Anni8Plus {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 24px;
    margin: 0 2px;
    border: 3px solid rgba(255, 255, 255, .5);
    border-radius: 100px;
    background: linear-gradient(180deg, rgb(255, 90, 75) 0%, rgb(252, 27, 89) 100%);
    vertical-align: middle;
}
.__Builder_Anni8Plus img { display: block; }

/* Gutschein-Optik fuer den Rabattcode */
/* Punkt 5 traegt ein Icon statt einer Zahl: ohne blauen Kreis, nur das
   Symbol in Blau, damit es nicht wie ein zweiter Zaehler wirkt. */
/* Punkt 5 traegt das Geschenk-Icon statt einer Zahl - gleiche Spaltenbreite
   wie die Zahlen, damit der Text darunter buendig bleibt. */
/* Jede Zahl eine eigene Farbe: 1 blau (Standard oben), 2 violett, 3 gruen.
   Nur die Farbwerte werden ueberschrieben, Groesse und Kontur bleiben. */
.__Builder_Anni8List li:nth-child(2) .__Builder_Anni8Dot {
    color: rgba(123, 47, 247, .10);
    -webkit-text-stroke-color: rgba(123, 47, 247, .5);
}
.__Builder_Anni8List li:nth-child(3) .__Builder_Anni8Dot {
    color: rgba(0, 168, 52, .10);
    -webkit-text-stroke-color: rgba(0, 168, 52, .5);
}

.__Builder_Anni8Dot.__IsIcon {
    color: #0012ff;
    -webkit-text-stroke: 0;
    width: 50px;
}
.__Builder_Anni8Dot.__IsIcon svg { width: 28px; height: 28px; display: block; }

/* Rabattcode als Coupon: gestrichelter Rand, links eine Schere hinter einer
   gestrichelten Trennlinie - wie zum Ausschneiden. */
.__Builder_Anni8Code {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 7px;
    border: 2px dashed #e8203a;
    border-radius: 8px;
    background: #fff4f5;
    color: #d9182b !important;
    font-weight: 800;
    white-space: nowrap;
    vertical-align: middle;
}
.__Builder_Anni8Code .__Cut {
    display: inline-flex;
    align-items: center;
    padding-right: 7px;
    border-right: 2px dashed rgba(232, 32, 58, .45);
}
.__Builder_Anni8Code svg { display: block; }
.__Builder_Anni8Actions { display: flex; gap: 10px; margin-top: 18px; }
/* Masse und Farbe exakt wie .Button-Blue (Creator Verification,
   playtoearn.css): 42px hoch, Radius 100px, 18px/600, #0012ff. */
.__Builder_Anni8Btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1rem;
    border-radius: 12px;
    background: #f3f4f6;
    color: #1f2430 !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s ease, transform .12s ease;
}
.__Builder_Anni8Btn.__IsPrimary {
    background: #0012ff;
    color: #fff !important;
}
.__Builder_Anni8Btn:hover { filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; }
.__Builder_Anni8Btn:active { transform: translateY(0); }
@media (max-width: 720px) {
    .__Builder_AnniBtn { padding: 4px 8px 4px 10px; font-size: 12px; }
    .__Builder_Anni8Actions { flex-direction: column; }
}
*
 * builder.css — eigener Namespace `.__Builder_` fuer punktuelle Style-Overrides.
 * Diese Praefixe werden sonst NIRGENDS verwendet, daher kollisionsfrei und nie ueberschrieben.
 * Reines CSS (kein Sass-Build noetig). Nach Aenderung ?v= in layouts/default.blade.php hochzaehlen.
 */

/* Bottom "Latest Blockchain Games News" Heading (pages/home/last_news.blade.php) */
.__Builder_H2_id10 {
  font-size: 32px;
  font-weight: 800;
}

/* Device-Sprite zentriert im Avatar-Kreis (gamelistitems / gameitems_ad), wenn (noch) kein SVG-Icon vorhanden */
.__Builder_DeviceSprite {
  align-items: center;
  justify-content: center;
}

/* ===== Preisaktion auf /plus (App\Support\PlusOffer) ===== */
/* Alter Preis durchgestrichen neben dem Aktionspreis, darunter ein Band mit
   Countdown. Beides rendert nur, solange die Aktion laeuft. */
.__Builder_PlusWas {
    margin-right: 8px;
    color: #1f2430;
    text-decoration: line-through;
    font-weight: 600;
}
.__Builder_PlusOffer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 47, 69, .12);
    color: #ff2f45;
    font-size: 13px;
    font-weight: 800;
}
.__Builder_PlusOfferTag { text-transform: uppercase; letter-spacing: .04em; }
.__Builder_PlusOfferTime { font-variant-numeric: tabular-nums; }