:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
  --ink:#e8eaf0; --muted:#9aa2b1; --gold:#c9a24b; --gold2:#e2c273;
  --red:#e5534b; --green:#3fb27f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -200px,#1b2030,var(--bg)) no-repeat,var(--bg);
  color:var(--ink);font-family:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55;min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0c0e12;border:1px solid var(--line);border-radius:4px;padding:.05em .4em;font-size:.92em}

header.site{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.5rem;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,.25),transparent);
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo-img-full{
  height:80px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 6px rgba(201,162,75,0.3));
  transition:transform 0.25s ease, filter 0.25s ease;
}
.brand:hover .brand-logo-img-full{
  transform:scale(1.05);
  filter:drop-shadow(0 0 10px rgba(201,162,75,0.55));
}
.brand-logo-wrap{display:flex;align-items:center;gap:0.75rem}
.brand-img-container{
  width: 46px;
  height: 46px;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}
.brand:hover .brand-img-container{
  transform: scale(1.05) rotate(-2deg);
}
.brand-logo-img{
  width: 60px;
  height: auto;
  position: absolute;
  top: 4px;
  transform: translateY(-16%);
  filter: drop-shadow(0 0 4px rgba(201, 162, 75, 0.25));
}
.brand-text-wrap{display:flex;flex-direction:column;line-height:1.15}
.brand-main{font-size:1.2rem;font-weight:800;letter-spacing:0.02em;color:var(--gold2)}
.brand-highlight{color:var(--red);text-shadow:0 0 10px rgba(192, 57, 43, 0.4)}
.brand-sub{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.18em}
nav a{margin-left:1.25rem;color:var(--ink);font-weight:600;font-size:.95rem}

main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:2.5rem 1.5rem}

.hero{text-align:center;padding:1rem 0 2.5rem}
.hero h1{font-size:2.3rem;margin:.6rem 0 .4rem;font-weight:800;letter-spacing:.01em}
.lede{color:var(--muted);font-size:1.1rem;margin:0 0 1.5rem}
.status{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;padding:.35rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);
}
.status .dot{width:9px;height:9px;border-radius:50%}
.status.up{color:var(--green)} .status.up .dot{background:var(--green);box-shadow:0 0 10px var(--green)}
.status.down{color:var(--red)} .status.down .dot{background:var(--red)}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0 1.2rem}
.metric{color:var(--muted);font-size:.95rem}
.metric strong{color:var(--gold2);font-size:1.15rem}

