/* Kid UI kit: light, opaque cards, big type (18 px min body), 56 px targets. --accent = the chosen style colour. */
:root { --accent: #d9412b; --ink: #1f2430; --soft: #5b6272; --paper: rgba(255, 253, 248, .97); --line: #ece6da; --good: #1f9d55; --bad: #d23c3c;
  --radius: 20px; --shadow: 0 10px 30px rgba(30, 30, 50, .18), 0 2px 6px rgba(30, 30, 50, .12); }
.tt-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; font-size: 18px; line-height: 1.35; position: relative; }
.tt-card h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.tt-card h3 { margin: 14px 0 8px; font-size: 20px; }
.tt-tag { position: absolute; top: -12px; left: 18px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.tt-btn { min-height: 56px; min-width: 56px; padding: 0 26px; font-family: inherit; font-weight: 800; font-size: 20px; line-height: 1; border-radius: 999px; border: 0; cursor: pointer; touch-action: manipulation;
  transition: transform .08s ease, box-shadow .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.tt-btn:active { transform: scale(.96); }
/* v1.4 fit rule: labels wrap to two lines (hyphenated in the page language), never an ellipsis on an action;
   fitText() in kit.js shrinks a stubborn label to 85% at most. `short` strings cover the rest. */
.tt-btn { text-align: center; overflow-wrap: break-word; hyphens: auto; }
.tt-fit { min-width: 0; overflow-wrap: break-word; hyphens: auto; line-height: 1.15; }
.tt-btn:disabled { opacity: .4; cursor: default; }
.tt-primary { background: var(--accent); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.tt-secondary { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 3px var(--line); }
.tt-ghost { background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.tt-choices { display: flex; gap: 14px; }
.tt-choice { flex: 1 1 0; min-height: 56px; background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 16px 14px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; touch-action: manipulation; transition: border-color .15s, transform .08s; }
.tt-choice:active { transform: scale(.98); }
.tt-choice strong { font-size: 21px; }
.tt-choice-bar { position: absolute; inset: 0 0 auto; height: 8px; background: var(--c); }
.tt-choice-blurb { color: var(--soft); font-size: 18px; }
.tt-choice.is-on { border-color: var(--c); box-shadow: 0 0 0 3px var(--c) inset; }
.tt-faces { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-icon { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.tt-icon img { width: var(--s); height: var(--s); object-fit: contain; }
.tt-dot { flex: none; min-width: var(--s); width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: calc(var(--s) * .45); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.tt-icon-label { font-size: 14px; color: var(--soft); font-weight: 700; max-width: 104px; overflow-wrap: anywhere; hyphens: auto; text-align: center; line-height: 1.1; }
.tt-mentor { display: flex; align-items: flex-end; gap: 12px; }
.tt-mentor-face { width: 76px; height: 76px; border-radius: 50%; flex: none; object-fit: cover; background: #ffe2b8; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.tt-mentor-dot { display: grid; place-items: center; font-family: inherit; font-weight: 900; font-size: 34px; line-height: 1; color: #9a5a12; border: 4px solid #fff; }
.tt-mentor-dot[data-pose=happy] { background: #c9f2c7; color: #217a2d; }
.tt-mentor-dot[data-pose=worried] { background: #ffd6d0; color: #a33; }
.tt-mentor-bubble { background: var(--paper); border-radius: 20px 20px 20px 6px; padding: 12px 18px; box-shadow: var(--shadow); font-size: 20px; max-width: 460px; display: flex; flex-direction: column; gap: 2px; }
.tt-mentor-bubble b { font-size: 15px; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.tt-slider { display: flex; flex-direction: column; gap: 8px; }
.tt-slider-val { font-size: 26px; font-weight: 900; }
.tt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 56px; background: transparent; touch-action: none; margin: 0; }
.tt-range::-webkit-slider-runnable-track { height: 14px; border-radius: 99px; background: var(--line); }
.tt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -15px; border-radius: 50%; background: var(--accent); border: 5px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.tt-range::-moz-range-track { height: 14px; border-radius: 99px; background: var(--line); }
.tt-range::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); border: 5px solid #fff; }
.tt-preview { color: var(--soft); font-size: 18px; display: flex; flex-direction: column; gap: 2px; }
.tt-preview div:first-child { color: var(--ink); font-weight: 700; }
.tt-coins { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 999px; padding: 6px 20px 6px 8px; box-shadow: var(--shadow); font-weight: 900; font-size: 26px; min-height: 56px; box-sizing: border-box; }
.tt-coins-l { font-size: 14px; font-weight: 800; color: var(--soft); text-transform: uppercase; }
.tt-coins.is-neg .tt-coins-n { color: var(--bad); }
.tt-coins.is-bump { animation: tt-bump .35s ease; }
@keyframes tt-bump { 40% { transform: scale(1.12); } }
.tt-goal { background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 8px 18px 10px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; min-width: 0; max-width: min(520px, calc(100vw - 560px)); box-sizing: border-box; }
.tt-goal-title { font-weight: 900; color: var(--accent); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.tt-goal-text { font-weight: 700; font-size: 18px; }
.tt-goal-track { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tt-goal-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .6s ease; }
.tt-goal.is-done .tt-goal-fill { background: var(--good); }
.tt-toast { background: var(--paper); color: var(--ink); border-radius: 999px; padding: 8px 18px 8px 8px; box-shadow: var(--shadow); font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 10px;
  animation: tt-in .25s ease; transition: opacity .4s, transform .4s; }
.tt-toast-good { box-shadow: var(--shadow), inset 0 0 0 3px var(--good); }
.tt-toast-bad { box-shadow: var(--shadow), inset 0 0 0 3px var(--bad); }
.tt-toast.is-out { opacity: 0; transform: translateY(10px); }
@keyframes tt-in { from { opacity: 0; transform: translateY(12px); } }
.tt-stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.tt-star { width: 24px; height: 24px; background: #ddd6c6; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tt-star.is-on { background: #f5b301; }
.tt-star.is-half { background: linear-gradient(90deg, #f5b301 50%, #ddd6c6 50%); }
.tt-chart { width: 100%; height: auto; background: #faf7f0; border-radius: 12px; }
.tt-legend { display: flex; gap: 18px; font-size: 16px; font-weight: 700; margin-top: 4px; }
.tt-legend i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.tt-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
/* v1.4 quotes: the small line under a priced button, the kitchen gauge */
.q-line { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 4px; font-size: 14px; font-weight: 700; color: var(--soft); line-height: 1.15; text-align: center; }
.q-line b { color: var(--ink); font-size: 15px; }
.q-cost { display: inline-flex; align-items: center; gap: 3px; }
.q-cost + .q-when::before { content: '· '; }
.sh-rush .q-line, .rush-btn .q-line { flex-direction: column; } .sh-rush .q-cost + .q-when::before, .rush-btn .q-cost + .q-when::before { content: none; }
.q-full { color: #b36b00; font-weight: 800; }
.q-line .tt-icon img, .q-line .tt-dot { width: 16px; height: 16px; min-width: 16px; font-size: 8px; }
.q-line.is-no { color: var(--bad); }
.q-kitchen { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 700; color: var(--soft); margin: 4px 0 8px; }
.q-kbar { display: block; width: 100%; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.q-kbar i { display: block; height: 100%; background: #7fb685; border-radius: 99px; transition: width .4s ease; }
.q-kitchen.is-full .q-kbar i { background: #e0a030; }
.q-pending { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; background: #fff1d6; color: #9a6400; border-radius: 99px; padding: 2px 8px; }
.is-pending .tt-icon { opacity: .5; }