/* ===== MAIN MENU ROOT ===== */

#mainMenu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:8000;
}

/* ===== WINDOW BASE ===== */

.win{
  position:absolute;
  border:2px solid #ffb000;
  background:#0c0602;
  box-shadow:
    0 0 18px rgba(255,176,0,.6),
    inset 0 0 30px rgba(0,0,0,.8);
  font-family:ui-monospace,monospace;
  animation-timing-function:steps(1,end);
}

/* ===== WINDOW HEADER ===== */

.win-head{
  padding:5px 8px;
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  background:#ffb000;
  color:#2a1600;
  border-bottom:1px solid #ffb000;
  text-shadow:none;
}

/* ===== WINDOW BODY ===== */

.win-body{
  padding:10px;
  font-size:12px;
  line-height:1.4;
  white-space:pre;
  overflow:hidden;
}

/* hide scrollbars */
.win-log .win-body{
  height:calc(100% - 28px);
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.win-log .win-body::-webkit-scrollbar{ display:none; }

/* ===== WINDOW POSITIONS ===== */

.win-proc{
  top:6%;
  left:6%;
  width:280px;
  transform:translate(-8px,6px);
}

.win-festive{
  top:10%;
  right:7%;
  width:340px;
  transform:translate(10px,-4px) rotate(.3deg);
}

.win-log{
  left:5%;
  bottom:10%;
  width:440px;
  height:200px;
  transform:translate(-6px,12px);
}

.win-audio{
  right:6%;
  bottom:10%;
  width:260px;
  transform:translate(8px,10px);
}

.win-main{
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  width:min(920px,86vw);
  height:min(500px,70vh);
  z-index:5;
  animation:mainGlow 12s ease-in-out infinite;
}

/* dim background windows */
.win:not(.win-main){
  filter:brightness(.85);
}

/* ===== MAIN WINDOW CONTENT ===== */

.main-body{
  position:relative;
  text-align:center;
  padding:24px 20px 32px;
}

.title{
  font-weight:900;
  font-size:40px;
  letter-spacing:.32em;
  line-height:1;
  text-transform:uppercase;
  -webkit-font-smoothing:none;
  text-shadow:
    1px 0 0 #ffb000,
    -1px 0 0 #ffb000,
    0 1px 0 #ffb000,
    0 -1px 0 #ffb000,
    2px 0 0 rgba(255,176,0,.6),
    -2px 0 0 rgba(255,176,0,.6);
}

.subtitle{
  margin-top:13%;
  font-size:12px;
  letter-spacing:.35em;
  color:rgba(255,176,0,.65);
}

.prompt{
  margin-top:26px;
  font-size:14px;
  letter-spacing:.3em;
  animation:blink 1.1s steps(1,end) infinite;
}

.snow-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:4;
}


.snow-pixel{
  position:absolute;
  width:4px;
  height:4px;
  background:#ffb000;
  opacity:.6;
  animation:pixelFall linear forwards;
}

@keyframes pixelFall{
  from{ transform:translate(0,-20px); }
  to{ transform:translate(var(--dx,100px),var(--dy,700px)); }
}

/* ===== AUDIO ===== */

.audio-body{
  font-size:16px;
  line-height:1;
}

.vu{
  display:flex;
  gap:3px;
  margin:4px 0 6px;
}

.vu span{
  width:16px;
  height:35px;
  background:rgba(255,176,0,.25);
}

/* ===== ANIMATIONS ===== */

@keyframes blink{ 50%{opacity:.3} }

@keyframes mainGlow{
  0%,100%{ box-shadow:0 0 22px rgba(255,176,0,.35); }
  50%{ box-shadow:0 0 36px rgba(255,176,0,.55); }
}

@keyframes microJitter{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(0,1px); }
}

.jitter{
  animation:microJitter .15s steps(1,end) 6;
}

#mainMenu::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#ffb000 1px, transparent 1px),
    linear-gradient(90deg, #ffb000 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.25;
  pointer-events:none;
  animation:gridNorth 30s linear infinite;
  z-index:0;
}

