/* learn.css - see the Sept 20 polish pass. Loaded on every page after style.css. */

/* ===========================================================================
   THE TOOLS FRONT (Sept 20). A lit lockup with your card in it, today's
   question aimed at your side of the game, today's challenges as cards, and
   nine tools as figure cards rather than paragraphs.
   =========================================================================== */
.tx{ --board: linear-gradient(180deg, #0c1016, #121a24); --board-line: rgba(255,255,255,.12); --bulb: #F2C14E; }
.tx > * + *{ margin-top: 18px !important; }

/* the lockup */
.txh{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 20px; align-items: stretch;
  padding: 22px 24px; border-radius: 20px; background: var(--board); border: 1px solid var(--board-line); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
@media (max-width: 860px){ .txh{ grid-template-columns: 1fr; } }
.txh__left{ display: grid; align-content: center; gap: 12px; }
.tx .txh__eyebrow{ justify-self: start; font-family: var(--display-big) !important; font-weight: 900; font-size: 1rem !important; text-transform: uppercase; letter-spacing: .08em !important;
  padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.tx .txh__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important; line-height: .88; color: #F6F3EC; }
.txh__facts{ display: flex; flex-wrap: wrap; gap: 8px; }
.txh__fact{ display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--board-line); }
.txh__fact b{ font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--bulb); }
.txh__fact span{ font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: #F6F3EC; }
.txh__card{ display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; text-decoration: none; color: #F6F3EC;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, #141a26), #141a26 70%); border: 1px solid var(--accent-line); }
.txh__card:hover{ border-color: var(--accent); }
.tx .txh__cardLabel{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1rem !important; text-transform: uppercase; letter-spacing: .08em !important; color: var(--accent-hot); }
.tx .txh__rank{ font-family: var(--display-big); font-weight: 900; font-size: 2.6rem; line-height: .9; text-transform: uppercase; }
.txh__bar{ display: block; height: 10px; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; }
.txh__bar i{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); }
.tx .txh__next{ font-weight: 800; font-size: 1rem; color: rgba(246,243,236,.9); }
.txh__cells{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.txh__cell{ display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: rgba(0,0,0,.3); }
.txh__cell b{ font-family: var(--display-big); font-weight: 900; font-size: 1.7rem; line-height: 1; color: #FFE7A3; }
.txh__cell span{ font-weight: 800; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(246,243,236,.85); }
.tx .txh__sync{ font-weight: 800; font-size: .95rem; color: rgba(246,243,236,.8); }

.tx__row{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px){ .tx__row{ grid-template-columns: 1fr; } }

/* today's question */
.txq{ --side: var(--accent); display: grid; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--side); }
.txq__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.txq__tw{ display: grid; gap: 4px; }
.tx .txq__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.9rem, 3vw, 2.5rem) !important; line-height: .92; color: var(--ink) !important; }
.tx .txq__date{ font-weight: 800; font-size: 1rem; color: var(--ink-soft); }
.txq__streak{ display: grid; justify-items: center; padding: 8px 14px; border-radius: 12px; background: var(--board); border: 1px solid var(--board-line); }
.txq__streak b{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--bulb); }
.txq__streak span{ font-weight: 800; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; color: #F6F3EC; }
.txq__sides{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tx .txq__sidesLabel{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .04em !important; color: var(--ink-soft); }
.txq__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.txq__side{ --c: var(--accent); padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--surface-2));
  color: var(--ink); font-weight: 900; font-size: 1rem; transition: background .15s ease; }
.txq__side:hover{ background: color-mix(in srgb, var(--c) 28%, var(--surface-2)); }
.txq__side.is-on{ background: var(--c); color: #16121C; border-color: var(--c); }
.txq__q{ display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(170deg, color-mix(in srgb, var(--side) 16%, var(--surface-2)), var(--surface-2) 60%); border: 1px solid var(--line); }
.txq__tag{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tx .txq__sideTag{ font-family: var(--display-big) !important; font-weight: 900; font-size: .98rem !important; text-transform: uppercase; letter-spacing: .06em !important; padding: 3px 10px; border-radius: 999px; background: var(--side); color: #16121C; }
.tx .txq__src{ font-weight: 800; font-size: .98rem !important; color: var(--ink-soft); }
.txq__play{ display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--board); border: 1px solid var(--board-line); }
.txq__num{ display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #2a1f05; border: 3px solid var(--bulb); color: var(--bulb); font-family: var(--display-big); font-weight: 900; font-size: 1.4rem; }
.txq-bases{ width: 40px; height: 40px; flex: none; }
.txq-bases__f{ fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.35); stroke-width: 2; }
.txq-bases__b{ fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.55); stroke-width: 2; }
.txq-bases__b.is-on{ fill: var(--bulb); stroke: var(--bulb); }
.txq-bases__p{ fill: #F6F3EC; }
.txq__playW{ display: grid; gap: 1px; }
.tx .txq__playN{ font-family: var(--display-big) !important; font-weight: 900; font-size: .98rem !important; text-transform: uppercase; color: var(--bulb); }
.tx .txq__playT{ font-weight: 800; font-size: 1.05rem; color: #F6F3EC; }
.tx .txq__ask{ margin: 0; font-family: var(--display-big) !important; font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; line-height: 1.08; color: var(--ink) !important; text-transform: none !important; }
.txq__opts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px){ .txq__opts{ grid-template-columns: 1fr; } }
.txq__opt{ display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--line); color: var(--ink); transition: transform .12s ease, border-color .15s ease, background .15s ease; }
.txq__opt:hover:not(:disabled){ transform: translateY(-2px); border-color: var(--side); }
.txq__opt:disabled{ cursor: default; }
.txq__letter{ flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--side); color: #16121C; font-family: var(--display-big); font-weight: 900; font-size: 1.35rem; }
.tx .txq__optText{ font-weight: 800; font-size: 1.08rem; line-height: 1.25; }
.txq__opt.is-right{ border-color: #46e58a; background: rgba(70,229,138,.14); }
.txq__opt.is-right .txq__letter{ background: #46e58a; }
.txq__opt.is-wrong{ border-color: #ff6f5f; background: rgba(255,111,95,.12); }
.txq__opt.is-wrong .txq__letter{ background: #ff6f5f; }
.txq__opt.is-dim{ opacity: .45; }
.txq__why{ display: grid; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); animation: txq-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes txq-pop{ from{ transform: scale(.97); opacity: .3; } to{ transform: none; opacity: 1; } }
.txq__why.is-right{ background: linear-gradient(170deg, rgba(70,229,138,.14), var(--surface) 60%); border-top: 5px solid #46e58a; }
.txq__why.is-wrong{ background: linear-gradient(170deg, rgba(255,111,95,.14), var(--surface) 60%); border-top: 5px solid #ff6f5f; }
.txq__call{ display: grid; gap: 4px; }
.tx .txq__callBig{ font-family: var(--display-big) !important; font-weight: 900; font-size: clamp(2rem, 3.2vw, 2.8rem) !important; text-transform: uppercase; line-height: .9; }
.txq__why.is-right .txq__callBig{ color: #46e58a; }
.txq__why.is-wrong .txq__callBig{ color: #ff8a7d; }
.tx .txq__callSub{ font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.txq__cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.txq__card{ display: grid; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--side); }
.txq__card--answer{ border-left-color: #46e58a; }
.tx .txq__cardLabel{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .04em !important; color: var(--ink) !important; }
.tx .txq__cardText{ margin: 0; font-weight: 700 !important; font-size: 1.04rem !important; line-height: 1.4; color: var(--ink) !important; }
.txq__go{ justify-self: start; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-family: var(--display-big); font-weight: 900; font-size: 1.1rem; text-transform: uppercase;
  background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); }
.txq__go::after{ content: " \2192"; }

/* today's challenges */
.txc{ display: grid; gap: 12px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--bulb); }
.txc__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tx .txc__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 1.8rem !important; line-height: 1; color: var(--ink) !important; }
.tx .txc__more{ font-weight: 900; font-size: 1rem; color: var(--accent-hot); text-decoration: none; }
.txc__grid{ display: grid; gap: 8px; }
.txc__card{ display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .12s ease, border-color .15s ease; }
.txc__card:hover{ transform: translateY(-2px); border-color: var(--bulb); }
.txc__top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tx .txc__name{ font-weight: 800; font-size: 1.04rem; line-height: 1.25; }
.tx .txc__count{ flex: none; font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; color: var(--bulb); }
.txc__card.is-done .txc__count{ color: #46e58a; }
.txc__bar{ display: block; height: 8px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; }
.txc__bar i{ display: block; height: 100%; background: var(--bulb); border-radius: 999px; }
.txc__card.is-done .txc__bar i{ background: #46e58a; }

/* nine tools as figure cards */
.tx .txg__title{ margin: 0 0 12px; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.6rem) !important; line-height: 1; color: var(--ink) !important; }
.txg__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.txg__card{ --c: var(--accent); display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface) 65%); border: 1px solid var(--line); border-left: 6px solid var(--c); transition: border-color .15s ease; }
.txg__card:hover{ border-color: var(--c); }
.txg__card--iq{ --c: #E8B13C; } .txg__card--rtp{ --c: #35A263; } .txg__card--sbk{ --c: #5ad8f2; } .txg__card--hs{ --c: #ff6f5f; }
.txg__card--cl{ --c: #ff9a5c; } .txg__card--mo{ --c: #4C93E8; } .txg__card--cs{ --c: #F2C14E; } .txg__card--yl{ --c: #46e58a; } .txg__card--ch{ --c: #b494ff; }
.txg__fig{ display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--board); border: 1px solid var(--board-line); }
.txg__fig b{ font-family: var(--display-big); font-weight: 900; font-size: 2.3rem; line-height: .9; color: var(--c); }
.txg__fig span{ font-weight: 900; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: #F6F3EC; }
.txg__words{ display: grid; gap: 4px; min-width: 0; }
.tx .txg__name{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 1.55rem !important; line-height: 1; color: var(--ink) !important; }
.tx .txg__hook{ margin: 0; font-weight: 700 !important; font-size: 1.02rem !important; line-height: 1.3; color: var(--ink-soft) !important; }
.txg__go{ font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; color: var(--c); transition: translate .15s ease; }
.txg__card:hover .txg__go{ translate: 4px 0; }
.txq__why[hidden]{ display: none !important; }
.txg__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px){ .txg__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px){ .txg__grid{ grid-template-columns: 1fr; } }

/* ===========================================================================
   THE IQ MAP STOPS (Sept 20): lettered answers you cannot click through, a
   lock note, the numbers as a match game, a review question from the stop
   before, and where your progress is kept as a button rather than a policy.
   =========================================================================== */
.body--iq .iqchoice{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px){ .body--iq .iqchoice{ grid-template-columns: 1fr; } }
.body--iq .iqchoice__opt{ display: flex !important; align-items: center; gap: 12px; text-align: left; padding: 12px 14px !important; border-radius: 14px !important; cursor: pointer;
  background: var(--surface-2) !important; border: 2px solid var(--line) !important; color: var(--ink) !important; transition: transform .12s ease, border-color .15s ease; }
.body--iq .iqchoice__opt:hover:not(:disabled){ transform: translateY(-2px); border-color: var(--tone, var(--accent)) !important; }
.body--iq .iqchoice__opt:disabled{ cursor: default; }
.body--iq .iqchoice__letter{ flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tone, var(--accent)); color: #16121C; font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; }
.body--iq .iqchoice__text{ font-weight: 800; font-size: 1.06rem; line-height: 1.25; }
.body--iq .iqchoice__opt.is-right{ border-color: #46e58a !important; background: rgba(70,229,138,.14) !important; }
.body--iq .iqchoice__opt.is-right .iqchoice__letter{ background: #46e58a; }
.body--iq .iqchoice__opt.is-wrong{ border-color: #ff6f5f !important; background: rgba(255,111,95,.12) !important; }
.body--iq .iqchoice__opt.is-wrong .iqchoice__letter{ background: #ff6f5f; }
.body--iq .iqnote{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,111,95,.14); border: 1px solid rgba(255,111,95,.5); }
.body--iq .iqnote[hidden]{ display: none; }
.body--iq .iqnote__big{ font-family: var(--display-big); font-weight: 900; font-size: 1.4rem; text-transform: uppercase; color: #ff8a7d; }
.body--iq .iqnote__line{ font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.body--iq .iqtask{ border-radius: 18px !important; border: 1px solid var(--line) !important; border-top: 5px solid var(--tone, var(--accent)) !important; background: var(--surface) !important; padding: 16px 18px !important; }
.body--iq .iqtask.is-done{ border-top-color: #46e58a !important; }
.body--iq .iqtask__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1rem !important; text-transform: uppercase; letter-spacing: .06em !important; color: var(--tone, var(--accent)) !important; }
.body--iq .iqtask__state{ font-weight: 900; font-size: .9rem !important; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
.body--iq .iqtask.is-done .iqtask__state{ background: #46e58a; color: #16121C; }
.body--iq .iqtask__ask{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; line-height: 1.1 !important; text-transform: none; color: var(--ink) !important; }
.body--iq .iqtask__why{ padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid #46e58a; font-weight: 700 !important; color: var(--ink) !important; }
.body--iq .iqreview{ border-top-color: #b494ff !important; background: linear-gradient(170deg, rgba(180,148,255,.12), var(--surface) 55%) !important; }
.body--iq .iqreview .iqtask__n{ color: #b494ff !important; }

.body--iq .iqmatch__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.body--iq .iqmatch__count{ font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); }
.body--iq .iqmatch__count.is-done{ background: #46e58a; color: #16121C; }
.body--iq .iqmatch__tray{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #0c1016, #121a24); border: 1px solid rgba(255,255,255,.12); min-height: 30px; }
.body--iq .iqmatch__tray:not(:has(.iqmatch__fig)){ display: none; }
.body--iq .iqmatch__hint{ font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(246,243,236,.8); margin-right: 6px; }
.body--iq .iqmatch__fig{ padding: 8px 16px; border-radius: 12px; cursor: pointer; background: #F2C14E; color: #16121C; border: 2px solid transparent; font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; line-height: 1; transition: transform .12s ease; }
.body--iq .iqmatch__fig:hover{ transform: translateY(-2px); }
.body--iq .iqmatch__fig.is-picked{ border-color: #fff; box-shadow: 0 0 16px rgba(242,193,78,.8); transform: translateY(-3px) scale(1.04); }
.body--iq .iqmatch__card{ text-align: left; cursor: default; transition: transform .12s ease, border-color .15s ease; }
.body--iq button.iqmatch__card{ cursor: pointer; }
.body--iq .iqmatch__card.is-armed{ border-color: #F2C14E !important; }
.body--iq .iqmatch__card.is-armed:hover{ transform: translateY(-2px); }
.body--iq .iqmatch__card.is-wrong{ border-color: #ff6f5f !important; animation: iqmatch-no .4s ease; }
@keyframes iqmatch-no{ 0%,100%{ translate: 0; } 25%{ translate: -5px 0; } 75%{ translate: 5px 0; } }
.body--iq .iqmatch__card.is-done{ border-color: #46e58a !important; background: linear-gradient(170deg, rgba(70,229,138,.12), var(--surface) 60%) !important; }
.body--iq .iqmatch__card:not(.is-done) .iqnums__fig{ color: var(--ink-soft) !important; }

.body--iq .iqsaved{ justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; }
.body--iq .iqsaved::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #F2C14E; }
.body--iq .iqsaved.is-synced::before{ background: #46e58a; }
.body--iq .iqsaved:hover{ border-color: var(--accent); }
.body--iq .iqglance__title, .body--iq .iqtasks__title{ margin: 0 !important; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.7rem, 2.8vw, 2.2rem) !important; line-height: 1 !important; color: var(--ink) !important; letter-spacing: .01em !important; }
.body--iq .iqtasks__aside{ font-weight: 900 !important; font-size: 1rem !important; text-transform: uppercase; letter-spacing: .04em !important; color: var(--tone, var(--accent)) !important; }
.body--iq .iqnums__card{ border-radius: 14px !important; padding: 14px 16px !important; }
.body--iq .iqnums__fig{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 2.4rem !important; line-height: .95 !important; color: var(--ink) !important; }
.body--iq .iqnums__label{ font-weight: 800 !important; font-size: 1.02rem !important; color: var(--ink) !important; }
.body--iq .iqnums__why{ font-weight: 700 !important; font-size: .98rem !important; color: var(--ink-soft) !important; }

/* Called Shot: the days as arrows with their dates (Sept 20) */
.csdays{ display: flex !important; align-items: center; gap: 8px; }
.csday{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: var(--display-big); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; transition: border-color .15s ease, transform .1s ease; }
.csday:hover{ border-color: var(--accent); }
.csday:active{ transform: translateY(1px); }
.csday__arrow{ font-size: 1.3rem; color: var(--accent); }
.csday--today{ background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); border-color: var(--accent); }

/* ===== SEPT 20: The Moment option cards ===== */
.mcall .mopt .mopt__top{ display: flex; align-items: center; gap: 12px; }
.mcall .mopt .mopt__letter{ flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--accent-ink, #120a24); font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.2rem; }
.mcall .mopt .mopt__who.mopt__who{ font-weight: 800 !important; font-size: 1.02rem !important; color: var(--ink) !important; line-height: 1.35; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.mcall .mopt .mopt__stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.mcall .mopt .mopt__stat{ display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.mcall .mopt .mopt__stat b{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--accent-hot, var(--accent)); }
.mcall .mopt .mopt__stat span{ font-weight: 900 !important; font-size: .84rem !important; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft) !important; }
.mcall .mopt .mopt__trade{ display: grid; gap: 6px; }
.mcall .mopt .mopt__chip{ display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-weight: 800 !important; font-size: .95rem !important; text-transform: uppercase; letter-spacing: .03em; }
.mcall .mopt .mopt__chip i{ font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 900; color: #0d0b1a; }
.mcall .mopt .mopt__chip.is-gain{ background: color-mix(in srgb, var(--pos, #3ddc84) 16%, transparent); color: var(--pos, #3ddc84) !important; }
.mcall .mopt .mopt__chip.is-gain i{ background: var(--pos, #3ddc84); }
.mcall .mopt .mopt__chip.is-cost{ background: color-mix(in srgb, var(--neg, #ff6b6b) 14%, transparent); color: var(--neg, #ff6b6b) !important; }
.mcall .mopt .mopt__chip.is-cost i{ background: var(--neg, #ff6b6b); }

/* ===== SEPT 20: The Climb intro cards ===== */
.climb-intro{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.climb-intro__card{ display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.climb-intro__card.is-calls{ border-top-color: #b494ff; }
.climb-intro__card.is-ring{ border-top-color: #ffc94d; }
.climb-intro__fig{ display: flex; align-items: baseline; gap: 8px; }
.climb-intro__fig b{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 2.6rem; line-height: .9; color: var(--ink); }
.climb-intro__card.is-ring .climb-intro__fig b{ color: #ffc94d; }
.climb-intro__fig span{ font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.climb-intro .climb-intro__line.climb-intro__line{ margin: 0; font-weight: 700 !important; font-size: 1.02rem !important; line-height: 1.4; color: var(--ink) !important; text-transform: none; }
@media (max-width: 640px){ .climb-intro{ grid-template-columns: 1fr; } }
.mcall .mopt > .mopt__top, .mcall .mopt > .mopt__stats, .mcall .mopt > .mopt__trade, .mcall .mopt > .mopt__who{ align-self: stretch; }
.mcall .mopt > .mopt__go{ margin-top: auto; }

/* ===== SEPT 21: Hot Seat season rail ===== */
.hs3{ grid-column: 1 / -1; display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.hs3-rail{ position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); justify-items: center; align-items: center; padding: 6px 0; }
.hs3-rail::before{ content: ""; position: absolute; left: 2%; right: 2%; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: rgba(255,255,255,.08); }
.hs3 .hs3-dot{ position: relative; width: clamp(20px, 3.2vw, 32px); height: clamp(20px, 3.2vw, 32px); font-size: clamp(.62rem, 1.1vw, .95rem); font-weight: 900; font-family: var(--display-big, var(--display)); }
.hs3 .hs3-dot.is-todo{ background: var(--surface); }
.hs3 .hs3-dot.is-mile{ outline: none; }
.hs3 .hs3-dot.is-mile::after{ content: ""; position: absolute; top: -9px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: #ffc94d; transform: rotate(45deg); border-radius: 2px; }
.hs3 .hs3-dot.is-oct{ border-radius: 8px; }
.hs3-chaps{ display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 6px; }
.hs3-chap{ display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; border-top: 3px solid var(--line); background: rgba(0,0,0,.18); min-width: 0; }
.hs3-chap.is-done{ border-top-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.hs3-chap.is-now{ border-top-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.hs3-chap.is-oct{ border-top-color: #ffc94d; }
.hs3 .hs3-chap__name{ font-family: var(--display-big, var(--display)); font-weight: 900; text-transform: uppercase; font-size: 1rem; line-height: 1.05; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs3 .hs3-chap__rec{ font-weight: 800; font-size: .85rem !important; color: var(--ink-soft) !important; letter-spacing: .04em; text-transform: uppercase; }
.hs2-key .hs2-dot.is-key.is-mile{ outline: none; background: #ffc94d; border-color: #ffc94d; transform: rotate(45deg); border-radius: 2px; width: 11px; height: 11px; }

/* ===== SEPT 21: Keep the Book game cards ===== */
.sbk-gcards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; margin-top: 12px; }
.sbk-gcard{ display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--ink-soft); box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .14s ease, border-color .14s ease; }
.sbk-gcard:hover{ transform: translateY(-2px); border-color: var(--accent); }
.sbk-gcard.is-live{ border-top-color: #ff5a5f; }
.sbk-gcard.is-final{ border-top-color: var(--accent); }
.sbk-gcard__top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.sbk-gcard .sbk-gcard__status{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #120a24); font-weight: 900; font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; }
.sbk-gcard .sbk-gcard__status.is-live{ background: rgba(255,90,95,.16); color: #ff8a8d; border: 1px solid rgba(255,90,95,.5); }
.sbk-gcard .sbk-gcard__date{ font-weight: 800; font-size: .86rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.sbk-gcard__team{ display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.sbk-gcard__team.is-win{ background: rgba(255,255,255,.05); }
.sbk-gcard__crest{ width: 28px; height: 28px; object-fit: contain; }
.sbk-gcard__name{ font-weight: 800; font-size: 1.02rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbk-gcard__team.is-win .sbk-gcard__name{ color: var(--ink); }
.sbk-gcard .sbk-gcard__runs{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.8rem; line-height: 1; color: var(--ink-soft); }
.sbk-gcard__team.is-win .sbk-gcard__runs{ color: var(--ink); }
.sbk-gcard__meta{ display: flex; gap: 6px; }
.sbk-gcard .sbk-gcard__chip{ padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid var(--line); font-weight: 800; font-size: .84rem !important; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.sbk-gcard__acts{ display: flex; gap: 8px; margin-top: 4px; }
.sbk-gcard__go, .sbk-gcard__alt{ flex: 1; padding: 10px 12px; border-radius: 12px; font: inherit; font-weight: 900; font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.sbk-gcard__go{ background: var(--accent); color: var(--accent-ink, #120a24); border: 0; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 45%, #000); }
.sbk-gcard__alt{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.sbk-gcard__alt:hover{ border-color: var(--accent); }

/* ===== SEPT 21: Your Card challenges as a card grid ===== */
.pf-block .pf-block__head{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.pf-block .pf-block__title{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important; line-height: 1; letter-spacing: .01em; }
.pf-block .pf-block__note.pf-chip, .pf-block .pf-block__note{ margin: 0; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); font-weight: 800 !important; font-size: .82rem !important; text-transform: uppercase; letter-spacing: .05em; color: var(--ink) !important; }
.pf-chgrid{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important; gap: 14px !important; }
.pf-chgrid > .pf-ch__wrap{ display: grid; grid-template-rows: 1fr auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.pf-chgrid .pf-ch{ display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "words tail" "track track"; gap: 14px 12px !important; align-items: start; padding: 18px !important; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--accent); min-height: 150px; text-decoration: none; transition: transform .14s ease, border-color .14s ease; }
.pf-chgrid > .pf-ch__wrap .pf-ch{ border: 0; border-top: 4px solid var(--accent); border-radius: 0; }
.pf-chgrid .pf-ch:hover{ transform: translateY(-2px); border-color: var(--accent); }
.pf-chgrid .pf-ch.is-done{ border-top-color: #46e58a; }
.pf-chgrid .pf-ch__words{ grid-area: words; display: grid; gap: 6px; }
.pf-chgrid .pf-ch__name{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 1.4rem !important; line-height: 1.05; color: var(--ink); }
.pf-chgrid .pf-ch__note{ font-weight: 700 !important; font-size: .95rem !important; color: var(--ink-soft) !important; }
.pf-chgrid .pf-ch__tail{ grid-area: tail; display: grid; justify-items: end; gap: 6px; }
.pf-chgrid .pf-ch__count{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; font-size: 2rem !important; line-height: 1; color: var(--accent-hot, var(--accent)) !important; }
.pf-chgrid .pf-ch__points{ padding: 3px 10px; border-radius: 999px; background: rgba(255,201,77,.16); color: #ffc94d !important; font-weight: 900 !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .05em; }
.pf-chgrid .pf-ch__track{ grid-area: track; align-self: end; height: 10px !important; border-radius: 999px; background: rgba(0,0,0,.3); width: 100% !important; }
.pf-chgrid .pf-ch__fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #46e58a); }
.pf-chgrid .pf-ch__left{ display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 14px; background: rgba(0,0,0,.18); }
.pf-chgrid{ align-items: start; }

/* ===== IQ Map lesson, Sept 21 redesign ===== */
.iqhead--v2{ border-left: none !important; padding: 8px 0 4px !important; margin: 0 0 18px !important; display: grid; gap: 10px; }
.iqhead--v2 .iqhead__branch{ margin: 0; font-weight: 900 !important; font-size: .95rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tone) !important; }
.iqhead--v2 .iqhead__title{ margin: 0; font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; font-size: clamp(2.6rem, 6vw, 4.2rem) !important; line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.iqhead--v2 .iqhead__pill{ font-weight: 800 !important; font-size: .95rem !important; padding: 6px 14px !important; border-radius: 999px; background: color-mix(in srgb, var(--tone) 16%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--tone) 45%, var(--line)); color: var(--ink); }
.iqidea{ display: none !important; }
.iqtop{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 18px; }
@media (max-width: 900px){ .iqtop{ grid-template-columns: 1fr; } }
.iqtop .iqfilm{ margin: 0 !important; border-radius: 20px !important; border-top: 4px solid var(--tone) !important; }
.iqfilm__caption{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; font-size: 1.25rem !important; text-transform: uppercase; letter-spacing: .01em !important; line-height: 1.1; }
.iqfilm__legend, .iqfilm [class*="legend"]{ display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.iqfilm [class*="legend"] > *{ padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800 !important; font-size: .95rem !important; letter-spacing: 0 !important; }
.iqside{ display: grid; gap: 12px; }
.iqcard{ display: grid; gap: 10px; align-content: start; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c, var(--tone)); }
.iqcard--cues{ --c: #5cc8ff; } .iqcard--mistake{ --c: #ff6b6b; }
.iqcard__title{ margin: 0; font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .01em; color: var(--c, var(--tone)); }
.iqcard__lead{ margin: 0; font-size: 1.18rem !important; font-weight: 700 !important; line-height: 1.45; color: var(--ink) !important; }
.iqcard__text{ margin: 0; font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.5; color: var(--ink) !important; }
.iqcard__cues{ display: grid; gap: 8px; }
.iqcard__cue{ display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.iqcard__n{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, #5cc8ff 18%, transparent); color: #5cc8ff; font-family: var(--display-big, var(--display)); font-size: 1.1rem; font-weight: 900; }
.iqcard__cueText{ font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.iqterms--v2{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 !important; }
.iqterms--v2 .iqterms__label{ font-weight: 900; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); margin-right: 4px; }
.iqterms__chip{ padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-weight: 800; text-decoration: none; }
.iqterms__chip:hover{ border-color: var(--tone); }
.iqtasks__chip{ justify-self: start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 16%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--tone) 45%, var(--line)); font-weight: 800; font-size: .95rem; color: var(--ink); }
.iqsetup{ display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; }
.iqsetup__fact{ display: grid; gap: 3px; align-content: center; min-width: 130px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--tone); }
.iqsetup__v{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.iqsetup__k{ font-weight: 700; font-size: .95rem; color: var(--ink); opacity: .85; }
.iqsit{ display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; background: #0f1a14; border: 1px solid var(--line); }
.iqsit__dia svg{ width: 96px; height: 76px; display: block; }
.iqsit__path{ fill: #2c7546; stroke: #d9a66a; stroke-width: 3; }
.iqsit__bag{ fill: #fff; opacity: .35; } .iqsit__bag.is-on{ fill: #F2C14E; opacity: 1; }
.iqsit__plate{ fill: #fff; }
.iqsit__side{ display: grid; gap: 6px; justify-items: start; }
.iqsit__outs{ display: flex; align-items: center; gap: 6px; }
.iqsit__lbl{ font-weight: 900; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #cfe3d4; margin-right: 2px; }
.iqsit__out{ width: 14px; height: 14px; border-radius: 50%; background: #1d2a22; border: 1px solid rgba(255,255,255,.25); }
.iqsit__out.is-on{ background: #ff5a5f; border-color: #ff5a5f; }
.iqsit__chip{ padding: 3px 10px; border-radius: 999px; background: #1d2a22; color: #F2C14E; font-weight: 900; font-size: .9rem; }
.iqfoot--v2{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.iqdoor{ display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tone); text-decoration: none; color: var(--ink); transition: transform .12s ease; }
.iqdoor:hover{ transform: translateY(-2px); }
.iqdoor__label{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; color: var(--tone); }
.iqdoor__note{ font-weight: 700; font-size: 1.02rem; }
.iqpager{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.iqpager > *{ display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.iqpager__next, .iqpager__locked{ grid-column: 2; text-align: right; }
.iqpager__dir{ font-weight: 900; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.iqpager__name{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.4rem; text-transform: uppercase; }
.iqpager__locked{ opacity: .7; }
.iqtask__ask{ font-size: clamp(1.3rem, 2vw, 1.6rem) !important; }
.iqfilm__legend{ list-style: none; margin: 10px 0 0 !important; padding: 0 !important; }
.iqfilm__legend .iqfilm__key{ position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 12px !important; }
.iqfilm__legend .iqfilm__key::before{ position: static !important; flex: none; margin: 0 !important; transform: none !important; }
.mzone__key{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mzone__k{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; font-size: .92rem; color: var(--ink); }
.mzone__k i{ width: 10px; height: 10px; border-radius: 3px; background: #9fb3d9; }
.mzone__k.is-strike i{ background: #ff5a5f; } .mzone__k.is-ball i{ background: #46e58a; } .mzone__k.is-foul i{ background: #F2C14E; }
.mzone__k.is-final i{ width: 14px; height: 14px; background: #fff; } .mzone__k.is-view i{ display: none; }
.sbk-feedback__verdict{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; font-size: 1.5rem !important; text-transform: uppercase; }
.sbk-feedback__teach{ font-size: 1.02rem !important; font-weight: 600 !important; }

/* The Moment: library cards and reveal (Sept 21) */
.mlib__headrow{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 12px; }
.mlib__headrow .mlib__title{ margin: 0 !important; }
.mlib__chip, .mactual__chip{ display: inline-flex; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, #b494ff 18%, var(--surface-2)); border: 1px solid color-mix(in srgb, #b494ff 45%, var(--line)); font-weight: 800; font-size: .9rem; color: var(--ink); }
.mactual__chip{ justify-self: start; margin: 4px 0 10px; }
.mlibcard{ align-content: start !important; }
.msetup{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.msetup__chip{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1rem; color: var(--ink); }
.msetup__chip i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); display: inline-block; }
.msetup__chip i.is-on{ background: #ff5a5f; }
.msetup__dia svg{ width: 40px; height: 26px; display: block; }
.msetup__dia rect{ fill: rgba(255,255,255,.22); } .msetup__dia rect.is-on{ fill: #F2C14E; }
.mzone__key{ display: grid !important; grid-template-columns: 1fr 1fr; }
.mzone__k.is-view, .mzone__k.is-final{ grid-column: 1 / -1; }
.mactual__desc{ font-size: 1.1rem !important; font-weight: 700 !important; color: var(--ink) !important; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid #F2C14E; }
.mplay__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.mplay__tag{ padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; color: var(--ink); }
.mplay__tag.is-ev{ background: #F2C14E; color: #16121C; border-color: #F2C14E; }
.mplay__tag.is-run{ background: #ff5a5f; color: #fff; border-color: #ff5a5f; }
.mplay__tag.is-pos{ color: #5cc8ff; }
/* Climb: positions as tools, preview as tiles (Sept 21) */
.climb-pos{ align-content: start !important; justify-items: start; gap: 6px !important; }
.climb-pos__name{ font-weight: 800 !important; font-size: 1.02rem !important; }
.climb-pos__tools{ display: flex; flex-wrap: wrap; gap: 4px; }
.climb-pos__tool{ padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-weight: 800; font-size: .82rem; color: var(--ink); }
.climb-build__hint--v2{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.climb-hint__tile{ display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.climb-hint__tile b{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: 1.8rem; line-height: 1; color: #F2C14E; }
.climb-hint__tile span{ font-weight: 800; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }