/* Overlay / HUD refinements. Second stylesheet from the live page.
   Title-screen art is assets/title.png (was a data URL in the deployed HTML). */

#boot {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  color: #8c8c94;
  font: 13px Consolas, monospace;
  pointer-events: none
}

#boot.error {
  color: #ff4040;
  background: #0d0d10;
  padding: 14px;
  z-index: 20;
  pointer-events: auto;
  max-height: 80vh;
  overflow: auto
}
#boot.error pre { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
#boot.error button { min-height: 44px; margin: 8px; padding: 8px 16px; cursor: pointer; }
.credits-link { color: #b5c6ce; font-size: 12px; }

#save-warning {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  max-width: 86%;
  padding: 8px 12px;
  border: 1px solid #c47c65;
  border-radius: 5px;
  background: #291b1ee8;
  color: #ffd8c9;
  font-size: calc(var(--u) * 1.2);
  line-height: 1.4;
  text-align: center;
  pointer-events: auto
}

#save-warning button { margin-left: 8px; min-height: 32px; cursor: pointer; }

/* Keep touch input off the playfield. Grid cells stay at least 44 CSS px,
   independent of the 16:9 canvas and the device orientation. */
@media (pointer: coarse) {
  body.in-play { padding-bottom: 180px; align-items: flex-start; padding-top: max(16px, env(safe-area-inset-top)); }
  body.in-play .touch-controls {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 4px;
    inset: auto 8px max(8px, env(safe-area-inset-bottom));
    padding: 8px;
    border: 1px solid #3d4149;
    border-radius: 10px;
    background: #0b111bef;
    pointer-events: auto;
    z-index: 10;
  }
  body.in-play .touch-controls button {
    position: static;
    width: 100%;
    height: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 16px;
  }
  body.in-play #hp-num, body.in-play #ash, body.in-play #timer { font-size: 11px; }
  body.in-play #save-warning { position: fixed; bottom: 190px; font-size: 12px; }
}
@media (pointer: coarse) and (min-width: 720px) {
  body.in-play { padding-bottom: 84px; }
  body.in-play .touch-controls { grid-template-columns: repeat(14, minmax(44px, 1fr)); gap: 4px; }
  body.in-play #save-warning { bottom: 88px; }
}

#game {
  image-rendering: pixelated
}

#s-title .tag {
  margin-top: 10px
}

.card:hover {
  outline-color: var(--ink)
}

.card.skill:hover {
  outline-color: var(--cyan)
}

.card.rare:hover {
  outline-color: var(--gold)
}

#pause-build {
  max-height: 29%
}

#records-body {
  width: 86%;
  max-height: 50%;
  overflow: auto;
  font-size: calc(var(--u)*1.4);
  text-align: left;
  line-height: 1.8
}

.record-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 10px;
  border-bottom: 1px solid var(--line)
}

.record-row b {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink)
}

.record-row span {
  color: var(--dim)
}

#s-keys dl {
  max-width: 85%
}

#hint {
  top: calc(var(--u)*2);
  bottom: auto;
  max-width: 36%;
  font-size: calc(var(--u)*1.35)
}

.touch-controls {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4
}

.touch-controls button {
  pointer-events: auto;
  position: absolute;
  border: 1px solid #64646c;
  background: #050506aa;
  color: #f3f1ea;
  font: 16px Consolas;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  touch-action: none
}

.touch-controls button[data-key=KeyA] {
  left: 2%;
  bottom: 4%
}

.touch-controls button[data-key=KeyD] {
  left: 15%;
  bottom: 4%
}

.touch-controls button[data-key=Space] {
  right: 2%;
  bottom: 4%
}

.touch-controls button[data-key=KeyJ] {
  right: 15%;
  bottom: 4%
}

.touch-controls button[data-key=ShiftLeft] {
  right: 28%;
  bottom: 4%
}

.touch-controls button[data-key=KeyQ] {
  right: 2%;
  bottom: 30%
}

.touch-controls button[data-key=KeyE] {
  left: 28%;
  bottom: 4%
}

.touch-controls button[data-key=Escape] {
  right: 2%;
  top: 3%
}

.touch-controls button[data-key=KeyK] {
  right: 15%;
  bottom: 30%
}

