/* Base CSS. Real build will overwrite but keep variables consistent. */
:root{
	--bg:#0f1115;
	--surface:#171a21;
	--surface-2:#1e2230;
	--text:#f2f4f8;
	--muted:#9aa3b2;
	--color-primary:#FF3B30; /* red */
	--accent:#FF5A4D;
	--success:#16A34A;
	--warning:#F59E0B;
	--danger:#DC2626;
	--r-sm:8px;--r-md:12px;--r-lg:20px;--r-pill:999px;
	--shadow-sm:0 1px 2px rgba(0,0,0,.2);--shadow-md:0 8px 24px rgba(0,0,0,.25);
	--border:#223047;
	--motion-normal:200ms;
}

[data-theme="dark"]{
	--bg:#0f1115;
	--surface:#171a21;
	--text:#f2f4f8;
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}

/* Layout */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--surface);padding:12px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;margin:8px 8px 16px}
.brand__logo{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#262a36}
.menu{display:flex;flex-direction:column;gap:6px;margin:8px}
.menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#d8dde7}
.menu-item:hover{background:#202531}
.menu-item svg{width:18px;height:18px}
.sidebar__cta{margin:16px 8px 8px}

.content{display:grid;grid-template-rows:auto 1fr}
.content,.main,.grid{min-width:0;max-width:100%;overflow-x:hidden}
.navbar{display:flex;align-items:center;justify-content:space-between;background:var(--surface);padding:10px 16px;position:sticky;top:0;z-index:50;width:100%;max-width:100%;box-sizing:border-box}
#menuToggle{position:relative;z-index:60}
.navbar__left,.navbar__right{display:flex;align-items:center;gap:10px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:#202531;border-radius:var(--r-pill);height:36px;padding:0 12px}

.main{padding:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;width:100%;box-sizing:border-box}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.col-12{grid-column:span 12;width:100%;min-width:0;max-width:100%}
.col-3{grid-column:span 3}
.card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.card__body{padding:16px}

.hero{position:relative;background:linear-gradient(135deg,#2a2f3d 0%, #27181a 60%, #3a0d0d 100%);min-height:220px}
.hero__content{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero .btn{width:max-content}

.section-title{font-size:14px;color:var(--muted);margin:6px 0 10px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;background:var(--color-primary);color:#fff;border:0;cursor:pointer}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--outline{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}
.btn--ghost{background:#202531;color:#fff}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#202531;color:#fff;font-size:12px}

/* Utilities */
.row{display:flex;gap:12px;align-items:center}
.mt-16{margin-top:16px}
.mb-12{margin-bottom:12px}
.muted{color:var(--muted)}

/* Forms */
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 2px}
input, select, textarea{
    width:100%;height:40px;padding:0 12px;
    color:var(--text);background:var(--surface-2);
    border:1px solid var(--border);border-radius:var(--r-md);
    outline:none;transition:border-color var(--motion-normal,200ms), box-shadow var(--motion-normal,200ms);
}
.input{width:100%;height:40px;padding:0 12px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);outline:none;transition:border-color var(--motion-normal,200ms), box-shadow var(--motion-normal,200ms)}
textarea{min-height:100px;padding:10px 12px}
input::placeholder, textarea::placeholder{color:var(--muted)}
.input::placeholder{color:var(--muted)}
input:focus, select:focus, textarea:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent)}
.form-group + .form-group{margin-top:12px}
input:disabled, select:disabled, textarea:disabled{opacity:.6;cursor:not-allowed}
.input:disabled{opacity:.6;cursor:not-allowed}
.is-invalid{border-color:var(--danger) !important}
.is-invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent) !important}

/* Games */
.section{margin:16px 0}
.section .section-title{display:flex;align-items:center;justify-content:space-between}
.game-filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.badge--filter{background:#202531;color:#fff;border:1px solid transparent}
.badge--filter[aria-pressed="true"], .badge--filter.active{background:var(--color-primary);border-color:var(--color-primary)}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:12px}
.game-card{display:block;background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);transition:transform var(--motion-normal,200ms), box-shadow var(--motion-normal,200ms)}
.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.game-thumb{background:linear-gradient(135deg,#2a2f3d 0%, #27181a 60%, #3a0d0d 100%);aspect-ratio:16/9;position:relative;background-size:cover;background-position:center}
.game-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.06), transparent 60%)}
.label-popular{position:absolute;top:8px;left:8px;background:linear-gradient(90deg,var(--color-primary),var(--accent));color:#fff;font-size:11px;padding:4px 8px;border-radius:999px}
.game-meta{padding:10px}
.game-title{font-size:14px;margin:0 0 4px}
.game-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-cat{font-size:12px;color:var(--muted)}
.play-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;background:linear-gradient(90deg,var(--color-primary),var(--accent));color:#fff;border:0;cursor:pointer;margin-top:8px;width:100%;font-weight:600}
.play-btn:hover{filter:brightness(1.05)}

/* Thumbs & Banners */
.thumb-card{display:block;position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);background:#222;aspect-ratio:16/9;background-size:cover;background-position:center}
.thumb-card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.banner{display:block;width:100%;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);background:#222;background-size:cover;background-position:center;aspect-ratio:21/5}

/* Hero Slider */
.hero-slider{width:100%;margin-bottom:20px}
.slider-container{position:relative;width:100%;height:400px;overflow:hidden;border-radius:16px;box-shadow:var(--shadow-lg)}
.slider-track{position:relative;width:100%;height:100%}
.slider-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;visibility:hidden;transition:all 0.6s ease-in-out;z-index:1}
.slider-slide.active{opacity:1;visibility:visible;z-index:2}
.slider-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s ease}
.dot.active{background:var(--color-primary);transform:scale(1.2)}

