/* Mathcraft shell: the 🗼 button, the tower map, the stairs sticker, and keeping the shared corner
   buttons off the message bar. Colours come from each floor's own :root (they all share one
   palette); the fallbacks only matter if a floor ever drops a variable. */

/* The message bar runs edge to edge along the bottom. 🔊 and 📮 (sound.js, postcard.js) sit in
   the bottom-left corner and the portal's 💬 floats over the bottom-right, so keep the words out
   of both. The safe-area padding used to come from the "Look A" label under the message. */
body .msgbar { padding: 6px 64px calc(8px + env(safe-area-inset-bottom)); min-height: calc(64px + env(safe-area-inset-bottom)); }
/* ⛶ (fullscreen.js) sits at 12..60px from the top and treats anything within 6px of it as "in the
   way", then dodges down the page. A 56px HUD let the room's top row graze it, and on a phone (and
   Floor 2 on an upright iPad) the ⛶ wandered off its corner onto the room. 68px keeps the room
   clear of that zone. */
body .hud { min-height: 68px; }

.mc-tower {
	width: 50px; height: 44px; padding: 0;
	border: 3px solid var(--ink, #130b10); border-radius: 12px;
	background: var(--sky, #5bc8ff); color: var(--ink, #130b10);
	box-shadow: 3px 3px 0 var(--ink, #130b10);
	font-size: 24px; line-height: 1; display: grid; place-items: center;
	transform: rotate(2deg); cursor: pointer;
}
.mc-tower:active { transform: translate(2px, 2px) rotate(2deg); box-shadow: 1px 1px 0 var(--ink, #130b10); }
/* On a phone the 🗼 would push the HUD onto a second row and take ~47px off a room that is already
   tight there. Squeeze the HUD instead: smaller dots and gaps, 44px buttons (still the tap floor). */
@media (max-width: 560px) {
	body .hud { column-gap: 6px; } /* 8px left Floor 3's six dots grazing the ⛶ at 390px */
	body .dots { gap: 4px; }
	body .dot { width: 11px; height: 11px; }
	body .satbtn, body .mc-tower { width: 44px; }
}

.mc-map {
	position: fixed; inset: 0; z-index: 300; display: none;
	align-items: center; justify-content: center; padding: 12px;
	background: rgba(5, 3, 8, 0.72); touch-action: manipulation;
}
.mc-map.show { display: flex; }
.mc-card {
	position: relative; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
	background: var(--paper, #f6e4b8); color: var(--ink, #130b10);
	border: 3px solid var(--ink, #130b10); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink, #130b10);
	padding: 14px 14px 10px; transform: rotate(-0.6deg);
	animation: mcpop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
	font-family: Nunito, system-ui, sans-serif; font-weight: 600;
}
@keyframes mcpop { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
.mc-card h2 { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 24px; margin: 0 44px 2px 0; line-height: 1.2; }
.mc-sub { margin: 0 0 10px; font-size: 15px; }
.mc-note { margin: 8px 0 0; font-size: 15px; text-align: center; min-height: 1.4em; }
.mc-x {
	position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; padding: 0;
	border: 3px solid var(--ink, #130b10); border-radius: 12px; background: var(--coral, #ff6b4a); color: var(--ink, #130b10);
	box-shadow: 2px 2px 0 var(--ink, #130b10); font-family: Fredoka, sans-serif; font-weight: 600; font-size: 22px; line-height: 1;
	display: grid; place-items: center; cursor: pointer;
}

/* The tower, top floor first. Each floor is a stone ledge she can tap. */
.mc-floors { display: flex; flex-direction: column; gap: 8px; }
.mc-fl {
	display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px 12px; text-align: left;
	border: 3px solid var(--ink, #130b10); border-radius: 14px;
	background: var(--stone-top, #3f7079); color: var(--butter, #ffe9a8);
	box-shadow: 3px 3px 0 var(--ink, #130b10); font: inherit; cursor: pointer;
}
.mc-fl:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, #130b10); }
.mc-fl.done { background: var(--stone, #2b5058); }
.mc-fl.here { background: var(--gold, #f2c94c); color: var(--ink, #130b10); }
.mc-fl.locked { background: #4a4452; color: rgba(255, 233, 168, 0.7); box-shadow: none; cursor: default; }
.mc-em { font-size: 28px; line-height: 1; flex: none; width: 34px; text-align: center; }
.mc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-tx b { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2; }
.mc-tx small { font-size: 14px; line-height: 1.25; opacity: 0.85; }
.mc-st { flex: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.mc-fl.mc-no { animation: mcno 0.4s; }
@keyframes mcno { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
@media (max-width: 420px) { .mc-stw { display: none; } .mc-st { font-size: 20px; } }

/* The stairs sticker on the win card: the biggest thing there, so the way on is obvious. */
.sticker.mc-up { background: var(--gold, #f2c94c); font-size: 22px; min-height: 64px; padding: 10px 22px; transform: rotate(1.5deg); }
.sticker.mc-up:active { transform: translate(3px, 3px) rotate(1.5deg); }
.mc-topline { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 18px; margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .mc-card, .mc-fl.mc-no { animation: none; } }