/* engine.css — Game engine: player Koro, prompts, dialogue, gamepad, effects */

/* z-index is set inline by engine.ts (y-based depth sort); the static value
   here is a fallback for placeholder/static contexts when the engine isn't running. */
.dojo-koro-player { position: absolute; z-index: 100; will-change: transform; transition: none; }

.dojo-koro-player .koro-sprite {
  width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated;
  opacity: 0; transition: opacity 0.2s ease; position: absolute; top: 0; left: 0;
}
.dojo-koro-player .koro-sprite.koro-active { opacity: 1; }
.dojo-koro-player.facing-left { transform: scaleX(-1); }

.koro-lantern-glow {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 55px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 209, 102, 0.4) 0%, rgba(255, 209, 102, 0.15) 40%, transparent 70%);
  pointer-events: none; z-index: -1; animation: lanternPulse 3s ease-in-out infinite;
}
@keyframes lanternPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* The sprite is 128x128 but the engine's hitbox is 80x80 anchored at koroEl's
   top-left. Without offset, the 48px overhang on the right/bottom of the
   sprite drops Koro's feet below the floor (y=442) into the room overflow
   clip — visible feet get cut off at the bottom of the viewport. Pulling
   the sprite UP by 48px and LEFT by 24px (centering horizontally) aligns
   its bottom with the hitbox bottom and its center with the hitbox center,
   so what you see is what the engine collides. */
.koro-squash-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  margin-top: -48px;
  margin-left: -24px;
  transition: transform 80ms ease-out;
}
.koro-squash-wrap.squash-land   { transform: scaleY(0.85) scaleX(1.15); }
.koro-squash-wrap.squash-jump   { transform: scaleY(1.15) scaleX(0.88); }
.koro-squash-wrap.squash-normal { transform: scaleY(1) scaleX(1); }

@keyframes walkBobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.dojo-koro-player.is-walking .koro-squash-wrap { animation: walkBobble 0.3s ease-in-out infinite; }

@keyframes idleBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.dojo-koro-player.is-idle .koro-squash-wrap { animation: idleBreath 2.5s ease-in-out infinite; }

/* --- Dust puff on landing --- */
.dust-puff {
  position: absolute; width: 12px; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(254, 246, 228, 0.5) 0%, transparent 70%);
  pointer-events: none; z-index: 2; animation: dustPuff 0.35s ease-out forwards;
}
@keyframes dustPuff {
  0%   { opacity: 1; transform: scale(0.5) translateY(0); }
  100% { opacity: 0; transform: scale(1.8) translateY(-6px); }
}
.dust-puff-left  { transform-origin: right center; }
.dust-puff-right { transform-origin: left center; }

/* --- Interaction prompt --- */
.dojo-interact-prompt {
  position: absolute; z-index: 5; display: flex; flex-direction: column;
  align-items: center; gap: 2px; pointer-events: none; animation: promptBob 1.2s ease-in-out infinite;
}
.interact-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--color-gold);
  color: var(--color-bg-deep); font-family: var(--font-display); font-size: 12px;
  font-weight: bold; box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}
.interact-label { font-family: var(--font-display); font-size: 7px; color: var(--color-pixel-cream); opacity: 0.7; letter-spacing: 1px; }

@keyframes promptBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dojo-object.obj-nearby .dojo-object-glow {
  opacity: 1; background: radial-gradient(ellipse, rgba(255, 209, 102, 0.2) 0%, transparent 70%);
  animation: nearbyGlow 1.5s ease-in-out infinite;
}
@keyframes nearbyGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.dojo-object.obj-bumped { animation: objBump 0.15s ease-out; }
@keyframes objBump {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--bump-x, 2px), var(--bump-y, 0)); }
}

