/* ============================================================
   PLAYGROUND — shared design system
   Used by index.html AND every page in /games/*.html
   Neo-brutalist, white background, bold black type, colour pops.
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --paper-soft:#f6f5f1;
  --line:#111111;
  --gray:#6b6b6b;
  --gray-light:#e7e5e0;

  --c-orange:#ff8a3d;
  --c-red:#ff5a5f;
  --c-purple:#6c5ce7;
  --c-green:#27c281;
  --c-blue:#4a90e2;
  --c-pink:#ff2d78;
  --c-teal:#00c2a8;
  --c-yellow:#ffc93c;
  --c-indigo:#4f5bd5;
  --c-lime:#8bc53f;
  --c-rose:#ff5c8a;
  --c-amber:#ffa63d;
  --c-mocha:#8a5a3c;
  --c-tomato:#e6472e;
  --c-crimson:#7a1020;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;

  /* neo-brutalist hard-edge shadows (signature look) */
  --shadow-hard:4px 4px 0 var(--line);
  --shadow-hard-lg:8px 8px 0 var(--line);
  --shadow-hover:2px 2px 0 var(--line);

  /* soft ambient shadows layered underneath for realistic depth */
  --shadow-ambient-sm:0 1px 2px rgba(10,10,10,.05), 0 4px 10px rgba(10,10,10,.06);
  --shadow-ambient-md:0 2px 6px rgba(10,10,10,.06), 0 12px 28px -8px rgba(10,10,10,.16);
  --shadow-ambient-lg:0 4px 12px rgba(10,10,10,.08), 0 24px 48px -16px rgba(10,10,10,.22);

  /* combined depth: hard brutalist edge + soft realistic falloff */
  --depth-card:var(--shadow-hard-lg), var(--shadow-ambient-md);
  --depth-card-hover:12px 12px 0 var(--line), var(--shadow-ambient-lg);
  --depth-btn:var(--shadow-hard), var(--shadow-ambient-sm);
  --depth-btn-hover:var(--shadow-hard-lg), var(--shadow-ambient-md);

  --ease:cubic-bezier(.2,.9,.3,1.3);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.22,1,.36,1);
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* subtle film-grain texture over the whole site for a more premium, tactile feel.
   Fixed + low-opacity + blend-mode so it costs essentially nothing to paint. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
input,select,textarea{ font-family:inherit; }

::selection{ background:var(--c-yellow); color:var(--ink); }

/* scrollbar flair */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--paper-soft); }
::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:10px; border:3px solid var(--paper-soft); }

/* ---------- utility ---------- */
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px;
  background:var(--paper);
  border:2.5px solid var(--line);
  border-radius:100px;
  font-weight:700;
  font-size:15px;
  box-shadow:var(--depth-btn);
  transition:transform .18s var(--ease-spring), box-shadow .18s var(--ease-smooth), background .2s;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn[hidden]{ display:none; }
