/* ==========================================================================
   Maze Mice - styles
   Look: a night-time burrow. Deep blue night, a warm soil board with sand-coloured tunnels carved into it,
   one bright cheese-yellow accent and chunky round buttons. No busy decoration.
   Change the colours in :root to re-skin the whole game.
   ========================================================================== */
@font-face { font-family: "MM Display"; font-weight: 600; font-display: swap; src: url(../assets/fonts/fredoka-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "MM Display"; font-weight: 700; font-display: swap; src: url(../assets/fonts/fredoka-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "MM Text"; font-weight: 600; font-display: swap; src: url(../assets/fonts/nunito-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "MM Text"; font-weight: 800; font-display: swap; src: url(../assets/fonts/nunito-latin-800-normal.woff2) format("woff2"); }

:root {
  --bg: #14233a;
  --bg-glow: #24416a;
  --card: #1f3555;
  --card-2: #284368;
  --line: #36588a;
  --cream: #fff3d6;
  --soft: #a9bbd6;
  --soil: #5c3d33;
  --tunnel: #f4e1b6;
  --tunnel-edge: #c28f5a;
  --trail: #8e7bff;
  --trail-d: #5b4bd6;
  --yellow: #ffc93c; --yellow-d: #d99a12;
  --teal: #2cc3ae;   --teal-d: #168f7e;
  --coral: #ff6b6b;  --coral-d: #c93f4a;
  --lilac: #9b8cff;  --lilac-d: #6a5bd1;
  --orange: #ff9f43; --orange-d: #c8691a;
  --pink: #ff6fa8;   --pink-d: #bd3f78;
  --font-d: "MM Display", "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-t: "MM Text", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.c-yellow { --c: var(--yellow); --cd: var(--yellow-d); --ci: #5a3b00; }
.c-teal   { --c: var(--teal);   --cd: var(--teal-d); }
.c-coral  { --c: var(--coral);  --cd: var(--coral-d); }
.c-lilac  { --c: var(--lilac);  --cd: var(--lilac-d); }
.c-orange { --c: var(--orange); --cd: var(--orange-d); }
.c-pink   { --c: var(--pink);   --cd: var(--pink-d); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; }
body { font-family: var(--font-t); font-weight: 600; color: var(--cream); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }

#app {
  position: fixed; inset: 0; overflow: hidden;
  font-size: clamp(14px, calc(9px + 1.5vmin), 30px);
  background: radial-gradient(ellipse at 50% 38%, var(--bg-glow) 0%, var(--bg) 68%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen { position: absolute; inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: none; }
.screen.active { display: flex; animation: screenin .35s ease-out; }
@keyframes screenin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- buttons */
.rb {
  display: grid; place-items: center; flex: none; width: 2.7em; height: 2.7em; padding: 0; border: 0; border-radius: 50%;
  background: var(--c); box-shadow: 0 .2em 0 var(--cd); transition: transform .08s, box-shadow .08s;
}
.rb img { width: 1.35em; height: 1.35em; }
.rb:active:not(:disabled) { transform: translateY(.16em); box-shadow: 0 .04em 0 var(--cd); }
.rb:disabled { opacity: .35; }

.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 2.6em; padding: .5em 1.15em .45em;
  border: 0; border-radius: 99px; background: var(--c); color: #fff; font: 700 1em/1 var(--font-d); letter-spacing: .01em;
  box-shadow: 0 .2em 0 var(--cd); transition: transform .08s, box-shadow .08s;
}
.pbtn.c-yellow { color: #4a3000; }
.pbtn img { width: 1.3em; height: 1.3em; flex: none; }
.pbtn.c-yellow img { filter: brightness(0.25) sepia(1) hue-rotate(-10deg) saturate(3); }
.pbtn:active { transform: translateY(.16em); box-shadow: 0 .04em 0 var(--cd); }
.pbtn.small { min-height: 2em; padding: .35em .85em; font-size: .9em; }

.hud { display: flex; align-items: center; gap: .6em; padding: .7em .8em .3em; flex: none; }
.plaque { flex: 1; min-width: 0; text-align: center; line-height: 1.1; }
.plaque b { display: block; font: 700 1.3em/1.1 var(--font-d); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plaque span { display: block; margin-top: .15em; font-size: .78em; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: .4em; flex: none; padding: .35em .8em .35em .55em; border-radius: 99px; background: var(--card); border: 2px solid var(--line); font: 700 1em/1 var(--font-d); }
.pill img { width: 1.5em; height: 1.5em; }
.pill .star { width: 1.3em; height: 1.3em; }

.star { width: 1.2em; height: 1.2em; }
.star.on { fill: var(--yellow); stroke: var(--yellow-d); stroke-width: 1.2; stroke-linejoin: round; }
.star.off { fill: #2c4469; stroke: #3b5a88; stroke-width: 1.2; stroke-linejoin: round; }

/* ---------------------------------------------------------------- loading */
.loading { flex-direction: column; align-items: center; justify-content: center; gap: 1.6em; }
.load-title { font: 700 3.2em/1 var(--font-d); color: var(--cream); text-shadow: 0 .06em 0 #0b1626; }
.load-title span:last-child { color: var(--yellow); text-shadow: 0 .06em 0 #a56d08; }
.load-track { position: relative; width: min(68vw, 20em); height: 1em; border-radius: 99px; background: #0f1b2e; border: .18em solid #2d4468; margin-top: 1.2em; }
.load-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--tunnel); transition: width .25s; }
.load-mouse { position: absolute; left: 0; bottom: .05em; width: 3em; transform: translateX(-50%); transition: left .25s; }
.load-cheese { position: absolute; right: -1.6em; bottom: -.15em; width: 2.6em; }

/* ---------------------------------------------------------------- main menu */
.menu.active { display: grid; }
.menu { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "brand" "hero" "panel"; justify-items: center; padding: .8em 1em .9em; gap: .6em; }
.m-brand { grid-area: brand; text-align: center; display: flex; flex-direction: column; align-items: center; }
.m-mascot { width: 3.6em; height: 3.6em; margin-bottom: -.5em; position: relative; z-index: 1; animation: bobble 3s ease-in-out infinite; }
@keyframes bobble { 50% { transform: translateY(-.25em) rotate(-3deg); } }
.wordmark { margin: 0; display: flex; gap: .22em; font: 700 3.1em/1 var(--font-d); letter-spacing: .01em; }
.wordmark .w1 { color: var(--cream); text-shadow: 0 .07em 0 #0a1424; }
.wordmark .w2 { color: var(--yellow); text-shadow: 0 .07em 0 #a56d08; }
.tagline { margin: .55em 0 0; font-size: .95em; color: var(--soft); font-weight: 800; }

.m-hero { grid-area: hero; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hero-wrap { height: 100%; max-height: 22em; aspect-ratio: 1; max-width: 100%; position: relative; }
#heroSvg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .5em 0 rgba(0, 0, 0, .28)); transition: opacity .5s; }
#heroSvg.fade { opacity: 0; }
.h-line { fill: none; stroke: var(--trail); stroke-width: .24; stroke-linecap: round; stroke-linejoin: round; }
.h-mouse { transition: transform .15s linear; }
.h-flip { transition: none; }
.h-cheese { transition: opacity .3s, transform .3s; transform-box: fill-box; transform-origin: center; }
.h-cheese.eaten { opacity: 0; transform: scale(.2); }

.m-panel { grid-area: panel; width: min(100%, 25em); display: grid; gap: .8em; }
.cont {
  display: flex; align-items: center; gap: .8em; width: 100%; padding: .55em .7em .55em .55em; border: 0; border-radius: 1.2em; text-align: left;
  background: var(--yellow); color: #4a3000; box-shadow: 0 .3em 0 var(--yellow-d); transition: transform .08s, box-shadow .08s;
}
.cont:active { transform: translateY(.22em); box-shadow: 0 .08em 0 var(--yellow-d); }
.cont-pic { flex: none; width: 3.6em; height: 3.6em; border-radius: .8em; overflow: hidden; background: var(--soil); }
.cont-pic svg { display: block; width: 100%; height: 100%; }
.cont-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.cont-txt small { font-size: .82em; font-weight: 800; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-txt b { font: 700 1.7em/1 var(--font-d); }
.cont-go { flex: none; display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: #4a3000; }
.cont-go img { width: 1.3em; height: 1.3em; margin-left: .15em; }
.m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mt { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .55em .2em .5em; border: 2px solid var(--line); border-radius: 1em; background: var(--card); font: 700 .85em/1.1 var(--font-d); transition: transform .08s; }
.mt:active { transform: translateY(.12em); }
.mt i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--c); box-shadow: 0 .14em 0 var(--cd); }
.mt i img { width: 1.2em; height: 1.2em; }
.m-prog { display: grid; gap: .35em; text-align: center; font-size: .82em; color: var(--soft); font-weight: 800; }
.m-prog .bar { height: .6em; border-radius: 99px; background: #0f1b2e; border: 2px solid #2d4468; overflow: hidden; }
.m-prog .bar i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: 99px; transition: width .4s; }
.m-prog .star { width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* ---------------------------------------------------------------- level select */
.levels { flex-direction: column; }
.gallery { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; padding: .4em .8em; }
.lv-grid { width: min(100%, 52em); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), minmax(0, 1fr)); gap: .5em; }
.lvl { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: .3em .3em .25em; border-radius: .9em; background: var(--card); border: 2px solid var(--line); transition: transform .08s; }
.lvl:active { transform: scale(.96); }
.lvl .pic { flex: 1; min-height: 0; width: 100%; display: flex; }
.lvl .pic svg { width: 100%; height: 100%; display: block; }
.lvl .num { position: absolute; left: -.3em; top: -.3em; min-width: 1.7em; height: 1.7em; padding: 0 .35em; display: grid; place-items: center; border-radius: 99px; background: var(--yellow); color: #4a3000; font: 700 .8em/1 var(--font-d); box-shadow: 0 .12em 0 var(--yellow-d); }
.lvl .st { display: flex; gap: .05em; height: 1em; margin-top: .15em; }
.lvl .st .star { width: .95em; height: .95em; }
.lvl.done { border-color: var(--teal); }
.lvl.current { border-color: var(--yellow); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 .22em rgba(255, 201, 60, .35); } }
.lvl.locked { opacity: .55; }
.lvl.locked .pic { opacity: .35; filter: grayscale(1); }
.lvl.locked .num { background: #4b5f80; color: var(--cream); box-shadow: 0 .12em 0 #2f4163; }
.lockchip { display: grid; place-items: center; width: 1.5em; height: 1em; margin-top: .15em; }
.lockchip img { width: .95em; height: .95em; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .3em .8em .8em; flex: none; }
.pg-mid { flex: 1; text-align: center; line-height: 1.15; }
.pg-mid b { display: block; font: 700 1.2em/1.1 var(--font-d); }
.pg-mid small { display: block; font-size: .78em; color: var(--soft); margin-top: .1em; }
.dots { display: flex; justify-content: center; gap: .5em; margin-top: .45em; }
.dot { width: .7em; height: .7em; border-radius: 50%; border: 0; padding: 0; background: #34507a; }
.dot.on { background: var(--yellow); transform: scale(1.25); }

/* ---------------------------------------------------------------- game */
.game.active { display: grid; }
.game { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hud" "stage" "dock"; }
.game .hud { grid-area: hud; }
.stage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; padding: .3em .6em; min-height: 0; min-width: 0; }
#board { display: block; flex: none; max-width: none; touch-action: none; filter: drop-shadow(0 .45em 0 rgba(0, 0, 0, .3)); cursor: pointer; }
.tip {
  position: absolute; left: 50%; top: .5em; z-index: 5; max-width: 90%; padding: .55em .9em; border-radius: 1em; background: var(--cream); color: #3a2b10;
  font-size: .9em; font-weight: 800; text-align: center; line-height: 1.25; box-shadow: 0 .2em 0 rgba(0, 0, 0, .3);
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.tip.show { opacity: 1; transform: translate(-50%, 0); }

.dock { grid-area: dock; display: flex; align-items: center; justify-content: center; gap: .7em; padding: .3em .8em .8em; }
.act { display: flex; flex-direction: column; align-items: center; gap: .3em; border: 0; background: none; padding: 0; font: 700 .78em/1 var(--font-d); color: var(--soft); }
.act i { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--c); box-shadow: 0 .22em 0 var(--cd); transition: transform .08s, box-shadow .08s; }
.act i img { width: 1.7em; height: 1.7em; }
.act:active:not(:disabled) i { transform: translateY(.18em); box-shadow: 0 .04em 0 var(--cd); }
.act:disabled { opacity: .4; }
.act.pulse i { animation: pulse .5s 3; }
@keyframes pulse { 50% { transform: scale(1.18); } }
.info { min-width: 6.2em; padding: .4em .8em; border-radius: 1em; background: var(--card); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; }
.steps { display: flex; align-items: baseline; gap: .3em; }
.steps img { width: 1.1em; height: 1.1em; align-self: center; opacity: .8; }
.steps b { font: 700 1.5em/1 var(--font-d); }
.steps small { font-size: .75em; color: var(--soft); font-weight: 800; }
.inv { display: flex; gap: .2em; }
.inv:empty { display: none; }
.inv img { width: 1.5em; height: 1.5em; }

/* the board itself */
.soil { fill: var(--soil); }
.tedge rect { fill: var(--tunnel-edge); }
.tun rect { fill: var(--tunnel); }
.m-start { fill: var(--trail); }
.m-cheese { fill: var(--yellow); stroke: var(--yellow-d); stroke-width: .08; }
.start-ring { fill: rgba(142, 123, 255, .22); }
.route { fill: none; stroke: rgba(255, 107, 107, .6); stroke-width: .1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .2 .16; }
.pl-edge { fill: none; stroke: var(--trail-d); stroke-width: .3; stroke-linecap: round; stroke-linejoin: round; }
.pl-in { fill: none; stroke: var(--trail); stroke-width: .18; stroke-linecap: round; stroke-linejoin: round; }
.mouse, .cat { transition: transform .17s ease-out; }
.running .mouse, .running .cat { transition: transform var(--run, .17s) linear; }
.nt { transition: none !important; }
.flip .in, .cat .in, .it .in { transition: transform .25s, opacity .25s; }
.ring { fill: none; stroke: var(--trail-d); stroke-width: .07; stroke-dasharray: .16 .12; animation: ringspin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.ring.flash { animation: ringflash .5s 2; }
@keyframes ringflash { 50% { stroke-width: .16; stroke: var(--coral); } }
.running .ring, .drawing .ring { display: none; }
.flip.bump .in { animation: shake .3s; }
@keyframes shake { 20% { transform: translateX(-.07px); } 40% { transform: translateX(.07px); } 60% { transform: translateX(-.05px); } 80% { transform: translateX(.04px); } }
.mouse.warp .flip .in { transform: scale(0); opacity: 0; }
.mouse.cheer .flip .in { animation: cheer .45s ease-in-out infinite alternate; }
@keyframes cheer { to { transform: translateY(-.14px); } }
.ghost .in { opacity: .28; }
.ghost.pulse .in { animation: ghostp .5s 3; }
@keyframes ghostp { 50% { opacity: .85; transform: scale(1.12); } }
.noghost .ghost { display: none; }
.it.picked .in { transform: scale(.62); opacity: .55; }
.it.eaten .in { transform: scale(0); opacity: 0; }
.it.door.open .in { transform: scale(.7); opacity: .16; }
.it.key .in { animation: bob 1.6s ease-in-out infinite; }
.it.key.picked .in, .it.key.eaten .in { animation: none; }
.it.key.pulse .in { animation: ghostp .5s 3; }
@keyframes bob { 50% { transform: translateY(-.05px) rotate(4deg); } }
.it.portal .in { animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.it.cheese .in { animation: sway 2.2s ease-in-out infinite; }
.it.cheese.picked .in, .it.cheese.eaten .in { animation: none; }
@keyframes sway { 50% { transform: rotate(-5deg) scale(1.04); } }
.hd { fill: #fff; stroke: var(--trail-d); stroke-width: .07; animation: hd .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes hd { to { transform: scale(1.35); } }

/* landscape: the buttons move to the right-hand side */
@media (min-aspect-ratio: 5/4) {
  .game { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hud hud" "stage dock"; }
  .dock { flex-direction: column; padding: .3em .9em .8em .2em; gap: .6em; }
  .info { min-width: 5.4em; order: -1; }
}

/* ---------------------------------------------------------------- modal, toast, confetti */
.modal-back { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(6, 12, 24, .62); animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.modal {
  width: min(94vw, 27em); max-height: 94%; overflow: auto; padding: 1.2em 1.3em 1.1em; border-radius: 1.4em; background: var(--card); border: 3px solid var(--line);
  box-shadow: 0 .4em 0 rgba(0, 0, 0, .35); text-align: center; animation: modalin .3s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes modalin { from { transform: scale(.85) translateY(10px); opacity: 0; } }
.modal h2 { margin: 0 0 .55em; font: 700 1.6em/1.05 var(--font-d); }
.modal-body { text-align: left; }
.modal-btns { display: flex; gap: .6em; justify-content: center; margin-top: 1em; flex-wrap: wrap; }
.about { margin: .9em 0 0; font-size: .75em; color: var(--soft); }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.how li { display: flex; align-items: center; gap: .75em; font-size: .95em; line-height: 1.25; }
.chip { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--c, var(--teal)); box-shadow: 0 .14em 0 var(--cd, var(--teal-d)); }
.chip img { width: 1.45em; height: 1.45em; }
.row-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em 0; border-bottom: 2px dashed #34517e; font-weight: 800; }
.row-toggle:last-child { border-bottom: 0; }
.row-toggle span { display: inline-flex; align-items: center; gap: .6em; }
.row-toggle span img { width: 1.6em; height: 1.6em; padding: .28em; background: #3c5f94; border-radius: 50%; }
.switch { position: relative; width: 3.2em; height: 1.8em; border: 0; border-radius: 99px; background: #3a4f72; transition: background .15s; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; left: .2em; top: .2em; width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; box-shadow: 0 .1em 0 rgba(0, 0, 0, .25); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--teal); }
.switch[aria-checked="true"]::after { transform: translateX(1.4em); }

.win-mascot { width: 5.2em; height: 5.2em; animation: bobble 1.6s ease-in-out infinite; }
.win h2 { margin: .1em 0 .3em; font-size: 1.9em; color: var(--yellow); }
.win-stars { display: flex; justify-content: center; gap: .25em; }
.win-stars .star { width: 3em; height: 3em; animation: starpop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.win-stars .s1 { animation-delay: .2s; } .win-stars .s2 { animation-delay: .4s; } .win-stars .s3 { animation-delay: .6s; }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); } }
.win-note { margin: .6em 0 0; color: var(--soft); font-weight: 800; font-size: .9em; }

#toast {
  position: fixed; left: 50%; bottom: 17%; z-index: 60; transform: translate(-50%, 12px); max-width: 88vw; padding: .6em 1.1em; border-radius: 99px;
  background: var(--cream); color: #3a2b10; font-weight: 800; font-size: .95em; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 .2em 0 rgba(0, 0, 0, .3);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; top: -20px; z-index: 70; pointer-events: none; animation: confall linear forwards; }
@keyframes confall { to { transform: translateY(110vh) rotate(var(--rot, 540deg)); } }

/* short landscape screens (phones turned sideways) */
@media (max-height: 460px) {
  .hud { padding-top: .4em; padding-bottom: .1em; }
  .rb { width: 2.4em; height: 2.4em; }
  .act i { width: 2.9em; height: 2.9em; }
  .dock { padding-bottom: .5em; }
}
@media (min-aspect-ratio: 5/4) {
  .menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); grid-template-areas: ". hero" "brand hero" "panel hero" ". hero"; align-items: center; column-gap: 1.2em; row-gap: 1.3em; }
  .m-brand { margin-bottom: .2em; }
  .m-brand { justify-self: center; }
  .m-panel { justify-self: center; }
  .m-hero { height: 100%; }
}
@media (max-height: 640px) { .m-mascot { width: 2.8em; height: 2.8em; } .wordmark { font-size: 2.6em; } }
@media (max-height: 520px) and (max-aspect-ratio: 5/4) { .tagline, .m-mascot { display: none; } }
@media (max-height: 420px) { .tagline { display: none; } .m-mascot { width: 2.4em; height: 2.4em; } .wordmark { font-size: 2.2em; } .m-prog { display: none; } .mt { flex-direction: row; justify-content: center; padding: .35em; } .mt i { width: 1.8em; height: 1.8em; } .menu { padding-top: .4em; padding-bottom: .5em; gap: .4em; } .m-panel { gap: .5em; } .cont-pic { width: 2.6em; height: 2.6em; } .cont-txt b { font-size: 1.3em; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; animation-iteration-count: 1 !important; } }

/* ---------------------------------------------------------------- menu balance (v1.0.1) */
.m-hero { container-type: size; }
.hero-wrap { height: auto; max-height: none; width: min(100cqw, 100cqh, 28em); }
@media (min-aspect-ratio: 5/4) {
  .menu {
    grid-template-columns: minmax(0, min(26em, 44vw)) auto; justify-content: center;
    column-gap: clamp(1.5em, 6vw, 5em); padding-left: 2vw; padding-right: 2vw;
  }
  .m-hero { height: auto; width: auto; container-type: normal; }
  .hero-wrap { width: min(40vw, 72vh, 32em); }
  .m-panel { width: 100%; }
}

/* ---------------------------------------------------------------- game screen on wide screens: board and buttons sit together, centred (v1.0.1) */
@media (min-aspect-ratio: 5/4) {
  .game { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); grid-template-areas: "hud hud hud hud" ". stage dock ."; }
  .stage { height: 100%; aspect-ratio: 1 / 1; width: auto; max-width: calc(100vw - 12em); }
  .dock { padding-left: .6em; padding-right: .6em; }
}