/* MatchPoint Kids · round 3, everyone's default (5 Nov, Joshua: "making the duo lingo touches to the other pages and all cards…
   I see sometimes purple bg then purple button… too much purple. I'd prefer a green button more often").
   html.duo3 sits on top of round 2 (html.duo2, design/duo2.css); design/ux2.js turns both on unless ?duo=0/1/2 picked another.
   · every main button is court green with a darker edge that sinks when tapped (was purple, so purple pop-ups had purple buttons)
   · purple stays for small things: a picked answer, labels, the tip card
   · every card on Home, Journal, Match, Profile and the pop-ups: hairline + slim edge, and the ones you tap sink
   · the Journey card's steps fill in green
   The Journey's background and road, Home's layout and the tab bar stay exactly as they are. */

html.duo3{
  --mp-go:#18A957;--mp-go-edge:#0F8443;--mp-go-tint:#E8F7EF;--mp-go-ring:#A7E2C4;
  --mp-court:var(--mp-go);--mp-court-edge:var(--mp-go-edge);
  --ds-btn-bg:var(--mp-go);--ds-btn-fg:#fff;--ds-btn-edge:0 4px 0 var(--mp-go-edge);--ds-btn-depth:4px;--mp-press:4px;
  --ds-grad-green:linear-gradient(#18A957,#18A957)
}

/* ---------- buttons ---------- */
html.duo3 .b3:not(.ghost):not(.white):not([disabled]),html.duo3 .j4-go{text-shadow:none}
html.duo3 .j4-go{background:var(--mp-go) !important;box-shadow:0 4px 0 var(--mp-go-edge) !important}
html.duo3 .b3.sm:not(.white):not(.ghost):not([disabled]){box-shadow:0 3px 0 var(--mp-go-edge) !important}
html.duo3 .b3:active:not([disabled]),html.duo3 .j4-go:active{transform:translateY(4px) !important;box-shadow:none !important}
/* a second button next to a main one: white with an edge */
html.duo3 #sheet .b3.white,html.duo3 .flow .b3.white{background:#fff !important;color:var(--ds-ink,#101B40) !important;box-shadow:0 0 0 2px var(--mp-line) inset,0 3px 0 var(--mp-edge) !important}
/* the "not quite" result keeps its clay button (duo2 sets it on .fban.no) */
html.duo3 .fban.no .b3{box-shadow:0 4px 0 var(--mp-clay-edge) !important}

/* ---------- pop-ups: the purple "Use it" box goes calm so the green button is the one thing to press ---------- */
html.duo3 .tsh-use{background:var(--mp-page) !important;box-shadow:0 0 0 1.5px var(--mp-line) inset !important}

/* ---------- cards everywhere ---------- */
html.duo3 :is(.j3next,.m6-ask,.m6-pb,.m4-how,.jn-week,.pf-tro,.tkrow,.mc-tease,.jn-row:not(.flat),.jn-quick button,.m6-qk button,.m6-in){
  box-shadow:0 0 0 1.5px var(--mp-line) inset,0 3px 0 var(--mp-edge) !important}
html.duo3 :is(.m4-how,.m6-pb,.m6-in,.m6-qk button,.jn-quick button,.jn-row:not(.flat),.pf-tro,.mc-tease,.m5-t,.tod-b){transition:transform .08s,box-shadow .08s}
html.duo3 :is(.m4-how,.m6-pb,.m6-in,.m6-qk button,.jn-quick button,.jn-row:not(.flat),.pf-tro,.mc-tease):active{transform:translateY(3px);box-shadow:0 0 0 1.5px var(--mp-line) inset !important}
html.duo3 .m5-t:active{transform:translateY(4px);box-shadow:none !important}
/* the host's speech bubble matches the cards */
html.duo3 .qh-bub{border:0;box-shadow:0 0 0 2px var(--mp-line) inset,0 3px 0 var(--mp-edge)}
html.duo3 .qh-bub::before{border-color:var(--mp-line)}

/* ---------- Match: our animals on the quick chips ---------- */
.m6-qk .m6-ani{width:34px;height:34px;flex:none;border-radius:50%;background:var(--mp-page,#F7F6FB);object-fit:cover;object-position:50% 4%}   /* just the face of the pose */

/* ---------- Journal: my tennis week ---------- */
.jn-week{margin:4px 0 14px;padding:14px 14px 12px;border-radius:20px;background:#fff}
.jn-wt{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jn-wt b{font-size:16px;font-weight:900;color:var(--ds-ink,#101B40)}
.jn-wt span{font-size:13.5px;font-weight:800;color:var(--mp-go-edge,#0F8443)}
.jn-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}
.jn-days i{display:flex;flex-direction:column;align-items:center;gap:5px;font-style:normal}
.jn-days span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mp-page,#F7F6FB);box-shadow:0 0 0 1.5px var(--mp-line,#ECEAF4) inset}
.jn-days .on span{background:var(--mp-go-tint,#E8F7EF);box-shadow:0 0 0 2px var(--mp-go-ring,#A7E2C4) inset}
.jn-days .now span{box-shadow:0 0 0 2.5px var(--mp-go,#18A957) inset}
.jn-days img{width:24px;height:24px;object-fit:contain}
.jn-days small{font-size:12px;font-weight:800;color:#8E8AAE}
.jn-days .now small{color:var(--mp-go-edge,#0F8443)}

/* ---------- Journey's bottom card: steps fill in green (the road and background stay) ---------- */
html.duo3 .j3n-bar i.d{background:var(--mp-go) !important}
html.duo3 .j3n-bar i.c{background:var(--mp-go-ring) !important}
html.duo3 .j3n-pr em{color:var(--mp-go-edge) !important}


/* ---------- Profile: All games (testing, 5 Nov: "in profile can you add all games so my son can test them") ---------- */
.pf-games{margin:12px 19px 0;padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px var(--mp-line,#ECEAF4) inset,0 3px 0 var(--mp-edge,#E2DEF0)}
.pf-gh b{display:block;font-size:17px;font-weight:900;color:var(--ds-ink,#101B40)}
.pf-gh small{font-size:13.5px;font-weight:700;color:#8E8AAE}
.pf-gg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pf-gg button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:0;border-radius:16px;background:var(--mp-page,#F7F6FB);font:inherit;cursor:pointer;box-shadow:0 0 0 1.5px var(--mp-line,#ECEAF4) inset,0 3px 0 var(--mp-edge,#E2DEF0);transition:transform .08s,box-shadow .08s}
.pf-gg button:active{transform:translateY(3px);box-shadow:0 0 0 1.5px var(--mp-line,#ECEAF4) inset}
.pf-gg i{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--gc);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.pf-gg i svg{width:24px;height:24px}
.pf-gg b{font-size:12.5px;font-weight:800;line-height:1.15;text-align:center;color:var(--ds-ink,#101B40)}

/* Target Smash inside the app: its top bar clears the app's round close + sound buttons (smash.html has none) */
.flow.gamef .ghost-host>.ts .ts-hud{padding:0 64px !important}

/* Add a match (5 Nov, Joshua: "is this the same two green buttons?"): a pick is not a button. "I won" and "Yes" were a bright
   old gradient green that looked like a second Save; now a picked answer is mint with a green ring, and only Save is solid green */
html.duo3 #sheet .jn-sh .jn-seg.res button.on[data-jseg=won],html.duo3 #sheet .jn-sh .jn-seg.yn button.on[data-jseg=yes]{
  background:var(--mp-go-tint) !important;color:var(--mp-go-edge) !important;box-shadow:0 0 0 2px var(--mp-go) inset !important}

/* ---------- iPad (5 Nov: Danny plays on an iPad): the app stretched edge to edge, so cards were huge and the road hugged the left.
   Now it sits in a centred column, like a big phone, with a soft frame either side. Phones are unchanged. ---------- */
@media (min-width:700px){
  html.full .stage{display:flex;justify-content:center;background:#ECEAF6}
  html.full .phone{width:min(100%,620px);margin:0 auto;box-shadow:0 0 0 1px rgba(16,27,64,.06),0 24px 60px -20px rgba(16,27,64,.18)}
}

/* ---------- All lessons: the animal who teaches each one sits at the end of its row ---------- */
.tlist button .tl-host{width:42px;height:42px;flex:none;margin-left:auto;border-radius:50%;background:#fff no-repeat 50% 7%/185%;box-shadow:0 0 0 1.5px var(--mp-line,#ECEAF4)}   /* just the face */
.tlist button>span{flex:1;min-width:0}

/* ---------- little messages ("A free game ticket for today!") drop in at the top: at the bottom they covered the lesson's
   answer explanation and the main button ---------- */
html.duo3 .toast{top:calc(env(safe-area-inset-top,0px) + 92px);bottom:auto;transform:translate(-50%,-16px);max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 24px -10px rgba(16,27,64,.45)}
html.duo3 .toast.on{transform:translate(-50%,0)}

/* ---------- Weekly focus: the "add another" line had the same empty circle as a real goal, so it looked like a tick box.
   Now it's a dashed + and says what it does ---------- */
html.pm4 .f6-new .f4-ck{background:none;box-shadow:0 0 0 1.5px #B9B5D3 inset;display:grid;place-items:center}
html.pm4 .f6-new .f4-ck::after{content:"+";font-size:15px;font-weight:900;line-height:1;color:#8E8AAE;margin-top:-1px}
html.pm4 .f6-new .f4-ck{border:1.5px dashed #B9B5D3;box-shadow:none}
html.pm4 .f6-in::placeholder{color:#8E8AAE;opacity:1}

/* ---------- tall screens (iPad, big phones): the question and answers sat at the top with a big empty gap above the button.
   Now they sit together in the middle, with a bigger host and bigger answers. Phones are unchanged ---------- */
@media (min-height:880px){
  html.duo3 .flow.quiz .fq.qh{margin-top:auto}
  html.duo3 .flow.quiz .fbody{flex:0 1 auto;min-height:0;margin-bottom:auto;padding-bottom:24px}
  html.duo3 .flow.quiz .qh-pic{flex-basis:132px;width:132px;height:156px}
  html.duo3 .flow.quiz .fq.qh .qh-bub h2{font-size:25px}
  html.duo3 .flow.quiz .opts button{min-height:72px;font-size:19px}
}