/* Merge to 100 (js/arcade/merge.js). Every class starts with .mh- */

/*
 * The board is a size container: everything inside it is measured in cqw (hundredths of the
 * board's width), so tiles, numbers and pictures grow with the board from a phone to an iPad.
 * 4 squares of 21.25cqw with 3cqw gaps and edges: a square's step is 24.25cqw.
 */
.mh-wrap { --bw: max(250px, min(100%, 620px, calc(100svh - 360px))); display: grid; justify-items: center; gap: 8px; width: 100%; padding-bottom: 12px; }

/* ---------- HUD and goal ---------- */
.mh-hud { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font: 700 14px var(--font-ui); color: var(--muted); }
.mh-hud b { color: var(--ink); font-size: 19px; }
.mh-stat.mh-low b { color: var(--danger-d); display: inline-block; animation: mh-throb 1s ease-in-out infinite; }
@keyframes mh-throb { 50% { transform: scale(1.18); } }

.mh-goal { display: flex; align-items: center; gap: 10px; width: var(--bw); min-height: 36px; }
.mh-goal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px 3px 9px; border-radius: 999px; background: linear-gradient(180deg, #FFF7CF, #FFD866); box-shadow: 0 3px 0 #E8B12A; font: 900 19px/1.2 var(--font-ui); color: #0B5F55; white-space: nowrap; }
.mh-goal-chip i { font-style: normal; font-size: 16px; }
.mh-track { position: relative; flex: 1; height: 24px; border-radius: 999px; background: #F8E6F1; box-shadow: inset 0 2px 0 rgba(201, 62, 150, 0.1); overflow: hidden; }
.mh-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; border-radius: inherit; background: linear-gradient(90deg, #FFB3DA, #F15BB5); transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.mh-track b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 15px/1 var(--font-ui); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.mh-slots { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 38px)); gap: 6px; }
.mh-slot { display: grid; place-items: center; height: 36px; border-radius: 11px; border: 2.5px dashed #EDB9D6; font-style: normal; }
.mh-slot b { font: 900 13px/1 var(--font-ui); color: #E3A9C9; }
.mh-slot.on { border: 0; background: linear-gradient(160deg, #FFF7CF, #FFD45E); box-shadow: 0 3px 0 #E8B12A; animation: mh-slot-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.mh-slot.on b { color: #0B5F55; }
/* many goals (Quarters): on a phone the slots are round coins, ticked when made */
@media (max-width: 699px) {
  .mh-many { gap: 5px; }
  .mh-many .mh-slot { height: auto; aspect-ratio: 1; border-radius: 50%; }
  .mh-many .mh-slot b { display: none; }
  .mh-many .mh-slot.on::after { content: '✓'; font: 900 16px/1 var(--font-ui); color: #0B5F55; }
}
@keyframes mh-slot-in { 0% { transform: scale(0.3) rotate(-25deg); } 100% { transform: none; } }

/* ---------- the board ---------- */
.mh-board {
  --t: 21.25cqw; --g: 3cqw; --pitch: 24.25cqw;
  position: relative; width: var(--bw); aspect-ratio: 1; container-type: inline-size;
  border-radius: 24px; background: linear-gradient(170deg, #FFEAF4, #FFD8EB);
  box-shadow: inset 0 0 0 3px #F8C2DE, 0 10px 26px rgba(201, 62, 150, 0.16);
  touch-action: none; outline: none; cursor: grab;
}
.mh-board:active { cursor: grabbing; }
.mh-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); padding: var(--g); }
.mh-cell { border-radius: 4.6cqw; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0.7cqw 0 rgba(201, 62, 150, 0.08); }

.mh-tile, .mh-plus, .mh-burst {
  position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); pointer-events: none;
  transform: translate(calc(var(--g) + var(--x, 0) * var(--pitch)), calc(var(--g) + var(--y, 0) * var(--pitch)));
}
.mh-tile { z-index: 2; transition: transform 0.12s ease-out; }
.mh-tile.mh-ghost { z-index: 1; }

/* each kind of tile has its own colours: ones pink, tens sky, quarters lilac, hundreds mint */
.mh-k-one { --bg: #FFEAF3; --sh: #F5B5CF; --ink-k: #B83C76; --pic: #F06FA6; --pic-off: rgba(184, 60, 118, 0.16); }
.mh-k-ten { --bg: #E3F4FF; --sh: #A3D3F2; --ink-k: #18719F; --pic: #43AEE6; }
.mh-k-quarter { --bg: #F2EAFF; --sh: #CBB3F2; --ink-k: #6E3FBF; --pic: #A273EC; }
.mh-k-hundred { --bg: #E1F7EA; --sh: #9FDBB9; --ink-k: #1C8452; --pic: #4CC487; }
.mh-k-thousand { --bg: #E1F7EA; --sh: #9FDBB9; --ink-k: #1C8452; --pic: #4CC487; }
.mh-goal-tile { --bg: linear-gradient(160deg, #FFF8D2, #FFD45E); --sh: #DDB21C; --ink-k: #0B5F55; --pic: #E9B91F; --pic-off: rgba(11, 95, 85, 0.18); }

.mh-face {
  position: relative; width: 100%; height: 100%; border-radius: 4.6cqw; background: var(--bg);
  box-shadow: inset 0 -1.1cqw 0 var(--sh), 0 0.9cqw 1.6cqw rgba(46, 42, 71, 0.13);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; padding-bottom: 1cqw;
}
/* a soft candy shine in the corner */
.mh-face::before { content: ''; position: absolute; left: 1.7cqw; top: 1.3cqw; width: 4.6cqw; height: 2cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.75); transform: rotate(-24deg); }
.mh-goal-tile .mh-face { box-shadow: inset 0 -1.1cqw 0 var(--sh), 0 0 0 0.6cqw #fff, 0 0 3.2cqw rgba(255, 190, 30, 0.85); }
.mh-goal-tile::before { content: '👑'; position: absolute; left: 50%; top: -3.4cqw; z-index: 3; transform: translateX(-50%) rotate(-8deg); font-size: 5cqw; line-height: 1; }

.mh-num { font: 900 10.5cqw/0.95 var(--font-ui); color: var(--ink-k); letter-spacing: -0.03em; }
.mh-d2 .mh-num { font-size: 9.4cqw; }
.mh-d3 .mh-num { font-size: 7.6cqw; }
.mh-d4 .mh-num { font-size: 5.9cqw; }

/* ones: a little ten-frame, two rows of five dots */
.mh-dots { display: grid; grid-template-columns: repeat(5, 2.3cqw); gap: 0.65cqw; }
.mh-dots i { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: var(--pic-off); }
.mh-dots i.on { background: var(--pic); box-shadow: inset 0 -0.35cqw 0 rgba(0, 0, 0, 0.12); }
/* tens: a ten-rod for each ten, ten little segments tall */
.mh-rods { display: flex; gap: 0.6cqw; height: 6.2cqw; }
.mh-rods i { width: 1.45cqw; border-radius: 0.6cqw; background: repeating-linear-gradient(180deg, var(--pic) 0 0.5cqw, rgba(255, 255, 255, 0.75) 0.5cqw 0.62cqw); box-shadow: 0 0 0 0.12cqw rgba(24, 113, 159, 0.25); }
/* quarters: a coin that fills up like a pie */
.mh-pie { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: conic-gradient(var(--pic) 0 var(--p), rgba(110, 63, 191, 0.14) var(--p) 100%); box-shadow: 0 0 0 0.45cqw #fff, 0 0 0 0.8cqw rgba(110, 63, 191, 0.3); }
.mh-goal-tile .mh-pie { background: conic-gradient(var(--pic) 0 var(--p), rgba(11, 95, 85, 0.14) var(--p) 100%); box-shadow: 0 0 0 0.45cqw #fff, 0 0 0 0.8cqw rgba(11, 95, 85, 0.3); }
/* hundreds: a flat (ten by ten) for each hundred */
.mh-flats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5cqw; max-width: 15.2cqw; }
.mh-flats i { width: 2.6cqw; height: 2.6cqw; border-radius: 0.4cqw; background-color: var(--pic); background-image: linear-gradient(rgba(255, 255, 255, 0.55) 0.12cqw, transparent 0.12cqw), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0.12cqw, transparent 0.12cqw); background-size: 0.52cqw 0.52cqw; }
.mh-flats.one i { width: 6.4cqw; height: 6.4cqw; border-radius: 0.6cqw; background-size: 0.64cqw 0.64cqw; }
/* a thousand: a big cube */
.mh-cube { width: 6.4cqw; height: 6.4cqw; border-radius: 0.8cqw; background: linear-gradient(135deg, #FFE48A, #E9B91F); box-shadow: 0.9cqw -0.9cqw 0 #FFD45E, 0 0 0 0.3cqw #fff; margin-top: 0.6cqw; }

/* ---------- motion ---------- */
.mh-new .mh-face { animation: mh-in 0.24s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes mh-in { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.mh-pop { z-index: 3; }
.mh-pop .mh-face { animation: mh-pop 0.3s ease-out; }
@keyframes mh-pop { 0% { transform: scale(0.85); } 45% { transform: scale(1.22); } 100% { transform: none; } }
.mh-away { z-index: 6; }
.mh-away .mh-face { animation: mh-away 0.65s ease-in forwards; }
@keyframes mh-away { 0% { transform: none; } 25% { transform: scale(1.25) rotate(-6deg); } 100% { transform: translateY(-34cqw) scale(0.4) rotate(12deg); opacity: 0; } }

.mh-plus { z-index: 7; display: grid; place-items: center; font: 900 6.2cqw/1 var(--font-ui); color: #E0479E; -webkit-text-stroke: 1cqw #fff; paint-order: stroke fill; animation: mh-plus 0.8s ease-out forwards; }
@keyframes mh-plus { 0% { opacity: 0; translate: 0 -9cqw; scale: 0.6; } 25% { opacity: 1; translate: 0 -13.5cqw; scale: 1.15; } 100% { opacity: 0; translate: 0 -20cqw; scale: 1; } }
.mh-burst { z-index: 5; }
.mh-burst i { position: absolute; left: calc(50% - 1.1cqw); top: calc(50% - 1.1cqw); width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #FFD54A; box-shadow: 0 0 1.4cqw #FFE58A; transform: rotate(var(--a)); animation: mh-burst 0.6s ease-out forwards; }
.mh-burst i:nth-child(even) { background: #FF9FCF; box-shadow: 0 0 1.4cqw #FFC4E2; }
@keyframes mh-burst { 0% { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-15cqw) scale(1); opacity: 0; } }

.mh-board.mh-bump { animation: mh-bump 0.36s ease-out; }
@keyframes mh-bump { 30% { transform: translate(var(--bx), var(--by)); } 60% { transform: translate(calc(var(--bx) * -0.35), calc(var(--by) * -0.35)); } 100% { transform: none; } }

/* ---------- won, or stuck ---------- */
.mh-board.mh-won .mh-tile:not(.mh-goal-tile), .mh-board.mh-over .mh-tile { filter: saturate(0.45) opacity(0.6); transition: transform 0.12s ease-out, filter 0.4s; }
.mh-win { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 2cqw; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 34%, rgba(255, 255, 255, 0) 68%); animation: mh-fade 0.3s both; }
.mh-rays { position: absolute; left: 50%; top: 50%; width: 120cqw; height: 120cqw; margin: -60cqw 0 0 -60cqw; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 205, 60, 0.45) 0 9deg, rgba(255, 205, 60, 0) 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 50%); mask: radial-gradient(circle, #000 18%, transparent 50%); animation: mh-spin 9s linear infinite; }
@keyframes mh-spin { to { transform: rotate(360deg); } }
.mh-champ { display: grid; place-items: center; width: 40cqw; height: 40cqw; border-radius: 9cqw; background: linear-gradient(160deg, #FFF8D2, #FFD04F); box-shadow: inset 0 -2cqw 0 #DDB21C, 0 0 0 1.2cqw #fff, 0 0 7cqw rgba(255, 190, 30, 0.9); animation: mh-champ 0.75s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.mh-champ::before { content: '👑'; position: absolute; margin-top: -45cqw; font-size: 10cqw; line-height: 1; transform: rotate(-10deg); filter: drop-shadow(0 1cqw 0 rgba(255, 255, 255, 0.9)); }
.mh-champ b { font: 900 17cqw/1 var(--font-ui); color: #0B5F55; letter-spacing: -0.03em; }
.mh-champ.mh-d3 b { font-size: 14cqw; }
.mh-champ.mh-d4 b { font-size: 11cqw; }
@keyframes mh-champ { 0% { transform: scale(0.2) rotate(-30deg); } 70% { transform: scale(1.08) rotate(4deg); } 100% { transform: none; } }
.mh-win strong { font: 900 8cqw/1.1 var(--font-ui); color: #C93E96; -webkit-text-stroke: 1.4cqw #fff; paint-order: stroke fill; animation: mh-rise 0.5s 0.3s both; }
.mh-win small { font: 800 4.6cqw/1 var(--font-ui); color: #0B5F55; background: #FFF3C4; padding: 1.2cqw 3cqw; border-radius: 999px; animation: mh-rise 0.5s 0.55s both; }
@keyframes mh-rise { from { opacity: 0; transform: translateY(4cqw); } to { opacity: 1; transform: none; } }
@keyframes mh-fade { from { opacity: 0; } to { opacity: 1; } }
.mh-spark { position: absolute; left: calc(50% - 3.5cqw); top: calc(42% - 3.5cqw); font: normal 7cqw/1 var(--font-ui); animation: mh-spark 1.2s var(--d, 0s) ease-out both; }
@keyframes mh-spark { 0% { opacity: 0; translate: 0 0; scale: 0.2; } 25% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.3; rotate: 40deg; } }
.mh-stuck { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 2cqw; border-radius: inherit; background: rgba(255, 246, 251, 0.72); pointer-events: none; animation: mh-fade 0.35s both; }
.mh-stuck b { font: 900 9cqw/1.1 var(--font-ui); color: var(--grape-d); -webkit-text-stroke: 1.2cqw #fff; paint-order: stroke fill; animation: mh-champ 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.mh-stuck small { font: 800 4.8cqw/1 var(--font-ui); color: var(--ink); }

/* ---------- message and arrows ---------- */
.mh-msg { min-height: 1.4em; margin: 0; font: 800 18px/1.3 var(--font-ui); color: var(--grape-d); text-align: center; }
.mh-pad { display: grid; grid-template-columns: repeat(3, 84px); grid-template-rows: 62px 62px; gap: 8px; justify-content: center; margin-top: 2px; }
.mh-arrow { display: grid; place-items: center; border: 0; padding: 0; border-radius: 18px; background: var(--card); box-shadow: 0 5px 0 #F4B4D5, 0 8px 18px rgba(201, 62, 150, 0.12); cursor: pointer; touch-action: manipulation; transition: transform 0.08s, box-shadow 0.08s; }
.mh-arrow svg { width: 36px; height: 36px; fill: none; stroke: #D2479C; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.mh-arrow:active { transform: translateY(4px); box-shadow: 0 1px 0 #F4B4D5, 0 3px 8px rgba(201, 62, 150, 0.12); }
.mh-arrow.mh-press svg { animation: mh-press 0.25s ease-out; }
@keyframes mh-press { 40% { transform: scale(1.25); } }
.mh-up { grid-column: 2; grid-row: 1; }
.mh-left { grid-column: 1; grid-row: 2; }
.mh-down { grid-column: 2; grid-row: 2; }
.mh-right { grid-column: 3; grid-row: 2; }

@media (min-width: 700px) and (min-height: 900px) {
  .mh-hud { font-size: 16px; gap: 22px; }
  .mh-hud b { font-size: 22px; }
  .mh-msg { font-size: 20px; }
  .mh-goal { min-height: 48px; gap: 14px; }
  .mh-goal-chip { font-size: 24px; padding: 5px 16px 5px 12px; }
  .mh-goal-chip i { font-size: 20px; }
  .mh-track { height: 32px; }
  .mh-track b { font-size: 18px; }
  .mh-slots { grid-template-columns: repeat(var(--n, 4), minmax(0, 54px)); gap: 8px; }
  .mh-slot { height: 48px; border-radius: 14px; }
  .mh-slot b, .mh-many .mh-slot b { font-size: 16px; }
  .mh-pad { grid-template-columns: repeat(3, 96px); grid-template-rows: 68px 68px; gap: 10px; }
  .mh-arrow svg { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-tile { transition-duration: 0.01s; }
  .mh-face, .mh-board.mh-bump, .mh-plus, .mh-champ, .mh-win, .mh-win strong, .mh-win small, .mh-stuck, .mh-stuck b, .mh-slot.on, .mh-arrow.mh-press svg, .mh-stat.mh-low b { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .mh-burst, .mh-spark, .mh-rays { display: none; }
  .mh-fill { transition: none; }
}