@font-face {
  font-family: Determination;
  src: url("assets/fonts/determination.woff2") format("woff2"),
       url("assets/fonts/determination.ttf") format("truetype");
  font-display: swap;
}

:root {
  --white:#fff;
  --black:#000;
  --yellow:#fff200;
  --red:#ff2020;
  --cyan:#00f0ff;
}

* { box-sizing:border-box; image-rendering:pixelated; }

html, body {
  margin:0;
  min-height:100%;
  background:black;
  color:white;
  overflow:hidden;
  font-family:Determination, "Courier New", monospace;
}

.hidden { display:none !important; }
button { font-family:inherit; }

#start {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:black;
}

.start-box {
  width:min(720px,92vw);
  border:6px double white;
  padding:34px;
  text-align:center;
}

.start-box h1 {
  color:var(--yellow);
  font-size:clamp(42px,8vw,84px);
  margin:0 0 18px;
  text-shadow:4px 4px #f0f;
  animation:tinyShake .12s steps(2) infinite;
}

.start-box p { font-size:clamp(20px,3vw,34px); }

#enter {
  font-size:32px;
  color:white;
  background:black;
  border:4px solid white;
  padding:8px 30px;
  cursor:pointer;
}

#enter:hover { color:black; background:white; }

#shop {
  width:100vw;
  height:100vh;
  display:grid;
  place-items:center;
}

.game {
  position:relative;
  width:min(100vw, calc(100vh * 1.7777));
  height:min(100vh, calc(100vw * .5625));
  background:black;
  overflow:hidden;
}

.background-row {
  position:absolute;
  left:5.4%;
  right:5.4%;
  top:0;
  height:48%;
  overflow:hidden;
  background:black;
}

.shop-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* MOVED: Spamton now stands in the wall/background area like the game */
#spamton {
  position:absolute;
  left:30%;
  top:8%;
  width:23%;
  height:auto;
  z-index:3;
  transform-origin:bottom center;
  filter:drop-shadow(0 0 1px black);
}

#spamton.talking {
  animation:spamTalk .13s steps(2) infinite;
}

.play-area {
  position:absolute;
  left:5.4%;
  right:5.4%;
  bottom:0;
  height:52%;
  background:#000;
}

.dialogue-box {
  position:absolute;
  left:31.5%;
  right:0.6%;
  top:6.5%;
  height:31%;
  background:black;
  border:clamp(3px,.35vw,5px) double white;
  padding:1.2% 1.8%;
  font-size:clamp(17px,2.15vw,42px);
  line-height:1.16;
}

#dialogue { margin:0; white-space:pre-wrap; }

.menu-box {
  position:absolute;
  left:2.9%;
  bottom:7.5%;
  width:15%;
  height:53%;
  border:clamp(3px,.35vw,5px) double white;
  background:black;
  padding:1.4% 1.2%;
  display:grid;
  align-content:start;
  gap:8%;
  z-index:2;
}

.option {
  position:relative;
  color:white;
  font-size:clamp(18px,2.25vw,42px);
  line-height:1;
  text-align:left;
  padding-left:22%;
  cursor:pointer;
  user-select:none;
}

.option.selected::before {
  content:"♥";
  color:red;
  position:absolute;
  left:0;
  top:-2px;
}

.kromer-box {
  position:absolute;
  right:0.6%;
  bottom:7.5%;
  width:26%;
  height:53%;
  border:clamp(3px,.35vw,5px) double white;
  background:black;
  padding:1.4%;
  font-size:clamp(15px,1.85vw,34px);
}

.kromer-title { margin:0; letter-spacing:1px; }

#kromer {
  margin:.25em 0 .9em;
  font-size:1.75em;
  color:var(--yellow);
  text-align:right;
  min-height:1.1em;
  animation:kromerTwitch .08s steps(2) infinite;
}

#mute {
  background:black;
  color:white;
  border:3px solid white;
  font-size:clamp(12px,1.2vw,22px);
  cursor:pointer;
}

.sub-box {
  position:absolute;
  left:31.5%;
  right:28%;
  bottom:7.5%;
  height:53%;
  border:clamp(3px,.35vw,5px) double white;
  background:black;
  padding:1.2% 1.5%;
  font-size:clamp(15px,1.9vw,34px);
  line-height:1.28;
  overflow:hidden;
}

.sub-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  cursor:pointer;
  margin-bottom:.38em;
  user-select:none;
}

.sub-row .name {
  position:relative;
  padding-left:34px;
}

.sub-row.selected .name::before {
  content:"♥";
  color:red;
  position:absolute;
  left:0;
  top:-2px;
}

.price { font-size:.78em; white-space:nowrap; }

