/* MU World – player pages (/daftar/, /masuk/, /akun/). Builds on the tokens of style.css. */

.portal-page { min-height: 100vh; display: flex; flex-direction: column; }
.portal-main {
  position: relative; z-index: var(--z-content); flex: 1;
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: calc(var(--space-8) + var(--space-3)) var(--gutter) var(--space-7);
  display: grid; justify-items: center; align-content: start;
}

/* ---------- Background: embers + slow rune sigil ---------- */
.portal-bg { position: fixed; inset: 0; z-index: var(--z-base); pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #17101f 0%, var(--bg) 62%); }
.portal-bg__embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal-bg__sigil {
  position: absolute; left: 50%; top: 46%; width: min(1100px, 150vw); translate: -50% -50%;
  opacity: .22; overflow: visible;
}
.portal-bg__sigil circle, .portal-bg__sigil polygon { fill: none; stroke: var(--gold); stroke-width: .8; }
.portal-bg__sigil .dash { stroke-dasharray: 2 10; }
.portal-bg__sigil text { fill: var(--gold); font-family: var(--font-display); font-size: 15px; letter-spacing: 6px; }
.portal-bg__spin { transform-origin: 300px 300px; animation: portal-spin 140s linear infinite; }
@keyframes portal-spin { to { transform: rotate(360deg); } }

/* ---------- Nav (simplified for these pages) ---------- */
.portal-page .nav { position: fixed; }
.portal-nav-link {
  text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--muted);
  padding: var(--space-2) var(--space-2); transition: color var(--dur-fast);
}
.portal-nav-link:hover, .portal-nav-link.is-active { color: var(--gold-hi); }
.portal-inline-form { margin: 0; }
@media (max-width: 820px) { .portal-page .nav__right .btn { display: inline-flex; } }

/* ---------- Card ---------- */
.portal-card {
  position: relative; width: 100%; max-width: 480px;
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(160deg, rgba(30, 22, 40, .78), rgba(10, 8, 15, .86));
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 223, 154, .08);
  animation: card-rise 900ms var(--ease-out) both;
  isolation: isolate;
}
/* Gold edge that slowly travels around the card */
.portal-card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--edge-angle, 0deg), transparent 0 70%, var(--gold-hi) 80%, var(--ember) 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge-travel 7s linear infinite; opacity: .8;
}
@property --edge-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes edge-travel { to { --edge-angle: 360deg; } }
@keyframes card-rise { from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(6px); } }

.portal-card--wide { max-width: 960px; display: grid; grid-template-columns: 5fr 7fr; }
.portal-card__body { padding: clamp(var(--space-4), 5vw, var(--space-6)); display: grid; gap: var(--space-3); }
.portal-card__aside {
  position: relative; padding: var(--space-6) var(--space-5); border-right: 1px solid var(--line);
  display: grid; align-content: center; gap: var(--space-6); overflow: hidden; border-radius: 22px 0 0 22px;
  background: radial-gradient(circle at 50% 35%, rgba(232, 176, 75, .16), transparent 60%);
}
.portal-title { font-size: clamp(1.9rem, 4.4vw, 2.6rem); font-weight: 700; }
.portal-lead { color: var(--muted); }

/* Crest that draws itself, like the intro portal */
.portal-crest { width: min(220px, 60%); margin: 0 auto; position: relative; }
.portal-crest--small { width: 92px; margin: 0 0 var(--space-2); }
.portal-crest svg, .account-hero__crest svg { overflow: visible; animation: portal-spin 60s linear infinite; }
.portal-crest .draw, .account-hero__crest .draw {
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: draw 1600ms var(--ease-out) forwards; filter: drop-shadow(0 0 6px rgba(232, 176, 75, .6));
}
.draw--2 { animation-delay: 160ms !important; }
.draw--3 { animation-delay: 320ms !important; }
.draw--4 { animation-delay: 480ms !important; }

