/* =========================================================
   GameKid — Khmer Learning Games
   Design tokens: krama-weave motif, temple palette, 3D animations
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Moul&family=Kantumruy+Pro:wght@400;500;600;700&display=swap');

:root{
  --paper:#FFF9EC;
  --paper-2:#FFF2D8;
  --ink:#1B2A4A;
  --ink-soft:#4B5A78;
  --red:#C0392B;
  --red-shadow:#8E291F;
  --gold:#F0B429;
  --gold-shadow:#B88718;
  --green:#1F9D77;
  --green-shadow:#146C51;
  --sky:#3E8FC4;
  --sky-shadow:#28648C;
  --purple:#8E44AD;
  --purple-shadow:#632E7B;
  --card-shadow: 0 10px 24px rgba(27,42,74,0.12), 0 2px 6px rgba(27,42,74,0.08);
  --card-shadow-3d: 0 18px 30px -8px rgba(27,42,74,0.2), 0 8px 12px -4px rgba(27,42,74,0.1);
  --radius: 20px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(240,180,41,0.12) 0, transparent 45%),
    radial-gradient(circle at 92% 85%, rgba(31,157,119,0.12) 0, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(62,143,196,0.05) 0, transparent 65%);
  color:var(--ink);
  font-family:'Kantumruy Pro', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Moul', serif;
  font-weight:400;
  color:var(--ink);
  letter-spacing:0.5px;
}
a{color:inherit;text-decoration:none;}

/* ---------- Krama weave — the signature motif ---------- */
.krama-bar{
  height:12px;
  width:100%;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 12px,
    var(--gold) 12px 24px,
    var(--ink) 24px 36px,
    var(--green) 36px 48px
  );
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.krama-bar.thin{height:6px;}

/* ---------- Top bar (used on every page) ---------- */
.topbar{
  background:var(--ink);
  color:var(--paper);
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.topbar a.back{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.25);
  padding:8px 16px;border-radius:999px;
  font-size:0.95rem;
  font-weight:600;
  transition:all .25s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.4);
  position:relative;
  overflow:hidden;
}
.topbar a.back:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.15) 100%);
  transform:translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 8px 15px rgba(0,0,0,0.2);
}
.topbar a.back:active{
  transform:translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.topbar .title{
  font-family:'Moul',serif;
  font-size:1.15rem;
  flex:1;
}
.topbar .emoji{font-size:1.4rem;}

/* ---------- Containers ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:28px 20px 60px;}
.game-wrap{max-width:760px;margin:0 auto;padding:32px 20px 60px;}

.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--card-shadow-3d);
  padding:26px;
  position:relative;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,0.8);
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 8px,var(--gold) 8px 16px,var(--green) 16px 24px);
}

/* ---------- 3D Ultra-Attractive Buttons ---------- */
.btn{
  font-family:'Kantumruy Pro',sans-serif;
  font-weight:700;
  border:none;
  border-radius:999px;
  padding:12px 28px;
  font-size:1.02rem;
  cursor:pointer;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background: linear-gradient(180deg, #ff5e57 0%, var(--red) 100%);
  --btn-shadow: var(--red-shadow);
  box-shadow: 
    inset 0 2px 2px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 6px 0 var(--btn-shadow),
    0 10px 20px rgba(0,0,0,0.18);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, filter 0.2s ease;
  overflow:hidden;
}
.btn::after{
  content:'';
  position:absolute;
  top:-50%;
  left:-75%;
  width:50%;
  height:200%;
  background:linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(25deg);
  transition:all 0.5s ease;
  pointer-events:none;
}
.btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.06);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 9px 0 var(--btn-shadow),
    0 16px 25px rgba(0,0,0,0.22);
}
.btn:hover::after{
  left:135%;
}
.btn:active{
  transform:translateY(4px) scale(0.98);
  box-shadow: 
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 2px 0 var(--btn-shadow),
    0 4px 10px rgba(0,0,0,0.15);
}

