* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0e1a;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #f0e6d2;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

button, .inventory-panel, .inv-body, .credits-content {
  touch-action: manipulation;
}

.inv-body {
  touch-action: pan-y;
}

/* Screens */
.screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #140e22 0%, #0c141c 48%, #1a2a22 100%);
  overflow: auto;
}

.screen.hidden,
.hidden {
  display: none !important;
}

.title-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 150, 176, 0.38), transparent 42%),
    radial-gradient(ellipse at 50% 18%, rgba(180, 90, 40, 0.34), transparent 52%),
    radial-gradient(ellipse at 80% 80%, rgba(28, 70, 64, 0.22), transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(48, 40, 88, 0.2), transparent 46%),
    #16202c;
  pointer-events: none;
  overflow: hidden;
}
#title-screen .title-bg {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 186, 110, 0.42), transparent 40%),
    radial-gradient(ellipse at 50% 28%, rgba(255, 110, 40, 0.28), transparent 52%),
    radial-gradient(ellipse at 78% 84%, rgba(90, 36, 16, 0.4), transparent 48%),
    radial-gradient(ellipse at 16% 76%, rgba(48, 22, 12, 0.36), transparent 46%),
    #1a120e;
}
.title-bg::after {
  content: "";
  position: absolute;
  inset: -20% 0 0;
  background-image:
    radial-gradient(circle, rgba(255, 186, 96, 0.95) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 120, 48, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 214, 150, 0.7) 0 1.2px, transparent 2.1px);
  background-size: 160px 220px, 220px 180px, 130px 240px;
  background-repeat: repeat;
  animation: ash-lift 16s linear infinite;
  opacity: 0.72;
  pointer-events: none;
}
@keyframes ash-lift {
  from { transform: translateY(8%); }
  to { transform: translateY(-18%); }
}
@media (prefers-reduced-motion: reduce) {
  .title-bg::after,
  .title-core { animation: none; }
}
body.still-motion .title-bg::after,
body.still-motion .title-core,
body.still-motion .hit-float.show,
body.still-motion .combat-ui.hit,
body.still-motion .combat-ui.hit::after,
body.still-motion .combat-ui.juice-cleave,
body.still-motion .combat-ui.juice-channel,
body.still-motion .combat-ui.juice-aim,
body.still-motion .combat-ui.juice-plasma,
body.still-motion .combat-ui.juice-steam,
body.still-motion .combat-ui.juice-storm,
body.still-motion .combat-ui.juice-magma,
body.still-motion .combat-ui.juice-glass,
body.still-motion .encounter-flash.active {
  animation: none;
}

.title-mark {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  pointer-events: none;
}
.title-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(232, 161, 90, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 140, 60, 0.35), inset 0 0 8px rgba(255, 200, 120, 0.28);
}
.title-core {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe7b0, #e85a28 62%, #6a1808);
  box-shadow: 0 0 10px rgba(255, 120, 40, 0.8);
  animation: title-pulse 2.8s ease-in-out infinite;
}
.title-bottle {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 10px;
  height: 18px;
  margin-left: -5px;
  border: 1.5px solid rgba(212, 176, 112, 0.9);
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 230, 180, 0.2), rgba(80, 40, 20, 0.4));
}
.title-mark::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe7b0, #e85a28);
  box-shadow: 0 0 8px rgba(255, 140, 60, 0.85);
  pointer-events: none;
}
.title-bottle::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -5px;
  width: 6px;
  height: 4px;
  border: 1.5px solid rgba(212, 176, 112, 0.9);
  border-bottom: none;
  box-sizing: border-box;
}
@keyframes title-pulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.12); opacity: 1; }
}

.screen > .title-content {
  position: relative;
  text-align: center;
  padding: 24px 20px 32px;
  z-index: 1;
  max-width: 640px;
  margin: 16px;
  border: 2px solid rgba(212, 176, 112, 0.72);
  border-radius: 2px;
  background: rgba(12, 10, 9, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.32);
}
#title-screen > .title-content {
  border: 2px solid rgba(255, 186, 110, 0.94);
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 214, 160, 0.06) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(90, 48, 24, 0.1) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 214, 168, 0.28), rgba(255, 168, 88, 0.08) 24%, transparent 46%),
    linear-gradient(168deg, rgba(74, 52, 38, 0.94) 0%, rgba(44, 30, 22, 0.92) 48%, rgba(22, 16, 12, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.55),
    inset 0 0 0 1px rgba(120, 58, 22, 0.55),
    inset 0 0 28px rgba(255, 120, 48, 0.14),
    0 0 0 1px rgba(255, 140, 60, 0.45),
    0 0 22px rgba(255, 120, 48, 0.4),
    0 18px 36px rgba(0, 0, 0, 0.5);
}

.wake-host {
  margin: 8px auto 0;
  max-width: 36ch;
  color: #c4b8a4;
  font-size: 0.88rem;
  line-height: 1.4;
}

.eyebrow {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: #c4a574;
  margin-bottom: 8px;
}

