:root {
  --bg: #1b1530;
  --panel: #2a2145ee;
  --panel-solid: #2a2145;
  --edge: #f6d38b;
  --text: #fdf6e3;
  --muted: #c9bfe0;
  --accent: #ff7aa8;
  --accent2: #7ad7ff;
  --good: #7be38a;
  --bad: #ff8a7a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: 'Pixelify Sans', 'VT323', monospace; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; display: block; }
.hidden { display: none !important; }
a { color: var(--accent2); }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0b0816aa; z-index: 20; padding: 16px; }
#login { background: radial-gradient(circle at 50% 30%, #3a2b66 0%, #1b1530 70%); }
.panel { background: var(--panel); border: 3px solid var(--edge); border-radius: 6px; padding: 20px 22px; max-width: 520px; width: 100%;
  box-shadow: 0 0 0 3px #00000066, 0 10px 40px #0008; max-height: calc(100vh - 32px); overflow: auto; }
.panel h2 { margin: 0 0 8px; color: var(--edge); }
.panel h3 { margin: 14px 0 6px; font-size: 16px; color: var(--accent2); }
.muted { color: var(--muted); font-size: 15px; line-height: 1.35; }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.logo { font-size: 56px; margin: 0; text-align: center; color: var(--edge); letter-spacing: 2px;
  text-shadow: 3px 3px 0 #c2477a, 6px 6px 0 #00000055; }
.tagline { text-align: center; margin: 4px 0 16px; color: var(--muted); }
.creator { display: flex; gap: 18px; align-items: center; }
#preview { image-rendering: pixelated; background: #3b6b3a; border: 3px solid #1a1420; border-radius: 4px; flex: none; }
.fields { display: grid; gap: 8px; flex: 1; }
.fields label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 17px; }
input, select, textarea { font-family: inherit; font-size: 16px; color: var(--text); background: #171128; border: 2px solid #5a4b86; border-radius: 4px; padding: 6px 8px; }
input[type=color] { padding: 0; width: 56px; height: 30px; }
textarea { width: 100%; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--edge); }
.btn { font-family: inherit; font-size: 17px; cursor: pointer; color: #2a1d10; background: var(--edge); border: 0; border-radius: 4px; padding: 8px 16px;
  box-shadow: 0 3px 0 #b58a3c; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b58a3c; }
.btn.big { width: 100%; margin-top: 18px; font-size: 22px; padding: 12px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px #5a4b86; }
.btn.small { font-size: 14px; padding: 5px 10px; }
.error { color: var(--bad); min-height: 1em; margin: 8px 0 0; text-align: center; }
.memorial-note { text-align: center; color: var(--muted); font-size: 14px; margin: 14px 0 0; line-height: 1.4; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; background: var(--panel);
  border: 2px solid var(--edge); border-radius: 4px; padding: 4px 14px; font-size: 18px; white-space: nowrap; }
#zone-name { color: var(--edge); }
#toast { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); font-size: 30px; color: var(--edge); text-shadow: 2px 2px 0 #000;
  opacity: 0; transition: opacity .6s; pointer-events: none; text-align: center; }
#toast.show { opacity: 1; }
#prompt { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 2px solid var(--edge);
  padding: 4px 12px; border-radius: 4px; font-size: 18px; pointer-events: none; }

#chat { position: absolute; left: 10px; bottom: 64px; width: min(420px, calc(100vw - 20px)); }
#chat-log { max-height: 190px; overflow-y: auto; font-family: 'VT323', monospace; font-size: 19px; line-height: 1.1;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000; padding: 4px; mask-image: linear-gradient(transparent, #000 25%); }
#chat-log .sys { color: var(--edge); }
#chat-log .name { color: var(--accent2); }
#chat-log .me .name { color: var(--accent); }
#chat-input { width: 100%; background: #0f0b1ccc; }

#actionbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: var(--panel);
  border: 2px solid var(--edge); border-radius: 6px; padding: 5px; max-width: calc(100vw - 20px); overflow-x: auto; }
#actionbar button { font-size: 20px; width: 38px; height: 38px; border: 0; border-radius: 4px; background: #3d3163; color: var(--text); cursor: pointer; flex: none; font-family: inherit; }
#actionbar button:hover { background: #57478c; }
#actionbar .sep { width: 2px; background: #5a4b86; margin: 4px 3px; flex: none; }

