*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#05070b;color:#eef5ff;font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;outline:0;cursor:pointer;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100dvh;min-height:100svh;overflow:hidden}
#particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.65;z-index:0}
.ambient{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.2;z-index:0;animation:ambientFloat 8s ease-in-out infinite}
.ambient-1{width:30vw;height:30vw;left:-12vw;top:15vh;background:#087cff}
.ambient-2{width:28vw;height:28vw;right:-12vw;bottom:-8vw;background:#7c3cff;animation-delay:-4s}

.topbar{
position:relative;
z-index:20;
width:100%;
height:clamp(58px,8vh,82px);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 clamp(14px,3vw,48px);
border-bottom:1px solid rgba(255,255,255,.07);
background:rgba(5,7,11,.55);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px)
}

.brand{
display:flex;
align-items:center;
gap:10px;
background:none;
font-size:clamp(12px,1vw,15px);
font-weight:800;
letter-spacing:.22em
}

.brand-mark{
display:grid;
place-items:center;
width:34px;
height:34px;
border:1px solid rgba(115,204,255,.5);
border-radius:10px;
color:#72d9ff;
background:rgba(70,170,255,.08);
box-shadow:0 0 25px rgba(50,160,255,.15)
}

.top-actions{display:flex;gap:8px}

.icon-btn{
width:clamp(38px,4vw,46px);
height:clamp(38px,4vw,46px);
border:1px solid rgba(255,255,255,.09);
border-radius:14px;
background:rgba(255,255,255,.035);
display:grid;
place-items:center;
font-size:18px;
transition:.25s;
backdrop-filter:blur(12px)
}

.icon-btn:hover{
background:rgba(255,255,255,.09);
transform:translateY(-2px)
}

.icon-btn:active{transform:scale(.9)}

.lang-btn{
font-size:11px;
font-weight:800;
letter-spacing:.08em
}

main{
position:relative;
z-index:5;
width:100%;
height:calc(100% - clamp(58px,8vh,82px))
}

.screen{
position:absolute;
inset:0;
display:none;
overflow:hidden;
padding:clamp(12px,2.5vh,30px) clamp(12px,3vw,48px)
}

.screen.active{
display:flex;
flex-direction:column;
animation:screenIn .42s cubic-bezier(.2,.8,.2,1)
}

.hero{
position:relative;
display:flex;
flex:1;
min-height:0;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
overflow:hidden
}

.hero-orbit{
position:absolute;
border:1px solid rgba(100,190,255,.12);
border-radius:50%;
pointer-events:none
}

.orbit-a{
width:min(42vw,430px);
height:min(42vw,430px);
animation:spin 22s linear infinite
}

.orbit-b{
width:min(31vw,320px);
height:min(31vw,320px);
border-style:dashed;
animation:spinReverse 15s linear infinite
}

.hero-number-wrap{
position:relative;
width:clamp(100px,15vh,180px);
height:clamp(100px,15vh,180px);
display:grid;
place-items:center;
margin-bottom:clamp(10px,2vh,24px);
animation:heroFloat 4s ease-in-out infinite
}

.hero-number-glow{
position:absolute;
inset:8%;
border-radius:50%;
background:radial-gradient(circle,rgba(83,205,255,.35),transparent 68%);
filter:blur(15px);
animation:pulseGlow 2.5s ease-in-out infinite
}

.hero-number{
position:relative;
width:100%;
height:100%;
display:grid;
place-items:center;
border:1px solid rgba(116,213,255,.38);
border-radius:50%;
font-size:clamp(58px,10vh,110px);
font-weight:200;
color:#dff8ff;
background:radial-gradient(circle at 35% 25%,rgba(104,217,255,.18),rgba(255,255,255,.025) 55%,rgba(255,255,255,.01));
box-shadow:inset 0 0 40px rgba(95,200,255,.08),0 0 60px rgba(30,140,255,.14)
}

.eyebrow{
font-size:clamp(9px,1vw,12px);
font-weight:800;
letter-spacing:.24em;
color:#65cfff;
text-transform:uppercase
}

.hero h1{
margin:clamp(6px,1vh,12px) 0;
font-size:clamp(34px,6vw,82px);
line-height:.95;
letter-spacing:-.055em;
background:linear-gradient(110deg,#fff,#a8c7da 45%,#69d8ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:titleReveal .7s both
}

.hero p{
max-width:560px;
margin:clamp(8px,1.5vh,16px) auto clamp(16px,2.5vh,30px);
font-size:clamp(12px,1.5vw,17px);
line-height:1.5;
color:#8292a5
}

.primary-btn,
.secondary-btn,
.reward-btn{
min-height:clamp(48px,6vh,62px);
padding:0 clamp(20px,3vw,38px);
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
gap:24px;
font-size:clamp(11px,1vw,14px);
font-weight:900;
letter-spacing:.1em;
transition:.25s
}

.primary-btn{
background:linear-gradient(135deg,#eafaff,#8edfff);
color:#041019;
box-shadow:0 14px 45px rgba(61,190,255,.18)
}

.primary-btn b{font-size:22px}

.primary-btn:hover{
transform:translateY(-3px);
box-shadow:0 18px 55px rgba(61,190,255,.3)
}

.primary-btn:active,
.secondary-btn:active,
.reward-btn:active{
transform:scale(.96)
}

.secondary-btn{
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.04)
}

.reward-btn{
border:1px solid rgba(102,213,255,.2);
background:rgba(70,190,255,.08);
color:#91e1ff
}

.stats-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(7px,1vw,14px);
width:min(720px,100%);
margin:0 auto clamp(10px,2vh,20px)
}

.stat-card{
min-height:clamp(58px,8vh,82px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:rgba(255,255,255,.025);
box-shadow:inset 0 1px rgba(255,255,255,.04);
transition:.25s
}

.stat-card:hover{
transform:translateY(-3px);
border-color:rgba(100,210,255,.18)
}

.stat-card span{
font-size:clamp(8px,1vw,10px);
font-weight:800;
letter-spacing:.16em;
color:#687789
}

.stat-card strong{
margin-top:4px;
font-size:clamp(19px,3vw,30px)
}

.home-panels{
width:min(720px,100%);
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(7px,1vw,14px);
margin:0 auto
}

.wide-card{
min-height:clamp(58px,8vh,78px);
display:flex;
align-items:center;
gap:12px;
text-align:left;
padding:12px clamp(12px,2vw,20px);
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:rgba(255,255,255,.025);
transition:.3s
}

.wide-card:hover{
transform:translateY(-3px);
border-color:rgba(100,210,255,.18);
background:rgba(100,200,255,.05)
}

.wide-card .card-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(100,210,255,.08);
color:#6edaff
}

.wide-card span:nth-child(2){
display:flex;
flex-direction:column;
min-width:0
}

.wide-card b{
font-size:clamp(10px,1vw,13px)
}

.wide-card small{
margin-top:3px;
color:#657486;
font-size:clamp(8px,1vw,10px)
}

.wide-card i{
margin-left:auto;
font-style:normal;
color:#647789;
font-size:20px
}

.section-head{
height:clamp(54px,8vh,74px);
display:flex;
align-items:center;
gap:14px;
flex-shrink:0
}

.section-head h2{
margin:3px 0 0;
font-size:clamp(25px,4vw,46px);
letter-spacing:-.04em
}

.back-btn{
width:42px;
height:42px;
flex-shrink:0;
border:1px solid rgba(255,255,255,.08);
border-radius:13px;
background:rgba(255,255,255,.035);
font-size:21px;
transition:.2s
}

.back-btn:hover{
transform:translateX(-3px);
background:rgba(255,255,255,.08)
}

.modes-grid{
width:min(1100px,100%);
margin:auto;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:clamp(8px,1.2vw,14px);

overflow-y:auto;
overflow-x:hidden;

padding-bottom:20px;

-webkit-overflow-scrolling:touch;
}

.mode-card{
position:relative;
min-width:0;
min-height:clamp(125px,20vh,185px);
padding:clamp(12px,1.5vw,20px);
display:flex;
flex-direction:column;
text-align:left;
border:1px solid rgba(255,255,255,.07);
border-radius:22px;
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
box-shadow:inset 0 1px rgba(255,255,255,.06),0 15px 45px rgba(0,0,0,.18);
overflow:hidden;
transition:.3s;
animation:cardIn .5s both
}

.mode-card:nth-child(2){animation-delay:.04s}
.mode-card:nth-child(3){animation-delay:.08s}
.mode-card:nth-child(4){animation-delay:.12s}
.mode-card:nth-child(5){animation-delay:.16s}
.mode-card:nth-child(6){animation-delay:.2s}
.mode-card:nth-child(7){animation-delay:.24s}
.mode-card:nth-child(8){animation-delay:.28s}
.mode-card:nth-child(9){animation-delay:.32s}
.mode-card:nth-child(10){animation-delay:.36s}

.mode-card:before{
content:"";
position:absolute;
width:120px;
height:120px;
right:-55px;
top:-55px;
border-radius:50%;
background:radial-gradient(circle,rgba(70,200,255,.15),transparent 70%);
transition:.4s
}

.mode-card:hover{
transform:translateY(-5px) scale(1.015);
border-color:rgba(100,210,255,.22);
box-shadow:0 20px 60px rgba(0,0,0,.3)
}

.mode-card:hover:before{
transform:scale(1.6)
}

.mode-number{
font-size:10px;
color:#5f7487;
letter-spacing:.18em
}

.mode-card h3{
margin:10px 0 5px;
font-size:clamp(11px,1.2vw,16px);
line-height:1.15
}

.mode-card p{
margin:0;
color:#6d7d8d;
font-size:clamp(9px,1vw,11px);
line-height:1.35
}

.mode-best{
margin-top:auto;
padding-top:12px;
color:#70d9ff;
font-size:clamp(8px,1vw,10px);
font-weight:800
}

.game-head{
height:clamp(48px,7vh,65px);
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:12px;
flex-shrink:0
}

.mode-name{
text-align:center;
font-size:clamp(10px,1.4vw,14px);
font-weight:900;
letter-spacing:.12em
}

.game-score{text-align:right}

.game-score span{
display:block;
font-size:8px;
color:#627385;
letter-spacing:.14em
}

.game-score strong{
font-size:clamp(17px,2.5vw,26px)
}

.game-stage{
position:relative;
width:min(620px,100%);
height:min(74vh,760px);
min-height:0;
margin:auto;
display:flex;
align-items:center;
justify-content:center
}

.stage-ring{
position:absolute;
border:1px solid rgba(90,200,255,.08);
border-radius:50%;
pointer-events:none
}

.ring-1{
width:90%;
aspect-ratio:1;
animation:spin 24s linear infinite
}

.ring-2{
width:74%;
aspect-ratio:1;
border-style:dashed;
animation:spinReverse 18s linear infinite
}

.ring-3{
width:56%;
aspect-ratio:1;
box-shadow:0 0 80px rgba(70,190,255,.07);
animation:pulseRing 3s ease-in-out infinite
}

.stage-content{
position:relative;
width:min(440px,88%);
max-height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center
}

.attempt-label,
.range-label{
font-size:clamp(8px,1vw,11px);
font-weight:800;
letter-spacing:.14em;
color:#617487
}

.range-label{
margin-top:5px;
color:#7891a5
}

.number-core{
position:relative;
width:clamp(100px,20vh,180px);
aspect-ratio:1;
margin:clamp(8px,1.8vh,18px) 0
}

.number-core-glow{
position:absolute;
inset:-25%;
border-radius:50%;
background:radial-gradient(circle,rgba(74,202,255,.22),transparent 65%);
filter:blur(18px);
animation:pulseGlow 2s ease-in-out infinite
}

.number-display{
position:relative;
width:100%;
height:100%;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(111,213,255,.28);
background:radial-gradient(circle at 35% 25%,rgba(105,215,255,.15),rgba(255,255,255,.025) 60%);
font-size:clamp(45px,9vh,82px);
font-weight:200;
letter-spacing:-.06em;
box-shadow:inset 0 0 45px rgba(100,200,255,.06),0 0 50px rgba(60,170,255,.1);
transition:.3s
}

.hint-display{
min-height:18px;
color:#6bd8ff;
font-size:clamp(8px,1vw,11px);
font-weight:800;
letter-spacing:.12em;
text-align:center
}

.timer-wrap{
width:min(330px,80%);
height:18px;
margin:5px 0;
display:flex;
align-items:center;
gap:8px
}

.timer-bar{
height:3px;
flex:1;
border-radius:10px;
background:rgba(255,255,255,.07);
overflow:hidden
}

.timer-bar span{
display:block;
width:0;
height:100%;
background:#67d7ff;
box-shadow:0 0 12px #67d7ff;
transition:width .08s linear
}

#timerText{
width:32px;
text-align:right;
font-size:9px;
color:#74899a
}