.touch-controls button[data-key=KeyR] {
  right: 28%;
  bottom: 30%
}

.touch-controls button[data-key=KeyG] {
  right: 41%;
  bottom: 30%
}

.touch-controls button[data-key=KeyF] {
  left: 41%;
  bottom: 4%
}

.touch-controls button[data-key=KeyW] {
  left: 2%;
  bottom: 30%
}

.touch-controls button[data-key=KeyS] {
  left: 15%;
  bottom: 30%
}

#kit-cards:has(> :nth-child(6)),
#kit-cards:has(> :nth-child(7)) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 90%;
  gap: calc(var(--u)*.8);
  max-height: 60%;
  overflow-y: auto;
  padding: 4px
}

#app.boss-fight #hint {
  top: 13%
}

#kit-cards:has(> :nth-child(6)) .card {
  width: auto;
  padding: calc(var(--u)*.9);
  gap: calc(var(--u)*.3);
  min-height: 0
}

#kit-cards:has(> :nth-child(6)) .name {
  font-size: calc(var(--u)*2.4)
}

#kit-cards:has(> :nth-child(6)) ul {
  font-size: calc(var(--u)*1.05);
  line-height: 1.3
}

#kit-cards:has(> :nth-child(6)) {
  grid-auto-rows: max-content;
  align-content: start;
  flex-shrink: 0
}

@media(max-width:700px) {

  #kit-cards:has(> :nth-child(6)),
  #kit-cards:has(> :nth-child(7)) {
    grid-template-columns: 1fr;
    max-height: 48vh
  }

  #kit-cards:has(> :nth-child(6)) .name {
    font-size: 26px
  }

  #kit-cards:has(> :nth-child(6)) ul {
    font-size: 13px
  }

  .touch-controls button {
    padding: 8px;
    font-size: 13px
  }
}

@media(pointer:coarse) {
  #app.playing .touch-controls {
    display: block
  }

  .touch-note {
    display: block
  }
}

@media(max-width:700px) {
  #app {
    margin-top: 0
  }

  #s-title {
    background-size: 100% auto
  }

  #s-title .foot {
    gap: 18px
  }

  #title-best {
    max-width: 100%;
    text-align: left
  }

  .title-actions {
    max-width: 100%
  }

  .title-actions .btn-row {
    gap: 12px
  }

  .record-row {
    grid-template-columns: 1fr 1fr
  }

  #s-pause .keys {
    max-width: 100%
  }

  #s-kit {
    gap: 18px
  }
}

/* Obsidian, brass and ember: cleaner typography and a quiet combat frame. */
:root {
  --ui-font: "Segoe UI", "Microsoft YaHei", sans-serif;
  --scene-accent: #d4b78b;
  --ink: #e8e7df;
  --dim: #a0a9b4;
  --line: #343842;
  --panel: #11151deb
}

body {
  background: radial-gradient(ellipse at 50% 25%, #1d2330 0, #090c12 55%, #05070b 100%);
  font-family: var(--ui-font)
}

#app {
  border: 1px solid #3d4149;
  border-radius: 12px;
  box-shadow: 0 24px 100px #000b;
  overflow: hidden
}

#app.vector-art #game {
  image-rendering: auto
}

.screen {
  font-family: var(--ui-font);
  background: linear-gradient(160deg, #0e151eec, #090c13f5);
  backdrop-filter: blur(6px)
}

.screen h2 {
  font-family: var(--ui-font);
  font-weight: 400;
  font-size: calc(var(--u)*3.3);
  letter-spacing: .14em;
  color: #e8dfcf
}

.screen .sub,
.screen .fine {
  font-family: var(--ui-font);
  line-height: 1.5;
  letter-spacing: .04em
}

#s-title {
  background-image: linear-gradient(90deg, #080e16f5 0%, #0c121ba6 40%, #070b1240 75%), url('../assets/title.png');
  background-size: 100% 100%;
  padding: calc(var(--u)*4.4) calc(var(--u)*6)
}

.title-eyebrow {
  margin: 0 0 calc(var(--u)*1);
  font-size: calc(var(--u)*1);
  letter-spacing: .32em;
  color: #cfb58d;
  display: flex;
  align-items: center;
  gap: calc(var(--u)*2)
}

.title-eyebrow span {
  border-left: 1px solid #635642;
  padding-left: calc(var(--u)*1.4);
  letter-spacing: .12em;
  color: #969faa
}

#s-title h1 {
  font-family: "SimSun", "Songti SC", serif;
  font-weight: 400;
  letter-spacing: .1em;
  font-size: calc(var(--u)*13);
  color: #e9e2d2;
  text-shadow: 0 3px 24px #0009
}

