/* Mini-game styles: field (loaded after shell.css). */

/* ---------- the gathering card (src/adventure-ui.js) ----------
   One card in the status stack: a start card at a signpost, the 3 × 3 field
   while a round runs, then the result. It overrides the generic status pill. */
#active-activity {
  --patch: 56px;
  --sprite: 48px;
  --patch-bg: #b8d38a;
  --patch-edge: #8fb066;
}
#active-activity.field-hud:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  gap: 8px;
  width: min(540px, 100%);
  padding: 10px 14px 12px;
  border-radius: 18px;
  text-align: left;
  color: var(--cz-cocoa);
}
#active-activity[data-station="trail"] { --patch-bg: #dcc596; --patch-edge: #b89c66; }
#active-activity[data-station="flowers"] { --patch-bg: #c9e2a0; --patch-edge: #9fc073; }
#active-activity[data-station="stones"] { --patch-bg: #aed8e6; --patch-edge: #7fb3c9; }
#active-activity p { margin: 0; }

/* Head: emblem and title; rounds left (pips) or, in a round, score and time. */
#active-activity .field-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
#active-activity .field-emblem { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
#active-activity .field-titles { display: grid; flex: 1; gap: 1px; min-width: 0; }
#active-activity .field-title { font-family: var(--cz-font-display); font-size: 17px; font-weight: 600; line-height: 1.2; }
#active-activity .field-sub { font-size: 13px; line-height: 1.35; color: var(--cz-cocoa-soft); }
#active-activity .field-pips { display: inline-flex; flex: none; gap: 4px; }
#active-activity .field-pip { width: 13px; height: 13px; border: 2px dashed #5a403880; border-radius: 4px; background: transparent; }
#active-activity .field-pip.is-left { border: 2px solid var(--cz-cocoa); }
#active-activity .field-pip.is-left { background: var(--cz-moss); box-shadow: inset 0 3px 0 #c4e09a; }
#active-activity[data-state="resting"] .field-pip.is-left { background: var(--cz-gold); box-shadow: inset 0 3px 0 #f8e6ad; }
#active-activity .field-stats { display: none; flex: none; align-items: center; gap: 10px; }
#active-activity .field-score { display: inline-flex; align-items: baseline; gap: 5px; }
#active-activity .field-score-value { display: inline-block; min-width: 2ch; font-family: var(--cz-font-mono); font-size: 32px; line-height: .8; text-align: right; color: var(--cz-moss-deep); }
#active-activity .field-score-label { font-size: 12px; color: var(--cz-cocoa-soft); }
#active-activity .field-time { min-width: 4ch; padding: 1px 8px; border: 2px solid var(--cz-cocoa); border-radius: 999px; background: var(--cz-paper-deep); font-family: var(--cz-font-mono); font-size: 20px; line-height: 1.1; text-align: center; }
#active-activity.is-hurry .field-time { background: #f8d3c0; color: #8a3a22; }

/* Time left: a bar that empties. */
#active-activity .field-timebar { display: none; height: 10px; overflow: hidden; border: 2px solid var(--cz-cocoa); border-radius: 99px; background: var(--cz-paper-deep); }
#active-activity .field-timebar span { display: block; height: 100%; background: var(--cz-moss); transform: scaleX(var(--left, 1)); transform-origin: left; }
#active-activity.is-hurry .field-timebar span { background: var(--cz-peach-deep); }

/* Legend: what to pick, what to leave, and the find that counts 2. */
#active-activity .field-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; }
#active-activity .field-legend-item { display: inline-flex; align-items: center; gap: 1px; padding: 1px 8px 1px 2px; border-radius: 999px; background: #f3ecd6; }
#active-activity .field-legend-item > span { margin-left: 4px; font-weight: 600; }
#active-activity .field-legend-item.is-decoy { background: #f8ddd2; }
#active-activity .field-legend-sprite { width: 32px; height: 32px; image-rendering: pixelated; }

/* Body: the field beside the basket meter and buttons. */
#active-activity .field-body { display: flex; align-items: center; gap: 14px; min-width: 0; }
#active-activity .field-side { display: grid; flex: 1; align-content: center; gap: 8px; min-width: 0; }
#active-activity .field-copy { font-size: 13px; line-height: 1.45; }
#active-activity .field-copy.is-small { font-size: 12px; color: var(--cz-cocoa-soft); }
#active-activity .field-reward { font-family: var(--cz-font-display); font-size: 18px; font-weight: 600; color: var(--cz-moss-deep); }
#active-activity .field-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#active-activity .field-primary[aria-disabled="true"],
#active-activity .field-gentle[aria-disabled="true"] { opacity: .6; cursor: default; transform: none; }
#active-activity .field-gentle[aria-pressed="true"] { background: #e3efcf; }

