/* GERONO — pixel stage + crisp DOM UI scaled by --scale */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #07070c;
  overflow: hidden;
  font-family: 'Courier New', ui-monospace, monospace;
  -webkit-user-select: none;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  --scale: 4;
}

#game {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

#tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

#ui {
  position: absolute;
  inset: 0;
  z-index: 10;
  font-size: calc(var(--scale) * 5.4px);
  color: #e8e4f0;
}

.hidden {
  display: none !important;
}

.dim {
  color: #9aa7b8;
}

.geld {
  color: #ffd96b;
  float: right;
}

.hint {
  margin-top: 0.6em;
  font-size: 0.8em;
}

/* ------------------------------------------------------------- panels */

.panel {
  position: absolute;
  background: #10101acc;
  border: calc(var(--scale) * 1px) solid #c9b896;
  border-radius: calc(var(--scale) * 2px);
  padding: calc(var(--scale) * 3px) calc(var(--scale) * 4px);
  box-shadow: 0 calc(var(--scale) * 2px) calc(var(--scale) * 6px) #00000090;
}

.ptitle {
  color: #ffd96b;
  margin-bottom: 0.4em;
  letter-spacing: 0.08em;
}

.row {
  padding: 0.12em 0.3em;
  white-space: nowrap;
}

.row.sel {
  background: #c9b89630;
  outline: calc(var(--scale) * 0.5px) solid #c9b896;
  border-radius: 2px;
}

.row.ko {
  opacity: 0.45;
}

.tab {
  margin-right: 0.8em;
  opacity: 0.55;
}

.tab.sel {
  opacity: 1;
  text-decoration: underline;
}

/* ------------------------------------------------------------- title */

#ui-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--scale) * 6px);
  text-align: center;
}

#logo-main {
  font-size: calc(var(--scale) * 21px);
  font-weight: bold;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #fff7d6;
  text-shadow:
    0 0 calc(var(--scale) * 6px) #ffd96b88,
    0 calc(var(--scale) * 2px) 0 #7d5a36;
}

#logo-sub {
  color: #9aa7b8;
  letter-spacing: 0.18em;
  margin-top: 0.4em;
}

#title-menu {
  min-width: 46%;
}

.trow {
  padding: 0.3em 0.8em;
  color: #c9c3bb;
}

.trow.sel {
  color: #fff7d6;
  background: #c9b89622;
  outline: calc(var(--scale) * 0.5px) solid #c9b896;
  border-radius: 3px;
}

.trow.sel::before {
  content: '◆ ';
  color: #ffd96b;
}

#title-foot {
  position: absolute;
  bottom: 4%;
  width: 100%;
  text-align: center;
  color: #5d6b7d;
  font-size: 0.75em;
}

/* ------------------------------------------------------------- dialog */

#dialog {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 3%;
  min-height: 22%;
  background: #10101ae8;
  border: calc(var(--scale) * 1px) solid #c9b896;
  border-radius: calc(var(--scale) * 2px);
  padding: calc(var(--scale) * 3px) calc(var(--scale) * 5px);
  display: flex;
  gap: calc(var(--scale) * 4px);
  align-items: flex-start;
  z-index: 30;
}

#dialog-face .face {
  width: calc(var(--scale) * 20px);
  height: calc(var(--scale) * 20px);
  image-rendering: pixelated;
  border: calc(var(--scale) * 0.5px) solid #c9b896;
  border-radius: 2px;
}

#dialog-name {
  font-weight: bold;
  margin-bottom: 0.25em;
}

#dialog-text {
  line-height: 1.45;
}

#dialog-more {
  position: absolute;
  right: 1.2em;
  bottom: 0.3em;
  color: #ffd96b;
  animation: bob 0.9s infinite;
}

@keyframes bob {
  50% {
    transform: translateY(-20%);
  }
}

/* ------------------------------------------------------------- banner */

#banner {
  position: absolute;
  inset: 38% 0 auto 0;
  text-align: center;
  z-index: 40;
  animation: bannerin 0.5s ease-out;
}

#banner-text {
  font-size: calc(var(--scale) * 11px);
  font-weight: bold;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #fff7d6;
  text-shadow:
    0 0 calc(var(--scale) * 8px) #ffd96b,
    0 calc(var(--scale) * 1px) 0 #000;
}

#banner-sub {
  color: #c9c3bb;
  margin-top: 0.5em;
}

@keyframes bannerin {
  from {
    opacity: 0;
    transform: translateY(30%);
  }
}

/* ------------------------------------------------------------- toasts */

#toasts {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}

.toast {
  background: #10101ad8;
  border: 1px solid #c9b896;
  border-radius: 3px;
  padding: 0.25em 0.9em;
  animation: toastin 0.3s ease-out;
}

@keyframes toastin {
  from {
    opacity: 0;
    transform: translateY(-60%);
  }
}

/* ------------------------------------------------------------- pause */

