:root{
  --bg:#050509;
  --panel:#0c0c13;
  --panel2:#12121b;
  --border:#222236;

  --text:#f0f0ff;
  --muted:#a9a9c4;

  /* Royal Union neon */
  --neon:#ff1f3d;
  --neon2:#ff4b6a;
  --hot:#ffcf5a;
  --glow: rgba(255,31,61,0.42);
  --glow2: rgba(255,75,106,0.22);

  --radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,0.72);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body{
  /* Red/black neon theme with subtle scanlines */
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(255,31,61,0.18), transparent 60%),
    radial-gradient(720px 340px at 12% 18%, rgba(255,75,106,0.12), transparent 62%),
    radial-gradient(720px 340px at 88% 35%, rgba(255,31,61,0.10), transparent 62%),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 2px,
      transparent 6px
    ),
    var(--bg);
}

.page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 18px 70px;
}

/* Tabs */
.tabs{
  display:flex;
  justify-content:center;
  margin: 6px 0 18px;
}
.tablist{
  display:flex;
  gap: 10px;
  border: 1px solid rgba(255,31,61,0.22);
  background: rgba(12,12,19,0.72);
  border-radius: 999px;
  padding: 7px;
  box-shadow: 0 0 40px rgba(255,31,61,0.12);
  backdrop-filter: blur(12px);
}
.tab{
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor:pointer;
}
.tab:hover{ color: var(--text); background: rgba(255,255,255,0.05); }
.tab.active{
  color: var(--hot);
  background: rgba(255,31,61,0.10);
  border-color: rgba(255,31,61,0.35);
  box-shadow: 0 0 26px rgba(255,31,61,0.14);
}

.tab-panel{ margin-top: 6px; }

.panel-note{
  margin: 10px 0 0;
  color: var(--muted);
  text-align:center;
}

/* Top HUD */
.hud-top{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding: 14px 18px;
  backdrop-filter: blur(10px);
  background: rgba(7,7,11,0.75);
  border-bottom: 1px solid var(--border);
}

/* Language dropdown */
.lang{ position: relative; }
.lang-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.lang-btn:hover{ border-color: rgba(255,255,255,0.22); }
.lang-flag{
  font-size: 12px;
  font-weight: 900;
  padding: 4px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
}
.lang-caret{ opacity:0.8; }

.lang-menu{
  position:absolute;
  top: 46px;
  left: 0;
  width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,16,22,0.96);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  padding: 8px;
  display:none;
}
.lang-menu.open{ display:block; }
.lang-item{
  width: 100%;
  text-align:left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
}
.lang-item:hover{
  background: rgba(255,255,255,0.06);
}

/* Clickable clock panel */
.clock-panel{
  border: 1px solid rgba(255,31,61,0.30);
  background:
    linear-gradient(135deg, rgba(255,31,61,0.10), rgba(255,255,255,0.02));
  box-shadow: 0 0 55px rgba(255,31,61,0.14);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 240px;
  text-align:center;
  cursor:pointer;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.clock-panel:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,31,61,0.22), transparent);
  transform: translateX(-60%);
  opacity: 0.55;
  pointer-events:none;
}
.clock-panel:hover{ border-color: rgba(255,31,61,0.55); }

.clock-title{ color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.clock-time{
  font-size: 44px;
  font-weight: 950;
  color: var(--neon2);
  text-shadow: 0 0 30px var(--glow);
  line-height: 1.05;
  margin-top: 6px;
}
.clock-tz{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.clock-tip{
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.9;
}

/* Hero */
.hero{
  text-align:center;
  padding: 34px 0 22px;
}
.logo{
  width: 280px;   /* BIGGER */
  height: 280px;  /* BIGGER */
  object-fit: contain;
  filter: drop-shadow(0 0 35px rgba(255,43,43,0.18));
}
.title{
  margin: 16px 0 6px;
  font-size: 44px;
  letter-spacing: 2px;
}
.subtitle{
  margin: 0;
  color: var(--muted);
}

/* Panels */
.panel{
  border: 1px solid rgba(255,31,61,0.26);
  border-radius: var(--radius);
  background:
    radial-gradient(800px 220px at 50% 0%, rgba(255,31,61,0.10), transparent 60%),
    linear-gradient(180deg, rgba(18,18,27,0.92), rgba(12,12,19,0.92));
  box-shadow: var(--shadow);
  padding: 18px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.panel:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, transparent 55%, rgba(255,31,61,0.08) 70%, transparent 85%);
  pointer-events:none;
}

.panel-header{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:center;
  margin-bottom: 10px;
}

.panel-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--neon);
  box-shadow: 0 0 18px var(--glow);
}

