/* The iPhone app's look. The app (ios/) adds class "app" to <html> before the page draws (index.html also
   sets it from the user agent); nothing here applies on the website.
   A dark, modern iOS design: near-black ground, raised dark surfaces, the brand's red and gold as light,
   a floating glass tab bar, pictures large. The website's stylesheet speaks in --felt (ground), --bone
   (cards / light text) and --ink (dark text); the app re-maps them: on the ground --bone is the light text,
   and inside a surface the pair flips so the same rules draw dark cards with light text. */

html:not(.app) .app-only { display: none !important; }

html.app {
  --sys: -apple-system, "SF Arabic", "SF Pro", system-ui, sans-serif;
  --display: var(--sys);
  --text: var(--sys);
  --brand: "Almarai", var(--sys);
  /* The website's own palette: olive felt, bone card stock, black and red suit inks, gold. */
  --felt: #2c370b;
  --felt-2: #38450f;
  --felt-3: #46561a;
  --bone: #ecebe7;
  --bone-2: #e1dfd9;
  --bone-3: #d3cfc4;
  --ink: #1d2207;
  --muted: #55602f;
  --red: #a3271b;
  --gold: #b8901f;
  --gold-soft: #efe2b4;
  --team0: #1d2207;
  --team1: #a3271b;
  --white: #ecebe7;      /* type on the felt */
  --on-white: #1d2207;   /* type on a bone-filled button */
  --surface: #ecebe7;    /* cards */
  --fill: #46561a;       /* chips and wells on the felt */
  --fill-2: #38450f;
  --line: rgb(236 235 231 / .08);
  --glass: rgb(38 48 9 / .8);
  --hot: linear-gradient(135deg, #c13a2a, #a3271b);
  --sep: rgb(236 235 231 / .1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --tab-h: 64px;
  --top: env(safe-area-inset-top);
  --bottom: env(safe-area-inset-bottom);
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

/* Surfaces: bone cards with ink type, as on the website. Inside them "white" means the ink. */
html.app :is(.team-setup, .settings, .cat-card, .col-head, .team-score, .q-card, .j-card, .mine-sec, .mine-game,
  .results-card, .login-card, .admin-card, .admin-table-wrap, .fb-dialog, .list, .picker, .ah-setup, .ah-resume, .mine-empty) {
  --white: #1d2207;
  --on-white: #ecebe7;
  --fill: #e1dfd9;
  --fill-2: #d3cfc4;
  --muted: #55602f;
  --line: rgb(29 34 7 / .08);
  --sep: rgb(29 34 7 / .1);
  color: var(--white);
}
html.app :is(.team-setup, .settings, .team-score, .q-card, .j-card, .mine-sec, .mine-game, .results-card, .login-card,
  .admin-card, .fb-dialog, .list, .picker) { border: 1px solid var(--line); }
/* Things on a strong colour keep white type. */
html.app :is(.btn-alt, .btn.t0, .btn.t1, .q-turn, .slot.filled, .cat-card.picked, .f-team .chip.on, .q-media .play,
  .choices div.right, .game-stats div, .admin-table .chip.danger, .cat-card .new, .menu-item .new, .team-setup[data-team="1"] .chip.on) { color: #fff; }

html.app body {
  font-size: 17px; line-height: 1.4; background: var(--felt); color: var(--white);
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  padding-top: var(--top);
  padding-bottom: calc(var(--tab-h) + var(--bottom) + 18px);
}
html.app input, html.app textarea { -webkit-user-select: text; user-select: text; font-size: 17px; }
html.app input:not([type="radio"]):not([type="checkbox"]), html.app textarea {
  background: var(--fill) !important; color: var(--white) !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
}
html.app ::placeholder { color: var(--muted); }
html.app body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: var(--top); z-index: 60;
  background: rgb(44 55 11 / .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}

/* The website's header, footer and long home sections. */
html.app .nav, html.app .foot, html.app #view-home > section:not(.app-home) { display: none; }
html.app .felt { background: var(--felt); color: var(--white); min-height: calc(100svh - var(--top) - var(--tab-h) - var(--bottom) - 18px); }
html.app body:is([data-view="login"], [data-view="board"], [data-view="question"], [data-view="final"]) { padding-bottom: var(--bottom); }
html.app body[data-view="login"] .felt, html.app .game.felt { min-height: calc(100svh - var(--top) - var(--bottom)); }

/* ---------- Type ---------- */
html.app h1, html.app h2, html.app h3, html.app h4 { font-weight: 700; letter-spacing: 0; }
html.app .page { padding: 4px 16px 28px; }
html.app .page > h2 { font-size: 34px; line-height: 1.2; margin: 10px 0 16px; text-align: start; font-weight: 800; }
html.app .list-h, html.app .mygames .mine-h { font-size: 13px; font-weight: 500; color: rgb(236 235 231 / .6); margin: 26px 14px 8px; text-transform: none; }
html.app .mygames .mine-h:first-of-type { margin-top: 4px; }

/* ---------- Controls ---------- */
html.app .btn {
  min-height: 52px; border-radius: 999px; padding: 10px 22px; font-size: 17px; font-weight: 600;
  background: var(--white); color: var(--on-white); transition: transform .2s var(--out), opacity .2s;
}
html.app .btn-alt { background: var(--hot); color: #fff; box-shadow: 0 8px 24px rgb(163 39 27 / .35); }
html.app .btn-light, html.app .btn-ghost { background: rgb(255 255 255 / .1); color: var(--white); }
html.app .btn-outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .3); }
html.app .btn.t0 { background: var(--team0); }
html.app .btn.t1 { background: var(--team1); }
html.app .btn-small { min-height: 38px; font-size: 15px; padding: 6px 16px; }
html.app .btn-lg { min-height: 56px; font-size: 18px; width: 100%; }
html.app :is(.btn, .chip, .lrow, .cat-card, .cell:not(:disabled), .mini-card, .deck, .ah-resume, .ah-setup, .tabbar button):active {
  transform: scale(.96); opacity: .85;
}
html.app .chip { border-radius: 999px; font-size: 15px; padding: 8px 14px; background: var(--fill); color: var(--white); }
html.app .chip.on { background: var(--white); color: var(--on-white); }
html.app .team-setup[data-team="1"] .chip.on { background: var(--red); }
html.app .picker-tools .chip { background: rgb(184 144 31 / .16); color: var(--gold); }
html.app .sec-tabs button { border-radius: 999px; font-size: 15px; background: var(--felt-3); color: var(--bone); }
html.app .sec-tabs button.on { background: var(--white); color: var(--on-white); }
/* One swipeable row each, so the picker's grid starts near the top instead of under a wall of chips. */
html.app .sec-tabs, html.app .rand-secs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
html.app .sec-tabs::-webkit-scrollbar, html.app .rand-secs::-webkit-scrollbar { display: none; }
html.app .rand-secs > * { flex: none; }
html.app :focus-visible { outline: none; }

/* ---------- Lists ---------- */
html.app .list { background: var(--surface); border-radius: 18px; overflow: hidden; }
html.app .list.pad { padding: 14px 16px; }
html.app .lrow, html.app .row-d > summary {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px;
  background: none; color: var(--white); font-size: 17px; text-align: start; text-decoration: none; list-style: none;
}
html.app .row-d > summary::-webkit-details-marker { display: none; }
html.app .list > * + * { border-top: 1px solid var(--sep); }
html.app .lrow .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--fill); font-size: 17px; }
html.app .lrow .t { flex: 1; min-width: 0; }
html.app .lrow small { color: var(--muted); font-size: 15px; }
html.app .lrow .chev::after, html.app .row-d > summary::after { content: "‹"; color: var(--muted); font-size: 24px; line-height: 1; }
html.app .row-d > summary::after { margin-inline-start: auto; transition: transform .25s var(--out); }
html.app .row-d[open] > summary::after { transform: rotate(-90deg); }
html.app .lrow.danger { color: var(--red); }
html.app .lrow .toggle { margin-inline-start: auto; width: 51px; height: 31px; border-radius: 999px; background: var(--fill-2); position: relative; transition: background .25s; flex: none; }
html.app .lrow .toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); transition: transform .25s var(--out); }
html.app .lrow .toggle.on { background: #30d158; }
html.app .lrow .toggle.on::after { transform: translateX(-20px); }

/* ---------- Home ---------- */
html.app .app-home { padding: 8px 16px 32px; color: var(--white); }
html.app .app-home > * { animation: rise .7s var(--out) both; animation-delay: calc(var(--d, 0) * 70ms); }
html.app .ah-top { --d: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 14px; }
html.app .ah-top h1 { font-family: var(--brand); font-weight: 800; font-size: clamp(24px, 7.6vw, 36px); line-height: 1.15; white-space: nowrap; }
html.app .ah-cup { height: 1.05em; width: auto; vertical-align: -.16em; margin-inline-end: .22em; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); }
html.app .ah-chips {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gold-soft); white-space: nowrap; flex: none;
  background: rgb(184 144 31 / .12); border: 1px solid rgb(184 144 31 / .2); padding: 6px 12px 6px 10px; border-radius: 999px;
}
html.app .stack { position: relative; display: inline-block; width: 18px; height: 18px; }
html.app .stack i { display: none; }
html.app .stack i:first-child { display: block; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 3px #e0a21f; }

html.app .ah-resume {
  --d: 1; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; margin: 2px 0 14px;
  padding: 16px; border-radius: 24px; color: var(--white); text-align: start;
  background: var(--gold-soft);
  border: 0;
}
html.app .rs-h b { display: block; font-size: 17px; }
html.app .rs-h small { color: var(--muted); font-size: 13px; }
html.app .rs-go { grid-row: 1; grid-column: 2; background: var(--gold); color: var(--ink); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 15px; }
html.app .rs-teams { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.app .rs-teams > span { display: flex; align-items: center; gap: 6px; background: var(--bone); border-radius: 14px; padding: 10px 12px; font-size: 14px; font-weight: 600; min-width: 0; }
html.app .rs-teams > span.turn { box-shadow: inset 0 0 0 1.5px var(--gold); }
html.app .rs-teams em { font-style: normal; color: var(--team0); }
html.app .rs-teams .t1 em { color: var(--team1); }
html.app .rs-teams b { margin-inline-start: auto; font-size: 20px; font-variant-numeric: tabular-nums; }

/* The deal: the hero. A dark card lit red and gold from its corners. */
:is(html.app, .deal-dialog) .deal {
  --d: 2; position: relative; overflow: hidden; border-radius: 28px; padding: 20px 18px 18px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgb(163 39 27 / .55), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgb(184 144 31 / .32), transparent 60%),
    var(--felt-2);
  border: 1px solid rgb(255 255 255 / .08);
  box-shadow: 0 24px 50px rgb(163 39 27 / .12);
}
:is(html.app, .deal-dialog) .deal > * { position: relative; }
:is(html.app, .deal-dialog) .pc-swap { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(255 255 255 / .92); font-size: 15px; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
:is(html.app, .deal-dialog) .deal-game { display: block; font-size: 13px; font-weight: 700; color: var(--gold-soft); margin-bottom: 2px; }
:is(html.app, .deal-dialog) .deal-head h2 { font-size: 28px; font-weight: 800; }
:is(html.app, .deal-dialog) .deal-head p { font-size: 15px; color: rgb(244 244 245 / .72); margin-top: 2px; min-height: 1.4em; }
:is(html.app, .deal-dialog) .deal-table { position: relative; height: 210px; margin: 16px 0 14px; perspective: 1000px; }
:is(html.app, .deal-dialog) .pcard {
  --w: min(29vw, 122px); --rot: calc((var(--i) - 1) * 7deg); --x: calc((var(--i) - 1) * (var(--w) * .78));
  position: absolute; top: 6px; left: 50%; width: var(--w); aspect-ratio: 5 / 7; margin-left: calc(var(--w) / -2);
  background: none; padding: 0; transform-origin: 50% 130%;
  transform: translateX(var(--x)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 8px)) rotate(var(--rot));
}
:is(html.app, .deal-dialog) .pcard:nth-child(2) { z-index: 1; }
:is(html.app, .deal-dialog) .pcard.dealt { animation: deal-in .8s var(--out) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes deal-in { from { transform: translate(0, -60px) rotate(0) scale(.8); opacity: 0; } }
:is(html.app, .deal-dialog) .pc-in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .8s var(--out); }
:is(html.app, .deal-dialog) .pcard.open .pc-in { transform: rotateY(180deg); }
:is(html.app, .deal-dialog) .pc-back, :is(html.app, .deal-dialog) .pc-front {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 18px 34px rgb(0 0 0 / .5);
}
:is(html.app, .deal-dialog) .pc-back { display: grid; place-items: center; background: var(--red); border: 4px solid var(--bone); }
:is(html.app, .deal-dialog) .pc-back::before {
  content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .08);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0l6 6-6 6-6-6z' fill='%238e2016'/%3E%3C/svg%3E");
}
:is(html.app, .deal-dialog) .pc-back i {
  position: relative; font-style: normal; font-family: var(--brand); font-weight: 800; font-size: 40px; line-height: 1;
  color: var(--bone);
}
:is(html.app, .deal-dialog) .pc-front { transform: rotateY(180deg); background: #222; }
:is(html.app, .deal-dialog) .pc-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(html.app, .deal-dialog) .pc-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .85), transparent 55%); }
:is(html.app, .deal-dialog) .pc-front b, :is(html.app, .deal-dialog) .pc-front small { position: absolute; z-index: 1; inset-inline: 9px; color: #fff; }
:is(html.app, .deal-dialog) .pc-front b { bottom: 22px; font-size: 13px; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(html.app, .deal-dialog) .pc-front small { bottom: 7px; font-size: 11px; color: rgb(255 255 255 / .7); }
:is(html.app, .deal-dialog) .pc-front em { display: none; }
:is(html.app, .deal-dialog) .deal-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
:is(html.app, .deal-dialog) .deal-actions:has(#dealPlay:not([hidden])):has(#dealAgain:not([hidden])) { grid-template-columns: 1fr 1.4fr; }
:is(html.app, .deal-dialog) #dealPlay { background: var(--white); color: var(--on-white); box-shadow: none; }
:is(html.app, .deal-dialog) #dealAgain { background: rgb(255 255 255 / .14); color: var(--white); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:is(html.app, .deal-dialog) .deal-actions:not(:has(#dealPlay:not([hidden]))) #dealAgain { background: var(--white); color: var(--on-white); }

html.app .ah-setup {
  --d: 3; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); color: var(--white); text-align: start;
}
html.app .ah-setup::before {
  content: "♠♥"; grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ink); color: var(--bone); font-size: 15px; letter-spacing: -2px;
}
html.app .ah-setup b { grid-column: 2; align-self: end; font-size: 17px; }
html.app .ah-setup span { grid-column: 2; align-self: start; font-size: 13px; color: var(--muted); margin-top: 2px; }
html.app .ah-setup .chev { grid-column: 3; grid-row: 1 / span 2; }
html.app .ah-setup .chev::after { content: "‹"; font-size: 26px; color: var(--muted); }
html.app .ah-h { --d: 4; font-size: 22px; font-weight: 800; margin: 30px 2px 12px; }

html.app .decks { --d: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.app .deck { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; padding: 0; background: var(--felt-3); color: #fff; text-align: start; }
html.app .deck img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--out); }
html.app .deck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / 0) 60%); }
html.app .dk-ic {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 17px;
  background: rgb(30 30 35 / .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .15);
}
html.app .dk-t { position: absolute; inset: auto 14px 12px; z-index: 1; }
html.app .dk-t b { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; }
html.app .dk-t small { font-size: 13px; color: rgb(255 255 255 / .72); }
html.app .deck:active img { transform: scale(1.08); }