#pausemenu {
  position: absolute;
  inset: 6% 8%;
  z-index: 25;
}

#pausemenu .panel {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

#pausemenu .row {
  white-space: normal;
  margin-bottom: 0.3em;
}

.shoppanel {
  min-width: 60%;
}

/* ------------------------------------------------------------- battle */

#battle-party {
  position: absolute;
  right: 1.5%;
  top: 4%;
  width: 27%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale) * 1.5px);
  z-index: 15;
}

.bunit {
  background: #10101ab8;
  border: calc(var(--scale) * 0.5px) solid #5d6b7d;
  border-radius: 3px;
  padding: 0.15em 0.4em;
  font-size: 0.82em;
}

.bunit.ready {
  border-color: #ffd96b;
  box-shadow: 0 0 calc(var(--scale) * 3px) #ffd96b60;
}

.bunit.sel {
  border-color: #fff7d6;
  background: #2a2438d8;
}

.bunit.ko {
  opacity: 0.45;
}

.bname {
  white-space: nowrap;
  overflow: hidden;
}

.bnums {
  font-size: 0.9em;
}

.mp {
  color: #54c6eb;
}

.sp {
  color: #ffd96b;
}

.bar {
  height: calc(var(--scale) * 1.5px);
  background: #00000090;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}

.bar i {
  display: block;
  height: 100%;
  background: #7ee8a2;
  transition: width 0.15s;
}

.bar.hp i {
  background: linear-gradient(90deg, #c2401f, #7ee8a2 60%);
}

.bar.atb i {
  background: #ffd96b;
}

.bar.ttl i {
  background: #fff7d6;
}

.st {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  margin-left: 0.25em;
}

.st-burn {
  background: #ff6b35;
}
.st-poison {
  background: #8ac926;
}
.st-shock {
  background: #ffd23f;
}
.st-hex {
  background: #b86bd6;
}
.st-aegis {
  background: #e8e4f0;
}
.st-haste {
  background: #7ee8a2;
}

.chainbox {
  position: absolute;
  left: 2%;
  top: 3%;
  background: #10101ab8;
  border: calc(var(--scale) * 0.5px) solid #5d6b7d;
  border-radius: 3px;
  padding: 0.2em 0.6em;
  font-size: 0.85em;
  min-width: 24%;
  z-index: 15;
}

.chainbox.foe {
  top: 16%;
  border-color: #7d3a44;
  font-size: 0.7em;
  min-width: 18%;
}

.chainbox.hot {
  border-color: #ffd96b;
  box-shadow: 0 0 calc(var(--scale) * 4px) #ffd96b70;
}

.chainbox.flash {
  animation: chainflash 0.4s;
}

@keyframes chainflash {
  0%,
  60% {
    background: #c2401f90;
  }
}

#battle-cmd {
  left: 2%;
  bottom: 3%;
  min-width: 38%;
  max-height: 58%;
  overflow-y: auto;
  z-index: 20;
}

#battle-info {
  left: 42%;
  bottom: 3%;
  max-width: 40%;
  z-index: 20;
  font-size: 0.8em;
}

#battle-result {
  z-index: 45;
}

.panel.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  min-width: 36%;
}

#battle-pops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
}

.pop {
  position: absolute;
  font-weight: bold;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000;
  animation: popfloat 1.1s ease-out forwards;
}

.pop.big {
  font-size: 1.4em;
}

@keyframes popfloat {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-160%);
  }
}

/* ------------------------------------------------------------- gameover */

#ui-gameover .center-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  text-align: center;
  padding: 0 8%;
}

.big {
  font-size: calc(var(--scale) * 12px);
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #c2401f;
}

/* ------------------------------------------------------------- touch */

#touch {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

#touch button {
  pointer-events: auto;
  position: absolute;
  width: calc(var(--scale) * 16px);
  height: calc(var(--scale) * 16px);
  background: #10101a90;
  color: #c9b896;
  border: 1px solid #c9b896;
  border-radius: 50%;
  font-size: calc(var(--scale) * 6px);
  touch-action: none;
}

#dpad button[data-btn='up'] {
  left: calc(var(--scale) * 20px);
  bottom: calc(var(--scale) * 36px);
}
#dpad button[data-btn='down'] {
  left: calc(var(--scale) * 20px);
  bottom: calc(var(--scale) * 4px);
}
#dpad button[data-btn='left'] {
  left: calc(var(--scale) * 3px);
  bottom: calc(var(--scale) * 20px);
}
#dpad button[data-btn='right'] {
  left: calc(var(--scale) * 37px);
  bottom: calc(var(--scale) * 20px);
}

#abtns button[data-btn='A'] {
  right: calc(var(--scale) * 6px);
  bottom: calc(var(--scale) * 8px);
  background: #2a3a2add;
}

#abtns button[data-btn='B'] {
  right: calc(var(--scale) * 26px);
  bottom: calc(var(--scale) * 24px);
}