body.emotions-game { background:#e9effa; color:#40566e; }
body.emotions-game .site-header,body.emotions-game > footer { display:none; }
body.emotions-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.el-shell { min-height:100dvh; padding:8px 0 18px; }.el-shell * { box-sizing:border-box; letter-spacing:0; }
.el-shell h1,.el-shell h2,.el-shell h3,.el-shell p { margin-top:0; }.el-shell h2:focus { outline:none; }
.el-shell button,.el-shell .button,.el-shell summary { min-width:48px; min-height:48px; font:inherit; border-radius:6px; line-height:1.3; }.el-shell button { cursor:pointer; }.el-shell button:disabled { opacity:.55; cursor:default; }
.el-shell button:focus-visible,.el-shell a:focus-visible,.el-shell input:focus-visible,.el-shell summary:focus-visible { outline:3px solid #9f7cba; outline-offset:3px; }
.el-shell .el-primary { background:#4a8990; border:2px solid #38747d; color:#fff; padding:10px 16px; font-size:18px; font-weight:750; box-shadow:0 3px 0 #38616f; }.el-shell .el-primary:hover { background:#38777f; }
.el-shell .el-secondary { background:#fffdf3; border:2px solid #bac7da; color:#4d6480; padding:9px 12px; font-size:16px; }
.el-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:65px; padding-bottom:7px; }.el-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 3px; }.el-toolbar span { font-size:13px; }.el-toolbar .el-back { color:#79384b; font-size:14px; padding:9px; white-space:nowrap; }.el-toolbar .el-sound { padding:0; font-size:23px; }.el-motion { display:flex; gap:5px; align-items:center; font-size:13px; }.el-motion input { width:22px; height:22px; accent-color:#4a8990; }
.el-cover { text-align:center; }.el-cover > span { display:block; margin:14px 0 9px; color:#766282; font-weight:700; }.el-cover h2 { font-size:32px; margin:0 0 14px; color:#5c668a; }.el-cover p { max-width:820px; margin:0 auto 18px; font-size:19px; line-height:1.5; }.el-cover-image { display:block; width:100%; height:auto; }.el-cover > .el-cover-image { max-height:420px; object-fit:contain; margin:18px auto 12px; }.card-art .el-cover-image { width:100%; height:100%; object-fit:contain; background:#e7eefb; }.el-cover .el-cover-note { font-size:15px; }
.el-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0; }.el-heading > span { font-weight:700; font-size:16px; color:#746782; }.el-heading h2 { font-family:inherit; font-size:22px; margin:0; color:#4e6d88; }.el-instruction { font-family:inherit; font-size:20px; line-height:1.3; margin:6px 0 9px; min-height:26px; }
.el-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:16px; align-items:start; }.el-console { min-width:0; background:#fffdf3; border:2px solid #c2ccdc; border-radius:8px; padding:12px 24px 6px; box-shadow:0 4px 0 #cdd9e8; }.el-equation-label { display:block; font-size:13px; font-weight:650; color:#657b90; }
.el-equation { display:grid; grid-template-columns:1fr 36px 1fr 36px 1fr; align-items:center; text-align:center; min-height:49px; font-size:32px; font-weight:750; gap:6px; }.el-equation strong { min-width:0; padding:2px 4px; border:2px solid transparent; border-radius:5px; }.el-changing { background:#fff0b6; border-color:#e2c879!important; color:#63502d; }.el-constant { border-color:#83b8bd!important; }.el-result { color:#5e6a8d; }.el-result-confirmed { background:#dceee3; color:#35645c; }.el-pending { display:flex; justify-content:center; font-size:17px; color:#8c96a5; font-weight:500; }.el-term-note { min-height:24px; font-size:14px; line-height:1.4; color:#63788a; padding:2px 0; }
.el-change-card { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:7px 12px; margin:6px 0 8px; background:#eef1fa; border-left:4px solid #ad99c5; border-radius:4px; font-size:19px; font-weight:750; }.el-change-card span { font-size:12px; font-weight:500; text-align:right; }.el-model-slot { min-height:66px; display:flex; align-items:center; }.el-strip { display:block; width:100%; height:66px; }
.el-sidebar { min-width:0; }.el-current-character { height:192px; display:flex; align-items:center; justify-content:center; }.el-current-character .el-character { width:142px; height:190px; }.el-module-list { padding:0; margin:5px 0 0; list-style:none; display:grid; gap:5px; }.el-module-list li { display:flex; justify-content:space-between; align-items:center; padding:6px 9px; min-height:45px; border:1px solid #bac9d8; border-radius:5px; background:#f6f8fc; }.el-module-list strong { font-size:14px; display:block; }.el-module-list span { display:block; font-size:10px; line-height:1.3; }.el-module-list .el-module-0 { background:#fff3c7; }.el-module-list .el-module-1 { background:#dcedf8; }.el-module-list .el-module-2 { background:#f8ded5; }.el-module-current { outline:2px solid #849bad; outline-offset:-2px; }.el-lights { display:flex; align-items:center; gap:3px; }.el-lights i { display:block; width:12px; height:12px; border:1px solid #a2b4bd; border-radius:50%; background:#f9fcfc; }.el-lights b { font-size:12px; margin-left:3px; }.el-module-0 .el-light-on { background:#dfb643; }.el-module-1 .el-light-on { background:#5ca0c6; }.el-module-2 .el-light-on { background:#cf7d6b; }
.el-keypad { display:grid; grid-template-columns:repeat(3,minmax(48px,1fr)); gap:4px; }.el-key { height:48px; border:2px solid #b9cad9; background:#fffdf3; color:#415b75; font-size:23px!important; font-weight:700!important; }.el-key:hover { background:#f5eccc; }
.el-feedback { display:flex; flex-direction:column; justify-content:center; min-height:96px; padding:9px 13px; margin:12px 0 10px; border-left:4px solid #a5a1c8; background:#f6f7fd; font-size:18px; line-height:1.4; border-radius:4px; }.el-feedback strong { font-size:13px; color:#7c6f96; margin-bottom:3px; }
.el-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; }.el-help-actions { display:flex; align-items:center; gap:7px; margin-left:auto; }.el-predictions { display:flex; gap:10px; }.el-shell .el-prediction { min-height:54px; background:#fffdf3; border:2px solid #9bb7c5; padding:10px 16px; color:#42657a; font-size:19px; font-weight:750; }.el-prediction:hover { background:#e8f1ef; }.el-answer-form { display:flex; align-items:center; gap:10px; }.el-answer-form label { font-size:16px; max-width:100px; }.el-answer-form input { width:90px; height:52px; border:2px solid #91afb9; background:white; color:#416d7b; font:inherit; font-size:28px; font-weight:750; text-align:center; border-radius:5px; }.el-wait { font-size:18px; color:#6e7f97; }
.el-help { width:min(650px,calc(100% - 30px)); max-height:90dvh; padding:22px; border:2px solid #a8bcd2; border-radius:8px; color:#40566e; background:#fffdf3; font-size:18px; line-height:1.5; }.el-help::backdrop { background:#40566e55; }.el-help h2 { font-size:24px; }
.el-finish { text-align:center; }.el-finish h2 { font-size:30px; color:#58668a; margin:18px 0 10px; }.el-finish > p { font-size:19px; }.el-final-lab { max-width:650px; margin:auto; }.el-lab-art { display:block; width:100%; height:auto; }.el-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:15px 0; }.el-stats > div { background:#fffdf3; border:1px solid #cad3e0; border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:6px; }.el-stats strong { font-size:27px; color:#4a8990; }.el-stats span { font-size:14px; }.el-finish-actions { display:flex; gap:12px; justify-content:center; margin:16px 0; }.el-finish details { text-align:left; border-top:1px solid #bacbdc; padding:9px 0; font-size:18px; line-height:1.5; }.el-finish summary { padding:10px 0; cursor:pointer; font-weight:700; }.el-bonus-options { display:flex; gap:10px; }.el-bonus-feedback { min-height:54px; margin:10px 0 0; }
@keyframes el-morph { 50% { background:#f9dc80; transform:translateY(-3px); } }
@keyframes el-celebrate { 50% { transform:translateY(-6px) rotate(2deg); } }
.phase-morph .el-new-equation .el-changing { animation:el-morph .4s ease; }.phase-success .el-current-character .el-character { animation:el-celebrate .65s ease; }.el-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .el-shell { padding-top:3px; }.el-toolbar { min-height:60px; }.el-current-character { height:165px; }.el-current-character .el-character { height:164px; }.el-feedback { min-height:88px; margin-top:9px; }.el-console { padding-top:8px; } }
@media (max-width:1000px) { .el-toolbar { grid-template-columns:auto 1fr auto 48px; }.el-motion { grid-column:1/-1; justify-self:end; }.el-layout { grid-template-columns:minmax(0,1fr) 215px; gap:12px; }.el-console { padding-left:14px; padding-right:14px; }.el-change-card { font-size:18px; }.el-controls { flex-wrap:wrap; }.el-help-actions { flex-basis:100%; margin-left:0; } }
@media (max-width:760px) { .el-play { display:flex; flex-direction:column; }.el-heading { order:0; }.el-instruction { order:1; }.el-layout { display:contents; }.el-console { order:2; }.el-feedback { order:3; min-height:114px; }.el-controls { order:4; }.el-sidebar { order:5; margin-top:18px; display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; }.el-current-character { height:160px; }.el-current-character .el-character { height:160px; }.el-keypad { grid-column:1; }.el-module-list { grid-column:2; }.el-help-actions { flex-basis:auto; margin-left:auto; }.el-change-card span { max-width:150px; } }
@media (max-width:600px) { body.emotions-game #app { width:calc(100% - 14px); }.el-toolbar { grid-template-columns:1fr auto 48px; gap:7px; }.el-toolbar > div { grid-column:1/-1; grid-row:1; }.el-toolbar .el-back { grid-row:2; }.el-toolbar [data-el-action="help"] { grid-column:2; grid-row:2; }.el-toolbar .el-sound { grid-column:3; grid-row:2; }.el-motion { justify-self:start; margin-bottom:5px; }.el-heading { align-items:start; flex-direction:column; gap:5px; }.el-heading h2 { font-size:21px; }.el-heading > span { font-size:14px; }.el-instruction { font-size:19px; }.el-console { padding:8px 8px 4px; }.el-equation { grid-template-columns:1fr 24px 1fr 24px 1fr; gap:2px; font-size:27px; min-height:47px; }.el-pending { font-size:15px; }.el-term-note { font-size:12px; min-height:32px; }.el-change-card { font-size:17px; padding:7px; min-height:54px; gap:6px; }.el-change-card span { font-size:10px; max-width:102px; }.el-model-slot { min-height:55px; }.el-strip { height:55px; }.el-feedback { font-size:17px; min-height:132px; }.el-controls { display:block; }.el-help-actions { margin:12px 0 0; flex-wrap:wrap; }.el-predictions { gap:7px; }.el-shell .el-prediction { flex:1; padding:9px 8px; font-size:17px; }.el-answer-form { display:grid; grid-template-columns:1fr 90px; gap:8px; }.el-answer-form label { max-width:none; }.el-answer-form .el-primary { grid-column:1/-1; }.el-controls > .el-primary { width:100%; }.el-sidebar { grid-template-columns:150px minmax(0,1fr); gap:7px; }.el-module-list li { display:block; padding:5px; }.el-lights { margin-top:4px; }.el-module-list span { font-size:10px; }.el-cover h2 { font-size:27px; }.el-cover p { font-size:17px; }.el-cover > .el-cover-image { margin-top:24px; }.el-finish h2 { font-size:26px; }.el-stats { grid-template-columns:1fr; gap:7px; }.el-stats > div { flex-direction:row; align-items:center; text-align:left; }.el-stats strong { min-width:36px; }.el-finish-actions { flex-direction:column; }.el-bonus-options { flex-wrap:wrap; }.el-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .el-shell * { animation:none!important; transition:none!important; } }
.el-console { position:relative; padding-left:28px; }.el-conduit { position:absolute; left:3px; top:8px; width:15px; height:calc(100% - 16px); pointer-events:none; }
@keyframes el-memory-flow { to { transform:translateY(24px); } }
@keyframes el-energy-flow { 50% { stroke:#f0dc83; } }
@keyframes el-strip-change { from { opacity:.4; transform:translateX(-3px); } to { opacity:1; transform:translateX(0); } }
.phase-success .el-memory { animation:el-memory-flow .65s ease both; }.phase-success .el-memory-1 { animation-delay:.07s; }.phase-success .el-memory-2 { animation-delay:.12s; }.phase-success .el-energy { animation:el-energy-flow .65s ease; }.el-strip-new { animation:el-strip-change .45s ease both; }
.el-equation { line-height:1.25; }
.el-motion { min-width:48px; min-height:48px; }
@media (min-width:761px) { .el-layout { min-height:366px; } }
@media (max-width:600px) { .el-console { padding-left:19px; }.el-conduit { width:11px; left:2px; }.el-motion { min-height:48px; } }
@media (max-width:600px) {
  .el-toolbar { min-height:0; }.el-toolbar > div { grid-column:1/3; }.el-toolbar h1 { font-size:16px; }.el-toolbar span { font-size:12px; }.el-motion { grid-row:1; grid-column:3; font-size:10px; flex-direction:column; justify-content:center; justify-self:center; margin:0; }.el-motion input { width:26px; height:26px; }.el-toolbar [data-el-effects] { cursor:pointer; }
  .el-heading { flex-direction:row; align-items:center; gap:6px; min-height:40px; }.el-heading h2 { font-size:17px; max-width:195px; text-align:right; }.el-heading > span { font-size:12px; }.el-instruction { font-size:18px; }.el-term-note:empty { min-height:8px; }.el-feedback { min-height:104px; margin:10px 0 8px; }.el-answer-form { grid-template-columns:90px 1fr; gap:6px 9px; }.el-answer-form label { grid-column:1/-1; font-size:14px; line-height:1.3; }.el-answer-form input { grid-column:1; grid-row:2; }.el-answer-form .el-primary { grid-column:2; grid-row:2; padding:9px; font-size:17px; }.el-help-actions { margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) { .el-shell * { animation:none!important; transition:none!important; } }