/* ============================================================================
 * styles.css — Layout, scene placeholder, objects, UI, debug
 * ----------------------------------------------------------------------------
 * The stage is a letterboxed 16:9 area centered in the viewport, so the
 * composition keeps its proportions from 1080p up to 4K. Object POSITIONS are
 * set from JS (layout.js) in pixels; CSS here handles look, state animation
 * and the placeholder scene.
 * ==========================================================================*/

/* ---- Reset & exhibition hardening ------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;               /* no page scrolling */
  background: #241a10;            /* dark leather frame behind the map */
  color: #3a2a17;
  /* Offline-safe old-book serif stack (no web fonts). */
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;

  /* Touchscreen / exhibition robustness */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;             /* disable pinch/double-tap zoom & scroll */
  overscroll-behavior: none;
}

img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
video { pointer-events: none; }

/* ---- App / stage ------------------------------------------------------ */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Warm leather/wood tone framing the parchment map in the letterbox area. */
  background:
    radial-gradient(120% 120% at 50% 40%, #3a2a19 0%, #241a10 60%, #160f08 100%);
}

/* Letterboxed 16:9 stage that scales with the viewport. */
#stage {
  position: relative;
  width: 100vw;
  height: 56.25vw;                /* 9/16 of width */
  max-height: 100vh;
  max-width: 177.7778vh;          /* 16/9 of height */
  overflow: hidden;
  touch-action: none;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}

/* ---- Background layers ------------------------------------------------- */
#background-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Painted PLACEHOLDER scene (two banks + river). Hidden once a real image
   is applied via .has-image. */
#background-layer::before,
#background-layer::after { content: ""; position: absolute; left: 0; right: 0; }
#background-layer::before {  /* sky + far bank + river */
  top: 0; bottom: 0;
  background:
    linear-gradient(#bfe3f2 0%, #d8eef6 22%, #cfe9c9 40%,   /* far bank green */
      #8fc9df 46%, #4a93b8 62%, #2f6f96 100%);              /* river */
}
#background-layer::after {  /* near banks (left & right) */
  bottom: 0; height: 46%;
  background:
    radial-gradient(140% 120% at 0% 100%, #6f8f3f 0%, #55702f 40%, transparent 62%),
    radial-gradient(140% 120% at 100% 100%, #6f8f3f 0%, #55702f 40%, transparent 62%);
}
#background-layer.has-image::before,
#background-layer.has-image::after { display: none; }

/* ---- Object layers ---------------------------------------------------- */
#objects-layer { position: absolute; inset: 0; z-index: 2; }
#ui-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* Only genuinely interactive UI captures pointers. IMPORTANT: do NOT use a
   blanket `#ui-layer > *` rule — its ID specificity would override the hidden
   victory overlay's `pointer-events:none` and let the (invisible) overlay
   swallow every tap/drag meant for the game objects. */
.coin-badge,
.reset-btn { pointer-events: auto; }
.victory-overlay { pointer-events: auto; }
.victory-overlay[data-hidden="true"] { pointer-events: none; }

/* ---- Game objects ----------------------------------------------------- */
.game-object {
  position: absolute;
  /* left/top/width/font-size set by JS. Anchor = center-bottom. */
  transform: translate(-50%, -100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  will-change: left, top;
  cursor: pointer;
  touch-action: none;
}

.obj-visual {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: 50% 100%;
}

/* Aged/ink tone so colourful placeholders & the raft photo sit on the map. */
.obj-media {
  width: 100%; height: auto; display: block;
  filter: sepia(0.42) saturate(0.82) brightness(0.96) contrast(1.05)
          drop-shadow(0 4px 6px rgba(60,40,20,0.5));
}

.obj-placeholder {
  line-height: 1;
  text-align: center;
  filter: sepia(0.38) saturate(0.85) contrast(1.05)
          drop-shadow(0 4px 6px rgba(60,40,20,0.5));
  transform-origin: 50% 100%;
  /* font-size comes from the .game-object element (set in JS). */
}

/* Larger, forgiving hit area without changing the visual. */
.game-object::after {
  content: "";
  position: absolute;
  left: -12%; right: -12%; top: -12%; bottom: -12%;
}

/* Press affordance (works for mouse & touch). Uses filter so it never fights
   the transform-based state animations running on the same element. */
.game-object.is-pressing .obj-visual { filter: brightness(1.12); }

/* While being dragged, freeze idle motion so the object tracks the finger. */
.game-object.dragging .obj-visual { animation: none !important; }
.game-object.dragging { z-index: 10; }

/* ---- Animation per state (data-anim on .game-object) -------------------
   Applied to .obj-visual so it works for BOTH the emoji placeholder AND real
   image/video artwork (e.g. the raft). */
/* idle: gentle up-and-down bob */
.game-object[data-anim="idle"] .obj-visual { animation: idleBob 3.2s ease-in-out infinite; }
@keyframes idleBob {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-3%) scale(1.015); }
}

/* The raft is short & wide, so a 3% bob is barely visible — give it a stronger,
   boat-like float (bigger up/down + a slight rock). Overrides idleBob for the raft. */
.object-raft[data-anim="idle"] .obj-visual { animation: raftBob 3s ease-in-out infinite; }
@keyframes raftBob {
  0%,100% { transform: translateY(0) rotate(-0.8deg); }
  50%     { transform: translateY(-11%) rotate(0.8deg); }
}

/* touch: quick pop */
.game-object[data-anim="touch"] .obj-visual { animation: touchPop 0.45s ease; }
@keyframes touchPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18) rotate(-2deg); }
  70%  { transform: scale(0.97) rotate(1deg); }
  100% { transform: scale(1); }
}