.game-title {
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  font-size: clamp(2.6rem, 10vw, 4.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #ffe7b0 0%, #e8a15a 42%, #a84832 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}

.title-rule {
  width: 7.5rem;
  height: 2px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, #e8a15a, transparent);
}

.wake-confirm {
  margin: 10px auto 4px;
  max-width: 26rem;
  padding: 10px 12px 12px;
  border: 1px solid rgba(224, 196, 138, 0.45);
  background: rgba(28, 16, 12, 0.72);
  color: #f3e0c0;
  font-size: 0.92rem;
  line-height: 1.35;
}
.wake-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.wake-actions .btn {
  margin-top: 0;
  min-height: 44px;
}

.screen-title {
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: #ffe7b0;
  font-weight: 600;
  margin-bottom: 8px;
}

.game-title.defeat {
  background: linear-gradient(180deg, #e8c4b0, #8c3030);
  -webkit-background-clip: text;
  background-clip: text;
}

.subtitle {
  font-size: clamp(0.95rem, 3.4vw, 1.12rem);
  color: #c9d0e0;
  margin-bottom: 6px;
  line-height: 1.45;
}

.title-tag {
  margin: 0 auto 12px;
  max-width: 34ch;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: #d5e4f0;
  line-height: 1.35;
}

.tease {
  font-size: 0.92rem;
  color: #b7a48e;
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 46ch;
}

.path-lead {
  margin-bottom: 18px;
}

.hint {
  margin-top: 22px;
  font-size: 0.8rem;
  color: #7d8aa3;
  line-height: 1.45;
}

#credits-screen {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 120, 48, 0.18), transparent 46%),
    linear-gradient(180deg, #120c0a 0%, #0e1218 58%, #16100c 100%);
}

#credits-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255, 90, 24, 0.9) 0 1.15px, transparent 1.7px),
    radial-gradient(circle, rgba(213, 228, 242, 0.5) 0 1px, transparent 1.55px);
  background-size: 148px 186px, 214px 164px;
  background-position: 18px 28px, 78px 96px;
}

.credits-content {
  text-align: left;
  max-width: 40rem;
}

.credits-content p {
  margin-bottom: 22px;
  line-height: 1.72;
  color: #e4ddd2;
}

.credits-note {
  color: #a89880 !important;
  font-size: 0.92rem;
}

.credits-thanks {
  color: #f6ead6 !important;
  font-size: 1.08rem;
  line-height: 1.65;
  background: rgba(28, 16, 10, 0.88);
  border: 1px solid rgba(255, 154, 72, 0.62);
  padding: 18px 18px 16px;
  margin-top: 8px;
  box-shadow: inset 0 0 0 1px rgba(213, 228, 242, 0.16);
}

.path-content {
  width: min(920px, 100%);
}

.path-choices {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

.path-choice {
  text-align: left;
  align-items: flex-start;
  flex-direction: column;
  line-height: 1.35;
  border-left: 3px solid #e8c48a;
}

.path-choice small {
  display: block;
  font-weight: 450;
  color: #b7c4d6;
  margin-top: 4px;
  font-size: 0.86rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(212, 176, 112, 0.45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(28, 26, 24, 0.96), rgba(14, 13, 12, 0.98));
  color: #f0e6d2;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
}

.btn:active {
  background: rgba(48, 36, 24, 0.98);
}

.btn:focus-visible {
  outline: 1px solid #ffe0a0;
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(180deg, #6a4028, #3a2218);
  border-color: #ffe0a0;
  color: #ffe7c2;
  letter-spacing: 0.04em;
}

.btn-quiet {
  margin-top: 10px;
  background: transparent;
  box-shadow: none;
  border-color: rgba(180, 170, 150, 0.35);
  color: #c4b8a4;
  min-height: 40px;
}

.btn-xl {
  padding: 8px 28px;
  min-height: 38px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-small {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

.btn.is-on,
.btn-small.is-on {
  border-color: #ffe0a0;
  color: #ffe0a0;
}

.btn-menu {
  width: 100%;
  font-size: 0.84rem;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.btn-menu .cmd { pointer-events: none; }
.btn-menu .meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  pointer-events: none;
}

.pc-key {
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  color: #e0c48a;
  border: 1px solid rgba(212, 176, 112, 0.4);
  background: rgba(0, 0, 0, 0.35);
  padding: 0 5px;
  border-radius: 2px;
  pointer-events: none;
}

.btn-menu .cost {
  font-size: 0.75rem;
  color: #9ec4d4;
  font-weight: 500;
  text-align: right;
}

.btn-back {
  border-color: rgba(150, 160, 180, 0.35);
  color: #c5cbe0;
}

.btn-hud {
  pointer-events: auto;
  min-width: 72px;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-absorb {
  background: linear-gradient(180deg, #8d3d16, #3f1c10);
  border-color: #ffb067;
  color: #ffe6c8;
}

/* HUD — desktop plate top-left; stick and actions own the bottom */
.hud {
  position: fixed;
  top: 16px;
  bottom: auto;
  left: 16px;
  right: auto;
  width: 340px;
  z-index: 20;
  padding: 10px 12px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  background: rgba(12, 10, 9, 0.88);
  border: 1px solid rgba(212, 176, 112, 0.42);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.hud-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hud-right:empty {
  display: none;
}

.hud-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  flex-shrink: 0;
}

.hud-location {
  font-family: Georgia, Palatino, serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffe1a8;
  letter-spacing: 0.02em;
}

.hud-path,
.hud-row,
.hud-gold,
.hud-hp,
.hud-xp {
  font-size: 0.82rem;
  color: #f0e6d2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.hud-path {
  color: #f0d59a;
  overflow-wrap: anywhere;
}

.hud-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hud-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.el {
  background: rgba(6, 8, 16, 0.55);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.el.fire { color: #ffb089; border-color: rgba(255, 120, 60, 0.35); }
.el.water { color: #9fd4ee; border-color: rgba(80, 170, 220, 0.35); }
.el.lightning { color: #e2d2ff; border-color: rgba(180, 150, 255, 0.35); }
.el.earth { color: #e4c49a; border-color: rgba(196, 150, 80, 0.4); }

.hud-strain {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #e4d5c4;
  text-shadow: 0 1px 3px #000;
}

.hud-scar {
  color: #ffe4dc;
  border: 1px solid rgba(212, 120, 96, 0.7);
  border-radius: 999px;
  padding: 1px 8px;
  background: rgba(62, 18, 14, 0.82);
  font-weight: 700;
}
.hud-scar.quiet {
  color: #e4d5c4;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(20, 14, 12, 0.45);
  font-weight: 600;
}
.hud-scar .debt-num {
  font-variant-numeric: tabular-nums;
  font-size: 1.22em;
  color: #fff6ee;
}
.hud-scar.owed {
  box-shadow: 0 0 0 1px rgba(212, 176, 140, 0.7), 0 0 0 3px rgba(42, 32, 26, 0.92);
}

.strain-wrap {
  width: 88px;
  height: 8px;
  background: #14141c;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.strain-bar {
  height: 100%;
  width: 0%;
  background: #6fbf73;
  border-radius: 4px;
  transition: width 0.25s linear, background 0.25s;
}

.strain-bar.warn { background: #e0a04a; }
.strain-bar.danger { background: #d4543c; }

.hud-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.hud-location-row .hud-location {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.btn-bed {
  flex: none;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.75rem;
}
.hud-quest {
  margin: 4px 0 0;
  padding: 3px 7px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffe6c0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  background: rgba(18, 10, 6, 0.5);
  border-left: 2px solid #e0a04a;
}
.hud-quest::before {
  content: "Quest · ";
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffe0a0;
}
.quest-kicker {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0a04a;
}
.continue-note {
  margin: -6px auto 12px;
  max-width: 28rem;
  color: #e7d3b0;
  font-size: 0.92rem;
  line-height: 1.35;
}
#btn-continue.is-saved {
  background: linear-gradient(180deg, #9a5430 0%, #5a2c18 48%, #2c1610 100%);
  border: 2px solid rgba(255, 214, 160, 0.95);
  color: #fff4e4;
  text-shadow: 0 1px 0 rgba(42, 18, 8, 0.45), 0 0 14px rgba(255, 176, 80, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.9),
    inset 0 -10px 16px rgba(42, 14, 8, 0.45),
    inset 0 0 22px rgba(255, 140, 60, 0.28),
    0 0 0 2px #ffe1a8,
    0 0 16px rgba(255, 176, 80, 0.42),
    0 0 36px rgba(255, 176, 80, 0.22);
}
body:not(.still-motion) #btn-continue.is-saved {
  animation: continueGlow 2.6s ease-in-out infinite;
}
body.still-motion #btn-continue.is-saved {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #btn-continue.is-saved { animation: none; }
}
@keyframes continueGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 244, 220, 0.9),
      inset 0 -10px 16px rgba(42, 14, 8, 0.45),
      inset 0 0 22px rgba(255, 140, 60, 0.28),
      0 0 0 2px #ffe1a8,
      0 0 16px rgba(255, 176, 80, 0.42),
      0 0 36px rgba(255, 176, 80, 0.22);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 250, 236, 1),
      inset 0 -10px 16px rgba(42, 14, 8, 0.35),
      inset 0 0 26px rgba(255, 168, 80, 0.4),
      0 0 0 2px #ffe1a8,
      0 0 24px rgba(255, 176, 80, 0.55),
      0 0 48px rgba(255, 176, 80, 0.28);
  }
}
#title-screen #btn-motion,
#title-screen #btn-ash,
#title-screen #btn-credits,
#title-screen #btn-start,
#title-screen #btn-continue:not(.is-saved) {
  border-width: 2px;
  border-color: rgba(255, 196, 130, 0.9);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.28), 0 0 0 1px rgba(255, 140, 60, 0.35);
}
#title-screen #btn-motion[aria-pressed="true"],
#title-screen #btn-ash[aria-pressed="true"] {
  color: #ffe7c2;
  background: rgba(48, 32, 18, 0.92);
  box-shadow: inset 5px 0 0 #ffe1a8, inset 0 0 0 1px rgba(255, 224, 160, 0.45), 0 0 0 2px rgba(58, 46, 38, 0.95);
}
#title-screen #btn-motion[aria-pressed="false"] {
  color: #a89880;
  background: rgba(16, 12, 10, 0.45);
  box-shadow: inset 0 0 0 2px rgba(42, 36, 30, 0.9), 0 0 0 1px rgba(120, 108, 96, 0.45);
}
#title-screen #btn-start,
#title-screen #btn-continue:not(.is-saved) {
  border-color: rgba(255, 214, 160, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.42),
    0 0 14px rgba(255, 176, 80, 0.32),
    0 0 28px rgba(255, 120, 48, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.28);
}
.inv-quest {
  grid-column: 1 / -1;
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: rgba(42, 28, 16, 0.55);
  border: 1px solid rgba(224, 196, 138, 0.35);
  color: #f0d7a4;
  font-size: 0.86rem;
  line-height: 1.35;
}
.hp-wrap {
  display: inline-block;
  width: 72px;
  height: 8px;
  margin-left: 6px;
  vertical-align: middle;
  background: #1a1010;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  overflow: hidden;
}
.hp-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: #d4543c;
}
.places-panel {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 12px 132px;
  background: rgba(8, 6, 8, 0.42);
  pointer-events: none;
}
.places-panel.hidden { display: none; }
.places-card {
  width: min(420px, 100%);
  max-height: min(58vh, 480px);
  overflow: auto;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(255, 228, 196, 0.14), rgba(255, 196, 130, 0.03) 22%, transparent 40%),
    linear-gradient(168deg, #3c2c22 0%, #261912 52%, #16100e 100%);
  color: #f3e6d4;
  border: 1px solid rgba(255, 214, 168, 0.55);
  border-radius: 16px;
  padding: 16px 16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.42),
    0 0 0 1px rgba(42, 24, 14, 0.72),
    0 0 22px rgba(255, 150, 70, 0.16),
    0 18px 42px rgba(0, 0, 0, 0.5);
}
.places-card h2 {
  margin: 0 0 8px;
  padding-bottom: 8px;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #fff3e2;
  border-bottom: 1px solid rgba(255, 176, 80, 0.38);
}
.places-note { margin: 0 0 10px; color: #d9c4a8; font-size: 0.85rem; }
.places-legend {
  list-style: none;
  margin: 0 0 12px;
  padding: 8px 8px 2px;
  background: rgba(255, 228, 196, 0.05);
  border: 1px solid rgba(255, 206, 150, 0.24);
  border-radius: 10px;
}
.places-legend li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #f4ead8;
  min-width: 0;
}
.places-legend .key {
  flex: 0 0 auto;
  min-width: 4.6rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-align: center;
  color: #1a120c;
  background: #e8c48a;
}
.places-legend .key-absorb { background: #e07a3a; color: #1a0c08; }
.places-legend .key-look { background: #c8d0c4; }
.places-legend .key-closer { background: #f0d8a8; }
.absorb-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  background: radial-gradient(circle at 50% 62%, rgba(255, 186, 110, 0.0), rgba(255, 120, 40, 0.32) 40%, rgba(20, 8, 8, 0) 72%);
}
.absorb-wash.is-on { animation: absorbWash 0.42s ease-out; }
body.still-motion .absorb-wash.is-on { animation: none; opacity: 0.2; }
@keyframes absorbWash {
  0% { opacity: 0.48; }
  100% { opacity: 0; }
}
.btn-absorb.is-ready {
  box-shadow: 0 0 0 3px rgba(255, 176, 80, 0.9);
}
body:not(.still-motion) .btn-absorb.is-ready {
  animation: absorbReady 1.1s ease-in-out infinite;
}
.btn-absorb.is-close {
  box-shadow: 0 0 0 2px rgba(240, 216, 168, 0.55);
}
@keyframes absorbReady {
  50% { box-shadow: 0 0 0 7px rgba(255, 176, 80, 0.2); }
}
.places-card ul { list-style: none; margin: 0 0 12px; padding: 0; }
.places-card li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 220, 180, 0.1);
  font-size: 0.92rem;
  min-width: 0;
  max-width: 100%;
}
#places-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#places-list li {
  position: relative;
  margin: 0;
  padding: 10px 12px 11px;
  border: 1px solid rgba(176, 112, 64, 0.62);
  border-top-color: rgba(255, 220, 176, 0.78);
  border-left-color: rgba(255, 196, 130, 0.7);
  border-right-color: rgba(110, 62, 32, 0.72);
  border-bottom-color: rgba(52, 26, 14, 0.92);
  border-radius: 11px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 214, 160, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(255, 228, 196, 0.14), transparent 38%),
    linear-gradient(168deg, #4a3224 0%, #2a1a12 56%, #140e0c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.4),
    inset 0 -2px 0 rgba(28, 14, 8, 0.55),
    0 0 0 1px rgba(42, 22, 12, 0.4);
}
#places-list li::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  pointer-events: none;
  border: 1px dashed rgba(255, 186, 110, 0.32);
  box-shadow: inset 7px 0 0 -6px rgba(255, 176, 80, 0.4);
}
#places-list li strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.2;
  color: #fff4e4;
}
#places-list li span {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  line-height: 1.35;
  color: #cbb496;
}
#places-list li.is-here {
  margin-top: 0;
  padding: 10px 12px 11px;
  border-color: rgba(255, 186, 110, 0.92);
  background:
    radial-gradient(90% 130% at 0% 40%, rgba(255, 140, 48, 0.4), transparent 62%),
    linear-gradient(168deg, #5c3a22 0%, #2a1a12 58%, #140e0c 100%);
  box-shadow:
    inset 3px 0 0 #ffb050,
    inset 0 1px 0 rgba(255, 236, 214, 0.52),
    0 0 0 1px rgba(255, 176, 80, 0.55),
    0 0 22px rgba(255, 140, 48, 0.5);
}
#places-list li.is-here span { color: #f0d8b8; }
@media (hover: hover) {
  #places-list li:hover {
    border-color: rgba(255, 206, 150, 0.88);
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 214, 0.5),
      0 0 0 1px rgba(255, 186, 110, 0.42),
      0 0 18px rgba(255, 150, 70, 0.4);
  }
  #places-list li.is-here:hover {
    box-shadow:
      inset 3px 0 0 #ffb050,
      inset 0 1px 0 rgba(255, 236, 214, 0.55),
      0 0 0 1px rgba(255, 200, 130, 0.72),
      0 0 28px rgba(255, 150, 60, 0.64);
  }
}
#places-list li.is-here strong { color: #fff8ee; }
#places-list li.is-here strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ffb050;
  box-shadow: 0 0 8px rgba(255, 160, 60, 0.9);
  vertical-align: 1px;
}
.places-card li strong,
.places-card li span,
.places-note,
.places-quest {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
}
.places-quest {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #f0d8b4;
  background: linear-gradient(180deg, rgba(72, 40, 22, 0.5), rgba(24, 14, 10, 0.35));
  border: 1px solid rgba(255, 196, 120, 0.2);
  border-left: 3px solid #ffb050;
  border-radius: 8px;
}
.places-card li span { color: #cbb89e; font-size: 0.8rem; }
.hud-location { cursor: pointer; }
@keyframes hitflash {
  0% { filter: brightness(1.9) saturate(1.4); }
  45% { filter: brightness(1.28) saturate(1.12); }
  100% { filter: none; }
}
@keyframes hitwash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.combat-ui.hit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 78, 24, 0.82), rgba(255, 36, 8, 0.34) 40%, transparent 64%);
  animation: hitwash 0.48s ease-out;
}
.combat-ui.hit:not(.juice-cleave):not(.juice-channel):not(.juice-aim):not(.juice-plasma):not(.juice-steam):not(.juice-storm):not(.juice-magma):not(.juice-glass) { animation: hitflash 0.32s ease-out; }
@keyframes juiceCleave {
  0% { filter: saturate(1.7) brightness(1.42); }
  100% { filter: saturate(1.12); }
}
@keyframes juiceChannel {
  0% { filter: hue-rotate(22deg) brightness(1.36); }
  100% { filter: none; }
}
@keyframes juiceAim {
  0% { filter: contrast(1.35) brightness(1.28); }
  100% { filter: none; }
}
.combat-ui.juice-cleave { animation: juiceCleave 0.38s ease-out; }
.combat-ui.juice-channel { animation: juiceChannel 0.42s ease-out; }
.combat-ui.juice-aim { animation: juiceAim 0.38s ease-out; }
.combat-ui.hit.juice-plasma::after {
  background: radial-gradient(circle at 50% 42%, rgba(255, 220, 70, 0.58), rgba(255, 120, 40, 0.18) 44%, transparent 64%);
}
.combat-ui.hit.juice-steam::after {
  background: radial-gradient(circle at 50% 42%, rgba(232, 244, 255, 0.55), rgba(170, 196, 214, 0.16) 44%, transparent 64%);
}
.combat-ui.hit.juice-storm::after {
  background: radial-gradient(circle at 50% 42%, rgba(90, 170, 255, 0.55), rgba(30, 50, 140, 0.18) 44%, transparent 64%);
}
.combat-ui.hit.juice-magma::after {
  background: radial-gradient(circle at 50% 42%, rgba(255, 58, 16, 0.58), rgba(160, 36, 8, 0.2) 44%, transparent 64%);
}
.combat-ui.hit.juice-glass::after {
  background: radial-gradient(circle at 50% 42%, rgba(214, 255, 246, 0.52), rgba(160, 220, 200, 0.16) 44%, transparent 64%);
}
@keyframes juiceMagma {
  0% { filter: saturate(1.85) sepia(0.28) brightness(1.38); }
  100% { filter: none; }
}
@keyframes juiceGlass {
  0% { filter: saturate(0.35) brightness(1.48); }
  100% { filter: none; }
}
@keyframes juicePlasma {
  0% { filter: saturate(1.7) brightness(1.45); }
  100% { filter: none; }
}
@keyframes juiceSteam {
  0% { filter: saturate(0.45) brightness(1.42); }
  100% { filter: none; }
}
@keyframes juiceStorm {
  0% { filter: hue-rotate(18deg) saturate(1.45) brightness(1.28); }
  100% { filter: none; }
}
.combat-ui.juice-plasma { animation: juicePlasma 0.46s ease-out; }
.combat-ui.juice-steam { animation: juiceSteam 0.46s ease-out; }
.combat-ui.juice-storm { animation: juiceStorm 0.46s ease-out; }
.combat-ui.juice-magma { animation: juiceMagma 0.46s ease-out; }
.combat-ui.juice-glass { animation: juiceGlass 0.46s ease-out; }

