/* SHABAB AZAN build 205: choice pages - APK first-run "This is a TV / This is a phone" (screen.html) and the web TV page's
   phone / computer page (gate.js). Big focusable buttons for a TV remote, touch and mouse. Sizes in vmin: TV 1920x1080 and phones. */
body.choicepage { margin: 0; min-height: 100vh; background: #030b1f; color: #eaf6ff; overflow-x: hidden; }
.chbg, .gate .chbg { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 0%, #1b4fd055 0%, transparent 60%), radial-gradient(ellipse at 50% 120%, #00c8ff33 0%, transparent 55%), linear-gradient(180deg, #04163f, #030b1f); }
.choice { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vmin, 22px); padding: max(16px, 3vmin) 16px; text-align: center; max-width: 1500px; margin: 0 auto; }
.choice .chlogo { width: clamp(84px, 15vmin, 190px); height: auto; border-radius: 22%; filter: drop-shadow(0 6px 24px #00c8ff55); }
.choice h1 { margin: 0; font: 800 clamp(24px, 5.2vmin, 64px)/1.2 var(--f-head), var(--f-ml), var(--f-ar-ui), sans-serif; color: #fff; text-shadow: 0 2px 14px #00c8ff66; }
.lang-ml .choice h1, .lang-ta .choice h1, .lang-hi .choice h1, .lang-kn .choice h1, .lang-bn .choice h1 { font-family: var(--f-mlh), var(--f-ui), sans-serif; }
.lang-ar .choice h1, .lang-ur .choice h1 { font-family: var(--f-ar-ui), sans-serif; line-height: 1.5; }
.choice .chsub { margin: 0; max-width: 1100px; font-size: clamp(15px, 2.6vmin, 32px); color: #cfe6ff; line-height: 1.5; }
.choice .chbtns { display: flex; gap: clamp(12px, 3vmin, 48px); width: 100%; max-width: 1400px; justify-content: center; margin: clamp(6px, 1.5vmin, 18px) 0; }
.choice .chbig { flex: 1 1 0; min-width: 0; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2vmin, 16px);
  padding: clamp(16px, 3.4vmin, 48px) clamp(12px, 2.4vmin, 32px); border-radius: clamp(18px, 3vmin, 40px); cursor: pointer;
  background: linear-gradient(180deg, #123a8acc, #0a2263e6); color: #fff; border: 3px solid #7fe3ff55; box-shadow: 0 10px 40px #0008, inset 0 1px 0 #ffffff22;
  font: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.choice .chbig svg { width: clamp(56px, 12vmin, 150px); height: auto; color: #7fe3ff; }
.choice .chbig b { font-size: clamp(20px, 4.2vmin, 54px); line-height: 1.25; }
.choice .chbig small { font-size: clamp(13px, 2.2vmin, 28px); color: #cfe6ff; line-height: 1.45; }
.choice .chbig:focus, .choice .chbig:hover { outline: none; transform: scale(1.04); border-color: #7fe3ff; box-shadow: 0 0 0 4px #7fe3ff99, 0 0 50px #00c8ff88, 0 10px 40px #0008; }
.choice .chbig.gold { background: linear-gradient(180deg, #f3cf72, #d9ae4e); color: #2b1c00; border-color: #fff3; }
.choice .chbig.gold svg { color: #3a2600; } .choice .chbig.gold small { color: #4a3300; }
.choice .chnote { margin: 0; font-size: clamp(13px, 2vmin, 24px); color: #9fd8ff; }
.choice .chlangs { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vmin, 12px); }
.choice .chlang, .choice .chlink { font: inherit; font-size: clamp(13px, 1.9vmin, 24px); padding: clamp(6px, 1vmin, 12px) clamp(10px, 1.6vmin, 22px); border-radius: 999px; cursor: pointer;
  background: #ffffff12; color: #eaf6ff; border: 2px solid #ffffff38; text-decoration: none; }
.choice .chlang.on { background: #d9ae4e; color: #2b1c00; border-color: #d9ae4e; }
.choice .chlang:focus, .choice .chlink:focus, .choice .chlang:hover, .choice .chlink:hover { outline: none; border-color: #7fe3ff; box-shadow: 0 0 0 3px #7fe3ff88; }
.choice .chrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(6px, 1vmin, 12px); font-size: clamp(13px, 1.9vmin, 24px); color: #cfe6ff; }
.choice .chlink.on { background: #7fe3ff; color: #04163f; border-color: #7fe3ff; }
.choice .chcredit { font-size: clamp(11px, 1.5vmin, 18px); color: #8fb0d6; margin-top: clamp(4px, 1vmin, 12px); }
@media (orientation: portrait) and (max-width: 700px) {
  .choice .chbtns { flex-direction: column; align-items: stretch; }
  .choice .chbig { max-width: none; flex-direction: row; text-align: start; flex-wrap: wrap; }
  .choice .chbig svg { width: 64px; flex: none; }
  .choice .chbig b { font-size: 21px; flex: 1 1 60%; }
  .choice .chbig small { flex: 1 1 100%; font-size: 14px; }
}
/* web TV page: the phone / computer page (gate.js) over the TV display, and the computer full-screen bar */
.gate { position: fixed; inset: 0; z-index: 9000; overflow: auto; }
.pcbar { position: fixed; z-index: 8000; bottom: 14px; inset-inline-end: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100vw - 28px);
  padding: 8px 10px; border-radius: 14px; background: #04163fe6; border: 1px solid #7fe3ff66; color: #eaf6ff; font: 600 14px/1.3 var(--f-ui), var(--f-ml), sans-serif; box-shadow: 0 6px 24px #0009; transition: opacity .4s; }
.pcbar button, .pcbar a { font: inherit; padding: 7px 12px; border-radius: 10px; background: #7fe3ff; color: #04163f; border: 0; cursor: pointer; text-decoration: none; }
.pcbar a { background: #ffffff18; color: #eaf6ff; border: 1px solid #ffffff40; }
.pcbar.hide { opacity: 0; pointer-events: none; }
.pcbar .wl { font-size: 12px; color: #9fd8ff; }
/* full screen (web TV page, fullscreen.js) */
.fsbtn { position: fixed; z-index: 8500; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 14px; cursor: pointer;
  background: #04163fd9; color: #eaf6ff; border: 1px solid #7fe3ff88; box-shadow: 0 6px 24px #0009; font: 700 15px/1.2 var(--f-ui), var(--f-ml), var(--f-ar-ui), sans-serif; transition: opacity .5s; }
.fsbtn svg { width: 22px; height: 22px; color: #7fe3ff; flex: none; }
.fsbtn small { font-weight: 500; font-size: 12px; color: #9fd8ff; }
.fsbtn.hide { opacity: 0; pointer-events: none; }
.fsbtn:focus, .fsbtn:hover { opacity: 1; outline: none; border-color: #7fe3ff; box-shadow: 0 0 0 3px #7fe3ff88; }
body.setup-open .fsbtn { opacity: 0; pointer-events: none; }
.fsask { position: fixed; inset: 0; z-index: 8800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #030b1fcc; backdrop-filter: blur(3px); }
.fsask .fsgo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4vmin 6vmin; border-radius: 4vmin; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, #f3cf72, #d9ae4e); color: #2b1c00; border: 3px solid #fff5; box-shadow: 0 0 0 4px #7fe3ff99, 0 0 60px #00c8ff88; }
.fsask .fsgo svg { width: 10vmin; height: 10vmin; min-width: 56px; min-height: 56px; }
.fsask .fsgo b { font-size: clamp(22px, 4.6vmin, 56px); }
.fsask .fsgo small { font-size: clamp(14px, 2.2vmin, 26px); color: #4a3300; }
.fsask .fsno { font: inherit; font-size: clamp(14px, 2vmin, 24px); padding: 8px 20px; border-radius: 999px; cursor: pointer; background: #ffffff14; color: #eaf6ff; border: 2px solid #ffffff44; }
.fsask .fsno:focus { outline: none; border-color: #7fe3ff; }