/* The field: nine patches. */
#active-activity .field-patches {
  display: none;
  flex: none;
  grid-template-columns: repeat(3, var(--patch));
  gap: 6px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
#active-activity .field-patch {
  position: relative;
  width: var(--patch);
  height: var(--patch);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid #5a40384d;
  border-radius: 12px;
  background: var(--patch-bg);
  box-shadow: inset 0 -4px 0 var(--patch-edge);
  color: var(--cz-cocoa);
  font-size: 14px;
  cursor: pointer;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
#active-activity .field-patch:hover { border-color: #5a403899; }
#active-activity .field-patch:focus-visible { outline: 3px solid var(--cz-peach-deep); outline-offset: 2px; }
#active-activity .field-sprite { position: absolute; inset: 0; width: var(--sprite); height: var(--sprite); margin: auto; image-rendering: pixelated; pointer-events: none; }
#active-activity .field-patch.is-leaving .field-sprite { opacity: .45; }
#active-activity .field-patch[data-kind="bonus"] { border-color: var(--cz-gold-deep); box-shadow: inset 0 -4px 0 var(--patch-edge), 0 0 0 3px #efc766aa; }
#active-activity .field-key { position: absolute; top: 2px; left: 5px; font-family: var(--cz-font-mono); font-size: 14px; line-height: 1; color: #5a403880; pointer-events: none; }
#active-activity .field-burst {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  font-family: var(--cz-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--cz-moss-deep);
  text-shadow: 0 2px 0 var(--cz-paper), 2px 0 0 var(--cz-paper), -2px 0 0 var(--cz-paper), 0 -2px 0 var(--cz-paper);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
#active-activity .field-patch[data-fx] .field-burst { opacity: 1; }
#active-activity .field-patch[data-fx="got"] { background: #ddefc4; }
#active-activity .field-patch[data-fx="gold"] { background: #f6e3a2; }
#active-activity .field-patch[data-fx="gold"] .field-burst { color: var(--cz-gold-deep); }
#active-activity .field-patch[data-fx="ouch"] { border-color: #b5532f; background: #f3c5b6; }
#active-activity .field-patch[data-fx="ouch"] .field-burst { color: #a83f2a; }
#active-activity .field-patch[data-fx="miss"] { box-shadow: inset 0 2px 0 var(--patch-edge); }

/* Basket meter: fills toward 14 (three supplies); the notch marks 8 (two). */
#active-activity .field-meter { display: grid; gap: 4px; }
#active-activity .field-meter-bar { position: relative; height: 14px; overflow: hidden; border: 2px solid var(--cz-cocoa); border-radius: 99px; background: var(--cz-paper-deep); }
#active-activity .field-meter-fill { position: absolute; inset: 0; background: var(--cz-gold); transform: scaleX(var(--fill, 0)); transform-origin: left; }
#active-activity .field-meter[data-yield="3"] .field-meter-fill { background: var(--cz-moss); }
#active-activity .field-meter-mark { position: absolute; top: 0; bottom: 0; left: calc(var(--two) * 100%); width: 2px; background: var(--cz-cocoa); }
#active-activity .field-meter-text { font-size: 13px; font-weight: 600; }

/* Phases: start card, round, result. */
#active-activity[data-phase="playing"] .field-stats { display: inline-flex; }
#active-activity[data-phase="playing"] .field-timebar { display: block; }
#active-activity[data-phase="playing"] .field-patches { display: grid; }
#active-activity[data-phase="playing"] :is(.field-pips, .field-legend, .field-copy, .field-reward, .field-primary, .field-gentle) { display: none; }
#active-activity[data-phase="intro"] :is(.field-meter, .field-reward) { display: none; }
#active-activity[data-phase="result"] .field-meter-text { display: none; }
#active-activity:is([data-phase="result"], [data-state="done"]) .field-legend { display: none; }

