:root{
  --bg:#080517;
  --bg2:#11092f;
  --panel:#131027;
  --panel2:#1b1238;
  --text:#ffffff;
  --muted:#aaa5be;
  --line:#2b2347;
  --purple:#8a2cff;
  --purple2:#c139ff;
  --blue:#5663ff;
  --cyan:#3bdcff;
  --pink:#ff4fd8;
  --orange:#ff8d3a;
  --green:#73f59a;
  --danger:#ff5570;
  --shadow:0 22px 60px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{margin:0;background:
radial-gradient(circle at 50% -10%,rgba(116,49,255,.26),transparent 34%),
linear-gradient(180deg,#09051a 0%,#080517 60%,#06040f 100%);
color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100%;overscroll-behavior:none}
body{display:flex;justify-content:center}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{width:min(100%,460px);min-height:100dvh;position:relative;padding:0 18px 92px}
.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(8,5,23,.96) 65%,rgba(8,5,23,0));backdrop-filter:blur(8px)}
.brand{border:0;background:none;padding:0;color:white}
.brand-mark{font-style:italic;font-weight:950;font-size:26px;letter-spacing:-2px;display:inline-block;transform:skew(-8deg)}
.brand-mark::after{content:"";height:2px;width:36px;background:linear-gradient(90deg,var(--blue),var(--purple2));display:block;transform:rotate(-10deg) translate(16px,-16px);box-shadow:0 0 16px var(--purple)}
.streak-chip{background:#141027;border:1px solid #2b2147;border-radius:999px;padding:8px 12px;font-weight:800}
.screen{padding:8px 0 18px}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,460px);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(8,5,23,.94);backdrop-filter:blur(16px);border-top:1px solid #211a38;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:30}
.nav-btn{border:0;background:none;color:#766f8c;display:flex;gap:4px;align-items:center;justify-content:center;flex-direction:column;padding:6px 0}
.nav-btn span{font-size:22px;line-height:1}
.nav-btn small{font-size:11px;font-weight:800}
.nav-btn.active{color:#b86cff}
.card{background:linear-gradient(180deg,rgba(26,18,57,.98),rgba(18,14,39,.98));border:1px solid rgba(153,110,255,.16);border-radius:26px;box-shadow:var(--shadow)}
.hero{padding:30px 24px;text-align:center;background:
radial-gradient(circle at 50% 15%,rgba(212,77,255,.35),transparent 32%),
linear-gradient(145deg,#5e17e6 0%,#8b22ff 46%,#511bc7 100%);
border:0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 80deg,transparent,rgba(255,255,255,.08),transparent 28%);animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero>*{position:relative;z-index:1}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#e7c7ff;font-size:12px;font-weight:900}
.h1{font-size:48px;line-height:.98;margin:8px 0 10px;letter-spacing:-2.5px}
.h2{font-size:30px;line-height:1.05;margin:5px 0 12px;letter-spacing:-1px}
.p{color:var(--muted);line-height:1.5}
.hero .p{color:#f2eafd}
.btn{width:100%;border:0;border-radius:18px;padding:16px 18px;font-weight:950;text-transform:uppercase;letter-spacing:.03em}
.btn-primary{background:linear-gradient(90deg,#9b31ff,#7f22ff 50%,#c433ff);color:white;box-shadow:0 12px 30px rgba(138,44,255,.32)}
.btn-white{background:#fff;color:#381270}
.btn-outline{background:transparent;color:#dcaeff;border:1px solid #8d4dd3}
.stack{display:grid;gap:14px}
.section{margin-top:18px}
.label{font-size:12px;color:#8e87a5;text-transform:uppercase;font-weight:900;letter-spacing:.12em}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:15px 10px;text-align:center;background:#100c22;border:1px solid #261e40;border-radius:18px}
.stat strong{font-size:22px;display:block}
.stat small{color:#8e87a5;font-weight:700}
.result-big{font-size:72px;font-weight:950;letter-spacing:-4px;margin:2px 0}
.insane{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:linear-gradient(90deg,#932fff,#bd3cff);border-radius:999px;font-weight:950;font-style:italic}
.rank-card{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rank-box{background:#0d0a1d;border:1px solid #2a2141;border-radius:18px;padding:16px;text-align:center}
.rank-box strong{font-size:26px;display:block}
.list{display:grid;gap:8px}
.row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;background:#100d22;border:1px solid #221b37;border-radius:16px;padding:12px}
.row.me{background:linear-gradient(90deg,rgba(118,35,255,.34),rgba(61,31,105,.25));border-color:#7543c5}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:950;background:linear-gradient(145deg,#5f38ff,#ca3cff)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#100c22;border:1px solid #261e40;padding:4px;border-radius:15px}
.tab{border:0;border-radius:11px;padding:10px 5px;background:none;color:#9992ad;font-weight:800}
.tab.active{background:linear-gradient(90deg,#6c25ff,#a92cff);color:#fff}
.profile-hero{text-align:center;padding:26px}
.profile-avatar{width:92px;height:92px;margin:auto;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:950;border:3px solid transparent;background:linear-gradient(#141029,#141029) padding-box,linear-gradient(135deg,#27d4ff,#b833ff,#ff5da2) border-box}
.form{display:grid;gap:12px}
.field{display:grid;gap:8px}
.field label{font-size:12px;color:#9c95ae;text-transform:uppercase;font-weight:900;letter-spacing:.08em}
.field input,.field select{width:100%;background:#130f27;border:1px solid #2e2548;color:white;border-radius:16px;padding:15px;outline:none}
.welcome{min-height:72dvh;display:flex;align-items:center;justify-content:center}
.logo-big{font-size:74px;font-style:italic;font-weight:950;letter-spacing:-6px;transform:skew(-7deg);text-shadow:0 0 28px rgba(170,75,255,.25)}
.tagline{font-size:15px;line-height:1.8;letter-spacing:.08em;text-transform:uppercase;font-weight:900}
.tagline .a{color:#67d9ff}.tagline .b{color:#ff5ccf}.tagline .c{color:#ffb941}
.challenge-shell{min-height:72dvh;display:flex;flex-direction:column}
.challenge-top{text-align:center;padding:5px 12px 18px}
.game-area{flex:1;min-height:390px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at center,rgba(133,43,255,.2),transparent 55%);border-radius:30px}
.timer-ring{width:245px;height:245px;border-radius:50%;display:grid;place-items:center;background:
radial-gradient(circle,#110b2d 63%,transparent 64%),
conic-gradient(from -90deg,#b63cff var(--progress,0deg),#2a1d4a var(--progress,0deg));
box-shadow:0 0 35px rgba(155,49,255,.25),inset 0 0 25px rgba(149,50,255,.14)}
.timer-value{font-size:44px;font-weight:950;letter-spacing:-2px}
.game-instruction{text-align:center;color:#c4bad8;font-weight:800;padding:18px}
.tap-target{width:126px;height:126px;border-radius:50%;border:0;color:white;font-weight:950;background:radial-gradient(circle at 35% 30%,#c24cff,#6e20ff 68%);box-shadow:0 0 44px rgba(168,52,255,.44)}
.reaction-area{width:100%;min-height:360px;border-radius:28px;display:grid;place-items:center;transition:.15s;background:#21153c;font-size:34px;font-weight:950}
.reaction-area.go{background:#1f9c5d}.reaction-area.fail{background:#8d263b}
.line-game{position:relative;width:88%;height:90px}
.line{position:absolute;left:0;right:0;top:44px;height:4px;border-radius:5px;background:#d4cced}
.line::before,.line::after{content:"";position:absolute;top:-8px;width:3px;height:20px;background:#756b8e}
.line::before{left:0}.line::after{right:0}
.target-mid{position:absolute;left:50%;top:28px;width:2px;height:36px;background:rgba(255,255,255,.22);display:none}
.marker{position:absolute;top:23px;width:4px;height:46px;border-radius:4px;background:#bd4fff;box-shadow:0 0 16px #b338ff}
.memory-grid{display:grid;grid-template-columns:repeat(3,76px);gap:10px}
.memory-cell{height:76px;border-radius:20px;background:#17112f;border:1px solid #332451;display:grid;place-items:center;font-size:32px}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.option{border:1px solid #443060;background:#17112f;color:white;padding:18px;border-radius:18px;font-size:20px;font-weight:900}
.tapcount{font-size:88px;font-weight:950}
.redgame{display:grid;grid-template-columns:repeat(3,78px);gap:12px}
.color-dot{width:78px;height:78px;border-radius:50%;border:0;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.green{background:#58e68a}.red{background:#ff4d65}
.shape-grid{display:grid;grid-template-columns:repeat(3,78px);gap:12px}
.shape{height:78px;border-radius:19px;background:#18112f;display:grid;place-items:center;font-size:36px;border:1px solid #31264a}
.hold-btn{width:190px;height:190px;border-radius:50%;border:0;background:linear-gradient(145deg,#6325ff,#b63cff);color:white;font-size:22px;font-weight:950;box-shadow:0 0 40px rgba(153,58,255,.35)}
.danger-btn{width:190px;height:190px;border-radius:50%;border:8px solid #4b1220;background:radial-gradient(circle at 35% 25%,#ff6b74,#c72040 65%);color:white;font-size:20px;font-weight:950;box-shadow:0 18px 0 #771426,0 20px 45px rgba(222,38,75,.28)}
.toast{position:fixed;left:50%;top:88px;transform:translateX(-50%);background:#20163d;color:#fff;border:1px solid #4d3577;padding:12px 15px;border-radius:14px;z-index:100;box-shadow:var(--shadow);font-weight:800}
.countdown{font-size:44px;font-weight:950;letter-spacing:-2px}
.center{text-align:center}
.muted{color:var(--muted)}
.space{height:8px}
.hidden{display:none!important}
.score-pill{display:inline-block;border:1px solid #5f3d98;border-radius:999px;padding:8px 13px;color:#d3a8ff;font-weight:900}
.challenge-list{display:grid;gap:8px}
.challenge-item{display:grid;grid-template-columns:30px 36px 1fr;gap:10px;align-items:center;background:#100d22;border:1px solid #251e3d;border-radius:15px;padding:11px}
.challenge-item .ic{font-size:22px}
.small-note{font-size:12px;color:#847e95}
@media (max-width:370px){
  .h1{font-size:42px}.result-big{font-size:60px}.game-area{min-height:345px}.timer-ring{width:220px;height:220px}
}