/* Электро-Тетрис 90-х: LCD Game Boy palette, pixel font, chunky device frame */
:root{
  --lcd:#9bbc0f; --lcd-light:#c7e07a; --dark:#0f380f; --mid:#306230; --mid2:#8bac0f;
  --plastic:#b8b4a8; --plastic-dark:#8f8b7f; --accent:#c62828;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#2b2b2b;font-family:"Courier New",ui-monospace,monospace;min-height:100%}
.device{max-width:480px;margin:0 auto;padding:18px 14px 26px;background:linear-gradient(180deg,var(--plastic),var(--plastic-dark));border:4px solid #6e6a5e;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 2px 0 #fff8}
.brand{text-align:center;color:var(--dark);font-weight:900;font-size:22px;letter-spacing:2px;text-shadow:2px 2px 0 #fff6}
.brand .model{display:block;font-size:10px;letter-spacing:3px;margin-top:4px;color:#4a463c}
.screen-frame{margin-top:14px;background:#3a3a32;border-radius:16px;padding:12px;box-shadow:inset 0 4px 14px rgba(0,0,0,.8)}
.screen-top{display:flex;gap:10px;margin-bottom:10px}
.lcd-panel{background:var(--lcd);border:3px solid var(--dark);border-radius:6px;padding:6px 10px;box-shadow:inset 0 0 0 2px var(--lcd-light),inset 0 3px 8px rgba(15,56,15,.45);flex:1}
.lcd-label{display:block;font-size:10px;font-weight:900;letter-spacing:2px;color:var(--dark)}
.lcd-panel b{display:block;font-size:24px;color:var(--dark);letter-spacing:2px;font-weight:900}
.screen-main{display:flex;gap:10px}
.board-wrap{flex:0 0 auto}
canvas#game{display:block;width:min(56vw,300px);height:auto;background:var(--lcd);border:3px solid var(--dark);border-radius:4px;image-rendering:pixelated;touch-action:none}
.side-panels{display:flex;flex-direction:column;gap:10px;flex:1}
.side-panels .lcd-panel b{font-size:20px}
canvas#next{width:100%;height:auto;background:var(--lcd);image-rendering:pixelated}
.status{margin:10px 0 0;text-align:center;background:var(--dark);color:var(--lcd);font-weight:900;letter-spacing:2px;font-size:13px;padding:8px;border-radius:4px;min-height:34px}
.screen-frame{position:relative}
.overlay{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;background:rgba(15,56,15,.88);border-radius:10px;z-index:2}
.overlay.hidden{display:none}
.panel{text-align:center;padding:16px;color:var(--lcd)}
.panel h2{margin:0 0 10px;font-size:20px;letter-spacing:2px;color:var(--lcd)}
.panel p{line-height:1.7;font-size:13px;font-weight:700}
#startBtn{background:var(--accent);border:3px solid #7f1212;color:#fff;font-family:inherit;font-weight:900;font-size:16px;letter-spacing:2px;padding:12px 30px;border-radius:8px;cursor:pointer;box-shadow:0 5px 0 #7f1212}
#startBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #7f1212}
.controls{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 8px 4px}
.controls button{background:#3a3a3a;border:3px solid #111;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:20px;padding:0;border-radius:50%;aspect-ratio:1;cursor:pointer;box-shadow:0 5px 0 #111;display:flex;align-items:center;justify-content:center}
.controls button:active{transform:translateY(3px);box-shadow:0 2px 0 #111;background:#222}
.pad-area{display:flex;justify-content:space-between;align-items:center;margin:20px 10px 4px;gap:10px}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:2px}
.dpad button{background:#3a3a32;border:2px solid #1c1c18;color:#e8e4d8;font-size:18px;cursor:pointer;box-shadow:0 4px 0 #1c1c18}
.dpad button:active{transform:translateY(3px);box-shadow:0 1px 0 #1c1c18;background:#2b2b26}
.dpad-up{border-radius:10px 10px 0 0}.dpad-down{border-radius:0 0 10px 10px}.dpad-left{border-radius:10px 0 0 10px}.dpad-right{border-radius:0 10px 10px 0}
.dpad-center{background:#2b2b26!important;font-size:10px!important;border-radius:50%}
.ab{display:flex;gap:14px;transform:rotate(-18deg)}
.ab button{width:64px;height:64px;border-radius:50%;border:3px solid #7f1212;font-family:inherit;font-weight:900;font-size:20px;color:#fff;cursor:pointer;box-shadow:0 6px 0 #7f1212}
.ab button span{display:block;font-size:8px;letter-spacing:1px;margin-top:2px}
.btn-a{background:#c62828}.btn-b{background:#8e2424}
.ab button:active{transform:translateY(4px);box-shadow:0 2px 0 #7f1212}
.footer{text-align:center;color:#4a463c;font-size:9px;font-weight:900;letter-spacing:2px;margin-top:14px}