.input-display{
width:min(330px,80%);
height:clamp(38px,5vh,48px);
display:grid;
place-items:center;
margin:3px 0 7px;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
background:rgba(255,255,255,.025);
font-size:clamp(18px,3vh,25px);
font-weight:800;
letter-spacing:.18em
}

.input-display.empty{color:#455463}

.keypad{
width:min(330px,80%);
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(5px,.8vw,8px)
}

.key{
height:clamp(42px,6.5vh,58px);
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
font-size:clamp(16px,2.7vh,23px);
font-weight:700;
box-shadow:inset 0 1px rgba(255,255,255,.05),0 7px 15px rgba(0,0,0,.18);
transition:.15s
}

.key:hover{
background:rgba(100,210,255,.09);
border-color:rgba(100,210,255,.18)
}

.key:active{
transform:translateY(3px) scale(.96);
box-shadow:none
}

.key-delete{color:#9ba9b6}

.key-enter{
color:#72dcff;
background:linear-gradient(145deg,rgba(70,200,255,.15),rgba(70,200,255,.04))
}

.game-message{
height:24px;
flex-shrink:0;
text-align:center;
color:#70d9ff;
font-size:clamp(8px,1vw,11px);
font-weight:900;
letter-spacing:.12em
}

.result-orb{
width:clamp(100px,17vh,165px);
aspect-ratio:1;
margin:auto auto clamp(8px,2vh,18px);
display:grid;
place-items:center;
border-radius:50%;
font-size:clamp(45px,8vh,75px);
font-weight:200;
animation:resultOrb .7s cubic-bezier(.2,.9,.2,1)
}

.result-orb.win{
border:1px solid rgba(110,220,255,.35);
background:rgba(90,210,255,.08);
color:#86e3ff;
box-shadow:0 0 70px rgba(70,190,255,.18)
}

.result-orb.lose{
border:1px solid rgba(255,100,120,.25);
background:rgba(255,80,100,.05);
color:#ff7f93;
box-shadow:0 0 70px rgba(255,70,100,.1)
}

#resultScreen{text-align:center}

#resultScreen h2{
margin:5px 0;
font-size:clamp(28px,5vw,58px);
letter-spacing:-.04em
}

.result-number{
min-height:28px;
color:#75899b;
font-size:clamp(10px,1.4vw,14px)
}

.result-stats{
width:min(520px,100%);
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:clamp(12px,2vh,22px) auto
}

.result-stats>div{
padding:12px;
border:1px solid rgba(255,255,255,.07);
border-radius:16px;
background:rgba(255,255,255,.025)
}

.result-stats span{
display:block;
font-size:8px;
color:#68798b;
letter-spacing:.13em
}

.result-stats strong{
display:block;
margin-top:5px;
font-size:clamp(18px,3vw,27px)
}

.result-buttons{
width:min(420px,100%);
display:flex;
flex-direction:column;
gap:8px;
margin:auto
}

.achievements-grid{
width:min(800px,100%);
margin:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px
}

.achievement{
min-height:80px;
display:flex;
align-items:center;
gap:15px;
padding:15px;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:rgba(255,255,255,.03);
animation:cardIn .5s both
}

.achievement-icon{
width:46px;
height:46px;
flex-shrink:0;
display:grid;
place-items:center;
border-radius:14px;
background:rgba(100,210,255,.08);
color:#70d9ff;
font-size:21px
}

.achievement b,
.achievement small{
display:block
}

.achievement b{font-size:12px}

.achievement small{
margin-top:5px;
color:#6e7f90;
font-size:9px
}

.achievement.locked{
opacity:.35;
filter:grayscale(1)
}

.settings-list{
width:min(680px,100%);
margin:auto;
display:flex;
flex-direction:column;
gap:10px
}

.setting-row{
width:100%;
min-height:78px;
display:flex;
align-items:center;
text-align:left;
padding:15px 18px;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:rgba(255,255,255,.03);
transition:.25s
}

.setting-row:hover{
background:rgba(100,200,255,.05);
border-color:rgba(100,210,255,.15)
}

.setting-row span{
display:flex;
flex-direction:column
}

.setting-row b{font-size:12px}

.setting-row small{
margin-top:5px;
color:#68798b;
font-size:9px
}

.setting-row strong{
margin-left:auto;
color:#70d9ff;
font-size:10px;
letter-spacing:.1em
}

.loader{
position:fixed;
inset:0;
z-index:100;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#05070b;
transition:opacity .5s,visibility .5s
}

.loader.hide{
opacity:0;
visibility:hidden;
pointer-events:none
}

.loader-orbit{
position:relative;
width:90px;
height:90px;
margin-bottom:30px
}

.loader-orbit div{
position:absolute;
inset:0;
border:1px solid rgba(100,210,255,.2);
border-radius:50%;
animation:loaderSpin 2s linear infinite
}

.loader-orbit div:nth-child(2){
transform:rotate(60deg) scale(.72);
animation-duration:1.5s
}

.loader-orbit div:nth-child(3){
transform:rotate(120deg) scale(.45);
animation-duration:1s
}

.loader-title{
font-size:clamp(17px,3vw,25px);
font-weight:900;
letter-spacing:.18em
}

.loader-sub{
margin-top:8px;
color:#607284;
font-size:9px;
letter-spacing:.2em
}

.loader-progress{
width:min(280px,60vw);
height:3px;
margin-top:25px;
background:rgba(255,255,255,.06);
border-radius:5px;
overflow:hidden
}

.loader-progress span{
display:block;
width:0;
height:100%;
background:#6ad9ff;
box-shadow:0 0 15px #6ad9ff;
transition:width .15s
}

.loader-percent{
margin-top:8px;
color:#587083;
font-size:9px
}

#flash{
position:fixed;
inset:0;
z-index:90;
pointer-events:none;
opacity:0
}