/* selected: highlighted, floating */
.game-object[data-anim="selected"] .obj-visual {
  animation: selectedFloat 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255,214,102,0.9)) drop-shadow(0 6px 8px rgba(0,0,0,0.35));
}
@keyframes selectedFloat {
  0%,100% { transform: translateY(0) scale(1.04); }
  50%     { transform: translateY(-6%) scale(1.06); }
}

/* move: lean into travel */
.game-object[data-anim="move"] .obj-visual { animation: moveWobble 0.6s ease-in-out infinite; }
@keyframes moveWobble {
  0%,100% { transform: rotate(-2deg); }
  50%     { transform: rotate(2deg); }
}

/* arrive: little settle */
.game-object[data-anim="arrive"] .obj-visual { animation: arriveSettle 0.35s ease; }
@keyframes arriveSettle {
  0% { transform: translateY(-10%) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* invalid: red shake */
.game-object[data-anim="invalid"] .obj-visual {
  animation: invalidShake 0.4s ease-in-out 3;
  filter: drop-shadow(0 0 16px rgba(255,64,64,0.95)) drop-shadow(0 6px 8px rgba(0,0,0,0.35));
}
@keyframes invalidShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8%) rotate(-4deg); }
  75% { transform: translateX(8%) rotate(4deg); }
}

/* success: celebratory bounce */
.game-object[data-anim="success"] .obj-visual { animation: successBounce 0.7s ease-in-out infinite; }
@keyframes successBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-16%) scale(1.08); }
}

/* "can't select from far bank" hint */
.game-object.nudge .obj-visual { animation: nudge 0.35s ease; }
@keyframes nudge {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* invalid stage shake */
#stage.shake { animation: stageShake 0.4s ease-in-out 2; }
@keyframes stageShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* ---- Coin badge ------------------------------------------------------- */
.coin-badge {
  position: absolute;
  top: 2.4vh; right: 2.4vh;
  display: flex; align-items: center; gap: 0.45em;
  padding: 0.35em 0.85em;
  font-size: clamp(16px, 2.4vh, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4a2f14;                       /* ink */
  background:                            /* aged parchment */
    linear-gradient(180deg, #f3e3bf 0%, #e6cf9c 100%);
  border: 2px solid #6b4a24;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(20,12,4,0.5), inset 0 0 0 1px rgba(255,255,255,0.35);
  user-select: none;
}
.coin-dot { color: #9c2b1e; font-size: 0.9em; }   /* wax-seal red */
.coin-badge.coin-flash { animation: coinFlash 0.6s ease; }
@keyframes coinFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); box-shadow: 0 0 18px rgba(156,43,30,0.6); }
  100% { transform: scale(1); }
}

/* ---- Minimal reset button (temporary) --------------------------------- */
.reset-btn {
  position: absolute;
  bottom: 2.4vh; right: 2.4vh;
  width: clamp(38px, 5vh, 68px);
  height: clamp(38px, 5vh, 68px);
  font-size: clamp(20px, 3vh, 40px);
  line-height: 1;
  color: #4a2f14;
  background: linear-gradient(180deg, #f3e3bf 0%, #e6cf9c 100%);
  border: 2px solid #6b4a24;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(20,12,4,0.5);
  cursor: pointer;
  opacity: 0.7;
  touch-action: manipulation;
}
.reset-btn:active { transform: scale(0.92); opacity: 1; }

/* ---- Victory overlay -------------------------------------------------- */
.victory-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(40,26,14,0.55), rgba(20,12,6,0.82));
  opacity: 1; transition: opacity 0.5s ease;
}
.victory-overlay[data-hidden="true"] { opacity: 0; pointer-events: none; }
.victory-inner {
  text-align: center;
  padding: 3vh 6vw;
  /* aged parchment scroll */
  background: radial-gradient(120% 120% at 50% 30%, #f6e8c6 0%, #e7d0a1 70%, #d8bd85 100%);
  border: 3px solid #6b4a24;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 60px rgba(120,80,40,0.25);
}
.victory-media { max-width: 80vw; max-height: 70vh; }
.victory-burst { font-size: clamp(60px, 16vh, 220px); animation: burst 1.2s ease infinite; filter: sepia(0.4) saturate(0.85); }
@keyframes burst { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(6deg); } }
.victory-text {
  font-size: clamp(32px, 9vh, 120px);
  font-weight: 800;
  color: #7a2a17;                       /* deep ink-red */
  text-shadow: 0 2px 0 rgba(255,255,255,0.35), 0 5px 10px rgba(80,40,20,0.35);
  letter-spacing: 0.06em;
}
.victory-sub { margin-top: 0.4em; font-size: clamp(16px, 3vh, 38px); color: #4a2f14; opacity: 0.9; font-style: italic; }

/* ---- Debug HUD -------------------------------------------------------- */
.debug-panel {
  position: absolute;
  top: 2.2vh; left: 2.2vh;
  min-width: 220px;
  padding: 10px 12px;
  font: 13px/1.5 "SFMono-Regular", Menlo, Consolas, monospace;
  color: #b8ffcf;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(184,255,207,0.35);
  border-radius: 8px;
  z-index: 30;
}
.debug-panel[data-hidden="true"] { display: none; }
.debug-title { color: #fff; font-weight: 700; margin-bottom: 6px; }
.debug-row { display: flex; justify-content: space-between; gap: 16px; }
.debug-row b { color: #fff; }

/* Debug visualisation of hit areas & anchor points. */
body.debug-on .game-object { outline: 1px dashed rgba(0,255,140,0.6); }
body.debug-on .game-object::after { background: rgba(0,255,140,0.08); outline: 1px dotted rgba(0,255,140,0.5); }
body.debug-on .game-object::before {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 10px; height: 10px; margin-left: -5px; margin-bottom: -5px;
  background: #ff3b3b; border-radius: 50%;
  z-index: 3;
}