/* Digi's Estimation Quest — topic styles on top of the shared game.css (number lines, gadgets, Digi & Pip,
   the wardrobe). Place-value colours come from game.css: ones c0 yellow · tens c1 green · hundreds c2 blue · thousands c3 purple. */

/* ---------- Digi & Pip (3D avatar images) ---------- */
.char { position: relative; display: block; }
.char img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); user-select: none; -webkit-user-drag: none; }
.char.bump[data-mood="happy"], .char.bump[data-mood="wave"] { animation: c-bounce .5s; }
.char.bump[data-mood="wow"] { animation: c-jump .6s; }
.char.bump[data-mood="think"] { animation: c-tilt .7s forwards; }
.char-pip.bump[data-mood="excited"] { animation: c-dart .9s; }
.char.bump[data-mood="excited"]:not(.char-pip) { animation: c-bounce .5s; }
.char[data-mood="think"] img { transform: rotate(-6deg); transform-origin: bottom center; transition: transform .3s; }
@keyframes c-bounce { 30% { transform: translateY(-10px); } 60% { transform: translateY(0); } 80% { transform: translateY(-4px); } }
@keyframes c-jump { 40% { transform: translateY(-22px) scale(1.04); } }
@keyframes c-tilt { 50% { transform: rotate(-4deg); } }
/* Pip's hover-dart: short bursts on his rotor */
@keyframes c-dart { 20% { transform: translate(-6px, -18px); } 45% { transform: translate(8px, -26px); } 70% { transform: translate(-2px, -12px); } }

/* menu duo */
.duo { display: flex; align-items: flex-end; gap: 6px; position: relative; }
.menu-digi { width: clamp(80px, 12vw, 140px); height: clamp(96px, 17vh, 170px); animation: bob 2.4s ease-in-out infinite; }
.menu-pip { width: clamp(84px, 12vw, 146px); height: clamp(92px, 16vh, 160px); animation: hover 2.2s ease-in-out infinite; }
.menu { justify-content: safe center; overflow-y: auto; gap: 16px; padding-top: 56px; }
.menu .title { font-size: clamp(38px, 7vw, 80px); }
@media (max-height: 760px) { .menu .menu-buttons .btn.big { min-height: 44px; padding-top: 9px; padding-bottom: 9px; } }
@keyframes hover { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(-20px); } }
.title .t2 { color: var(--c1); }

