/* ============================================================
Trump Call — Mobile-app style, modern & professional
============================================================ */
:root {
--bg: #0b1020;
--bg2: #131a32;
--panel: rgba(255, 255, 255, 0.06);
--panel-brd: rgba(255, 255, 255, 0.10);
--ink: #eef2ff;
--muted: #9aa3c0;
--violet: #7c5cff;
--indigo: #4f46e5;
--cyan: #22d3ee;
--green: #22c55e;
--red: #f43f5e;
--gold: #fbbf24;
--felt1: #14532d;
--felt2: #052e1a;
--card-w: 50px;
--card-h: 72px;
--hand-w: 58px;
--hand-h: 84px;
--radius: 18px;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
--bot-speed: 0.75s;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
font-family: "Poppins", "Hind Siliguri", system-ui, sans-serif;
background:
radial-gradient(1200px 600px at 50% -10%, #1b2550, transparent 60%),
linear-gradient(160deg, var(--bg), #070a16);
color: var(--ink);
display: grid;
place-items: center;
overflow: hidden;
/* Stop mobile browsers treating card text/suit symbols as selectable —
prevents Chrome's "Tap to see search results" bar popping up over the hand. */
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Keep real text fields selectable/editable (name edit, room code, etc.) */
input, textarea {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
/* Phone frame (looks like an app on desktop, fullscreen on mobile) */
.phone {
position: relative;
width: min(460px, 100vw);
height: min(900px, 100dvh);
background: linear-gradient(165deg, var(--bg2), var(--bg));
overflow: hidden;
box-shadow: var(--shadow);
}
@media (min-width: 480px) and (min-height: 920px) {
.phone { border-radius: 34px; border: 1px solid rgba(255, 255, 255, 0.08); }
}
/* ---------------- Screens ---------------- */
.screen {
position: absolute; inset: 0;
display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.99);
transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.screen.active { opacity: 1; visibility: visible; transform: none; }
/* ---------------- Buttons ---------------- */
.btn {
border: none; cursor: pointer; font-family: inherit; font-weight: 600;
color: #fff; padding: 13px 20px; border-radius: 14px; font-size: 15px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
background: linear-gradient(135deg, var(--violet), var(--indigo));
box-shadow: 0 10px 26px rgba(79, 70, 229, 0.45);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary.big { padding: 16px 24px; font-size: 17px; width: 100%; }
.btn-ghost {
background: var(--panel); border: 1px solid var(--panel-brd); color: var(--ink);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.10); }
.btn-friends {
width: 100%;
background: linear-gradient(135deg, #f59e0b, #ec4899);
box-shadow: 0 10px 26px rgba(236, 72, 153, 0.40);
}
.btn-friends.big { padding: 16px 24px; font-size: 17px; }
.btn-friends:hover { filter: brightness(1.08); }
.btn-danger {
background: linear-gradient(135deg, #fb7185, var(--red));
box-shadow: 0 10px 26px rgba(244, 63, 94, 0.40);
}
.btn-danger:hover { filter: brightness(1.08); }
.icon-btn {
width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--panel-brd);
background: var(--panel); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.icon-btn:active { transform: scale(0.92); }
/* ---- SVG icons (Lucide, via icons.js) ------------------------------
Inherit color + size from the surrounding text. An icon sized 1em
sits on the text baseline like an emoji did, so drop-in replacement
keeps existing layouts intact. */
.cb-ic {
width: 1em; height: 1em;
display: inline-block; vertical-align: -0.14em;
flex: none;
}
/* An element that holds ONLY an icon (icon-only buttons, seat badges)
still gets a sensible glyph size from its own font-size. */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
/* Buttons/labels that pair an icon with a text label: give a small gap. */
.btn [data-icon], .btn-ic { display: inline-flex; align-items: center; }
/* ============================================================
HOME
============================================================ */
.home-bg {
position: absolute; inset: 0;
background:
radial-gradient(600px 360px at 50% 18%, rgba(124, 92, 255, 0.35), transparent 70%),
radial-gradient(500px 380px at 80% 90%, rgba(34, 211, 238, 0.18), transparent 70%);
}
.home-content {
position: relative; z-index: 1; flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 30px 26px; text-align: center;
}
.logo-cards { position: relative; height: 120px; width: 200px; margin-bottom: 8px; }
.lc {
position: absolute; left: 50%; top: 20px;
width: 64px; height: 90px; border-radius: 12px;
background: linear-gradient(160deg, #fff, #e9edf6); color: #111;
display: grid; place-items: center; font-weight: 800; font-size: 20px;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); border: 1px solid rgba(0,0,0,0.06);
animation: floatCard 4s ease-in-out infinite;
}
.lc1 { transform: translateX(-50%) rotate(-21deg) translateX(-66px); color: #111; }
.lc2 { transform: translateX(-50%) rotate(-7deg) translateX(-22px); color: var(--red); animation-delay: .3s; }
.lc3 { transform: translateX(-50%) rotate(7deg) translateX(22px); color: var(--red); animation-delay: .6s; }
.lc4 { transform: translateX(-50%) rotate(21deg) translateX(66px); color: #111; animation-delay: .9s; }
@keyframes floatCard { 0%,100% { margin-top: 0; } 50% { margin-top: -10px; } }
.app-title {
font-size: 40px; font-weight: 800; letter-spacing: -0.5px;
background: linear-gradient(135deg, #fff, #c7b8ff 60%, var(--cyan));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.app-sub { color: var(--muted); margin: 6px 0 30px; font-size: 14px; }
.home-buttons { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.home-foot { margin-top: 26px; color: var(--muted); font-size: 12px; opacity: .8; }
.home-credit { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.home-credit a {
font-weight: 700; text-decoration: none;
background: linear-gradient(120deg, var(--cyan), var(--violet));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
transition: opacity .15s;
}
.home-credit a:hover { opacity: .8; text-decoration: underline; -webkit-text-fill-color: var(--cyan); }
/* ============================================================
GAME — top bar
============================================================ */
.g-topbar {
display: flex; align-items: center; gap: 10px;
padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
}
.score-chips { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.chip {
display: flex; align-items: center; gap: 6px;
background: var(--panel); border: 1px solid var(--panel-brd);
padding: 6px 12px; border-radius: 12px; font-size: 13px;
}
.chip .lbl { color: var(--muted); font-size: 11px; }
.chip b { font-size: 16px; }
.chip.teamA { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35); }
.chip.teamB { box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.35); }
.chip.vs { background: none; border: none; color: var(--muted); padding: 0; }
.chip.target {
gap: 3px; padding: 5px 10px;
background: linear-gradient(135deg, rgba(245, 197, 66, 0.18), rgba(245, 158, 11, 0.12));
border-color: rgba(245, 197, 66, 0.45);
box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.3);
}
.chip.target .goal-ico { font-size: 13px; line-height: 1; }
.chip.target b { font-size: 15px; color: #f5c542; }
.trump-chip {
width: 38px; height: 38px; border-radius: 12px;
background: #fff; color: #111; display: grid; place-items: center;
font-size: 22px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.trump-chip.red { color: var(--red); }
/* ============================================================
GAME — table
============================================================ */
.table {
position: relative; flex: 1; margin: 4px 12px;
border-radius: 26px;
background:
radial-gradient(120% 90% at 50% 42%, rgba(34, 197, 94, 0.16), transparent 60%),
linear-gradient(165deg, #143a2a, #0a2018 70%, #07150f);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55), inset 0 0 0 6px rgba(255,255,255,0.02);
overflow: hidden;
}
.seat {
position: absolute; display: flex; align-items: center; gap: 8px;
padding: 6px; border-radius: 14px;
}
.seat.north { top: 34px; left: 50%; transform: translateX(-50%); flex-direction: column; }
.seat.west { left: 8px; top: 54%; transform: translateY(-50%); flex-direction: column; }
.seat.east { right: 8px; top: 54%; transform: translateY(-50%); flex-direction: column; }
.seat-badge {
position: relative;
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center; font-size: 22px;
background: linear-gradient(135deg, #2a2f55, #1b1f3a);
border: 2px solid rgba(255, 255, 255, 0.10);
transition: box-shadow .25s, border-color .25s;
}
.seat.active .seat-badge {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25), 0 0 22px rgba(251, 191, 36, 0.55);
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.12), 0 0 26px rgba(251, 191, 36, 0.7); } }
/* Trick winner's seat — same gold glow as the active/thinking ring but BIGGER
and brighter, with a stronger pulse, so the winner's avatar clearly lights up
during the show-pause. Added by JS (offline + online) alongside .win. */
.seat.win-seat .seat-badge {
border-color: #ffd666;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.35), 0 0 34px 6px rgba(251, 191, 36, 0.85);
animation: winGlow 0.9s ease-in-out infinite;
transform: scale(1.12);
}
@keyframes winGlow {
50% { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0.16), 0 0 44px 10px rgba(255, 214, 102, 0.95); }
}
.lite .seat.win-seat .seat-badge { animation: none; }
.seat.declarer .seat-badge::after {
/* Gold crown SVG (Lucide "crown"), inline data-URI so it needs no network. */
content: ""; position: absolute; left: 50%; top: -33px;
width: 20px; height: 20px;
transform: translateX(-50%); margin: 0; z-index: 6;
background: no-repeat center / contain
url('data:image/svg+xml;utf8,');
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.seat-tag {
display: flex; align-items: center; gap: 6px;
background: rgba(0, 0, 0, 0.35); padding: 3px 9px; border-radius: 999px; font-size: 12px;
}
.seat-tag .nm { font-weight: 600; }
.seat-tag .tk { background: var(--gold); color: #111; font-weight: 700; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.mini-fan { display: flex; height: 22px; margin-top: 2px; }
.mini-fan i {
display: block; width: 14px; height: 20px; margin-left: -8px; border-radius: 3px;
background: repeating-linear-gradient(45deg, #3730a3 0 4px, #4338ca 4px 8px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.mini-fan i:first-child { margin-left: 0; }
/* Bid bubble (shows each player's bid / pass during bidding) */
.bid-bubble {
position: absolute; z-index: 5;
font-size: 12px; font-weight: 700; line-height: 1;
padding: 5px 10px; border-radius: 999px; white-space: nowrap;
background: linear-gradient(135deg, var(--violet), var(--indigo));
color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.18);
animation: bubblePop .25s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes bubblePop { from { transform: scale(.4); opacity: 0; } }
.bid-bubble.pass { background: rgba(244, 63, 94, 0.22); border-color: rgba(244,63,94,.55); color: #ffc4cd; }
.bid-bubble.high {
background: linear-gradient(135deg, #f59e0b, var(--gold)); color: #3a2700;
box-shadow: 0 4px 14px rgba(251, 191, 36, 0.55);
}
/* placement: centered just above the avatar, independent of name length */
.seat.north .bid-bubble,
.seat.west .bid-bubble,
.seat.east .bid-bubble {
top: -9px; left: 50%; right: auto; margin: 0;
transform: translateX(-50%);
animation: bubblePopC .25s cubic-bezier(.2,.9,.3,1.4);
padding: 4px 9px;
}
@keyframes bubblePopC { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.bid-bubble.inline { position: static; transform: none; padding: 3px 9px; }
.think { display: flex; gap: 4px; padding: 4px 2px; }
.think i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: blink 1s infinite; }
.think i:nth-child(2) { animation-delay: .2s; }
.think i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Trick area */
.trick { position: absolute; inset: 0; pointer-events: none; }
.tslot { position: absolute; width: var(--card-w); height: var(--card-h); }
.tslot.p0 { bottom: 26%; left: 50%; transform: translateX(-50%); }
.tslot.p2 { top: 27%; left: 50%; transform: translateX(-50%); }
.tslot.p1 { left: 28%; top: 50%; transform: translateY(-50%); }
.tslot.p3 { right: 28%; top: 50%; transform: translateY(-50%); }
.tslot .card { animation: drop .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes drop { from { transform: scale(.4) translateY(-10px); opacity: 0; } }
/* Winning card of the trick — gold ring. Uses a real border (drawn reliably on
all Android WebViews, unlike a box-shadow spread which some older WebViews
drop) plus a soft glow. Gold is hard-coded so it never depends on a CSS var
resolving. box-sizing keeps the border from resizing the card.
It also pops — a quick bounce up + scale — so the winning card catches the
eye. Works in every game mode (offline + online both toggle .tslot.win). */
/* Winning card of the trick — SPOTLIGHT effect. When a trick resolves the
container gets .has-win: the three losing cards dim + shrink back, and the
winning card brightens, lifts, enlarges and gains a soft gold halo — so only
the winner draws the eye. No hard border. Works in every mode (offline #trick
+ online #og-trick both toggle .has-win / .tslot.win). */
.trick.has-win .tslot:not(.win) .card {
filter: brightness(.5) saturate(.75);
transform: scale(.9);
opacity: .72;
transition: filter .35s ease, transform .35s ease, opacity .35s ease;
}
.tslot.win { z-index: 4; } /* lift the whole winning slot above the others */
.tslot.win .card {
transform-origin: center bottom;
/* Soft gold halo (no border), plus depth shadow. */
box-shadow:
0 0 0 2px rgba(255, 214, 102, .9),
0 0 22px 6px rgba(251, 191, 36, .75),
0 14px 30px rgba(0, 0, 0, .55);
animation: winPop 1.15s cubic-bezier(.25, 1.3, .4, 1) both;
}
/* Pop up big, settle, a second smaller hop, then rest lifted + enlarged so the
winning card stays prominent until the trick clears. */
@keyframes winPop {
0% { transform: translateY(0) scale(1); }
22% { transform: translateY(-24px) scale(1.26); }
42% { transform: translateY(-4px) scale(1.12); }
60% { transform: translateY(-16px) scale(1.20); }
80% { transform: translateY(-6px) scale(1.15); }
100% { transform: translateY(-10px) scale(1.16); }
}
/* Keep the spotlight + pop in lite mode too — one-shot winner cue, not per-frame work. */
.lite .tslot.win .card { animation: winPop 1.15s cubic-bezier(.25, 1.3, .4, 1) both; }
.turn-banner {
position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
font-size: 12px; color: #d7f5e2; background: rgba(0, 0, 0, 0.4);
padding: 4px 14px; border-radius: 999px; white-space: nowrap; max-width: 90%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ============================================================
Cards
============================================================ */
.card {
width: var(--card-w); height: var(--card-h);
border-radius: 8px; position: relative;
background: linear-gradient(160deg, #ffffff, #eef1f7);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 0, 0, 0.08);
color: #111; font-weight: 700; overflow: hidden;
}
.card .corner { position: absolute; line-height: .9; text-align: center; }
.card .corner.tl { top: 4px; left: 5px; }
.card .corner.br { bottom: 4px; right: 5px; transform: rotate(180deg); }
.card .corner .r { font-size: 13px; display: block; }
.card .corner .s { font-size: 11px; display: block; }
.card .big { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; opacity: .92; }
.card.red { color: var(--red); }
.card.black { color: #1f2937; }
.card.back {
background:
linear-gradient(135deg, #4f46e5, #7c5cff),
repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px);
background-blend-mode: overlay; border: 2px solid rgba(255, 255, 255, 0.65);
}
.card.back::after { content: "♣♥"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 16px; }
/* ============================================================
You zone + hand
============================================================ */
.you-zone { padding: 6px 10px 4px; }
.you-tag {
display: flex; align-items: center; gap: 8px; justify-content: center;
font-size: 12px; color: var(--muted); margin-bottom: 4px;
}
.you-tag .av { font-size: 18px; }
.you-tag .nm { font-weight: 600; color: var(--ink); }
.you-tag .tk-pill { background: var(--gold); color: #111; font-weight: 700; border-radius: 999px; padding: 1px 9px; font-size: 11px; }
.hand {
display: flex; justify-content: center; align-items: flex-end;
min-height: calc(var(--hand-h) + 18px); padding-left: 22px;
}
.hand .card {
width: var(--hand-w); height: var(--hand-h);
margin-left: -22px; cursor: pointer;
transition: transform .14s ease, box-shadow .14s ease, filter .14s;
animation: dealIn .35s backwards;
}
.hand .card:first-child { margin-left: 0; }
.hand .card .corner .r { font-size: 15px; }
.hand .card .corner .s { font-size: 12px; }
.hand .card .big { font-size: 30px; }
.hand .card.playable:hover, .hand .card.playable:active { transform: translateY(-16px); box-shadow: 0 14px 24px rgba(0,0,0,.55); }
.hand .card.playable { box-shadow: 0 0 0 2px var(--green), 0 6px 14px rgba(0,0,0,.45); }
.hand .card.disabled { filter: brightness(.62) saturate(.6); cursor: default; }
.hand .card.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes dealIn { from { transform: translateY(40px) rotate(8deg); opacity: 0; } }
/* ============================================================
Action bar
============================================================ */
.action-bar {
min-height: 92px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25));
display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: center;
}
/* When there's no actionable choice (bid/trump buttons), collapse the bar
completely — no status text and no reserved empty space. */
.action-bar.empty { min-height: 0; padding: 0; gap: 0; background: none; }
.ab-title { font-size: 13px; color: var(--gold); min-height: 16px; text-align: center; }
.ab-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill-btn {
min-width: 34px; height: 36px; padding: 0 12px; border-radius: 12px;
background: var(--panel); border: 1px solid var(--panel-brd); color: #fff;
font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
transition: transform .1s, background .15s;
}
.pill-btn:hover { background: var(--indigo); }
.pill-btn:active { transform: scale(.92); }
.pill-btn.pass { background: rgba(244, 63, 94, 0.18); border-color: rgba(244,63,94,.5); }
.pill-btn.pass:hover { background: var(--red); }
.suit-btn {
width: 56px; height: 56px; font-size: 30px; border-radius: 14px;
background: #fff; border: 2px solid rgba(255,255,255,.4); cursor: pointer;
transition: transform .12s, box-shadow .12s;
}
.suit-btn.red { color: var(--red); } .suit-btn.black { color: #111; }
.suit-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
/* ============================================================
Sheets (rules / settings)
============================================================ */
.sheet { background: linear-gradient(165deg, var(--bg2), var(--bg)); }
.sheet-bar {
display: flex; align-items: center; justify-content: space-between;
padding: calc(14px + env(safe-area-inset-top)) 14px 14px;
border-bottom: 1px solid var(--panel-brd);
}
.sheet-bar h2 { font-size: 18px; }
.sheet-bar span { width: 38px; }
.sheet-body { padding: 18px; overflow-y: auto; }
.sheet-body h3 { font-size: 15px; margin: 16px 0 6px; color: var(--cyan); }
.sheet-body h3:first-child { margin-top: 0; }
.sheet-body p { font-size: 14px; line-height: 1.7; color: #d7dbef; }
.sheet-body b { color: var(--gold); }
/* ============================================================
Difficulty screen (premium)
============================================================ */
.diff-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.diff-amb {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(420px 280px at 12% 14%, rgba(16, 185, 129, 0.20), transparent 70%),
radial-gradient(440px 300px at 90% 42%, rgba(124, 92, 255, 0.22), transparent 70%),
radial-gradient(460px 320px at 25% 96%, rgba(249, 115, 22, 0.18), transparent 70%);
animation: ambFloat 12s ease-in-out infinite alternate;
}
@keyframes ambFloat { to { transform: translateY(-14px) scale(1.04); } }
.diff-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; }
.diff-head { position: relative; padding: 14px 22px 8px; }
.diff-head h1 {
font-size: 25px; font-weight: 800; letter-spacing: -0.4px;
background: linear-gradient(120deg, #fff, #cbd5ff 70%, var(--cyan));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.diff-head p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.diff-list { position: relative; padding: 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.diff-card {
--c: #888; --glow: rgba(0,0,0,.4); --soft: rgba(255,255,255,.08); --brd: rgba(255,255,255,.2); --ctext: #fff;
position: relative; display: flex; align-items: center; gap: 15px; text-align: left;
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 20px; padding: 17px 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(130% 130% at 0% 0%, var(--soft), transparent 55%);
color: var(--ink); font-family: inherit; cursor: pointer; overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
animation: diffIn .5s both; animation-delay: calc(var(--d, 0) * 0.09s);
}
@keyframes diffIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.diff-card::before {
content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 4px; border-radius: 0 4px 4px 0;
background: var(--c); box-shadow: 0 0 16px var(--glow);
}
.diff-card:hover {
transform: translateY(-3px);
border-color: var(--brd);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 26px var(--glow);
}
.diff-card:active { transform: scale(.985); }
.diff-orb {
width: 62px; height: 62px; flex-shrink: 0; display: grid; place-items: center; font-size: 30px;
border-radius: 18px;
background: linear-gradient(160deg, var(--c), rgba(18, 24, 44, 0.92));
box-shadow: 0 10px 24px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.diff-text { flex: 1; min-width: 0; }
.diff-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.diff-row h3 { font-size: 19px; font-weight: 800; }
.diff-tag {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
padding: 3px 9px; border-radius: 999px;
color: var(--ctext); background: var(--soft); border: 1px solid var(--brd);
}
.diff-text p { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-bottom: 11px; }
.diff-meter { display: flex; gap: 5px; }
.diff-meter i { width: 28px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.diff-meter i.on { background: var(--c); box-shadow: 0 0 10px var(--glow); }
.diff-arrow {
width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px;
border-radius: 50%; color: #fff;
background: var(--soft); border: 1px solid var(--brd);
transition: transform .16s, background .16s;
}
.diff-card:hover .diff-arrow { background: var(--c); transform: translateX(4px); box-shadow: 0 0 16px var(--glow); }
.diff-badge {
position: absolute; top: 0; right: 0;
font-size: 10px; font-weight: 700; letter-spacing: .4px;
padding: 4px 12px; border-radius: 0 20px 0 12px;
background: linear-gradient(135deg, var(--violet), var(--indigo)); color: #fff;
box-shadow: 0 4px 12px rgba(124, 92, 255, 0.5);
}
/* level color themes */
.diff-card.easy { --c: #10b981; --glow: rgba(16,185,129,.45); --soft: rgba(16,185,129,.15); --brd: rgba(16,185,129,.5); --ctext: #6ee7c4; }
.diff-card.medium { --c: #7c5cff; --glow: rgba(124,92,255,.5); --soft: rgba(124,92,255,.16); --brd: rgba(124,92,255,.55); --ctext: #c4b5ff; }
.diff-card.hard { --c: #f97316; --glow: rgba(249,115,22,.5); --soft: rgba(249,115,22,.16); --brd: rgba(249,115,22,.55); --ctext: #fdba74; }
/* Pro = premium gold, the flagship tier */
.diff-card.pro { --c: #f5c542; --glow: rgba(245,197,66,.55); --soft: rgba(245,197,66,.14); --brd: rgba(245,197,66,.6); --ctext: #ffe08a; }
.diff-card.pro {
background:
linear-gradient(135deg, rgba(245,197,66,.10), rgba(245,197,66,.02)),
var(--card, rgba(255,255,255,.03));
border-color: rgba(245,197,66,.35);
}
.diff-card.pro .diff-orb {
background: linear-gradient(135deg, #f5c542, #e0972a);
box-shadow: 0 6px 20px rgba(245,197,66,.5);
}
.pro-badge {
background: linear-gradient(135deg, #f5c542, #e0972a) !important;
color: #3a2c00 !important;
box-shadow: 0 4px 14px rgba(245,197,66,.55) !important;
}
/* Game options (moved here from the old Settings screen) */
.diff-label {
position: relative; padding: 6px 22px 4px; font-size: 12px; font-weight: 700;
letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
}
.diff-list-label { padding-top: 12px; }
.diff-options { position: relative; padding: 2px 18px; display: flex; flex-direction: column; gap: 9px; }
.diff-opt {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
border: 1px solid var(--panel-brd); border-radius: 14px; padding: 7px 9px 7px 14px;
animation: diffIn .5s both;
}
.diff-opt-label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; white-space: nowrap; min-width: 76px; }
.diff-opt-ic { font-size: 16px; }
.diff-opt .seg { flex: 1; border-radius: 11px; padding: 4px; }
.diff-opt .seg button { padding: 8px 6px; font-size: 12.5px; }
/* ============================================================
Rules screen (premium)
============================================================ */
.rules-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.rules-amb {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(420px 280px at 88% 10%, rgba(34, 211, 238, 0.16), transparent 70%),
radial-gradient(440px 300px at 8% 45%, rgba(124, 92, 255, 0.20), transparent 70%),
radial-gradient(460px 320px at 80% 96%, rgba(249, 115, 22, 0.16), transparent 70%);
animation: ambFloat 12s ease-in-out infinite alternate;
}
.rules-head { position: relative; padding: 14px 22px 6px; }
.rules-head h1 {
font-size: 24px; font-weight: 800; letter-spacing: -0.4px;
background: linear-gradient(120deg, #fff, #cbd5ff 70%, var(--cyan));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rules-head p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.rules-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 12px 18px 26px; display: flex; flex-direction: column; gap: 14px;
}
.rule-card {
--rc: #7c5cff; --rcg: rgba(124, 92, 255, 0.45);
position: relative; display: flex; gap: 14px; align-items: flex-start;
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; padding: 16px 16px 16px 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(120% 130% at 0% 0%, var(--rcg), transparent 42%);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
animation: diffIn .5s both; animation-delay: calc(var(--d, 0) * 0.07s);
}
.rule-card::before {
content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px;
border-radius: 0 4px 4px 0; background: var(--rc); box-shadow: 0 0 14px var(--rcg);
}
.rule-ic {
width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; font-size: 23px;
border-radius: 14px;
background: linear-gradient(160deg, var(--rc), rgba(18, 24, 44, 0.92));
box-shadow: 0 8px 18px var(--rcg), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.rule-text { flex: 1; min-width: 0; }
.rule-text h3 { font-size: 17px; font-weight: 800; margin-bottom: 5px; display: flex; align-items: center; gap: 9px; }
.rule-step {
width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center;
font-size: 12px; font-weight: 800; border-radius: 7px; color: #0c1226;
background: var(--rc); box-shadow: 0 3px 10px var(--rcg);
}
.rule-text > p { font-size: 13px; color: #cdd4ee; line-height: 1.55; }
.rule-text b { color: #fff; }
.power-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.power-strip b {
background: linear-gradient(160deg, #fff, #e7ebf5); color: #1f2937;
font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 8px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
}
.power-strip i { color: var(--muted); font-style: normal; font-size: 13px; }
.power-strip .dots { color: var(--muted); letter-spacing: 1px; }
.score-line { font-size: 12.5px; color: #cdd4ee; line-height: 1.55; margin-bottom: 8px; }
.score-line:last-child { margin-bottom: 0; }
.sl-tag {
display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
padding: 3px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle;
}
.sl-tag.good { color: #6ee7c4; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.45); }
.sl-tag.warn { color: #fdba74; background: rgba(249, 115, 22, 0.16); border: 1px solid rgba(249, 115, 22, 0.45); }
/* ============================================================
Settings screen (premium)
============================================================ */
.settings-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.set-amb {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(420px 280px at 12% 12%, rgba(34, 211, 238, 0.16), transparent 70%),
radial-gradient(440px 300px at 90% 48%, rgba(124, 92, 255, 0.20), transparent 70%),
radial-gradient(460px 320px at 25% 96%, rgba(16, 185, 129, 0.16), transparent 70%);
animation: ambFloat 12s ease-in-out infinite alternate;
}
.settings-head { position: relative; padding: 14px 22px 6px; }
.settings-head h1 {
font-size: 24px; font-weight: 800; letter-spacing: -0.4px;
background: linear-gradient(120deg, #fff, #cbd5ff 70%, var(--cyan));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.settings-head p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.settings-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 12px 18px 26px; display: flex; flex-direction: column; gap: 14px;
}
.set-card {
--rc: #7c5cff; --rcg: rgba(124, 92, 255, 0.45);
position: relative; display: flex; flex-direction: column; gap: 13px;
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; padding: 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(120% 130% at 0% 0%, var(--rcg), transparent 42%);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
animation: diffIn .5s both; animation-delay: calc(var(--d, 0) * 0.08s);
}
.set-card-head { display: flex; align-items: center; gap: 13px; }
.set-ic {
width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; font-size: 22px;
border-radius: 13px;
background: linear-gradient(160deg, var(--rc), rgba(18, 24, 44, 0.92));
box-shadow: 0 8px 18px var(--rcg), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.set-main { flex: 1; min-width: 0; }
.set-title { font-size: 15.5px; font-weight: 700; }
.set-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.seg {
display: flex; gap: 5px; background: rgba(0, 0, 0, 0.28);
border: 1px solid var(--panel-brd); border-radius: 13px; padding: 5px;
}
.seg button {
flex: 1; border: none; background: none; color: var(--muted); padding: 10px 8px;
font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
border-radius: 9px; transition: color .15s, background .2s, box-shadow .2s;
}
.seg button:hover { color: var(--ink); }
.seg button.on {
color: #fff;
background: linear-gradient(135deg, var(--rc), rgba(18, 24, 44, 0.5));
box-shadow: 0 6px 16px var(--rcg);
}
.set-note { text-align: center; margin-top: 6px; font-size: 12px; color: var(--muted); }
/* ============================================================
Auth (home) + Online button
============================================================ */
.home-auth {
position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 5;
min-height: 38px; display: flex; align-items: center; justify-content: flex-end;
}
.signin-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--panel); border: 1px solid var(--panel-brd); color: var(--ink);
padding: 8px 14px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s, transform .1s;
}
.signin-btn:hover { background: rgba(255, 255, 255, 0.12); }
.signin-btn:active { transform: scale(.95); }
.auth-chip {
display: inline-flex; align-items: center; gap: 8px;
background: var(--panel); border: 1px solid var(--panel-brd); color: var(--ink);
padding: 4px 12px 4px 4px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s, transform .1s; max-width: 180px;
}
.auth-chip:hover { background: rgba(255, 255, 255, 0.12); }
.auth-chip:active { transform: scale(.96); }
.auth-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-img { border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.25); }
.seat-badge .seat-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.you-tag .av.you .seat-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.av-initials {
display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: #fff;
background: linear-gradient(135deg, var(--violet), var(--indigo));
}
.home-row { display: flex; gap: 12px; }
.home-row .btn { flex: 1; }
.btn-online {
width: 100%;
background: linear-gradient(135deg, #10b981, #0ea5e9);
box-shadow: 0 10px 26px rgba(16, 185, 129, 0.40);
position: relative;
}
.btn-online::after {
content: ""; position: absolute; top: 12px; right: 14px;
width: 8px; height: 8px; border-radius: 50%; background: #d1fae5;
box-shadow: 0 0 0 0 rgba(209, 250, 229, 0.7); animation: onlinePulse 1.8s infinite;
}
@keyframes onlinePulse { 70% { box-shadow: 0 0 0 8px rgba(209, 250, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(209, 250, 229, 0); } }
/* Disabled Play Online (banned user) */
.btn-online.is-disabled {
background: linear-gradient(135deg, #4b5563, #374151);
box-shadow: none; opacity: 0.6; filter: grayscale(0.5); cursor: not-allowed;
}
.btn-online.is-disabled::after { display: none; }
/* Ban notice banner on home */
.ban-notice {
width: 100%; max-width: 300px; margin: 4px auto 16px;
display: flex; align-items: flex-start; gap: 12px; text-align: left;
padding: 14px 16px; border-radius: 16px;
background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.06));
border: 1px solid rgba(244, 63, 94, 0.5);
box-shadow: 0 10px 26px rgba(244, 63, 94, 0.22);
animation: banIn .45s both;
}
@keyframes banIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ban-notice .ban-ic { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.ban-notice .ban-text { display: flex; flex-direction: column; gap: 3px; }
.ban-notice .ban-text strong { font-size: 14px; font-weight: 800; color: #fecaca; }
.ban-notice .ban-text span { font-size: 12px; color: rgba(255, 255, 255, 0.72); line-height: 1.45; }
/* ============================================================
Profile screen (premium)
============================================================ */
.profile-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.profile-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 16px 18px 26px; display: flex; flex-direction: column; gap: 16px;
}
.profile-hero {
position: relative; text-align: center;
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 22px; padding: 24px 18px 22px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(130% 120% at 50% 0%, rgba(124, 92, 255, 0.30), transparent 55%);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
animation: diffIn .5s both;
}
.profile-avatar-wrap { position: relative; display: inline-block; margin-bottom: 12px; }
.profile-avatar { display: inline-grid; place-items: center; }
.profile-avatar .av-img, .profile-avatar .av-initials {
box-shadow: 0 10px 26px rgba(124, 92, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.pf-cam {
position: absolute; right: -2px; bottom: -2px;
width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
font-size: 14px; line-height: 1; border: 2px solid #0c1226;
background: linear-gradient(135deg, var(--violet), var(--indigo)); color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: transform .12s;
}
.pf-cam:hover { transform: scale(1.1); }
.pf-cam:active { transform: scale(.95); }
.profile-name-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.profile-name { font-size: 22px; font-weight: 800; }
.pf-edit-ic {
background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 9px;
width: 30px; height: 30px; font-size: 14px; cursor: pointer; line-height: 1;
}
.pf-edit-ic:hover { background: rgba(255, 255, 255, 0.12); }
.profile-email { font-size: 13px; color: var(--muted); margin-top: 4px; }
.profile-tag {
display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700;
padding: 4px 12px; border-radius: 999px;
}
.profile-tag.admin {
color: var(--gold); background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.45);
}
.profile-tag.banned {
color: #fecaca; background: rgba(244, 63, 94, 0.16); border: 1px solid rgba(244, 63, 94, 0.5);
margin-left: 6px;
}
.profile-edit { margin-top: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.profile-edit input {
flex: 1; min-width: 140px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--panel-brd);
color: var(--ink); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px;
}
.profile-edit input:focus { outline: none; border-color: var(--violet); }
.btn.mini { padding: 9px 14px; font-size: 13px; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats-note {
margin-top: 10px; text-align: center; font-size: 11.5px; line-height: 1.5;
color: var(--muted); padding: 0 6px;
}
.stats-note b { color: var(--ink); }
.stat-card {
--rc: #7c5cff; --rcg: rgba(124, 92, 255, 0.4);
text-align: center; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(120% 130% at 0% 0%, var(--rcg), transparent 50%);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
animation: diffIn .5s both; animation-delay: calc(var(--d, 0) * 0.07s);
}
.stat-val { font-size: 28px; font-weight: 800; color: var(--rc); }
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }
/* ---- Rank / Level card (profile) ---- */
.rank-card {
--rc: #c9843e; --rcg: #e9a866;
display: flex; align-items: center; gap: 14px;
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; padding: 14px 16px;
margin-bottom: 12px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(130% 160% at 0% 0%, var(--rc-soft, rgba(201, 132, 62, .22)), transparent 55%);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
animation: diffIn .5s both; animation-delay: calc(var(--d, 0) * 0.07s);
}
/* Gradient medal/shield badge — bronze→master colour driven by --rc/--rcg. */
.rank-badge {
flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center;
border-radius: 16px;
background: linear-gradient(150deg, var(--rcg), var(--rc));
box-shadow:
0 6px 18px var(--rc-glow, rgba(201, 132, 62, .5)),
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -3px 8px rgba(0, 0, 0, 0.28);
position: relative; overflow: hidden;
}
.rank-badge::after { /* glossy highlight sweep */
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 42%);
pointer-events: none;
}
.rank-badge-ic { font-size: 28px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.rank-main { flex: 1 1 auto; min-width: 0; }
.rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank-name {
font-size: 17px; font-weight: 800; letter-spacing: .3px;
color: var(--rc);
text-shadow: 0 1px 8px var(--rc-glow, rgba(201, 132, 62, .5));
}
.rank-xp { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rank-bar {
height: 9px; border-radius: 999px; margin: 8px 0 6px;
background: rgba(255, 255, 255, 0.10);
overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.rank-bar-fill {
height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, var(--rc), var(--rcg));
box-shadow: 0 0 10px var(--rc-glow, rgba(201, 132, 62, .5));
transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.rank-next { font-size: 11.5px; color: var(--muted); }
/* Small inline rank chip — used on leaderboard rows beside the name. */
.rank-chip {
--rc: #c9843e; --rcg: #e9a866;
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
padding: 2px 8px; border-radius: 999px;
color: #1a1206;
background: linear-gradient(135deg, var(--rcg), var(--rc));
box-shadow: 0 2px 6px var(--rc-glow, rgba(201, 132, 62, .5)), inset 0 1px 0 rgba(255, 255, 255, 0.4);
vertical-align: middle;
}
.rank-chip .rank-chip-ic { font-size: 11px; line-height: 1; }
/* Lite mode: drop the badge animation. */
.lite .rank-card { animation: none; }
.profile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.btn-admin {
background: linear-gradient(135deg, #f59e0b, #f43f5e);
box-shadow: 0 10px 26px rgba(244, 63, 94, 0.35);
}
/* ============================================================
Admin Dashboard
============================================================ */
.admin-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.admin-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 18px;
}
.admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-stat {
--c: #7c5cff; text-align: center; padding: 16px 10px; border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
animation: diffIn .4s both;
}
.adm-stat-v { font-size: 28px; font-weight: 800; color: var(--c); }
.adm-stat-l { font-size: 12px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }
.admin-sec h3 { font-size: 14px; color: var(--gold); margin-bottom: 10px; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.adm-row {
display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.adm-info { flex: 1; min-width: 0; }
.adm-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-badge {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
padding: 2px 6px; border-radius: 999px; vertical-align: middle;
color: var(--cyan); background: rgba(34, 211, 238, 0.15); border: 1px solid rgba(34, 211, 238, 0.4);
}
.adm-badge.ban { color: #fca5a5; background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.45); }
.adm-act {
border: none; border-radius: 9px; padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.adm-act.ban { background: rgba(244, 63, 94, 0.18); border: 1px solid rgba(244, 63, 94, 0.5); color: #fca5a5; }
.adm-act.ban:hover { background: var(--red); color: #fff; }
.adm-act.unban { background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.5); color: #6ee7c4; }
.adm-act.unban:hover { background: var(--green); color: #04231a; }
.adm-empty { color: var(--muted); font-size: 13px; padding: 12px; text-align: center; }
.admin-games { display: flex; flex-direction: column; gap: 8px; }
.adm-game {
padding: 11px 13px; border-radius: 12px;
background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.25);
}
.adm-game-top { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 6px; }
.adm-game-id { color: var(--muted); font-family: monospace; }
.adm-game-phase { color: var(--violet); font-weight: 700; text-transform: capitalize; }
.adm-game-score { margin-left: auto; font-weight: 800; color: var(--gold); }
.adm-game-players { font-size: 12px; color: #cdd4ee; }
.adm-game-players .bot { color: var(--muted); }
/* ============================================================
Leaderboard screen
============================================================ */
.lb-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.lb-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 10px;
}
.lb-msg { color: var(--muted); text-align: center; padding: 36px 16px; font-size: 14px; line-height: 1.6; }
/* Design-matched empty / offline / error state for the leaderboard. */
.lb-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 22px; gap: 10px; }
.lb-state-ic {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; margin-bottom: 2px;
background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.28); color: #a78bfa;
}
.lb-state-ic .cb-ic { width: 26px; height: 26px; }
.lb-state-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.lb-state-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 260px; }
.lb-row {
display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
border: 1px solid rgba(255, 255, 255, 0.10);
animation: diffIn .4s both;
}
.lb-rank { width: 30px; text-align: center; font-weight: 800; font-size: 17px; color: var(--muted); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lb-nametext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-name .rank-chip { flex: 0 0 auto; }
.lb-sub { font-size: 12px; color: var(--muted); }
.lb-pts { text-align: right; }
.lb-pts b { font-size: 18px; color: var(--gold); }
.lb-pts span { font-size: 10px; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: .5px; }
.lb-row.top1 { border-color: rgba(251, 191, 36, 0.55); box-shadow: 0 0 22px rgba(251, 191, 36, 0.22); background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(255,255,255,.02)); }
.lb-row.top2 { border-color: rgba(203, 213, 225, 0.45); }
.lb-row.top3 { border-color: rgba(205, 127, 50, 0.5); }
.lb-row.top .lb-rank { font-size: 22px; }
/* Medal SVG colors for the top 3 (gold / silver / bronze). */
.lb-row.top1 .lb-rank { color: #fbbf24; }
.lb-row.top2 .lb-rank { color: #cbd5e1; }
.lb-row.top3 .lb-rank { color: #cd7f32; }
.lb-rank .cb-ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
/* ============================================================
Lobby (online) screen
============================================================ */
.lobby-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.online-badge {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4);
color: #6ee7c4; padding: 5px 11px; border-radius: 999px;
}
.online-badge i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.lobby-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px;
}
#lobby-idle { display: flex; flex-direction: column; gap: 16px; }
.lobby-hero, .lobby-players {
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 20px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(130% 120% at 50% 0%, rgba(16, 185, 129, 0.22), transparent 55%);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
animation: diffIn .5s both; animation-delay: calc(var(--d, 0) * 0.08s);
}
.lobby-hero { text-align: center; padding: 26px 20px 22px; }
.lobby-hero-ic {
width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 30px;
border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.5), #10243a);
box-shadow: 0 10px 26px rgba(16, 185, 129, 0.45);
}
.lobby-hero h1 { font-size: 22px; font-weight: 800; }
.lobby-hero p { color: var(--muted); font-size: 13px; margin: 6px 0 18px; }
.lobby-players { padding: 16px; background-image: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); }
.lobby-players-head { font-size: 13px; color: var(--gold); font-weight: 600; margin-bottom: 12px; }
.lobby-list { display: flex; flex-direction: column; gap: 8px; }
.lobby-player { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.lobby-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 6px 0; }
.search-card { text-align: center; padding: 36px 20px; }
.search-spinner {
width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
border: 4px solid rgba(255, 255, 255, 0.12); border-top-color: var(--violet);
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.search-card h2 { font-size: 18px; }
.search-count { font-size: 32px; font-weight: 800; margin: 12px 0 2px; }
.search-count span { color: var(--muted); font-size: 18px; }
.search-note { color: var(--muted); font-size: 13px; margin: 6px 0 20px; }
/* ============================================================
Match Found screen
============================================================ */
.match-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.match-body {
position: relative; flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
}
.match-badge { font-size: 22px; font-weight: 800; color: var(--gold); animation: pop .4s cubic-bezier(.2,.9,.3,1.3); }
.match-table { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 14px auto; }
.mt-seat {
position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 86px;
animation: pop .4s both;
}
.mt-seat.south { bottom: 0; left: 50%; transform: translateX(-50%); }
.mt-seat.north { top: 0; left: 50%; transform: translateX(-50%); }
.mt-seat.west { left: 0; top: 50%; transform: translateY(-50%); }
.mt-seat.east { right: 0; top: 50%; transform: translateY(-50%); }
.mt-seat .av-img, .mt-seat .av-initials { border: 2px solid rgba(255, 255, 255, 0.2); }
.mt-seat.team-A .av-img, .mt-seat.team-A .av-initials { box-shadow: 0 0 0 2px #10b981, 0 6px 16px rgba(16,185,129,.5); }
.mt-seat.team-B .av-img, .mt-seat.team-B .av-initials { box-shadow: 0 0 0 2px #f43f5e, 0 6px 16px rgba(244,63,94,.5); }
.mt-seat.you .av-img, .mt-seat.you .av-initials { box-shadow: 0 0 0 3px var(--gold), 0 6px 18px rgba(251,191,36,.6); }
.mt-name { font-size: 13px; font-weight: 700; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-tag { font-size: 10px; color: var(--muted); }
.match-center {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
font-size: 24px; font-weight: 800;
background: radial-gradient(circle, #1b2348, #0d1326); border: 2px solid var(--gold);
box-shadow: 0 0 24px rgba(251, 191, 36, 0.5);
}
.match-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.match-note .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.match-note .dot.a { background: #10b981; }
.match-note .dot.b { background: #f43f5e; }
/* ============================================================
Overlay + toast
============================================================ */
.overlay {
position: absolute; inset: 0; z-index: 30;
background: rgba(5, 8, 18, 0.72); backdrop-filter: blur(8px);
display: grid; place-items: center; padding: 24px;
animation: fade .25s;
}
@keyframes fade { from { opacity: 0; } }
.ov-card {
width: 100%; max-width: 340px; text-align: center;
background: linear-gradient(165deg, #1b2348, #0d1326);
border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px;
padding: 28px 24px; box-shadow: var(--shadow);
animation: pop .3s cubic-bezier(.2,.9,.3,1.3);
max-height: calc(100% - 48px); overflow-y: auto;
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.ov-emoji { font-size: 50px; margin-bottom: 6px; }
.ov-card h2 {
font-size: 13px; font-weight: 800; margin-bottom: 14px;
letter-spacing: .26em; text-transform: uppercase;
background: linear-gradient(90deg, #eef1ff, #b9c2ee);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Result overlay (#overlay) kicker glows with the win/loss accent. */
#overlay .ov-card:has(.ov-msg.good) h2 {
background: linear-gradient(90deg, #fff, #34d399);
-webkit-background-clip: text; background-clip: text;
text-shadow: 0 0 16px rgba(52,211,153,.3);
}
#overlay .ov-card:has(.ov-msg.bad) h2 {
background: linear-gradient(90deg, #fff, #f87171);
-webkit-background-clip: text; background-clip: text;
text-shadow: 0 0 16px rgba(248,113,113,.3);
}
#ov-body { margin-bottom: 22px; }
#ov-body .good { color: var(--green); font-weight: 700; }
#ov-body .bad { color: var(--red); font-weight: 700; }
.ov-msg { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ov-msg.good { color: var(--green); }
.ov-msg.bad { color: var(--red); }
.ov-detail { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.ov-detail b { color: var(--ink); }
.ov-scores {
background: rgba(0, 0, 0, 0.25); border: 1px solid var(--panel-brd);
border-radius: 14px; padding: 4px 14px;
}
.ov-srow {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 0; font-size: 14px;
}
.ov-srow + .ov-srow { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ov-team { color: #cfd5ef; font-weight: 600; }
.ov-eq { display: flex; align-items: center; gap: 7px; }
.ov-eq i { font-style: normal; }
.ov-eq .prev { color: var(--muted); font-size: 14px; }
.ov-eq .op { font-weight: 700; font-size: 14px; }
.ov-eq .op.good { color: var(--green); }
.ov-eq .op.bad { color: var(--red); }
.ov-eq .equals { color: var(--muted); }
.ov-eq .total { font-size: 20px; min-width: 30px; text-align: right; }
.ov-foot { font-size: 12px; color: var(--muted); margin-top: 14px; }
.ov-actions { display: flex; gap: 10px; margin-top: 4px; }
.ov-actions .btn { flex: 1; min-width: 0; }
#ov-btn { width: 100%; margin-top: 4px; }
.ov-actions #ov-btn { margin-top: 0; }
/* Confirm dialog */
.confirm-card { max-width: 320px; }
.confirm-icon {
width: 64px; height: 64px; margin: 0 auto 12px;
display: grid; place-items: center; font-size: 30px; border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgba(244, 63, 94, 0.30), rgba(244, 63, 94, 0.10));
border: 1px solid rgba(244, 63, 94, 0.35);
}
#confirm-body { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 22px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }
/* Sign-in modal */
.signin-card { position: relative; max-width: 340px; padding-top: 30px; }
/* Opacity-only entrance: the scale "pop" re-rasterizes the Google iframe and
flickers on open. A plain fade keeps the embedded button perfectly smooth. */
.signin-card { animation: fade .2s ease both; }
.signin-x {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
color: #cfd5ef; font-size: 14px; cursor: pointer;
display: grid; place-items: center; transition: background .2s, transform .15s;
}
.signin-x:hover { background: rgba(255,255,255,.14); }
.signin-x:active { transform: scale(.9); }
.signin-ic {
width: 72px; height: 72px; margin: 4px auto 14px;
display: grid; place-items: center; font-size: 34px; border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgba(124,92,255,.38), rgba(124,92,255,.10));
border: 1px solid rgba(124,92,255,.4);
box-shadow: 0 0 26px rgba(124,92,255,.25);
}
.signin-card h2 { font-size: 21px; margin-bottom: 8px; }
.signin-sub { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 4px 20px; }
.signin-gwrap { display: flex; justify-content: center; min-height: 44px; margin-bottom: 6px; }
.signin-google-fallback {
width: 100%; padding: 13px 18px; border-radius: 999px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 10px;
background: #fff; color: #1f2433; font-weight: 700; font-size: 15px;
border: none; transition: filter .2s, transform .15s;
}
.signin-google-fallback:hover { filter: brightness(.96); }
.signin-google-fallback:active { transform: scale(.97); }
.signin-google-fallback .g-logo {
width: 22px; height: 22px; border-radius: 50%; background: #fff;
display: grid; place-items: center; font-weight: 800; color: #4285f4;
font-family: "Poppins", sans-serif;
}
.signin-foot { font-size: 11.5px; color: var(--muted); margin: 14px 4px 0; opacity: .8; }
/* Username + password form */
.up-tabs {
display: flex; gap: 6px; padding: 5px; margin-bottom: 14px;
background: rgba(255,255,255,.05); border: 1px solid var(--panel-brd); border-radius: 13px;
}
.up-tab {
flex: 1; padding: 9px 8px; border: none; cursor: pointer; border-radius: 9px;
background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px;
font-family: inherit; transition: background .2s, color .2s;
}
.up-tab.active { background: linear-gradient(135deg, var(--violet), var(--indigo)); color: #fff; }
.up-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.up-form input {
width: 100%; background: var(--panel); border: 1px solid var(--panel-brd); color: var(--ink);
border-radius: 12px; padding: 13px 15px; font-family: inherit; font-size: 14.5px; outline: none;
transition: border-color .15s, box-shadow .15s;
}
.up-form input::placeholder { color: var(--muted); }
.up-form input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,.2); }
.up-pass { position: relative; }
.up-pass input { padding-right: 46px; }
.up-eye {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
padding: 8px; border-radius: 8px; opacity: .7;
}
.up-eye:hover { opacity: 1; background: rgba(255,255,255,.06); }
.up-hint { font-size: 11.5px; color: var(--muted); margin: -2px 2px 0; }
.up-submit {
width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
background: linear-gradient(135deg, var(--violet), var(--indigo)); color: #fff;
font-family: inherit; font-weight: 700; font-size: 15px; margin-top: 2px;
box-shadow: 0 10px 26px rgba(124,92,255,.35); transition: filter .2s, transform .15s;
}
.up-submit:hover { filter: brightness(1.08); }
.up-submit:active { transform: scale(.98); }
.signin-or {
display: flex; align-items: center; gap: 12px; margin: 16px 2px;
color: var(--muted); font-size: 12px;
}
.signin-or::before, .signin-or::after {
content: ""; flex: 1; height: 1px; background: var(--panel-brd);
}
.toast {
position: fixed; left: 50%;
/* Sit just below the status bar / notch, and never touch the screen edges. */
top: calc(16px + env(safe-area-inset-top));
transform: translate(-50%, -16px);
z-index: 60;
width: max-content; max-width: min(88vw, 420px);
background: linear-gradient(135deg, rgba(30, 27, 62, 0.98), rgba(17, 20, 40, 0.98));
border: 1px solid rgba(124, 92, 255, 0.35);
color: #fff; padding: 12px 18px; border-radius: 16px;
font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: center;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
opacity: 0; pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
white-space: normal; word-break: break-word;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ============================================================
Play with Friends — menu + room lobby
============================================================ */
.friends-screen, .room-screen { background: linear-gradient(165deg, #0c1226, #06090f); overflow: hidden; }
.friends-body, .room-body {
position: relative; flex: 1; min-height: 0; overflow-y: auto;
padding: 16px 18px 26px; display: flex; flex-direction: column; gap: 14px;
}
/* Shared glass card (the .profile-card marker has no styles of its own) */
.fr-hero, .fr-card, .room-code-card, .room-invite, .room-target {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 18px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
animation: diffIn .45s both;
}
/* Menu */
.fr-hero { text-align: center; padding: 22px 18px; }
.fr-hero-ic { font-size: 38px; }
.fr-hero h1 { font-size: 23px; font-weight: 800; margin-top: 6px; }
.fr-hero p { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.fr-card {
display: flex; align-items: center; gap: 14px; text-align: left;
padding: 16px; cursor: pointer; border: none; width: 100%; color: var(--ink);
}
.fr-card:hover { filter: brightness(1.07); }
.fr-card:active { transform: scale(.99); }
.fr-card-ic { font-size: 26px; width: 46px; height: 46px; display: grid; place-items: center;
background: rgba(255,255,255,.06); border-radius: 14px; flex-shrink: 0; }
.fr-card-text { flex: 1; min-width: 0; }
.fr-card-text h3 { font-size: 17px; font-weight: 800; }
.fr-card-text p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.fr-arrow { margin-left: auto; font-size: 18px; color: var(--muted); }
.fr-join { cursor: default; }
.fr-join-row { display: flex; gap: 8px; margin-top: 8px; }
.fr-join-row input {
flex: 1; min-width: 0; background: rgba(0,0,0,.3); border: 1px solid var(--panel-brd);
color: var(--ink); border-radius: 11px; padding: 11px 12px; font-family: inherit;
font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-align: center;
}
.fr-join-row input:focus { outline: none; border-color: #ec4899; }
.fr-join-row .btn { width: auto; flex: 0 0 auto; padding: 11px 22px; }
/* Room code card */
.room-code-card { text-align: center; padding: 16px; }
.rc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.rc-code {
font-size: 32px; font-weight: 800; letter-spacing: 6px; margin: 6px 0 12px; color: #fff;
font-family: "Poppins", monospace;
background: linear-gradient(120deg, #f59e0b, #ec4899);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rc-actions { display: flex; gap: 8px; justify-content: center; }
.rc-actions .mini { padding: 8px 12px; font-size: 12.5px; }
/* Target points selector */
.room-target { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.rtg-label { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.room-target .seg { flex: 1; }
.room-target.locked .seg button { cursor: default; }
.room-target.locked .seg button:not(.on) { opacity: .45; }
/* Copy button flashes to a green "Copied!" confirmation for ~1.4s. */
.btn.copied { color: var(--green, #10b981); border-color: rgba(16,185,129,.55); }
/* Ready system: green check badge on a readied player's avatar + seat glow. */
.rs-av { position: relative; }
.rs-ready {
position: absolute; right: -4px; bottom: -4px;
width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center;
background: #10b981; color: #fff;
border: 2px solid var(--panel, #1b1f3a);
}
.rs-ready .cb-ic { width: 11px; height: 11px; }
.room-seat.ready { border-color: rgba(16,185,129,.5); box-shadow: 0 0 16px rgba(16,185,129,.18); }
#room-ready.on { background: linear-gradient(135deg, #34d399, #10b981); }
/* ---- Room lobby chat ---- */
/* ---- Floating room chat (FAB + slide-up panel) ---- */
.rchat { position: absolute; inset: 0; z-index: 850; pointer-events: none; }
.rchat.hidden { display: none; }
/* Circular chat button, bottom-right of the phone frame. */
.rchat-fab {
position: absolute; right: 16px; bottom: 100px; pointer-events: auto;
width: 54px; height: 54px; border-radius: 50%; cursor: pointer; border: none;
display: grid; place-items: center;
background: linear-gradient(135deg, #7c5cff, #6d4bff); color: #fff;
box-shadow: 0 10px 26px rgba(109, 75, 255, 0.5), 0 2px 6px rgba(0,0,0,.3);
transition: transform .14s ease, opacity .2s ease;
}
.rchat-fab:active { transform: scale(0.92); }
.rchat-fab .cb-ic { width: 24px; height: 24px; }
/* Hide the FAB while the panel is open (the panel has its own close button). */
.rchat.open .rchat-fab { transform: scale(0); opacity: 0; pointer-events: none; }
/* Unread badge on the FAB. */
.rchat-badge {
position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 999px; background: #ef4444; color: #fff;
font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
border: 2px solid var(--bg2, #0f1424); box-shadow: 0 2px 6px rgba(0,0,0,.4);
animation: rchatBadgePop .3s ease both;
}
.rchat-badge.hidden { display: none; }
@keyframes rchatBadgePop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* The slide-up chat panel. */
.rchat-panel {
position: absolute; right: 14px; bottom: calc(100px + var(--kb, 0px)); left: 14px; pointer-events: auto;
/* keyboard open → hug it (the FAB it clears is hidden while the panel is open) */
max-width: 340px; margin-left: auto;
display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px;
border-radius: 18px; background: linear-gradient(160deg, var(--bg2, #141a2e), var(--bg, #0b0f1d));
border: 1px solid var(--panel-brd); box-shadow: 0 20px 50px rgba(0,0,0,.55);
transform: translateY(16px) scale(.96); opacity: 0; visibility: hidden;
transform-origin: bottom right;
transition: transform .26s cubic-bezier(.2,.9,.25,1), opacity .22s ease, visibility .26s, bottom .22s ease;
}
.rchat.open .rchat-panel { transform: none; opacity: 1; visibility: visible; }
/* Keyboard up → drop the panel down to hug the keyboard (kills the 100px gap). */
.kb-open .rchat-panel { bottom: calc(8px + var(--kb, 0px)); }
.rchat-head {
font-size: 13.5px; font-weight: 700; display: flex; align-items: center;
justify-content: space-between; gap: 7px; color: var(--muted);
}
.rchat-head > span { display: inline-flex; align-items: center; gap: 7px; }
.rchat-x {
border: none; background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer;
width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
}
.rchat-x:active { transform: scale(.9); }
.rchat-x .cb-ic { width: 16px; height: 16px; }
.rchat-log {
display: flex; flex-direction: column; gap: 6px;
height: 300px; max-height: 52vh; overflow-y: auto; padding-right: 4px;
}
.rchat-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 10px 0; opacity: .7; }
.rchat-msg {
display: flex; flex-direction: column; gap: 1px;
background: rgba(255,255,255,.04); border: 1px solid var(--panel-brd);
border-radius: 12px; padding: 6px 10px; max-width: 85%; align-self: flex-start;
}
.rchat-msg.mine { align-self: flex-end; background: rgba(124,92,255,.16); border-color: rgba(124,92,255,.4); }
.rchat-who { font-size: 11px; font-weight: 700; color: var(--accent, #a78bfa); }
.rchat-msg.mine .rchat-who { color: #c4b5fd; }
.rchat-text { font-size: 14px; word-break: break-word; }
.rchat-form { display: flex; gap: 8px; }
.rchat-form input {
flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px;
border: 1px solid var(--panel-brd); background: var(--panel); color: var(--ink); font-size: 14px;
}
.rchat-send {
flex: none; width: 42px; border-radius: 12px; cursor: pointer;
border: none; background: linear-gradient(135deg, #7c5cff, #6d4bff); color: #fff;
display: grid; place-items: center;
}
.rchat-send .cb-ic { width: 18px; height: 18px; }
.rchat-send:active { transform: scale(0.94); }
/* ---- Offline state (home) ---- */
.offline-badge {
display: inline-flex; align-items: center; gap: 7px;
margin: 16px auto 2px; padding: 6px 14px; border-radius: 999px;
font-size: 12.5px; font-weight: 600;
color: #fca5a5; background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.35);
}
.offline-badge .cb-ic { width: 14px; height: 14px; }
/* Online-only buttons look muted + carry a subtle lock while offline. They stay
clickable (the tap shows the "You're offline" toast). */
.btn.offline-dim { opacity: .55; filter: saturate(.7); }
.btn.offline-dim::after {
content: ""; width: 14px; height: 14px; margin-left: 2px; flex: none;
background: no-repeat center / contain
url('data:image/svg+xml;utf8,');
opacity: .85;
}
/* Teams + seats */
.room-teams { display: flex; flex-direction: column; gap: 12px; }
/* Middle slot between Team A and Team B — holds the Start button (when the room
is full) or a "VS" divider (while waiting). Centred for a clean, pro look. */
.room-mid { display: flex; align-items: center; justify-content: center; min-height: 8px; margin: -2px 0; }
.room-mid #room-start { width: 100%; }
.room-mid #room-start:not(.hidden) {
animation: roomStartIn .35s cubic-bezier(.2,.9,.25,1) both;
box-shadow: 0 10px 28px rgba(16,185,129,.34);
}
@keyframes roomStartIn { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
/* "VS" badge: a thin rule on each side with a circular VS in the centre. */
.room-vs {
position: relative; width: 100%; text-align: center;
font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted);
}
.room-vs::before, .room-vs::after {
content: ""; position: absolute; top: 50%; width: calc(50% - 26px); height: 1px;
background: linear-gradient(90deg, transparent, var(--panel-brd), transparent);
}
.room-vs::before { left: 0; }
.room-vs::after { right: 0; }
.room-vs.hidden { display: none; }
.room-team { border: 1px solid var(--panel-brd); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.02); }
.room-team.team-a { border-color: rgba(16,185,129,.35); }
.room-team.team-b { border-color: rgba(244,63,94,.35); }
.rt-label { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.rt-label .dot { width: 9px; height: 9px; border-radius: 50%; }
.rt-label .dot.a { background: #10b981; } .rt-label .dot.b { background: #f43f5e; }
.rt-seats { display: flex; gap: 10px; }
.room-seat {
flex: 1 1 0; min-width: 0; min-height: 92px; border-radius: 14px; padding: 10px 8px;
background: rgba(0,0,0,.25); border: 1px dashed var(--panel-brd);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
overflow: hidden;
}
.room-seat.filled { border-style: solid; background: rgba(255,255,255,.05); }
.room-seat.you { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(251,191,36,.25); }
.room-seat .rs-av .av-img, .room-seat .rs-av .av-initials { box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.room-seat .rs-name { font-size: 12.5px; font-weight: 700; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-seat .rs-tag { font-size: 10px; color: var(--muted); }
.room-seat .rs-host { color: var(--gold); }
.room-seat .rs-empty-ic { font-size: 22px; opacity: .5; }
.room-seat .rs-btns { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.room-seat .rs-mini {
font-size: 11px; font-weight: 700; padding: 5px 6px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--panel-brd); background: rgba(255,255,255,.05); color: var(--ink);
}
.room-seat .rs-mini:hover { background: rgba(255,255,255,.12); }
.room-seat .rs-kick {
position: absolute; margin: -6px 0 0 60px; font-size: 11px; cursor: pointer;
}
.room-seat.tappable { cursor: pointer; }
.room-seat.tappable:hover { border-color: #ec4899; }
/* Manage buttons (Move + Kick/Remove) sit side by side under the seat. */
.rs-manage { display: flex; gap: 5px; justify-content: center; width: 100%; margin-top: 1px; }
.rs-manage .rs-mini { flex: 1; min-width: 0; padding: 5px 4px; }
/* ---- Host seat-move (move / swap players) ---- */
.rs-move { color: var(--cyan, #22d3ee); display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.rs-move .cb-ic { width: 12px; height: 12px; flex: 0 0 auto; }
/* The seat being moved: dimmed + cyan dashed ring. */
.room-seat.moving-src {
border-color: var(--cyan, #22d3ee); border-style: dashed;
box-shadow: 0 0 0 2px rgba(34,211,238,.25); opacity: .85;
}
.rs-move-hint { font-size: 10px; font-weight: 700; color: var(--cyan, #22d3ee); margin-top: 2px; }
/* Every other seat becomes a tappable drop target. */
.room-seat.drop-target {
cursor: pointer; border-style: dashed; border-color: rgba(52,211,153,.6);
animation: dropPulse 1.4s ease-in-out infinite;
}
.room-seat.drop-target:hover { border-color: #34d399; background: rgba(52,211,153,.08); }
@keyframes dropPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
50% { box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
}
.rs-drop-badge {
font-size: 10px; font-weight: 800; color: #34d399; margin-top: 3px;
text-transform: uppercase; letter-spacing: .5px;
}
.rs-drop-badge.big {
display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
}
.rs-drop-badge.big .cb-ic { width: 15px; height: 15px; }
/* Moving-mode banner above the teams. */
.room-movebar {
display: flex; align-items: center; gap: 10px; justify-content: space-between;
padding: 9px 12px; border-radius: 12px; margin-bottom: 2px;
background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(52,211,153,.1));
border: 1px solid rgba(52,211,153,.4);
}
.room-movebar.hidden { display: none; }
.mvb-txt { font-size: 11.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; }
.mvb-txt .cb-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.mvb-cancel {
flex: 0 0 auto; border: none; cursor: pointer; font-size: 11.5px; font-weight: 700;
padding: 6px 12px; border-radius: 9px; color: var(--ink);
background: rgba(255,255,255,.08); border: 1px solid var(--panel-brd);
}
.mvb-cancel:active { transform: scale(.94); }
/* Invite online panel */
.room-invite { padding: 14px; }
.ri-head { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.ri-list { display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow-y: auto; }
.ri-player { display: flex; align-items: center; gap: 10px; }
.ri-player span { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-player .rs-mini { width: auto; padding: 6px 12px; }
.ri-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 6px; }
.room-hint { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
/* ============================================================
Quick Chat (online game): emoji reactions + preset phrases +
typed text. Bubbles pop above the sender's seat for 4s.
============================================================ */
/* Floating chat button (bottom-right of the online game screen) */
.chat-fab {
position: absolute; right: 14px; bottom: calc(84px + var(--kb, 0px)); z-index: 40;
transition: transform .15s ease, box-shadow .15s ease, bottom .22s ease;
width: 52px; height: 52px; border: none; border-radius: 50%;
font-size: 24px; cursor: pointer; color: #fff;
background: linear-gradient(145deg, var(--violet), var(--indigo));
box-shadow: 0 8px 22px rgba(124, 92, 255, .45), inset 0 1px 0 rgba(255,255,255,.25);
display: grid; place-items: center;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.05); }
.chat-fab:active { transform: scale(.94); }
/* Slide-up tray with the emoji grid, phrase chips and text field */
.chat-tray {
position: absolute; left: 12px; right: 12px; bottom: calc(84px + var(--kb, 0px)); z-index: 41;
background: linear-gradient(165deg, rgba(30,38,72,.98), rgba(16,22,46,.98));
border: 1px solid var(--panel-brd); border-radius: var(--radius);
box-shadow: var(--shadow); backdrop-filter: blur(14px);
padding: 12px; animation: chatTrayIn .22s cubic-bezier(.2,.8,.3,1);
transition: bottom .22s ease;
}
/* Keyboard up → hug the keyboard (drop the 84px FAB clearance). */
.kb-open .chat-tray { bottom: calc(8px + var(--kb, 0px)); }
@keyframes chatTrayIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-tray-head {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px;
}
.chat-close {
border: none; background: rgba(255,255,255,.06); color: var(--ink);
width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.chat-close:hover { background: rgba(255,255,255,.14); }
.chat-emojis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.chat-emoji-btn {
border: 1px solid var(--panel-brd); background: var(--panel);
border-radius: 12px; aspect-ratio: 1; font-size: 22px; cursor: pointer;
display: grid; place-items: center; transition: transform .12s ease, background .12s ease;
}
.chat-emoji-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-2px) scale(1.08); }
.chat-emoji-btn:active { transform: scale(.9); }
.chat-phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.chat-phrase-btn {
border: 1px solid var(--panel-brd); background: var(--panel); color: var(--ink);
border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 600;
cursor: pointer; text-align: left; transition: background .12s ease, border-color .12s ease;
}
.chat-phrase-btn:hover { background: rgba(124,92,255,.18); border-color: var(--violet); }
.chat-input-row { display: flex; gap: 8px; align-items: center; }
.chat-text-input {
flex: 1; min-width: 0; border: 1px solid var(--panel-brd);
background: rgba(0,0,0,.25); color: var(--ink);
border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 13px; outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-text-input::placeholder { color: var(--muted); }
.chat-text-input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,.25); }
.chat-send-btn {
flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 12px;
color: #fff; font-size: 17px; cursor: pointer;
background: linear-gradient(145deg, var(--violet), var(--indigo));
box-shadow: 0 4px 14px rgba(124,92,255,.4);
transition: transform .12s ease;
}
.chat-send-btn:hover { transform: translateY(-1px) scale(1.05); }
.chat-send-btn:active { transform: scale(.92); }
/* Viewport-level layer that holds the floating reaction bubbles */
#cb-chat-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
/* A reaction bubble shown above a player's seat */
.chat-bubble {
position: fixed; transform: translate(-50%, -100%) scale(.6);
opacity: 0; pointer-events: none; transform-origin: 50% 100%;
transition: transform .22s cubic-bezier(.2,1.4,.4,1), opacity .22s ease;
max-width: 180px; text-align: center; white-space: normal; word-break: break-word;
}
.chat-bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.chat-bubble.emoji { font-size: 38px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.chat-bubble.phrase {
font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35;
background: linear-gradient(160deg, rgba(40,48,86,.98), rgba(22,28,56,.98));
border: 1px solid var(--panel-brd); border-radius: 14px;
padding: 8px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
/* Little pointer tail under a phrase/text bubble */
.chat-bubble.phrase::after {
content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
border: 6px solid transparent; border-top-color: rgba(22,28,56,.98); border-bottom: 0;
}
.hidden { display: none !important; }
/* ============================================================
LITE / PERFORMANCE MODE
Auto-enabled on low-RAM phones (set via the inline detector in
index.html → ) or chosen in Settings.
Goal: kill the GPU/CPU-heavy effects that cause stutter on
low-end devices — backdrop blur, looping ambient animations,
and big multi-layer shadows — while keeping the layout identical.
============================================================ */
/* 1) backdrop-filter blur is the single most expensive effect on
mobile GPUs. Drop it; use a slightly more opaque solid instead. */
.lite .overlay { backdrop-filter: none !important; background: rgba(5, 8, 18, 0.93) !important; }
.lite .chat-tray { backdrop-filter: none !important; }
/* 2) Stop every always-running (infinite) animation. These repaint
the screen 60×/sec even when nothing is happening. The static
styles they leave behind still read fine (e.g. the active-seat
gold glow stays, it just stops "breathing"). */
.lite .lc,
.lite .diff-amb,
.lite .rules-amb,
.lite .set-amb,
.lite .seat.active .seat-badge,
.lite .think i,
.lite .btn-online::after { animation: none !important; }
/* The ambient gradient blobs don't move now — calm them down a touch. */
.lite .diff-amb,
.lite .rules-amb,
.lite .set-amb { opacity: 0.55; }
/* 3) Lighten heavy shadows. Big blurred/multi-layer box-shadows are
costly to composite, especially with many cards on screen. */
.lite .card,
.lite .hand .card,
.lite .lc { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; }
.lite .diff-card,
.lite .rule-card,
.lite .set-card,
.lite .stat-card,
.lite .profile-hero,
.lite .lobby-hero,
.lite .lobby-players,
.lite .fr-hero,
.lite .fr-card,
.lite .room-code-card,
.lite .room-invite,
.lite .adm-stat,
.lite .lb-row,
.lite .chat-fab,
.lite .ov-card { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32) !important; }
/* 4) The felt table repaints on every card move — it's the hot path
during play. Replace the layered radial + inset-glow with a flat
gradient so each trick animation is cheap. */
.lite .table {
background: linear-gradient(165deg, #143a2a, #0a2018 70%, #07150f) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
/* 5) Trim one-shot entrance animations to be shorter/snappier so
screen switches feel instant on slow devices (app.js also skips
re-triggering them in lite mode). */
.lite .diff-card,
.lite .rule-card,
.lite .set-card,
.lite .stat-card,
.lite .profile-card,
.lite .lb-row { animation-duration: 0.25s !important; animation-delay: 0s !important; }
/* 6) In-game card animations off. These fire on EVERY move (deal-in,
trick drop, bid pop) — the JS already skips the FLIP slide in lite,
this removes the matching CSS keyframes so each move is instant. */
.lite .hand .card,
.lite .tslot:not(.win) .card,
.lite .bid-bubble,
.lite .match-badge { animation: none !important; }
/* 7) Smooth transition on hand cards is pointless without animations and
adds compositor work on touch — drop it in lite. */
.lite .hand .card { transition: none !important; }
/* ============================================================
Achievements — profile grid + unlock banner
============================================================ */
.ach-section { margin-top: 4px; }
.ach-head {
display: flex; align-items: center; justify-content: space-between;
margin: 4px 2px 12px;
}
.ach-head-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 700; color: var(--gold);
}
.ach-head-title .cb-ic { width: 18px; height: 18px; }
.ach-head-count {
font-size: 12px; font-weight: 700; color: var(--muted);
background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-brd);
padding: 3px 10px; border-radius: 999px;
}
/* ---- Achievements carousel (swipeable) ---- */
.ach-carousel { position: relative; }
.ach-track {
display: flex; gap: 12px;
overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 2px 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ach-track::-webkit-scrollbar { display: none; }
.ach-slide {
position: relative; flex: 0 0 66%; scroll-snap-align: center;
text-align: center; overflow: hidden;
padding: 22px 16px 18px; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
/* Locked slides are dimmed & desaturated; earned ones light up. */
opacity: .62; filter: saturate(.35);
transition: opacity .3s ease, filter .3s ease;
}
.ach-slide.earned {
opacity: 1; filter: none;
border-color: rgba(251, 191, 36, 0.35);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
radial-gradient(120% 130% at 0% 0%, rgba(251, 191, 36, 0.22), transparent 55%);
box-shadow: 0 10px 26px rgba(251, 191, 36, 0.16), inset 0 0 0 1px rgba(251, 191, 36, 0.06);
}
.ach-slide-ic {
width: 60px; height: 60px; margin: 0 auto 10px;
display: grid; place-items: center; border-radius: 50%;
background: rgba(255, 255, 255, 0.06); color: var(--muted);
}
.ach-slide-ic .cb-ic { width: 30px; height: 30px; }
.ach-slide.earned .ach-slide-ic {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1a1206; box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}
.ach-slide-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.ach-slide.earned .ach-slide-title { color: var(--gold); }
.ach-slide-desc { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; min-height: 32px; }
.ach-slide-status.done {
display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
font-size: 11px; font-weight: 700; color: var(--gold);
}
.ach-slide-status.done .cb-ic { width: 14px; height: 14px; }
/* Nav arrows flanking the track. */
.ach-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
background: rgba(20, 20, 30, 0.72); color: var(--ink);
border: 1px solid var(--panel-brd);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: background .15s ease, transform .12s ease;
}
.ach-nav:active { transform: translateY(-50%) scale(.9); }
.ach-nav.prev { left: -6px; }
.ach-nav.next { right: -6px; }
.ach-nav .cb-ic { width: 18px; height: 18px; }
/* Position dots. */
.ach-dots {
display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
}
.ach-dot {
width: 7px; height: 7px; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, 0.2); transition: background .2s ease, transform .2s ease;
}
.ach-dot.on { background: var(--gold); transform: scale(1.25); }
/* Progress bar for locked slides. */
.ach-bar {
height: 5px; border-radius: 999px; margin: 12px 4px 3px;
background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.ach-bar i {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--cyan), var(--violet));
transition: width .4s ease;
}
.ach-prog { font-size: 10px; color: var(--muted); font-weight: 600; }
/* Earned "shine" sweep across the slide. */
.ach-slide.earned::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
transform: translateX(-120%);
animation: achShine 4.5s ease-in-out infinite; animation-delay: 1s;
}
@keyframes achShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
/* ---- Unlock banner (top of the phone frame, auto-dismisses) ----
Mounted inside .phone and positioned absolutely to it (JS appends it there),
so it always sits neatly at the top of the app instead of drifting off the
viewport on desktop. Slides down a short distance to stay inside the frame's
overflow:hidden clip. */
#ach-pop {
position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; z-index: 9999;
transform: translate(-50%, -12px);
display: flex; align-items: center; gap: 12px;
padding: 11px 16px 11px 12px; border-radius: 16px;
width: calc(100% - 28px); max-width: 380px;
background: linear-gradient(135deg, rgba(30, 22, 8, 0.96), rgba(20, 26, 50, 0.96));
border: 1px solid rgba(251, 191, 36, 0.4);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(251, 191, 36, 0.08);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
opacity: 0; pointer-events: none;
transition: transform .5s cubic-bezier(.2, .9, .25, 1), opacity .4s ease;
}
#ach-pop.show { transform: translate(-50%, 0); opacity: 1; }
.ach-pop-ic {
width: 44px; height: 44px; flex: 0 0 auto;
display: grid; place-items: center; border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1a1206; box-shadow: 0 6px 18px rgba(251, 191, 36, 0.5);
animation: achPopIc .6s ease both;
}
.ach-pop-ic .cb-ic { width: 24px; height: 24px; }
@keyframes achPopIc { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.ach-pop-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.ach-pop-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 1px; }
/* Lite mode: no shine sweep, simpler banner entrance. */
.lite .ach-slide.earned::after { display: none; }
.lite .ach-track { scroll-behavior: auto; }
.lite .ach-pop-ic { animation: none; }
/* ============================================================
Rank-Up celebration — big centered burst shown over the game
when a finished match pushes the player into a higher tier.
Mounted inside .phone; coloured by the new tier via --rc/--rcg.
============================================================ */
#rankup-pop {
position: absolute; inset: 0; z-index: 10000;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; text-align: center; pointer-events: none;
opacity: 0; transition: opacity .35s ease;
background: radial-gradient(60% 50% at 50% 42%, var(--rc-soft, rgba(245,184,48,.24)), transparent 70%);
}
#rankup-pop.show { opacity: 1; }
/* Rotating light rays behind the badge. */
.rankup-rays {
position: absolute; top: 42%; left: 50%; width: 320px; height: 320px;
transform: translate(-50%, -50%);
background: conic-gradient(from 0deg,
transparent 0 8deg, var(--rc-soft, rgba(245,184,48,.22)) 8deg 16deg,
transparent 16deg 24deg, var(--rc-soft, rgba(245,184,48,.22)) 24deg 32deg);
-webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, #000 60%, transparent 66%);
mask: radial-gradient(circle, transparent 34%, #000 36%, #000 60%, transparent 66%);
opacity: .8; animation: rankupRays 9s linear infinite;
}
@keyframes rankupRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.rankup-kicker {
font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
color: var(--rc, #f5b830); text-shadow: 0 2px 12px var(--rc-glow, rgba(245,184,48,.55));
animation: rankupIn .5s .05s both;
}
.rankup-badge {
width: 108px; height: 108px; display: grid; place-items: center;
border-radius: 28px; position: relative; overflow: hidden;
background: linear-gradient(150deg, var(--rcg), var(--rc));
box-shadow:
0 16px 40px var(--rc-glow, rgba(245,184,48,.55)),
inset 0 2px 0 rgba(255, 255, 255, 0.5),
inset 0 -5px 14px rgba(0, 0, 0, 0.3);
animation: rankupBadge .7s cubic-bezier(.2, 1.3, .4, 1) both;
}
.rankup-badge::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 45%);
}
.rankup-ic { font-size: 56px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.rankup-name {
font-size: 30px; font-weight: 900; letter-spacing: .5px;
color: var(--rc, #f5b830); text-shadow: 0 3px 16px var(--rc-glow, rgba(245,184,48,.55));
animation: rankupIn .5s .18s both;
}
.rankup-sub {
font-size: 14px; font-weight: 700; color: var(--muted);
animation: rankupIn .5s .28s both;
}
@keyframes rankupBadge { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes rankupIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.lite .rankup-rays { animation: none; }
.lite .rankup-badge { animation: none; }
/* ============================================================
Reconnect prompt — floating banner (any screen) offering to
rejoin a live match a player dropped out of.
============================================================ */
.reconnect-bar {
position: absolute; top: 12px; left: 12px; right: 12px; z-index: 900;
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: 16px; cursor: pointer;
background: linear-gradient(135deg, rgba(16, 40, 30, 0.97), rgba(12, 30, 44, 0.97));
border: 1px solid rgba(52, 211, 153, 0.5);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(52, 211, 153, 0.1);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
animation: rcbIn .45s cubic-bezier(.2, .9, .25, 1) both;
transition: transform .12s ease, filter .12s ease;
}
.reconnect-bar:active { transform: scale(.985); filter: brightness(1.08); }
.reconnect-bar.hidden { display: none; }
@keyframes rcbIn { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.rcb-pulse {
position: relative; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
animation: rcbPulse 1.8s ease-out infinite;
}
@keyframes rcbPulse {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.rcb-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.rcb-text b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rcb-text small { font-size: 11px; color: rgba(255, 255, 255, 0.62); }
.rcb-cta {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
padding: 8px 13px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: #062018;
background: linear-gradient(135deg, #34d399, #10b981);
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
.rcb-cta .cb-ic { width: 15px; height: 15px; }
.lite .reconnect-bar { animation: none; }
.lite .rcb-pulse { animation: none; }
/* ============================================================
Onboarding tutorial
============================================================ */
.tut-overlay {
position: fixed; inset: 0; z-index: 10000;
display: grid; place-items: center; padding: 22px;
background: radial-gradient(120% 120% at 50% 0%, rgba(20, 26, 50, 0.85), rgba(6, 9, 15, 0.94));
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tut-card {
position: relative; width: 100%; max-width: 360px;
text-align: center; padding: 30px 24px 22px; border-radius: 24px;
background: linear-gradient(160deg, #1a2140, #10152b);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: var(--shadow), 0 0 0 1px rgba(124, 92, 255, 0.06);
animation: tutIn .45s cubic-bezier(.2, .9, .25, 1) both;
}
@keyframes tutIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.tut-skip {
position: absolute; top: 12px; right: 14px;
background: none; border: none; color: var(--muted);
font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
.tut-skip:hover { color: var(--ink); }
.tut-ic {
width: 74px; height: 74px; margin: 0 auto 16px;
display: grid; place-items: center; border-radius: 22px;
background: linear-gradient(135deg, var(--violet), var(--indigo));
color: #fff; box-shadow: 0 14px 34px rgba(124, 92, 255, 0.45);
animation: tutPop .55s ease both;
}
.tut-ic .cb-ic { width: 38px; height: 38px; }
@keyframes tutPop { 0% { transform: scale(0) rotate(-12deg); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.tut-title { font-size: 21px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.tut-body {
font-size: 14.5px; line-height: 1.6; color: #c7cef0;
font-family: "Hind Siliguri", "Poppins", system-ui, sans-serif;
min-height: 96px;
}
.tut-body b { color: var(--ink); font-weight: 700; }
.tut-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 18px; }
.tut-dots i {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255, 255, 255, 0.2); transition: all .3s ease;
}
.tut-dots i.on { width: 22px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.tut-nav { display: flex; gap: 10px; }
.tut-nav .btn { flex: 1; }
.tut-back { flex: 0 0 auto !important; min-width: 88px; }
.lite .tut-card, .lite .tut-ic { animation: none !important; }
.rules-tut-btn { margin: 14px auto 0; max-width: 260px; }
/* ============================================================
LANDSCAPE GAME LAYOUT — full-immersive (native app only)
------------------------------------------------------------
Toggled by html.landscape (native.js sets it when a game screen locks to
landscape + hides the status bar). Scoped to the class — NOT @media(orientation)
— so a landscape browser is never affected; only the locked APK re-lays-out.
Covers BOTH modes (#screen-game offline + #screen-ogame online, same classes).
Design: the felt table fills the ENTIRE screen; the top bar and the player's
hand float OVER it (overlay), the way modern card games (Callbreak etc.) look.
============================================================ */
html.landscape .phone {
width: 100vw; height: 100dvh; max-width: none;
border-radius: 0 !important; border: none !important;
}
/* Slightly smaller cards so a 13-card hand fits the width comfortably. */
html.landscape {
--card-w: 46px; --card-h: 66px;
--hand-w: 58px; --hand-h: 82px;
}
/* --- Table = full screen (the felt fills everything; UI floats over it) --- */
html.landscape #screen-game .table,
html.landscape #screen-ogame .table {
position: absolute; inset: 0;
margin: 0; border-radius: 0; border: none; flex: none;
}
/* --- Top bar: back button top-left, then the two TEAM score chips split to the
left and right edges (You+P on the left, W+E on the right), target chip tucked
near the left group; trump chip top-right. So nothing sits dead-center where
the partner seat lives. --- */
html.landscape #screen-game .g-topbar,
html.landscape #screen-ogame .g-topbar {
position: absolute; top: 0; left: 0; right: 0; z-index: 30;
padding: 8px 12px; background: transparent;
pointer-events: none;
}
html.landscape .g-topbar > * { pointer-events: auto; }
html.landscape .g-topbar .icon-btn { position: relative; z-index: 2; }
/* Stretch the chip row full-width and push the teams apart. */
html.landscape .g-topbar .score-chips {
flex: 1; justify-content: space-between; gap: 6px;
margin: 0 8px; align-items: flex-start;
}
html.landscape .g-topbar .chip { padding: 3px 10px; font-size: 12px; }
/* You+P (teamA) hugs the left, W+E (teamB) hugs the right, target sits by teamA. */
html.landscape .g-topbar .chip.teamA { order: 0; }
html.landscape .g-topbar .chip.target { order: 1; margin-right: auto; }
html.landscape .g-topbar .chip.teamB { order: 2; }
html.landscape .g-topbar .trump-chip { margin-left: 4px; }
/* --- Opponent seats --- partner top-center (clear of the split score chips),
the other two hug the left/right edges vertically centered. Partner is laid
out in ONE horizontal line (avatar + name + tricks) like the You tag. --- */
/* Partner (north): a single horizontal row pinned to the very TOP center, on the
same line as the score chips. avatar · name+tricks · mini-fan · bid badge. */
html.landscape .seat.north {
top: 8px; flex-direction: row; align-items: center; gap: 6px;
}
html.landscape .seat.west { left: 12px; top: 50%; }
html.landscape .seat.east { right: 12px; top: 50%; }
/* Partner's mini card-back fan: shrink so the top-center row stays tidy. */
html.landscape .seat.north .mini-fan { height: 16px; }
html.landscape .seat.north .mini-fan i { height: 15px; width: 10px; margin-left: -6px; }
/* Partner's bid badge: sit INLINE at the end of the row (to the right of the
name/tricks), not floated above the avatar. */
html.landscape .seat.north .bid-bubble {
position: static; transform: none; margin: 0;
order: 9; /* after avatar, name, fan */
animation: none;
}
/* --- Trick fan: centered, sized for the wide felt --- */
html.landscape .tslot.p0 { bottom: 24%; left: 50%; }
html.landscape .tslot.p2 { top: 20%; left: 50%; }
html.landscape .tslot.p1 { left: 36%; top: 48%; }
html.landscape .tslot.p3 { right: 36%; top: 48%; }
/* --- Player hand + tag: overlay across the bottom, over a soft gradient --- */
html.landscape #screen-game .you-zone,
html.landscape #screen-ogame .you-zone {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
padding: 0 8px 4px;
background: linear-gradient(to top, rgba(3, 8, 18, .82), rgba(3, 8, 18, .3) 60%, transparent);
}
/* You tag: floats at the very BOTTOM center of the screen, OVER the bottom edge
of the hand cards (absolute + high z-index so it's drawn on top of them), like
the reference where the "YOU" chip overlaps the lower part of the player's
cards. The hand sits flush at the bottom; the tag overlaps it. */
html.landscape #screen-game .you-tag,
html.landscape #screen-ogame .you-tag {
position: absolute; left: 50%; bottom: 5px;
transform: translateX(-50%); z-index: 30;
justify-content: center; gap: 6px; margin: 0;
font-size: 12px; padding: 3px 10px;
background: rgba(6, 12, 26, .82); border-radius: 999px;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
html.landscape .hand {
min-height: calc(var(--hand-h) + 6px);
padding-left: 20px; align-items: flex-end;
}
html.landscape .hand .card { margin-left: -20px; }
/* --- Action bar (bid / trump / pass buttons): float ABOVE the hand, centered,
high z-index so it's always reachable. THIS is what was going off-screen in
landscape (it sat in normal flow after .you-zone which we made absolute). --- */
html.landscape #screen-game .action-bar,
html.landscape #screen-ogame .action-bar {
position: absolute; left: 50%; bottom: calc(var(--hand-h) + 44px);
transform: translateX(-50%);
z-index: 40; width: auto; max-width: 92vw;
margin: 0; padding: 6px 10px;
background: rgba(10, 16, 30, .82); border-radius: 14px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
html.landscape .action-bar.empty { display: none; } /* JS adds .empty when no buttons */
html.landscape .action-bar .ab-row { flex-wrap: wrap; justify-content: center; }
/* Overlays/result cards centered, capped for the short viewport. z-index lifted
ABOVE the floating action bar (z-40) + hand/tags (z-30) so a confirm dialog
(e.g. Leave Room) fully covers the bid buttons instead of showing through. */
html.landscape .overlay { padding: 10px; z-index: 100; }
html.landscape .ov-card { max-height: 94dvh; overflow-y: auto; }
/* ============================================================
PREMIUM HERO — landscape Round Over / Game Over popup
------------------------------------------------------------
Applies only to the result overlay (#overlay) in landscape (APK). The phone
is very short here, so we lay it out WIDE with NO scroll:
• a glowing "hero banner" strip on top (icon + kicker/title + headline)
• below it a 2-column body: round detail (left) + score card (right)
• full-width action buttons at the bottom
Portrait + web are untouched (this whole block is scoped to html.landscape).
Structure it rides on (unchanged markup):
.ov-card > [.ov-emoji, h2, #ov-body(.ov-msg,.ov-detail,.ov-scores,.ov-foot), .ov-actions]
============================================================ */
html.landscape #overlay .ov-card {
--hero-h: 66px;
--hero-a: 251,191,36; /* hero accent (amber) — win. Flips to red on loss. */
max-width: 600px; width: 100%;
position: relative; /* anchor for the ::before banner backdrop */
display: grid;
grid-template-columns: auto 1fr; /* col1 = icon, col2 = kicker (in the hero) */
grid-template-rows: auto auto auto; /* row1 = hero, row2 = body, row3 = actions */
align-items: center;
column-gap: 0; row-gap: 0; /* NO gap → the two hero cells sit flush, no seam */
padding: 0;
max-height: 96dvh; overflow: hidden;
text-align: left;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(165deg, #1b2348, #0d1326);
}
html.landscape #overlay .ov-card:has(.ov-msg.bad) { --hero-a: 248,113,113; }
/* ---- Hero banner (row 1) ----
ONE continuous strip painted by a ::before pseudo that spans the FULL card width
behind row 1. Both hero cells (icon + kicker) are fully transparent and share the
SAME row background, so there is no seam or dark square between them. The gradient
runs edge-to-edge (no mid-strip fade to the dark card bg — that was the dark bar). */
html.landscape #overlay .ov-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h);
background:
radial-gradient(120% 180% at 8% 0%, rgba(var(--hero-a),.28), transparent 62%),
linear-gradient(90deg, rgba(var(--hero-a),.14), rgba(var(--hero-a),.06));
border-bottom: 1px solid rgba(var(--hero-a),.30);
box-shadow: inset 0 -14px 22px -14px rgba(var(--hero-a),.35);
pointer-events: none; z-index: 0;
}
html.landscape #overlay .ov-emoji,
html.landscape #overlay .ov-card h2 {
grid-row: 1;
position: relative; z-index: 1; /* above the ::before strip */
margin: 0;
min-height: var(--hero-h);
background: transparent; /* strip is drawn by ::before — cells stay clear */
display: flex; align-items: center; /* icon + kicker centred on the same line */
}
html.landscape #overlay .ov-emoji {
grid-column: 1;
padding: 0 14px 0 22px;
font-size: 34px; line-height: 1;
justify-content: center;
color: rgb(var(--hero-a));
filter: drop-shadow(0 0 10px rgba(var(--hero-a),.6));
animation: heroFloat 2.4s ease-in-out infinite;
}
html.landscape #overlay .ov-emoji svg { width: 34px; height: 34px; display: block; }
html.landscape #overlay .ov-card h2 {
grid-column: 2;
padding-right: 22px;
font-size: 15px; font-weight: 800;
letter-spacing: .30em; text-transform: uppercase;
/* Gradient text + glow — the "ROUND OVER" / "GAME OVER" kicker reads as a premium title. */
background: linear-gradient(90deg, #ffffff, rgba(var(--hero-a),1) 130%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-shadow: 0 0 18px rgba(var(--hero-a),.25);
}
/* ---- Body (row 2): 2-column — detail (left) | scores (right) ---- */
html.landscape #overlay #ov-body {
grid-column: 1 / -1; grid-row: 2;
margin: 0;
display: grid; grid-template-columns: 1fr 1fr;
align-items: center; column-gap: 18px;
padding: 14px 22px 4px;
}
/* Headline lives at the top-left of the body, pulled up to feel tied to the banner. */
html.landscape #overlay .ov-msg {
grid-column: 1; margin: 0 0 6px;
font-size: 22px; font-weight: 800; line-height: 1.1;
letter-spacing: -.01em;
text-shadow: 0 0 20px rgba(var(--hero-a),.28);
}
html.landscape #overlay .ov-detail {
grid-column: 1; margin: 0;
font-size: 12.5px; line-height: 1.75; color: #aeb6d6;
}
html.landscape #overlay .ov-detail b { color: #fff; }
html.landscape #overlay .ov-foot {
grid-column: 1; margin: 8px 0 0;
font-size: 11px;
}
/* Score card spans the whole right column, vertically centered. */
html.landscape #overlay .ov-scores {
grid-column: 2; grid-row: 1 / 99;
align-self: center;
padding: 2px 14px;
}
html.landscape #overlay .ov-srow { padding: 8px 0; font-size: 13px; }
html.landscape #overlay .ov-eq .total { font-size: 18px; }
/* ---- Actions (row 3): full-width buttons ---- */
html.landscape #overlay .ov-actions {
grid-column: 1 / -1; grid-row: 3;
padding: 6px 22px 16px;
margin: 0;
}
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Lite mode: keep the layout, drop the idle float. */
.lite html.landscape #overlay .ov-emoji,
html.landscape.lite #overlay .ov-emoji { animation: none; }
/* --- Online quick-chat in landscape --- */
/* FAB: bottom-right, 25px from each edge. */
html.landscape .chat-fab {
right: 25px; bottom: 25px; top: auto;
width: 46px; height: 46px; font-size: 21px;
}
/* Tray: a compact card anchored bottom-right that shows emojis + phrases + input
ALL AT ONCE (no scrolling). Everything shrinks to fit the short landscape
height. Emojis go to a single row, phrases to 2 columns, all tight. */
html.landscape .chat-tray {
left: auto; right: 16px; bottom: 16px;
width: min(420px, calc(100vw - 32px));
padding: 8px 10px;
}
html.landscape .chat-tray-head { margin-bottom: 5px; }
html.landscape .chat-emojis { grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 6px; }
html.landscape .chat-emoji-btn { font-size: 17px; border-radius: 8px; }
html.landscape .chat-phrases { gap: 4px; margin-bottom: 6px; }
html.landscape .chat-phrase-btn { padding: 5px 8px; font-size: 11px; }
/* When the keyboard opens, landscape has almost no room. Collapse the tray to
JUST the input row, pinned right above the keyboard, and hide the emoji/phrase
sections so typing is clean (this was the "looks bad with keyboard" case). */
html.landscape .kb-open .chat-tray {
bottom: calc(6px + var(--kb, 0px));
left: 12px; right: 12px; width: auto;
padding: 6px 8px;
}
html.landscape .kb-open .chat-tray .chat-tray-head,
html.landscape .kb-open .chat-tray .chat-emojis,
html.landscape .kb-open .chat-tray .chat-phrases { display: none; }