/* ============ ТЕТРИС · Modern Dendy Edition ============ */
:root{
  --hue: 200;
  --bg0:#05070f;
  --panel: rgba(14,20,40,.55);
  --stroke: rgba(130,160,255,.14);
  --text:#e9edff;
  --muted:#8b93b8;
  --accent: hsl(var(--hue) 95% 62%);
  --accent2: hsl(calc(var(--hue) + 50) 90% 60%);
  --radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:var(--bg0);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}

/* ---------- фон ---------- */
#bg{position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(1200px 800px at 70% -10%, #0e1735 0%, var(--bg0) 60%);}
.blob{position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.32;}
.blob.b1{background:hsl(var(--hue) 80% 42%); top:-28%; left:-18%; animation:float1 26s ease-in-out infinite alternate;}
.blob.b2{background:hsl(calc(var(--hue) + 70) 80% 46%); bottom:-32%; right:-22%; animation:float2 32s ease-in-out infinite alternate;}
@keyframes float1{from{transform:translate(0,0) scale(1)} to{transform:translate(8vmax,6vmax) scale(1.15)}}
@keyframes float2{from{transform:translate(0,0) scale(1.1)} to{transform:translate(-7vmax,-5vmax) scale(0.95)}}
.bg-grid{position:absolute; inset:-60px; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(65% 60% at 50% 42%, #000 0%, transparent 100%);
  mask-image:radial-gradient(65% 60% at 50% 42%, #000 0%, transparent 100%);
  animation:gridMove 22s linear infinite;}
@keyframes gridMove{from{background-position:0 0,0 0} to{background-position:44px 88px,44px 88px}}
.bg-vignette{position:absolute; inset:0; background:radial-gradient(120% 92% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%);}

/* ---------- каркас ---------- */
#app{min-height:100vh; display:flex; flex-direction:column; max-width:1100px; margin:0 auto; width:100%;}
.hidden{display:none !important;}
.screen{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 16px 24px;}

#topbar{display:flex; justify-content:space-between; align-items:center; padding:14px 22px;}
.logo{font-weight:900; letter-spacing:.14em; font-size:22px;
  background:linear-gradient(180deg,#fff, hsl(var(--hue) 100% 72%) 60%, hsl(calc(var(--hue) + 40) 100% 58%));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px hsl(var(--hue) 100% 60% / .4));}
.logo-sub{display:block; font-size:9px; letter-spacing:.52em; text-transform:uppercase; color:var(--muted);
  -webkit-text-fill-color:var(--muted); filter:none; margin-top:2px;}
.top-actions{display:flex; gap:8px;}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--stroke);
  background:rgba(20,28,55,.6); color:var(--text); font-size:16px; cursor:pointer;
  backdrop-filter:blur(8px); transition:.15s;}
.icon-btn:hover{border-color:var(--accent); box-shadow:0 0 14px hsl(var(--hue) 90% 55% / .35);}
.icon-btn.off{opacity:.35; text-decoration:line-through;}

/* ---------- меню ---------- */
.menu-card{max-width:640px; width:100%; text-align:center; padding:18px 10px;}
.title{font-size:clamp(46px,9vw,84px); font-weight:900; margin:6px 0 0; letter-spacing:.1em;
  background:linear-gradient(180deg,#fff 10%, hsl(var(--hue) 100% 70%) 55%, hsl(calc(var(--hue) + 45) 100% 58%));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px hsl(var(--hue) 100% 60% / .45));}
.tagline{color:var(--muted); margin:2px 0 22px; letter-spacing:.06em;}

.diff-block{margin:0 auto 16px; max-width:520px;}
.box-title{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
  display:flex; justify-content:center; gap:10px; align-items:center;}
.diff-presets{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.diff-btn{padding:10px 4px 8px; border-radius:12px; border:1px solid var(--stroke); cursor:pointer;
  background:rgba(16,22,45,.6); color:var(--text); font-weight:700; font-size:13px; transition:.15s;
  display:flex; flex-direction:column; gap:2px; align-items:center;}
.diff-btn small{font-weight:500; font-size:10px; color:var(--muted);}
.diff-btn:hover{transform:translateY(-2px); border-color:hsl(var(--hue) 90% 60% / .5);}
.diff-btn.active{border-color:var(--accent); background:hsl(var(--hue) 90% 55% / .12);
  box-shadow:0 0 18px hsl(var(--hue) 90% 55% / .3);}
.level-stepper{margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:13px; color:var(--muted);}
.step-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--stroke);background:rgba(16,22,45,.6);
  color:var(--text);font-size:16px;cursor:pointer;transition:.15s;}
.step-btn:hover{border-color:var(--accent);}
.lvl-num{font-weight:800; font-size:18px; color:var(--accent); min-width:26px; font-variant-numeric:tabular-nums;}

.menu-row{display:flex; align-items:center; justify-content:center; gap:14px; margin:10px 0; font-size:14px;
  color:var(--muted); flex-wrap:wrap;}
.row-label{letter-spacing:.08em;}
.radio,.check{display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--text); font-size:13px;}
.radio input,.check input{accent-color:var(--accent); width:15px; height:15px; cursor:pointer;}

.start-btn{margin:14px 0 20px; padding:15px 68px; font-size:20px; font-weight:800; letter-spacing:.12em;
  border:none; border-radius:14px; cursor:pointer; color:#04060d;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 8px 34px hsl(var(--hue) 90% 55% / .45);
  transition:transform .12s, box-shadow .12s; animation:startPulse 2.6s ease-in-out infinite;}
.start-btn:hover{transform:translateY(-2px) scale(1.02);}
.start-btn:active{transform:scale(.97);}
@keyframes startPulse{0%,100%{box-shadow:0 8px 30px hsl(var(--hue) 90% 55% / .4)}
  50%{box-shadow:0 10px 46px hsl(var(--hue) 90% 60% / .65)}}

.menu-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left;}
.hint-list{list-style:none; margin:0; padding:0;}
.hint-list li{display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:13px; color:var(--muted);}
.hint-list li span{color:var(--text); font-weight:600; white-space:nowrap;}
.hint-list li em{font-style:normal; text-align:right;}
kbd{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:5px;
  padding:1px 6px; font:600 10px/1.5 inherit; color:var(--text);}

.hs-list{margin:0; padding:0 0 0 2px; list-style:none; font-size:13px;}
.hs-list li{display:flex; gap:8px; align-items:baseline; padding:3px 0; color:var(--muted);}
.hs-list li b{color:var(--text); font-variant-numeric:tabular-nums; margin-left:auto;}
.hs-list li .hs-lv{font-size:11px; color:var(--accent);}
.hs-list .empty{color:var(--muted); font-style:italic; justify-content:center;}
.credit{margin-top:16px; font-size:11px; color:var(--muted); opacity:.75;}

/* ---------- бокс ---------- */
.box{background:var(--panel); border:1px solid var(--stroke); border-radius:14px; padding:12px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.box .box-title{justify-content:space-between;}

/* ---------- игровой экран ---------- */
.game-layout{display:flex; gap:16px; align-items:flex-start; justify-content:center;}
.panel{width:172px; display:flex; flex-direction:column;}
.panel .box + .box{margin-top:12px;}

canvas{display:block;}
#hold-canvas,#next-canvas{margin:0 auto; max-width:100%;}

.stats .stat{margin-bottom:8px;}
.stat-label{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.stat-value{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;}
.stat-value.big{font-size:26px; color:var(--accent); text-shadow:0 0 16px hsl(var(--hue) 90% 60% / .5);}
.level-progress{height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin:2px 0 10px;}
#level-bar{height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .3s;}

.board-wrap{position:relative; padding:10px; border-radius:18px;
  background:linear-gradient(180deg, rgba(20,28,55,.55), rgba(10,14,30,.7));
  border:1px solid var(--stroke);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 44px hsl(var(--hue) 90% 55% / .16), inset 0 0 30px rgba(0,0,0,.35);}
.board-wrap::after{content:""; position:absolute; inset:10px; border-radius:10px; pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.14) 0 1px, transparent 1px 3px); opacity:.22; mix-blend-mode:multiply;}
#board-canvas{border-radius:10px; position:relative; touch-action:none;}

#popups{position:absolute; inset:10px; overflow:hidden; pointer-events:none; z-index:4;}
.popup{position:absolute; left:50%; font-weight:800; white-space:nowrap; font-size:16px; color:#cdd6ff;
  text-shadow:0 0 14px currentColor; animation:popRise .95s ease-out forwards;}
.popup.big{font-size:32px; letter-spacing:.06em; color:#fff;}
.popup.gold{color:#ffd75e;}
@keyframes popRise{
  0%{opacity:0; transform:translate(-50%,14px) scale(.7);}
  14%{opacity:1; transform:translate(-50%,0) scale(1.06);}
  24%{transform:translate(-50%,0) scale(1);}
  100%{opacity:0; transform:translate(-50%,-52px) scale(1);}
}

/* ---------- оверлеи ---------- */
.overlay{position:absolute; inset:10px; z-index:6; border-radius:10px;
  background:rgba(4,7,16,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;}
.overlay.count{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:none;}
#count-num{font-size:88px; font-weight:900; color:#fff; text-shadow:0 0 34px var(--accent), 0 0 70px hsl(var(--hue) 90% 55% / .6);}
#count-num.anim{animation:countPop .5s ease-out;}
@keyframes countPop{from{transform:scale(1.8); opacity:0;} to{transform:scale(1); opacity:1;}}

.ov-card{background:rgba(10,15,30,.92); border:1px solid var(--stroke); border-radius:18px;
  padding:26px 34px; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.6); min-width:260px;}
.ov-card h2{margin:0 0 16px; letter-spacing:.1em; font-size:24px;
  background:linear-gradient(180deg,#fff,hsl(var(--hue) 100% 70%)); -webkit-background-clip:text;
  background-clip:text; color:transparent;}
.ov-btns{display:flex; flex-direction:column; gap:9px;}
.btn{padding:11px 20px; border-radius:11px; border:1px solid var(--stroke); cursor:pointer;
  background:rgba(20,28,55,.7); color:var(--text); font-weight:700; font-size:14px; transition:.15s;}
.btn:hover{border-color:var(--accent); transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#04060d; border:none;
  box-shadow:0 6px 22px hsl(var(--hue) 90% 55% / .4);}
.ov-toggles{display:flex; gap:16px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
.record{color:#ffd75e; font-weight:800; margin:-6px 0 12px; animation:startPulse 1.6s infinite;
  text-shadow:0 0 16px rgba(255,215,94,.5);}
.over-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin-bottom:18px; text-align:left;}
.over-stats span{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.over-stats b{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;}

/* ---------- тач-управление ---------- */
#touch-controls{position:fixed; left:0; right:0; bottom:8px; z-index:30; display:none;
  grid-template-columns:repeat(6,1fr); gap:8px; padding:8px 12px; max-width:520px; margin:0 auto;}
#touch-controls button{height:56px; border-radius:14px; border:1px solid var(--stroke);
  background:rgba(18,26,52,.82); color:var(--text); font-size:22px; user-select:none; -webkit-user-select:none;
  touch-action:manipulation; backdrop-filter:blur(8px);}
#touch-controls button:active{background:hsl(var(--hue) 90% 55% / .25); border-color:var(--accent);}
@media (pointer:coarse), (max-width:600px){ #touch-controls{display:grid;} .game-layout{padding-bottom:70px;} }

/* ---------- адаптив ---------- */
@media (max-width:860px){
  #topbar{padding:10px 14px;}
  .game-layout{display:grid; grid-template-columns:1fr 1.55fr 1fr; grid-template-rows:auto auto; gap:8px; max-width:430px; margin:0 auto;}
  .panel{display:contents;}
  .game-layout .box{min-width:0; padding:9px 10px; grid-row:1;}
  .panel .box.keys{display:none;}
  .board-wrap{grid-row:2; grid-column:1 / -1; justify-self:center;}
  .box-title{margin-bottom:5px;}
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; align-content:start;}
  .level-progress{grid-column:1 / -1; margin:2px 0 4px;}
  .stat-value.big{font-size:18px;}
  .stat-value{font-size:15px;}
  .stat-label{font-size:9px;}
  #hold-canvas,#next-canvas{max-height:120px;}
  .menu-cols{grid-template-columns:1fr;}
  .diff-presets{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:400px){
  .diff-presets{grid-template-columns:repeat(2,1fr);}
}