/* ===== css/theme.css ===== */
:root {
  --bg-deep: #0b1020;
  --bg-deep-2: #131a33;
  --panel: rgba(16, 21, 40, 0.86);
  --panel-border: rgba(255, 255, 255, 0.16);
  --text: #f5f7ff;
  --text-dim: #aab2d6;
  --gold: #ffd23d;
  --danger: #ff4d6d;
  --success: #3ddc84;
  --map-color: #4cc9f0;
  --map-color-dark: #0b5e78;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 15% 20%, rgba(76, 201, 240, 0.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(163, 116, 255, 0.14), transparent 45%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-deep-2));
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(60, 220, 130, 0.03), transparent 25%),
    radial-gradient(circle at 80% 80%, rgba(255, 77, 109, 0.02), transparent 25%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="stars" x="100" y="100" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="white" opacity="0.3"/><circle cx="70" cy="60" r="0.5" fill="white" opacity="0.5"/><circle cx="80" cy="20" r="1.5" fill="white" opacity="0.2"/></pattern></defs><rect width="1000" height="1000" fill="none"/><rect x="0" y="0" width="1000" height="1000" fill="url(%23stars)"/></svg>');
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

#app {
  position: relative;
  z-index: 1;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 32px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  animation: screen-in 0.35s ease;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1,
h2,
h3 {
  margin: 0;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  margin: 8px 0 18px;
  letter-spacing: 0.02em;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  background: linear-gradient(135deg, var(--map-color), var(--map-color-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.08) inset;
}
.btn--primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 24px var(--map-color);
}

.btn--secondary {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
}
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
}
.btn--ghost:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.link-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  text-decoration: underline;
  font-size: 0.9rem;
  margin-top: 10px;
  align-self: center;
}
.link-btn:hover {
  color: var(--text);
}

.icon-btn {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.badge {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}

.stars {
  display: inline-flex;
  gap: 2px;
}
.star {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.25);
}
.star--filled {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 210, 61, 0.8);
}
.stars--lg .star {
  font-size: 2.4rem;
}
.stars--sm .star {
  font-size: 0.75rem;
}

.hearts {
  display: inline-flex;
  gap: 2px;
  font-size: 1.1rem;
}
.heart--empty {
  filter: grayscale(1) opacity(0.4);
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 18px var(--map-color);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 0 28px var(--map-color);
  }
}

@keyframes pop-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-8px);
  }
  40%,
  60% {
    transform: translateX(8px);
  }
}

@keyframes float-up {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-320px) rotate(360deg);
    opacity: 0;
  }
}


/* ===== css/screens.css ===== */
/* ---------- Profile screen ---------- */
/* The top of the start, login and sign-up screens (Components.signboard): the ➕➖✖️➗ logo, then the wooden Dunia
   Hitung sign hanging from two ropes that come down from above the screen past the logo, then the tagline. The sign
   drops in once, then keeps swinging left and right. */
.signboard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 22px;
  text-align: center;
  animation: sign-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.signboard__logo {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  font-size: 2.6rem;
  line-height: 1;
}
.signboard__hang {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% calc(-2.6rem - 68px);
  animation: sign-swing 3s ease-in-out 0.9s infinite;
}
/* a twisted rope: diagonal strands over a round shading, ending in a loop around the board's nail */
.signboard__rope {
  position: absolute;
  z-index: 2;
  top: calc(-2.6rem - 68px);
  width: 7px;
  height: calc(2.6rem + 80px);
  border-radius: 4px;
  background: repeating-linear-gradient(-58deg, rgba(90, 55, 20, 0.45) 0 1.5px, transparent 1.5px 5px),
    linear-gradient(90deg, #9c6e34, #e9cf9a 40%, #d2a865 65%, #8a5f2a);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.25);
}
.signboard__rope::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 3.5px solid #c99a5a;
  box-shadow: inset 0 0 0 1px rgba(90, 55, 20, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.signboard__rope--l {
  left: 18%;
}
.signboard__rope--r {
  right: 18%;
}
.signboard__plank {
  position: relative;
  padding: 12px 34px 14px;
  border-radius: 18px;
  border: 4px solid #7a4a1f;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.1)),
    repeating-linear-gradient(90deg, #d69a5c 0 26px, #cb8d4f 26px 29px, #dba366 29px 55px, #c98b4d 55px 58px);
  box-shadow: 0 6px 0 #5e3612, 0 14px 26px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
/* the nails the ropes hang on */
.signboard__plank::before,
.signboard__plank::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3f3f3, #8d8d8d 60%, #555);
}
/* (placed under the ropes' centres: a rope sits at 18% of the board's outer width, 7px wide) */
.signboard__plank::before {
  left: calc(18% - 3.5px);
}
.signboard__plank::after {
  right: calc(18% - 3.5px);
}
.signboard__title {
  display: flex;
  align-items: flex-end;
  margin: 0;
  font-family: "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 9vw, 3.1rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.signboard__title span {
  display: inline-block;
  color: var(--c);
  transform: rotate(var(--r));
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1.5px 1.5px #fff, -1.5px -1.5px #fff, 1.5px -1.5px #fff, -1.5px 1.5px #fff,
    0 5px 0 rgba(70, 35, 5, 0.5);
  animation: sign-letter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.signboard__title span:nth-child(2n) {
  animation-delay: 0.08s;
}
.signboard__title span:nth-child(3n) {
  animation-delay: 0.16s;
}
.signboard__gap {
  width: 0.32em;
}
/* the + and ÷ badges pinned to the sign's ends */
.signboard__chip {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.signboard__chip--l {
  left: -16px;
  background: #3ddc84;
  transform: translateY(-50%) rotate(-12deg);
}
.signboard__chip--r {
  right: -16px;
  background: #4cc9f0;
  transform: translateY(-50%) rotate(12deg);
}
/* the tagline (or what the screen is for) under the sign, on a dark pill so it reads on the bright school */
.signboard__sub {
  display: inline-block;
  margin: 16px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 21, 40, 0.85);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@keyframes sign-drop {
  from {
    opacity: 0;
    transform: translateY(-140px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* left, right, left: a sign swinging on its ropes */
@keyframes sign-swing {
  0%,
  100% {
    transform: rotate(-4.5deg);
  }
  50% {
    transform: rotate(4.5deg);
  }
}
@keyframes sign-letter {
  from {
    opacity: 0;
    transform: translateY(-0.4em) scale(0.6) rotate(var(--r));
  }
  to {
    opacity: 1;
    transform: rotate(var(--r));
  }
}
@media (prefers-reduced-motion: reduce) {
  .signboard,
  .signboard__hang,
  .signboard__title span {
    animation: none;
  }
}

.profile-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 28px;
}
.profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  min-width: 110px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.profile-card:hover {
  transform: translateY(-4px);
  border-color: var(--map-color);
}
.profile-card__avatar {
  font-size: 2.4rem;
}
.profile-card__name {
  max-width: 150px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.profile-card__delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-hint {
  color: var(--text-dim);
  text-align: center;
}

.create-profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.create-profile__demo {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff4d6;
  border: 2px dashed #ffb02e;
  color: #5a3b00;
  font-size: 0.92rem;
  line-height: 1.45;
}
.create-profile__label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.create-profile__input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avatar-choice {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 1.5rem;
  padding: 4px 8px;
}
.avatar-choice--selected {
  border-color: var(--map-color);
  background: rgba(76, 201, 240, 0.15);
}

.profile-email-divider {
  text-align: center;
  color: var(--text-dim);
  margin: 18px auto 8px;
  max-width: 420px;
  width: 100%;
  position: relative;
  font-size: 0.85rem;
}
.profile-email-divider::before,
.profile-email-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--panel-border);
}
.profile-email-divider::before {
  left: 0;
}
.profile-email-divider::after {
  right: 0;
}
.profile-email-btn {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  display: block;
}

/* ---------- Email Auth screens (login/register/forgot password) ---------- */
.screen--login {
  justify-content: center;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.auth-form__label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.auth-form__input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.auth-form__input:focus {
  outline: none;
  border-color: var(--map-color);
}
.auth-error {
  background: rgba(255, 77, 109, 0.15);
  border: 1px solid var(--danger);
  color: #ffb3c0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 420px;
  margin: 0 auto 12px;
}
.auth-success {
  background: rgba(61, 220, 132, 0.15);
  border: 1px solid var(--success);
  color: #b6f5cf;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  max-width: 420px;
  margin: 0 auto 14px;
  text-align: center;
}
.auth-security-q {
  background: rgba(76, 201, 240, 0.12);
  border: 1px solid var(--map-color);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
}
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  align-self: center;
}
/* Text outside the dark card sits on a bright classroom photo; give it a backing. */
.auth-switch,
.screen--login > .link-btn {
  background: rgba(16, 21, 40, 0.85);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
}
.auth-switch .link-btn {
  margin-top: 0;
  color: #7fd8ff;
  font-weight: 700;
}

/* ---------- History screen ---------- */
.history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.history-row {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.7fr 1fr 0.7fr 0.9fr 1.1fr;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
}
.history-row--passed {
  border-left-color: var(--success);
}
.history-row--failed {
  border-left-color: var(--danger);
}
.history-row__grade {
  font-weight: 700;
}
.history-row__date {
  color: var(--text-dim);
  font-size: 0.75rem;
  text-align: right;
}
.history-row__score {
  font-weight: 700;
  color: var(--gold);
}

/* ---------- Ad overlay (watch ad to continue) ---------- */
.ad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 18, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  animation: ad-overlay-in 0.25s ease;
}
@keyframes ad-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ad-overlay__box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ad-overlay__label {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.ad-overlay__desc {
  color: var(--text-dim);
  margin: 0 0 20px;
  line-height: 1.5;
}
.ad-overlay__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ad-overlay__box--playing {
  background: linear-gradient(160deg, #1a1f3a, #0b0e1e);
}
.ad-overlay__mock {
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 30px 16px;
  margin: 16px 0;
}
.ad-overlay__mock-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  animation: pulse-glow 1.5s ease-in-out infinite;
}
.ad-overlay__mock-text {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}
.ad-overlay__countdown {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 210, 61, 0.6);
}

/* ---------- Map select screen ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.topbar__profile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.topbar__avatar {
  font-size: 1.6rem;
}
.topbar__stats {
  display: flex;
  gap: 8px;
}
.topbar__actions {
  display: flex;
  gap: 8px;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.btn:disabled:hover {
  transform: none;
  box-shadow: none;
  filter: grayscale(0.4);
}

/* ---------- Gameplay screen ---------- */
.gameplay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.gameplay-header__combo {
  font-weight: 800;
  color: var(--gold);
}
.gameplay-header__progress {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 700;
}

.timer-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin-bottom: 20px;
}
.timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--success), var(--gold), var(--danger));
}

.question-card {
  background: linear-gradient(135deg, rgba(18, 24, 45, 0.92), rgba(13, 18, 36, 0.9));
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 36px 20px;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  animation: card-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
.question-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: shimmer 3s infinite;
  pointer-events: none;
  pointer-events: none;
}
.question-card__level {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.question-card__text {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  animation: question-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.answers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.answer-btn {
  padding: 18px 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(22, 29, 52, 0.9), rgba(16, 21, 40, 0.85));
  border: 2px solid var(--panel-border);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 800;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.answer-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.1), transparent 80%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.answer-btn:hover:not(:disabled) {
  border-color: var(--map-color);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 20px rgba(76, 201, 240, 0.4), inset 0 1px 8px rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(76, 201, 240, 0.25), rgba(76, 201, 240, 0.1));
}
.answer-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}
.answer-btn:disabled {
  cursor: default;
}
.answer-btn--correct {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(61, 220, 132, 0.3), rgba(61, 220, 132, 0.15));
  animation: button-correct 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 20px rgba(61, 220, 132, 0.5), inset 0 1px 8px rgba(255, 255, 255, 0.1);
}
.answer-btn--wrong {
  border-color: var(--danger);
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.3), rgba(255, 77, 109, 0.15));
  animation: button-wrong 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 20px rgba(255, 77, 109, 0.5), inset 0 1px 8px rgba(255, 255, 255, 0.1);
}
.answer-btn--dim {
  opacity: 0.35;
  pointer-events: none;
}

.feedback-slot {
  min-height: 40px;
  margin-top: 16px;
  text-align: center;
  font-weight: 800;
}
.feedback--correct {
  color: var(--success);
}
.feedback--wrong,
.feedback--fail {
  color: var(--danger);
}

/* ---------- Result screen ---------- */
.screen--result {
  align-items: center;
  justify-content: center;
  position: relative;
}
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confetti span {
  position: absolute;
  bottom: -20px;
  font-size: 1.4rem;
  animation-name: float-up;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.result-card {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 26, 48, 0.94), rgba(13, 18, 36, 0.92));
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  max-width: 420px;
  width: 100%;
  animation: result-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 16px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}
.result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 0%, rgba(255, 210, 61, 0.1), transparent 70%);
  opacity: 0;
  animation: result-glow 2s ease-in-out infinite;
  pointer-events: none;
}
.result-card__title {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.result-card__stars {
  margin-bottom: 12px;
  animation: stars-reveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.result-card__score {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 210, 61, 0.5);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.result-card__meta {
  color: var(--text-dim);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.result-card__rewards {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}
.result-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ---------- Gameplay classroom background ---------- */
.classroom-bg {
  position: relative;
}
/* Kelas 1: Modern Classroom - Beautiful Learning Space */
.classroom-bg.grade-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../classroom-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.97;
  pointer-events: none;
  z-index: 0;
}

.classroom-bg.grade-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(144,238,144,0.1) 0%, rgba(173,216,230,0.05) 50%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Kelas 2: Safari - Colorful Animals Theme */
.classroom-bg.grade-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FFB6C1 0%, #FFE4E1 50%, #FFFACD 100%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><text x="600" y="200" font-family="Comic Sans MS" font-size="96" fill="%23FF69B4" text-anchor="middle" opacity="0.9">🦁 🦒 🦓</text><text x="200" y="400" font-family="Comic Sans MS" font-size="80" fill="%23FF8C00" opacity="0.8">🌺</text><text x="1000" y="500" font-family="Comic Sans MS" font-size="80" fill="%2310B981" opacity="0.8">🌴</text><text x="600" y="700" font-family="Comic Sans MS" font-size="64" fill="%23FF1493">🐘 Safari Adventure 🦁</text></svg>');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Kelas 3: Ocean - Colorful Sea Theme */
.classroom-bg.grade-3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #87CEEB 0%, #00CED1 50%, #20B2AA 100%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><text x="150" y="250" font-family="Comic Sans MS" font-size="80" fill="%23FF69B4" opacity="0.9">🐠</text><text x="400" y="150" font-family="Comic Sans MS" font-size="90" fill="%23FFD700" opacity="0.85">🐙</text><text x="800" y="350" font-family="Comic Sans MS" font-size="85" fill="%2306B6D4" opacity="0.8">🐚</text><text x="1000" y="200" font-family="Comic Sans MS" font-size="80" fill="%23FF8C00" opacity="0.85">🦀</text><text x="600" y="700" font-family="Comic Sans MS" font-size="64" fill="%231E90FF">🌊 Ocean World 🐠</text></svg>');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Kelas 4: Sky - Colorful Clouds Theme */
.classroom-bg.grade-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #87CEEB 0%, #E0FFFF 50%, #FFFFE0 100%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><text x="300" y="180" font-family="Comic Sans MS" font-size="90" fill="%238B4513" opacity="0.8">✈️</text><text x="800" y="100" font-family="Comic Sans MS" font-size="100" fill="%23FFD700" opacity="0.9">☀️</text><text x="200" y="400" font-family="Comic Sans MS" font-size="85" fill="%234169E1" opacity="0.85">🪁</text><text x="1000" y="350" font-family="Comic Sans MS" font-size="80" fill="%23FF69B4" opacity="0.8">🎈</text><text x="600" y="700" font-family="Comic Sans MS" font-size="64" fill="%231E90FF">☁️ Sky Adventure ☁️</text></svg>');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Kelas 5: Space - Colorful Planets Theme */
.classroom-bg.grade-5::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000033 0%, #0F0F2E 50%, #1A0F3D 100%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><text x="200" y="200" font-family="Comic Sans MS" font-size="100" fill="%23FF6B6B" opacity="0.95">🪐</text><text x="900" y="150" font-family="Comic Sans MS" font-size="90" fill="%234ECDC4" opacity="0.9">🌍</text><text x="400" y="500" font-family="Comic Sans MS" font-size="85" fill="%23FFE66D" opacity="0.9">⭐</text><text x="950" y="600" font-family="Comic Sans MS" font-size="80" fill="%23A8E6CF" opacity="0.85">🚀</text><text x="100" y="700" font-family="Comic Sans MS" font-size="70" fill="%2395E1D3">✨ Space Quest ✨</text></svg>');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Kelas 6: Grand Library - Beautiful Bookshelves */
.classroom-bg.grade-6::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../library-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.classroom-bg.grade-6::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(139,69,19,0.15) 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
  z-index: 0;
}
.classroom-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.12) 0%, rgba(11, 16, 32, 0.02) 45%, rgba(11, 16, 32, 0.3) 100%);
  pointer-events: none;
  z-index: 0;
}
.classroom-bg > * {
  position: relative;
  z-index: 1;
}

/* ---------- Responsive ---------- */
@keyframes card-reveal {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  100% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}

@keyframes question-pop {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateY(-10deg);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0);
  }
}

@keyframes button-correct {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes button-wrong {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px) rotateZ(-1deg);
  }
  75% {
    transform: translateX(8px) rotateZ(1deg);
  }
}

@keyframes level-unlock {
  0% {
    transform: scale(0);
    opacity: 0;
    filter: blur(8px);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes result-reveal {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes result-glow {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes stars-reveal {
  0% {
    transform: scale(0) rotateZ(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotateZ(0);
    opacity: 1;
  }
}

/* ---------- Avatar with equipped frame + hat ---------- */
.avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid transparent;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.avatar-wrap--sm {
  width: 34px;
  height: 34px;
}
.avatar-wrap--sm .avatar-emoji {
  font-size: 1.3rem;
}
.avatar-wrap--md {
  width: 54px;
  height: 54px;
}
.avatar-wrap--md .avatar-emoji {
  font-size: 2rem;
}
.avatar-wrap--lg {
  width: 74px;
  height: 74px;
}
.avatar-wrap--lg .avatar-emoji {
  font-size: 2.6rem;
}
/* The drawn hat sits centred on top of the head, slightly tilted. */
.avatar-hat {
  position: absolute;
  top: -36%;
  left: 50%;
  width: 92%;
  height: auto;
  transform: translateX(-50%) rotate(-8deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  overflow: visible;
}
.avatar-hat--emoji {
  top: -8px;
  left: auto;
  right: -6px;
  width: auto;
  font-size: 1em;
  transform: rotate(15deg);
}

@media (max-width: 480px) {
  .question-card__text {
    font-size: 1.6rem;
  }
  .answer-btn {
    font-size: 1.05rem;
    padding: 14px 8px;
  }
  .history-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "grade level"
      "ops score"
      "accuracy result"
      "date date";
    row-gap: 4px;
  }
  .history-row__grade { grid-area: grade; }
  .history-row__level { grid-area: level; }
  .history-row__ops { grid-area: ops; }
  .history-row__score { grid-area: score; }
  .history-row__accuracy { grid-area: accuracy; }
  .history-row__result { grid-area: result; }
  .history-row__date { grid-area: date; text-align: left; }
}

/* Email login: small notes under the form (no sign-up needed, coins 2x). */
.auth-form__hint {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

/* Saved email accounts on the start screen. */
.profile-card--email {
  border-color: rgba(76, 201, 240, 0.65);
  box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.18) inset;
}
.profile-card__badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(76, 201, 240, 0.2);
  color: #bdeeff;
  white-space: nowrap;
}

/* Login card (start screen + login screen): white card, icon fields, show-password eye, "Ingat saya", MASUK,
   then MASUK DENGAN TIKTOK / FACEBOOK / GOOGLE. "Main tanpa akun" sits folded under it. */
.lcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 6px;
  padding: 22px 22px 20px;
  background: #ffffff;
  color: #2b2f3a;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(16, 21, 40, 0.35);
}
.lcard__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 800;
  color: #1f2433;
}
.lcard__coin {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff4cc;
  color: #a56b00;
}
/* what logging in gives, under the card's title */
.lcard .auth-error {
  background: #ffe9ed;
  border-color: #ff8fa3;
  color: #b3223c;
}
.lcard .auth-success {
  background: #e6f8ee;
  border-color: #7fd8a4;
  color: #1d7a46;
}
.lcard__field {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #e1e5ee;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease;
}
.lcard__field:focus-within {
  border-color: #3d8bff;
}
.lcard__icon {
  display: grid;
  place-items: center;
  width: 46px;
  align-self: stretch;
  color: #a3abbd;
  border-right: 1.5px solid #e1e5ee;
}
.lcard__icon svg,
.lcard__eye svg {
  width: 20px;
  height: 20px;
}
.lcard__field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #2b2f3a;
  font-size: 1rem;
  padding: 13px 12px;
}
.lcard__field input::placeholder {
  color: #a3abbd;
}
.lcard__eye {
  border: none;
  background: none;
  color: #a3abbd;
  padding: 0 12px;
  align-self: stretch;
  cursor: pointer;
}
.lcard__eye.is-on {
  color: #3d8bff;
}
.lcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lcard__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7387;
  font-size: 0.92rem;
  cursor: pointer;
}
.lcard__remember input {
  width: 18px;
  height: 18px;
  accent-color: #3d8bff;
}
.lcard__submit {
  min-width: 128px;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #4d9aff, #2f7cf0);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 0 #1f5fc4;
  cursor: pointer;
}
.lcard__submit:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1f5fc4;
}
.lcard__links {
  margin-top: -4px;
}
.lcard__link {
  border: none;
  background: none;
  padding: 2px 0;
  color: #3d8bff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.lcard__link:hover {
  text-decoration: underline;
}
.lcard__hint {
  margin: -4px 0 0;
  color: #6b7387;
  font-size: 0.85rem;
  line-height: 1.4;
}
.lcard__or {
  position: relative;
  text-align: center;
  color: #a3abbd;
  font-size: 0.9rem;
  margin: 2px 0;
}
.lcard__or::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px solid #e9ecf3;
}
.lcard__or span {
  position: relative;
  padding: 0 12px;
  background: #fff;
}
.lcard__social {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.lcard__social:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.lcard__sicon {
  display: grid;
  place-items: center;
  width: 54px;
  padding: 11px 0;
  background: rgba(0, 0, 0, 0.22);
}
.lcard__sicon svg {
  width: 22px;
  height: 22px;
}
.lcard__slabel {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 10px;
}
.lcard__social--tiktok {
  background: #161823;
}
.lcard__social--facebook {
  background: #3b5998;
}
.lcard__social--google {
  background: #ea4335;
}
.lcard__social--instagram {
  background: linear-gradient(90deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4);
}
/* a new email account proves its email through Google first */
.lcard-verify__text,
.lcard-verify__list {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.lcard-verify__list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--text-dim);
}
@media (max-width: 420px) {
  .lcard {
    padding: 18px 16px;
  }
  .lcard__submit {
    min-width: 108px;
    padding: 12px 16px;
  }
}.start-local {
  max-width: 420px;
  width: 100%;
  margin: 10px auto 0;
}
.start-local > summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16, 21, 40, 0.85);
  color: var(--text);
}
.start-local > summary::-webkit-details-marker {
  display: none;
}
.start-local[open] > summary {
  margin-bottom: 10px;
}

