/* Games menu and the games themselves (see js/games/). */
#btnGames{ background: #ffffff; border-radius: 16px; }
#btnGames .pad-ico{ width: 36px; height: 36px; stroke-width: 1.8; }

/* ---------------- the Games menu ---------------- */
.gm-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gm-card{ display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; text-align: left;
  background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.gm-card:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.gm-art{ display: block; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; line-height: 0; }
.gm-art svg{ width: 100%; height: auto; display: block; }
.gm-art.sm{ width: 120px; flex: none; }
.gm-name{ font: 400 26px 'Lilita One', sans-serif; margin-top: 6px; }
.gm-tag{ font: 800 18px Nunito, sans-serif; color: var(--ink-2); }
.gm-head{ display: flex; align-items: center; gap: 14px; }
.gm-head b{ display: block; font: 400 28px 'Lilita One', sans-serif; }
.gm-head span{ font: 800 18px Nunito, sans-serif; color: var(--ink-2); }
.gm-h{ margin: 18px 0 10px; font: 400 22px 'Lilita One', sans-serif; }
.gm-maps{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gm-map{ display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink); font: 400 22px 'Lilita One', sans-serif; text-align: left; }
.gm-map.on{ background: var(--sun); }
.gm-map-art{ display: block; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; line-height: 0; }
.gm-map-art svg{ width: 100%; height: auto; }
.gm-actions{ display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-top: 20px; }

/* ---------------- Bloxshot ---------------- */
.game.in-game .hud-top-left, .game.in-game .hud-top-right, .game.in-game .hud-right, .game.in-game .hud-bottom-left{ visibility: hidden; }
.fps-root{ position: fixed; inset: 0; z-index: 90; background: #0c1422; touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: Nunito, sans-serif; color: #fff; overflow: hidden; }
.fps-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fps-loading{ position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; background: #0c1422; }
.fps-loading b{ font: 400 44px 'Lilita One', sans-serif; }
.fps-loading span{ font: 800 22px Nunito, sans-serif; color: #9fb4d4; }
.fps-hud{ position: absolute; inset: 0; pointer-events: none; --hud: #9fe8ff; }
.fps-hud > *{ position: absolute; }
.fps-hud button, .fps-hud .fps-touch, .fps-hud .fps-pause, .fps-hud .fps-click{ pointer-events: auto; }
.fps-hud button{ font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* score: both teams and the clock */
.fps-score{ top: calc(14px + env(safe-area-inset-top, 0px)); left: calc(14px + env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: auto auto; gap: 6px;
  padding: 0; margin: 0; background: none; border: 0; cursor: default; }
.fps-team{ min-width: 92px; padding: 4px 14px; border: 3px solid rgba(12,20,34,.85); border-radius: 10px; text-align: center; opacity: .82; }
.fps-team b{ font: 400 34px 'Lilita One', sans-serif; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.fps-team.red{ background: rgba(224,69,63,.82); }
.fps-team.blue{ background: rgba(59,120,255,.82); }
.fps-team.mine{ opacity: 1; outline: 3px solid #fff; }
.fps-clock{ grid-column: 1 / 3; text-align: center; font: 400 26px 'Lilita One', sans-serif; padding: 2px 8px; background: rgba(12,20,34,.6); border-radius: 8px; }

/* shield over health, top middle */
.fps-vitals{ top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(420px, 44vw); display: flex; flex-direction: column; gap: 6px; }
.fps-shield, .fps-health{ height: 20px; border: 3px solid rgba(12,20,34,.9); border-radius: 8px; background: rgba(12,20,34,.55); overflow: hidden; }
.fps-health{ height: 12px; width: 70%; margin: 0 auto; }
.fps-shield i{ display: block; height: 100%; background: linear-gradient(#bff4ff, #4cc8ff); box-shadow: 0 0 12px #4cc8ff; transition: width .12s; }
.fps-shield.empty{ border-color: #ff3d3d; }
.fps-health i{ display: block; height: 100%; background: #7dff8a; transition: width .2s; }
.fps-health.low i{ background: #ff4d4d; }

/* the gun, bottom right */
.fps-gun{ right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-end; gap: 12px; }
.fps-gun-info{ text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fps-gun-name{ font: 400 24px 'Lilita One', sans-serif; color: var(--hud); text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.fps-gun-ammo b{ font: 400 56px 'Lilita One', sans-serif; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.fps-gun-ammo span{ font: 400 28px 'Lilita One', sans-serif; margin-left: 10px; color: #cfe6ff; }
.fps-gun-ammo.reloading b{ color: #ffcf33; }
.fps-gun-alt{ font: 800 18px Nunito, sans-serif; color: #cfe6ff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.fps-nades{ display: flex; gap: 6px; }
.fps-nades i{ width: 16px; height: 20px; border-radius: 4px; border: 2px solid rgba(12,20,34,.9); background: rgba(255,255,255,.18); }
.fps-nades i.on{ background: #ffa04a; }

/* tracker bottom left, kill feed above it */
.fps-radar{ left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 170px; height: 170px; }
.fps-feed{ left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(196px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 4px; max-width: 46vw; }
.fps-feed-row{ display: flex; gap: 8px; align-items: center; padding: 3px 10px; background: rgba(12,20,34,.62); border-radius: 8px; font: 800 18px Nunito, sans-serif; white-space: nowrap; }
.fps-feed-row b{ font: 400 19px 'Lilita One', sans-serif; }
.fps-feed-row span{ color: #cfe6ff; }

/* the reticle: one for each gun, red over an enemy */
.fps-reticle{ left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; overflow: visible; color: rgba(159,232,255,.95);
  fill: currentColor; stroke: currentColor; stroke-linecap: square; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.35)); }
.fps-reticle.enemy{ color: #ff3d3d; }
.fps-hud.zoomed .fps-reticle[data-k="sniper"]{ display: none; }
.fps-hitmark{ left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  background: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
  -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px); mask: radial-gradient(circle, transparent 8px, #000 9px); }
.fps-hitmark.kill{ background: linear-gradient(45deg, transparent 42%, #ff3d3d 42%, #ff3d3d 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #ff3d3d 42%, #ff3d3d 58%, transparent 58%); }
.fps-damage{ inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,40,40,.75)); transition: opacity .1s; }
.fps-scope{ inset: 0; display: grid; place-items: center; background: radial-gradient(circle at center, transparent 38vmin, rgba(0,0,0,.92) 38.5vmin); }
.fps-scope div{ width: 76vmin; height: 76vmin; border-radius: 50%; border: 4px solid rgba(0,0,0,.9);
  background: linear-gradient(#000, #000) center/2px 100% no-repeat, linear-gradient(#000, #000) center/100% 2px no-repeat; opacity: .75; }

/* medals: side by side above the reticle */
.fps-medals{ left: 50%; top: 21%; transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-start; }
.fps-medal-one{ display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; opacity: 0; transform: scale(.3) translateY(10px);
  transition: transform .28s cubic-bezier(.2,1.8,.4,1), opacity .2s; }
.fps-medal-one.in{ opacity: 1; transform: none; }
.fps-medal-one.out{ opacity: 0; transform: translateY(-14px); transition: transform .35s, opacity .35s; }
.fps-medal-one svg{ width: 68px; height: 68px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.fps-medal-one b{ font: 400 19px 'Lilita One', sans-serif; color: #ffcf33; text-shadow: 0 2px 0 #0c1422; white-space: nowrap; text-align: center; }

.fps-prompt{ left: 50%; top: 62%; transform: translateX(-50%); padding: 8px 18px; background: rgba(12,20,34,.75); border: 3px solid var(--hud); border-radius: 12px; font: 400 24px 'Lilita One', sans-serif; white-space: nowrap; }
.fps-dead{ inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; background: rgba(12,20,34,.25); }
.fps-dead b{ font: 400 46px 'Lilita One', sans-serif; text-shadow: 0 3px 0 #0c1422; }
.fps-dead span{ font: 800 22px Nunito, sans-serif; text-shadow: 0 2px 0 #0c1422; }
.fps-banner{ left: 50%; top: 34%; transform: translateX(-50%); padding: 10px 26px; background: rgba(12,20,34,.75); border-radius: 14px; font: 400 44px 'Lilita One', sans-serif; white-space: nowrap; }
.fps-board{ left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, 94vw); max-height: 80vh; overflow: auto; padding: 14px; background: rgba(12,20,34,.88); border: 3px solid var(--hud); border-radius: 16px; }
.fps-board-cols, .fps-board-row, .fps-board-head{ display: grid; grid-template-columns: 1fr 80px 80px; gap: 8px; align-items: center; }
.fps-board-cols{ font: 800 17px Nunito, sans-serif; color: #9fb4d4; text-align: center; padding: 0 10px; }
.fps-board-team{ margin-top: 10px; border-radius: 12px; overflow: hidden; }
.fps-board-head{ padding: 6px 10px; font: 400 26px 'Lilita One', sans-serif; white-space: pre; }
.fps-board-head b:last-child{ grid-column: 2 / 4; text-align: center; }
.fps-board-team.red .fps-board-head{ background: rgba(224,69,63,.85); }
.fps-board-team.blue .fps-board-head{ background: rgba(59,120,255,.85); }
.fps-board-row{ padding: 5px 10px; font: 800 19px Nunito, sans-serif; background: rgba(255,255,255,.06); }
.fps-board-row:nth-child(odd){ background: rgba(255,255,255,.11); }
.fps-board-row b{ text-align: center; font: 400 21px 'Lilita One', sans-serif; }
.fps-board-row.me{ background: rgba(255,207,51,.3); }
.fps-pause, .fps-click{ inset: 0; display: grid; place-items: center; background: rgba(12,20,34,.6); }
.fps-pause[hidden], .fps-click[hidden], .fps-dead[hidden], .fps-board[hidden], .fps-banner[hidden], .fps-prompt[hidden], .fps-scope[hidden], .fps-hitmark[hidden], .fps-swap[hidden], .fps-ring[hidden]{ display: none; }
.fps-pause-card{ width: min(420px, 90vw); display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--paper, #fffaf0); color: var(--ink, #1b2233);
  border: 3px solid var(--ink, #1b2233); border-radius: 18px; box-shadow: 0 5px 0 var(--ink, #1b2233); }
.fps-pause-card h2{ margin: 0; font: 400 34px 'Lilita One', sans-serif; text-align: center; }
.fps-btn{ min-height: 64px; border: 3px solid var(--ink, #1b2233); border-radius: 14px; background: var(--sun, #ffe600); color: var(--ink, #1b2233) !important;
  font: 400 26px 'Lilita One', sans-serif !important; box-shadow: 0 4px 0 var(--ink, #1b2233); }
.fps-btn.ghost{ background: #fff; }
.fps-btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--ink, #1b2233); }
.fps-click b{ padding: 16px 28px; background: var(--sun, #ffe600); color: var(--ink, #1b2233); border: 3px solid var(--ink, #1b2233); border-radius: 14px; font: 400 32px 'Lilita One', sans-serif; }

/* ---------------- phones: two fingers, one gun button ---------------- */
.fps-touch{ inset: 0; touch-action: none; }
.fps-ring{ position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.05); pointer-events: none; display: grid; place-items: center; }
.fps-ring b{ width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.3); }
.fps-hud.touch .fps-vitals{ top: calc(10px + env(safe-area-inset-top, 0px)); width: min(38vw, 250px); }
.fps-hud.touch .fps-score{ top: calc(62px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); cursor: pointer; grid-template-columns: auto auto auto; align-items: center; }
.fps-hud.touch .fps-clock{ grid-column: auto; order: 2; font-size: 19px; padding: 2px 6px; }
.fps-hud.touch .fps-team.red{ order: 1; } .fps-hud.touch .fps-team.blue{ order: 3; }
.fps-hud.touch .fps-team{ min-width: 50px; padding: 2px 6px; }
.fps-hud.touch .fps-team b{ font-size: 24px; }
.fps-hud.touch .fps-radar{ left: auto; bottom: auto; right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); width: 104px; height: 104px; }
.fps-pausebtn{ right: calc(26px + env(safe-area-inset-right, 0px)); top: calc(124px + env(safe-area-inset-top, 0px)); width: 72px; height: 72px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; background: rgba(12,20,34,.55); border: 4px solid rgba(255,255,255,.7); }
.fps-pausebtn svg{ width: 32px; height: 32px; fill: #fff; }
.fps-hud.touch .fps-feed{ left: calc(8px + env(safe-area-inset-left, 0px)); top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; width: calc(28vw - 8px); max-width: 190px; }
/* on a phone each line is the killer over the one they got (no gun name) */
.fps-hud.touch .fps-feed-row{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 8px; white-space: nowrap; overflow: hidden; }
.fps-hud.touch .fps-feed-row b{ font-size: 17px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fps-hud.touch .fps-feed-row span.w{ display: none; }
.fps-hud.touch .fps-feed-row b.v::before{ content: '\203A  '; color: #cfe6ff; }
.fps-hud.touch .fps-gun{ right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.fps-hud.touch .fps-gun-ammo{ pointer-events: auto; }
.fps-hud.touch .fps-gun-ammo b{ font-size: 44px; }
.fps-hud.touch .fps-gun-ammo span{ font-size: 22px; }
.fps-hud.touch .fps-gun-name{ font-size: 21px; }
.fps-cycle{ width: 84px; height: 84px; padding: 0; display: grid; place-items: center; border-radius: 22px; background: rgba(12,20,34,.6); border: 4px solid rgba(255,255,255,.8); }
.fps-cycle svg{ width: 58px; height: 40px; }
.fps-cycle.nade{ border-color: #ffa04a; }
.fps-cycle:active{ transform: scale(.94); }
.fps-swap{ left: 50%; bottom: calc(122px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); min-width: 190px; min-height: 68px; padding: 6px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px; background: var(--sun, #ffe600); color: #1b2233 !important;
  border: 4px solid #1b2233; box-shadow: 0 4px 0 #1b2233; }
.fps-swap span{ font: 800 16px Nunito, sans-serif; }
.fps-swap b{ font: 400 24px 'Lilita One', sans-serif; white-space: nowrap; }
.fps-hud.touch .fps-medals{ top: 31%; }
.fps-hud.touch .fps-medal-one{ width: 86px; }
.fps-hud.touch .fps-medal-one svg{ width: 56px; height: 56px; }
.fps-hud.touch .fps-medal-one b{ font-size: 16px; }