:root{--primary-color: #2563eb;--border-color: #1f2937;--background-color: #f3f4f6;--shadow-color: rgba(0, 0, 0, .1)}body{background-color:#1a1a1a;font-family:system-ui,-apple-system,sans-serif;margin:0;padding:20px}.app{display:grid;grid-template-areas:"left title right" "left game controls";grid-template-columns:1fr 400px 192px;max-width:800px;margin:0 auto;justify-content:center;gap:20px}.controls{grid-area:controls;width:192px;padding:0;display:flex;flex-direction:column;gap:16px}.board{justify-self:center;margin:0}h1{text-align:center;grid-area:title;font-size:2.5rem;margin:1rem 0;color:#fff}h2{font-size:1.5rem;margin:1rem 0;color:#fff}button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px var(--shadow-color)}button:hover{background-color:#1d4ed8;transform:translateY(-1px)}button:active{transform:translateY(0)}.board{border:3px solid var(--border-color);border-radius:12px;-webkit-user-select:none;user-select:none;margin:auto;grid-area:game;background-color:#1a1a1a;box-shadow:0 8px 16px var(--shadow-color),inset 0 2px 4px #ffffff1a;padding:16px;position:relative}.board:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent,rgba(255,255,255,.03));pointer-events:none;border-radius:8px}.board.game-over:after{content:"Game Over";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:10}.board.game-over:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:5}.controls{grid-area:controls;padding:0 32px;display:flex;flex-direction:column;gap:16px}.row{display:flex}.upcoming{width:160px;display:flex;flex-direction:column;gap:24px;margin-top:1.5rem;padding:16px;background:#ffffff0d;border-radius:8px;box-shadow:0 4px 6px var(--shadow-color)}.upcoming>div{display:flex;flex-direction:column;align-items:center}.upcoming .row{justify-content:center}.cell{width:32px;aspect-ratio:1;border:2px solid rgba(255,255,255,.1);border-radius:4px;position:relative;overflow:hidden;will-change:transform,opacity}.cell:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.1));pointer-events:none}.cell.hidden{visibility:hidden}.cell.Empty{background-color:#ffffff0d;border-color:#ffffff14}.cell.I{background-color:#06b6d4;box-shadow:0 0 12px #06b6d44d,inset 0 -2px #0003}.cell.J{background-color:#2563eb;box-shadow:0 0 12px #2563eb4d,inset 0 -2px #0003}.cell.L{background-color:#ea580c;box-shadow:0 0 12px #ea580c4d,inset 0 -2px #0003}.cell.O{background-color:#eab308;box-shadow:0 0 12px #eab3084d,inset 0 -2px #0003}.cell.S{background-color:#16a34a;box-shadow:0 0 12px #16a34a4d,inset 0 -2px #0003}.cell.T{background-color:#7c3aed;box-shadow:0 0 12px #7c3aed4d,inset 0 -2px #0003}.cell.Z{background-color:#dc2626;box-shadow:0 0 12px #dc26264d,inset 0 -2px #0003}.high-scores{width:160px;margin-top:24px;padding:16px;background:#ffffff0d;border-radius:8px;box-shadow:0 4px 6px var(--shadow-color);color:#fff}.high-scores h2{color:#fff;margin-top:0;margin-bottom:16px;text-align:center}.high-scores p{color:#fff;text-align:center;opacity:.7}.high-scores-list{list-style-position:inside;padding:0;margin:0}.high-score-item{padding:8px;margin:4px 0;background:#ffffff08;border-radius:4px;text-align:center}