/* paid on the promotion page: the note until someone comes in and picks the class */
.start-claim {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #e8fbef;
  border: 2px solid #25d366;
  color: #136b35;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* The start screen's front (the owner's choice, 2026-10-28): Numa the mascot says hello, four reasons, and
   "🎮 Coba Gratis" straight into Kelas Trial without an account; the login card follows for those who have one. */
.start-hero {
  position: relative;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin: 0 auto 14px;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: rgba(16, 21, 40, 0.86);
  border: 2px solid rgba(102, 217, 174, 0.55);
  box-shadow: 0 14px 36px rgba(16, 21, 40, 0.35);
  color: var(--text);
}
.start-hero__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.start-hero__numa {
  flex: none;
  width: 108px;
  height: auto;
  margin: -6px 0 -4px -6px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.start-hero__bubble {
  position: relative;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2433;
  font-size: 0.92rem;
  line-height: 1.35;
}
.start-hero__bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left: 0;
  border-right-color: #ffffff;
}
.start-hero__bubble b {
  color: #1c8f68;
}
.start-hero__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-size: 0.84rem;
  font-weight: 700;
}
.start-hero__try {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-size: 1.15rem;
}
.start-hero__price {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.start-hero__price b {
  color: #ffd23d;
}
@media (max-width: 360px) {
  .start-hero__list {
    grid-template-columns: 1fr;
  }
  .start-hero__numa {
    width: 88px;
  }
}



/* ===== css/app.css ===== */
/* ================= Shared building blocks ================= */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  margin-bottom: 14px;
}
.panel__title {
  font-weight: 900;
  font-size: 1.02rem;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.panel__sub {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim);
}
.panel__hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 8px 0 0;
}
.panel.empty-hint {
  text-align: center;
  color: var(--text-dim);
}

.pill-title {
  align-self: flex-start;
  background: rgba(16, 21, 40, 0.88);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 1rem;
  font-weight: 900;
  margin: 10px 0 12px;
}
.pill-hint {
  align-self: center;
  text-align: center;
  background: rgba(16, 21, 40, 0.85);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  margin: 0 0 12px;
}

.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.screen-header__title {
  flex: 1;
  font-size: 1.2rem;
  font-weight: 900;
  background: rgba(16, 21, 40, 0.88);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-header__right {
  display: flex;
  gap: 8px;
}

.bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin: 6px 0 10px;
}
.bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--map-color-dark), var(--map-color));
  transition: width 0.6s ease;
}
.bar--xp .bar__fill {
  background: linear-gradient(90deg, #ffb703, var(--gold));
}
.bar--mastery .bar__fill {
  background: linear-gradient(90deg, #a374ff, #4cc9f0);
}
.bar--hp {
  height: 14px;
}
.bar--hp .bar__fill {
  background: linear-gradient(90deg, #ff4d6d, #ff9f45);
}

.level-chip {
  background: linear-gradient(135deg, #ffd23d, #ff9f45);
  color: #2b1600;
  font-weight: 900;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.85rem;
}

.admin-chip {
  background: linear-gradient(135deg, #a374ff, #4cc9f0);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 900;
}

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.tabs--inline {
  flex-wrap: wrap;
  overflow: visible;
}
.tab {
  flex-shrink: 0;
  background: rgba(16, 21, 40, 0.88);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 0.88rem;
}
.tab--active {
  background: linear-gradient(135deg, var(--map-color), var(--map-color-dark));
  border-color: transparent;
  box-shadow: 0 0 14px var(--map-color);
}

/* ================= Home ================= */
.hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.hud__who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud__name {
  font-weight: 900;
  font-size: 1.1rem;
}
.hud__sub {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 700;
}
.hud__level-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.hud__level .bar {
  margin-bottom: 0;
}
.hud__xp {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 700;
}
.hud__coins {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--gold);
}

.chest-banner {
  width: 100%;
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(255, 210, 61, 0.28), rgba(255, 159, 69, 0.22));
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 12px;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 14px;
  animation: pulse-glow 1.6s ease-in-out infinite;
  --map-color: #ffd23d;
}

.home-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
.home-grid .panel {
  margin-bottom: 0;
}
.home-world {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.home-world:hover {
  transform: translateY(-3px);
}
.scene-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.daily__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.daily__list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--panel-border);
  font-size: 0.9rem;
  font-weight: 700;
}
.daily__list li.is-done {
  color: var(--success);
}
.daily__count {
  color: var(--text-dim);
  font-size: 0.82rem;
}
.daily__reward {
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 10px;
  font-weight: 700;
}
.daily .btn {
  width: 100%;
}
.daily__claimed {
  text-align: center;
  color: var(--success);
  font-weight: 800;
  font-size: 0.88rem;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 16px 8px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}
.menu-tile:hover {
  transform: translateY(-5px);
  border-color: var(--map-color);
}
.menu-tile__icon {
  font-size: 2.2rem;
}
.menu-tile__label {
  font-weight: 900;
  font-size: 1.05rem;
}
.menu-tile__sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ================= Play ================= */
.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.world-card {
  position: relative;
  cursor: pointer;
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 16px 12px 12px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}
.world-card:hover {
  transform: translateY(-5px);
  border-color: var(--map-color);
  box-shadow: 0 0 22px -4px var(--map-color);
}
.world-card--locked {
  cursor: default;
  opacity: 0.6;
}
.world-card--locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--panel-border);
}
.world-card__tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #2b1600;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 999px;
  padding: 2px 10px;
}
.world-card__icon {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 10px var(--map-color));
}
.world-card__grade {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 800;
}
.world-card__name {
  font-weight: 900;
}
.world-card__meta,
.world-card__lock {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.play-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.play-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.play-card:hover {
  transform: translateY(-3px);
}
.play-card--boss {
  border-color: rgba(255, 77, 109, 0.7);
  box-shadow: 0 0 22px rgba(255, 77, 109, 0.3);
}
.play-card--locked {
  cursor: default;
  opacity: 0.65;
}
.play-card--locked:hover {
  transform: none;
}
.play-card__icon {
  font-size: 2.4rem;
}
.play-card__title {
  font-weight: 900;
}
.play-card__desc {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  margin-bottom: 0;
}
.mini-card:hover {
  transform: translateY(-4px);
  border-color: var(--map-color);
}
.mini-card__icon {
  font-size: 2.2rem;
}
.mini-card__name {
  font-weight: 900;
}
.mini-card__desc {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ================= World map path ================= */
.world-path {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
}
.path-start {
  align-self: center;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 4px;
}
.path-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 78%;
  padding: 8px 0;
}
.path-node--right {
  align-self: flex-end;
  flex-direction: row-reverse;
  text-align: right;
}
.path-node::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 34px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.path-node--right::before {
  left: auto;
  right: 34px;
}
.path-node__bubble {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--panel-border);
  background: linear-gradient(135deg, rgba(22, 29, 52, 0.95), rgba(14, 19, 38, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.path-node__bubble:not(:disabled):hover {
  transform: scale(1.1);
}
.path-node__bubble:disabled {
  cursor: default;
}
.path-node__icon {
  font-size: 2rem;
}
.path-node--done .path-node__bubble {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255, 210, 61, 0.35), rgba(255, 210, 61, 0.1));
}
.path-node--current .path-node__bubble {
  border-color: var(--map-color);
  animation: pulse-glow 1.4s ease-in-out infinite;
}
.path-node--locked {
  opacity: 0.5;
}
.path-node--boss {
  align-self: center;
  width: auto;
  flex-direction: column;
  text-align: center;
  margin-top: 8px;
}
.path-node--boss::before {
  left: 50%;
}
.path-node--boss .path-node__bubble {
  width: 96px;
  height: 96px;
  border-color: rgba(255, 77, 109, 0.8);
  box-shadow: 0 0 24px rgba(255, 77, 109, 0.4);
}
.path-node--boss .path-node__icon {
  font-size: 3rem;
}
.path-node__name {
  font-weight: 900;
}
.path-node__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.path-node--right .path-node__meta {
  justify-content: flex-end;
}
.path-node--boss .path-node__meta {
  justify-content: center;
}
.path-node__go {
  color: var(--map-color);
  font-weight: 800;
}
.path-node__mastery {
  color: #c7b5ff;
  font-weight: 700;
}
.path-node__learn {
  margin-top: 2px;
  font-size: 0.8rem;
}

/* ================= Learn & lesson ================= */
.learn-head__title {
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.learn-head__row,
.mastery-row,
.world-progress__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}
.learn-head__hint {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}
.learn-head[style*="--cat"] {
  border: 2px solid var(--cat);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 24px color-mix(in srgb, var(--cat) 30%, transparent);
}
.learn-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.learn-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 16px 14px;
  border-radius: var(--radius-lg);
  border: 2px solid color-mix(in srgb, var(--cat) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 34%, #1a2044), #141a36 70%);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--cat) 40%, #0b0f22), 0 10px 22px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  animation: pop-in 0.4s ease both;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.learn-cat::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat) 45%, transparent), transparent 70%);
  pointer-events: none;
}
.learn-cat:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 color-mix(in srgb, var(--cat) 40%, #0b0f22), 0 14px 26px rgba(0, 0, 0, 0.4);
}
.learn-cat:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 40%, #0b0f22);
}
.learn-cat__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 16px;
  font-size: 1.9rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 80%, #fff), var(--cat));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.learn-cat__name {
  font-weight: 900;
  font-size: 1.08rem;
}
.learn-cat__desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.35;
  flex: 1;
}
.learn-cat__meta {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 800;
}
.learn-cat .bar {
  width: 100%;
}
.learn-group {
  margin-top: 6px;
  margin-bottom: 12px;
}
.learn-group--mine .learn-card {
  border-color: var(--map-color);
}
.learn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.learn-card {
  margin-bottom: 0;
}
.learn-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.learn-card__icon {
  font-size: 2rem;
}
.learn-card__name {
  font-weight: 900;
}
.learn-card__band {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.learn-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* sub-material tags on a topic card: each opens the lesson at that part */
.learn-card__materi {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 6px;
}
.materi-tag {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}
.materi-tag:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--map-color);
}

/* Belajar search */
.learn-search {
  margin-top: 12px;
}
.learn-search__input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  outline: none;
}
.learn-search__input:focus {
  border-color: var(--map-color);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.learn-search__results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.learn-search__results:empty {
  display: none;
}
.learn-search__empty {
  margin: 0;
  color: var(--text-dim);
  font-weight: 700;
}
.learn-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
}
.learn-result:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--map-color);
}
.learn-result__icon {
  font-size: 1.6rem;
  flex: none;
}
.learn-result__text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.learn-result__text small {
  color: var(--text-dim);
  font-weight: 700;
}
.learn-result__go {
  font-weight: 900;
  color: var(--map-color);
  white-space: nowrap;
}

/* sub-materials inside a lesson */
.materi-toc {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.materi-toc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.materi-chip {
  border: 2px solid var(--map-color);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}
.materi-chip:hover {
  background: var(--map-color);
  color: #fff;
}
.materi {
  border-top: 2px dashed rgba(255, 255, 255, 0.14);
  padding-top: 14px;
  margin-bottom: 16px;
  scroll-margin-top: 16px;
}
.materi__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.materi__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--map-color);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.materi__icon {
  font-size: 1.5rem;
}
.materi__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
}
.materi__explain {
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: 1rem;
}
.materi__rumus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: rgba(163, 116, 255, 0.16);
  border: 2px solid rgba(163, 116, 255, 0.5);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 1.05rem;
}
.materi__rumus span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cdb6ff;
}
.materi__try {
  width: 100%;
}
/* longer explanation per sub-material (js/materi4-6.js) */
.materi__more {
  margin: 0 0 10px;
  line-height: 1.65;
  font-size: 1rem;
  opacity: 0.92;
}
.materi__steps {
  background: rgba(61, 220, 132, 0.1);
  border: 1px solid rgba(61, 220, 132, 0.4);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 0 0 12px;
}
.materi__steps ol {
  margin: 6px 0 0;
  padding-left: 22px;
  line-height: 1.6;
}
.materi__steps li {
  margin-bottom: 3px;
}
.materi__steps li::marker {
  font-weight: 900;
  color: var(--success);
}
.materi__exlabel {
  margin-top: 4px;
}
.materi__tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.materi__ingat,
.materi__salah {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  line-height: 1.5;
  font-size: 0.95rem;
}
.materi__ingat {
  background: rgba(255, 210, 61, 0.12);
  border: 1px solid rgba(255, 210, 61, 0.45);
}
.materi__salah {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.4);
}
.lesson-try {
  scroll-margin-top: 16px;
}
.learn-card__actions .btn {
  flex: 1;
  padding: 9px 8px;
  font-size: 0.82rem;
}

.lesson__intro {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.lesson__example {
  background: rgba(76, 201, 240, 0.1);
  border: 1px solid rgba(76, 201, 240, 0.4);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.lesson__label {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--map-color);
  margin-bottom: 6px;
}
.lesson__soal {
  font-weight: 900;
  font-size: 1.15rem;
}
.lesson__steps {
  margin: 8px 0 0;
  padding-left: 22px;
  line-height: 1.6;
}
.lesson__tip {
  background: rgba(255, 210, 61, 0.12);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-weight: 700;
}
/* "Panduan lengkap": the long guide above the sub-materials (js/panduan*.js) */
.panduan {
  margin: 0 0 18px;
}
.panduan__block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.panduan__block--ingat {
  background: rgba(255, 210, 61, 0.1);
  border-color: rgba(255, 210, 61, 0.45);
}
.panduan__block--salah {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.4);
}
.panduan__title {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 900;
}
.panduan__text {
  margin: 0;
  line-height: 1.65;
  font-size: 1rem;
}
.panduan__steps,
.panduan__list {
  margin: 0;
  padding-left: 22px;
  line-height: 1.65;
}
.panduan__steps li,
.panduan__list li {
  margin-bottom: 4px;
}
.panduan__steps li::marker {
  font-weight: 900;
  color: var(--map-color);
}
.panduan__salah {
  display: grid;
  gap: 4px;
  line-height: 1.55;
  padding: 8px 0;
}
.panduan__salah + .panduan__salah {
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}
.panduan__cek {
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.panduan__cek summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.panduan__cek summary::-webkit-details-marker {
  display: none;
}
.panduan__cek summary::after {
  content: "Lihat ▾";
  margin-left: auto;
  flex: none;
  font-size: 0.78rem;
  opacity: 0.75;
}
.panduan__cek[open] summary::after {
  content: "Tutup ▴";
}
.panduan__cek-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--map-color);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
}
.panduan__cek-ans {
  padding: 0 12px 10px 46px;
  color: var(--success);
}
.panduan__hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  opacity: 0.7;
}
.lesson-try__q {
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  margin: 8px 0 14px;
}
.lesson-try__q--long {
  font-size: 1.05rem;
  line-height: 1.5;
}
.sample-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.sample-choice {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--panel-border);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 12px;
  font-weight: 900;
  font-size: 1.1rem;
}
.sample-choice:not(:disabled):hover {
  border-color: var(--map-color);
}
.sample-choice--correct {
  border-color: var(--success);
  background: rgba(61, 220, 132, 0.25);
}
.sample-choice--wrong {
  border-color: var(--danger);
  background: rgba(255, 77, 109, 0.25);
}
.lesson-try__feedback {
  text-align: center;
  font-weight: 800;
  margin-bottom: 10px;
}
.lesson-try .btn {
  display: block;
  margin: 0 auto;
}
.lesson-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================= My world & mall ================= */
.world-scene {
  padding: 10px;
}
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
}
.item-card--owned {
  border-color: var(--success);
}
.item-card--claim {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255, 210, 61, 0.35);
}
.item-card--locked,
.item-card--chest {
  opacity: 0.75;
}
.item-card__emoji {
  font-size: 2.4rem;
  height: 48px;
  display: flex;
  align-items: center;
}
/* Drawn items get a little glowing stage to stand on. */
.item-card__emoji--art {
  width: 86px;
  height: 86px;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 62%, transparent 70%);
}
/* Hats and frames shown on the player's hero, with room above the head for the hat. */
.item-card__wear {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 108px;
  padding-top: 30px;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}
.item-card:hover .item-card__wear {
  transform: translateY(-3px) scale(1.05);
}
.item-card--locked .item-card__wear,
.item-card--chest .item-card__wear {
  filter: grayscale(0.6) brightness(0.85);
}
.art {
  display: block;
  overflow: visible;
}
.art--card {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}
.item-card:hover .art--card {
  transform: translateY(-3px) scale(1.06);
}
.item-card--locked .art--card,
.item-card--chest .art--card {
  filter: grayscale(0.6) brightness(0.85);
}
.art--prize {
  width: 130px;
  height: 130px;
  margin: 0 auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

/* Gentle life in the world scenes and drawings. */
.art .twinkle,
.scene-svg .twinkle {
  animation: art-twinkle 2.4s ease-in-out infinite;
}
.art .twinkle--late,
.scene-svg .twinkle--late {
  animation-delay: 1.2s;
}
.art .flame,
.scene-svg .flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: art-flame 0.35s ease-in-out infinite alternate;
}
.art .flag,
.scene-svg .flag {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: art-flag 1.2s ease-in-out infinite alternate;
}
.art .wheel-spin,
.scene-svg .wheel-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: art-spin 14s linear infinite;
}
.art .spray,
.scene-svg .spray,
.art .beam,
.scene-svg .beam,
.art .puff,
.scene-svg .puff {
  animation: art-pulse 1.4s ease-in-out infinite;
}
.art .orb,
.scene-svg .orb {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: art-orb 2s ease-in-out infinite;
}
.scene-svg .bob {
  animation: art-bob 3s ease-in-out infinite;
}
.scene-svg .bob--slow {
  animation-duration: 4.5s;
}
.scene-svg .drift {
  animation: art-drift 9s ease-in-out infinite alternate;
}
@keyframes art-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes art-flame {
  from { transform: scaleY(0.8) scaleX(1.05); }
  to { transform: scaleY(1.15) scaleX(0.92); }
}
@keyframes art-flag {
  from { transform: skewY(-6deg) scaleX(0.9); }
  to { transform: skewY(6deg) scaleX(1.05); }
}
@keyframes art-spin {
  to { transform: rotate(360deg); }
}
@keyframes art-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes art-orb {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(1.12); }
}
@keyframes art-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes art-drift {
  from { transform: translateX(-8px); }
  to { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .art *,
  .scene-svg * {
    animation: none !important;
  }
}
.item-card__swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--panel-border);
  margin: 3px 0;
}
.item-card__name {
  font-weight: 800;
  font-size: 0.88rem;
}
.item-card__btn {
  width: 100%;
  padding: 8px 6px;
  font-size: 0.85rem;
}
.item-card__note {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 700;
}
.item-card__note--ok {
  color: var(--success);
}
.item-card__mastery {
  font-size: 0.7rem;
  color: #c7b5ff;
  font-weight: 700;
}
.world-mall-btn {
  align-self: center;
}
.locked-panel {
  text-align: center;
}
.locked-panel__icon {
  font-size: 3rem;
}
.mall-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
}

/* ================= Achievements, profile, parent ================= */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.stat-card {
  text-align: center;
  margin-bottom: 0;
}
.stat-card__big {
  font-size: 1.5rem;
  font-weight: 900;
}
.stat-card__label {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 700;
}
.stat-card__hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 6px;
}
.stat-card .btn {
  margin-top: 8px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.badge-card {
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  filter: grayscale(1);
  opacity: 0.55;
}
.badge-card--earned {
  filter: none;
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255, 210, 61, 0.25);
}
.badge-card__icon {
  font-size: 2.2rem;
}
.badge-card__name {
  font-weight: 900;
  font-size: 0.9rem;
}
.badge-card__desc {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.badge-card__date {
  font-size: 0.72rem;
  color: var(--success);
  margin-top: 4px;
  font-weight: 800;
}
.trophy-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
}
.trophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0.45;
  filter: grayscale(1);
}
.trophy--won {
  opacity: 1;
  filter: none;
}
.trophy__icon {
  font-size: 2rem;
}
/* the graduation certificate's six class slots (Prestasi) */
.grad {
  text-align: center;
}
.grad__slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.grad__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 1.4rem;
  opacity: 0.6;
  filter: grayscale(0.6);
}
.grad__slot small {
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}
.grad__slot.is-on {
  opacity: 1;
  filter: none;
  color: #3a2a00;
  background: linear-gradient(160deg, #ffe27a, #ffb84d);
}
.grad__note {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.grad__open {
  margin-top: 4px;
}
.grad__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* the login gift's seven days on the Prestasi card */
.gift-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 6px 0;
}
.gift-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}
.gift-dot.is-on {
  background: #ffcc33;
  color: #3a2a00;
}

