body.mario-game { background:#edf6fc; color:#314f69; }
body.mario-game .site-header,body.mario-game > footer { display:none; }
body.mario-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; margin:0 auto; padding:0; }
.mg-shell { min-height:100dvh; padding:8px 0 18px; }
.mg-shell * { box-sizing:border-box; }
.mg-shell h1,.mg-shell h2,.mg-shell h3,.mg-shell h4,.mg-shell p { margin-top:0; letter-spacing:0; }
.mg-shell h2 { font-size:25px; line-height:1.25; margin-bottom:12px; }.mg-shell p { font-size:18px; line-height:1.4; }
.mg-shell button,.mg-shell .button,.mg-shell summary { min-height:48px; border-radius:6px; font-size:17px; letter-spacing:0; }
.mg-shell button:focus-visible,.mg-shell a:focus-visible,.mg-shell input:focus-visible,.mg-shell summary:focus-visible { outline:4px solid #b285d1; outline-offset:3px; }
.mg-shell .mg-primary { background:#e96d76; color:#fff; border:2px solid #b74f68; padding:11px 18px; font-weight:700; box-shadow:0 3px 0 #ad4d62; }
.mg-shell .mg-primary:hover { background:#d95b6b; }.mg-shell .secondary { background:#fffefa; border:1px solid #a9bdce; color:#3d5f7a; padding:10px 15px; }
.mg-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:66px; padding-bottom:10px; }
.mg-toolbar h1 { font-family:inherit; font-size:19px; line-height:1.2; margin:0 0 5px; }.mg-toolbar span { font-size:14px; }.mg-toolbar .text-button { color:#79384b; padding:8px; font-size:14px; white-space:nowrap; }.mg-motion { display:flex; align-items:center; gap:6px; font-size:14px; min-height:48px; }.mg-motion input { width:22px; height:22px; accent-color:#5f9db4; }
.mg-cover { text-align:center; padding:14px 0 0; }.mg-cover h2 { font-size:30px; }.mg-cover p { max-width:730px; margin:12px auto; }.mg-cover-image { display:block; width:100%; height:auto; }.mg-cover .mg-cover-image { max-height:450px; object-fit:contain; margin:20px auto; }.card-art .mg-cover-image { height:100%; width:100%; object-fit:cover; }
.mg-play { padding:12px 14px 10px; border:2px solid #adcbdb; border-top:6px solid #ed9caa; border-radius:8px; background:#fffefa; }
.mg-task-heading { display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:center; margin-bottom:12px; min-height:64px; }.mg-eyebrow { font-size:14px; color:#6b8196; }.mg-equation { font-size:36px; font-weight:800; color:#385a77; line-height:1.15; margin-top:4px; }.mg-task-heading h2 { font-size:21px; margin:0; }
.mg-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:14px; align-items:start; }
.mg-backpack { min-width:0; border:3px solid #bd879f; border-top:9px solid #e69ba7; background:#fff5f4; padding:9px 12px 0; border-radius:8px; }
.mg-backpack h3 { font-size:18px; text-align:center; color:#805c7b; margin:0 0 8px; }.mg-pack-sections { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.mg-pack-sections > section { min-width:0; padding:8px; background:#fffefa; border:1px solid #dbc9d4; border-radius:5px; }.mg-backpack h4 { text-align:center; font-size:18px; margin:0 0 8px; color:#4f6d8b; }
.mg-chest-grid { display:grid; grid-template-columns:repeat(3,72px); grid-auto-rows:58px; justify-content:center; gap:5px; min-height:184px; align-content:start; }
.mg-chest { width:72px; height:58px; border:0; padding:0!important; position:relative; background:transparent; border-radius:4px; cursor:default; }.mg-chest:disabled { opacity:1; }.mg-chest-art { display:block; width:100%; height:100%; }.mg-chest > span { position:absolute; left:14px; right:7px; top:24px; text-align:center; padding:1px 0; font-size:10px; line-height:1; color:#735137; background:#fff4d6; border:1px solid #c4a675; border-radius:3px; }.mg-chest b { font-size:17px; }.mg-chest.mg-current-target { cursor:pointer; background:#fff1c7; outline:3px solid #e7b35c; outline-offset:1px; }
.mg-ten-frame { display:grid; grid-template-columns:repeat(5,40px); grid-template-rows:repeat(2,40px); gap:4px; width:max-content; border:2px solid #8bafc9; background:#eff7ff; border-radius:5px; padding:4px; margin:0 auto; }
.mg-unit-cell { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:#fffefa; border:1px dashed #c4cdd4; border-radius:5px; }.mg-coin { display:block; width:36px; height:36px; flex:none; }.mg-unit-cell.mg-filled { border-style:solid; border-color:#e4c779; background:#fff9dc; }
.mg-overflow { display:grid; grid-template-columns:repeat(5,40px); grid-auto-rows:40px; gap:4px; width:max-content; min-height:84px; margin:6px auto 0; }.mg-zero { text-align:center; font-size:15px!important; margin:4px 0 0; color:#587896; }
.mg-transfer { min-height:53px; display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 2px; text-align:center; }.mg-transfer > span { font-size:14px; color:#6b657d; }.mg-transfer > div { display:flex; gap:2px; flex-wrap:wrap; }.mg-transfer .mg-coin { height:24px; width:24px; }
.mg-scene { position:relative; height:284px; border-radius:6px; border:1px solid #b2d5df; background:#d5f1fd; }.mg-landscape { display:block; position:absolute; width:100%; height:100%; inset:0; }.mg-scene-pipe { position:absolute; width:85px; height:105px; bottom:24px; }.pipe-left { left:7px; }.pipe-right { right:7px; }.mg-pipe-art { width:100%; height:100%; }.mg-moving-hero { position:absolute; width:100px; height:122px; bottom:64px; left:0; z-index:2; }.mg-hero { height:100%; width:100%; }.mg-at-next { left:calc(100% - 100px); }.mg-scene-platform { position:absolute; bottom:3px; background:#fff9dc; color:#5b6b75; padding:2px 5px; border-radius:3px; font-size:12px; }.platform-left { left:4px; }.platform-right { right:4px; }.mg-open { filter:drop-shadow(0 0 6px #f9d77a); }.mg-arrival-label { position:absolute; top:12px; left:6px; right:6px; text-align:center; padding:4px; font-size:16px; background:#fffff0; border-radius:5px; color:#4b7a63; }
.mg-feedback { min-height:86px; margin:10px 0; padding:10px 12px; background:#edf4fb; border:1px solid #cadae8; border-radius:5px; font-size:18px; line-height:1.4; display:flex; flex-direction:column; justify-content:center; color:#466580; }.mg-feedback strong { font-size:15px; margin-bottom:4px; color:#6e6b91; }.mg-error { color:#8a5665; background:#fff0f0; border-color:#e7c2ca; }
.mg-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; min-height:56px; }.mg-help-actions { display:flex; flex-wrap:wrap; gap:8px; }.mg-code-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.mg-code-form label { font-size:17px; font-weight:700; }.mg-code-form input { width:95px; height:54px; font-size:30px; font-weight:700; text-align:center; border:2px solid #98b7cb; border-radius:5px; color:#385a77; background:white; padding:4px 10px; }.mg-shell .mg-exchange-button { background:#ffe08b; border-color:#c59b50; box-shadow:0 3px 0 #b38743; color:#735634; }.mg-exchange-button::before { content:'?'; display:inline-grid; place-content:center; width:30px; height:30px; margin-right:9px; background:#ffeebc; border:2px solid #cba966; border-radius:4px; font-size:25px; vertical-align:middle; }.mg-wait { min-height:56px; display:flex; align-items:center; color:#7b8299; font-size:18px; }
.mg-stars { display:grid; grid-template-columns:repeat(10,1fr); width:min(560px,100%); gap:5px; margin:12px auto 0; }.mg-stars span { text-align:center; display:grid; place-content:center; height:28px; border:1px dashed #c0ccd9; color:#8c9cac; border-radius:4px; font-size:13px; background:#fafcff; }.mg-stars .mg-earned { border:1px solid #d8b55b; background:#fff0ad; color:#b18b31; font-size:22px; }
.mg-help-tens .mg-tens,.mg-help-units .mg-units { outline:3px solid #bc9ee0; outline-offset:2px; background:#f6f0ff; }
.mg-changing.motion-receive .mg-incoming .mg-coin { animation:mg-receive .65s ease-in both; }.mg-changing.motion-exchange .mg-ten-frame .mg-coin { animation:mg-exchange .65s ease-in both; }.mg-changing.motion-break .mg-chest:first-child .mg-chest-lid { transform-origin:10px 31px; animation:mg-break .65s ease-in both; }.mg-changing.motion-pay .mg-to-pay .mg-coin { animation:mg-pay .65s ease-in both; }.mg-current-target { animation:mg-target 1.6s ease-in-out infinite alternate; }
.scene-travel .mg-moving-hero { animation:mg-pipe-travel 1.6s ease-in-out both; }.scene-success .pipe-left { animation:mg-target .5s ease-in-out infinite alternate; }
.mg-shell .mg-exchange-button:hover { background:#ffdc7f; color:#735634; }
.pipe-left { left:60px; }.mg-moving-hero { width:85px; height:103px; bottom:25px; }.mg-at-next { left:calc(100% - 92px); bottom:118px; }
.mg-finish { text-align:center; }.mg-finish h2 { margin:10px 0; font-size:29px; }.mg-final-scene { width:min(900px,100%); height:280px; position:relative; margin:15px auto; border-radius:6px; background:#d5f1fd; }.mg-final-castle { position:absolute; width:330px; height:250px; left:calc(50% - 110px); bottom:15px; }.mg-castle { width:100%; height:100%; }.mg-final-hero { position:absolute; width:120px; height:150px; left:20%; bottom:20px; }.mg-final-flag { position:absolute; width:5px; height:170px; left:17%; bottom:23px; background:#9e889e; }.mg-final-flag span { position:absolute; top:5px; left:5px; width:70px; height:42px; background:#f5c968; color:#fff7d5; font-size:30px; transform-origin:left center; animation:mg-flag 1.5s ease-in-out infinite alternate,mg-raise 1s ease-out; }.mg-final-hero .mg-right-arm { animation:mg-wave 1.2s ease-in-out infinite alternate; }
.mg-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0; }.mg-stats > div { display:flex; align-items:center; gap:12px; text-align:left; padding:12px; background:#fffefa; border:1px solid #bfd2df; border-radius:6px; }.mg-stats strong { font-size:32px; color:#5e8ca6; }.mg-stats span { font-size:16px; line-height:1.3; }.mg-finish-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:15px 0; }.mg-finish details { text-align:left; max-width:800px; margin:15px auto; }.mg-finish summary { cursor:pointer; padding:12px; }
.mg-help { width:min(580px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; padding:24px; border:2px solid #a6c6d7; border-radius:8px; background:#fffefa; color:#314f69; }.mg-help::backdrop { background:#2b496b88; }.mg-paused *, .mg-paused *::before,.mg-paused *::after { animation:none!important; transition:none!important; }
@keyframes mg-target { to { box-shadow:0 0 0 4px #f6d67c77; } }@keyframes mg-receive { to { transform:translateY(-60px); opacity:0; } }@keyframes mg-exchange { to { transform:translateX(-100px) scale(.1); opacity:0; } }@keyframes mg-break { to { transform:rotate(-28deg); } }@keyframes mg-pay { to { transform:translate(55px,80px) scale(.5); opacity:0; } }@keyframes mg-pipe-travel { 0% { left:0; bottom:25px; opacity:1; }25% { left:60px; bottom:135px; opacity:1; }45% { left:60px; bottom:70px; opacity:0; }55% { left:calc(100% - 92px); bottom:70px; opacity:0; }80% { left:calc(100% - 92px); bottom:135px; opacity:1; }100% { left:calc(100% - 92px); bottom:118px; opacity:1; } }@keyframes mg-wave { from { transform:rotate(-125deg); }to { transform:rotate(-145deg); } }@keyframes mg-flag { to { transform:skewY(8deg) scaleX(.92); } }@keyframes mg-raise { from { top:100px; } }
@media (min-width:901px) and (max-height:760px) { .mg-shell { padding-top:4px; }.mg-toolbar { min-height:60px; }.mg-play { padding:8px 12px; }.mg-task-heading { min-height:60px; margin-bottom:8px; }.mg-feedback { min-height:80px; margin:8px 0; }.mg-final-scene { height:250px; } }
@media (max-width:1050px) and (min-width:901px) { .mg-layout { grid-template-columns:minmax(0,1fr) 210px; }.mg-chest-grid { grid-template-columns:repeat(3,62px); }.mg-chest { width:62px; }.mg-backpack { padding-inline:8px; }.mg-pack-sections { gap:8px; }.mg-pack-sections > section { padding-inline:4px; } }
@media (max-width:900px) { .mg-toolbar { grid-template-columns:auto 1fr auto 48px; }.mg-motion { grid-column:2 / -1; justify-self:end; }.mg-layout { grid-template-columns:1fr; }.mg-scene { height:100px; }.mg-scene-pipe { height:70px; width:65px; bottom:13px; }.mg-moving-hero { width:68px; height:82px; bottom:22px; }.mg-scene-platform { bottom:0; font-size:11px; }.pipe-left { left:15%; }.pipe-right { right:15%; }.mg-moving-hero { left:15%; }.mg-at-next { left:calc(85% - 68px); }.mg-backpack { padding-inline:14px; }.mg-chest-grid { min-height:184px; }.mg-task-heading { grid-template-columns:250px 1fr; }.mg-arrival-label { top:5px; left:35%; right:35%; font-size:13px; }.mg-final-castle { width:270px; left:calc(50% - 80px); }.mg-final-hero { left:13%; }.mg-final-flag { left:10%; } }
@media (max-width:600px) { body.mario-game #app { width:calc(100% - 14px); }.mg-toolbar { grid-template-columns:1fr auto 48px; gap:7px; }.mg-toolbar > div { grid-column:1 / -1; grid-row:1; }.mg-toolbar h1 { font-size:19px; }.mg-motion { grid-column:1 / -1; justify-self:start; min-height:30px; }.mg-play { padding:10px 7px; }.mg-task-heading { grid-template-columns:1fr; gap:9px; margin-bottom:10px; }.mg-equation { font-size:32px; }.mg-task-heading h2 { font-size:19px; min-height:48px; }.mg-layout { gap:8px; }.mg-pack-sections { grid-template-columns:1fr; gap:9px; }.mg-backpack { padding:7px 8px 0; border-width:2px; border-top-width:7px; }.mg-backpack h3 { font-size:18px; }.mg-pack-sections > section { padding:7px 4px; }.mg-backpack h4 { font-size:17px; margin-bottom:6px; }.mg-chest-grid { grid-template-columns:repeat(5,48px); grid-auto-rows:55px; gap:3px; min-height:113px; }.mg-chest { width:48px; height:55px; }.mg-chest > span { left:3px; right:2px; top:23px; font-size:8px; line-height:1.15; }.mg-chest b { font-size:14px; }.mg-ten-frame { grid-template-columns:repeat(5,40px); grid-template-rows:repeat(2,40px); }.mg-overflow { min-height:0; }.mg-overflow:not(:empty) { min-height:84px; }.mg-transfer { min-height:64px; flex-direction:column; gap:4px; }.mg-transfer > div { justify-content:center; }.mg-transfer .mg-coin { height:22px; width:22px; }.mg-transfer > span { font-size:13px; }.mg-feedback { min-height:122px; font-size:17px; padding:9px; }.mg-controls { align-items:stretch; flex-direction:column; }.mg-code-form { display:grid; grid-template-columns:75px 1fr; gap:8px; }.mg-code-form label { grid-column:1 / -1; }.mg-code-form input { width:75px; height:54px; }.mg-code-form .mg-primary { font-size:16px; padding:9px; }.mg-help-actions { width:100%; }.mg-help-actions button { flex:1; font-size:16px; }.mg-shell .mg-primary { font-size:17px; }.mg-scene { height:90px; }.mg-scene-platform { font-size:10px; }.mg-arrival-label { left:30%; right:30%; font-size:12px; }.mg-stars { gap:3px; }.mg-stars span { font-size:11px; }.mg-stars .mg-earned { font-size:18px; }.mg-cover h2,.mg-finish h2 { font-size:27px; }.mg-final-scene { height:220px; }.mg-final-castle { height:190px; width:225px; left:calc(50% - 80px); }.mg-final-hero { height:110px; width:95px; left:4%; }.mg-final-flag { height:135px; left:5%; }.mg-final-flag span { width:45px; height:32px; font-size:23px; }.mg-stats { grid-template-columns:1fr; gap:7px; }.mg-stats > div { padding:9px 12px; }.mg-finish-actions { flex-direction:column; }.mg-finish details p { font-size:17px; }.mg-exchange-button::before { width:25px; height:25px; font-size:22px; margin-right:5px; } }
@media (max-width:900px) { .mg-scene { height:180px; }.mg-moving-hero { left:calc(15% - 50px); bottom:15px; }.mg-at-next { left:calc(85% - 68px); bottom:76px; }@keyframes mg-pipe-travel { 0% { left:calc(15% - 50px); bottom:15px; opacity:1; }25% { left:15%; bottom:85px; opacity:1; }45% { left:15%; bottom:30px; opacity:0; }55% { left:calc(85% - 68px); bottom:30px; opacity:0; }80% { left:calc(85% - 68px); bottom:85px; opacity:1; }100% { left:calc(85% - 68px); bottom:76px; opacity:1; } } }
@media (max-width:600px) { .mg-scene { height:170px; } }
.mg-final-flag { left:12%; }
@media (max-width:900px) { .mg-final-flag { left:3%; }.mg-final-hero { left:16%; } }
@media (max-width:600px) { .mg-final-flag { left:calc(100% - 55px); }.mg-final-hero { left:4%; } }
@media (prefers-reduced-motion:reduce) { .mg-shell *, .mg-shell *::before,.mg-shell *::after { animation:none!important; transition:none!important; } }