/* TardiBots missions: Visit / Promise / Sparks overlays, the result card, the job
   board (map) and the Inventor's Notebook. Everything is scoped under .tb-mission.
   The TardiGREATS clubhouse look: cream panels, ink "sticker" borders, chunky
   drop shadows, Bricolage Grotesque titles and Nunito Sans text. */

.tb-mission {
  --ink: #16223A;
  --cream: #FBF7F0;
  --paper: #FFFDF8;
  --green: #2F9E5B;
  --blue: #2E8BC9;
  --coral: #F0525F;
  --yellow: #F2C14E;
  --purple: #8A4FD1;
  --orange: #FF8A3D;
  --sky: #DDF0FB;
  --muted: #5B6478;
  --r: 22px;
  --shadow: 0 4px 0 var(--ink);
  --shadow-sm: 0 3px 0 var(--ink);
  font-family: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  box-sizing: border-box;
  line-height: 1.3;
}
.tb-mission *, .tb-mission *::before, .tb-mission *::after { box-sizing: border-box; }
.tb-mission button { font: inherit; color: inherit; touch-action: manipulation; }
.tb-mission .tbm-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.tb-mission .tbm-ic svg { display: block; }

/* ------------------------------------------------------------ type */
.tb-mission .tbm-title {
  font-family: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 26px; line-height: 1.1; margin: 0;
  display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em;
}
.tb-mission .tbm-kicker { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tb-mission .tbm-muted { color: var(--muted); font-size: 14px; }
.tb-mission .tbm-label { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.tb-mission .tbm-hook { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
.tb-mission .tbm-tip { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 700; color: var(--muted); font-size: 15px; }
.tb-mission .tbm-tip.is-one { color: var(--ink); background: #FFF3CF; border: 2px dashed var(--ink); border-radius: 16px; padding: 8px 12px; }
.tb-mission .tbm-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; padding: 30px; text-align: center; }

/* ------------------------------------------------------------ buttons and chips */
.tb-mission .tbm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 48px; padding: 8px 18px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper);
  box-shadow: var(--shadow); font-weight: 800; font-size: 16px; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.tb-mission .tbm-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tb-mission .tbm-btn:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.tb-mission .tbm-btn:disabled { opacity: .45; cursor: default; box-shadow: var(--shadow-sm); }
.tb-mission .tbm-btn.is-big { min-height: 58px; font-size: 18px; padding: 10px 22px; border-radius: 20px; }
.tb-mission .tbm-btn.is-wide { width: 100%; }
.tb-mission .tbm-btn.tone-blue { background: var(--blue); color: #fff; }
.tb-mission .tbm-btn.tone-green { background: var(--green); color: #fff; }
.tb-mission .tbm-btn.tone-coral { background: var(--coral); color: #fff; }
.tb-mission .tbm-btn.tone-yellow { background: var(--yellow); }
.tb-mission .tbm-btn.tone-purple { background: var(--purple); color: #fff; }
.tb-mission .tbm-btn.tone-orange { background: var(--orange); }
.tb-mission .tbm-btn.tone-ink { background: var(--ink); color: #fff; }
.tb-mission .tbm-btn.tone-soft { background: var(--paper); }
.tb-mission .tbm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 14px; }

.tb-mission .tbm-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 32px;
  border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 14px;
}
.tb-mission .tbm-chip.is-big { min-height: 44px; font-size: 16px; padding: 6px 14px; box-shadow: var(--shadow-sm); }
.tb-mission .tbm-chip.tone-yellow { background: #FFE9A8; }
.tb-mission .tbm-chip.tone-purple { background: #E7DAFA; }
.tb-mission .tbm-chip.tone-ink { background: var(--ink); color: #fff; }

.tb-mission .tbm-meter { height: 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: #EFE7DA; overflow: hidden; margin: 10px 0; }
.tb-mission .tbm-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--orange)); border-right: 2px solid var(--ink); border-radius: 999px; }
.tb-mission .tbm-meter.is-small { height: 10px; margin: 6px 0 4px; border-width: 2px; }
.tb-mission .is-met .tbm-meter > span { background: linear-gradient(90deg, #7CCB8F, var(--green)); }

.tb-mission .tbm-stars { display: inline-flex; gap: 6px; align-items: flex-end; }
.tb-mission .tbm-star { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.tb-mission .tbm-star-label { font-size: 12px; font-weight: 800; color: var(--muted); }
.tb-mission .tbm-star.is-on .tbm-star-label { color: var(--ink); }
.tb-mission .tbm-stars.is-big { gap: 14px; justify-content: center; width: 100%; margin: 6px 0; }
.tb-mission .tbm-stars.is-big .tbm-star-label { font-size: 15px; }

.tb-mission .tbm-portrait-wrap { display: inline-flex; line-height: 0; filter: drop-shadow(0 3px 0 rgba(22, 34, 58, .18)); }

.tb-mission .tbm-part-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-mission .tbm-part-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: #E3F1FB; font-weight: 800; font-size: 14px; }
.tb-mission .tbm-part-chip.is-new { background: #FFE9A8; animation: tbm-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }

/* ------------------------------------------------------------ sheets (dialogs) */
.tb-mission .tbm-sheet-back {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(22, 34, 58, 0); transition: background .2s ease;
}
.tb-mission .tbm-sheet-back.is-open { background: rgba(22, 34, 58, .35); }
.tb-mission .tbm-sheet {
  position: relative; width: min(560px, 100%); max-height: calc(100% - 20px); overflow: auto; padding: 22px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink);
  transform: translateY(20px) scale(.96); opacity: 0; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease;
}
.tb-mission .tbm-sheet-back.is-wide .tbm-sheet { width: min(860px, 100%); }
.tb-mission .tbm-sheet-back.is-open .tbm-sheet { transform: none; opacity: 1; }
.tb-mission .tbm-sheet-close { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* ------------------------------------------------------------ job board (map) */
.tb-mission.tbm-map {
  position: relative; width: 100%; height: 100%; min-height: 100%; display: flex; flex-direction: column;
  background: var(--cream); overflow: hidden;
}
.tbm-map .tbm-map-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px 10px; }
.tbm-map .tbm-map-head > .tbm-title { margin-right: auto; }
.tbm-map .tbm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  /* Narrow screens: the chapter tabs get their own line under the title. */
  .tbm-map .tbm-tabs { flex: 1 1 100%; }
  .tbm-map .tbm-tab { flex: 1 1 0; justify-content: center; }
}
.tbm-map .tbm-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); font-weight: 800; font-size: 15px; box-shadow: var(--shadow-sm);
}
.tbm-map .tbm-tab.is-on { background: var(--tab, var(--green)); color: #fff; }
.tbm-map .tbm-tab.is-locked { background: #ECE6DB; color: var(--muted); }
.tbm-map .tbm-map-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 0 18px 18px; }
.tbm-map .tbm-map-area {
  position: relative; flex: 1; min-width: 0; border: 3px solid var(--ink); border-radius: 28px; overflow: hidden;
  background: #BFE0A6; box-shadow: 0 5px 0 var(--ink);
}
.tbm-map .tbm-map-svg { display: block; width: 100%; height: 100%; }
.tbm-map .tbm-map-svg.is-locked .tbm-art { filter: saturate(.25) brightness(1.05); }
.tbm-map .tbm-map-svg.is-locked .tbm-stop { opacity: .7; }
.tbm-map .tbm-stop { cursor: pointer; outline: none; }
.tbm-map .tbm-stop > circle:nth-of-type(1), .tbm-map .tbm-stop .tbm-stop-face { transition: transform .15s ease; }
.tbm-map .tbm-stop:focus-visible > circle:not(.tbm-glow) { stroke: var(--blue); stroke-width: 6; }
.tbm-map .tbm-stop:active .tbm-stop-face { transform: scale(.94); }
.tbm-map .tbm-glow { animation: tbm-glow 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.tbm-map .tbm-glow-2 { animation: tbm-ring 2.2s ease-out infinite; }
.tbm-map .tbm-next-flag { animation: tbm-bob 1.8s ease-in-out infinite; }
.tbm-map .tbm-stop.is-next .tbm-stop-face { animation: tbm-bob 2.6s ease-in-out infinite; }
.tbm-map .tbm-lock-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 86%); text-align: center;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 24px; box-shadow: var(--shadow); padding: 18px 22px;
}
.tbm-map .tbm-lock-card .tbm-title { justify-content: center; }
.tbm-map .tbm-lock-card p { font-weight: 700; margin: 8px 0; }
.tb-mission .tbm-lock-ic { display: inline-flex; padding: 10px; border: 3px solid var(--ink); border-radius: 50%; background: #FFE9A8; margin-bottom: 6px; }

.tbm-map .tbm-rail { width: 300px; flex: none; display: flex; flex-direction: column; gap: 12px; overflow: auto; padding-bottom: 6px; }
.tbm-map .tbm-rail-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: left; cursor: pointer;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow);
}
.tbm-map .tbm-rail-card.is-next { background: #FFF1E6; cursor: default; }
.tbm-map .tbm-rail-card.is-locked { background: #F1ECE3; }
.tbm-map .tbm-rail-card:active:not(.is-next) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tbm-map .tbm-rail-row { display: flex; align-items: center; gap: 12px; }
.tb-mission .tbm-rail-title { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.15; }
.tbm-map .tbm-door { flex-direction: row; align-items: center; }
.tbm-map .tbm-door-ic { display: inline-flex; padding: 10px; border: 3px solid var(--ink); border-radius: 16px; }
.tbm-map .tbm-door-ic.tone-blue { background: #CFE6F7; }
.tbm-map .tbm-door-ic.tone-purple { background: #E7DAFA; }
.tbm-map .tbm-door-ic.tone-yellow { background: #FFE9A8; }
.tbm-map .tbm-door-text { display: flex; flex-direction: column; gap: 2px; }

.tb-mission .tbm-job-head { display: flex; gap: 14px; align-items: center; padding-right: 48px; }
.tb-mission .tbm-job-faces { display: flex; }
.tb-mission .tbm-job-faces > * + * { margin-left: -22px; }
.tb-mission .tbm-job-goals, .tb-mission .tbm-job-unlocks { margin-top: 14px; }
.tb-mission .tbm-job-goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tb-mission .tbm-job-goal { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border: 2.5px solid var(--ink); border-radius: 16px; background: #F3EEE5; }
.tb-mission .tbm-job-goal.is-on { background: #FFF1C9; }
.tb-mission .tbm-job-goal-star { flex: none; line-height: 0; }
.tb-mission .tbm-job-goal-text { display: flex; flex-direction: column; min-width: 0; }
.tb-mission .tbm-job-goal-text b { font-family: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 16px; }
.tb-mission .tbm-job-goal-text span { font-size: 14px; font-weight: 700; color: var(--muted); }
.tb-mission .tbm-part-chip.is-got { background: #DDF3E3; }
.tb-mission .tbm-locked-note { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--muted); }
.tb-mission .tbm-endless { display: flex; flex-direction: column; gap: 12px; }
.tb-mission .tbm-endless-card { display: flex; align-items: center; gap: 14px; padding: 12px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-sm); }
.tb-mission .tbm-endless-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tb-mission .tbm-endless-text p { margin: 0; }

.tb-mission .tbm-shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 52px; flex-wrap: wrap; }
.tb-mission .tbm-shop-got { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 18px; background: #DDF3E3; font-weight: 800; }
.tb-mission .tbm-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.tb-mission .tbm-shop-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-sm); }
.tb-mission .tbm-shop-item.is-short { background: #F5F1EA; }
.tb-mission .tbm-shop-ic { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 50px; min-height: 50px; padding: 8px; border: 2.5px solid var(--ink); border-radius: 14px; background: #E3F1FB; }
.tb-mission .tbm-shop-ic.has-thumb { padding: 2px; background: #F4F8FC; }
.tb-mission .tbm-shop-thumb { display: block; width: 56px; height: 56px; object-fit: contain; }
.tb-mission .tbm-shop-ic.is-art { padding: 4px; background: #FFFDF8; }
.tb-mission .tbm-shop-ic.is-swatch { background: linear-gradient(135deg, #FFE9A8, #E7DAFA); }
.tb-mission .tbm-shop-section { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-family: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 19px; }
.tb-mission .tbm-shop-item.is-look .tbm-shop-name { flex: 1; }
.tb-mission .tbm-shop-name { font-weight: 800; font-size: 16px; }
.tb-mission .tbm-shop-blurb { font-size: 13px; color: var(--muted); flex: 1; }
.tb-mission .tbm-shop-from { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tb-mission .tbm-shop-item .tbm-btn { min-height: 46px; font-size: 14px; padding: 6px 10px; }

/* ------------------------------------------------------------ the flow overlay (Visit / Promise / Sparks) */
.tb-mission.tbm-flow { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
/* The shell gives every direct child of its layers pointer events; these full-screen roots
   must stay see-through so the 3D canvas and the HUD keep their taps. */
#ui .mission-layer > .tb-mission.tbm-flow, #ui .tb-mission.tbm-result, #ui .tb-mission .tbm-clue-layer, #ui .tb-mission .tbm-say-layer { pointer-events: none; }
#ui .tb-mission .tbm-flow-panel, #ui .tb-mission .tbm-clue, #ui .tb-mission .tbm-result-card, #ui .tb-mission .tbm-cameo,
#ui .tb-mission .tbm-nudge, #ui .tb-mission .tbm-doodle { pointer-events: auto; }
.tbm-flow .tbm-clue-layer, .tbm-flow .tbm-say-layer { position: absolute; inset: 0; pointer-events: none; }
.tbm-flow .tbm-say-layer { z-index: 4; }
.tbm-flow .tbm-clue {
  /* Placed over its 3D marker with the `translate` property (missionui placeClues);
     the bob animation below uses `transform`, so the two add up. */
  position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--yellow); box-shadow: var(--shadow-sm);
  animation: tbm-bob 2.4s ease-in-out infinite;
}
.tbm-flow .tbm-clue-ring { position: absolute; inset: -9px; border-radius: 50%; border: 4px solid rgba(242, 193, 78, .8); animation: tbm-ring 1.8s ease-out infinite; }
.tbm-flow .tbm-clue.is-secret { width: 50px; height: 50px; margin: -25px 0 0 -25px; background: rgba(221, 240, 251, .82); border-style: dashed; opacity: .78; animation: tbm-twinkle 3.2s ease-in-out infinite; }
.tbm-flow .tbm-clue.is-secret .tbm-clue-ring { border-color: rgba(191, 227, 255, .7); }
.tbm-flow .tbm-clue.is-edge { box-shadow: var(--shadow-sm), 0 0 0 6px rgba(242, 193, 78, .35); }
.tbm-flow .tbm-clue.is-found { background: #BFE6C9; opacity: 1; animation: none; border-style: solid; }
.tbm-flow .tbm-clue.is-found .tbm-clue-ring { display: none; }
.tbm-flow .tbm-clue:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
.tbm-flow .tbm-pop { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #FFE9A8; font-weight: 800; font-size: 13px; animation: tbm-float 1.6s ease-out both; }
.tbm-flow .tbm-clue-layer.is-flat {
  position: absolute; inset: auto 16px 50% 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; pointer-events: none;
}
.tbm-flow .tbm-clue.is-flat { position: relative; width: auto; height: auto; min-height: 60px; margin: 0; border-radius: 20px; padding: 8px 16px; gap: 8px; animation: none; }
.tbm-flow .tbm-clue.is-flat .tbm-clue-ring { display: none; }
.tbm-flow .tbm-clue-label { font-weight: 800; }

.tbm-flow .tbm-bubble {
  /* max-content: near the screen edge an absolute box would otherwise shrink to the space left of it. */
  position: absolute; left: 50%; top: 84px; transform: translate(-50%, -6px) scale(.92); opacity: 0; width: max-content; max-width: min(420px, 86vw);
  pointer-events: none; padding: 12px 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow);
  font-weight: 700; font-size: 17px; transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.tbm-flow .tbm-bubble.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.tbm-flow .tbm-bubble.is-anchored { max-width: min(360px, 80vw); transform: translate(-50%, calc(-100% - 6px)) scale(.92); }
.tbm-flow .tbm-bubble.is-anchored.is-in { transform: translate(-50%, -100%) scale(1); }
.tbm-flow .tbm-bubble.is-anchored::after {
  content: ''; position: absolute; left: var(--tail, 50%); bottom: -14px; width: 20px; height: 20px; margin-left: -10px;
  background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) skew(8deg, 8deg); border-bottom-right-radius: 4px;
}
.tbm-flow .tbm-bubble.tone-sky { background: var(--sky); }
.tbm-flow .tbm-bubble.tone-sky::after { background: var(--sky); }
.tbm-flow .tbm-bubble-who { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 14px; color: var(--muted); margin-bottom: 2px; }
.tbm-flow .tbm-bubble-text { display: flex; gap: 8px; align-items: flex-start; }

.tbm-flow .tbm-flow-panel {
  position: absolute; left: 16px; right: 16px; bottom: 16px; pointer-events: auto; max-height: calc(100% - 110px); overflow: auto;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 0 6px 0 var(--ink); padding: 16px 20px 18px;
  animation: tbm-rise .35s cubic-bezier(.3, 1.3, .5, 1) both;
}
.tbm-flow .tbm-flow-panel[data-step='visit'] { right: auto; width: min(620px, calc(100% - 32px)); }
.tbm-flow .tbm-flow-panel[data-step='promise'], .tbm-flow .tbm-flow-panel[data-step='sparks'] {
  left: 16px; right: 16px; margin: 0 auto; max-width: 1000px; max-height: min(74%, calc(100% - 100px));
}
.tbm-flow .tbm-flow-top { display: flex; justify-content: flex-start; margin-bottom: 10px; }
.tb-mission .tbm-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.tb-mission .tbm-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 13px; color: var(--muted); }
.tb-mission .tbm-step-ic { display: inline-flex; padding: 3px; border-radius: 50%; background: #EFE7DA; }
.tb-mission .tbm-step.is-on { background: var(--yellow); color: var(--ink); }
.tb-mission .tbm-step.is-on .tbm-step-ic { background: var(--paper); }
.tb-mission .tbm-step.is-done { background: #DDF3E3; color: var(--ink); }
.tb-mission .tbm-step.is-done .tbm-step-ic { background: var(--green); color: #fff; }

.tbm-flow .tbm-visit-head { display: flex; gap: 14px; align-items: center; }
.tbm-flow .tbm-visit-faces { display: flex; flex: none; }
.tbm-flow .tbm-visit-faces > * + * { margin-left: -18px; }
.tbm-flow .tbm-visit-foot { margin-top: 12px; }
.tbm-flow .tbm-tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 8px; }
.tb-mission .tbm-note { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2.5px solid var(--ink); border-radius: 14px; font-weight: 800; font-size: 14px; background: var(--paper); animation: tbm-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.tb-mission .kind-do.tbm-note { background: #FDE0D9; }
.tb-mission .kind-feel.tbm-note { background: #FBE3EF; }
.tb-mission .kind-look.tbm-note { background: #EDE3FB; }

.tbm-flow .tbm-cameo, .tbm-flow .tbm-nudge {
  position: absolute; left: 0; right: 0; margin: 0 auto; top: 76px; width: min(580px, calc(100% - 32px)); z-index: 5; pointer-events: auto;
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #FFF6DC; border: 3px solid var(--ink); border-radius: 24px; box-shadow: var(--shadow);
  animation: tbm-pop .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
.tbm-flow .tbm-nudge { top: 50%; transform: translateY(-50%); animation: none; box-shadow: 0 6px 0 var(--ink), 0 0 0 100vmax rgba(22, 34, 58, .25); }
.tbm-flow .tbm-cameo-text { flex: 1; }
.tbm-flow .tbm-cameo-line, .tbm-flow .tbm-nudge-line { margin: 4px 0 0; font-weight: 700; font-size: 17px; }

/* Promise */
.tbm-flow .tbm-promise-title { font-size: 30px; }
.tbm-flow .tbm-promise-slot {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 12px; min-height: 96px;
  border: 3px dashed var(--ink); border-radius: 24px; background: #FFF1E6; transition: background .15s ease, transform .15s ease;
}
.tbm-flow .tbm-promise-slot.is-over { background: #FFE0C8; transform: scale(1.01); }
.tbm-flow .tbm-promise-slot.is-shake { animation: tbm-shake .4s ease; }
.tbm-flow .tbm-socket { flex: 1 1 200px; min-height: 70px; border: 3px dashed rgba(22, 34, 58, .35); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 24px; color: rgba(22, 34, 58, .35); }
.tbm-flow .tbm-socket.is-needed { border-color: rgba(240, 82, 95, .55); color: rgba(240, 82, 95, .7); }
.tbm-flow .tbm-need-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.tb-mission .tbm-need {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px; padding: 12px 14px; text-align: left; cursor: grab;
  border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); touch-action: none;
  transition: transform .15s cubic-bezier(.3, 1.5, .5, 1), opacity .15s ease;
}
.tb-mission .tbm-need.kind-do { background: #FDE9E4; }
.tb-mission .tbm-need.kind-feel { background: #FCEAF3; }
.tb-mission .tbm-need.kind-look { background: #F1E9FC; }
.tb-mission .tbm-need.is-chosen { opacity: .38; transform: scale(.96); }
.tb-mission .tbm-need.is-in-slot { flex: 1 1 200px; min-height: 70px; box-shadow: var(--shadow-sm); animation: tbm-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; cursor: pointer; }
.tb-mission .tbm-need.is-mystery { background: repeating-linear-gradient(45deg, #EFE7DA 0 12px, #F7F1E6 12px 24px); cursor: pointer; }
.tb-mission .tbm-need.is-dragging { opacity: .3; }
.tb-mission .tbm-need.tbm-drag-ghost { transform: rotate(-3deg) scale(1.04); box-shadow: 0 10px 0 rgba(22, 34, 58, .3); opacity: .96; }
.tb-mission .tbm-need-kind { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tb-mission .tbm-need-text { font-weight: 800; font-size: 17px; line-height: 1.2; }
.tb-mission .tbm-need-text.is-q { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tb-mission .tbm-need-badge { position: absolute; top: -10px; right: -8px; display: inline-flex; padding: 4px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--sky); }
.tb-mission .tbm-need-x { position: absolute; top: 8px; right: 8px; display: inline-flex; padding: 2px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.tbm-flow .tbm-agree { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-wrap: wrap; }
.tbm-flow .tbm-agree-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); font-weight: 800; box-shadow: var(--shadow-sm); cursor: pointer; }
.tbm-flow .tbm-agree-btn.is-on { background: #BFE6C9; }

/* Sparks */
.tbm-flow .tbm-idea-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.tbm-flow .tbm-idea-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px; padding: 10px; cursor: pointer;
  border: 3px dashed rgba(22, 34, 58, .45); border-radius: 22px; background: #FFFDF8;
}
.tbm-flow .tbm-idea-slot.is-wild { background: linear-gradient(135deg, #F4ECFF, #FFEFD6); border-color: var(--purple); }
.tbm-flow .tbm-idea-slot.is-filled { border-style: solid; border-color: var(--ink); box-shadow: var(--shadow-sm); animation: tbm-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.tbm-flow .tbm-idea-empty { color: rgba(22, 34, 58, .4); }
.tbm-flow .tbm-idea-label { font-weight: 800; font-size: 14px; }
.tbm-flow .tbm-doodle-img { width: 110px; height: 80px; object-fit: contain; border-radius: 10px; }
.tbm-flow .tbm-idea-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 14px; }
.tbm-flow .tbm-idea {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 104px; padding: 8px 6px; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .12s ease;
}
.tbm-flow .tbm-idea:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tbm-flow .tbm-idea.is-used { background: #FFE9A8; }
.tbm-flow .tbm-idea.is-wild { background: #F4ECFF; }
.tbm-flow .tbm-idea.is-wild.is-used { background: #E3D1FB; }
.tbm-flow .tbm-idea.is-doodle { background: #E3F1FB; justify-content: center; }
.tbm-flow .tbm-idea-badge { position: absolute; top: 6px; right: 6px; display: inline-flex; padding: 3px; border: 2px solid var(--ink); border-radius: 50%; background: #FFE9A8; }
.tbm-flow .tbm-doodle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: auto; width: min(420px, calc(100vw - 32px)); padding: 16px; background: var(--cream); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--ink); }
.tbm-flow .tbm-doodle-canvas { display: block; width: 100%; height: auto; margin-top: 10px; border: 3px solid var(--ink); border-radius: 16px; touch-action: none; background: #FFFDF8; cursor: crosshair; }

/* ------------------------------------------------------------ result */
.tb-mission.tbm-result {
  /* Between the HUD and the dock (the shell's --top / --bottom), so Tweak it, Try again and Done are never under the dock. */
  position: fixed; inset: 0; z-index: 25; pointer-events: none; display: flex; align-items: center; justify-content: flex-end;
  padding: var(--top, 80px) 18px var(--bottom, 18px);
}
.tbm-result .tbm-result-card {
  pointer-events: auto; width: min(540px, max(48vw, 460px)); max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: 18px 20px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 0 6px 0 var(--ink);
  transform: translateX(40px); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1) .25s, opacity .3s ease .25s;
}
.tbm-result.is-in .tbm-result-card { transform: none; opacity: 1; }
.tbm-result .tbm-result-card.is-thanks { transform: none; opacity: 1; text-align: center; animation: tbm-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.tbm-result .tbm-result-head { display: flex; gap: 12px; align-items: center; }
.tbm-result .tbm-result-card.is-thanks .tbm-result-head { text-align: left; }
.tbm-result .tbm-result-face { flex: none; animation: tbm-bob 2.4s ease-in-out infinite; }
.tbm-result .tbm-result-say { position: relative; flex: 1; padding: 12px 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; }
.tbm-result .tbm-result-say::before { content: ''; position: absolute; left: -13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--paper); border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.tbm-result .tbm-result-line { display: block; margin-top: 4px; font-weight: 800; font-size: 18px; line-height: 1.25; quotes: none; }
.tbm-result .tbm-goals { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tbm-result .tbm-goal { display: flex; align-items: center; gap: 10px; padding: 3px 12px 3px 4px; border: 3px solid var(--ink); border-radius: 18px; background: #F3EEE5; }
.tbm-result .tbm-goal-star svg { width: 40px; height: 40px; }
.tbm-result .tbm-goal.is-on { background: #FFF1C9; animation: tbm-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.tbm-result .tbm-goal.is-on[data-star='delight'] { animation-delay: .25s; }
.tbm-result .tbm-goal.is-on[data-star='clever'] { animation-delay: .5s; }
.tbm-result .tbm-goal-star { flex: none; line-height: 0; }
.tbm-result .tbm-goal-title { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 17px; }
.tbm-result .tbm-goal-sub { font-size: 14px; font-weight: 700; color: var(--muted); }
.tbm-result .tbm-result-section { margin-top: 14px; }
.tbm-result .tbm-need-list, .tbm-result .tbm-disc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tbm-result .tbm-need-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--paper); }
.tbm-result .tbm-need-state { display: inline-flex; padding: 4px; border: 2.5px solid var(--ink); border-radius: 50%; background: #EFE7DA; }
.tbm-result .tbm-need-row.is-met .tbm-need-state { background: var(--green); color: #fff; }
.tbm-result .tbm-need-body { flex: 1; min-width: 0; }
.tbm-result .tbm-need-title { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.tbm-result .tbm-need-line { font-size: 14px; font-weight: 600; color: var(--muted); }
.tbm-result .tbm-disc-list li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 2.5px solid var(--ink); border-radius: 16px; background: #FFF6DC; font-weight: 700; }
.tbm-result .tbm-spark-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tbm-result .tbm-spark-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #FFE9A8; font-weight: 700; font-size: 14px; animation: tbm-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.tbm-result .tbm-spark-chip b { font-weight: 900; }
.tbm-result .tbm-tilly {
  position: relative; display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; cursor: pointer; overflow: hidden;
  background: #FFF1DA; border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-sm); animation: tbm-pop .5s cubic-bezier(.3, 1.6, .5, 1) .6s both;
}
.tbm-result .tbm-tilly p { margin: 4px 0 0; font-weight: 700; font-size: 16px; }
.tbm-result .tbm-tilly-timer { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--orange); transform-origin: left; animation: tbm-drain 10s linear .6s both; }
.tbm-result .tbm-tilly.is-tucked { padding: 6px 10px; }
.tbm-result .tbm-tilly.is-tucked .tbm-tilly-text p, .tbm-result .tbm-tilly.is-tucked .tbm-tilly-timer { display: none; }
.tbm-result .tbm-tilly.is-tucked .tbm-portrait { width: 40px; height: 42px; }
.tbm-result .tbm-result-actions {
  position: sticky; bottom: -18px; z-index: 2; justify-content: space-between; margin: 12px -20px -18px; padding: 12px 20px 16px;
  background: linear-gradient(rgba(251, 247, 240, 0), var(--cream) 18px); border-radius: 0 0 26px 26px;
}
.tbm-result .tbm-result-actions { gap: 10px; }
.tbm-result .tbm-result-actions .tbm-btn { flex: 1 1 auto; padding: 10px 14px; font-size: 17px; white-space: nowrap; }
.tb-mission .tbm-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.tb-mission .tbm-confetti span { position: absolute; top: -20px; width: 10px; height: 14px; border: 1.5px solid var(--ink); animation-name: tbm-fall; animation-timing-function: cubic-bezier(.3, .2, .6, 1); animation-fill-mode: both; }

/* ------------------------------------------------------------ notebook */
.tb-mission.tbm-notebook { position: relative; width: 100%; height: 100%; min-height: 100%; display: flex; flex-direction: column; background: #F4EBDD; overflow: hidden; }
.tbm-notebook .nb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px 10px; }
.tbm-notebook .nb-head > .tbm-title { margin-right: auto; }
.tbm-notebook .nb-robots { display: flex; gap: 8px; flex-wrap: wrap; }
.tbm-notebook .nb-robot { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); font-weight: 800; cursor: pointer; }
.tbm-notebook .nb-robot.is-on { background: var(--yellow); }
.tbm-notebook .nb-book {
  flex: 1; min-height: 0; display: flex; gap: 0; margin: 0 18px 18px; border: 3px solid var(--ink); border-radius: 26px; overflow: hidden;
  background: var(--paper); box-shadow: 0 6px 0 var(--ink);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(46, 139, 201, .12) 31px 32px);
}
.tbm-notebook .nb-book.is-empty { align-items: center; justify-content: center; }
.tbm-notebook .nb-empty { max-width: 460px; text-align: center; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.tbm-notebook .nb-empty .tbm-title { justify-content: center; }
.tbm-notebook .nb-empty-ic { display: inline-flex; padding: 16px; border: 3px solid var(--ink); border-radius: 26px; background: #FFE9A8; transform: rotate(-4deg); }
.tbm-notebook .nb-index { width: 128px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; overflow: auto; background: #F7EFE1; border-right: 3px dashed rgba(22, 34, 58, .3); }
.tbm-notebook .nb-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; padding: 6px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); cursor: pointer; }
.tbm-notebook .nb-tab canvas { width: 88px; height: 66px; }
.tbm-notebook .nb-tab.is-on { background: var(--yellow); box-shadow: var(--shadow-sm); }
.tbm-notebook .nb-tab.is-before { background: #CFE6F7; }
.tbm-notebook .nb-tab-v { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 16px; }
.tbm-notebook .nb-tab-cap { position: absolute; top: -8px; left: -8px; display: inline-flex; padding: 3px; border: 2px solid var(--ink); border-radius: 50%; background: #E7DAFA; }
.tbm-notebook .nb-tab-stars { position: absolute; top: -8px; right: -8px; display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 999px; background: #FFE9A8; font-weight: 900; font-size: 12px; }
.tbm-notebook .nb-spread { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px; }
.tbm-notebook .nb-spread.is-compare { display: flex; gap: 10px; align-items: flex-start; }
.tbm-notebook .nb-spread.is-compare > .nb-page { flex: 1; min-width: 0; }
.tbm-notebook .nb-arrow { align-self: center; flex: none; }
.tbm-notebook .nb-page { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; grid-template-areas: 'head head' 'thumb stats' 'thumb react' 'needs needs' 'disc disc' 'caps caps'; gap: 12px 18px; align-items: start; }
.tbm-notebook .nb-page.is-small { grid-template-columns: 1fr; grid-template-areas: 'head' 'thumb' 'stats' 'react' 'needs' 'disc'; }
.tbm-notebook .nb-page-head { grid-area: head; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tbm-notebook .nb-thumb { grid-area: thumb; position: relative; border: 3px solid var(--ink); border-radius: 20px; background: #FFF9EE; overflow: hidden; transform: rotate(-1.2deg); box-shadow: var(--shadow-sm); }
.tbm-notebook .nb-thumb canvas, .tbm-notebook .nb-thumb img { display: block; width: 100%; height: auto; }
.tbm-notebook .nb-thumb .nb-thumb-3d { position: absolute; inset: 0; height: 100%; object-fit: contain; background: #FFF9EE; animation: tbm-fade .3s ease both; }
.tbm-notebook .nb-stats { grid-area: stats; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tbm-notebook .nb-stat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.tbm-notebook .nb-stat-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.tbm-notebook .nb-stat b { font-weight: 900; margin-left: auto; }
.tbm-notebook .nb-delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 800; background: #E3F1FB; }
.tbm-notebook .nb-delta.is-down { background: #DDF3E3; }
.tbm-notebook .nb-react { grid-area: react; display: flex; gap: 10px; align-items: center; padding: 10px; border: 2.5px solid var(--ink); border-radius: 18px; background: #FFF6DC; }
.tbm-notebook .nb-react.is-free { font-weight: 800; }
.tbm-notebook .nb-react-text { display: flex; flex-direction: column; gap: 4px; }
.tbm-notebook .nb-quote { font-weight: 800; font-size: 16px; quotes: none; }
.tbm-notebook .nb-needs { grid-area: needs; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tbm-notebook .nb-needs li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #F3EEE5; font-weight: 700; font-size: 14px; }
.tbm-notebook .nb-needs li.is-met { background: #DDF3E3; }
.tbm-notebook .nb-disc { grid-area: disc; }
.tbm-notebook .nb-disc ul { margin: 0; padding-left: 20px; font-weight: 700; }
.tbm-notebook .nb-captions { grid-area: caps; padding: 12px; border: 3px dashed rgba(22, 34, 58, .45); border-radius: 20px; background: rgba(255, 255, 255, .6); }
.tbm-notebook .nb-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tbm-notebook .nb-cap { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); }
.tbm-notebook .nb-cap.is-hint { background: #F4ECFF; }
.tbm-notebook .nb-cap.is-on { background: var(--yellow); transform: rotate(-1.5deg); }
.tbm-notebook .nb-first { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; }
.tbm-notebook .nb-first-ic { display: inline-flex; padding: 6px; border: 2.5px solid var(--ink); border-radius: 50%; background: #DDF3E3; }

/* ------------------------------------------------------------ animation */
@keyframes tbm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tbm-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tbm-glow { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .6; transform: scale(1.04); } }
@keyframes tbm-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes tbm-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tbm-rise { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tbm-float { 0% { transform: translate(-50%, 6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -26px); opacity: 0; } }
@keyframes tbm-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
@keyframes tbm-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tbm-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: .9; } }
@keyframes tbm-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tb-mission *, .tb-mission *::before, .tb-mission *::after { animation: none !important; transition: none !important; }
}
.reduce-motion .tb-mission *, .reduce-motion .tb-mission *::before, .reduce-motion .tb-mission *::after { animation: none !important; transition: none !important; }

/* ------------------------------------------------------------ smaller and portrait screens */
@media (max-width: 960px), (orientation: portrait) {
  .tbm-map .tbm-map-body { flex-direction: column; overflow: auto; }
  .tbm-map .tbm-map-area { flex: none; aspect-ratio: 1000 / 640; }
  .tbm-map .tbm-rail { width: auto; flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .tbm-map .tbm-rail > * { flex: 1 1 240px; }
  .tb-mission.tbm-result { align-items: flex-end; justify-content: center; padding: var(--top, 70px) 12px var(--bottom, 12px); }
  .tbm-result .tbm-result-card { width: min(640px, 100%); max-height: min(64vh, 100%); transform: translateY(40px); }
  .tbm-notebook .nb-book { flex-direction: column; }
  .tbm-notebook .nb-index { width: auto; flex-direction: row; border-right: 0; border-bottom: 3px dashed rgba(22, 34, 58, .3); overflow-x: auto; }
  .tbm-notebook .nb-tab { min-width: 100px; }
  .tbm-notebook .nb-page { grid-template-columns: 1fr; grid-template-areas: 'head' 'thumb' 'stats' 'react' 'needs' 'disc' 'caps'; }
  .tbm-notebook .nb-spread.is-compare { flex-direction: column; }
  .tbm-notebook .nb-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .tbm-flow .tbm-idea-slots { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .tbm-flow .tbm-idea-slot { min-height: 100px; }
  .tb-mission .tbm-title { font-size: 22px; }
  .tbm-flow .tbm-promise-title { font-size: 24px; }
}