html.app .ah-new { --d: 6; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 14px; scrollbar-width: none; }
html.app .ah-new::-webkit-scrollbar { display: none; }
html.app .mini-card { position: relative; flex: none; width: 128px; aspect-ratio: 3 / 4; scroll-snap-align: start; border-radius: 20px; overflow: hidden; background: var(--felt-3); padding: 0; color: #fff; text-align: start; }
html.app .mini-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.app .mini-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .8), transparent 55%); }
html.app .mini-card span { position: absolute; z-index: 1; inset: auto 10px 10px; font-size: 14px; font-weight: 700; line-height: 1.3; }
html.app .mini-card em { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.98); } }

/* ---------- New game ---------- */
html.app .team-setup { border-radius: 24px; background: var(--surface); }
html.app .team-setup.active { background: var(--gold-soft); border-color: transparent; }
html.app .team-setup[data-team="1"].active { background: var(--gold-soft); border-color: transparent; }
html.app .team-setup .suit { color: var(--team0); }
html.app .team-setup[data-team="1"] .suit { color: var(--team1); }
html.app .picking { background: var(--white); color: var(--on-white); }
html.app .slot { background: var(--fill); color: var(--muted); border-radius: 14px; }
html.app .slot.filled { background: var(--team0); }
html.app .team-setup[data-team="1"] .slot.filled { background: var(--team1); }
html.app .picker { background: var(--surface); border-radius: 24px; padding: 16px 12px; }
html.app .picker-top h3 { font-size: 20px; }
html.app .picker-top h3 span { color: var(--gold); }
html.app .cat-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; align-content: start; gap: 10px; max-height: 62svh; padding: 12px 2px 6px; }
/* The card's height comes from a spacer, not aspect-ratio: in this scrolling grid WebKit sized aspect-ratio
   cards to nothing and stacked them on top of each other. */
