/* LINE BREAK layer 20-music: SOUNDTRACK sound test, stage music chip, now-playing tag */
:root { --lbx-ink: #05060c; --lbx-panel: rgba(8, 10, 26, 0.96); --lbx-line: #39405f; --lbx-y: #ffd02e; --lbx-o: #ff7a1a; --lbx-r: #c8102e; --lbx-tx: #e8ecff; --lbx-dim: #8a91b4;
  --lbx-px: 'Press Start 2P', ui-monospace, monospace; --lbx-hd: 'Bungee', Anton, Impact, sans-serif; --lbx-an: Anton, Impact, 'Arial Narrow Bold', sans-serif; --lbx-tx-f: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif; }

/* ---------- screen ---------- */
.lbxST { position: fixed; inset: 0; z-index: 80; display: none; color: var(--lbx-tx); font-family: var(--lbx-tx-f); user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 90% at 50% 0%, #1a1f4a 0%, #0a0c1e 55%, var(--lbx-ink) 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 10px) calc(env(safe-area-inset-left, 0px) + 12px);
  touch-action: manipulation; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
.lbxST.lbxOn { display: block; }
.lbxST::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); }
.lbxST *, .lbxPop *, .lbxChip, .lbxTag { box-sizing: border-box; }
:where(.lbxST, .lbxPop) button, :where(.lbxChip) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; min-height: 0; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lbxST button:active, .lbxPop button:active, .lbxChip:active { transform: translate(1px, 1px); }
.lbxST [hidden] { display: none !important; }
.lbxPanel { position: relative; z-index: 1; height: 100%; max-width: 1240px; margin: 0 auto; display: grid; gap: 8px 14px;
  grid-template-columns: minmax(250px, 36%) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "head tabs" "now list" "mode list" "acts list"; align-content: start; }
