@font-face{
  font-family:'Fredoka';
  src:url('/assets/fonts/fredoka-var.woff2') format('woff2');
  font-weight:300 700;
  font-stretch:75% 125%;
  font-display:swap;
}

:root{
  --bg:#0f1020; --bg2:#171933; --card:#1c1f3d; --card-hover:#252a52;
  --text:#e9e9f4; --muted:#8a8db0; --accent:#00e5a8; --accent2:#ff5c8a;
  --border:#2a2e57;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{
  margin:0;
  font-family:'Fredoka',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:300;
  background:radial-gradient(1200px 600px at 50% -10%,#1b1e42 0,var(--bg) 60%);
  color:var(--text);
  min-height:100vh;
  padding-top:var(--topbar-h,73px); /* room for the fixed topbar */
}

/* top bar — fixed so it never scrolls away */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;
  background:rgba(15,16,32,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--text)}
.brand-mark{height:48px;width:auto;display:block}
/* two-line square wordmark: croko over cat, cat scaled to match croko's width */
.brand-name{display:flex;flex-direction:column;font-weight:700;line-height:.82}
.brand-name .l1{font-size:1.41rem}
.brand-name .l2{font-size:2.26rem;color:var(--accent)}

.topbar-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--muted);cursor:pointer;
  transition:color .14s ease,border-color .14s ease,background .14s ease;
}
.icon-btn:hover{color:var(--text);border-color:var(--accent);background:var(--card-hover)}

/* layout */
.container{max-width:1100px;margin:0 auto;padding:28px 20px 80px}
/* bento grid — FIXED cell size (no fluid scaling). Cell 100px, gap 16px.
   Fixed tile display sizes (w×h):
     rect small     = 3×2 cells → 332×216
     square small   = 2×2 cells → 216×216
     rect feature   = 6×4 cells → 680×464
     square feature = 4×4 cells → 464×464 */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,100px);
  grid-auto-rows:100px;
  grid-auto-flow:dense;
  gap:16px;
  justify-content:center;
}
.card{grid-column:span 3;grid-row:span 2}                        /* rectangular, normal */
.card--square{grid-column:span 2;grid-row:span 2}                /* square, normal */
.card--feature{grid-column:span 6;grid-row:span 4}               /* rectangular, featured */
.card--feature.card--square{grid-column:span 4;grid-row:span 4}  /* square, featured */

/* mobile: 2 fluid columns. Tile height is driven by aspect-ratio (not a fixed
   vw row height) so proportions match desktop/cover art exactly:
   rectangular tiles = 8:5 (cover art 1280×800), square tiles = 1:1 (1024×1024). */
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:12px;justify-content:stretch;align-items:start}
  .container{padding:20px 14px 64px}
  .card{grid-column:span 2;grid-row:auto;aspect-ratio:8/5}                      /* full-width landscape banner */
  .card--square{grid-column:span 1;grid-row:auto;aspect-ratio:1/1}             /* half-width square */
  .card--feature{grid-column:span 2;grid-row:auto;aspect-ratio:8/5}            /* full-width landscape banner */
  .card--feature.card--square{grid-column:span 2;grid-row:auto;aspect-ratio:1/1}  /* full-width square */
}

/* landscape phones: wide but SHORT viewport — the desktop fixed-cell grid would render
   feature tiles (680×464) taller than the screen. Same fluid approach as mobile, but
   4 columns; aspect-ratio keeps proportions, and no tile exceeds the viewport height. */
@media (min-width:641px) and (max-height:520px) and (orientation:landscape){
  .grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:12px;justify-content:stretch;align-items:start}
  .container{padding:16px 14px 48px}
  .card{grid-column:span 2;grid-row:auto;aspect-ratio:8/5}                        /* half-width banner */
  .card--square{grid-column:span 1;grid-row:auto;aspect-ratio:1/1}               /* quarter-width square */
  .card--feature{grid-column:span 2;grid-row:auto;aspect-ratio:8/5}              /* half-width banner */
  .card--feature.card--square{grid-column:span 1;grid-row:auto;aspect-ratio:1/1} /* quarter-width square */
}