.hud-rumor {
  font-size: 0.72rem;
  color: #d9cbb6;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hud-keys {
  font-size: 0.7rem;
  color: #9aa6bd;
  text-shadow: 0 1px 3px #000;
}

/* Joystick — always on in the field (PC mouse drag + touch) */
.joystick-zone {
  position: fixed;
  left: 0;
  bottom: 0;
  width: min(46vw, 240px);
  height: min(42vh, 240px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  touch-action: none;
}

.control-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 225, 168, 0.75);
  text-shadow: 0 1px 4px #000;
  padding-left: 8px;
  pointer-events: none;
}

/* Bottom-right field actions — large click / tap targets */
.onscreen-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  padding-right: max(16px, env(safe-area-inset-right));
  pointer-events: none;
}

.btn-action {
  pointer-events: auto;
  min-width: 112px;
  min-height: 56px;
  padding: 14px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 14px;
  border-width: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

.btn-pack {
  background: linear-gradient(180deg, rgba(40, 48, 72, 0.96), rgba(18, 22, 36, 0.98));
  border-color: rgba(180, 200, 255, 0.45);
  color: #dce6ff;
}

.btn-action.btn-absorb {
  min-width: 132px;
  min-height: 64px;
  font-size: 1.12rem;
  background: linear-gradient(180deg, #8d3d16, #3f1c10);
  border-color: #ffb067;
  color: #ffe6c8;
}

.joystick-base {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(12, 16, 32, 0.42);
  border: 3px solid rgba(255, 214, 160, 0.38);
  position: relative;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
  touch-action: none;
}

.joystick-knob {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 236, 200, 0.95), rgba(176, 120, 62, 0.9));
  border: 2px solid rgba(255, 255, 255, 0.45);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.interact-prompt {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 140px;
  top: auto;
  z-index: 21;
  max-width: 420px;
  background: rgba(12, 10, 9, 0.9);
  border: 1px solid rgba(212, 176, 112, 0.45);
  border-radius: 8px;
  padding: 8px 12px;
  pointer-events: none;
  text-align: center;
}

#interact-title {
  font-weight: 700;
  color: #ffe1a8;
  font-size: 0.92rem;
}

.interact-prompt.ready {
  border-color: rgba(255, 176, 103, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 160, 80, 0.45), 0 8px 24px rgba(0, 0, 0, 0.45);
}

.interact-prompt.ready #interact-title::before {
  content: "Absorb · ";
  color: #ffb067;
}

#interact-detail {
  font-size: 0.8rem;
  color: #d5d0c6;
  line-height: 1.35;
  margin-top: 2px;
}

/* Inventory */
.inventory-panel {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(860px, calc(100% - 36px));
  z-index: 70;
  background:
    repeating-linear-gradient(90deg, rgba(255, 214, 160, 0.05) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(90, 48, 24, 0.09) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 214, 168, 0.2), rgba(255, 168, 88, 0.05) 16%, transparent 34%),
    linear-gradient(168deg, #4a3426 0%, #2c1e16 46%, #16100c 100%);
  border: 2px solid rgba(255, 186, 110, 0.94);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 14px 14px 0 -11px rgba(255, 224, 170, 0.92),
    inset -14px 14px 0 -11px rgba(255, 224, 170, 0.92),
    inset 14px -14px 0 -11px rgba(255, 186, 110, 0.55),
    inset -14px -14px 0 -11px rgba(255, 186, 110, 0.55),
    inset 0 1px 0 rgba(255, 236, 214, 0.58),
    inset 0 0 0 1px rgba(120, 58, 22, 0.62),
    inset 0 0 36px rgba(255, 120, 48, 0.14),
    0 0 0 1px rgba(255, 140, 60, 0.48),
    0 0 26px rgba(255, 120, 48, 0.42),
    0 28px 46px rgba(0, 0, 0, 0.58);
}

.inv-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: max(14px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid rgba(255, 196, 120, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.16), transparent 78%),
    linear-gradient(180deg, #3c2a1e 0%, #241810 100%);
  box-shadow: inset 0 -1px 0 rgba(90, 42, 18, 0.7);
}

.inv-header h2 {
  font-family: Georgia, Palatino, serif;
  font-size: 1.45rem;
  color: #ffe1a8;
}