.lbxHead { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lbxNow { grid-area: now; } .lbxMode { grid-area: mode; } .lbxActs { grid-area: acts; } .lbxTabs { grid-area: tabs; } .lbxList { grid-area: list; }
.lbxNow, .lbxMode, .lbxActs { align-self: start; } .lbxTabs { grid-area: tabs; } .lbxList { grid-area: list; }
.lbxBrand { min-width: 0; }
.lbxH { margin: 0; font-family: var(--lbx-hd); font-weight: 400; font-size: clamp(20px, 3.4vw, 40px); line-height: 1; letter-spacing: 0.02em; transform: skewX(-9deg); transform-origin: left bottom; white-space: nowrap;
  color: var(--lbx-y); background: linear-gradient(180deg, #fff6c8 0%, #ffd02e 35%, #ff7a1a 50%, #7a1608 54%, #ff5a2a 70%, #ffe08a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #000) drop-shadow(1px 1px 0 var(--lbx-r)); }
.lbxBy { margin: 6px 0 0; font-family: var(--lbx-px); font-size: clamp(7px, 0.85vw, 10px); letter-spacing: 0.12em; color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.lbxBack { flex: none; font-family: var(--lbx-px) !important; font-size: clamp(8px, 0.9vw, 12px); min-width: 44px; min-height: 44px; padding: 0 8px !important; color: #fff; background: #0b0e22 !important; border: 3px solid var(--lbx-line) !important; box-shadow: 0 3px 0 #000 !important; text-shadow: 2px 2px 0 #000; }

/* boxes */
.lbxNow, .lbxMode, .lbxActs { background: var(--lbx-panel); border: 3px solid var(--lbx-line); box-shadow: 0 4px 0 #000; }
.lbxNow { padding: 8px 10px 6px; }
.lbxNowTop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lbxNowNo { font-family: var(--lbx-px); font-size: 10px; color: var(--lbx-y); text-shadow: 2px 2px 0 #000; flex: none; }
.lbxNowT { font-family: var(--lbx-an); font-size: clamp(17px, 2vw, 24px); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lbxBar { height: 6px; margin: 6px 0 4px; background: #000; border: 1px solid var(--lbx-line); }
.lbxBarFill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lbx-r), var(--lbx-o) 60%, var(--lbx-y)); }
.lbxNowCtl { display: flex; align-items: center; gap: 4px; }
.lbxIc { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; }
.lbxIc svg { width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(2px 2px 0 #000); }
.lbxPP { background: var(--lbx-y) !important; color: #000 !important; border: 3px solid #000 !important; box-shadow: 0 3px 0 var(--lbx-r) !important; }
.lbxPP svg { filter: none; }
.lbxTime { flex: none; margin-left: auto; font-family: var(--lbx-px); font-size: 8px; color: #d4d9f5; white-space: nowrap; padding-left: 6px; }
.lbxVol { flex: 1; min-width: 56px; display: flex; align-items: center; gap: 4px; height: 44px; color: var(--lbx-dim); }
.lbxVolIc svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.lbxVolNote { font-family: var(--lbx-px); font-size: 7px; color: var(--lbx-dim); margin-left: auto; }
.lbxVolIn { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.lbxVolIn::-webkit-slider-runnable-track { height: 8px; background: repeating-linear-gradient(90deg, var(--lbx-y) 0 4px, transparent 4px 6px), #000; border: 1px solid var(--lbx-line); }
.lbxVolIn::-moz-range-track { height: 8px; background: repeating-linear-gradient(90deg, var(--lbx-y) 0 4px, transparent 4px 6px), #000; border: 1px solid var(--lbx-line); }
.lbxVolIn::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -8px; background: #fff; border: 3px solid #000; box-shadow: 2px 2px 0 var(--lbx-r); }
.lbxVolIn::-moz-range-thumb { width: 10px; height: 18px; background: #fff; border: 3px solid #000; border-radius: 0; }

.lbxLab { margin: 0 0 6px; font-family: var(--lbx-px); font-size: 8px; letter-spacing: 0.14em; color: var(--lbx-y); text-shadow: 2px 2px 0 #000; }
.lbxMode { padding: 8px 10px; }
.lbxSeg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lbxSegB, .lbxActs button { font-family: var(--lbx-px) !important; font-size: clamp(7px, 0.75vw, 10px); line-height: 1.3; min-height: 44px; padding: 4px 4px !important; color: #fff; background: #0b0e22 !important; border: 3px solid var(--lbx-line) !important; box-shadow: 0 3px 0 #000 !important; text-shadow: 2px 2px 0 #000; }
.lbxSegB[aria-pressed="true"] { color: #000; background: var(--lbx-y) !important; border-color: #000 !important; box-shadow: 0 3px 0 var(--lbx-r) !important; text-shadow: none; }
.lbxHint { margin: 6px 0 0; font-size: 13px; line-height: 1.2; color: var(--lbx-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbxActs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; }

/* tabs */
.lbxTabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; align-self: end; min-width: 0; padding-bottom: 3px; }
.lbxTabs::-webkit-scrollbar { display: none; }
.lbxTabs.lbxOver { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.lbxTabs.lbxOver.lbxEnd { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 700px) and (min-aspect-ratio: 1/1) { .lbxPanel { grid-template-columns: 236px minmax(0, 1fr); } }
.lbxTab { flex: none; min-width: 44px; text-transform: uppercase; font-family: var(--lbx-px) !important; font-size: clamp(7px, 0.8vw, 10px); min-height: 44px; padding: 0 6px !important; color: var(--lbx-dim); background: rgba(8, 10, 26, 0.9) !important; border: 3px solid var(--lbx-line) !important; border-bottom-width: 3px; white-space: nowrap; }
.lbxTab[aria-selected="true"] { color: #000; background: var(--lbx-y) !important; border-color: #000 !important; box-shadow: 0 3px 0 var(--lbx-r) !important; }

/* list */
.lbxListHead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px 0 8px; background: #000; border-bottom: 2px solid var(--lbx-line);
  font-family: var(--lbx-px); font-size: 7px; letter-spacing: 0.1em; color: var(--lbx-y); }
.lbxListHead span:first-child { width: 24px; } .lbxLhT { flex: 1; padding-left: 50px; } .lbxLhS { width: 64px; text-align: center; } .lbxLhP { width: 44px; text-align: center; }
.lbxList { scrollbar-width: thin; scrollbar-color: var(--lbx-y) #000; }
.lbxList::-webkit-scrollbar { width: 8px; } .lbxList::-webkit-scrollbar-track { background: #000; } .lbxList::-webkit-scrollbar-thumb { background: var(--lbx-y); border: 2px solid #000; }
.lbxList { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--lbx-panel); border: 3px solid var(--lbx-line); box-shadow: 0 4px 0 #000; counter-reset: lbx; }
.lbxRow { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 2px 6px 2px 8px; border-bottom: 1px solid rgba(57, 64, 95, 0.7); }
.lbxRow:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.lbxNo { flex: none; width: 24px; font-family: var(--lbx-px); font-size: 9px; color: var(--lbx-y); text-shadow: 2px 2px 0 #000; }
.lbxRowPlay { border: 3px solid var(--lbx-line) !important; background: #0b0e22 !important; box-shadow: 0 3px 0 #000 !important; }
.lbxInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lbxName { font-family: var(--lbx-an); font-size: 18px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbxMeta { font-family: var(--lbx-px); font-size: 8px; letter-spacing: 0.06em; color: #c9cff0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 7px; }
.lbxEq { flex: none; display: none; gap: 2px; align-items: flex-end; width: 14px; height: 14px; }
.lbxEq i { display: block; width: 3px; height: 40%; background: var(--lbx-y); }
.lbxCur .lbxEq { display: flex; }
.lbxPlaying .lbxCur .lbxEq i { animation: lbxEq 0.9s ease-in-out infinite alternate; }
.lbxPlaying .lbxCur .lbxEq i:nth-child(2) { animation-delay: -0.3s; } .lbxPlaying .lbxCur .lbxEq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes lbxEq { from { height: 25%; } to { height: 100%; } }
.lbxCur { background: linear-gradient(90deg, rgba(255, 208, 46, 0.16), rgba(255, 122, 26, 0.04) 70%) !important; box-shadow: inset 4px 0 0 var(--lbx-y); }
.lbxCur .lbxName { color: var(--lbx-y); }
.lbxCur .lbxRowPlay { border-color: var(--lbx-y) !important; color: var(--lbx-y); }
.lbxSw { flex: none; position: relative; display: inline-flex !important; align-items: center; width: 64px; height: 44px; padding: 0 !important; }
.lbxSw::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; background: #000; border: 3px solid var(--lbx-line); }
.lbxSw span { position: relative; z-index: 1; flex: 1; font-family: var(--lbx-px); font-size: 7px; line-height: 28px; height: 28px; }
.lbxSw .lbxSwOn { color: #000; background: var(--lbx-y); margin: 0 0 0 3px; box-shadow: inset 0 -3px 0 var(--lbx-o); }
.lbxSw .lbxSwOff { color: var(--lbx-dim); }
.lbxSw[aria-pressed="false"] .lbxSwOn { color: var(--lbx-dim); background: none; box-shadow: none; }
.lbxSw[aria-pressed="false"] .lbxSwOff { color: #fff; background: var(--lbx-r); margin: 0 3px 0 0; box-shadow: inset 0 -3px 0 #6b0614; }
.lbxPin { color: #8a91b4; }
.lbxPin[aria-pressed="true"] { color: var(--lbx-y); }
.lbxPin[aria-pressed="true"] svg { filter: drop-shadow(2px 2px 0 var(--lbx-r)); }
.lbxOff .lbxName { color: #7b819f; text-shadow: none; }
.lbxOff .lbxNo { color: #6b7190; }
.lbxLock .lbxName::after { content: ' · EVERY FIGHT'; font-family: var(--lbx-px); font-size: 7px; color: var(--lbx-y); vertical-align: middle; }

/* focus for keyboard and gamepad */
.lbxST :focus, .lbxPop :focus, .lbxChip:focus { outline: none; }
.lbxST :focus-visible, .lbxST.lbxKbd :focus, .lbxPop :focus-visible, .lbxPop.lbxKbd :focus, .lbxChip:focus-visible { outline: 3px solid var(--lbx-y) !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.9) !important; z-index: 2; position: relative; }
.lbxST.lbxKbd .lbxRow:focus-within { background: rgba(255, 208, 46, 0.1) !important; }

/* tall portrait windows: one column */
@media (max-aspect-ratio: 1/1) {
  .lbxPanel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto; grid-template-areas: "head" "now" "mode" "tabs" "list" "acts"; }
}
/* phone landscape: tighter */
@media (max-height: 460px) {
  .lbxST { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
  .lbxPanel { gap: 6px 10px; }
  .lbxH { font-size: 21px; } .lbxBy { font-size: 7px; margin-top: 5px; }
  .lbxNow { padding: 6px 8px 2px; } .lbxNowT { font-size: 17px; } .lbxBar { margin: 4px 0 2px; }
  .lbxMode { padding: 6px 8px; } .lbxLab { margin-bottom: 4px; } .lbxHint { font-size: 12px; margin-top: 4px; }
  .lbxActs { padding: 4px; }
  .lbxRow { min-height: 48px; }
}
@media (max-height: 380px) { .lbxHint { display: none; } }
@media (min-width: 1100px) and (min-height: 700px) {
  .lbxST { padding: 28px 36px; }
  .lbxPanel { grid-template-columns: minmax(330px, 34%) minmax(0, 1fr); gap: 12px 20px; }
  .lbxNowT { font-size: 28px; } .lbxName { font-size: 22px; } .lbxMeta { font-size: 8px; } .lbxRow { min-height: 60px; } .lbxTime { font-size: 9px; } .lbxHint { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .lbxPlaying .lbxCur .lbxEq i { animation: none; height: 70%; } }

/* entry buttons */
.lbxSetRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lbxSetTx small { display: block; }
#settings .lbxSetBtn { flex: none; min-height: 44px; }

/* ---------- stage select chip (top-right of the arena screen) ---------- */
.lbxChip { position: fixed; z-index: 45; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 12px); display: none !important; align-items: center; gap: 6px; max-width: min(42vw, 300px); min-height: 44px; padding: 0 12px !important;
  font-family: var(--lbx-px) !important; font-size: 9px; color: #fff; background: rgba(8, 10, 26, 0.92) !important; border: 3px solid var(--lbx-y) !important; box-shadow: 0 3px 0 #000 !important; text-shadow: 2px 2px 0 #000; }
html.lbxStages .lbxChip { display: inline-flex !important; }
html.lbxModal .lbxChip { visibility: hidden; }
html.lbxModal .lbxPop ~ .lbxChip, html.lbxStages.lbxModal .lbxChip.lbxKeep { visibility: visible; }
.lbxChipN { color: var(--lbx-y); font-size: 13px; font-family: Arial, sans-serif; }
.lbxChipT { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbxPop { position: fixed; inset: 0; z-index: 85; background: rgba(4, 5, 12, 0.55); font-family: var(--lbx-tx-f); color: var(--lbx-tx); }
.lbxPopIn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 12px); width: min(320px, 70vw); max-height: calc(100% - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column;
  padding: 8px; background: var(--lbx-panel); border: 3px solid var(--lbx-y); box-shadow: 0 4px 0 #000, 6px 6px 0 rgba(200, 16, 46, 0.55); }
.lbxPopL { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; }
.lbxOpt { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 3px; min-height: 46px; padding: 4px 10px !important; text-align: left !important; background: #0b0e22 !important; border: 3px solid var(--lbx-line) !important; }
.lbxOptT { font-family: var(--lbx-an); font-size: 17px; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; }
.lbxOptS { font-family: var(--lbx-px); font-size: 7px; color: var(--lbx-dim); }
.lbxOpt[aria-pressed="true"] { border-color: var(--lbx-y) !important; background: rgba(255, 208, 46, 0.14) !important; }
.lbxOpt[aria-pressed="true"] .lbxOptT { color: var(--lbx-y); }

/* ---------- now-playing tag ---------- */
.lbxTag { position: fixed; z-index: 40; left: 50%; top: var(--lbx-tag-top, calc(env(safe-area-inset-top, 0px) + max(88px, 11vh))); transform: translate(-50%, -8px) skewX(-9deg); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 8px; max-width: 70vw;
  padding: 7px 14px 7px 10px; font-family: var(--lbx-px); font-size: clamp(8px, 1vw, 11px); letter-spacing: 0.08em; color: #fff; white-space: nowrap; text-shadow: 2px 2px 0 #000;
  background: linear-gradient(90deg, rgba(8, 10, 26, 0.92), rgba(8, 10, 26, 0.78)); border-left: 5px solid var(--lbx-y); box-shadow: 4px 4px 0 rgba(200, 16, 46, 0.7); transition: opacity 0.25s, transform 0.25s; }
.lbxTag.lbxShow { opacity: 1; transform: translate(-50%, 0) skewX(-9deg); }
.lbxTagN { color: var(--lbx-y); font-family: Arial, sans-serif; font-size: 1.5em; }
.lbxTagT { overflow: hidden; text-overflow: ellipsis; }
.lbxFab { position: fixed; z-index: 45; right: 12px; bottom: 12px; min-height: 44px; font-family: var(--lbx-px); font-size: 9px; color: #fff; background: #0b0e22; border: 3px solid var(--lbx-y); }
@media (min-width: 900px) { .lbxTab { padding: 0 12px !important; } .lbxTabs { gap: 4px; } }