/* =========================================================
   ZorV3X COMPLETE FIXED STYLES.CSS
   - Clean modern gray default
   - Clean retro mode based on 2000s Flash game sites
   - Manual thumbnails via: images/thumbs/game-slug.jpg
   - Fixes card/grid conflicts, retro thumbnails, logo area, tabs
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --bg:#1f252a;
  --bg-dark:#15191d;
  --panel:#30363d;
  --panel2:#272d33;
  --panel3:#20262b;
  --line:#464f58;
  --line2:#59636e;
  --text:#f4f6f8;
  --muted:#b9c0c8;
  --blue:#1683ff;
  --green:#29d765;
  --yellow:#ffd21f;
  --red:#ff3131;
}

html,
body{
  min-height:100%;
  font-family:"Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(#252b31,#161a1e);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font-family:inherit;
}

/* =========================================================
   COLOR THEMES
========================================================= */

body[data-theme="gray"]{
  --bg:#1f252a; --bg-dark:#15191d; --panel:#30363d; --panel2:#272d33; --panel3:#20262b;
  --line:#464f58; --line2:#59636e; --text:#f4f6f8; --muted:#b9c0c8;
  --blue:#1683ff; --green:#29d765; --yellow:#ffd21f; --red:#ff3131;
}

body[data-theme="blue"]{
  --bg:#102033; --bg-dark:#081321; --panel:#18324f; --panel2:#102840; --panel3:#0d2135;
  --line:#315c87; --line2:#4275a8; --text:#f4f9ff; --muted:#bdd7f0;
  --blue:#2f93ff; --green:#29d765; --yellow:#ffd21f; --red:#ff4242;
}

body[data-theme="red"]{
  --bg:#2a1618; --bg-dark:#160b0d; --panel:#3a2024; --panel2:#2a181b; --panel3:#211114;
  --line:#694147; --line2:#8a535b; --text:#fff4f5; --muted:#e0b7bd;
  --blue:#ff4c5f; --green:#29d765; --yellow:#ffd21f; --red:#ff3131;
}

body[data-theme="green"]{
  --bg:#14251b; --bg-dark:#0a160f; --panel:#203a29; --panel2:#182d20; --panel3:#112018;
  --line:#3c684b; --line2:#4e835f; --text:#f2fff6; --muted:#b7d9c1;
  --blue:#29d765; --green:#2fe070; --yellow:#ffd21f; --red:#ff4242;
}

body[data-theme="yellow"]{
  --bg:#282311; --bg-dark:#171307; --panel:#3b3218; --panel2:#302815; --panel3:#241d0e;
  --line:#71612e; --line2:#917a37; --text:#fff9e6; --muted:#e3d3a4;
  --blue:#ffd21f; --green:#29d765; --yellow:#ffd21f; --red:#ff4242;
}

body[data-theme="black"]{
  --bg:#070707; --bg-dark:#000; --panel:#111; --panel2:#0b0b0b; --panel3:#070707;
  --line:#2a2a2a; --line2:#444; --text:#f8f8f8; --muted:#aaa;
  --blue:#e9e9e9; --green:#29d765; --yellow:#ffd21f; --red:#ff3131;
}

body[data-theme="white"]{
  --bg:#f2f4f7; --bg-dark:#e1e6ec; --panel:#ffffff; --panel2:#eef2f6; --panel3:#e6ebf1;
  --line:#c7d0da; --line2:#aeb9c5; --text:#111827; --muted:#4b5563;
  --blue:#2563eb; --green:#14934a; --yellow:#ca8a04; --red:#dc2626;
  text-shadow:none;
}

body:not(.retro-mode){
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(var(--bg),var(--bg-dark));
  color:var(--text);
}

/* =========================================================
   MODERN HEADER
========================================================= */

.site-header{
  padding:18px 28px 12px;
  background:linear-gradient(var(--panel2),var(--bg-dark));
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}

.top-shell{
  max-width:1500px;
  margin:0 auto;
  display:grid;
  grid-template-columns:220px 420px 1fr auto;
  align-items:center;
  gap:28px;
}

.logo{
  display:block;
  font-size:43px;
  font-weight:950;
  line-height:.9;
  letter-spacing:-2px;
  color:white;
  text-shadow:0 4px 5px rgba(0,0,0,.75);
}

.logo em{
  color:var(--blue);
  font-style:normal;
}

.logo span{
  display:block;
  font-size:18px;
  font-weight:500;
  letter-spacing:0;
  color:#c5cbd1;
  margin-top:8px;
}