.btn{
  display:inline-block;padding:.7rem 1.4rem;border-radius:8px;font-weight:700;
  border:1px solid transparent;cursor:pointer;font-size:1rem;transition:.15s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#221c0a;border-color:var(--gold)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.2rem}
.card h2{margin:.1rem 0 .5rem;font-size:1.05rem;color:var(--gold2)}
.card p{margin:.3rem 0;color:var(--muted);font-size:.95rem}
.addr{background:#0c0e12;border:1px solid var(--line);border-radius:6px;padding:.6rem .8rem;margin:.4rem 0 0;color:var(--gold2);font-size:1.05rem;text-align:center;letter-spacing:.03em}

.form-wrap{max-width:440px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.8rem}
.form-wrap h1{margin:0 0 1.2rem;font-size:1.5rem;text-align:center}
form label{display:block;margin:0 0 1rem;font-weight:600;font-size:.95rem}
form input{
  display:block;width:100%;margin-top:.35rem;padding:.65rem .75rem;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-size:1rem;
}
form input:focus{outline:none;border-color:var(--gold)}
form small{display:block;margin-top:.3rem;color:var(--muted);font-weight:400;font-size:.82rem}
form .btn{width:100%;margin-top:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{border-radius:10px;padding:1rem 1.1rem;margin-bottom:1.2rem;font-size:.95rem}
.alert.err{background:rgba(229,83,75,.12);border:1px solid rgba(229,83,75,.5)}
.alert.ok{background:rgba(63,178,127,.12);border:1px solid rgba(63,178,127,.5)}
.alert ul{margin:.2rem 0;padding-left:1.2rem}
.alert.ok p{margin:.5rem 0}

footer{
  border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;
  text-align:center;padding:1.5rem;margin-top:2rem;
}
@media(max-width:520px){.hero h1{font-size:1.8rem}}

/* --- Dashboard / Character Slots --- */
.dashboard-wrap {
  width: 100%;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.dashboard-header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--ink), var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slot-count {
  font-size: 1.25rem;
  color: var(--gold2);
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(201, 162, 75, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 75, 0.2);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.char-card {
  position: relative;
  background: linear-gradient(145deg, #151821, #0c0e12);
  border: 1px solid rgba(201, 162, 75, 0.15);
  border-radius: 16px;
  padding: 1.8rem;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, box-shadow 0.25s;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.char-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 40px rgba(201, 162, 75, 0.15);
}

.char-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #ec4899, #be185d);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
  letter-spacing: 0.02em;
}

.char-info {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1rem;
}
.char-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2b1c40, #170d26);
  border: 1px solid #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #a78bfa;
  box-shadow: inset 0 0 10px rgba(124, 58, 237, 0.2);
}
.char-details {
  padding-right: 55px;
  min-width: 0;
}
.char-details h3 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
}
.char-id {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.char-stats {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
}
.stat-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  background: #11131a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.3rem;
  transition: border-color 0.2s;
}
.stat-row:hover {
  border-color: rgba(201, 162, 75, 0.3);
}
.stat-label {
  font-size: 0.64rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}
.stat-val {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stat-val.hero-val {
  color: #60a5fa;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.35);
}

/* Empty Character Slot */
.char-card.empty {
  border: 2px dashed rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.005);
  justify-content: center;
  align-items: center;
  box-shadow: none;
}
.char-card.empty:hover {
  border-color: rgba(201, 162, 75, 0.4);
  background: rgba(201, 162, 75, 0.01);
  transform: translateY(-2px);
}
.empty-wrap {
  text-align: center;
}
.empty-btn {
  display: inline-block;
  padding: 0.55rem 1.3rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s;
}
.char-card.empty:hover .empty-btn {
  color: var(--gold2);
  border-color: var(--gold);
  background: rgba(201, 162, 75, 0.05);
}

/* Logout Button */
nav .btn-logout {
  color: var(--red);
}
nav .btn-logout:hover {
  color: #ff6b63;
}

/* --- Social Media Links --- */
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
  flex-wrap: wrap;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.social-btn svg {
  transition: transform 0.2s;
}
.social-btn:hover {
  color: var(--ink);
  transform: translateY(-2px);
  text-decoration: none;
}
.social-btn:hover svg {
  transform: scale(1.15);
}

/* Hover colors for each social platform */
.social-btn.facebook:hover {
  border-color: #1877f2;
  box-shadow: 0 0 12px rgba(24, 119, 242, 0.25);
  color: #1877f2;
}
.social-btn.tiktok:hover {
  border-color: #ff0050;
  box-shadow: 0 0 12px rgba(255, 0, 80, 0.25);
  color: #ff0050;
}
.social-btn.whatsapp:hover {
  border-color: #25d366;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.25);
  color: #25d366;
}
.social-btn.discord:hover {
  border-color: #5865f2;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.25);
  color: #5865f2;
}

/* --- Self-Service Bar & Unstuck Controls --- */
.self-service-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(201, 162, 75, 0.12), rgba(30, 34, 43, 0.7));
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.5rem;
}
.self-service-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.self-service-icon {
  font-size: 1.6rem;
  color: var(--gold2);
  line-height: 1;
}
.self-service-info strong {
  display: block;
  font-size: 0.98rem;
  color: var(--gold2);
}
.self-service-info p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.self-service-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-warn-highlight {
  border-color: rgba(229, 83, 75, 0.5) !important;
  color: #f2a29c !important;
  background: rgba(229, 83, 75, 0.12) !important;
}
.badge-dot-warn {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  margin-left: 4px;
}

/* Status Pill */
.char-status-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.char-status-pill.online {
  color: #3fb27f;
  background: rgba(63, 178, 127, 0.15);
  border: 1px solid rgba(63, 178, 127, 0.4);
}
.char-status-pill.offline {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}

/* Unstuck Action in Character Card */
.char-card-actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.btn-unstuck {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  background: rgba(201, 162, 75, 0.08);
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--gold2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-unstuck:hover:not(:disabled) {
  background: rgba(201, 162, 75, 0.2);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(201, 162, 75, 0.25);
}
.btn-unstuck.is-disabled,
.btn-unstuck:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  color: var(--muted);
  transform: none;
}

