/* Shared systems: settings, cloud chip, controller focus, FX overlay,
   cinematics, install/offline UI. Loaded after app.css. */

:root { --text-scale: 1; }
body { font-size: calc(1em * var(--text-scale)); }

/* ---- header system bar --------------------------------------------------- */
.sys-bar {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right));
  z-index: 60; display: flex; gap: 6px; align-items: center;
}
.sys-bar button { padding: 6px 9px; min-width: 34px; font-size: 14px; line-height: 1; }
@media (pointer: coarse) { .sys-bar button { min-width: 42px; min-height: 36px; } }
/* phones: the bar belongs to the top of the page and scrolls away with it. Fixed, it floated over whatever
   you had scrolled to (a quest row, a chat line). The header leaves it a row of its own. */
@media (max-width: 820px) {
  .sys-bar { position: absolute; }
  #app > header { padding-top: calc(46px + env(safe-area-inset-top)); }
}
.cloud-chip {
  font: 700 10px/1 system-ui, sans-serif; letter-spacing: .08em; padding: 7px 8px; border-radius: 999px;
  background: rgba(62, 198, 165, .12); color: #7fe0c4; border: 1px solid rgba(62, 198, 165, .35); cursor: default;
  white-space: nowrap;
}
.cloud-chip.busy { background: rgba(255, 176, 32, .12); color: #ffd27a; border-color: rgba(255, 176, 32, .4); }
.cloud-chip.off { background: rgba(225, 91, 91, .12); color: #f19a9a; border-color: rgba(225, 91, 91, .4); }
@media (max-width: 520px) { .cloud-chip { font-size: 0; padding: 7px; } .cloud-chip::first-letter { font-size: 12px; } }

.offline-badge {
  position: fixed; left: 50%; transform: translate(-50%, -140%); top: calc(6px + env(safe-area-inset-top));
  z-index: 59; background: #3a1414; color: #ffc9c9; border: 1px solid #7a2a2a; border-radius: 999px;
  padding: 6px 12px; font: 600 11px system-ui, sans-serif; transition: transform .3s ease; pointer-events: none;
}
.is-offline .offline-badge { transform: translate(-50%, 0); }

.update-toast { display: flex; gap: 10px; align-items: center; }
.update-toast button { padding: 4px 10px; }

.fps-meter {
  position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 70; pointer-events: none;
  font: 700 11px ui-monospace, Consolas, monospace; color: #7fe0c4; background: rgba(0,0,0,.55); padding: 3px 6px; border-radius: 6px;
}

/* ---- settings panel ------------------------------------------------------ */
.st-panel { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); display: flex; flex-direction: column; text-align: left; }
.st-head { display: flex; justify-content: space-between; align-items: center; }
.st-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0; }
.st-tabs button { flex: 1 1 auto; padding: 7px 8px; font-size: 11px; }
.st-tabs button.on { background: var(--amber, #ffb020); color: #120e0a; }
.st-body { overflow: auto; padding-right: 4px; }
.st-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.st-row > span:first-child { display: flex; flex-direction: column; font-size: 13px; }
.st-row em { font-style: normal; font-size: 11px; opacity: .6; }
.st-row input[type=range] { width: min(200px, 40vw); accent-color: var(--amber, #ffb020); }
.st-row b { min-width: 44px; text-align: right; font-size: 12px; }
.st-toggle { min-width: 56px; }
.st-toggle.on, .st-choice button.on { background: var(--amber, #ffb020); color: #120e0a; }
.st-choice { display: inline-flex; gap: 4px; grid-column: span 2; justify-self: end; }
.st-choice button { padding: 5px 9px; font-size: 11px; }
.st-key { min-width: 84px; font-family: ui-monospace, Consolas, monospace; grid-column: span 2; justify-self: end; }
.st-key.cap { background: #3a2a10; color: #ffd27a; animation: st-blink 1s infinite; }
@keyframes st-blink { 50% { opacity: .6; } }
.st-sub { margin: 14px 0 4px; font: 800 11px system-ui, sans-serif; letter-spacing: .12em; color: var(--amber, #ffb020); display: flex; justify-content: space-between; align-items: center; }
.st-note { font-size: 12px; opacity: .75; margin: 6px 0; }
.st-saves .row { font-size: 12px; }

/* ---- controller focus + virtual cursor ------------------------------------ */
.pad-focus { outline: 3px solid #7fe0c4 !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(127, 224, 196, .18) !important; }
#pad-cursor {
  position: fixed; z-index: 80; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 3px solid #7fe0c4; box-shadow: 0 0 12px rgba(127,224,196,.7); pointer-events: none; display: none;
}
#pad-cursor.down { background: rgba(127, 224, 196, .45); transform: scale(.8); }

/* ---- FX overlay + flash ----------------------------------------------------- */
#fx-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 75; }
.fx-flash { position: fixed; inset: 0; z-index: 74; pointer-events: none; opacity: 0; animation: fx-flash ease-out forwards; mix-blend-mode: screen; }
@keyframes fx-flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ---- cinematic reveal ------------------------------------------------------- */
.fx-cine {
  position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cine) 18%, transparent), rgba(4,5,8,.88) 60%);
  animation: cine-in .35s ease-out;
}
.fx-cine.out { animation: cine-out .3s ease-in forwards; }
.fx-cine-rays {
  position: absolute; width: 160vmax; height: 160vmax; opacity: .22;
  background: repeating-conic-gradient(from 0deg, var(--cine) 0 6deg, transparent 6deg 18deg);
  animation: cine-spin 14s linear infinite; mask: radial-gradient(circle, #000 0, transparent 55%);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 55%);
}
.fx-cine.big .fx-cine-rays { opacity: .38; animation-duration: 8s; }
.fx-cine-card {
  position: relative; text-align: center; padding: 26px 34px; min-width: min(360px, 84vw); border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,22,30,.96), rgba(10,11,16,.96));
  border: 2px solid var(--cine); box-shadow: 0 0 60px color-mix(in srgb, var(--cine) 55%, transparent), inset 0 0 30px rgba(0,0,0,.6);
  animation: cine-card .6s cubic-bezier(.2,1.4,.4,1) both;
}
.fx-cine.big .fx-cine-card { animation: cine-card-big 1.1s cubic-bezier(.2,1.2,.3,1) both; }
.fx-cine-icon { font-size: 64px; line-height: 1.1; filter: drop-shadow(0 0 18px var(--cine)); }
.fx-cine-kicker { font: 800 11px system-ui, sans-serif; letter-spacing: .3em; color: var(--cine); margin-top: 6px; }
.fx-cine-title { font: 900 clamp(22px, 5vw, 34px)/1.1 system-ui, sans-serif; color: #fff; margin: 6px 0; text-shadow: 0 0 18px var(--cine); }
.fx-cine-sub { font-size: 13px; opacity: .8; }
.fx-cine.still, .fx-cine.still * { animation: none !important; }
@keyframes cine-in { from { opacity: 0; } }
@keyframes cine-out { to { opacity: 0; } }
@keyframes cine-spin { to { transform: rotate(360deg); } }
@keyframes cine-card { 0% { transform: scale(.4) rotateX(70deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cine-card-big { 0% { transform: scale(.2) rotateY(540deg); opacity: 0; filter: brightness(3); } 60% { filter: brightness(1.6); } 100% { transform: none; opacity: 1; filter: none; } }

/* ---- scene transitions ------------------------------------------------------ */
.fx-wipe { position: fixed; inset: 0; z-index: 71; background: #000; pointer-events: none; animation: fx-wipe .9s ease-in-out forwards; }
@keyframes fx-wipe { 0% { opacity: 0; } 35%, 55% { opacity: 1; } 100% { opacity: 0; } }
section:not(.hidden) { animation: tab-in .22s ease-out; }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- reduced motion ----------------------------------------------------------- */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}
.reduced-motion .fx-cine { animation: none; }

/* ---- installed-app polish -------------------------------------------------------- */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: none; }
  nav { padding-bottom: env(safe-area-inset-bottom); }
}
canvas { touch-action: none; }

/* settings controls use the quiet button style; only the active choice glows */
.st-panel button, .sys-bar button { background: #160f08; color: var(--amber, #ffb020); border: 1px solid #4a3010; }
.st-tabs button.on, .st-toggle.on, .st-choice button.on, .st-panel .quick button:not(.ghost):not([disabled]) {
  background: linear-gradient(135deg, var(--amber), var(--amber2)); color: #140e04; border-color: transparent;
}
.st-panel button[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- sign-in -------------------------------------------------------------- */
.join-form { display: flex; flex-direction: column; gap: 8px; }
.auth-fields { display: flex; flex-direction: column; gap: 8px; }
.auth-fields.hidden { display: none; }

/* ---- game full screen (sys/fullscreen.js) --------------------------------- */
/* the card fills the viewport under the page overlays (toasts 50, FX 75,
   crates 80, Pit/Spire pickers 90) and the page can't scroll behind it */
.gfull-btn { background: #101820; color: #8fd8ff; border: 1px solid #2a4a60; font-size: 11px; letter-spacing: .08em; padding: 7px 10px; }
.gfull-btn.on { background: #3a1414; color: #ffc9c9; border-color: #7a2a2a; }
html.gfull-on, html.gfull-on body { overflow: hidden; }
html.gfull-on nav { display: none; }
/* full screen = a game repainting every frame across the whole screen: keep
   everything else flat. No fixed page background/grid layers underneath, no
   gradients or shadows on the layer, no blend-mode flashes over the canvas. */
html.gfull-on body { background: #05060a; }
html.gfull-on body::before { display: none; }
/* the tab slide-in (translate) would make the fixed layer size to the section */
html.gfull-on section:not(.hidden) { animation: none; }
html.gfull-on .fx-flash { mix-blend-mode: normal; animation-name: fx-flash-lite; }
@keyframes fx-flash-lite { 0% { opacity: .22; } 100% { opacity: 0; } }
.card.gfull { position: fixed; inset: 0; z-index: 45; margin: 0 !important; border-radius: 0; border: 0; overflow: auto;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
  background: #05060a; box-shadow: none; contain: layout paint;
  display: flex; flex-direction: column; gap: 8px; animation: none; }
/* Pit: canvas as big as fits, keeping 720:420; HUD + buttons under it */
#pit-card.gfull { --gf-chrome: 130px; align-items: center; justify-content: center; overflow: hidden; }
/* capped at 2x the logical 720x420: crisp pixel art (at devicePixelRatio 2
   the canvas buffer then maps 1:1 to the screen) and far fewer pixels to
   scale every frame than a 3x stretch on a big monitor */
#pit-card.gfull { --gf-w: min(100%, calc((100dvh - var(--gf-chrome)) * 720 / 420), 1440px); }
#pit-card.gfull #pit { width: var(--gf-w) !important; max-width: none !important; height: auto; flex: 0 0 auto;
  border-radius: 0 !important; box-shadow: none !important; will-change: transform; }
#pit-card.gfull > .row, #pit-card.gfull > .quick { width: var(--gf-w); }
#pit-card.gfull .pit-boards { display: none; }
@media (max-width: 800px) { #pit-card.gfull { --gf-chrome: 270px; } }
/* Spire: its own screen, scrolls inside the layer if a run is tall */
#spire-stage.gfull { max-width: none; }
#spire-stage.gfull > #spire-root { width: min(100%, 1100px); margin: 0 auto; }
#spire-stage.gfull .help-pop { max-width: 1100px; margin: 0 auto; }

/* ⚑ REPORT (static/js/sys/report.js) and the ADMIN tab's REPORTS card */
.rp-panel { width: min(620px, 100%); max-height: min(88vh, 820px); overflow: auto; text-align: left; }
.rp-head { display: flex; justify-content: space-between; align-items: center; }
.rp-x { min-width: 34px; }
.rp-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.rp-kinds button { padding: 10px; text-align: left; background: #160f08; color: #cfc4a8; border: 1px solid #4a3010; border-radius: 10px; font-weight: 700; letter-spacing: .08em; }
.rp-kinds button small { display: block; font-weight: 400; letter-spacing: 0; opacity: .7; margin-top: 2px; }
.rp-kinds button.on { color: var(--amber, #ffb020); border-color: var(--amber, #ffb020); box-shadow: 0 0 14px rgba(255, 176, 32, .25) inset; }
#rp-form { display: flex; flex-direction: column; gap: 8px; }
#rp-form input, #rp-form textarea { width: 100%; box-sizing: border-box; background: #0a0806; color: #efe6cf; border: 1px solid #4a3010; border-radius: 8px; padding: 9px 10px; font: inherit; resize: vertical; }
#rp-form input:focus, #rp-form textarea:focus { outline: none; border-color: var(--amber, #ffb020); }
.rp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rp-mine-h { margin-top: 14px; }
.rp-mine { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rp-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 7px 8px; border: 1px solid #2a1c0c; border-radius: 8px; background: #0e0b08; }
.rp-t { color: #efe6cf; font-size: 13px; }
.rp-note { display: block; color: #9fd0a0; font-style: normal; font-size: 12px; margin-top: 3px; }
.rp-s { font-size: 10px; letter-spacing: .1em; padding: 3px 7px; border-radius: 99px; border: 1px solid #4a3010; color: #cfc4a8; white-space: nowrap; }
.rp-s.st-open { color: #ffb020; border-color: #6a4a10; }
.rp-s.st-planned, .rp-s.st-in-progress { color: #7fc8ff; border-color: #1f4a6a; }
.rp-s.st-done { color: #7fe08a; border-color: #1f5a2a; }
.rp-s.st-wontfix { color: #9a8f7a; }
.adm-rep { border-bottom: 1px solid #2a1c0c; padding: 7px 4px; cursor: pointer; }
.adm-rep-h { display: flex; gap: 8px; align-items: center; }
.adm-rep-h b { flex: 1; }
.adm-rep-h select { background: #160f08; color: var(--amber, #ffb020); border: 1px solid #4a3010; border-radius: 6px; padding: 2px 4px; }
.adm-rep-b { cursor: default; margin-top: 6px; }
.adm-rep-b p { margin: 4px 0 8px; color: #efe6cf; white-space: pre-wrap; }
.adm-rep-ctx { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: #9a8f7a; margin-bottom: 8px; }
.adm-rep-ctx i { color: #cfc4a8; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.adm-rep-act { display: flex; gap: 6px; }
.adm-rep-act input { flex: 1; background: #0a0806; color: #efe6cf; border: 1px solid #4a3010; border-radius: 6px; padding: 5px 8px; }
.adm-reports { max-height: 420px; }

.adm-rel-f { display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: 6px; margin: 8px 0 4px; }
.adm-rel-f input { background: #0a0806; color: #efe6cf; border: 1px solid #4a3010; border-radius: 6px; padding: 5px 8px; }