/* LINE BREAK play shell (Hermes layer): screen fit, loader, warning card, install tip, full screen button
   Every id, class and custom property starts with lbx. Loaded after the game's own <style>. */
:root {
  --lbxSafeT: env(safe-area-inset-top, 0px); --lbxSafeR: env(safe-area-inset-right, 0px);
  --lbxSafeB: env(safe-area-inset-bottom, 0px); --lbxSafeL: env(safe-area-inset-left, 0px);
  --lbxInk: #04050c; --lbxGold: #ffd02e; --lbxRed: #c8102e; --lbxText: #e8ecff; --lbxLine: #39405f;
}

/* fit the screen, never scroll the page, no rubber band */
html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
html { background: var(--lbxInk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; inset: 0; }

/* no pinch or double-tap zoom, no text selection, no iOS long-press callout on the game */
html, body, #ui, .screen { touch-action: pan-x pan-y; }
#game { touch-action: none; }
body, #ui, #ui *, #game, [id^="lbx"], [class^="lbx"] {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#ui input, #ui select, #ui textarea { -webkit-user-select: auto; user-select: auto; }
img, canvas { -webkit-user-drag: none; }

/* ---------- loader (markup is static in index.html so it covers the very first paint) ---------- */
#lbxLoad {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(var(--lbxSafeT) + 16px) calc(var(--lbxSafeR) + 16px) calc(var(--lbxSafeB) + 16px) calc(var(--lbxSafeL) + 16px);
  background: radial-gradient(120% 90% at 50% 0%, #1b2450 0%, #0a0d22 55%, var(--lbxInk) 100%);
  color: var(--lbxText); transition: opacity .28s ease, visibility 0s linear .28s; pointer-events: auto;
}
#lbxLoad.lbxGone { opacity: 0; visibility: hidden; pointer-events: none; }
#lbxLoad .lbxLoadIn { display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; animation: lbxIn .25s ease .35s forwards; }
#lbxLoad .lbxLogo { font-family: 'Bungee', Anton, Impact, 'Arial Black', sans-serif; font-size: clamp(30px, 8vmin, 72px); line-height: .9; letter-spacing: .02em;
  transform: skewX(-9deg); color: #fff; text-shadow: 3px 3px 0 var(--lbxRed), -1px -1px 0 #000; white-space: nowrap; }
#lbxLoad .lbxLogo b { color: var(--lbxGold); font-weight: inherit; }
#lbxLoad .lbxBar { width: min(320px, 70vw); height: 12px; border: 3px solid var(--lbxLine); background: #0b0e22; box-shadow: 0 3px 0 #000; overflow: hidden; }
#lbxLoad .lbxBar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lbxRed), var(--lbxGold)); transition: width .2s linear; }
#lbxLoad .lbxMsg { font-family: 'Press Start 2P', ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .12em; color: var(--lbxText); text-transform: uppercase; min-height: 1.4em; text-align: center; }
@keyframes lbxIn { to { opacity: 1; } }

/* small progress strip on the title while the fighters keep loading */
#lbxStrip { position: fixed; z-index: 60; left: calc(var(--lbxSafeL) + 12px); bottom: calc(var(--lbxSafeB) + 8px); display: flex; align-items: center; gap: 8px;
  font-family: 'Press Start 2P', ui-monospace, Menlo, monospace; font-size: 7px; letter-spacing: .12em; color: rgba(232, 236, 255, .8); pointer-events: none;
  transition: opacity .3s; text-transform: uppercase; }
#lbxStrip[hidden] { display: none; }
#lbxStrip i { display: block; width: 64px; height: 4px; background: rgba(255, 255, 255, .15); position: relative; }
#lbxStrip i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--lbxP, 0%); background: var(--lbxGold); }

/* ---------- photosensitivity warning card ---------- */
#lbxWarn { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; background: rgba(4, 5, 12, .94);
  padding: calc(var(--lbxSafeT) + 12px) calc(var(--lbxSafeR) + 14px) calc(var(--lbxSafeB) + 12px) calc(var(--lbxSafeL) + 14px); overflow-y: auto; }
#lbxWarn[hidden] { display: none; }
#lbxWarn .lbxCard { max-width: 520px; width: 100%; margin: auto; background: rgba(8, 10, 26, .98); border: 3px solid var(--lbxGold); box-shadow: 0 4px 0 #000;
  padding: clamp(14px, 3.4vmin, 24px); display: flex; flex-direction: column; gap: clamp(8px, 2vmin, 14px); color: var(--lbxText); text-align: left; }
#lbxWarn h2 { margin: 0; font-family: 'Bungee', Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(17px, 4.4vmin, 26px); color: var(--lbxGold); letter-spacing: .03em; text-shadow: 2px 2px 0 var(--lbxRed); }
#lbxWarn p { margin: 0; font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif; font-size: clamp(14px, 3.4vmin, 17px); line-height: 1.4; }
#lbxWarn .lbxRow { display: flex; gap: 10px; flex-wrap: wrap; }
#lbxWarn button, #lbxTip button { font-family: 'Press Start 2P', ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .06em; color: #fff; background: #0b0e22;
  border: 3px solid var(--lbxLine); border-radius: 2px; box-shadow: 0 3px 0 #000; min-height: 44px; padding: 10px 14px; cursor: pointer; flex: 1 1 auto; }
#lbxWarn button.lbxGo { border-color: var(--lbxGold); }
#lbxWarn button:focus-visible, #lbxTip button:focus-visible, #lbxFs:focus-visible { outline: 3px solid var(--lbxGold); outline-offset: 2px; }

/* ---------- install tip (iPhone Safari, once) ---------- */
#lbxTip { position: fixed; z-index: 2147482900; left: 50%; transform: translateX(-50%); bottom: calc(var(--lbxSafeB) + 10px); width: min(420px, calc(100vw - var(--lbxSafeL) - var(--lbxSafeR) - 24px));
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: rgba(8, 10, 26, .97); border: 3px solid var(--lbxGold); box-shadow: 0 4px 0 #000; color: var(--lbxText);
  font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 14px; line-height: 1.3; }
#lbxTip[hidden] { display: none; }
#lbxTip p { margin: 0; flex: 1 1 auto; }
#lbxTip svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--lbxGold); stroke-width: 2; }
#lbxTip button { flex: 0 0 auto; min-width: 44px; padding: 8px 10px; }

/* ---------- full screen button ---------- */
#lbxFs { position: fixed; z-index: 70; top: calc(var(--lbxSafeT) + 8px); right: calc(var(--lbxSafeR) + 8px); width: 44px; height: 44px; padding: 0; display: none;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .3); border-radius: 2px; color: #fff; cursor: pointer; }
#lbxFs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
#lbxFs .lbxFsOff { display: none; }
html.lbxIsFs #lbxFs .lbxFsOn { display: none; }
html.lbxIsFs #lbxFs .lbxFsOff { display: block; }
html.lbxCanFs[data-lbx-screen="title"] #lbxFs, html.lbxCanFs[data-lbx-screen="pause"] #lbxFs,
html.lbxCanFs[data-lbx-screen="settings"] #lbxFs, html.lbxCanFs[data-lbx-screen="howto"] #lbxFs,
html.lbxCanFs[data-lbx-screen="rotate"] #lbxFs { display: flex; }
#lbxFs:hover { border-color: var(--lbxGold); color: var(--lbxGold); }

@media (prefers-reduced-motion: reduce) { #lbxLoad, #lbxLoad .lbxLoadIn, #lbxStrip { transition: none; animation: none; opacity: 1; } }