.portal-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.portal-steps li {
  display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-weight: 600;
  opacity: 0; animation: step-in 700ms var(--ease-out) forwards;
}
.portal-steps li:nth-child(1) { animation-delay: 500ms; }
.portal-steps li:nth-child(2) { animation-delay: 650ms; }
.portal-steps li:nth-child(3) { animation-delay: 800ms; }
.portal-steps span {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  font-family: var(--font-display); font-size: .8rem; color: var(--gold-hi);
}
.portal-steps span::before {
  content: ""; position: absolute; inset: 4px; z-index: -1; rotate: 45deg;
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
@keyframes step-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---------- Form ---------- */
.portal-form { display: grid; gap: var(--space-4); margin-top: var(--space-2); }
.portal-field { display: grid; gap: 6px; }
.portal-field label, .account-form h3 { font-weight: 700; font-size: .88rem; letter-spacing: .04em; }
.portal-field__control { position: relative; }
.portal-field input {
  width: 100%; min-height: 50px; padding: 0 var(--space-3); font: inherit; font-size: 1rem; color: var(--text);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-mid), background var(--dur-mid);
}
.portal-field input[type="password"], .portal-field input.is-revealed { padding-right: 52px; }
.portal-field input:hover { border-color: var(--line-strong); }
.portal-field input:focus {
  outline: none; border-color: var(--gold); background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 4px rgba(232, 176, 75, .14), 0 0 24px -6px rgba(255, 150, 60, .55);
}
.portal-field.has-error input, .portal-field input.is-mismatch { border-color: var(--bad); }
.portal-field.has-error input:focus { box-shadow: 0 0 0 4px rgba(255, 93, 93, .16); }
.portal-field__hint { color: var(--muted); font-size: .82rem; }
.portal-field__error { color: #ff8a8a; font-size: .85rem; font-weight: 600; }
.portal-field__error::before { content: "✦ "; color: var(--bad); }

.portal-reveal {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 10px;
}
.portal-reveal:hover, .portal-reveal[aria-pressed="true"] { color: var(--gold-hi); }
.portal-reveal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.portal-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.portal-strength span { height: 3px; border-radius: 2px; background: var(--surface-2); transition: background var(--dur-mid), box-shadow var(--dur-mid); }
.portal-strength[data-level="1"] span:nth-child(-n+1) { background: var(--bad); }
.portal-strength[data-level="2"] span:nth-child(-n+2) { background: var(--ember); }
.portal-strength[data-level="3"] span:nth-child(-n+3) { background: var(--gold); }
.portal-strength[data-level="4"] span { background: var(--ok); box-shadow: 0 0 8px rgba(87, 214, 141, .6); }

.portal-check label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; color: var(--muted); font-size: .88rem; }
.portal-check input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .35); display: grid; place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.portal-check input::after { content: ""; width: 10px; height: 6px; border: solid var(--on-gold); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale var(--dur-mid) var(--ease-spring); }
.portal-check input:checked { background: var(--gold); border-color: var(--gold); }
.portal-check input:checked::after { scale: 1; }
.portal-check.has-error input { border-color: var(--bad); }