#nowplaying { position: absolute; top: 10px; right: 10px; width: 320px; background: var(--panel); border: 2px solid var(--edge); border-radius: 6px; padding: 8px; }
.np-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.np-live { color: var(--bad); flex: none; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
#np-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#np-dj { flex: 1; color: var(--accent2); font-size: 16px; }
.vote { font-family: inherit; font-size: 15px; background: #3d3163; color: var(--text); border: 2px solid transparent; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.vote.on { border-color: var(--edge); }
.np-vol { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 15px; }
.np-vol input { flex: 1; }

/* ---------- DJ booth ---------- */
#booth { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 15; width: min(980px, calc(100vw - 20px));
  max-height: calc(100vh - 80px); overflow: auto; background: #1d1733f2; border: 3px solid var(--edge); border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 0 0 3px #00000066, 0 10px 40px #000a; }
.booth-head, .booth-controls, .booth-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.booth-title { font-size: 22px; color: var(--edge); }
.pill { background: #3d3163; border-radius: 99px; padding: 2px 10px; font-size: 14px; }
.pill.live { background: #c2374f; animation: blink 1.4s steps(2) infinite; }
.grow { flex: 1; }
.booth-controls { margin-top: 8px; font-size: 15px; }
.booth-controls label { display: flex; align-items: center; gap: 6px; }
.booth-controls select, .booth-controls input { font-size: 14px; padding: 3px 6px; }
#b-bpm { width: 110px; }
#b-bpm-v { min-width: 30px; color: var(--edge); }
.chk input { width: 16px; height: 16px; }
.banner { margin-top: 8px; background: #2f2658; border-left: 3px solid var(--accent2); padding: 6px 10px; font-size: 15px; }
.booth-tabs { margin-top: 10px; }
.song { margin-top: 8px; background: #120d22; border-radius: 6px; padding: 6px 8px; display: grid; gap: 5px; }
.song-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.song-label { width: 62px; flex: none; font-size: 14px; color: var(--muted); }
.sections { display: flex; gap: 4px; flex-wrap: wrap; }
.sec { font-family: inherit; font-size: 15px; background: #2a2145; color: var(--text); border: 2px solid transparent; border-radius: 4px; padding: 3px 12px; cursor: pointer; }
.sec.edit { border-color: var(--edge); background: #3d3163; }
.sec.playing { box-shadow: 0 0 10px var(--accent); }
.arrange { display: flex; gap: 3px; flex: 1; min-width: 0; flex-wrap: wrap; }
.slot { font-family: inherit; width: 30px; height: 26px; border: 0; border-radius: 3px; cursor: pointer; font-size: 14px; color: #1a1420; }
.slot.sx { background: #2a2145; color: var(--muted); }
.slot.s0 { background: #7ad7ff; } .slot.s1 { background: #7be38a; } .slot.s2 { background: #ff7aa8; } .slot.s3 { background: #a78bff; }
.slot.playing { outline: 2px solid #fff; box-shadow: 0 0 10px #fff; }
#b-copy { font-size: 13px; padding: 2px 4px; }
.booth-tabs button:not(.btn) { font-family: inherit; font-size: 15px; background: #2f2658; color: var(--text); border: 0; border-radius: 4px 4px 0 0;
  padding: 6px 12px; cursor: pointer; }
.booth-tabs button.on { background: #463a7c; color: var(--edge); }
.grid { background: #120d22; border-radius: 0 6px 6px 6px; padding: 8px; user-select: none; }
.grid.readonly .g-cell { cursor: default; }
.g-row { display: flex; align-items: center; gap: 3px; margin: 2px 0; }
.g-label { width: 58px; flex: none; font-size: 14px; color: var(--muted); text-align: right; padding-right: 6px; }
.g-cell { flex: 1; min-width: 0; height: 26px; border: 0; border-radius: 3px; background: #2a2145; cursor: pointer; padding: 0; }
.g-cell.bar { margin-left: 6px; }
.g-cell:hover { background: #3d3163; }
.g-cell.now { box-shadow: inset 0 0 0 2px #fdf6e3aa; background: #3a2f60; }
.g-cell.on { background: var(--accent); }
.g-cell.on.now { background: #ffd0e2; box-shadow: 0 0 10px var(--accent); }
.drum-snare .g-cell.on { background: #f6d38b; } .drum-snare .g-cell.on.now { background: #fff1c8; box-shadow: 0 0 10px #f6d38b; }
.drum-hat .g-cell.on { background: #7ad7ff; } .drum-hat .g-cell.on.now { background: #d8f4ff; box-shadow: 0 0 10px #7ad7ff; }
.drum-clap .g-cell.on { background: #a78bff; } .drum-clap .g-cell.on.now { background: #e2d8ff; box-shadow: 0 0 10px #a78bff; }
.bass .g-cell { height: 20px; } .bass .g-cell.on { background: #7be38a; } .bass .g-cell.on.now { background: #d9ffdf; box-shadow: 0 0 10px #7be38a; }
.melody .g-cell { height: 20px; } .melody .g-cell.on { background: #7ad7ff; } .melody .g-cell.on.now { background: #e0f7ff; box-shadow: 0 0 10px #7ad7ff; }
.chords { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chord-col { display: flex; flex-direction: column; gap: 3px; }
.chord-col .g-label { width: auto; text-align: center; }
.chord-btn { font-family: inherit; font-size: 15px; background: #2a2145; color: var(--text); border: 0; border-radius: 3px; padding: 4px; cursor: pointer; }
.chord-btn.on { background: #a78bff; color: #1a1420; }
.booth-foot { margin-top: 10px; display: grid; gap: 8px; }
.fx { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.fx label { display: flex; align-items: center; gap: 6px; }
.btn.build { background: #c2477a; color: #fff; box-shadow: 0 3px 0 #7a2a4c; font-size: 15px; }
.btn.build.on { background: #ff7aa8; transform: translateY(2px); box-shadow: 0 0 18px #ff7aa8; }
.btn:disabled { opacity: .45; cursor: default; }
.keys-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.keys { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.keys kbd { font-family: inherit; background: #2f2658; border: 2px solid #5a4b86; border-bottom-width: 4px; border-radius: 4px; padding: 3px 9px; font-size: 15px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.keys kbd small { font-size: 10px; color: var(--muted); }
.keys kbd.hit { background: var(--accent2); color: #1a1420; border-bottom-width: 2px; transform: translateY(2px); }
.keys .sep { width: 10px; }
#b-queue .you { color: var(--accent); }

.hat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 10px; }
.hat { background: #171128; border: 2px solid #5a4b86; border-radius: 4px; padding: 6px; text-align: center; cursor: pointer; font-size: 15px; }
.hat canvas { image-rendering: pixelated; display: block; margin: 0 auto 4px; }
.hat.worn { border-color: var(--edge); }
.hat.locked { opacity: .8; }

#card { position: absolute; background: var(--panel-solid); border: 2px solid var(--edge); border-radius: 4px; padding: 8px 10px; font-size: 16px; }
#card-name { color: var(--edge); font-size: 18px; }
#card .row { margin-top: 6px; }

#fishing { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 2px solid var(--edge);
  border-radius: 6px; padding: 10px 14px; width: 300px; text-align: center; }
#fish-status { font-size: 18px; margin-bottom: 8px; }
#fish-bar { position: relative; height: 18px; background: #171128; border: 2px solid #5a4b86; border-radius: 3px; }
#fish-zone { position: absolute; top: 0; bottom: 0; background: #7be38a88; }
#fish-marker { position: absolute; top: -4px; bottom: -4px; width: 4px; background: var(--edge); }

/* ---------- memorial, social, quests ---------- */
.panel.wide { max-width: 680px; }
.rules { margin-top: 14px; background: #171128; border-left: 3px solid var(--accent); padding: 8px 10px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.rules b { color: var(--text); }
.rules .chk { display: flex; gap: 8px; align-items: center; margin-top: 6px; color: var(--text); font-size: 16px; }
#day-banner { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); background: #3a2350ee; border: 2px solid #ffb3c8; color: #ffe6ef;
  border-radius: 4px; padding: 5px 14px; font-size: 16px; text-align: center; max-width: calc(100vw - 40px); }
#requests { position: absolute; top: 90px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.request { background: var(--panel-solid); border: 2px solid var(--edge); border-radius: 4px; padding: 8px 10px; font-size: 15px; }
.row.tight { margin-top: 6px; gap: 5px; }
.memory-list { max-height: 45vh; overflow-y: auto; margin: 10px 0; display: grid; gap: 8px; }
.memory { background: #fdf6e3; color: #2a1d10; border-radius: 3px; padding: 8px 10px; box-shadow: 2px 2px 0 #0006; }
.memory p { margin: 0 0 4px; font-size: 16px; line-height: 1.35; white-space: pre-wrap; }
.memory .muted { color: #7a6a5a; }
.willow-text { font-size: 18px; line-height: 1.45; min-height: 5.5em; }
.breath-wrap { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; }
.breath { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #a8d0ea, #5a7fb0); box-shadow: 0 0 30px #7aa8c9aa;
  transition-property: transform; transition-timing-function: ease-in-out; }
.breath.in, .breath.hold { transform: scale(2.4); }
.breath.out { transform: scale(1); }
#breath-label { position: absolute; font-size: 20px; color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: none; }
#fire-player { position: absolute; right: 10px; bottom: 70px; width: 320px; background: var(--panel); border: 2px solid #ffb060; border-radius: 6px; padding: 8px;
  box-shadow: 0 0 18px #ffb06055; }
.fire-head { display: flex; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 6px; }
.fire-head span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ffd8a8; }
#fire-close { background: none; border: 0; color: var(--text); font-size: 16px; cursor: pointer; }
#fire-video { aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
#fire-video iframe { width: 100%; height: 100%; border: 0; display: block; }
#fire-by { margin-top: 4px; }
@media (max-width: 720px) { #fire-player { width: 220px; bottom: 110px; } }
.song-list { display: grid; gap: 4px; margin-bottom: 6px; }
.song-pick { font-family: inherit; font-size: 16px; text-align: left; background: #171128; color: var(--text); border: 2px solid transparent; border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.song-pick.on { border-color: var(--edge); background: #2f2658; }
.song-pick:disabled { cursor: default; }
.guitar-video { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 8px 0; }
.guitar-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.guitar-video .btn.big { width: auto; margin: 0; }
.helplines { padding-left: 18px; line-height: 1.6; font-size: 16px; }
.credit { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #3d3163; font-size: 16px; }
.credit b { text-align: right; }
.quest { display: flex; justify-content: space-between; gap: 10px; background: #171128; border-radius: 4px; padding: 8px 10px; margin: 6px 0; font-size: 16px; }
.quest.done { opacity: .65; }
#btn-quests.badge { box-shadow: inset 0 0 0 2px var(--edge); }
.friend { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #171128; border-radius: 4px; padding: 8px 10px; margin: 6px 0; }
.friend .on { color: var(--good); }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { font-family: inherit; font-size: 15px; background: #2f2658; color: var(--text); border: 0; border-radius: 4px; padding: 5px 12px; cursor: pointer; }
.tabs button.on { background: #463a7c; color: var(--edge); }
#mod-body { max-height: 55vh; overflow-y: auto; }
.mod-item { background: #171128; border-radius: 4px; padding: 8px 10px; margin: 6px 0; font-size: 15px; align-items: center; }
.mod-item pre { background: #0f0b1c; padding: 6px; font-size: 13px; white-space: pre-wrap; max-height: 120px; overflow: auto; }
.tag { background: #463a7c; border-radius: 3px; padding: 1px 6px; font-size: 12px; }
.btn.danger { color: var(--bad); }
#chat-log .whisper { color: #e2b8ff; }
#chat-log .whisper .name { color: #c99bff; }
code { background: #171128; padding: 0 4px; border-radius: 3px; }
#hype-meter { position: relative; height: 12px; margin-top: 6px; background: #171128; border-radius: 6px; overflow: hidden; }
#hype-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f6d38b, #ff7aa8, #ff4d6d); transition: width .3s; }
#hype-meter span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; letter-spacing: 2px; color: #fff; text-shadow: 1px 1px 0 #000; }
#b-rec.on { color: #fff; background: #c2374f; box-shadow: none; }

@media (max-width: 720px) {
  #nowplaying { width: 220px; }
  .g-label { width: 40px; font-size: 12px; }
  .g-cell.bar { margin-left: 2px; }
  #chat-log { max-height: 110px; }
  #topbar { font-size: 15px; gap: 10px; top: auto; bottom: 64px; left: auto; right: 10px; transform: none; }
  .creator { flex-direction: column; }
}

/* ---------- homes, pavilion, twitch ---------- */
#home-buttons { position: absolute; top: 52px; left: 10px; display: flex; gap: 6px; }
#decor { position: absolute; top: 10px; right: 10px; bottom: 70px; width: 300px; background: var(--panel); border: 2px solid var(--edge); border-radius: 6px;
  padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.decor-head { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.decor-head span { flex: 1; }
.decor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.decor-item { font-family: inherit; background: #171128; color: var(--text); border: 2px solid #3d3163; border-radius: 4px; padding: 4px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 1.1; }
.decor-item canvas { width: 52px; height: 44px; image-rendering: pixelated; }
.decor-item.on { border-color: var(--edge); background: #2f2658; }
.decor-item:disabled { opacity: .45; cursor: default; }
.decor-row { display: flex; align-items: center; gap: 8px; }
.swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.swatch { width: 24px; height: 24px; border: 2px solid #1a1420; border-radius: 4px; cursor: pointer; }
.swatch.on { outline: 2px solid var(--edge); }
#arcade { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 20px)); background: var(--panel);
  border: 2px solid var(--accent2); border-radius: 6px; padding: 10px 14px; text-align: center; }
#arcade-kind { color: var(--accent2); font-size: 15px; }
#arcade-prompt { font-size: 24px; margin: 6px 0; color: var(--edge); }
.arcade-bar { height: 6px; background: #171128; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
#arcade-timer { height: 100%; width: 0; background: var(--accent2); transition: width .1s linear; }
#arcade-input { width: 100%; font-size: 18px; text-align: center; }
.code-big { font-size: 30px; text-align: center; letter-spacing: 2px; color: var(--edge); background: #171128; border-radius: 4px; padding: 8px; user-select: all; }
@media (max-width: 720px) { #decor { width: auto; left: 10px; top: auto; height: 50vh; } }