/* this week's ranking */
.rank__sub {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.rank__row {
  display: grid;
  grid-template-columns: 56px 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(76, 201, 240, 0.08);
}
/* Juara 1, 2 and 3 get gold, silver and bronze; Juara 4 to 10 the blue above */
.rank__row--1 {
  background: linear-gradient(135deg, rgba(255, 210, 61, 0.3), rgba(255, 210, 61, 0.08));
}
.rank__row--2 {
  background: linear-gradient(135deg, rgba(210, 220, 235, 0.28), rgba(210, 220, 235, 0.06));
}
.rank__row--3 {
  background: linear-gradient(135deg, rgba(222, 150, 90, 0.3), rgba(222, 150, 90, 0.07));
}
.rank__row.is-me {
  outline: 2px solid rgba(255, 210, 61, 0.8);
}
.rank__row--empty {
  opacity: 0.6;
  border: 1px dashed rgba(255, 255, 255, 0.25);
}
.rank__row--empty .rank__score b {
  color: var(--text-dim);
}
.rank__pos {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.rank__pos b {
  font-size: 1.3rem;
}
.rank__pos small {
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
  color: #ffd84d;
}
.rank__face {
  font-size: 1.4rem;
  line-height: 1;
}
.rank__name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank__name small {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.rank__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  white-space: nowrap;
}
.rank__score b {
  font-weight: 900;
  color: #ffd84d;
}
.rank__score small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
}
.rank__note,
.rank__mine {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.rank__mine {
  color: var(--text);
}

/* the ranking screen (js/screens/ranking.js): a podium for Juara 1–3, the list for 4–10 */
.screen--ranking {
  max-width: 720px;
}
.rk-intro {
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(16, 21, 40, 0.84);
  color: var(--text-dim);
  font-size: 0.88rem;
  text-align: center;
}
.rk-podium {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
}
.rk-podium__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rk-podium__who {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 14px;
  background: rgba(16, 21, 40, 0.88);
  text-align: center;
  animation: rk-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rk-podium__col--2 .rk-podium__who {
  animation-delay: 0.15s;
}
.rk-podium__col--1 .rk-podium__who {
  animation-delay: 0.3s;
}
.rk-podium__col.is-me .rk-podium__who {
  outline: 2px solid #ffd84d;
}
.rk-podium__who--empty {
  opacity: 0.6;
}
.rk-podium__face {
  font-size: 2.3rem;
  line-height: 1.1;
}
.rk-podium__col--1 .rk-podium__face {
  font-size: 2.9rem;
}
.rk-podium__crown {
  position: absolute;
  top: -20px;
  font-size: 1.5rem;
  animation: rk-crown 2.2s ease-in-out infinite;
}
.rk-podium__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.rk-podium__who small {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.rk-podium__score {
  font-weight: 900;
  color: #ffd84d;
}
.rk-podium__step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  border-radius: 12px 12px 4px 4px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15), 0 6px 14px rgba(0, 0, 0, 0.3);
}
.rk-podium__step span {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}
.rk-podium__step small {
  font-size: 0.75rem;
  font-weight: 900;
}
.rk-podium__col--1 .rk-podium__step {
  height: 130px;
  background: linear-gradient(180deg, #ffe27a, #e0a91c);
}
.rk-podium__col--2 .rk-podium__step {
  height: 96px;
  background: linear-gradient(180deg, #eef2f7, #9aa6b8);
}
.rk-podium__col--3 .rk-podium__step {
  height: 70px;
  background: linear-gradient(180deg, #f2b27a, #b8682f);
}
/* redrawn every 5 seconds: the pop-in plays only the first time */
.screen.no-anim .rk-podium__who {
  animation: none;
}
@keyframes rk-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rk-crown {
  50% {
    transform: translateY(-3px) rotate(-6deg);
  }
}

/* the graduation certificate (js/screens/certificate.js): two looks, "ceria" and "klasik". Everything inside is
   sized in em, and the sheet's font size follows its width, so the same layout fits a phone, a laptop and A4 paper. */
.screen--certificate {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 12px 40px;
}
.cert-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.cert-tools__styles {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}
.cert-tools__styles button {
  border: 0;
  padding: 8px 12px;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.cert-tools__styles button.is-on {
  background: #ffd23d;
  color: #3a2a00;
}
.cert-tools__test {
  flex: 1 1 100%;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(163, 116, 255, 0.22);
  border: 1px dashed rgba(163, 116, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 800;
}
.cert-tools__name {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dim);
}
.cert-tools__name input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: #1f2433;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
}
.cert-cheer {
  width: fit-content;
  margin: 0 auto 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe27a, #ffb84d);
  color: #3a2a00;
  font-weight: 900;
  font-size: 1.1rem;
  text-align: center;
  animation: cert-cheer 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.cert {
  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  font-size: min(14.6px, calc((100vw - 24px) * 0.0151));
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #2b2a6b;
}
.cert * {
  box-sizing: border-box;
}

/* "ceria": a rainbow frame, the player's hero on a podium, the six classes as coloured badges */
.cert--ceria {
  padding: 1.1em;
  border-radius: 1.6em;
  background: linear-gradient(135deg, #4cc9f0, #3ddc84, #ffd23d, #ff9f45, #ff4d6d, #a374ff);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.3);
}
.certc {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 31% 1fr;
  border-radius: 1em;
  overflow: hidden;
  background: #fffdf7;
}
/* a faint + − × ÷ watermark (drawn as lines, so no font is needed) */
.certc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg stroke-width='6' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 14v28M16 28h28' stroke='%23ffb020'/%3E%3Cpath d='M88 30h26' stroke='%234cc9f0'/%3E%3Cpath d='M22 92l20 20M42 92l-20 20' stroke='%23ff4d6d'/%3E%3Cpath d='M88 104h26' stroke='%23a374ff'/%3E%3C/g%3E%3Cg fill='%23a374ff'%3E%3Ccircle cx='101' cy='92' r='3.6'/%3E%3Ccircle cx='101' cy='116' r='3.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 9em 9em;
  opacity: 0.13;
}
/* a gold inner frame, with a flourish in each corner */
.certc::after {
  content: "";
  position: absolute;
  inset: 0.55em;
  z-index: 2;
  border: 0.16em solid #e6b034;
  border-radius: 0.7em;
  box-shadow: inset 0 0 0 0.14em #fffdf7, inset 0 0 0 0.24em rgba(230, 176, 52, 0.5);
  pointer-events: none;
}
.certc__corner {
  position: absolute;
  z-index: 3;
  width: 3.4em;
  height: 3.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M4 56V16Q4 4 16 4h40' stroke='%23d99a1e' stroke-width='3'/%3E%3Cpath d='M11 46V20q0-9 9-9h26' stroke='%23f2c14e' stroke-width='2'/%3E%3Cpath d='M20 34q0-14 14-14' stroke='%23ff4d6d' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M20 9l6 7-6 7-6-7z' fill='%23ffd23d' stroke='%23c98a10' stroke-width='1.5'/%3E%3Ccircle cx='56' cy='4' r='2.6' fill='%23d99a1e'/%3E%3Ccircle cx='4' cy='56' r='2.6' fill='%23d99a1e'/%3E%3Ccircle cx='34' cy='20' r='2.2' fill='%23ff4d6d'/%3E%3Ccircle cx='20' cy='34' r='2.2' fill='%23ff4d6d'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.certc__corner.tl {
  top: 0.3em;
  left: 0.3em;
}
.certc__corner.tr {
  top: 0.3em;
  right: 0.3em;
  transform: rotate(90deg);
}
.certc__corner.br {
  bottom: 0.3em;
  right: 0.3em;
  transform: rotate(180deg);
}
.certc__corner.bl {
  bottom: 0.3em;
  left: 0.3em;
  transform: rotate(-90deg);
}
.certc__side {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background: radial-gradient(ellipse at 50% 38%, #fffbe8 0%, #e3f3ff 55%, #fff0c2 100%);
  border-right: 0.25em dashed #ffcf5a;
}
/* slowly turning gold rays and a glow behind the hero */
.certc__burst {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 165%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 200, 0.95) 0 16%, transparent 40%), repeating-conic-gradient(rgba(255, 190, 30, 0.42) 0 8deg, transparent 8deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%);
  mask: radial-gradient(circle, #000 22%, transparent 66%);
  transform: translate(-50%, -50%);
  animation: certc-spin 40s linear infinite;
}
.certc__side .certc__hero {
  position: relative;
  width: 82%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 0.5em 0.4em rgba(0, 0, 0, 0.2));
}
.certc__side .hero--emoji {
  font-size: 6em;
}
.certc__podium {
  position: relative;
  width: 72%;
  padding: 0.55em 0 0.5em;
  border-radius: 0.8em 0.8em 0.2em 0.2em;
  background: linear-gradient(180deg, #ffe57a, #ffc22e 45%, #e89a00);
  color: #5a3d00;
  font-weight: 900;
  font-size: 1.35em;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 0.06em 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0.2em 0 rgba(255, 255, 255, 0.55), inset 0 -0.3em 0 rgba(0, 0, 0, 0.14), 0 0.35em 0 #b97800, 0 0.6em 0.8em rgba(0, 0, 0, 0.18);
}
.certc__lv {
  position: relative;
  margin-top: 0.5em;
  padding: 0.3em 1em;
  border-radius: 99em;
  background: linear-gradient(135deg, #7b5cff, #a374ff);
  color: #fff;
  font-weight: 900;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 0.2em 0 #5236c9;
}
.certc__main {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.4em 2.2em 1.2em;
  text-align: center;
}
/* a banner ribbon: the body, and a notched end on each side set a little lower */
.certc__ribbon {
  position: relative;
  padding: 0.38em 2.4em;
  background: linear-gradient(180deg, #ff7390, #ff4d6d 55%, #e63558);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.2em;
  font-size: 1.05em;
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 0.25em 0 #c92a4a;
}
.certc__ribbon::before,
.certc__ribbon::after {
  content: "";
  position: absolute;
  top: 0.45em;
  left: -1.5em;
  width: 1.5em;
  height: 100%;
  background: linear-gradient(180deg, #e63558, #b8233f);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.55em 50%);
}
.certc__ribbon::after {
  left: auto;
  right: -1.5em;
  transform: scaleX(-1);
}
.certc__title {
  font-size: 3.6em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #2f7bff, #a374ff, #ff4d6d, #ff9f45);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.05em 0 #fff) drop-shadow(0 0.08em 0.06em rgba(60, 40, 120, 0.25));
}
.certc__sub {
  font-weight: 800;
  font-size: 1.1em;
}
.certc__given {
  color: #6a6f86;
}
.certc__name {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  font-size: 3em;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0.06em 0.06em 0 #ffd23d;
}
.certc__name [data-cert-name] {
  min-width: 0;
  padding: 0 0.3em 0.08em;
  overflow-wrap: anywhere;
  background: linear-gradient(90deg, transparent, #f3c34a 15%, #f3c34a 85%, transparent) bottom / 100% 0.07em no-repeat;
}
/* a gold laurel branch on each side of the name (the right one is the left one mirrored) */
.certc__laurel {
  flex: none;
  width: 0.5em;
  height: 1.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 40 86'%3E%3Cpath d='M30 78Q6 50 14 4' fill='none' stroke='%23c98a10' stroke-width='2.4' stroke-linecap='round'/%3E%3Cg fill='%23f2c14e' stroke='%23b57a00' stroke-width='1'%3E%3Cellipse cx='17.8' cy='67.3' rx='3' ry='6.5' transform='rotate(-72 17.8 67.3)'/%3E%3Cellipse cx='24.3' cy='63.3' rx='3' ry='6.5' transform='rotate(8 24.3 63.3)'/%3E%3Cellipse cx='12.6' cy='55.4' rx='3' ry='6.5' transform='rotate(-62 12.6 55.4)'/%3E%3Cellipse cx='19.8' cy='52.5' rx='3' ry='6.5' transform='rotate(18 19.8 52.5)'/%3E%3Cellipse cx='9.3' cy='41.8' rx='3' ry='6.5' transform='rotate(-52 9.3 41.8)'/%3E%3Cellipse cx='16.8' cy='40.2' rx='3' ry='6.5' transform='rotate(28 16.8 40.2)'/%3E%3Cellipse cx='8' cy='27.3' rx='3' ry='6.5' transform='rotate(-44 8 27.3)'/%3E%3Cellipse cx='15.7' cy='26.7' rx='3' ry='6.5' transform='rotate(36 15.7 26.7)'/%3E%3Cellipse cx='8.8' cy='12.5' rx='3' ry='6.5' transform='rotate(-36 8.8 12.5)'/%3E%3Cellipse cx='16.5' cy='13.1' rx='3' ry='6.5' transform='rotate(44 16.5 13.1)'/%3E%3Cellipse cx='14.6' cy='0' rx='2.8' ry='6' transform='rotate(4 14.6 0)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.certc__laurel--r {
  transform: scaleX(-1);
}
.certc__spark {
  position: absolute;
  color: #f5b301;
  font-size: 1.6em;
  line-height: 1;
  text-shadow: 0 0 0.3em rgba(255, 210, 61, 0.9);
  animation: certc-twinkle 2.2s ease-in-out var(--d) infinite;
}
.certc__text {
  max-width: 88%;
  margin: 0;
  line-height: 1.45;
  color: #4a5068;
}
.certc__worlds {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5em;
}
.certc__world {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35em 0.2em 0.45em;
  border-radius: 0.9em;
  color: #fff;
  font-weight: 800;
  font-size: 0.72em;
  line-height: 1.2;
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 0.14em rgba(255, 255, 255, 0.5), 0 0.3em 0 rgba(0, 0, 0, 0.15), 0 0.5em 0.8em rgba(0, 0, 0, 0.12);
}
/* (a gloss on the top half of each badge) */
.certc__world::before {
  content: "";
  position: absolute;
  inset: 0.14em 0.14em 50%;
  border-radius: 0.8em 0.8em 0.3em 0.3em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent);
  pointer-events: none;
}
.certc__world img {
  width: 100%;
  max-width: 5em;
  aspect-ratio: 1;
  object-fit: contain;
}
.certc__world .boss-img--emoji {
  font-size: 2.6em;
}
.certc__world b {
  font-size: 1.1em;
}
.certc__world i {
  position: absolute;
  top: -0.5em;
  right: -0.4em;
  width: 1.6em;
  height: 1.6em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3ddc84;
  color: #fff;
  font-style: normal;
  font-size: 1.1em;
  box-shadow: 0 0 0 0.15em #fff;
}
.certc__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
}
.certc__stats span {
  padding: 0.3em 1em;
  border: 0.12em solid #3ddc84;
  border-radius: 99em;
  background: #dcfce9;
  color: #146c3c;
  font-weight: 900;
  font-size: 0.95em;
}
.certc__stats span:first-child {
  border-color: #f3c34a;
  background: #fff4cc;
  color: #7a5200;
}
.certc__stats span:last-child {
  border-color: #a374ff;
  background: #ece8ff;
  color: #4b2fb0;
}
.certc__foot,
.certk__foot {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.2em;
}
.certc__sign {
  padding-top: 0.3em;
  border-top: 0.12em dashed #a9b2d0;
  font-weight: 800;
}
.certc__sign small,
.certk__sign small {
  display: block;
  font-weight: 600;
  font-size: 0.75em;
}
.certc__sign small {
  color: #7b819a;
}
/* the LULUS seal: a pleated gold rosette with two ribbon tails */
.certc__stamp {
  position: relative;
  width: 6.2em;
  height: 6.2em;
  margin-bottom: 0.5em;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0.25em 0.3em rgba(120, 70, 0, 0.3));
}
.certc__stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(#ffd23d 0 7.5deg, #e8a400 7.5deg 15deg);
  clip-path: polygon(50% 0, 61% 9%, 75% 5%, 79% 19%, 93% 21%, 91% 35%, 100% 46%, 92% 57%, 97% 71%, 83% 76%, 79% 90%, 65% 88%, 54% 99%, 43% 90%, 29% 95%, 24% 81%, 9% 79%, 11% 65%, 0 54%, 8% 43%, 3% 29%, 17% 24%, 21% 10%, 35% 12%);
}
.certc__stamp span {
  position: relative;
  z-index: 2;
  width: 74%;
  height: 74%;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b8, #ffd23d 45%, #e09a00);
  box-shadow: inset 0 0 0 0.16em #fffbe6, inset 0 0 0 0.3em #d68f00;
  color: #7a4a00;
  font-weight: 900;
  font-size: 0.8em;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-shadow: 0 0.06em 0 rgba(255, 255, 255, 0.6);
}
.certc__stamp b {
  font-size: 1.5em;
  line-height: 1;
  color: #ff4d6d;
}
.certc__stamp i {
  position: absolute;
  top: 55%;
  left: 24%;
  width: 1.8em;
  height: 3.6em;
  background: linear-gradient(180deg, #4cc9f0, #2f7bff);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform: rotate(22deg);
  transform-origin: top center;
}
.certc__stamp i + i {
  left: auto;
  right: 24%;
  background: linear-gradient(180deg, #ff6b86, #d92d50);
  transform: rotate(-22deg);
}

/* "klasik": a gold diploma with the six bosses as medals and a red LULUS seal */
.cert--klasik {
  padding: 1.4em;
  border-radius: 0.6em;
  background: linear-gradient(135deg, #b8862b, #f3d27a 30%, #b8862b 55%, #f6dc8c 80%, #a8761f);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.3);
}
.certk {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.2em 4em 1.8em;
  text-align: center;
  color: #3b2f1a;
  background: radial-gradient(ellipse at 50% 40%, #fffdf6 0%, #fbf3dc 60%, #f1e2b8 100%);
  box-shadow: inset 0 0 0 0.35em #fffaf0, inset 0 0 0 0.55em #b8862b, inset 0 0 0 0.9em #fffaf0, inset 0 0 0 1em #c99a3c;
}
.certk__corner {
  position: absolute;
  font-size: 2em;
  line-height: 1;
  color: #b8862b;
}
.certk__corner.tl {
  top: 0.75em;
  left: 0.85em;
}
.certk__corner.tr {
  top: 0.75em;
  right: 0.85em;
}
.certk__corner.bl {
  bottom: 0.65em;
  left: 0.85em;
}
.certk__corner.br {
  bottom: 0.65em;
  right: 0.85em;
}
.certk__brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 900;
  font-size: 0.95em;
  letter-spacing: 0.3em;
  color: #6b4e12;
}
.certk__brand img {
  width: 2.2em;
  height: 2.2em;
}
.certk__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2em;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #d9a521, #8a5d0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.certk__sub {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: #8a6a24;
}
.certk__given {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.15em;
  color: #6b5a3a;
}
.certk__name {
  max-width: 100%;
  padding: 0 1.2em 0.1em;
  border-bottom: 0.08em solid #c99a3c;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 3.4em;
  line-height: 1.15;
  color: #1f2a5c;
  overflow-wrap: anywhere;
}
.certk__text {
  max-width: 70%;
  margin: 0;
  font-size: 1.1em;
  line-height: 1.5;
  color: #4a3f2a;
}
.certk__bosses {
  display: flex;
  gap: 1.1em;
}
.certk__medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  font-size: 0.78em;
  font-weight: 800;
  color: #6b4e12;
}
.certk__coin {
  width: 4.6em;
  height: 4.6em;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cf, #e7bf4f 60%, #b8862b);
  box-shadow: 0 0 0 0.2em #fffaf0, 0 0 0 0.32em #c99a3c;
}
.certk__coin img {
  width: 115%;
  height: 115%;
  margin-top: 18%;
  object-fit: contain;
}
.certk__coin .boss-img--emoji {
  font-size: 2.2em;
}
.certk__sign {
  padding-top: 0.3em;
  border-top: 0.1em solid #8a6a24;
  font-weight: 800;
}
.certk__sign small {
  color: #7a6a4a;
}
.certk__seal {
  position: relative;
  width: 6em;
  height: 6em;
  display: grid;
  place-items: center;
}
.certk__seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(#c9302c 0 10deg, #a8211e 10deg 20deg);
  clip-path: polygon(50% 0, 61% 9%, 75% 5%, 79% 19%, 93% 21%, 91% 35%, 100% 46%, 92% 57%, 97% 71%, 83% 76%, 79% 90%, 65% 88%, 54% 99%, 43% 90%, 29% 95%, 24% 81%, 9% 79%, 11% 65%, 0 54%, 8% 43%, 3% 29%, 17% 24%, 21% 10%, 35% 12%);
}
.certk__seal span {
  position: relative;
  width: 4.2em;
  height: 4.2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b5241f;
  box-shadow: inset 0 0 0 0.2em #e9b94a;
  color: #ffe9a8;
  font-weight: 900;
  font-size: 0.9em;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

/* opening it: a short fade; the first time (graduation) a party: the sheet springs in, a shine sweeps across, the six
   badges pop up one by one, the LULUS stamp lands, and confetti falls */
.cert--enter {
  animation: cert-in 0.45s ease both;
}
.cert--party {
  animation: cert-party 1s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.cert--party::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  animation: cert-shine 1.4s 0.9s ease both;
}
.cert--party .cert-pop {
  animation: cert-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(1.1s + var(--i) * 0.17s);
}
.cert--party .cert-stamp {
  animation: cert-stamp 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 2.2s both;
}
.cert--party .certc__stamp {
  animation-name: certc-seal;
}
.cert-confetti {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}
.cert-confetti span {
  position: absolute;
  top: -4vh;
  left: var(--x);
  width: 9px;
  height: 15px;
  border-radius: 2px;
  background: var(--c);
  animation: cert-fall var(--d) linear var(--delay) both;
}
@keyframes cert-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cert-party {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-4deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.03) rotate(0.6deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes cert-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@keyframes cert-pop {
  from {
    opacity: 0;
    transform: scale(0.2) translateY(1em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cert-stamp {
  0% {
    opacity: 0;
    transform: scale(3) rotate(-25deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.92) rotate(-12deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-12deg);
  }
}
@keyframes certc-seal {
  0% {
    opacity: 0;
    transform: scale(3) rotate(-30deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.92) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes certc-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.6) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(45deg);
  }
}
@keyframes certc-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes cert-fall {
  from {
    transform: translateY(0) rotate(0);
  }
  to {
    transform: translateY(110vh) rotate(var(--r));
  }
}
@keyframes cert-cheer {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* (no "fewer animations" exception here: the owner wants the graduation party seen on every device, 2026-10-20) */
@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }
  /* only the sheet: no backgrounds, toasts, tool bar or confetti, and nothing left over to spill onto a second page */
  body > *:not(#app),
  .cert-tools,
  .cert-cheer,
  .cert-confetti {
    display: none !important;
  }
  html,
  body {
    height: 210mm;
    overflow: hidden;
    background: #fff !important;
  }
  body * {
    visibility: hidden;
  }
  .cert,
  .cert * {
    visibility: visible;
  }
  .cert {
    position: fixed;
    inset: 0;
    width: 297mm;
    height: 210mm;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    font-size: 16.5px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cert,
  .cert * {
    animation: none !important;
  }
  .cert::after {
    display: none;
  }
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-hero__name {
  font-size: 1.4rem;
  font-weight: 900;
}
.profile-hero__sub {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  word-break: break-word;
}
.mastery-list {
  margin-top: 10px;
}
.settings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.parent-gate {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.parent-gate p {
  margin: 0;
  color: var(--text-dim);
}
.parent-gate__q {
  font-size: 2rem;
  font-weight: 900;
}
.parent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.parent-table th {
  text-align: left;
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 4px 6px;
}
.parent-table td {
  padding: 6px;
  border-top: 1px solid var(--panel-border);
  vertical-align: middle;
}
.parent-table td .bar {
  margin: 0;
  min-width: 70px;
}
.gap-row {
  padding: 6px 0;
  font-size: 0.9rem;
}
.gap-sub {
  margin-top: 8px;
  font-weight: 800;
  font-size: 0.85rem;
}
.gap-list {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 0.85rem;
  line-height: 1.6;
}
.gap-ok {
  color: var(--success);
  font-weight: 700;
  font-size: 0.9rem;
}
/* this week's report on the parent dashboard (parent.js weekPanel) */
.wk__range {
  font-weight: 700;
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-left: 6px;
}
.wk__nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.wk__nums > div {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.wk__nums b {
  font-size: 1.15rem;
}
.wk__nums span {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 700;
}
.wk-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 120px;
  align-items: end;
  padding: 6px 4px 0;
}
.wk-bar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.wk-bar__n {
  font-size: 0.72rem;
  font-weight: 900;
}
.wk-bar__fill {
  width: 70%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #ffd23d, #ff9f45);
}
.wk-bar__day {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 800;
}
.wk__weak {
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}
.wk__share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* printable practice sheets (js/worksheet.js) */
.ws__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 12px;
  margin-top: 10px;
}
.ws__form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-dim);
}
.ws__form select {
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.ws__form select option {
  color: #1d2433;
}
.ws__wide {
  grid-column: span 2;
}
.ws__check {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
}
.ws__check input {
  width: 18px;
  height: 18px;
}
.ws__go {
  grid-column: 1 / -1;
}
@media (max-width: 420px) {
  .ws__wide {
    grid-column: 1 / -1;
  }
}
.ws-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #eef2f7;
}
.ws-overlay__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ================= Gameplay extras ================= */
.question-card__text--long {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 800;
}
.q-emojis {
  font-size: 2rem;
  letter-spacing: 2px;
  margin-top: 8px;
  word-break: break-all;
}
.q-hint {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-top: 6px;
}
.q-box {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border: 3px dashed var(--gold);
  border-radius: 10px;
  color: var(--gold);
}
.q-figs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 10px auto 2px;
}
.q-fig {
  display: block;
  width: 96px;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.18));
}
.q-fig--wide {
  width: min(280px, 100%);
}
.q-fig--grid {
  width: min(220px, 100%);
}
.q-fig--coin {
  width: 60px;
}
.q-figs--row .q-fig {
  width: 52px;
}
.q-figs--row .q-fig--coin {
  width: 58px;
}
/* 2025 curriculum question pictures (questions2.js) */
.q-fig--chart {
  width: min(270px, 100%);
}
.q-fig--net {
  width: 66px;
}
.q-fig--mid {
  width: min(170px, 100%);
}
.q-fig--tally {
  width: auto;
  height: 60px;
}
.q-figs--nets {
  gap: 14px;
}
.q-figs--col {
  flex-direction: column;
  gap: 2px;
}
.q-fig--strip {
  width: auto;
  height: 36px;
}
.q-emojis--spaced {
  letter-spacing: 12px;
}
.q-cross {
  position: relative;
  display: inline-block;
}
.q-cross > span {
  opacity: 0.4;
  filter: grayscale(0.7);
}
.q-cross::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4d6d;
  font-size: 1.15em;
  font-weight: 900;
}
.q-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.q-groups span {
  padding: 4px 8px;
  border: 2px dashed currentColor;
  border-radius: 12px;
  font-size: 1.45rem;
  letter-spacing: 1px;
}
.q-stack {
  display: table;
  margin: 8px auto 0;
  padding: 4px 16px 0;
  border-bottom: 4px solid currentColor;
  font-size: 2rem;
  line-height: 1.12;
}
.q-queue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.q-queue span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  font-weight: 800;
}
.q-data {
  display: inline-block;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 10px;
  font-size: 1.05rem;
}
.q-data__title {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.feedback-slot .feedback {
  display: inline-block;
  background: rgba(16, 21, 40, 0.9);
  border-radius: 999px;
  padding: 8px 18px;
}
.answers-grid--few {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.boss {
  display: flex;
  align-items: center;
  gap: 16px;
  border-color: rgba(255, 77, 109, 0.6);
}
.boss__emoji {
  font-size: 3.6rem;
  filter: drop-shadow(0 0 14px rgba(255, 77, 109, 0.6));
}
.boss__info {
  flex: 1;
}
.boss__name {
  font-weight: 900;
}
.boss__hp-text {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dim);
}
.boss--hit .boss__emoji {
  animation: shake 0.5s ease;
  filter: drop-shadow(0 0 16px #fff) brightness(1.4);
}
.boss--attack .boss__emoji {
  animation: boss-lunge 0.5s ease;
}
@keyframes boss-lunge {
  50% {
    transform: scale(1.35) translateY(8px);
  }
}

.runner-track {
  position: relative;
  height: 58px;
  padding: 0;
  background: linear-gradient(180deg, rgba(16, 21, 40, 0.85) 60%, rgba(95, 191, 92, 0.6) 60%);
}
.runner-char {
  position: absolute;
  bottom: 10px;
  font-size: 2rem;
  transform: scaleX(-1);
  transition: left 0.6s ease;
}
.runner-char--trip {
  animation: shake 0.5s ease;
}
.runner-flag {
  position: absolute;
  right: 10px;
  bottom: 12px;
  font-size: 1.8rem;
}
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.door-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
}
.door-btn__door {
  font-size: 2.6rem;
}
.door-btn__value {
  font-size: 1.2rem;
  font-weight: 900;
}

/* ================= Result ================= */
.result-card__subtitle {
  color: var(--text-dim);
  font-weight: 700;
  margin: -8px 0 10px;
}
.result-mastery {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
}
.result-extra {
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 0.92rem;
}
.result-extra--cert {
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  color: #3a2a00;
  font: inherit;
  font-weight: 900;
  background: linear-gradient(135deg, #ffe27a, #ffb84d);
  animation: pop-in 0.6s ease;
}
.result-extra--level {
  background: linear-gradient(135deg, rgba(255, 210, 61, 0.35), rgba(255, 159, 69, 0.25));
  font-size: 1.1rem;
  font-weight: 900;
  animation: pop-in 0.6s ease;
}
.result-card__actions {
  margin-top: 14px;
}
/* the questions answered wrong, each folded with its answer and how to work it out (result.js mistakesMarkup) */
.rmiss {
  margin-top: 10px;
  text-align: left;
}
.rmiss__head {
  font-weight: 900;
  margin-bottom: 6px;
}
.rmiss__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
}
.rmiss__item details {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #2b2a4a;
  padding: 8px 10px;
}
.rmiss__item summary {
  cursor: pointer;
  display: grid;
  gap: 2px;
  font-weight: 700;
  line-height: 1.35;
}
.rmiss__q .q-fig,
.rmiss__q svg,
.rmiss__q .q-emojis {
  max-height: 80px;
  max-width: 100%;
}
.rmiss__q .q-box {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  border-radius: 6px;
  background: #ffe9a8;
}
.rmiss__a {
  font-size: 0.9rem;
  color: #0f8a4a;
}
.caranya--list {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

/* ================= Toast & chest ================= */
#toast-root {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: min(92vw, 440px);
  pointer-events: none;
}
.toast {
  background: rgba(16, 21, 40, 0.96);
  border: 1px solid var(--gold);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: pop-in 0.35s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast--out {
  opacity: 0;
  transform: translateY(10px);
}
.chest-modal p {
  margin: 6px 0 16px;
}
.chest-modal__prize {
  font-size: 4rem;
  animation: pop-in 0.6s ease;
}

/* ================= Responsive ================= */
@media (max-width: 720px) {
  .home-grid,
  .play-row {
    grid-template-columns: 1fr;
  }
  .hud {
    grid-template-columns: 1fr auto;
  }
  .hud__level {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 480px) {
  .menu-grid,
  .mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .path-node {
    width: 92%;
  }
  .path-node__bubble {
    width: 58px;
    height: 58px;
  }
  .path-node__icon {
    font-size: 1.6rem;
  }
  .screen-header__title {
    font-size: 1rem;
  }
  .question-card__text--long {
    font-size: 1.05rem;
  }
  .parent-table th:nth-child(2),
  .parent-table td:nth-child(2) {
    display: none;
  }
}

/* Kid-friendly "cara mudahnya" bubble and numbered worked examples (js/lessons.js). */
.lesson__easy {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(61, 220, 132, 0.12);
  border: 2px dashed rgba(61, 220, 132, 0.55);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 1.08rem;
  line-height: 1.5;
}
.lesson__easy-ico {
  flex: none;
  font-size: 2rem;
  line-height: 1;
}
.lesson__easy b {
  color: var(--success);
}
.lesson__examples {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.lesson__examples .lesson__example {
  margin-bottom: 0;
}
.lesson__head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lesson__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--map-color);
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
}
.lesson__steps li:last-child {
  font-weight: 800;
  color: var(--success);
}

/* 🏆 Latihan bertingkat on the lesson screen (js/latihan*.js): recap + basic / middle / challenge questions. */
.latihan {
  margin-top: 18px;
}
.latihan__level {
  border-radius: var(--radius-md);
  padding: 12px 14px 6px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.latihan__level--d {
  border-left: 5px solid #3ddc84;
}
.latihan__level--m {
  border-left: 5px solid #4cc9f0;
}
.latihan__level--h {
  border-left: 5px solid #ff7a45;
  background: rgba(255, 122, 69, 0.07);
}
.latihan__title {
  margin: 0;
  font-size: 1.05rem;
}
.latihan__hint {
  margin: 2px 0 10px;
  font-size: 0.84rem;
  opacity: 0.75;
}
.latihan__soal {
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.latihan__det summary {
  cursor: pointer;
  margin-top: 8px;
  font-weight: 800;
  color: #ffe9a0;
}
.latihan__det .lesson__steps {
  margin-top: 8px;
}
.latihan__jawab {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(61, 220, 132, 0.14);
  border: 1px solid rgba(61, 220, 132, 0.45);
}

/* ---------- the graduation party (js/screens/graduation.js) ----------
   A night sky with turning light rays, fireworks and confetti; the hero springs in and a graduation cap flies up and
   lands on its head; "SELAMAT!" and "KAMU LULUS!" drop in letter by letter; the message, the six bosses (each with a
   tick), the totals and the buttons follow. It always plays (the owner wants it seen, even with fewer animations set). */
.screen--graduation {
  position: relative;
  max-width: none;
  min-height: 100vh;
  padding: 18px 16px 40px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: none;
}
.grd-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255, 214, 102, 0.34), transparent 40%), radial-gradient(circle at 50% 120%, rgba(163, 116, 255, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(14, 10, 46, 0.93), rgba(34, 14, 74, 0.92));
  animation: grd-fade 0.8s ease both;
}
.grd-rays {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, 0.17) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 0, rgba(0, 0, 0, 0.6) 30%, transparent 78%);
  mask: radial-gradient(circle closest-side, #000 0, rgba(0, 0, 0, 0.6) 30%, transparent 78%);
  animation: grd-spin 30s linear infinite;
}
.grd-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  text-align: center;
}

/* the hero, with a glow behind, a graduation cap and a trophy */
.grd-hero {
  position: relative;
  width: 140px;
  height: 140px;
  margin-top: 40px;
  animation: grd-hero-in 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) 0.2s both;
}
.grd-hero__glow {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 120, 0.8), rgba(255, 226, 120, 0) 65%);
  animation: grd-pulse 1.8s ease-in-out infinite;
}
.grd-hero__body {
  position: absolute;
  inset: 0;
  display: block;
  animation: grd-jump 1.1s ease-in-out 2s infinite;
}
.grd-hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}
.hero--emoji.grd-hero__img {
  display: grid;
  place-items: center;
  font-size: 120px;
}
.grd-cap {
  position: absolute;
  left: 50%;
  top: -18%;
  margin-left: -33px;
  font-size: 66px;
  line-height: 1;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
  animation: grd-cap 1.6s cubic-bezier(0.3, 0.6, 0.4, 1) 0.4s both;
}
.grd-trophy {
  position: absolute;
  right: -40%;
  bottom: 4%;
  font-size: 58px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
  animation: grd-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.1s both, grd-wiggle 2s ease-in-out 2s infinite;
}

/* the title, letter by letter */
.grd-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.grd-title > span > span {
  display: inline-block;
  animation: grd-letter 0.55s cubic-bezier(0.2, 1.7, 0.4, 1) both;
  animation-delay: calc(var(--start) + var(--i) * var(--step));
}
.grd-title__top {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-shadow: 0 3px 0 #a374ff, 0 6px 16px rgba(0, 0, 0, 0.5);
}
.grd-title__main {
  font-size: clamp(2.5rem, 8vw, 4.3rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}
.grd-title__main > span {
  background: linear-gradient(180deg, #fff6c2 0%, #ffd23d 45%, #ff9f1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #b4570b) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
.grd-msg {
  max-width: 660px;
  margin: 2px 0 0;
  padding: 11px 18px;
  border-radius: 18px;
  background: rgba(16, 21, 40, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1rem;
  line-height: 1.5;
  animation: grd-up 0.7s ease 2.2s both;
}
.grd-msg b {
  color: #ffe36e;
}

/* the six beaten bosses */
.grd-bosses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.grd-boss {
  position: relative;
  width: 92px;
  padding: 6px 4px 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--c), var(--c2));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.25);
  animation: grd-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(2.7s + var(--i) * 0.18s);
}
.grd-boss__img {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto;
  object-fit: contain;
}
.boss-img--emoji.grd-boss__img {
  display: grid;
  place-items: center;
  font-size: 50px;
}
.grd-boss small {
  display: block;
  font-size: 0.8rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.grd-boss__check {
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3ddc84;
  color: #ffffff;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  animation: grd-stamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(2.95s + var(--i) * 0.18s);
}
.grd-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  animation: grd-up 0.6s ease 3.9s both;
}
.grd-stats span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
  font-weight: 800;
}
.grd-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  animation: grd-up 0.6s ease 4.2s both;
}
.grd-go {
  padding: 14px 26px;
  background: linear-gradient(135deg, #ffd23d, #ff9f1c);
  color: #3a2400;
  font-size: 1.1rem;
  animation: grd-glow 1.6s ease-in-out 4.8s infinite;
}
.grd-note {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(16, 21, 40, 0.78);
  font-size: 0.92rem;
}
.grd-later {
  color: #e6e0ff;
  border-color: rgba(255, 255, 255, 0.35);
}
.grd-test {
  margin: 0;
  font-size: 0.82rem;
  color: #d6c8ff;
  animation: grd-up 0.6s ease 4.4s both;
}

/* (2026-10-24, made to open like a real stage curtain at the owner's request) Red velvet curtains open the party.
   Each half is a row of 12 narrow strips of the painted velvet (assets/grad/tirai.jpg, made with Gemini and enlarged
   with Real-ESRGAN). Opening, every strip slides to the side and is squeezed, so the folds bunch up like gathered
   cloth and darken; the inner strips go first and are lifted higher, so the hem rises in a swag. The gold valance (the
   top of the same picture, cut out by the mask assets/grad/tirai-atas.png) keeps hanging over the stage while the
   curtain opens; then the gathered drapes are drawn off to the sides and the valance is flown up, clearing the stage.
   The 16:9 picture keeps its shape (covering the screen, its middle on the seam), so phones see the centre instead of
   a squeezed picture. Until the picture loads, drawn velvet folds stand in. Every resting state is the cleared one,
   so the curtains can never stay shut if animations do not run. */
.grd-drape {
  --grd-half: max(51vw, 88.9vh); /* half the picture's width */
  --grd-w: calc(51vw / 12); /* one strip */
  --grd-s: 0.2; /* how tightly the opened cloth is gathered */
}
.grd-curtain {
  --dir: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  width: 51vw;
  pointer-events: none;
  transform: translateX(calc(var(--dir) * (-51vw * var(--grd-s) - 60px)));
  animation: grd-drape-off 4.8s ease-in both;
}
.grd-curtain--r {
  --dir: -1;
  left: auto;
  right: 0;
}
.grd-curtain i {
  --tx: calc(var(--i) * var(--grd-w) * (var(--grd-s) - 1));
  --ty: calc(var(--i) * var(--i) * -0.2vh);
  --d: calc(0.25s + (11 - var(--i)) * 0.045s);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * var(--grd-w));
  width: calc(var(--grd-w) + 1px);
  background:
    url("../assets/grad/tirai.jpg?v=2") calc(51vw - var(--grd-half) - var(--i) * var(--grd-w)) 50% / calc(var(--grd-half) * 2) auto no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(90deg, #6e0a19 0, #b3182f 16px, #d8304a 24px, #b3182f 32px, #6e0a19 48px);
  transform-origin: 0 50%;
  transform: translateX(calc(var(--tx) * var(--dir))) translateY(var(--ty)) scaleX(var(--grd-s)) skewX(0deg);
  animation: grd-cloth 2.4s cubic-bezier(0.55, 0, 0.25, 1) var(--d) both;
}
.grd-curtain--r i {
  left: auto;
  right: calc(var(--i) * var(--grd-w));
  background-position: calc(-51vw - var(--grd-half) + (var(--i) + 1) * var(--grd-w) + 1px) 50%, 0 0, 0 0;
  transform-origin: 100% 50%;
}
/* the folds deepen as the cloth bunches up; the leading strip throws a shadow onto the stage */
.grd-curtain i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05) 30%, rgba(255, 220, 190, 0.16) 52%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0.45));
  animation: grd-fold 2.4s ease var(--d) both;
}
.grd-curtain i:last-child {
  box-shadow: calc(var(--dir) * 14px) 0 30px rgba(0, 0, 0, 0.6);
}
.grd-valance {
  position: fixed;
  z-index: 9;
  left: calc(50vw - var(--grd-half));
  top: calc((100vh - var(--grd-half) * 1.125) / 2);
  width: calc(var(--grd-half) * 2);
  aspect-ratio: 2560 / 340;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
  transform: translateY(-115%);
  animation: grd-valance 5.2s ease-in both;
}
.grd-valance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/grad/tirai.jpg?v=2") 50% 0 / 100% auto no-repeat;
  -webkit-mask: url("../assets/grad/tirai-atas.png?v=2") 0 0 / 100% 100% no-repeat;
  mask: url("../assets/grad/tirai-atas.png?v=2") 0 0 / 100% 100% no-repeat;
}
/* two spotlights sweeping over the stage */
.grd-spot {
  position: absolute;
  top: -8%;
  width: 46vmax;
  height: 130vh;
  background: linear-gradient(180deg, rgba(255, 246, 200, 0.34), rgba(255, 246, 200, 0) 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
}
.grd-spot--l {
  left: -6%;
  animation: grd-sweep 6s ease-in-out infinite alternate;
}
.grd-spot--r {
  right: -6%;
  animation: grd-sweep 6s ease-in-out -3s infinite alternate-reverse;
}
/* confetti cannons firing from the bottom corners */
.grd-cannon {
  position: fixed;
  bottom: 0;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
}
.grd-cannon--l {
  left: 4vw;
}
.grd-cannon--r {
  right: 4vw;
}
.grd-cannon__p {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: grd-shoot 2.8s cubic-bezier(0.15, 0.7, 0.4, 1) var(--delay) both;
}
/* balloons drifting up behind the stage */
.grd-balloons {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.grd-balloon {
  position: absolute;
  bottom: -140px;
  width: 46px;
  height: 58px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7), transparent 22%), var(--c);
  box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.15);
  animation: grd-rise 10s linear var(--delay) infinite;
}
.grd-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 70px;
  background: rgba(255, 255, 255, 0.55);
}
/* the winner's podium under the hero, and a gold medal swinging beside it */
.grd-hero {
  margin-bottom: 40px;
}
.grd-podium {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -36px;
  z-index: -1;
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #ffe36e, #f0a020);
  box-shadow: 0 6px 0 #a35e00, 0 12px 22px rgba(0, 0, 0, 0.4);
  animation: grd-up 0.6s ease 0.6s both;
}
.grd-podium b {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #6b3a00;
}
.grd-medal {
  position: absolute;
  left: -38%;
  top: 16%;
  font-size: 50px;
  transform-origin: 50% -30px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
  animation: grd-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.3s both, grd-swing 1.6s ease-in-out 2s infinite;
}
/* a red ribbon unrolls behind "KAMU LULUS!" */
.grd-ribbon {
  position: relative;
  padding: 6px 38px 12px;
}
.grd-ribbon::before {
  content: "";
  position: absolute;
  inset: 12% 0 4%;
  z-index: -1;
  background: linear-gradient(180deg, #e0283a, #9a0f1d);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
  animation: grd-ribbon 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 1.15s both;
}
/* the certificate button fills up while the party counts down to the certificate (app.js GRAD_AUTO_CERT_MS) */
.grd-go {
  position: relative;
  overflow: hidden;
}
.grd-go__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(255, 255, 255, 0.45);
  animation: grd-fill 7.4s linear 4.6s forwards;
}
.grd-go__text {
  position: relative;
}
.grd-auto {
  margin: 0;
  font-size: 0.85rem;
  color: #e6e0ff;
  animation: grd-up 0.6s ease 4.4s both;
}
/* (the keyframes without a "to" end on each element's resting transform: the opened, gathered or cleared state) */
@keyframes grd-cloth {
  from {
    transform: none;
  }
  55% {
    transform: translateX(calc(var(--tx) * var(--dir) * 0.72)) translateY(calc(var(--ty) * 0.5)) scaleX(calc(0.35 + var(--grd-s) * 0.65)) skewX(calc(var(--dir) * 2.5deg));
  }
  82% {
    transform: translateX(calc(var(--tx) * var(--dir) * 1.02)) translateY(calc(var(--ty) * 1.06)) scaleX(var(--grd-s)) skewX(calc(var(--dir) * -1deg));
  }
}
@keyframes grd-fold {
  from {
    opacity: 0;
  }
}
@keyframes grd-drape-off {
  from,
  83% {
    transform: none;
  }
}
@keyframes grd-valance {
  from,
  80% {
    transform: none;
  }
}
@keyframes grd-sweep {
  from {
    transform: rotate(-24deg);
  }
  to {
    transform: rotate(24deg);
  }
}
@keyframes grd-shoot {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  55% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) rotate(var(--r));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) + 45vh)) rotate(calc(var(--r) * 2));
  }
}
@keyframes grd-rise {
  0% {
    transform: translate(0, 0) rotate(-4deg);
  }
  50% {
    transform: translate(18px, -62vh) rotate(4deg);
  }
  100% {
    transform: translate(-10px, -130vh) rotate(-4deg);
  }
}
@keyframes grd-swing {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(14deg);
  }
}
@keyframes grd-ribbon {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes grd-fill {
  to {
    width: 100%;
  }
}

/* fireworks: rings of sparks bursting again and again */
.grd-fireworks {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.grd-burst {
  position: absolute;
  width: 0;
  height: 0;
}
.grd-burst::before {
  content: "";
  position: absolute;
  left: -30px;
  top: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, var(--c) 35%, transparent 70%);
  opacity: 0;
  animation: grd-flash 2.6s ease-out var(--delay) infinite;
}
.grd-burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px 2px var(--c);
  opacity: 0;
  transform: rotate(var(--a));
  animation: grd-spark 2.6s ease-out var(--delay) infinite;
}