/* Motion: pop in, a rising +1, a ring when picked, a shake for a decoy. */
@media (prefers-reduced-motion: no-preference) {
  #active-activity[data-motion="full"] .field-patch.is-up .field-sprite { animation: field-pop-in 0.18s cubic-bezier(0.3, 1.6, 0.6, 1); }
  #active-activity[data-motion="full"][data-pace="gentle"] .field-patch.is-up .field-sprite { animation-duration: 0.3s; }
  #active-activity[data-motion="full"] .field-patch[data-fx] .field-burst { animation: field-burst 0.56s ease-out forwards; }
  #active-activity[data-motion="full"] .field-patch:is([data-fx="got"], [data-fx="gold"])::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 3px solid #fffaee;
    border-radius: 50%;
    pointer-events: none;
    animation: field-ring 0.36s ease-out forwards;
  }
  #active-activity[data-motion="full"] .field-patch[data-fx="ouch"] { animation: field-shake 0.3s steps(6); }
  #active-activity[data-motion="full"] .field-score-value.is-bump { animation: field-bump 0.24s ease-out; }
}
@keyframes field-pop-in { from { transform: scale(0.35); } to { transform: scale(1); } }
@keyframes field-burst {
  0% { opacity: 1; transform: translate(-50%, 6px) scale(0.9); }
  30% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(1); }
}
@keyframes field-ring { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: scale(1.35); } }
@keyframes field-shake { 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }
@keyframes field-bump { 40% { transform: scale(1.25); } }

/* Phones: a slightly smaller field; the tiniest screens stack it over the meter. */
@media (max-width: 760px) {
  #active-activity.field-hud:not([hidden]) { width: 100%; padding: 10px 12px; }
  #active-activity .field-title { font-size: 16px; }
  #active-activity .field-sub { font-size: 12px; }
  #active-activity .field-legend { font-size: 12px; gap: 4px 8px; }
}
/* The smallest phones keep the field beside the meter (stacking them would
   push the card over the focus pill) with slightly smaller, still 48px patches. */
@media (max-width: 379px) {
  #active-activity.field-hud:not([hidden]) { --patch: 48px; --sprite: 36px; }
  #active-activity .field-body { gap: 10px; }
  #active-activity .field-patches { gap: 5px; }
  #active-activity .field-stats { gap: 6px; }
  #active-activity .field-score-label { display: none; }
  #active-activity .field-meter-text { font-size: 12px; }
  #active-activity[data-phase="playing"] .field-actions .button { padding-inline: 10px; }
}
/* Short screens: smaller patches (still comfortable to tap). */
@media (max-height: 520px) {
  #active-activity.field-hud:not([hidden]) { --patch: 46px; --sprite: 32px; gap: 6px; padding: 8px 12px; }
  #active-activity .field-legend-sprite { width: 24px; height: 24px; }
}

/* Touch: no key numbers; the d-pad rests while a round runs (walking away ends
   it), so the card takes the d-pad's place instead of floating above it. */
@media (pointer: coarse) {
  #active-activity .field-key { display: none; }
  body:has(#active-activity[data-phase="playing"]:not([hidden])) #touch-controls { display: none !important; }
  body:has(#touch-controls:not([hidden])):has(#active-activity[data-phase="playing"]:not([hidden])) #status-stack { bottom: var(--sheet-bottom); }
}
/* Phones keep the music and chat row clear, as the shell does. */
@media (pointer: coarse) and (max-width: 760px) {
  body:has(#touch-controls:not([hidden])):has(#active-activity[data-phase="playing"]:not([hidden])) #status-stack { bottom: calc(var(--hud-edge) + var(--dock-h) + 64px); }
}
@media (pointer: coarse) and (max-height: 560px) {
  body:has(#touch-controls:not([hidden])):has(#active-activity[data-phase="playing"]:not([hidden])) #status-stack {
    left: 50%;
    right: auto;
    width: min(620px, calc(100vw - 2 * var(--hud-edge)));
    transform: translateX(-50%);
  }
}

/* ---------- Field journal ---------- */
#adventure-dialog .field-journal-pace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 4px; }
#adventure-dialog .field-journal-pace .button { min-height: 38px; }
#adventure-dialog .field-gentle[aria-pressed="true"] { background: #e3efcf; }
#adventure-dialog .field-gentle[aria-disabled="true"] { opacity: .6; cursor: default; }
#adventure-dialog .field-journal-note { font-size: 13px; color: var(--cz-cocoa-soft); }
#adventure-dialog .field-card.is-done { opacity: .72; }