* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #070807;
  color: #e8e0d4;
  font-family: "Microsoft JhengHei", "Segoe UI", sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#game-shell {
  position: fixed;
  inset: 0;
  background: #050504;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: fixed;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  text-shadow: 0 2px 12px #000;
}

.status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.status-line span,
.meters label {
  border: 18px solid transparent;
  border-image: url("./assets/ui/status-frame.png") 210 fill / 18px / 0 stretch;
  background: rgba(7, 9, 8, 0.62);
  border-radius: 10px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
}

.meters {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.meters label {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
}

.meters label {
  background: rgba(31, 10, 9, 0.62);
}


#help-button {
  pointer-events: auto;
  min-width: 72px;
  min-height: 38px;
  padding: 8px 12px;
  background: rgba(31, 34, 32, 0.72);
  border-color: rgba(232, 224, 212, 0.34);
  backdrop-filter: blur(8px);
}

meter {
  width: 100%;
  height: 12px;
  accent-color: #b2473f;
}

#crosshair {
  display: none;
}

#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: rgba(240, 232, 209, 0.86);
  box-shadow: 0 0 10px rgba(255, 235, 178, 0.5);
}

#crosshair::before {
  left: 8px;
  top: 1px;
  width: 2px;
  height: 16px;
}

#crosshair::after {
  left: 1px;
  top: 8px;
  width: 16px;
  height: 2px;
}

#scan-label,
#message {
  position: fixed;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  text-align: center;
  color: #f4ead8;
  text-shadow: 0 2px 16px #000;
  pointer-events: none;
}

#scan-label {
  bottom: 18%;
  min-height: 24px;
  font-size: 15px;
}

#message {
  top: 22%;
  max-width: min(620px, 88vw);
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}

#message.show {
  opacity: 1;
}

#quick-hint {
  position: fixed;
  left: 50%;
  bottom: 8%;
  z-index: 5;
  width: min(760px, calc(100vw - 32px));
  transform: translateX(-50%);
  border: 18px solid transparent;
  border-radius: 10px;
  padding: 4px 18px;
  background: rgba(7, 8, 7, 0.78);
  border-image: url("./assets/ui/dialogue-frame.png") 190 fill / 18px / 0 stretch;
  color: #d8cdbb;
  text-align: center;
  line-height: 1.45;
  text-shadow: 0 2px 12px #000;
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: opacity 180ms ease;
}

#quick-hint.muted {
  opacity: 0;
}

#help-panel {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 5, 4, 0.72);
}

#help-panel[hidden] {
  display: none;
}

.help-box {
  width: min(620px, 94vw);
  max-height: min(760px, 92vh);
  overflow: auto;
  border: 26px solid transparent;
  border-image: url("./assets/ui/dialogue-frame.png") 190 fill / 26px / 0 stretch;
  border-radius: 8px;
  padding: 22px;
  background: rgba(13, 15, 14, 0.9);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.help-box h2 {
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: 0;
}

.help-box ol {
  margin: 0 0 18px;
  padding-left: 24px;
  color: #d9cdbc;
  line-height: 1.65;
}

.help-box p {
  margin: 16px 0;
  color: #c7baa7;
  line-height: 1.6;
}

.controls-grid {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px 12px;
  border-top: 1px solid rgba(229, 213, 182, 0.18);
  border-bottom: 1px solid rgba(229, 213, 182, 0.18);
  padding: 14px 0;
}

.controls-grid span {
  color: #a99e90;
}

.controls-grid strong {
  color: #f3e5ce;
}

#close-help {
  min-width: 110px;
  min-height: 42px;
  padding: 9px 14px;
}

#start-panel {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 34%, rgba(99, 22, 18, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(7, 8, 7, 0.2), rgba(7, 8, 7, 0.8)),
    url("./assets/ui/start-background.png") center / cover no-repeat;
  text-align: center;
}

.start-content {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: clamp(14px, 2.4vw, 22px);
  border: 28px solid transparent;
  border-image: url("./assets/ui/dialogue-frame.png") 190 fill / 28px / 0 stretch;
  background: rgba(6, 7, 6, 0.74);
  border-radius: 8px;
}

.game-title-logo {
  display: block;
  width: min(100%, 680px);
  max-height: min(29vh, 210px);
  margin: -4px auto 10px;
  object-fit: contain;
  filter:
    drop-shadow(0 16px 30px rgba(0, 0, 0, 0.74))
    drop-shadow(0 0 18px rgba(120, 22, 18, 0.5));
}

