:root{
  --bg:#071533;
  --deep:#050b1d;
  --surface:#153777;
  --surface-2:#1e4b96;
  --surface-3:#2860b7;
  --ink:#020713;
  --line:#07122c;
  --text:#f8fbff;
  --muted:#c2d9ff;
  --blue-a:#b9ecff;
  --blue-b:#63b8ff;
  --blue-c:#2f78ff;
  --blue-d:#174fcb;
  --shadow:#061942;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(180deg,#193e86 0%,#0a1d46 48%,#050b1d 100%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 16px);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"MOG OFF";
  position:fixed;
  right:-1rem;
  top:5rem;
  z-index:-1;
  color:rgba(255,255,255,.055);
  font-size:8rem;
  font-weight:1000;
  letter-spacing:0;
  transform:rotate(-8deg);
  pointer-events:none;
}
button,input,select{font:inherit}
button{
  position:relative;
  isolation:isolate;
  border:3px solid var(--ink);
  border-radius:17px;
  padding:12px 16px;
  background:linear-gradient(180deg,var(--blue-a) 0%,var(--blue-b) 48%,var(--blue-c) 100%);
  color:#041029;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 6px 0 var(--shadow),0 14px 24px rgba(3,10,31,.28);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
button::after{
  content:"";
  position:absolute;
  inset:4px 7px auto;
  height:35%;
  z-index:-1;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
}
button:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--shadow),0 18px 30px rgba(3,10,31,.34);filter:saturate(1.08)}
button:active{transform:translateY(3px);box-shadow:0 3px 0 var(--shadow),0 9px 18px rgba(3,10,31,.28)}
button:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55);transform:none;box-shadow:0 4px 0 var(--shadow)}
button.danger{background:linear-gradient(180deg,#d7f5ff 0%,#79c6ff 45%,#347fff 100%);color:#041029}
input,select{
  width:100%;
  border:3px solid var(--ink);
  border-radius:16px;
  background:#e7f6ff;
  color:#071533;
  padding:11px 12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 4px 0 var(--shadow);
  font-weight:800;
}
input::placeholder{color:#476999}
.app-shell{width:min(1240px,100%);margin:0 auto;padding:20px}
.consent-panel{
  min-height:calc(100vh - 40px);
  display:grid;
  align-content:center;
  gap:22px;
  max-width:760px;
  animation:pop-in .42s ease both;
}
.brand{
  margin:0 0 8px;
  color:var(--blue-a);
  font-size:1.02rem;
  font-weight:1000;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:0 3px 0 #06255e;
}
h1,h2{margin:0;letter-spacing:0;line-height:1.01}
h1{
  max-width:10.5ch;
  font-size:5.2rem;
  font-weight:1000;
  text-shadow:0 5px 0 #061b48,0 12px 24px rgba(0,0,0,.28);
}
h2{font-size:1.35rem}
.lede{max-width:620px;color:var(--muted);font-size:1.08rem;line-height:1.48;font-weight:700}
.consent-list,.consent-actions,.privacy-actions,.moderation{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.consent-list{display:grid;max-width:720px}
.consent-list label{
  display:flex;
  gap:10px;
  align-items:center;
  width:max-content;
  max-width:100%;
  color:var(--text);
  background:rgba(14,43,101,.72);
  border:3px solid var(--ink);
  border-radius:18px;
  padding:10px 12px;
  box-shadow:0 5px 0 var(--shadow);
  font-weight:850;
}
.consent-list input{width:auto;box-shadow:none}
.privacy-note,#consentStatus,#privacyStatus,#moderationStatus{color:var(--muted);font-weight:800}
.battle-app{display:grid;gap:16px;animation:pop-in .32s ease both}
.topbar{display:flex;justify-content:space-between;gap:14px;align-items:end}
.topbar h1{font-size:3.8rem;max-width:none}
.status-stack{display:grid;gap:10px;justify-items:end}
.status,.rating-badge{
  border:3px solid var(--ink);
  background:linear-gradient(180deg,#eaf8ff,#9fdbff);
  color:#071533;
  border-radius:18px;
  padding:11px 14px;
  font-weight:950;
  min-width:190px;
  text-align:center;
  box-shadow:0 6px 0 var(--shadow);
}
.rating-badge{min-width:120px;padding:8px 12px;font-size:.95rem}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.video-panel{
  position:relative;
  min-height:410px;
  background:linear-gradient(180deg,#10295a,#09162f);
  border:4px solid var(--ink);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 0 var(--shadow),0 24px 42px rgba(0,0,0,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
.video-panel:hover{transform:translateY(-2px);box-shadow:0 12px 0 var(--shadow),0 28px 48px rgba(0,0,0,.3)}
video{display:block;width:100%;height:100%;object-fit:cover;background:#071026}
.video-label,.psl,.quality{
  position:absolute;
  left:12px;
  border:3px solid var(--ink);
  border-radius:16px;
  background:linear-gradient(180deg,#f4fbff,#9edcff);
  color:#06112b;
  padding:8px 10px;
  font-weight:950;
  box-shadow:0 4px 0 var(--shadow);
}
.video-label{top:12px}
.psl{right:12px;left:auto;top:12px}
.quality{bottom:12px;color:#12305f;font-size:.9rem;max-width:calc(100% - 24px)}
.controls,.meters,.privacy-panel{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:end;
  border:4px solid var(--ink);
  background:linear-gradient(180deg,rgba(33,83,169,.94),rgba(16,48,111,.94));
  border-radius:22px;
  padding:14px;
  box-shadow:0 8px 0 var(--shadow);
}
.controls label{display:grid;gap:6px;color:#dceeff;font-size:.9rem;font-weight:950}
.meters{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.meter{
  border:3px solid var(--ink);
  border-radius:18px;
  background:linear-gradient(180deg,#dff5ff,#8dccff);
  color:#06112b;
  padding:11px;
  box-shadow:0 5px 0 var(--shadow);
}
.meter span{display:block;color:#234775;font-size:.8rem;font-weight:950}
.meter strong{display:block;margin-top:4px;font-size:1.18rem}
.moderation{
  border:4px solid var(--ink);
  background:linear-gradient(180deg,rgba(20,55,119,.96),rgba(12,35,83,.96));
  border-radius:22px;
  padding:14px;
  box-shadow:0 8px 0 var(--shadow);
}
.moderation select{max-width:190px}
.privacy-panel{grid-template-columns:1.2fr 1.8fr 1fr;align-items:center}
.privacy-panel p{margin:.35rem 0 0;color:var(--muted);font-weight:750}
.result-modal{border:0;background:transparent;padding:0}
.result-modal::backdrop{background:rgba(2,7,19,.76)}
.result-card{
  width:min(92vw,440px);
  border:4px solid var(--ink);
  border-radius:24px;
  background:linear-gradient(180deg,#1f55b3,#102b66);
  padding:20px;
  color:var(--text);
  box-shadow:0 10px 0 var(--shadow),0 28px 48px rgba(0,0,0,.38);
}
.result-card p{color:var(--muted);font-weight:750}
#eloBreakdown{display:grid;gap:7px;margin:0 0 16px;padding-left:20px;font-weight:800}
@keyframes pop-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:900px){
  body::before{font-size:5rem;top:3rem}
  .app-shell{padding:12px}
  .topbar{display:grid;align-items:start}
  .status-stack{justify-items:start}
  .stage,.controls,.meters,.privacy-panel{grid-template-columns:1fr}
  .video-panel{min-height:280px}
  .status{text-align:left}
  .moderation select{max-width:none}
  h1{font-size:3.1rem}
  .topbar h1{font-size:2.8rem}
}
@media (max-width:460px){
  h1{font-size:2.55rem}
  .topbar h1{font-size:2.35rem}
  button{width:100%}
  .consent-list label{width:100%}
}