body.magic-game { background:#f4fbfb; color:#40546f; }
body.magic-game .site-header,body.magic-game > footer { display:none; }
body.magic-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; margin:0 auto; padding:0; }
.ms-shell { min-height:100dvh; padding:8px 0 20px; }
.ms-shell * { box-sizing:border-box; letter-spacing:0; }
.ms-shell h1,.ms-shell h2,.ms-shell h3,.ms-shell p { margin-top:0; }
.ms-shell h2:focus { outline:none; }
.ms-shell button,.ms-shell .button,.ms-shell summary { min-width:48px; min-height:48px; font:inherit; line-height:1.3; border-radius:6px; }
.ms-shell button { cursor:pointer; }.ms-shell button:disabled { cursor:default; }
.ms-shell button:focus-visible,.ms-shell a:focus-visible,.ms-shell input:focus-visible,.ms-shell summary:focus-visible { outline:4px solid #e495b9; outline-offset:3px; }
.ms-shell .ms-primary { padding:11px 18px; font-size:18px; font-weight:750; color:#fff; background:#368a99; border:2px solid #306c81; box-shadow:0 3px 0 #326378; }
.ms-shell .ms-primary:hover { background:#297e8c; }
.ms-shell .ms-secondary { padding:9px 14px; font-size:16px; color:#685d87; background:#fffaf1; border:2px solid #c6bfd7; }
.ms-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:66px; padding-bottom:8px; }
.ms-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 4px; }
.ms-toolbar span { font-size:13px; color:#72909c; }.ms-toolbar .ms-back { padding:8px; font-size:14px; color:#79384d; white-space:nowrap; }
.ms-toolbar .ms-sound { width:48px; padding:0; }.ms-motion { display:flex; align-items:center; gap:5px; font-size:13px; }.ms-motion input { width:22px; height:22px; accent-color:#368a99; }
.ms-cover { text-align:center; }.ms-cover > span { display:block; color:#9a749e; font-size:15px; font-weight:700; margin:12px 0 8px; }
.ms-cover h2 { font-size:33px; color:#765797; margin:0 0 12px; }.ms-cover p { max-width:850px; margin:0 auto 16px; font-size:19px; line-height:1.45; }
.ms-cover-image { display:block; width:100%; height:auto; }.ms-cover > .ms-cover-image { max-height:440px; object-fit:contain; margin:20px auto 12px; }.card-art .ms-cover-image { width:100%; height:100%; object-fit:contain; background:#f4e8d9; }.ms-cover .ms-cover-note { font-size:15px; }
.ms-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; }.ms-heading > span { font-size:16px; font-weight:700; color:#a28048; }.ms-heading h2 { font-family:inherit; font-size:23px; line-height:1.25; margin:0; color:#8762a3; }
.ms-instruction { font-family:inherit; font-size:20px; line-height:1.3; margin:7px 0 10px; min-height:26px; }
.ms-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:stretch; }
.ms-book { position:relative; min-width:0; background:#dbc9a3; padding:8px 9px 12px; border:2px solid #bda782; border-radius:7px; box-shadow:0 5px 0 #c1ae90; }
.ms-page { position:relative; padding:12px 17px 8px; background:#fffef4; border-left:6px solid #efe2c5; border-right:6px solid #f1e5cc; min-height:300px; }
.ms-page::after { content:''; position:absolute; right:5px; top:12px; bottom:12px; width:1px; background:#e8e0c8; pointer-events:none; }
.ms-page-title { display:block; text-align:center; font-size:13px; font-weight:700; color:#a58ca6; margin-bottom:15px; }
.ms-expression { min-height:64px; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.ms-token { display:grid; place-items:center; height:60px; color:#4a5576; font-weight:800; line-height:1.1; }
.ms-number { font-size:38px; min-width:48px; padding:0 3px; border-radius:5px; }.ms-bracket { font-size:44px; min-width:16px; color:#ae78b1; }
.ms-shell .ms-op { width:54px; height:54px; flex:0 0 54px; padding:0; font-size:34px; font-weight:750; line-height:1; background:#f7f3ff; color:#67558f; border:2px solid #b9add2; box-shadow:0 2px 0 #cec3dc; }
.ms-shell .ms-op:not(:disabled):hover { background:#ece5fa; }.ms-shell .ms-op-selected { background:#fff0b1; color:#7b6635; border-color:#d2b155; box-shadow:0 2px 0 #d5bc77; }.ms-number-selected { background:#fff2c4; }
.ms-calculation { display:flex; justify-content:center; align-items:center; height:53px; margin:10px 0 5px; color:#36808f; font-size:24px; font-weight:700; border-bottom:1px dashed #dccfba; }
.ms-history { display:flex; flex-direction:column; gap:3px; min-height:53px; font-size:15px; line-height:1.5; color:#8d8292; padding:5px 4px; }
.ms-book-bottom { display:flex; align-items:center; justify-content:center; gap:18px; min-height:82px; }.ms-book-owl { width:77px; height:74px; flex:0 0 77px; }.ms-owl { width:100%; height:100%; display:block; }.ms-book-bottom > span { font-size:14px; line-height:1.4; max-width:360px; color:#a18ba3; }
.ms-lab { position:relative; min-width:0; padding:4px 0 0; }.ms-current-potion { font-size:14px; text-align:center; font-weight:700; color:#75909a; }
.ms-lab-scene { position:relative; height:190px; isolation:isolate; }.ms-girl,.ms-boy { position:absolute; width:115px; height:150px; top:3px; z-index:0; }.ms-girl { left:0; }.ms-boy { right:0; }.ms-wizard { width:100%; height:100%; display:block; }.ms-cauldron { position:absolute; width:174px; height:106px; bottom:0; left:calc(50% - 87px); z-index:1; }
.ms-shelf { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; border-bottom:6px solid #c8b49e; padding:1px 4px 7px; background:#fffaf144; }
.ms-potion { min-width:0; text-align:center; }.ms-bottle { display:block; width:100%; height:95px; }.ms-potion strong { display:block; min-height:34px; font-size:10px; line-height:1.4; color:#8f9ba2; font-weight:600; }.ms-potion-ready strong { color:#587a85; }
.ms-feedback { min-height:82px; margin:12px 0 10px; padding:8px 12px; display:flex; flex-direction:column; justify-content:center; font-size:18px; line-height:1.4; background:#fffdf5; border:1px solid #dcd4b9; border-left:5px solid #e7c966; border-radius:5px; }
.ms-feedback strong { font-size:14px; color:#a175a8; }.ms-controls { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ms-answer-form { display:flex; align-items:center; gap:10px; }.ms-answer-form label { font-size:18px; font-weight:700; }.ms-answer-form input { width:84px; height:56px; font-size:30px; font-weight:750; text-align:center; color:#346d7f; border:2px solid #96b7c2; border-radius:5px; background:white; }
.ms-help-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; max-width:350px; }.ms-help-actions button { font-size:15px!important; }.ms-choice-note,.ms-wait { font-size:18px; color:#8995ab; min-height:56px; display:flex; align-items:center; }
.ms-comparison { text-align:center; padding:14px 0 0; margin-top:12px; border-top:2px dashed #cdbbd6; }.ms-comparison h3 { font-family:inherit; font-size:19px; color:#956bab; margin:0 0 7px; }.ms-comparison p { font-size:24px; font-weight:700; line-height:1.5; margin:0; color:#597b94; }.ms-comparison strong { color:#a4759d; }.ms-comparison > span { display:block; font-size:16px; line-height:1.5; margin:8px auto 0; max-width:800px; }
.ms-finish { text-align:center; }.ms-finish h2 { font-size:30px; color:#8864a9; margin:12px 0; }.ms-finish > p { max-width:900px; margin:0 auto 12px; font-size:19px; line-height:1.45; }
.ms-finish-characters { display:flex; align-items:end; justify-content:center; gap:20px; height:160px; }.ms-finish-characters .ms-wizard { width:110px; height:150px; }.ms-finish-characters .ms-owl { width:85px; height:85px; margin-bottom:5px; }
.ms-shelf-large { max-width:820px; margin:0 auto 20px; gap:20px; border-bottom-width:9px; }.ms-shelf-large .ms-bottle { height:220px; }.ms-shelf-large .ms-potion strong { font-size:16px; line-height:1.3; color:#637c8c; min-height:43px; }.ms-finish .ms-final-rule { padding:5px 0; color:#88769d; font-size:18px; font-weight:650; }
.ms-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }.ms-stats > div { display:flex; gap:12px; align-items:center; background:#fffcf3; border:1px solid #c8d9db; border-radius:6px; padding:12px; text-align:left; }.ms-stats strong { font-size:33px; color:#3b8d97; }.ms-stats span { font-size:15px; line-height:1.4; }
.ms-finish-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:17px 0; }.ms-finish details { max-width:850px; margin:14px auto; font-size:18px; line-height:1.5; text-align:left; }.ms-finish summary { padding:10px; cursor:pointer; }.ms-finish details p { padding:0 10px; }
.ms-help { width:min(610px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; padding:24px; background:#fffdf3; color:#40546f; border:2px solid #b9a7d0; border-radius:8px; font-size:18px; line-height:1.5; }.ms-help h2 { font-size:25px; }.ms-help::backdrop { background:#4d466c88; }
.phase-glow .ms-number-selected,.phase-glow .ms-op-selected { animation:ms-spell .75s ease-in-out both; }.phase-glow .ms-steam,.ms-potion-ready .ms-fireflies,.ms-potion-ready .ms-star-bubbles { animation:ms-float 2.8s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
@keyframes ms-spell { 40% { background:#fff0a1; box-shadow:0 0 0 6px #eed77766; } 75% { opacity:.5; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@keyframes ms-float { to { transform:translateY(-4px); } }
.ms-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .ms-shell { padding-top:4px; }.ms-toolbar { min-height:60px; }.ms-page { min-height:285px; padding-top:10px; }.ms-page-title { margin-bottom:9px; }.ms-book-bottom { min-height:72px; }.ms-book-owl { height:66px; }.ms-lab-scene { height:177px; }.ms-bottle { height:90px; }.ms-feedback { min-height:76px; margin:10px 0 9px; } }
@media (max-width:1050px) { .ms-toolbar { grid-template-columns:auto 1fr auto 48px; }.ms-motion { grid-column:1/-1; justify-self:end; }.ms-layout { grid-template-columns:minmax(0,1fr) 270px; gap:12px; }.ms-page { padding-left:9px; padding-right:9px; }.ms-expression { gap:5px; }.ms-number { font-size:33px; min-width:39px; }.ms-bracket { font-size:40px; min-width:14px; }.ms-girl,.ms-boy { width:100px; }.ms-cauldron { width:155px; height:100px; left:calc(50% - 77px); }.ms-potion strong { font-size:9px; }.ms-answer-form { flex-wrap:wrap; }.ms-help-actions { max-width:240px; }.ms-answer-form button { flex-basis:100%; }.ms-controls { align-items:start; } }
@media (max-width:800px) { .ms-play { display:flex; flex-direction:column; }.ms-heading { order:0; }.ms-instruction { order:1; }.ms-layout { display:contents; }.ms-book { order:2; }.ms-feedback { order:3; min-height:96px; }.ms-controls { order:4; }.ms-lab { order:5; display:grid; grid-template-columns:220px 1fr; column-gap:20px; margin-top:14px; }.ms-current-potion { grid-column:1; }.ms-lab-scene { grid-column:1; height:165px; }.ms-shelf { grid-column:2; grid-row:1/3; align-items:end; padding-bottom:10px; }.ms-bottle { height:120px; }.ms-potion strong { font-size:11px; min-height:45px; }.ms-comparison { order:6; }.ms-finish-characters { height:145px; }.ms-shelf-large { gap:10px; }.ms-shelf-large .ms-bottle { height:170px; }.ms-shelf-large .ms-potion strong { font-size:14px; } }
@media (max-width:600px) { body.magic-game #app { width:calc(100% - 14px); }.ms-toolbar { grid-template-columns:1fr auto 48px; gap:7px; }.ms-toolbar > div { grid-column:1/-1; grid-row:1; }.ms-toolbar h1 { font-size:18px; }.ms-toolbar .ms-back { grid-row:2; }.ms-toolbar [data-ms-action="help"] { grid-column:2; grid-row:2; }.ms-toolbar .ms-sound { grid-column:3; grid-row:2; }.ms-motion { grid-column:1/-1; justify-self:start; margin:2px 0 5px; }.ms-heading { flex-direction:column; align-items:start; gap:5px; }.ms-heading h2 { font-size:23px; }.ms-heading > span { font-size:14px; }.ms-instruction { font-size:18px; min-height:47px; }.ms-book { padding:5px 5px 9px; }.ms-page { padding:9px 3px 6px; border-left-width:3px; border-right-width:3px; min-height:287px; }.ms-page-title { font-size:11px; margin-bottom:12px; }.ms-expression { gap:3px; min-height:60px; }.ms-shell .ms-op { width:48px; height:52px; flex-basis:48px; font-size:29px; }.ms-number { font-size:28px; min-width:32px; padding:0; }.ms-bracket { font-size:36px; min-width:11px; }.ms-calculation { font-size:22px; height:50px; }.ms-history { font-size:14px; padding-left:7px; min-height:53px; }.ms-book-bottom { gap:8px; padding:0 6px; min-height:70px; }.ms-book-owl { width:65px; flex-basis:65px; height:65px; }.ms-book-bottom > span { font-size:12px; }.ms-feedback { font-size:17px; min-height:108px; }.ms-controls { flex-direction:column; gap:12px; }.ms-controls > .ms-primary { width:100%; }.ms-answer-form { width:100%; gap:8px; }.ms-answer-form label { font-size:17px; }.ms-answer-form input { width:76px; }.ms-answer-form button { width:100%; }.ms-help-actions { max-width:100%; justify-content:start; }.ms-choice-note { display:none; }.ms-lab { grid-template-columns:1fr; margin-top:18px; }.ms-current-potion { grid-column:1; }.ms-lab-scene { grid-column:1; width:260px; margin:auto; height:170px; }.ms-shelf { grid-column:1; grid-row:auto; }.ms-bottle { height:110px; }.ms-potion strong { font-size:10px; }.ms-cover h2 { font-size:28px; }.ms-cover p { font-size:17px; }.ms-cover .ms-cover-note { font-size:14px; }.ms-finish h2 { font-size:27px; }.ms-finish > p { font-size:17px; }.ms-finish-characters { gap:6px; height:135px; }.ms-finish-characters .ms-wizard { width:90px; height:125px; }.ms-finish-characters .ms-owl { width:65px; height:65px; }.ms-shelf-large { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.ms-shelf-large .ms-bottle { height:170px; }.ms-shelf-large .ms-potion strong { font-size:14px; min-height:36px; }.ms-stats { grid-template-columns:1fr; gap:7px; }.ms-finish-actions { flex-direction:column; }.ms-finish-actions > * { width:100%; }.ms-comparison p { font-size:20px; }.ms-comparison > span { font-size:16px; }.ms-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .ms-shell * { animation:none!important; transition:none!important; } }
.ms-book { background:transparent; border:0; box-shadow:none; padding:20px 24px 23px; }
.ms-book-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ms-page { background:transparent; border:0; z-index:1; }
.ms-page::after { display:none; }
.ms-potion-ready:nth-child(2) .ms-bottle { animation:ms-rainbow 4s ease-in-out infinite alternate; }
.ms-shell .ms-op:disabled { opacity:1; }
@keyframes ms-rainbow { to { filter:saturate(1.4) hue-rotate(18deg); } }
@media (max-width:600px) { .ms-book { padding:10px 9px 16px; }.ms-page { min-height:270px; }.ms-instruction { min-height:26px; }.ms-feedback { min-height:88px; } }