#start-panel h1 {
  margin: 0 0 16px;
  font-size: clamp(48px, 10vw, 112px);
  line-height: 0.9;
  letter-spacing: 0;
}

#start-panel p {
  margin: 0 0 18px;
  color: #cfc4b2;
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.6;
}

#start-panel .story-lead {
  color: #f0ddbd;
}

.name-field {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  margin: 10px auto 18px;
  color: #d9cdbc;
  text-align: left;
}

.name-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(232, 224, 212, 0.36);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(5, 6, 5, 0.72);
  color: #fff5df;
  font: inherit;
  font-weight: 700;
  outline: none;
}

.name-field input:focus {
  border-color: #d2b56e;
  box-shadow: 0 0 0 3px rgba(210, 181, 110, 0.18);
}

#dialogue-box {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 7dvh, 72px);
  z-index: 11;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 18px;
  width: min(920px, calc(100dvw - 64px));
  min-height: 156px;
  max-height: min(300px, calc(100dvh - 150px));
  transform: translateX(-50%);
  border: 30px solid transparent;
  border-image: url('./assets/ui/dialogue-frame.png') 190 fill / 30px / 0 stretch;
  padding: 18px 22px 20px;
  background: rgba(5, 6, 5, 0.58);
  color: #f0e2c6;
  overflow: hidden;
  text-shadow: 0 2px 10px #000;
}

#dialogue-box[hidden] {
  display: none;
}

.dialogue-speaker {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  padding: 0 4px;
  color: #d7b86e;
  font-weight: 900;
  line-height: 1.35;
}

#dialogue-text {
  grid-column: 1;
  margin: 0;
  padding: 0 4px 4px;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.65;
  color: #f5ecd8;
}

#dialogue-next {
  position: static;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  width: 58px;
  height: 46px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: url("./assets/ui/next-arrow.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

.start-brief {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px auto;
}

.start-brief span {
  border: 1px solid rgba(232, 224, 212, 0.24);
  border-radius: 6px;
  padding: 10px 8px;
  background: rgba(18, 21, 19, 0.62);
  color: #f4ead8;
}

#start-panel .start-tip {
  margin-bottom: 18px;
  color: #aebca8;
  font-size: 15px;
}

button {
  border: 1px solid rgba(240, 220, 184, 0.38);
  border-radius: 6px;
  background: #7d2720;
  color: #fff5e7;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#start-button {
  width: clamp(214px, 25vw, 270px);
}

#touch-controls { position: fixed; inset: 0; z-index: 7; display: none; pointer-events: none; touch-action: none; user-select: none; }
.move-stick { position: absolute; left: 14px; bottom: 14px; width: 126px; height: 148px; display: grid; place-items: center; align-content: end; gap: 5px; pointer-events: auto; touch-action: none; }
.joystick-ring { position: relative; width: 118px; height: 118px; border: 2px solid rgba(225,208,175,.48); border-radius: 50%; background: radial-gradient(circle,rgba(83,90,78,.25) 0 34%,rgba(10,12,11,.72) 36% 100%); box-shadow: inset 0 0 24px rgba(0,0,0,.72),0 10px 28px rgba(0,0,0,.58); }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border: 1px solid rgba(229,209,167,.55); border-radius: 50%; background: radial-gradient(circle at 36% 30%,#77745f,#282b27 64%,#0c0d0c); box-shadow: 0 8px 18px rgba(0,0,0,.72),inset 0 0 10px rgba(255,226,170,.16); transition: transform 55ms linear; }
.move-stick > span,.look-zone > span { color: rgba(240,227,199,.76); font-size: 12px; line-height: 1; text-shadow: 0 2px 5px #000; }
.look-zone { position: absolute; top: 104px; right: 0; bottom: 110px; width: 58vw; display: grid; place-items: center; pointer-events: auto; touch-action: none; border-left: 1px dashed rgba(225,208,175,.11); }
.look-zone > span { padding: 6px 10px; border: 1px solid rgba(225,208,175,.15); border-radius: 4px; background: rgba(6,8,7,.3); opacity: .58; transition: opacity 120ms ease,border-color 120ms ease; }
.look-zone.is-looking > span { opacity: .92; border-color: rgba(225,208,175,.42); }

@media (pointer: coarse), (max-width: 760px) {
  #hud {
    top: 10px;
    left: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
    padding-right: 0;
  }

  .status-line {
    grid-column: 1 / -1;
    padding-right: 78px;
    gap: 6px;
  }

  .status-line span,
  .meters label {
    padding: 6px 8px;
    font-size: 13px;
  }

  .meters {
    grid-column: 1 / -1;
    min-width: 0;
    width: min(100%, 310px);
    gap: 6px;
  }

  #help-button {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 64px;
    min-height: 34px;
    padding: 6px 10px;
  }

  #quick-hint {
    bottom: 174px;
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 10px;
  }

  #message {
    top: 26%;
    font-size: clamp(18px, 6vw, 28px);
  }

  #start-panel {
    align-items: flex-start;
    padding: 10px;
  }

  .start-content {
    width: min(100%, 520px);
    max-height: calc(100dvh - 20px);
    padding: 12px;
  }

  .game-title-logo {
    max-height: 24dvh;
    margin-bottom: 6px;
  }

  #start-panel p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  .start-brief {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 10px auto;
  }

  .start-brief span {
    padding: 7px 8px;
  }

  .name-field {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 8px auto 10px;
    text-align: center;
  }

  #dialogue-box {
    bottom: 194px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: 10px;
    width: calc(100dvw - 20px);
    min-height: 0;
    max-height: calc(100dvh - 292px);
    overflow: hidden;
    border-width: 22px;
    border-image-width: 22px;
    padding: 12px 14px 14px;
  }

  #dialogue-text {
    grid-column: 1;
    padding: 0 2px;
    min-height: 0;
    line-height: 1.55;
  }

  #dialogue-next {
    grid-column: 1;
    grid-row: 3;
    display: block;
    margin-top: 0;
    margin-left: auto;
  }

  #touch-controls { display: block; }

  #scan-label {
    bottom: 214px;
  }
}