.portal-submit { width: 100%; }
.portal-submit.is-busy { pointer-events: none; }
.portal-submit.is-busy span::after { content: "…"; }
.portal-alt { text-align: center; color: var(--muted); font-size: .9rem; }
.portal-alt a { color: var(--gold-hi); font-weight: 700; text-underline-offset: 3px; }
.portal-alt--muted { font-size: .8rem; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.portal-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.portal-flash {
  padding: var(--space-3) var(--space-4); border-radius: 12px; font-weight: 600; font-size: .92rem;
  border: 1px solid; animation: flash-in 500ms var(--ease-out) both;
}
.portal-flash--ok { color: #b8f5cf; border-color: rgba(87, 214, 141, .45); background: rgba(87, 214, 141, .08); }
.portal-flash--error { color: #ffc2c2; border-color: rgba(255, 93, 93, .45); background: rgba(255, 93, 93, .08); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Account page ---------- */
.account { width: 100%; display: grid; gap: var(--space-6); }
.account > .portal-card { justify-self: center; }
.account-hero { display: flex; align-items: center; gap: var(--space-5); animation: card-rise 900ms var(--ease-out) both; }
.account-hero__crest { position: relative; width: 116px; flex: none; }
.account-hero__crest span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-deco); font-weight: 900; font-size: 2.4rem; color: var(--gold-hi);
  text-shadow: 0 0 22px rgba(255, 170, 70, .8);
}
.account-hero__text { display: grid; gap: var(--space-2); justify-items: start; }
.account-badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; border: 1px solid var(--line); background: var(--surface);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--ok { color: var(--ok); border-color: rgba(87, 214, 141, .35); }
.badge--bad { color: var(--bad); border-color: rgba(255, 93, 93, .4); }
.badge--gold { color: var(--gold-hi); border-color: var(--line-strong); }
.badge--muted { color: var(--muted); }
.badge--live::before { animation: ping 1.8s infinite; box-shadow: 0 0 0 0 rgba(87, 214, 141, .6); }

.account-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.account-stat {
  padding: var(--space-4); border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(160deg, rgba(30, 22, 40, .7), rgba(10, 8, 15, .8)); backdrop-filter: blur(10px);
  animation: card-rise 800ms var(--ease-out) backwards;
}
.account-stat:nth-child(2) { animation-delay: 80ms; }
.account-stat:nth-child(3) { animation-delay: 160ms; }
.account-stat:nth-child(4) { animation-delay: 240ms; }
.account-stat__label { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.account-stat__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--gold-hi); margin-top: var(--space-1); }
.account-stat__value small { font-size: .9rem; color: var(--muted); }

.account-section { display: grid; gap: var(--space-4); }
.account-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); }
.account-section__head h2 { font-size: 1.6rem; }
.account-section__head p { color: var(--muted); font-size: .88rem; }

.char-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.char-card {
  --rx: 0deg; --ry: 0deg;
  position: relative; padding: var(--space-5) var(--space-4) var(--space-4); border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--class-color) 40%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--class-color) 16%, rgba(14, 10, 20, .9)), rgba(8, 6, 12, .92) 70%);
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid), box-shadow var(--dur-mid);
  animation: card-rise 800ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms);
}
.char-card:hover { border-color: var(--class-color); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--class-color) 70%, transparent); }
.char-card__glow {
  position: absolute; inset: auto -30% 55% -30%; height: 180px; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--class-color) 45%, transparent), transparent 70%);
  opacity: .55;
}
.char-card__class { position: relative; color: var(--class-color); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.char-card__name { position: relative; font-size: 1.5rem; margin-top: var(--space-1); word-break: break-word; }
.char-card__stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); }
.char-card__stats div { padding: var(--space-2); border-radius: 10px; background: rgba(0, 0, 0, .3); text-align: center; }
.char-card__stats dt { font-size: .7rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.char-card__stats dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.char-card__map { position: relative; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.char-card__map svg { width: 16px; height: 16px; fill: none; stroke: var(--class-color); stroke-width: 1.8; }

.account-empty {
  display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--line-strong); border-radius: 18px; color: var(--muted); background: var(--surface);
}
.account-empty svg { width: 48px; height: 48px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-empty strong { color: var(--text); }

.account-forms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.account-form {
  margin: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(30, 22, 40, .7), rgba(10, 8, 15, .82)); backdrop-filter: blur(10px);
  scroll-margin-top: 100px;
}
.account-form h3 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0; }
.account-form__current { color: var(--muted); font-size: .9rem; word-break: break-all; }
.account-form .btn { justify-self: start; }