#s-title .latin {
  font-family: Georgia, serif;
  font-size: calc(var(--u)*2);
  letter-spacing: .65em;
  color: #bba788;
  margin-top: calc(var(--u)*.4)
}

#s-title .tag {
  font-size: calc(var(--u)*1.4);
  letter-spacing: .18em;
  color: #aeb5bf;
  margin-top: calc(var(--u)*1.5)
}

.btn {
  font-family: var(--ui-font);
  font-size: calc(var(--u)*1.6);
  font-weight: 500;
  border-radius: 6px;
  letter-spacing: .08em;
  padding: calc(var(--u)*.85) calc(var(--u)*1.5);
  background: #d4b78b;
  transition: background .18s, box-shadow .18s, transform .18s
}

.btn:hover {
  background: #ead0a8;
  box-shadow: 0 0 22px #d4b78b22;
  transform: translateY(-1px)
}

.btn.ghost {
  background: #141b2580;
  outline: none;
  border: 1px solid #42464f;
  color: #cbd0d8
}

.btn.ghost:hover {
  border-color: #b79d77;
  background: #1e2736
}

.btn kbd {
  font-family: var(--ui-font);
  outline: none;
  border: 1px solid #3b322666;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: calc(var(--u)*.85)
}

.card {
  outline: none;
  border: 1px solid #393e49;
  border-radius: 9px;
  background: linear-gradient(145deg, #1c2330e6, #0d131df5);
  box-shadow: 0 4px 18px #0003;
  transition: border-color .18s, box-shadow .18s, transform .18s
}

.card.sel {
  outline: none;
  border-color: #d4b78b;
  box-shadow: inset 0 0 28px #d4b78b0a, 0 0 20px #0005;
  transform: translateY(-2px)
}

.card:hover {
  outline: none;
  border-color: #b7a38a;
  box-shadow: 0 6px 25px #0005
}

.card.skill {
  border-color: #34656a
}

.card.rare {
  border-color: #9f804d
}

.card .name {
  font-family: var(--ui-font);
  font-weight: 500;
  letter-spacing: .06em;
  font-size: calc(var(--u)*3)
}

.card .role {
  font-family: var(--ui-font);
  letter-spacing: .12em;
  color: #a2aab5
}

.card .key {
  outline: none;
  border: 1px solid #555c68;
  border-radius: 4px;
  color: #c3b296
}

.weapon-icon {
  position: absolute;
  width: calc(var(--u)*3.5);
  height: calc(var(--u)*3.5);
  right: calc(var(--u)*2);
  top: calc(var(--u)*2.6);
  color: #cbb48b;
  opacity: .75
}

#kit-cards:has(> :nth-child(6)) .card {
  padding: calc(var(--u)*1.15)
}

#kit-cards:has(> :nth-child(6)) .name {
  font-size: calc(var(--u)*2.2);
  margin-bottom: calc(var(--u)*.35)
}

#kit-cards:has(> :nth-child(6)) ul {
  font-size: calc(var(--u)*1.03);
  line-height: 1.5;
  gap: calc(var(--u)*.25)
}

.keys dt {
  outline: none;
  border: 1px solid #414752;
  border-radius: 4px;
  background: #171e29;
  padding: 3px 6px;
  font-family: var(--ui-font)
}

.keys dd {
  color: #8f9bab
}

.keys {
  gap: calc(var(--u)*.7) calc(var(--u)*1.5)
}

.tl {
  position: static
}

.hprow {
  position: absolute;
  left: 2%;
  top: 2.3%;
  padding: calc(var(--u)*1.1) calc(var(--u)*1.2);
  border: 1px solid #69708050;
  border-radius: 9px;
  background: linear-gradient(120deg, #111b26e8, #0a1119ba);
  box-shadow: 0 5px 20px #0005;
  backdrop-filter: blur(8px)
}

#hpbar {
  height: calc(var(--u)*.65);
  width: calc(var(--u)*17);
  outline: none;
  background: #3c3230;
  border-radius: 3px;
  overflow: hidden
}