.modern-search{
  position:relative;
}

.modern-search input{
  width:100%;
  height:44px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:linear-gradient(var(--panel),var(--panel3));
  color:var(--text);
  font-size:16px;
  padding:0 46px 0 16px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 12px rgba(0,0,0,.28);
}

.modern-search input::placeholder{
  color:var(--muted);
}

.modern-search span{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.9;
}

.modern-nav{
  display:flex;
  justify-self:center;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(var(--panel),var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.25);
}

.modern-nav button{
  height:42px;
  padding:0 22px;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:15px;
  cursor:pointer;
}

.modern-nav button:last-child{
  border-right:0;
}

.modern-nav button:hover,
.modern-nav button.on{
  background:linear-gradient(var(--panel),var(--panel2));
}

.mode-controls{
  display:flex;
  align-items:center;
  gap:12px;
}

.icon-btn,
.retro-toggle,
.theme-select{
  height:42px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:linear-gradient(var(--panel),var(--panel2));
  color:var(--text);
  font-size:16px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.25);
}

.icon-btn{
  width:52px;
}

.retro-toggle{
  min-width:170px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:700;
}

.retro-toggle span{
  width:44px;
  height:26px;
  border-radius:20px;
  background:#69717a;
  position:relative;
  transition:background .2s;
}

.retro-toggle span::after{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  left:2px;
  top:2px;
  transition:left .2s ease;
}

.theme-select{
  padding:0 10px;
  font-weight:800;
}

/* Modern hides retro-only */
body:not(.retro-mode) .retro-banner,
body:not(.retro-mode) .retro-tabs,
body:not(.retro-mode) .retro-navline,
body:not(.retro-mode) .retro-off,
body:not(.retro-mode) .retro-login{
  display:none!important;
}

/* =========================================================
   PAGE / MODERN LAYOUT
========================================================= */

.dev-warning{
  max-width:1500px;
  margin:0 auto;
  padding:0 18px;
}

.dev-warning-box{
  margin-top:8px;
  color:#fff;
  font-size:15px;
}

.page{
  max-width:1500px;
  margin:0 auto;
  padding:12px 18px 0;
  display:grid;
  grid-template-columns:1fr 330px;
  gap:16px;
}

.cats{
  grid-column:1/-1;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(var(--panel),var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 16px rgba(0,0,0,.32);
  flex-wrap:wrap;
}

.cat{
  height:42px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  border:1px solid var(--line2);
  background:linear-gradient(var(--panel),var(--panel2));
  color:var(--text);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.cat.on,
.cat:hover{
  background:linear-gradient(#6a7480,#505a66);
}

.main,
.widget{
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(var(--panel),var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 16px rgba(0,0,0,.34);
}

.main{
  padding:14px;
  min-width:0;
  min-height:520px;
}

.sec-title{
  height:34px;
  display:flex;
  align-items:center;
  font-size:19px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.3px;
  margin-bottom:12px;
}

.sec-title::after{
  content:"View All »";
  margin-left:auto;
  font-size:13px;
  font-weight:700;
  color:#d6dce2;
  text-transform:none;
}

.grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px 14px;
  min-height:200px;
}

.card{
  border:1px solid var(--line2);
  border-radius:7px;
  overflow:hidden;
  background:linear-gradient(var(--panel),var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.36);
  cursor:pointer;
  transition:.15s;
  opacity:1!important;
  visibility:visible!important;
}

.card:hover{
  transform:translateY(-2px);
  border-color:#8a96a4;
}

.thumb-wrap{
  height:105px;
  position:relative;
  overflow:hidden;
  background:#111;
}

.thumb-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#111;
}

.thumb-fallback{
  width:100%;
  height:100%;
  display:none;
  align-items:flex-end;
  padding:12px;
  color:white;
  font-weight:900;
  background:linear-gradient(135deg,#3b444d,#101214);
}

.thumb-fallback small{
  display:block;
  font-size:11px;
  color:#c9d0d7;
}

.play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.38);
  opacity:0;
  transition:.15s;
}

.card:hover .play-overlay{
  opacity:1;
}

.play-btn{
  background:var(--blue);
  color:white;
  padding:8px 16px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
}

.card-body{
  min-height:58px;
  padding:9px 10px 10px;
  background:linear-gradient(var(--panel),var(--panel2));
}

.card-name{
  font-size:15px;
  font-weight:900;
  line-height:1.15;
  color:var(--text);
  margin-bottom:7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}

.status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px rgba(41,215,101,.8);
}