@media (max-width: 420px) {
  .move-stick { left: 8px; bottom: 8px; width: 108px; height: 128px; }
  .joystick-ring { width: 100px; height: 100px; }
  .joystick-knob { width: 48px; height: 48px; margin: -24px; }

  #quick-hint {
    bottom: 152px;
    width: calc(100vw - 20px);
  }

  #dialogue-box {
    bottom: 148px;
    max-height: calc(100dvh - 270px);
  }

  #scan-label {
    bottom: 164px;
  }
}

@media (max-height: 680px) {
  .game-title-logo {
    max-height: 20dvh;
  }

  #start-panel p {
    font-size: 13px;
    line-height: 1.42;
  }

  .name-field input {
    min-height: 36px;
  }

  #start-button {
    min-height: 42px;
    padding: 9px 18px;
  }

  .help-box {
    max-height: calc(100dvh - 24px);
    padding: 16px;
  }
}

/* Cinematic action controls and scene treatment */
#game-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 150px 38px rgba(0, 0, 0, 0.58);
}

#action-controls {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}

#game-shell.game-running #action-controls {
  opacity: 1;
  visibility: visible;
}

.image-action {
  position: relative;
  width: 104px;
  height: 104px;
  min-width: 104px;
  min-height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.82));
  pointer-events: auto;
  transition: transform 120ms ease, filter 120ms ease, opacity 160ms ease;
}

.image-action-attack {
  background-image: url(./assets/ui/action-attack-image2.png);
}

.image-action-match {
  background-image: url(./assets/ui/action-match-image2.png);
}

.image-action-recharge {
  background-image: url(./assets/ui/action-recharge-image2.png);
}

.image-action-heal {
  background-image: url(./assets/ui/action-heal-image2.png);
}

.image-action:hover,
.image-action:focus-visible {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 15px 24px rgba(0, 0, 0, 0.9)) brightness(1.08);
  outline: none;
}

.image-action:active {
  transform: translateY(1px) scale(0.96);
}

.image-action span {
  position: absolute;
  left: 50%;
  bottom: -2px;
  min-width: 58px;
  transform: translateX(-50%);
  border: 1px solid rgba(220, 190, 128, 0.42);
  border-radius: 4px;
  padding: 3px 8px;
  background: rgba(7, 7, 6, 0.88);
  color: #f1e3c8;
  font-size: 14px;
  line-height: 1.2;
  text-shadow: 0 2px 5px #000;
}