/* card — cover-first tile (à la crazygames): only the cover shows, name reveals on hover */
.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:14px;overflow:hidden;
  border:2px solid transparent;
  background:var(--card);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(0,229,168,.25);
}
.card.soon{cursor:default}

/* thumb fills the whole tile regardless of its span */
.thumb{
  position:absolute;inset:0;
  background:#141631 center/cover no-repeat;
}
.thumb-emoji{display:grid;place-items:center;font-size:3.4rem;
  background:linear-gradient(135deg,#232752,#141631)}
.card--feature .thumb-emoji{font-size:5rem}

/* name bar hidden by default, slides up on hover */
.hover-name{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 12px;
  background:linear-gradient(transparent, rgba(8,9,20,.92));
  transform:translateY(100%);opacity:0;
  transition:transform .16s ease, opacity .16s ease;
}
.hover-name span{font-weight:700;font-size:1.05rem;letter-spacing:.2px}
.card:hover .hover-name{transform:translateY(0);opacity:1}

.badge{
  position:absolute;top:10px;right:10px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;border-radius:999px;
  backdrop-filter:blur(4px);
}
.badge.soon{background:rgba(58,63,107,.85);color:#c7cbe8}

/* corner ribbon — one per tile, priority New > Updated > Featured (decided in build.mjs).
   A square box pinned to the tile's top-left clips a band rotated -45° across the corner;
   the card's own overflow:hidden + radius keep the ends tucked under the rounded edge. */
.ribbon{
  position:absolute;top:0;left:0;width:92px;height:92px;
  overflow:hidden;pointer-events:none;z-index:2;
}
.ribbon span{
  position:absolute;left:-36px;top:21px;
  display:block;width:146px;padding:4px 0;
  transform:rotate(-45deg);
  text-align:center;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;line-height:1.35;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
/* White label on all three, so the tones are deep enough to carry it — white on the old
   mint/amber sat at 1.6:1 contrast and smeared. These clear ~3.6:1 at the light end. */
.ribbon--new span{background:linear-gradient(135deg,#00a878,#00784f);color:#fff}
.ribbon--updated span{background:linear-gradient(135deg,#f06f0c,#c2410c);color:#fff}
.ribbon--featured span{background:linear-gradient(135deg,#ff6eaf,#ff186e);color:#fff}

/* feature tiles are ~2× the size — scale the ribbon so it stays proportional */
.card--feature .ribbon{width:118px;height:118px}
.card--feature .ribbon span{left:-40px;top:28px;width:170px;padding:5px 0;font-size:.72rem}

@media (max-width:640px){
  .ribbon,.card--feature .ribbon{width:78px;height:78px}
  .ribbon span,.card--feature .ribbon span{
    left:-33px;top:17px;width:130px;padding:3px 0;font-size:.56rem;letter-spacing:.5px;
  }
}

/* footer */
.site-footer{text-align:center;color:var(--muted);font-size:.85rem;padding:24px}
.site-footer a{color:var(--accent);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-links{margin:0 0 8px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--accent)}

/* ---------- game page SEO content ---------- */
.crk-content{max-width:820px;margin:0 auto;padding:28px 20px 80px;line-height:1.65}
.crk-home{border-top:1px solid var(--border);margin-top:20px}
.crk-home>h2:first-child{font-size:1.5rem;margin:6px 0 14px}
.crk-content a{color:var(--accent);text-decoration:none}
.crk-content a:hover{text-decoration:underline}
.crk-content p{margin:0 0 14px}
.crk-muted{color:var(--muted)}
.crk-crumbs{color:var(--muted);font-size:.82rem;margin-bottom:14px}
.crk-crumbs span{color:var(--muted)}
.crk-head h1{font-size:2rem;margin:0 0 4px}
.crk-byline{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.crk-rate{display:flex;align-items:center;gap:8px;font-weight:700}
.crk-stars{color:#ffd54a;letter-spacing:2px}
.crk-lead{margin:18px 0 6px}
.crk-about{max-height:0;overflow:hidden;transition:max-height .35s ease}
.crk-about.open{max-height:4000px}
.crk-more{margin:6px 0 0;background:transparent;border:1px solid var(--border);color:var(--accent);
  border-radius:8px;padding:7px 14px;font:inherit;cursor:pointer}
.crk-more:hover{border-color:var(--accent)}
.crk-sec{margin:30px 0}
.crk-sec h2{font-size:1.3rem;margin:0 0 12px}
.crk-list{margin:0 0 14px;padding-left:20px}
.crk-list li{margin:6px 0}
/* "More free online games" — full-catalog text links, two-up on wide screens */
.crk-linklist{list-style:none;margin:0;padding:0;display:grid;gap:8px 22px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));font-size:.95rem}
.crk-linklist li{margin:0;color:var(--muted)}
.crk-linklist a{font-weight:600}
.crk-controls{display:grid;gap:8px;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;margin-top:6px}
.crk-controls b{color:var(--text)}
.crk-tablewrap{overflow-x:auto}
.crk-table{width:100%;border-collapse:collapse;font-size:.95rem}
.crk-table th,.crk-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.crk-table th{color:var(--muted);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.4px}
.crk-likes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.crk-lcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;transition:.14s}
.crk-lcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.crk-lthumb{aspect-ratio:16/10;background:#141631 center/cover no-repeat;display:grid;place-items:center;font-size:1.8rem}
.crk-lcard span{display:block;padding:9px 11px;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crk-facts{display:grid;grid-template-columns:1fr;gap:0;margin:0;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.crk-fact{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.crk-fact:last-child{border-bottom:0}
.crk-fact dt{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.4px;margin:0}
.crk-fact dd{margin:0}
.crk-chips{display:flex;flex-wrap:wrap;gap:8px}
.crk-chip{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.85rem;color:var(--muted)}
.crk-qa{margin:0 0 16px}
.crk-qa h3{font-size:1.02rem;margin:0 0 4px}
@media (max-width:560px){
  .crk-fact{grid-template-columns:1fr;gap:2px}
  .crk-head h1{font-size:1.6rem}
}

/* game loading overlay — dot wave on dark background */
.game-loader{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(1200px 600px at 50% -10%,#1b1e42 0,var(--bg) 60%);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.game-loader.is-visible{opacity:1;visibility:visible}
.game-loader .dot-wave{display:flex;gap:10px}
.game-loader .dot-wave span{
  width:14px;height:14px;border-radius:50%;background:var(--accent);
  animation:dot-wave 1s ease-in-out infinite;
}
.game-loader .dot-wave span:nth-child(2){animation-delay:.12s}
.game-loader .dot-wave span:nth-child(3){animation-delay:.24s}
.game-loader .dot-wave span:nth-child(4){animation-delay:.36s}
.game-loader .dot-wave span:nth-child(5){animation-delay:.48s}
.game-loader .loader-label{
  color:var(--muted);font-size:.95rem;letter-spacing:.3px;
}
@keyframes dot-wave{
  0%,60%,100%{transform:translateY(0);opacity:.55}
  30%{transform:translateY(-16px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .game-loader .dot-wave span{animation-duration:1.6s}
}

/* ---- category pages ---- */
.cat-crumbs{margin:8px 2px 10px;color:var(--muted);font-size:.9rem}
.cat-crumbs a{color:var(--muted);text-decoration:none}
.cat-crumbs a:hover{color:var(--accent)}
.cat-heading{font-size:1.45rem;font-weight:600;margin:2px 2px 18px}
.cat-nav{margin:28px 2px 6px}
a.crk-chip{text-decoration:none;transition:border-color .15s ease,color .15s ease}
a.crk-chip:hover{border-color:var(--accent);color:var(--accent)}