.bdg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  padding:2px 5px;
  border-radius:3px;
  font-size:10px;
  font-weight:950;
  line-height:1;
  text-shadow:none;
  vertical-align:middle;
}

.top{background:var(--yellow);color:#111}
.hot{background:var(--red);color:white}
.new{background:#9be234;color:#111}

/* =========================================================
   SIDEBAR / FOOTER / MODAL
========================================================= */

.side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.widget{
  padding:12px;
}

.w-title{
  font-size:14px;
  font-weight:950;
  color:#e8edf3;
  text-transform:uppercase;
  margin-bottom:8px;
}

.plist,
.catlist{
  list-style:none;
}

.plist li{
  min-height:28px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:8px;
  padding:0 4px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.pimg{display:none}

.rk{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.22);
  font-weight:950;
}

.pp{
  color:#cbd1d8;
  font-weight:500;
}

.catlist{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 18px;
}

.catlist li{
  font-size:13px;
  cursor:pointer;
  color:#eef2f6;
}

.suggest,
.support-box,
.week-ad,
.red-ad,
.icon-btn{
  display:none!important;
}

.footer{
  margin-top:0;
  background:linear-gradient(var(--panel2),var(--bg-dark));
  border-top:1px solid #3a4149;
  box-shadow:0 -8px 20px rgba(0,0,0,.28);
}

.footer-inner{
  max-width:1500px;
  margin:0 auto;
  min-height:70px;
  padding:15px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.footer-brand{
  font-size:24px;
  font-weight:950;
}

.footer-brand em{
  color:var(--blue);
  font-style:normal;
}

.footer-brand::after{
  content:" © 2026 ZorV3X. All rights reserved.";
  font-size:13px;
  font-weight:400;
  color:#c3c8ce;
  margin-left:18px;
}

.footer-links{
  display:flex;
  gap:18px;
}

.footer-links a{
  font-size:13px;
  color:#d6dbe1;
}

.overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.86);
  z-index:999;
  backdrop-filter:blur(2px);
}

.overlay.open{
  display:flex;
}

.modal{
  width:min(1100px,95vw);
  background:#20252a;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}

.modal-hdr{
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#2b3036;
  border-bottom:1px solid var(--line);
}

.modal-thumb{display:none}

.modal-info{flex:1}

.modal-info h2{font-size:18px}

.modal-info span{
  color:#c3c9d0;
  font-size:13px;
}

.modal-btns{
  display:flex;
  gap:8px;
}

.btn-tab,
.btn-close,
.btn-play{
  border:1px solid #56606b;
  background:linear-gradient(#3a414a,#252b31);
  color:white;
  border-radius:6px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}

.game-frame,
.loading,
.problem{
  width:100%;
  height:620px;
  background:#000;
  border:0;
}

.loading,
.problem{
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
}

.loading.show,
.problem.show{
  display:flex;
}

/* =========================================================
   RETRO MODE - CLEAN 2000s FLASH WEBSITE STYLE
========================================================= */

body.retro-mode{
  background:#061f31;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  text-shadow:none;
}

body.retro-mode .site-header,
body.retro-mode .page,
body.retro-mode .footer{
  width:min(1500px, calc(100vw - 28px));
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  background:linear-gradient(#063a5d,#052b43);
  border:2px solid #31b7e6;
  box-shadow:0 0 20px rgba(0,0,0,.65), inset 0 0 18px rgba(85,210,255,.18);
}

body.retro-mode .site-header{
  position:relative;
  margin-top:10px;
  padding:0;
  border-bottom:0;
}

body.retro-mode .top-shell{
  height:120px;
  display:grid;
  grid-template-columns:330px 1fr auto;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:linear-gradient(#062d4d,#041f36);
}

/* Image logo version. Put the file at assets/v3x-logo.png */
body.retro-mode .logo{
  width:320px;
  height:90px;
  background:url("assets/v3x-logo.png") left center / contain no-repeat;
  font-size:0;
  line-height:0;
  text-shadow:none;
}

body.retro-mode .logo em,
body.retro-mode .logo span{
  display:none;
}

/* If the image is missing, this keeps layout stable */
body.retro-mode .logo::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
}

body.retro-mode .retro-banner{
  display:flex!important;
  justify-content:flex-end;
  align-items:center;
  background:none;
  border:0;
  box-shadow:none;
}

body.retro-mode .banner-left{
  display:none;
}

body.retro-mode .banner-icons{
  display:flex;
  gap:12px;
}

body.retro-mode .banner-icons span{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:linear-gradient(#ffffff,#dff7ff);
  border:2px solid #a6eaff;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  font-size:36px;
}

body.retro-mode .retro-off{
  display:inline-flex!important;
  position:absolute;
  top:16px;
  right:18px;
  height:36px;
  padding:0 16px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(#ffffff,#cceeff);
  color:#062f45;
  border:2px solid #91e6ff;
  border-radius:4px;
  font-weight:950;
  font-size:14px;
  text-shadow:none;
  z-index:5;
}

body.retro-mode .retro-tabs{
  display:flex!important;
  height:52px;
  padding-left:18px;
  background:#063852;
  border-top:1px solid #37add4;
  border-bottom:1px solid #37add4;
  align-items:end;
  gap:10px;
}

body.retro-mode .retro-tabs button{
  height:50px;
  min-width:170px;
  padding:0 42px;
  border:2px solid #83dcf8;
  border-bottom:0;
  background:linear-gradient(#effbff,#abd7ea);
  color:#072f47;
  font-size:22px;
  font-weight:950;
  cursor:pointer;
  transition:.15s;
}

body.retro-mode .retro-tabs button:hover,
body.retro-mode .retro-tabs button.active,
body.retro-mode .retro-tabs button:focus{
  background:linear-gradient(#1397d1,#07577d)!important;
  color:#fff!important;
  border-color:#8be8ff!important;
  box-shadow:inset 0 0 10px rgba(255,255,255,.25),0 0 10px rgba(62,200,255,.35);
}

body.retro-mode .retro-tabs button:active{
  transform:translateY(1px);
}

body.retro-mode .retro-navline{
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  min-height:58px;
  height:auto;
  flex-wrap:wrap;
  background:#052f47;
  border-bottom:1px solid #37add4;
}

body.retro-mode .retro-navline button{
  background:none;
  border:0;
  color:#fff;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
}

body.retro-mode .retro-navline button:not(:last-child)::after{
  content:" |";
  color:#9de9ff;
  margin-left:10px;
}

body.retro-mode .retro-search{
  display:flex;
  margin-left:auto;
}

body.retro-mode .retro-search input,
body.retro-mode .retro-search select{
  height:38px;
  border:2px solid #c8dce8;
  background:#fff;
  color:#333;
  padding:0 12px;
  font-size:14px;
}

body.retro-mode .retro-search button{
  height:38px;
  padding:0 22px;
  background:linear-gradient(#2ca8dc,#0b6f9d);
  border:2px solid #88ddff;
  color:#fff;
  font-weight:950;
}

body.retro-mode .modern-search,
body.retro-mode .modern-nav,
body.retro-mode .mode-controls,
body.retro-mode .cats,
body.retro-mode .dev-warning{
  display:none!important;
}

body.retro-mode .page{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:12px;
  padding:14px;
  border-top:0;
}

body.retro-mode .main,
body.retro-mode .widget{
  background:linear-gradient(#0b668f,#064865);
  border:2px solid #63cdf4;
  border-radius:6px;
  box-shadow:inset 0 0 12px rgba(255,255,255,.12);
}

body.retro-mode .main{
  padding:10px;
  min-height:520px;
}

body.retro-mode .sec-title{
  height:50px;
  margin:0 0 10px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  background:linear-gradient(#0d729e,#074b6a);
  border-bottom:1px solid #7be1ff;
  color:#fff;
  font-size:28px;
  font-weight:950;
}

body.retro-mode .sec-title::after{
  content:"View All Games »";
  margin-left:auto;
  font-size:18px;
  color:#e1f8ff;
}

body.retro-mode .grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}

body.retro-mode .card{
  display:block;
  min-height:auto;
  background:linear-gradient(#f7fbff,#dcebf3);
  border:2px solid #8eb3c5;
  border-radius:6px;
  overflow:hidden;
  color:#061f30;
  text-shadow:none;
  box-shadow:0 2px 5px rgba(0,0,0,.45);
}

body.retro-mode .thumb-wrap{
  width:100%;
  height:150px;
  background:#0c1424;
}

body.retro-mode .thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body.retro-mode .play-overlay{
  display:none;
}

body.retro-mode .card-body{
  padding:10px 12px 12px;
  background:linear-gradient(#f6fbff,#dce9f1);
}

body.retro-mode .card-name{
  color:#06283b;
  font-size:18px;
  font-weight:950;
  text-decoration:underline;
  white-space:normal;
  line-height:1.05;
  margin-bottom:6px;
}

body.retro-mode .card-meta{
  display:block;
  color:#06283b;
  font-size:16px;
  line-height:1.35;
}

body.retro-mode .side{
  gap:12px;
}

body.retro-mode .widget{
  padding:12px;
}

body.retro-mode .w-title{
  font-size:24px;
  font-weight:950;
  color:#fff;
  margin-bottom:12px;
}

body.retro-mode .plist li{
  height:30px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:8px;
  color:#fff;
  font-size:15px;
  font-weight:900;
  border:0;
  background:rgba(0,60,95,.38);
}

body.retro-mode .rk{
  background:none;
  color:#ff9800;
}

body.retro-mode .pp{
  color:#c9f2ff;
}

body.retro-mode .catlist{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
}

body.retro-mode .catlist li{
  color:#fff;
  font-size:17px;
}

body.retro-mode .footer{
  width:min(1500px, calc(100vw - 28px));
  margin:0 auto 16px;
  background:linear-gradient(#063a5d,#052b43);
  border:2px solid #31b7e6;
  border-top:0;
}

body.retro-mode .footer-inner{
  min-height:52px;
  padding:10px 18px;
}

/* =========================================================
   WHITE THEME READABILITY
========================================================= */

body[data-theme="white"]:not(.retro-mode) .card-name,
body[data-theme="white"]:not(.retro-mode) .w-title,
body[data-theme="white"]:not(.retro-mode) .logo,
body[data-theme="white"]:not(.retro-mode) .footer-brand,
body[data-theme="white"]:not(.retro-mode) .modern-nav button,
body[data-theme="white"]:not(.retro-mode) .cat{
  color:var(--text);
  text-shadow:none;
}

body[data-theme="white"]:not(.retro-mode) .card-meta,
body[data-theme="white"]:not(.retro-mode) .pp,
body[data-theme="white"]:not(.retro-mode) .footer-links a{
  color:var(--muted);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){
  .top-shell{
    grid-template-columns:1fr;
    gap:12px;
  }

  .modern-nav,
  .mode-controls,
  .cats{
    flex-wrap:wrap;
  }

  .page{
    grid-template-columns:1fr;
  }

  .side{
    display:none;
  }

  .grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  }

  body.retro-mode .site-header,
  body.retro-mode .page,
  body.retro-mode .footer{
    width:calc(100vw - 18px);
  }

  body.retro-mode .top-shell{
    grid-template-columns:1fr;
    height:auto;
  }

  body.retro-mode .page{
    grid-template-columns:1fr;
  }

  body.retro-mode .side{
    display:none;
  }

  body.retro-mode .grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  }
}

/* =========================
   TEXT LOGO AGAIN — SCREENSHOT STYLE
========================= */

body.retro-mode .logo {
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-size: 58px !important;
    font-weight: 950 !important;
    letter-spacing: -3px !important;
    line-height: .85 !important;
    color: #fff !important;
    text-shadow: 0 2px 0 #d7eef7, 0 5px 0 #001522, 0 8px 12px rgba(0,0,0,.7) !important;
}

    body.retro-mode .logo em {
        display: inline !important;
        font-style: normal !important;
        color: #ff3b35 !important;
        text-shadow: 0 2px 0 #ffb4a8, 0 5px 0 #7a0505, 0 8px 12px rgba(0,0,0,.75) !important;
    }

    body.retro-mode .logo span {
        display: block !important;
        margin-top: 10px !important;
        font-size: 20px !important;
        letter-spacing: 0 !important;
        color: #e0f9ff !important;
        text-shadow: 0 2px 2px rgba(0,0,0,.7) !important;
    }

/* =========================================================
   ZorV3X FINAL POLISH PACK
========================================================= */

.card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .card:hover {
        transform: translateY(-4px);
        border-color: #8bdcff;
        box-shadow: 0 0 18px rgba(45,190,255,.28), 0 8px 18px rgba(0,0,0,.38);
    }

.thumb-img {
    transition: transform .22s ease, filter .22s ease;
}

.card:hover .thumb-img {
    transform: scale(1.055);
    filter: saturate(1.12) contrast(1.05);
}

.play-overlay {
    opacity: 0;
    backdrop-filter: blur(1px);
    transition: opacity .18s ease;
}

.card:hover .play-overlay {
    opacity: 1;
}

.play-btn {
    transform: scale(.94);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 0 14px rgba(22,131,255,.55);
}

.card:hover .play-btn {
    transform: scale(1);
}

.card-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* smoother buttons */
button,
.cat,
.retro-toggle,
.theme-select {
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

    button:hover,
    .cat:hover,
    .retro-toggle:hover,
    .theme-select:hover {
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 14px rgba(80,190,255,.18);
    }

    /* active category glow */
    .cat.on,
    .modern-nav button.on {
        border-color: #8bdcff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 12px rgba(80,190,255,.25);
    }

/* better search focus */
.modern-search input:focus,
.retro-search input:focus {
    border-color: #8bdcff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 18px rgba(80,190,255,.35);
}

/* premium panel depth */
.main,
.widget,
.cats {
    backdrop-filter: blur(6px);
}

/* sidebar hover */
.plist li,
.catlist li {
    transition: background .14s ease, transform .14s ease;
}

    .plist li:hover,
    .catlist li:hover {
        background: rgba(255,255,255,.07);
        transform: translateX(3px);
    }

/* smoother modal */
.overlay.open .modal {
    animation: modalPop .18s ease both;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(.97) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* retro extra glow */
body.retro-mode .main,
body.retro-mode .widget,
body.retro-mode .site-header,
body.retro-mode .page {
    box-shadow: 0 0 18px rgba(0,190,255,.25), inset 0 0 16px rgba(255,255,255,.12);
}

body.retro-mode .card:hover {
    transform: translateY(-4px);
    border-color: #b7efff;
    box-shadow: 0 0 18px rgba(105,220,255,.5), 0 6px 16px rgba(0,0,0,.45);
}

body.retro-mode .retro-tabs button:hover,
body.retro-mode .retro-tabs button.active {
    background: linear-gradient(#13a9e8,#07577d) !important;
    color: white !important;
    box-shadow: inset 0 0 12px rgba(255,255,255,.3), 0 0 12px rgba(80,210,255,.45);
}

/* cleaner scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #10161c;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#4a5663,#2e3842);
    border-radius: 999px;
    border: 3px solid #10161c;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(#6e7c8b,#3b4652);
    }

/* mobile polish */
@media(max-width:700px) {
    .grid {
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
    }

    .card-name {
        font-size: 13px;
    }

    .card-meta {
        font-size: 12px;
    }

    .top-shell {
        padding: 14px;
    }

    .logo {
        font-size: 36px;
    }
}

/* =========================================================
   EXTRA RETRO FEEL + CENTER EXIT BUTTON
========================================================= */

/* exit retro in top middle */
body.retro-mode .retro-off {
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* stronger retro blue frame */
body.retro-mode .site-header,
body.retro-mode .page,
body.retro-mode .footer {
    border-color: #5bdcff !important;
    box-shadow: 0 0 22px rgba(0,180,255,.38), inset 0 0 18px rgba(255,255,255,.13) !important;
}

/* glossy old-web panels */
body.retro-mode .main,
body.retro-mode .widget {
    background: linear-gradient(rgba(255,255,255,.08), transparent 45%), linear-gradient(#0d719b,#064762) !important;
}

/* more retro tab shine */
body.retro-mode .retro-tabs button {
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.35);
}

/* old flash portal card feel */
body.retro-mode .card {
    border-width: 2px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 5px 12px rgba(0,0,0,.38) !important;
}

/* stronger thumbnail border */
body.retro-mode .thumb-wrap {
    border-bottom: 2px solid #8eb3c5;
}

/* tiny scanline effect */
body.retro-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    background: repeating-linear-gradient( to bottom, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px );
    opacity: .35;
}

/* FIX THEME SELECT WHITE TEXT */
select.theme-select,
#themeSelect {
    background: #1f2933 !important;
    color: #ffffff !important;
    border: 1px solid #4b5c6b !important;
}

    select.theme-select option,
    #themeSelect option {
        background: #1f2933 !important;
        color: #111111 !important;
    }

    /* make opened dropdown readable on Windows/Opera */
    #themeSelect option {
        color: #111 !important;
        background: #fff !important;
    }

        #themeSelect option:checked {
            background: #2563eb !important;
            color: #fff !important;
        }

/* FULLSCREEN GAME FIX */
.modal:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

    .modal:fullscreen .modal-hdr {
        flex: 0 0 auto !important;
    }

    .modal:fullscreen .game-frame {
        flex: 1 1 auto !important;
        width: 100vw !important;
        height: calc(100vh - 72px) !important;
        display: block !important;
        background: #000 !important;
    }

    .modal:fullscreen .loading,
    .modal:fullscreen .problem {
        height: calc(100vh - 72px) !important;
    }