.image-action small {
  position: absolute;
  top: 8px;
  right: 1px;
  min-width: 25px;
  border: 1px solid rgba(229, 212, 177, 0.32);
  border-radius: 4px;
  padding: 2px 5px;
  background: rgba(8, 9, 8, 0.82);
  color: #d5c6ab;
  font-size: 10px;
  line-height: 1.2;
}

.image-action.is-unavailable {
  opacity: 0.46;
  filter: grayscale(0.72) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.72));
}

.image-action-heal.is-urgent {
  animation: heal-ready 1.15s ease-in-out infinite;
}

.image-action-match.is-burning {
  opacity: 1;
  animation: match-burning 280ms ease-in-out infinite alternate;
}

@keyframes match-burning {
  to { filter: drop-shadow(0 0 20px rgba(255, 170, 62, 0.82)) brightness(1.12); }
}

.image-action-recharge.is-charging { opacity:1; animation:recharge-pulse 520ms ease-in-out infinite alternate; }
@keyframes recharge-pulse { to { filter:drop-shadow(0 0 22px rgba(90,190,255,.92)) brightness(1.18); } }

@keyframes heal-ready {
  50% { filter: drop-shadow(0 0 18px rgba(184, 50, 39, 0.78)) brightness(1.1); }
}

.scan-action {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
}

.scan-action small {
  color: #cbbda5;
  font-size: 10px;
}

#dialogue-box {
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.74), inset 0 0 42px rgba(78, 33, 19, 0.14);
}

#dialogue-box.story-critical {
  background: rgba(18, 8, 7, 0.8);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.86), inset 0 0 48px rgba(128, 32, 22, 0.24);
}

#dialogue-box.story-critical .dialogue-speaker {
  color: #e3a172;
}

@media (min-width: 761px) {
  #dialogue-box {
    width: min(900px, calc(100dvw - 250px));
  }
}

@media (pointer: coarse), (max-width: 760px) {
  #touch-controls {
    right: 0;
    width: auto;
    gap: 0;
  }

  #action-controls {
    right: 8px;
    bottom: 8px;
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 5px;
  }

  .image-action {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }

  .image-action span {
    bottom: -1px;
    min-width: 46px;
    padding: 2px 5px;
    font-size: 12px;
  }

  .image-action small {
    top: 3px;
    right: -2px;
    font-size: 8px;
  }
}

@media (max-width: 420px) {
  #action-controls { grid-template-columns: repeat(3, 54px); }

  .image-action {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
  }

  .image-action small {
    display: none;
  }
}
.help-intro,.help-warning{color:#e8dbc2}.help-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.help-steps article{display:grid;grid-template-columns:30px 1fr;gap:3px 8px;padding:10px;border-left:2px solid #8f3c31;background:rgba(255,255,255,.035)}.help-steps b{grid-row:1/3;color:#d6a456;font-size:24px}.help-steps span{color:#cfc4af;font-size:13px;line-height:1.45}@media (max-width:760px){.help-steps{grid-template-columns:1fr}.help-box{max-height:92dvh;overflow:auto}}

#ambient-caption{position:fixed;top:118px;left:50%;z-index:13;width:min(560px,calc(100vw - 32px));transform:translateX(-50%);display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:9px 13px;border-left:3px solid #c39a52;background:rgba(8,9,8,.84);box-shadow:0 8px 26px rgba(0,0,0,.72);color:#eee2c7;pointer-events:none;backdrop-filter:blur(4px)}#ambient-caption[hidden]{display:none}#ambient-caption strong{color:#e4b95e;white-space:nowrap}#ambient-caption span{line-height:1.45}@media(max-width:760px){#ambient-caption{top:142px;width:calc(100vw - 20px);grid-template-columns:1fr;padding:7px 10px;font-size:13px}}

#game-shell,#game-shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#game-shell img{-webkit-user-drag:none;user-drag:none}#game-shell input,#game-shell textarea,#game-shell [contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}


/* Cinematic illustrated ending */
.ending-visual {
  display: none;
  width: 100%;
  margin: 0 auto 16px;
}
.ending-visual img {
  display: block;
  width: 100%;
  max-height: 48dvh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(205, 176, 112, 0.46);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72);
}
#start-panel.ending .start-content {
  width: min(1040px, calc(100vw - 32px));
}
#start-panel.ending .game-title-logo {
  display: none;
}
#start-panel.ending .ending-visual {
  display: block;
}
#start-panel.ending .story-lead {
  font-size: clamp(16px, 2vw, 22px);
}
@media (max-width: 760px) {
  #start-panel.ending .start-content {
    width: min(100%, 620px);
  }
  .ending-visual img {
    max-height: 36dvh;
    object-fit: contain;
    background: #050605;
  }
}
@media (max-height: 680px) {
  .ending-visual img {
    max-height: 30dvh;
  }
}

