* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.game-container {
    display: flex;
    gap: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-height: 100vh;
}

/* Leaderboard Panel (Desktop) */
.leaderboard-panel {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 140px;
    max-width: 160px;
}

.leaderboard-panel h2 {
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leaderboard-panel ol {
    list-style: none;
    padding: 0;
}

.leaderboard-panel li {
    display: flex;
    justify-content: space-between;
    color: #e0e0ff;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-panel li:last-child {
    border-bottom: none;
}

.leaderboard-panel .rank {
    color: #b0b0ff;
    width: 20px;
}

.leaderboard-panel .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-panel .lb-score {
    color: #fff;
    font-weight: bold;
    margin-left: 8px;
}

/* Leaderboard Button (Mobile) */
.leaderboard-button {
    display: none;
    width: 100%;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.game-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 140px;
}

/* Player Name Display */
.player-name {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 8px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.player-name label {
    display: block;
    color: #b0b0ff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.player-name div {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

h1 {
    color: #fff;
    text-align: center;
    font-size: 28px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
}

.info-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.info-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.info-item label {
    display: block;
    color: #b0b0ff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.info-item div {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.next-piece {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.next-piece label {
    display: block;
    color: #b0b0ff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

#nextCanvas {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    width: 70px;
    height: 70px;
}

.controls {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

button {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

button:active:not(:disabled) {
    transform: translateY(0);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.instructions {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.instructions h3 {
    color: #b0b0ff;
    font-size: 9px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.instructions h3:not(:first-child) {
    margin-top: 8px;
}

.instructions p {
    color: #e0e0ff;
    font-size: 10px;
    margin: 2px 0;
    font-family: 'Courier New', monospace;
}

.game-board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameCanvas {
    background: #000;
    border: 3px solid #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    image-rendering: pixelated;
    touch-action: none;
}

.drop-button {
    display: none;
    margin-top: 15px;
    padding: 20px 40px;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    touch-action: manipulation;
}

.drop-button:active:not(:disabled) {
    background: linear-gradient(135deg, #ee5a5a 0%, #dd4a4a 100%);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    max-width: 300px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content h2 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}

.modal-content p {
    color: #e0e0ff;
    font-size: 14px;
    margin-bottom: 15px;
}

.modal-content input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content button {
    padding: 12px 30px;
    font-size: 14px;
}

.modal-content ol {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.modal-content li {
    display: flex;
    justify-content: space-between;
    color: #e0e0ff;
    font-size: 14px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-content li:last-child {
    border-bottom: none;
}

.modal-content .rank {
    color: #b0b0ff;
    width: 25px;
    text-align: left;
}

.modal-content .name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-content .lb-score {
    color: #fff;
    font-weight: bold;
}

@media (max-width: 768px) {
    body {
        padding: 5px;
    }

    .game-container {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .leaderboard-panel {
        display: none;
    }

    .leaderboard-button {
        display: block;
    }

    h1 {
        font-size: 24px;
    }

    .game-info {
        min-width: auto;
        gap: 8px;
    }

    .player-name {
        display: none;
    }

    .info-panel {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .info-item {
        padding: 6px;
    }

    .info-item div {
        font-size: 16px;
    }

    .instructions {
        display: none;
    }

    .controls {
        justify-content: center;
    }

    .drop-button {
        display: block;
    }
}

@media (max-width: 480px) {
    #gameCanvas {
        width: 200px;
        height: 400px;
    }
}

/* Mars outpost integration; original gameplay and touch controls are retained. */
body{background:#171618;color:#f6ede5;display:block;padding:0 20px 30px;font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif}
.game-header{max-width:1100px;margin:0 auto 28px;padding:25px 0;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff26;font-size:12px;letter-spacing:.12em}
.game-header a{color:#a7e6f0;text-decoration:none;font-size:14px;letter-spacing:0}
.game-container{max-width:850px;max-height:none;margin:0 auto;background:#242127;border:1px solid #aa8f7844;box-shadow:0 20px 80px #0005;justify-content:center;padding:24px;gap:24px}
.game-info{max-width:280px}
h1{color:#8addeb;text-shadow:none;font-weight:600;letter-spacing:.18em}
.game-info label,.instructions h3{font-size:12px;color:#d6c9c2}
.info-item div{font-size:20px}.instructions p{font-size:13px;line-height:1.7}
button{font-size:12px;min-height:42px;background:#435563;transition:background .2s;letter-spacing:.02em}
button:hover:not(:disabled){background:#536d7e}.controls{flex-wrap:wrap}.controls button{flex:1 1 40%}
#startBtn,#nameSubmitBtn{background:#76d3e0;color:#14212b}
#gameCanvas{border-color:#a4c9d1;max-width:100%;height:auto}
#nextCanvas{height:66px;width:66px}
.leaderboard-panel{min-width:150px}.leaderboard-panel li{font-size:12px;gap:4px;padding:8px 0}
.score-scope{font-size:12px;color:#cabeb7;text-align:center;margin:0 0 18px}
.modal-content{background:#242127;border:1px solid #8addeb55}.modal-content input{background:#15151b;color:#fff;border:1px solid #a4c9d155;min-height:46px}
a:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #8addeb;outline-offset:4px}
@media(max-width:768px){body{padding:0 16px 24px}.game-header{margin-bottom:18px;padding:20px 0}.game-header span{font-size:10px}.game-container{padding:16px;gap:16px;align-items:center;max-width:440px}.game-info{width:100%;max-width:320px;display:grid;grid-template-columns:1fr 70px;gap:10px}.game-info h1,.info-panel,.controls{grid-column:1/-1}.next-piece{grid-column:2;grid-row:4;padding:4px}.next-piece label{margin-bottom:0}#nextCanvas{width:48px;height:48px}.leaderboard-button{grid-column:1;grid-row:4;align-self:center}.controls{flex-wrap:nowrap}.controls button{padding:8px;flex:1;font-size:11px}.game-board{width:100%}#gameCanvas{width:min(100%,240px);height:auto}.drop-button{display:block;width:100%;max-width:240px;padding:12px;margin-top:12px;font-size:14px;background:#815646}.modal-content{max-width:320px}.leaderboard-panel{display:none}}
@media(prefers-reduced-motion:reduce){button{transition:none}}