/* Touch & Go — all styles scoped under #tngg so they never touch the theme,
   and every id is tngg- prefixed so it can't collide with other page elements. */

#tngg { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#e8eefc; font-family:"Courier New", ui-monospace, monospace; line-height:1.4;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none; }   /* no iOS copy/cut menu on long-press */
#tngg * { box-sizing:border-box; }
/* but let the call-sign fields still select/paste normally */
#tngg input { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }

#tngg-wrap { position:relative; width:100%; max-width:880px; aspect-ratio:16/9; background:#000;
  border:3px solid #1b2440; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.6); overflow:hidden; margin:0 auto; }
#tngg canvas { display:block; width:100%; height:100%; touch-action:none; cursor:pointer; image-rendering:auto;
  -webkit-touch-callout:none !important; -webkit-user-select:none !important; user-select:none !important; }
#tngg-wrap:fullscreen, #tngg-wrap:-webkit-full-screen { max-width:none; width:100vw; height:100vh; border:none; border-radius:0; }
/* iOS Safari has no element Fullscreen API — this CSS class is the fallback.
   Max 32-bit z-index so it sits above any floating/sticky ad units. */
#tngg-wrap.tngg-fs { position:fixed; inset:0; z-index:2147483647; max-width:none; width:100vw; height:100vh; height:100dvh; margin:0; border:none; border-radius:0; }
html.tngg-fs-lock, html.tngg-fs-lock body { overflow:hidden; }   /* no background scroll while pseudo-fullscreen */
/* hide ad zones (BSA zones, the fixed/sticky leaderboard, ogy slots) while the game is fullscreen; they come back on exit */
html.tngg-fs-lock [id^="bsa-zone"],
html.tngg-fs-lock [id*="bsa_fixed"],
html.tngg-fs-lock [class*="bsa_fixed"],
html.tngg-fs-lock [id*="ogy-ad-slot"],
html.tngg-fs-lock [class*="ogy-ad-slot"] { display:none !important; }

/* game-over / call-sign overlay */
#tngg-over { position:absolute; inset:0; display:none; justify-content:center; z-index:6;
  background:rgba(4,8,20,.78); backdrop-filter:blur(2px); padding:14px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#tngg-over .panel { width:min(420px,94%); background:#0e1428; border:3px solid #3cbcfc; border-radius:10px;
  padding:18px 18px 16px; text-align:center; box-shadow:0 0 0 3px #0b1020, 0 0 30px rgba(60,188,252,.25); }
#tngg-over h2 { margin:0 0 2px; font-size:26px; letter-spacing:3px; color:#fc5454; text-shadow:2px 2px 0 #000; }
#tngg-over .sub { margin:0 0 12px; font-size:12px; color:#9fb3d8; letter-spacing:1px; }
#tngg-over .scores { display:flex; gap:10px; justify-content:center; margin:4px 0 12px; }
#tngg-over .scores b { display:block; font-size:24px; color:#fcd800; text-shadow:1px 1px 0 #000; }
#tngg-over #tngg-finalScore { color:#3cf8f8; }                 /* your score = cyan */
#tngg-over #tngg-finalScore + span { color:#3cf8f8; }
#tngg-over .scores span { font-size:10px; color:#9fb3d8; letter-spacing:1px; }
#tngg-over .hi { margin:0 0 12px; font-size:15px; font-weight:bold; letter-spacing:2px; color:#fcd800; text-shadow:1px 1px 0 #000; }

/* call-sign generator block (name in -> call sign out) */
#tngg .csBlock { background:#070b18; border:1px solid #22305a; border-radius:6px; padding:10px 10px 12px; margin-bottom:10px; }
#tngg .csLabel { display:block; font-size:10px; color:#7d92bd; letter-spacing:2px; }
#tngg .csName { display:block; font-size:26px; color:#3cf8f8; letter-spacing:3px; line-height:1.15; text-shadow:1px 1px 0 #000; }
#tngg .csHandle { display:block; font-size:10px; color:#9fb3d8; letter-spacing:1px; min-height:13px; margin-bottom:9px; }
#tngg-nameRow, #tngg-mnameRow { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
#tngg-fn, #tngg-ln, #tngg-mfn, #tngg-mln { width:96px; text-transform:uppercase; text-align:center; font-family:inherit; font-size:13px;
  padding:7px 6px; background:#0b1322; color:#e8eefc; border:2px solid #4a5f93; border-radius:6px; }
#tngg-fn:focus, #tngg-ln:focus, #tngg-mfn:focus, #tngg-mln:focus { outline:none; border-color:#3cbcfc; }

/* buttons */
#tngg .btn { font-family:inherit; font-weight:bold; letter-spacing:2px; cursor:pointer; border:none; border-radius:6px;
  padding:9px 14px; font-size:13px; color:#06101f; background:#3cbcfc; box-shadow:0 3px 0 #1a6fa8; }
