/* EduPlay Malaysia — Ceria Malaysia design tokens (MASTER-PROMPT) */
:root {
  /* Primary greens */
  --ep-primary: #2D6A4F;
  --ep-primary-light: #40916C;
  --ep-primary-accent: #52B788;
  --ep-primary-dark: #1B4332;

  /* Secondary */
  --ep-coral: #E76F51;
  --ep-orange: #F4A261;
  --ep-gold: #E9C46A;

  /* Accent teal */
  --ep-teal-deep: #264653;
  --ep-teal: #2A9D8F;
  --ep-sage: #8AB17D;

  /* Neutral */
  --ep-text: #081C15;
  --ep-text-secondary: #4A4A4A;
  --ep-text-muted: #6B7280;
  --ep-bg: #F7FBF8;
  --ep-bg-warm: #FFF8F0;
  --ep-surface: #FFFFFF;
  --ep-border: #D8E5DD;

  /* Semantic */
  --ep-success: #52B788;
  --ep-error: #E76F51;
  --ep-warning: #F4A261;
  --ep-info: #2A9D8F;

  /* Subject accents */
  --ep-math: #E76F51;
  --ep-sains: #2A9D8F;
  --ep-bm: #40916C;
  --ep-english: #2D6A4F;
  --ep-umum: #E9C46A;
  --ep-sejarah: #F4A261;

  /* Layout */
  --ep-radius: 20px;
  --ep-radius-sm: 12px;
  --ep-radius-pill: 999px;
  --ep-shadow: 0 8px 24px rgba(27, 67, 50, 0.10);
  --ep-shadow-hover: 0 16px 40px rgba(27, 67, 50, 0.16);
  --ep-touch: 48px;
  --ep-font: "Nunito", system-ui, sans-serif;
  --ep-max: 1100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.ep-body {
  margin: 0;
  font-family: var(--ep-font);
  color: var(--ep-text);
  /* Soft fallback if shell bg not used */
  background: linear-gradient(165deg, #fff8f0 0%, #e8f5ef 45%, #d4f0e8 100%);
  min-height: 100vh;
  line-height: 1.45;
}

.ep-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ep-primary);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px 20px;
  min-height: var(--ep-touch);
}

.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ep-touch);
  padding: 12px 24px;
  border: none;
  border-radius: var(--ep-radius-pill);
  font-family: var(--ep-font);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.ep-btn:active {
  transform: scale(0.97);
}

.ep-btn-primary {
  background: linear-gradient(135deg, var(--ep-primary-light), var(--ep-primary-accent));
  color: white;
  box-shadow: 0 6px 18px rgba(45, 106, 79, 0.28);
}

.ep-btn-secondary {
  background: white;
  color: var(--ep-primary-dark);
  border: 2px solid var(--ep-border);
}

.ep-btn-gold {
  background: linear-gradient(135deg, var(--ep-gold), #f0d78c);
  color: var(--ep-text);
  box-shadow: 0 6px 18px rgba(233, 196, 106, 0.35);
}

.ep-card {
  background: var(--ep-surface);
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow);
  border: 1px solid rgba(45, 106, 79, 0.06);
}

.ep-batik {
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--ep-coral) 0 20px,
    var(--ep-teal) 20px 40px,
    var(--ep-gold) 40px 60px,
    var(--ep-primary-light) 60px 80px
  );
}

/* ── Subject hub shared layout ── */
.ep-hub-header {
  text-align: center;
  padding: 8px 20px 28px;
}
.ep-hub-header .icon {
  font-size: 68px;
  display: block;
  line-height: 1;
}
.ep-hub-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 8px 0 4px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ep-primary);
}
.ep-hub-header p {
  color: var(--ep-text-muted);
  font-size: 1.05rem;
  margin: 0;
}
.ep-games {
  max-width: var(--ep-max);
  margin: 0 auto;
  padding: 0 20px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.ep-game-card {
  background: var(--ep-surface);
  border-radius: var(--ep-radius);
  padding: 24px;
  text-decoration: none;
  color: var(--ep-text);
  box-shadow: var(--ep-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(45, 106, 79, 0.06);
  border-bottom: 5px solid var(--ep-primary-accent);
}
.ep-game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ep-shadow-hover);
}
.ep-game-card:active {
  transform: scale(0.98);
}
.ep-game-card .g-icon {
  font-size: 44px;
  margin-bottom: 10px;
  display: block;
}
.ep-game-card h3 {
  font-size: 1.2rem;
  margin: 4px 0;
  font-weight: 800;
  color: var(--ep-text);
}
.ep-game-card .g-desc {
  font-size: 0.92rem;
  color: var(--ep-text-muted);
  line-height: 1.45;
}
.ep-game-card .g-tag {
  display: inline-block;
  background: rgba(45, 106, 79, 0.08);
  color: var(--ep-primary);
  padding: 3px 10px;
  border-radius: var(--ep-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  margin: 6px 4px 0 0;
}
.ep-game-card .g-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--ep-gold);
  color: var(--ep-text);
  padding: 4px 12px;
  border-radius: var(--ep-radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
}
.ep-game-card.coming-soon {
  opacity: 0.55;
  pointer-events: none;
}
.ep-game-card.coming-soon::after {
  content: "🔜 Akan Datang";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ep-primary);
  color: white;
  padding: 8px 18px;
  border-radius: var(--ep-radius-pill);
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}
.ep-hub-accent-math { --hub-accent: var(--ep-math); }
.ep-hub-accent-sains { --hub-accent: var(--ep-sains); }
.ep-hub-accent-bm { --hub-accent: var(--ep-bm); }
.ep-hub-accent-english { --hub-accent: var(--ep-english); }
.ep-hub-accent-umum { --hub-accent: var(--ep-umum); }
.ep-hub-accent-sejarah { --hub-accent: var(--ep-sejarah); }
.ep-hub-accent-math .ep-hub-header h1,
.ep-hub-accent-sains .ep-hub-header h1,
.ep-hub-accent-bm .ep-hub-header h1,
.ep-hub-accent-english .ep-hub-header h1,
.ep-hub-accent-umum .ep-hub-header h1,
.ep-hub-accent-sejarah .ep-hub-header h1 {
  color: var(--hub-accent);
}
.ep-hub-accent-math .ep-game-card,
.ep-hub-accent-sains .ep-game-card,
.ep-hub-accent-bm .ep-game-card,
.ep-hub-accent-english .ep-game-card,
.ep-hub-accent-umum .ep-game-card,
.ep-hub-accent-sejarah .ep-game-card {
  border-bottom-color: var(--hub-accent);
}
.ep-hub-accent-math .ep-game-card .g-tag,
.ep-hub-accent-sains .ep-game-card .g-tag,
.ep-hub-accent-bm .ep-game-card .g-tag,
.ep-hub-accent-english .ep-game-card .g-tag,
.ep-hub-accent-umum .ep-game-card .g-tag,
.ep-hub-accent-sejarah .ep-game-card .g-tag {
  color: var(--hub-accent);
  background: color-mix(in srgb, var(--hub-accent) 12%, white);
}
.ep-hub-accent-math .ep-back,
.ep-hub-accent-sains .ep-back,
.ep-hub-accent-bm .ep-back,
.ep-hub-accent-english .ep-back,
.ep-hub-accent-umum .ep-back,
.ep-hub-accent-sejarah .ep-back {
  color: var(--hub-accent);
}