/* =====================================================================
   undertale.css - the encounter. Black void, white battle box,
   orange menu letters, one very red heart.
   ===================================================================== */

/* the Annoying Dog, hanging from the top-right of the screen.
   mix-blend screen drops the image's black background on any surface. */
.hang-dog{
  position:fixed; top:0; right:34px; width:230px; height:auto; z-index:40;
  pointer-events:none; image-rendering:pixelated; mix-blend-mode:screen;
  transform-origin:50% 0; animation:dogSway 3.8s ease-in-out infinite;
}
@keyframes dogSway{ 0%,100%{ transform:rotate(-1.3deg); } 50%{ transform:rotate(1.3deg); } }
@media (max-width:900px){ .hang-dog{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hang-dog{ animation:none; } }

/* wide establishing shot under the sign */
.ut-scene{
  display:block; width:100%; height:auto; margin:14px 0 4px;
  border:2px solid #2a2a2a; border-radius:3px; image-rendering:pixelated;
}
/* the flower room, beside the opening narration */
.ut-dialogue-art{ display:flex; gap:18px; align-items:center; }
.ut-dialogue-art > div{ flex:1; min-width:0; }
.ut-flowers{ width:190px; height:auto; flex:none; image-rendering:pixelated; }
@media (max-width:620px){
  .ut-dialogue-art{ flex-direction:column; align-items:stretch; }
  .ut-flowers{ width:100%; max-width:260px; margin:0 auto; }
}

.ut-battle{ margin:26px 0; }
.ut-battle [hidden]{ display:none !important; }

.ut-enemy{
  width:110px; margin:0 auto; user-select:none;
  animation:utIdle 2.4s ease-in-out infinite;
}
.ut-enemy svg{ width:100%; height:auto; display:block; }
@keyframes utIdle{ 50%{ transform:translateY(-5px) } }
.ut-enemy.hit{ animation:utHit .4s steps(2); filter:brightness(3); }
@keyframes utHit{ 25%{ transform:translateX(-8px) } 75%{ transform:translateX(8px) } }
.ut-enemy.spared{ filter:drop-shadow(0 0 14px #ffd400); }
.ut-enemy.dusted{ opacity:.15; filter:grayscale(1) blur(1px); transition:all 1.2s; }

.ut-enemy-name{
  text-align:center; font-family:var(--font-term); font-size:22px;
  color:#fff; margin:6px 0 10px; letter-spacing:2px;
}
.ut-enemy-name.spareable{ color:var(--accent); text-shadow:0 0 10px var(--accent); }

/* the box */
.ut-box{
  position:relative; height:230px; overflow:hidden;
  border:4px solid #fff; border-radius:2px; background:#000;
  box-shadow:0 0 0 4px #000, 0 0 24px rgba(255,255,255,.12);
  touch-action:none;
}
.ut-text{
  position:absolute; inset:0; padding:16px 18px;
  font-family:var(--font-term); font-size:23px; line-height:1.4; color:#fff;
  white-space:pre-wrap; pointer-events:none;
}
.ut-soul{
  position:absolute; left:0; top:0; width:16px; height:20px;
  color:var(--accent2); font-size:18px; line-height:1;
  text-shadow:0 0 8px var(--accent2); pointer-events:none; z-index:3;
}
.ut-soul.ouch{ animation:soulBlink .12s steps(2) infinite; }
@keyframes soulBlink{ 50%{ opacity:.15 } }
.ut-bullet{
  position:absolute; left:0; top:0; color:#fff; font-size:17px; line-height:1;
  pointer-events:none; z-index:2; text-shadow:0 0 6px rgba(255,255,255,.6);
}

/* fight timing bar */
.ut-fightbar{
  position:absolute; inset:0; background:
    repeating-linear-gradient(90deg, #101 0 12px, #000 12px 24px);
  cursor:pointer;
}
.ut-fightbar .ut-center{
  position:absolute; left:50%; top:0; bottom:0; width:14px; margin-left:-7px;
  background:rgba(255,212,0,.25); border-left:2px solid var(--accent); border-right:2px solid var(--accent);
}
.ut-fightbar .ut-sweep{
  position:absolute; top:0; bottom:0; width:6px; margin-left:-3px; left:0;
  background:#fff; box-shadow:0 0 12px #fff; z-index:2;
}

/* hud */
.ut-hud{
  display:flex; align-items:center; gap:14px; justify-content:center;
  font-family:var(--font-term); font-size:20px; color:#fff; margin:12px 0 8px;
}
.ut-hpbar{
  width:120px; height:16px; background:var(--accent2); overflow:hidden;
  display:inline-block; position:relative;
}
.ut-hpbar i{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  background:var(--accent); display:block; transition:width .25s;
}

/* menus */
.ut-menu{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ut-menu button, .ut-submenu button{
  font-family:var(--font-term); font-size:24px; letter-spacing:1px;
  color:#ff7f27; background:#000; border:3px solid #ff7f27; border-radius:2px;
  padding:8px 20px; cursor:pointer; min-width:120px;
  transition:color .1s, border-color .1s;
}
.ut-menu button:hover:not(:disabled), .ut-submenu button:hover{
  color:var(--accent); border-color:var(--accent);
}
.ut-menu button:hover:not(:disabled)::first-letter{ color:var(--accent2); }
.ut-menu.off button, .ut-menu button:disabled{ opacity:.35; cursor:default; }
.ut-submenu{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;
  align-items:center;
}
.ut-submenu button{ font-size:21px; min-width:0; }
.ut-retry-note{ font-family:var(--font-term); font-size:20px; color:var(--muted); width:100%; text-align:center; }

.ut-battle.gameover .ut-box{ border-color:var(--accent2); }

@media (max-width:560px){
  .ut-menu button{ min-width:44%; font-size:21px; }
  .ut-box{ height:200px; }
}