/* glossy top highlight + diagonal shine sweep on hover, for a more tactile/premium button feel */
.btn::before{
  content:"";
  position:absolute; inset:0 0 50% 0; border-radius:100px 100px 0 0;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0));
  pointer-events:none; z-index:1;
}
.btn::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .5s var(--ease-smooth);
  pointer-events:none; z-index:1;
}
.btn:hover::after{ left:130%; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--depth-btn-hover); }
.btn:active{ transform:translate(1px,1px) scale(.98); box-shadow:var(--shadow-hover); transition-duration:.08s; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-accent{ background:var(--c-yellow); }
.btn-sm{ padding:8px 14px; font-size:13px; border-width:2px; }
.btn-icon{ padding:10px; border-radius:50%; width:42px; height:42px; justify-content:center; }

/* ---------- top nav shared across all pages ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:2.5px solid var(--line);
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1200px; margin:0 auto;
  gap:16px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:20px; letter-spacing:-.02em;
  cursor:pointer; user-select:none;
}
.logo .logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:radial-gradient(circle at 30% 25%, #9a8cf2, var(--c-purple) 60%, #5a4bd6);
  border:2.5px solid var(--line);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.18), var(--shadow-ambient-sm);
  transform:rotate(-6deg);
  transition:transform .35s var(--ease-spring);
  font-size:18px;
}
.logo:hover .logo-mark{ transform:rotate(6deg) scale(1.1); }
.logo.spin .logo-mark{ animation:spin720 .6s var(--ease-spring); }
@keyframes spin720{ to{ transform:rotate(360deg) scale(1.2); } }

.nav-actions{ display:flex; align-items:center; gap:10px; }

/* ---------- hero ---------- */
.hero{ text-align:center; padding:72px 24px 36px; }
.hero h1{
  font-size:clamp(40px,7vw,76px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.02;
}
.hero h1 .highlight{
  position:relative;
  display:inline-block;
  color:var(--ink);
}
.hero h1 .highlight::after{
  content:"";
  position:absolute; left:-2%; right:-2%; bottom:6%; height:.3em;
  background:var(--c-yellow); z-index:-1;
  transform:rotate(-1deg);
}
.hero p.sub{
  margin:18px auto 0;
  max-width:560px;
  font-size:18px;
  color:var(--gray);
  font-weight:500;
}

/* ---------- search ---------- */
.search-wrap{
  max-width:640px; margin:32px auto 0;
  display:flex; gap:10px; align-items:center;
  position:relative;
}
.search-input{
  flex:1;
  padding:16px 20px 16px 48px;
  border:2.5px solid var(--line);
  border-radius:100px;
  font-size:16px; font-weight:600;
  background:var(--paper);
  box-shadow:var(--depth-btn);
  transition:box-shadow .25s var(--ease-smooth), transform .25s var(--ease-smooth);
}
.search-input:focus{
  outline:none;
  box-shadow:var(--depth-btn-hover), 0 0 0 4px color-mix(in srgb, var(--c-yellow) 45%, transparent);
  transform:translate(-2px,-2px);
}
.search-icon{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  font-size:18px; pointer-events:none;
}

/* ---------- filter chips ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:26px auto 0; max-width:800px;
}
.chip{
  padding:9px 18px;
  border:2px solid var(--line);
  border-radius:100px;
  font-weight:700; font-size:13.5px;
  background:var(--paper);
  box-shadow:var(--shadow-ambient-sm);
  transition:all .2s var(--ease-spring);
}
.chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-ambient-md); }
.chip:active{ transform:translateY(0) scale(.96); }
.chip.active{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow-ambient-md); }

/* ---------- section titles ---------- */
.section{ padding:44px 24px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  max-width:1200px; margin:0 auto 20px;
  flex-wrap:wrap; gap:10px;
}
.section-head h2{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
.section-head .count{ color:var(--gray); font-weight:600; font-size:14px; }

/* ---------- card grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  max-width:1200px; margin:0 auto;
}
.recent-strip{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:6px;
  max-width:1200px; margin:0 auto;
  scrollbar-width:thin;
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:22px;
  background:linear-gradient(165deg, #ffffff, #fbfaf7);
  border:2.5px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--depth-card);
  transition:transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
  min-height:190px;
  cursor:pointer;
  overflow:hidden;
  will-change:transform;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 0%, var(--card-color,var(--c-yellow)), transparent 70%);
  opacity:0;
  transition:opacity .3s;
  z-index:0;
}
.card:hover{ transform:translate(-5px,-7px) rotate(-1deg); box-shadow:var(--depth-card-hover); }
.card:hover::before{ opacity:.14; }
.card:active{ transform:translate(0,0) rotate(0); box-shadow:var(--shadow-hover); transition-duration:.1s; }

.card-emoji{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  background:linear-gradient(155deg, color-mix(in srgb, var(--card-color,var(--c-yellow)) 70%, white), var(--card-color,var(--c-yellow)) 55%, color-mix(in srgb, var(--card-color,var(--c-yellow)) 80%, black));
  border:2.5px solid var(--line);
  border-radius:16px;
  margin-bottom:16px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,0,0,.14), 0 6px 14px -6px var(--card-color,var(--c-yellow));
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth);
  position:relative; z-index:1;
}
.card:hover .card-emoji{ transform:scale(1.12) rotate(8deg) translateY(-2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,0,0,.14), 0 12px 22px -8px var(--card-color,var(--c-yellow)); }
.card h3{ font-size:19px; font-weight:800; letter-spacing:-.01em; position:relative; z-index:1;}
.card p{ margin-top:6px; color:var(--gray); font-size:14px; font-weight:500; line-height:1.4; position:relative; z-index:1;}
.card .card-tag{
  margin-top:auto; padding-top:14px;
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink); position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
}
.card .card-tag span:last-child{ transition:transform .25s var(--ease-smooth); display:inline-block; }
.card:hover .card-tag span:last-child{ transform:translateX(4px); }
.card .fav-btn{
  position:absolute; top:16px; right:16px; z-index:2;
  background:none; border:none; font-size:20px;
  transition:transform .25s var(--ease-spring);
  filter:grayscale(1) opacity(.5);
}
.card .fav-btn:hover{ transform:scale(1.35) rotate(-12deg); }
.card .fav-btn.active{ filter:none; opacity:1; animation:favPop .4s var(--ease-spring); }
@keyframes favPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.5) rotate(-15deg); } 100%{ transform:scale(1); } }

.recent-card{
  flex:0 0 200px;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(165deg, #ffffff, #fbfaf7);
  box-shadow:var(--depth-btn);
  cursor:pointer;
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease-smooth);
}
.recent-card:hover{ transform:translateY(-4px); box-shadow:var(--depth-btn-hover); }
.recent-card .em{ font-size:24px; }
.recent-card .tt{ font-weight:700; font-size:13.5px; }

.empty-state{
  text-align:center; padding:50px 20px; color:var(--gray);
  font-weight:600; max-width:1200px; margin:0 auto;
}
.empty-state .big{ font-size:40px; margin-bottom:10px; }

/* ---------- footer ---------- */
.site-footer{
  border-top:2.5px solid var(--line);
  padding:34px 24px; margin-top:40px;
  text-align:center; color:var(--gray); font-weight:600; font-size:14px;
}
.site-footer .heart{ color:var(--c-red); }

/* ---------- game topbar (injected on game pages) ---------- */
.game-topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:2.5px solid var(--line);
  box-shadow:var(--shadow-ambient-sm);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; gap:14px;
}
.game-topbar .gt-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.game-topbar .gt-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.game-topbar .gt-title .em{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; border:2px solid var(--line); font-size:18px; flex:0 0 auto;
  background:linear-gradient(155deg, color-mix(in srgb, var(--gt-color,var(--c-yellow)) 65%, white), var(--gt-color,var(--c-yellow)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.14);
}
.game-topbar .gt-title h1{ font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-topbar .gt-right{ display:flex; align-items:center; gap:8px; }
.back-link{
  display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:14px; flex:0 0 auto;
  padding:8px 12px; border:2px solid var(--line); border-radius:100px;
  transition:transform .2s var(--ease-spring), background .2s;
}
.back-link:hover{ transform:translateX(-3px); background:var(--paper-soft); }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,120%) scale(.9);
  background:var(--ink); color:var(--paper);
  padding:14px 22px; border-radius:100px; font-weight:700; font-size:14px;
  box-shadow:var(--shadow-hard-lg), var(--shadow-ambient-lg);
  z-index:999; transition:transform .4s var(--ease-spring), opacity .3s;
  opacity:0;
  display:flex; align-items:center; gap:10px;
  max-width:90vw; text-align:center;
}
.toast.show{ transform:translate(-50%,0) scale(1); opacity:1; }

/* ---------- confetti ---------- */
.confetti-piece{
  position:fixed; top:-20px; z-index:9999; pointer-events:none;
  border-radius:2px;
}

/* ---------- misc animations ---------- */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.fade-up{ animation:fadeUp .55s var(--ease-smooth) both; animation-delay:var(--d, 0s); }

@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(0,0,0,.25); }
  100%{ box-shadow:0 0 0 14px rgba(0,0,0,0); }
}

/* rainbow mode easter egg */
body.rainbow-mode .logo .logo-mark{
  animation:rainbowBg 3s linear infinite;
}
@keyframes rainbowBg{
  0%{ background:#ff5a5f; } 20%{ background:#ffc93c; } 40%{ background:#27c281; }
  60%{ background:#4a90e2; } 80%{ background:#6c5ce7; } 100%{ background:#ff5a5f; }
}

/* responsive */
@media (max-width:640px){
  .hero{ padding:48px 18px 24px; }
  .hero h1{ font-size:clamp(32px,10vw,48px); }
  .site-header-inner{ padding:12px 16px; }
  .nav-actions .btn span.label{ display:none; }
  .section{ padding:30px 16px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
  .card{ padding:16px; min-height:150px; }

  .game-topbar{ padding:10px 12px; gap:8px; }
  .game-topbar .gt-right .btn span.label{ display:none; }
  .game-topbar .gt-right .btn{ padding:8px 10px; }
  .back-link .bl-text{ display:none; }
  .back-link{ padding:8px 10px; }
  .game-topbar .gt-title h1{ min-width:60px; font-size:14px; }
}