/* Rolfe Legends — warm farm palette, chunky cards, tablet-first */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --barn: #b5413a;
  --barn-dark: #8e2f29;
  --hay: #e8b94e;
  --hay-dark: #c99a2e;
  --sky: #8ecae6;
  --sky-deep: #5ba3c9;
  --grass: #5a8f4f;
  --grass-dark: #44703b;
  --cream: #fdf6e3;
  --ink: #3b2f2f;
  --card-bg: #fffaf0;
  --bad: #c0392b;
  --good: #2e8b57;
  --gold: #f1c40f;
  --shadow: 0 4px 0 rgba(59, 47, 47, .22);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  background: #2a1d14; /* warm dusk — the ultimate fallback tone; painted art layers sit on top (no green/blue bleed) */
  color: var(--ink);
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
  touch-action: manipulation;
}
/* the centered game column carries the active screen's art, sharp; it doesn't scroll
   (the .screen inside it does), so the art stays put while content scrolls over it. */
/* sharp center column. background-IMAGE is set directly by setScreenBg() in JS (not via a CSS
   var in a `background` shorthand — that pattern doesn't paint on iOS Safari). z-index keeps the
   column above the fixed backdrop. */
#app { max-width: 520px; height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; position: relative; z-index: 1; background-position: center; background-size: cover; background-repeat: no-repeat; }

/* blurred letterbox backdrop — on screens wider/taller than the column, the margins show a
   blurred copy of the SAME art (image set per screen via JS), so the page never bleeds green/blue.
   iOS-safe: positive z-index (NOT -1) and overscan via negative inset (NOT transform:scale) — a
   fixed element with negative z-index + filter + transform renders blank on Mobile Safari. */
.screen-backdrop {
  position: fixed; inset: -40px; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  -webkit-filter: blur(40px) brightness(0.55) saturate(0.9);
  filter: blur(40px) brightness(0.55) saturate(0.9);
}

button {
  font-family: inherit; font-weight: 600; color: var(--ink);
  background: var(--hay); border: 3px solid var(--ink); border-radius: 14px;
  padding: 10px 22px; font-size: 18px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease;
}
button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(59,47,47,.22); }
button.primary { background: var(--barn); color: var(--cream); }
button.quiet { background: var(--cream); font-size: 15px; padding: 7px 14px; }
button:disabled { opacity: .45; pointer-events: none; }

/* ---------- screens ---------- */
.screen { flex: 1; display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
.screen h1, .screen h2 { text-align: center; }

/* legibility over the painted screen art: titles + section labels float directly on the scene
   (no opaque panel behind them), so light them with a soft shadow. Panels/cards keep their own
   cream backings and dark text — these rules only hit DIRECT-on-art text, never panel contents. */
.screen > h1, .screen > h2, .screen > p, .builder > h2, .builder .cathead, .builder > .deckmeta {
  color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.35);
}
.builder .cathead { border-bottom-color: rgba(253,246,227,.45); }

/* ---------- painted art (drop-in PNGs; emoji fallback keeps current look) ---------- */
.art img { width: 100%; height: 48px; object-fit: cover; border-radius: 7px; display: block; border: 1.5px solid rgba(59,47,47,.35); }
.critter .art img { height: 38px; }
.showcard .handcard .art img { height: 92px; }
.reveal-card .art img { height: 88px; width: 88px; }
.face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hero-bar .face { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; }
.coach .cap img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; border: 2.5px solid var(--ink); display: block; }
.big-art { width: 124px; height: 124px; margin: 4px auto; font-size: 56px; display: grid; place-items: center; }
.big-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 3px solid var(--ink); box-shadow: var(--shadow); display: block; }

