:root {
  color-scheme: dark;
}

body.ehadir-system {
  --em-cyan: #55e7ff;
  --em-green: #49e6ac;
  --em-purple: #a98bff;
  --em-text: #f4f8ff;
  --em-muted: #aec0da;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(24, 190, 184, .18), transparent 28%),
    radial-gradient(circle at 90% 14%, rgba(112, 66, 230, .24), transparent 31%),
    linear-gradient(145deg, #061223, #0a1026 52%, #1d1240);
}

.emurid-body {
  min-height: 70vh;
}

.emurid-shell {
  width: min(980px, calc(100% - 28px));
  margin: 24px auto 54px;
  color: var(--em-text);
}

.emurid-hero {
  padding: clamp(24px, 5vw, 42px);
  background: linear-gradient(135deg, rgba(14, 116, 144, .9), rgba(58, 44, 145, .88));
  border: 1px solid rgba(147, 231, 255, .28);
  border-radius: 26px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}

.emurid-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 7vw, 3.5rem);
  letter-spacing: -.055em;
}

.emurid-hero p {
  margin: 0;
  color: #daf7ff;
  line-height: 1.55;
}

.emurid-card {
  margin-top: 20px;
  padding: clamp(20px, 4vw, 32px);
  color: var(--em-text);
  background: rgba(10, 27, 51, .92);
  border: 1px solid #28486f;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.emurid-card h2 {
  margin: 0 0 8px;
}

.emurid-card p {
  color: var(--em-muted);
  line-height: 1.55;
}

.emurid-form {
  display: grid;
  gap: 16px;
}

.emurid-field label {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}

.emurid-field select,
.emurid-field input {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  color: #eff7ff;
  background: #091a31;
  border: 1px solid #35577f;
  border-radius: 12px;
  font: inherit;
}

.emurid-field input:focus,
.emurid-field select:focus {
  border-color: var(--em-cyan);
  outline: 3px solid rgba(85, 231, 255, .22);
}

.emurid-button {
  display: inline-flex;
  min-height: 50px;
  padding: 12px 20px;
  align-items: center;
  justify-content: center;
  color: #020617;
  background: linear-gradient(135deg, var(--em-cyan), var(--em-green));
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

a.emurid-button:not(.emurid-button--secondary):visited {
  color: #020617;
}

.emurid-button--secondary {
  color: #eef7ff;
  background: #183455;
  border: 1px solid #3b6089;
}

.emurid-alert {
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: 12px;
  line-height: 1.45;
}

.emurid-alert--error {
  color: #ffdce5;
  background: #6f1731;
  border: 1px solid #b93e60;
}

.emurid-alert--success {
  color: #d9fff0;
  background: #125744;
  border: 1px solid #2aa87e;
}

.emurid-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.emurid-links a,
.emurid-topbar a {
  color: #78eaff;
  font-weight: 800;
}

.emurid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.emurid-module {
  display: flex;
  min-height: 190px;
  padding: 24px;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(145deg, #5927a3, #187c9a);
  border: 1px solid rgba(175, 225, 255, .42);
  border-radius: 22px;
  box-shadow: 0 17px 36px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}

.emurid-module:hover {
  transform: translateY(-4px);
}

.emurid-module__icon {
  font-size: 2.4rem;
}

.emurid-module--arena {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(253, 224, 71, .26), transparent 24%),
    linear-gradient(145deg, #0f7890, #2546a1 58%, #5b2a9d);
}

.emurid-module__mascot {
  position: absolute;
  width: 150px;
  height: 180px;
  top: -12px;
  right: 4px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(2, 8, 23, .42));
  animation: arena-float 4.2s ease-in-out infinite;
}

.emurid-module--arena strong,
.emurid-module--arena small,
.emurid-module--arena span:last-child {
  position: relative;
  width: calc(100% - 125px);
  z-index: 1;
}

.emurid-module strong {
  margin-top: 18px;
  font-size: 1.35rem;
}

.emurid-module small {
  margin-top: 7px;
  color: #d9eeff;
  line-height: 1.4;
}

.emurid-module span:last-child {
  margin-top: auto;
  padding-top: 17px;
  font-weight: 850;
}

.emurid-profile {
  display: flex;
  gap: 14px;
  align-items: center;
}

.emurid-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  background: #193b5f;
  border-radius: 17px;
  font-size: 1.8rem;
}

.emurid-profile strong,
.emurid-profile small {
  display: block;
}

.emurid-profile small {
  margin-top: 4px;
  color: var(--em-muted);
}

.emurid-topbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.emurid-help {
  color: var(--em-muted);
  font-size: .9rem;
}