.inv-sub, .inv-note {
  color: #b7aa9a;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 4px;
}

.inv-body {
  overflow-y: auto;
  padding: 8px 16px 18px;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  align-content: start;
}

.inv-section.inv-stats { grid-column: 1 / -1; }

.inv-section {
  margin: 12px 0 16px;
}

.inv-section h3, .subhead {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e0c48a;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(212, 176, 112, 0.4);
}

.subhead { margin-top: 12px; }

.inv-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inv-card, .equip-card {
  position: relative;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 214, 160, 0.2), transparent 48%),
    linear-gradient(180deg, rgba(255, 228, 196, 0.16), transparent 42%),
    linear-gradient(168deg, #4a3224 0%, #2a1a12 58%, #140e0c 100%);
  border: 1px solid rgba(176, 112, 64, 0.72);
  border-top-color: rgba(255, 220, 176, 0.88);
  border-left-color: rgba(255, 196, 130, 0.78);
  border-right-color: rgba(110, 62, 32, 0.82);
  border-bottom-color: rgba(42, 20, 12, 0.96);
  border-radius: 11px;
  padding: 8px 10px 8px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.45),
    inset 3px 0 0 #e07838,
    inset 0 -2px 0 rgba(28, 14, 8, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.32);
}
.inv-card::after, .equip-card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(255, 220, 170, 0.75);
  border-right: 1px solid rgba(255, 220, 170, 0.75);
  pointer-events: none;
}

.inv-card .name, .equip-card .who {
  font-weight: 700;
  font-size: 0.92rem;
}

.inv-card .desc, .equip-card .line {
  font-size: 0.78rem;
  color: #c9c0b4;
  line-height: 1.35;
  margin-top: 2px;
}

.inv-card .row, .equip-card .line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.equip-card .line {
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(12, 8, 6, 0.42);
  border: 1px solid rgba(255, 196, 130, 0.38);
  border-top-color: rgba(255, 220, 176, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.12);
}

.inv-card .stack {
  flex-shrink: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe1a8;
  border: 1px solid rgba(212, 176, 112, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

body.pack-open .joystick-zone,
body.pack-open .places-panel {
  display: none !important;
  pointer-events: none !important;
}

.party-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.party-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  background:
    linear-gradient(180deg, rgba(255, 228, 196, 0.1), transparent 50%),
    rgba(28, 18, 12, 0.72);
  border-radius: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(176, 112, 64, 0.55);
  border-top-color: rgba(255, 220, 176, 0.7);
  box-shadow: inset 3px 0 0 rgba(224, 120, 56, 0.85);
}
.inv-stats {
  padding: 10px 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(176, 112, 64, 0.62);
  border-top-color: rgba(255, 220, 176, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 214, 160, 0.12), transparent 36%),
    rgba(22, 14, 10, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.28);
}

.party-mini .role {
  font-size: 0.72rem;
  color: #8eb4c8;
}

.path-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-stats p {
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.empty-line {
  color: #8d8478;
  font-size: 0.82rem;
}

/* Encounter */
.encounter-flash {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.encounter-flash.active {
  animation: encounterPulse 0.7s ease-in-out;
}

@keyframes encounterPulse {
  0%, 100% { opacity: 0; }
  15%, 35%, 55% { opacity: 0.92; }
  25%, 45%, 65% { opacity: 0; }
  80% { opacity: 0.88; background: #1a1218; }
}

/* Combat */
.combat-ui {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.combat-ui > * { pointer-events: auto; }

.combat-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
  gap: 8px;
}

.btn-pace {
  pointer-events: auto;
  min-height: 44px;
  min-width: 148px;
}
.btn-pack-motion { justify-self: start; min-height: 44px; }

.combat-held {
  pointer-events: none;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #f6ead8;
  background:
    repeating-linear-gradient(90deg, rgba(255, 176, 80, 0.14) 0 7px, rgba(255, 176, 80, 0.02) 7px 14px),
    linear-gradient(180deg, rgba(72, 36, 16, 0.55), rgba(12, 8, 8, 0.88));
  border: 1px solid rgba(255, 196, 130, 0.62);
  border-radius: 12px;
  padding: 4px 12px;
  max-width: min(92vw, 640px);
  text-align: center;
  line-height: 1.35;
  white-space: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 196, 0.35),
    0 0 14px rgba(255, 120, 48, 0.28),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.turn-order {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
  max-width: min(96vw, 720px);
  overflow-x: auto;
  padding: 6px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 196, 120, 0.18), transparent 58%),
    linear-gradient(90deg, rgba(8, 10, 16, 0.15), rgba(18, 12, 10, 0.92) 10%, rgba(18, 12, 10, 0.92) 90%, rgba(8, 10, 16, 0.15));
  border: 1px solid rgba(255, 210, 160, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.42),
    0 0 16px rgba(255, 120, 48, 0.32);
}

.turn-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe0a0;
  padding-right: 4px;
}

.turn-sep {
  color: #c4a878;
  padding: 0 5px;
  font-size: 0.8rem;
  line-height: 1;
}

.turn-chip {
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.12), transparent 55%),
    rgba(8, 10, 18, 0.88);
  border: 1px solid rgba(255, 220, 170, 0.4);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  color: #e6dcc8;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.2), 0 0 8px rgba(0, 0, 0, 0.28);
}

