:root{
  --card:#10193c;--edge:#ffffff22;--glass:#0c1430cc;--txt:#eaf0ff;
  --parallax-x: 0px;
}
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  background:#0b1330;color:var(--txt);
  font:16px/1.45 system-ui,Segoe UI,Roboto,Arial
}
.stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  margin:68px auto 56px;width:min(95vw,900px);
  border:1px solid #0008;border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  overflow:hidden;background:transparent
 min-height: calc(100vh - 120px); width:100vw; margin:68px 0 56px; border-radius:0; }
.stage::before{
  content:"";position:absolute;inset:0;
  background:url("assets/bg_video.jpg") center center/cover no-repeat;
  filter:brightness(.93);
  transform:translate3d(var(--parallax-x),0,0);
  transition:transform .2s ease-out;
  z-index:0
}
#game{position:relative;display:block;width:100%;height:auto;background:transparent;z-index:1; touch-action:none;}
.hud{position:fixed;top:10px;left:50%;transform:translateX(-50%);
  width:min(95vw,900px);display:flex;justify-content:space-between;align-items:center;z-index:10}
.left{display:flex;gap:8px;flex-wrap:wrap}
.right{display:flex;gap:8px;align-items:center}
.pill{background:var(--card);border:1px solid var(--edge);padding:6px 12px;border-radius:12px;font-weight:700}
.badge{background:#243066;border:1px solid var(--edge);padding:6px 10px;border-radius:999px;font-size:.85rem;color:#d7e1ff}
.hidden{display:none!important}
.btn{background:linear-gradient(180deg,#1a2452,#0e173b);color:#fff;border:1px solid #0005;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.btn.primary{background:linear-gradient(180deg,#ff8a2b,#d86b10);color:#231100;font-weight:800}
.controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(95vw,900px);display:flex;justify-content:center;z-index:10}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,8,20,.6);backdrop-filter:blur(6px);z-index:20}
.modal{width:min(92vw,560px);background:linear-gradient(180deg,#0f1c4d,#0b1433);border:1px solid var(--edge);border-radius:16px;padding:20px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.footer{text-align:center;opacity:.65;margin-bottom:16px}

.pwrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid #4657a6;border-top-color:#ff8a2b;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#preloader.hidden{display:none!important}
@media (max-width:768px){
  .stage{width:100vw;margin:12px 0 56px;border-radius:0;box-shadow:none}
  .hud,.controls{width:100vw}
}

.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}

#recordsBody table{width:100%;border-collapse:collapse;margin-top:8px}
#recordsBody th,#recordsBody td{border-bottom:1px solid #ffffff22;padding:8px;text-align:center}
#recordsBody th{text-transform:uppercase;opacity:.8;font-size:.9em}

#lbBody table{width:100%;border-collapse:collapse;margin-top:8px}
#lbBody th,#lbBody td{border-bottom:1px solid #ffffff22;padding:8px;text-align:center}
#lbBody th{text-transform:uppercase;opacity:.8;font-size:.9em}

/* Ensure readable white text on dark HUD/buttons */
.pill, .btn, .badge, .hud .pill, .hud .badge, .controls .btn, select.pill {
  color: #fff !important;
}
select.pill{
  background: var(--glass,#0c1430cc);
  -webkit-text-fill-color: #fff; /* iOS Safari */
}

.overlay .modal, .overlay .modal * { color: #fff; }


/* Brand badge (top-right) */
.brand-badge{
  position:absolute; top:10px; right:10px;
  background:#1a2a6b; /* deep blue */
  border:1px solid #ffffff22;
  border-radius:12px;
  padding:6px 10px;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px #00000033;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  opacity:.95;
}
.brand-badge img{
  display:block; height:24px; width:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
@media (max-width:480px){
  .brand-badge{ top:8px; right:8px; padding:5px 8px; border-radius:10px; }
  .brand-badge img{ height:20px; }
}



.brand-logo{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  z-index:6; opacity:1;
}
.brand-logo img{
  display:block; height:28px; width:auto;
  filter:none !important; mix-blend-mode:normal !important; opacity:1 !important;
}
@media (max-width:480px){
  .brand-logo img{ height:24px; }
}



/* ===== CLICKABILITY & MODAL LAYER (root deploy) ===== */
#startOverlay{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 99999; pointer-events: auto;
}
#startOverlay .modal, #startOverlay .modal *{ pointer-events: auto; }
.overlay.hidden{ display: none !important; }
.brand-logo, .brand-badge{ pointer-events: none !important; }

/* While modal is open, game layers don't catch input */
body.modal-open body.modal-open #game, body.modal-open .stage { pointer-events: none !important; }