/* Izzy's Arcade Locker — the 2026 redesign (Version 16).
   Loaded last, on top of the older styles. Ideas from the big game sites: a category sidebar (CrazyGames),
   picture-first tiles and a mosaic of big + small games (Poki), and "more games like this" under every game.
   No color-mix() anywhere: the owner's browser (Edge 92) doesn't support it. */

:root {
  --bg: #0b0d1e; --bg-2: #141731; --panel: #171a38; --panel-2: #1f2348; --line: #292e5c;
  --fg: #f5f6ff; --muted: #a6abd8; --dim: #6f74a8;
  --brand: #7c5cff; --brand-2: #22d3ee; --brand-3: #ff5c9d;
  --r-lg: 26px; --r-md: 18px;
}
body { background: radial-gradient(1200px 600px at 85% -10%, rgba(124, 92, 255, .22), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(34, 211, 238, .10), transparent 60%), #0b0d1e; background-attachment: fixed; }
.sky { display: none; }
#fx-bg { opacity: .5; }
#fx-spot { opacity: .6; }

/* ---------- top bar ---------- */
.topbar { background: rgba(11, 13, 30, .86); border-bottom: 1px solid rgba(124, 92, 255, .18); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 10px 30px -20px #000; }
.search input { border-radius: 999px; padding: 13px 44px 13px 42px; background: #15183a; border: 1px solid #2c3168; font-size: 1rem; }
.search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(124, 92, 255, .25); }
.iconbtn { border-radius: 999px; background: #15183a; border-color: #2c3168; }
.acct .btn.primary, #acct .btn.primary { background: linear-gradient(135deg, #8b6bff, #5b8cff); color: #fff; box-shadow: 0 8px 22px -8px rgba(124, 92, 255, .9); }

/* ---------- category sidebar on big screens (horizontal pills on phones) ---------- */
@media (min-width: 1000px) {
  .wrap { max-width: 1360px; }
  #hub:not([hidden]) { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 26px; align-items: start; }
  #hub > * { grid-column: 2; min-width: 0; }
  #hub > .topbar { grid-column: 1 / -1; }
  #hub > #chips {
    grid-column: 1; grid-row: 2 / span 6; position: sticky; top: 96px; flex-direction: column; gap: 4px; overflow: visible;
    margin: 0; padding: 14px 10px; background: rgba(20, 23, 49, .75); border: 1px solid #23285a; border-radius: var(--r-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  #hub > #chips .chip { width: 100%; justify-content: flex-start; border: 0; border-radius: 14px; padding: 11px 14px; font-size: .97rem; color: #c9cdf2; background: transparent; }
  #hub > #chips .chip small { margin-left: auto; }
  #hub > #chips .chip:hover { background: rgba(124, 92, 255, .14); color: #fff; transform: none; }
  #hub > #chips .chip[aria-pressed="true"] { background: linear-gradient(135deg, #7c5cff, #5b8cff); color: #fff; box-shadow: 0 8px 20px -10px rgba(124, 92, 255, 1); }
  #hub > #chips .chip[aria-pressed="true"] small { color: #fff; opacity: .8; }
  #hub > #chips::before { content: "Categories"; display: block; font: 700 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 4px 14px 10px; }
}
.chip { border-radius: 999px; }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, #7c5cff, #5b8cff); color: #fff; border-color: transparent; }
.chip[aria-pressed="true"] small { color: #fff; }

/* ---------- showcase (hero): full-picture background, text on top ---------- */
.hero { display: block; position: relative; min-height: clamp(320px, 36vw, 440px); border: 0; border-radius: var(--r-lg); background: #121530; overflow: hidden; margin-bottom: 26px; box-shadow: 0 30px 70px -40px #000; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 13, 30, .97) 0%, rgba(11, 13, 30, .82) 38%, rgba(11, 13, 30, .15) 75%, rgba(11, 13, 30, 0) 100%), linear-gradient(0deg, rgba(11, 13, 30, .7), transparent 40%); }
.hero-art.has-img { position: absolute; inset: 0; min-height: 0; z-index: 0; background: #121530; }
.hero-art .hero-img { -webkit-mask-image: none; mask-image: none; opacity: 1; object-position: 70% 50%; }
.hero-art.has-img .big { display: none; }
.hero-copy { position: relative; z-index: 2; max-width: 560px; padding: clamp(26px, 4vw, 48px); gap: 14px; }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); background: none; -webkit-text-fill-color: #fff; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hero p { color: #d3d6f5; font-size: 1.05rem; }
.hero .eyebrow { color: var(--hc, var(--brand-2)); font-weight: 700; }
.hero-actions .btn.primary { background: var(--hc, var(--brand)); color: #0b0c1a; padding: 14px 28px; font-size: 1.05rem; }
.hero-stats { margin-top: 2px; }
.hero-dots { display: flex; gap: 8px; margin-top: 6px; }
.hero-dots button { width: 26px; height: 6px; border-radius: 99px; border: 0; padding: 0; background: rgba(255, 255, 255, .28); transition: width .3s, background .3s; }
.hero-dots button[aria-selected="true"] { width: 46px; background: #fff; }
.hero-copy { animation: heroIn .55s var(--ease) both; }
@keyframes heroIn { from { opacity: 0; transform: translateX(-18px); } }
@media (max-width: 720px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-art.has-img { position: relative; order: -1; min-height: 200px; }
  .hero::after { display: none; }
  .hero-art.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #121530 0%, rgba(18, 21, 48, 0) 60%); }
  .hero-copy { margin-top: -6px; padding-top: 0; }
  .hero h1 { font-size: 2.3rem; }
}

/* ---------- trending mosaic (Poki-style): 18 tiles = 2 big + 16 small, always filling whole rows ---------- */
.mz { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 11vw, 160px); grid-auto-flow: dense; gap: 14px; }
@media (max-width: 900px) { .mz { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.home-all #hub > .section-head { display: none; }

/* row arrows (computers) */
.row-arrow { display: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2c3168; background: #15183a; color: #fff; font-size: 1.3rem; line-height: 1; padding: 0 0 3px; }
.row-arrow:hover { background: #7c5cff; border-color: #7c5cff; }
@media (pointer: fine) { .row-arrow { display: inline-grid; place-items: center; } .shelf-head .row-arrow:first-of-type { margin-left: auto; } .shelf-head .row-arrow + .see-all, .shelf-head .row-arrow ~ .see-all { margin-left: 4px; } }

/* fullscreen: the game fills the screen */
.stage:fullscreen { display: grid; place-items: center; border-radius: 0; border: 0; padding: 12px; overflow: auto; }
.stage:-webkit-full-screen { display: grid; place-items: center; border-radius: 0; border: 0; padding: 12px; }
.stage:fullscreen #area { width: 100%; }
.stage:fullscreen .cv, .stage:fullscreen .rt-cv { max-height: calc(100vh - 30px); }
.stage:fullscreen .pool-wrap { max-width: calc((100vh - 170px) * 1.85); margin: 0 auto; }
.mz-t { position: relative; border: 0; padding: 0; border-radius: var(--r-md); overflow: hidden; background: #1b1e3d; box-shadow: 0 10px 22px -14px #000; transition: transform .25s var(--spring), box-shadow .25s; }
.mz-t.big { grid-column: span 2; grid-row: span 2; }
.mz-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); transition: transform .5s var(--ease); }
.mz-t:hover, .mz-t:focus-visible { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 3px var(--c), 0 20px 36px -14px #000; z-index: 2; outline: none; }
.mz-t:hover img { transform: scale(1.38); }
.mz-n { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 12px 10px; text-align: left; font-weight: 800; font-size: .95rem; color: #fff; background: linear-gradient(transparent, rgba(8, 9, 24, .94)); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.mz-t:hover .mz-n, .mz-t:focus-visible .mz-n, .mz-t.big .mz-n { opacity: 1; transform: none; }
.mz-t.big .mz-n { font-size: 1.3rem; padding: 40px 16px 14px; }
.mz-new { position: absolute; top: 9px; left: 9px; z-index: 1; padding: 3px 9px; border-radius: 99px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1a1100; background: linear-gradient(135deg, #ffe07a, #ffb347); }
@media (hover: none) { .mz-n { opacity: 1; transform: none; } }
@media (max-width: 520px) { .mz { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; } }

/* ---------- game cards: picture first, cleaner ---------- */
.card-main { border-radius: var(--r-md); background: #171a38; border: 1px solid #23285a; box-shadow: 0 10px 24px -18px #000; }
.card-main:hover, .card-main:focus-visible { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 18px 34px -16px #000; }
.thumb.has-img { height: auto; aspect-ratio: 16 / 10; }
.meta { padding: 11px 13px 13px; }
.meta h3 { font-size: 1.02rem; }
.meta p { -webkit-line-clamp: 1; line-clamp: 1; }
.foot { margin-top: 2px; }
.shelf-head h3 { font-size: 1.35rem; }
.shelf-head span { display: none; }
.see-all { color: #b9a8ff; }
.shelves { gap: 34px; }
.section-head h2 { font-size: 1.05rem; color: var(--muted); }

/* ---------- today + panels ---------- */
.daily, .me-card, .panel { border-radius: var(--r-lg); }
.daily { border-color: #2a2f62; }

/* ---------- play screen ---------- */
.stage { border-radius: var(--r-lg); }
.recs { margin-top: 30px; }
.recs:empty { display: none; }

/* ---------- startup animation (v18): sleek and grown-up, about 2 seconds ----------
   The logo fades in sharp, the name wipes in, a soft light sweeps across it, then it all lifts away. */
html.intro #fx-intro {
  background: radial-gradient(900px 500px at 50% 45%, #1a1840 0%, #0b0d1e 60%, #06070f 100%);
  gap: 0; animation: iOut .55s 1.85s cubic-bezier(.6, 0, .3, 1) forwards;
}
.i2 { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 28px); animation: i2Lift .55s 1.85s cubic-bezier(.6, 0, .3, 1) forwards; }
.i2-mark .lmark { font-size: clamp(64px, 11vw, 104px); animation: i2Mark .9s cubic-bezier(.2, .8, .2, 1) both; }
.i2-mark .lmark::before { box-shadow: 0 0 .5em rgba(124, 92, 255, .35); }
.i2-word { display: grid; line-height: 1; }
.i2-small { font: 700 clamp(.7rem, 1.4vw, .9rem) var(--mono); letter-spacing: .5em; text-transform: uppercase; color: #a6abd8; margin-bottom: .55em; animation: i2Fade .6s .45s ease-out both; }
.i2-big {
  position: relative; font: 800 clamp(2rem, 6.4vw, 4.2rem) var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: linear-gradient(100deg, #fff 0%, #fff 40%, #c9b8ff 50%, #fff 60%, #fff 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: i2Wipe .75s .35s cubic-bezier(.7, 0, .2, 1) both, i2Sheen 1.1s .95s ease-in-out both;
}
.i2-big em { font-style: normal; background: linear-gradient(100deg, #ff5c9d, #ff8fb8 50%, #ff5c9d) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: i2Sheen 1.1s .95s ease-in-out both; }
.i2-line { position: absolute; left: 50%; bottom: 18%; width: min(220px, 40vw); height: 2px; margin-left: max(-110px, -20vw); background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; animation: i2Fade .4s .2s both; }
.i2-line i { display: block; height: 100%; background: linear-gradient(90deg, #7c5cff, #22d3ee); transform-origin: 0 50%; animation: iLoad 1.6s .2s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes i2Mark { from { opacity: 0; transform: scale(.86); filter: blur(10px); } }
@keyframes i2Fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes i2Wipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes i2Sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes i2Lift { to { transform: translateY(-14px) scale(.98); opacity: 0; } }
@media (max-width: 560px) { .i2 { flex-direction: column; text-align: center; } .i2-word { justify-items: center; } .i2-small { letter-spacing: .35em; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid #23285a; color: var(--dim); }