.panel-title{ margin:0; font-size: 16px; color: var(--neon2); letter-spacing: 1px; }

/* Next Event */
.next-event{
  border: 1px solid rgba(255,31,61,0.30);
  border-radius: 16px;
  padding: 16px;
  text-align:center;
  background: rgba(5,5,9,0.42);
  box-shadow: 0 0 70px rgba(255,31,61,0.10);
  position: relative;
}
.next-event:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,31,61,0.0), rgba(255,31,61,0.22), rgba(255,31,61,0.0));
  opacity: 0.35;
  pointer-events:none;
}

.event-name{
  font-weight: 950;
  letter-spacing: 2.5px;
  color: var(--neon2);
  text-shadow: 0 0 22px var(--glow);
}

.event-timer{
  font-size: 44px;
  font-weight: 950;
  margin-top: 6px;
  color: var(--hot);
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(255,207,90,0.18);
}

.event-meta{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.btn{
  display:block;
  margin: 14px auto 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
}
.btn:hover{ border-color: rgba(255,255,255,0.25); }

/* Section title */
.section-title{
  text-align:center;
  margin-top: 26px;
}
.section-title h2{
  margin: 0;
  font-size: 28px;
  color: var(--hot);
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(255,31,61,0.10);
}

/* Grid cards */
.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Center the single World Boss card */
.grid.center-grid{
  display:flex;
  justify-content:center;
}
.grid.center-grid .boss-card{
  width: min(700px, 100%);
}

/* Boss cards (schedule style like screenshot) */
.boss-card{
  border-radius: var(--radius);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(255,31,61,0.10), transparent 60%),
    linear-gradient(180deg, rgba(18,18,27,0.90), rgba(12,12,19,0.90));
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.boss-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, transparent 55%, rgba(255,31,61,0.10) 70%, transparent 85%);
  pointer-events:none;
}
.boss-card:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background:
    conic-gradient(from 180deg, rgba(255,31,61,0.0), rgba(255,31,61,0.22), rgba(255,31,61,0.0));
  opacity: 0.18;
  pointer-events:none;
}

/* Keep class names but make everything match the red/black neon theme */
.theme-teal{
  border: 1px solid rgba(255, 31, 61, 0.26);
  box-shadow: 0 0 60px rgba(255, 31, 61, 0.10), var(--shadow);
}
.theme-red{
  border: 1px solid rgba(255, 75, 106, 0.26);
  box-shadow: 0 0 60px rgba(255, 75, 106, 0.10), var(--shadow);
}

