/* Make the Target: Bram's Number Forge. Tiles are struck together on a warm
   forge bench, in the order of operations, and the last one flies at the target.
   The board stays light in both themes (the kit keeps .ar-board light). */
/* math glyphs in Lexend: its − is as wide as its +, so every sign reads at a glance */
.mt-range, .mt-bk { --f-math: 'Lexend', 'DM Sans', system-ui, sans-serif; }
.mt-range { width: 100%; display: grid; gap: 12px; }

/* the forge bench */
.mt-lane { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 20px 30px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 118%, rgba(242, 163, 58, .38), rgba(242, 163, 58, 0) 62%), linear-gradient(180deg, #FBF3E6, #F0E0C6);
  border: 2px solid #D8C09A; }
.mt-lane::after { content: ''; position: absolute; inset: auto 0 0 0; height: 12px; background: repeating-linear-gradient(90deg, #C9A77A 0 26px, #B99364 26px 28px); border-top: 2px solid #B99364; }
.mt-rail { position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; min-height: 96px; }

/* tiles */
.mt-tile { position: relative; flex: none; display: grid; place-items: center; min-width: 66px; height: 78px; padding: 0 12px; border-radius: 16px; background: #fff; border: 2.5px solid #2B2D42; box-shadow: 0 5px 0 #2B2D42;
  font: 800 clamp(1.6rem, 4.5vw, 2.2rem)/1 var(--f-display); font-variant-numeric: tabular-nums; color: #1E1F2E; transition: transform .22s var(--spring), background .25s, box-shadow .25s; }
button.mt-tile { cursor: pointer; }
button.mt-tile:hover { transform: translateY(-3px); }
.mt-tile.picked { background: #FFF1C9; transform: translateY(-7px); box-shadow: 0 0 0 4px #F2C14E, 0 10px 0 #2B2D42; }
.mt-tile.glow, .mt-op.glow { box-shadow: 0 0 0 5px #B39BFF, 0 5px 0 #2B2D42; animation: mtGlow 1.4s ease-in-out infinite; }
@keyframes mtGlow { 50% { box-shadow: 0 0 0 9px rgba(179, 155, 255, .55), 0 5px 0 #2B2D42; } }
/* a sign button's circle is its inner dot, so on narrow screens the button can keep a 44 px hit area around a smaller circle */
.mt-op.glow { box-shadow: none; animation: none; }
.mt-op.glow .mt-dot { box-shadow: 0 0 0 5px #B39BFF; animation: mtGlowDot 1.4s ease-in-out infinite; }
@keyframes mtGlowDot { 50% { box-shadow: 0 0 0 9px rgba(179, 155, 255, .55); } }
.mt-tile.fusing { background: #FFE3B0; box-shadow: 0 0 0 4px #F2A33A, 0 0 26px 8px rgba(242, 163, 58, .6), 0 5px 0 #2B2D42; transform: translateY(-4px) scale(1.04); }
.mt-tile.fused { animation: mtFuse .6s var(--spring) both; background: #FFF4D6; }
@keyframes mtFuse { 0% { transform: scale(.45); background: #FFB74D; box-shadow: 0 0 0 6px #F2A33A, 0 0 40px 16px rgba(242, 163, 58, .8), 0 5px 0 #2B2D42; } 60% { background: #FFE3B0; } 100% { transform: none; } }
.mt-tile.made { background: #FFF4D6; }
.mt-tile.missed { background: #FFE3DE; }
.mt-tile.flown { opacity: .35; }
.mt-tile.nope, .mt-op.nope, .mt-palette.nope { animation: mtNope .45s ease; }
@keyframes mtNope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* parentheses: a blue cradle around the group, with the marks at its ends */
.mt-grp { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border-radius: 20px; background: rgba(61, 125, 216, .12); border: 2px solid rgba(61, 125, 216, .5); }
.mt-grp.new { animation: mtCradle .45s var(--spring) both; }
@keyframes mtCradle { from { transform: scale(.9); background: rgba(61, 125, 216, .3); } }
.mt-par { font: 300 3.1rem/1 var(--f-display); color: #2F67B8; margin: -6px -1px 0; }

/* signs */
.mt-op { flex: none; display: grid; place-items: center; font: 800 1.75rem/1 var(--f-math); }
.mt-op.slot, .mt-op.pick { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.mt-dot { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; transition: transform .2s var(--spring), background .2s; }
/* Lexend's signs are drawn small, so the ones in circles are set larger to fill them */
.mt-op.slot, .mt-op.pick { font-size: 2.15rem; }
.mt-op.slot:not(.set) .mt-dot { font-size: .72em; }
.mt-op.slot .mt-dot { border: 2.5px dashed #7D705E; background: #FFFDF6; color: #6B5F4E; }
.mt-op.slot:hover .mt-dot { transform: scale(1.06); }
.mt-op.slot.set .mt-dot { border-style: solid; border-color: #B8352D; background: #D9443B; color: #fff; box-shadow: 0 3px 0 #8E2A23; }
.mt-op.slot.active .mt-dot { box-shadow: 0 0 0 4px #F2C14E, 0 0 18px 4px rgba(242, 193, 78, .7); }
.mt-op.slot.set.active .mt-dot { box-shadow: 0 0 0 4px #F2C14E, 0 3px 0 #8E2A23, 0 0 18px 4px rgba(242, 193, 78, .7); }
.mt-op.fixed { width: 34px; color: #B8352D; }
.mt-op.pick .mt-dot { border: 2.5px solid #B8352D; background: #FFF4F2; color: #B8352D; box-shadow: 0 3px 0 rgba(142, 42, 35, .4); }
.mt-op.pick:hover .mt-dot { background: #D9443B; color: #fff; }
.mt-op.fixed.fusing, .mt-op.fusing .mt-dot { background: #F2C14E !important; color: #1E1F2E !important; border-color: #2B2D42 !important; }
.mt-op.fixed.fusing { border-radius: 8px; }
.mt-pend { position: absolute; right: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #D9443B; color: #fff; border: 2px solid #2B2D42; font: 800 1.15rem/1 var(--f-math); animation: mtPop .3s var(--spring) both; }
@keyframes mtPop { from { transform: scale(.3); } }

/* forge tiles show what they were made from */
.mt-forge .mt-tile { min-width: 76px; height: 86px; grid-template-rows: 1fr auto; padding: 6px 12px 8px; }
.mt-forge .mt-v { align-self: center; }
.mt-recipe { font: 700 .72rem/1 var(--f-math); color: #6B4F2A; white-space: nowrap; letter-spacing: -.02em; }

/* the target */
.mt-target { position: relative; z-index: 1; flex: none; width: clamp(112px, 17vw, 150px); display: grid; justify-items: center; }
.mt-target svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(43, 45, 66, .22)); }
.mt-target b { position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(clamp(112px, 17vw, 150px) / 2 - 50%)); min-width: 64px; padding: 2px 10px; border-radius: 12px; background: #fff; border: 2.5px solid #2B2D42; font: 800 clamp(1.4rem, 3.4vw, 1.9rem)/1.25 var(--f-display); text-align: center; color: #1E1F2E; }
.mt-tlabel { margin-top: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6B4F2A; }
.mt-ribbon { position: absolute; top: -4px; right: -10px; padding: 3px 10px; border-radius: 8px; background: #2B2D42; color: #FFD36E; font: 800 .85rem/1.3 var(--f-display); letter-spacing: .02em; transform: rotate(8deg) scale(0); opacity: 0; pointer-events: none; }
.mt-target.hit svg { animation: mtHit .7s var(--spring) both; }
.mt-target.hit .r4 { animation: mtBull 1.1s ease both; }
.mt-target.hit .mt-ribbon { animation: mtRibbon 2.2s var(--spring) both; }
.mt-target.hit b, .mt-target.shown b { background: #FFF1C9; }
@keyframes mtHit { 0% { transform: scale(1); } 30% { transform: scale(1.16) rotate(5deg); } 100% { transform: scale(1); } }
@keyframes mtBull { 0%, 100% { fill: #F2C14E; } 25%, 60% { fill: #FFF6C8; } }
@keyframes mtRibbon { 0% { transform: rotate(8deg) scale(0); opacity: 0; } 18% { transform: rotate(8deg) scale(1.15); opacity: 1; } 30%, 80% { transform: rotate(8deg) scale(1); opacity: 1; } 100% { transform: rotate(8deg) scale(1); opacity: 0; } }
.mt-target.wobble { animation: mtWob .55s ease; }
@keyframes mtWob { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

/* sparks where two tiles meet */
.mt-spark { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.mt-spark::before { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #F2A33A; animation: mtRing .55s ease-out both; }
.mt-spark::after { content: ''; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #FFD36E;
  box-shadow: 20px -10px 0 #F2A33A, -18px -14px 0 #FFD36E, 22px 12px 0 #F2C14E, -20px 10px 0 #F2A33A, 0 -24px 0 #FFD36E, 3px 24px 0 #F2C14E, -12px -24px 0 #F2A33A, 14px 22px 0 #FFD36E; animation: mtFly .6s ease-out both; }
@keyframes mtRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes mtFly { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* the left-to-right calculator */
.mt-calc { position: absolute; z-index: 2; top: 10px; left: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 10px; background: rgba(255, 255, 255, .78); border: 1.5px solid #CDB58F; font-size: .8rem; font-weight: 800; color: #3E3B36; }
.mt-calc svg { width: 24px; height: 29px; flex: none; }
.mt-lcd { min-width: 46px; padding: 2px 7px; border-radius: 6px; background: #CDE8C4; border: 2px solid #59606E; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12); font: 700 1rem/1.25 var(--f-math); color: #1E3A1E; text-align: right; font-variant-numeric: tabular-nums; }
.mt-calc.tick .mt-lcd { animation: mtLcd .3s ease; }
@keyframes mtLcd { 0% { background: #F2FBEA; } 100% { background: #CDE8C4; } }
.mt-calc.ok { border-color: #5DBB7C; }
.mt-calc.ok .mt-lcd { background: #A8E6B8; }
.mt-calc.no .mt-lcd { background: #FFC9BF; color: #6B1A10; }
.mt-calc.no { animation: mtNope .45s ease; }

/* two targets from the same tiles */
.mt-shots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mt-shots li { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 14px; border-radius: 999px; background: #F4F2EC; border: 1.5px solid rgba(28, 31, 38, .14); color: #464B57; font-weight: 700; }
.mt-shots li b { font: 800 1.15rem var(--f-display); color: #1C1F26; }
.mt-shots li.now { background: #FFF4F2; border-color: #D9443B; color: #1C1F26; }
.mt-shots li.done { background: #E3F5EB; border-color: #9ED3B6; color: #12432B; }
.mt-shots li svg { width: 18px; height: 18px; color: #1E8A57; }
.mt-shot-n { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.mt-shot-e { font: 600 .9rem var(--f-math); }

/* the sign row */
.mt-palette { display: flex; justify-content: center; gap: 12px; }
.mt-sign { width: 66px; height: 58px; border-radius: 16px; border: 2.5px solid #2B2D42; background: #fff; color: #B8352D; box-shadow: 0 4px 0 #2B2D42; font: 800 1.9rem/1 var(--f-math); cursor: pointer; transition: transform .1s ease, box-shadow .1s ease, background .15s; }
.mt-sign:hover { background: #FFF4F2; }
.mt-sign:active { transform: translateY(3px); box-shadow: 0 1px 0 #2B2D42; }
.mt-sign[aria-pressed="true"] { background: #D9443B; color: #fff; }
.mt-sign[disabled] { cursor: default; }

/* tools, routes and steps */
.mt-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.mt-ctl:empty { display: none; }
.mt-tools { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; }
.mt-tools.wide { flex: 1 1 100%; }
.mt-tools[hidden] { display: none; }
.mt-bookbtn { display: inline-flex; align-items: center; gap: 6px; }
.mt-bk-ico { width: 20px; height: 20px; color: #6B4F2A; flex: none; }
/* a twin of a revealed puzzle wears a small tag */
.mt-twin { position: absolute; z-index: 3; top: 10px; left: 12px; padding: 3px 10px; border-radius: 999px; background: #EDE6FF; border: 1.5px solid #B39BFF; color: #3A2378; font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
.mt-tip { margin: 0; flex-basis: 100%; text-align: center; color: #464B57; font-size: .95rem; }
.mt-tool { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 2px solid #2B2D42; background: #fff; color: #1C1F26; font-weight: 800; box-shadow: 0 3px 0 #2B2D42; }
.mt-tool:active { transform: translateY(2px); box-shadow: 0 1px 0 #2B2D42; }
.mt-tool[disabled] { border-color: rgba(28, 31, 38, .25); box-shadow: none; color: #5E6472; background: #F4F2EC; cursor: default; }
.mt-tool.quiet { border-color: rgba(28, 31, 38, .3); background: #F4F2EC; box-shadow: none; }
.mt-count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #2B2D42; color: #FFE08A; font: 800 .82rem/1 var(--f-ui); }

/* the forge wall: a hook per route, a gold ingot on each one found */
.mt-wall { flex-basis: 100%; display: grid; justify-items: center; gap: 8px; text-align: center; }
.mt-wall-k { margin: 0; color: #1C1F26; }
.mt-hooks { list-style: none; margin: 0; padding: 10px 12px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; border-radius: 16px; max-width: 760px;
  background: linear-gradient(180deg, #5C4632, #4A3726); border: 2px solid #2B2D42; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12); }
.mt-hooks li { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px 4px 8px; border-radius: 10px; font: 700 .95rem var(--f-math); color: #3A2A10;
  background: linear-gradient(180deg, #FFE7A0, #F2C14E 55%, #D99A2B); border: 2px solid #8C5A1E; box-shadow: 0 3px 0 #2B2D42; }
.mt-hooks li::before { content: ''; position: absolute; left: 50%; top: -9px; width: 10px; height: 8px; margin-left: -5px; border: 2.5px solid #C9CED8; border-bottom: 0; border-radius: 6px 6px 0 0; }
.mt-hooks li.empty { min-width: 46px; justify-content: center; padding: 4px 10px; background: rgba(255, 255, 255, .06); border: 2px dashed rgba(255, 233, 168, .55); box-shadow: none; color: #FFE9A8; font-family: var(--f-display); }
.mt-hooks li.new { animation: mtHang .7s var(--spring) both; }
.mt-nug { width: 12px; height: 10px; flex: none; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: #8C5A1E; }
.mt-wall.full .mt-hooks { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), 0 0 0 4px #F2C14E, 0 0 26px 6px rgba(242, 193, 78, .55); }
@keyframes mtHang { 0% { transform: translateY(-46px) rotate(-10deg); opacity: 0; } 55% { transform: translateY(4px) rotate(4deg); opacity: 1; } 75% { transform: rotate(-2deg); } 100% { transform: none; } }
.mt-rank-up { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #2B2D42; color: #FFE9A8; font-weight: 700; animation: mtPop .45s var(--spring) both; }
.mt-rank-up svg { width: 34px; height: 28px; }
.mt-rank-up b { color: #fff; }

/* the plaque: the route, typed out as one expression */
.mt-plaque { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 8px 18px; border-radius: 14px;
  background: linear-gradient(180deg, #F7E2A8, #E2B65C); border: 2.5px solid #8C5A1E; box-shadow: 0 4px 0 #2B2D42, inset 0 2px 0 rgba(255, 255, 255, .6); color: #2B1E0A; animation: mtPop .35s var(--spring) both; }
.mt-plaque .mt-route-k { color: #5C3D12; }
.mt-plaque-t { display: grid; font: 800 clamp(1.05rem, 3.4vw, 1.45rem)/1.25 var(--f-math); letter-spacing: -.01em; }
.mt-plaque-t > * { grid-area: 1 / 1; }
.mt-ghost { visibility: hidden; }
.mt-pp { color: #2F67B8; }
.mt-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: #2B1E0A; animation: mtBlink .5s steps(1) infinite; }
@keyframes mtBlink { 50% { opacity: 0; } }
.mt-plaque.done { animation: mtShine .9s ease both; }
@keyframes mtShine { 0% { box-shadow: 0 4px 0 #2B2D42, 0 0 0 0 rgba(242, 193, 78, .9); } 50% { box-shadow: 0 4px 0 #2B2D42, 0 0 0 8px rgba(242, 193, 78, .35); } 100% { box-shadow: 0 4px 0 #2B2D42, 0 0 0 0 rgba(242, 193, 78, 0); } }

/* the forge flares when a route is forged, and the last tile cools into a gold ingot */
.mt-lane::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(70% 90% at 45% 100%, rgba(255, 170, 60, .75), rgba(255, 120, 40, .25) 45%, rgba(255, 120, 40, 0) 75%); }
.mt-lane.flare::before { animation: mtFlare 1.4s ease-out both; }
@keyframes mtFlare { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.mt-tile.ingot { background: linear-gradient(180deg, #FFE7A0, #F2C14E 55%, #D99A2B); border-color: #8C5A1E; box-shadow: 0 5px 0 #2B2D42, 0 0 22px 4px rgba(242, 193, 78, .55); }
.mt-tile.ingot .mt-recipe { color: #5C3D12; }
.mt-tile.ingot.drop { animation: mtIngot .8s var(--spring) both; }
@keyframes mtIngot { 0% { transform: translateY(-40px) scale(1.25); background: #FFB74D; box-shadow: 0 0 0 6px #F2A33A, 0 0 50px 20px rgba(255, 150, 50, .85); } 45% { transform: translateY(4px) scale(.96); } 100% { transform: none; } }
.mt-route[hidden] { display: none; }
.mt-route { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; min-height: 32px; font-family: var(--f-math); font-weight: 600; text-align: center; }
.mt-route-k { font: 800 .74rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #6B4F2A; }
.mt-route-m { padding: 3px 10px; border-radius: 999px; background: #FFF4D6; border: 1.5px solid #EBC983; white-space: nowrap; }
.mt-route-chips { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; min-width: 0; }
.mt-route-more { align-self: center; color: #6B4F2A; font-weight: 800; }
.mt-steps[hidden] { display: none; }
.mt-route-hint { font-family: var(--f-ui); color: #464B57; font-weight: 500; }
.mt-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; font-family: var(--f-math); font-weight: 600; min-height: 1px; }
.mt-steps:empty { display: none; }
.mt-steps li { padding: 4px 12px; border-radius: 999px; background: #FFF8E6; border: 1.5px solid #F1D48E; animation: arIn .3s ease both; }
.mt-steps li b { color: #8E2A23; }

/* the route book (a kit modal, so it follows the page theme) */
.mt-bk p { color: var(--ink-2); margin: 0 0 12px; }
.mt-bk-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.mt-bk-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.mt-bk-head { display: grid; }
.mt-bk-head b { font: 800 1.5rem/1.1 var(--f-display); color: var(--ink); }
.mt-bk-head small { color: var(--ink-2); font-size: .78rem; }
.mt-bk-routes { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-bk-routes span { padding: 3px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 600 .92rem var(--f-math); color: var(--ink); }
.mt-bk-of { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-weight: 700; color: var(--ink-2); }
.mt-bk-of svg { width: 13px; height: 13px; color: #D99A2B; }
.mt-bk-list li.all { border-color: #E2B65C; box-shadow: inset 4px 0 0 #F2C14E; }
/* the route book button on the results screen (follows the page theme) */
.mt-res-book { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 44px; margin: 12px auto 0; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink); font: 800 .95rem var(--f-ui); cursor: pointer; vertical-align: middle; }
.mt-res-book .mt-bk-ico { color: currentColor; }
.mt-res-book:hover { background: var(--panel); }
.mt-bk-rank { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 10px 14px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.mt-bk-badge { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #FFE9A8; border: 2.5px solid #2B2D42; }
.mt-bk-badge svg { width: 40px; height: 34px; }
.mt-bk-rank > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mt-bk-rank b { font: 800 1.25rem/1.1 var(--f-display); color: var(--ink); }
.mt-bk-rank span { color: var(--ink-2); font-size: .92rem; }
.mt-bk-bar { display: block; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.mt-bk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F2A33A, #F2C14E); }
@media (max-width: 420px) { .mt-bk-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .mt-bk-head { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; } }

/* the big forge has six tiles */
@media (max-width: 900px) { .mt-cd .mt-tile { min-width: 60px; padding-inline: 8px; } }
/* short wide screens (a 1366×657 Chromebook, a 1280×720 laptop): a slimmer lane */
@media (min-width: 641px) and (max-height: 800px) {
  .mt-range { gap: 10px; }
  .mt-lane { padding: 14px 20px 22px; }
  .mt-target { width: 108px; }
  .mt-target b { transform: translate(-50%, calc(54px - 50%)); font-size: 1.5rem; }
  .mt-tlabel { margin-top: 2px; }
  .mt-rail { min-height: 80px; }
  .mt-tile { height: 68px; }
  .mt-forge .mt-tile { height: 76px; }
  .mt-route { min-height: 26px; }
  .mt-sign { height: 52px; }
}
/* phones: the target sits above the tiles, and every control stays at least 44 px */
@media (max-width: 640px) {
  .mt-range { gap: 8px; }
  .mt-lane { flex-direction: column-reverse; padding: 8px 8px 18px; gap: 4px; }
  .mt-target { width: 74px; }
  .mt-target b { transform: translate(-50%, calc(37px - 50%)); min-width: 44px; padding: 1px 6px; border-width: 2px; border-radius: 10px; font-size: 1.15rem; }
  .mt-tlabel { font-size: .6rem; margin-top: 0; letter-spacing: .1em; }
  .mt-ribbon { font-size: .74rem; top: -6px; right: -26px; }
  .mt-rail { gap: 5px; min-height: 60px; width: 100%; }
  .mt-tile { min-width: 34px; height: 54px; padding: 0 5px; border-radius: 12px; font-size: 1.45rem; box-shadow: 0 4px 0 #2B2D42; }
  .mt-tile.picked { transform: translateY(-5px); box-shadow: 0 0 0 3px #F2C14E, 0 8px 0 #2B2D42; }
  .mt-forge .mt-tile { min-width: 58px; height: 62px; padding: 3px 6px 5px; }
  .mt-recipe { font-size: .66rem; }
  .mt-op { font-size: 1.5rem; }
  .mt-op.slot, .mt-op.pick { width: 44px; height: 44px; }
  .mt-op .mt-dot { border-width: 2px; }
  .mt-op.slot, .mt-op.pick { font-size: 1.8rem; }
  .mt-op.fixed { width: 16px; }
  .mt-bracket button.mt-tile { min-width: 44px; }
  /* short rows (up to three tiles) have room for roomier tiles */
  :is(.mt-signs, .mt-order) .mt-rail:is([data-n="1"], [data-n="2"], [data-n="3"]) .mt-tile { min-width: 44px; }
  .mt-grp { gap: 4px; padding: 4px 0; border-radius: 16px; }
  .mt-par { font-size: 2.3rem; margin: -4px -2px 0; }
  .mt-pend { width: 28px; height: 28px; right: -10px; top: -12px; font-size: 1rem; }
  /* on phones the calculator is a small corner badge (icon and screen), clear of the target */
  .mt-calc { top: 6px; left: 6px; padding: 3px 6px 3px 4px; gap: 4px; }
  .mt-calc > span { display: none; }
  .mt-calc svg { width: 18px; height: 22px; }
  .mt-lcd { min-width: 40px; font-size: .9rem; padding: 1px 5px; }
  .mt-twin { top: 6px; left: 6px; font-size: .68rem; padding: 2px 8px; }
  .mt-sign { flex: 1 1 0; width: auto; max-width: 76px; min-width: 48px; height: 48px; }
  .mt-palette { gap: 8px; flex: 1 1 100%; }
  .mt-ctl { gap: 8px; }
  .mt-tools { gap: 6px; }
  .mt-tool { min-height: 44px; padding: 0 12px; }
  .mt-bk-word { display: none; }
  .mt-tip { font-size: .86rem; line-height: 1.3; }
  .mt-route { min-height: 22px; font-size: .9rem; gap: 4px 6px; }
  .mt-route-hint { font-size: .86rem; }
  .mt-shots li { min-height: 34px; padding: 2px 12px; }
}
@media (max-width: 640px) {
  .mt-cd .mt-rail { gap: 3px; }
  .mt-cd .mt-tile { min-width: 44px; padding: 3px 3px 5px; font-size: 1.2rem; }
  .mt-cd .mt-recipe { font-size: .56rem; letter-spacing: -.03em; }
}
@media (max-width: 380px) {
  .mt-lane { padding-inline: 4px; }
  .mt-rail { gap: 3px; }
  .mt-tile { min-width: 28px; padding: 0 3px; font-size: 1.3rem; }
  .mt-par { font-size: 2rem; margin: -4px -3px 0; }
  .mt-op.fixed { width: 13px; font-size: 1.15rem; }
  .mt-grp { gap: 2px; }
  /* the round sign buttons keep their full 44 px but tuck over the edges of the tiles beside them
     (in these levels the tiles themselves aren't buttons), so long rows still fit */
  .mt-op.slot, .mt-op.pick { position: relative; z-index: 3; margin: 0 -5px; }
  .mt-op.slot .mt-dot, .mt-op.pick .mt-dot { width: 36px; height: 36px; }
  .mt-op { font-size: 1.35rem; }
  .mt-op.slot, .mt-op.pick { font-size: 1.55rem; }
  .mt-hooks li { font-size: .88rem; padding-inline: 8px; }
  /* the route stays on one line: the oldest joins fold into … (the full route is still read aloud) */
  .mt-route { flex-wrap: nowrap; }
  .mt-route-k { display: none; }
  .mt-route-chips { flex-wrap: nowrap; overflow: hidden; gap: 5px; }
  .mt-route-m { font-size: .82rem; padding: 2px 7px; }
  /* parenthesis marks stay visible over the sign buttons' hit areas */
  .mt-par { position: relative; z-index: 4; pointer-events: none; }
}
@media (max-width: 340px) {
  .mt-range, .mt-ctl { gap: 6px; }
  .mt-lane { padding: 6px 2px 16px; }
  .mt-forge .mt-tile { height: 58px; }

  .mt-rail { gap: 2px; }
  .mt-tile { min-width: 26px; padding: 0 2px; font-size: 1.2rem; }
  .mt-op.fixed { width: 11px; }
  .mt-op.slot, .mt-op.pick { margin: 0 -7px; }
  .mt-op.slot .mt-dot, .mt-op.pick .mt-dot { width: 32px; height: 32px; }
  .mt-op.slot, .mt-op.pick { font-size: 1.4rem; }
  .mt-par { font-size: 1.8rem; margin: -4px -4px 0; }
  .mt-tools { gap: 5px; }
  .mt-tool { padding: 0 9px; font-size: .92rem; }
  .mt-bookbtn { gap: 3px; padding: 0 8px; }
}
/* the narrowest phones: the big forge's six tiles sit in two rows of three, the target beside them */
@media (max-width: 350px) {
  .mt-cd .mt-lane { flex-direction: row; padding: 8px 4px 18px; gap: 6px; }
  .mt-cd .mt-rail { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; gap: 4px; }
  .mt-cd .mt-target { width: 60px; }
  .mt-cd .mt-target b { transform: translate(-50%, calc(30px - 50%)); min-width: 40px; padding: 0 4px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .mt-calc.no, .mt-calc.tick .mt-lcd, .mt-tile.glow, .mt-op.glow .mt-dot, .mt-hooks li.new, .mt-tile.ingot.drop, .mt-plaque, .mt-plaque.done, .mt-rank-up, .mt-lane.flare::before { animation: none; } }
:root[data-motion="reduced"] :is(.mt-calc.no, .mt-calc.tick .mt-lcd, .mt-tile.glow, .mt-op.glow .mt-dot, .mt-hooks li.new, .mt-tile.ingot.drop, .mt-plaque, .mt-plaque.done, .mt-rank-up, .mt-lane.flare::before) { animation: none; }