.anomaly-list {
  margin: 12px 0 16px;
  border: 1px solid rgba(210, 181, 110, 0.32);
  padding: 10px 12px;
  background: rgba(7, 9, 8, 0.56);
}

.anomaly-list summary {
  cursor: pointer;
  color: #e0c98b;
  font-weight: 800;
}

.anomaly-list ol {
  margin: 10px 0 0;
  padding-left: 24px;
  line-height: 1.65;
  color: #e8dfce;
}
/* Three-beat cinematic introduction */
.intro-story {
  display: grid;
  justify-items: center;
  width: min(100%, 760px);
  min-height: 230px;
  margin: 0 auto 8px;
}
#start-panel:not(.ending) .start-content {
  width: min(760px, calc(100vw - 32px));
}
#start-panel:not(.ending) #intro-story-text {
  width: 100%;
  min-height: 6.6em;
  margin: 0;
  color: #f2dfbd;
  font-size: clamp(20px, 2.25vw, 28px);
  line-height: 1.72;
  text-align: left;
  text-wrap: pretty;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.92);
}
#start-panel.is-typing #intro-story-text::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.18em;
  border-right: 2px solid #d9b96c;
  vertical-align: -0.14em;
  animation: intro-caret 0.82s steps(1) infinite;
}
.intro-next,
#start-button {
  box-sizing: border-box;
  width: clamp(190px, 23vw, 238px);
  aspect-ratio: 1557 / 553;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  border: 0;
  border-radius: 0;
  background: transparent url("./assets/ui/intro-button-image2.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.64));
  transition: filter 150ms ease, transform 150ms ease;
}
.intro-next {
  margin-top: 12px;
}
.intro-next:hover,
.intro-next:focus-visible,
#start-button:hover,
#start-button:focus-visible {
  border: 0;
  outline: none;
  filter: brightness(1.12) drop-shadow(0 13px 24px rgba(0, 0, 0, 0.72));
  transform: translateY(-1px);
}
.intro-next span {
  margin-right: 12px;
}
.intro-next b {
  color: #e0b557;
  font-size: 28px;
  line-height: 0;
  vertical-align: -2px;
}
.intro-next.is-ready {
  filter: brightness(1.08) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.66));
}
#start-panel.intro-ready .name-field,
#start-panel.intro-ready .start-brief,
#start-panel.intro-ready .start-tip,
#start-panel.intro-ready #start-button {
  animation: intro-reveal 0.42s ease-out both;
}
#start-panel.intro-ready .start-brief { animation-delay: 0.08s; }
#start-panel.intro-ready .start-tip { animation-delay: 0.14s; }
#start-panel.intro-ready #start-button { animation-delay: 0.2s; }
@keyframes intro-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes intro-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .intro-story {
    min-height: 200px;
  }
  #start-panel:not(.ending) #intro-story-text {
    min-height: 7.2em;
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.62;
  }
  .intro-next {
    margin-top: 6px;
  }
}
@media (max-height: 680px) {
  .intro-story {
    min-height: 150px;
  }
  #start-panel:not(.ending) #intro-story-text {
    min-height: 5.8em;
    font-size: 17px;
    line-height: 1.5;
  }
  .game-title-logo {
    max-height: 17dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  #start-panel.is-typing #intro-story-text::after,
  #start-panel.intro-ready .name-field,
  #start-panel.intro-ready .start-brief,
  #start-panel.intro-ready .start-tip,
  #start-panel.intro-ready #start-button {
    animation: none;
  }
}