/* =============================================================================
 * Daily Login Reward Card
 * ========================================================================== */
.daily-reward-card {
  background: linear-gradient(145deg, #161a24 0%, #10131a 100%);
  border: 1px solid rgba(201, 162, 75, 0.45);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 15px rgba(201, 162, 75, 0.08);
  margin-bottom: 2rem;
  overflow: hidden;
}
.daily-reward-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.4rem;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(201, 162, 75, 0.2);
  flex-wrap: wrap;
  gap: 1rem;
}
.daily-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.daily-main-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(201, 162, 75, 0.5));
}
.daily-title-group h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.daily-title-group p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.daily-header-side {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.daily-wallet-pill {
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.daily-wallet-pill strong { color: var(--gold2); font-weight: 700; }
.daily-wallet-pill strong.hero-txt { color: #60a5fa; }
.daily-wallet-pill .sep { color: var(--line); }

.status-pill {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.status-pill.is-ready {
  background: rgba(63, 178, 127, 0.2);
  color: #3fb27f;
  border: 1px solid rgba(63, 178, 127, 0.4);
  box-shadow: 0 0 10px rgba(63, 178, 127, 0.2);
  animation: pulseReady 2s infinite ease-in-out;
}
@keyframes pulseReady {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}
.status-pill.is-claimed {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.daily-reward-body {
  padding: 1.4rem;
}

/* Claimed State Box */
.daily-claimed-box {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.2rem;
}
.claimed-icon-col {
  font-size: 2.4rem;
  line-height: 1;
}
.claimed-text-col h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  color: #3fb27f;
}
.claimed-text-col p {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.daily-countdown {
  display: inline-block;
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--gold2);
  font-size: 0.95rem;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
}
.daily-countdown strong { color: #fff; font-weight: 800; }
.daily-last-meta {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.gold-badge { color: var(--gold2); font-weight: 700; }
.hero-badge { color: #60a5fa; font-weight: 700; }
.time-txt { color: #94a3b8; }

/* Choice Tabs */
.reward-choice-subtitle {
  font-size: 0.85rem;
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.reward-choice-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.choice-pill {
  position: relative;
  display: block;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.2s ease;
}
.choice-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-pill:hover {
  border-color: rgba(201, 162, 75, 0.6);
  background: rgba(201, 162, 75, 0.05);
}
.choice-pill.active {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(201, 162, 75, 0.14) 0%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: 0 0 12px rgba(201, 162, 75, 0.25);
}
.choice-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.choice-icon {
  font-size: 2rem;
  line-height: 1;
}
.choice-info {
  display: flex;
  flex-direction: column;
}
.choice-headline {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold2);
}
.choice-headline.hero-txt {
  color: #60a5fa;
}
.choice-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* Static Box when mode is locked */
.reward-static-box {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.reward-static-box .box-ico { font-size: 2rem; }
.reward-static-box p { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
.reward-static-box.is-both { border-color: rgba(201, 162, 75, 0.5); background: rgba(201, 162, 75, 0.08); }
.reward-static-box.is-hero { border-color: rgba(96, 165, 250, 0.5); background: rgba(96, 165, 250, 0.08); }
.reward-static-box.is-points { border-color: rgba(201, 162, 75, 0.4); background: rgba(201, 162, 75, 0.05); }

/* Hero Character Picker */
.hero-char-picker {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.picker-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #bfdbfe;
  margin-bottom: 0.5rem;
}
.picker-select {
  width: 100%;
  max-width: 480px;
  padding: 0.55rem 0.8rem;
  background: #0e121a;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}
.picker-hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}
.picker-warning {
  color: #f87171;
  font-size: 0.82rem;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
}

/* Action Button */
.daily-claim-action {
  margin-top: 0.5rem;
}
.btn-claim-now {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(201, 162, 75, 0.3);
  transition: all 0.2s ease;
}
.btn-claim-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.45);
}

/* =============================================================================
 * Server Status & Daily Login Showcase Cards (Lagenda Setiawan / Fung Wan)
 * ============================================================================= */
.home-dual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.4rem;
  margin: 2.2rem 0;
}

.sc-card {
  background: #080d16;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  padding: 1.3rem 1.6rem 1.2rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sc-card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 12px rgba(212, 175, 55, 0.12);
}

.sc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.sc-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7b8b9f;
  text-transform: uppercase;
}
.sc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.sc-status.online {
  color: #4ade80;
}
.sc-status.online .sc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 3px #4ade80;
}
.sc-status.offline {
  color: #ef4444;
}
.sc-status.offline .sc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}
.sc-title {
  font-family: inherit;
  font-size: 1.22rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.1rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.sc-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0 0 0.1rem;
}
.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sc-row:last-of-type {
  border-bottom: none;
}
.sc-label {
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 500;
}
.sc-val {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}
.sc-val.gold {
  color: var(--gold2);
}
.sc-val.green {
  color: #4ade80;
}
.sc-footer {
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  color: #64748b;
}

/* Daily Reward Card Specifics */
.daily-card {
  border-color: rgba(56, 189, 248, 0.3);
}
.daily-card:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 14px rgba(56, 189, 248, 0.14);
}
.daily-badge-pill {
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
}
.daily-perks-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.3rem 0.8rem;
  margin: 0.5rem 0;
}
.daily-claimed-indicator {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
}
.boss-alert-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(90deg, rgba(229, 83, 75, 0.15), rgba(201, 162, 75, 0.18), rgba(229, 83, 75, 0.15));
  border: 1px solid rgba(229, 83, 75, 0.4);
  border-radius: 10px;
  padding: 0.75rem 1.2rem;
  margin: 0 auto 1.5rem;
  max-width: 680px;
  color: #fecaca;
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 15px rgba(229, 83, 75, 0.2);
}
.boss-alert-banner a {
  color: #fde047;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 0.35rem;
}
.boss-alert-banner a:hover {
  color: #fff;
}

/* --- Management Team Showcase --- */
.team-banner-wrapper {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-banner-wrapper:hover {
  transform: translateY(-2px);
  border-color: rgba(226, 194, 115, 0.7);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(201, 162, 75, 0.25);
}
.team-banner-wrapper img {
  transition: transform 0.4s ease;
}
.team-banner-wrapper:hover img {
  transform: scale(1.01);
}

/* ===== Hero video background (dua pahlawan berlawan) - ditambah 2026-09-28 ===== */
.hero{position:relative;overflow:hidden;border-radius:14px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.6;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,16,.55) 0%,rgba(4,7,16,.35) 45%,rgba(4,7,16,.78) 100%)}
.hero>*:not(.hero-video){position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
@media (max-width:767px){
  .hero-video{display:none}
  .hero{background:url("assets-wallpaper-duel.jpg") center 30%/cover no-repeat}
}

/* ===== Comic chapter banners (manhua art per page) ===== */
.comic-banner{position:relative;margin:0 0 1.4rem;border-radius:14px;overflow:hidden;min-height:230px;background-size:cover;background-position:center 25%;border:1px solid rgba(212,175,55,.25);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.comic-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,15,.05) 40%,rgba(3,6,15,.6) 100%);pointer-events:none}
@media(max-width:767px){.comic-banner{min-height:150px;margin-bottom:1rem;border-radius:10px}}