/* confetti raining down the whole time */
.grd-confetti {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.grd-confetti__p {
  position: absolute;
  top: -6vh;
  left: var(--x);
  width: 10px;
  height: 14px;
  border-radius: 2px;
  background: var(--c);
  animation: grd-fall var(--d) linear var(--delay) infinite;
}
.grd-confetti__p--round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.grd-confetti__p--long {
  width: 6px;
  height: 18px;
}

@keyframes grd-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes grd-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes grd-hero-in {
  from {
    opacity: 0;
    transform: scale(0.2) translateY(60px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes grd-pulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes grd-jump {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  15% {
    transform: translateY(0) scale(1.06, 0.92);
  }
  45% {
    transform: translateY(-26px) scale(0.96, 1.05);
  }
  75% {
    transform: translateY(0) scale(1.04, 0.96);
  }
}
@keyframes grd-cap {
  0% {
    opacity: 0;
    transform: translateY(150px) rotate(0deg) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  45% {
    transform: translateY(-190px) rotate(560deg) scale(1.15);
  }
  75% {
    transform: translateY(-30px) rotate(700deg) scale(1);
  }
  88% {
    transform: translateY(6px) rotate(712deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(708deg);
  }
}
@keyframes grd-letter {
  0% {
    opacity: 0;
    transform: translateY(-60px) scale(0.3) rotate(-20deg);
  }
  70% {
    opacity: 1;
    transform: translateY(6px) scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes grd-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes grd-pop {
  from {
    opacity: 0;
    transform: scale(0.2) translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes grd-stamp {
  from {
    opacity: 0;
    transform: scale(2.6) rotate(-30deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes grd-glow {
  0%,
  100% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 210, 61, 0);
  }
  50% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(255, 210, 61, 0.25), 0 0 30px rgba(255, 210, 61, 0.8);
  }
}
@keyframes grd-wiggle {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
@keyframes grd-flash {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  5% {
    opacity: 1;
    transform: scale(1);
  }
  25%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes grd-spark {
  0% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(0) scale(1);
  }
  6% {
    opacity: 1;
  }
  45% {
    opacity: 1;
    transform: rotate(var(--a)) translateY(-12vmin) scale(0.9);
  }
  70%,
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-15vmin) scale(0.3);
  }
}
@keyframes grd-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(var(--sway), 55vh) rotate(calc(var(--r) / 2));
  }
  100% {
    transform: translate(0, 112vh) rotate(var(--r));
  }
}
@media (max-width: 520px) {
  .grd-hero {
    width: 120px;
    height: 120px;
  }
  .grd-cap {
    margin-left: -27px;
    font-size: 54px;
  }
  .grd-trophy {
    font-size: 44px;
  }
  .grd-boss {
    width: 72px;
  }
  .grd-boss__img {
    width: 58px;
    height: 58px;
  }
  .grd-msg {
    font-size: 0.95rem;
  }
}


/* ===== css/journey.css ===== */
/* ================= Pilih Kelas ================= */
.screen--gradeselect {
  gap: 6px;
}
.gs-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.gs-top__who {
  flex: 1;
  min-width: 0;
}
/* names may be 30 letters long: up to two lines, then "…" */
.gs-top__name {
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.2;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gs-top__sub {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gs-top__out {
  padding: 8px 14px;
  font-size: 0.85rem;
}
.gs-top__nav .jhud__btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: 3px;
}
.gs-top__nav .jhud__btn:hover {
  filter: brightness(1.15);
}
.gs-top__nav .jhud__label {
  color: #fff;
}
@media (max-width: 760px) {
  .gs-top__nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }
  .gs-top__nav .jhud__btn {
    min-width: 0;
    flex: 1;
  }
}
.gs-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  margin-top: 14px;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.gs-sub {
  text-align: center;
  color: var(--text-dim);
  margin: 4px 0 16px;
}
.gs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.gs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), var(--panel);
  color: var(--text);
  text-align: left;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: pop-in 0.45s ease both;
}
.gs-card:nth-child(2) { animation-delay: 0.05s; }
.gs-card:nth-child(3) { animation-delay: 0.1s; }
.gs-card:nth-child(4) { animation-delay: 0.15s; }
.gs-card:nth-child(5) { animation-delay: 0.2s; }
.gs-card:nth-child(6) { animation-delay: 0.25s; }
.gs-card:hover {
  transform: translateY(-4px);
  border-color: var(--map-color);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.35), 0 0 26px var(--map-color);
}
.gs-card:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.gs-card.is-last {
  border-color: var(--gold);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 210, 61, 0.25), 0 0 30px rgba(255, 210, 61, 0.45);
}
.gs-card__scene {
  position: relative;
  height: 128px;
  overflow: hidden;
}
.gs-card__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.mini-scene {
  display: block;
  width: 100%;
  height: 100%;
}
.gs-card__grade {
  position: absolute;
  left: 10px;
  top: 10px;
  background: linear-gradient(135deg, var(--map-color), var(--map-color-dark));
  color: #fff;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.gs-card__last {
  position: absolute;
  right: 10px;
  top: 10px;
  background: var(--gold);
  color: #2b1600;
  font-weight: 900;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  animation: pulse-glow 1.8s ease-in-out infinite;
}
.gs-card__crown {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.gs-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gs-card__name {
  font-weight: 900;
  font-size: 1.2rem;
}
.gs-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 700;
}
.gs-card__boss {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ================= Learning Journey ================= */
.screen--journey {
  max-width: none;
  padding: 0 0 110px;
  background: linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
  position: relative;
}
.screen.no-anim {
  animation: none;
}
.theme-angkasa.screen--journey,
.theme-akademi.screen--journey {
  background: radial-gradient(circle at 20% 10%, rgba(163, 116, 255, 0.35), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(76, 201, 240, 0.2), transparent 40%), linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
}

.jhud {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 14px;
  background: rgba(10, 14, 30, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.jhud__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.jhud__xp {
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jhud__xp .bar {
  margin: 0;
  height: 9px;
}
.jhud__xp span {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-weight: 700;
}
.jhud__coins {
  font-weight: 900;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 210, 61, 0.35);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.jhud__nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.jhud__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 48px;
  padding: 5px 4px 4px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  transition: background 0.15s ease, transform 0.15s ease;
}
.jhud__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}
.jhud__btn:active {
  transform: scale(0.94);
}
.jhud__icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
/* the Peringkat button's podium, drawn the size of the emoji icons */
.jhud__podium {
  display: block;
  width: 1em;
  height: 1em;
}
.jhud__label {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--text-dim);
}

.jbanner {
  margin: 16px auto 0;
  padding: 10px 26px 12px;
  text-align: center;
  background: linear-gradient(180deg, var(--map-color), var(--map-color-dark));
  border: 3px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 10px 22px rgba(0, 0, 0, 0.3);
  max-width: calc(100% - 32px);
  position: relative;
  z-index: 2;
}
.jbanner__title {
  font-weight: 900;
  font-size: 1.45rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.jbanner__sub {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.95;
  margin-top: 2px;
}
/* the free demo's note under the banner (Kelas 1, levels 1-5): tap to buy the class */
.jdemo {
  display: block;
  position: relative;
  z-index: 2;
  max-width: min(520px, calc(100% - 32px));
  margin: 10px auto 0;
  padding: 9px 16px;
  border: 2px dashed rgba(255, 210, 61, 0.85);
  border-radius: 14px;
  background: rgba(20, 22, 50, 0.86);
  color: #fff3c4;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.jdemo b {
  color: #ffd23d;
}

.jmap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: -10px auto 0;
}
.jmap__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.deco-float {
  animation: deco-float 3.2s ease-in-out infinite;
}
.deco-twinkle {
  animation: deco-twinkle 2.4s ease-in-out infinite;
}
@keyframes deco-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes deco-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.jzone {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 18px 7px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--zone), color-mix(in srgb, var(--zone) 60%, #000));
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
}
.jzone b {
  font-size: 0.95rem;
}
.jzone span {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.95;
}
.jzone.is-locked {
  filter: saturate(0.35) brightness(0.85);
}

.jnode {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.75), transparent 38%), radial-gradient(circle at 50% 60%, var(--map-color), var(--map-color-dark));
  box-shadow: 0 6px 0 var(--map-color-dark), 0 10px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.jnode:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.jnode:active {
  transform: translate(-50%, calc(-50% + 3px));
  box-shadow: 0 3px 0 var(--map-color-dark), 0 6px 10px rgba(0, 0, 0, 0.35);
}
.jnode__num {
  font-weight: 900;
  font-size: 1.3rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.jnode--locked {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.5), transparent 38%), radial-gradient(circle at 50% 60%, #b9bfcc, #6b7385);
  box-shadow: 0 6px 0 #4b5264, 0 10px 14px rgba(0, 0, 0, 0.3);
  border-color: #e3e7ef;
}
.jnode--locked .jnode__num {
  color: rgba(255, 255, 255, 0.8);
}
.jnode__lock {
  position: absolute;
  right: -6px;
  bottom: -4px;
  font-size: 0.85rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.jnode--open {
  border-color: #fff6c4;
}
.jnode--current {
  width: 66px;
  height: 66px;
  border-color: var(--gold);
  animation: node-pulse 1.6s ease-in-out infinite;
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 6px 0 var(--map-color-dark), 0 0 0 0 rgba(255, 210, 61, 0.7), 0 10px 14px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 6px 0 var(--map-color-dark), 0 0 0 12px rgba(255, 210, 61, 0), 0 10px 14px rgba(0, 0, 0, 0.35); }
}
.jnode__stars {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  font-style: normal;
}
.jnode__stars i {
  display: inline-block;
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
}
.jnode__stars i.on {
  color: var(--gold);
  -webkit-text-stroke: 1px #b37a00;
  filter: drop-shadow(0 0 3px rgba(255, 210, 61, 0.8));
}
.jnode__stars i:nth-child(2) {
  transform: translateY(4px);
}
.jnode__crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
.jnode--current .jnode__crown {
  display: none;
}
.jnode--boss {
  width: 96px;
  height: 96px;
  border-width: 5px;
  border-color: #ffd23d;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.6), transparent 38%), radial-gradient(circle at 50% 60%, #ff4d6d, #6b0f2a);
  box-shadow: 0 7px 0 #4a0a1d, 0 0 30px rgba(255, 77, 109, 0.7);
  flex-direction: column;
}
.jnode--boss.jnode--locked {
  filter: saturate(0.3) brightness(0.8);
}
.jnode__boss {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4));
}
.jnode__tag {
  position: absolute;
  bottom: -12px;
  background: #1b0a14;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 999px;
  border: 2px solid var(--gold);
  letter-spacing: 0.1em;
}
.jnode--boss .jnode__stars {
  bottom: -32px;
}

.javatar {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 30px));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: avatar-hop 1.3s ease-in-out infinite;
}
.javatar .avatar-wrap {
  background: #fff;
  border-width: 3px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25), 0 0 16px rgba(255, 255, 255, 0.6);
}
.javatar::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff;
  margin-top: -2px;
}
@keyframes avatar-hop {
  0%, 100% { transform: translate(-50%, calc(-100% - 30px)); }
  50% { transform: translate(-50%, calc(-100% - 40px)); }
}