html.app .cat-card::before { content: ""; flex: none; padding-top: 92%; }
html.app .cat-card {
  aspect-ratio: auto; height: auto; min-height: 0; padding: 0; overflow: hidden; justify-content: flex-end; gap: 0; border-radius: 18px; background: var(--fill);
  border: 0; transition: transform .3s var(--out), box-shadow .3s;
}
html.app .cat-card .ic { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; }
html.app .cat-card .ic .cat-img { width: 100%; height: 100%; border-radius: 0; vertical-align: 0; object-fit: cover; background: var(--fill); }
html.app .cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .85), transparent 60%); }
html.app .cat-card b, html.app .cat-card small { position: relative; z-index: 1; width: 100%; padding: 0 8px; text-align: start; color: #fff; }
html.app .cat-card b { font-size: 13px; line-height: 1.25; font-weight: 700; }
html.app .cat-card small { font-size: 10.5px; padding-bottom: 8px; color: rgb(255 255 255 / .7); }
html.app .cat-card.picked { background: var(--tc); box-shadow: 0 0 0 3px var(--tc), 0 10px 24px rgb(0 0 0 / .4); transform: scale(.96); }
html.app .cat-card em { top: 6px; inset-inline-start: 6px; z-index: 2; font-size: 11px; background: var(--white); color: var(--on-white); }
html.app .settings { background: var(--surface); border-radius: 24px; }
html.app #startGame { position: sticky; bottom: calc(var(--tab-h) + var(--bottom) + 22px); z-index: 5; background: var(--hot); color: #fff; box-shadow: 0 12px 30px rgb(163 39 27 / .4); }

/* ---------- Board, question, final ---------- */
html.app .game-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 4px; color: var(--white); }
html.app .game-bar b { font-family: var(--brand); font-size: 18px; }
html.app .gb-btn { width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .1); color: var(--white); font-size: 15px; display: grid; place-items: center; }
html.app .col-head { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
html.app .col-head .ic .cat-img { border-radius: 14px; }
html.app .board { gap: 14px; }
html.app .col { gap: 6px; }
html.app .cell { background: var(--felt-2); background-image: none; border: 1px solid var(--line); border-radius: 14px; color: var(--white); font-family: var(--sys); font-weight: 800; }
html.app .cell span { background: none; }
html.app .cell:disabled { background: var(--felt); border-color: transparent; }
html.app .cell.gold:disabled { background: var(--gold); color: var(--ink); }
html.app .team-score { background: var(--surface); border-radius: 22px; }
html.app .team-score.turn { background: radial-gradient(120% 120% at 100% 0%, rgb(184 144 31 / .2), transparent 60%), var(--surface); border-color: rgb(184 144 31 / .35); }
html.app .team-score strong { font-family: var(--sys); font-weight: 800; }
html.app .turn-pill { font-family: var(--sys); font-weight: 800; font-size: 20px; color: var(--white); background: none; }
html.app .twist { background: var(--fill); color: var(--white); border: 1px solid var(--line); }
html.app .twist small { color: var(--muted); }
html.app .twist em { background: rgb(184 144 31 / .16); color: var(--gold); }
html.app .twist button { background: rgb(255 255 255 / .1); color: var(--white); }
html.app .twist .tw-ic { background: var(--fill-2); }
html.app .twist.hard .tw-ic { background: rgb(163 39 27 / .22); }
html.app .twist.easy .tw-ic { background: rgb(70 86 26 / .25); }
html.app .twist.wild .tw-ic { background: rgb(184 144 31 / .22); }
html.app .mod-pill { background: rgb(184 144 31 / .16); color: var(--gold); }
html.app .host-btn { background: rgb(255 255 255 / .1); }
html.app .host-btn.on { background: var(--gold); color: var(--ink); }
html.app .q-card { background: var(--surface); border-radius: 28px; }
html.app .q-text { font-weight: 700; }
html.app .q-answer { background: var(--hot); color: #fff; border-radius: 18px; }
html.app .timer::after { background: var(--tc, var(--white)); }
html.app .q-cat { background: var(--fill); }
html.app .q-val { background: var(--white); color: var(--on-white); }
html.app .twist { border-radius: 18px; }
html.app .f-team { background: var(--fill); border-radius: 20px; }

/* ---------- Results, my games, login ---------- */
html.app .results-card, html.app .login-card { background: var(--surface); border-radius: 28px; }
html.app .login-card h2 { font-family: var(--brand); }
html.app .pip { opacity: .5; }
html.app .mine-game { background: var(--surface); border-radius: 22px; }
html.app .mine-game.open { border-color: rgb(184 144 31 / .22); box-shadow: none; }
html.app .mine-tag { background: var(--fill); color: var(--white); }
html.app .mine-game.open .mine-tag { background: rgb(184 144 31 / .16); color: var(--gold); }
html.app .mine-score div { background: var(--fill); }
html.app .mine-score div.won { background: var(--white); color: var(--on-white); }
html.app .mine-cats span { background: var(--fill); }
html.app .mine-sec { background: var(--surface); border-radius: 20px; }
html.app .mine-cat { background: var(--fill); }
html.app .mine-bar { background: var(--fill-2); }
html.app .mine-bar i { background: var(--hot); }
html.app .mine-empty { background: var(--surface); }

/* ---------- More ---------- */
html.app .row-d > div { padding: 0 16px 16px; color: var(--white); }
html.app [data-slot] > section, html.app [data-slot] > details { padding: 0; margin: 0; background: none; color: var(--white); min-height: 0; border: 0; box-shadow: none; }
html.app [data-slot] h2 { display: none; }
html.app [data-slot] p, html.app [data-slot] li { font-size: 15px; line-height: 1.5; }
html.app [data-slot] :is(.lead, .slip-intro p) { color: var(--muted); max-width: none; margin: 0 0 12px; }
html.app [data-slot] :is(.slip, .slip-sec) { display: block; padding: 0; background: none; color: var(--white); box-shadow: none; transform: none; max-width: none; }
html.app [data-slot] .slip h3 { font-size: 15px; margin: 14px 0 4px; }
html.app [data-slot] .slip .row i { border-color: var(--fill-2); }
html.app [data-slot] .slip .total { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); color: var(--white); }
html.app [data-slot] .suggest-card { background: none; color: var(--white); padding: 0; box-shadow: none; text-align: start; }
html.app [data-slot] .suggest-form { flex-direction: column; align-items: stretch; }
html.app [data-slot] .suggest-form .btn { background: var(--hot); color: #fff; }
html.app [data-slot] .suggest-new span { background: var(--fill); color: var(--white); }
html.app [data-slot] .suggest-new a { color: var(--gold); }
html.app [data-slot] .credits summary { display: none; }
html.app [data-slot] .credits, html.app [data-slot] .credits a { color: var(--muted); }
html.app [data-slot] .drawer { margin: 0; }
html.app .reveal > * { opacity: 1; transform: none; }
html.app .sub-lead { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
html.app .sub-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--sep); }
html.app .sub-row .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--fill); font-size: 19px; }
html.app .sub-row b { font-size: 16px; }
html.app .sub-row small { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }
html.app .sub-row em { font-style: normal; font-size: 11px; font-weight: 600; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--muted); vertical-align: 2px; }
html.app .sub-row em.hard { background: rgb(163 39 27 / .16); color: var(--red); }
html.app .sub-row em.easy { background: rgb(70 86 26 / .18); color: var(--felt-2); }
html.app #moreAccount .lrow:nth-child(1) .ic { background: var(--felt-2); }
html.app #moreAccount .lrow:nth-child(2) .ic { background: var(--gold); }
html.app #moreAccount .lrow:nth-child(3) .ic { background: linear-gradient(135deg, #8e8e93, var(--muted)); }
html.app #moreAccount .lrow.danger .ic { background: rgb(163 39 27 / .18); }