/* --- Ambient whisper line (room-entry, 13-F-3) --- */
.koro-ambient-line {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  z-index: 9; pointer-events: none; max-width: min(420px, 82vw);
  padding: 10px 14px; border-radius: 8px;
  background: rgba(15, 14, 23, 0.62); color: #fef6e4;
  font-family: var(--font-body); font-size: clamp(13px, 1.5vw, 15px);
  font-style: italic; line-height: 1.5; text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: ambientLineIn 0.22s ease-out;
  transition: opacity 0.26s ease-out;
}
.koro-ambient-line-fade { opacity: 0; }
@keyframes ambientLineIn {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Dialogue box (matches nav-key pill style) --- */
.dojo-dialogue {
  position: absolute; z-index: 10; width: min(360px, 85vw);
  background: rgba(254, 246, 228, 0.95); border: 2px solid var(--color-teal);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 14px 16px; animation: dialogueOpen 0.25s ease-out;
  display: flex; flex-direction: column;
  max-height: calc(100svh - 120px); /* fallback; JS sets inline max-height scoped to the room */
  backdrop-filter: blur(6px);
}
.dojo-dialogue > .dojo-dialogue-header { flex: 0 0 auto; }
.dojo-dialogue > .dojo-dialogue-text,
.dojo-dialogue > .dojo-dialogue-question,
.dojo-dialogue > .dojo-dialogue-options,
.dojo-dialogue > .challenge-content {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-teal) transparent;
}
.dojo-dialogue > .challenge-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, rgba(254, 246, 228, 0.98) 65%, rgba(254, 246, 228, 0));
  padding-top: 12px;
  margin-top: auto;
}
.dojo-dialogue ::-webkit-scrollbar { width: 6px; height: 6px; }
.dojo-dialogue ::-webkit-scrollbar-track { background: transparent; }
.dojo-dialogue ::-webkit-scrollbar-thumb { background: rgba(46, 196, 182, 0.5); border-radius: 3px; }
.dojo-dialogue ::-webkit-scrollbar-thumb:hover { background: var(--color-teal); }
@media (prefers-reduced-motion: reduce) {
  .dojo-dialogue { animation: none; }
}
@keyframes dialogueOpen {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dojo-dialogue-header { margin-bottom: 8px; }
.dojo-dialogue-name { font-family: var(--font-display); font-size: 9px; color: var(--color-teal); letter-spacing: 1.5px; text-transform: uppercase; }
.dojo-dialogue-text { font-family: var(--font-body); font-size: clamp(13px, 1.5vw, 15px); color: var(--color-bg-deep); line-height: 1.55; min-height: 20px; }
.dojo-dialogue-question { font-family: var(--font-body); font-size: clamp(14px, 1.6vw, 16px); font-weight: 700; color: var(--color-bg-deep); line-height: 1.4; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--color-teal); }
.dojo-dialogue-options { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.dialogue-option {
  padding: 10px 14px; font-family: var(--font-body); font-size: clamp(12px, 1.4vw, 14px);
  color: var(--color-bg-deep); background: rgba(15, 14, 23, 0.05);
  border: 2px solid rgba(15, 14, 23, 0.15); border-radius: 6px;
  cursor: pointer; text-align: left;
  line-height: 1.4; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px; display: flex; align-items: center;
}
.dialogue-option:hover, .dialogue-option.opt-highlight {
  border-color: var(--color-teal); background: rgba(46, 196, 182, 0.12);
  box-shadow: 0 1px 4px rgba(46, 196, 182, 0.2);
}
.dialogue-option.opt-selected {
  border-color: var(--color-teal); background: var(--color-teal); color: #fff; font-weight: 700;
}
.dialogue-option.opt-dimmed { opacity: 0.35; pointer-events: none; }

.dialogue-caret { display: inline-block; width: 8px; animation: caretBlink 0.8s step-end infinite; color: var(--color-teal); }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- Challenge mode (alchemy recipe card) --- */
.dojo-challenge .challenge-content { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--color-teal); }
.challenge-title {
  font-family: var(--font-display); font-size: clamp(10px, 1.3vw, 12px);
  color: var(--color-teal); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
}

/* Recipe equation: ingredient + ingredient = result */
.recipe-equation {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin-bottom: 8px;
}
.recipe-ingredient {
  background: rgba(15, 14, 23, 0.06); padding: 4px 10px; border-radius: 4px;
  font-family: var(--font-body); font-size: clamp(11px, 1.3vw, 13px);
  color: var(--color-bg-deep); white-space: nowrap;
}
.recipe-op {
  font-weight: 700; color: var(--color-teal);
  font-family: var(--font-display); font-size: clamp(14px, 1.6vw, 18px); line-height: 1;
}
.recipe-result {
  background: var(--color-teal); color: #fff; padding: 4px 10px; border-radius: 4px;
  font-family: var(--font-body); font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 700; white-space: nowrap;
}
.recipe-best-for {
  font-family: var(--font-body); font-size: clamp(11px, 1.2vw, 12px);
  color: var(--color-bg-deep); opacity: 0.6; text-align: center;
  font-style: italic; margin-bottom: 8px;
}

