/* Page structure and palette follow Monsternauten. */
:root {
  color-scheme: light;
  --teal: #079b99;
  --ink: #06265a;
  --line: #073175;
  --panel: #eaffff;
  --green: #20ed59;
  --gold: #ffd33d;
  --board-width: clamp(210px, min(34vw, calc((100svh - 210px)/2)), 300px);
  --font: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font);
  color: var(--ink);
}
* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100svh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 24%, #ffd33d33 0 58px, transparent 60px),
    radial-gradient(circle at 88% 18%, #14bfff38 0 80px, transparent 82px),
    linear-gradient(180deg, var(--teal) 0 66px, #fff 66px calc(100% - 74px), var(--teal) calc(100% - 74px));
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.page { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 9px 0 56px; }
.top-title { min-height: 48px; display: flex; align-items: center; justify-content: center; position: relative; text-align: center; }
.top-title h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3.35rem); font-weight: 500; line-height: 1; text-shadow: 0 2px #ffffff50; }
.overview-link { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 7px 13px; min-height: 38px; border: 2px solid #07317561; border-radius: 999px; background: #ffffffcc; color: var(--ink); text-decoration: none; font-weight: 800; box-shadow: 0 4px #0731751a; }
.game-shell { margin-top: 18px; border: 2px solid var(--line); border-radius: 34px; background: linear-gradient(#fff, #f6ffff); box-shadow: 0 18px 40px #022f591f; overflow: hidden; }
.intro-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .58fr); gap: 18px; padding: 22px; background: #c8c8c8; border-bottom: 2px solid var(--line); }
.learn-card, .score-card, .stage-card { border: 2px solid var(--line); border-radius: 26px; background: var(--panel); }
.learn-card { padding: 18px 20px 16px; display: grid; grid-template-columns: minmax(0, 1fr) 152px; gap: 20px; align-items: center; }
.learn-card h2, .score-card h2 { margin: 0 0 6px; font-size: clamp(1.25rem, 3vw, 1.75rem); }
.learn-list { margin: 0; padding: 12px 0 0 22px; font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.25; }
.intro-monster { width: 148px; height: 136px; object-fit: contain; filter: drop-shadow(0 7px #0731751f); }
.score-card { padding: 18px; display: grid; align-content: start; gap: 10px; }
.score-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 7px 12px; border: 1px solid #07317547; border-radius: 16px; background: #ffffffb8; font-size: 1.05rem; }
.score-row strong { min-width: 42px; min-height: 42px; display: grid; place-items: center; padding: 0 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--green); font-size: 1.28rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.main-grid { padding: 20px; }
.stage-card { padding: 14px; background: #f3ffff; }
.play-guide { padding: 2px 4px 14px; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.game { border: 3px solid var(--line); border-radius: 22px; overflow: hidden; background: #122c3c; scroll-margin-top: 12px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; background: #eaffff; }
.hearts { display: flex; gap: 5px; }
.heart { width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: white; color: #ef4444; font-size: 20px; box-shadow: 0 3px #0731751a; }
.heart.empty { color: #9aa8c7; background: #eef4ff; }
.tools { display: flex; gap: 9px; }
.tool { display: grid; place-items: center; width: 44px; height: 40px; padding: 7px; background: #fff; border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 3px #0731751a; }
.tool svg { width: 24px; height: 24px; }
.arena { display: grid; grid-template-columns: minmax(0, 1fr) var(--board-width) minmax(0, 1fr); justify-items: center; align-items: center; gap: 32px; padding: 18px 24px 22px; position: relative; color: #eefbfa; isolation: isolate; background: radial-gradient(ellipse at 60% 10%, #224b5c, transparent 60%), #122c3c; }
.arena::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#86b4be20 .8px, transparent .8px); background-size: 14px 14px; pointer-events: none; z-index: -1; }
/* Keep the reduced desktop size and fit the centered side column on smaller screens. */
.lever-operator { width: min(100%, 254.976px); min-width: 0; pointer-events: none; }
#lever-monster { display: block; width: 100%; height: auto; aspect-ratio: 498 / 382; }
.board-column{width:var(--board-width)}
.board-rim{position:relative;padding:0 6px 6px}
.tile-stage{position:relative}
/* Source dividers are 472 px apart, with the board spanning x=142…2030.
   Crop only the transparent vertical margin; retain the rounded shoulders. */
.tile-machine{position:relative;width:100%;aspect-ratio:1888/474;pointer-events:none}
.machine-art{position:absolute;top:0;left:calc(-100% * 142 / 1888);width:calc(100% * 2172 / 1888);height:100%;overflow:hidden;z-index:1}
.machine-front{z-index:6}
.machine-lamp{position:absolute;left:50%;top:calc(100% * 108 / 474);width:calc(100% * 128 / 1888);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:7;opacity:0;background:radial-gradient(circle at 42% 34%,#fff 0 12%,#fff9a8 32%,#ffe229 65%,#ffb900);box-shadow:0 0 7px #ffed65,0 0 18px #ffd33dc9}
.is-feeding .machine-lamp{opacity:1;animation:machine-lamp 650ms ease-in-out infinite}
/* One continuous tile layer lets a tile travel through the chute and into
   the board without replacing it or jumping at the machine's lower edge.
   Clip at the outlet lip so tiles cannot show through the transparent hood corners. */
.tile-window{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(100% * 250 / 4250) 0 0);pointer-events:none;z-index:2}
#tiles{position:absolute;top:calc(100% * 474 / 4250);left:0;right:0;bottom:0}
.board{position:relative;width:100%;aspect-ratio:1/2;overflow:hidden;border-radius:4px;background-color:#0b1e2d;background-image:linear-gradient(to right,#86b5c114 1px,transparent 1px),linear-gradient(to bottom,#86b5c114 1px,transparent 1px);background-size:25% 12.5%;touch-action:none;outline:none;box-shadow:0 0 0 5px #0b202e,0 0 0 6px #719ba258,0 8px 20px #00101b50}
.tile{--tile:#8b4dff;--edge:#6027ce;--number:#fff;position:absolute;top:0;left:0;width:25%;height:12.5%;padding:3px;will-change:transform;transition:transform 320ms cubic-bezier(.35,.02,.8,.45);z-index:2}
.tile>span{display:grid;place-items:center;width:100%;height:100%;background:var(--tile);border:1px solid #ffffff45;border-radius:6px;color:var(--number,var(--ink));font-size:clamp(23px,3.1vw,36px);font-weight:900;box-shadow:inset 0 3px #ffffff50,inset 0 -5px var(--edge),0 2px 3px #0004;position:relative;transition:filter .15s}
.tile { container-type: inline-size; }
.tile>span::after{content:"";position:absolute;inset:6px;border:1px solid #ffffff2a;border-radius:2px;pointer-events:none}
.tile.active{z-index:4;transition:none}.tile.active>span{outline:2px solid #fff;outline-offset:-2px}
.tile.ghost{z-index:1;transition:none}.tile.ghost>span{background:#8b4dff12;color:#c7a7ff80;border:1px dashed #bca0ff78;box-shadow:none;font-size:23px}.tile.ghost>span::after{display:none}
.tile[data-digits="2"] > span { font-size: min(36px, 68cqw); }
.tile[data-digits="3"] > span { font-size: min(30px, 44cqw); }
.tile.linked>span{filter:brightness(1.2);outline:3px solid #fff6c3;outline-offset:-2px;animation:friend-pulse 680ms ease-in-out}
.tile.implode>span{animation:implode 300ms ease-in forwards}
#connections,#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}
.connection{stroke:#fff7ce;stroke-width:5;stroke-linecap:round;stroke-dasharray:130;animation:connect 500ms ease-out both;filter:drop-shadow(0 0 4px #ffd66b)}
.connection-dot{fill:#fff6cd;stroke:#db9746;stroke-width:2}
.particle{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;background:var(--spark);border-radius:1px;animation:spark 450ms ease-out forwards}
.controls{display:none;grid-template-columns:1fr 1.45fr 1fr;gap:8px;margin-top:13px}.controls button{min-height:43px;border:1px solid #749aa965;border-radius:8px;background:#2a495b;color:#f4f9fb;font-size:23px;box-shadow:0 3px #071c2c;user-select:none;touch-action:none}.controls .drop{background:#ffd33d;color:var(--ink);border-color:#ffe4a1;font-size:24px;box-shadow:0 3px #dda30e}.drop span{font-size:14px;font-weight:900;vertical-align:2px}.controls button:active{transform:translateY(2px);box-shadow:none}.controls button:disabled{opacity:.45}
.has-touch-controls .controls { display: grid; }

.rail { width: min(140px, 100%); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; text-align: center; }
.rail-label { display: block; font-size: 1.05rem; font-weight: 800; color: #d5eeef; }
.target-card { min-width: 0; container-type: inline-size; padding: 13px 10px; border: 2px solid #b5e3c8; border-radius: 18px; background: #ecfbef; color: #183f41; box-shadow: 0 5px #071d2b45; }
.target-card .rail-label { color: #245d53; }
.target { display: block; font-size: 76px; line-height: 1; margin-top: 4px; font-weight: 900; }
.target[data-digits="3"] { font-size: min(76px, 48cqw); }
.next-card { padding-bottom: 17px; border-bottom: 1px solid #7fa3b140; }
.next-tile { width: 57px; height: 57px; margin: 12px auto 8px; display: grid; place-items: center; border-radius: 7px; background: var(--tile); color: var(--number, var(--ink)); box-shadow: inset 0 3px #ffffff45, inset 0 -4px var(--edge); font-size: 34px; font-weight: 900; }
.next-tile[data-digits="3"] { font-size: 26px; }
.later { display: flex; justify-content: center; gap: 7px; }
.later span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #ffffff70; border-radius: 5px; background: var(--tile); font-size: 16px; color: var(--number, var(--ink)); font-weight: 900; }
.later [data-digits="3"] { font-size: 10px; }
.stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 12px 0 8px; }
.star { font-size: 25px; line-height: 1.1; color: #496473; transition: color .2s, transform .2s; }
.star.filled { color: #ffda78; text-shadow: 0 0 10px #ffcc6a45; transform: scale(1.08); }
.progress { font-size: 16px; color: #b9d5df; }
.combo { color: var(--gold); font-size: 24px; font-weight: 900; }
.controls button { min-height: 48px; font-size: 29px; }
.tile.linked > span { animation: friend-pulse 800ms ease-in-out 2; }
.has-match .tile:not(.linked):not(.implode) { opacity: .55; }
.match-display { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); z-index: 7; width: min(430px, calc(100% + 16px)); container-type: inline-size; pointer-events: none; }
.match-equation { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 19px 18px; background: #f7fffffa; border: 3px solid var(--gold); border-radius: 22px; box-shadow: 0 8px 0 #06162d5c, 0 0 45px #ffd33d28; font-size: 43px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.equation-number { display: grid; place-items: center; width: 68px; height: 68px; flex: none; border: 2px solid #ffffff85; border-radius: 10px; background: var(--tile); color: var(--number, var(--ink)); box-shadow: inset 0 4px #ffffff50, inset 0 -5px var(--edge); }
.equation-number[data-digits="2"] { font-size: .8em; }
.equation-number[data-digits="3"] { font-size: .7em; }
.equation-result { display: inline-block; color: #08803c; font-size: 1.25em; animation: result-pop 450ms 450ms both; }
.equation-operator { animation: symbol-in 250ms 200ms both; }
.match-sparkles { position: absolute; inset: -18px 0 auto; display: flex; justify-content: space-around; color: var(--gold); font-size: 28px; animation: symbol-in 250ms 450ms both; }
.overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: #0023576b; backdrop-filter: blur(3px); }
.overlay-card { width: min(390px, 100%); max-height: 100%; overflow: auto; padding: 26px 20px; border: 3px solid var(--line); border-radius: 24px; background: #f7ffff; color: var(--ink); box-shadow: 0 10px #0731753d; text-align: center; }
.overlay-card h2 { margin: 0 0 22px; font-size: clamp(1.65rem, 4vw, 2.55rem); }
.mode-picker { padding: 0; border: 0; margin: 0 0 18px; min-width: 0; }
.mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-option { position: relative; cursor: pointer; }
.mode-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mode-label { display: block; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); font-size: .9rem; line-height: 1.2; }
.mode-label strong { display: block; font-size: 1.25rem; }
.mode-option input:checked + .mode-label { background: #8b4dff; color: #fff; box-shadow: inset 0 -4px #6027ce; }
.mode-option input:focus-visible + .mode-label { outline: 4px solid var(--gold); outline-offset: 2px; }
.overlay-symbol { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 25px; min-height: 65px; font-size: 31px; font-weight: 900; }
.overlay-symbol .equation-number { width: 53px; height: 53px; font-size: 32px; }
.overlay-symbol .equation-result { animation: none; }
.overlay-symbol > svg { width: 65px; height: 65px; }
.dialog-heart { color: #ef4444; font-size: 43px; }
.dialog-heart.empty { color: #c2cbdc; }
.completion-check { display: grid; place-items: center; width: 62px; height: 62px; border: 3px solid #16643e; border-radius: 50%; background: #b9ffd3; color: #16643e; font-size: 40px; }
.overlay-actions { display: flex; justify-content: center; gap: 14px; }
.primary-button { min-width: 128px; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; padding: 12px 18px; border: 3px solid var(--line); border-radius: 16px; background: var(--green); color: var(--ink); box-shadow: 0 5px #0731752e; font-size: 1.15rem; font-weight: 900; text-decoration: none; }
.primary-button svg { width: 46px; height: 46px; }
.has-mode-picker .primary-button { min-height: 64px; flex-direction: row; }
.has-mode-picker .primary-button svg { width: 30px; height: 30px; }
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px #0731752e; }
.home-action { background: var(--gold); }
.match-display .match-equation { gap: 2cqw; padding: 6cqw 3cqw; font-size: clamp(20px, 10cqw, 43px); }
.match-display .equation-number { width: 18cqw; height: 18cqw; }
.match-display[data-target="100"] { width: min(430px, max(200px, calc(100% + 16px))); }
.status-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-paused .tile > span, .is-paused .connection, .is-paused .match-display *, .is-paused .particle, .is-paused .machine-lamp { animation-play-state: paused; }
@keyframes machine-lamp { 0%,100% { filter:brightness(1);box-shadow:0 0 7px #ffed65,0 0 18px #ffd33dc9; } 50% { filter:brightness(1.35);box-shadow:0 0 11px #fff49b,0 0 25px #ffd33d; } }
@keyframes friend-pulse { 0%,100% { scale: 1; } 45% { scale: 1.06; } }
@keyframes implode { 0% { scale: 1; filter: brightness(1.6); } 30% { scale: 1.08; } 100% { scale: 0; opacity: 0; rotate: 12deg; } }
@keyframes connect { from { stroke-dashoffset: 130; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes spark { to { transform: translate(var(--dx),var(--dy)) rotate(100deg); opacity: 0; } }
@keyframes result-pop { from { opacity: 0; transform: scale(.5); } 65% { opacity: 1; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes symbol-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .intro-strip { grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; padding: 16px; }
  .learn-card { grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; padding: 16px; }
  .intro-monster { width: 90px; height: 105px; }
  .arena { padding-inline: 16px; gap: 20px; }
  .rail { width: min(120px, 100%); }
  .target { font-size: clamp(47px, 8vw, 76px); }
  .star { font-size: clamp(13px, 2.6vw, 25px); }
}
@media (max-width: 600px) {
  :root { --board-width: clamp(128px, calc((100vw - 100px) * .56), 230px); }
  body { background: linear-gradient(180deg, var(--teal) 0 103px, #fff 103px calc(100% - 68px), var(--teal) calc(100% - 68px)); }
  .page { width: calc(100% - 16px); }
  .top-title { min-height: 85px; align-items: flex-end; padding-bottom: 2px; }
  .top-title h1 { font-size: 2rem; }
  .overview-link { top: 0; transform: none; min-height: 32px; padding: 4px 10px; font-size: .85rem; }
  .game-shell { border-radius: 22px; margin-top: 16px; }
  .intro-strip { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .learn-card { border-radius: 18px; padding: 13px; grid-template-columns: minmax(0, 1fr) 73px; }
  .learn-card h2 { font-size: 1.2rem; }
  .learn-list { font-size: 1rem; padding-top: 7px; }
  .intro-monster { width: 73px; height: 87px; }
  .score-card { padding: 9px; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 18px; }
  .score-card h2 { display: none; }
  .score-row { padding: 5px 8px; gap: 5px; border-radius: 12px; font-size: .9rem; }
  .score-row strong { min-width: 31px; min-height: 31px; font-size: 1rem; padding: 0 7px; }
  .main-grid { padding: 6px; }
  .stage-card { padding: 6px; border-radius: 17px; }
  .play-guide { padding: 5px 4px 10px; font-size: 1rem; }
  .game { border-width: 2px; border-radius: 13px; scroll-margin-top: 5px; }
  .toolbar { padding: 7px 9px; }
  .heart { width: 27px; height: 27px; font-size: 18px; }
  .tool { width: 41px; height: 38px; padding: 6px; border-radius: 10px; }
  .arena { padding: 12px 6px 15px; gap: 8px; }
  .rail { width: min(60px, 100%); gap: 17px; }
  .rail-label { font-size: 13px; }
  .target-card { padding: 9px 3px; border-radius: 12px; }
  .target { font-size: clamp(32px, 10vw, 38px); }
  .next-tile { width: 41px; height: 41px; font-size: 27px; margin: 9px auto 7px; }
  .next-tile[data-digits="3"] { font-size: 19px; }
  .later span { width: 23px; height: 23px; font-size: 13px; }
  .next-card { padding-bottom: 13px; }
  .stars { gap: 1px; margin: 9px 0 7px; }
  .star { font-size: clamp(10px, 3.1vw, 12px); }
  .progress { font-size: 13px; }
  .controls { gap: 6px; margin-top: 10px; }
  .controls button { min-height: 44px; }
  .tile { padding: 2px; }
  .tile > span { display: flex; align-items: center; justify-content: center; line-height: 1; font-size: min(26px, 68cqw); border-radius: 5px; }
  .tile > span::after { inset: 5px; }
  .match-equation { gap: 7px; padding: 15px 9px; border-radius: 16px; font-size: 27px; }
  .equation-number { width: 46px; height: 46px; border-radius: 7px; }
  .match-sparkles { font-size: 23px; }
  .overlay { padding: 10px; }
  .overlay-card { padding: 22px 12px; border-radius: 20px; }
  .overlay-card h2 { font-size: 1.65rem; margin-bottom: 19px; }
  .overlay-card.has-mode-picker { padding-block: 12px; }
  .has-mode-picker h2 { margin-bottom: 14px; }
  .mode-label { padding: 5px; font-size: .85rem; }
  .mode-label strong { font-size: 1.125rem; }
  .overlay-symbol { font-size: 26px; gap: 7px; }
  .overlay-symbol .equation-number { width: 43px; height: 43px; font-size: 28px; }
  .primary-button { min-width: 103px; padding: 10px; font-size: 1rem; min-height: 94px; }
  .overlay-actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile.linked > span, .tile.implode > span, .connection, .match-display * { animation: none; }
  .is-feeding .machine-lamp { animation: none; }
  .tile.implode > span { opacity: .25; }
  .particle { display: none; }
}