.boss-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.boss-name{
  font-weight: 950;
  letter-spacing: 1px;
  color: var(--hot);
}
.boss-badge{
  border: 1px solid rgba(255,31,61,0.35);
  color: var(--neon2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.boss-sub{
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.boss-two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.boss-label{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.boss-list{
  list-style:none;
  padding: 0;
  margin: 0;
}
.boss-list li{
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  color: var(--muted);
}
.boss-list li:last-child{ border-bottom: 0; }

.boss-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.boss-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  padding: 4px 0;
}
.boss-row-label{
  color: var(--muted);
  font-size: 12px;
}
.boss-row-value{
  font-weight: 950;
  letter-spacing: 0.5px;
  color: var(--neon2);
  text-shadow: 0 0 16px rgba(255,31,61,0.12);
}
.theme-red .boss-row-value{ color: var(--hot); }
.boss-remaining{
  font-size: 18px;
  color: var(--hot);
  text-shadow: 0 0 20px rgba(255,207,90,0.12);
}


.badge{
  border: 1px solid rgba(255,31,61,0.35);
  color: var(--neon2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.card-sub{
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 13px;
}

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.label{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.list{
  list-style:none;
  padding:0;
  margin:0;
  color: var(--text);
}
.list li{
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  color: var(--muted);
}
.list li:last-child{ border-bottom: 0; }

/* Responsive */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .clock-panel{ min-width: 210px; }
  .clock-time{ font-size: 38px; }
  .title{ font-size: 36px; }
  .logo{ width: 210px; height: 210px; }
  .boss-two-col{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .tab{ padding: 9px 12px; }
  .tablist{ gap: 6px; }
}
/* ===== Ranking Table ===== */
.ranking-wrap{
  margin-top: 8px;
}

.ranking-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ranking-left{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.ranking-status{
  color: var(--muted);
  font-size: 12px;
}

.ranking-filters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ranking-label{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .5px;
}

.ranking-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,31,61,0.25);
  background: rgba(5,5,9,0.35);
  color: var(--text);
  outline: none;
}

.ranking-select:focus{
  border-color: rgba(255,31,61,0.55);
}

.ranking-refresh{
  margin: 0;
}

.ranking-table-wrap{
  border: 1px solid rgba(255,31,61,0.24);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(5,5,9,0.35);
}

.ranking-table{
  width: 100%;
  border-collapse: collapse;
}

.ranking-table thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 12px;
  background: rgba(255,31,61,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ranking-table tbody td{
  padding: 12px 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  color: var(--text);
  font-weight: 650;
}

.ranking-table tbody tr:hover{
  background: rgba(255,255,255,0.04);
}

.col-rank{
  width: 90px;
  white-space: nowrap;
}

.col-power{
  width: 160px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,31,61,0.35);
  background: rgba(255,31,61,0.10);
  color: var(--hot);
  font-weight: 900;
  margin-right: 8px;
}

.rank-trophy{
  font-size: 16px;
  filter: drop-shadow(0 0 10px rgba(255,207,90,0.22));
}

.ranking-table tbody tr.top3 td{
  color: var(--hot);
}

/* ===== Announcement (layout + modal) ===== */
.announce-list{ display:flex; flex-direction:column; gap: 12px; }
.announce-empty{ color: var(--muted); text-align:center; padding: 14px 0; }

.announce-card{
  border: 1px solid rgba(255,31,61,0.22);
  border-radius: 16px;
  background: rgba(5,5,9,0.35);
  padding: 12px;
}

.announce-card-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.announce-card-title{ font-weight: 950; color: var(--neon2); letter-spacing: 0.6px; }
.announce-card-date{ color: var(--muted); font-size: 12px; }
.announce-card-body{ color: var(--text); white-space: pre-wrap; line-height: 1.35; }

.announce-admin{
  border: 1px solid rgba(255,31,61,0.22);
  border-radius: 14px;
  padding: 12px;
  background: rgba(5,5,9,0.25);
  margin-top: 12px;
}
.announce-admin-title{ font-weight: 950; color: var(--hot); margin-bottom: 8px; text-align:center; }
.announce-small{ color: var(--muted); font-size: 11px; text-align:center; }

.announce-form{ display:flex; flex-direction:column; gap: 10px; }
.announce-form-row{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:center; }

.announce-label{
  display:flex;
  flex-direction:column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .5px;
}

.announce-input,
.announce-textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,31,61,0.25);
  background: rgba(5,5,9,0.35);
  color: var(--text);
  outline: none;
}
.announce-input:focus,
.announce-textarea:focus{ border-color: rgba(255,31,61,0.55); }

.announce-textarea{ resize: vertical; min-height: 110px; }
.announce-error{ color: var(--neon2); font-size: 12px; margin-top: 6px; text-align:center; }

.announce-actions{
  display:flex;
  justify-content:center;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(255,31,61,0.18);
}

/* Modal */
.modal{ position: fixed; inset: 0; z-index: 1000; display:flex; align-items:center; justify-content:center; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.modal-dialog{
  position:relative;
  width: min(520px, calc(100% - 24px));
  border-radius: 18px;
  border: 1px solid rgba(255,31,61,0.28);
  background: rgba(12,12,19,0.96);
  box-shadow: 0 30px 90px rgba(0,0,0,0.72);
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-title{ font-weight: 950; letter-spacing: 0.6px; color: var(--hot); }
.modal-close{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.modal-close:hover{ border-color: rgba(255,31,61,0.45); }
.modal-body{ padding: 14px; }

.btn-danger{ border-color: rgba(255,75,106,0.35); }
.btn-danger:hover{ border-color: rgba(255,75,106,0.7); }