/* =========================================================
   GAMING MODULES
   Roblox Retro Archive + Simulator Loading Screen
   ========================================================= */

.game-library-row {
  grid-template-columns: 28px 1fr auto auto;
}

.game-open-btn {
  justify-self:end;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(85,255,154,.18);
  background:rgba(85,255,154,.025);
  color:#8da497;
  border-radius:8px;
  cursor:pointer;
  font:9px Consolas,monospace;
  letter-spacing:.08em;
  transition:.18s ease;
}

.game-open-btn:hover {
  color:#f4fff8;
  border-color:rgba(85,255,154,.48);
  background:rgba(85,255,154,.06);
  transform:translateY(-1px);
}

.roblox-open-btn:hover {
  border-color:rgba(60,110,205,.72);
  background:rgba(60,110,205,.09);
}

.ls25-open-btn:hover {
  border-color:rgba(121,155,68,.72);
  background:rgba(121,155,68,.09);
}

.game-backdrop {
  position:fixed;
  inset:0;
  z-index:7600;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.80);
  backdrop-filter:blur(14px);
}

.game-backdrop.hidden {
  display:none !important;
}

body.game-modal-open {
  overflow:hidden;
}

/* -------------------------
   ROBLOX RETRO UI
   ------------------------- */

.roblox-retro-window {
  width:min(1180px,100%);
  height:min(88vh,900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#d9d9d9;
  border:2px solid #7f7f7f;
  box-shadow:
    0 0 0 1px #fff inset,
    0 30px 120px rgba(0,0,0,.65);
  color:#222;
  font-family:Verdana,Arial,sans-serif;
  animation:retroWindowOpen .18s ease-out;
}

@keyframes retroWindowOpen {
  from { opacity:0; transform:scale(.985) translateY(10px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}

.roblox-old-topbar {
  min-height:72px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:9px 12px;
  background:
    linear-gradient(#467bd1,#2757a7 52%,#1d468d 53%,#214d9a);
  border-bottom:2px solid #14376f;
  color:white;
  text-shadow:1px 1px #173a73;
}

.roblox-old-brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.roblox-old-brand strong {
  display:block;
  font-size:18px;
  letter-spacing:-.02em;
}

.roblox-old-brand small {
  display:block;
  margin-top:4px;
  color:#dfeaff;
  font-size:10px;
}

.roblox-block {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  transform:rotate(-8deg);
  background:#d52c2c;
  border:3px solid white;
  box-shadow:2px 2px 0 #8f1111;
  font:bold 28px Arial,sans-serif;
  color:white;
}

.roblox-close {
  width:34px;
  height:30px;
  border:2px outset #eee;
  background:#d7d7d7;
  color:#1d1d1d;
  cursor:pointer;
  font:bold 13px Arial,sans-serif;
}

.roblox-close:active {
  border-style:inset;
}

.roblox-old-nav {
  min-height:44px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:#bababa;
  border-top:1px solid #f8f8f8;
  border-bottom:1px solid #7c7c7c;
}

.roblox-tab {
  min-height:30px;
  padding:0 13px;
  border:2px outset #ececec;
  background:#d7d7d7;
  color:#222;
  cursor:pointer;
  font:bold 11px Verdana,Arial,sans-serif;
}

.roblox-tab:active,
.roblox-tab.active {
  border-style:inset;
  background:#c5c5c5;
}

.roblox-online-dot {
  margin-left:auto;
  color:#167c22;
  font:bold 10px Verdana,Arial,sans-serif;
}

.roblox-browser {
  min-height:0;
  flex:1;
  display:grid;
  grid-template-columns:190px 1fr;
  overflow:hidden;
  background:#efefef;
}

.roblox-sidebar {
  padding:12px;
  overflow:auto;
  background:#d6d6d6;
  border-right:1px solid #999;
}

.retro-box {
  margin-bottom:12px;
  border:1px solid #8b8b8b;
  background:white;
  box-shadow:1px 1px 0 white inset;
}

.retro-box strong {
  display:block;
  padding:7px 8px;
  background:#3767ae;
  color:white;
  font-size:11px;
}

.retro-box span {
  display:block;
  padding:7px 8px;
  border-top:1px solid #d4d4d4;
  font-size:10px;
}

.roblox-content {
  min-width:0;
  overflow:auto;
  padding:18px;
  background:
    linear-gradient(rgba(55,103,174,.035) 1px,transparent 1px),
    #f7f7f7;
  background-size:100% 32px;
}

.roblox-view {
  display:none;
}

.roblox-view.active {
  display:block;
}

.retro-page-title {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  padding-bottom:9px;
  border-bottom:2px solid #3767ae;
}

.retro-page-title span {
  color:#626262;
  font-size:9px;
  font-weight:bold;
}

.retro-page-title h2 {
  margin:3px 0 0;
  color:#222;
  font:700 28px Arial,sans-serif;
  letter-spacing:-.025em;
}

.gallery-controls {
  display:flex;
  gap:5px;
}

.gallery-controls button {
  width:38px;
  height:32px;
  border:2px outset #eee;
  background:#d7d7d7;
  color:#222;
  cursor:pointer;
  font:bold 18px Arial,sans-serif;
}

.gallery-controls button:active {
  border-style:inset;
}

.roblox-outfit-track {
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:3px 3px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-color:#777 #d5d5d5;
  scrollbar-width:auto;
}

.roblox-outfit-card {
  flex:0 0 min(390px,82vw);
  scroll-snap-align:start;
  border:1px solid #8b8b8b;
  background:#fff;
  box-shadow:
    1px 1px 0 #fff inset,
    3px 3px 0 rgba(0,0,0,.08);
}

.roblox-card-titlebar {
  min-height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 9px;
  background:linear-gradient(#f3f3f3,#d3d3d3);
  border-bottom:1px solid #999;
}

.roblox-card-titlebar strong {
  font-size:13px;
}

.roblox-card-titlebar span {
  padding:3px 6px;
  background:#3767ae;
  color:white;
  font-size:8px;
  font-weight:bold;
}

.roblox-image-frame {
  display:grid;
  place-items:center;
  min-height:430px;
  padding:10px;
  background:
    repeating-conic-gradient(#eee 0 25%,#ddd 0 50%) 50% / 18px 18px;
  border-bottom:1px solid #aaa;
}

.roblox-image-frame img {
  display:block;
  width:100%;
  max-height:620px;
  object-fit:contain;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.roblox-card-copy {
  padding:12px;
}

.roblox-card-copy p {
  margin:0 0 8px;
  color:#333;
  font-size:11px;
  line-height:1.55;
}

.roblox-card-copy .roblox-source {
  margin:0;
  padding-top:8px;
  border-top:1px dotted #999;
  color:#555;
  font-size:9px;
}

.roblox-card-position {
  padding:6px 12px;
  background:#ececec;
  border-top:1px solid #ccc;
  color:#555;
  font-size:9px;
  text-align:right;
}

.retro-empty-state {
  min-height:280px;
  display:grid;
  place-items:center;
  align-content:center;
  padding:30px;
  border:1px dashed #888;
  background:rgba(255,255,255,.78);
  text-align:center;
}

.retro-empty-state strong {
  font-size:20px;
}

.retro-empty-state p {
  color:#666;
  font-size:11px;
}

.roblox-disclaimer {
  margin-top:18px;
  padding:9px 10px;
  border:1px solid #aaa;
  background:#e7e7e7;
  color:#666;
  font-size:8px;
  line-height:1.55;
}

/* -------------------------
   LS25 LOADER
   ------------------------- */

.ls25-loading {
  position:fixed;
  inset:0;
  z-index:8000;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 26%,rgba(255,226,150,.14),transparent 28%),
    linear-gradient(180deg,#3d2918 0%,#5b3c20 56%,#2b1e14 100%);
  color:#f8ead2;
}

.ls25-loading.hidden {
  display:none !important;
}

.ls25-loading-noise {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.06) 4px),
    repeating-linear-gradient(90deg,transparent 0 67px,rgba(255,221,155,.05) 68px);
}

.ls25-loading-copy {
  position:relative;
  z-index:3;
  width:min(640px,calc(100% - 40px));
  text-align:center;
}

.ls25-loading-copy > span {
  color:#c6aa76;
  font:10px Consolas,monospace;
  letter-spacing:.16em;
}

.ls25-loading-copy h2 {
  min-height:54px;
  margin:12px 0 18px;
  color:#fff1d5;
  font-size:clamp(25px,5vw,46px);
  letter-spacing:-.045em;
}

.ls25-loading-copy small {
  color:#a98d65;
  font:10px Consolas,monospace;
}

.ls25-loading-bar {
  height:8px;
  margin:0 0 14px;
  overflow:hidden;
  border:1px solid rgba(255,235,192,.16);
  background:rgba(0,0,0,.28);
}

.ls25-loading-bar i {
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#708f39,#a5c767);
}

.ls25-loading.active .ls25-loading-bar i {
  animation:ls25Progress 5s linear forwards;
}

@keyframes ls25Progress {
  to { width:100%; }
}

.tractor-road {
  position:absolute;
  left:0;
  right:0;
  bottom:9vh;
  height:74px;
  border-bottom:3px solid rgba(221,183,113,.24);
}

.css-tractor {
  position:absolute;
  left:-220px;
  bottom:2px;
  width:176px;
  height:76px;
}

.ls25-loading.active .css-tractor {
  animation:tractorDrive 5s linear forwards;
}

@keyframes tractorDrive {
  from { transform:translateX(0); }
  to { transform:translateX(calc(100vw + 430px)); }
}

.tractor-body {
  position:absolute;
  left:54px;
  bottom:22px;
  width:91px;
  height:32px;
  border-radius:8px 12px 4px 5px;
  background:#6f8f34;
  border:2px solid #283516;
}

.tractor-front {
  position:absolute;
  left:132px;
  bottom:22px;
  width:36px;
  height:24px;
  border-radius:4px 12px 4px 4px;
  background:#7fa33a;
  border:2px solid #283516;
}

.tractor-cabin {
  position:absolute;
  left:69px;
  bottom:50px;
  width:48px;
  height:33px;
  border:3px solid #3f5c23;
  border-bottom:0;
  background:rgba(139,194,205,.54);
  clip-path:polygon(14% 0,80% 0,100% 100%,0 100%);
}

.tractor-exhaust {
  position:absolute;
  left:126px;
  bottom:53px;
  width:7px;
  height:30px;
  background:#242424;
}

.tractor-wheel {
  position:absolute;
  bottom:0;
  border-radius:50%;
  background:#1a1a1a;
  border:4px solid #080808;
  box-shadow:inset 0 0 0 5px #555;
}

.tractor-wheel-big {
  left:48px;
  width:53px;
  height:53px;
}

.tractor-wheel-small {
  left:133px;
  width:37px;
  height:37px;
}

/* -------------------------
   LS25 WINDOW
   ------------------------- */

.ls25-window {
  width:min(1050px,100%);
  max-height:88vh;
  overflow:hidden;
  border:1px solid rgba(194,165,106,.26);
  background:
    linear-gradient(135deg,rgba(127,154,65,.07),transparent 38%),
    #19140e;
  color:#f2e7d5;
  box-shadow:0 30px 110px rgba(0,0,0,.65);
}

.ls25-header {
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  border-bottom:1px solid rgba(214,184,122,.15);
  background:linear-gradient(90deg,#322617,#201910);
}

.ls25-header span {
  color:#9cae68;
  font:9px Consolas,monospace;
  letter-spacing:.16em;
}

.ls25-header h2 {
  margin:5px 0 0;
  font-size:clamp(28px,5vw,44px);
  letter-spacing:-.045em;
}

.ls25-close {
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:#d3c5ad;
  cursor:pointer;
  font-size:25px;
}

.ls25-content {
  max-height:calc(88vh - 92px);
  overflow:auto;
  padding:26px;
}

.ls25-game-card {
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(170,197,104,.16);
  background:
    linear-gradient(145deg,rgba(114,145,57,.08),transparent 60%),
    rgba(255,255,255,.018);
}

.ls25-game-card::after {
  content:"LS25";
  position:absolute;
  right:-10px;
  bottom:-35px;
  color:rgba(173,201,111,.035);
  font:900 130px Arial,sans-serif;
}

.ls25-game-card > span {
  color:#97ac61;
  font:9px Consolas,monospace;
  letter-spacing:.16em;
}

.ls25-game-card h3 {
  margin:9px 0 8px;
  font-size:42px;
}

.ls25-game-card p {
  max-width:600px;
  color:#aa9e8a;
  line-height:1.65;
}

.ls25-future-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin-top:24px;
}

.ls25-future-grid div {
  padding:13px 14px;
  border-left:2px solid #708f39;
  background:rgba(0,0,0,.17);
  color:#b3a78f;
  font:11px Consolas,monospace;
}

@media (max-width:800px) {
  .game-library-row {
    grid-template-columns:24px 1fr auto;
  }

  .game-library-row > span {
    display:none;
  }

  .game-open-btn {
    grid-column:2 / -1;
    justify-self:start;
    margin-bottom:8px;
  }

  .roblox-browser {
    grid-template-columns:1fr;
  }

  .roblox-sidebar {
    display:none;
  }

  .roblox-content {
    padding:12px;
  }

  .roblox-retro-window {
    height:94vh;
  }

  .roblox-outfit-card {
    flex-basis:min(330px,88vw);
  }

  .roblox-image-frame {
    min-height:350px;
  }

  .ls25-future-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:560px) {
  .game-backdrop {
    padding:6px;
  }

  .roblox-old-brand strong {
    font-size:14px;
  }

  .roblox-old-brand small {
    font-size:8px;
  }

  .roblox-block {
    width:38px;
    height:38px;
    font-size:21px;
  }

  .roblox-old-nav {
    overflow-x:auto;
  }

  .roblox-online-dot {
    display:none;
  }

  .retro-page-title {
    align-items:flex-start;
    flex-direction:column;
  }

  .gallery-controls {
    align-self:flex-end;
  }

  .ls25-content {
    padding:16px;
  }

  .ls25-game-card {
    padding:20px;
  }
}


/* Roblox: sichtbare Diagnose, falls lokal ein Bild fehlt */
.roblox-image-error {
  min-height:300px;
  width:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:24px;
  background:#efefef;
  color:#555;
  text-align:center;
  border:2px dashed #999;
}

.roblox-image-error strong {
  color:#b12222;
  font:bold 13px Verdana,Arial,sans-serif;
}

.roblox-image-error span {
  max-width:100%;
  overflow-wrap:anywhere;
  font:9px Consolas,monospace;
}

.roblox-more-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.roblox-more-box {
  min-height:150px;
  padding:16px;
  border:1px solid #929292;
  background:linear-gradient(#fff,#e6e6e6);
  box-shadow:1px 1px 0 #fff inset;
}

.roblox-more-box strong {
  display:block;
  margin-bottom:10px;
  color:#28589e;
  font:bold 13px Verdana,Arial,sans-serif;
}

.roblox-more-box span {
  color:#555;
  font:10px/1.5 Verdana,Arial,sans-serif;
}

@media (max-width:760px) {
  .roblox-more-grid {
    grid-template-columns:1fr;
  }
}


/* =========================
   V8: Roblox fertig
   ========================= */

.roblox-game-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.retro-game-card {
  min-height:115px;
  padding:15px;
  border:1px solid #8f8f8f;
  background:linear-gradient(#fff,#e8e8e8);
  box-shadow:1px 1px 0 #fff inset;
}

.retro-game-number {
  color:#888;
  font:9px Consolas,monospace;
  margin-bottom:17px;
}

.retro-game-card strong {
  display:block;
  color:#234f91;
  font:bold 15px Verdana,Arial,sans-serif;
}

.retro-game-card > span {
  display:inline-block;
  margin-top:8px;
  padding:3px 6px;
  background:#3767ae;
  color:white;
  font:bold 8px Verdana,Arial,sans-serif;
}

.dream-item-box {
  position:relative;
  overflow:hidden;
}

.dream-item-box::after {
  content:"★";
  position:absolute;
  right:10px;
  bottom:-20px;
  color:rgba(40,88,158,.08);
  font:bold 95px Arial,sans-serif;
}

.dream-item-box small {
  position:relative;
  z-index:2;
  display:inline-block;
  margin-top:16px;
  padding:4px 7px;
  border:1px solid #aaa;
  background:#ededed;
  color:#666;
  font:bold 8px Verdana,Arial,sans-serif;
}

/* =========================
   V8: LS25 fertig
   ========================= */

.ls25-stat-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:26px;
}

.ls25-stat-grid > div {
  min-height:105px;
  padding:16px;
  border:1px solid rgba(170,197,104,.16);
  background:rgba(0,0,0,.18);
}

.ls25-stat-grid small {
  display:block;
  margin-bottom:9px;
  color:#829658;
  font:9px Consolas,monospace;
  letter-spacing:.12em;
}

.ls25-stat-grid strong {
  color:#eee4d0;
  font-size:20px;
}

.ls25-brand-title {
  position:relative;
  z-index:2;
  margin-top:28px;
  color:#8b9f61;
  font:9px Consolas,monospace;
  letter-spacing:.15em;
}

.ls25-brand-list {
  position:relative;
  z-index:2;
  margin-top:10px;
  border-top:1px solid rgba(170,197,104,.14);
}

.ls25-brand-list > div {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  min-height:54px;
  border-bottom:1px solid rgba(170,197,104,.11);
}

.ls25-brand-list span {
  color:#657149;
  font:9px Consolas,monospace;
}

.ls25-brand-list strong {
  color:#d8cfbd;
  font-size:16px;
}

.legal-external {
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:700px) {
  .roblox-game-grid,
  .ls25-stat-grid {
    grid-template-columns:1fr;
  }
}