/* ============ H5 Platform — site styles ============ */
:root{
  --brand:#6366f1; --brand-2:#8b5cf6;
  --bg:#0f1115; --surface:#171a21; --surface-2:#1f232d; --border:#2a2f3a;
  --text:#e8eaf0; --muted:#9aa3b2; --radius:14px; --maxw:1120px;
  --shadow:0 6px 24px rgba(0,0,0,.28);
}
[data-theme="indigo"]{--brand:#6366f1;--brand-2:#8b5cf6}
[data-theme="emerald"]{--brand:#10b981;--brand-2:#059669}
[data-theme="rose"]{--brand:#f43f5e;--brand-2:#e11d48}
[data-theme="amber"]{--brand:#f59e0b;--brand-2:#d97706}
[data-theme="sky"]{--brand:#0ea5e9;--brand-2:#0284c7}
[data-theme="violet"]{--brand:#a855f7;--brand-2:#7c3aed}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,17,21,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header__inner{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand__logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));font-weight:900}
.brand__name{font-size:1.05rem}
.search{margin-left:auto;display:flex;align-items:center;background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;overflow:hidden}
.search input{background:transparent;border:0;color:var(--text);padding:9px 14px;width:180px;outline:none}
.search button{background:transparent;border:0;color:var(--muted);padding:0 12px;cursor:pointer;font-size:1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;
  border:1px solid transparent;border-radius:11px;padding:10px 18px;font-weight:700;font-size:.95rem;
  transition:transform .08s ease,filter .15s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.btn--lg{padding:14px 26px;font-size:1.05rem}

/* hero */
.hero{padding:54px 0;text-align:center;background:
  radial-gradient(1200px 300px at 50% -60px,color-mix(in srgb,var(--brand) 26%,transparent),transparent)}
.hero--site{padding:40px 0 24px}
.hero__title{font-size:clamp(1.7rem,4vw,2.9rem);margin:0 0 10px;font-weight:900;letter-spacing:-.02em}
.hero__sub{color:var(--muted);max-width:640px;margin:0 auto 22px;font-size:1.08rem}

/* sections */
.section{padding:28px 0}
.section__title{font-size:1.35rem;margin:0 0 16px;font-weight:800}

/* grids */
.grid{display:grid;gap:16px}
.grid--games{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid__full{grid-column:1/-1}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .12s ease,border-color .12s ease;display:block}
.card:hover{transform:translateY(-4px);border-color:var(--brand)}
.card__body{padding:12px 14px}
.card__title{font-size:1rem;margin:0 0 6px;font-weight:700}
.card__desc{color:var(--muted);font-size:.88rem;margin:0 0 10px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.chip{display:inline-block;font-size:.72rem;font-weight:700;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 15%,transparent);padding:3px 9px;border-radius:999px}

/* thumbnails */
.game-card__thumb,.quiz-card__thumb{position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));overflow:hidden}
.quiz-card__thumb{aspect-ratio:16/9}
.thumb__initial{font-size:2.6rem;font-weight:900;color:#fff;opacity:.9}
.thumb__initial.big{font-size:4rem}
.game-card__play{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;color:#fff;
  background:rgba(0,0,0,.35);opacity:0;transition:opacity .15s}
.game-card:hover .game-card__play{opacity:1}
.quiz-card__q{position:absolute;right:10px;bottom:8px;font-size:2rem;font-weight:900;color:rgba(255,255,255,.5)}
.thumb--puzzle{background:linear-gradient(135deg,#8b5cf6,#6366f1)}
.thumb--action{background:linear-gradient(135deg,#f43f5e,#f59e0b)}
.thumb--classic{background:linear-gradient(135deg,#0ea5e9,#10b981)}
.thumb--arcade{background:linear-gradient(135deg,#f59e0b,#f43f5e)}

/* category nav */
.cat-nav{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0 18px}
.cat-nav__item{padding:7px 15px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border);font-weight:600;font-size:.9rem}
.cat-nav__item.is-active,.cat-nav__item:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* layout with sidebar */
.layout-with-aside{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:960px){.layout-with-aside{grid-template-columns:1fr 300px}}
.aside{display:flex;flex-direction:column;gap:18px}

/* game stage */
.game-stage__frame{position:relative;aspect-ratio:16/10;background:#000;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--border)}
.game-stage__frame iframe{width:100%;height:100%;border:0;display:block}
.game-stage__poster{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.game-stage__poster h1{margin:0;color:#fff}
.game-meta{display:flex;align-items:center;gap:14px;padding:16px 0;flex-wrap:wrap}
.game-meta__title{font-size:1.4rem;margin:0;font-weight:800}
.game-meta__title+.chip{margin-right:auto}

/* breadcrumb */
.breadcrumb{padding:16px 0 4px;color:var(--muted);font-size:.9rem}
.breadcrumb a{color:var(--brand)}

/* prose */
.prose h2{font-size:1.25rem;margin:1.2em 0 .5em}
.prose p{color:var(--muted)}

/* ===== ADS ===== */
.ad-wrap{margin:20px 0}
.ad{margin:0 auto;text-align:center}
.ad__tag{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ad--placeholder{border:1px dashed var(--border);border-radius:12px;background:
  repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(255,255,255,.02) 12px,rgba(255,255,255,.02) 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted)}
.ad__label{font-weight:700;color:var(--muted)}
.ad--header{border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.quiz__screen{text-align:center}
.quiz__title{font-size:1.6rem;margin:.2em 0}
.quiz__count{font-weight:700;color:var(--brand)}
.quiz__progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:14px}
.quiz__progress-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .3s}
.quiz__meta{display:flex;justify-content:space-between;color:var(--muted);font-weight:700;font-size:.9rem;margin-bottom:14px}
.quiz__question{font-size:1.3rem;margin:.4em 0 1em;text-align:left}
.quiz__options{display:grid;gap:12px;text-align:left}
.quiz__option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface-2);cursor:pointer;font-weight:600;transition:all .12s}
.quiz__option:hover{border-color:var(--brand)}
.quiz__option .k{width:26px;height:26px;border-radius:7px;background:var(--bg);display:grid;place-items:center;font-weight:800;flex:none}
.quiz__option.correct{border-color:#10b981;background:color-mix(in srgb,#10b981 18%,transparent)}
.quiz__option.wrong{border-color:#f43f5e;background:color-mix(in srgb,#f43f5e 18%,transparent)}
.quiz__option.disabled{pointer-events:none;opacity:.85}
.quiz__explain{margin-top:16px;padding:14px;border-radius:10px;background:var(--surface-2);
  border-left:3px solid var(--brand);text-align:left;color:var(--muted)}
.quiz__explain.show{display:block}
.quiz__score-big{font-size:3.4rem;font-weight:900;color:var(--brand)}
.quiz__verdict{color:var(--muted);font-size:1.1rem}
.quiz__screen [data-action="next"],.quiz__screen [data-el="next"]{margin-top:18px}
.quiz__screen--ad{padding:10px 0}

/* footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:26px 0;color:var(--muted)}
.site-footer__nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.site-footer__nav a:hover{color:var(--brand)}

/* =========================================================
   ARCADE v2 — yourwebgame-style game grid, hero & player
   ========================================================= */

/* Hero banner */
.hero-arcade{position:relative;border-radius:18px;overflow:hidden;margin:18px 0 22px;
  display:flex;align-items:flex-end;isolation:isolate}
.hero-arcade::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);background-size:cover;background-position:center;filter:saturate(1.1)}
.hero-arcade::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,12,16,.92) 0%,rgba(10,12,16,.72) 45%,rgba(10,12,16,.25) 100%)}
.hero-arcade__inner{padding:26px 30px;max-width:600px}
.hero-arcade__eyebrow{display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.05em;
  color:#fff;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;margin-bottom:12px}
.hero-arcade__title{font-size:clamp(1.6rem,3.4vw,2.6rem);margin:0 0 8px;font-weight:900;letter-spacing:-.02em;color:#fff}
.hero-arcade__desc{color:#cbd2df;margin:0 0 18px;font-size:1rem;max-width:460px}

/* Category sections */
.cat-section{margin:26px 0}
.cat-section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px}
.cat-section__head h2{margin:0;font-size:1.3rem;font-weight:800}
.cat-section__more{color:var(--brand);font-weight:700;font-size:.9rem;white-space:nowrap}

/* Game grid + cards */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}
@media(max-width:520px){.game-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px}}
.gcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.gcard:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.gcard__thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.gcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gcard:hover .gcard__thumb img{transform:scale(1.08)}
.gcard__thumb .thumb__initial{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.gcard__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,10,14,.5);
  opacity:0;transition:opacity .15s ease}
.gcard:hover .gcard__play{opacity:1}
.gcard__play-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 6px 18px rgba(0,0,0,.4);transform:scale(.8);transition:transform .15s}
.gcard:hover .gcard__play-btn{transform:scale(1)}
.gcard__badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#f43f5e,#f59e0b);
  color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.05em;padding:3px 8px;border-radius:6px}
.gcard__body{padding:9px 11px 11px}
.gcard__title{display:block;font-weight:700;font-size:.9rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard__cat{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}

/* Player page */
.player-layout{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
@media(min-width:980px){.player-layout{grid-template-columns:1fr 300px}}
.player{position:relative;background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--border);margin:0 auto;width:100%}
.player--landscape{aspect-ratio:16/10;max-width:900px}
.player--portrait{aspect-ratio:9/16;max-width:400px}
.player__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player__poster{position:absolute;inset:0;background-size:cover;background-position:center;display:grid;place-items:center}
.player__poster::before{content:"";position:absolute;inset:0;background:rgba(8,10,14,.6);backdrop-filter:blur(2px)}
.player__poster-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}
.player__title{color:#fff;margin:0;font-size:1.5rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.player__hint{color:#cbd2df;font-size:.82rem}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;flex-wrap:wrap}
.player-bar__info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Aside related games */
.player-aside{display:flex;flex-direction:column;gap:16px}
.aside-games{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px}
.aside-games__title{margin:0 0 12px;font-size:1rem}
.aside-games__list{display:flex;flex-direction:column;gap:10px}
.aside-game{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.86rem}
.aside-game img{width:64px;height:48px;object-fit:cover;border-radius:8px;flex:none}
.aside-game:hover{color:var(--brand)}

/* portal */
.site-card{position:relative;padding:20px}
.site-card__badge{position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px;color:#fff}
.site-card__badge--arcade{background:#6366f1}
.site-card__badge--quiz{background:#10b981}
.site-card__url{color:var(--brand);font-weight:700;font-size:.85rem}

/* V8: stable dark page background and game editorial layout */
html, body { background: var(--bg); }
body.game-page { background: var(--bg); color: var(--text); }
.game-page .container { max-width: 1120px; }
.game-page-layout { display:grid; grid-template-columns:1fr; gap:22px; }
.game-page-layout .player-main { width:100%; }
.game-page-layout .player { margin-left:0; }
.game-page-layout .player-aside { width:100%; }
.game-page-layout .aside-games { width:100%; }
.game-editorial { max-width:900px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; margin-top:10px; }
.game-editorial h2 { color:var(--text); margin-top:0; }
.game-editorial h3 { color:var(--text); margin-top:1.35em; }
.game-editorial p { color:var(--muted); line-height:1.75; }
.game-faq { margin:0; }
.game-faq dt { color:var(--text); font-weight:800; margin-top:14px; }
.game-faq dd { color:var(--muted); margin:6px 0 0 0; line-height:1.65; }
.game-page .site-header { background:rgba(8,10,14,.96); }
@media (max-width:700px){ .game-editorial{padding:18px;border-radius:14px;} }

.site-page{background:var(--bg);color:var(--text);min-height:100vh}.site-page main{min-height:60vh}


/* V9: related games belong below the editorial content, not beside the game. */
.game-page-layout { display:block; }
.game-page-layout .player-main { width:100%; }
.game-page-layout .player-aside { display:none !important; }
.game-editorial { width:100%; max-width:900px; }
.game-page .section + .section { margin-top:28px; }