/* =====================================================================
   Round 3 (Agent P): the minigame coach (client/features/coach.js) — diegetic prompts, timing meters,
   judgement stamps, tutorial beats and the goal slip — plus a re-skin of the life-feature world labels
   (.lf-wl) and ingredient strips (.lf-strip) in the field-journal style.
   World labels are positioned by the activity host (translate(-50%,-100%) at a projected point).
   ===================================================================== */

/* ---------- world labels: ink on paper tags instead of navy boxes */
body .lf-wl { font-family: var(--font-ui); font-size: 0.86rem; color: #fff8e6; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8); }
body .lf-wl .k { font-size: 0.72rem; }
body .lf-wl .sub { font-family: var(--font-prose); font-style: italic; font-size: 0.85rem; color: #eadfc4; }
body .lf-wl.card { color: var(--ink); text-shadow: none; padding: 0.4rem 0.75rem 0.45rem; border: 0; border-radius: var(--r-sm); line-height: 1.3;
  background: var(--grain), linear-gradient(176deg, #f6ecd2, #e8d8b2); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(31, 42, 74, 0.279), inset 0 0 1rem rgba(112, 72, 26, 0.18); }
body .lf-wl.card b { font-family: var(--font-print); font-weight: 400; font-size: 1.05rem; color: var(--ink); letter-spacing: 0.03em; }
body .lf-wl.card .sub { color: var(--ink-soft); text-shadow: none; }
body .lf-wl.good, body .lf-wl.bad, body .lf-wl.gold { font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; letter-spacing: 0.01em; }
body .lf-wl.good { color: #c8f5c0; } .lf-wl.bad { color: #ffc0b0; } .lf-wl.gold { color: #ffe08a; font-size: 1.7rem; }
body .lf-strip { background: var(--grain), linear-gradient(176deg, rgba(246, 236, 210, 0.96), rgba(232, 216, 178, 0.96)); border: 0; border-radius: var(--r-sm); color: var(--ink); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(31, 42, 74, 0.31); padding: 0.35rem 0.8rem; font-family: var(--font-ui); }
body .lf-strip .lab { color: var(--ink); font-family: var(--font-print); font-size: 1rem; }
body .lf-strip .ch { color: var(--ink-soft); } .lf-strip .ch .n { color: var(--ink); font-weight: 800; }
body .lf-strip .ch:hover { border-color: rgba(44, 74, 99, 0.5); }
body .lf-strip .ch.sel { border-color: var(--ink-red); background: rgba(255, 240, 190, 0.7); }
body .lf-strip .ch .k { color: var(--ink-blue); font-weight: 800; }
body .lf-strip .lf-key { background: linear-gradient(180deg, #f6ecd2, #dccba3); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(90, 64, 30, 0.45), 0 0 0 1px rgba(167, 132, 63, 0.9); }

/* ---------- PROMPT: one big keycap + verb, anchored in the world */
body .lf-wl.cg-prompt { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; transform: translate(-50%, -100%); }
.cg-prompt .cg-p__k { display: inline-flex; gap: 0.2rem; }
.cg-prompt .cg-p__k .ui-key { min-width: 2rem; height: 1.9rem; padding: 0 0.5rem; font-size: 0.85rem; background: linear-gradient(180deg, #fbf3dc, #dfcda4); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(90, 64, 30, 0.5), 0 0 0 1.5px rgba(167, 132, 63, 0.95), 0 3px 6px rgba(0, 0, 0, 0.55); border-radius: 0.4rem; }
.cg-prompt .cg-p__v { font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; line-height: 1; color: #fff8e6; text-shadow: 0 2px 3px #000, 0 0 8px rgba(0, 0, 0, 0.85); }
.cg-prompt .cg-p__s { font-family: var(--font-prose); font-style: italic; font-size: 0.88rem; color: #eadfc4; text-shadow: 0 1px 2px #000; }
.cg-prompt.is-wait .cg-p__k { opacity: 0.45; filter: grayscale(0.6); }
.cg-prompt.is-wait .cg-p__v { color: #d8ccb0; font-size: 1.25rem; }
.cg-prompt.is-hot .cg-p__k .ui-key { animation: cg-hot 0.42s ease-in-out infinite alternate; background: linear-gradient(180deg, #fff6c8, #f2cf6a); box-shadow: inset 0 -3px 0 rgba(120, 80, 20, 0.5), 0 0 0 2px #fff1b0, 0 0 16px 4px rgba(255, 210, 90, 0.85); }
.cg-prompt.is-hot .cg-p__v { color: #ffe08a; }
@keyframes cg-hot { to { transform: translateY(-3px) scale(1.08); } }

/* ---------- METER: a visible timing window */
body .lf-wl.cg-meter { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; transform: translate(-50%, -100%); }
.cg-m__l { font-family: var(--font-display); font-weight: 900; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #f2e6c8; text-shadow: 0 1px 2px #000; }
.cg-m__track { position: relative; display: block; width: var(--w, 9rem); height: 0.8rem; border-radius: 0.4rem; background: rgba(20, 14, 10, 0.78); box-shadow: 0 0 0 1.5px rgba(242, 230, 200, 0.75), 0 2px 6px rgba(0, 0, 0, 0.6); overflow: visible; }
.cg-m__z { position: absolute; top: 1px; bottom: 1px; border-radius: var(--r-sm); }
.cg-m__z--good { background: rgba(110, 190, 110, 0.85); }
.cg-m__z--perfect { background: linear-gradient(180deg, #fff1b0, #f0c040); box-shadow: 0 0 8px rgba(255, 210, 90, 0.9); }
.cg-m__z--bad { background: rgba(220, 90, 70, 0.75); }
.cg-m__n { position: absolute; top: -0.42rem; width: 0; height: 0; margin-left: -0.42rem; border-left: 0.42rem solid transparent; border-right: 0.42rem solid transparent; border-top: 0.55rem solid #fff; filter: drop-shadow(0 1px 1px #000); transition: left 40ms linear; }
.cg-m__n::after { content: ''; position: absolute; left: -1px; top: -0.1rem; width: 2px; height: 1.25rem; background: #fff; box-shadow: 0 0 3px #000; }
.cg-meter.is-hot .cg-m__track { box-shadow: 0 0 0 2px #ffe08a, 0 0 14px rgba(255, 210, 90, 0.8); }

/* ---------- JUDGE: a stamped result */
body .lf-wl.cg-judge { display: flex; flex-direction: column; align-items: center; animation: cg-stamp 0.28s var(--ease-back) both; }
.cg-j__w { font-family: var(--font-print); font-size: 1.7rem; letter-spacing: 0.06em; line-height: 1; padding: 0.15rem 0.55rem; border: 2.5px solid currentColor; border-radius: 4px; transform: rotate(-6deg); background: rgba(20, 14, 10, 0.35); text-shadow: 0 2px 3px #000; }
.cg-j__s { margin-top: 0.25rem; font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: #fff3dc; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.cg-judge--perfect .cg-j__w { color: #ffd76a; box-shadow: 0 0 18px rgba(255, 210, 90, 0.7); }
.cg-judge--good .cg-j__w { color: #a8ec9e; } .cg-judge--ok .cg-j__w { color: #e8e0c8; font-size: 1.4rem; }
.cg-judge--miss .cg-j__w { color: #ff9a84; font-size: 1.5rem; }
@keyframes cg-stamp { from { transform: translate(-50%, -100%) scale(1.8); opacity: 0; } }

/* ---------- BEAT: pause-and-explain card (tutorial) */
.cg-beat { position: absolute; left: 50%; bottom: calc(var(--gutter) + var(--hints-h) + 4.5rem); transform: translateX(-50%) rotate(-0.5deg); pointer-events: auto; cursor: pointer; white-space: normal; width: min(25rem, 86vw); text-align: left; color: var(--ink); text-shadow: none; padding: 0.8rem 1.05rem 0.7rem; border-radius: var(--r-sm); z-index: calc(var(--z-dialog) - 1);
  background: var(--fj-foxing), var(--grain), linear-gradient(176deg, #f8efd8, #ead9b0); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(31, 42, 74, 0.31), inset 0 0 1.2rem rgba(112, 72, 26, 0.2); animation: cg-beat-in 0.35s var(--ease-out) both; }

.cg-beat::before { content: ''; position: absolute; left: 50%; top: -0.55rem; width: 3.8rem; height: 1.1rem; margin-left: -1.9rem; background: rgba(236, 222, 176, 0.8); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transform: rotate(-3deg); clip-path: polygon(2% 8%, 8% 0, 92% 4%, 99% 0, 97% 50%, 100% 94%, 90% 100%, 6% 96%, 0 100%, 3% 50%); }
@keyframes cg-beat-in { from { opacity: 0; transform: translate(-50%, 0.8rem) rotate(-2deg); } }
body .lf-wl.is-hidden { display: none !important; }
.cg-b__t { font-family: var(--font-print); font-size: 1.22rem; line-height: 1.1; color: var(--ink); }
.cg-b__x { font-family: var(--font-prose); font-size: 1rem; line-height: 1.35; margin: 0.3rem 0 0.4rem; color: var(--ink); }
.cg-b__x em { font-style: normal; font-weight: 700; color: var(--ink-red); }
.cg-b__keys { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.cg-b__keys span { display: inline-flex; align-items: center; gap: 0.35rem; }
.cg-b__keys em { font-family: var(--font-hand); font-style: normal; font-weight: 700; font-size: 1.1rem; color: var(--ink-blue); }
.cg-b__f { margin-top: 0.45rem; padding-top: 0.35rem; border-top: 1px dashed rgba(31, 42, 74, 0.217); font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.35rem; }
.cg-b__bar { display: block; height: 3px; flex: 1; background: var(--ink-blue); transform-origin: left; animation: cg-bar 1.6s linear both; }
@keyframes cg-bar { to { transform: scaleX(0); } }
body .lf-wl.cg-remind { white-space: normal; max-width: 18rem; text-align: center; color: #fff8e6; }
body .lf-wl.cg-remind b { display: block; font-family: var(--font-hand); font-size: 1.3rem; }
body .lf-wl.cg-remind .cg-b__keys { justify-content: center; } .lf-wl.cg-remind .cg-b__keys em { color: #f2e6c8; text-shadow: 0 1px 2px #000; }
body.cg-paused #gl { filter: saturate(0.75) brightness(0.82); transition: filter 0.3s; }

/* ---------- GOAL slip (top-left field note) */
.cg-goal { position: absolute; left: var(--gutter); top: var(--gutter); z-index: var(--z-hud); width: min(17.5rem, 42vw); padding: 0.55rem 0.85rem 0.6rem; color: var(--ink); pointer-events: none; transform: rotate(-0.8deg);
  background: var(--fj-foxing), var(--grain), linear-gradient(176deg, #f6ecd2, #e6d4ab); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(31, 42, 74, 0.279), inset 0 0 1rem rgba(112, 72, 26, 0.2); animation: cg-goal-in 0.5s var(--ease-out) both; -webkit-mask-box-image: var(--fj-torn) 16 round; }
@keyframes cg-goal-in { from { opacity: 0; transform: translateY(-0.8rem) rotate(-3deg); } }
.cg-goal__t { font-family: var(--font-print); font-size: 1.15rem; letter-spacing: 0.04em; line-height: 1.1; }
.cg-goal__g { font-family: var(--font-prose); font-size: 0.95rem; line-height: 1.3; margin-top: 0.15rem; color: var(--ink); }
.cg-goal__g b { color: var(--ink-red); font-weight: 600; }
.cg-goal__p { font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--ink-blue); margin-top: 0.15rem; min-height: 0.2rem; }
.cg-goal__p:empty { display: none; }
.cg-goal__p.is-bump { animation: cg-bump 0.35s var(--ease-back); }
@keyframes cg-bump { 40% { transform: scale(1.08); } }
.cg-goal__l { margin-top: 0.3rem; padding-top: 0.25rem; border-top: 1px dashed rgba(31, 42, 74, 0.217); font-family: var(--font-display); font-weight: 900; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-green); }
.cg-goal.is-done .cg-goal__p { color: var(--ink-green); }
@media (max-width: 720px) { .cg-goal { width: 60vw; font-size: 0.9em; } }
body .lf-wl .fo-why { display: block; white-space: normal; max-width: 21rem; margin: 0.2rem auto 0; font-size: 0.82rem; }
body .lf-wl .fo-pct { font-family: var(--font-ui); font-weight: 800; color: var(--ink-blue); }
.cg-beat .cg-b__p { float: left; width: 3rem; height: 3rem; margin: 0 0.7rem 0.2rem 0; image-rendering: pixelated; background: #fbf6ea; padding: 0.12rem; box-shadow: 0 2px 4px rgba(15, 30, 70, 0.28); transform: rotate(-3deg); }
.cg-beat .k, body .lf-wl.cg-remind .k { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.2rem; padding: 0 0.3rem; border-radius: var(--r-sm); font: 800 0.66rem/1 var(--font-ui); color: #2b2118; background: linear-gradient(180deg, #f6ecd2, #dccba3); box-shadow: inset 0 -2px 0 rgba(90, 64, 30, 0.45), 0 0 0 1px rgba(167, 132, 63, 0.9); vertical-align: 0.08rem; text-shadow: none; }
.cg-beat .cg-b__f { clear: both; }
body .lf-wl.cg-remind .cg-r__x { display: block; font-family: var(--font-prose); font-size: 0.95rem; line-height: 1.3; color: #fff3dc; text-shadow: 0 1px 2px #000, 0 0 6px #000; }

/* ---------- Agent GG: cooking together (client/features/coop_pot.js) — the roster card beside the pot,
   name plates on the partners' sprites, partner tags, and the "F Help cook" invite pill */
.cg-goal .cp-roster { margin-top: 0.35rem; padding-top: 0.3rem; border-top: 1px dashed rgba(90, 66, 36, 0.35); }
.cg-goal .cp-roster:empty { display: none; }
.cp-roster .sub { display: block; font: 700 0.68rem/1.2 var(--font-ui); letter-spacing: 0.04em; color: var(--ink-soft); }
.cp-roster .cp-rows { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.cp-roster .cp-r { display: grid; grid-template-columns: 1.6rem 1fr; grid-template-areas: "p n" "p r"; column-gap: 0.4rem; align-items: center; padding: 0.15rem 0.25rem; border-radius: var(--r-sm); }
.cp-roster .cp-r.is-me { background: rgba(255, 240, 190, 0.6); box-shadow: inset 0 0 0 1px rgba(167, 132, 63, 0.55); }
.cp-roster .cp-r.is-inv { opacity: 0.62; grid-template-areas: "n n" "r r"; }
.cp-roster .cp-r img { grid-area: p; width: 1.6rem; height: 1.6rem; border-radius: var(--r-sm); image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(120, 88, 44, 0.6); }
.cp-roster .cp-n { grid-area: n; font-family: var(--font-print); font-size: 0.92rem; color: var(--ink); line-height: 1.1; }
.cp-roster .cp-n em { font-family: var(--font-hand); font-style: normal; color: var(--ink-blue); font-size: 0.95rem; }
.cp-roster .cp-roles { grid-area: r; display: flex; flex-wrap: wrap; gap: 0.2rem; }
.cp-roster .cp-roles i { font: 700 0.68rem/1.25 var(--font-ui); font-style: normal; color: var(--ink-soft); padding: 0 0.35rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(120, 88, 44, 0.45); }
.cp-roster .cp-roles i.is-on { color: #fff8e6; background: var(--ink-blue); box-shadow: none; }
.cp-roster .cp-roles i.is-done { color: var(--ink-green); box-shadow: inset 0 0 0 1px currentColor; }
body .lf-wl.cp-plate .cp-name { font: 800 0.72rem/1 var(--font-ui); color: var(--other); text-shadow: var(--text-outline); letter-spacing: 0.02em; }
body .lf-wl.cp-tag { display: flex; flex-direction: column; align-items: center; }
body .lf-wl.cp-tag b { font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--other); }
body .lf-wl.cp-tag .sub { color: #fff3dc; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.cp-invite { position: absolute; left: 50%; bottom: calc(var(--gutter) + 3.6rem); transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem 0.6rem 0.95rem; overflow: hidden;
  color: var(--ink); font-family: var(--font-ui); background: var(--grain), linear-gradient(176deg, #f6ecd2, #e8d8b2); border-radius: 3px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 88, 44, 0.55); animation: cp-in var(--t-slow) var(--ease-back) both; }
.cp-invite .cp-i__t { font-family: var(--font-prose); font-size: 1rem; } .cp-invite .cp-i__t b { font-family: var(--font-print); font-weight: 400; color: var(--ink-blue); }
.cp-invite button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font: 800 0.82rem/1 var(--font-ui); color: var(--ink); padding: 0.3rem 0.5rem; border-radius: var(--r-sm); }
.cp-invite .cp-i__go { background: rgba(255, 240, 190, 0.9); box-shadow: inset 0 0 0 1px rgba(167, 132, 63, 0.9); }
.cp-invite button:hover, .cp-invite button:focus-visible { background: rgba(255, 228, 160, 1); }
.cp-invite .cp-i__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold-lo); transform-origin: left center; }
@keyframes cp-in { from { opacity: 0; transform: translate(-50%, 0.8rem); } }

/* ---------- COMBAT TUTORIAL (round 4): Pip's lesson card, the BEAT card plus keyboard + gamepad rows (client/ui/combat_tutorial.js) */
.cg-beat.ct-card { width: min(29rem, 90vw); bottom: auto; top: 18%; z-index: calc(var(--z-dialog) + 2); }
.ct-card .cg-b__t small { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-soft); }
.ct-card .ct-n { float: right; font: 800 0.7rem/1.6 var(--font-ui); letter-spacing: 0.08em; color: var(--ink-soft); }
.ct-card .cg-b__x { min-height: 2.7em; font-size: 1.06rem; }
.ct-keys { clear: both; display: grid; gap: 0.3rem; margin: 0.15rem 0 0.1rem; padding: 0.4rem 0.5rem; background: rgba(255, 250, 235, 0.55); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(167, 132, 63, 0.35); }
.ct-row { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 0.5rem; }
.ct-row > b { font: 800 0.62rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ct-row .ui-key { font-size: 0.72rem; }
.ct-card .cg-b__f { justify-content: space-between; flex-wrap: wrap; }
.ct-dots { display: inline-flex; gap: 0.25rem; } .ct-dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: rgba(31, 42, 74, 0.25); } .ct-dots i.on { background: var(--ink-blue); }
.ct-skip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-hand); font-size: 1.02rem; color: var(--ink-soft); padding: 0.1rem 0.35rem; border-radius: var(--r-sm); }
.ct-skip:hover, .ct-skip:focus-visible { color: var(--ink-red); background: rgba(255, 228, 160, 0.6); }