/* ---------- Tab bar: a floating glass capsule ---------- */
html.app .tabbar {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: calc(var(--bottom) + 8px); height: var(--tab-h);
  display: flex; padding: 6px; border-radius: 32px;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 16px 40px rgb(0 0 0 / .5);
}
html.app .tabbar button {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; color: rgb(236 235 231 / .6); font-size: 10px; font-weight: 600; border-radius: 26px; transition: color .25s;
}
html.app .tabbar button::before {
  content: ""; position: absolute; inset: 0; border-radius: 26px; background: rgb(255 255 255 / .12);
  opacity: 0; transform: scale(.8); transition: opacity .3s var(--out), transform .4s var(--out);
}
html.app .tabbar button.on { color: var(--white); }
html.app .tabbar button.on::before { opacity: 1; transform: none; }
html.app .tabbar svg { position: relative; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
html.app .tabbar span { position: relative; }
html.app .tabbar button.on svg { stroke-width: 2.2; }
html.app body:is([data-view="login"], [data-view="board"], [data-view="question"], [data-view="final"]) .tabbar { display: none; }

/* ---------- Sheets ---------- */
html.app dialog.fb-dialog {
  margin: auto 0 0; width: 100%; max-width: none; max-height: 92svh; border-radius: 28px 28px 0 0; background: var(--surface);
  padding: 28px 18px calc(18px + var(--bottom)); animation: sheet-up .4s var(--out);
}
html.app dialog.fb-dialog::backdrop { background: rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.app dialog.fb-dialog::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--bone-3); }
html.app dialog.fb-dialog .fb-btns { flex-direction: column; }
html.app dialog.fb-dialog .fb-btns .btn { width: 100%; }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- Screens fade up as they appear ---------- */
html.app .view:not([hidden]) { animation: vt-in .35s var(--out); }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  html.app .app-home > *, html.app .pcard.dealt, html.app .view:not([hidden]) { animation: none; }
  html.app .pc-in, html.app .tabbar button::before { transition: none; }
}