.jdock {
  position: fixed;
  right: max(14px, calc(50vw - 480px));
  bottom: 16px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jdock__btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.6), transparent 40%), linear-gradient(135deg, var(--map-color), var(--map-color-dark));
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.35);
}
.jdock__btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.jdock__label {
  font-size: 0.6rem;
  font-weight: 900;
  margin-top: 2px;
}
.jdock__btn--chest {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.6), transparent 40%), linear-gradient(135deg, #ffd23d, #d97706);
  animation: chest-wiggle 2.2s ease-in-out infinite;
}
/* questions answered wrong on an earlier day, ready to try again */
.jdock__btn--review {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.6), transparent 40%), linear-gradient(135deg, #a374ff, #6a3fd1);
}
@keyframes chest-wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-10deg); }
  90% { transform: rotate(10deg); }
  95% { transform: rotate(-6deg); }
}
.jdock__count,
.jdock__dot {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jdock__dot {
  min-width: 16px;
  height: 16px;
  animation: pulse-glow 1.4s ease-in-out infinite;
}

/* Popups on the map (level details, settings) */
.jmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.jmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 18, 0.72);
  animation: fade-in 0.2s ease;
}
@keyframes fade-in {
  from { opacity: 0; }
}
.jmodal__box {
  position: relative;
  width: min(380px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 34px 20px 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, #232b52, #141a36);
  border: 3px solid var(--zone, var(--map-color));
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), 0 0 40px color-mix(in srgb, var(--zone, var(--map-color)) 45%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: pop-in 0.3s ease;
}
.jmodal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
}
.jmodal__ribbon {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--zone, var(--map-color)), color-mix(in srgb, var(--zone, var(--map-color)) 55%, #000));
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
  padding: 7px 28px;
  border-radius: 14px;
  border: 3px solid #fff;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
.jmodal__zone {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--zone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.jmodal__hero {
  font-size: 3.4rem;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.jmodal__hero--boss {
  font-size: 4rem;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 77, 109, 0.5), rgba(163, 116, 255, 0.1));
  animation: boss-idle 1.8s ease-in-out infinite;
}
@keyframes boss-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.04); }
}
.jmodal__name {
  font-size: 1.3rem;
  font-weight: 900;
}
.jmodal__cat {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
}
.jmodal__desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}
.jmodal__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.jmodal__facts span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}
.jmodal__note {
  background: rgba(255, 210, 61, 0.14);
  border: 1px solid rgba(255, 210, 61, 0.4);
  color: #ffe58a;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
}
.jmodal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.jmodal__play {
  font-size: 1.2rem;
  padding: 14px 22px;
}
.jset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.jset__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
}
.jset__row:hover {
  background: rgba(255, 255, 255, 0.13);
}
.jset__val {
  color: var(--text-dim);
  font-size: 0.85rem;
}
.jset__row--danger {
  color: #ff9fb0;
}

/* 🎯 Pilih Tema: the chip on the map banner and the picker */
.jmodal--still .jmodal__backdrop,
.jmodal--still .jmodal__box {
  animation: none;
}
.jbanner__theme {
  margin-top: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jbanner__theme:hover {
  background: rgba(0, 0, 0, 0.35);
}
.jmodal__box--themes {
  width: min(560px, 100%);
}
.jtheme__help {
  margin: 4px 0 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.jtheme__all {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.jtheme__all.is-on {
  border-color: #ffd23d;
  background: rgba(255, 210, 61, 0.18);
}
.jtheme__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  width: 100%;
  margin: 10px 0 6px;
}
.jtheme__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  line-height: 1.2;
}
.jtheme__chip:hover {
  background: rgba(255, 255, 255, 0.12);
}
.jtheme__chip.is-on {
  border-color: var(--map-color, #3ddc84);
  background: color-mix(in srgb, var(--map-color, #3ddc84) 28%, transparent);
}
.jtheme__icon {
  font-size: 1.35rem;
  flex: none;
}
.jtheme__name {
  flex: 1;
}
.jtheme__name small {
  font-weight: 600;
  opacity: 0.75;
}
.jtheme__tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.12);
}
.jtheme__chip.is-on .jtheme__tick {
  background: var(--map-color, #3ddc84);
  color: #10142a;
}
.jtheme__item {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.jtheme__item .jtheme__chip {
  flex: 1;
  min-width: 0;
}
.jtheme__more {
  flex: none;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.jtheme__more small {
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 0.8;
  margin-top: 2px;
}
.jtheme__item.is-on .jtheme__more {
  border-color: var(--map-color, #3ddc84);
}
.jtheme__sub {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe58a;
}
.jtheme__parts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  text-align: left;
}
.jtheme__parts-title {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dim);
}
.jtheme__part {
  padding: 7px 11px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.jtheme__part.is-on {
  border-color: var(--map-color, #3ddc84);
  background: color-mix(in srgb, var(--map-color, #3ddc84) 30%, transparent);
}
.jtheme__part--all.is-on {
  border-color: #ffd23d;
  background: rgba(255, 210, 61, 0.2);
}
.jtheme__learn {
  width: 100%;
  margin: 4px 0 2px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}
.jtheme__learn-title {
  font-size: 0.84rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.jtheme__learn-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.jtheme__learn-btn,
.jtheme__video {
  border-radius: 12px;
  border: 0;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}
.jtheme__learn-btn {
  flex: 1;
  text-align: left;
  background: #3a6ff0;
  color: #fff;
}
.jtheme__video {
  flex: none;
  background: #ff4d6d;
  color: #fff;
}
.jtheme__hint {
  margin: 4px 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .jhud {
    padding: 6px 10px;
  }
  .jhud__stats {
    width: 100%;
    justify-content: space-between;
  }
  .jhud__xp {
    flex: 1;
    width: auto;
  }
  .jhud__nav {
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }
  .jhud__btn {
    min-width: 0;
    flex: 1;
  }
  .jhud__icon {
    font-size: 1.2rem;
  }
  .jbanner__title {
    font-size: 1.2rem;
  }
  .jnode {
    width: 52px;
    height: 52px;
  }
  .jnode--current {
    width: 60px;
    height: 60px;
  }
  .jnode--boss {
    width: 86px;
    height: 86px;
  }
  .jdock__btn {
    width: 54px;
    height: 54px;
    font-size: 1.4rem;
  }
}

/* ---------- class access: locked cards, first-pick confirmation, approvals ---------- */
.gs-card.is-locked .gs-card__art,
.gs-card.is-locked .gs-card__body {
  filter: grayscale(0.75) brightness(0.7);
}
.gs-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10, 14, 30, 0.45);
  padding: 8px;
  text-align: center;
}
.gs-lock__icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.gs-lock__status {
  font-size: 0.8rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.gs-lock__status--wait {
  background: #f59e2e;
}
.gs-lock__status--no {
  background: #e53935;
}
.gs-lock--demo {
  background: rgba(10, 14, 30, 0.18);
}
.gs-lock__status--demo {
  background: #ff8a3d;
}
.gs-lock__btn {
  padding: 6px 12px;
  font-size: 0.82rem;
}
.gs-approvals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 12px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid #ffd23d;
  background: rgba(20, 24, 48, 0.85);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.gs-approvals b {
  background: #e53935;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85rem;
}
.gs-confirm {
  max-width: 420px;
  text-align: center;
}
/* Kelas Trial: its card glows orange, its popup lists the 7 easy kinds of question */
.gs-card--trial {
  border-color: rgba(255, 170, 90, 0.75);
}
.gs-card__free {
  background: #ff8a3d;
  color: #fff;
}
.gs-trial {
  width: min(520px, 92vw);
  max-width: 520px;
  text-align: center;
}
.gs-trial__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
  align-self: stretch;
  margin-top: 14px;
}
.gs-trial__kind {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.12)), #2c3360;
  color: var(--text);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.gs-trial__kind:hover,
.gs-trial__kind:focus-visible {
  transform: translateY(-2px);
  border-color: #ffb066;
}
.gs-trial__icon {
  font-size: 2rem;
  line-height: 1;
}
.gs-confirm__text {
  font-size: 1.1rem;
  margin: 18px 0 8px;
}
.gs-confirm__hint {
  color: var(--text-dim);
  margin: 0 0 16px;
  line-height: 1.5;
}
.gs-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.screen--approvals .panel__title {
  margin-bottom: 10px;
}
.apv-empty,
.apv-note {
  margin: 4px 0;
  color: var(--text-dim);
  font-weight: 700;
}
.apv-req {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.apv-req__avatar {
  font-size: 1.9rem;
  flex: none;
}
.apv-req__who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 160px;
}
.apv-req__who small {
  color: var(--text-dim);
  font-weight: 700;
}
.apv-req__ask {
  font-weight: 800;
}
.apv-req__btns {
  display: flex;
  gap: 6px;
}
.apv-req__btns .btn {
  padding: 8px 12px;
  font-size: 0.85rem;
}
.apv-student {
  margin-bottom: 10px;
}
.apv-student__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.apv-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.apv-row__label {
  width: 110px;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--text-dim);
}
.apv-cls,
.apv-move,
.apv-role {
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  border-radius: 10px;
  padding: 5px 10px;
  min-width: 42px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.apv-cls.is-on,
.apv-role.is-on {
  background: #20b486;
  border-color: #20b486;
  color: #fff;
}
.apv-cls.is-wait {
  border-color: #f59e2e;
  color: #ffd23d;
}
.apv-move:hover,
.apv-cls:hover,
.apv-role:hover {
  border-color: var(--map-color, #4cc9f0);
}
.apv-cls:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 560px) {
  .apv-row__label {
    width: 100%;
  }
}

/* ---------- user management ---------- */
.gs-staff {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.gs-staff .gs-approvals {
  margin: 0;
}
a.jset__row {
  text-decoration: none;
  color: inherit;
}
.usr-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.usr-form .panel__title,
.usr-form .auth-error {
  grid-column: 1 / -1;
}
.usr-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--text-dim);
}
.usr-form input,
.usr-form select {
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 700;
}
.usr-form select option {
  color: #222;
}
.usr-row {
  margin-bottom: 10px;
}
.usr-del {
  border-color: rgba(229, 57, 53, 0.6);
  color: #ff8a80;
}
.apv-role:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- online: buying a class, request notes, store settings ---------- */
.gs-wait {
  display: block;
  margin: -4px auto 14px;
  max-width: 640px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid #f59e2e;
  background: rgba(40, 26, 6, 0.85);
  color: #ffe2a8;
  font: inherit;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.gs-wait--ticket {
  border-color: #3ddc84;
  background: rgba(6, 40, 22, 0.88);
  color: #c9ffe0;
  animation: gs-ticket-glow 1.6s ease-in-out infinite;
}
@keyframes gs-ticket-glow {
  50% {
    box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.25);
  }
}
/* 🎟️ After paying: the buyer picks the class the ticket opens. */
.gs-ticket {
  width: min(480px, 100%);
  max-width: 480px;
}
/* the daily login gift: seven days in a row */
.gs-gift__days {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 8px 0 10px;
}
.gs-gift__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.65;
}
.gs-gift__day.is-done {
  opacity: 1;
  background: rgba(61, 220, 132, 0.25);
}
.gs-gift__day.is-today {
  opacity: 1;
  color: #3a2a00;
  background: linear-gradient(160deg, #ffe27a, #ffb84d);
  box-shadow: 0 0 0 3px rgba(255, 184, 77, 0.5);
  animation: pop-in 0.6s ease;
}
.gs-gift__label {
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}
.gs-gift__prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.15rem;
  line-height: 1.1;
}
.gs-gift__prize small {
  font-size: 0.62rem;
  font-weight: 800;
}
@media (max-width: 420px) {
  .gs-gift__days {
    gap: 3px;
  }
  .gs-gift__prize {
    font-size: 0.95rem;
  }
}
.gs-ticket__grid {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 12px;
}
@media (max-width: 420px) {
  .gs-ticket__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gs-ticket__opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, var(--map-color, #4c6ef5), var(--map-color-dark, #23306b));
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.gs-ticket__opt:hover {
  transform: translateY(-2px);
}
.gs-ticket__opt.is-on {
  border-color: #ffd23d;
  box-shadow: 0 0 0 3px rgba(255, 210, 61, 0.35);
}
.gs-ticket__emoji {
  font-size: 1.8rem;
  line-height: 1.1;
}
.gs-ticket__opt b {
  font-size: 1.05rem;
}
.gs-ticket__opt small {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.9;
}
.gs-ticket__check {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffd23d;
  color: #3a2a00;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 22px;
}
.gs-ticket .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.gs-buy {
  max-width: 460px;
  text-align: left;
}
.gs-buy .gs-confirm__text,
.gs-buy .gs-confirm__hint {
  text-align: center;
}
.gs-buy__price {
  margin: 16px 0 6px;
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: #ffd23d;
  line-height: 1.1;
}
.gs-buy__price small {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 800;
}
.gs-buy__steps {
  margin: 8px 0 10px;
  padding-left: 22px;
  line-height: 1.55;
  font-weight: 700;
}
.gs-buy__pay {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 210, 61, 0.12);
  border: 1px solid rgba(255, 210, 61, 0.45);
}
.gs-buy__pay p {
  margin: 4px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.gs-buy__note {
  text-align: center;
  color: var(--text-dim);
  font-weight: 700;
}
.gs-buy__label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  text-align: left;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text-dim);
}
.gs-buy__input,
.usr-form textarea {
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 700;
}
.gs-buy__input {
  width: 100%;
  box-sizing: border-box;
}
/* the Admin's QRIS picture in the buy popup (paying by hand) */
.gs-buy__qris {
  display: block;
  width: min(240px, 70vw);
  margin: 8px auto;
  border-radius: 12px;
  background: #fff;
}
/* the buy popup's "Tanya Admin" WhatsApp link (paying by hand) */
.gs-buy__wa {
  display: block;
  margin: -4px 0 12px;
  padding: 8px 12px;
  border: 2px solid #25d366;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.12);
  color: #b9f5cf;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.gs-buy__warn {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.45;
}
/* online payment (Midtrans): sandbox note and "waiting for the payment" spinner */
.gs-buy__test {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(76, 201, 240, 0.12);
  border: 1px dashed rgba(76, 201, 240, 0.5);
  font-size: 0.84rem;
  font-weight: 700;
}
.gs-pay__wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 12px;
  font-size: 1.15rem;
}
.gs-pay__spin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--map-color, #ffd23d);
  animation: gs-pay-spin 0.9s linear infinite;
}
@keyframes gs-pay-spin {
  to {
    transform: rotate(360deg);
  }
}
.gs-buy .gs-confirm__actions {
  flex-wrap: wrap;
}
.apv-req__note {
  color: #ffe2a8 !important;
}
.apv-mode {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(20, 24, 48, 0.85);
  color: var(--text-dim);
  font-weight: 800;
  text-align: center;
}
.apv-mode.is-online {
  color: #9ff5c9;
}
.usr-store__wide,
.usr-form .apv-note {
  grid-column: 1 / -1;
}
.usr-form textarea {
  resize: vertical;
  min-height: 70px;
}
.usr-form .usr-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  color: var(--text);
}
.usr-check input {
  width: 18px;
  height: 18px;
}
/* the ways to pay, each with Midtrans' fee (Kelola Pengguna) */
.usr-ways {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
}
.usr-ways legend {
  padding: 0 6px;
  font-weight: 900;
  color: var(--text);
}
.usr-form .usr-way {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
}
.usr-way:has(input:checked) {
  background: rgba(61, 220, 132, 0.12);
}
.usr-way input {
  width: 18px;
  height: 18px;
}
.usr-way small {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
}
.usr-way__fee {
  text-align: right;
  font-size: 0.84rem;
  font-weight: 800;
}
.usr-ways .apv-note {
  margin: 4px 0 0;
}
@media (max-width: 520px) {
  .usr-form .usr-way {
    grid-template-columns: auto 1fr;
  }
  .usr-way__fee {
    grid-column: 2;
    text-align: left;
  }
}
/* 💳 online payment panel (Kelola Pengguna) */
.usr-pay__status,
.usr-pay__steps,
.usr-pay__actions,
.usr-pay__test,
.usr-pay__sales {
  grid-column: 1 / -1;
}
.usr-pay__status {
  margin: 0;
  font-weight: 900;
  color: var(--text-dim);
}
.usr-pay__status.is-on {
  color: var(--success, #3ddc84);
}
.usr-pay__steps {
  margin: 0;
  padding-left: 22px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text);
}
.usr-pay__steps code {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.8rem;
}
.usr-pay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usr-pay__test {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
}
.usr-pay__test.is-ok {
  background: rgba(61, 220, 132, 0.14);
}
.usr-pay__test.is-bad {
  background: rgba(255, 107, 107, 0.14);
}
.usr-pay__sales {
  font-size: 0.88rem;
}
.usr-pay__sales ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.usr-pay__sales li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 6px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.usr-pay__sales li span:last-child {
  color: var(--text-dim);
}
.usr-pay__sales p {
  margin: 6px 0 0;
  color: var(--text-dim);
}
.profile-cloud-hint {
  max-width: 460px;
  margin: 10px auto 0;
  font-size: 0.85rem;
}
/* only on the computer running the server: the address for phones on the same Wi-Fi */
.profile-lan {
  display: table;
  max-width: 460px;
  margin: 12px auto 0;
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(16, 21, 40, 0.86);
  border: 1px solid rgba(76, 201, 240, 0.55);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
}
.profile-lan b {
  font-size: 1.1rem;
  color: #7fe3ff;
  letter-spacing: 0.02em;
  user-select: all;
  word-break: break-all;
}
.profile-lan--public {
  border-color: rgba(105, 219, 124, 0.6);
}
.profile-lan--public b {
  color: #8ce99a;
}
.profile-lan__copy {
  margin: 8px auto 4px;
  padding: 6px 14px;
  font-size: 0.85rem;
}
.profile-lan small {
  display: block;
  opacity: 0.75;
  font-size: 0.76rem;
}

/* 🗄️ Database screen (admins): read-only tables of the server's SQLite database. */
.usr-dbbtn {
  align-self: flex-start;
  margin: -4px 0 12px;
}
.dbv-reload {
  padding: 6px 12px;
  font-size: 0.9rem;
}
.dbv-info {
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
}
.dbv-info code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}
.dbv-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
}
.dbv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}
.dbv-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(16, 21, 40, 0.88);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.dbv-tab span {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
}
.dbv-tab.is-on {
  border-color: #ffd23d;
  background: rgba(60, 46, 6, 0.9);
  color: #ffe9a0;
}
.dbv-find {
  width: 100%;
  max-width: 420px;
  margin: 0 0 10px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(10, 14, 30, 0.9);
  color: var(--text);
  font: inherit;
}
.dbv-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dbv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  white-space: nowrap;
}
.dbv-table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 8px 10px;
  background: rgba(35, 43, 82, 0.98);
  color: #ffe9a0;
  font-weight: 900;
}
.dbv-table td {
  padding: 7px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  vertical-align: top;
}
.dbv-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
.dbv-table td small {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
}
.dbv-note {
  margin: 0 0 8px;
}
.dbv-empty {
  margin: 8px 0;
  color: var(--text-dim);
  text-align: center;
}