/* coach: both friends; the speaker steps forward */
.coach .coach-duo { display: flex; align-items: flex-end; gap: 2px; flex: none; }
.coach .coach-char { width: 70px; height: 86px; opacity: .55; transform: scale(.82); transform-origin: bottom center; transition: opacity .2s, transform .2s; }
.coach[data-speaker="digi"] .char-digi, .coach[data-speaker="pip"] .char-pip { opacity: 1; transform: none; }
.coach:not([data-speaker="digi"]):not([data-speaker="pip"]) .coach-char { opacity: .9; transform: scale(.9); }
.coach .bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; min-width: 0; }
.coach .bubble-who { font-family: var(--display); font-size: 13px; letter-spacing: 1px; padding: 2px 10px; border-radius: 999px 999px 0 0; color: #1a1f3c; background: #cfe6ff; }
.coach .bubble-who:empty { display: none; }
.coach[data-speaker="pip"] .bubble-who { background: #FFD84D; }
.coach[data-speaker="pip"] .bubble { border-left: 6px solid #FFC83D; }
.coach[data-speaker="digi"] .bubble { border-left: 6px solid #6ab8ff; }
@media (max-width: 640px) { .coach .coach-char { width: 48px; height: 60px; } }

/* story scene */
.story .scene .char { position: absolute; bottom: 8px; height: 72%; }
.story .scene .story-digi { left: 22%; width: 22%; }
.story .scene .story-pip { right: 22%; width: 22%; }
.story .scene .char:not(.speaking) { opacity: .75; filter: saturate(.85); }
.story .scene .char.speaking { animation: bob 2.4s ease-in-out infinite; }
.dialog[data-who="pip"] .who { color: #FFD84D; }
.dialog[data-who="digi"] .who { color: #8fd0ff; }

/* ---------- number line ---------- */
.numline-wrap { width: 100%; max-width: 760px; }
.nl-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }
.nl-axis { stroke: #f4f6ff; stroke-width: 5; stroke-linecap: round; }
.nl-tick { stroke: rgba(244,246,255,.65); stroke-width: 3; }
.nl-major { stroke: #f4f6ff; stroke-width: 6; stroke-linecap: round; }
.nl-lab { fill: #f4f6ff; font-family: var(--display); font-size: 34px; text-anchor: middle; paint-order: stroke; stroke: #101640; stroke-width: 8px; stroke-linejoin: round; }
.nl-lm.near .nl-major, .nl-lm.pick .nl-major { stroke: var(--warm); }
.nl-lm.near .nl-lab, .nl-lm.pick .nl-lab { fill: var(--warm); }
.nl-lm.pick .nl-lab { text-decoration: underline; }
.nl-lm.answer .nl-major { stroke: var(--good); stroke-width: 10; }
.nl-lm.answer .nl-lab { fill: var(--good); font-size: 40px; }
.nl-midbar { fill: rgba(255,200,61,.35); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.nl-midlab { fill: var(--accent); font-size: 22px; font-weight: 900; text-anchor: middle; }
.nl-pinline { stroke: #ff8fa3; stroke-width: 4; }
.nl-pindot { fill: #ff8fa3; stroke: #fff; stroke-width: 3; }
.nl-pinbox { fill: #fff; stroke: #ff8fa3; stroke-width: 3; }
.nl-pintxt { fill: #1a1f3c; font-family: var(--display); font-size: 30px; text-anchor: middle; }
.nl-arc { fill: none; stroke: rgba(244,246,255,.55); stroke-width: 4; stroke-dasharray: 8 6; }
.nl-arc.win { stroke: var(--good); stroke-width: 6; stroke-dasharray: none; }
.nl-arc.tie { stroke: var(--accent); stroke-width: 5; }
.nl-arclab { fill: #dfe6ff; font-size: 28px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: #101640; stroke-width: 7px; stroke-linejoin: round; }
.nl-arclab.win { fill: var(--good); }
.nl-arclab.tie { fill: var(--accent); }
.nl-hit { fill: transparent; cursor: pointer; }
.nl-hit:hover { fill: rgba(255,255,255,.06); }
.nl-ghostdot { fill: rgba(255,143,163,.9); stroke: #fff; stroke-width: 3; }
.gadget-bubble .nl-ghostdot, .nl-ghost.float .nl-ghostdot { fill: rgba(140,220,255,.55); stroke: #dff6ff; }
.nl-keys { justify-content: center; align-items: center; }
.line-input { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* digits with a deciding-digit ring (uses .numline from game.css) */
.numline.big { font-size: clamp(54px, 9vw, 86px); }
.dg-note { font-family: var(--font); font-size: 15px; color: var(--warm); margin-left: 12px; align-self: center; }

/* ---------- gadgets ---------- */
.gadget { width: 100%; max-width: 780px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18)); border: 2px solid rgba(255,216,77,.35); border-radius: 22px; padding: 10px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gadget-head { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-family: var(--display); color: #FFD84D; font-size: 17px; letter-spacing: .4px; }
.gadget-icon { font-size: 24px; }
.gadget-num { margin-top: -4px; }
.mid-bulb { font-weight: 900; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.3); border: 2px solid var(--line); }
.mid-bulb.on { background: var(--accent); color: #2b1d00; border-color: #fff; animation: pulse-bulb .8s 3; }
@keyframes pulse-bulb { 50% { box-shadow: 0 0 0 10px rgba(255,200,61,.25); } }
.rule-card { background: #fff; color: #1a1f3c; border-radius: 18px; padding: 14px 18px; border-left: 8px solid var(--accent); max-width: 460px; }
.rule-card .rule-title { font-family: var(--display); font-size: 22px; color: #b07a00; }
.rule-card p { margin: 6px 0 0; }
.scale-row { width: 100%; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; }
.scale-tag { font-weight: 900; color: var(--muted); font-size: 14px; text-align: right; }
.scale-tag.on { color: var(--accent); }
.statement, .context-card { background: #fff; color: #1a1f3c; border-radius: 14px; padding: 10px 16px; font-size: 20px; font-weight: 900; text-align: center; }

/* Estimate-O-Meter */
.meter { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(360px, 100%); }
.m-title { font-family: var(--display); color: #FFD84D; }
.meter-svg { width: 100%; height: auto; }
.m-zone { fill: none; stroke-width: 26; }
.m-zone.low { stroke: #5fb8ff; } .m-zone.ok { stroke: #2fc285; } .m-zone.high { stroke: #ff8a3d; }
.m-lab { fill: #fff; font-size: 15px; font-weight: 900; text-anchor: middle; }
.m-needle { stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.m-hub { fill: #fff; }
.m-read { font-family: var(--display); font-size: 22px; min-height: 1.3em; text-align: center; }

/* estimate vs exact */
.calc { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--display); }
.calc-note { font-family: var(--font); color: var(--muted); font-size: 15px; }
.calc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: clamp(28px, 4.4vw, 44px); }
.calc-row.hidden { visibility: hidden; }
.calc-row .op, .calc-row .approx { color: var(--muted); }
.calc-row .cv.r { color: var(--c1); }
.calc-row .cv.big { color: var(--accent); }
.calc-row .tag { font-family: var(--font); font-size: 14px; font-weight: 900; padding: 3px 10px; border-radius: 999px; background: rgba(255,200,61,.2); color: var(--accent); }
.calc-row .tag.ex { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- quest path + the Great Estimation Machine ---------- */
.questhead { display: flex; gap: 14px; align-items: center; width: 100%; flex-wrap: wrap; justify-content: center; }
.questpath { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; flex: 1; }
.qstation { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); min-width: 70px; font-size: 12px; }
.qstation .qs-i { font-size: 22px; }
.qstation.now { border-color: var(--accent); animation: bob 1.6s ease-in-out infinite; }
.qstation.done { background: rgba(61,220,151,.2); border-color: var(--good); }
.eq-machine { --fill: 0%; width: 84px; height: 84px; border-radius: 22px; background: rgba(255,255,255,.1); border: 3px solid #FFD84D; position: relative; overflow: hidden; flex: none; display: grid; place-items: center; }
.eq-machine-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill); background: linear-gradient(180deg, #FFD84D, #36D27A); transition: height .6s; }
.eq-machine-ico { position: relative; font-size: 40px; }
.eq-machine.whole .eq-machine-ico { animation: spin 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- reward outfits ---------- */
.outfit-card { align-items: center; }
.outfit-pair { display: flex; align-items: flex-end; gap: 2px; flex: none; }
.outfit-pair .char { width: 62px; height: 78px; }

/* ---------- map: world headers ---------- */
.world-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: linear-gradient(120deg, var(--wa), var(--wb)); border: 1px solid var(--line); margin-top: 8px; }
.world-head h2 { font-size: 24px; }
.wh-icon { font-size: 34px; }
.node-outfit { font-size: 15px; }

/* ---------- wardrobe ---------- */
.wr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wr-col { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 14px; }
.wr-stage { height: 200px; display: grid; place-items: end center; }
.wr-big { width: 170px; height: 200px; }
.outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; width: 100%; }
.outfit { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); background: rgba(0,0,0,.2); color: var(--text); cursor: pointer; font: inherit; min-height: 44px; }
.outfit .char { width: 64px; height: 74px; }
.outfit .olabel { font-size: 13px; font-weight: 900; }
.outfit.on { border-color: var(--accent); background: rgba(255,200,61,.15); }
.outfit.off .char img { filter: grayscale(1) brightness(.35); }
.outfit.off .olabel { color: var(--muted); }
@media (max-width: 700px) { .wr-cols { grid-template-columns: 1fr; } .wr-stage { height: 150px; } .wr-big { width: 130px; height: 150px; } }

/* ---------- misc shared bits (kept from the other Digi games) ---------- */
.remedy-host { width: 100%; display: flex; flex-direction: column; align-items: center; }
.remedy { width: 100%; background: rgba(0,0,0,.25); border: 2px solid rgba(255,181,71,.5); border-radius: 18px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.remedy-title { font-family: var(--display); color: var(--warm); font-size: 18px; }
.remedy-cap { font-size: 17px; text-align: center; min-height: 2.6em; }
.remedy .numline-wrap { max-width: 520px; }
.inline-q { width: 100%; }
.qinfo { align-self: center; background: #fff; color: #1a1f3c; border-radius: 14px; padding: 8px 16px; font-size: 20px; font-weight: 900; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); max-width: 100%; }
@media (min-width: 900px) and (max-height: 820px) { .qinfo { font-size: 17px; padding: 6px 12px; } .remedy-cap { font-size: 15px; min-height: 2.4em; } }
.stage > .btn { width: auto; max-width: none; align-self: center; }
@media (prefers-reduced-motion: reduce) { .char, .menu-digi, .menu-pip, .eq-machine-ico, .qstation.now { animation: none !important; } }

/* ---------- explanation builder + number pad (same components as the other Digi games) ---------- */
.ecards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ecard.used { opacity: .3; }
.explain { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; }
.explain-eq { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.eslot { min-width: 150px; max-width: 220px; min-height: 64px; border-radius: 14px; border: 3px dashed rgba(255,255,255,.3); background: rgba(0,0,0,.2); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; padding: 6px 10px; }
.eslot.filled { border-style: solid; border-color: var(--good); background: rgba(61,220,151,.12); }
.eqop { font-family: var(--display); font-size: 26px; color: var(--muted); }
.eresult { font-family: var(--display); font-size: 22px; background: #fff; color: #1a1f3c; padding: 8px 14px; border-radius: 12px; }
.ecard { border-radius: 12px; padding: 10px 14px; background: var(--panel2); border: 2px solid var(--line); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; max-width: 260px; text-align: left; }
.npad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.npad-disp { font-family: var(--display); font-size: 40px; min-width: 160px; text-align: center; padding: 4px 14px; border-radius: 12px; background: #0a0f28; border: 3px solid #2a377c; }
.npad-disp.empty { color: var(--muted); }
.npad-keys { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
.npk { height: 52px; border-radius: 12px; border: 0; background: var(--panel2); color: #fff; font-family: var(--display); font-size: 24px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.remedy-cap { margin-top: 10px; }
/* phones: the number line is drawn smaller, so its labels get bigger */
@media (max-width: 640px) {
  .nl-lab { font-size: 52px; stroke-width: 10px; }
  .nl-lm.answer .nl-lab { font-size: 58px; }
  .nl-pintxt { font-size: 36px; }
  .nl-arclab { font-size: 42px; }
  .nl-midlab { font-size: 34px; }
  .gadget { padding: 8px 8px 10px; }
}