/* Old Slider (keep for compatibility) */
.slider{position:relative;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md);width:100%;max-width:100%}
.slides{display:flex;transition:transform 480ms cubic-bezier(.22,.61,.36,1);will-change:transform}
.slide{aspect-ratio:21/9;position:relative;background-size:cover;background-position:center;background-color:#111;flex-shrink:0}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 80%)}
.slide__content{position:absolute;left:24px;right:auto;bottom:24px;top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:min(560px, 80%);padding:18px 20px;border-radius:16px;color:#fff;z-index:1;
  background:color-mix(in srgb, var(--surface) 35%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 15%, transparent);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.slide__eyebrow{font-size:13px;letter-spacing:.3px;opacity:.9}
.slide__title{font-size:28px;line-height:1.2;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.slider__nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none}
.slider__btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:transform 160ms ease, background 160ms ease}
.slider__btn:hover{transform:scale(1.05);background:rgba(0,0,0,.5)}
.slider__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;z-index:2}
.slider__dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(0,0,0,.25)}
.slider__dot[aria-current="true"]{background:linear-gradient(90deg,var(--color-primary),var(--accent));box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent)}
.hidden{display:none !important}
.form-group{display:block}
.form-row{display:flex;gap:12px}
.form-row>.form-group{flex:1}
.form-hint{font-size:12px;color:var(--muted);margin-top:6px}
.form-error{font-size:13px;color:var(--danger);margin:6px 0}

/* Responsive */
@media (max-width: 1024px){
	.grid{grid-template-columns:repeat(12,1fr)}
	.col-8{grid-column:span 12}
	.col-4{grid-column:span 12}
	.col-3{grid-column:span 6}
}
@media (max-width: 768px){
	.layout{grid-template-columns:1fr}
	.sidebar{position:fixed;left:0;top:58px;height:calc(100vh - 80px);transform:translateX(-100%);transition:transform .2s ease;z-index:25;width:260px;box-shadow:var(--shadow-md)}
	.sidebar.open{transform:translateX(0)}
	#menuToggle{display:inline-flex}

    .form-row{flex-direction:column}
    .slide{aspect-ratio:16/9}
    .slide__title{font-size:22px}
    .slide__content{left:16px;right:16px;bottom:16px;max-width:unset}
	.col-3{grid-column:span 12;width:100%;min-width:0;max-width:100%}
    .navbar{position:sticky;top:0;padding:8px 12px;width:100%;max-width:100vw;box-sizing:border-box;overflow:hidden}
    .navbar__left,.navbar__right{gap:6px;flex-wrap:wrap}
    .navbar__left{flex:1;min-width:0}
    .navbar__right{flex-shrink:0}
    .main{padding:12px;width:100%;box-sizing:border-box;max-width:100vw}
    .thumb-card{aspect-ratio:16/10}
    .banner{aspect-ratio:21/9}
    .grid{gap:12px;padding:0;width:100%;max-width:100%}
    .slider{border-radius:12px;margin:0;width:100%}
    .slider-container{height:250px;border-radius:12px}
    .slider-dots{bottom:15px}
}

@media (max-width: 560px){
    .game-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
    .col-3{grid-column:span 6}
    .main{padding:8px}
    .grid{gap:8px}
}
@media (max-width: 380px){
    .game-grid{grid-template-columns:repeat(1, minmax(0,1fr));gap:10px}
    .col-3{grid-column:span 12}
    .slide{aspect-ratio:4/3}
    .thumb-card{aspect-ratio:3/2}
    .banner{aspect-ratio:16/9}
}