:root{
  --bg1:#0f1724; --bg2:#071029;
  --panel:#0b1220; --accent:#00e5a8; --muted:#9aa4b2;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Arial}
body{background:linear-gradient(180deg,var(--bg1),var(--bg2));color:#e6eef6;display:flex;align-items:center;justify-content:center;padding:28px}
.app{width:920px;max-width:96%;}
.title{margin:0 0 12px 0;font-weight:800;letter-spacing:1px;text-align:center;color:var(--accent);font-size:2.5em;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.mascot-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-top:8px;margin:0 auto}
.mascot-panel .mascot-img{border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,0.45);width:84px;height:84px;object-fit:cover}
.mascot-panel p{margin:0;font-size:13px;color:var(--muted);text-align:center}
.panel.mascot-panel{min-width:150px}
.game{display:flex;gap:18px;align-items:flex-start}
.game-area{position:relative;width:100%;max-width:360px;aspect-ratio:1/2}

.touch-controls{position:relative;display:flex;gap:8px;justify-content:center;margin:12px 0 0 0;z-index:40;padding:8px 10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.12));border-radius:12px}
.touch-controls .touch-btn{padding:10px 12px}
canvas#tetris{background:#061018;border-radius:8px;box-shadow:0 10px 30px rgba(3,10,18,0.6);width:100%;height:100%;image-rendering:pixelated;display:block;touch-action:none}
.sidebar{display:flex;flex-direction:column;gap:12px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.12));padding:12px;border-radius:10px;min-width:150px}
.panel h3{margin:0 0 8px 0;font-size:13px;color:var(--muted)}
#score,#level{font-weight:700;font-size:20px;color:var(--accent)}
.controls ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px}
.controls li{margin:6px 0}
.footer{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}

/* Block colors */
.block{width:28px;height:28px;border-radius:4px}

@media (max-width:760px){
  .game{flex-direction:column;align-items:center}
  .sidebar{flex-direction:row;flex-wrap:wrap;justify-content:center}
  /* Ensure the app fills the viewport and doesn't scroll */
  body{overflow:hidden;padding:8px}
  .app{height:100vh;display:flex;flex-direction:column}
  .game{flex:1;overflow:hidden;width:100%;max-width:720px}
  .game-area{width:90vw;max-width:360px;margin-top:6px}
  /* mobile overlay visible on small screens */
  .mobile-overlay{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.12));padding:6px 10px;border-radius:999px;z-index:50}
  .mobile-mascot{width:28px;height:28px;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,0.35)}
  .mobile-title{font-weight:700;color:var(--accent);font-size:14px}
  .sidebar{display:none} /* hide sidebar to make everything fit */
  .footer{display:none}
}

/* Touch controls */
@media (max-width:520px){
  .touch-controls{position:fixed;left:12px;right:12px;bottom:18px;background:transparent;padding:6px;border-radius:12px}
}

.touch-btn{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(0,0,0,0.08));border:1px solid rgba(255,255,255,0.03);color:var(--accent);padding:12px 14px;border-radius:10px;font-weight:700;font-size:16px;box-shadow:0 6px 18px rgba(2,6,12,0.5)}
.touch-btn.small{padding:8px 10px;font-size:14px}
.touch-btn:active{transform:translateY(2px);box-shadow:0 4px 10px rgba(2,6,12,0.45)}

/* Dial control removed; swipe gestures are used on the canvas */

@media (max-width:520px){
  .touch-controls{position:fixed;left:12px;right:12px;bottom:18px;background:transparent;padding:6px;border-radius:12px}
}