/* MW4 front end: night-ops menu over the live estate. Hi-vis yellow, stamp red, paperwork in the details. Overrides style.css. */
:root{
  --night:#0b0f0d; --panel-1:rgba(14,19,16,.86); --panel-2:rgba(24,31,27,.92); --line:rgba(242,245,239,.14); --line-2:rgba(242,245,239,.28);
  --text:#eef2ea; --text-dim:#9aa79f; --vis:#ffd23f; --vis-ink:#141006; --red:#e03a2f; --green:#5fe08a;
  --ui:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;
}
.overlay{
  background:
    linear-gradient(90deg,rgba(8,11,9,.94) 0%,rgba(8,11,9,.82) 46%,rgba(8,11,9,.35) 78%,rgba(8,11,9,.15) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  justify-content:flex-start;padding-inline:clamp(16px,5vw,72px)
}
.form{background:transparent;color:var(--text);max-width:720px;box-shadow:none;border-top:0;padding:8px 0 70px}
#waiting .form,#pause .form,#ended .form{background:var(--panel-1);border:1px solid var(--line);padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#waiting .form::before,#pause .form::before,#ended .form::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:6px;background:repeating-linear-gradient(-45deg,var(--vis) 0 14px,var(--vis-ink) 14px 28px)}
.dept{font:600 13px/1.3 var(--ui);letter-spacing:.22em;color:var(--text-dim);align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dept span:first-child{display:flex;align-items:center;gap:10px}
.dept span:first-child::before{content:"";width:12px;height:12px;background:var(--vis);clip-path:polygon(50% 0,100% 100%,0 100%)}
#online{color:var(--green);display:flex;align-items:center;gap:8px}
#online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(95,224,138,.6);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,224,138,.6)}80%,100%{box-shadow:0 0 0 10px rgba(95,224,138,0)}}
h1{color:var(--text);text-transform:uppercase;font-size:clamp(48px,10.5vw,104px);line-height:.84;margin:26px 0 14px;letter-spacing:.01em;text-shadow:0 4px 0 rgba(0,0,0,.45);position:relative;animation:titleIn .7s cubic-bezier(.2,.9,.3,1) both}
h1 em{display:inline-block;color:var(--red);border:6px solid var(--red);padding:0 .12em;line-height:.9;transform:rotate(-8deg) translateY(-.04em);margin-left:.1em;text-shadow:none;box-shadow:inset 0 0 0 2px rgba(224,58,47,.35);animation:stampIn .5s .55s cubic-bezier(.2,1.5,.5,1) both}
h1::after{content:"Claimant Edition · Season 1";display:block;width:max-content;max-width:100%;margin-top:14px;font:700 15px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--vis-ink);background:var(--vis);padding:7px 12px 6px;text-shadow:none}
@keyframes titleIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes stampIn{from{opacity:0;transform:rotate(-8deg) scale(2.6)}to{opacity:1;transform:rotate(-8deg) translateY(-.04em) scale(1)}}
.lede{color:var(--text-dim);font:15px/1.55 var(--mono);max-width:56ch}
.form h2.big{color:var(--text);text-transform:uppercase;font-size:clamp(32px,6.5vw,56px)}
.part{border:0;margin-top:26px;background:var(--panel-1);border-left:3px solid var(--line-2);backdrop-filter:blur(2px)}
.part h2{background:transparent;color:var(--text);font:700 15px/1 var(--ui);letter-spacing:.2em;padding:14px 16px 4px;align-items:baseline}
.part h2 span{color:var(--vis);opacity:1;font:600 12px var(--ui);letter-spacing:.18em}
.part:focus-within{border-left-color:var(--vis)}
.pbody{padding:12px 16px 16px}
.field label{color:var(--text-dim);font:600 12px var(--ui);letter-spacing:.2em}
.field input:not([type=range]){background:rgba(0,0,0,.35);color:var(--vis);border:1px solid var(--line-2);font:700 20px var(--mono);letter-spacing:.06em;padding:10px 12px}
.field input:not([type=range])::placeholder{color:rgba(255,210,63,.35)}
.field input:focus-visible{outline:2px solid var(--vis);outline-offset:0}
input[type=range]{accent-color:var(--vis)}
.ben{background:var(--panel-2);border:1px solid var(--line);padding:14px 14px 14px 46px;transition:border-color .15s,background .15s,transform .15s}
.ben:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ben .tick{border:1.5px solid var(--line-2);background:transparent;border-radius:50%;width:18px;height:18px;top:16px;left:15px}
.ben:has(input:checked){background:linear-gradient(180deg,rgba(255,210,63,.13),rgba(255,210,63,.04));border-color:var(--vis);box-shadow:inset 0 0 0 1px var(--vis),0 10px 30px rgba(0,0,0,.35)}
.ben:has(input:checked) .tick{border-color:var(--vis)}
.ben:has(input:checked) .tick::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--vis)}
.ben:has(input:focus-visible){outline:2px solid var(--vis)}
.bname{color:var(--vis);font:700 12px var(--ui);letter-spacing:.18em}
.ben .w{color:var(--text);text-transform:uppercase;font-size:24px;letter-spacing:.02em}
.cond{color:var(--text-dim);font-size:13px}
.guns{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.gun{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:10px 11px 9px;transition:border-color .12s,background .12s}
.gun:hover{border-color:var(--line-2)}
.gun .c{color:var(--text-dim);font:700 11px var(--ui);letter-spacing:.16em;opacity:1}
.gun .n{font-size:17px;text-transform:uppercase}
.gun .s{color:var(--text-dim);opacity:1}
.gun:has(input:checked){background:var(--vis);color:var(--vis-ink);border-color:var(--vis)}
.gun:has(input:checked) .c,.gun:has(input:checked) .s{color:rgba(20,16,6,.75)}
.gun:has(input:focus-visible){outline:2px solid var(--text)}
.small{color:var(--text-dim)}
.decl{color:var(--text);font-size:14.5px}
.decl input{accent-color:var(--vis)}
.keys{color:var(--text-dim);font:600 14px var(--ui);letter-spacing:.04em}
kbd{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--text);border-bottom-width:3px;border-radius:3px;font:700 12px var(--mono)}
.submitrow{margin-top:26px}
.btn{position:relative;background:var(--vis);color:var(--vis-ink);font:400 26px var(--display);text-transform:uppercase;letter-spacing:.06em;padding:16px 34px 14px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));transition:transform .12s,filter .12s}
.btn:hover{background:var(--vis);filter:brightness(1.08);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(-45deg,var(--vis-ink) 0 8px,transparent 8px 16px);opacity:.55}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--line-2);clip-path:none;font-size:20px}
.btn.ghost::after{display:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--text)}
.stamp{color:var(--red);border-color:var(--red);background:rgba(11,15,13,.55);backdrop-filter:blur(2px)}
.stamp.ok{color:var(--green);border-color:var(--green)}
#formStamp{left:300px;top:0}
.foot{border-top:1px dashed var(--line-2);color:var(--text-dim)}
.meter{height:10px;border:0;background:rgba(255,255,255,.08)}
.meter i{background:repeating-linear-gradient(-45deg,var(--vis) 0 10px,#e3b52a 10px 20px);background-size:28px 28px;animation:march 1s linear infinite}
@keyframes march{to{background-position:28px 0}}
.facts{color:var(--text-dim)}
.seats li{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)}
.seats li::before{color:var(--vis);opacity:1}
.seats li.empty{border-style:dashed;color:var(--text-dim)}
.seats li.me{background:var(--vis);color:var(--vis-ink);border-color:var(--vis)}
.seats li.me::before{color:var(--vis-ink)}
#waitTitle{font-variant-numeric:tabular-nums}
.ret{color:var(--text)}
.ret th{color:var(--vis);font:700 12px var(--ui);letter-spacing:.16em}
.ret td{border-bottom:1px solid var(--line)}
.ret tr.sum td{border-top:2px solid var(--vis)}
.ret tr.me td{background:rgba(255,210,63,.12)}
.ret .neg{color:#ff7a6b}
.boardInner{background:var(--panel-1);color:var(--text);border-top:0;border:1px solid var(--line);position:relative}
.boardInner::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:5px;background:repeating-linear-gradient(-45deg,var(--vis) 0 12px,var(--vis-ink) 12px 24px)}
.boardHead{color:var(--vis);font:700 14px var(--ui);letter-spacing:.18em;padding-top:4px}
#ticker{position:fixed;left:0;right:0;bottom:0;z-index:21;display:flex;align-items:stretch;height:calc(34px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#0a0d0b;border-top:2px solid var(--vis);overflow:hidden;font:600 15px/34px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
#menu[hidden] + #ticker{display:none}
#ticker b{flex:none;background:var(--red);color:#fff;padding:0 14px;letter-spacing:.2em;font-weight:800;position:relative;z-index:1}
#ticker .tk{display:flex;width:max-content;animation:tick 70s linear infinite;white-space:nowrap}
#ticker .tk span{padding-right:48px}
#ticker .tk i{font-style:normal;color:var(--vis);padding:0 14px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:720px){
  .overlay{background:linear-gradient(180deg,rgba(8,11,9,.86),rgba(8,11,9,.94));padding-inline:16px}
  #formStamp{left:auto;right:4px;top:-40px}
  h1::after{letter-spacing:.2em;font-size:13px}
  .btn{font-size:22px;padding:14px 26px 12px}
}
@media (prefers-reduced-motion:reduce){
  h1,h1 em,#online::before,.meter i,#ticker .tk{animation:none}
}
#waiting,#pause,#ended{justify-content:center;background:rgba(8,11,9,.78)}