/* title (its art now comes from #app's --col-bg + the blurred backdrop, like every screen) */
.title-screen { justify-content: center; gap: 18px; }
.game-sign {
  background: linear-gradient(180deg, #a0622d, #7c4a1f);
  color: var(--cream); padding: 22px 30px 18px; border-radius: 18px;
  border: 4px solid #5d3617; box-shadow: 0 8px 0 #4a2b12, 0 14px 24px rgba(0,0,0,.25);
  text-align: center; transform: rotate(-1.5deg);
}
.game-sign .t1 { font-size: 44px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 3px 0 #4a2b12; line-height: 1; }
.game-sign .t2 { font-size: 15px; margin-top: 8px; color: var(--hay); font-weight: 500; }
.title-balloon { font-size: 15px; background: var(--cream); border: 3px solid var(--ink); padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); }
.title-btns { display: flex; flex-direction: column; gap: 12px; width: 240px; }
.title-btns button { font-size: 20px; padding: 13px; }
.title-llama { font-size: 44px; position: absolute; bottom: 18px; right: 22px; cursor: pointer; transition: transform .15s; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.title-llama:active { transform: scale(1.25) rotate(-8deg); }
/* fullscreen chip (ported from RL2): opposite corner from Goldie */
.fs-btn {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 40;
  width: 46px; height: 46px; padding: 0; border-radius: 12px; border: 3px solid var(--ink);
  background: var(--cream); color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
}
.fs-btn:active { transform: scale(.92); }

/* map */
.map-path { display: flex; flex-direction: column-reverse; gap: 10px; width: 100%; max-width: 360px; margin-top: 8px; }
.map-node {
  display: flex; align-items: center; gap: 14px; background: var(--cream);
  border: 3px solid var(--ink); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow);
  opacity: .7; /* locked nodes: solid enough to read over the painted map, still dimmer than beaten/current */
}
.map-node .face { font-size: 34px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--sky); border-radius: 50%; border: 2.5px solid var(--ink); overflow: hidden; }
.map-node .face.mystery { background: linear-gradient(135deg, #8a8276, #5f574b); color: #ffe9b3; font-size: 26px; font-weight: 700; }
.map-node .who { flex: 1; }
.map-node .who .nm { font-weight: 700; font-size: 18px; }
.map-node .who .tt { font-size: 13px; opacity: .75; }
.map-node .st { font-size: 24px; }
.map-node.beaten { opacity: .85; background: #e9f7e9; }
.map-node.current { opacity: 1; outline: 3px solid var(--gold); animation: pulse 1.6s infinite; cursor: pointer; }
.map-node.locked { filter: grayscale(.7); }
.map-crown { text-align: center; font-size: 40px; margin-top: 4px; opacity: .5; }
.map-crown.earned { opacity: 1; animation: pulse 1.6s infinite; }
.map-bar { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
/* tutorial attention-grabber (e.g. the 📜 log button when the log tip fires) */
.pulse-hint { animation: hintpulse .8s ease-in-out infinite; outline: 3px solid var(--gold); border-radius: 12px; }
@keyframes hintpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ---------- battle ---------- */
.battle { flex: 1; display: flex; flex-direction: column; padding: 38px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; min-height: 0; }

/* per-boss painted stage: the full `background` (scrim gradients over the photo) is set directly
   in JS by applyBattleBg() once the PNG loads — NOT via a CSS var in a shorthand, which fails to
   paint on iOS Safari. A missing background just leaves the generic gradient showing through.
   The legibility rules below (.has-bg .midbar etc.) stay in CSS. */
/* the two functional bits that float directly on the photo (no opaque card behind them):
   the energy readout and the turn label. Give them a subtle bar + light text so they read on any scene. */
.battle.has-bg .midbar { background: rgba(28, 20, 15, 0.40); border-radius: 12px; padding: 5px 10px; }
.battle.has-bg .energy { color: var(--cream); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.battle.has-bg .turnlabel { color: var(--cream); opacity: 0.92; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
/* empty-field placeholders read as faint LIGHT text on the scrim, not invisible dark text */
.battle.has-bg .boardrow > div:not(.critter) span { color: rgba(253, 246, 227, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.hero-bar { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; box-shadow: var(--shadow); }
.hero-bar .face { font-size: 30px; }
.hero-bar .face.enraged-face { box-shadow: 0 0 0 2px #e53935, 0 0 12px 3px rgba(229,57,53,.85); animation: enragepulse 1s ease-in-out infinite; }
@keyframes enragepulse { 0%,100% { box-shadow: 0 0 0 2px #e53935, 0 0 10px 2px rgba(229,57,53,.7); } 50% { box-shadow: 0 0 0 2px #ff7043, 0 0 16px 5px rgba(255,87,34,.95); } }
.hero-bar .nm { font-weight: 700; font-size: 16px; flex: 1; line-height: 1.1; }
.hero-bar .nm .sub { display: block; font-size: 11px; font-weight: 500; opacity: .7; }
.hero-bar .hp { font-weight: 700; font-size: 20px; color: var(--barn); white-space: nowrap; }
.hero-bar .threat { font-size: 12px; background: #ffe9e6; border: 2px solid var(--barn); color: var(--barn-dark); border-radius: 999px; padding: 3px 9px; font-weight: 600; white-space: nowrap; }
.hero-bar.me { border-color: var(--grass-dark); }
.hero-bar.targetable { outline: 4px solid var(--gold); cursor: pointer; animation: pulse 1s infinite; }
/* attacking the enemy hero: make the WHOLE highlighted bar the tap target. Lift it above the opp-hand / 🃏 count
   pill (which can clip the bar's lower-right), and add a forgiving vertical hit margin via a transparent overlay
   so a tap anywhere on — or just above/below — the highlighted bar lands the hit, not just near the avatar. */
.hero-bar.foe.targetable { position: relative; z-index: 6; }
.hero-bar.foe.targetable::after { content: ''; position: absolute; inset: -14px 0; z-index: 1; }

.boardrow { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 92px; flex: 1; padding: 4px; border-radius: 14px; }
.boardrow.mine.playable-zone { outline: 3px dashed var(--gold); background: rgba(241,196,15,.12); }

.critter {
  width: 76px; min-height: 84px; background: var(--card-bg); border: 3px solid var(--ink); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 2px;
  position: relative; box-shadow: var(--shadow); transition: transform .12s ease;
}
.critter .art { font-size: 30px; line-height: 1.15; }
.critter .cnm { font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.05; }
.critter .stats { display: flex; justify-content: space-between; width: 100%; padding: 0 4px; font-size: 14px; font-weight: 700; }
.critter .stats .a { color: var(--sky-deep); } .critter .stats .h { color: var(--barn); } /* attack=blue, health=red */
.critter .badge { position: absolute; top: -10px; right: -7px; font-size: 15px; }
.critter.sick::after { content: '💤'; position: absolute; top: -10px; left: -7px; font-size: 15px; }
.critter.ready { border-color: var(--grass-dark); box-shadow: 0 0 0 2.5px var(--grass), var(--shadow); cursor: pointer; }
.critter.selected { transform: translateY(-7px) scale(1.06); outline: 4px solid var(--gold); z-index: 3; }
.critter.targetable { outline: 4px solid var(--gold); cursor: pointer; animation: pulse 1s infinite; }
.critter.buffed { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.16); } }
.critter.hurt { animation: shake .3s ease; }
@keyframes shake { 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }

.midbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.energy { display: flex; gap: 3px; align-items: center; font-size: 17px; }
.energy .pip { opacity: .25; } .energy .pip.on { opacity: 1; }
.endturn { font-size: 16px; padding: 9px 18px; background: var(--grass); color: var(--cream); }
.turnlabel { font-size: 13px; font-weight: 600; opacity: .8; }

.hand { display: flex; gap: 6px; justify-content: center; align-items: flex-end; min-height: 124px; padding: 2px 2px 4px; flex-wrap: nowrap; }
.handcard {
  width: 78px; height: 112px; background: var(--card-bg); border: 3px solid var(--ink); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; padding: 3px;
  position: relative; box-shadow: var(--shadow); flex-shrink: 1; min-width: 56px;
  transition: transform .12s ease; cursor: pointer;
}
.handcard .cost {
  position: absolute; top: -9px; left: -7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--hay); color: var(--ink); border: 2.5px solid var(--ink); /* yellow = energy cost (matches ⚡) */
  display: grid; place-items: center; font-size: 13px; font-weight: 700; z-index: 2;
}
.handcard .art { font-size: 27px; margin-top: 5px; }
.handcard .cnm { font-size: 9px; font-weight: 700; text-align: center; line-height: 1.05; margin-top: 1px; }
.handcard .ctx { font-size: 7.8px; text-align: center; line-height: 1.15; opacity: .85; margin-top: 1px; padding: 0 1px; }
.handcard .stats { display: flex; justify-content: space-between; width: 100%; padding: 0 5px; font-size: 13px; font-weight: 700; margin-top: auto; }
.handcard .stats .a { color: var(--sky-deep); } .handcard .stats .h { color: var(--barn); } /* attack=blue, health=red */
.handcard.unplayable { opacity: .55; filter: saturate(.5); }
.handcard.selected { transform: translateY(-16px) scale(1.12); outline: 4px solid var(--gold); z-index: 5; }
.handcard.legendary { background: linear-gradient(160deg, #fff9e3, #ffe9b3); border-color: #9a7b1c; }

.opp-hand { display: flex; justify-content: center; align-items: center; min-height: 20px; }
.opp-hand .back {
  width: 30px; height: 42px; margin: -24px 0 0 -10px;
  background: var(--barn) linear-gradient(135deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%);
  background-size: 9px 9px;
  border: 2.5px solid var(--ink); border-radius: 6px;
  display: grid; place-items: center; color: rgba(255, 240, 220, .85); font-size: 13px;
  box-shadow: 0 2px 0 rgba(59,47,47,.25);
}
.opp-hand .back:first-child { margin-left: 0; }
.opp-hand .backcount { font-size: 12px; font-weight: 700; margin: -20px 0 0 8px; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 8px; }

/* targeting telegraphs */
.aim { outline: 4px solid #e74c3c !important; outline-offset: 2px; border-radius: 12px; }
.aim-from { outline: 4px solid var(--gold) !important; outline-offset: 2px; }
.energychip { font-size: 13px; background: #e8f4fb; border: 2px solid var(--sky-deep); color: #20618a; border-radius: 999px; padding: 3px 9px; font-weight: 700; white-space: nowrap; }

/* AI card play preview — blocks until tapped so slow readers can read it */
.showcard { position: fixed; inset: 0; display: grid; place-items: center; z-index: 70; }
.showcard.blocking { background: rgba(45, 35, 30, .35); cursor: pointer; animation: fadein .2s ease; }
.showcard .handcard { width: 158px; height: 226px; animation: showcardpop .4s cubic-bezier(.2,1.5,.4,1); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.showcard .handcard .art { font-size: 56px; margin-top: 16px; }
.showcard .handcard .cnm { font-size: 16px; }
.showcard .handcard .ctx { font-size: 12.5px; margin-top: 4px; }
.showcard .handcard .stats { font-size: 19px; }
.showcard .handcard .cost { width: 36px; height: 36px; font-size: 19px; }
.showcard .tapnote { position: absolute; bottom: 12dvh; left: 0; right: 0; text-align: center; color: var(--cream); font-weight: 600; font-size: 15px; text-shadow: 0 2px 4px rgba(0,0,0,.5); animation: pulse 1.4s infinite; }
.showcard-banner { position: absolute; top: 11dvh; left: 50%; transform: translateX(-50%); background: var(--barn); color: var(--cream); border: 3px solid var(--ink); border-radius: 999px; padding: 8px 22px; font-weight: 700; font-size: 18px; box-shadow: var(--shadow); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; animation: coachin .25s ease; }
@keyframes showcardpop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 70% { transform: scale(1.06) rotate(1deg); } 100% { transform: scale(1); opacity: 1; } }

/* live side-log — landscape/wide only, toggled by 📜; sits in the right margin beside the column */
.log-side {
  position: fixed; top: 56px; bottom: 56px; right: 12px;
  width: min(260px, calc((100vw - 540px) / 2));
  background: rgba(253, 246, 227, 0.95); border: 3px solid var(--ink); border-radius: 14px;
  padding: 8px 10px; box-shadow: var(--shadow); z-index: 40;
  display: flex; flex-direction: column; animation: coachin .2s ease;
}
.log-side-title { font-weight: 700; font-size: 14px; text-align: center; padding-bottom: 5px; border-bottom: 2px solid rgba(59,47,47,.25); margin-bottom: 4px; }
.log-side-list { overflow-y: auto; display: flex; flex-direction: column; }
.log-side-list .logline { font-size: 12px; line-height: 1.3; padding: 3px 1px; border-bottom: 1px dashed rgba(59,47,47,.13); }
.log-side-list .logline:first-child { animation: logflash 1s ease; border-radius: 5px; } /* newest line flashes as it arrives */
@keyframes logflash { 0% { background: rgba(241,196,15,.55); } 100% { background: transparent; } }
.logbtn.on { background: var(--gold); outline: 2px solid var(--ink); }
/* round Coach James button — tap for the current boss's strategy tip. Portrait is the button's
   own background-image (set inline in JS); no nested element. */
.coachbtn { padding: 0; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ink); background-color: var(--sky); background-size: cover; background-position: center 20%; box-shadow: var(--shadow); font-size: 16px; }

/* battle log (modal) */
.logpanel { text-align: left; }
.logpanel h2 { text-align: center; }
.loglist { max-height: 52dvh; overflow-y: auto; margin: 10px 0 14px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fffdf6; padding: 8px 10px; }
.logline { font-size: 13.5px; padding: 4px 2px; border-bottom: 1px dashed rgba(59,47,47,.18); line-height: 1.3; }
.logline:last-child { border-bottom: none; }
.logpanel button { display: block; margin: 0 auto; }

/* deck scorecard + builder shelves */
.statrow { font-size: 14px; font-weight: 600; white-space: nowrap; }
.strs { letter-spacing: 1px; color: var(--hay-dark); font-size: 13px; }
.shelves { width: 100%; }
.cathead { font-weight: 700; font-size: 16px; margin: 14px 2px 6px; padding-bottom: 3px; border-bottom: 3px solid rgba(59,47,47,.25); }
.presetrow .preset .pstats { font-size: 10.5px; font-weight: 600; opacity: .85; margin-top: 2px; }

/* prefight scout report */
.scout { background: #fffdf6; border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 12px 10px; margin: 8px 0 12px; }
.scout-title { font-weight: 700; font-size: 13px; letter-spacing: 1px; margin-bottom: 4px; }
.scout table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.scout th { font-size: 12.5px; padding-bottom: 3px; }
.scout td { padding: 2px 4px; text-align: center; }
.scout td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }

/* floating combat text */
.float { position: fixed; font-size: 24px; font-weight: 700; pointer-events: none; z-index: 50; animation: floatup .85s ease forwards; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.float.dmg { color: #e74c3c; } .float.healtxt { color: var(--good); }
@keyframes floatup { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }

/* coach bubble */
/* coach bubble floats over the field but must NEVER intercept taps (it would block tap-to-place,
   END TURN, etc.). pointer-events:none lets every tap pass through to the game; bubbles auto-clear
   when the player acts (doAction) or time out. */
.coach { position: fixed; left: 10px; right: 10px; bottom: 12px; max-width: 500px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; z-index: 60; pointer-events: none; animation: coachin .25s ease; }
.coach.high { bottom: 220px; } /* above the Wyatt hero bar, partially over your field — never covers the hand */
@keyframes coachin { from { opacity: 0; transform: translateY(14px); } }
.coach .cap { font-size: 38px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
/* the text box is tappable to dismiss the tip (the cap + gaps stay pointer-events:none so they
   don't block the field/buttons underneath). Tapping bubbles up to .coach's remove() handler. */
.coach .say { position: relative; background: var(--cream); border: 3px solid var(--ink); border-radius: 14px 14px 14px 4px; padding: 9px 22px 9px 13px; font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow); pointer-events: auto; cursor: pointer; }
.coach .say::after { content: '✕'; position: absolute; top: 5px; right: 7px; font-size: 11px; font-weight: 700; opacity: .4; } /* tap-to-dismiss affordance */
.coach .say b { color: var(--barn-dark); }
.coach .say .who { font-size: 11px; font-weight: 700; color: var(--grass-dark); display: block; }

/* overlays */
.overlay { position: fixed; inset: 0; background: rgba(45, 35, 30, .65); display: grid; place-items: center; z-index: 80; animation: fadein .2s ease; padding: 18px; }

/* "How your cards work" primer — labeled sample card shown once before the first fight */
.primer { max-width: 450px; text-align: center; }
.primer-sub { font-size: 13.5px; opacity: .82; margin: -2px 0 12px; }
.primer-row { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.primer-card { flex-shrink: 0; pointer-events: none; }
.primer-key { flex: 1; min-width: 208px; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.primer-key .pk { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.primer-key .pk-i { flex-shrink: 0; min-width: 30px; text-align: center; font-size: 18px; }
.primer-note { background: #fff7e8; border: 2px solid var(--gold); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.4; margin: 4px 0 14px; }

/* boss "you beat me!" reaction panel — the family member's painted face + their line */
.panel.beatline { max-width: 360px; }
.beatline-face { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; border: 4px solid var(--gold); box-shadow: var(--shadow); margin: 0 auto 6px; display: grid; place-items: center; font-size: 52px; background: #2a1d14; }
.beatline-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* battle keyword glossary */
.panel.glossary { max-width: 380px; text-align: left; }
.gloss-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.gloss-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.gloss-row .gloss-i { font-size: 19px; min-width: 26px; text-align: center; flex-shrink: 0; }
@keyframes fadein { from { opacity: 0; } }
.panel { background: var(--cream); border: 4px solid var(--ink); border-radius: 20px; padding: 22px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-height: 86dvh; overflow-y: auto; }
.panel h2 { margin-bottom: 8px; }
.panel .big-emoji { font-size: 56px; margin: 6px 0; }
.panel .btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.install-steps { text-align: left; margin: 12px 2px 0; padding-left: 24px; font-size: 15px; line-height: 1.45; }
.install-steps li { margin: 8px 0; }

/* victory card reveal */
.reveal-card {
  width: 176px; min-height: 232px; margin: 12px auto; background: var(--card-bg);
  border: 4px solid #9a7b1c; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 14px; box-shadow: 0 0 28px rgba(241,196,15,.65); animation: cardin .55s cubic-bezier(.2,1.6,.4,1);
  background: linear-gradient(160deg, #fff9e3, #ffe9b3); box-sizing: border-box;
}
@keyframes cardin { 0% { transform: rotateY(95deg) scale(.6); opacity: 0; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
.reveal-card .art { font-size: 60px; }
.reveal-card .cnm { font-weight: 700; font-size: 16px; margin-top: 10px; text-align: center; line-height: 1.15; }
.reveal-card .ctx { font-size: 11px; text-align: center; opacity: .85; margin-top: 6px; line-height: 1.3; word-wrap: break-word; max-width: 100%; }
.reveal-card .stats { display: flex; justify-content: space-between; width: 100%; margin-top: 12px; font-size: 19px; font-weight: 700; padding: 0 4px; }

/* enrage flash — the final boss's phase-2 power-up moment */
.enrage-flash { position: fixed; inset: 0; z-index: 85; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(229,57,53,0) 30%, rgba(180,20,20,.6) 100%); animation: enrageflash .75s ease-out forwards; }
@keyframes enrageflash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* enrage cutscene — full-screen, tap-to-continue phase-2 reveal (big portrait + plain explanation) */
.enrage-cut { position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(96,20,17,.96), rgba(16,6,5,.995)); animation: fadein .25s ease; }
.enrage-cut-face { width: min(58vw, 220px); height: min(58vw, 220px); border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: #2a1d14; font-size: 118px;
  border: 4px solid #ffb300; box-shadow: 0 0 0 4px #b5413a, 0 12px 40px rgba(0,0,0,.6), 0 0 30px 7px rgba(255,87,34,.8); animation: showcardpop .45s cubic-bezier(.2,1.5,.4,1), enragepulse 1.1s ease-in-out .5s infinite; }
.enrage-cut-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enrage-cut-title { color: #ffd54f; font-size: clamp(22px, 7vw, 33px); font-weight: 800; text-align: center; text-shadow: 0 2px 0 #7a1f1a, 0 0 18px rgba(255,120,40,.9); animation: bumpin .5s ease; }
.enrage-cut-body { color: var(--cream); font-size: clamp(15px, 4.3vw, 18px); line-height: 1.5; text-align: center; max-width: 460px; text-shadow: 0 2px 5px rgba(0,0,0,.6); }
.enrage-cut .tapnote { position: absolute; bottom: 7dvh; left: 0; right: 0; text-align: center; color: var(--cream); font-weight: 600; font-size: 15px; text-shadow: 0 2px 4px rgba(0,0,0,.5); animation: pulse 1.4s infinite; }
@keyframes bumpin { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* a summoned critter pops/bounces in so you SEE it arrive (esp. the enrage dogs) */
.critter.summon-in { animation: summonin .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes summonin { 0% { transform: scale(0) translateY(-16px); opacity: 0; } 60% { transform: scale(1.18) translateY(0); } 100% { transform: scale(1); opacity: 1; } }

/* trick FX — a spell card's emoji flung at its target (motion driven by Web Animations API in JS) */
.trickfx { position: fixed; z-index: 60; font-size: 40px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); will-change: transform, opacity; }
/* bright impact pop where a bolt lands */
.trick-impact { position: fixed; z-index: 61; width: 12px; height: 12px; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,238,170,.98) 0%, rgba(255,130,45,.78) 45%, rgba(255,90,30,0) 72%); animation: trickimpact .38s ease-out forwards; }
@keyframes trickimpact { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 28% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(4.6); } }
/* bounce "poof" puff — soft white smoke instead of the orange damage burst */
.trick-impact.poof { background: radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(214,214,226,.7) 45%, rgba(214,214,226,0) 72%); }
/* MEND — heal sparkles rising over a hero */
.heal-spark { position: fixed; z-index: 60; font-size: 22px; pointer-events: none; transform: translate(-50%,-50%); filter: drop-shadow(0 0 5px rgba(120,255,170,.85)); animation: healrise .85s ease-out forwards; }
@keyframes healrise { 0% { opacity: 0; transform: translate(-50%,-50%) translateY(8px) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) translateY(-46px) scale(1.1); } }
/* BOOST / RALLY / QUACK — the emoji pops up off a powered-up critter */
.buff-pop { position: fixed; z-index: 60; font-size: 32px; pointer-events: none; transform: translate(-50%,-50%); filter: drop-shadow(0 0 7px rgba(255,220,90,.9)); animation: buffpop .6s cubic-bezier(.2,1.5,.4,1) forwards; }
.buff-pop.shock { font-size: 40px; animation-duration: .5s; filter: drop-shadow(0 0 8px rgba(142,202,230,.95)); }
@keyframes buffpop { 0% { opacity: 0; transform: translate(-50%,-50%) translateY(10px) scale(.3); } 45% { opacity: 1; transform: translate(-50%,-50%) translateY(-8px) scale(1.25); } 100% { opacity: 0; transform: translate(-50%,-50%) translateY(-24px) scale(1); } }

/* enraged battlefield — the stage turns blood-red (scrim set in JS) + a pulsing ember vignette
   ringing the arena. Edge-only (transparent center) + pointer-events:none, so the board cards stay
   crisp and tappable; only the rim glows (the hero bars sitting there reads as "the room is angry"). */
.battle.enraged-stage { position: relative; }
.battle.enraged-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 80% 66% at 50% 46%, transparent 56%, rgba(150,12,12,0.45) 100%); animation: enrageglow 1.7s ease-in-out infinite; }
@keyframes enrageglow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- victory credits (the crown roll) ---------- */
.credits { position: fixed; inset: 0; z-index: 80; overflow: hidden; display: flex; flex-direction: column; background: #160a08; }
.credits-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity .4s ease; opacity: 1; }
.credits-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20,8,6,.42) 0%, rgba(20,8,6,.66) 100%); } /* scrim for legibility */
.credits-stage { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center; min-height: 0; }
.credits-caption { position: relative; z-index: 3; min-height: 58px; display: grid; place-items: center; padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); color: var(--cream); font-size: clamp(17px, 5vw, 23px); font-weight: 600; line-height: 1.35; text-shadow: 0 2px 7px rgba(0,0,0,.85); }
.credits-caption.show { animation: capin .42s ease; }
@keyframes capin { from { opacity: 0; transform: translateY(9px); } }
/* karaoke — each word lights up the moment it's sung (held notes/breaks just hold, no creeping fill) */
.credits-caption .cap-inner { text-align: center; line-height: 1.35; } /* words flow inline + wrap, centered */
.credits-caption .cw { color: rgba(253,246,227,.42); text-shadow: 0 2px 5px rgba(0,0,0,.8); transition: color .28s ease, text-shadow .28s ease; }
.credits-caption .cw.lit { color: #fff6de; text-shadow: 0 0 9px rgba(255,228,150,.55), 0 2px 5px rgba(0,0,0,.8); }
.credits-skip { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 10px; z-index: 6; font-size: 12px; padding: 5px 11px; opacity: .5; }
.credits-portrait { width: min(52vw, 210px); height: min(52vw, 210px); border-radius: 20px; overflow: hidden; border: 4px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.55); background: #2a1d14; display: grid; place-items: center; font-size: 92px; }
.credits-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.credits-portrait.hero { border-color: #fff; box-shadow: 0 0 0 4px var(--gold), 0 12px 42px rgba(0,0,0,.6); }
.credits-portrait.in-right { animation: portin-r .5s cubic-bezier(.2,1,.3,1); }
.credits-portrait.in-pop { animation: portin-p .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes portin-r { from { opacity: 0; transform: translateX(70px) scale(.92); } }
@keyframes portin-p { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
.credits-titlecard { background: var(--barn); color: var(--cream); border: 3px solid var(--ink); border-radius: 14px; padding: 8px 18px; box-shadow: var(--shadow); animation: capin .4s ease .12s both; }
.credits-titlecard .cn { font-size: 22px; font-weight: 800; }
.credits-titlecard .ct { font-size: 14px; opacity: .92; }
.credits-crown { font-size: 70px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: portin-p .65s cubic-bezier(.2,1.5,.4,1); }
.credits-crown.small { font-size: 42px; margin-bottom: -4px; }
.credits-big { font-size: clamp(40px, 13vw, 62px); font-weight: 800; color: var(--cream); letter-spacing: 2px; line-height: 1; text-shadow: 0 3px 0 var(--barn-dark), 0 0 22px rgba(255,180,60,.6); }
.credits-sub { font-size: clamp(16px, 4.6vw, 21px); font-weight: 700; color: var(--hay); text-shadow: 0 2px 6px rgba(0,0,0,.75); }
/* intro "stick around" cue (over the wind-up) + the autoplay-blocked "tap to start" nudge */
.credits-stay { font-size: clamp(14px, 4vw, 17px); font-weight: 600; color: var(--cream); opacity: .92; margin-top: 8px; line-height: 1.45; text-shadow: 0 2px 5px rgba(0,0,0,.7); animation: pulse 2s ease-in-out infinite; }
.credits-hint { position: absolute; bottom: 15dvh; left: 0; right: 0; text-align: center; z-index: 6; color: var(--cream); font-weight: 700; font-size: 16px; text-shadow: 0 2px 6px rgba(0,0,0,.8); animation: pulse 1.3s infinite; }
.credits-menagerie { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; justify-content: center; max-width: 360px; }
.credits-menagerie .pet { display: flex; flex-direction: column; align-items: center; gap: 3px; animation: portin-p .5s cubic-bezier(.2,1.5,.4,1) both; }
.credits-menagerie .pet.lead { order: -1; flex-basis: 100%; }
.credits-pet { width: 80px; height: 80px; border-radius: 14px; overflow: hidden; border: 3px solid var(--gold); background: #2a1d14; display: grid; place-items: center; font-size: 38px; }
.credits-menagerie .pet.lead .credits-pet { width: 126px; height: 126px; }
.credits-pet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.credits-menagerie .pn { font-size: 13px; font-weight: 700; color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.credits-crew { color: var(--cream); font-size: clamp(15px, 4.4vw, 18px); line-height: 1.7; margin-top: 4px; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.credits-crew .dim { opacity: .72; font-size: 13.5px; }
.credits-rewards { position: relative; z-index: 3; text-align: center; color: var(--cream); font-size: 12px; opacity: .85; padding: 0 16px 8px; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.credits-continue { position: relative; z-index: 4; margin: 0 auto calc(16px + env(safe-area-inset-bottom)); display: block; animation: capin .5s ease; }

/* journey slide transition — each scene slides in from the right while the previous exits left
   (reads as moving forward down the road to legend); the caption + bg are separate layers, so they don't slide */
.credits-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center; }
.credits-slide.enter-right { animation: slidein-r .5s cubic-bezier(.25,.9,.3,1) both; }
.credits-slide.exit-left { animation: slideout-l .5s cubic-bezier(.5,0,.7,1) both; }
@keyframes slidein-r { from { opacity: 0; transform: translateX(56%); } to { opacity: 1; transform: none; } }
@keyframes slideout-l { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-56%); } }

/* staged intro over the song's ~15s wind-up — fills the dead air + promises the journey (replaces the old static "stay" line) */
.credits-intro { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 12px; max-width: 330px; }
.credits-intro .ci { opacity: 0; line-height: 1.4; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.credits-intro .ci-1 { font-size: clamp(19px,5.4vw,24px); font-weight: 800; color: #fff3cf; animation: introup .7s ease 1.6s forwards; }
.credits-intro .ci-2 { font-size: clamp(16px,4.6vw,20px); font-weight: 700; color: var(--cream); animation: introup .7s ease 4.2s forwards; }
.credits-intro .ci-3 { font-size: clamp(14px,4.1vw,17px); font-weight: 600; color: var(--cream); animation: introup .7s ease 5.7s forwards; }
.credits-intro .ci-4 { font-size: clamp(14px,4.1vw,17px); font-weight: 700; color: #ffe6a6; animation: introup .7s ease 8s forwards, glowpulse 1.9s ease-in-out 8.8s infinite; }
.credits-intro .ci-go { display: inline-block; animation: nudge 1s ease-in-out infinite; }
@keyframes introup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes glowpulse { 0%,100% { text-shadow: 0 2px 6px rgba(0,0,0,.8); } 50% { text-shadow: 0 0 13px rgba(255,210,110,.9), 0 2px 6px rgba(0,0,0,.8); } }

/* confetti */
.confetto { position: fixed; width: 10px; height: 14px; top: -20px; z-index: 90; pointer-events: none; animation: confall linear forwards; }
@keyframes confall { to { transform: translateY(110dvh) rotate(720deg); } }

/* collection / deck builder */
.builder { width: 100%; max-width: 480px; }
.builder .deckmeta { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; gap: 8px; flex-wrap: wrap; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; width: 100%; }
.cardgrid .handcard { width: auto; height: 118px; }
.cardgrid .handcard .count { position: absolute; bottom: -8px; right: -6px; background: var(--grass); color: white; border: 2px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.cardgrid .handcard.indeck { outline: 3px solid var(--grass); }
.cardgrid .handcard.maxed { outline-color: var(--gold); }
.cardgrid .handcard.maxed .count { background: var(--gold); color: var(--ink); }
.builder-rule { text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--ink); background: #fff7e8; border: 2px solid var(--gold); border-radius: 10px; padding: 6px 11px; margin: 2px 0 9px; }
.builder-rule b { color: var(--barn-dark); }
.presetrow { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; width: 100%; }
.presetrow .preset { flex-shrink: 0; background: var(--cream); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; cursor: pointer; box-shadow: var(--shadow); text-align: center; }
.presetrow .preset .pe { font-size: 24px; } .presetrow .preset .pn { font-size: 12px; font-weight: 700; }
/* active deck: gold border + warm fill (both interior to the chip, so the scroll container's
   overflow never clips them) + a gold ring. Reads clearly as "this is the deck you're on." */
.presetrow .preset.active { border-color: var(--gold); background: #fff3cf; box-shadow: 0 0 0 2px var(--gold), var(--shadow); }

/* vs setup */
.vs-pick { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; }
.vs-pick .side { background: var(--cream); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); }
.vs-pick select, .vs-pick input { font-family: inherit; font-size: 16px; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 10px; background: white; width: 100%; margin-top: 6px; }

.toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--cream); border-radius: 999px; padding: 9px 18px; font-size: 14.5px; font-weight: 600; z-index: 95; animation: toastin 2.6s ease forwards; max-width: 90vw; text-align: center; }
@keyframes toastin { 0% { opacity: 0; transform: translate(-50%, -12px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* momentary "YOUR TURN" sweep (campaign turn hand-off) */
.turn-banner { position: fixed; top: 38%; left: 0; right: 0; z-index: 70; text-align: center; pointer-events: none;
  font-size: clamp(30px, 9vw, 52px); font-weight: 800; color: var(--cream); letter-spacing: 2px;
  text-shadow: 0 3px 0 var(--barn-dark), 0 0 22px rgba(255, 180, 60, .75); animation: turnbanner 1.3s ease both; }
@keyframes turnbanner {
  0% { opacity: 0; transform: scale(.55) translateX(-34px); }
  18% { opacity: 1; transform: scale(1) translateX(0); }
  74% { opacity: 1; transform: scale(1) translateX(0); }
  100% { opacity: 0; transform: scale(1) translateX(34px); }
}

/* respect reduced-motion: keep functionality, drop the decorative motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.golden-back-note { font-size: 13px; opacity: .8; margin-top: 6px; }

@media (max-height: 700px) {
  .handcard { height: 100px; } .handcard .art { font-size: 23px; }
  .critter { width: 68px; min-height: 76px; } .critter .art { font-size: 26px; }
  .hand { min-height: 108px; }
}

/* ---------------- Backyard Practice (scripted warm-up) ---------------- */
/* Spotlight: a positioned hole in a dim veil — the giant spread shadow darkens
   everything EXCEPT the target. pointer-events:none (same philosophy as .coach):
   wrong taps are policed by the practice allowlist, not by blocking the screen. */
.spot {
  position: fixed; z-index: 55; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(24, 16, 9, .55);
  outline: 3px solid var(--gold); outline-offset: -1px;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
/* anatomy chips — little labels pointing at the real card's numbers */
.tut-note {
  position: fixed; z-index: 56; pointer-events: none; white-space: nowrap;
  background: #2b1d12; color: #fdf6e3; border: 1px solid var(--gold);
  border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); animation: coachin .25s ease;
}
/* gentle "that doesn't work" wiggle (unaffordable card / napping critter) */
.shake { animation: tut-shake .4s ease; }
@keyframes tut-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); }
}
/* the scarecrow's menacing... standing */
.wiggle { animation: tut-wiggle .9s ease; }
@keyframes tut-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.2deg); } 70% { transform: rotate(1.2deg); } }
/* progressive HUD: chrome stays hidden until the tip that explains it fires */
.hud-hidden { display: none !important; }
.hud-pop { animation: hud-pop .5s ease; }
@keyframes hud-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------------- secret farm code ---------------- */
.farmcode textarea {
  width: 100%; box-sizing: border-box; border-radius: 10px; border: 2px solid var(--gold);
  background: #fffdf5; color: #3b2a18; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; padding: 8px; margin: 8px 0; resize: none;
}
.farmcode .code-out { height: 74px; }
.farmcode .code-in { height: 58px; }
.farmcode-divider { opacity: .6; font-size: 12px; margin: 12px 0 2px; }
.farmcode button { margin-top: 6px; }