@font-face { font-family: Dashboard; src: url('assets/Rajdhani-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Reactor; src: url('assets/ReactorDisplay.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; font-family: Dashboard, 'Trebuchet MS', sans-serif; color: #b4cb7d; background: #010600; --light: #b9dc24; --green: #6e982f; --bloom: 12px; --edge: #648140; --fill: #123008b3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; border: 0; background: none; }
button:disabled { cursor: default; opacity: .45; }
*:focus, *:focus-visible { outline: none; }
[hidden] { display: none !important; }
.console { width: min(100vw,133.333svh); height: min(75vw,100svh); min-height: 440px; position: relative; isolation: isolate; overflow: hidden; container-type: size; background: radial-gradient(ellipse at 39% 43%,#0d2403 0,#041801 43%,#061e02 79%,#041400); --travel: 0; }
.console.wide { width: 100vw; height: 100svh; }
#scene, .fallback, .crt { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
#scene { z-index: -2; }
.fallback { z-index: -3; background: linear-gradient(115deg,#071e03 0,transparent 42%,#0a250344); }
.glass { display: none; position: absolute; left: var(--orbX,34%); top: var(--orbY,42%); width: var(--orbSize,42cqh); aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 39% 42%,#d0df3d,#8eae17 34%,#4c800a 61%,#254f0b 77%,#6b992a 92%,#b7dc6788); box-shadow: inset 0 0 25px #91be4544,0 0 30px #527e1722; }
.sceneFallback .glass { display: block; }
.glassShell { position: absolute; inset: -10%; border-radius: 38% 65% 44% 55%; border: 15px solid #8eb83d22; border-top-color: #b0d95855; border-bottom-color: #b0d95866; transform: rotate(-24deg); box-shadow: inset 0 2px 1px #9ac84a77; }
.outerShell { inset: -22%; border-width: 7px 17px; transform: rotate(36deg); opacity: .4; }
.glassMark { font-family: Reactor,sans-serif; font-size: 16cqh; color: #506d25; text-shadow: -1px -2px #d0dc9699; position: absolute; inset: 18% 0; text-align: center; }
.submenu .glass { background: radial-gradient(circle at 38% 28%,#c6e29377,#274b10aa 48%,#5e95252b 75%,#a4d64aaa); }
.submenu .glassMark { display: none; }
.crt { z-index: 8; opacity: .15; background: repeating-linear-gradient(transparent 0 3px,#0003 3px 4px); box-shadow: inset 0 0 80px #0004; }
.noCrt .crt { opacity: 0; }
.noScan .crt { background: none; }
.home { position: absolute; inset: 0; }
.menu { position: absolute; display: flex; align-items: center; text-align: left; width: 34%; min-height: 48px; height: 9%; font: clamp(19px,3.9cqh,34px) Reactor,Dashboard,sans-serif; text-transform: uppercase; letter-spacing: -.4px; left: 48%; top: 25.5%; padding: 0; }
.menu:nth-child(2) { left: 50%; top: 38.5%; }
.menu:nth-child(3) { left: 46.5%; top: 51.5%; }
.wide .menu { left: 50%; width: 32%; }
.wide .menu:nth-child(2) { left: 52%; }
.wide .menu:nth-child(3) { left: 48.5%; }
.menu i { flex: 0 0 6.8cqh; width: 6.8cqh; height: 6.8cqh; margin-left: -3.4cqh; margin-right: 2.5cqh; border-radius: 50%; position: relative; display: grid; place-items: center; border: 1px solid #7ba13466; background: radial-gradient(circle at 35% 22%,#92bb4f33,transparent 40%,#162b0422 63%,#80af2d33); box-shadow: inset 1px 1px 3px #bbe47644; transition: background .15s,color .15s; }
.menu i::before { content: ''; position: absolute; width: 2.6cqh; height: 1.4cqh; border-bottom: 1px solid #719740aa; border-right: 1px solid #719740aa; right: -2.2cqh; top: 56%; transform: skewY(25deg); }
.menu i::after { content: ''; position: absolute; inset: -8% -10%; border: 1px solid #7fab3744; border-radius: 65% 44% 52% 47%; transform: rotate(25deg); }
.menu i .faIcon { width: 2.4cqh; height: 2.4cqh; color: #9cbe5366; }
.menu span { position: relative; padding: 7px 12px 6px 15px; width: 100%; color: #b2cc73; background: linear-gradient(#32651b99,#1c410c99); clip-path: polygon(0 7px,13% 7px,15% 0,31% 0,34% 5px,98% 5px,100% 12px,100% 100%,0 100%); min-height: 4.8cqh; line-height: 1.15; box-shadow: inset 0 1px #8aab4599,inset 0 -1px #73953e88; transition: background .15s,color .15s,transform .15s; }
.menu.active span { color: #233405; background: linear-gradient(#bfdc3488,#a6cf16 38%,#9dbe15 75%,#bddb35); text-shadow: none; transform: translateX(2px); box-shadow: inset 1px 2px #d3e97088; }
.menu.active i { background: radial-gradient(circle at 40% 35%,#c9e39666,#4c752533 55%,#aed15e44); border-color: #b8d971aa; }
.menu.active i .faIcon { color: #d1e997aa; }
.utility { position: absolute; top: 2.8%; right: 3.5%; display: flex; gap: 17px; font-size: 14px; opacity: .7; z-index: 10; }
.utility button { min-height: 34px; padding: 0 3px; }
.utility:hover, .utility:focus-within { opacity: 1; }
.utility button:hover, .utility button:focus-visible { color: #d5ec88; box-shadow: 0 1px #9cbd4e; }
.hints { position: absolute; bottom: 12%; left: 25%; right: 24%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: clamp(16px,2.6cqh,23px); text-transform: uppercase; }
.hints button { display: flex; align-items: center; gap: 9px; min-height: 44px; position: relative; }
.hints button::before { content: ''; position: absolute; width: 32cqh; height: 16cqh; left: -6cqh; top: 1.5cqh; border: 1px solid #7d9d524f; border-radius: 55% 65% 0 0; transform: rotate(-13deg); pointer-events: none; z-index: -1; }
.hints button:last-child::before { left: 2cqh; transform: rotate(18deg); }
.hints b { border: 1px solid #97be5066; border-radius: 50%; width: 4.8cqh; height: 4.8cqh; min-width: 29px; min-height: 29px; font-family: Reactor,sans-serif; font-size: 2.2cqh; display: grid; place-items: center; box-shadow: inset 1px 2px 4px #cfeb8c88,0 0 5px #72a02e44; background: radial-gradient(circle at 32% 23%,#a1cc4a77,#426f1588 55%,#779b2488); color: #cee997; font-weight: 400; }
.hints button:hover b, .hints button:focus-visible b { background-color: #a2c64a; color: #e2f5b0; }
.console:not(.submenu) .hints { left: 66%; right: 10%; justify-content: flex-start; }
#inputHint { position: fixed; bottom: 3%; right: 4%; font-size: 12px; color: #718e50; text-transform: none; opacity: .7; }
.content { position: absolute; inset: 13% 10% 19%; overflow: auto; scrollbar-color: #6c9137 #0a1906; padding: 0 6px 8px; }
.scenePanel { position: absolute; }
.panelCap { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; position: relative; margin: 0 0 7px; min-height: 44px; padding: 7px 14px 6px; background: linear-gradient(145deg,#456827bb,#1d390e99); clip-path: polygon(0 9px,14px 0,83% 0,88% 8px,97% 8px,100% 16px,100% 100%,0 100%); box-shadow: inset 0 1px #92b85f66,inset 0 -1px #6c8c3b88; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: clamp(21px,3.6cqh,32px) Reactor,Dashboard,sans-serif; color: #b9d778; text-transform: uppercase; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.panelCap > span { font-size: clamp(13px,2.1cqh,19px); text-align: right; flex-shrink: 1; min-width: 46px; color: #a0b66d; }
h2 { font-size: 27px; font-weight: 600; }
h3 { font-size: 23px; margin: 16px 0 8px; }
.listFrame { position: relative; padding: 12px 14px 19px; border: 1px solid #63834099; border-left-color: #8ca65b99; box-shadow: -5px 4px 0 -4px #849e5766,5px -4px 0 -4px #849e5755,inset 0 0 30px #07140066; background: #081b0499; min-height: 180px; max-height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #70983d #102a08; }
.listFrame::after { content: ''; position: sticky; display: block; bottom: -13px; height: 1px; width: 100%; background: linear-gradient(90deg,#8da75a66,transparent); pointer-events: none; }
.resourcePanel, .collectionPanel { left: 15%; top: 16%; width: 45%; bottom: 18%; display: flex; flex-direction: column; }
.resourcePanel > .listFrame { min-height: 0; }
.view-memoryGames .resourcePanel, .view-memorySaves .resourcePanel, .view-settingDetail .resourcePanel { left: 40%; width: 59%; top: 5%; bottom: 2%; }
.resourcePanel .panelCap { margin: -5px -6px 12px; }
.sceneInfo { position: absolute; left: 65%; top: 56%; width: 27%; padding: 12px 15px; background: linear-gradient(140deg,#244513dd,#1c380bdd); clip-path: polygon(0 12px,12px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%); border-top: 1px solid #6b963e88; box-shadow: inset 0 0 20px #46701522; }
.sceneInfo h2 { font-size: 23px; margin: 0 0 8px; font-weight: 600; line-height: 1.15; }
.sceneInfo p { font-size: 19px; line-height: 1.15; margin-bottom: 6px; }
.sceneExtra { position: absolute; bottom: 0; left: 15%; }
.row, .listRail { display: flex; width: 100%; align-items: center; gap: 9px; margin: 3px 0; padding: 6px 9px; text-align: left; background: #153b0b88; border-top: 1px solid #4a6a2b66; border-bottom: 1px solid #52722d66; min-height: 40px; line-height: 1.12; position: relative; }
.row { min-height: 44px; }
button.row:hover, button.row:focus-visible, .row.active, .listRail:hover, .listRail:focus-visible, .listRail.chosen { background: linear-gradient(#b6d633,#99bd16); border-color: #bfd855; color: #263605; }
.row strong { display: block; font-size: 23px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row small { display: block; font-size: 14px; color: #92ac64; margin-top: 2px; }
button.row:hover small, button.row:focus-visible small, .row.active small { color: #3e5015; }
.row .grow { flex: 1; min-width: 0; }
.row span:last-child { margin-left: auto; font-size: 16px; }
.row .rowIcon { width: 30px; height: 30px; padding: 4px; color: #a7c668; }
.row:hover .rowIcon, .row:focus-visible .rowIcon { color: #34460a; }
.row img { width: 40px; height: 40px; }
.listRail { font-size: clamp(18px,3.1cqh,25px); min-height: 36px; padding: 4px 8px; }
.listRail > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listRail small { font-size: .78em; flex-shrink: 0; min-width: 30px; text-align: right; }
.note { font-size: 15px; color: #8da56c; line-height: 1.35; margin: 12px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.action, .actions button { background: linear-gradient(#31521b,#1a370d); padding: 8px 12px; border-top: 1px solid #6d8a3c99; border-bottom: 1px solid #63863788; font-size: 19px; min-height: 40px; clip-path: polygon(0 5px,5px 0,96% 0,100% 6px,100% 100%,0 100%); }
.action:hover, .action:focus-visible, .actions button:focus-visible { background: #a3c62c; color: #233405; }
.action, .utility button, .transport button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.musicActions { left: 32%; top: 37%; width: 37%; max-height: 58%; }
.musicActions .listFrame { min-height: 0; padding: 7px 10px 14px; }
.musicActions .action { width: 100%; justify-content: flex-start; margin: 3px 0; font-size: 23px; min-height: 40px; }
.view-musicDetail .sceneInfo { left: 72%; top: 48%; width: 27%; }
.playerPanel { left: 45%; width: 53%; top: 8%; bottom: 0; display: flex; flex-direction: column; }
.playerPanel .panelCap { flex-shrink: 0; flex-wrap: wrap; gap: 2px; }
.playerPanel .panelCap h1 { font-size: clamp(18px,2.5cqh,25px); }
.playerPanel .trackList { flex: 1; min-height: 160px; padding: 10px 12px; }
.playerPanel .sceneExtra { position: static; font-size: 16px; margin-top: 9px; }
.playerPanel .sceneExtra .action { font-size: 16px; min-height: 34px; padding: 5px 9px; }
.transport { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 7px 8px; border: 1px solid #587734aa; border-top: 0; background: #1c3a0ec9; }
.transport .transportButton { min-width: 30px; min-height: 34px; flex: 1; font-size: 14px; border: 1px solid #607e36bb; background: #36551f88; padding: 4px; gap: 4px; }
.transportButton[data-action=repeat], .transportButton[data-action=shuffle] { flex: 2; }
.transportButton span { font-size: 12px; text-transform: uppercase; }
.transportButton.enabled, .transportButton:hover, .transportButton:focus-visible { color: #223405; background: #a4c831; }
.fileMissing { width: 13px; height: 13px; }
.timeCapsule { position: absolute; top: 65%; left: 16%; width: 25%; padding: 6px 10px; border: 1px solid #537436aa; box-shadow: inset 0 -3px #425c2188; background: #051001c9; text-align: right; }
#playerTime { font-size: 28px; display: block; line-height: 1; }
.timeCapsule input[type=range] { width: 100%; margin-top: 7px; }
.playerStatus { display: block; font-size: 14px; color: #a1b86b; line-height: 1.1; margin: 7px 0 3px; overflow-wrap: anywhere; }
select, input:not([type=range]), textarea { color: #c0d78c; background: #0b2405; border: 1px solid #53792e; border-radius: 0; padding: 8px; max-width: 100%; }
input:not([type=range]):focus, select:focus, textarea:focus { border-color: #c6dd62; box-shadow: inset 2px 0 #b4d535; }
label { display: block; margin: 12px 0; font-size: 20px; }
label select, label input:not([type=checkbox]):not([type=range]), textarea { display: block; width: 100%; margin-top: 5px; }
label.row { display: flex; }
input[type=range] { appearance: none; width: min(170px,22vw); height: 8px; background: #294517; border: 1px solid #6d883e; accent-color: #b9d738; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 13px; height: 22px; background: #a8c832; border: 1px solid #d4e96e; box-shadow: 2px 0 #3e5712; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 13px; height: 22px; border-radius: 0; background: #a8c832; border: 1px solid #d4e96e; }
input[type=range]:focus { background: #50721d; }
output { min-width: 35px; font-size: 17px; }
[role=switch] { min-width: 64px; }
[role=switch][aria-checked=true] { background: #9abb26; color: #263808; }
meter { width: 100%; height: 12px; margin: 0 0 10px; }
meter::-webkit-meter-optimum-value { background: #799c29; }
#sideArt { position: absolute; pointer-events: none; width: 12%; top: 36%; left: 63%; color: #accb74; opacity: .75; }
#sideArt.memoryGames, #sideArt.memorySaves, #sideArt.settingDetail { left: 19%; top: 35%; }
#sideArt .sideIcon { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 0 9px #79a33844); }
.faIcon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; pointer-events: none; }
.saveIcon { width: 60px; height: 60px; color: #b0ce7c; }
.disc { width: 150px; height: 150px; margin: 14px auto; border-radius: 50%; background: conic-gradient(#9dc276,#25432b,#cad99b,#406432,#839a50,#213c23,#9dc276); box-shadow: 0 0 0 12px #355719aa,0 0 0 19px #7aa24133; position: relative; }
.disc::after { content: ''; position: absolute; inset: 42%; background: #102108; border-radius: 50%; box-shadow: 0 0 0 6px #6b8a3c; }
.view-tray, .view-preview { padding-left: 33%; padding-top: 6%; }
.view-tray .panelCap, .view-preview .panelCap { margin-bottom: 20px; }
dialog { width: min(620px,92vw); max-height: 88svh; overflow: auto; border: 1px solid #6f9144; background: linear-gradient(130deg,#1c3510,#091d03 40%); color: #bdd88b; padding: 28px; box-shadow: inset 0 0 0 4px #233f11,0 0 80px #0008; }
dialog::backdrop { background: #010700db; }
dialog h2 { font-family: Reactor,Dashboard,sans-serif; font-size: 24px; padding-right: 22px; overflow-wrap: anywhere; }
.close { position: absolute; right: 15px; top: 12px; min-width: 34px; min-height: 34px; font-size: 22px; }
.close:focus-visible { color: #d3e88d; background: #43651d; }
pre { padding: 14px; background: #041001; border: 1px solid #30531a; overflow: auto; font: 12px/1.5 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: #b2d65d; }
a:focus-visible { background: #3d6016; color: #e0efa9; }
.apiRequest { display: flex; gap: 8px; }
.apiRequest input { flex: 1; min-width: 0; }
#apiStatus, #apiWarning { font-size: 14px; }
#toast { position: fixed; z-index: 100; left: 50%; bottom: 5%; transform: translate(-50%,20px); opacity: 0; pointer-events: none; padding: 12px 20px; color: #d3eaaa; border: 1px solid #769340; background: #18340aeF; max-width: min(90vw,560px); text-align: center; transition: opacity .2s,transform .2s; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
.boot { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 50; background: #000; overflow: hidden; }
#bootVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #000; }
.bootControls { position: absolute; bottom: 7%; right: 7%; left: 7%; display: flex; justify-content: flex-end; gap: 14px; }
.bootControls button { padding: 10px 14px; background: #071006dd; border: 1px solid #426025; color: #cce8a3; min-height: 44px; }
.bootControls button:focus-visible { background: #4b701d; }
.traveling .utility { opacity: .4; }
.noMotion *, .noMotion *::before, .noMotion *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 650px) {
  .console, .console.wide { width: 100vw; height: 100svh; min-height: 650px; }
  .home .menu, .wide .home .menu { left: 18%; top: 51%; width: 69%; min-height: 50px; height: 7%; font-size: 23px; }
  .home .menu:nth-child(2), .wide .home .menu:nth-child(2) { left: 22%; top: 61%; }
  .home .menu:nth-child(3), .wide .home .menu:nth-child(3) { left: 18%; top: 71%; }
  .menu i { flex-basis: 42px; width: 42px; height: 42px; margin-right: 18px; margin-left: 0; }
  .menu i .faIcon { width: 18px; height: 18px; }
  .menu span { padding: 9px 12px; min-height: 39px; }
  .utility { left: 4%; right: 4%; justify-content: space-between; gap: 6px; font-size: 12px; }
  .utility button { gap: 4px; min-height: 40px; }
  .hints, .console:not(.submenu) .hints { left: 8%; right: 8%; bottom: 5%; font-size: 18px; justify-content: flex-end; }
  .hints { justify-content: space-between; }
  .hints b { width: 32px; height: 32px; font-size: 16px; }
  .hints button::before { width: 120px; height: 75px; }
  #inputHint { font-size: 10px; bottom: 1%; opacity: .6; }
  .content { inset: 12% 5% 17%; padding: 0 4px 10px; }
  .scenePanel, .resourcePanel, .collectionPanel, .view-memoryGames .resourcePanel, .view-memorySaves .resourcePanel, .view-settingDetail .resourcePanel, .playerPanel, .musicActions { position: relative; left: auto; top: auto; width: 100%; bottom: auto; margin: 0; }
  .listFrame { max-height: 50svh; min-height: 140px; padding: 10px; background: #081b04de; }
  .sceneInfo, .view-musicDetail .sceneInfo { position: relative; left: auto; top: auto; width: 100%; margin-top: 14px; background: #18340be8; }
  .sceneInfo h2 { font-size: 21px; }
  .sceneInfo p { font-size: 17px; }
  .sceneExtra { position: static; margin-top: 12px; }
  .panelCap h1, h1 { font-size: 24px; }
  .panelCap > span { font-size: 15px; }
  .row strong { font-size: 21px; }
  .row span:last-child { font-size: 14px; }
  .row small { font-size: 13px; }
  .listRail { font-size: 21px; min-height: 44px; }
  .musicActions { margin-top: 15svh; }
  .view-musicPlayer .playerPanel { margin-top: 16svh; }
  .playerPanel .trackList { max-height: 31svh; }
  .timeCapsule { left: 22%; top: 0; width: 56%; background: #0a1d0588; }
  .transport .transportButton { min-height: 40px; }
  .transportButton span { font-size: 10px; }
  input[type=range] { width: 125px; }
  .view-tray, .view-preview { padding: 10px; background: #071b03aa; }
  #sideArt { display: none; }
  dialog { padding: 24px 17px; }
}
@media (min-width: 651px) and (max-height: 520px) {
  .console { min-height: 0; }
  .content { inset: 12% 6% 15%; }
  .resourcePanel, .collectionPanel { top: 6%; bottom: 8%; }
  .hints { bottom: 3%; }
  .panelCap { min-height: 32px; }
  .listRail, .row { min-height: 35px; }
}
.gameView {
  position: absolute;
  inset: 8% 5% 17%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: #05110bf2;
  border: 1px solid #4c752c;
  padding: 14px;
  box-shadow: 0 0 40px #0009;
}
.gameHeader { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 0 4px 10px; }
.gameHeader h1 { margin: 0; font-size: 28px; line-height: 1; }
.gameHeader > div > span { font-size: 11px; letter-spacing: 3px; color: #87ad66; }
.gameHud { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; font-size: 18px; }
.gameField { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid #29462d; }
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; }
.gameOverlay { position: absolute; inset: 0; background: #020b07bd; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.gameOverlay h2 { color: #d1f6aa; font-size: clamp(27px, 4vw, 44px); margin: 0 0 10px; }
.gameOverlay p { max-width: 360px; font-size: 19px; }
.gameOverlay .action { font-size: 22px; padding: 10px 25px; }
.gameControls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; }
.gameControls > span { flex: 1; font-size: 13px; color: #96b480; }
.gameControls .action { font-size: 16px; padding: 7px 12px; }
.gamePad { display: flex; gap: 4px; }
.gamePad button { width: 38px; height: 38px; background: #264217; border: 1px solid #6f934c; touch-action: none; font-size: 22px; }
.gamePad button:active { background: #5c912c; color: #efffd0; }
.gameStatus { font-size: 13px; color: #93b877; margin: 7px 0 0; min-height: 18px; }
.inGame .orbMark, .inGame .wires, .inGame .cornerLogo { visibility: hidden; }
@media (max-width: 650px) {
  .gameView { inset: 9% 3% 18%; padding: 9px; }
  .gameHeader { gap: 8px; }
  .gameHud { gap: 4px 10px; font-size: 15px; }
  .gameHeader h1 { font-size: 25px; }
  .gameHeader > div > span { font-size: 9px; letter-spacing: 1px; }
  .gameControls > span { order: 3; flex-basis: 100%; text-align: center; }
  .gameControls { justify-content: space-between; gap: 4px; }
  .gamePad button { width: 33px; height: 36px; }
  .gameControls .action { padding: 7px; font-size: 15px; }
}
.providerFilters { margin: 0 0 7px; padding: 6px 8px; border: 1px solid #55783288; background: #153309c9; flex-shrink: 0; }
.providerSearch { display: flex; gap: 5px; }
.providerSearch input { min-width: 0; width: 100%; flex: 1; font-size: 18px; }
.providerSearch .action { min-height: 34px; padding: 5px 8px; font-size: 16px; }
.providerChoices { display: flex; gap: 6px; margin-top: 6px; }
.providerChoices select { min-width: 0; flex: 1; font-size: 16px; padding: 4px 7px; }
.onlinePanel .trackList { min-height: 110px; }
.onlineRail { min-height: 47px; }
.onlineRail > span > small { display: block; text-align: left; font-size: 13px; color: #8fac63; margin-top: 3px; }
.onlineRail:focus-visible > span > small, .onlineRail:hover > span > small, .onlineRail.chosen > span > small { color: #3b4e14; }
.onlineRail > small { font-size: 15px; }
.providerStatus { padding: 15px 5px; font-size: 19px; line-height: 1.2; color: #b9cf86; }
.providerStatus p { margin-bottom: 12px; }
.providerError { color: #d9c98c; }
.providerPager { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 0; flex-shrink: 0; font-size: 13px; }
.providerPager .action { font-size: 13px; min-height: 34px; padding: 4px 6px; }
.providerCredit { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 12px; color: #779950; }
.onlineDetail { position: absolute; left: 16%; width: 25%; top: 4%; background: #1027058c; border-top: 1px solid #61803988; padding: 9px 10px; }
.onlineDetail img { display: block; width: min(15cqh,100%); aspect-ratio: 1; object-fit: cover; margin: 0 auto 8px; opacity: .85; border: 1px solid #759343; }
.onlineDetail h2 { font-size: 20px; margin: 0 0 3px; overflow-wrap: anywhere; line-height: 1.1; }
.onlineDetail p { font-size: 15px; line-height: 1.15; margin: 0 0 3px; }
.onlineDetail small { display: block; font-size: 12px; color: #91ad62; line-height: 1.1; }
@media (max-width: 650px) {
  .view-musicPlayer .onlinePanel { margin-top: 0; }
  .onlinePanel .trackList { max-height: 32svh; min-height: 120px; }
  .providerSearch input { font-size: 18px; }
  .providerChoices select { font-size: 15px; }
  .providerPager .action { min-height: 40px; }
  .onlinePanel + .onlineDetail { position: relative; top: auto; left: auto; width: 100%; min-height: 76px; padding: 10px; margin: 12px 0; }
  .onlineDetail img { float: left; width: 65px; margin: 0 10px 0 0; }
  .onlineDetail ~ .timeCapsule { position: relative; top: auto; left: auto; width: 100%; margin: 10px 0; }
  .providerCredit { font-size: 13px; }
}
.blinkStage { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #010600; }
.blinkBar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 16px; background: #0c1a08; border-bottom: 1px solid #4c752c; color: #d7ef9a; }
.blinkBar p { margin: 0; font-family: Reactor, Dashboard, sans-serif; font-size: 22px; letter-spacing: .4px; text-transform: uppercase; }
.blinkBar button { min-height: 36px; padding: 0 14px; border: 1px solid #6d8c3a; color: #e7f6c4; background: #1a320f; }
#blinkFrame { flex: 1; width: 100%; border: 0; background: #000; }