#flash.correct{animation:flashCorrect .38s}
#flash.wrong{animation:flashWrong .38s}

#toast{
position:fixed;
z-index:95;
left:50%;
bottom:max(20px,env(safe-area-inset-bottom));
transform:translate(-50%,20px);
opacity:0;
padding:11px 18px;
border:1px solid rgba(255,255,255,.1);
border-radius:13px;
background:rgba(10,15,22,.9);
backdrop-filter:blur(16px);
font-size:10px;
color:#b9c9d7;
transition:.25s;
pointer-events:none
}

#toast.show{
opacity:1;
transform:translate(-50%,0)
}

.shake{
animation:shake .32s
}

@keyframes screenIn{
from{
opacity:0;
transform:translateY(12px) scale(.985)
}
to{
opacity:1;
transform:none
}
}

@keyframes titleReveal{
from{
opacity:0;
transform:translateY(14px);
filter:blur(8px)
}
to{
opacity:1;
transform:none;
filter:none
}
}

@keyframes cardIn{
from{
opacity:0;
transform:translateY(18px) scale(.96)
}
to{
opacity:1;
transform:none
}
}

@keyframes heroFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
}

@keyframes pulseGlow{
0%,100%{
opacity:.55;
transform:scale(.92)
}
50%{
opacity:1;
transform:scale(1.08)
}
}