/* Full-screen typewriter ending */
#start-panel.ending {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #020302;
  text-align: left;
}
#start-panel.ending .start-content {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #020302;
}
#start-panel.ending .game-title-logo,
#start-panel.ending #intro-story,
#start-panel.ending .name-field,
#start-panel.ending .start-brief,
#start-panel.ending .start-tip { display: none !important; }
#start-panel.ending .ending-visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020302;
}
#start-panel.ending .ending-visual img {
  position: absolute;
  inset: -1.5%;
  display: block;
  width: 103%;
  height: 103%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: scale(1.025);
  transition: opacity 760ms ease, transform 8s ease-out;
}
#start-panel.ending .ending-visual.is-transitioning img {
  opacity: 0;
  transform: scale(1.075);
}
.ending-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0, rgba(0,0,0,.3) 31%, transparent 58%), linear-gradient(0deg, rgba(0,0,0,.58), transparent 42%);
  pointer-events: none;
}
.ending-visual[data-corner="right"] .ending-vignette {
  transform: scaleX(-1);
}
.ending-caption {
  position: absolute;
  left: clamp(26px, 6vw, 108px);
  bottom: clamp(70px, 12dvh, 132px);
  z-index: 2;
  width: min(620px, 42vw);
  padding-left: 0;
  border-left: 0;
  color: #f2e8d5;
  text-shadow: 0 3px 18px rgba(0,0,0,.95);
}
.ending-visual[data-corner="right"] .ending-caption {
  right: clamp(26px, 6vw, 108px);
  left: auto;
}
.ending-caption strong {
  display: block;
  margin-bottom: 12px;
  color: #d2aa63;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 800;
}
#start-panel.ending .ending-caption p {
  min-height: 3.3em;
  margin: 0;
  color: #f3ead9;
  font-size: clamp(22px, 2.2vw, 38px);
  line-height: 1.55;
  font-weight: 650;
}
.ending-caption.is-typing p::after {
  content: none;
  display: inline-block;
  width: 2px;
  height: .9em;
  margin-left: 5px;
  background: #d8b56c;
  vertical-align: -.08em;
  animation: ending-cursor .76s steps(1) infinite;
}
@keyframes ending-cursor { 50% { opacity: 0; } }
.ending-progress {
  position: absolute;
  right: clamp(24px, 4vw, 62px);
  bottom: 30px;
  z-index: 3;
  display: none;
  gap: 8px;
}
.ending-progress i { width: 28px; height: 2px; background: rgba(255,255,255,.22); }
.ending-progress i.is-active { background: #d1a75d; }
#start-panel.ending #start-button {
  position: fixed;
  right: clamp(24px, 5vw, 84px);
  bottom: clamp(26px, 5dvh, 56px);
  z-index: 5;
  min-width: 220px;
  background: rgba(82, 24, 20, .9);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px);
}
#start-panel.ending.ending-complete #start-button {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}
@media (max-width: 760px) {
  #start-panel.ending .ending-visual img { object-position: center; }
  #start-panel.ending .ending-visual[data-slide="2"] img { object-position: 24% center; }
  .ending-caption,
  .ending-visual[data-corner="right"] .ending-caption {
    right: 18px;
    bottom: 92px;
    left: 18px;
    width: auto;
    padding-left: 0;
  }
  #start-panel.ending .ending-caption p { min-height: 4.8em; font-size: clamp(18px, 5vw, 25px); line-height: 1.48; }
  .ending-progress { right: 18px; bottom: 22px; }
  #start-panel.ending #start-button { right: 18px; bottom: 18px; min-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  #start-panel.ending .ending-visual img { transition-duration: 1ms; transform: none; }
  .ending-caption.is-typing p::after { animation: none; }
}