/* Prompt block */
.challenge-prompt-label {
  font-family: var(--font-display); font-size: 8px; color: var(--color-teal);
  letter-spacing: 1.5px; margin-bottom: 4px; opacity: 0.7;
}
.challenge-prompt {
  background: var(--color-bg-deep); border-radius: 6px; padding: 10px 12px;
  margin-bottom: 4px; overflow-x: auto;
}
.challenge-prompt code {
  font-family: var(--font-display); font-size: clamp(10px, 1.2vw, 12px);
  color: var(--color-pixel-cream); line-height: 1.6; word-break: break-word; white-space: pre-wrap;
}

/* Action buttons */
.challenge-actions { display: flex; gap: 8px; margin-top: 10px; }
.challenge-btn {
  flex: 1; padding: 10px 14px; font-family: var(--font-body); font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700; border-radius: 6px; cursor: pointer; text-align: center;
  text-decoration: none; display: flex; align-items: center; justify-content: center;
  min-height: 44px; transition: filter 0.15s ease, transform 0.1s ease; border: 2px solid;
}
.challenge-btn:active { transform: scale(0.97); }
.challenge-btn-try { background: var(--color-teal); color: #fff; border-color: var(--color-teal); }
.challenge-btn-try:hover { filter: brightness(1.15); }
.challenge-btn-got-it { background: transparent; color: var(--color-bg-deep); border-color: rgba(15, 14, 23, 0.2); }
.challenge-btn-got-it:hover { border-color: var(--color-teal); background: rgba(46, 196, 182, 0.08); }

/* --- In-Dojo reveal overlay --- */
.dojo-reveal-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 5);
  background: rgba(15, 14, 23, 0.88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.6s ease; padding: 16px;
}
.dojo-reveal-content { max-width: 520px; width: 100%; text-align: center; }

/* --- Zone atmosphere overlays --- */
.dojo-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dojo-zone-overlay { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; mix-blend-mode: soft-light; background-size: cover; background-position: center; }
.dojo-zone-love   { background-image: url("/assets/environments/raw/zone_1_meadow.jpg"); }
.dojo-zone-good   { background-image: url("/assets/environments/raw/zone_2_study.jpg"); }
.dojo-zone-needs  { background-image: url("/assets/environments/raw/zone_3_cubicle.jpg"); }
.dojo-zone-valued { background-image: url("/assets/environments/raw/zone_4_open_road.jpg"); }
.dojo-atmosphere[data-zone="love"]   .dojo-zone-love   { opacity: 0.12; }
.dojo-atmosphere[data-zone="good"]   .dojo-zone-good   { opacity: 0.12; }
.dojo-atmosphere[data-zone="needs"]  .dojo-zone-needs  { opacity: 0.1; }
.dojo-atmosphere[data-zone="valued"] .dojo-zone-valued { opacity: 0.15; }

/* --- Dojo decorative props --- */
.dojo-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dojo-deco-item { position: absolute; opacity: 0.35; filter: brightness(0.6) saturate(0.5); }
.dojo-deco-paperwork { right: 8%; top: 52%; width: clamp(20px, 3vw, 36px); }
.dojo-deco-pager     { left: 38%; top: 12%; width: clamp(12px, 2vw, 22px); opacity: 0.25; }
.dojo-deco-seed      { left: 22%; bottom: 28%; width: clamp(8px, 1.2vw, 14px); opacity: 0.3; }
.dojo-deco-clip      { right: 22%; bottom: 38%; width: clamp(8px, 1vw, 12px); opacity: 0.2; }
.dojo-deco-cubicle   { left: 4%; top: 8%; width: clamp(32px, 5vw, 60px); opacity: 0.15; filter: brightness(0.4) saturate(0.3); }
.dojo-deco-desk      { right: 4%; bottom: 18%; width: clamp(24px, 4vw, 48px); opacity: 0.12; filter: brightness(0.35) saturate(0.25); }
.dojo-deco-wheel     { left: 2%; bottom: 6%; width: clamp(16px, 2.5vw, 30px); opacity: 0.08; filter: brightness(0.3) saturate(0.2); }

