/* XO Radar entry screen - combat HUD skin.  Only affects the room/password entry overlay. */
:root{
  --xo-combat-cyan:#25e7ff;
  --xo-combat-cyan-soft:rgba(37,231,255,.42);
  --xo-combat-red:#ff3d3d;
  --xo-combat-orange:#ffb000;
  --xo-combat-green:#2bff9a;
  --xo-combat-panel:#071019;
  --xo-combat-panel-2:#0d1422;
}

.pwd{
  isolation:isolate;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 42%, rgba(36,232,255,.14) 0, rgba(36,232,255,.035) 24%, transparent 50%),
    radial-gradient(circle at 18% 16%, rgba(255,61,61,.17) 0, transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(255,176,0,.14) 0, transparent 30%),
    linear-gradient(135deg,#020405 0%,#061019 46%,#020305 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.pwd::before{
  content:"";
  position:absolute;
  inset:-22%;
  z-index:-2;
  opacity:.5;
  background-image:
    linear-gradient(rgba(37,231,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,231,255,.08) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(255,176,0,.1) 48% 49%, transparent 50% 100%);
  background-size:58px 58px,58px 58px,260px 260px;
  transform:perspective(900px) rotateX(58deg) translateY(90px) scale(1.24);
  transform-origin:center;
  animation:xoCombatGrid 13s linear infinite;
}

.pwd::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(transparent 50%, rgba(255,255,255,.027) 51%, transparent 52%),
    radial-gradient(circle at center, transparent 0 42%, rgba(0,0,0,.72) 100%);
  background-size:100% 4px,100% 100%;
  mix-blend-mode:screen;
  opacity:.78;
}

.pwd-container{
  position:relative;
  width:min(460px, calc(100vw - 42px));
  min-height:430px;
  padding:34px 38px 38px!important;
  overflow:hidden;
  border:1px solid rgba(37,231,255,.42)!important;
  border-radius:0!important;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  background:
    linear-gradient(180deg, rgba(13,23,36,.92), rgba(4,8,13,.94))!important;
  box-shadow:
    0 0 0 1px rgba(255,176,0,.1) inset,
    0 0 42px rgba(37,231,255,.16),
    0 26px 80px rgba(0,0,0,.86)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  animation:xoCombatPanelIn .55s cubic-bezier(.2,.9,.2,1) both;
}

.pwd-container::before{
  content:"MISSION ACCESS";
  position:absolute;
  left:18px;
  right:18px;
  top:12px;
  height:32px;
  border-top:1px solid rgba(37,231,255,.55);
  color:rgba(37,231,255,.76);
  font:800 10px/30px "JetBrains Mono","Fira Code",Consolas,monospace;
  letter-spacing:3.4px;
  text-align:center;
  text-shadow:0 0 14px rgba(37,231,255,.72);
  pointer-events:none;
}

.pwd-container::after{
  content:"";
  position:absolute;
  inset:11px;
  pointer-events:none;
  background:
    linear-gradient(var(--xo-combat-cyan),var(--xo-combat-cyan)) left top/42px 2px no-repeat,
    linear-gradient(var(--xo-combat-cyan),var(--xo-combat-cyan)) left top/2px 42px no-repeat,
    linear-gradient(var(--xo-combat-red),var(--xo-combat-red)) right top/42px 2px no-repeat,
    linear-gradient(var(--xo-combat-red),var(--xo-combat-red)) right top/2px 42px no-repeat,
    linear-gradient(var(--xo-combat-orange),var(--xo-combat-orange)) left bottom/42px 2px no-repeat,
    linear-gradient(var(--xo-combat-orange),var(--xo-combat-orange)) left bottom/2px 42px no-repeat,
    linear-gradient(var(--xo-combat-cyan),var(--xo-combat-cyan)) right bottom/42px 2px no-repeat,
    linear-gradient(var(--xo-combat-cyan),var(--xo-combat-cyan)) right bottom/2px 42px no-repeat;
  opacity:.82;
  filter:drop-shadow(0 0 9px rgba(37,231,255,.45));
}

.pwd-container>*{
  position:relative;
  z-index:1;
}

.pwd-header{
  margin-bottom:28px!important;
  padding-top:22px;
}

.pwd-h1{
  height:auto!important;
  margin-bottom:18px!important;
}

.pwd-h1::before,.pwd-h1::after{
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin:0 14px;
  background:linear-gradient(90deg,transparent,var(--xo-combat-cyan),transparent);
  box-shadow:0 0 12px var(--xo-combat-cyan-soft);
}

.pwd-icon{
  box-sizing:border-box;
  width:72px!important;
  height:72px!important;
  padding:14px;
  color:#02070b!important;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 17%, var(--xo-combat-cyan) 18% 47%, rgba(37,231,255,.1) 48% 100%);
  border:1px solid rgba(37,231,255,.85);
  border-radius:50%;
  box-shadow:
    0 0 0 6px rgba(37,231,255,.08),
    0 0 26px rgba(37,231,255,.56),
    inset 0 0 20px rgba(255,255,255,.42);
  filter:drop-shadow(0 0 10px rgba(37,231,255,.55));
}

.pwd-title{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  gap:5px;
  margin-bottom:8px!important;
  color:#f9fdff!important;
  font-size:27px!important;
  font-weight:900!important;
  line-height:1.1;
  letter-spacing:2px;
  text-shadow:0 0 14px rgba(37,231,255,.55),0 2px 0 rgba(0,0,0,.8);
}