.btn-primary{
  background: linear-gradient(180deg, #ff5e57 0%, var(--red) 100%);
  --btn-shadow: var(--red-shadow);
  color:#fff;
}
.btn-gold{
  background: linear-gradient(180deg, #ffd32a 0%, var(--gold) 100%);
  --btn-shadow: var(--gold-shadow);
  color:var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.btn-green{
  background: linear-gradient(180deg, #05c46b 0%, var(--green) 100%);
  --btn-shadow: var(--green-shadow);
  color:#fff;
}
.btn-sky{
  background: linear-gradient(180deg, #0fbcf9 0%, var(--sky) 100%);
  --btn-shadow: var(--sky-shadow);
  color:#fff;
}
.btn-outline{
  background: linear-gradient(180deg, #ffffff 0%, #f1f2f6 100%);
  color:var(--ink);
  border:2px solid var(--ink);
  --btn-shadow: var(--ink-soft);
  box-shadow: 
    inset 0 2px 2px rgba(255,255,255,0.8),
    0 5px 0 var(--ink),
    0 8px 15px rgba(0,0,0,0.1);
  text-shadow:none;
}
.btn-outline:hover{
  background: linear-gradient(180deg, #ffffff 0%, #e4e7eb 100%);
  box-shadow: 
    inset 0 2px 2px rgba(255,255,255,0.9),
    0 8px 0 var(--ink),
    0 14px 22px rgba(0,0,0,0.15);
}

/* ---------- 3D Capsule Category Quick Filter Navigation Bar ---------- */
.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 40px;
  padding: 12px 28px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 12px 35px rgba(27, 42, 74, 0.08);
  border: none;
  width: fit-content;
  max-width: 95%;
}

.cat-filter-btn {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #edf0f5 100%);
  color: var(--ink);
  --filter-shadow: #cbd5e1;
  box-shadow: 
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    0 4.5px 0 var(--filter-shadow),
    0 8px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
  text-shadow: none;
}

.cat-filter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 
    inset 0 2px 2px rgba(255, 255, 255, 1),
    0 7.5px 0 var(--filter-shadow),
    0 12px 20px rgba(0, 0, 0, 0.09);
}

.cat-filter-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1.5px 0 var(--filter-shadow);
}

.cat-filter-btn.active {
  background: linear-gradient(180deg, #ffd32a 0%, var(--gold) 100%);
  color: var(--ink);
  --filter-shadow: var(--gold-shadow);
  box-shadow: 
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    0 5px 0 var(--gold-shadow),
    0 10px 20px rgba(240, 180, 41, 0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.cat-filter-btn.filter-math.active {
  background: linear-gradient(180deg, #ff5e57 0%, var(--red) 100%);
  color: #ffffff;
  --filter-shadow: var(--red-shadow);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.45), 0 5px 0 var(--red-shadow), 0 10px 20px rgba(192,57,43,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.cat-filter-btn.filter-khmer.active {
  background: linear-gradient(180deg, #05c46b 0%, var(--green) 100%);
  color: #ffffff;
  --filter-shadow: var(--green-shadow);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.45), 0 5px 0 var(--green-shadow), 0 10px 20px rgba(31,157,119,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.cat-filter-btn.filter-tools.active {
  background: linear-gradient(180deg, #0fbcf9 0%, var(--sky) 100%);
  color: #ffffff;
  --filter-shadow: var(--sky-shadow);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.45), 0 5px 0 var(--sky-shadow), 0 10px 20px rgba(62,143,196,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.cat-filter-btn.filter-brain.active {
  background: linear-gradient(180deg, #a55eea 0%, var(--purple) 100%);
  color: #ffffff;
  --filter-shadow: var(--purple-shadow);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.45), 0 5px 0 var(--purple-shadow), 0 10px 20px rgba(142,68,173,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ---------- 3D Animation Friendly Categories & Hub Grid ---------- */
.hero{
  text-align:center;
  padding:45px 20px 25px;
  perspective: 1000px;
}
.hero h1{font-size:2.4rem;margin:0 0 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.08);}
.hero p{color:var(--ink-soft);font-size:1.08rem;margin:0;}

.category{
  margin-top:35px;
  perspective: 1200px;
  position:relative;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.category-label{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Moul',serif;
  font-size:1.2rem;
  padding:10px 24px;border-radius:24px;
  color:#fff;
  margin-bottom:22px;
  cursor:pointer;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-shadow) 100%);
  --cat-shadow: var(--red-shadow);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.45),
    inset 0 -2px 4px rgba(0,0,0,0.2),
    0 7px 0 var(--cat-shadow, rgba(0,0,0,0.25)),
    0 14px 25px rgba(0,0,0,0.18);
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.category-label:hover{
  transform: translateY(-4px) rotateX(4deg) scale(1.03);
  filter: brightness(1.08);
  box-shadow: 
    inset 0 3px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.2),
    0 11px 0 var(--cat-shadow, rgba(0,0,0,0.25)),
    0 20px 30px rgba(0,0,0,0.22);
}
.category-label .cat-icon {
  display: inline-block;
  font-style: normal;
  animation: float3d 3.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px;
  perspective: 1200px;
}

.game-card{
  background:#ffffff;
  border-radius:24px;
  padding:22px;
  box-shadow: 
    0 10px 22px -5px rgba(27,42,74,0.08),
    0 4px 10px -2px rgba(27,42,74,0.04),
    inset 0 2px 0 rgba(255,255,255,0.9);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  border:2.5px solid rgba(230,225,215,0.85);
  transform-style: preserve-3d;
  position:relative;
  overflow:hidden;
  cursor: pointer;
}
.game-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--card-accent, var(--red)), var(--gold));
  border-radius: 24px 24px 0 0;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.game-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  opacity: 0.7;
}
.game-card:hover{
  transform: perspective(1000px) rotateX(6deg) rotateY(-3deg) translateY(-10px) translateZ(12px);
  box-shadow: 
    0 24px 38px -8px rgba(27,42,74,0.22),
    0 12px 16px -4px rgba(27,42,74,0.12),
    inset 0 1px 0 rgba(255,255,255,1);
  border-color:var(--card-accent, var(--gold));
}

/* Category-specific card accents */
.category[data-cat="math"] { --card-accent: var(--red); --card-btn-bg: linear-gradient(180deg, #ff5e57 0%, var(--red) 100%); --card-btn-shadow: var(--red-shadow); }
.category[data-cat="khmer"] { --card-accent: var(--green); --card-btn-bg: linear-gradient(180deg, #05c46b 0%, var(--green) 100%); --card-btn-shadow: var(--green-shadow); }
.category[data-cat="tools"] { --card-accent: var(--sky); --card-btn-bg: linear-gradient(180deg, #0fbcf9 0%, var(--sky) 100%); --card-btn-shadow: var(--sky-shadow); }
.category[data-cat="brain"] { --card-accent: var(--purple); --card-btn-bg: linear-gradient(180deg, #a55eea 0%, var(--purple) 100%); --card-btn-shadow: var(--purple-shadow); }

.game-card .icon{
  font-size:2.4rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(245,240,230,0.8) 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.05);
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.1));
}
.game-card:hover .icon {
  transform: translateZ(25px) scale(1.22) rotate(-6deg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,1);
}
.game-card h3{
  margin:0;
  font-size:1.1rem;
  line-height:1.4;
  font-family: 'Kantumruy Pro', sans-serif;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.2s ease;
}
.game-card:hover h3{
  color: var(--card-accent, var(--red));
}
.game-card p{margin:0;color:var(--ink-soft);font-size:0.88rem;flex:1;line-height:1.45;}

/* ---------- Attractive Full-Width 3D Action Play Button ---------- */
.game-card .play{
  width: 100%;
  justify-content: center;
  font-size:0.92rem;
  font-weight:700;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 18px;
  border-radius: 16px;
  background: var(--card-btn-bg, linear-gradient(180deg, #ff5e57 0%, var(--red) 100%));
  border: none;
  box-shadow: 
    inset 0 1.5px 2px rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(0,0,0,0.15),
    0 5px 0 var(--card-btn-shadow, var(--red-shadow)),
    0 8px 15px rgba(0,0,0,0.15);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-top: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
}
.game-card .play::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(25deg);
  transition: all 0.5s ease;
  pointer-events: none;
}
.game-card:hover .play {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -2px 3px rgba(0,0,0,0.15),
    0 7px 0 var(--card-btn-shadow, var(--red-shadow)),
    0 14px 22px rgba(0,0,0,0.25);
}
.game-card:hover .play::after {
  left: 135%;
}
.game-card:active .play {
  transform: translateY(3px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 2px 0 var(--card-btn-shadow, var(--red-shadow));
}

footer.site-footer{
  text-align:center;
  padding:35px 20px;
  color:var(--ink-soft);
  font-size:0.88rem;
}

/* ---------- Keyframe Animations ---------- */
@keyframes float3d {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(5deg); }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(240,180,41,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(240,180,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
}

/* ---------- Generic game elements ---------- */
.score-pill{
  display:inline-flex;align-items:center;gap:6px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper-2) 100%);
  color:var(--ink);
  padding:8px 18px;border-radius:999px;font-weight:700;
  box-shadow: inset 0 1px 1px #fff, 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.06);
}
.feedback{
  min-height:1.6em;font-weight:600;text-align:center;margin-top:10px;
}
.feedback.good{color:var(--green);}
.feedback.bad{color:var(--red);}
input[type=text],input[type=number],select{
  font-family:'Kantumruy Pro',sans-serif;
  border:2px solid #e3d9c4;border-radius:12px;
  padding:10px 14px;font-size:1rem;background:#fff;color:var(--ink);
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}
input:focus,select:focus{
  outline:none;
  border-color:var(--sky);
  box-shadow: 0 0 0 4px rgba(62,143,196,0.25), inset 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width:600px){
  .hero h1{font-size:1.7rem;}
  .topbar .title{font-size:1rem;}
  .category-label{font-size:1.05rem; padding:8px 18px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}