.number-chart-shell{position:relative;display:flex;min-height:100svh;overflow:hidden;align-items:center;justify-content:center;padding:72px 12px 22px;color:#3d3966;background:radial-gradient(circle at 13% 18%,rgba(106,226,255,.32),transparent 27%),radial-gradient(circle at 87% 73%,rgba(184,141,255,.28),transparent 29%),linear-gradient(180deg,#c6f0ff,#eee5ff 55%,#fff1c7);font-family:var(--font-nunito),ui-rounded,"Arial Rounded MT Bold",sans-serif}.number-chart-window{position:relative;width:min(1180px,100%);height:clamp(620px,calc(100svh - 128px),790px);overflow:hidden;border:6px solid rgba(255,255,255,.96);border-radius:38px;isolation:isolate;background:#dff6ff;box-shadow:0 12px 0 #768fc0,0 26px 58px rgba(43,59,111,.3)}.number-chart-background{z-index:-5;object-fit:cover;object-position:center;image-rendering:auto;transform:translateZ(0) scale(1.01)}.number-chart-lighting{position:absolute;z-index:-3;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(47,90,146,.12),transparent 28%),radial-gradient(ellipse at 50% 67%,rgba(255,255,255,.26),transparent 54%)}.number-chart-mascot{position:absolute!important;z-index:7;bottom:.5%;left:.6%;width:clamp(150px,16vw,205px);aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 15px 10px rgba(43,51,92,.3))}.number-chart-game{position:relative;z-index:5;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;padding:14px 18px 13px}.number-chart-hud{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;align-items:center;gap:clamp(12px,2vw,24px);min-height:76px;padding:9px 13px 9px 17px;border-radius:27px;color:#fff;background:linear-gradient(105deg,rgba(76,135,184,.89),rgba(108,76,177,.82));box-shadow:0 13px 28px rgba(43,61,112,.24),inset 0 1px rgba(255,255,255,.47);backdrop-filter:blur(13px) saturate(1.16)}.number-chart-title{display:flex;min-width:0;align-items:center;gap:12px}.number-chart-title>span{display:grid;width:49px;height:49px;flex:0 0 auto;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(145deg,#84edff,#6d70dd);box-shadow:inset 0 3px 4px rgba(255,255,255,.65),0 6px 12px rgba(37,54,115,.3)}.number-chart-title svg{width:28px;height:28px;stroke-width:2.7}.number-chart-title h1,.number-chart-title p{margin:0}.number-chart-title p{color:#bff8ff;font-size:12px;font-weight:1000;letter-spacing:.15em;text-transform:uppercase}.number-chart-title h1{overflow:hidden;margin-top:1px;font-size:clamp(17px,2vw,24px);font-weight:1000;line-height:1.1;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 4px rgba(32,41,92,.53)}.number-chart-progress{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.4)}.number-chart-progress svg{width:clamp(20px,2.3vw,27px);height:clamp(20px,2.3vw,27px);filter:drop-shadow(0 3px 2px rgba(47,42,87,.3))}.number-chart-progress svg.is-filled{color:#ffe56d;fill:currentColor;animation:number-chart-star-pop .42s ease both}.number-chart-progress strong{min-width:42px;margin-left:3px;font-size:14px;font-weight:1000}.number-chart-sound{display:grid;width:54px;height:54px;cursor:pointer;place-items:center;border:0;border-radius:19px;color:#fff;background:linear-gradient(145deg,#ff9fc6,#cc5ca3);box-shadow:inset 0 3px 3px rgba(255,255,255,.62),0 6px 0 #934378,0 10px 18px rgba(53,42,92,.24);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;touch-action:manipulation}.number-chart-sound:hover{filter:brightness(1.08);transform:translateY(-2px)}.number-chart-sound:active{transform:translateY(4px);box-shadow:inset 0 3px 3px rgba(255,255,255,.5),0 2px 0 #934378}.number-chart-sound svg{width:27px;height:27px;stroke-width:3}.number-chart-stage{display:grid;grid-template-rows:minmax(76px,.52fr) minmax(305px,2.25fr) minmax(90px,.68fr) minmax(28px,.2fr);min-height:0;padding:6px clamp(40px,7vw,92px) 0}.number-chart-stage h2{align-self:center;margin:0;color:#fff;font-size:clamp(29px,4.2vw,48px);font-weight:1000;line-height:1;text-align:center;text-shadow:0 4px 0 #52628e,0 0 17px rgba(63,102,137,.72),0 7px 17px rgba(41,55,94,.32)}.number-chart-board{position:relative;display:grid;width:min(880px,100%);align-self:center;justify-self:center;padding:24px 25px 25px;border-radius:30px;background:linear-gradient(155deg,rgba(61,72,133,.94),rgba(49,46,106,.94));box-shadow:inset 0 4px rgba(255,255,255,.2),inset 0 -8px rgba(16,19,62,.28),0 17px 28px rgba(37,40,78,.3);backdrop-filter:blur(10px)}.number-chart-status-lights{position:absolute;top:9px;left:20px;display:flex;gap:6px}.number-chart-status-lights i{width:9px;height:9px;border-radius:50%;background:#ff7f9d;box-shadow:0 0 7px currentColor}.number-chart-status-lights i:nth-child(2){background:#ffe06e}.number-chart-status-lights i:nth-child(3){background:#79e6ae}.number-chart-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(5px,.75vw,9px)}.number-chart-cell{display:grid;min-width:0;aspect-ratio:1.2;place-items:center;border-radius:clamp(7px,1vw,12px);color:#344f6c;background:linear-gradient(155deg,#fff,#e6f7ff);box-shadow:inset 0 3px rgba(255,255,255,.9),0 4px 0 #9bbdcc,0 7px 9px rgba(27,45,77,.18);font-size:clamp(15px,2.2vw,24px);font-weight:1000;line-height:1}.number-chart-cell.is-missing{color:#fff;background:linear-gradient(155deg,#ff9bb2,#e95683);box-shadow:inset 0 3px rgba(255,255,255,.6),0 4px 0 #a83a5d,0 0 20px rgba(255,103,148,.92);font-size:clamp(23px,3.2vw,35px);text-shadow:0 3px 0 #a83a5d;animation:number-chart-missing 1s ease-in-out infinite alternate}.number-chart-choices{display:grid;grid-template-columns:repeat(4,minmax(76px,1fr));align-items:center;gap:clamp(12px,2.2vw,25px);padding:7px clamp(34px,6vw,82px) 4px clamp(170px,18vw,215px)}.number-chart-choice{display:grid;min-height:70px;cursor:pointer;place-items:center;border:0;border-radius:22px;color:#4e4470;background:linear-gradient(155deg,#fffef5,#ebe4ff);box-shadow:inset 0 3px rgba(255,255,255,.94),0 7px 0 #8e7fb4,0 12px 16px rgba(48,43,73,.21);font-size:clamp(30px,4.2vw,46px);font-weight:1000;line-height:1;transition:filter .16s ease,box-shadow .16s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.number-chart-choice:hover:not(:disabled){filter:brightness(1.04);box-shadow:inset 0 3px rgba(255,255,255,.94),0 7px 0 #8e7fb4,0 0 0 5px rgba(255,234,109,.78),0 13px 17px rgba(48,43,73,.21)}.number-chart-choice:disabled{cursor:default}.number-chart-choice.is-correct{color:#fff;background:linear-gradient(155deg,#6de0a1,#31ae72);box-shadow:inset 0 3px rgba(255,255,255,.62),0 7px 0 #1b7149,0 0 23px rgba(82,255,170,.9);text-shadow:0 3px 0 #1b7149}.number-chart-choice.is-wrong{color:#fff;background:linear-gradient(155deg,#ff9bb0,#dc5d7c);box-shadow:inset 0 3px rgba(255,255,255,.6),0 7px 0 #8d3452;text-shadow:0 3px 0 #8d3452}.number-chart-feedback{align-self:end;min-height:25px;margin:0;color:#fff;font-size:clamp(14px,1.65vw,18px);font-weight:1000;text-align:center;text-shadow:0 3px 0 #526f81,0 0 10px rgba(45,74,86,.65);padding-left:clamp(125px,15vw,180px)}.number-chart-feedback.is-correct{color:#ceffe0}.number-chart-feedback.is-wrong{color:#ffe0e7}.number-chart-choice:focus-visible,.number-chart-sound:focus-visible{outline:5px solid #ffe66d;outline-offset:4px}@keyframes number-chart-star-pop{0%{transform:scale(.45) rotate(-20deg)}70%{transform:scale(1.24) rotate(8deg)}}@keyframes number-chart-missing{to{transform:scale(1.07);filter:brightness(1.08)}}@media (max-width:900px){.number-chart-shell{padding:66px 8px 14px}.number-chart-window{height:clamp(610px,calc(100svh - 90px),770px);border-width:5px;border-radius:32px}.number-chart-game{padding:10px}.number-chart-stage{grid-template-rows:minmax(70px,.5fr) minmax(290px,2.2fr) minmax(86px,.65fr) minmax(27px,.2fr);padding-right:26px;padding-left:26px}.number-chart-board{padding:22px 18px 20px}.number-chart-choices{padding-right:24px;padding-left:155px}.number-chart-feedback{padding-left:135px}}@media (max-width:700px){.number-chart-shell{padding:58px 4px 8px}.number-chart-window{height:calc(100svh - 70px);min-height:600px;border-width:4px;border-radius:25px}.number-chart-game{padding:7px}.number-chart-hud{grid-template-columns:minmax(0,1fr) auto 47px;min-height:64px;gap:7px;padding:7px 8px;border-radius:21px}.number-chart-title{gap:7px}.number-chart-title>span{width:42px;height:42px;border-radius:15px}.number-chart-title svg{width:24px;height:24px}.number-chart-title p{font-size:9px;letter-spacing:.08em}.number-chart-title h1{font-size:14px}.number-chart-progress{gap:1px}.number-chart-progress svg{width:15px;height:15px}.number-chart-progress strong{display:none}.number-chart-sound{width:44px;height:44px;border-radius:15px}.number-chart-sound svg{width:23px;height:23px}.number-chart-stage{grid-template-rows:minmax(62px,.5fr) minmax(286px,2.35fr) minmax(150px,1.2fr) minmax(24px,.18fr);padding:5px 3px 0}.number-chart-stage h2{font-size:clamp(25px,8vw,34px)}.number-chart-board{width:100%;padding:19px 7px 13px;border-radius:20px}.number-chart-status-lights{top:6px;left:12px;gap:4px}.number-chart-status-lights i{width:7px;height:7px}.number-chart-grid{gap:3px}.number-chart-cell{border-radius:5px;font-size:clamp(10px,3.1vw,14px);box-shadow:inset 0 2px rgba(255,255,255,.9),0 3px 0 #9bbdcc}.number-chart-cell.is-missing{font-size:clamp(17px,5vw,24px);box-shadow:inset 0 2px rgba(255,255,255,.6),0 3px 0 #a83a5d,0 0 13px rgba(255,103,148,.85)}.number-chart-mascot{bottom:-2px;left:-7px;width:112px}.number-chart-choices{grid-template-columns:repeat(2,minmax(72px,1fr));gap:9px 11px;padding:8px 7px 5px 96px}.number-chart-choice{min-height:58px;border-radius:18px;font-size:clamp(29px,9vw,38px)}.number-chart-feedback{padding-left:90px;font-size:12px}}@media (max-width:430px){.number-chart-title>span{display:none}.number-chart-progress svg{width:14px;height:14px}.number-chart-board{padding-right:4px;padding-left:4px}.number-chart-grid{gap:2px}.number-chart-mascot{left:-11px;width:105px}.number-chart-choices{padding-left:86px}}@media (max-height:690px) and (min-width:701px){.number-chart-window{height:calc(100svh - 86px);min-height:550px}.number-chart-hud{min-height:66px}.number-chart-stage{grid-template-rows:58px minmax(260px,1fr) 78px 24px;padding-top:4px}.number-chart-board{width:min(780px,100%);padding-top:20px;padding-bottom:19px}.number-chart-cell{font-size:clamp(13px,1.9vw,20px)}.number-chart-choices{padding-top:4px;padding-bottom:2px}.number-chart-choice{min-height:62px}}@media (prefers-reduced-motion:reduce){.number-chart-cell.is-missing,.number-chart-progress svg.is-filled{animation:none}.number-chart-background{transform:none}}