/* "▶ Lanjut Belajar" and the short dashboard on the class screen. */
.gs-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 auto 12px;
  max-width: 640px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid #3ddc84;
  background: linear-gradient(135deg, rgba(20, 70, 44, 0.92), rgba(12, 40, 28, 0.92));
  color: #e9fff2;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
.gs-resume__go {
  padding: 6px 12px;
  border-radius: 999px;
  background: #3ddc84;
  color: #08331d;
  font-weight: 900;
  white-space: nowrap;
}
.gs-resume__what {
  font-weight: 800;
}
.gs-resume__what small {
  margin-left: 6px;
  opacity: 0.75;
}
.gs-dash {
  margin: 0 auto 14px;
  max-width: 640px;
  padding: 10px 14px;
}
.gs-dash summary {
  cursor: pointer;
  font-weight: 900;
}
.gs-dash__chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.gs-dash__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.gs-dash__chip b {
  font-size: 1.05rem;
}
.gs-dash__chip span {
  font-size: 0.75rem;
  opacity: 0.75;
}
.gs-dash__title {
  font-size: 0.82rem;
  font-weight: 800;
  opacity: 0.85;
  margin-bottom: 4px;
}
.gs-dash__chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.gs-dash__legend {
  font-size: 0.75rem;
  opacity: 0.75;
}
.gs-dash__legend .ok {
  color: #3ddc84;
}
.gs-dash__legend .no {
  color: #ff9f45;
}

/* "Dengan membayar, kamu menyetujui ..." in the buy popup. */
.gs-buy__terms {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
}
.gs-buy__terms a {
  color: #bfe3ff;
}

/* ===== css/cave.css ===== */
/* ================= Jungle cave question screen ================= */
.screen--cave {
  position: relative;
  max-width: none;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, rgba(118, 196, 120, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 90, 200, 0.28), transparent 60%),
    linear-gradient(180deg, #17121f 0%, #2a2236 40%, #243526 78%, #1a1522 100%);
}
.screen.no-anim {
  animation: none;
}
.cave-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.cave-deco--top {
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
}
.cave-deco--left,
.cave-deco--right {
  top: 30px;
  width: 54px;
  height: calc(100% - 60px);
}
.cave-deco--left {
  left: 0;
}
.cave-deco--right {
  right: 0;
}
.cave-deco--crystals {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
}
.cave-glow {
  animation: cave-glow 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(140, 220, 255, 0.8));
}
.cave-glow--b {
  animation-delay: -1.4s;
  filter: drop-shadow(0 0 6px rgba(220, 150, 255, 0.8));
}
@keyframes cave-glow {
  50% {
    opacity: 0.6;
  }
}

.cave {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 60px 96px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.cave--shake {
  animation: shake 0.5s ease;
}

/* ---- top bar ---- */
.cave-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(20, 14, 28, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.cave-top__hearts {
  flex: 1;
  text-align: center;
}
.cave-top__combo {
  min-width: 52px;
  text-align: right;
  font-weight: 900;
  color: var(--gold);
  padding-right: 6px;
}
.cave-timer {
  margin: 8px 12px 6px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- boss ---- */
.cave-boss {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px auto 0;
  padding: 8px 16px;
  width: min(420px, 100%);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(90, 20, 40, 0.75), rgba(40, 10, 24, 0.85));
  border: 2px solid rgba(255, 77, 109, 0.55);
  box-shadow: 0 0 24px rgba(255, 77, 109, 0.35);
}
.cave-boss__sprite .boss__emoji {
  display: inline-block;
  font-size: 3.4rem;
  filter: drop-shadow(0 0 14px rgba(255, 77, 109, 0.7));
  animation: boss-idle 2.2s ease-in-out infinite;
}
@keyframes boss-idle {
  50% {
    transform: translateY(-5px) scale(1.04);
  }
}
.cave-boss__info {
  flex: 1;
}
.cave-boss__name {
  font-weight: 900;
}
.cave-boss__hp {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffb3c1;
  margin-top: 2px;
}
.cave-boss.boss--hit .boss__emoji {
  animation: boss-hurt 0.6s ease 0.5s both;
}
.cave-boss.boss--attack .boss__emoji {
  animation: boss-lunge 0.6s ease 0.35s both;
}
@keyframes boss-hurt {
  0%,
  100% {
    transform: none;
    filter: drop-shadow(0 0 14px rgba(255, 77, 109, 0.7));
  }
  20% {
    transform: translateX(-8px) rotate(-8deg);
    filter: drop-shadow(0 0 18px #fff) brightness(1.8);
  }
  50% {
    transform: translateX(8px) rotate(6deg);
  }
  75% {
    transform: translateX(-4px);
  }
}

/* ---- runner track ---- */
.cave-run {
  position: relative;
  height: 48px;
  margin: 8px 0 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 14, 28, 0.6) 58%, #5a4632 58%, #3d2f22);
  border: 2px solid rgba(255, 255, 255, 0.08);
}
.cave-run__cat {
  position: absolute;
  bottom: 12px;
  font-size: 1.7rem;
  transform: scaleX(-1);
  transition: left 0.6s ease;
}
.cave-run__cat.is-trip {
  animation: shake 0.5s ease;
}
.cave-run__flag {
  position: absolute;
  right: 10px;
  bottom: 14px;
  font-size: 1.5rem;
}

/* ---- stone banner (question) ---- */
.cave-banner {
  position: relative;
  margin: 34px auto 0;
  width: min(560px, 100%);
}
.cave-banner.is-new {
  animation: banner-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}
@keyframes banner-drop {
  0% {
    transform: translateY(-40px) rotate(-3deg);
    opacity: 0;
  }
  70% {
    transform: translateY(4px) rotate(1deg);
    opacity: 1;
  }
}
.cave-banner__rope {
  position: absolute;
  top: -34px;
  width: 6px;
  height: 44px;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, #b38a52 0 6px, #7d5a2e 6px 9px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
.cave-banner__rope--l {
  left: 18%;
}
.cave-banner__rope--r {
  right: 18%;
}
.cave-banner__stone {
  position: relative;
  padding: 22px 20px 20px;
  text-align: center;
  color: #2b2d42;
  border-radius: 26px 34px 24px 38px / 30px 22px 34px 26px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(120, 110, 95, 0.18) 0 10%, transparent 11%),
    radial-gradient(circle at 12% 78%, rgba(120, 110, 95, 0.16) 0 7%, transparent 8%),
    linear-gradient(170deg, #efeadf 0%, #d9d2c3 55%, #bdb4a2 100%);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.7), 0 10px 0 #7d7362, 0 18px 26px rgba(0, 0, 0, 0.45);
}
/* 🔊 "Bacakan soal": a round speaker button in the stone's top-right corner */
.cave-read {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fe3ff, #2f9bff 70%);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 #1b5fa8, 0 6px 12px rgba(0, 0, 0, 0.3);
  animation: cave-read-nudge 2.4s ease-in-out 1s 2;
}
.cave-read:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1b5fa8;
}
@keyframes cave-read-nudge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}
.cave-banner__moss {
  position: absolute;
  top: -6px;
  left: 10%;
  right: 10%;
  height: 14px;
  border-radius: 12px 12px 6px 6px;
  background: radial-gradient(circle at 8% 70%, #5fbf5c 0 9px, transparent 10px), radial-gradient(circle at 26% 40%, #4ca84a 0 10px, transparent 11px),
    radial-gradient(circle at 55% 60%, #5fbf5c 0 8px, transparent 9px), radial-gradient(circle at 78% 45%, #4ca84a 0 10px, transparent 11px),
    radial-gradient(circle at 94% 70%, #5fbf5c 0 7px, transparent 8px);
  pointer-events: none;
}
.cave-banner__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6456;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.cave-banner__text {
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1.35;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(0, 0, 0, 0.15);
  overflow-wrap: anywhere;
}
.cave-banner__text--mid {
  font-size: 1.55rem;
  line-height: 1.45;
}
.cave-banner__text--long {
  font-size: 1.2rem;
  line-height: 1.55;
  font-weight: 800;
  text-align: left;
}
.cave-banner__answer {
  margin-top: 12px;
  font-weight: 900;
  font-size: 1.1rem;
  color: #4a4538;
}
.cave-banner__stone .q-hint {
  color: #6b6456;
}
.cave-banner__stone .q-data {
  background: rgba(43, 45, 66, 0.08);
  color: #2b2d42;
}
.cave-banner__stone .q-data__title {
  color: #6b6456;
}
.cave-banner__stone .q-box {
  border-color: #7d7362;
  color: #4a4538;
}
.cave-banner__stone .q-fig {
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
}

/* ---- answer slot ---- */
.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 1.8em;
  min-height: 1.3em;
  padding: 0 0.3em;
  vertical-align: middle;
  border-radius: 14px;
  line-height: 1.2;
}
.slot--empty {
  color: #8a7f6a;
  border: 3px dashed #9a8f78;
  background: rgba(255, 255, 255, 0.35);
  animation: slot-pulse 1.4s ease-in-out infinite;
}
@keyframes slot-pulse {
  50% {
    transform: scale(1.07);
    border-color: #d99a2b;
    color: #b87a14;
  }
}
.slot--ok {
  color: #fff;
  background: linear-gradient(180deg, #4fe08f, #22a95c);
  box-shadow: 0 4px 0 #177a41, 0 0 18px rgba(61, 220, 132, 0.7);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.slot--bad {
  background: rgba(255, 255, 255, 0.4);
  border: 3px solid #d7c9b0;
}
.slot__wrong {
  color: #e0314f;
  font-size: 0.75em;
  text-decoration-thickness: 3px;
}
.slot--bad .slot__right {
  color: #fff;
  background: linear-gradient(180deg, #4fe08f, #22a95c);
  border-radius: 10px;
  padding: 0 0.25em;
  box-shadow: 0 3px 0 #177a41;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.slot--fresh.slot--ok {
  animation: slot-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
}
.slot--fresh .slot__wrong {
  animation: slot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
}
.slot--fresh .slot__right {
  animation: slot-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}
.slot--fresh.slot--timeout .slot__right {
  animation-delay: 0.2s;
}
@keyframes slot-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---- branch + vine stones ---- */
.cave-answers {
  position: relative;
  margin-top: 22px;
}
.cave-branch {
  position: relative;
  height: 20px;
  margin: 0 -8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #9a6b3a 0%, #6e4622 60%, #4c2f16 100%);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.18);
  z-index: 2;
}
.cave-branch__leaf {
  position: absolute;
  width: 26px;
  height: 13px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #7ad66f, #2f8a3a);
}
.cave-branch__leaf--a {
  left: 6%;
  top: -9px;
  transform: rotate(-20deg);
}
.cave-branch__leaf--b {
  left: 48%;
  top: -10px;
  transform: rotate(12deg) scaleX(-1);
}
.cave-branch__leaf--c {
  right: 8%;
  top: -8px;
  transform: rotate(-8deg);
}
.vines {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 6px 14px;
  padding: 0 4px;
}
.vine {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: var(--len, 36px);
  transform-origin: top center;
  animation: vine-sway 3.4s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
.vines.is-answered .vine {
  animation: none;
}
.vine::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  width: 5px;
  height: calc(var(--len, 36px) + 46px);
  margin-left: -2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2f7a3a, #58b85a 50%, #2f7a3a);
  z-index: 0;
}
.vine::after {
  content: "";
  position: absolute;
  top: calc(var(--len, 36px) * 0.45);
  left: calc(50% + 2px);
  width: 16px;
  height: 9px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #7ad66f, #2f8a3a);
  transform: rotate(-24deg);
}
.vine--lower::before {
  top: -8px;
  height: calc(var(--len, 36px) + 14px);
}
.vine--lower::after {
  display: none;
}
@keyframes vine-sway {
  0%,
  100% {
    transform: rotate(-2.2deg);
  }
  50% {
    transform: rotate(2.2deg);
  }
}
.vstone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 132px;
  min-height: 70px;
  padding: 12px 8px;
  border: none;
  color: #2b2d42;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
  border-radius: 42% 58% 50% 50% / 48% 44% 56% 52%;
  background: radial-gradient(ellipse at 32% 25%, rgba(255, 255, 255, 0.7), transparent 45%), linear-gradient(165deg, #e4e0d6 0%, #b9b3a6 60%, #948c7d 100%);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.15), 0 7px 0 #6d6556, 0 12px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
}
.vine:nth-child(2n) .vstone {
  border-radius: 55% 45% 52% 48% / 44% 56% 46% 54%;
}
.vine:nth-child(3n) .vstone {
  border-radius: 48% 52% 40% 60% / 52% 46% 54% 48%;
}
.vstone__val {
  display: inline-block;
}
.vstone:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.08) drop-shadow(0 0 10px rgba(255, 210, 61, 0.55));
}
.vstone:active:not(:disabled) {
  transform: translateY(2px) scale(0.97);
}
.vstone:disabled {
  cursor: default;
}
.vines--long .vstone {
  max-width: none;
  font-size: 1.15rem;
  border-radius: 26px 32px 24px 30px / 30px 24px 32px 26px;
}
.vstone.is-correct {
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  background: radial-gradient(ellipse at 32% 25%, rgba(255, 255, 255, 0.55), transparent 45%), linear-gradient(165deg, #6ff0a5, #22a95c 65%, #177a41);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.15), 0 7px 0 #0f5c30, 0 0 22px rgba(61, 220, 132, 0.7);
}
.vstone.is-wrong {
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  background: radial-gradient(ellipse at 32% 25%, rgba(255, 255, 255, 0.45), transparent 45%), linear-gradient(165deg, #ff8fa3, #e0314f 65%, #a01a33);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.15), 0 7px 0 #6e1022, 0 0 22px rgba(255, 77, 109, 0.6);
}
.vstone.is-dim {
  opacity: 0.4;
  filter: grayscale(0.5);
}
.vine.is-hit .vstone {
  animation: stone-bonk 0.6s ease 0.48s;
}
@keyframes stone-bonk {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateY(-10px) rotate(-9deg) scale(1.08);
  }
  55% {
    transform: translateY(2px) rotate(6deg);
  }
  80% {
    transform: rotate(-3deg);
  }
}

/* ---- runner doors ---- */
.cave-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cdoor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: none;
  color: #2b2d42;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.cdoor__arch {
  position: relative;
  width: 100%;
  max-width: 120px;
  height: 104px;
  border-radius: 60px 60px 6px 6px;
  background: radial-gradient(ellipse at 50% 90%, #3a2a1c, #120c14 70%);
  border: 8px solid #9d9483;
  border-bottom: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8), 0 6px 12px rgba(0, 0, 0, 0.4);
}
.cdoor__torch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  animation: cave-glow 1.2s ease-in-out infinite;
}
.cdoor__plate {
  margin-top: -6px;
  min-width: 70%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 1.35rem;
  font-weight: 900;
  background: linear-gradient(170deg, #efeadf, #c9c1b0);
  box-shadow: 0 5px 0 #7d7362;
}
.cdoor:hover:not(:disabled) {
  transform: translateY(-4px);
}
.cdoor:disabled {
  cursor: default;
}
.cdoor.is-correct .cdoor__plate {
  color: #fff;
  background: linear-gradient(180deg, #4fe08f, #22a95c);
  box-shadow: 0 5px 0 #0f5c30, 0 0 18px rgba(61, 220, 132, 0.7);
}
.cdoor.is-correct .cdoor__arch {
  border-color: #4fe08f;
}
.cdoor.is-wrong .cdoor__plate {
  color: #fff;
  background: linear-gradient(180deg, #ff8fa3, #e0314f);
  box-shadow: 0 5px 0 #6e1022;
}
.cdoor.is-dim {
  opacity: 0.4;
}
.cdoor.is-hit .cdoor__plate {
  animation: stone-bonk 0.6s ease 0.48s;
}

/* ---- "Begini caranya" (js/caranya.js): how to work out a question answered wrong ----
   On the question screen it is a card over the lower part (the stones are already answered), with "Lanjut";
   on the result screen the same content sits inside each folded mistake. */
.caranya {
  color: #2b2a4a;
  text-align: left;
}
/* (fixed to the bottom of the screen, whatever the cave's height; the selector outweighs three.css's
   ".screen--cave > *" that makes every child position: relative) */
.screen.screen--cave > .caranya.caranya--play {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 30;
  width: min(560px, calc(100% - 24px));
  max-height: 58%;
  overflow: auto;
  transform: translateX(-50%);
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf4, #fff3d6);
  border: 3px solid #ffd23d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
/* the cat's "Jawabannya …" bubble would sit under the card and repeats the answer shown in the stone banner */
.screen--cave:has(.caranya--play) .cat-bubble {
  visibility: hidden;
}
.caranya--play.is-fresh {
  animation: caranya-in 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) 0.9s both;
}
@keyframes caranya-in {
  from {
    opacity: 0;
    transform: translate(-50%, 24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.caranya__head {
  font-weight: 900;
  font-size: 1.05rem;
  color: #6a3fd1;
  margin-bottom: 6px;
}
.caranya__steps {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 4px;
  font-weight: 700;
  line-height: 1.4;
}
.caranya__steps li::marker {
  color: #ff8a1f;
  font-weight: 900;
}
.caranya__steps b {
  color: #0f8a4a;
}
.caranya__tip,
.caranya__rumus {
  margin: 6px 0 0;
  line-height: 1.45;
  font-weight: 600;
}
.caranya__rumus {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  background: #eef0ff;
  font-weight: 800;
  color: #3a3f8f;
}
.caranya__ex {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(163, 116, 255, 0.1);
}
.caranya__ex summary {
  cursor: pointer;
  font-weight: 800;
  color: #6a3fd1;
}
.caranya__exq {
  margin: 6px 0 4px;
  font-weight: 800;
}
.caranya__next {
  display: block;
  margin: 10px 0 0 auto;
  min-width: 140px;
}

/* ---- ground: paw meter, cat, stars ---- */
.cave-ground {
  margin-top: auto;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
}
.cave-meter,
.cave-stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(20, 14, 28, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  margin-bottom: 8px;
}
.cave-meter {
  justify-self: start;
}
.cave-stars {
  justify-self: end;
  font-size: 1.25rem;
  color: var(--gold);
}
.cave-meter__icon,
.cave-stars__icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
}
.cave-meter__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 62px;
}
.cave-meter__body b {
  font-size: 0.95rem;
}
.cave-meter__body small {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 700;
}
.cave-meter__track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.cave-meter__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb35c, var(--gold));
  transition: width 0.4s ease;
}

.cave-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cat-bubble {
  position: relative;
  max-width: 230px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: 16px;
  background: #fffaf0;
  color: #2b2d42;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), 0 8px 18px rgba(0, 0, 0, 0.35);
}
.cat-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  border: 9px solid transparent;
  border-top-color: #fffaf0;
  border-bottom: none;
}
.cat-bubble--ok {
  background: #e3ffef;
  color: #11703b;
}
.cat-bubble--ok::after {
  border-top-color: #e3ffef;
}
.cat-bubble--bad {
  background: #ffe8ec;
  color: #b0223c;
}
.cat-bubble--bad::after {
  border-top-color: #ffe8ec;
}
.cat {
  position: relative;
  z-index: 5;
  width: 104px;
  height: 108px;
  will-change: transform;
}
.cat__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.25));
}
.cat__tail {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: cat-tail 1.6s ease-in-out infinite;
}
@keyframes cat-tail {
  50% {
    transform: rotate(-12deg);
  }
}
.cat__paw {
  transform-box: fill-box;
  transform-origin: 10% 95%;
}
.cat__head {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: cat-breathe 2.6s ease-in-out infinite;
}
@keyframes cat-breathe {
  50% {
    transform: translateY(1.5px) rotate(-1.5deg);
  }
}
.cat__eyes--happy,
.cat__eyes--sad,
.cat__mouth--open,
.cat__mouth--frown {
  display: none;
}
.cat--happy .cat__eyes--open,
.cat--happy .cat__mouth--smile,
.cat--sad .cat__eyes--open,
.cat--sad .cat__mouth--smile {
  display: none;
}
.cat--happy .cat__eyes--happy,
.cat--happy .cat__mouth--open,
.cat--sad .cat__eyes--sad,
.cat--sad .cat__mouth--frown {
  display: inline;
}
.cat--sad .cat__head {
  animation: cat-droop 0.6s ease forwards;
}
@keyframes cat-droop {
  to {
    transform: translateY(4px) rotate(4deg);
  }
}
.cat__tear {
  animation: cat-tear 1.2s ease-in infinite;
}
@keyframes cat-tear {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}
.cave-ledge {
  width: 150px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 40% 25%, #8c8272, #5a5144 60%, #3a342c);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.15), 0 8px 14px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
  .cave {
    padding: 10px 14px 84px;
  }
  .cave-deco--left,
  .cave-deco--right {
    width: 26px;
    opacity: 0.7;
  }
  .cave-banner__text {
    font-size: 1.8rem;
  }
  .cave-banner__text--mid {
    font-size: 1.3rem;
  }
  .cave-banner__text--long {
    font-size: 1.05rem;
  }
  .vines {
    gap: 4px 8px;
  }
  .vstone {
    min-height: 60px;
    font-size: 1.25rem;
    padding: 10px 4px;
  }
  .vines--long .vstone {
    font-size: 1rem;
  }
  .cave-ground {
    gap: 4px;
  }
  .cave-meter,
  .cave-stars {
    padding: 6px 8px;
    gap: 4px;
  }
  .cave-meter__icon,
  .cave-stars__icon {
    font-size: 1.15rem;
  }
  .cave-meter__body {
    min-width: 44px;
  }
  .cat {
    width: 86px;
    height: 90px;
  }
  .cave-ledge {
    width: 118px;
  }
  .cat-bubble {
    max-width: 170px;
    font-size: 0.78rem;
  }
}