@keyframes pulseRing{
0%,100%{
transform:scale(.95);
opacity:.45
}
50%{
transform:scale(1.04);
opacity:.9
}
}

@keyframes spin{
to{transform:rotate(360deg)}
}

@keyframes spinReverse{
to{transform:rotate(-360deg)}
}

@keyframes loaderSpin{
to{transform:rotate(360deg)}
}

@keyframes ambientFloat{
0%,100%{
transform:translate(0,0)
}
50%{
transform:translate(30px,-25px)
}
}

@keyframes resultOrb{
from{
transform:scale(.3) rotate(-15deg);
opacity:0
}
to{
transform:none;
opacity:1
}
}

@keyframes shake{
0%,100%{transform:translateX(0)}
25%{transform:translateX(-7px)}
75%{transform:translateX(7px)}
}

@keyframes flashCorrect{
0%{
opacity:0;
background:rgba(70,210,255,.2)
}
35%{
opacity:1
}
100%{
opacity:0
}
}

@keyframes flashWrong{
0%{
opacity:0;
background:rgba(255,60,80,.18)
}
35%{
opacity:1
}
100%{
opacity:0
}
}

@media(max-width:900px){

.modes-grid{
grid-template-columns:repeat(3,1fr)
}

}

@media(max-width:600px){

.screen{
padding:10px 10px 12px
}

.home-panels{
grid-template-columns:1fr
}

.hero-number-wrap{
width:110px;
height:110px
}

.hero h1{
font-size:clamp(32px,10vw,48px)
}

.hero p{
max-width:340px;
font-size:12px
}

@media(max-width:600px){

.modes-grid{
grid-template-columns:repeat(2,1fr);
gap:8px;
width:100%;
height:auto;
max-height:none;
overflow-y:visible;
padding:0 0 20px;
}

.mode-card{
min-height:92px;
padding:10px;
border-radius:16px;
}

.mode-number{
font-size:8px;
}

.mode-card h3{
font-size:11px;
margin:6px 0 4px;
}

.mode-card p{
font-size:8px;
line-height:1.2;
}

.mode-best{
font-size:8px;
padding-top:5px;
}



.achievements-grid{
grid-template-columns:1fr
}

.game-stage{
height:calc(100% - 72px)
}

.stage-content{
width:94%
}

.number-core{
width:105px
}

.key{
height:45px
}

.keypad,
.input-display,
.timer-wrap{
width:min(310px,88%)
}

}

@media(max-height:700px) and (orientation:landscape){

.topbar{
height:52px
}

.screen{
padding:7px 20px
}

.hero{
display:grid;
grid-template-columns:130px 1fr;
grid-template-rows:auto auto auto;
column-gap:24px;
text-align:left
}

.hero-number-wrap{
grid-row:1/4;
width:120px;
height:120px;
margin:0
}

.hero h1{
font-size:34px
}

.hero p{
margin:6px 0 12px
}

.stats-row{
position:absolute;
right:20px;
bottom:10px;
width:340px
}

.home-panels{
position:absolute;
right:20px;
top:10px;
width:260px;
grid-template-columns:1fr
}

.modes-grid{
grid-template-columns:repeat(5,1fr)
}

.mode-card{
min-height:110px
}

.game-stage{
height:calc(100% - 50px);
width:min(580px,80vw)
}

.number-core{
width:90px
}

.key{
height:38px
}

.keypad,
.input-display{
width:280px
}

.result-orb{
width:80px
}

.result-stats{
margin:8px auto
}

.result-buttons{
width:350px;
display:grid;
grid-template-columns:1fr 1fr
}

.reward-btn{
grid-column:1/3
}

}

@media(max-height:560px) and (orientation:landscape){

.hero-number-wrap{
width:80px;
height:80px
}

.hero h1{
font-size:27px
}

.hero p{
font-size:10px;
margin:4px 0 7px
}

.primary-btn{
min-height:38px
}

.stats-row{
display:none
}

.home-panels{
top:auto;
bottom:5px
}

.game-stage{
width:470px
}

.number-core{
width:65px
}

.input-display{
height:30px
}

.key{
height:31px
}

.keypad{
gap:4px
}

.game-message{
height:15px
}

}

@media(max-width:380px) and (orientation:portrait){

.topbar{
height:54px
}

.screen{
padding:7px
}

.hero-number-wrap{
width:90px;
height:90px
}

.hero h1{
font-size:30px
}

.hero p{
font-size:10px;
margin-bottom:12px
}

.primary-btn{
min-height:44px
}

.stat-card{
min-height:52px
}

.game-stage{
height:calc(100% - 60px)
}

.number-core{
width:88px
}

.input-display{
height:34px
}

.key{
height:39px
}

.mode-card{
min-height:82px;
padding:8px
}

.mode-card p{
display:none
}

.mode-card h3{
font-size:10px
}

.section-head{
height:50px
}

}

@media(prefers-reduced-motion:reduce){

*,
*:before,
*:after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important
}

}
@media(max-width:380px){

.modes-grid{

max-height:calc(100vh - 115px);

}


.mode-card{

min-height:90px;

}


.mode-card h3{

font-size:12px;

}


.mode-card p{

font-size:9px;

}

}
#modesScreen{
overflow:hidden;
}

#modesScreen .modes-grid{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding-bottom:40px;
}

@media(max-width:360px){

.modes-grid{
grid-template-columns:repeat(2,1fr);
gap:6px;
}

.mode-card{
min-height:82px;
padding:8px;
}

.mode-card h3{
font-size:10px;
}

.mode-card p{
display:none;
}

.mode-best{
margin-top:4px;
}

}
#modesGrid{
    width:100%;
}


#modesGrid.scrollable{
    padding-right:6px;
}


/* красивый скролл */
#modesGrid::-webkit-scrollbar{
    width:5px;
}


#modesGrid::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:10px;
}