/* ===== shared app layer: AMOLED theme, sliding bottom nav, loader, theme chooser ===== */

/* side drawer and its hamburger are removed from every page */
#mb,#sd,.side,#sc,.scrim{display:none!important}

/* AMOLED: pure black surfaces */
html[data-theme=amoled]{--bg:#000000;--bg2:#000000;--side:#000000;--card:#090909;--panel:#090909;--row:#111111;--bd:#1c1c1c;--tx:#ffffff;--tx2:#9b9b9b;--light:#c3cbff;--shadow:none;color-scheme:dark}
html[data-theme=amoled] body,html[data-theme=amoled] html{background:#000!important}
html[data-theme=amoled] header{background:rgba(0,0,0,.94)!important}
html[data-theme=amoled] .bg{display:none!important}
html[data-theme=amoled] .bottom{background:#000!important}

:root{--navpill:#1f2227}
html[data-theme=light]{--navpill:#e6e9f2}
html[data-theme=amoled]{--navpill:#161616}
/* bottom nav: one sliding rounded pill under the active tab */
.bottom a{position:relative;z-index:1}
.bottom .ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:26px;background:var(--navpill);box-shadow:none;pointer-events:none;z-index:0;transition:left .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1)}
.bottom a.on{background:transparent!important;box-shadow:none!important}

/* theme chooser (profile) */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;padding:4px;border-radius:14px;background:var(--bg2);border:1px solid var(--bd);width:100%}
.seg button{height:38px;border:0;border-radius:10px;background:transparent;color:var(--tx2);font-weight:600;font-size:14px;cursor:pointer}
.seg button.on{background:var(--row);color:var(--tx);box-shadow:inset 0 0 0 1px var(--bd)}
.theme-txt{display:grid;gap:2px;width:100%}

/* no tap / hover / focus box on bottom nav tabs: only the slide dot shows the active tab */
html body nav.bottom,html body nav.bottom *{-webkit-tap-highlight-color:transparent!important}
html body nav.bottom a,html body nav.bottom a:hover,html body nav.bottom a:focus,html body nav.bottom a:active,html body nav.bottom a:focus-visible,html body nav.bottom a.on{background:transparent!important;box-shadow:none!important;outline:none!important;border:0!important}

html body nav.bottom a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)!important}

/* tournament banner: 16:9 landscape like a YouTube thumbnail, image fills the frame */
.card .bn{width:100%;height:auto!important;aspect-ratio:16/9;border-radius:14px;background-size:cover!important;background-position:center!important;background-repeat:no-repeat}

/* bottom nav must stay still: no body transform/animation (that made it slide with the page),
   the page content still fades in through main */
html body{animation:none!important;transform:none!important}
html body main,html body .wrap{animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
html body nav.bottom{position:fixed!important;left:50%!important;right:auto!important;bottom:max(12px,env(safe-area-inset-bottom))!important;top:auto!important;transform:translateX(-50%)!important;animation:none!important;transition:none!important;z-index:40!important}

/* coin icon (replaces ₹ everywhere). Admin uploads the image in Settings; blank until then */
.coin-ic{display:inline-block;width:1em;height:1em;vertical-align:-0.14em;margin-right:.14em;border-radius:50%;background:var(--coin-url,none) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--bd)}
/* 1:1 item images, small */
.ithumb{width:64px;height:64px;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;margin-bottom:10px}
/* customer support button (admin link) */
.support-fab{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:45;height:46px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#5865F2,#4169FF);color:#fff;font-weight:700;font-size:14px;box-shadow:0 12px 30px -10px rgba(65,105,255,.7)}
.support-fab[hidden]{display:none}