:root{
  --purple:#6c35df;
  --purple-dark:#44209b;
  --purple-soft:#f3efff;
  --teal:#1cc8c7;
  --ink:#17203f;
  --muted:#6f7897;
  --line:#e5e7f1;
  --bg:#f7f7fc;
  --shadow:0 14px 38px rgba(63,39,125,.14);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0%,#eee7ff 0,transparent 30%),linear-gradient(#fbfbff,#f6f6fb)}
button{font:inherit}
button:focus-visible{outline:4px solid rgba(28,200,199,.35);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{width:min(92vw,1480px);margin:14px auto 22px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.game-card{min-width:0;background:#fff;border:1px solid #e7e8f3;border-radius:28px;padding:14px;box-shadow:var(--shadow)}
.game-head{display:grid;grid-template-columns:110px minmax(260px,1fr) 112px 54px;gap:10px;align-items:center;margin-bottom:12px}
.round-badge,.level-chip{border-radius:18px;color:#fff;font-size:.75rem;font-weight:900;text-align:center;padding:10px}
.round-badge{background:linear-gradient(145deg,#7046ea,#5730bd)}
.round-badge strong{display:block;font-size:1.05rem;margin-top:2px}
.level-chip{background:#18bdbb}
.status-card{text-align:center;border:3px solid #8750ed;border-radius:22px;background:#fff;box-shadow:0 7px 0 #4d2aa2;padding:8px 16px}
.status-card small{display:block;color:#7a5ab8;font-weight:900;font-size:.7rem;letter-spacing:.6px}
.status-card strong{display:block;color:#392184;font-size:clamp(1.35rem,2.2vw,2.3rem);line-height:1.08;margin-top:2px}
.icon-btn{border:0;background:var(--purple-soft);width:54px;height:54px;border-radius:17px;font-size:1.3rem;cursor:pointer}
.arena{position:relative;height:600px;border-radius:28px;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.3),transparent 30%),linear-gradient(180deg,#52d3ef 0 46%,#7860dc 46% 100%)}
.arena:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 15%,rgba(255,255,255,.52) 0 5%,transparent 5.2%),radial-gradient(circle at 88% 18%,rgba(255,255,255,.45) 0 5%,transparent 5.2%),linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.12) 47%,transparent 48%);pointer-events:none}
.arena-toolbar{position:absolute;z-index:15;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:7px;border-radius:16px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(5px)}
.soft-btn,.primary-btn,.start-btn{border:0;border-radius:15px;padding:11px 18px;font-weight:900;cursor:pointer;transition:.16s transform,.16s box-shadow}
.soft-btn{background:#f7f4ff;color:#7049cc;border:1px solid #ded5ff}
.soft-btn:disabled{opacity:.5;cursor:not-allowed}
.primary-btn{background:linear-gradient(145deg,#7a3ceb,#5a2ad0);color:#fff}
.soft-btn:not(:disabled):hover,.primary-btn:hover,.start-btn:hover,.level:hover{transform:translateY(-2px)}
.memory-stage{position:absolute;inset:65px 20px 128px;display:grid;place-items:center}
.memory-ring{position:absolute;width:min(620px,80%);aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.2);box-shadow:0 0 0 36px rgba(255,255,255,.035),0 0 0 78px rgba(255,255,255,.025)}
.pad-grid{position:relative;z-index:4;width:min(660px,78%);display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.light-pad{aspect-ratio:1.24;border:0;border-radius:28px;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 -10px 0 rgba(36,27,87,.13),0 14px 24px rgba(38,28,99,.18);transition:.12s transform,.12s filter,.12s box-shadow;opacity:1}
.light-pad:disabled{cursor:default}
.light-pad:before{content:"";position:absolute;inset:8px;border-radius:21px;border:3px solid rgba(255,255,255,.42)}
.light-pad span{display:grid;place-items:center;width:100%;height:100%;font-size:3rem;color:rgba(255,255,255,.76);text-shadow:0 3px 10px rgba(0,0,0,.15)}
.pad-purple{background:linear-gradient(145deg,#8d4af1,#6232d1)}
.pad-teal{background:linear-gradient(145deg,#2ddcd1,#0ea8ac)}
.pad-yellow{background:linear-gradient(145deg,#ffd044,#f4a914)}
.pad-pink{background:linear-gradient(145deg,#ff75b9,#e94791)}
.pad-blue{background:linear-gradient(145deg,#55b9ff,#2a72e6)}
.pad-green{background:linear-gradient(145deg,#91df55,#43b936)}
.light-pad.active{transform:scale(1.08);filter:brightness(1.45) saturate(1.18);box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 42px rgba(255,255,255,.9),0 18px 28px rgba(38,28,99,.18)}
.light-pad.user-hit{transform:scale(.96)}
.light-pad.wrong{animation:padWrong .35s ease}
@keyframes padWrong{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}



.answer-strip{position:absolute;z-index:9;left:18px;bottom:62px;width:calc(100% - 36px);background:rgba(58,33,139,.87);border-radius:18px;padding:10px 14px;color:#fff}
.answer-head{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:900}
.answer-dots{display:flex;gap:7px;min-height:22px;margin-top:6px;flex-wrap:wrap}
.answer-dot{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.timer-strip{position:absolute;z-index:10;left:50%;bottom:12px;transform:translateX(-50%);width:min(650px,84%);display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;background:rgba(52,28,130,.94);padding:9px 13px;border-radius:18px;color:#fff}
.timer-track{height:16px;background:#4b3194;border-radius:999px;padding:3px}
.timer-track i{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#22d5cc,#73f1e3);transition:width .1s linear}
.timer-strip strong{min-width:54px;color:#ffe653}
.start-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(52,31,123,.13);backdrop-filter:blur(1.5px)}
.start-overlay[hidden]{display:none}
.start-card{display:grid;grid-template-columns:86px minmax(0,220px);align-items:center;gap:2px 14px;background:#fff;border:4px solid #8145e7;border-radius:26px;padding:15px 22px;box-shadow:0 10px 0 #4a269e,0 22px 45px rgba(41,27,92,.2)}
.start-card img{grid-row:1/3;width:82px}
.start-card strong{font-size:1.75rem;color:#442196}
.start-card span{color:#6d7190;font-weight:700;line-height:1.35}
.side-panel{display:flex;flex-direction:column;gap:12px}
.panel-card{background:#fff;border:1px solid #e7e7f2;border-radius:24px;padding:15px;box-shadow:0 8px 24px rgba(48,41,96,.07)}
.panel-title{font-size:.9rem;font-weight:950;text-transform:uppercase;color:#5c35b9;margin-bottom:11px}
.level-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.level{border:1px solid #dfe2ee;border-radius:14px;background:#fff;color:#555e7f;padding:11px 4px;font-weight:900;cursor:pointer}
.level.active[data-level="easy"]{background:linear-gradient(#27d7d0,#12b8b5);color:#fff;border-color:transparent}
.level.active[data-level="medium"]{background:linear-gradient(#ffc832,#ff9c17);color:#fff;border-color:transparent}
.level.active[data-level="hard"]{background:linear-gradient(#8a4af0,#6330d3);color:#fff;border-color:transparent}
.card-note{margin:10px 0 0;color:#737b96;font-size:.82rem;line-height:1.4}
.start-btn{width:100%;background:linear-gradient(#27d5cd,#10aaa8);color:#fff;font-size:1.03rem;box-shadow:0 8px 16px rgba(16,170,168,.2)}
.results-block{display:flex;flex-direction:column;gap:12px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats-grid article{background:#fff;border:1px solid #e7e7f2;border-radius:19px;padding:13px 6px;text-align:center;box-shadow:0 8px 18px rgba(48,41,96,.06)}
.stats-grid span{font-size:1.2rem}.stats-grid small{display:block;color:#727997;font-weight:800;margin:4px 0}.stats-grid strong{font-size:1.45rem;color:#4924a6}
.progress-head{display:flex;justify-content:space-between}.progress-track{height:10px;background:#eeeaf7;border-radius:999px;overflow:hidden;margin-top:9px}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7a35eb,#5f23d2);transition:width .25s}
.meti-tip{background:linear-gradient(145deg,#fbf9ff,#f3eeff);border-color:#d9c9ff}
.tip-body{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center}
.tip-body img{width:90px;max-height:115px;object-fit:contain}
.tip-body p{margin:0;background:#fff;padding:13px;border-radius:17px;min-height:84px;display:flex;align-items:center;color:#5532a5;font-weight:850;line-height:1.38}
.modal{position:fixed;inset:0;z-index:100;background:rgba(21,15,49,.5);display:grid;place-items:center;padding:18px;overflow:hidden}
.modal[hidden]{display:none}
.modal-card{position:relative;z-index:3;width:min(430px,100%);background:#fff;border-radius:28px;padding:25px;text-align:center;box-shadow:0 30px 80px rgba(21,15,49,.28);border:5px solid #ff9e2b}
.result-card.low{border-color:#ef5350}.result-card.mid{border-color:#ff9f2e}.result-card.high{border-color:#52c86b}
.finish-meti{width:132px;height:132px;object-fit:contain}.modal h2{margin:5px 0;color:#4d25ad}.correct-pill{display:inline-flex;gap:5px;align-items:baseline;background:#f3efff;color:#4e2aa7;border-radius:999px;padding:8px 16px}.correct-pill strong{font-size:1.55rem}.modal p{color:#656c88;line-height:1.45}.finish-stats{font-size:.88rem}
.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti{position:absolute;top:-30px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(760deg)}}
@media(max-width:1080px){
  .layout{grid-template-columns:1fr}
  .side-panel{display:contents}
  .settings-block{order:-3}
  .game-card{order:-2}
  .results-block{order:-1}
  .layout{display:flex;flex-direction:column}
  .level-card{order:1}.start-btn{order:2}.game-card{order:3}.results-block{order:4}
  .results-block{display:grid;grid-template-columns:1fr 1fr}
  .stats-grid{grid-column:1/-1}
}
@media(max-width:720px){
  .app-shell{width:min(100% - 12px,1480px);margin:7px auto 14px}
  .game-card{padding:8px;border-radius:20px}
  .game-head{grid-template-columns:68px 1fr 64px 44px;gap:5px}
  .round-badge,.level-chip{padding:7px 3px;font-size:.58rem;border-radius:13px}.round-badge strong{font-size:.78rem}
  .status-card{border-width:3px;border-radius:17px;padding:6px 5px;box-shadow:0 5px 0 #4d2aa2}.status-card strong{font-size:1.25rem}
  .icon-btn{width:44px;height:44px;border-radius:13px}
  .arena{height:565px;border-radius:20px}
  .arena-toolbar{top:8px;width:calc(100% - 14px);display:grid;grid-template-columns:1fr 1fr;padding:5px}
  .soft-btn{padding:9px 7px;font-size:.78rem}
  .memory-stage{inset:70px 8px 144px}
  .pad-grid{width:94%;gap:10px}.light-pad{border-radius:20px}.light-pad:before{inset:6px;border-radius:15px}.light-pad span{font-size:2rem}
  
  .answer-strip{left:8px;width:calc(100% - 16px);bottom:58px;padding:8px 10px}.answer-dot{width:14px;height:14px}
  .timer-strip{width:94%;bottom:9px;padding:8px 10px}
  .start-card{grid-template-columns:65px minmax(0,170px);padding:12px 15px;border-radius:21px}.start-card img{width:64px}.start-card strong{font-size:1.35rem}.start-card span{font-size:.8rem}
  .panel-card{border-radius:20px;padding:13px}
  .results-block{grid-template-columns:1fr}.stats-grid{grid-column:auto}.tip-body{grid-template-columns:72px 1fr}.tip-body img{width:72px}
}
@media(max-width:420px){
  .arena{height:530px}.pad-grid{gap:8px}.memory-stage{inset:70px 5px 136px}
}
.app-shell:fullscreen,.app-shell:-webkit-full-screen{width:100%;height:100%;margin:0;padding:12px;background:#f7f7fc;overflow:auto}
.app-shell:fullscreen .arena,.app-shell:-webkit-full-screen .arena{height:min(68vh,700px)}


@media (min-width:1081px){
  .app-shell{
    width:min(88vw,1420px);
    margin:10px auto 14px;
  }

  .layout{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:14px;
  }

  .game-card{
    padding:12px;
    border-radius:25px;
  }

  .game-head{
    grid-template-columns:100px minmax(240px,1fr) 104px 50px;
    gap:8px;
    margin-bottom:10px;
  }

  .round-badge,
  .level-chip{
    padding:8px;
  }

  .icon-btn{
    width:50px;
    height:50px;
  }

  .status-card{
    padding:7px 14px;
  }

  .arena{
    height:520px;
  }

  .arena-toolbar{
    top:9px;
    padding:6px;
  }

  .soft-btn{
    padding:9px 15px;
  }

  .memory-stage{
    inset:58px 18px 112px;
  }

  .pad-grid{
    width:min(610px,76%);
    gap:18px;
  }

  .light-pad{
    border-radius:24px;
  }

  .light-pad:before{
    border-radius:18px;
  }

  

  

  

  .answer-strip{
    bottom:56px;
    padding:8px 12px;
  }

  .timer-strip{
    bottom:9px;
    padding:8px 12px;
  }

  .side-panel{
    gap:10px;
  }

  .panel-card{
    padding:13px;
    border-radius:21px;
  }

  .panel-title{
    margin-bottom:9px;
  }

  .level{
    padding:9px 4px;
  }

  .card-note{
    margin-top:8px;
    font-size:.78rem;
  }

  .start-btn{
    padding:10px 16px;
  }

  .results-block{
    gap:10px;
  }

  .stats-grid article{
    padding:10px 5px;
  }

  .stats-grid strong{
    font-size:1.3rem;
  }

  .tip-body{
    grid-template-columns:76px 1fr;
  }

  .tip-body img{
    width:76px;
    max-height:98px;
  }

  .tip-body p{
    min-height:72px;
    padding:11px;
    font-size:.88rem;
  }
}

@media (min-width:1081px) and (max-height:820px){
  .app-shell{
    width:min(87vw,1380px);
    margin:7px auto 10px;
  }

  .arena{
    height:495px;
  }

  .game-head{
    margin-bottom:8px;
  }

  .memory-stage{
    inset:55px 16px 108px;
  }

  .pad-grid{
    width:min(585px,74%);
    gap:16px;
  }

  

  

  .answer-strip{
    bottom:54px;
  }

  .panel-card{
    padding:11px 12px;
  }

  .side-panel,
  .results-block{
    gap:8px;
  }
}

.app-shell:fullscreen,
.app-shell:-webkit-full-screen{
  width:100%;
  height:100vh;
  margin:0;
  padding:10px 14px;
  background:linear-gradient(#fbfbff,#f6f6fb);
  overflow:hidden;
}

.app-shell:fullscreen .layout,
.app-shell:-webkit-full-screen .layout{
  width:min(96vw,1720px);
  height:calc(100vh - 20px);
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:16px;
  align-items:stretch;
}

.app-shell:fullscreen .game-card,
.app-shell:-webkit-full-screen .game-card{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.app-shell:fullscreen .game-head,
.app-shell:-webkit-full-screen .game-head{
  flex:0 0 auto;
}

.app-shell:fullscreen .arena,
.app-shell:-webkit-full-screen .arena{
  height:auto;
  flex:1 1 auto;
  min-height:0;
}

.app-shell:fullscreen .side-panel,
.app-shell:-webkit-full-screen .side-panel{
  height:100%;
  min-height:0;
  justify-content:flex-start;
}

@media (min-width:1081px) and (min-height:880px){
  .app-shell:fullscreen .memory-stage,
  .app-shell:-webkit-full-screen .memory-stage{
    inset:72px 22px 138px;
  }

  .app-shell:fullscreen .pad-grid,
  .app-shell:-webkit-full-screen .pad-grid{
    width:min(690px,78%);
    gap:22px;
  }

  .app-shell:fullscreen .meti-guide,
  .app-shell:-webkit-full-screen 

  .app-shell:fullscreen .meti-guide img,
  .app-shell:-webkit-full-screen 
}