#tngg .btn:active { transform:translateY(2px); box-shadow:0 1px 0 #1a6fa8; }
#tngg .btn:disabled { opacity:.45; cursor:default; box-shadow:none; transform:none; }
#tngg .btn.alt { background:#fcd800; box-shadow:0 3px 0 #a88e00; }
#tngg .btn.gen { background:#2f8f6f; box-shadow:0 3px 0 #1c5a45; font-size:12px; }
#tngg .btn.home { background:#4a5f93; box-shadow:0 3px 0 #2a3a66; color:#eaf2ff; flex:0 0 auto; font-size:17px; padding:9px 14px; }
#tngg .btn svg { width:15px; height:15px; vertical-align:-2px; }
#tngg-save { width:100%; margin-bottom:10px; letter-spacing:1px; line-height:1.25; white-space:normal; }
#tngg .overBtns { display:flex; gap:8px; justify-content:center; }
#tngg .overBtns .alt { flex:1; }

/* inline fail-screen board */
#tngg-lb { list-style:none; margin:0 0 12px; padding:10px; text-align:left; background:#070b18; border-radius:6px;
  border:1px solid #22305a; }
#tngg-lb li { display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:4px; color:#cdddf6; letter-spacing:1px; }
#tngg-lb li.me { color:#fcd800; background:rgba(252,216,0,.08); border-radius:3px; }
#tngg-lb li .rank { color:#5e76ad; width:26px; }
#tngg-lb li .nm { flex:1; min-width:0; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tngg-lb .empty { color:#5e76ad; font-size:12px; text-align:center; }
/* call-sign-generator style handle: Lt. Bob "Havoc" Mullen */
#tngg .nm .cs { color:#3cf8f8; font-weight:bold; }
#tngg .nm .you { color:#7d92bd; font-size:11px; }

/* corner icon buttons */
#tngg-mute, #tngg-pause, #tngg-lbbtn, #tngg-fsbtn { position:absolute; z-index:7; width:34px; height:34px; padding:8px; border-radius:6px;
  border:2px solid #2a3a66; background:rgba(8,14,30,.72); color:#cdddf6; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
#tngg-mute svg, #tngg-pause svg, #tngg-lbbtn svg, #tngg-fsbtn svg { width:100%; height:100%; display:block; }
#tngg .hidden { display:none !important; }
#tngg-lbbtn { top:8px; left:8px; } #tngg-mute { top:8px; right:8px; }
#tngg-fsbtn { bottom:8px; right:8px; } #tngg-pause { bottom:8px; right:48px; }

/* dedicated full leaderboard screen */
#tngg-board { position:absolute; inset:0; display:none; justify-content:center;
  background:rgba(4,8,20,.92); padding:14px; z-index:8; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#tngg-board .panel { width:min(440px,95%); max-height:94%; display:flex; flex-direction:column; background:#0e1428;
  border:3px solid #fcd800; border-radius:10px; padding:16px; box-shadow:0 0 0 3px #0b1020, 0 0 30px rgba(252,216,0,.22); }
#tngg-board h2 { margin:0; font-size:22px; letter-spacing:3px; color:#fcd800; text-shadow:2px 2px 0 #000; }
#tngg-board .sub { margin:2px 0 10px; font-size:11px; color:#9fb3d8; letter-spacing:1px; }
#tngg-boardList { list-style:none; margin:0 0 12px; padding:6px; text-align:left; background:#070b18; border-radius:6px;
  border:1px solid #22305a; overflow-y:auto; flex:1; min-height:140px; }
#tngg-boardList li { display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:4px 6px; color:#cdddf6; letter-spacing:1px; }
#tngg-boardList li:nth-child(odd){ background:rgba(255,255,255,.03); }
#tngg-boardList li .rank { color:#5e76ad; width:30px; }
#tngg-boardList li .nm { flex:1; min-width:0; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tngg-boardList li.top1 .rank, #tngg-boardList li.top1 .pts { color:#fcd800; }
#tngg-boardList .empty { color:#5e76ad; text-align:center; padding:20px 0; }

/* change-call-sign modal (opened from the title screen) */
#tngg-csmodal { position:absolute; inset:0; display:none; justify-content:center;
  background:rgba(4,8,20,.9); padding:14px; z-index:8; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* center the panel when it fits, but stay scrollable (close button always reachable) */
#tngg-over .panel, #tngg-board .panel, #tngg-csmodal .panel { margin:auto 0; }

/* on phones the game box is short — let modals fill the whole viewport so they're never clipped */
@media (max-width: 700px) {
  #tngg-over, #tngg-board, #tngg-csmodal { position:fixed; }
}
#tngg-csmodal .panel { width:min(420px,94%); background:#0e1428; border:3px solid #3cbcfc; border-radius:10px;
  padding:18px 18px 16px; text-align:center; box-shadow:0 0 0 3px #0b1020, 0 0 30px rgba(60,188,252,.25); }
#tngg-csmodal h2 { margin:0; font-size:22px; letter-spacing:3px; color:#3cf8f8; text-shadow:2px 2px 0 #000; }
#tngg-csmodal .sub { margin:2px 0 12px; font-size:11px; color:#9fb3d8; letter-spacing:1px; }
#tngg-csmodal .btn.alt { width:100%; }

/* legend under the game */
#tngg .legend { font-size:12px; color:#8aa0cc; letter-spacing:1px; text-align:center; line-height:1.6; margin:0; }
#tngg .legend b { color:#cdddf6; }
#tngg .legend .key { display:inline-block; background:#1b2440; border:1px solid #36477a; border-radius:4px;
  padding:1px 7px; color:#e8eefc; }