body {
    margin: 0; padding: 0;
    background: #020005;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh;
    font-family: 'Space Mono', 'Noto Sans TC', sans-serif;
    color: white; user-select: none;
}
#wrapper {
    display: flex; flex-direction: row; gap: 40px; align-items: center;
}
@media (max-width: 800px) {
    #wrapper { flex-direction: column; gap: 10px; margin-top: 10px; }
}

#left-panel {
    display: flex; flex-direction: column; gap: 10px; text-align: left;
    background: rgba(255, 0, 255, 0.05); padding: 30px; border-radius: 12px;
    border: 1px solid rgba(255, 0, 255, 0.2);
}
@media (max-width: 800px) {
    #left-panel { flex-direction: row; justify-content: center; gap: 15px; padding: 15px; align-items: center; }
    #left-panel h2 { font-size: 12px !important; }
    #left-panel div { font-size: 20px !important; margin-bottom: 0 !important; }
    .back-btn { padding-top: 0 !important; margin-left: 10px; }
}
#left-panel h2 { margin: 0; font-size: 20px; color: #88c; letter-spacing: 2px; }
#left-panel div { font-size: 36px; font-weight: bold; color: #0ff; text-shadow: 0 0 15px #0ff; margin-bottom: 20px;}

#game-col { display: flex; flex-direction: column; align-items: center; }

#game-container {
    position: relative;
    width: 300px; height: 600px;
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4);
    border: 3px solid #f0f;
    border-radius: 6px; overflow: hidden;
    background: #01010a;
}
canvas { display: block; touch-action: none; }
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(3px); z-index: 20; text-align: center;
}
h1 { font-family: 'Noto Sans TC'; font-size: 38px; margin: 0 0 15px; text-shadow: 0 0 20px #f0f; letter-spacing: 4px; color:#f0f;}
h1.over { text-shadow: 0 0 30px #f00; color: #ff3333; }
p { font-size: 15px; color: #ccc; margin-bottom: 30px; line-height: 1.8; }

.btn {
    padding: 12px 30px; font-size: 20px; font-family: 'Noto Sans TC'; font-weight: 900;
    color: #111; background: #f0f; border: none; border-radius: 4px; cursor: pointer;
    box-shadow: 0 0 20px rgba(255,0,255,0.7); transition: transform 0.2s;
}
.btn:hover { background: #fff; transform: scale(1.05); }

.back-btn {
    color: #668; text-decoration: none; border-bottom: 1px solid #668; margin-top: auto; padding-top: 50px;
    transition: color 0.2s;
}
.back-btn:hover { color: #f0f; border-color: #f0f; }

#mobile-controls {
    display: flex; flex-direction: column; gap: 8px; margin-top: 15px; width: 300px;
}
.row { display: flex; gap: 8px; justify-content: center; }
.ctrl-btn {
    flex: 1; background: rgba(255, 0, 255, 0.1); border: 2px solid rgba(255,0,255,0.5); color: #f0f;
    padding: 10px 0; font-size: 15px; font-weight: bold; border-radius: 8px;
    cursor: pointer; transition: 0.1s; text-shadow: 0 0 5px #f0f;
}
.ctrl-btn:active { background: rgba(255, 0, 255, 0.5); transform: translateY(2px); }

@media (min-width: 801px) {
    #mobile-controls { display: none; }
}