/* ---------- Two-step verification ---------- */
.portal-link-button {
  border: 0; background: none; padding: var(--space-2); font: inherit; font-size: .88rem; font-weight: 700;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.portal-link-button:hover { color: var(--gold-hi); }
.portal-code { font-family: var(--font-display); font-size: 1.5rem !important; letter-spacing: .4em; text-align: center; }

.tf-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(30, 22, 40, .7), rgba(10, 8, 15, .82)); backdrop-filter: blur(10px);
}
.tf-card__text { display: grid; gap: var(--space-2); }
.tf-card__icon, .tf-setup__num { filter: drop-shadow(0 0 10px rgba(232, 176, 75, .45)); }
.tf-card__icon { width: 52px; height: 52px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tf-setup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start; }
.tf-setup__step {
  position: relative; display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, rgba(30, 22, 40, .7), rgba(10, 8, 15, .82));
  animation: card-rise 700ms var(--ease-out) backwards;
}
.tf-setup__step:nth-child(2) { animation-delay: 100ms; }
.tf-setup__step:nth-child(3) { animation-delay: 200ms; }
.tf-setup__step h3 { font-size: 1.15rem; }
.tf-setup__step p { color: var(--muted); font-size: .9rem; }
.tf-setup__step .portal-form { width: 100%; margin: 0; }
.tf-setup__num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-hi); font-family: var(--font-display); font-weight: 700;
}
.tf-qr { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 6px; justify-self: center; box-shadow: 0 0 0 1px var(--line-strong), 0 0 40px -10px rgba(255, 170, 70, .6); }
.tf-secret code, .tf-recovery__codes code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95rem; letter-spacing: .06em;
  color: var(--gold-hi); word-break: break-all;
}
.tf-recovery {
  display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: 18px;
  border: 1px solid var(--gold); background: rgba(232, 176, 75, .07); animation: flash-in 500ms var(--ease-out) both;
}
.tf-recovery p { color: var(--muted); }
.tf-recovery__codes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.tf-recovery__codes li { padding: var(--space-2) var(--space-3); border-radius: 10px; background: rgba(0, 0, 0, .35); text-align: center; }
.tf-recovery .btn { justify-self: start; }
[data-copy].is-copied { border-color: var(--ok); color: var(--ok); }

.portal-footer {
  position: relative; z-index: var(--z-content); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--gutter); border-top: 1px solid var(--line); background: rgba(13, 11, 20, .85);
  color: var(--muted); font-size: .82rem;
}
.portal-footer a { color: var(--gold-hi); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .portal-card--wide { grid-template-columns: 1fr; max-width: 520px; }
  .portal-card__aside { border-right: 0; border-bottom: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: var(--space-5); gap: var(--space-4); }
  .portal-card__aside .portal-crest { width: 120px; }
  .account-stats { grid-template-columns: repeat(2, 1fr); }
  .account-forms { grid-template-columns: 1fr; }
  .tf-setup { grid-template-columns: 1fr; }
  .tf-card { grid-template-columns: 1fr; justify-items: start; }
  .tf-recovery__codes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .portal-main { padding-top: calc(var(--space-7) + var(--space-4)); }
  .portal-steps { display: none; }
  .account-hero { flex-direction: column; text-align: center; }
  .account-hero__text { justify-items: center; }
  .account-stat__value { font-size: 1.2rem; }
  .portal-page .nav__right { gap: var(--space-2); }
  .portal-nav-link { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-card, .account-hero, .account-stat, .char-card, .portal-steps li { opacity: 1 !important; animation: none !important; transform: none !important; }
  .portal-crest .draw, .account-hero__crest .draw { stroke-dashoffset: 0; animation: none; }
  .portal-bg__spin, .portal-crest svg, .account-hero__crest svg { animation: none; }
}

/* ---------- Race war ranking (/peringkat/) ---------- */
.ranking { width: 100%; max-width: 980px; display: grid; gap: var(--space-6); }
.ranking__head { text-align: center; }
.ranking__races { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ranking__race {
  border: 1px solid var(--line); border-top: 3px solid var(--race-color); border-radius: 16px; padding: var(--space-4);
  background: linear-gradient(160deg, rgba(30, 22, 40, .78), rgba(10, 8, 15, .86)); text-align: center;
}
.ranking__race-name { margin: 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--race-color); }
.ranking__race-wins { margin: var(--space-2) 0 0; color: var(--muted); }
.ranking__race-wins strong { color: var(--text); font-size: 1.6rem; }
.ranking__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 var(--space-3); }
.ranking__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 8, 15, .7); }
.ranking__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ranking__table th, .ranking__table td { padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.ranking__table th { color: var(--muted); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.ranking__table tbody tr:nth-child(-n+3) td:first-child { color: var(--gold-hi); font-weight: 700; }
.ranking__titles ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); }
.ranking__titles strong { color: var(--text); }
@media (max-width: 640px) { .ranking__races { grid-template-columns: 1fr; } }