/* --- Virtual gamepad (mobile touch only) --- */
.dojo-gamepad {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: calc(var(--z-ui) + 5); padding: 16px 20px 24px; pointer-events: none;
  justify-content: space-between; align-items: flex-end; opacity: 0.7; transition: opacity 0.3s ease;
}
.dojo-gamepad.gamepad-active { opacity: 0.4; }
@media (pointer: coarse) { .dojo-gamepad { display: flex; } }
/* Hide the dojo HUD chrome (gamepad, scroll counter, lantern toggle)
   while the workshop scene is up. Workshop is its own self-contained
   scene with its own HUD; the dojo-game UI is irrelevant there. */
html.workshop-active .dojo-gamepad,
html.workshop-active .dojo-scroll-counter,
html.workshop-active .dojo-hud { display: none; }

.gamepad-dpad {
  display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px);
  gap: 2px; pointer-events: auto; touch-action: none;
}
.dpad-btn {
  background: rgba(254, 246, 228, 0.08); border: 2px solid rgba(254, 246, 228, 0.15);
  color: var(--color-pixel-cream); font-family: var(--font-display); font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.dpad-up    { grid-column: 2; grid-row: 1; border-radius: 6px 6px 0 0; }
.dpad-left  { grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
.dpad-center { grid-column: 2; grid-row: 2; background: rgba(254, 246, 228, 0.04); border-color: transparent; pointer-events: none; }
.dpad-right { grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
.dpad-down  { grid-column: 2; grid-row: 3; border-radius: 0 0 6px 6px; }
.dpad-up::after    { content: ""; border: 6px solid transparent; border-bottom-color: var(--color-pixel-cream); }
.dpad-left::after  { content: ""; border: 6px solid transparent; border-right-color: var(--color-pixel-cream); }
.dpad-right::after { content: ""; border: 6px solid transparent; border-left-color: var(--color-pixel-cream); }
.dpad-down::after  { content: ""; border: 6px solid transparent; border-top-color: var(--color-pixel-cream); }
.dpad-btn:active, .dpad-btn.pressed { background: rgba(46, 196, 182, 0.2); border-color: var(--color-teal); }

.gamepad-buttons { display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; touch-action: none; }
.gamepad-btn {
  width: 52px; height: 52px; border-radius: 50%; font-family: var(--font-display); font-size: 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-user-select: none; user-select: none; border: 2px solid;
}
.gamepad-btn-a { background: rgba(46, 196, 182, 0.15); border-color: var(--color-teal); color: var(--color-teal); }
.gamepad-btn-b { background: rgba(255, 209, 102, 0.15); border-color: var(--color-gold); color: var(--color-gold); margin-bottom: 20px; }
.gamepad-btn:active, .gamepad-btn.pressed { transform: scale(0.9); filter: brightness(1.3); }

/* --- Controls hint --- */
.dojo-controls-hint {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-ui); font-family: var(--font-display); font-size: 11px;
  color: var(--color-bg-deep); background: rgba(254, 246, 228, 0.88);
  padding: 8px 18px; border-radius: 6px; letter-spacing: 0.5px;
  white-space: nowrap; pointer-events: none;
  border: 2px solid var(--color-teal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: hintFade 8s ease forwards;
}
@keyframes hintFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (pointer: coarse) { .dojo-controls-hint { display: none; } }

/* --- Idle fidget --- */
@keyframes idleFidget { 0%, 85%, 100% { transform: scaleX(1); } 90% { transform: scaleX(-1); } 95% { transform: scaleX(1); } }
.dojo-koro-player.is-fidgeting { animation: idleFidget 0.8s ease; }

/* --- Mobile overrides --- */
@media (max-width: 500px) {
  .dojo-dialogue { position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%); width: calc(100vw - 32px); max-width: 340px; }
}
@media (max-width: 400px) {
  .dojo-deco-cubicle, .dojo-deco-desk, .dojo-deco-wheel { display: none; }
  .gamepad-dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .gamepad-btn { width: 48px; height: 48px; }
}