/* =====================================================================
   SQuizGame UI — the design of the mobile mockup, used by the whole site
   and shared with the app (SQuizGameApp/wwwroot/css/app.css).

   Every class is ux- prefixed: the site also loads Bootstrap and an old
   template that define .card, .btn, .row, .chip … with other meanings.
   Colours are the --sq-* palette: pink accent, orchid secondary, no blue.
   ===================================================================== */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn/Vazirmatn-wght.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

/* Display face of the game page (ChallengeDetails: title, prize, stats). Served from here, not
   Google Fonts: the page's own <HeadContent> link was dropped once <Seo> added one (only the last
   HeadContent renders), and Google Fonts is unreliable in Iran. OFL, fonts/Lalezar/OFL.txt. */
@font-face {
    font-family: 'Lalezar';
    src: url('../fonts/Lalezar/Lalezar-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
    font-display: swap;
}
@font-face {
    font-family: 'Lalezar';
    src: url('../fonts/Lalezar/Lalezar-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

/* One typeface for the whole site. style.css pins these variables with
   !important on "html.righttoleft *", so the override uses the same selector. */
html.righttoleft *,
html * {
    --title-font: "Vazirmatn", system-ui, sans-serif !important;
    --body-font: "Vazirmatn", system-ui, sans-serif !important;
}

:root {
    --ux-bg: #0b0913;
    --ux-text: #e9e4f7;
    --ux-dim: #b9b0d6;
    --ux-mut: #9d94bf;
    --ux-pink: #ff7ab3;
    --ux-gold: #f5c451;
    --ux-ok: #4ade9a;
    --ux-dng: #ff9aac;
    --ux-orc: #dcb4ff;
    --ux-card: rgba(30, 22, 56, .78);
    --ux-line: rgba(255, 255, 255, .1);
    --ux-acc: linear-gradient(135deg, #ff5a9e 0%, #f0247f 48%, #c8127a 100%);
    --ux-tabbar-h: 68px;
    --ux-top-h: 64px;
}

html, body {
    background: var(--ux-bg);
}

body {
    color: var(--ux-text);
    background: radial-gradient(130% 55% at 100% 0%, #2a1d55 0%, #141029 52%, #0b0913 100%) fixed var(--ux-bg);
}

/* ---------- page frame ---------- */

.ux-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: var(--ux-text);
    font-size: 14px;
    line-height: 1.65;
}

/* The template gives every <section> 120px padding and a background. */
.ux-page section { padding: 0; margin: 0; background: none; }
.ux-page a { color: inherit; text-decoration: none; }
.ux-page p { margin: 0; }
.ux-page h1, .ux-page h2, .ux-page h3 { color: var(--ux-text); }

@media (min-width: 992px) {
    .ux-page { padding: 28px 24px 56px; gap: 28px; font-size: 15px; }
}

.ux-section { display: flex; flex-direction: column; gap: 12px; }
.ux-section-head { display: flex; align-items: center; gap: 10px; }
.ux-section-head .ux-link { margin-inline-start: auto; font-size: 13px; color: var(--ux-dim); }
.ux-section-head .ux-link:hover { color: var(--ux-pink); }

/* ---------- type & colour ---------- */

.ux-disp { font-weight: 900; letter-spacing: -.3px; }
.ux-h1 { font-weight: 900; font-size: 28px; line-height: 1.3; margin: 0; letter-spacing: -.3px; }
.ux-h2 { font-size: 17px; font-weight: 800; margin: 0; }
.ux-lbl { font-size: 12px; color: var(--ux-dim); }
.ux-big { font-size: 22px; font-weight: 900; line-height: 1.3; }
.ux-dim { color: var(--ux-dim); }
.ux-mut { color: var(--ux-mut); font-size: 12px; }
.ux-gold { color: var(--ux-gold); }
.ux-okt { color: var(--ux-ok); }
.ux-dngt { color: var(--ux-dng); }
.ux-pink { color: var(--ux-pink); }
.ux-orc { color: var(--ux-orc); }
.ux-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ux-num { font-variant-numeric: tabular-nums; }
.ux-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- layout ---------- */

.ux-row { display: flex; align-items: center; gap: 10px; }
.ux-sp { flex-grow: 1; }
.ux-col { display: flex; flex-direction: column; gap: 12px; }
.ux-stack { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ux-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .ux-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .ux-grid.ux-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- surfaces ---------- */

.ux-card {
    background: var(--ux-card);
    border: 1px solid var(--ux-line);
    border-radius: 18px;
    padding: 14px;
    color: var(--ux-text);
}
a.ux-card { transition: border-color .15s, transform .15s; }
a.ux-card:hover { border-color: rgba(255, 45, 135, .45); transform: translateY(-2px); }
.ux-card-hi { background: rgba(255, 45, 135, .1); border-color: rgba(255, 45, 135, .45); }
.ux-card-dash { border-style: dashed; background: transparent; }
.ux-hero {
    display: flex; flex-direction: column; gap: 12px; padding: 18px;
    background: linear-gradient(160deg, rgba(255, 45, 135, .24), rgba(123, 63, 196, .2) 58%, rgba(30, 22, 56, .85));
    border-color: rgba(255, 45, 135, .45);
}
.ux-list { padding: 4px 14px; }
.ux-li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.ux-li:first-child { border-top: 0; }

/* ---------- chips, pills ---------- */

.ux-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
    border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px; color: #d8d1ef; white-space: nowrap; line-height: 1;
}
.ux-chip.on { background: rgba(255, 45, 135, .16); border-color: rgba(255, 45, 135, .55); color: #ffd3e6; }
.ux-chip.ok { background: rgba(16, 185, 129, .14); border-color: rgba(52, 211, 153, .45); color: #a7f3d0; }
.ux-chip.warn { background: rgba(250, 204, 21, .12); border-color: rgba(250, 204, 21, .45); color: #fde68a; }
.ux-chip.dng { background: rgba(225, 29, 72, .14); border-color: rgba(255, 107, 129, .45); color: #ffc2cd; }
.ux-chip.orc { background: rgba(199, 125, 255, .14); border-color: rgba(199, 125, 255, .45); color: #ecd6ff; }
.ux-chip.gld { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .4); color: #f8d98a; }
.ux-chip.ov { background: rgba(14, 10, 28, .78); border-color: rgba(255, 255, 255, .22); color: #fff; }
.ux-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
    background: rgba(245, 196, 81, .12); border: 1px solid rgba(245, 196, 81, .35); color: #f8d98a !important; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
/* diamonds are orchid, coins gold */
.ux-pill.dia { background: rgba(199, 125, 255, .14); border-color: rgba(199, 125, 255, .45); color: #ecd6ff !important; }
.ux-dia { color: var(--ux-orc); }
.ux-amt { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; }

/* ---------- buttons ---------- */

.ux-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 18px;
    border-radius: 16px; font-family: inherit; font-weight: 700; font-size: 15px; color: #fff !important;
    border: 0; cursor: pointer; width: 100%; flex-shrink: 0; text-decoration: none; transition: transform .08s, box-shadow .15s, opacity .15s;
}
.ux-btn:active { transform: scale(.98); }
.ux-btn:disabled { opacity: .5; pointer-events: none; }
.ux-btn-sm { height: 40px; border-radius: 12px; font-size: 13px; padding: 0 14px; width: auto; }
.ux-btn-auto { width: auto; }
.ux-acc { background: var(--ux-acc); box-shadow: 0 8px 24px rgba(255, 45, 135, .38), inset 0 1px 0 rgba(255, 255, 255, .32); }
.ux-acc:hover { box-shadow: 0 12px 30px rgba(255, 45, 135, .52), inset 0 1px 0 rgba(255, 255, 255, .38); }
.ux-sec { background: rgba(199, 125, 255, .14); border: 1px solid rgba(199, 125, 255, .5); color: #f1e2ff !important; }
.ux-gh { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: var(--ux-text) !important; }
.ux-sec:hover, .ux-gh:hover { background: rgba(255, 255, 255, .1); }

/* ---------- icons, avatars, tiles ---------- */

.ux-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ux-ic-s { width: 16px; height: 16px; }
.ux-ic-l { width: 30px; height: 30px; }
.ux-av { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; position: relative; overflow: hidden; }
.ux-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ux-av-s { width: 32px; height: 32px; font-size: 13px; }
.ux-a1 { background: linear-gradient(135deg, #ff5a9e, #b0106b); }
.ux-a2 { background: linear-gradient(135deg, #c77dff, #6d2fb8); }
.ux-a3 { background: linear-gradient(135deg, #34d399, #0b7a57); }
.ux-a4 { background: linear-gradient(135deg, #f5c451, #b37a0c); color: #2a1a00; }
.ux-a5 { background: linear-gradient(135deg, #fb923c, #b3400b); }
.ux-a6 { background: linear-gradient(135deg, #8f86a3, #4a4458); }
.ux-tile { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ux-tile-s { width: 36px; height: 36px; border-radius: 11px; }
.ux-t1 { background: rgba(255, 45, 135, .16); color: #ff8fbf; }
.ux-t2 { background: rgba(199, 125, 255, .16); color: #dcb4ff; }
.ux-t3 { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
.ux-t4 { background: rgba(245, 196, 81, .14); color: #f8d98a; }
.ux-t5 { background: rgba(251, 146, 60, .14); color: #fdba74; }

/* ---------- progress ---------- */

.ux-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ux-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c8127a, #ff5a9e); }

/* ---------- game cards ---------- */

.ux-gcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ux-gbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ux-cover { position: relative; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #ff5a9e, #4f1266); }
.ux-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ux-cover .ux-chip { position: absolute; top: 8px; inset-inline-end: 8px; height: 24px; }

/* ---------- loading ---------- */

.ux-skel { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.1), rgba(255,255,255,.05)); background-size: 200% 100%; animation: ux-sk 1.2s linear infinite; border-radius: 18px; }
@keyframes ux-sk { to { background-position: -200% 0; } }

/* ---------- bottom tab bar (signed-in, phones and tablets) ---------- */

.ux-tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
    height: calc(var(--ux-tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
    display: flex; background: rgba(14, 10, 28, .97); border-top: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}
.ux-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; color: var(--ux-mut) !important; position: relative; background: none; border: 0; font-family: inherit;
    text-decoration: none; cursor: pointer;
}
.ux-tab.on { color: var(--ux-pink) !important; font-weight: 700; }
.ux-badge {
    position: absolute; top: 0; left: calc(50% - 24px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #ff2d87; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.ux-tabbar-space { height: calc(var(--ux-tabbar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 992px) {
    .ux-tabbar, .ux-tabbar-space { display: none; }
}

/* ---------- background band (the old home's artwork, faded into the page) ---------- */

.ux-band { position: relative; overflow: hidden; padding: 0; background: none; }
.ux-band-img {
    position: absolute; inset: 0; z-index: 0;
    background: url('../images/background/14.webp') center top / cover no-repeat;
}
.ux-band-fade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(11, 9, 19, .35) 0%, rgba(11, 9, 19, .15) 35%, rgba(11, 9, 19, .75) 78%, #0b0913 100%),
        radial-gradient(120% 70% at 50% 0%, rgba(255, 45, 135, .16), transparent 60%);
}
.ux-band > .ux-page { position: relative; z-index: 2; }
/* A slow parallax on desktop; phones scroll it normally (fixed backgrounds stutter there). */
@media (min-width: 992px) {
    .ux-band-img { background-attachment: fixed; background-position: center; }
}

/* glass surfaces used over the artwork */
.ux-glass {
    background: rgba(16, 12, 32, .55);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ---------- footer ---------- */

.ux-footer { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 16px 26px; color: var(--ux-mut); font-size: 13px; }
.ux-footer-in { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ux-footer a { color: var(--ux-dim); text-decoration: none; }
.ux-footer a:hover { color: var(--ux-pink); }
.ux-footer .ux-sp { min-width: 8px; }

/* The footer's "get the app" link is a small pill, so it is noticed. */
.ux-footer a.ux-footer-app { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 45, 135, .16); border: 1px solid rgba(255, 45, 135, .45); color: #ffd3e6; font-weight: 600; }
.ux-footer a.ux-footer-app:hover { background: rgba(255, 45, 135, .26); color: #fff; }