/* Test D missions (ui 5, 12 Nov 2026): the mission-only mechanics on top of ui 3's play.css (the page, the answer cards,
   the hint, the feedback, the foot button and the Complete page are play.css's). Here: the intro card, the scenario card,
   the logo grid, the picture reveal, the clue cards, the picture tiles to tick, the order slots, the sort rows, the maths
   steps, the money steppers and the speed timer; and missions.html's list. Tap targets at least 44 px. */

/* ---- the intro (before the first question): the kind's art, tier, line and reward, then Start */
.ms-intro { display: grid; justify-items: center; text-align: center; margin-top: 24px; padding: 24px 20px 20px;
  border-radius: var(--td-r-card); background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; }
.ms-intro img { width: 152px; height: 152px; object-fit: contain; }
.ms-intro h2 { margin-top: 12px; font: 800 26px/1.1 var(--td-font); letter-spacing: -0.4px; color: #14123a; }
.ms-intro p { margin: 8px 0 0; font: 500 16px/22px var(--td-font); color: #3c3f5c; }
.ms-tier { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 12px 5px 6px; border-radius: 99px;
  background: #ece8ff; color: #4a36d6; font: 800 12px/1 var(--td-font); letter-spacing: .5px; text-transform: uppercase; }
.ms-tier img { width: 22px; height: 22px; object-fit: contain; }
.ms-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.ms-reward span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 99px;
  background: #fff6d6; color: #5a4300; font: 800 14px/1 var(--td-font); box-shadow: inset 0 0 0 1px #f2d77a; }
.ms-reward img { width: 20px; height: 20px; object-fit: contain; }
.ms-steps-note { margin: 14px 0 0; font: 600 14px/19px var(--td-font); color: #5b46e6; }

/* ---- a scenario above the question (Business Builder, Investor's Maths, Run it for a day, Case Study) */
.ms-scene { margin: 20px 0 0; padding: 14px 16px; border-radius: var(--td-r-card); background: #fff;
  box-shadow: inset 0 0 0 1px #e6e3f5; font: 500 15px/21px var(--td-font); color: #2d3150; }
.ms-scene b { display: block; margin-bottom: 4px; font: 800 13px/1 var(--td-font); letter-spacing: .5px; text-transform: uppercase; color: #5b46e6; }
.ms-scene + .pl-q { margin-top: 16px; }

/* ---- Rival Radar: the two rivals side by side (TD_PLAY.missions.rival_radar.pair) */
.ms-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; margin: 20px 0 0; }
.ms-vs span { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: var(--td-r-card); background: #fff;
  box-shadow: inset 0 0 0 1px #e6e3f5; font: 800 15px/1.2 var(--td-font); color: #14123a; text-align: center; }
.ms-vs img { width: 52px; height: 52px; object-fit: contain; }
.ms-vs b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #14123a; color: #ffd84a; font: 800 14px/1 var(--td-font); }
.ms-intro .ms-vs { margin-top: 14px; }

/* ---- Logo Quest: four logos in a 2 × 2 grid */
.ms-pics { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--td-gap); margin: 0; padding: 0; }
.ms-pic { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 18px; border: 0;
  border-radius: var(--td-r-card); background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; cursor: pointer; }
.ms-pic img { width: 100%; height: 100%; object-fit: contain; }
.ms-pic:disabled { cursor: default; }
.ms-pic.right { box-shadow: inset 0 0 0 4px #08a33a; }
.ms-pic.wrong { box-shadow: inset 0 0 0 4px #f0392b; }
.ms-pic.dim { opacity: .45; }
.ms-pic.right::after, .ms-pic.wrong::after { content: ''; position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: #08a33a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; }
.ms-pic.wrong::after { background: #f0392b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.5 9.5l9 9M18.5 9.5l-9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat; }

/* ---- Logo Quest: the picture reveal (the mark appears in four steps; tap an answer whenever you know it) */
.ms-reveal { position: relative; display: grid; place-items: center; margin: 0 auto var(--td-gap); width: min(200px, 60%); aspect-ratio: 1;
  border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; }
.ms-reveal img { width: 82%; height: 82%; object-fit: contain; transition: clip-path .5s ease; }
.ms-reveal[data-step='0'] img { clip-path: polygon(0 55%, 45% 55%, 45% 100%, 0 100%); }
.ms-reveal[data-step='1'] img { clip-path: polygon(0 0, 100% 0, 100% 40%, 45% 40%, 45% 100%, 0 100%); }
.ms-reveal[data-step='2'] img { clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 62%, 62% 100%, 0 100%); }
.ms-reveal[data-step='3'] img { clip-path: inset(0); }
.ms-reveal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--td-gap); }
.ms-reveal-bar .dots { display: flex; gap: 6px; }
.ms-reveal-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9d4fb; }
.ms-reveal-bar .dots i.on { background: #5b46e6; }
.ms-more { min-height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: #fff; color: #4a36d6;
  box-shadow: inset 0 0 0 1.5px #b9adf7; font: 800 14px/1 var(--td-font); cursor: pointer; }
.ms-more:disabled { opacity: .5; cursor: default; }

/* ---- Brand Detective: clue cards with whose clue each is, after the pick */
.ms-clue .pl-opt { grid-template-columns: 40px minmax(0, 1fr); font-weight: 600; }
.ms-clue .pl-opt.right, .ms-clue .pl-opt.wrong { grid-template-columns: 40px minmax(0, 1fr) 20px; }
.ms-whose { display: block; margin-top: 6px; font: 800 12px/1 var(--td-font); letter-spacing: .4px; text-transform: uppercase; opacity: .85; }

/* ---- Product Match: picture tiles to tick (tap all that belong), then Check */
.ms-ticks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--td-gap); margin: 0; padding: 0; }
.ms-tick { position: relative; width: 100%; display: grid; grid-template-rows: 88px auto; gap: 8px; justify-items: center; min-height: 44px;
  padding: 12px 10px 14px; border: 0; border-radius: var(--td-r-card); background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5;
  font: 700 15px/1.25 var(--td-font); color: #14123a; text-align: center; cursor: pointer; }
.ms-tick img { width: 88px; height: 88px; object-fit: contain; border-radius: 12px; }
.ms-tick[aria-pressed='true'] { box-shadow: inset 0 0 0 3px #5b46e6; background: #f2efff; }
.ms-tick[aria-pressed='true']::after { content: ''; position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: #5b46e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.ms-tick.right { box-shadow: inset 0 0 0 3px #08a33a; background: #e9fbe9; }
.ms-tick.wrong { box-shadow: inset 0 0 0 3px #f0392b; background: #fff0ef; }
.ms-tick.missed { box-shadow: inset 0 0 0 3px #08a33a; background: #fff; border: 0; outline: 2px dashed #08a33a; outline-offset: -8px; }
.ms-tick.right::after { background-color: #08a33a; }
.ms-tick.wrong::after { background-color: #f0392b; }
.ms-tick:disabled { cursor: default; }

/* ---- Founder Match: put the story in order (tap the cards in order; they fill the numbered slots) */
.ms-slots { list-style: none; display: grid; gap: 8px; margin: 0 0 var(--td-gap); padding: 0; counter-reset: slot; }
.ms-slots li { counter-increment: slot; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 14px 8px 10px; border-radius: 14px; background: #ece8ff; color: #9a92c9; font: 600 15px/20px var(--td-font); }
.ms-slots li::before { content: counter(slot); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: #5b46e6; font: 800 15px/1 var(--td-font); }
.ms-slots li.on { background: #fff; color: #14123a; box-shadow: inset 0 0 0 1.5px #b9adf7; }
.ms-slots li.on::before { background: #ece8ff; }
.ms-slots li.right { background: #e9fbe9; color: #0a5a22; box-shadow: inset 0 0 0 1.5px #3bc35b; }
.ms-slots li.wrong { background: #fff0ef; color: #8a1d14; box-shadow: inset 0 0 0 1.5px #f2958c; }
.ms-cards { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.ms-cards button { width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1px #e6e3f5, 0 2px 0 #e6e3f5; text-align: left; font: 700 15px/20px var(--td-font); color: #14123a; cursor: pointer; }
.ms-undo { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 4px; border: 0; background: none;
  color: #4a36d6; font: 800 14px/1 var(--td-font); cursor: pointer; }
.ms-undo:disabled { opacity: .4; cursor: default; }

/* ---- CEO Challenge: who does each thing (one row per label, three boxes to tap) */
.ms-sort { list-style: none; display: grid; gap: var(--td-gap); margin: 0; padding: 0; }
.ms-sort li { padding: 12px; border-radius: var(--td-r-card); background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; }
.ms-sort li > p { margin: 0 0 10px; font: 700 16px/21px var(--td-font); color: #14123a; }
.ms-sort .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ms-sort .seg button { min-height: 44px; padding: 0 4px; border: 0; border-radius: 12px; background: #f2f1f8; color: #3c3f5c;
  font: 800 14px/1.1 var(--td-font); cursor: pointer; }
.ms-sort .seg button[aria-pressed='true'] { background: #5b46e6; color: #fff; }
.ms-sort .seg button.right { background: #08a33a; color: #fff; }
.ms-sort .seg button.wrong { background: #f0392b; color: #fff; }
.ms-sort .seg button.should { box-shadow: inset 0 0 0 2.5px #08a33a; color: #0a7a2b; background: #e9fbe9; }
.ms-sort .seg button:disabled { cursor: default; }

/* ---- a choice with a consequence (CEO Challenge, Case Study), and What really happened */
.ms-what { margin: var(--td-gap) 0 0; padding: 14px 16px 16px; border-radius: var(--td-r-card); background: #fff6d6;
  box-shadow: inset 0 0 0 1.5px #f2d77a; color: #4a3800; font: 500 15px/21px var(--td-font); }
.ms-what b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 800 16px/1.2 var(--td-font); }
.ms-what b img { width: 24px; height: 24px; object-fit: contain; }
.pl-opt.picked { background: #5b46e6; color: #fff; box-shadow: none; }
.pl-opts li .pl-opt.picked b { background: #fff; color: #5b46e6; }
.pl-fb.mid { background: #eef4ff; box-shadow: inset 0 0 0 1.5px #8fb4f5; color: #173f8a; }

/* ---- Business Builder and Investor's Maths: the steps, each with its working once answered */
.ms-done-steps { list-style: none; display: grid; gap: 8px; margin: 0 0 var(--td-gap); padding: 0; }
.ms-done-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; font: 600 14px/19px var(--td-font); color: #3c3f5c; }
.ms-done-steps li::before { content: ''; width: 22px; height: 22px; border-radius: 50%;
  background: #13b34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.ms-done-steps b { display: block; color: #14123a; font-weight: 800; }
.ms-stepof { margin: 4px 0 12px; font: 700 14px/1 var(--td-font); color: #5b46e6; }
.ms-sq { margin: 0 0 16px; font: 700 18px/24px var(--td-font); color: #14123a; text-wrap: pretty; }
.ms-working { display: block; margin-top: 6px; font: 800 16px/1.3 var(--td-font); }

/* ---- Run it for a day: share ₹100 in ₹10 steps (− and + on each choice) */
.ms-left { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--td-gap); padding: 12px 16px;
  border-radius: var(--td-r-card); background: #14123a; color: #fff; font: 700 15px/1 var(--td-font); }
.ms-left b { font: 800 24px/1 var(--td-font); color: #ffd84a; }
.ms-alloc { list-style: none; display: grid; gap: var(--td-gap); margin: 0; padding: 0; }
.ms-alloc li { padding: 12px 12px 14px 16px; border-radius: var(--td-r-card); background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; }
.ms-alloc p { margin: 0; font: 700 16px/21px var(--td-font); color: #14123a; }
.ms-alloc .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin-top: 10px; }
.ms-alloc .row button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ece8ff; color: #4a36d6; font: 800 22px/1 var(--td-font); cursor: pointer; }
.ms-alloc .row button:disabled { opacity: .35; cursor: default; }
.ms-alloc .amt { display: grid; gap: 6px; text-align: center; font: 800 18px/1 var(--td-font); color: #14123a; }
.ms-alloc .amt i { display: block; height: 8px; border-radius: 8px; background: #ece8ff; overflow: hidden; }
.ms-alloc .amt i s { display: block; height: 100%; background: linear-gradient(90deg, #8b6cf6, #5b46e6); text-decoration: none; }
.ms-day { display: grid; gap: 8px; margin: var(--td-gap) 0 0; }
.ms-day div { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e6e3f5; font: 500 15px/21px var(--td-font); color: #2d3150; }
.ms-day b { display: block; margin-bottom: 2px; font: 800 13px/1 var(--td-font); letter-spacing: .5px; text-transform: uppercase; color: #5b46e6; }

/* ---- Speed Challenge: the clay timer with its ring counting down */
.ms-timer { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.ms-timer::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ring, #5b46e6) calc(var(--left, 1) * 360deg), #e2ddff 0); }
.ms-timer::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #f6f5ff; }
.ms-timer img { position: absolute; left: 10px; top: 4px; width: 56px; height: 56px; object-fit: contain; z-index: 1; }
.ms-timer b { position: relative; z-index: 1; margin-top: 30px; font: 800 30px/1 var(--td-font); color: #14123a; font-variant-numeric: tabular-nums; }
.ms-timer.low { --ring: #f0392b; }
.ms-timer.low b { color: #c0261a; }
.ms-start-timer { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 700 15px/1 var(--td-font); color: #14123a; }
.ms-start-timer img { width: 40px; height: 40px; object-fit: contain; }

/* a long title may wrap on the Complete page ("Why did it move?" at 360) */
.pl-dhead h1 .nw.wrap { white-space: normal; }
/* the Complete page's score line for a timed run */
.ms-time-up { display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 99px; background: rgb(255 255 255 / 20%); font: 800 13px/1 var(--td-font); }

/* ==== missions.html: the list (the passport's head, then the summary and one card per mission) */
.ms-sum { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 16px; border-radius: var(--td-r-card);
  background: linear-gradient(120deg, #8a5cf6, #5a2fe0); color: #fff; }
.ms-sum h2 { font: 800 20px/1.15 var(--td-font); letter-spacing: -0.3px; }
.ms-sum p { margin: 6px 0 10px; font: 600 14px/19px var(--td-font); opacity: .95; }
.ms-sum .bar { display: block; height: 10px; border-radius: 10px; background: rgb(255 255 255 / 25%); overflow: hidden; }
.ms-sum .bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #00ffe1, #c3ff22); }
.ms-sum img { width: 64px; height: 64px; object-fit: contain; }
.ms-list { list-style: none; display: grid; gap: var(--td-gap); margin: var(--td-s-head) 0 0; padding: 0; }
.ms-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 104px; padding: 14px 16px 14px 14px;
  border-radius: var(--td-r-card); background: #fff; color: var(--td-ink); text-decoration: none; box-shadow: 0 2px 10px rgb(20 30 90 / 6%); }
.ms-card .art { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 14px; background: #f2efff; }
.ms-card .art img { width: 60px; height: 60px; object-fit: contain; }
.ms-card h3 { font: 800 17px/1.2 var(--td-font); color: #14123a; }
.ms-card p { margin: 4px 0 0; font: 500 13.5px/18px var(--td-font); color: var(--td-ink-2); }
.ms-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.ms-card .tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: #ece8ff; color: #4a36d6;
  font: 800 11px/1 var(--td-font); letter-spacing: .4px; text-transform: uppercase; }
.ms-card .rw { font: 800 13px/1 var(--td-font); color: #8a6200; }
.ms-card .st { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: 99px;
  background: #0b0b12; color: #fff; font: 800 12px/1 var(--td-font); }
.ms-card.done .st { background: #e9fbe9; color: #0a7a2b; box-shadow: inset 0 0 0 1.5px #3bc35b; }
.ms-card.done .art { background: #e9fbe9; }