.big-option {
  margin-top:.5em;
  font-size:1.5em;
  cursor:pointer;
  user-select:none;
}

.big-option.selected::before {
  content:"♥ ";
  color:red;
}

.help {
  position:absolute;
  left:31.5%;
  bottom:1.3%;
  color:#777;
  font-size:clamp(9px,.95vw,18px);
}

.yellow { color:var(--yellow); }
.cyan { color:var(--cyan); }

.scanlines {
  pointer-events:none;
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 4px);
  opacity:.18;
  mix-blend-mode:screen;
  z-index:10;
}

.game.glitch { animation:glitch .12s steps(2) 7; }

@keyframes spamTalk {
  0% { transform:translate(0,0) rotate(0deg); }
  100% { transform:translate(-2px,2px) rotate(-1deg); }
}

@keyframes tinyShake {
  from { transform:translate(0,0); }
  to { transform:translate(2px,-1px); }
}

@keyframes glitch {
  0% { transform:translate(0); filter:hue-rotate(0deg) contrast(1); }
  50% { transform:translate(5px,-2px); filter:hue-rotate(80deg) contrast(1.8); }
  100% { transform:translate(-3px,2px); filter:hue-rotate(0deg) contrast(1); }
}


@keyframes kromerTwitch {
  from { transform:translate(0,0); opacity:1; }
  to { transform:translate(1px,-1px); opacity:.92; }
}


/* V11 MOBILE FIX */
@media (max-width: 700px), (max-aspect-ratio: 3/4) {
  html, body {
    overflow: hidden;
    background: #000;
  }

  #shop {
    align-items: start;
  }

  .game {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    display: block;
  }

  .background-row {
    left: 5vw;
    right: 5vw;
    top: 3vh;
    height: 23vh;
  }

  #spamton {
    left: 22%;
    top: 4%;
    width: 32%;
  }

  .play-area {
    left: 5vw;
    right: 5vw;
    bottom: auto;
    top: 26vh;
    height: 70vh;
  }

  .dialogue-box {
    left: 19vw;
    right: 0;
    top: 2vh;
    height: 15vh;
    padding: 10px 12px;
    font-size: clamp(15px, 4.1vw, 22px);
    line-height: 1.08;
    overflow: hidden;
  }

  .menu-box {
    left: 0;
    top: 19vh;
    bottom: auto;
    width: 22vw;
    height: 24vh;
    padding: 8px 6px;
    gap: 8px;
  }

  .option {
    font-size: clamp(15px, 4.3vw, 22px);
    padding-left: 20px;
  }

  .option.selected::before {
    top: -1px;
  }

  .sub-box {
    left: 24vw;
    right: 22vw;
    top: 19vh;
    bottom: auto;
    height: 24vh;
    padding: 8px 8px;
    font-size: clamp(12px, 3.5vw, 18px);
    line-height: 1.08;
  }

  .sub-row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 4px;
  }

  .sub-row .name {
    padding-left: 18px;
  }

  .sub-row.selected .name::before {
    top: 0;
  }

  .price {
    font-size: .62em;
    padding-left: 18px;
    opacity: .9;
  }

  .big-option {
    font-size: clamp(14px, 4vw, 20px);
    margin-top: 5px;
  }

  .kromer-box {
    right: 0;
    top: 19vh;
    bottom: auto;
    width: 20vw;
    height: 24vh;
    padding: 8px 6px;
    font-size: clamp(11px, 3.2vw, 16px);
  }

  #kromer {
    font-size: clamp(20px, 8vw, 36px);
    text-align: right;
    margin-top: .2em;
  }

  #mute {
    font-size: 10px;
    border-width: 2px;
    padding: 1px 3px;
  }

  .help {
    left: 0;
    right: 0;
    bottom: 2vh;
    text-align: center;
    font-size: clamp(7px, 2.2vw, 11px);
  }

  .start-box {
    width: 90vw;
    padding: 22px;
  }

  .start-box h1 {
    font-size: clamp(34px, 10vw, 52px);
  }

  .start-box p {
    font-size: clamp(16px, 4.4vw, 22px);
  }

  #enter {
    font-size: 22px;
  }
}

@media (max-width: 420px) {
  .background-row {
    height: 21vh;
  }

  .play-area {
    top: 24vh;
  }

  .dialogue-box {
    top: 1.5vh;
    height: 15vh;
    font-size: clamp(13px, 3.8vw, 18px);
  }

  .menu-box,
  .sub-box,
  .kromer-box {
    top: 18vh;
    height: 24vh;
  }

  .option {
    font-size: clamp(13px, 4vw, 18px);
  }

  .sub-box {
    font-size: clamp(11px, 3.1vw, 15px);
  }
}