#mainMenu.protocol-active::before{
  display:none;
}




@keyframes gridNorth{
  from{ background-position:0 0; }
  to{ background-position:0 -600px; }
}

.win{ z-index:1; }
.win-main{ z-index:5; }

/* ===== DANCING SANTA SCREEN ===== */

#santaScreen{
  position:fixed;
  inset:0;
  z-index:9000;
  background:transparent;
  
}

#santaScreen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#ffb000 1px, transparent 1px),
    linear-gradient(90deg, #ffb000 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.25;
  z-index:0;
  pointer-events:none;
  animation:gridNorth 30s linear infinite;
}


#santaScreen .win{ z-index:1; }
#santaScreen .win-main{ z-index:5; }

#santaScreen{
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

#santaScreen .win-main{
  width:min(720px,90vw);
  height:min(420px,70vh);
  left: 30%;
  top: 25%;
}

.santa-body{
  padding:14px;
  font-size:13px;
  line-height:1.4;
  overflow:hidden;
}

@keyframes santaFlicker{
  0%,100%{opacity:1}
  50%{opacity:.85}
}

#santaTerm{
  animation:santaFlicker 1.6s steps(1,end) infinite;
  white-space:pre;
}

@keyframes santaShake{
  0%{transform:translate(0,0)}
  25%{transform:translate(1px,0)}
  50%{transform:translate(-1px,1px)}
  75%{transform:translate(0,-1px)}
}

#santaScreen .win-main{
  animation:
    santaShake .95s steps(1,end) infinite,
    mainGlow 10s ease-in-out infinite;
}

#santaScreen .santa-body{
  align-items:center;
  justify-content:center;
  display: inline-block;
  width:min(720px,90vw);
  height:max(420px,70vh);

}

#santaTerm{
  text-align:left;
  margin:0 auto;
  top:10%;
  position:absolute;
}

#santaSprite{
  width:160px;
  height:100px;
  margin:0 auto 16px;
  background:url("../assets/santa.gif") center/contain no-repeat;
  image-rendering:pixelated;
  filter:
    sepia(1)
    saturate(4)
    hue-rotate(-20deg)
    brightness(1.1);
  animation:santaDance .6s steps(2,end) infinite;
}

@keyframes santaDance{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

.santa-exit{
  margin-top:14px;
  text-align:center;
  font-size:12px;
  letter-spacing:.3em;
  color:rgba(255,176,0,.7);
  animation:blink 1.1s steps(1,end) infinite;
}

#menuShell{
  margin-left: 10px;
}

:root{
  --cursor-amber:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>\
<rect x='6' y='2' width='4' height='12' fill='%23ffb000'/>\
<rect x='2' y='6' width='12' height='4' fill='%23ffb000'/>\
</svg>");
}


#mainMenu{
  cursor:var(--cursor-amber) 8 8, crosshair;
}

button,a,.prompt{
  cursor:var(--cursor-amber) 8 8, pointer;
}

#protocolWindow{
    background:
    url("../images/menu.png") center/cover no-repeat,
    #0c0602;
  image-rendering:pixelated;
}

/* =========================
   WINDOW SHUTDOWN
========================= */

.win.closing{
  animation:winClose .28s ease-in forwards;
}

@keyframes winClose{
  0%{
    opacity:1;
    transform:translate(var(--tx,0),var(--ty,0)) scaleY(1);
  }
  100%{
    opacity:0;
    transform:translate(var(--tx,0),var(--ty,0)) scaleY(0);
  }
}

/* =========================
   PROTOCOL TAKEOVER
========================= */

.win-main.taking-over{
  transition:
    width .6s ease,
    height .6s ease,
    top .6s ease,
    left .6s ease,
    transform .6s ease,
    background .3s ease;
}

.win-main.fullscreen{
  width:80vw;
  height:90vh;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#000;
}