/* The board's score strip on a phone: the turn line on top, the two teams side by side under it. */
@media (max-width: 640px) {
  html.app .scorebar { grid-template-columns: 1fr 1fr; gap: 10px; }
  html.app .scorebar .turn-mid { grid-column: 1 / -1; order: -1; }
  html.app .team-score { min-width: 0; padding: 12px; }
}
@media (max-width: 640px) {
  html.app .mini-ll { flex-wrap: wrap; justify-content: center; gap: 6px; grid-column: 1 / -1; }
  html.app .mini-ll button { width: 38px; height: 38px; font-size: 17px; }
  html.app .team-score .log { display: none; }
}
html.app .mini-ll button { background: var(--fill); }
html.app .mini-ll button:disabled { opacity: .35; }

/* On the website the same deal opens in a dialog from «لعبة سريعة» (the app shows it on its home). */
.deal-dialog { --white: #ecebe7; --on-white: #1d2207; --out: cubic-bezier(.16, 1, .3, 1); --brand: var(--display);
  width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; color: #ecebe7; }
.deal-dialog::backdrop { background: rgb(15 18 4 / .72); }
.deal-dialog .deal { padding-top: 22px; }
.deal-dialog .deal-close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgb(255 255 255 / .12); color: #ecebe7; font-size: 15px; cursor: pointer; }
.deal-dialog .deal-actions .btn { width: 100%; }
html.app .ah-swaps { margin-inline-start: 6px; padding-inline-start: 8px; border-inline-start: 1px solid rgb(184 144 31 / .3); }
html.app .ah-cup { margin-top: 10px; }
html.app .cup-page h2 { font-size: 30px; }