.pwd-title::before{
  content:"XO RADAR · COMBAT LINK";
  color:var(--xo-combat-orange);
  font:800 10px/1 "JetBrains Mono","Fira Code",Consolas,monospace;
  letter-spacing:2.5px;
  text-shadow:0 0 12px rgba(255,176,0,.58);
}

.pwd-title::after{
  content:"";
  width:126px;
  height:2px;
  margin-top:6px;
  background:linear-gradient(90deg,transparent,var(--xo-combat-red),var(--xo-combat-orange),var(--xo-combat-cyan),transparent);
  box-shadow:0 0 16px rgba(255,176,0,.45);
}

.pwd-subtitle{
  color:rgba(213,243,255,.74)!important;
  font-size:13px!important;
  font-weight:700;
  letter-spacing:.6px;
  text-shadow:0 0 9px rgba(0,0,0,.88);
}

.pwd-status{
  margin-top:16px!important;
  border:1px solid rgba(255,61,61,.38);
  background:linear-gradient(90deg,rgba(255,61,61,.14),rgba(255,176,0,.08))!important;
  color:#ffd8d8!important;
  font-weight:800;
  letter-spacing:.4px;
  box-shadow:0 0 18px rgba(255,61,61,.14) inset;
}

.pwd-input-group{
  justify-content:center;
  gap:14px!important;
  margin-bottom:30px!important;
}

.pwd-input-box{
  width:58px!important;
  height:62px!important;
  border-radius:0!important;
  border:1px solid rgba(37,231,255,.42)!important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  background:
    linear-gradient(180deg,rgba(15,28,43,.93),rgba(5,9,14,.96))!important;
  color:#f7fbff!important;
  caret-color:var(--xo-combat-orange);
  font-family:"JetBrains Mono","Fira Code",Consolas,monospace!important;
  font-size:28px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  text-shadow:0 0 13px rgba(37,231,255,.48);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -12px 22px rgba(37,231,255,.055),
    0 0 0 rgba(37,231,255,0)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

.pwd-input-box:hover{
  border-color:rgba(255,176,0,.62)!important;
  box-shadow:0 0 18px rgba(255,176,0,.16)!important;
}

.pwd-input-box:focus{
  transform:translateY(-4px) scale(1.04);
  border-color:var(--xo-combat-orange)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,176,0,.16),transparent 58%),
    linear-gradient(180deg,rgba(20,35,49,.98),rgba(7,10,16,.98))!important;
  box-shadow:
    0 0 0 1px rgba(255,176,0,.5),
    0 0 24px rgba(255,176,0,.34),
    0 0 38px rgba(37,231,255,.16)!important;
}

.pwd-input-box.invalid{
  border-color:var(--xo-combat-red)!important;
  color:#ff9f9f!important;
  box-shadow:0 0 28px rgba(255,61,61,.34)!important;
}

.pwd-confirm-btn{
  position:relative;
  min-height:52px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:0!important;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:linear-gradient(90deg,rgba(82,92,104,.55),rgba(31,39,48,.85))!important;
  color:rgba(255,255,255,.58)!important;
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:1.8px;
  text-shadow:0 1px 0 rgba(0,0,0,.75);
  box-shadow:inset 0 0 18px rgba(255,255,255,.04)!important;
}

.pwd-confirm-btn.active{
  background:
    linear-gradient(90deg,#ffcf38 0%,#ff8a00 42%,#ff3d3d 100%)!important;
  color:#05080b!important;
  text-shadow:0 1px 0 rgba(255,255,255,.4),0 0 10px rgba(255,255,255,.18)!important;
  opacity:1!important;
  box-shadow:
    0 0 26px rgba(255,96,0,.34),
    0 0 44px rgba(255,61,61,.18),
    inset 0 0 0 1px rgba(255,255,255,.35)!important;
}

.pwd-confirm-btn.active::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -42%;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-18deg);
  animation:xoCombatSweep 2.4s linear infinite;
}

.pwd-confirm-btn.active:hover{
  background:
    linear-gradient(90deg,#ffeb73 0%,#ff9d16 38%,#ff4a4a 100%)!important;
  transform:translateY(-4px) scale(1.018)!important;
  box-shadow:
    0 0 34px rgba(255,176,0,.45),
    0 0 56px rgba(255,61,61,.24)!important;
}

.pwd-confirm-btn.active:active{
  transform:translateY(0) scale(.985)!important;
}

.pwd-received-data{
  background:#061018!important;
  border-color:rgba(37,231,255,.28)!important;
  color:#bdf8ff!important;
}

body.xo-entry-active #xoUnifiedToolbar,
body.xo-entry-active #xo3dLootOverlay,
body.xo-entry-active #xo3dFrame{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
@keyframes xoCombatGrid{
  0%{background-position:0 0,0 0,0 0}
  100%{background-position:0 58px,58px 0,260px 260px}
}

@keyframes xoCombatPanelIn{
  from{opacity:0;transform:translateY(22px) scale(.96);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes xoCombatSweep{
  0%{left:-46%}
  46%,100%{left:126%}
}

@media screen and (max-width:768px){
  .pwd-container{min-height:390px;padding:30px 24px 30px!important;width:min(420px,calc(100vw - 24px))}
  .pwd-title{font-size:23px!important}
  .pwd-input-group{gap:10px!important}
  .pwd-input-box{width:49px!important;height:54px!important;font-size:24px!important}
  .pwd-confirm-btn{min-height:48px}
}