/* Mosaic Province — a glassworks bench. The board is always a light surface (the kit
   keeps .ar-board light in Night mode), so these colors are fixed. */
.mp-shop { width: 100%; display: grid; gap: 12px; justify-items: center; }
.mp-shop > * { max-width: 100%; min-width: 0; }
.mp-main, .mp-bench { display: grid; gap: 8px; justify-items: center; width: 100%; }

/* order slip */
.mp-slip { position: relative; display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 9px 16px 9px 10px; border-radius: 6px 18px 18px 6px; background: #FFF8E6; border: 2px solid #E2C98A; box-shadow: 3px 3px 0 rgba(30, 42, 58, .15); transform: rotate(-1deg); }
.mp-slip-tag { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 .68rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #7A5A12; border-right: 2px dashed #E2C98A; padding-left: 8px; align-self: stretch; text-align: center; }
.mp-slip-body { display: grid; gap: 3px; min-width: 0; }
.mp-client { font: 800 .7rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #7A5A12; }
.mp-eq { font: 700 1.3rem var(--f-display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #1C1F26; }
.mp-sub { color: #464B57; font-weight: 600; font-size: .9rem; }
.mp-eqs { font: 800 1.15em var(--f-math); }
.mp-ok { color: #1E8A57; font: 900 1.1em var(--f-ui); }
.mp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(30, 42, 58, .2); font: 800 .95rem var(--f-ui); }
.mp-chip i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #1E2A3A; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 7px), var(--paint); }
.mp-frac { display: inline-flex; vertical-align: middle; }
.mp-fr { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; font: 800 1.2em var(--f-math); }
.mp-fr > span:first-child { border-bottom: 3px solid currentColor; padding: 0 .2em; }
.mp-fr > span:last-child { padding: .05em .2em 0; }
.mp-frac.blank .mp-fr > span[data-q], .mp-frac.blank .mp-fr > span:only-child { min-width: 1.4em; text-align: center; }
.mp-frac.blank .mp-fr > span[data-q] { color: #6A44C9; background: #F0EAFE; border-radius: 6px; box-shadow: inset 0 0 0 2px #C8B7F4; }
.mp-frac.blank .mp-fr > span[data-q]:first-child { border-bottom-color: #1C1F26; border-radius: 6px 6px 0 0; }
.mp-frac.got .mp-fr { color: #1E8A57; animation: mpPop .5s var(--spring) both; }
@keyframes mpPop { from { transform: scale(.3); } to { transform: none; } }

/* status line */
.mp-status { margin: 0; min-height: 2.2em; font-weight: 600; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; justify-content: center; color: #2B3140; font-size: .98rem; }
.mp-status .mp-fr { font-size: 1.02em; }
.mp-arrow { color: #5E6472; }

/* the window */
.mp-frame { position: relative; width: min(100%, 500px); padding: 11px; border-radius: 16px; background: linear-gradient(145deg, #6B4F2A, #4A361C); box-shadow: inset 0 0 0 3px #2F2210, 0 10px 24px rgba(30, 42, 58, .25); }
.mp-glass { position: relative; --g: 4px; container-type: inline-size; }
/* a small window (phones, short screens): smaller labels on its overlays so they stay inside the glass */
@container (max-width: 240px) { .mp-tag { font-size: .66rem; padding: 1px 5px; left: 2px; top: 2px; } .mp-tag.pf-tag { left: 50%; } }
/* a small window: the outlined group's label sits on the frame's top edge, above the glass, so it covers no panes */
@container (max-width: 260px) { .mp-cell.group .mp-tag { top: auto; bottom: calc(100% + 2px); left: -2px; } }
.mp-window { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: var(--g); padding: var(--g); aspect-ratio: 16 / 10; background: #1E2A3A; border-radius: 6px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* panes you paint stay at least 44 px tall, even 16 or 24 to a window on a narrow phone: the window grows taller */
.is-paint .mp-window { grid-template-rows: repeat(var(--rows), minmax(44px, 1fr)); }
.mp-pane { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 2px; background: linear-gradient(160deg, #EEF6FA 0%, #D3E6EF 55%, #E1EEF4 100%); cursor: pointer; transition: background .18s, box-shadow .18s; }
.mp-pane:hover:not([disabled]) { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--paint) 75%, transparent); }
.mp-pane.gold { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .24) 0 5px, rgba(255, 255, 255, 0) 5px 13px), radial-gradient(circle at 32% 28%, var(--paint-hi), var(--paint) 55%, var(--paint-lo)); box-shadow: inset 0 0 10px rgba(255, 255, 255, .4); }
.mp-pane:focus-visible { outline: 3px solid #6A44C9; outline-offset: -3px; box-shadow: inset 0 0 0 6px #fff; border-radius: 3px; }
.mp-pane[disabled] { cursor: default; }
span.mp-pane { cursor: default; }
.mp-window.cut .mp-pane { animation: mpCut .42s var(--spring) both; animation-delay: calc(min(var(--i), 23) * 8ms); }
@keyframes mpCut { from { transform: scale(.82); opacity: .4; } to { transform: none; opacity: 1; } }
.mp-window.fuse .mp-pane { animation: mpFuse .4s ease both; }
@keyframes mpFuse { from { filter: brightness(1.35); transform: scale(1.04); } to { filter: none; transform: none; } }
.mp-frame.fired .mp-window { animation: mpGlow 1.3s ease both; }
@keyframes mpGlow { 0% { filter: brightness(1); } 40% { filter: brightness(1.3) saturate(1.2); box-shadow: 0 0 40px color-mix(in srgb, var(--paint) 80%, transparent); } 100% { filter: brightness(1.04); } }
.mp-frame.shown { box-shadow: inset 0 0 0 3px #2F2210, 0 0 0 4px #C8B7F4, 0 10px 24px rgba(30, 42, 58, .25); }
.mp-frame.nudge { animation: mpNudge .4s ease; }
@keyframes mpNudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

/* overlays on the glass: hint grid, an outlined group, groups that can't merge, the proof */
.mp-over { position: absolute; inset: 0; pointer-events: none; }
.mp-cell { position: absolute; box-sizing: border-box; left: calc(var(--g) / 2 + (100% - var(--g)) * var(--x)); top: calc(var(--g) / 2 + (100% - var(--g)) * var(--y)); width: calc((100% - var(--g)) * var(--w)); height: calc((100% - var(--g)) * var(--h)); }
.mp-cell.ghost { border: 2px dashed #6A44C9; outline: 1px solid rgba(255, 255, 255, .85); outline-offset: -3px; background: rgba(106, 68, 201, .06); }
.mp-cell.group { border: 4px solid #6A44C9; box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px #fff; border-radius: 4px; background: rgba(106, 68, 201, .12); }
.mp-cell.mixed { border: 3px dashed #C2402F; background: rgba(194, 64, 47, .18); box-shadow: 0 0 0 1px #fff; animation: mpNudge .4s ease; }
.mp-tag { position: absolute; left: 4px; top: 4px; z-index: 1; padding: 2px 8px; border-radius: 8px; background: #fff; color: #3A2378; border: 1.5px solid #C8B7F4; font: 800 .78rem var(--f-ui); white-space: nowrap; box-shadow: 0 2px 6px rgba(30, 42, 58, .2); }
/* the proof: the order's own cut laid over the finished window, drawn bold enough to read */
.mp-cell.pf { border: 2.5px dashed #fff; box-shadow: inset 0 0 0 2px rgba(30, 42, 58, .55), 0 0 0 1px rgba(30, 42, 58, .45); }
.mp-cell.pf.gold { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .6) 0 3px, rgba(255, 255, 255, 0) 3px 9px); }
.mp-over.proof.drop { animation: mpDrop .7s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes mpDrop { from { transform: translate(-7%, -16%) rotate(-3deg) scale(.88); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
.mp-over.proof.click .mp-cell.pf.gold { animation: mpClick .7s ease both; }
@keyframes mpClick { 0% { box-shadow: inset 0 0 0 1px rgba(30, 42, 58, .35); } 40% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #1E8A57, 0 0 18px rgba(255, 255, 255, .9); } 100% { box-shadow: inset 0 0 0 1px rgba(30, 42, 58, .35); } }
.mp-tag.pf-tag { left: 50%; top: auto; bottom: 8px; transform: translateX(-50%); color: #12432B; border-color: #9ED3B6; background: #E3F5EB; }
.mp-over.proof:not(.click) .pf-tag { opacity: 0; }

/* the light ruler */
.mp-ruler { width: min(100%, 500px); }
/* phones and short screens (the kit's dock is sticky there): the ruler sits right above the window, and the
   window is sized (--mp-fw, set from the script) so the ruler and the window both clear the dock at round start */
.mp-frame, .mp-ruler { max-width: var(--mp-fw, none); }
.mp-shop.docked .mp-bench .mp-ruler { order: -1; }
.mp-tools[hidden] { display: none; }
.mp-ruler svg { width: 100%; display: block; overflow: visible; }
.mp-beam-bg { fill: color-mix(in srgb, var(--paint) 14%, #fff); stroke: rgba(30, 42, 58, .12); }
.mp-axis { stroke: #1E2A3A; stroke-width: 3; }
.mp-tick { stroke: #1E2A3A; stroke-width: 1.5; }
.mp-tick.end { stroke-width: 3; }
.mp-lab { font: 800 14px var(--f-math); fill: #1E2A3A; text-anchor: middle; }
.mp-lab.sm { font: 800 13px var(--f-ui); fill: #6B4F10; }
.mp-lab.faint { fill: #5E6472; font-weight: 600; }
.mp-lab.strong { fill: #12432B; font-size: 14px; }
.mp-want line { stroke: #8A6A1E; stroke-width: 3; stroke-dasharray: 5 4; }
.mp-have { transition: transform .35s var(--spring); }
.mp-have circle { fill: var(--paint); stroke: #1E2A3A; stroke-width: 2.5; }
.mp-cone { fill: var(--paint); opacity: .35; }
.mp-have.meet circle { fill: #1E8A57; }
.mp-tick-ok { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mp-ring { fill: none; stroke: #1E8A57; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: mpRing 1.1s ease-out both; }
@keyframes mpRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1); opacity: .85; } }

/* tools */
.mp-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; align-items: center; }
.mp-tool { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 6px 5px 12px; border-radius: 14px; background: #EEF5F8; border: 1.5px solid #C9DDE6; }
.mp-tool > span { font-weight: 800; font-size: .84rem; color: #1E2A3A; margin: 0 2px; }
.mp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px; border-radius: 12px; border: 2px solid #1E2A3A; background: #fff; color: #1E2A3A; font-weight: 800; box-shadow: 0 3px 0 #1E2A3A; }
.mp-btn svg { width: 18px; height: 18px; flex: none; }
.mp-btn:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 #1E2A3A; }
.mp-btn.quiet { border-color: rgba(30, 42, 58, .3); box-shadow: none; background: transparent; }
.mp-btn.num { min-width: 46px; padding: 0 8px; justify-content: center; font: 800 1.08rem var(--f-math); }
.mp-btn[disabled] { opacity: .45; cursor: default; }
.mp-side-tools { display: none; }

/* the level window: one small pane per order */
.mp-gal { display: flex; align-items: center; gap: 10px; justify-content: center; max-width: 100%; }
.mp-gal-h { display: grid; line-height: 1.15; text-align: right; }
.mp-gal-h b { font: 800 .7rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #464B57; }
.mp-gal-h small { font-weight: 700; color: #464B57; font-size: .8rem; }
.mp-gal-row { display: flex; gap: 5px; padding: 6px; border-radius: 14px 14px 6px 6px; background: linear-gradient(145deg, #6B4F2A, #4A361C); box-shadow: inset 0 0 0 2px #2F2210; transition: box-shadow .4s; }
.mp-mini { position: relative; display: grid; place-items: center; width: 46px; aspect-ratio: 16 / 10; border-radius: 3px; background: #5A4325; outline: 1.5px dashed rgba(255, 236, 200, .45); outline-offset: -2px; }
.mp-mini.now { outline: 2px solid #F2B134; outline-offset: -2px; }
.mp-mini.done { outline: 0; }
.mp-mini-n { font: 800 .7rem var(--f-ui); color: #F3E3C2; }
.mp-mini-glass { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 1px; padding: 1px; background: #1E2A3A; border-radius: 3px; }
.mp-mini-glass i { background: #DCEBF2; }
.mp-mini-glass i.on { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 5px), var(--paint); }
.mp-mini.land { animation: mpLand .55s var(--spring) both; }
@keyframes mpLand { from { transform: scale(1.5); filter: brightness(1.6); } to { transform: none; filter: none; } }
.mp-gal.complete .mp-gal-row { box-shadow: inset 0 0 0 2px #2F2210, 0 0 0 3px #F2B134, 0 0 22px rgba(242, 177, 52, .75); animation: mpShine 1.6s ease both; }
@keyframes mpShine { 0% { filter: brightness(1); } 35% { filter: brightness(1.35) saturate(1.2); } 100% { filter: none; } }
.mp-fly { position: fixed; z-index: 60; pointer-events: none; transform-origin: 0 0; display: block; }
.mp-fly .mp-mini-glass { gap: 3px; padding: 3px; border-radius: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }

/* "Which windows match?": three finished windows on the bench, each a toggle button */
.mp-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(100%, 540px); padding-top: 8px; }
.mp-cand { position: relative; display: grid; gap: 7px; min-width: 0; padding: 8px 8px 7px; border: 0; border-radius: 14px; background: linear-gradient(145deg, #6B4F2A, #4A361C); box-shadow: inset 0 0 0 2px #2F2210, 0 6px 14px rgba(30, 42, 58, .22); color: #1E2A3A; font: inherit; cursor: pointer; transition: transform .18s var(--spring), box-shadow .18s; }
.mp-cand-glass { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 2px; padding: 2px; aspect-ratio: 16 / 10; background: #1E2A3A; border-radius: 5px; transition: filter .3s, opacity .3s; }
.mp-cand-glass i { background: linear-gradient(160deg, #EEF6FA 0%, #D3E6EF 55%, #E1EEF4 100%); border-radius: 1px; }
.mp-cand-glass i.on { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .24) 0 4px, rgba(255, 255, 255, 0) 4px 10px), radial-gradient(circle at 32% 28%, var(--paint-hi), var(--paint) 55%, var(--paint-lo)); }
.mp-cand-foot { display: flex; align-items: center; gap: 6px; min-height: 28px; min-width: 0; }
.mp-cand-letter { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #1E2A3A; border: 2px solid #1E2A3A; font: 800 .92rem var(--f-ui); }
.mp-cand-tag { visibility: hidden; padding: 1px 7px; border-radius: 8px; background: #fff; color: #1C1F26; font-size: .92rem; white-space: nowrap; }
.mp-cand-tag .mp-fr { flex-direction: row; font-size: 1em; }
.mp-cand-tag .mp-fr > span:first-child { border: 0; padding: 0; }
.mp-cand-tag .mp-fr > span:first-child::after { content: '/'; }
.mp-cand-tag .mp-fr > span:last-child { padding: 0; }
.mp-cands.tags .mp-cand-tag, .mp-cand.show-tag .mp-cand-tag { visibility: visible; animation: mpPop .4s var(--spring) both; }
.mp-cand-mark { position: absolute; top: -9px; right: -9px; display: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; font: 900 1rem var(--f-ui); box-shadow: 0 2px 6px rgba(30, 42, 58, .3); }
.mp-cand:hover:not([disabled]) { transform: translateY(-2px); }
.mp-cand:focus-visible { outline: 3px solid #6A44C9; outline-offset: 4px; }
.mp-cand[aria-pressed="true"] { transform: translateY(-4px); box-shadow: inset 0 0 0 2px #2F2210, 0 0 0 3px #fff, 0 0 0 7px #6A44C9, 0 10px 20px rgba(30, 42, 58, .25); }
.mp-cand[aria-pressed="true"] .mp-cand-letter { background: #6A44C9; color: #fff; border-color: #fff; }
.mp-cand[aria-pressed="true"] .mp-cand-mark { display: grid; background: #6A44C9; color: #fff; }
.mp-cand[aria-pressed="true"]:not(.is-eq):not(.is-not) .mp-cand-mark::before { content: '✓'; }
.mp-cand[disabled] { cursor: default; }
.mp-cand.is-eq { transform: translateY(-4px); box-shadow: inset 0 0 0 2px #2F2210, 0 0 0 3px #fff, 0 0 0 7px #1E8A57, 0 0 26px color-mix(in srgb, var(--paint) 70%, transparent); }
.mp-cand.is-eq .mp-cand-mark { display: grid; background: #1E8A57; color: #fff; }
.mp-cand.is-eq .mp-cand-letter { background: #1E8A57; color: #fff; border-color: #fff; }
.mp-cand.is-not { transform: none; box-shadow: inset 0 0 0 2px #2F2210, 0 3px 8px rgba(30, 42, 58, .18); }
.mp-cand.is-not .mp-cand-glass { filter: saturate(.5); opacity: .72; }
.mp-cand.is-not .mp-cand-mark { display: grid; background: #F1EEE6; color: #464B57; border-color: #C9C2B0; }
.mp-ruler-match { width: min(100%, 540px); }
.mp-beam { fill: url(#mp-beam-g); }
.mp-beam.fresh { opacity: 0; transition: opacity .6s ease .3s; }
.lit .mp-beam.fresh { opacity: 1; }
.mp-mk { transition: transform .8s cubic-bezier(.3, 1.25, .5, 1); }
.mp-mk circle { fill: #fff; stroke: #1E2A3A; stroke-width: 2.5; }
.mp-mk text { font: 800 12px var(--f-ui); fill: #1E2A3A; text-anchor: middle; }
.mp-mk.eq circle { fill: #1E8A57; stroke: #fff; }
.mp-mk.eq text { fill: #fff; }
.mp-mk.not circle { fill: #F1EEE6; }
.mp-mk-stem { stroke: #1E2A3A; stroke-width: 1.5; stroke-dasharray: 2 2; }
.mp-mk.merged rect { fill: #1E8A57; stroke: #fff; stroke-width: 2; }
.mp-mk.merged text { fill: #fff; font-size: 13px; }
.mp-mk.merged rect, .mp-mk.merged text { transform-box: fill-box; transform-origin: center; animation: mpPop .5s var(--spring) both; }

/* the hall of windows, shown when a level is finished */
.mp-hall { position: relative; overflow: hidden; width: 100%; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 14px 12px; border-radius: 16px; background: radial-gradient(circle at 30% 30%, #FFF6DC, #F7F2E6 70%); border: 1.5px solid #E2D3AE; animation: mpRise .6s cubic-bezier(.2, .8, .2, 1) both; }
/* scrolled into view above the phone's sticky dock when a level's window is finished */
.mp-hall, .mp-ruler, .mp-cands, .mp-frame { scroll-margin-top: 80px; scroll-margin-bottom: 190px; }
.mp-hall-hero { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; width: 100%; }
.mp-hall-big { position: relative; flex: none; width: 92px; }
.mp-hall-big::before { content: ''; position: absolute; left: 50%; top: 46%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .55) 0 8deg, rgba(255, 214, 120, 0) 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 0 28%, transparent 66%); mask: radial-gradient(circle, #000 0 28%, transparent 66%); animation: mpRays 30s linear infinite; pointer-events: none; }
@keyframes mpRays { to { transform: rotate(1turn); } }
.mp-hall-big svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(242, 177, 52, .85)); animation: mpHang .9s var(--spring) both; }
.mp-hall-txt { position: relative; display: grid; gap: 4px; flex: 1 1 150px; min-width: 0; text-align: left; }
@keyframes mpRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mp-hall-h { margin: 0; font-size: 1.15rem; color: #1C1F26; }
.mp-hall-p { margin: 0; color: #464B57; font-size: .9rem; font-weight: 600; }
.mp-hall-row { position: relative; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 8px; border-top: 1.5px dashed #E2D3AE; width: 100%; }
.mp-hall figure { margin: 0; display: grid; justify-items: center; gap: 2px; }
.mp-hall-row svg { width: 40px; height: auto; display: block; }
.mp-hall figure.new svg { animation: mpHang .9s var(--spring) both; filter: drop-shadow(0 0 6px rgba(242, 177, 52, .9)); }
@keyframes mpHang { from { transform: translateY(-14px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-hall figcaption { font: 700 .74rem var(--f-ui); color: #464B57; }
.mp-hall-q { font: 800 18px var(--f-display); fill: #8A7A5A; }
/* stars per window; a master (re-glazed) window glows gold */
.mp-hall-stars { margin: 0; font: 800 1.05rem var(--f-ui); letter-spacing: 2px; color: #8A5A0A; }
.mp-fig-stars { display: block; font-size: .62rem; letter-spacing: 1px; color: #8A5A0A; line-height: 1; }
.mp-hall figure.master svg, .mp-hall-big.master svg { filter: drop-shadow(0 0 7px rgba(242, 177, 52, 1)) drop-shadow(0 0 2px rgba(138, 90, 10, .8)); }
.has-hall .mp-pad { display: none; }

/* missing numbers: the shared pad, a little more compact */
.mp-pad { width: min(100%, 300px); }
.mp-pad .np { width: 100%; gap: 8px; }
.mp-pad .np-display { min-height: 56px; }
.mp-pad .np-keys { gap: 6px; }
.mp-pad .np-k { min-height: 46px; }

/* desktop: the order and the level window on the left; the tools, the window and its ruler on the right.
   A single tool group moves beside the order instead, so the bench stays short and Fire the kiln and the
   feedback above it stay on screen at laptop heights. */
@media (min-width: 960px) {
  .mp-shop { grid-template-columns: minmax(250px, 320px) minmax(0, 560px); grid-template-rows: auto auto auto auto 1fr; column-gap: 28px; row-gap: 12px; align-items: start; justify-content: center; justify-items: stretch; }
  .mp-slip { grid-column: 1; grid-row: 1; justify-self: start; }
  .mp-status { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .mp-main { grid-column: 2; grid-row: 1 / span 5; }
  .is-paint:not(.two-tools) .mp-main { display: contents; }
  .is-paint:not(.two-tools) .mp-tools { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .is-paint:not(.two-tools) .mp-bench { grid-column: 2; grid-row: 1 / span 5; }
  .is-paint:not(.two-tools) .mp-long { display: none; }
  .two-tools .mp-side-tools { display: flex; grid-column: 1; grid-row: 3; }
  .two-tools .mp-reset-inline { display: none; }
  .mp-pad { grid-column: 1; grid-row: 4; justify-self: start; }
  .mp-gal { grid-column: 1; grid-row: 5; align-self: end; justify-self: start; flex-direction: column; align-items: flex-start; gap: 4px; }
  .mp-gal-h { text-align: left; grid-auto-flow: column; gap: 8px; align-items: baseline; }
  .mp-mini { width: 44px; }
  /* a finished level: the five panes become the arched window in the hall, which takes the place of
     the status line, the tools and the level window, so the dock (feedback, See results) stays on screen */
  .has-hall .mp-status, .has-hall .mp-gal, .has-hall .mp-side-tools { display: none; }
  .mp-hall { grid-column: 1; grid-row: 2 / span 4; align-self: start; padding: 10px; gap: 8px; }
  .mp-hall-big { width: 68px; }
  .mp-hall-big::before { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
  .mp-hall-h { font-size: 1.02rem; }
  .mp-hall-p { font-size: .84rem; }
  .mp-hall-row { gap: 6px; padding-top: 6px; }
  .mp-hall-row svg { width: 32px; }
  .mp-hall figcaption { font-size: .68rem; }
  .mp-frame, .mp-ruler { width: min(100%, 460px); }
  .two-tools .mp-frame, .two-tools .mp-ruler { width: min(100%, 430px); }
  .is-missing .mp-frame, .is-missing .mp-ruler { width: min(100%, 430px); }
}
/* wide screens: missing-number orders get a third column for the number pad */
@media (min-width: 1180px) {
  .mp-shop.is-missing { grid-template-columns: minmax(220px, 260px) minmax(0, 500px) 226px; column-gap: 22px; }
  .is-missing .mp-pad { grid-column: 3; grid-row: 1 / span 5; justify-self: stretch; }
  .is-missing .mp-hall { grid-column: 3; grid-row: 1 / span 5; }
  .is-missing.has-hall .mp-gal { display: flex; }
  .is-missing .mp-hall-txt { text-align: center; }
  .is-missing .mp-frame, .is-missing .mp-ruler { width: min(100%, 400px); }
  .is-missing.many-tools .mp-frame, .is-missing.many-tools .mp-ruler { width: min(100%, 380px); }
}
/* landscape phones (wide but very short): the order, tools and level window on the left, the ruler and window
   on the right, and for missing numbers the pad in a third column, so the work fits above the dock */
@media (min-width: 641px) and (max-width: 959px) and (max-height: 500px) {
  .mp-shop { grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; gap: 8px 16px; align-items: start; justify-items: stretch; }
  .mp-shop.is-missing { grid-template-columns: minmax(202px, 230px) minmax(220px, 1fr) minmax(150px, 200px); }
  .mp-slip { grid-column: 1; grid-row: 1; justify-self: stretch; padding: 6px 10px 6px 8px; }
  .mp-eq { font-size: 1.08rem; }
  .mp-sub { font-size: .8rem; }
  .mp-status { grid-column: 1; grid-row: 2; justify-content: flex-start; min-height: 0; font-size: .88rem; }
  .mp-main { display: contents; }
  .mp-tools { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .mp-long, .mp-side-tools { display: none; }
  .mp-bench { grid-column: 2; grid-row: 1 / span 5; }
  .is-match .mp-main { display: grid; grid-column: 2; grid-row: 1 / span 5; }
  .is-match .mp-cands { width: min(100%, 360px); gap: 10px; }
  .is-match .mp-ruler-match { width: min(100%, 420px); }
  .mp-gal { grid-column: 1; grid-row: 4; justify-self: start; }
  .mp-mini { width: 32px; }
  .mp-pad { grid-column: 3; grid-row: 1 / span 5; width: 100%; }
  .mp-pad .np { width: 100%; gap: 6px; }
  .mp-pad .np-display { min-height: 40px; font-size: 1.4rem; }
  .mp-pad .np-keys { gap: 5px; }
  .mp-pad .np-k { min-height: 38px; }
  .mp-hall { grid-column: 1; grid-row: 2 / span 4; padding: 8px; gap: 6px; }
  .is-missing .mp-hall { grid-column: 3; grid-row: 1 / span 5; }
  .has-hall .mp-status, .is-paint.has-hall .mp-gal, .is-match.has-hall .mp-gal { display: none; }
  .mp-hall-big { width: 56px; }
  .mp-hall-row svg { width: 28px; }
  /* a compact order slip (order on the left, the words on the right; re-cut orders stacked) */
  .mp-slip { transform: none; }
  .mp-slip-tag { display: none; }
  .mp-slip-body { width: 100%; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "eq client" "eq sub"; column-gap: 10px; row-gap: 1px; align-items: center; }
  .mp-client { grid-area: client; align-self: end; font-size: .62rem; }
  .mp-eq { grid-area: eq; gap: 6px; }
  .mp-sub { grid-area: sub; align-self: start; font-size: .76rem; line-height: 1.2; }
  .mp-slip.long .mp-slip-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "client" "eq" "sub"; }
  .mp-verb { display: none; }
  /* slimmer tools: Start over shows only its arrow (it keeps its name), number buttons a little narrower */
  .mp-tools { gap: 6px; }
  .mp-tool { padding: 4px 4px 4px 8px; gap: 5px; }
  .mp-btn.num { min-width: 40px; padding: 0 4px; }
  .mp-reset { width: 44px; padding: 0; justify-content: center; }
  .mp-reset-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* phones: the level window first, everything compact so the dock covers as little as possible */
@media (max-width: 959px) { .mp-gal { order: -1; } }
@media (max-width: 560px) {
  .mp-shop { gap: 8px; }
  .mp-slip { padding: 7px 12px 7px 8px; gap: 10px; }
  .mp-eq { font-size: 1.12rem; }
  .mp-sub { font-size: .84rem; }
  .mp-status { font-size: .92rem; min-height: 0; }
  .mp-status .mp-fr { flex-direction: row; font-size: 1em; }
  .mp-status .mp-fr > span:first-child { border: 0; padding: 0; }
  .mp-status .mp-fr > span:first-child::after { content: '/'; }
  .mp-status .mp-fr > span:last-child { padding: 0; }
  .mp-gal-row { padding: 5px; }
  .mp-frame { padding: 8px; border-radius: 14px; }
  .mp-glass { --g: 3px; }
  .mp-mini { width: 40px; }
  .mp-gal-h small { display: none; }
  .mp-tool { padding: 4px 4px 4px 8px; gap: 5px; }
  .mp-reset { font-size: .92rem; padding: 0 9px; gap: 4px; }
  .mp-tool > span { font-size: .78rem; }
  .mp-btn { padding: 0 10px; }
  .mp-btn.num { min-width: 44px; padding: 0 6px; }
  .mp-long { display: none; }
  .mp-tools { gap: 6px 5px; }
  /* the number pad in two rows (1–6, then 7–9, 0 and delete) so it sits close to the window */
  .mp-pad { width: 100%; }
  .mp-pad .np { width: 100%; gap: 6px; }
  .mp-pad .np-display { min-height: 46px; font-size: 1.6rem; }
  .mp-pad .np-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .mp-pad .np-keys > span { display: none; }
  .mp-pad .np-k { min-height: 44px; }
  .mp-pad .np-k[data-k="1"] { order: 1; } .mp-pad .np-k[data-k="2"] { order: 2; } .mp-pad .np-k[data-k="3"] { order: 3; }
  .mp-pad .np-k[data-k="4"] { order: 4; } .mp-pad .np-k[data-k="5"] { order: 5; } .mp-pad .np-k[data-k="6"] { order: 6; }
  .mp-pad .np-k[data-k="7"] { order: 7; } .mp-pad .np-k[data-k="8"] { order: 8; } .mp-pad .np-k[data-k="9"] { order: 9; }
  .mp-pad .np-k[data-k="0"] { order: 10; } .mp-pad .np-k[data-k="back"] { order: 11; grid-column: span 2; }
  .mp-cands { gap: 10px; }
  .mp-cand { padding: 6px 6px 5px; border-radius: 12px; gap: 5px; }
  .mp-cand-letter { width: 24px; height: 24px; font-size: .82rem; }
  .mp-cand-tag { font-size: .82rem; padding: 1px 5px; }
  .mp-cand-mark { width: 26px; height: 26px; font-size: .9rem; top: -8px; right: -8px; }
  .mp-hall-big { width: 80px; }
}
@media (max-width: 400px) {
  .mp-cands { gap: 8px; }
  .mp-cand-foot { gap: 3px; }
  .mp-cand-letter { width: 22px; height: 22px; }
  .mp-cand-tag { padding: 1px 3px; font-size: .78rem; }
  .mp-gal { flex-wrap: wrap; gap: 2px 8px; }
  .mp-gal-h { grid-auto-flow: column; gap: 6px; text-align: center; width: 100%; justify-content: center; }
  .mp-gal-h small { display: inline; }
  .mp-mini { width: clamp(30px, 10.5vw, 40px); }
  .mp-eq { font-size: 1.05rem; gap: 6px; }
  .mp-slip-tag { display: none; }
}
/* phones with the sticky dock: a sideways order slip and a one-line level window, so the window can stay big */
@media (max-width: 640px) {
  .mp-shop.docked { gap: 6px; }
  .mp-shop.docked .mp-slip { width: 100%; transform: none; padding: 6px 10px; }
  .mp-shop.docked .mp-slip-body { width: 100%; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "eq client" "eq sub"; column-gap: 12px; row-gap: 1px; align-items: center; }
  .mp-shop.docked .mp-client { grid-area: client; align-self: end; font-size: .64rem; }
  .mp-shop.docked .mp-eq { grid-area: eq; gap: 6px; }
  .mp-shop.docked .mp-sub { grid-area: sub; align-self: start; font-size: .8rem; line-height: 1.25; }
  .mp-shop.docked .mp-gal { flex-wrap: nowrap; gap: 8px; }
  .mp-shop.docked .mp-gal-h { width: auto; grid-auto-flow: row; gap: 0; text-align: right; }
  .mp-shop.docked .mp-gal-h small { display: inline; font-size: .72rem; }
  .mp-shop.docked .mp-gal-row { padding: 4px; gap: 4px; }
  .mp-shop.docked .mp-mini { width: 32px; }
  .mp-shop.docked .mp-gal-h b { letter-spacing: .06em; }
  .mp-shop.docked .mp-status { min-height: 0; }
  /* re-cut orders have long wording: stack the slip, and let the instruction line carry the "Show" */
  .mp-shop.docked .mp-slip.long .mp-slip-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "client" "eq" "sub"; row-gap: 2px; }
  .mp-shop.docked .mp-slip.long .mp-client { align-self: start; }
  .mp-shop.docked .mp-verb { display: none; }
}
@media (max-width: 360px) {
  .mp-shop.docked .mp-gal-h b { display: none; }
  .mp-shop.docked .mp-status { font-size: .84rem; gap: 4px 6px; }
  .mp-shop.docked .mp-mini { width: 30px; }
  .mp-shop.docked .mp-pad .np-display { min-height: 36px; font-size: 1.35rem; }
  .mp-shop.docked .mp-pad .np-k { min-height: 38px; }
  /* the narrowest phones: Start over keeps its name for screen readers but shows only its arrow, so the
     tools stay on fewer rows */
  .mp-reset { width: 44px; padding: 0; justify-content: center; }
  .mp-reset-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* short laptops (sticky dock): the level window sits right under the tools, above the dock, so the
   finished pane lands where it can be seen */
@media (min-width: 960px) {
  .mp-shop.docked .mp-gal { align-self: start; }
  .mp-shop.docked:not(.is-missing) .mp-gal { grid-row: 4; }
  .mp-shop.docked .mp-mini { width: 40px; }
}
@media (min-width: 1180px) { .mp-shop.docked.is-missing .mp-gal { grid-row: 4; } }
/* the kit's dock buttons keep their labels on one line; on the narrowest phones let them wrap
   and drop the icons so "Another hint" and "Fire the kiln" fit side by side */
@media (max-width: 360px) {
  .ar-board .ar-actions .ar-btn { white-space: normal; line-height: 1.15; text-align: center; }
  .ar-board .ar-actions .ar-btn svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mp-have, .mp-pane { transition: none; } .mp-hall-big::before { animation: none; } }
:root[data-motion="reduced"] .mp-hall-big::before { animation: none; }

/* home screen on the narrowest phones: a band of sky above the title, where the finished windows hang */
@media (max-width: 360px) { .ar-hero-text { padding-top: 84px; } }
/* results: the level's finished window, above the line that says it now hangs in the hall */
.mp-res-win .ar-results .ar-lede::before { content: ''; display: block; width: 70px; height: 105px; margin: 2px auto 12px; background: var(--mp-res-win, none) center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(242, 177, 52, .75)); }