html[data-theme="light"] body.ehadir-system {
  --em-text: #17233d;
  --em-muted: #52637c;
  background: linear-gradient(145deg, #eef8ff, #f5f0ff);
}

html[data-theme="light"] .emurid-card {
  background: #fff;
  border-color: #cadbea;
  box-shadow: 0 16px 38px rgba(39, 67, 100, .12);
}

html[data-theme="light"] .emurid-field select,
html[data-theme="light"] .emurid-field input {
  color: #17233d;
  background: #f7fbff;
  border-color: #b8cce0;
}

html[data-theme="light"] .emurid-button--secondary {
  color: #18334f;
  background: #e9f4ff;
  border-color: #b8d1e8;
}

/* Arena Ilmu */
.arena-page {
  overflow-x: hidden;
}

.arena-hero {
  position: relative;
  display: grid;
  min-height: 330px;
  margin-bottom: 24px;
  padding: clamp(28px, 5vw, 58px);
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 18%, rgba(250, 204, 21, .28), transparent 22%),
    radial-gradient(circle at 18% 100%, rgba(34, 211, 238, .3), transparent 32%),
    linear-gradient(135deg, #0e7490 0%, #1d4ed8 52%, #6d28d9 100%);
  border: 1px solid rgba(103, 232, 249, .5);
  border-radius: 32px;
  box-shadow: 0 24px 65px rgba(2, 8, 23, .42);
}

.arena-hero::before {
  position: absolute;
  width: 220px;
  height: 220px;
  top: -110px;
  left: 38%;
  content: "";
  background: rgba(255, 255, 255, .1);
  border-radius: 50%;
}

.arena-hero__copy {
  position: relative;
  z-index: 2;
}

.arena-kicker {
  display: inline-block;
  color: #a5f3fc;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.arena-hero h1 {
  margin: 8px 0;
  font-size: clamp(3rem, 8vw, 5.8rem);
  line-height: .95;
  text-shadow: 0 6px 24px rgba(4, 15, 45, .32);
}

.arena-hero p {
  max-width: 580px;
  color: #e0f2fe;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
}

.arena-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.arena-stats span {
  padding: 9px 13px;
  background: rgba(4, 18, 48, .46);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.arena-mascot-wrap {
  position: absolute;
  width: min(39%, 390px);
  height: 110%;
  right: 0;
  bottom: -14%;
  z-index: 1;
}

.arena-mascot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(2, 8, 23, .4));
  transform-origin: 50% 82%;
  animation: arena-float 4.2s ease-in-out infinite;
}

.arena-spark {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
  background: #fde047;
  border-radius: 6px 50%;
  box-shadow: 0 0 22px #fde047;
  animation: arena-sparkle 2.1s ease-in-out infinite;
}

.arena-spark--one { top: 18%; left: 6%; }
.arena-spark--two { top: 48%; right: 8%; animation-delay: .8s; }

@keyframes arena-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-13px) rotate(1.5deg); }
}

@keyframes arena-sparkle {
  0%, 100% { opacity: .35; transform: scale(.7) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(90deg); }
}

.arena-attendance {
  display: flex;
  margin: -4px 0 22px;
  padding: 17px 20px;
  gap: 15px;
  align-items: center;
  color: #eaf5ff;
  background: #0d1b30;
  border: 1px solid #2d557b;
  border-radius: 18px;
}

.arena-attendance__icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  color: #071426;
  background: #a5f3fc;
  border-radius: 50%;
  font-size: 1.45rem;
  font-weight: 950;
}

.arena-attendance h2 { margin: 3px 0; font-size: 1.2rem; }
.arena-attendance p { margin: 0; color: #b8c8dc; }
.arena-attendance--plus { border-color: #34d399; }
.arena-attendance--plus .arena-attendance__icon { background: #6ee7b7; }
.arena-attendance--minus { border-color: #fb7185; }
.arena-attendance--minus .arena-attendance__icon { background: #fda4af; }
.arena-attendance--zero .arena-attendance__icon,
.arena-attendance--pending .arena-attendance__icon { background: #dbeafe; }

html[data-theme="light"] .arena-attendance {
  color: #17233d;
  background: #fff;
  border-color: #bad1e5;
}
html[data-theme="light"] .arena-attendance--plus { border-color: #16a36f; }
html[data-theme="light"] .arena-attendance--minus { border-color: #e34b67; }
html[data-theme="light"] .arena-attendance p { color: #52657d; }

.arena-question,
.arena-feedback,
.arena-ready,
.arena-board {
  margin-top: 22px;
  padding: clamp(22px, 4vw, 38px);
  background: linear-gradient(145deg, rgba(15, 35, 62, .98), rgba(9, 24, 45, .98));
  border: 1px solid #2d557b;
  border-radius: 26px;
  box-shadow: 0 18px 46px rgba(2, 8, 23, .24);
}

.arena-question__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #a5f3fc;
}

.arena-progress {
  height: 12px;
  margin: 15px 0 28px;
  overflow: hidden;
  background: #071426;
  border: 1px solid #264667;
  border-radius: 999px;
}

.arena-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #34d399, #fde047);
  border-radius: inherit;
  transition: width .45s ease;
}

.arena-question h2 {
  max-width: 850px;
  margin: 0 auto 28px;
  color: #f8fbff;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.45;
  text-align: center;
}

.arena-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.arena-option {
  display: flex;
  min-height: 76px;
  padding: 14px;
  gap: 13px;
  align-items: center;
  color: #eef7ff;
  background: #102746;
  border: 2px solid #2c557c;
  border-radius: 17px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.arena-option:hover {
  border-color: #67e8f9;
  transform: translateY(-2px);
}

.arena-option:has(input:checked) {
  color: #061a2b;
  background: linear-gradient(135deg, #a5f3fc, #6ee7b7);
  border-color: #ecfeff;
}

.arena-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.arena-option__letter {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #0a2340;
  background: #e0f2fe;
  border-radius: 12px;
  font-weight: 950;
}

.arena-submit {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: min(100%, 310px);
  margin-top: 8px;
}

.arena-feedback,
.arena-ready {
  text-align: center;
}

.arena-feedback {
  position: relative;
  overflow: hidden;
  animation: arena-arrive .45s cubic-bezier(.2,.9,.3,1.2);
}

.arena-feedback--correct { border-color: #34d399; }
.arena-feedback--wrong { border-color: #fb7185; }

.arena-feedback__burst,
.arena-ready__medal {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  place-items: center;
  color: #082032;
  background: linear-gradient(135deg, #fde047, #fb923c);
  border: 5px solid rgba(255,255,255,.8);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(253, 224, 71, .12), 0 12px 30px rgba(2,8,23,.3);
  font-size: 2.2rem;
  font-weight: 950;
}

.arena-feedback--correct .arena-feedback__burst {
  background: linear-gradient(135deg, #6ee7b7, #22d3ee);
}

.arena-feedback h2,
.arena-ready h2,
.arena-board h2 { margin: 8px 0; }
.arena-feedback__answer { font-size: 1.1rem; }
.arena-points,
.arena-total { display: block; margin: 16px 0; color: #fde68a; font-size: 1.35rem; font-weight: 950; }
.arena-start { min-width: min(100%, 300px); }

@keyframes arena-arrive {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.arena-board {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: start;
}

.arena-board ol { margin: 0; padding: 0; list-style: none; }
.arena-board li {
  display: grid;
  padding: 11px 13px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border-bottom: 1px solid #263f5e;
}
.arena-board li.is-me { background: rgba(34, 211, 238, .1); border-radius: 12px; }
.arena-board li small { display: block; color: #9fb0c9; }
.arena-rank { display: grid; width: 34px; height: 34px; place-items: center; color: #071426; background: #a5f3fc; border-radius: 50%; font-weight: 950; }
.arena-board li:nth-child(1) .arena-rank { background: #fde047; }
.arena-board li:nth-child(2) .arena-rank { background: #dbeafe; }
.arena-board li:nth-child(3) .arena-rank { background: #fdba74; }
.arena-empty { padding: 18px; color: #aebed2; background: #0a192d; border-radius: 14px; text-align: center; }

html[data-theme="light"] .arena-question,
html[data-theme="light"] .arena-feedback,
html[data-theme="light"] .arena-ready,
html[data-theme="light"] .arena-board { color: #17233d; background: #fff; border-color: #bad1e5; }
html[data-theme="light"] .arena-question h2 { color: #14233c; }
html[data-theme="light"] .arena-question__top { color: #0e647f; }
html[data-theme="light"] .arena-feedback .arena-kicker,
html[data-theme="light"] .arena-ready .arena-kicker,
html[data-theme="light"] .arena-board .arena-kicker { color: #0e647f; }
html[data-theme="light"] .arena-option { color: #17324f; background: #edf6fd; border-color: #b8d1e8; }
html[data-theme="light"] .arena-progress { background: #dceaf5; border-color: #c1d4e5; }
html[data-theme="light"] .arena-points,
html[data-theme="light"] .arena-total { color: #92400e; }
html[data-theme="light"] .arena-board li { border-color: #d7e3ee; }
html[data-theme="light"] .arena-empty { color: #52657d; background: #edf5fb; }

@media (max-width: 760px) {
  .arena-hero { min-height: 440px; padding-bottom: 190px; grid-template-columns: 1fr; }
  .arena-mascot-wrap { width: 245px; height: 260px; right: 50%; bottom: -15px; transform: translateX(50%); }
  .arena-hero__copy { text-align: center; }
  .arena-stats { justify-content: center; }
  .arena-options,
  .arena-board { grid-template-columns: 1fr; }
  .arena-question__top { align-items: center; flex-direction: column; }
  .arena-option { min-height: 66px; }
  .arena-attendance { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-mascot,
  .arena-spark,
  .arena-feedback { animation: none !important; }
  .arena-progress span,
  .arena-option { transition: none !important; }
}

html[data-theme="light"] .emurid-links a,
html[data-theme="light"] .emurid-topbar a {
  color: #086d86;
}

@media (max-width: 620px) {
  .emurid-shell {
    width: min(calc(100% - 18px), 980px);
    margin-top: 10px;
  }

  .emurid-hero,
  .emurid-card {
    border-radius: 18px;
  }

  .emurid-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
}