:root { --wl-accent: #e8b7c9; }

body { background: #07091a; margin: 0; overflow: hidden; }
#app { width: 100vw; height: calc(100vh - 48px); }
@media (max-width: 768px) { #app { height: calc(100vh - 40px); } }

* { box-sizing: border-box; }

.wl-root {
    position: relative; width: 100%; height: 100%;
    font-family: 'Space Grotesk', system-ui, sans-serif; color: #d8dce8;
    user-select: none; -webkit-user-select: none;
}
.wl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.wl-wall { position: absolute; inset: 0; display: none; pointer-events: none; }

/* ---- Start panel ---- */
.wl-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(7, 9, 26, 0.55); backdrop-filter: blur(3px);
}
.wl-panel {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: 520px; padding: 34px 40px; text-align: center;
    background: linear-gradient(180deg, rgba(24, 28, 52, 0.96), rgba(12, 14, 30, 0.96));
    border: 1px solid rgba(232, 183, 201, 0.2); border-radius: 6px;
    box-shadow: 0 24px 70px -30px #000;
    animation: wl-reveal 0.2s ease;
}
@keyframes wl-reveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.wl-title {
    font-family: 'Space Mono', monospace; font-size: clamp(22px, 5vw, 36px); font-weight: 700;
    letter-spacing: 6px; color: #f2f0f6; text-shadow: 0 0 28px rgba(232, 183, 201, 0.45);
}
.wl-tag { font-size: 15px; color: #d4d8e6; line-height: 1.5; }
.wl-how { font-size: 13px; color: #9ea6bc; line-height: 1.6; max-width: 400px; }
.wl-start {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 26px; border-radius: 3px;
    border: 1px solid var(--wl-accent); background: rgba(232, 183, 201, 0.14);
    color: var(--wl-accent); font-size: 15px; font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.wl-start:hover { background: var(--wl-accent); color: #14101a; box-shadow: 0 0 22px -6px var(--wl-accent); }

/* ---- Bottom control bar (house style) ---- */
.wl-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 7px 12px;
    background: rgba(7, 9, 26, 0.86);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-family: 'Space Mono', 'IBM Plex Mono', monospace;
}
.wl-play {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; min-width: 40px; padding: 0 12px; border-radius: 3px;
    border: 1px solid var(--wl-accent); background: transparent;
    color: var(--wl-accent); font-size: 12px; font-family: inherit; cursor: pointer;
    line-height: 1; transition: all 0.15s;
}
.wl-play:hover { background: rgba(232, 183, 201, 0.16); }
.wl-play.playing { background: var(--wl-accent); color: #14101a; }
.wl-btn {
    height: 30px; min-width: 30px; padding: 0 10px; border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14); background: transparent;
    color: #9aa2b8; font-size: 11px; font-family: inherit; cursor: pointer;
    line-height: 1; transition: all 0.15s;
}
.wl-btn:hover:not(:disabled) { border-color: var(--wl-accent); color: var(--wl-accent); }
.wl-btn.on { border-color: var(--wl-accent); color: var(--wl-accent); background: rgba(232, 183, 201, 0.12); }
.wl-btn:disabled { opacity: 0.3; cursor: default; }
.wl-val { color: var(--wl-accent); font-weight: 700; text-transform: none; letter-spacing: 0; }
.wl-lbl { font-size: 10px; color: #6e7690; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.wl-div { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.1); }
@media (max-width: 768px) {
    .wl-panel { padding: 24px 20px; margin: 0 14px; }
    .wl-controls { gap: 6px; }
}

.wl-start.loading { opacity: 0.6; cursor: default; font-size: 13px; }

.wl-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wl-actions .wl-start { width: 190px; padding: 0 16px; }
.wl-start-alt { background: transparent; border-color: rgba(232, 183, 201, 0.5); color: #e6d7de; }
.wl-start:disabled { opacity: 0.45; cursor: default; }
.wl-start:disabled:hover { background: rgba(232, 183, 201, 0.14); color: var(--wl-accent); box-shadow: none; }
.wl-start-alt:disabled:hover { background: transparent; color: #e6d7de; }
.wl-load { font-size: 11px; color: #7f879d; letter-spacing: 0.5px; min-height: 14px; font-family: 'Space Mono', monospace; }
@media (max-width: 480px) { .wl-actions .wl-start { width: 100%; } }