.turn-chip.ally { border-color: rgba(126, 176, 208, 0.7); }
.turn-chip.nima { border-color: #d4e07a; color: #f7f8d8; background: rgba(28, 36, 12, 0.94); }
.turn-chip.torren { border-color: #e09078; color: #ffe4d8; background: rgba(42, 16, 12, 0.94); }
.turn-chip.foe { border-color: rgba(176, 92, 72, 0.75); }

.combat-ui.dusk-fight .turn-order {
  background: linear-gradient(90deg, rgba(8, 6, 6, 0.2), rgba(12, 8, 8, 0.94) 12%, rgba(12, 8, 8, 0.94) 88%, rgba(8, 6, 6, 0.2));
  border-color: rgba(255, 210, 160, 0.62);
}
.combat-ui.dusk-fight .turn-chip.foe {
  border-color: #ffb090;
  color: #ffe8dc;
  background: rgba(36, 12, 8, 0.96);
}
.combat-ui.dusk-fight .enemy-card {
  background: rgba(10, 6, 6, 0.94);
  border-color: rgba(255, 176, 120, 0.88);
}
.combat-ui.dusk-fight .enemy-card .bar-wrap {
  background: #070506;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 180, 0.55);
}
.combat-ui.dusk-fight .enemy-card .bar-hp {
  background:
    repeating-linear-gradient(90deg, rgba(255, 244, 220, 0.75) 0 1px, rgba(60, 16, 6, 0.4) 1px 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255, 236, 210, 0.45), rgba(0, 0, 0, 0.12)),
    linear-gradient(90deg, #ff6a28, #ffe0a0);
}

.turn-chip.now {
  border-color: #ffe0a0;
  color: #ffe7c2;
  background: rgba(48, 32, 14, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.35);
}
.turn-chip.assist {
  border-color: #f0c070;
  color: #ffe7c0;
  background: rgba(72, 36, 12, 0.94);
  box-shadow: 0 0 0 1px rgba(255, 196, 110, 0.5);
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin: 2px 0 4px;
}

.status-icon {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 1px 7px;
  line-height: 1.45;
  background: rgba(8, 10, 16, 0.9);
  box-shadow: 0 0 8px currentColor;
}

.status-burn { color: #ffc080; background: rgba(92, 28, 8, 0.92); }
.status-stamp { color: #ffe0a0; background: rgba(62, 46, 12, 0.92); }
.status-ash { color: #f0e4d4; background: rgba(48, 36, 28, 0.94); }
.status-air { color: #e4f2ff; background: rgba(18, 36, 52, 0.92); }
.status-licence { color: #ffe7b0; background: rgba(72, 52, 12, 0.96); }
.status-ink { color: #d7e4ff; background: rgba(18, 28, 52, 0.96); }
.status-heat { color: #ffb060; background: rgba(92, 28, 8, 0.96); }
.status-jaw { color: #e4f0c8; background: rgba(28, 40, 18, 0.96); }
.status-wet { color: #c8e4f4; background: rgba(12, 36, 52, 0.96); }
.status-bead { color: #f4e6c0; background: rgba(48, 40, 18, 0.96); }
.status-flare { color: #ffd0a0; background: rgba(72, 28, 8, 0.96); }
.status-salt { color: #d6e8ff; background: rgba(18, 32, 52, 0.96); }
.status-page { color: #f0e6c8; background: rgba(48, 40, 22, 0.96); }
.status-rite { color: #ffc0a0; background: rgba(72, 24, 16, 0.96); }
.status-cry { color: #e4f2ff; background: rgba(18, 36, 52, 0.96); }
.status-steady { color: #d8ffe4; background: rgba(16, 42, 28, 0.96); }
.status-scar { color: #ffd0c0; background: rgba(62, 22, 18, 0.96); }
.status-assist { color: #ffe0b0; background: rgba(72, 36, 12, 0.96); }

.enemy-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}

.enemy-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 140, 70, 0.1), transparent 42%),
    rgba(10, 12, 22, 0.86);
  border: 2px solid rgba(255, 160, 110, 0.62);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 108px;
  text-align: center;
  box-shadow:
    inset 9px 9px 0 -7px rgba(255, 224, 170, 0.95),
    inset -9px 9px 0 -7px rgba(255, 224, 170, 0.95),
    inset 9px -9px 0 -7px rgba(255, 224, 170, 0.7),
    inset -9px -9px 0 -7px rgba(255, 224, 170, 0.7),
    0 0 14px rgba(255, 90, 30, 0.28);
}

.enemy-card.dead { opacity: 0.35; }

.enemy-card .name {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.enemy-card .bar-wrap,
.bar-row .bar-wrap {
  height: 13px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.05)),
    #120e12;
  border: 1px solid rgba(255, 214, 160, 0.62);
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 220, 180, 0.16),
    0 0 8px rgba(255, 120, 48, 0.28);
}

.enemy-card .bar-hp {
  position: relative;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 236, 200, 0.7) 0 1px, rgba(40, 12, 6, 0.45) 1px 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255, 244, 220, 0.42), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, #9a3412, #e0a04a);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, 0.55), 0 0 8px rgba(255, 140, 60, 0.45);
}
.enemy-card .bar-hp::after,
.bar-row .bar-hp::after,
.bar-row .bar-mp::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 1px;
  width: 3px;
  background: #fff6e0;
  box-shadow: 0 0 6px #ffe0a0;
}

.combat-bottom {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  padding: 12px 22px 18px;
  background: linear-gradient(0deg, rgba(10, 8, 8, 0.96) 55%, rgba(10, 8, 8, 0.22) 100%);
  box-shadow: 0 -22px 36px rgba(0, 0, 0, 0.42);
}

.party-panel {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.party-card {
  flex: 1;
  min-width: 140px;
  background:
    linear-gradient(180deg, rgba(255, 210, 160, 0.14), transparent 36%),
    rgba(16, 12, 11, 0.94);
  border: 1px solid rgba(255, 196, 140, 0.62);
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.34),
    inset 0 0 0 1px rgba(255, 160, 90, 0.16),
    0 0 12px rgba(255, 120, 48, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.32);
}

.party-card.active {
  border-color: #ffe0a0;
  border-left: 3px solid #ffe0a0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 160, 0.28),
    0 0 14px rgba(255, 140, 60, 0.32),
    0 8px 16px rgba(0, 0, 0, 0.32);
}

.party-card.dead { opacity: 0.4; }

.party-card .name { font-weight: 700; font-size: 0.86rem; }
.party-card .role { font-size: 0.68rem; color: #9ec0c8; margin-bottom: 4px; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-size: 0.65rem;
}

.bar-row span.label {
  width: 22px;
  color: #b7c0d4;
  flex-shrink: 0;
}

.bar-row .bar-wrap { flex: 1; height: 13px; }
.bar-row .bar-hp {
  position: relative;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 248, 230, 0.72) 0 1px, rgba(8, 28, 16, 0.42) 1px 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(0, 0, 0, 0.16)),
    linear-gradient(90deg, #1e6b45, #8ed07a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 8px rgba(120, 220, 140, 0.35);
}
.bar-row .bar-mp {
  position: relative;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(232, 246, 255, 0.75) 0 1px, rgba(8, 20, 36, 0.42) 1px 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(0, 0, 0, 0.16)),
    linear-gradient(90deg, #245a78, #8ec4e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 8px rgba(120, 190, 230, 0.35);
}
.bar-row .nums {
  font-size: 0.65rem;
  color: #d5dbe8;
  min-width: 52px;
  text-align: right;
}

.menu-panel {
  background:
    linear-gradient(180deg, rgba(255, 186, 110, 0.16), transparent 28%),
    rgba(16, 12, 10, 0.96);
  border: 2px solid rgba(255, 196, 130, 0.9);
  border-radius: 12px;
  padding: 8px;
  width: 280px;
  flex: 0 0 280px;
  min-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, 0.48),
    inset 0 0 0 1px rgba(90, 42, 16, 0.72),
    0 0 0 1px rgba(255, 140, 60, 0.34),
    0 0 18px rgba(255, 120, 48, 0.34),
    0 16px 28px rgba(0, 0, 0, 0.5);
}
.menu-panel .btn-menu {
  border-radius: 8px;
  border-color: rgba(255, 196, 130, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 214, 170, 0.22), transparent 48%),
    linear-gradient(180deg, #3a2418, #140e0c);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.45),
    inset 4px 0 0 #ff9a48,
    0 0 12px rgba(255, 120, 48, 0.22);
}
.menu-panel .btn-back {
  box-shadow:
    inset 0 1px 0 rgba(220, 228, 240, 0.28),
    inset 4px 0 0 rgba(180, 190, 210, 0.7);
}
.menu-panel .btn-target {
  box-shadow:
    inset 8px 8px 0 -6px #ffe0a0,
    inset -8px 8px 0 -6px #ffe0a0,
    inset 8px -8px 0 -6px #ffe0a0,
    inset -8px -8px 0 -6px #ffe0a0,
    0 0 10px rgba(255, 90, 24, 0.28);
}
#target-menu {
  position: relative;
  padding: 10px 8px 6px;
  border-radius: 10px;
  background: rgba(8, 6, 6, 0.45);
  box-shadow:
    inset 12px 12px 0 -9px #ffe0a0,
    inset -12px 12px 0 -9px #ffe0a0,
    inset 12px -12px 0 -9px #ffe0a0,
    inset -12px -12px 0 -9px #ffe0a0,
    0 0 16px rgba(255, 90, 24, 0.32);
}
.combat-held {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.spark-bars {
  display: flex;
  gap: 4px;
  width: min(100%, 280px);
}
.spark-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: #1a100c;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 160, 0.4), 0 0 6px rgba(255, 120, 48, 0.2);
}
.spark-pip { display: block; height: 100%; }
.spark-pip.fire { background: linear-gradient(90deg, #ff5a18, #ffe0a0); }
.spark-pip.water { background: linear-gradient(90deg, #245a78, #d4f0ff); }
.spark-pip.bolt { background: linear-gradient(90deg, #c8a020, #fff2b0); }
.spark-pip.earth { background: linear-gradient(90deg, #3a6a28, #d4e88a); }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.span-2 { grid-column: 1 / -1; }

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-label {
  font-size: 0.82rem;
  color: #ffe0a0;
  margin: 0;
}

.combat-log {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 210, 160, 0.25);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  max-width: min(92%, 520px);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 45;
  line-height: 1.35;
}

.combat-log.show { opacity: 1; }
.combat-log.log-ally {
  color: #e7f3ff;
  border-color: rgba(126, 184, 220, 0.9);
  background: rgba(8, 16, 24, 0.88);
}
.combat-log.log-foe {
  color: #ffe0d4;
  border-color: rgba(255, 122, 78, 0.9);
  background: rgba(28, 10, 8, 0.88);
}

.hit-float {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, 0);
  font-size: 2.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  z-index: 46;
  text-shadow: 0 2px 0 #2a100c, 0 0 16px rgba(0, 0, 0, 0.9);
}
.hit-float.harm { color: #ffb089; }
.hit-float.heal { color: #b7e6c2; }
.hit-float.juice-cleave { color: #ff6a2a; text-shadow: 0 0 14px #ff6a2a, 0 2px 0 #2a100c; }
.hit-float.juice-channel { color: #7ec8e8; text-shadow: 0 0 14px #7ec8e8, 0 2px 0 #102028; }
.hit-float.juice-aim { color: #d8c8ff; text-shadow: 0 0 14px #d8c8ff, 0 2px 0 #1a1428; }
.hit-float.juice-plasma { color: #ffe14a; text-shadow: 0 0 16px #ffb020, 0 2px 0 #2a1808; }
.hit-float.juice-steam { color: #e8f4ff; text-shadow: 0 0 16px #c5d8ea, 0 2px 0 #101820; }
.hit-float.juice-storm { color: #6eb6ff; text-shadow: 0 0 16px #3a78e0, 0 2px 0 #101828; }
.hit-float.juice-magma { color: #ff3a10; text-shadow: 0 0 16px #ff3a10, 0 2px 0 #2a100c; }
.hit-float.juice-glass { color: #d6fff6; text-shadow: 0 0 16px #b8fff0, 0 2px 0 #102820; }
.hit-float.show { animation: hitpop 0.68s ease-out; }
@keyframes hitpop {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(0.82); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

.turn-indicator {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: 12px;
  background:
    linear-gradient(180deg, rgba(255, 200, 120, 0.24), rgba(24, 12, 8, 0.94));
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 120, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffe7c2;
  pointer-events: none;
  max-width: 46vw;
  text-align: right;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.5),
    0 0 16px rgba(255, 120, 48, 0.42);
}

.dialogue {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 48px));
  z-index: 90;
  background:
    repeating-linear-gradient(90deg, rgba(255, 214, 160, 0.05) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(90, 48, 24, 0.08) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 214, 168, 0.22), rgba(255, 168, 88, 0.05) 22%, transparent 42%),
    linear-gradient(168deg, #4a3426 0%, #2c1e16 48%, #16100c 100%);
  border: 2px solid rgba(255, 186, 110, 0.94);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.55),
    inset 0 0 0 1px rgba(120, 58, 22, 0.55),
    inset 0 0 28px rgba(255, 120, 48, 0.12),
    0 0 0 1px rgba(255, 140, 60, 0.42),
    0 0 22px rgba(255, 120, 48, 0.4),
    0 18px 36px rgba(0, 0, 0, 0.5),
    0 -14px 28px rgba(0, 0, 0, 0.32);
  padding: 14px 16px 12px;
  pointer-events: auto;
}

.dialogue-where {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a89880;
  margin-bottom: 4px;
}

.dialogue-speaker {
  font-family: Georgia, Palatino, serif;
  color: #ffe1a8;
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.dialogue-line {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #f0e6d2;
  min-height: 2.8em;
}
.dialogue.letter-paper {
  border-color: #d5e4f2;
  background:
    radial-gradient(circle at 10px 12px, rgba(255, 90, 24, 0.7) 0 1.15px, transparent 1.7px),
    radial-gradient(circle at calc(100% - 12px) 16px, rgba(255, 90, 24, 0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 14px calc(100% - 14px), rgba(255, 138, 58, 0.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 18px), rgba(255, 90, 24, 0.55) 0 1px, transparent 1.6px),
    rgba(12, 10, 9, 0.96);
  box-shadow: inset 0 0 0 1px rgba(213, 228, 242, 0.55), 0 0 0 3px rgba(58, 46, 38, 0.72), 0 16px 40px rgba(0, 0, 0, 0.45);
}
.dialogue.letter-paper .dialogue-line {
  font-size: 1.06rem;
  line-height: 1.58;
  color: #f7f1e6;
}

.dialogue-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.dialogue-choice {
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  min-height: 48px;
  font-size: 1rem;
  padding: 12px 16px;
  border: 2px solid rgba(255, 196, 130, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 214, 168, 0.18), rgba(42, 26, 16, 0.94));
  color: #fff1dc;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.38),
    0 6px 14px rgba(0, 0, 0, 0.32);
}

.dialogue-advance {
  min-height: 52px;
  font-size: 1.05rem;
  padding: 12px 20px;
  align-self: stretch;
  border: 2px solid rgba(255, 214, 160, 0.95);
  border-radius: 8px;
  background: linear-gradient(180deg, #a86838, #4a2818);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, 0.48),
    0 0 14px rgba(255, 120, 48, 0.3),
    0 6px 14px rgba(0, 0, 0, 0.32);
}

.dialogue-keys {
  margin-top: 8px;
  font-size: 0.68rem;
  color: #9aa6bd;
}

.toast {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translate(-50%, 0);
  z-index: 80;
  background: rgba(12, 10, 9, 0.94);
  border: 1px solid #e0b56a;
  border-radius: 2px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  max-width: min(92vw, 520px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.victory-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 16, 0.72);
  text-align: center;
  padding: 20px;
}

.victory-overlay h2 {
  font-family: Georgia, Palatino, serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: #ffe0a0;
  margin-bottom: 10px;
}

.victory-overlay p {
  font-size: 1.02rem;
  color: #f0e6d2;
  max-width: 36rem;
  line-height: 1.45;
}

/* Desktop pointer: menus + stick + action pad all work with the mouse. */
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  .btn:hover:not(:disabled) {
    border-color: #ffe0a0;
    color: #ffe7c2;
    background: rgba(48, 36, 24, 0.98);
  }
  .menu-panel .btn-menu:hover:not(:disabled) {
    border-color: #ffe0a0;
    color: #ffe7c2;
    background:
      linear-gradient(180deg, rgba(255, 220, 170, 0.3), transparent 50%),
      linear-gradient(180deg, #4a3020, #1a100c);
  }
  .btn:focus-visible {
    outline: 1px solid #ffe0a0;
    outline-offset: 2px;
  }
}

/* Phone and narrow windows: larger taps, stacked windows. Stick already on. */
@media (pointer: coarse), (max-width: 820px) {
  .pc-key { display: none; }
  .hud-keys { display: none; }

  .btn {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
    font-size: 1.02rem;
    border-width: 2px;
    border-radius: 10px;
  }
  .btn-xl { min-height: 56px; font-size: 1.15rem; padding: 14px 28px; }
  .btn-small { min-height: 44px; font-size: 0.95rem; }
  .btn-hud { min-height: 48px; min-width: 92px; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
  .btn-menu { font-size: 1rem; min-height: 52px; }
  .dialogue-advance, .dialogue-choice { min-height: 52px; }
  .btn-pace, .btn-pack-motion, #btn-motion, #btn-ash, #btn-pack-ash { min-height: 48px; min-width: 120px; }
  #title-screen #btn-motion,
  #title-screen #btn-ash { min-height: 56px; min-width: 148px; }
  #title-screen #btn-start,
  #title-screen #btn-continue { min-height: 64px; }

  .status-icon { font-size: 0.92rem; padding: 5px 10px; line-height: 1.45; letter-spacing: 0.01em; border-width: 2px; }
  .status-row { gap: 6px; }
  .turn-chip { font-size: 0.84rem; padding: 4px 9px; }
  .turn-chip.warrior, .turn-chip.mage, .turn-chip.ranged { font-size: 0.92rem; padding: 5px 11px; font-weight: 700; }
  .turn-chip.warrior { border-color: #ffb067; color: #ffe7c4; background: rgba(48, 28, 12, 0.96); }
  .turn-chip.mage { border-color: #9ec8ff; color: #e7f2ff; background: rgba(16, 28, 48, 0.96); }
  .turn-chip.ranged { border-color: #c6e07a; color: #f4f8d8; background: rgba(28, 36, 12, 0.96); }
  .party-card .role { font-size: 0.86rem; font-weight: 700; color: #e7f2f6; }
  #path-menu .cost { font-size: 0.95rem; font-weight: 700; color: #ffe1a8; letter-spacing: 0.04em; }
  #main-menu .btn-menu { min-height: 60px; font-size: 1.08rem; font-weight: 700; }
  #path-menu.menu-grid { grid-template-columns: 1fr; }
  #path-menu .btn-menu[data-path] { min-height: 64px; font-size: 1.1rem; font-weight: 700; }
  #path-menu [data-path="warrior"] { border-color: #ffb067; color: #ffe7c4; }
  #path-menu [data-path="mage"] { border-color: #9ec8ff; color: #e7f2ff; }
  #path-menu [data-path="ranged"] { border-color: #c6e07a; color: #f4f8d8; }
  #path-menu .btn-menu.is-on { box-shadow: inset 5px 0 0 #ffe7c2; }

  .path-choices { flex-direction: column; }
  .path-content { width: min(560px, 100%); }

  .hud {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    z-index: 35;
    padding: max(10px, env(safe-area-inset-top)) 12px 8px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .places-panel { padding-top: 196px; }
  .places-card { max-height: min(46vh, 360px); }
  .places-quest { font-size: 0.92rem; line-height: 1.45; }
  #places-list li { padding: 9px 10px 10px; }
  #places-list li.is-here { padding: 9px 10px 10px; }
  #places-list li strong { font-size: 1.02rem; }
  .hud-left { max-width: calc(100% - 108px); }
  .hud-location {
    font-size: 1.1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  }
  .hud-rumor {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  }
  .hud-quest {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .hud-scar { max-width: 100%; white-space: normal; font-size: 0.82rem; padding: 2px 8px; border-width: 2px; }
  .hud-scar.owed {
    color: #ffe8e2;
    border-color: #ff8a68;
    background: rgba(110, 24, 16, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 150, 100, 0.45), 0 0 0 4px rgba(58, 46, 38, 0.95);
  }
  .hud-row, .hud-elements { max-width: 100%; }
  .combat-held { max-width: calc(100vw - 24px); }
  #btn-continue { white-space: normal; line-height: 1.25; }
  .continue-note { font-size: 1.02rem; font-weight: 700; color: #ffe7c4; }

  .inventory-panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    border-left: none;
  }
  .inv-body { display: block; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .inv-header {
    position: sticky;
    top: 0;
    z-index: 4;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    background:
      linear-gradient(180deg, rgba(255, 220, 170, 0.14), transparent 72%),
      linear-gradient(180deg, #3c2a1e 0%, #241810 100%);
    padding-bottom: 12px;
  }
  #btn-inv-close {
    width: 100%;
    min-height: 56px;
    justify-content: center;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #e8a15a;
    border: 2px solid #ffe7c2;
    color: #1a100c;
    box-shadow: none;
  }
  .inv-card, .equip-card { border-radius: 12px; padding: 12px 12px 12px 14px; }
  .inv-card, .equip-card {
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(255, 214, 160, 0.22), transparent 46%),
      linear-gradient(180deg, rgba(255, 228, 196, 0.16), transparent 40%),
      linear-gradient(168deg, #4a3224 0%, #2a1a12 58%, #140e0c 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 214, 0.42),
      inset 4px 0 0 #e07838,
      0 6px 14px rgba(0, 0, 0, 0.32);
  }
  .inv-card .name { font-size: 1.05rem; flex: 1 1 9rem; }
  .inv-card .desc { font-size: 0.88rem; margin-top: 6px; }
  .inv-card .row { flex-wrap: wrap; align-items: center; gap: 8px; }
  .inv-card .stack {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a100c;
    background: #e8a15a;
    border-color: #ffe7c2;
  }

  .combat-bottom {
    flex-direction: column;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom));
  }
  .menu-panel { width: auto; flex: none; border-radius: 12px; padding: 10px; }
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .party-card { min-width: 108px; border-radius: 8px; padding: 8px 10px; }

  .toast { top: 32%; border-radius: 12px; border-width: 2px; }
  .dialogue {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .dialogue-line { font-size: 1.02rem; }
  .dialogue.letter-paper .dialogue-line { font-size: 1.08rem; }
  .dialogue-keys { display: none; }

  .screen > .title-content { padding: 14px 14px 18px; margin: 8px; }
  .title-tag { margin-bottom: 8px; font-size: 0.8rem; }
  .tease { margin-bottom: 12px; font-size: 0.84rem; }
  .hint { margin-top: 12px; }
  .joystick-base { width: 128px; height: 128px; }
  .joystick-knob { width: 56px; height: 56px; }
  .btn-action { min-width: 108px; min-height: 54px; font-size: 1.02rem; }
  .btn-action.btn-absorb { min-width: 124px; min-height: 60px; }
  .interact-prompt {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: auto;
    top: 34%;
    max-width: none;
    text-align: left;
  }
  .credits-content p { font-size: 0.92rem; margin-bottom: 18px; }
  .credits-thanks { font-size: 1rem; padding: 14px 14px 12px; }
}

@media (max-width: 520px) {
  .joystick-base { width: 132px; height: 132px; }
  .joystick-knob { width: 56px; height: 56px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .combat-bottom { flex-direction: row; align-items: stretch; }
  .party-panel { flex: 1.15; flex-direction: column; overflow-y: auto; max-height: 46vh; }
  .menu-panel { flex: 1; width: auto; min-height: 0; }
  .menu-grid { grid-template-columns: 1fr; }
  .game-title { font-size: 2.1rem; }
  .hud-rumor { display: none; }
  .path-choices { flex-direction: row; max-height: 46vh; overflow: auto; }
  .inv-body { display: grid; grid-template-columns: 1fr 1fr; }
}

.hud-right:empty { display: none; }