:root {
  --warm-bg: #1a1410; --warm-deep: #0f0b08;
  --ember: #ff9a3c; --ember-soft: #ffd9a0;
  --text-warm: #f3e6d4; --muted-warm: #b89b7c;
  --font-mono: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 120%, #2a2438 0%, #171526 45%, #0d0b16 100%);
  color: var(--text-warm); font-family: var(--font-mono);
}
#scene { position: fixed; inset: 0; z-index: 0; cursor: grab; touch-action: none; outline: none; }
#scene:active { cursor: grabbing; }

.lounge-back {
  position: fixed; top: 1.2rem; left: 1.4rem; z-index: 10;
  color: var(--ember-soft); text-decoration: none; font-size: 0.85rem;
  letter-spacing: 0.03em; opacity: 0.75; transition: opacity 0.2s ease;
}
.lounge-back:hover { opacity: 1; }
.lounge-title { position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center; pointer-events: none; }
.lounge-title h1 { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ember-soft); text-shadow: 0 0 20px rgba(255,154,60,0.4); }
.lounge-title p { font-size: 0.7rem; color: var(--muted-warm); margin-top: 0.3rem; }
.lounge-hint { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 0.72rem; color: var(--muted-warm); opacity: 0.6; pointer-events: none; text-align: center; width: 90%; }

.music-panel { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 10; width: 300px; max-width: calc(100vw - 2.8rem); background: rgba(26,20,16,0.85); border: 1px solid rgba(255,154,60,0.3); border-radius: 8px; backdrop-filter: blur(8px); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.music-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.9rem; cursor: pointer; user-select: none; }
.music-head span { font-size: 0.75rem; color: var(--ember-soft); letter-spacing: 0.05em; }
.music-head .toggle { color: var(--muted-warm); font-size: 0.9rem; }
.music-body { padding: 0 0.7rem 0.7rem; }
.music-body.collapsed { display: none; }
.music-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; }
.music-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dpad { position: fixed; bottom: 1.6rem; left: 1.4rem; z-index: 10; display: none; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 6px; }
.dpad button { background: rgba(26,20,16,0.8); border: 1px solid rgba(255,154,60,0.3); color: var(--ember-soft); border-radius: 6px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: none; }
.dpad button:active { background: rgba(255,154,60,0.25); }
.dpad .fwd { grid-column: 2; grid-row: 1; } .dpad .left { grid-column: 1; grid-row: 2; } .dpad .back { grid-column: 2; grid-row: 2; } .dpad .right { grid-column: 3; grid-row: 2; }
@media (hover: none) and (pointer: coarse) { .dpad { display: grid; } }
@media (max-width: 620px) { .lounge-title p { display: none; } .music-panel { width: 190px; bottom: auto; top: 3.4rem; } .lounge-hint { display: none; } }