/* ===== css/three.css ===== */
/* ================= Real 3D backgrounds (js/three) + 3D characters ================= */
#bg3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  transition: opacity 0.18s ease;
  /* Filmic tone mapping flattens colour a little; this puts the punch back. */
  filter: saturate(1.2) contrast(1.06);
}
.bg3d--fade,
.bg3d--off {
  opacity: 0;
}

/* With a live 3D scene behind the app, the flat painted backgrounds step aside. */
body.has-3d::before,
body.has-3d::after {
  display: none;
}
body.has-3d .screen--journey,
body.has-3d .theme-angkasa.screen--journey,
body.has-3d .theme-akademi.screen--journey,
body.has-3d .screen--cave {
  background: transparent;
}
body.has-3d .classroom-bg::before,
body.has-3d .jmap__decor,
body.has-3d .cave-deco {
  display: none;
}
/* A soft shade keeps panels and text readable on bright scenes. */
body.has-3d .classroom-bg::after {
  position: fixed;
  background: linear-gradient(180deg, rgba(8, 12, 28, 0.28) 0%, rgba(8, 12, 28, 0.08) 40%, rgba(8, 12, 28, 0.42) 100%);
}
body.has-3d[data-scene-kind="lobby"] .classroom-bg::after,
body.has-3d[data-scene-kind="duniaku"] .classroom-bg::after {
  background: linear-gradient(180deg, rgba(8, 12, 28, 0.16) 0%, rgba(8, 12, 28, 0) 45%, rgba(8, 12, 28, 0.3) 100%);
}
/* On the painted school (lobby.jpg) the small profile and class-select texts get dark pills, as on the login screen. */
body.has-bgimg[data-scene-kind="lobby"] .screen--profile .empty-hint,
body.has-bgimg[data-scene-kind="lobby"] .profile-email-divider span,
body.has-bgimg[data-scene-kind="lobby"] .gs-sub {
  display: inline-block;
  background: rgba(16, 21, 40, 0.82);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
}
body.has-bgimg[data-scene-kind="lobby"] .gs-sub {
  display: table;
  margin: 4px auto 16px;
}
body.has-3d .screen--cave::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(6, 8, 20, 0.45) 100%);
}
body.has-3d .screen--cave > * {
  position: relative;
  z-index: 1;
}
/* The map's road sits on the 3D ground: a little shadow lifts it off the scene. */
body.has-3d .jmap__svg {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}
body.has-3d .jzone b,
body.has-3d .jbanner {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.cave-place {
  align-self: center;
  margin: 6px auto 0;
  width: max-content;
  max-width: 92%;
  padding: 3px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff6d8;
  background: rgba(10, 12, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- heroes (flat 2D pictures from js/art2d.js) ---------- */
.hero {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}
.hero--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
}
img.hero--idle {
  animation: hero-breathe 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
img.hero--happy {
  animation: hero-cheer 0.9s ease-in-out infinite;
  transform-origin: 50% 100%;
}
img.hero--sad {
  animation: hero-droop 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)) saturate(0.8);
}
@keyframes hero-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.02, 0.98); }
}
@keyframes hero-cheer {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-9px) scale(0.97, 1.04); }
  60% { transform: translateY(0) scale(1.05, 0.95); }
}
@keyframes hero-droop {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg) translateY(2px); }
}

/* Gameplay hero in place of the cave cat. */
.cat.cat--3d {
  width: 124px;
  height: 132px;
}
.cat.cat--3d .cat__hero {
  width: 100%;
  height: 100%;
}
.cave-run__img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.cave-run__cat .hero-face--emoji {
  font-size: 1.7rem;
}

/* Journey marker. */
.javatar--hero {
  transform: translate(-50%, calc(-100% - 14px));
  animation: hero-hop 1.3s ease-in-out infinite;
}
.javatar--hero::after {
  display: none;
}
.javatar__hero {
  width: 86px;
  height: 86px;
}
.javatar__hero.hero--emoji {
  font-size: 2.6rem;
}
img.javatar__hero {
  animation: none;
}
.javatar__shadow {
  width: 44px;
  height: 10px;
  margin-top: -8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  animation: hero-shadow 1.3s ease-in-out infinite;
}
@keyframes hero-hop {
  0%, 100% { transform: translate(-50%, calc(-100% - 14px)); }
  50% { transform: translate(-50%, calc(-100% - 24px)); }
}
@keyframes hero-shadow {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(10px) scale(0.75); opacity: 0.6; }
}

/* Profile hero. */
.profile-hero__hero {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
}

/* ---------- 3D bosses ---------- */
.boss-img {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.boss-img--emoji {
  display: inline-block;
  line-height: 1;
}
.cave-boss__sprite {
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  margin: -62px -10px -18px -18px;
  display: grid;
  place-items: center;
}
.cave-boss__sprite.is-live .boss__img {
  display: none;
}
.boss-stage {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cave-boss__sprite::after {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 150, 0.35), transparent 70%);
}
.cave-boss {
  margin-top: 58px;
}
@media (max-width: 420px) {
  .cave-boss__sprite {
    width: 136px;
    height: 136px;
    margin: -46px -8px -14px -14px;
  }
  .cave-boss {
    margin-top: 44px;
  }
}
.cave-boss__sprite .boss__img {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 0 14px rgba(255, 77, 109, 0.6));
  animation: boss-idle 2.2s ease-in-out infinite;
}
/* the living boss (js/three/relief.js): its canvas is 1.3× the slot, centred and standing up out of the card */
.boss-stage--wide {
  position: absolute;
  left: -15%;
  top: -25%;
  width: 130%;
  height: 130%;
}
/* a painted boss (every class since 2026-10-21) fills the whole slot, with a soft shadow and a little glow */
.cave-boss__sprite .boss__img.boss-img--art {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(255, 240, 200, 0.25));
}
.cave-boss__sprite .boss__img.boss-img--emoji {
  width: auto;
  height: auto;
  font-size: 3.4rem;
}
.cave-boss.boss--hit .boss__img {
  animation: boss-hurt 0.6s ease 0.5s both;
}
.cave-boss.boss--attack .boss__img {
  animation: boss-lunge 0.6s ease 0.35s both;
}
.jnode__boss .jnode__bossimg {
  width: 84px;
  height: 84px;
  margin-top: -14px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}
.jnode__boss .boss-img--emoji {
  width: auto;
  height: auto;
  margin: 0;
}
.jmodal__hero--boss .jmodal__bossimg {
  width: 128px;
  height: 128px;
}
.jmodal__hero--boss .boss-img--emoji {
  width: auto;
  height: auto;
}

/* ---------- avatars & character picker ---------- */
.avatar-wrap--3d {
  background: radial-gradient(circle at 40% 30%, #fffdf5, #ffe2b8 70%, #f3b979);
  overflow: visible;
}
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hero-face {
  display: block;
  object-fit: cover;
}
.hero-face--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
  margin: 8px 0 4px;
}
.char-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 7px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.char-choice:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
}
.char-choice--selected {
  border-color: var(--gold);
  background: rgba(255, 210, 61, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 210, 61, 0.25), 0 6px 14px rgba(0, 0, 0, 0.3);
}
.char-choice__img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fffdf5, #ffe2b8 70%, #f3b979);
}
.char-choice__img.hero-face--emoji {
  font-size: 2.2rem;
}
.char-choice__name {
  font-size: 0.74rem;
  font-weight: 900;
}

/* ---------- back buttons ---------- */
.icon-btn.back-btn {
  width: auto;
  min-width: 42px;
  padding: 0 14px 0 11px;
  gap: 6px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.9rem;
  background: rgba(16, 21, 40, 0.88);
  flex-shrink: 0;
}
.jhud__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 900;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}
.jhud__back:hover {
  background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 420px) {
  .back-btn__label,
  .jhud__back span {
    display: none;
  }
  .icon-btn.back-btn {
    padding: 0;
    width: 42px;
  }
}