/* Story-driven player death */
#death-panel { position:fixed; inset:0; z-index:40; display:grid; place-items:center; overflow:hidden; padding:clamp(24px,6vw,86px); background:#050303 url("./assets/ui/ending-204-image2.png") center/cover no-repeat; color:#f2e7d4; opacity:0; transition:opacity 700ms ease; }
#death-panel[hidden] { display:none; }
#death-panel.is-visible { opacity:1; }
#death-panel::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,2,2,.95) 0,rgba(8,3,3,.8) 43%,rgba(8,3,3,.36) 72%,rgba(3,2,2,.82) 100%),linear-gradient(0deg,rgba(2,1,1,.92),transparent 58%); }
.death-film { position:absolute; inset:0; background:rgba(49,4,4,.12); box-shadow:inset 0 0 18vw rgba(0,0,0,.92); animation:death-breath 3.8s ease-in-out infinite; }
.death-record { position:relative; z-index:1; width:min(690px,92vw); margin-right:auto; padding:8px 0 10px; border:0; text-align:left; text-shadow:0 3px 16px #000; }
.death-status { margin:0 0 12px; color:#d09573; font-size:clamp(13px,1.2vw,17px); font-weight:800; }
#death-title-heading { margin:0 0 22px; color:#f1e5d0; font-size:clamp(36px,5.2vw,70px); line-height:1.08; font-weight:800; }
#death-story { min-height:9.2em; margin:0; color:#e5dac6; font-size:clamp(17px,1.8vw,24px); line-height:1.8; white-space:pre-line; text-wrap:pretty; }
#death-story::after { content:""; display:inline-block; width:2px; height:.9em; margin-left:5px; background:#bc7453; vertical-align:-.08em; animation:death-caret .8s steps(1) infinite; }
.death-actions { display:flex; gap:12px; margin-top:28px; opacity:0; transform:translateY(10px); }
.death-actions[hidden] { display:none; }
.death-actions.is-ready { opacity:1; transform:translateY(0); transition:opacity .55s ease,transform .55s ease; }
.death-actions button { min-width:176px; min-height:62px; border:0; border-radius:0; padding:13px 28px 16px; background:transparent url("./assets/ui/death-action-button-image2.png") center / 100% 100% no-repeat; color:#fff2d7; font-size:18px; font-weight:900; cursor:pointer; text-shadow:0 2px 8px #000,0 0 10px rgba(226,176,90,.32); filter:drop-shadow(0 8px 14px rgba(0,0,0,.62)); }
#death-retry { color:#fff4df; }
.death-actions button:hover,.death-actions button:focus-visible { outline:none; transform:translateY(-1px); filter:drop-shadow(0 10px 18px rgba(0,0,0,.72)) brightness(1.12); }
@keyframes death-breath { 0%,100%{opacity:.72} 50%{opacity:1} }
@keyframes death-caret { 50%{opacity:0} }
@media (max-width:680px) {
  #death-panel { align-items:end; padding:28px 20px 34px; background-position:58% center; }
  .death-record { width:100%; padding-left:16px; }
  #death-title-heading { margin-bottom:14px; font-size:clamp(34px,10vw,48px); }
  #death-story { min-height:11.8em; font-size:16px; line-height:1.62; }
  .death-actions { display:grid; grid-template-columns:1fr 1fr; }
  .death-actions[hidden] { display:none; }
  .death-actions button { min-width:0; width:100%; font-size:15px; }
}
@media (max-height:650px) and (orientation:landscape) {
  #death-panel { padding:18px 34px; }
  #death-title-heading { margin-bottom:10px; font-size:38px; }
  #death-story { min-height:7.4em; font-size:15px; line-height:1.5; }
  .death-actions { margin-top:14px; }
}
@media (prefers-reduced-motion:reduce) {
  #death-panel,.death-film,#death-story::after,.death-actions { animation:none; transition-duration:1ms; }
}

#start-panel [hidden] { display: none !important; }


#damage-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 58, 46, 0.28), rgba(170, 0, 0, 0.62) 42%, rgba(42, 0, 0, 0.92) 100%),
    linear-gradient(90deg, rgba(190, 0, 0, 0.62), transparent 22%, transparent 78%, rgba(190, 0, 0, 0.62));
  mix-blend-mode: screen;
  transition: opacity 260ms ease-out;
}

#damage-flash.is-active {
  transition-duration: 90ms;
}

.image-action.is-cooling { opacity:.78; filter:grayscale(.18) brightness(.78); }
.image-action.is-cooling span { font-size:clamp(11px,1.8vw,15px); }

#floor-transition-flash {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: clamp(28px, 8vw, 120px);
  background: radial-gradient(circle at center, rgba(255, 40, 22, .94), rgba(96, 0, 0, .98) 54%, #180000 100%);
  color: #fff2df;
  font-size: clamp(24px, 4vw, 58px);
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 3px 18px #000, 0 0 26px rgba(255, 202, 130, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}
#floor-transition-flash.is-visible { opacity: 1; }
#weapon { display: none !important; }


@media (pointer: fine) {
  #game-shell.game-running canvas,
  #game-shell.game-running #look-zone {
    cursor: url("./assets/ui/inspect-hand-cursor-image2.png") 45 3, pointer;
  }
  #game-shell.game-running button,
  #game-shell.game-running input,
  #game-shell.game-running .move-stick,
  #game-shell.game-running #action-controls,
  #game-shell.game-running #hud,
  #game-shell.game-running #dialogue-box,
  #game-shell.game-running #help-panel {
    cursor: auto;
  }
}

@media (pointer: coarse), (max-width: 900px) {
  #game-shell.game-running canvas,
  #game-shell.game-running #look-zone {
    cursor: auto;
  }
}