/* ===== Ambient page background: dim fixed duel wallpaper ===== */
body{
  background-color:#04060c;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -5%,rgba(212,175,55,.07),transparent 70%),
    linear-gradient(rgba(4,6,12,.9),rgba(4,6,12,.95)),
    url('assets-wallpaper-duel.jpg');
  background-size:auto,auto,cover;
  background-position:center,center,center 15%;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:767px){body{background-attachment:scroll}}

/* ===== Upgraded site nav: sticky glass, active indicator, CTA buttons ===== */
header.site{position:sticky;top:0;z-index:50;background:rgba(4,6,12,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(212,175,55,.18)}
nav{display:flex;align-items:center;flex-wrap:wrap}
nav a.nav-link{position:relative;margin-left:.35rem;padding:.5rem .8rem;border-radius:8px;color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;transition:color .18s,background .18s}
nav a.nav-link:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
nav a.nav-link.active{color:var(--gold2)}
nav a.nav-link.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 0 8px rgba(212,175,55,.7)}
nav a.nav-cta{margin-left:.8rem;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1405;font-weight:800;padding:.55rem 1.1rem;border-radius:999px;box-shadow:0 4px 16px rgba(212,175,55,.35)}
nav a.nav-cta:hover{color:#000;background:linear-gradient(180deg,#f3d27a,var(--gold2));box-shadow:0 4px 22px rgba(212,175,55,.55)}
nav a.nav-cta-outline{margin-left:.5rem;border:1px solid rgba(212,175,55,.5);color:var(--gold2);padding:.5rem 1.05rem;border-radius:999px;font-weight:700}
nav a.nav-cta-outline:hover{background:rgba(212,175,55,.12);color:#ffe9a8}
@media(max-width:767px){nav a.nav-link{margin-left:.15rem;padding:.45rem .55rem;font-size:.85rem}}

/* ===== Shared white-to-gold gradient title text ===== */
.title-gradient{background:linear-gradient(135deg,#ffffff 40%,#ffd700 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ===== Mobile: hamburger nav, status pill, GM widget ===== */
.nav-toggle{display:none;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.55rem .6rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--gold2);margin:4px 0;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.x span:nth-child(2){opacity:0}
.nav-toggle.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:767px){
  .nav-toggle{display:block}
  .brand-logo-img-full{height:56px}
  header.site{flex-wrap:wrap;row-gap:.4rem}
  header.site nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:.15rem;padding:.4rem 0 .6rem;border-top:1px solid rgba(212,175,55,.15);margin-top:.4rem}
  header.site nav.open{display:flex}
  nav a.nav-link{margin:0;padding:.65rem .8rem;font-size:.95rem}
  nav a.nav-link.active::after{left:.8rem;right:auto;width:2.2rem;bottom:.35rem}
  nav a.nav-cta,nav a.nav-cta-outline{margin:.25rem 0 0;text-align:center}
  .status{font-size:.7rem;letter-spacing:.06em;padding:.35rem .6rem;max-width:100%;white-space:nowrap}
  .hero h1{font-size:1.6rem}
  .cta .btn{width:100%;text-align:center}
  #fw-support-launcher{bottom:92px;right:14px;padding:8px 14px;font-size:.8rem}
}

/* ===== Account dropdown (logged-in users) ===== */
.nav-account{position:relative;margin-left:.8rem}
.nav-account-btn{display:flex;align-items:center;gap:.5rem;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.35);border-radius:999px;padding:.35rem .8rem .35rem .4rem;color:var(--ink);font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color .18s,background .18s;font-family:inherit}
.nav-account-btn:hover{border-color:var(--gold2);background:rgba(212,175,55,.14)}
.nav-avatar{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1a1405;font-weight:800;font-size:.85rem;flex:none}
.nav-caret{color:var(--gold2);font-size:.7rem}
.nav-account-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;background:rgba(8,10,18,.97);border:1px solid rgba(212,175,55,.25);border-radius:12px;padding:.4rem;box-shadow:0 12px 32px rgba(0,0,0,.6);display:none;z-index:60}
.nav-account.open .nav-account-menu{display:block}
.nav-account-menu .nav-link{display:block;margin:0;padding:.6rem .8rem;border-radius:8px}
.nav-account-menu .nav-link.active{background:rgba(212,175,55,.14)}
.nav-account-menu .nav-link.active::after{display:none}
.nav-menu-sep{height:1px;background:rgba(212,175,55,.15);margin:.35rem .4rem}
.nav-account-menu .nav-logout{color:#f87171;font-weight:700}
.nav-account-menu .nav-logout:hover{background:rgba(248,113,113,.1);color:#fca5a5}
/* ===== Panduan dropdown (Powers / Skills / Crafting / Peta) ===== */
.nav-guide{margin-left:.35rem}
.nav-guide-btn{background:transparent;border:0;border-radius:8px;padding:.5rem .8rem;font-size:.92rem}
.nav-guide-btn:hover{background:rgba(255,255,255,.06)}
.nav-guide-btn.is-active{color:var(--gold2)}
@media(max-width:767px){
  .nav-account{margin:.35rem 0 0;width:100%}
  .nav-account-btn{width:100%;justify-content:flex-start}
  .nav-account-menu{position:static;display:block;background:transparent;border:none;box-shadow:none;padding:.15rem 0;min-width:0}
  .nav-menu-sep{background:rgba(212,175,55,.12)}
}