#hp-fill {
  background: linear-gradient(90deg, #be6858, #ebaa8c);
  box-shadow: 0 0 12px #ce796555
}

#hp-num {
  font-size: calc(var(--u)*.96);
  color: #efe5d8;
  font-family: var(--ui-font)
}

#flasks {
  gap: calc(var(--u)*.4)
}

#flasks i {
  width: calc(var(--u)*.65);
  height: calc(var(--u)*1);
  outline: none;
  border: 1px solid #e9c28a80;
  border-radius: 2px 2px 4px 4px
}

#flasks i.on {
  background: #d4b78b
}

.slots {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  flex-direction: row;
  gap: calc(var(--u)*.65);
  margin: 0;
  text-shadow: none
}

.slot {
  width: calc(var(--u)*9.8);
  min-height: calc(var(--u)*6.1);
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "key name" "bar bar" "note note";
  grid-template-columns: calc(var(--u)*1.7) 1fr;
  gap: calc(var(--u)*.55);
  padding: calc(var(--u)*.8);
  border: 1px solid #54607166;
  border-radius: 8px;
  background: linear-gradient(130deg, #182333e8, #0c131ee8);
  box-shadow: 0 5px 18px #0005;
  backdrop-filter: blur(8px)
}

.slot kbd {
  grid-area: key;
  outline: none;
  border: 1px solid #67708055;
  border-radius: 4px;
  background: #090e1680;
  min-width: 0;
  font-family: var(--ui-font);
  font-size: calc(var(--u)*.86);
  padding: 2px 4px;
  line-height: 1.2;
  color: #c4c9d0
}

.slot b {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--ui-font);
  font-size: calc(var(--u)*1.14);
  line-height: 1.2;
  color: #ebe8df;
  font-weight: 500
}

#slot-roll {
  grid-template-columns: calc(var(--u)*3) 1fr
}

#slot-roll kbd {
  font-size: calc(var(--u)*.68);
  padding: 2px
}

.slot .bar {
  grid-area: bar;
  height: 3px;
  border-radius: 3px;
  background: #334153;
  overflow: hidden
}

.slot small {
  grid-area: note;
  font-family: var(--ui-font);
  font-size: calc(var(--u)*.82);
  color: #8d9bad;
  overflow: hidden;
  text-overflow: ellipsis
}

.slot.ready {
  border-color: #6dcbb052
}

.slot.ready kbd {
  outline: none;
  color: #9ee5d3
}

.slot.ready .bar i {
  background: linear-gradient(90deg, #438f86, #91ddc6)
}

#slot-ult {
  border-color: #ac885755
}

#slot-ult.ready {
  box-shadow: 0 0 20px #dfaa5020;
  border-color: #d4b78b
}

#slot-ult.ready b {
  color: #edcea0
}

#slot-ult.ready kbd {
  outline: none;
  color: #edcea0
}

.slot.empty {
  opacity: .5
}

.tr {
  top: 2.3%;
  right: 2%;
  gap: calc(var(--u)*.5);
  padding: calc(var(--u)*.8) calc(var(--u)*1.1);
  border-radius: 9px;
  background: #101824c9;
  border: 1px solid #69708040;
  backdrop-filter: blur(8px)
}

#timer {
  font-family: var(--ui-font);
  font-size: calc(var(--u)*1.05);
  color: #d9dfdf
}

#ash {
  font-family: var(--ui-font);
  font-size: calc(var(--u)*1.3);
  color: var(--scene-accent)
}

.chip {
  font-family: var(--ui-font);
  font-size: calc(var(--u)*.84);
  border-radius: 4px;
  outline: none;
  border: 1px solid #59617277;
  padding: 3px 5px
}

#boss {
  left: 50%;
  top: 2.1%;
  width: 32%
}

.bn {
  font-family: var(--ui-font);
  font-size: calc(var(--u)*1.5);
  letter-spacing: .13em;
  margin: 0 0 calc(var(--u)*.5);
  color: #ede3d6
}

