:root{color-scheme:dark;--bg:#0c1112;--panel:#141c1e;--line:#2b393c;--ink:#eef5f3;--muted:#9aadaa;--accent:#b6edab;--record:#eed18b;--respect:#eeaab7}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding-bottom:96px}
button,input,summary{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{min-height:48px;border:1px solid var(--line);border-radius:12px;padding:8px 24px;background:var(--panel);color:var(--ink);cursor:pointer;transition:background .15s,transform .15s}button:hover:not(:disabled){border-color:var(--accent);background:#25362b}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button[aria-pressed=true]{border-color:var(--accent)}a{color:inherit;text-decoration:none}
.game{max-width:1120px;margin:auto;padding:24px 32px}.hud{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:24px;font-weight:750;letter-spacing:-1px}.brand span{color:var(--accent);margin-left:8px;font-size:14px}.round{display:flex;align-items:center;gap:16px}.round span{font-size:12px;letter-spacing:2px;color:var(--muted)}.round strong{font-variant-numeric:tabular-nums;font-size:24px}.wallet{display:flex;align-items:center;gap:16px;min-height:48px;padding:8px 16px;border:1px solid var(--line);border-radius:16px;font-variant-numeric:tabular-nums;font-weight:650}.record{color:var(--record)}.respect{color:var(--respect)}
.board{width:min(100%,calc(100svh - 400px),720px);min-width:320px;margin:16px auto 0}.arena{width:100%;display:block;overflow:visible}.hex-slot,.center-slot{fill:#10191b;stroke:#233436;stroke-width:1}.center-slot{fill:#182725;stroke:#799383;stroke-dasharray:3 8;stroke-width:2}.active-gem[hidden],.reactions[hidden]{display:none}.hub-label,.hub-title,.hub-count,.cell-title,.cell-score,.cell-author{text-anchor:middle;fill:var(--ink);pointer-events:none}.hub-label{font-size:10px;letter-spacing:4px;fill:var(--accent)}.hub-title{font-size:14px;font-weight:650}.hub-count{font-size:11px;fill:var(--muted)}
.gem{filter:drop-shadow(0 4px 6px #0007);pointer-events:none}.gem-outline{fill:hsl(var(--gem-h) var(--gem-s) var(--gem-l));stroke:hsl(var(--gem-h) 45% 75%);stroke-width:1.5;stroke-linejoin:round}.facet{stroke:hsl(var(--gem-h) 50% 45%);stroke-width:.5}.f1{fill:hsl(var(--gem-h) var(--gem-s) 68%)}.f2{fill:hsl(var(--gem-h) var(--gem-s) 45%)}.f3{fill:hsl(var(--gem-h) var(--gem-s) 26%)}.f4{fill:hsl(var(--gem-h) var(--gem-s) 31%)}.f5{fill:hsl(var(--gem-h) var(--gem-s) 48%)}.f6{fill:hsl(var(--gem-h) var(--gem-s) 58%)}.gem-core{fill:hsl(var(--gem-h) var(--gem-s) var(--gem-l));stroke:hsl(var(--gem-h) 55% 68%);stroke-width:1}.gem-shine{stroke:#eafff9;stroke-width:3;stroke-linecap:round;opacity:.65;fill:none}.growth-cut{stroke:#eafff9;stroke-width:1;opacity:.25;fill:none}.growth-core{fill:hsl(var(--gem-h) 45% 70%);opacity:.55}.sharp .gem-core{stroke-width:2}.active-gem .gem{filter:drop-shadow(0 0 12px hsl(var(--gem-h) 55% 35%))}
.cell{cursor:pointer}.hit-area{fill:transparent;stroke:transparent;stroke-width:2}.cell .gem{transition:filter .15s,transform .15s}.cell:hover:not([aria-disabled=true]) .gem,.cell:focus-visible .gem{filter:drop-shadow(0 0 10px hsl(var(--gem-h) 70% 55%))}.cell.voted .hit-area{fill:#b6edab08;stroke:var(--accent);stroke-width:2}.cell.priority .hit-area{stroke:var(--record);stroke-width:3}.cell.mine .hit-area{stroke:#9aadaa;stroke-dasharray:3 6}.cell:focus-visible{outline:none}.cell:focus-visible .hit-area{stroke:var(--accent);stroke-width:3}.cell[aria-disabled=true]{cursor:default}.cell-title{font-size:12px;font-weight:600}.cell-author{font-size:10px;fill:var(--muted)}.cell-score{font-size:20px;font-weight:750;paint-order:stroke;stroke:#092523;stroke-width:3}.board-caption{text-align:center;color:var(--muted);font-size:14px;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:8px}
.board{width:min(100%,calc(100svh - 290px),720px);min-width:0}
.crystal-face{cursor:pointer}.crystal-face:focus-visible{outline:none}.crystal-face:focus-visible .hit-area{stroke:var(--accent)}
.crystal-controls{opacity:0;pointer-events:none;transition:opacity .15s}
.cell:hover .crystal-controls,.cell:focus-within .crystal-controls{opacity:1}
.overlay-buttons{display:flex;gap:8px;justify-content:center;align-items:center;height:52px}
.overlay-buttons button{padding:0;width:48px;height:48px;border-radius:50%;background:#0c1112ed;font-size:22px}
.game-actions{display:flex;justify-content:center}.my-crystal{display:flex;align-items:center;padding:0 12px;border:0;background:transparent}.pet-avatar{width:64px;height:64px}.my-crystal span{font-size:12px;color:var(--muted)}
.player{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:16px;background:var(--bg);border-top:1px solid var(--line);padding:16px 32px;z-index:3}.playing{flex:1;min-width:0}.playing a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.playing small{display:block;color:var(--muted);font-size:12px}
.icon-button{width:48px;height:48px;padding:0;border-radius:50%;font-size:22px}.listen{border-color:var(--accent);color:var(--accent)}#audio{display:none}
.volume-control{display:flex;align-items:center;gap:8px;color:var(--muted)}#volume{width:112px;padding:0;border:none;background:transparent;accent-color:var(--accent)}
input{min-height:48px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
dialog{width:min(640px,calc(100% - 32px));max-height:85svh;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--ink);padding:24px}dialog::backdrop{background:#000b}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-head h2{font-size:22px;margin:0}.dialog-head small,.muted{color:var(--muted);font-size:13px}
.playlist-search{position:relative}.playlist-search input{width:100%}#results{position:relative;margin-top:6px;z-index:2;max-height:min(280px,35svh);overflow:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0008}#results:empty,#results[hidden]{display:none}#results>.muted{padding:12px}
.search-results{list-style:none;padding:0;margin:0}.track-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px;border:0}.track-choice img{border-radius:6px}.track-choice strong{font-size:14px}.track-choice small{display:block;font-size:12px;color:var(--muted)}
.sequence{margin:16px 0}.queue-track{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.queue-track[draggable=true]{cursor:grab}.queue-track img{border-radius:8px;object-fit:cover}.queue-description{flex:1;min-width:0}.queue-description strong{display:block;font-size:14px;overflow-wrap:anywhere}.queue-description small{font-size:12px;color:var(--muted)}.queue-tools{display:flex;opacity:0}.queue-track:hover .queue-tools,.queue-track:focus-within .queue-tools{opacity:1}.queue-tools button{width:48px;padding:0}.drag-handle{color:var(--muted)}.empty-cover{width:48px;height:48px;display:grid;place-items:center}.dragging{opacity:.4}.drop-before{border-top:2px solid var(--accent)}.drop-after{border-bottom:2px solid var(--accent)}.priority-action{color:var(--record);width:100%}
.error{color:var(--respect)}.success{color:var(--accent)}#feedback{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:6;max-width:calc(100% - 32px);font-size:14px;pointer-events:none}#feedback:has(span){padding:12px 20px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}.alert{text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gem:has(.cover-chamber) .facet{fill-opacity:.24;stroke:#effffb55;stroke-width:.6}.gem:has(.cover-chamber) .gem-core{fill-opacity:.1;stroke:#edfff766}.gem:has(.cover-chamber) .gem-outline{stroke:#e9fffba8;stroke-width:1.2}.cover-chamber{opacity:.92}.cover-layer{opacity:0}.layer-0{opacity:1}.refraction{opacity:.7;mix-blend-mode:screen}.dominant-cover{opacity:.58}
.round small{display:block;font-size:10px;color:var(--muted);letter-spacing:2px}.round strong{font-size:18px}
@media(max-width:639px){.game{padding:16px}.hud{gap:8px}.brand{font-size:20px}.wallet{gap:8px;padding:8px;font-size:14px}.round{display:block;text-align:center}.round strong{font-size:12px}.player{padding:12px;gap:8px}#volume{width:72px}.volume-control>span[aria-hidden]{display:none}.queue-track{flex-wrap:wrap}.queue-tools{opacity:1;margin-left:auto}dialog{padding:16px}}
@media(hover:none){.crystal-controls{opacity:1}.queue-tools{opacity:1}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.overlay-buttons{pointer-events:none}.overlay-buttons button{pointer-events:none}.cell:hover .overlay-buttons button,.cell:focus-within .overlay-buttons button{pointer-events:auto}
@media(hover:none){.overlay-buttons button{pointer-events:auto}}

.queue-track.cooldown img,.queue-track.cooldown .empty-cover{opacity:.3;filter:grayscale(.65)}.queue-track.cooldown .queue-description{color:var(--muted);opacity:.6}.cooldown-note{display:block;font-size:11px}.cooldown-note[hidden]{display:none}

/* A camera moves over fixed slots; the server sends only nearby crystals. */
.board{width:100%;height:calc(100svh - 200px);min-height:320px;position:relative;overflow:hidden;border-radius:16px;touch-action:none;overscroll-behavior:contain}
.arena{height:100%;overflow:hidden;cursor:grab;user-select:none}.board.panning .arena{cursor:grabbing}.arena:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.board-caption{position:absolute;bottom:0;width:100%;pointer-events:none}.game-actions{align-items:center;gap:16px;margin-top:8px}.population{color:var(--muted)}
.my-crystal.empty .gem{transform:scale(.62);filter:grayscale(.85) brightness(.42);opacity:.6}.my-crystal.empty:hover .gem{filter:grayscale(.85) brightness(.52)}
@media(max-width:639px){.board{height:calc(100svh - 264px)}}

.player-profile{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;padding:4px 16px 4px 4px;background:var(--panel)}
.player-profile .wallet{border:0;padding:0;gap:12px}.player-profile .my-crystal{padding:0 8px;background:transparent}.player-profile .pet-avatar{width:48px;height:48px}.player-profile .population{font-size:12px;white-space:nowrap;padding-left:16px;border-left:1px solid var(--line)}
.map-home{position:absolute;top:16px;left:16px;background:#0c1112dd}
@media(max-width:639px){.hud{flex-wrap:wrap}.round{margin-left:auto}.player-profile{margin-left:auto}.player-profile .wallet{font-size:14px}}

.map-tools{position:absolute;left:16px;top:16px;display:flex;gap:8px}.map-tools button{background:#0c1112dd}.game{position:relative;z-index:2}.shader-layer{position:fixed;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.7}
#reaction-sky{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}.reaction-particle{position:absolute;left:var(--reaction-x);bottom:96px;font-size:40px;filter:drop-shadow(0 4px 8px #0008);animation:reaction-rise 3s ease-out both}
@keyframes reaction-rise{0%{opacity:0;translate:0 20px;scale:.7}12%{opacity:1;scale:1}70%{opacity:.85}100%{opacity:0;translate:var(--reaction-sway) -65vh;rotate:15deg;scale:1.25}}
@media(prefers-reduced-motion:reduce){.gem,.gem-shine{animation:none!important}.shader-layer,.reaction-particle{display:none}}

.mix-aura{fill:none;stroke:hsl(var(--gem-h) 65% 78%);stroke-width:2;opacity:calc(var(--mix-glow)*.65);filter:drop-shadow(0 0 7px hsl(var(--gem-h) 75% 65%));pointer-events:none}.mix-rating{pointer-events:none}.mix-rating circle{fill:#10191bdd;stroke:#dcece330;stroke-width:.7}.mix-rating text{text-anchor:middle;fill:#dae7e1;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}

.vote-cost{font-size:9px;position:absolute;right:3px;bottom:2px;color:var(--muted)}.overlay-buttons button{position:relative}.economy{position:relative}.economy summary{list-style:none;cursor:pointer;color:var(--muted);font-size:12px;padding:6px}.economy>div{position:absolute;right:0;top:32px;width:280px;max-width:80vw;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;z-index:8;font-size:12px;line-height:1.5}.economy p{margin:6px 0}

/* The arena fills the available screen; keyboard focus uses the gem silhouette. */
body{padding-bottom:0;overflow:hidden}.game{max-width:none;width:100%;height:calc(100svh - 96px);padding:16px 24px}#room{height:100%;display:flex;flex-direction:column}.hud{flex:none}.board{flex:1;width:100%;height:auto;min-height:0;margin:16px 0 0;border-radius:0}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),summary:focus:not(:focus-visible),input:focus:not(:focus-visible),.arena:focus:not(:focus-visible),.crystal-face:focus{outline:none}.crystal-face:focus-visible .hit-area{stroke:var(--accent);stroke-width:2}.arena:focus-visible{outline:none;box-shadow:inset 0 0 0 1px #b6edab66}
.cell.faint .gem{filter:brightness(.18) saturate(.45);opacity:.4}.cell.faint .cell-title{opacity:.22}.cell.faint .mix-aura{opacity:0}.cell.faint:hover .gem,.cell.faint:focus-within .gem{filter:brightness(1) drop-shadow(0 0 8px hsl(var(--gem-h) 60% 50%));opacity:1}.cell.faint:hover .cell-title,.cell.faint:focus-within .cell-title{opacity:1}
.player{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,.8fr) 48px auto}.up-next{min-width:0;padding-left:32px;mask-image:linear-gradient(to right,transparent,#000 32px);opacity:.4;transition:opacity 1s}.up-next.known{opacity:.9}.up-next span,.up-next small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.up-next span{font-size:14px}.up-next small{font-size:11px;color:var(--muted)}.up-next.known span{animation:next-reveal 1.4s ease-out both}@keyframes next-reveal{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
.shader-layer{mix-blend-mode:normal;opacity:1}
@media(max-width:639px){.game{padding:8px;height:calc(100svh - 128px)}.board{height:auto;margin-top:8px}.player{grid-template-columns:48px minmax(0,1fr) 48px 72px;padding:8px 12px;gap:8px}.listen{grid-column:1;grid-row:1}.playing{grid-column:2;grid-row:1}.favorite{grid-column:3;grid-row:1}.volume-control{grid-column:4;grid-row:1}.up-next{grid-column:2/5;grid-row:2;padding-left:16px;mask-image:linear-gradient(to right,transparent,#000 16px)}.up-next small{display:inline;margin-right:8px}.up-next span{display:inline;font-size:12px}.up-next #next-artist{display:none}}
@media(prefers-reduced-motion:reduce){.up-next.known span{animation:none}.shader-layer{display:block}}

.active-gem .gem{filter:drop-shadow(0 0 8px #b5e9d655)}.active-gem .gem:has(.cover-chamber) .gem-outline,.active-gem .gem-outline{stroke:#e5fff6;stroke-width:2}.active-gem .dominant-cover{opacity:.82}.active-gem .facet{stroke:#effffb88}.active-jewel-light{pointer-events:none}.active-halo{fill:none;stroke:#c8f7e6;stroke-width:.8;opacity:.25;animation:jewel-breathe 7s ease-in-out infinite}.active-sweep{opacity:0;animation:jewel-sweep 11s ease-in-out infinite}.active-spark{fill:#f4fff9;opacity:0;transform-box:fill-box;transform-origin:center;animation:jewel-spark 9s ease-in-out infinite;filter:drop-shadow(0 0 3px #d0ffed)}.spark-two{animation-delay:3.5s}.spark-three{animation-delay:6s}
@keyframes jewel-breathe{0%,100%{opacity:.18}50%{opacity:.55}}@keyframes jewel-sweep{0%,65%{opacity:0;transform:translateX(-95px)}70%{opacity:.8}86%{opacity:.8;transform:translateX(90px)}90%,100%{opacity:0;transform:translateX(90px)}}@keyframes jewel-spark{0%,76%,100%{opacity:0;transform:scale(.4)}82%{opacity:1;transform:scale(1)}90%{opacity:0;transform:scale(.6)}}
@media(prefers-reduced-motion:reduce){.active-halo{animation:none;opacity:.35}.active-sweep,.active-spark{animation:none;opacity:0}}

.react-up .gem{animation:reaction-up 1.4s ease-out}.react-down .gem{animation:reaction-down 1.4s ease-out}.react-up .mix-rating,.react-down .mix-rating,.rating-flash{animation:rating-pop 1.4s ease-out}.mix-rating[data-score="0"]{opacity:0}.react-up .mix-rating,.react-down .mix-rating{opacity:1}.score-change{fill:#d5ffe8;font-size:18px;font-weight:700;text-anchor:middle;pointer-events:none;animation:score-rise 1.4s ease-out forwards}.react-down .score-change{fill:#ffb6b6}
@keyframes reaction-up{0%,20%{filter:brightness(1.7) drop-shadow(0 0 12px #b6ffd9)}100%{filter:brightness(1)}}@keyframes reaction-down{0%,20%{filter:brightness(1.3) drop-shadow(0 0 12px #ff7d91)}100%{filter:brightness(1)}}@keyframes rating-pop{0%,20%{color:#fff;fill:#fff;filter:drop-shadow(0 0 5px #fff)}100%{filter:none}}@keyframes score-rise{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-22px)}}
.nickname-form{display:flex;align-items:center;gap:8px;margin:12px 0}.nickname-form input{min-width:0;flex:1}.nickname-form button{font-size:12px;padding:0 10px}.chat-panel{position:fixed;right:24px;bottom:112px;z-index:5;width:300px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line);border-radius:16px}.chat-panel:not([open]){width:auto}.chat-panel summary{cursor:pointer;list-style:none;padding:10px 16px;font-size:13px}.chat-body{padding:0 12px 12px}#chat-messages{max-height:260px;overflow:auto;overscroll-behavior:contain;font-size:13px}#chat-messages p{display:flex;flex-direction:column;gap:2px;margin:10px 0;overflow-wrap:anywhere}#chat-messages strong{color:var(--accent);font-size:11px}#chat-messages span{white-space:pre-wrap}#chat-form{display:flex;gap:6px;margin-top:8px}#chat-input{min-width:0;flex:1}#chat-form button{width:40px;flex:none}.chat-panel summary:focus-visible{outline:1px solid var(--accent);border-radius:16px}
@media(max-width:639px){.chat-panel{right:12px;bottom:140px}}@media(prefers-reduced-motion:reduce){.react-up .gem,.react-down .gem,.rating-flash,.mix-rating{animation:none}.score-change{animation:none}}

.track-queue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;gap:8px}
@media(max-width:639px){.track-queue{grid-column:2/5;grid-row:2}.track-queue .up-next{grid-column:auto;grid-row:auto}.track-queue #third-artist{display:none}}