#prologue.overlay {
  display: block;
  padding: 0;
  overflow: hidden;
  background: none;
  pointer-events: none;
  z-index: 210;
  font-family: var(--font-ui, system-ui, sans-serif);
  color: #f3e8d0;
  --pl-gold: #e2c27a;
  --pl-ink: rgba(18, 11, 22, 0.88);
  --pl-edge: #c2a36b;
}
#prologue.hidden { display: none !important; }
#prologue > * { pointer-events: none; }
#prologue button, #prologue .pl-narr.tap { pointer-events: auto; }
body.pl-on #touch-buttons,
body.pl-on #joystick-run,
body.pl-on #btn-run { display: none !important; }
body.pl-on #hud { display: none !important; }
.pl-skip {
  position: absolute; top: 10px; right: 12px;
  height: 34px; padding: 0 16px;
  font: 600 14px/34px var(--font-ui, sans-serif);
  letter-spacing: 0.04em;
  color: #f3e8d0; background: rgba(20, 12, 24, 0.72);
  border: 1px solid rgba(194, 163, 107, 0.7); border-radius: 17px;
  cursor: pointer; z-index: 6;
  transition: background 0.15s, transform 0.15s;
}
.pl-skip:hover { background: rgba(60, 38, 50, 0.9); }
.pl-skip:active { transform: scale(0.96); }
.pl-skip span { opacity: 0.8; margin-left: 4px; }
.pl-bars {
  position: absolute; top: 10px; left: 12px; width: 256px;
  padding: 7px 9px 8px;
  background: linear-gradient(180deg, rgba(34, 24, 16, 0.9), rgba(20, 13, 9, 0.86));
  border: 1px solid rgba(194, 163, 107, 0.7); border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.pl-bars .pl-who { display: flex; align-items: baseline; gap: 8px; }
.pl-bars b { font: 800 16px var(--font-serif, serif); color: #f5e6c0; letter-spacing: 0.02em; white-space: nowrap; }
.pl-bars .pl-sub { display: flex; align-items: baseline; gap: 8px; margin: 1px 0 5px; }
.pl-bars i { font: normal 11px var(--font-ui, sans-serif); color: #d8c8a0; white-space: nowrap; }
.pl-bars .pl-he { font: normal 700 11px var(--font-ui, sans-serif); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.pl-bar { position: relative; height: 16px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.pl-bar > u {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; text-decoration: none;
  transition: width 0.18s ease-out;
}
.pl-bar > .pl-l, .pl-bar > .pl-n {
  position: absolute; top: 0; bottom: 0; line-height: 15px; z-index: 2;
  font: 800 11px/15px var(--font-ui, sans-serif); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap;
}
.pl-bar > .pl-l { left: 22px; }
.pl-bar > .pl-n { right: 6px; }
.pl-bar::before {
  content: ''; position: absolute; left: 5px; top: 3px; width: 9px; height: 9px; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, 0.35));
}
.pl-bar.hp > u { background: linear-gradient(180deg, #ff7070, #b8283a); }
.pl-bar.hp > s {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #ffe08a; text-decoration: none; z-index: 1;
  transition: width 0.18s ease-out; box-shadow: 0 0 6px rgba(255, 224, 138, 0.8);
}
.pl-bar.mp > u { background: linear-gradient(180deg, #6fcbf5, #2c74c2); }
.pl-bar.low > u { animation: pl-blink 0.5s steps(2) infinite; }
@keyframes pl-blink { 50% { filter: brightness(1.7); } }
.pl-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  min-width: 260px; max-width: min(560px, calc(100vw - 460px));
  padding: 9px 18px 10px 14px;
  display: flex; gap: 12px; align-items: center;
  background: linear-gradient(180deg, rgba(34, 21, 38, 0.93), rgba(18, 10, 22, 0.9));
  border: 2px solid var(--pl-edge); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 22px rgba(226, 194, 122, 0.22);
  animation: pl-hint-in 0.32s cubic-bezier(.2, 1.2, .4, 1);
}
.pl-hint.hidden { display: none; }
.pl-hint.ok { border-color: #8fe08f; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 28px rgba(143, 224, 143, 0.5); }
.pl-hint.nudge { animation: pl-nudge 0.9s ease-in-out; }
@keyframes pl-nudge {
  0%, 100% { transform: translateX(-50%) scale(1); }
  15% { transform: translateX(-50%) translateX(-7px) scale(1.04); } 30% { transform: translateX(-50%) translateX(7px) scale(1.04); }
  45% { transform: translateX(-50%) translateX(-5px) scale(1.04); } 60% { transform: translateX(-50%) translateX(5px) scale(1.04); }
}
@keyframes pl-hint-in { from { transform: translateX(-50%) translateY(-18px); opacity: 0; } }
.pl-hint .pl-n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 18px var(--font-serif, serif); color: #20120a;
  background: radial-gradient(circle at 35% 30%, #fff0b8, #e2b04a 70%);
  box-shadow: 0 0 0 2px #7a5420, 0 2px 6px rgba(0, 0, 0, 0.5);
}
.pl-hint.ok .pl-n { background: radial-gradient(circle at 35% 30%, #dfffd6, #62c25a 70%); box-shadow: 0 0 0 2px #2a6a24; }
.pl-hint .pl-body { min-width: 0; }
.pl-hint h3 { margin: 0 0 3px; font: 800 17px var(--font-serif, serif); color: #ffe9b0; letter-spacing: 0.03em; }
.pl-hint h3 em { font-style: normal; font: 600 12px var(--font-ui, sans-serif); color: #cfe6c8; margin-left: 8px; letter-spacing: 0; }
.pl-keys { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 2px 0; }
.pl-keys kbd {
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-grid; place-items: center;
  font: 800 14px var(--font-ui, sans-serif); color: #20120a;
  background: linear-gradient(180deg, #fff3cf, #e2c27a);
  border: 1px solid #7a5420; border-bottom-width: 3px; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.pl-keys span { font: 600 13px var(--font-ui, sans-serif); color: #efe3c8; }
.pl-hint p { margin: 3px 0 0; font: 12px/1.35 var(--font-ui, sans-serif); color: #bfae8c; }
.pl-banner {
  position: absolute; top: 24%; left: 0; right: 0; text-align: center;
  font: 800 clamp(20px, 4vw, 32px) var(--font-serif, serif); letter-spacing: 0.14em;
  color: #fff; text-shadow: 0 0 14px currentColor, 0 2px 0 #000, 0 0 3px #000;
  opacity: 0; transform: scale(0.9);
}
.pl-banner.on { animation: pl-banner 1.5s ease-out forwards; }
@keyframes pl-banner {
  0% { opacity: 0; transform: scale(1.35); letter-spacing: 0.5em; }
  14% { opacity: 1; transform: scale(1); letter-spacing: 0.14em; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.pl-toast {
  position: absolute; top: 38%; left: 0; right: 0; text-align: center;
  font: 800 clamp(22px, 4.4vw, 36px) var(--font-serif, serif); letter-spacing: 0.06em;
  color: #c8ffbd; text-shadow: 0 0 16px rgba(120, 255, 120, 0.7), 0 2px 0 #0a2a0a;
  opacity: 0;
}
.pl-toast.on { animation: pl-toast 1.1s ease-out forwards; }
.pl-toast.bad { color: #ffb3a8; text-shadow: 0 0 16px rgba(255, 120, 100, 0.7), 0 2px 0 #2a0a0a; }
@keyframes pl-toast { 0% { opacity: 0; transform: translateY(14px) scale(0.8); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-22px); } }
.pl-bubbles {
  position: fixed; inset: 0; z-index: 211; pointer-events: none; overflow: hidden;
  --pl-s: var(--ui-scale, 1);
}
.pl-bubbles.hidden { display: none !important; }
.pl-bub {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  width: max-content; max-width: calc(min(250px, 46vw) * var(--pl-s));
  margin-top: -9px; padding: 6px 11px 7px;
  background: linear-gradient(180deg, rgba(34, 21, 38, 0.95), rgba(16, 9, 20, 0.94));
  border: 2px solid var(--pl-bub, #c2a36b); border-radius: 11px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--pl-bub, #c2a36b) 38%, transparent);
  color: #f6ecd6; text-align: left;
  animation: pl-bub-in 0.18s ease-out;
}
.pl-bub::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--pl-bub, #c2a36b);
}
.pl-bub::before {
  content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; z-index: 1;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(16, 9, 20, 0.97);
}
.pl-bub b {
  display: block; margin: 0 0 2px; font: 800 calc(12px * var(--pl-s)) var(--font-serif, serif); letter-spacing: 0.03em;
  white-space: nowrap;
}
.pl-bub p {
  margin: 0; font: 500 calc(14px * var(--pl-s))/1.38 var(--font-ui, sans-serif); color: #f6ecd6;
  overflow-wrap: anywhere;
}
.pl-bub.block { padding-right: 20px; }
.pl-bub.block p::after {
  content: '▶'; position: absolute; right: 7px; bottom: 5px; font-size: calc(10px * var(--pl-s)); color: var(--pl-bub, #e2c27a);
  animation: pl-bounce 0.8s ease-in-out infinite;
}
.pl-bub.out { opacity: 0; transform: translate(-50%, -100%) translateY(-6px); transition: opacity 0.22s, transform 0.22s; }
@keyframes pl-bub-in { from { opacity: 0; transform: translate(-50%, -100%) translateY(8px) scale(0.94); } }
@keyframes pl-bounce { 50% { transform: translateY(3px); } }
.pl-narr {
  position: absolute; left: 0; right: 0; bottom: 14%;
  padding: 0 8%; text-align: center;
}
.pl-narr.hidden { display: none; }
.pl-narr p {
  margin: 0 auto; max-width: 780px;
  font: italic 500 clamp(18px, 2.8vw, 26px)/1.65 var(--font-serif, serif);
  letter-spacing: 0.04em; color: #f5ead2;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 2px 0 #000;
}
.pl-narr .pl-more { display: block; margin-top: 10px; color: var(--pl-gold); font-size: 14px; animation: pl-bounce 0.8s ease-in-out infinite; }
.pl-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #050208; text-align: center; padding: 0 6%;
  opacity: 1; transition: opacity 0.9s ease;
}
.pl-card.hidden { display: none; }
.pl-card.fade { opacity: 0; }
.pl-card h1 {
  margin: 0 0 12px; font: 800 clamp(34px, 8vw, 78px) var(--font-serif, serif);
  letter-spacing: 0.34em; padding-left: 0.34em; color: #f0d58b;
  text-shadow: 0 0 28px rgba(226, 150, 70, 0.55), 0 3px 0 #2a1408;
  animation: pl-title 2.6s ease-out both;
}
.pl-card h2 { margin: 0 0 20px; font: 600 clamp(14px, 2.4vw, 22px) var(--font-serif, serif); letter-spacing: 0.22em; color: #d9a07a; animation: pl-title 2.6s 0.5s ease-out both; }
.pl-card p { margin: 0; font: italic 500 clamp(16px, 2.6vw, 24px) var(--font-serif, serif); color: #cdbfa6; letter-spacing: 0.06em; animation: pl-title 2.4s 1.1s ease-out both; }
@keyframes pl-title { from { opacity: 0; transform: translateY(12px); letter-spacing: 0.6em; } to { opacity: 1; } }
.pl-controls {
  position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  width: 230px; height: 230px;
  transform-origin: right bottom;
  transition: opacity 0.35s;
}
.pl-controls.hidden { display: none; }
.pl-controls.off { opacity: 0; pointer-events: none; }
.pl-controls.off button { pointer-events: none; }
.pl-btn {
  position: absolute; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: #fff; font: 800 15px var(--font-ui, sans-serif);
  background: radial-gradient(circle at 35% 28%, #5a4466, #241530 72%);
  border: 3px solid #c2a36b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(0, 0, 0, 0.55);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform 0.08s, filter 0.2s, border-color 0.2s;
}
.pl-btn:active, .pl-btn.press { transform: scale(0.92); filter: brightness(1.25); }
.pl-btn canvas { width: 62%; height: 62%; image-rendering: pixelated; pointer-events: none; }
.pl-atk { right: 0; bottom: 0; width: 86px; height: 86px; border-color: #e2c27a; background: radial-gradient(circle at 35% 28%, #7a5a3a, #2e1a10 72%); }
.pl-atk svg { width: 54%; height: 54%; pointer-events: none; }
.pl-sk { width: 58px; height: 58px; transition: opacity .25s, transform .08s, filter .2s; }
.pl-sk.big { width: 66px; height: 66px; }
.pl-sk .pl-key {
  position: absolute; left: 3px; top: 1px; z-index: 3;
  font: 800 12px var(--font-ui, sans-serif); color: #20120a;
  background: #f3dd9a; border-radius: 4px; padding: 0 5px; line-height: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pl-sk .pl-mp {
  position: absolute; right: 2px; bottom: 1px; z-index: 3; font: 800 10px var(--font-ui, sans-serif);
  color: #bfe9ff; text-shadow: 0 1px 2px #000; padding: 0 3px;
}
.pl-sk .pl-cd {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  background: conic-gradient(rgba(10, 5, 18, 0.74) calc(var(--cd, 0) * 360deg), transparent 0);
  display: grid; place-items: center; font: 800 16px var(--font-ui, sans-serif); color: #fff; text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.pl-btn.locked { opacity: 0.38; filter: grayscale(1); pointer-events: none; }
.pl-btn.locked canvas { opacity: 0.35; }
.pl-sk.nomp { filter: saturate(0.4) brightness(0.8); }
.pl-sk.nomp .pl-mp { color: #ff8a8a; }
.pl-pulse { animation: pl-pulse 0.85s ease-in-out infinite; border-color: #fff0a8 !important; z-index: 5; }
.pl-pulse::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  box-shadow: 0 0 0 3px rgba(255, 240, 168, 0.85), 0 0 22px 6px rgba(255, 220, 110, 0.8);
  animation: pl-ring 0.85s ease-out infinite;
}
@keyframes pl-pulse { 50% { transform: scale(1.12); } }
.pl-pulse.pl-pop { animation: pl-pop 0.9s ease-in-out; }
@keyframes pl-pop { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(1.1); } }
@keyframes pl-ring { from { opacity: 1; transform: scale(0.9); } to { opacity: 0; transform: scale(1.4); } }
.pl-arrow {
  position: absolute; left: 50%; top: -34px; width: 0; height: 0; margin-left: -10px; z-index: 7;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #ffe56a;
  filter: drop-shadow(0 2px 2px #000);
  animation: pl-arrow 0.7s ease-in-out infinite; pointer-events: none;
}
@keyframes pl-arrow { 50% { transform: translateY(6px); } }
body.pl-touch .pl-sk .pl-key, body.pl-touch .pl-atk .pl-key { display: none; }
.pl-atk .pl-key { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 3;
  font: 800 11px var(--font-ui, sans-serif); color: #20120a; background: #f3dd9a; border-radius: 4px; padding: 0 6px; line-height: 14px; }
@media (max-height: 470px) {
  .pl-skip { top: 6px; right: 8px; height: 30px; line-height: 30px; padding: 0 12px; font-size: 13px; }
  .pl-bars { top: 6px; left: 8px; width: 204px; padding: 4px 7px 5px; }
  .pl-bars b { font-size: 13px; } .pl-bars i, .pl-bars .pl-he { font-size: 10px; }
  .pl-bar { height: 14px; } .pl-bar > .pl-l, .pl-bar > .pl-n { font-size: 10px; line-height: 13px; }
  .pl-hint { top: 6px; padding: 6px 12px 7px 10px; gap: 9px; max-width: calc(100vw - 380px); min-width: 0; }
  .pl-hint .pl-n { width: 28px; height: 28px; font-size: 15px; }
  .pl-hint h3 { font-size: 14px; margin-bottom: 1px; }
  .pl-hint h3 em { display: none; }
  .pl-hint p { display: none; }
  .pl-keys kbd { min-width: 22px; height: 22px; font-size: 12px; }
  .pl-keys span { font-size: 12px; }
  .pl-bub { max-width: 188px; padding: 5px 9px 6px; } .pl-bub p { font-size: 12px; } .pl-bub b { font-size: 11px; }
  .pl-controls { transform: scale(0.84); }
}
@media (max-width: 760px) {
  .pl-hint { max-width: calc(100vw - 250px); }
}