.bh {
  height: calc(var(--u)*.65);
  outline: none;
  border: 1px solid #9d5b5866;
  border-radius: 3px;
  overflow: hidden;
  background: #281c23
}

#boss-hp {
  background: linear-gradient(90deg, #bc4658, #f09277)
}

.bp {
  height: 2px;
  margin-top: 4px;
  border-radius: 2px
}

#boss-po {
  background: #e6c68e
}

#hint {
  top: 12%;
  bottom: auto;
  max-width: 45%;
  border: 1px solid #78828c33;
  border-radius: 6px;
  background: #0d1720d9;
  backdrop-filter: blur(8px);
  font-family: var(--ui-font);
  font-size: calc(var(--u)*.96);
  line-height: 1.5;
  letter-spacing: .01em;
  box-shadow: 0 4px 20px #0004
}

#app.boss-fight #hint {
  top: 14%
}

#banner {
  font-family: var(--ui-font);
  font-weight: 300;
  font-size: calc(var(--u)*3.2);
  letter-spacing: .12em;
  text-shadow: 0 3px 25px #000
}

#combo {
  top: 36%
}

#combo b {
  font-family: Georgia, serif;
  font-size: calc(var(--u)*3.8)
}

#combo span {
  font-family: var(--ui-font);
  font-size: calc(var(--u)*1.15)
}

#s-pause .opts {
  max-width: 85%;
  gap: calc(var(--u)*.6)
}

#s-pause .opts .btn {
  font-size: calc(var(--u)*1.08)
}

@media(pointer:coarse) {
  .slots {
    display: none
  }

  .hprow {
    padding: 6px 8px
  }

  .tr {
    padding: 5px 7px
  }

  .touch-controls button {
    border-radius: 7px;
    background: #102031d9;
    border-color: #737c8755;
    color: #e3daca;
    box-shadow: 0 2px 10px #0006;
    font-family: var(--ui-font)
  }
}

@media(max-width:700px) {
  #app {
    border-radius: 6px
  }

  .title-eyebrow {
    font-size: 10px
  }

  .title-eyebrow span {
    display: none
  }

  #s-title h1 {
    font-size: 80px
  }

  #s-title .latin {
    font-size: 16px
  }

  #s-title .tag {
    font-size: 12px
  }

  .btn {
    font-size: 15px;
    padding: 10px 14px
  }

  .screen h2 {
    font-size: 26px
  }

  #kit-cards:has(> :nth-child(6)) .name {
    font-size: 24px
  }

  #kit-cards:has(> :nth-child(6)) ul {
    font-size: 12px
  }

  #kit-cards:has(> :nth-child(6)) .card {
    padding: 15px
  }

  .weapon-icon {
    width: 36px;
    height: 36px;
    top: 30px;
    right: 22px
  }

  .hprow {
    left: 1.5%;
    top: 2%
  }

  #hpbar {
    width: 18vw
  }

  .tr {
    right: 1.5%;
    top: 2%
  }

  #hint {
    max-width: 48%;
    font-size: calc(var(--u)*1.4)
  }

  #boss {
    top: 4%;
    width: 35%
  }

  .bn {
    font-size: calc(var(--u)*1.55)
  }

  #s-pause .opts .btn {
    font-size: 12px
  }
}

.autoplay-toggle {
  position: absolute;
  z-index: 8;
  right: calc(var(--u)*2);
  top: calc(var(--u)*7);
  pointer-events: auto;
  border: 1px solid #70624f;
  border-radius: 8px;
  padding: .6em .9em;
  background: #12141bee;
  color: #d4c4ad;
  font: inherit;
  font-size: calc(var(--u)*1.1);
  cursor: pointer;
  box-shadow: 0 4px 20px #0006
}

.autoplay-toggle.active {
  border-color: #62e6d8;
  color: #85e4d6;
  background: #11231fed
}

.autoplay-toggle kbd {
  margin-left: .4em;
  opacity: .65
}

.autoplay-toggle small {
  display: block;
  margin-top: .4em;
  font-size: .8em;
  opacity: .8
}

.menu .autoplay-toggle {
  display: none
}

@media(pointer:coarse) {
  .autoplay-toggle {
    font-size: calc(var(--u)*1.6);
    top: calc(var(--u)*9)
  }
}