/* ---------- a different navigation bar for every class ---------- */
.jhud--k1 {
  background: linear-gradient(180deg, rgba(58, 104, 36, 0.92), rgba(34, 70, 22, 0.92));
  border-bottom: 3px solid #7fcf4a;
}
.jhud--k1 .jhud__btn {
  background: linear-gradient(180deg, #a86f3d, #7a4c24);
  border: 2px solid #c9925a;
  border-radius: 12px 12px 16px 16px;
  box-shadow: 0 3px 0 #4e2f13;
}
.jhud--k1 .jhud__label { color: #fff3d6; }

.jhud--k2 {
  background: linear-gradient(180deg, rgba(10, 92, 150, 0.9), rgba(6, 58, 104, 0.92));
  border-bottom: 3px solid #5fd8ff;
}
.jhud--k2 .jhud__btn {
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.55), transparent 45%), linear-gradient(180deg, #37b6ea, #1473b8);
  border: 2px solid #b9eeff;
  border-radius: 50% 50% 18px 18px;
  box-shadow: 0 3px 0 #0b4a78;
}
.jhud--k2 .jhud__label { color: #e8fbff; }

.jhud--k3 {
  background: linear-gradient(180deg, rgba(150, 96, 38, 0.92), rgba(104, 62, 22, 0.93));
  border-bottom: 3px solid #f2c572;
}
.jhud--k3 .jhud__btn {
  background: repeating-linear-gradient(0deg, #e0b36c 0 7px, #d3a45d 7px 8px), #e0b36c;
  border: 2px solid #f7dca3;
  border-radius: 6px;
  box-shadow: 0 3px 0 #7a4f1c;
}
.jhud--k3 .jhud__label { color: #4a2b09; }

.jhud--k4 {
  background: linear-gradient(180deg, rgba(58, 120, 200, 0.92), rgba(30, 78, 150, 0.94));
  border-bottom: 3px solid #ffd86b;
}
.jhud--k4 .jhud__btn {
  background: linear-gradient(180deg, #5b9bf0, #2f64c0);
  border: 2px solid #ffd86b;
  border-radius: 14px 14px 50% 50% / 14px 14px 32% 32%;
  box-shadow: 0 3px 0 #1a3f80, inset 0 0 0 2px rgba(255, 216, 107, 0.25);
}
.jhud--k4 .jhud__label { color: #fff4c4; }

.jhud--k5 {
  background: linear-gradient(180deg, rgba(20, 10, 56, 0.86), rgba(8, 4, 30, 0.9));
  border-bottom: 2px solid #b388ff;
  box-shadow: 0 6px 22px rgba(163, 116, 255, 0.35);
}
.jhud--k5 .jhud__btn {
  background: linear-gradient(160deg, rgba(179, 136, 255, 0.28), rgba(76, 201, 240, 0.14));
  border: 1px solid rgba(190, 160, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(163, 116, 255, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.12);
}
.jhud--k5 .jhud__label { color: #e3d6ff; }

.jhud--k6 {
  background: linear-gradient(180deg, rgba(4, 22, 36, 0.88), rgba(2, 12, 22, 0.92));
  border-bottom: 2px solid #27d7ff;
  box-shadow: 0 6px 22px rgba(39, 215, 255, 0.3);
}
.jhud--k6 .jhud__btn {
  background: linear-gradient(180deg, rgba(39, 215, 255, 0.16), rgba(39, 215, 255, 0.04));
  border: 1px solid #27d7ff;
  border-radius: 4px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 10px rgba(39, 215, 255, 0.3);
}
.jhud--k6 .jhud__label {
  color: #9ff0ff;
  font-family: "Consolas", "Courier New", monospace;
  letter-spacing: 0.04em;
}
.jhud[class*="jhud--k"] .jhud__btn:hover {
  filter: brightness(1.15);
}
.jhud[class*="jhud--k"] .jhud__btn {
  margin: 0 1px 3px;
}

/* ================= Painted class backgrounds + animated critters (js/scenery.js) ================= */
#bgimg,
.bgdeco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* The painting is shown as-is, without zooming or filters, so it stays pin-sharp. */
.bgimg__pic {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.bgimg__pic.is-on {
  opacity: 1;
}
/* Living light on the arenas (js/scenery.js FX): a box laid exactly over the 16:9 painting as "cover" shows it, with
   a few soft glows that brighten the painting's own light sources (screen blend), so nothing new is drawn on it. */
.bgfx {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
}
.bgfx i {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--c), 0.9), rgba(var(--c), 0.35) 45%, rgba(var(--c), 0) 100%);
  mix-blend-mode: screen;
  opacity: 0.3;
  animation: bgfx-breathe 4.5s ease-in-out var(--d) infinite alternate;
}
.bgfx i.bgfx--stage {
  opacity: 0.22;
  animation: bgfx-stage 5.5s ease-in-out var(--d) infinite alternate;
}
.bgfx i.bgfx--flame {
  animation: bgfx-flame 1.9s linear var(--d) infinite;
}
.bgfx i.bgfx--blink {
  animation: bgfx-blink 2.6s ease-in-out var(--d) infinite;
}
@keyframes bgfx-breathe {
  from {
    opacity: 0.12;
  }
  to {
    opacity: 0.42;
  }
}
@keyframes bgfx-stage {
  from {
    opacity: 0.08;
  }
  to {
    opacity: 0.32;
  }
}
@keyframes bgfx-flame {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1);
  }
  18% {
    opacity: 0.7;
    transform: translate(-50%, -52%) scale(1.06);
  }
  35% {
    opacity: 0.38;
  }
  52% {
    opacity: 0.62;
    transform: translate(-50%, -51%) scale(1.03);
  }
  70% {
    opacity: 0.42;
  }
  86% {
    opacity: 0.66;
  }
}
@keyframes bgfx-blink {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bgfx i {
    animation: none;
  }
}
body.has-bgimg #bg3d {
  opacity: 0;
}
/* The classroom painting (belajar.jpg) stays sharp around and behind the panels: no frosted glass there. */
body[data-scene="belajar"] .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(16, 21, 40, 0.9);
}
body:not(.has-bgimg) #bgimg {
  display: none;
}
.bgdeco {
  /* above the painting, below #app (also z-index 1, later in the page) */
  z-index: 1;
  transition: opacity 0.4s ease;
}
.bgdeco.is-leaving {
  opacity: 0;
}

.deco {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.deco__body,
.deco__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.deco__inner img,
.deco__inner .deco__emoji {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.22));
  user-select: none;
}
.deco__emoji {
  display: grid;
  place-items: center;
  font-size: 70%;
  line-height: 1;
}
.deco--flap .deco__body {
  animation: deco-flap 0.24s ease-in-out infinite alternate;
}
@keyframes deco-flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.42); }
}
.deco--frames .deco__inner img:nth-child(1) {
  animation: deco-frame 0.44s linear infinite;
}
.deco--frames .deco__inner img:nth-child(2) {
  animation: deco-frame 0.44s linear infinite;
  animation-delay: -0.22s;
}
@keyframes deco-frame {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.deco--wander:not(.deco--flap) .deco__body,
.deco--float .deco__body {
  animation: deco-bob 1.6s ease-in-out infinite alternate;
}
@keyframes deco-bob {
  from { transform: translateY(-4px); }
  to { transform: translateY(4px); }
}
.deco--walk .deco__body {
  animation: deco-waddle 0.5s ease-in-out infinite alternate;
  transform-origin: 50% 90%;
}
@keyframes deco-waddle {
  from { transform: rotate(-7deg) translateY(0); }
  to { transform: rotate(7deg) translateY(-3px); }
}
.deco--holo .deco__inner {
  animation: deco-holo 3.2s ease-in-out infinite;
}
.deco--holo .deco__inner img {
  filter: drop-shadow(0 0 10px rgba(57, 225, 255, 0.85));
}
@keyframes deco-holo {
  0%, 100% { opacity: 0.85; transform: rotateY(0deg); }
  50% { opacity: 1; transform: rotateY(180deg); }
}
/* balloons and clouds sway gently while they glide; crystals glow */
.deco--glide .deco__body {
  animation: deco-sway 4s ease-in-out infinite alternate;
  transform-origin: 50% 20%;
}
@keyframes deco-sway {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}
.deco--glow .deco__inner img {
  filter: drop-shadow(0 0 12px rgba(160, 220, 255, 0.9));
  animation: deco-glow 2.4s ease-in-out infinite alternate;
}
@keyframes deco-glow {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* particles: each is placed by JS (left/top, --dx drift, --s size, --c colour, duration and delay) */
.pt {
  position: absolute;
  top: 102vh;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  animation: pt-rise 12s linear infinite;
  will-change: transform, opacity;
}
@keyframes pt-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(var(--dx), -58vh); }
  85% { opacity: 0.9; }
  100% { transform: translate(0, -112vh); opacity: 0; }
}
.pt--pollen,
.pt--mote,
.pt--ember {
  background: var(--c, #fff6a8);
  box-shadow: 0 0 10px 3px var(--c, #fff6a8), 0 0 2px 1px #ffffff;
}
.pt--ember {
  animation-name: pt-ember;
}
@keyframes pt-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  60% { transform: translate(var(--dx), -60vh) scale(0.8); opacity: 0.9; }
  100% { transform: translate(0, -95vh) scale(0.3); opacity: 0; }
}
.pt--bubble {
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9) 0 14%, rgba(180, 235, 255, 0.18) 16% 100%);
}
.pt--petal {
  top: -6vh;
  width: var(--s, 12px);
  height: calc(var(--s, 12px) * 0.62);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ffd1e3, #ff8fb8);
  animation-name: pt-fall;
}
.bgdeco--k1 .pt--petal {
  background: linear-gradient(135deg, #c8f59a, #62c44a);
}
@keyframes pt-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--dx), 55vh) rotate(260deg); }
  92% { opacity: 1; }
  100% { transform: translate(0, 112vh) rotate(520deg); opacity: 0; }
}
.pt--dust {
  height: calc(var(--s, 40px) * 0.35);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 226, 170, 0.55), rgba(255, 226, 170, 0) 70%);
  animation-name: pt-dust;
}
@keyframes pt-dust {
  0% { transform: translate(-10vw, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(110vw, -6vh); opacity: 0; }
}
.pt--twinkle {
  border-radius: 0;
  background: #ffffff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px #fff7c2);
  animation-name: pt-twinkle;
  animation-timing-function: ease-in-out;
}
.bgdeco--k6 .pt--twinkle {
  background: #7df3ff;
}
.bgdeco--k4 .pt--twinkle {
  background: #fff6c4;
  filter: drop-shadow(0 0 5px #ffd86b);
}
.bgdeco--k4.bgdeco--boss .pt--twinkle {
  background: #c9f3ff;
  filter: drop-shadow(0 0 5px #7df3ff);
}
.pt--feather {
  top: -6vh;
  width: calc(var(--s, 16px) * 0.45);
  height: var(--s, 16px);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: linear-gradient(90deg, #ffffff, #e6f0ff);
  box-shadow: 0 0 3px rgba(90, 130, 200, 0.45);
  animation-name: pt-fall;
}
@keyframes pt-twinkle {
  0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0.1; }
  50% { transform: scale(1) rotate(45deg); opacity: 1; }
}
.pt--shoot {
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
  box-shadow: 0 0 6px #cfe8ff;
  animation-name: pt-shoot;
}
@keyframes pt-shoot {
  0% { transform: rotate(-25deg) translateX(0); opacity: 0; }
  4% { opacity: 1; }
  12% { transform: rotate(-25deg) translateX(-45vw); opacity: 0; }
  100% { transform: rotate(-25deg) translateX(-45vw); opacity: 0; }
}
.pt--data {
  top: -6vh;
  width: auto;
  height: auto;
  border-radius: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 800;
  color: #7df3ff;
  text-shadow: 0 0 8px rgba(57, 225, 255, 0.9);
  animation-name: pt-fall-straight;
}
@keyframes pt-fall-straight {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translateY(112vh); opacity: 0; }
}
/* classroom: chalky numbers and signs drifting up from the desks */
.pt--chalk {
  width: auto;
  height: auto;
  border-radius: 0;
  font-family: "Comic Sans MS", "Chalkboard SE", "Baloo 2", system-ui, sans-serif;
  font-weight: 900;
  line-height: 1;
  color: var(--c, #ffffff);
  -webkit-text-stroke: 1.5px rgba(45, 27, 61, 0.55);
  text-shadow: 0 2px 0 rgba(45, 27, 61, 0.35), 0 0 10px rgba(255, 255, 255, 0.55);
  animation-name: pt-chalk;
  animation-timing-function: ease-in-out;
}
@keyframes pt-chalk {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12% { opacity: 0.85; }
  50% { transform: translate(var(--dx), -55vh) rotate(var(--r, 10deg)) scale(1); }
  88% { opacity: 0.8; }
  100% { transform: translate(0, -110vh) rotate(0deg) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bgdeco { display: none; }
}

/* ===== css/video.css ===== */
/* 🎬 The lesson video (js/video.js): a classroom with a chalkboard, the hero as teacher, captions and controls. */
body.mqv-open {
  overflow: hidden;
}
.mqv {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(6, 9, 22, 0.86);
  animation: mqv-in 0.25s ease;
}
@keyframes mqv-in {
  from {
    opacity: 0;
  }
}
.mqv__frame {
  position: relative;
  width: min(1100px, 100%);
  height: min(720px, 100%);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 3px solid var(--map-color, #6c9dff);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  background: #1d2a4a url("../assets/bg/belajar.jpg") center / cover no-repeat;
}
.mqv__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(8, 12, 30, 0.85), rgba(8, 12, 30, 0.55));
  color: #fff;
  z-index: 2;
}
.mqv__brand {
  font-weight: 900;
  white-space: nowrap;
}
.mqv__what {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mqv__x {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.mqv__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 14px 6px;
}
/* the chalkboard with a wooden frame */
.mqv__board {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 18px 22px 22px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 30% 20%, #2f6b4f 0%, #1f4d38 55%, #173b2b 100%);
  border: 10px solid #9b6a3c;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45), 0 8px 0 rgba(0, 0, 0, 0.35);
  color: #f4f7ee;
  font-family: "Segoe Print", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif;
}
.mqv__board.is-in {
  animation: mqv-board 0.45s ease;
}
@keyframes mqv-board {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
.mqv__tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--map-color, #ffd23d);
  color: #10142a;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 900;
}
.mqv__title {
  margin: 10px 0 12px;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: #fff8c4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.mqv__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: mqv;
}
.mqv__line {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.3s ease;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  line-height: 1.5;
}
.mqv__line.is-shown {
  opacity: 1;
  transform: none;
}
.mqv__line.is-now {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 4px 0 0 #ffd23d;
}
.mqv__line--step {
  counter-increment: mqv;
}
.mqv__line--step::before,
.mqv__line--answer::before {
  content: counter(mqv);
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid #f4f7ee;
  font-size: 0.8em;
  font-weight: 900;
}
.mqv__line--answer {
  counter-increment: mqv;
  color: #fff;
  background: rgba(61, 220, 132, 0.25);
  border: 2px dashed #8ff0b8;
  font-weight: 900;
}
.mqv__line--rumus {
  background: rgba(255, 210, 61, 0.16);
  border: 2px solid rgba(255, 210, 61, 0.6);
  color: #fff3b0;
  font-weight: 800;
}
.mqv__line--good {
  color: #c8ffd9;
}
.mqv__line--bad {
  color: #ffc4cf;
}
.mqv__line--big {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 900;
  color: #fff8c4;
}
.mqv__end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.mqv__btn {
  padding: 10px 16px;
  border-radius: 12px;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 800 0.95rem system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.mqv__btn--go {
  background: #3ddc84;
  color: #0f2a1c;
}
.mqv__btn--yt {
  background: #ff3d3d;
}
.mqv__ythint {
  width: 100%;
  margin: 2px 0 0;
  font: 600 0.8rem system-ui, sans-serif;
  opacity: 0.8;
}
/* 🎨 demo scenes (js/video-demo.js): a whiteboard with the animated picture and a big caption under it */
.mqv__board.is-demo {
  background: #fffdf6;
  color: #2b2d42;
  box-shadow: inset 0 0 0 2px #e9e4d4, 0 8px 0 rgba(0, 0, 0, 0.35);
}
.mqv__board.is-demo .mqv__title {
  color: #3a2e8c;
  text-shadow: none;
  margin-bottom: 6px;
}
.mqv__board.is-demo .mqv__lines {
  gap: 4px;
}
.mqv__screen {
  list-style: none;
}
.mqv__screen svg.vd {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 300px);
}
/* on short screens the caption bar under the board already shows the sentence */
@media (max-height: 720px) {
  .mqv__sub {
    display: none;
  }
}
.vd text {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  paint-order: stroke;
}
.vd .vd-new {
  animation: vd-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes vd-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
.mqv__sub {
  list-style: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f1efe6;
  color: #2b2d42;
  font: 800 clamp(0.95rem, 1.8vw, 1.2rem) / 1.4 "Trebuchet MS", system-ui, sans-serif;
  text-align: center;
}

/* the teacher: the player's own hero, bobbing while it talks */
.mqv__teacher {
  flex: none;
  width: clamp(110px, 18vw, 210px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.mqv__heroimg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  transform-origin: 50% 100%;
}
.mqv__heroemoji {
  font-size: 5rem;
}
.mqv.is-speaking .mqv__heroimg {
  animation: mqv-talk 0.9s ease-in-out infinite;
}
@keyframes mqv-talk {
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
}
.mqv__wave {
  display: flex;
  gap: 4px;
  height: 22px;
  align-items: flex-end;
  margin-top: 4px;
  opacity: 0;
}
.mqv.is-speaking .mqv__wave {
  opacity: 1;
}
.mqv__wave i {
  width: 6px;
  height: 8px;
  border-radius: 3px;
  background: #ffd23d;
  animation: mqv-wave 0.8s ease-in-out infinite;
}
.mqv__wave i:nth-child(2) {
  animation-delay: 0.15s;
}
.mqv__wave i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes mqv-wave {
  50% {
    height: 20px;
  }
}
.mqv__caption {
  min-height: 2.6em;
  margin: 0 14px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: 700 0.98rem/1.4 system-ui, sans-serif;
  text-align: center;
}
.mqv__bar {
  display: flex;
  gap: 3px;
  margin: 8px 14px 0;
}
.mqv__seg {
  flex: 1;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.mqv__seg.is-done {
  background: var(--map-color, #6c9dff);
}
.mqv__seg.is-now {
  background: #ffd23d;
}
.mqv__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  background: linear-gradient(0deg, rgba(8, 12, 30, 0.9), rgba(8, 12, 30, 0.55));
}
.mqv__controls button {
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.mqv__controls .mqv__play {
  width: 58px;
  background: var(--map-color, #6c9dff);
}
.mqv__count {
  color: #cfd7f5;
  font: 700 0.85rem system-ui, sans-serif;
}
.mqv__yt {
  margin-left: auto;
  padding: 9px 14px;
  border-radius: 12px;
  background: #ff3d3d;
  color: #fff;
  font: 800 0.88rem system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mqv {
    padding: 0;
  }
  .mqv__frame {
    height: 100%;
    border-radius: 0;
    border-width: 0;
  }
  .mqv__stage {
    flex-direction: column-reverse;
  }
  .mqv__teacher {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
  }
  .mqv__heroimg {
    width: 76px;
  }
  .mqv__board {
    padding: 14px 14px 16px;
    border-width: 7px;
  }
}

/* the lesson screen's video buttons */
.lesson__video {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.lesson__video .btn {
  flex: 1 1 220px;
}
.lesson__ytnote {
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.materi__video {
  margin: 0 8px 0 0;
}


/* ===== css/online.css ===== */
/* ================= 🌐 Main Online (js/screens/online.js) ================= */
.online-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 2px solid #ffd23d;
  background: linear-gradient(120deg, rgba(76, 201, 240, 0.28), rgba(163, 116, 255, 0.3));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: online-glow 2.4s ease-in-out infinite;
}
.online-card__icon {
  font-size: 2.4rem;
}
.online-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.online-card__text b {
  font-size: 1.2rem;
}
.online-card__text small {
  color: var(--text-dim);
}
.online-card__go {
  font-size: 1.4rem;
  color: var(--gold);
}
@keyframes online-glow {
  50% {
    box-shadow: 0 0 22px rgba(255, 210, 61, 0.45);
  }
}

/* the picture behind the screen (math arena, number lake, fantasy land) comes from js/three/backdrop.js */
.screen--online .ol-body {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 24px;
}
.screen--online .panel {
  background: rgba(16, 21, 40, 0.82);
  backdrop-filter: blur(3px);
}

/* the start: the player's hero in the arena */
.ol-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 10px;
}
.ol-hero-row__me {
  width: 120px;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
  animation: ol-bob 1.6s ease-in-out infinite;
}
.ol-title {
  display: flex;
  flex-direction: column;
  padding: 12px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffd23d, #ff9f45);
  color: #2b2a6b;
  box-shadow: 0 6px 0 #c97a1e, 0 10px 24px rgba(0, 0, 0, 0.3);
  transform: rotate(-2deg);
}
.ol-title b {
  font-size: 2rem;
  line-height: 1;
}
.ol-title span {
  font-weight: 800;
}
@keyframes ol-bob {
  50% {
    transform: translateY(-8px);
  }
}
.ol-intro {
  text-align: center;
}
.ol-prizes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}
.ol-prizes span {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  font-weight: 800;
}
.ol-prizes i {
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1.1;
}
.ol-small {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.ol-grades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.ol-grade {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ol-grade.is-on {
  border-color: var(--gold);
  background: rgba(255, 210, 61, 0.2);
}
.ol-go {
  width: 100%;
  margin-top: 10px;
  font-size: 1.15rem;
}
.ol-wait {
  text-align: center;
  font-size: 1.15rem;
  padding: 28px 16px;
}

/* players: cards with the hero's face, VS between them */
.ol-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.ol-card {
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.2);
}
.ol-card.is-me {
  border-color: var(--gold);
  background: rgba(255, 210, 61, 0.14);
}
.ol-card b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-card__img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.ol-card__vote {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}
.ol-card--empty {
  border-style: dashed;
  color: var(--text-dim);
}
.ol-cards--small .ol-card {
  width: 104px;
  padding: 6px;
}
.ol-cards--small .ol-card__img {
  width: 48px;
  height: 48px;
}
.ol-vs {
  font-size: 1.4rem;
  font-weight: 900;
  color: #ff4d6d;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  animation: ol-pulse 1.2s ease-in-out infinite;
}
.ol-bot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: linear-gradient(180deg, #cfd6e0, #8e9aaa) !important;
}
.ol-bot--big {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  font-size: 3.6rem;
}
.ol-radar {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(76, 201, 240, 0.6);
}
.ol-radar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid #4cc9f0;
  animation: ol-ping 1.4s ease-out infinite;
}
.ol-radar--big {
  display: block;
  margin: 0 auto 12px;
}
@keyframes ol-ping {
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
@keyframes ol-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* lobby */
.ol-lobby {
  text-align: center;
}
.ol-lobby__title {
  font-size: 1.35rem;
  font-weight: 900;
}
.ol-status {
  color: var(--text-dim);
}
.ol-votes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
}
.ol-vote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  border-radius: var(--radius-md);
  border: 3px solid var(--panel-border);
  background: linear-gradient(180deg, rgba(67, 97, 238, 0.45), rgba(43, 42, 107, 0.6));
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ol-vote:hover {
  transform: translateY(-3px);
}
.ol-vote.is-on {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 210, 61, 0.35), rgba(201, 122, 30, 0.35));
  transform: scale(1.03);
}
.ol-vote__icon {
  font-size: 2.8rem;
}
.ol-vote b {
  font-size: 1.15rem;
}
.ol-vote small {
  color: var(--text-dim);
  font-size: 0.8rem;
}
.ol-vote__mine {
  position: absolute;
  top: -12px;
  right: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: #2b2a6b;
  font-size: 0.75rem;
  font-weight: 900;
}
.ol-robot {
  width: 100%;
  margin-bottom: 8px;
}

/* countdown */
.ol-count {
  text-align: center;
}
.ol-count__mode {
  font-size: 1.7rem;
  font-weight: 900;
}
.ol-count__n {
  font-size: 6rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
}
.ol-count__n.is-pop {
  animation: ol-count 0.9s ease-out;
}
@keyframes ol-count {
  0% {
    transform: scale(2.2);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.ol-go-banner {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 50;
  transform: translate(-50%, -50%);
  padding: 10px 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, #3ddc84, #22a45d);
  color: #fff;
  font-size: 3.4rem;
  font-weight: 900;
  box-shadow: 0 8px 0 #157a42, 0 16px 40px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: ol-go 1.1s ease-out forwards;
}
@keyframes ol-go {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  70% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
}

/* playing: top bar, clock, track */
.ol-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 6px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
}
.ol-top__mode {
  flex: 1;
}
.ol-top__streak {
  color: #ff9f45;
  font-size: 0.95rem;
}
.ol-top__score {
  position: relative;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: #2b2a6b;
}
.ol-pop {
  position: absolute;
  right: 6px;
  top: -6px;
  white-space: nowrap;
  font-size: 1.3rem;
  color: #3ddc84;
  text-shadow: 0 2px 0 #0b5e2e;
  pointer-events: none;
  animation: ol-rise 0.9s ease-out forwards;
}
@keyframes ol-rise {
  to {
    transform: translateY(-46px) scale(1.25);
    opacity: 0;
  }
}
.ol-time {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  margin-bottom: 8px;
}
.ol-time__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #3ddc84, #ffd23d);
  transition: width 0.2s linear;
}
.ol-time__fill.is-low {
  background: linear-gradient(90deg, #ff4d6d, #ff9f45);
  animation: ol-blink 0.6s infinite;
}
.ol-time__s {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 16px;
}
/* the players' row: face, name, score, 🛡️ / 🧊 */
.ol-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ol-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: rgba(16, 21, 40, 0.82);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
}
.ol-chip:disabled {
  opacity: 1;
  cursor: default;
}
.ol-chip.is-me {
  border-color: var(--gold);
}
.ol-chip.is-gone {
  opacity: 0.45;
}
.ol-chip.is-ice {
  background: linear-gradient(180deg, rgba(160, 225, 255, 0.85), rgba(90, 170, 230, 0.85));
  color: #0b3a5e;
}
.ol-chip.is-target {
  border-color: #ff4d6d;
  cursor: pointer;
  animation: ol-pulse 0.9s ease-in-out infinite;
}
.ol-chip__img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  font-size: 1.2rem !important;
}
.ol-chip__mon {
  font-size: 1.6rem;
  line-height: 1;
}
.ol-chip__score {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #2b2a6b;
  text-align: center;
}
.ol-chip__tag {
  font-size: 0.95rem;
}

/* what just happened (steals, hits, chests) */
.ol-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 0;
  margin-bottom: 6px;
}
.ol-feed__line {
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(16, 21, 40, 0.88);
  font-weight: 800;
  font-size: 0.85rem;
  animation: ol-feed 0.35s ease-out;
  transition: opacity 0.6s ease;
}
.ol-feed__line--good {
  background: rgba(34, 164, 93, 0.92);
}
.ol-feed__line--bad {
  background: rgba(194, 42, 70, 0.92);
}
.ol-feed__line.is-old {
  opacity: 0.5;
}
@keyframes ol-feed {
  from {
    transform: translateY(-10px) scale(0.9);
    opacity: 0;
  }
}

/* the game panel above the question */
.ol-game {
  margin-bottom: 8px;
}
.ol-powers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ol-hint {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 700;
}
.ol-hint--pick {
  color: #ffb3c0;
  font-size: 0.95rem;
  animation: ol-blink 1s infinite;
}

/* 🪙 Rebutan Peti Harta */
.ol-peti {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(16, 21, 40, 0.72);
}
.ol-peti__pile {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ol-peti__gem {
  font-size: 2.4rem;
  animation: ol-gem 1.8s ease-in-out infinite;
}
.ol-peti__pile b {
  font-size: 2rem;
  color: #7ff0ff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.ol-peti__pile small {
  color: var(--text-dim);
  font-weight: 700;
}
@keyframes ol-gem {
  50% {
    transform: rotate(-10deg) scale(1.12);
  }
}
.ol-chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffe680, #f5b700);
  color: #5a3b00;
  box-shadow: 0 0 24px rgba(255, 210, 61, 0.8);
  animation: ol-pulse 0.8s ease-in-out infinite;
}
.ol-chest__box {
  font-size: 2.6rem;
  line-height: 1;
}
.ol-chest small {
  font-weight: 700;
}
.ol-card-power {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  padding: 8px 6px;
  border-radius: 16px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #a374ff, #6a3fd0);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 #4a2a99;
}
.ol-card-power span {
  font-size: 1.9rem;
}
.ol-card-power small {
  font-size: 0.68rem;
  opacity: 0.9;
}

/* ⚡ Adu Jurus Monster */
.ol-arena-jurus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(16, 21, 40, 0.72);
}
.ol-mymon {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}
.ol-mymon__face {
  font-size: 3.4rem;
  line-height: 1;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
  animation: ol-chomp 1.1s ease-in-out infinite;
}
@keyframes ol-chomp {
  50% {
    transform: scale(1.1) rotate(-6deg);
  }
}
.ol-energy {
  position: relative;
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.ol-energy__fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd23d, #ff9f45, #ff4d6d);
  transition: width 0.3s ease;
}
.ol-energy span {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 22px;
}
.ol-jurus {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 112px;
  padding: 8px 6px;
  border-radius: 16px;
  border: 3px solid #fff;
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}
.ol-jurus:disabled {
  filter: grayscale(0.85);
  opacity: 0.55;
  cursor: not-allowed;
}
.ol-jurus span {
  font-size: 1.9rem;
}
.ol-jurus small {
  font-size: 0.66rem;
}
.ol-jurus--petir {
  background: linear-gradient(180deg, #ffcf3d, #e09000);
}
.ol-jurus--es {
  background: linear-gradient(180deg, #7fdcff, #2b8fd6);
}
.ol-jurus--shield {
  background: linear-gradient(180deg, #3ddc84, #22a45d);
}

/* 🧪 Pabrik Slime Ngawur */
.ol-slime {
  padding: 10px;
  border-radius: 22px;
  background: rgba(16, 21, 40, 0.72);
}
.ol-slime__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.ol-slime__head small {
  color: var(--text-dim);
}
.ol-lab {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.ol-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 14px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 1.9rem;
  padding: 0;
}
button.ol-cell {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  animation: ol-wobble 2.2s ease-in-out infinite;
}
.ol-cell.is-pick {
  border-color: var(--gold);
  background: rgba(255, 210, 61, 0.3);
  transform: scale(1.08);
}
.ol-cell.is-new {
  animation: ol-in 0.4s ease-out;
}
.ol-cell.is-stuck {
  filter: saturate(0.4);
  cursor: not-allowed;
}
.ol-goo {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-style: normal;
  font-size: 1.1rem;
}
/* a slime: a wobbly blob with two eyes, coloured by its level */
.ol-blob {
  position: relative;
  width: 72%;
  aspect-ratio: 1.1;
  border-radius: 48% 52% 42% 42% / 62% 60% 40% 38%;
  box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.18), inset 6px 6px 0 rgba(255, 255, 255, 0.35), 0 6px 10px rgba(0, 0, 0, 0.3);
}
.ol-blob::before,
.ol-blob::after {
  content: "";
  position: absolute;
  top: 34%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 60%, #1d2433 0 38%, #fff 40%);
}
.ol-blob::before {
  left: 26%;
}
.ol-blob::after {
  right: 26%;
}
.ol-blob--1 {
  background: radial-gradient(circle at 35% 30%, #b6ffcf, #3ddc84 60%, #1f9e57);
}
.ol-blob--2 {
  background: radial-gradient(circle at 35% 30%, #c9f2ff, #4cc9f0 60%, #1f7fb0);
}
.ol-blob--3 {
  background: radial-gradient(circle at 35% 30%, #e4d4ff, #a374ff 60%, #6a3fd0);
}
.ol-blob--4 {
  background: radial-gradient(circle at 35% 30%, #fff3b8, #ffd23d 60%, #d99a00);
}
.ol-blob--5 {
  background: conic-gradient(from 30deg, #ff4d6d, #ff9f45, #ffd23d, #3ddc84, #4cc9f0, #a374ff, #ff4d6d);
  animation: ol-spin 4s linear infinite;
}
.ol-cell--lv1 {
  background: radial-gradient(circle at 50% 60%, rgba(61, 220, 132, 0.45), rgba(255, 255, 255, 0.08) 70%);
}
.ol-cell--lv2 {
  background: radial-gradient(circle at 50% 60%, rgba(76, 201, 240, 0.5), rgba(255, 255, 255, 0.08) 70%);
}
.ol-cell--lv3 {
  background: radial-gradient(circle at 50% 60%, rgba(163, 116, 255, 0.55), rgba(255, 255, 255, 0.08) 70%);
}
.ol-cell--lv4,
.ol-cell--lv5 {
  background: radial-gradient(circle at 50% 60%, rgba(255, 210, 61, 0.6), rgba(255, 255, 255, 0.08) 70%);
  box-shadow: 0 0 16px rgba(255, 210, 61, 0.7);
}
@keyframes ol-wobble {
  50% {
    transform: scale(1.04, 0.96);
  }
}

/* the question under the game */
.ol-qbox .ol-q {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 22px;
  background: rgba(16, 21, 40, 0.86);
  text-align: center;
}
.ol-q__text {
  font-size: 1.7rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.ol-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ol-choice {
  padding: 14px 8px;
  border-radius: var(--radius-md);
  border: 3px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease;
}
.ol-choice:active {
  transform: translateY(3px);
}
.ol-choice--0 {
  background: linear-gradient(180deg, #4361ee, #3046b8);
}
.ol-choice--1 {
  background: linear-gradient(180deg, #a374ff, #7a4bd6);
}
.ol-choice--2 {
  background: linear-gradient(180deg, #ff9f45, #d9741f);
}
.ol-choice--3 {
  background: linear-gradient(180deg, #2ec4b6, #1c8f84);
}
.ol-ice {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(190, 240, 255, 0.92), rgba(110, 190, 240, 0.92));
  color: #0b3a5e;
  font-size: 1.2rem;
  font-weight: 900;
}
.screen--online.is-frozen .ol-ice {
  display: flex;
  animation: ol-in 0.3s ease-out;
}
.screen--online.is-hit .ol-body {
  animation: ol-shake 0.45s;
}
.is-right {
  background: linear-gradient(180deg, #3ddc84, #22a45d) !important;
  border-color: #fff !important;
}
.is-wrong {
  background: linear-gradient(180deg, #ff4d6d, #c22a46) !important;
  animation: ol-shake 0.35s;
}
@keyframes ol-shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* the three games on the start screen */
.ol-gamecards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.ol-gamecard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.ol-gamecard span {
  font-size: 2.2rem;
}
.ol-gamecard small {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* the end: confetti and a podium with the heroes */
.ol-confetti {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.ol-confetti i {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: var(--c);
  transform: rotate(var(--r));
  animation: ol-fall var(--t) linear var(--d) infinite;
}
@keyframes ol-fall {
  to {
    transform: translateY(110vh) rotate(calc(var(--r) + 540deg));
  }
}
.ol-done {
  text-align: center;
}
.ol-done__title {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  animation: ol-in 0.5s ease-out;
}
.ol-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin: 16px 0 10px;
}
.ol-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
}
.ol-step__hero {
  width: 92px;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}
.ol-step--1 .ol-step__hero {
  width: 116px;
  animation: ol-bob 1.2s ease-in-out infinite;
}
.ol-step .ol-bot {
  width: 78px;
  height: 78px;
  margin-bottom: 14px;
  font-size: 3rem;
}
.ol-step--1 .ol-bot {
  width: 92px;
  height: 92px;
}
.ol-step__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.85rem;
}
.ol-step__cup {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin-top: -18px;
}
.ol-step__block {
  width: 100%;
  border-radius: 14px 14px 0 0;
  font-size: 2rem;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #2b2a6b;
}
.ol-step__block small {
  font-size: 0.72rem;
}
.ol-step--1 .ol-step__block {
  height: 124px;
  background: linear-gradient(180deg, #ffe680, #f5b700);
}
.ol-step--2 .ol-step__block {
  height: 94px;
  background: linear-gradient(180deg, #f2f4f8, #b8c0cc);
}
.ol-step--3 .ol-step__block {
  height: 70px;
  background: linear-gradient(180deg, #f4c69a, #c9813f);
}
.ol-step.is-me .ol-step__name {
  color: var(--gold);
}
.ol-done__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
@keyframes ol-pulse {
  50% {
    transform: scale(1.18);
  }
}
@keyframes ol-blink {
  50% {
    opacity: 0.4;
  }
}

/* the medal shelf on Prestasi */
.medals__cups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.medals__cups div {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
}
.medals__cups span {
  font-size: 2rem;
}
.medals__cups b {
  font-size: 1.3rem;
}
.medals__cups small,
.medals__empty {
  color: var(--text-dim);
}
.medals__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid var(--panel-border);
  text-align: center;
}
.medal--1 {
  border-color: #ffd23d;
}
.medal--2 {
  border-color: #cfd6e0;
}
.medal--3 {
  border-color: #d6914f;
}
.medal__cup {
  font-size: 2rem;
}
.medal__rank {
  font-weight: 800;
  font-size: 0.85rem;
}
.medal small {
  color: var(--text-dim);
  font-size: 0.72rem;
}
.medals .btn {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 520px) {
  .ol-choices {
    grid-template-columns: 1fr 1fr;
  }
  .ol-step {
    width: 96px;
  }
  .ol-step__hero {
    width: 72px;
  }
  .ol-step--1 .ol-step__hero {
    width: 92px;
  }
  .ol-card {
    width: 108px;
  }
  .ol-lane {
    grid-template-columns: 58px 1fr 20px;
  }
  .ol-title b {
    font-size: 1.6rem;
  }
  .ol-hero-row__me {
    width: 96px;
  }
  .medals__cups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ol-votes,
  .ol-gamecards {
    grid-template-columns: 1fr;
  }
  .ol-lab {
    grid-template-columns: repeat(4, 1fr);
  }
  .ol-q__text {
    font-size: 1.45rem;
  }
}