/* Chore and puzzle minigames, shared by the game and the manor walk mode. Parchment sheet, ink and walnut.
   minigames.js links this file itself, and everything here is scoped to .mg-root (the sheet body) or an mg- class.
   The canvas games (clocks, scrubbing, wires, bells, fire and water...) draw themselves; this file styles the ones built from page elements. */
.mg-root, .mg-root *, .mg-root *::before, .mg-root *::after { box-sizing: border-box; }
.mg-root { --mg-ink: var(--parch-ink, #2b1d17); --mg-gold: var(--candle, #f5b942); --mg-plum: #3b2a1e; --mg-teal: #4f7f6f; }
.mg-root button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mg-root button:disabled { cursor: default; }
.mg-hint { margin: 0; text-align: center; font-weight: 500; line-height: 1.35; text-wrap: balance; min-height: 1.35em; }
.mg-keys { margin: 0; text-align: center; font-size: 12px; font-weight: 500; color: rgba(43,29,23,0.55); text-wrap: balance; }
html[data-touch-controls=true] .mg-keys { display: none; }
.mg-canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; border-radius: 2px; box-shadow: 0 0 0 1px rgba(43,29,23,0.55), 0 0 0 4px rgba(244,230,199,0.9), 0 0 0 5px rgba(43,29,23,0.35); }
.mg-canvas.grabbing { cursor: grabbing; }
.mg-bar { width: 100%; height: 10px; border-radius: 1px; background: rgba(43,29,23,0.16); overflow: hidden; box-shadow: inset 0 1px 3px rgba(43,29,23,0.35); }
.mg-bar i { display: block; height: 100%; width: 0; background: #4f7f6f; border-radius: 1px; transition: width .15s; }
.mg-btn { border: 0; padding: 11px 22px; border-radius: 2px; background: #3b2a1e; color: var(--parch, #f4e6c7); font: 700 15px/1.1 var(--caps, system-ui); letter-spacing: .03em; box-shadow: inset 0 0 0 1px #6b4f33, 0 3px 0 #1d110a; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .08s, filter .15s, box-shadow .08s; }
.mg-btn:hover { background: #4a3626; }
.mg-btn:active, .mg-btn.on { transform: translateY(2px); box-shadow: inset 0 0 0 1px #6b4f33, 0 1px 0 #1d110a; }
.mg-btn.ghost { background: transparent; color: var(--mg-ink); box-shadow: inset 0 0 0 1px rgba(43,29,23,0.45); }
.mg-btn.ghost:hover { background: rgba(43,29,23,0.07); filter: none; }
.mg-btn.ghost:active, .mg-btn.ghost.on { background: rgba(43,29,23,0.14); box-shadow: inset 0 0 0 2px rgba(43,29,23,0.4); transform: translateY(1px); }
.mg-btn:disabled { opacity: .45; transform: none; filter: none; }
/* the "Done" stamp, pressed over the finished sheet */
.mg-stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; background: radial-gradient(circle at 50% 50%, rgba(244,230,199,0.6), rgba(244,230,199,0) 68%); animation: mg-fade .2s both; }
.mg-stamp span { font: 400 56px/1 var(--display, Georgia, serif); letter-spacing: .08em; text-transform: uppercase; color: #7a2a20; border: 5px double currentColor; border-radius: 3px; padding: .1em .28em .06em; background: rgba(250,248,236,0.72); box-shadow: 0 0 0 3px rgba(250,248,236,0.72), 0 6px 18px rgba(43,29,23,0.25); animation: mg-stamp .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes mg-fade { from { opacity: 0; } }
@keyframes mg-stamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes mg-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.mg-wrong { animation: mg-shake .3s; }
/* a keyboard focus ring for the arrow-key and Enter way of playing */
.mg-root .kf { outline: 3px solid var(--mg-gold); outline-offset: 3px; z-index: 3; }

/* books: a faint dashed outline marks how tall each place on the shelf is */
.mg-books { width: 100%; display: grid; gap: 14px; }
.mg-shelf, .mg-pile { min-height: 150px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 0 8px; border-bottom: 12px solid #6b4330; border-radius: 4px; box-shadow: 0 6px 0 -2px rgba(43,29,23,0.3); }
.mg-shelf { background: linear-gradient(180deg, rgba(43,29,23,0.12), rgba(43,29,23,0.02) 40%, rgba(43,29,23,0.08)); box-shadow: inset 0 0 0 2px rgba(43,29,23,0.2), 0 6px 0 -2px rgba(43,29,23,0.3); }
.mg-pile { border-bottom-color: #8a5a3b; }
.mg-slot { position: relative; flex: 0 1 34px; min-width: 0; height: 140px; display: flex; align-items: flex-end; justify-content: center; }
.mg-shelf .mg-slot::before { content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: var(--gh, 0); border: 1.5px dashed rgba(43,29,23,0.3); border-bottom: 0; border-radius: 3px 3px 0 0; pointer-events: none; }
.mg-book { position: relative; width: min(var(--w, 32px), 100%); border: 0; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 24%, rgba(0,0,0,0) 66%, rgba(0,0,0,0.3)), var(--c); box-shadow: 0 2px 3px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.22); padding: 0; transition: transform .12s, filter .15s; }
.mg-book .band { position: absolute; left: 0; right: 0; top: 11%; height: 5px; background: linear-gradient(180deg, #f6e19a, #b88a2c); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.mg-book .band.lo { top: auto; bottom: 10%; height: 4px; }
.mg-book .plate { position: absolute; left: 20%; right: 20%; top: 32%; height: 24%; border-radius: 2px; background: linear-gradient(180deg, #f6e19a, #c99a3a); box-shadow: inset 0 0 0 1px rgba(80,50,10,0.5); }
.mg-book.t1 .plate { top: 28%; height: 34%; left: 26%; right: 26%; }
.mg-book.t2 .plate { top: 40%; height: 14%; }
.mg-book.t3 .plate { display: none; }
.mg-book.t3 .band { top: 20%; } .mg-book.t3 .band.lo { bottom: 20%; }
.mg-book:not(:disabled):hover { filter: brightness(1.15); transform: translateY(-4px); }
.mg-book:not(:disabled):active { transform: translateY(0); }
.mg-book.shelved { box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.22); }

/* billiard balls on a baize table with pockets */
.mg-felt { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 5px), radial-gradient(circle at 50% 40%, #3fa56c, #236d47 70%, #1a5236); border: 11px solid #6b4330; box-shadow: inset 0 0 0 3px #4a2c1c, inset 0 6px 14px rgba(0,0,0,0.45), 0 4px 10px rgba(43,29,23,0.3); overflow: hidden; }
.mg-felt .pocket { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: radial-gradient(circle, #000 55%, #1a1008); box-shadow: 0 0 0 3px #3a2414; }
.mg-rack { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 48px; width: 100%; padding: 6px; border-radius: 10px; background: rgba(43,29,23,0.1); box-shadow: inset 0 1px 3px rgba(43,29,23,0.3); }
.mg-ball { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), transparent 35%), radial-gradient(circle at 60% 70%, rgba(0,0,0,0.3), transparent 60%), var(--c); display: grid; place-items: center; box-shadow: 0 4px 5px rgba(0,0,0,0.4); transition: filter .15s, scale .12s; }
.mg-ball:hover { filter: brightness(1.15); scale: 1.08; }
.mg-ball.stripe { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), transparent 35%), linear-gradient(180deg, #fff 0 26%, var(--c) 26% 74%, #fff 74%); }
.mg-rack .mg-ball { position: relative; margin: 0; box-shadow: 0 2px 3px rgba(0,0,0,0.35); }
.mg-rack .mg-ball:hover { scale: 1; filter: none; }
.mg-ball span { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #1b1622; font: 700 11px/18px var(--ui, system-ui); pointer-events: none; box-shadow: inset 0 -1px 2px rgba(0,0,0,0.25); }
.mg-ball.racked { animation: mg-pop .3s; }

/* pairs: cards turn over in 3D */
.mg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); gap: 10px; justify-content: center; width: 100%; perspective: 700px; }
.mg-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: 10px; background: none; transition: transform .15s; }
.mg-card:not(.up):hover { transform: translateY(-3px); }
.mg-card .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3,1.25,.5,1); }
.mg-card.up .flip { transform: rotateY(180deg); }
.mg-card .back, .mg-card .face { position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mg-card .back { background: repeating-linear-gradient(45deg, #5a2a22 0 6px, #6b342a 6px 12px); box-shadow: inset 0 0 0 3px #e9dcbf, inset 0 0 0 4px #5a2a22, inset 0 0 0 5px #b08f58, 0 2px 0 rgba(43,29,23,0.3); }
.mg-card .back::after { content: ''; width: 22px; height: 22px; background: #e3c17e; transform: rotate(45deg) scale(.7); border-radius: 4px; box-shadow: 0 0 0 3px #5a2a22, 0 0 0 5px #b08f58; opacity: .85; }
.mg-card:not(.up):hover .back { filter: brightness(1.2); }
.mg-card .face { transform: rotateY(180deg); background: linear-gradient(160deg, #fffdf6, #f3ead2); color: #2b1d17; font: 700 34px/1 Georgia, serif; box-shadow: inset 0 0 0 2px #b9a784, 0 3px 0 rgba(43,29,23,0.3); }
.mg-card.red .face { color: #c23a41; }
.mg-card.ok .face { background: linear-gradient(160deg, #f1fae6, #dcefc9); box-shadow: inset 0 0 0 2px #5fae6e, 0 3px 0 rgba(43,29,23,0.25); }
.mg-card.ok { animation: mg-pop .35s; }
@keyframes mg-pop { 40% { transform: scale(1.12); } }

/* piano, harp and organ share one row of eight notes */
.mg-piano { position: relative; display: flex; width: 100%; height: 150px; }
.mg-key { flex: 1; min-width: 0; border: 1px solid #b9a784; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #fffdf6, #f3ead2); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 8px; font-weight: 600; color: #8a7a60; transition: background .1s, transform .1s; }
.mg-key kbd { font: 700 10px/1 var(--ui, system-ui); padding: 3px 5px; border-radius: 5px; background: rgba(43,29,23,0.08); color: #8a7a60; }
.mg-key:hover { background: #fff3d8; }
.mg-key:active, .mg-key.on { background: var(--mg-gold); color: var(--mg-ink); transform: translateY(2px); }
.mg-black { position: absolute; top: 0; width: 28px; height: 88px; background: linear-gradient(180deg, #2b2536, #0f0c14); border-radius: 0 0 5px 5px; pointer-events: none; box-shadow: 0 3px 3px rgba(0,0,0,0.4); }
.mg-piano.harp, .mg-piano.organ { height: 176px; align-items: flex-end; gap: 6px; padding: 0 4px; }
.mg-piano.harp .mg-key, .mg-piano.organ .mg-key { position: relative; height: calc(100% - var(--k) * 8%); }
.mg-piano.harp .mg-key { background: none; border: 0; border-radius: 0; box-shadow: none; padding-bottom: 2px; }
.mg-piano.harp .mg-key::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 34px; width: 3px; margin-left: -1.5px; background: linear-gradient(90deg, #8a6420, #f6e3a0 50%, #a8782c); border-radius: 2px; box-shadow: 0 0 0 0 rgba(255,214,100,0); transition: width .08s; }
.mg-piano.harp .mg-key:hover { background: none; }
.mg-piano.harp .mg-key:hover::before { box-shadow: 0 0 8px rgba(255,214,100,0.8); }
.mg-piano.harp .mg-key.on { background: none; transform: none; }
.mg-piano.harp .mg-key.on::before { width: 5px; margin-left: -2.5px; background: #fff; box-shadow: 0 0 12px 2px rgba(255,214,100,0.95); animation: mg-pluck .12s linear 3; }
@keyframes mg-pluck { 50% { translate: 2px 0; } }
.mg-piano.harp::before { content: ''; position: absolute; left: 6.25%; top: 2px; width: 90%; height: 12px; background: linear-gradient(180deg, #c58d5a, #6a3f20); border-radius: 6px; transform-origin: 0 50%; transform: rotate(14deg); box-shadow: 0 2px 3px rgba(0,0,0,0.4); pointer-events: none; }
.mg-piano.harp::after { content: ''; position: absolute; left: 1%; top: 0; bottom: 26px; width: 9px; background: linear-gradient(90deg, #6a3f20, #c58d5a 50%, #5a3318); border-radius: 5px; pointer-events: none; }
.mg-piano.harp .mg-key span, .mg-piano.harp .mg-key kbd { position: relative; }
.mg-piano.organ .mg-key { border: 0; border-radius: 7px 7px 0 0 / 16px 16px 0 0; background: linear-gradient(90deg, #7d8391, #f1f3f8 32%, #b8bdc8 58%, #5e6471); color: #3a3f4c; box-shadow: inset 0 2px 0 rgba(255,255,255,0.7), 0 3px 4px rgba(0,0,0,0.3); padding-bottom: 6px; }
.mg-piano.organ .mg-key::before { content: ''; position: absolute; left: 20%; right: 20%; bottom: 34%; height: 11%; background: #1b1622; border-radius: 3px 3px 1px 1px; box-shadow: inset 0 2px 3px #000; }
.mg-piano.organ .mg-key kbd { background: rgba(255,255,255,0.45); color: #3a3f4c; }
.mg-piano.organ .mg-key:hover { background: linear-gradient(90deg, #8b92a2, #fff 32%, #c6cbd6 58%, #6b7280); }
.mg-piano.organ .mg-key.on { background: linear-gradient(90deg, #c98a12, #ffe9a0 32%, #f5b942 58%, #9a6a12); box-shadow: inset 0 2px 0 rgba(255,255,255,0.7), 0 0 14px rgba(245,185,66,0.8); transform: none; }

/* candles on a brass mantel; a snuffed candle trails smoke */
.mg-candles { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 196px; width: 100%; padding-bottom: 20px; border-bottom: 12px solid #c99a3e; border-radius: 0 0 40% 40% / 0 0 30px 30px; background: radial-gradient(ellipse at 50% 100%, rgba(245,185,66,0.14), transparent 70%); box-shadow: 0 8px 0 -3px rgba(43,29,23,0.25); }
.mg-candle { position: relative; flex: 0 0 26px; width: 26px; height: var(--h); border: 0; padding: 0; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #fffaf0, #f1e3c0 55%, #d9c79a); box-shadow: inset -3px 0 0 rgba(120,90,40,0.15); transition: filter .15s; }
.mg-candle s { position: absolute; left: 3px; top: 0; width: 6px; height: 30%; border-radius: 0 0 4px 4px; background: #fffdf4; box-shadow: 1px 0 0 rgba(120,90,40,0.18); text-decoration: none; }
.mg-candle .stick { position: absolute; left: 50%; bottom: -9px; width: 46px; height: 11px; margin-left: -23px; border-radius: 50% / 45%; background: linear-gradient(180deg, #fbe8a6, #c99a3a 55%, #7a5418); box-shadow: 0 3px 3px rgba(0,0,0,0.35); text-decoration: none; }
.mg-candle:not(.lit):hover { filter: brightness(1.08) drop-shadow(0 0 6px rgba(245,185,66,0.7)); }
.mg-candle.lit { filter: drop-shadow(0 0 12px rgba(245,185,66,0.55)); }
.mg-candle .wick { position: absolute; left: 50%; top: -9px; width: 2px; height: 9px; margin-left: -1px; background: #2b1d17; }
.mg-candle .flame { position: absolute; left: 50%; top: -36px; width: 16px; height: 28px; margin-left: -8px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 72%, #fffbe0 8%, #ffd466 34%, #ff9a30 62%, rgba(255,110,40,0) 74%); opacity: 0; transform: scale(.4); transform-origin: 50% 90%; transition: opacity .2s, transform .2s; pointer-events: none; }
.mg-candle.lit .flame { opacity: 1; transform: scale(1); animation: mg-flick .5s ease-in-out infinite alternate; }
.mg-candles.gust .mg-candle.lit .flame { animation: mg-gust .25s ease-in-out infinite alternate; }
.mg-candle.smoke::after { content: ''; position: absolute; left: 50%; top: -30px; width: 8px; height: 38px; margin-left: -4px; border-radius: 50%; background: radial-gradient(rgba(190,180,170,0.75), rgba(190,180,170,0) 70%); animation: mg-smoke 1.1s ease-out both; pointer-events: none; }
@keyframes mg-flick { to { transform: scale(1.08, .92) rotate(3deg); } }
@keyframes mg-gust { to { transform: scale(.8, 1.1) rotate(-22deg); } }
@keyframes mg-smoke { from { opacity: 1; transform: translateY(0) scaleX(.6); } to { opacity: 0; transform: translateY(-34px) scaleX(2.2); } }

/* safe */
.mg-safe { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; width: 100%; }
.mg-note { padding: 12px 14px; background: linear-gradient(160deg, #fffdf6, #f3ead2); border-radius: 4px; box-shadow: 2px 3px 0 rgba(43,29,23,0.2); transform: rotate(-3deg); display: grid; gap: 4px; }
.mg-note small { font-size: 11px; color: #8a7a60; font-style: italic; }
.mg-note strong { font: 400 28px/1 var(--display, Georgia, serif); letter-spacing: .04em; }
.mg-lamps { display: flex; gap: 6px; justify-content: center; }
.mg-lamps i { width: 12px; height: 12px; border-radius: 50%; background: rgba(43,29,23,0.2); box-shadow: inset 0 1px 2px rgba(43,29,23,0.4); transition: background .2s, box-shadow .2s; }
.mg-lamps i.on { background: var(--mg-teal); box-shadow: 0 0 8px var(--mg-teal); }
.mg-dialwrap { width: min(260px, 100%); display: grid; gap: 8px; }
.mg-dialbtns { display: flex; justify-content: center; gap: 8px; }

/* fuse box */
.mg-switches { display: flex; gap: 12px; padding: 18px; border-radius: 12px; background: linear-gradient(180deg, #7b808c, #5b606c); box-shadow: inset 0 0 0 4px #43474f, inset 0 3px 0 4px rgba(255,255,255,0.15), 0 4px 10px rgba(43,29,23,0.35); max-width: 100%; }
.mg-switch { position: relative; width: 46px; height: 124px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #34323b, #1f1e25); padding: 0; transition: filter .15s; box-shadow: inset 0 0 0 2px #17161b; }
.mg-switch:hover { filter: brightness(1.25); }
.mg-switch .lamp { position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #e0484f; box-shadow: 0 0 8px #e0484f, inset 0 -2px 2px rgba(0,0,0,0.3); transition: background .15s, box-shadow .15s; }
.mg-switch.up .lamp { background: #3fe0b8; box-shadow: 0 0 10px #3fe0b8, inset 0 -2px 2px rgba(0,0,0,0.2); }
.mg-switch .slot { position: absolute; left: 50%; top: 30px; bottom: 22px; width: 24px; margin-left: -12px; border-radius: 12px; background: #0b0b0e; box-shadow: inset 0 2px 5px #000; }
.mg-switch .lever { position: absolute; left: 50%; width: 18px; height: 38px; margin-left: -9px; border-radius: 6px; background: linear-gradient(90deg, #eef0f5, #b8bdc9 60%, #9097a6); bottom: 25px; transition: bottom .15s; box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.6); }
.mg-switch .lever::after { content: ''; position: absolute; left: 3px; right: 3px; top: 14px; height: 10px; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 2px, transparent 2px 4px); border-radius: 2px; }
.mg-switch.up .lever { bottom: 56px; }
.mg-switch .tag { position: absolute; left: 0; right: 0; bottom: 4px; font: 700 10px/1 var(--ui, system-ui); color: #a0a6b3; }

/* drawers */
.mg-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 118px)); gap: 10px; justify-content: center; width: 100%; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #8a5a3b, #6b4330); box-shadow: inset 0 0 0 3px #4a2c1c, 0 4px 10px rgba(43,29,23,0.3); }
.mg-drawer { position: relative; height: 68px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #1f130b; box-shadow: inset 0 3px 6px #000; }
.mg-drawer .front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; background: linear-gradient(180deg, #cf9660, #a97042); box-shadow: inset 0 0 0 3px #7a4c2a, inset 0 3px 0 4px rgba(255,255,255,0.18); transition: transform .25s cubic-bezier(.3,1.3,.5,1); z-index: 2; }
.mg-drawer .plate { width: 36px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #f6e19a, #b88a2c); box-shadow: inset 0 0 0 1px rgba(80,50,10,0.5); }
.mg-drawer .knob { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c2, #e7b54c 55%, #8a6a2a); box-shadow: 0 2px 2px rgba(0,0,0,0.4); }
.mg-drawer:not(:disabled):hover .front { filter: brightness(1.12); }
.mg-drawer .in { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px 6px; font-size: 12px; font-weight: 500; text-align: center; line-height: 1.15; color: #f4e6c7; }
.mg-drawer.open .front { transform: translateY(105%); }
.mg-drawer:disabled { opacity: 1; }
.mg-drawer.found { box-shadow: 0 0 0 3px var(--mg-gold), 0 0 18px rgba(245,185,66,0.8); }
.mg-drawer .env { display: block; width: 46px; height: 30px; border-radius: 3px; background: #fffaf0; position: relative; box-shadow: 0 2px 0 rgba(0,0,0,0.3); animation: mg-pop .4s; }
.mg-drawer .env::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 17px; background: #efe3c4; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mg-drawer .env::after { content: ''; position: absolute; left: 50%; top: 11px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #c23a41; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); }

/* potions: the recipe on a card, the ingredients in jars */
.mg-recipe { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; padding: 8px 10px; border-radius: 10px; background: linear-gradient(160deg, #fffdf6, #f3ead2); box-shadow: inset 0 0 0 2px rgba(120,90,50,0.35), 1px 2px 0 rgba(43,29,23,0.2); }
.mg-recipe small { flex-basis: 100%; text-align: center; font: italic 700 11px/1 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #8a7a60; }
.mg-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 99px; background: rgba(43,29,23,0.07); font-weight: 600; font-size: 13px; transition: background .2s, color .2s; }
.mg-step i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.3); }
.mg-step b { font: 800 11px/1 Georgia, serif; color: #8a7a60; }
.mg-step.done { background: #e1f1d3; color: #2f6a40; text-decoration: line-through; text-decoration-color: rgba(47,106,64,0.5); }
.mg-step.done::after { content: '\2713'; font-weight: 800; text-decoration: none; display: inline-block; }
.mg-jars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.mg-jar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 5px 6px; border: 0; border-radius: 10px 10px 12px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.22)); box-shadow: inset 0 0 0 2px rgba(120,90,50,0.35), 0 3px 0 rgba(43,29,23,0.25); font-weight: 600; font-size: 12px; line-height: 1.1; transition: transform .1s, filter .15s, opacity .2s; }
.mg-jar::before { content: ''; position: absolute; top: 3px; left: 50%; width: 22px; height: 8px; margin-left: -11px; border-radius: 3px; background: linear-gradient(180deg, #c58d5a, #7a4a2a); }
.mg-jar .liq { width: 100%; height: 24px; border-radius: 6px 6px 10px 10px; background: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2), inset 3px 0 0 rgba(255,255,255,0.3); }
.mg-jar:hover { filter: brightness(1.08); transform: translateY(-2px); }
.mg-jar.used { opacity: .5; }

@media (max-width: 380px) {
  .mg-candles { gap: 8px; }
  .mg-switches { gap: 8px; padding: 14px 10px; }
  .mg-stamp span { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-root * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Keyboard users can identify the canvas that receives task shortcuts. */
.mg-canvas:focus-visible { outline: 3px solid #356982; outline-offset: 3px; }