@font-face{font-family:EC Dela Gothic;src:url(/fonts/element-cards/dela-gothic-one-subset.woff2)format("woff2");font-display:swap}.ec-app{--ec-display:"EC Dela Gothic", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;--ec-wood:#b9773f;--ec-wood-dark:#6b3f1d;--ec-paper:#fbf0d4;--ec-ink:#4a2a12;--ec-light:#fffaf0;--ec-muted:#8b6a48;--ec-red:#e8402e;--ec-bar-top:3rem;min-height:100vh;color:var(--ec-ink);background:#2b2219;flex-direction:column;align-items:center;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;display:flex}.ec-topbar{width:100%;height:var(--ec-bar-top);box-sizing:border-box;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.ec-topbar a{color:#e8d6b8;font-weight:700;text-decoration:none}.ec-topbar a:hover{color:#fff}.ec-topbar .sound-toggle{color:#e8d6b8;border-color:#e8d6b880}.ec-play{--u:1cqw;--fan:1;width:min(100vw, calc((100vh - var(--ec-bar-top)) * 16 / 9));aspect-ratio:16/9;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;overflow:clip;container-type:inline-size}.ec-play.is-paused .ec-forge,.ec-play.is-paused .ec-forge *{animation-play-state:paused}.ec-stage{background:#cfe6f2;position:absolute;inset:0;overflow:hidden}.ec-canvas,.ec-canvas canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.ec-loading{font-size:calc(var(--u) * 2);place-items:center;margin:0;display:grid;position:absolute;inset:0}kbd{font-family:ui-monospace,Menlo,monospace}.ec-button{border:0 solid;border-width:calc(var(--u) * .6) calc(var(--u) * 1.2);border-image:url(/images/element-cards/ui2/button-paper.webp) 40 60 fill / calc(var(--u) * .6) calc(var(--u) * 1.2) stretch;color:var(--ec-ink);font:inherit;font-size:calc(var(--u) * 1.5);min-height:calc(var(--u) * 4.2);padding:0 calc(var(--u) * 1);cursor:pointer;background:0 0;place-items:center;font-weight:800;text-decoration:none;transition:transform .12s,filter .12s;display:inline-grid}.ec-button:hover:not(:disabled),.ec-button:focus-visible{transform:translateY(calc(var(--u) * -.2)) rotate(-1deg);filter:brightness(1.06);outline:none}.ec-button:active:not(:disabled){transform:scale(.93)}.ec-button-primary{border-width:calc(var(--u) * .8) calc(var(--u) * 2.1);border-image:url(/images/element-cards/ui2/sign-wood.webp) 110 120 40 120 fill / calc(var(--u) * 1.925) calc(var(--u) * 2.1) calc(var(--u) * .7) stretch;color:var(--ec-light);text-shadow:0 .08em 0 var(--ec-wood-dark), .06em 0 0 var(--ec-wood-dark), -.06em 0 0 var(--ec-wood-dark);padding-top:calc(var(--u) * .6)}.ec-title-menu .ec-button,.ec-ready .ec-button-primary{box-sizing:border-box;border-width:calc(var(--u) * 1.925) calc(var(--u) * 2.1) calc(var(--u) * .7);border-image:url(/images/element-cards/ui2/sign-wood.webp) 110 120 40 120 fill / calc(var(--u) * 1.925) calc(var(--u) * 2.1) calc(var(--u) * .7) stretch;width:100%;min-height:6.4cqw;padding:0 calc(var(--u) * 1);color:var(--ec-light);text-shadow:0 .08em 0 var(--ec-wood-dark), .06em 0 0 var(--ec-wood-dark), -.06em 0 0 var(--ec-wood-dark);font-size:1.7cqw;line-height:1.25}.ec-ready .ec-button-primary{width:calc(30cqw - var(--u) * 6 - 3.2cqw);max-width:100%}.ec-overlay{z-index:30;background:#3c240e59;place-items:center;display:grid;position:absolute;inset:0}.ec-panel{box-sizing:border-box;max-width:calc(var(--u) * 72);max-height:calc(var(--u) * 52);border-style:solid;border-width:calc(var(--u) * 3);border-image:url(/images/element-cards/ui2/panel-wood.webp) 104 fill / calc(var(--u) * 3) stretch;padding:0 calc(var(--u) * .8);color:var(--ec-ink);font-size:calc(var(--u) * 1.4);filter:drop-shadow(0 calc(var(--u) * .5) 0 #46280f59);word-break:auto-phrase;animation:.32s cubic-bezier(.2,1.5,.4,1) ec-panel-in;overflow:auto}.ec-panel:lang(ko){word-break:keep-all}@keyframes ec-panel-in{0%{transform:translateY(calc(var(--u) * 1.5)) rotate(-2deg) scale(.92)}to{transform:none}}.ec-panel h2{margin:0 0 calc(var(--u) * 1);color:var(--ec-wood-dark);font-size:calc(var(--u) * 2.3);text-align:center;letter-spacing:.08em}.ec-panel h3{margin:calc(var(--u) * 1) 0 calc(var(--u) * .5);color:var(--ec-wood-dark);font-size:calc(var(--u) * 1.5)}.ec-actions{justify-content:center;gap:calc(var(--u) * 1);margin-top:calc(var(--u) * 1.2);flex-wrap:wrap;display:flex}.ec-actions-column{flex-direction:column;align-items:stretch}.ec-note{color:var(--ec-muted);font-size:calc(var(--u) * 1.2);margin:calc(var(--u) * .5) 0;text-align:center;line-height:1.6}.ec-rules ol{padding-left:calc(var(--u) * 2);gap:calc(var(--u) * .7);flex-direction:column;margin:0;line-height:1.6;display:flex}.ec-scene{background:#f3e3c4 url(/images/element-cards/menu-shop.webp) 50%/cover no-repeat}.ec-scene:before{content:"";pointer-events:none;background:#462d1929;position:absolute;inset:0}.ec-formula{letter-spacing:.04em;white-space:nowrap;font-family:Georgia,Times New Roman,serif;font-weight:800}.ec-formula sub{vertical-align:-.28em;margin-left:.04em;font-size:.62em}.ec-vitals{top:calc(var(--u) * .8);z-index:6;align-items:flex-start;gap:calc(var(--u) * .5);width:calc(var(--u) * 32);display:flex;position:absolute}.ec-vitals.is-hero{left:calc(var(--u) * 1)}.ec-vitals.is-rival{right:calc(var(--u) * 1);text-align:right;flex-direction:row-reverse}.ec-portrait{width:calc(var(--u) * 7);aspect-ratio:1;background:url(/images/element-cards/ui2/icon-ring.webp) 50%/100% 100% no-repeat;flex:none;animation:.4s cubic-bezier(.2,1.8,.4,1) ec-pop;position:relative}.ec-portrait img{object-fit:cover;object-position:50% 20%;border-radius:50%;width:72%;height:72%;position:absolute;top:14%;left:14%}.ec-vitals.is-rival .ec-portrait img{transform:scaleX(1)}.ec-vitals-body{gap:calc(var(--u) * .3);padding-top:calc(var(--u) * .5);flex-direction:column;flex:1;display:flex}.ec-vitals.is-rival .ec-vitals-body{align-items:flex-end}.ec-vitals-label{align-items:center;gap:calc(var(--u) * .3);font-size:calc(var(--u) * 1.25);color:var(--ec-light);text-shadow:0 .1em 0 var(--ec-wood-dark), .08em 0 0 var(--ec-wood-dark), -.08em 0 0 var(--ec-wood-dark), 0 -.08em 0 var(--ec-wood-dark);font-weight:900;display:inline-flex}.ec-vitals-label img{height:calc(var(--u) * 2)}.ec-bar{gap:calc(var(--u) * .25);width:100%;height:calc(var(--u) * 2.2);box-sizing:border-box;padding:calc(var(--u) * .55) calc(var(--u) * 1.1);border:0 solid #0000;border-image:url(/images/element-cards/ui2/hp-frame.webp) 0 64 fill / 0 calc(var(--u) * 1.13) stretch;display:flex}.ec-bar i{border-radius:999px;flex:1;display:block}.ec-bar.is-lives i.is-full{background:linear-gradient(#ff8a6a 0 45%,#e8402e 45%)}.ec-bar.is-lives i.is-empty{background:#ffffff1f;animation:.45s ease-out ec-break}.ec-bar.is-rival i{transform-origin:100%;background:linear-gradient(#ffd36a 0 45%,#f0a020 45%);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}@keyframes ec-break{0%{background:#fff;transform:scale(1.4)}to{transform:none}}.ec-streak{align-self:flex-start;align-items:center;gap:calc(var(--u) * .3);font-size:calc(var(--u) * 1.6);color:var(--ec-light);text-shadow:0 .1em #7a2a00,.08em 0 #7a2a00,-.08em 0 #7a2a00,0 -.08em #7a2a00;font-style:italic;font-weight:900;animation:.3s cubic-bezier(.2,1.8,.4,1) ec-pop;display:inline-flex}.ec-streak img{height:calc(var(--u) * 2.6)}.ec-streak.is-level-1{color:#fff3b0}.ec-streak.is-level-2{color:#ffd060;font-size:calc(var(--u) * 1.9)}.ec-streak.is-level-3{color:#fff;font-size:calc(var(--u) * 2.2);animation:.3s cubic-bezier(.2,1.8,.4,1) ec-pop,.6s ease-in-out infinite alternate ec-wobble}@keyframes ec-wobble{0%{rotate:-3deg}to{rotate:3deg}}.ec-score{align-items:center;gap:calc(var(--u) * .4);display:inline-flex;position:relative}.ec-score img{height:calc(var(--u) * 2.4)}.ec-score small{font-size:calc(var(--u) * 1);color:var(--ec-light);text-shadow:0 .1em 0 var(--ec-wood-dark), .08em 0 0 var(--ec-wood-dark), -.08em 0 0 var(--ec-wood-dark);font-weight:800}.ec-score b{font-family:Georgia,serif;font-size:calc(var(--u) * 2.3);color:var(--ec-light);font-variant-numeric:tabular-nums;text-shadow:0 .08em 0 var(--ec-wood-dark), .06em 0 0 var(--ec-wood-dark), -.06em 0 0 var(--ec-wood-dark), 0 -.06em 0 var(--ec-wood-dark);display:inline-block}.ec-score b.is-bump{animation:.35s cubic-bezier(.2,1.8,.4,1) ec-bump}.ec-score-gain{font-family:Georgia,serif;font-weight:900;font-size:calc(var(--u) * 1.9);color:#ffe27a;text-shadow:0 .08em #7a3a00,.06em 0 #7a3a00,-.06em 0 #7a3a00;pointer-events:none;animation:1s ease-out forwards ec-gain;position:absolute;top:100%;right:0}@keyframes ec-bump{0%{transform:scale(1)}30%{color:#ffe27a;transform:scale(1.5)}to{transform:scale(1)}}@keyframes ec-gain{0%{transform:translateY(calc(var(--u) * 1)) scale(.6);opacity:0}20%{opacity:1;transform:translateY(0)scale(1.2)}to{transform:translateY(calc(var(--u) * -1.5));opacity:0}}.ec-pause-button{left:calc(var(--u) * 1);top:calc(var(--u) * 11.5);z-index:6;border:calc(var(--u) * .15) solid var(--ec-wood-dark);background:var(--ec-paper);color:var(--ec-ink);font:inherit;font-weight:800;font-size:calc(var(--u) * 1);padding:calc(var(--u) * .3) calc(var(--u) * 1);cursor:pointer;border-radius:999px;position:absolute}.ec-topic{left:50%;top:calc(var(--u) * -1.4);width:calc(var(--u) * 34);margin-left:calc(var(--u) * -17);z-index:5;pointer-events:none;position:absolute}.ec-topic-plate{aspect-ratio:660/280;padding-top:calc(var(--u) * 4);box-sizing:border-box;transform-origin:50% 0;background:url(/images/element-cards/ui2/sign-wood.webp) 50%/100% 100% no-repeat;flex-direction:column;justify-content:center;align-items:center;animation:.9s ease-out ec-swing;display:flex;position:relative}.ec-topic-plate small{font-size:calc(var(--u) * 1);color:#fff2d0;letter-spacing:.2em;text-shadow:0 .1em 0 var(--ec-wood-dark);font-weight:800}.ec-topic-plate strong{font-size:calc(var(--u) * 3.4);color:var(--ec-light);text-shadow:0 .08em 0 var(--ec-wood-dark), .06em 0 0 var(--ec-wood-dark), -.06em 0 0 var(--ec-wood-dark), 0 -.06em 0 var(--ec-wood-dark);text-align:center;max-width:88%;word-break:auto-phrase;line-height:1.12;animation:.35s cubic-bezier(.2,1.6,.4,1) ec-topic-in}.ec-topic-plate strong:lang(ko){word-break:keep-all}.ec-topic-plate strong>span{display:block}@keyframes ec-swing{0%{transform:rotate(-4deg)}30%{transform:rotate(3deg)}60%{transform:rotate(-1.5deg)}to{transform:rotate(0)}}@keyframes ec-topic-in{0%{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}.ec-timer{align-items:center;gap:calc(var(--u) * .5);margin:calc(var(--u) * -.6) auto 0;width:80%;display:flex;position:relative}.ec-hourglass{height:calc(var(--u) * 2.6)}.ec-timer-bar{height:calc(var(--u) * 1);border:calc(var(--u) * .15) solid var(--ec-wood-dark);background:#4a2a128c;border-radius:999px;flex:1;overflow:hidden}.ec-timer-bar i{transform-origin:0;background:linear-gradient(#9ff0ff 0 45%,#30c0f0 45%);height:100%;display:block}.ec-timer b{font-family:Georgia,serif;font-size:calc(var(--u) * 1.4);min-width:calc(var(--u) * 3);text-align:right;color:var(--ec-light);text-shadow:0 .08em 0 var(--ec-wood-dark), .06em 0 0 var(--ec-wood-dark), -.06em 0 0 var(--ec-wood-dark)}.ec-topic.is-tense .ec-timer-bar i{background:linear-gradient(#ffb0a0 0 45%,#ff3a2a 45%);animation:.5s steps(2,end) infinite ec-blink}.ec-topic.is-tense .ec-timer b{color:#ffd0c8}.ec-topic.is-tense .ec-hourglass{animation:.4s infinite ec-shake}@keyframes ec-blink{50%{opacity:.45}}.ec-timer-bar.is-hit{animation:.4s ease-out ec-bar-hit}@keyframes ec-bar-hit{0%{translate:calc(var(--u) * -.5) 0;background:#ff6a58}30%{translate:calc(var(--u) * .5) 0}to{translate:0}}.ec-penalty{margin:calc(var(--u) * -1.1) 0 0 calc(var(--u) * .4);white-space:nowrap;font-family:Georgia,serif;font-style:normal;font-weight:900;font-size:calc(var(--u) * 1.8);color:#ffd0c8;text-shadow:0 .08em #8a1a10,.06em 0 #8a1a10,-.06em 0 #8a1a10,0 -.06em #8a1a10;animation:.9s ease-out forwards ec-penalty;position:absolute;top:50%;left:100%}@keyframes ec-penalty{0%{opacity:0;transform:scale(1.8)}20%{opacity:1;transform:none}70%{opacity:1}to{transform:translateY(calc(var(--u) * 1.2));opacity:0}}@keyframes ec-shake{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ec-tension{pointer-events:none;z-index:4;opacity:0;box-shadow:inset 0 0 calc(var(--u) * 5) calc(var(--u) * .6) #ff281e99;position:absolute;inset:0}.ec-play.is-tense .ec-tension{animation:.8s ease-in-out infinite ec-pulse}@keyframes ec-pulse{50%{opacity:1}}.ec-banner{left:0;right:0;top:calc(var(--u) * 26);z-index:9;text-align:center;pointer-events:none;font-size:calc(var(--u) * 3);letter-spacing:.06em;font-style:italic;font-weight:900;animation:1.4s ease-out forwards ec-banner;position:absolute}.ec-banner.is-gold{color:#fff3a0;text-shadow:0 .08em #a04a00,.06em 0 #a04a00,-.06em 0 #a04a00,0 -.06em #a04a00}@keyframes ec-banner{0%{opacity:0;transform:scale(2.4)}15%{opacity:1;transform:scale(1)}75%{opacity:1}to{transform:translateY(calc(var(--u) * -2));opacity:0}}.ec-over{z-index:9;font-size:calc(var(--u) * 6);letter-spacing:.2em;color:#ffe0d8;text-shadow:0 .06em #8a1a10,.05em 0 #8a1a10,-.05em 0 #8a1a10,0 -.05em #8a1a10;pointer-events:none;place-items:center;font-weight:900;animation:.6s cubic-bezier(.2,1.4,.4,1) ec-over;display:grid;position:absolute;inset:0}@keyframes ec-over{0%{opacity:0;transform:scale(3)}to{opacity:1;transform:scale(1)}}.ec-controls{z-index:7;pointer-events:none;position:absolute;inset:0}.ec-controls>*{pointer-events:auto}.ec-controls>.ec-forge{pointer-events:none}.ec-forge{z-index:9;left:50%;top:calc(var(--u) * 15.4);width:calc(var(--u) * 34);height:calc(var(--u) * 7);position:absolute;transform:translate(-50%)}.ec-guide-board{box-sizing:border-box;border:0 solid #0000;border-image:url(/images/element-cards/ui/assembly-board.webp) 64 fill / calc(var(--u) * 1.5) stretch;width:100%;height:100%;font-family:var(--ec-display);font-weight:400;font-size:calc(var(--u) * 4.4);justify-content:center;align-items:center;line-height:1;display:flex;position:relative}.ec-guide-formula{align-items:baseline;gap:calc(var(--u) * .3);white-space:nowrap;display:inline-flex}.ec-chunk{color:#f4f8ec4d;align-items:baseline;padding:0 .06em;display:inline-flex;position:relative}.ec-chunk sub{vertical-align:baseline;margin-left:.03em;font-size:.6em;translate:0 .32em}.ec-chunk.is-done{color:#ffe27a;text-shadow:0 0 .25em #ffe27abf,0 .06em #0d2418;animation:.3s cubic-bezier(.2,1.8,.4,1) .2s backwards ec-chunk-in}.ec-chunk.is-next{color:#f4f8ec8c}.ec-chunk.is-next:after{content:"";background:#ffe27a;border-radius:.05em;height:.1em;animation:.9s ease-in-out infinite ec-caret;position:absolute;bottom:-.22em;left:4%;right:4%;box-shadow:0 0 .2em #ffe27a}.ec-chunk.is-missed{animation:.25s 2 ec-jolt-x}.ec-chunk.is-missed:after{background:#ff6a58;animation:none;box-shadow:0 0 .25em #ff6a58}@keyframes ec-chunk-in{0%{color:#f4f8ec4d;text-shadow:none;transform:scale(1)}50%{color:#fff;transform:scale(1.35)}to{transform:none}}@keyframes ec-caret{50%{opacity:.35}}@keyframes ec-jolt-x{25%{translate:calc(var(--u) * -.8) 0}75%{translate:calc(var(--u) * .8) 0}}.ec-verdict{z-index:2;pointer-events:none;font-family:var(--ec-display);place-items:center;font-weight:400;display:grid;position:absolute;inset:0}.ec-verdict-formula{align-items:baseline;gap:calc(var(--u) * .5);font-size:min(calc(var(--u) * 3.6), calc(var(--u) * 30 / var(--chars,1)));white-space:nowrap;color:#ffe27a;text-shadow:0 .07em #0d2418,.05em 0 #0d2418,-.05em 0 #0d2418;line-height:1;display:inline-flex}.ec-verdict .ec-formula{letter-spacing:.02em;align-items:baseline;font-family:inherit;font-weight:400;display:inline-flex}.ec-verdict .ec-formula sub{vertical-align:baseline;margin-left:.03em;font-size:.66em;translate:0 .32em}.ec-atom{display:inline-block;position:relative}.ec-verdict-foot{justify-content:center;align-items:center;gap:calc(var(--u) * .8);box-sizing:border-box;flex-wrap:wrap;width:max-content;max-width:100%;display:flex;position:absolute;top:100%;left:50%;translate:-50% -18%}.ec-verdict-stamp{white-space:nowrap;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;font-size:calc(var(--u) * 3);letter-spacing:.04em;color:#fff3a0;text-shadow:0 .08em #a04a00,.06em 0 #a04a00,-.06em 0 #a04a00,0 -.06em #a04a00,0 .16em #6b3f1d;flex:none;font-style:italic;font-weight:900;rotate:-6deg}.ec-verdict-speed{white-space:nowrap;align-items:center;gap:calc(var(--u) * .3);font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;font-size:calc(var(--u) * 1.4);color:#fff;text-shadow:0 .1em #7a4a00,.08em 0 #7a4a00,-.08em 0 #7a4a00;flex:none;font-weight:900;display:inline-flex;rotate:5deg}.ec-verdict-speed img{height:calc(var(--u) * 2.2)}.ec-verdict-name{justify-content:center;align-items:baseline;gap:calc(var(--u) * .6);min-width:0;max-width:100%;padding:calc(var(--u) * .35) calc(var(--u) * 1.4);border-radius:calc(var(--u) * .7);background:var(--ec-paper);border:calc(var(--u) * .18) solid var(--ec-wood-dark);box-shadow:0 calc(var(--u) * .25) 0 #3c1e0a59;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;font-size:calc(var(--u) * 1.7);color:var(--ec-ink);flex-wrap:wrap;flex:0 auto;font-weight:900;display:flex}.ec-verdict-substance{text-align:center;min-width:0;word-break:auto-phrase}.ec-verdict-substance:lang(ko){word-break:keep-all}.ec-verdict-name small{color:var(--ec-red);font-size:.75em}.ec-verdict.is-correct .ec-verdict-name{border-color:#3a8a3a}.ec-verdict-ring{mix-blend-mode:screen;opacity:0;pointer-events:none;background:radial-gradient(closest-side,#fffadcd9,#ffe27a73 45%,#ffe27a00 100%);position:absolute;inset:-40% -12%}.ec-verdict-stars i{width:calc(var(--u) * 3.2);aspect-ratio:1;mix-blend-mode:screen;background:radial-gradient(closest-side,#fff 0,#ffeea0e6 20%,#ffe27a59 50%,#ffe27a00 100%);position:absolute;scale:0}.ec-verdict-stars i:first-child{top:-30%;left:-3%}.ec-verdict-stars i:nth-child(2){width:calc(var(--u) * 1.6);top:-25%;right:-3%}.ec-verdict-stars i:nth-child(3){width:calc(var(--u) * 1.5);bottom:-35%;left:6%}.ec-verdict-stars i:nth-child(4){bottom:-30%;right:8%}.ec-verdict.is-correct .ec-atom{animation:ec-atom-lock 60ms calc(var(--i) * var(--step,40ms)) steps(2) backwards, ec-atom-split .22s calc(var(--hold) - .24s) steps(4) forwards}.ec-verdict.is-correct .ec-atom:nth-child(2n){--rise:1}.ec-verdict.is-correct .ec-verdict-formula{animation:.4s cubic-bezier(.2,1.8,.4,1) .17s both ec-formula-pop}.ec-verdict.is-correct .ec-verdict-ring{animation:.32s steps(5,end) .17s forwards ec-ring}.ec-verdict.is-correct .ec-verdict-stars i{animation:.4s steps(5,end) .17s forwards ec-star}.ec-verdict.is-correct .ec-verdict-stars i:nth-child(2n){animation-delay:.23s}.ec-verdict.is-correct .ec-verdict-stamp{animation:ec-stamp .2s .17s steps(4) backwards, ec-verdict-out .2s calc(var(--hold) - .24s) steps(3) forwards}.ec-verdict.is-correct .ec-verdict-speed,.ec-verdict.is-correct .ec-verdict-name{animation:ec-pop .2s .3s steps(4) backwards, ec-verdict-out .2s calc(var(--hold) - .24s) steps(3) forwards}.ec-forge.is-correct .ec-guide-board{animation:.45s steps(5,end) .17s ec-board-flash}@keyframes ec-atom-lock{0%{color:#fff;opacity:.4;transform:translateY(-45%)scale(1.5)}to{color:#ffe27a;opacity:1;transform:none}}@keyframes ec-atom-split{to{transform:translate(calc((var(--i) - 1.5) * var(--u) * 1.4), calc(var(--u) * (var(--rise,-1) * 2.2))) rotate(calc((var(--i) - 1.5) * 25deg)) scale(.6);opacity:0}}@keyframes ec-formula-pop{0%{scale:1}35%{scale:1.32}to{scale:1.12}}@keyframes ec-ring{0%{opacity:1;scale:.7}to{opacity:0;scale:1.3}}@keyframes ec-star{0%{rotate:0deg;scale:0}40%{scale:1.2}to{rotate:90deg;scale:0}}@keyframes ec-stamp{0%{opacity:0;scale:2.6}}@keyframes ec-pop{0%{opacity:0;scale:.3}}@keyframes ec-verdict-out{to{opacity:0;scale:.6}}@keyframes ec-board-flash{0%{filter:brightness(1.5)drop-shadow(0 0 #ffd34a)}20%{filter:brightness(1.3) drop-shadow(0 calc(var(--u) * -.3) 0 #ffd34a) drop-shadow(0 calc(var(--u) * .3) 0 #ffd34a)}to{filter:none}}.ec-verdict.is-timeout .ec-verdict-formula{color:#f4f8ec;animation:ec-drop .24s .42s steps(4) backwards, ec-verdict-out .2s calc(var(--hold) - .24s) steps(3) forwards}.ec-verdict .ec-atom[data-mark]{color:#ffd34a;animation:.24s .72s 2 ec-mark}.ec-verdict .ec-atom[data-mark]:after{content:"";background:#ffd34a;border-radius:.06em;height:.12em;position:absolute;bottom:-.2em;left:0;right:0}.ec-verdict.is-timeout .ec-verdict-stamp{color:#ffd0c8;text-shadow:0 .08em #8a1a10,.06em 0 #8a1a10,-.06em 0 #8a1a10,0 -.06em #8a1a10,0 .16em #4a0e08;animation:ec-stamp .18s steps(3) backwards, ec-jolt-x .25s .18s, ec-verdict-out .2s calc(var(--hold) - .24s) steps(3) forwards}.ec-verdict.is-timeout .ec-verdict-name{border-color:var(--ec-red);animation:ec-pop .2s .5s steps(4) backwards, ec-verdict-out .2s calc(var(--hold) - .24s) steps(3) forwards}@keyframes ec-drop{0%{opacity:0;transform:translateY(-70%)scale(1.3)}}@keyframes ec-mark{50%{transform:translateY(-18%)}}.ec-hand{left:50%;bottom:calc(var(--u) * -3.6);width:0;height:calc(var(--u) * 17.6);position:absolute}.ec-card{--tone:#4a6a8a;width:calc(var(--u) * 13);aspect-ratio:335/452;cursor:pointer;color:#fff;font:inherit;transform-origin:50% 120%;transform:translate(calc(-50% + var(--u) * var(--fan) * var(--fx)), calc(var(--u) * var(--fy))) rotate(var(--fa));z-index:var(--z);background:url(/images/element-cards/ui/card-frame.webp) center / 100% 100% no-repeat, linear-gradient(color-mix(in srgb, var(--tone) 70%, white) 0 30%, var(--tone) 30%) center / 86% 90% no-repeat;filter:drop-shadow(0 calc(var(--u) * .4) 0 #3c1e0a59);border:0;padding:0;transition:transform .2s cubic-bezier(.2,1.2,.4,1),translate .12s cubic-bezier(.2,1.6,.4,1),scale .12s cubic-bezier(.2,1.6,.4,1),filter .12s;animation:.32s cubic-bezier(.2,1.4,.4,1) backwards ec-deal;position:absolute;bottom:0;left:0}.ec-card[data-group=nonmetal]{--tone:#2f9a6a}.ec-card[data-group=halogen]{--tone:#8aa42a}.ec-card[data-group=alkali]{--tone:#d0503a}.ec-card[data-group=alkaline]{--tone:#e08a2a}.ec-card[data-group=metal]{--tone:#4a7ab0}.ec-card-face{display:block;position:absolute;inset:0}.ec-card-number{font-size:calc(var(--u) * 1.15);font-weight:800;position:absolute;top:9%;left:14%}.ec-card-symbol{font-family:Georgia,Times New Roman,serif;font-size:calc(var(--u) * 4.6);text-shadow:0 calc(var(--u) * .25) 0 #0000004d;align-items:baseline;font-weight:900;line-height:1;display:flex;position:absolute;top:16%;left:12%}.ec-card-symbol sub{vertical-align:baseline;margin-left:.04em;font-size:.55em;translate:0 .3em}.ec-card-name{font-size:calc(var(--u) * 1.05);white-space:nowrap;text-overflow:ellipsis;font-weight:800;position:absolute;top:54%;left:13%;right:10%;overflow:hidden}.ec-card:disabled{cursor:default;filter:brightness(.75)saturate(.7)}@media (hover:hover){.ec-card:hover:not(:disabled){translate:0 calc(var(--u) * -5);z-index:30;filter:drop-shadow(0 calc(var(--u) * .8) 0 #3c1e0a4d) brightness(1.06);scale:1.16}}.ec-card.is-selected:not(:disabled){translate:0 calc(var(--u) * -5);z-index:31;filter:drop-shadow(0 0 calc(var(--u) * .5) #ffd34a) drop-shadow(0 0 calc(var(--u) * .2) #fff3a0) brightness(1.1);scale:1.16}@keyframes ec-deal{0%{translate:0 calc(var(--u) * 14)}to{translate:0}}.ec-fly{--tone:#4a6a8a;z-index:25;pointer-events:none;color:#fff;background:url(/images/element-cards/ui/card-frame.webp) center / 100% 100% no-repeat, linear-gradient(color-mix(in srgb, var(--tone) 70%, white) 0 30%, var(--tone) 30%) center / 86% 90% no-repeat;position:absolute}.ec-fly[data-group=nonmetal]{--tone:#2f9a6a}.ec-fly[data-group=halogen]{--tone:#8aa42a}.ec-fly[data-group=alkali]{--tone:#d0503a}.ec-fly[data-group=alkaline]{--tone:#e08a2a}.ec-fly[data-group=metal]{--tone:#4a7ab0}.ec-ready-stage{place-items:center;display:grid}.ec-ready{width:calc(var(--u) * 64);position:relative}.ec-ready-steps{gap:calc(var(--u) * 1);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.ec-ready-steps li{align-items:center;gap:calc(var(--u) * .8);padding:calc(var(--u) * .8) calc(var(--u) * 1);border-radius:calc(var(--u) * .8);font-size:calc(var(--u) * 1.3);background:#b9773f24;font-weight:800;line-height:1.4;display:flex}.ec-ready-steps b{width:calc(var(--u) * 2.6);height:calc(var(--u) * 2.6);background:var(--ec-wood);color:var(--ec-light);font-family:Georgia,serif;font-size:calc(var(--u) * 1.5);border-radius:50%;flex:none;place-items:center;display:grid}.ec-ready-steps span,.ec-ready-keys dd,.ec-ready-touch{text-wrap:balance}.ec-ready-keys{margin-top:calc(var(--u) * 1.2);flex-direction:column;align-items:center;display:flex}.ec-ready-keys h3{margin-top:0}.ec-ready-keys dl{gap:calc(var(--u) * .45) calc(var(--u) * 1.4);grid-template-columns:max-content minmax(0,auto);align-items:center;margin:0;display:grid}.ec-ready-keys dl>div{display:contents}.ec-ready-keys dt{white-space:nowrap;justify-self:end}.ec-ready-keys dd{margin:0;font-weight:700}.ec-ready-keys kbd{white-space:nowrap;border:1px solid var(--ec-wood);color:var(--ec-ink);background:#fff;border-radius:.3em;padding:.1em .5em;display:inline-block}.ec-countdown{font-family:Georgia,serif;font-size:calc(var(--u) * 16);color:#fff3a0;text-shadow:0 .05em #a04a00,.04em 0 #a04a00,-.04em 0 #a04a00,0 -.04em #a04a00;font-weight:900;animation:.6s steps(10,end) forwards ec-count-down;position:relative}@keyframes ec-count-down{0%{opacity:0;transform:scale(2.2)}25%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.ec-result-overlay{background:#f3e3c4 url(/images/element-cards/menu-shop.webp) 50%/cover no-repeat}.ec-result-overlay:before{content:"";pointer-events:none;background:#462d1929;position:absolute;inset:0}.ec-result-overlay>*{position:relative}.ec-result{width:calc(var(--u) * 60);padding:calc(var(--u) * .6) calc(var(--u) * 2) calc(var(--u) * 2.6);text-align:center;overflow:visible}.ec-result .ec-actions{margin-top:calc(var(--u) * .8)}.ec-result-score small{color:var(--ec-muted);font-size:calc(var(--u) * 1.2);font-weight:800;display:block}.ec-result-score b{font-family:Georgia,serif;font-size:calc(var(--u) * 4.2);color:var(--ec-wood-dark);font-variant-numeric:tabular-nums}.ec-result-best{color:#d04a00;font-weight:900;font-size:calc(var(--u) * 1.6);animation:.4s cubic-bezier(.2,1.8,.4,1) ec-pop,.8s .4s 3 ec-blink;display:block}.ec-result-stats{gap:calc(var(--u) * .8);margin:calc(var(--u) * 1) 0 0;grid-template-columns:repeat(4,1fr);display:grid}.ec-result-stat{padding:calc(var(--u) * .5);border-radius:calc(var(--u) * .6);border:calc(var(--u) * .12) solid #6b3f1d59;background:#b9773f1f;flex-direction:column;align-items:center;display:flex}.ec-result-stat img{height:calc(var(--u) * 2.6)}.ec-result-stat dt{font-size:calc(var(--u) * 1);color:var(--ec-muted);font-weight:700}.ec-result-stat dd{margin:calc(var(--u) * .2) 0 0;font-size:calc(var(--u) * 1.9);color:var(--ec-ink);font-weight:900}.ec-result-list{justify-content:center;gap:calc(var(--u) * .5);max-height:calc(var(--u) * 7);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.ec-result-item{align-items:baseline;gap:calc(var(--u) * .5);padding:calc(var(--u) * .2) calc(var(--u) * .8);border:calc(var(--u) * .1) solid #6b3f1d4d;font-size:calc(var(--u) * 1.1);background:#fff;border-radius:999px;display:flex}.ec-result-item .ec-formula{font-size:calc(var(--u) * 1.5);color:#1f6a9a}.ec-ranking{width:calc(var(--u) * 64)}.ec-ranking-scroll{max-height:calc(var(--u) * 28);overflow:auto}.ec-ranking table{border-collapse:collapse;width:100%;font-size:calc(var(--u) * 1.25)}.ec-ranking th,.ec-ranking td{padding:calc(var(--u) * .45) calc(var(--u) * .8);text-align:left;white-space:nowrap;border-bottom:1px solid #6b3f1d33}.ec-ranking th{background:var(--ec-paper);color:var(--ec-wood-dark);font-size:calc(var(--u) * 1.05);position:sticky;top:0}.ec-ranking .ec-num{text-align:right;font-variant-numeric:tabular-nums}.ec-rank-cell{color:var(--ec-wood-dark);font-family:Georgia,serif;font-weight:900}.ec-ranking tr.is-mine td{background:#ffe9a0;font-weight:900}.ec-ranking tr.is-mine td:first-child{box-shadow:inset calc(var(--u) * .4) 0 0 #e08a2a}.ec-you{margin-left:calc(var(--u) * .6);padding:0 calc(var(--u) * .5);color:#fff;background:#e08a2a;border-radius:999px;font-size:.75em}.ec-ranking-me{text-align:center;color:var(--ec-ink);font-weight:800}@media (aspect-ratio<=4/5){.ec-play:not(.ec-title-play){aspect-ratio:auto;flex-direction:column;width:100vw;display:flex}.ec-play:not(.ec-title-play)>.ec-stage{aspect-ratio:16/9;width:100%;position:relative;inset:auto}.ec-play.ec-ready-play>.ec-stage{aspect-ratio:auto;min-height:calc(100vh - var(--ec-bar-top));box-sizing:border-box;padding:calc(var(--u) * 2) 0;overflow:visible}.ec-ready-play{--u:1.9cqw}.ec-panel.ec-ready{width:calc(var(--u) * 48);max-height:none}.ec-title-menu .ec-button,.ec-ready .ec-button-primary{min-height:max(44px,16cqw);font-size:4.6cqw}.ec-ready .ec-button-primary{width:calc(88cqw - var(--u) * 6 - 8cqw)}.ec-ready-steps{grid-template-columns:1fr}.ec-ready-keys{display:none}.ec-ready-touch{margin-top:calc(var(--u) * 1.4);font-size:calc(var(--u) * 1.4);color:var(--ec-ink);font-weight:700}.ec-vitals,.ec-banner{--u:1.25cqw}.ec-vitals{width:calc(var(--u) * 24)}.ec-controls{--u:1.9cqw;align-items:center;gap:calc(var(--u) * 1.6);padding:calc(var(--u) * 1) calc(var(--u) * 1.5) calc(var(--u) * 3);background:#3a2d20;flex-direction:column;display:flex;position:relative;inset:auto}.ec-topic{width:calc(var(--u) * 40);margin:0;position:relative;top:auto;left:auto}.ec-topic-plate{padding-top:calc(var(--u) * 4.6)}.ec-topic-plate strong{font-size:calc(var(--u) * 3.6)}.ec-forge{width:100%;height:calc(var(--u) * 9);position:relative;top:auto;left:auto;transform:none}.ec-guide-board{font-size:calc(var(--u) * 5)}.ec-hand{justify-content:center;gap:calc(var(--u) * 1.4);flex-wrap:wrap;width:100%;height:auto;display:flex;position:relative;bottom:auto;left:auto}.ec-card{width:calc((100% - var(--u) * 4.2) / 4);transform-origin:50%;position:relative;transform:none}.ec-card.is-selected:not(:disabled){translate:0 calc(var(--u) * -1.2);scale:1.06}.ec-card-symbol{font-size:calc(var(--u) * 4.4)}.ec-card-name{font-size:calc(var(--u) * 1.3)}.ec-pause-button{top:calc(var(--u) * 9)}.ec-overlay{position:fixed}.ec-panel{--u:1.9cqw;max-width:94vw;max-height:90vh}}@media (prefers-reduced-motion:reduce){.ec-topic-plate,.ec-card,.ec-play.is-tense .ec-tension,.ec-topic.is-tense .ec-hourglass{animation:none}.ec-streak.is-level-3{animation:.3s cubic-bezier(.2,1.8,.4,1) ec-pop}.ec-verdict *,.ec-forge .ec-guide-board{transition:none!important;animation:none!important}.ec-chunk,.ec-chunk:after,.ec-timer-bar.is-hit{animation:none}}