. */
.v3-ge__again,
.v3-ge__again:link, .v3-ge__again:visited, .v3-ge__again:hover,
.v3-ge__again:focus, .v3-ge__again:active {
border-color: var(--ge-again-border);
background: var(--ge-again-bg);
color: var(--ge-again-fg);
text-decoration: none;
}
/* ==========================================================================
The finish, narrower than the design.
========================================================================== */
@media (max-width: 1200px) {
.v3-ge { padding-inline: 40px; padding-block: 6vh 14vh; }
.v3-ge__inner { max-width: min(100%, 62cqw); }
.v3-ge__confetti { width: 620px; }
}
@media (max-width: 900px) {
.v3-ge { padding-inline: 20px; padding-block: 3vh 4vh; }
.v3-ge__inner { max-width: min(100%, 78cqw); }
/* Below the design width a share of the viewport stops being readable, so
the type takes a floor and the cup gets out of the way. */
.v3-ge__title { font-size: max(20px, 9.52cqw); }
.v3-ge__verdict { font-size: max(13px, 10cqw); }
.v3-ge__name { font-size: max(11px, 7.5cqw); }
.v3-ge__score { font-size: max(12px, 7.5cqw); }
.v3-ge__cta > * { min-width: 120px; height: max(38px, 8.33cqw); font-size: max(12px, 2.68cqw); }
.v3-ge__cup { width: clamp(110px, 20vw, 200px); }
.v3-ge__confetti { width: 420px; }
}
/* ==========================================================================
THE APP CHROME — Figma 8683:14802 (header) and 8681:14758 (bottom bar).
Portrait, 375 wide. Every isApp screen carries both, which is why they live
here rather than in a page sheet.
THE DEVICE'S STATUS BAR IS NOT DRAWN. Figma's header measures 119 because it
includes the phone's clock, cellular, wifi and battery. What is built is the
72px content row and the wave behind it, and header-wave.svg is cropped to
match.
BUT THE ROW HAS TO START BELOW THE STATUS BAR, and that is not free.
layouts/head.ejs asks for viewport-fit=cover, which tells iOS to lay the page
out edge to edge — under the Dynamic Island at the top and under the home
indicator at the bottom. This block used to assume the webview sat below all
of that and reserved nothing, so on a notched iPhone the top ~54px of the bar
— its content row AND the solid part of its wave — was behind the clock.
env(safe-area-inset-*) is 0 wherever there is no inset, so the calc()s below
change nothing on Android, on desktop, or in a webview that already insets.
They only give back the room the system is actually covering.
========================================================================== */
/* Every app screen's content sits between the two. The room to scroll past
the bar is NOT here any more — .v3-apptabs__gap is, and it comes with the
bar rather than with the page. See the note in layouts/app-tabbar.ejs. */
.v3-apppage {
background: var(--v3-bg-page);
min-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
}
.v3-appbar {
position: relative;
z-index: 21; /* navigation, so the navbar's band */
/* 72 of bar, plus whatever the phone is covering at the top */
height: calc(72px + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
flex: 0 0 auto;
/* WHAT SITS BEHIND THE WAVE, and it must not be the page.
The wave is a curve, so wherever it rides above the bar's full height
there is bar left over with nothing painted on it — and the page's cream
showed through as a band between the orange and the section below. Figma
has no such band: the dark green runs UP behind the bar and the wave is
laid over it.
The colour belongs to the page rather than to the bar, because the next
screen may not be green. Home sets it; anything that does not gets the
page ground, which is at least not a seam. */
background: var(--v3-appbar-behind, var(--v3-bg-page));
}
/* The wave, as a MASK over a flat fill rather than the exported SVG itself:
that export carries its own drop-shadow filter, which rasterises at the
file's size and goes soft the moment it is scaled. Same technique as the
marketing navbar's.
79 tall against the bar's 72, so the trough hangs 7px into whatever follows
— which is the point. The boundary between the orange and the section under
it IS this curve. */
.v3-appbar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: calc(79px + env(safe-area-inset-top, 0px));
background: var(--v3-bg-brand);
pointer-events: none;
/* HOW FAR DOWN THE BAR IS A PLAIN RECTANGLE. Everything above this is full
width with square corners; only the strip below it curves. Raise it for a
shallower wave, lower it for a deeper one — the curve keeps its shape
either way, because it is the same artwork squashed into what is left. */
/* The inset is added to the FLAT part, not shared across the whole shape:
the curve then keeps both its height and its distance below the content
row, and only the square top grows. */
--wave-flat: calc(46px + env(safe-area-inset-top, 0px));
/* AND HOW MUCH WIDER THAN THE SCREEN THE CURVE IS DRAWN.
This is not decoration, it is the reason the corners looked bitten off.
Figma's vector is 395 across on a 375 screen — it hangs 14 off the left
and 6 off the right, so the steep rises at its two ends sit OFF-SCREEN and
what you see is the gentle middle. Stretched to exactly 100% those ends
come into view, and the shape pinches to nothing before it reaches either
edge: at x=0 there was no orange in the column at all.
395/375 = 105.33%. The position keeps the overhang split the way Figma
splits it — 14 of the 20 surplus pixels on the left, which is 66% of it. */
--wave-over: 105.33%;
-webkit-mask-image: linear-gradient(#000, #000), url("/img/v3/app/header-wave.svg");
mask-image: linear-gradient(#000, #000), url("/img/v3/app/header-wave.svg");
-webkit-mask-size: 100% var(--wave-flat), var(--wave-over) calc(79px - var(--wave-flat));
mask-size: 100% var(--wave-flat), var(--wave-over) calc(79px - var(--wave-flat));
-webkit-mask-position: left top, 66% bottom;
mask-position: left top, 66% bottom;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
}
.v3-appbar__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
padding: 0 20px;
}
/* ---- the balance ------------------------------------------------------- */
/* direction: ltr because this is a glyph and a number, and Figma draws the cup
to the LEFT of the count. In an RTL row the first child renders rightmost,
so without this the cup would swap sides with its own figure. */
.v3-appbar__coins {
direction: ltr;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.v3-appbar__coins:link, .v3-appbar__coins:visited,
.v3-appbar__coins:hover, .v3-appbar__coins:focus, .v3-appbar__coins:active {
color: var(--v3-text-inverse);
text-decoration: none;
}
.v3-appbar__cup {
display: block;
width: 24px;
height: 24px;
background: var(--v3-white);
/* The design-system cup, not the header's own export: that export is a
SINGLE path out of a seven-path glyph, so it masked to the trophy's bowl
with no handles and no base. /img/v3/cup.svg is the whole thing and is
already in the tree for the trivia points badge. */
-webkit-mask: url("/img/v3/cup.svg") no-repeat center / contain;
mask: url("/img/v3/cup.svg") no-repeat center / contain;
}
/* وصلها's balance is not the same currency, so it does not wear the same mark.
The hexagon is the game's own symbol everywhere else — the board, the plan
cards' tiles, app/plans.ejs's artwork — and both files are a single filled
path, so they mask to a solid white glyph the same way. */
.v3-appbar__cup--letter {
-webkit-mask-image: url("/img/v3/pricing/hex.svg");
mask-image: url("/img/v3/pricing/hex.svg");
}
/* Figma's Line 61 — a hairline between the cup and the figure, taller than
either of them. A border rather than an element: it has no other job. */
.v3-appbar__count {
padding-inline-start: 8px;
border-inline-start: 1px solid rgba(255, 255, 255, .45);
line-height: 40px;
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: var(--v3-fs-h4);
font-weight: var(--v3-fw-bold);
font-variant-numeric: tabular-nums;
}
/* ---- the logo, and the switcher that usually stands there --------------- */
/* On الحساب there is no per-game data, so the logo stands where the
اللعبة الجماعية | وصلها control sits on the other four screens. */
.v3-appbar__logo {
display: block;
width: auto;
height: 34px;
object-fit: contain;
}
/* ---- اللعبة الجماعية | وصلها, Figma 8683:14971 -------------------------- */
.v3-appswitch {
display: flex;
align-items: stretch;
width: 155px;
height: 35px;
border-radius: 40px;
background: var(--v3-green-050);
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .25);
/* the lit half is a 24-radius pill inside a 40-radius one; this is what
trims its corners back to the outer shape */
overflow: hidden;
}
/* NOT flex: 1 0 0 — the two labels are wildly different lengths (اللعبة
الجماعية against وصلها) and equal halves would clip the long one. A basis of
`auto` starts each half at its own text width and shares only the slack, so
the long label gets the room it needs and the split stays sensible if either
label is ever reworded. */
.v3-appswitch__half {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 6px 8px 8px;
border-radius: 24px;
font-family: var(--v3-font);
font-size: 12px;
font-weight: var(--v3-fw-semibold);
line-height: 1;
text-align: center;
white-space: nowrap;
}
/* the colour in every link state — MDB's a:hover would otherwise win */
.v3-appswitch__half:link, .v3-appswitch__half:visited,
.v3-appswitch__half:hover, .v3-appswitch__half:focus, .v3-appswitch__half:active {
color: var(--v3-orange-600);
text-decoration: none;
}
/* Icons/Green/Primary, which is a third green — not green-800. */
.v3-appswitch__half.is-active,
.v3-appswitch__half.is-active:link, .v3-appswitch__half.is-active:visited,
.v3-appswitch__half.is-active:hover, .v3-appswitch__half.is-active:focus,
.v3-appswitch__half.is-active:active {
position: relative;
background: var(--v3-green-icon);
color: var(--v3-green-050);
}
/* The lit half carries the same gloss arc every solid control in v3 has —
switch-shine.svg, the web switcher's own asset, stretched to the 11x6 the
design draws here. It sits on the half's OUTER corner, which is the right
one when اللعبة الجماعية is lit and the left one when وصلها is, hence two
rules rather than a single `right`. */
.v3-appswitch__half.is-active::after {
content: "";
position: absolute;
top: 4.5px;
width: 11px;
height: 6px;
background: url("/img/v3/switch-shine.svg") no-repeat center / 100% 100%;
pointer-events: none;
}
.v3-appswitch__half.is-active:first-child::after { right: 6.33px; }
.v3-appswitch__half.is-active:last-child::after { left: 6.33px; transform: scaleX(-1); }
/* ---- the avatar -------------------------------------------------------- */
/* MDB's a:hover paints links blue at (0,1,1), which outranks a bare class —
so every v3 anchor states its own colour in every link state. Nothing here
is text, but the rule is about the anchor, not its contents. */
.v3-appbar__avatar:link, .v3-appbar__avatar:visited,
.v3-appbar__avatar:hover, .v3-appbar__avatar:focus, .v3-appbar__avatar:active {
color: var(--v3-text-inverse);
text-decoration: none;
}
.v3-appbar__avatar {
position: relative;
display: block;
width: 48px;
height: 48px;
flex: 0 0 auto;
}
/* The tint is there for PHOTOS — it fills the corners while one loads and
backs anything with transparency in it. */
.v3-appbar__avatar img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background: var(--v3-green-100);
}
/* NOT for the default. The tint is there to sit behind a user's photo while
it loads; the default avatar is an opaque square that would hide it anyway,
and when this was a transparent glyph the tint showed AROUND the figure as
a second disc inside the ring. */
.v3-appbar__avatar--default img { background: none; }
.v3-appbar__dot {
position: absolute;
right: 1px;
bottom: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--v3-success-500);
box-shadow: 0 0 0 2px var(--v3-bg-brand);
}
/* ==========================================================================
The bottom bar.
========================================================================== */
/* 75 of bar plus 20 of air, in normal flow, so the last thing on any app
screen has somewhere to scroll to. Rendered by layouts/app-tabbar beside
the bar itself; nothing else needs to know about it. */
.v3-apptabs__gap {
flex: 0 0 auto;
/* grows with the bar it is standing in for — see the inset note above */
height: calc(95px + env(safe-area-inset-bottom, 0px));
}
.v3-apptabs {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 21;
display: flex;
align-items: stretch;
/* 75 of bar, plus the strip the home indicator sits on. Padding rather than
height alone, so the icons and labels move up out from under it instead of
the bar simply getting taller around them. */
height: calc(75px + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* THE NOTCH, and it is on a PSEUDO-ELEMENT for a reason.
In Figma the bar is a boolean subtract — a rounded rectangle minus a 66px
circle — so it is a shape, not a rectangle with a button parked on it. Mask
it on .v3-apptabs itself, though, and the mask clips the element's CHILDREN
too: the float button sits precisely in the notch, which is the one place the
mask makes transparent, so the button vanished entirely. The background gets
the mask; the contents stay unmasked.
Two mask layers rather than one stretched shape: the exported silhouette is
375 wide, and stretching it to a 430px phone would turn the circular bite
into an ellipse while the button inside it stayed round. So the silhouette is
pinned to the RIGHT at its natural size and a plain gradient fills everything
to its left. The gradient overruns the silhouette's own left corner by 30px
on purpose — mask layers add — and the radius here puts the real corner
back. */
.v3-apptabs::before {
content: "";
position: absolute;
inset: 0;
border-radius: 26px 26px 0 0;
background: var(--v3-green-800);
/* THE NOTCH IS DRAWN, NOT EXPORTED, because it MOVES. Figma's silhouette is
a 375-wide boolean — a rounded rectangle minus a 66px circle — and pinning
it to the right meant the bite was always under الرئيسية. It belongs under
whichever tab is current: the design's plans frame puts it at 50%+77.5,
over الباقات, with the float button and its icon moved to match.
A radial-gradient mask is that same shape and takes the position as a
variable. The rounded corners come from border-radius, so the mask has
only one job: punch a circle of r=33 whose centre sits 1px above the bar's
top edge, which is exactly where Figma's ellipse is. Half a pixel of
feather keeps the rim from aliasing. */
-webkit-mask-image: radial-gradient(circle 33px at var(--notch-x, 90%) -1px, transparent 0 33px, #000 33.5px);
mask-image: radial-gradient(circle 33px at var(--notch-x, 90%) -1px, transparent 0 33px, #000 33.5px);
pointer-events: none;
}
/* THE FIVE LABELS SHARE ONE LINE, so the slot is placed rather than centred.
Every slot in Figma is the same two boxes: a 36x36 icon group at y=7.5 and a
label at y=48.5, 14 tall — الرئيسية included, whose icon group is EMPTY
because the button floats over it. Centring the column instead of pinning it
breaks that in two ways at once: home has only a label in flow, so it floated
to the middle of the bar, and الألعاب's taller icon pushed its label down a
couple of pixels. Both are the same mistake — letting content decide a
position the design fixes.
7.5 + 36 + 5 = 48.5, which is where the label goes. */
.v3-apptabs__item {
position: relative; /* above the masked background */
z-index: 1;
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 5px;
min-width: 0;
padding-top: 7.5px;
text-decoration: none;
}
/* the colour, not only the underline — see the note on the avatar above. The
label sets its own on top of this; what matters is that MDB's blue never
reaches the anchor. */
.v3-apptabs__item:link, .v3-apptabs__item:visited,
.v3-apptabs__item:hover, .v3-apptabs__item:focus, .v3-apptabs__item:active {
color: var(--v3-green-050);
text-decoration: none;
}
/* The box is the design's 36x36 icon GROUP, and `contain` is right because
each SVG *is* that whole group — exported with its invisible Ellipse 13 — with
the real 24x24 glyph sitting in the middle of it. Sizing the mask to 24
instead scales the group down, and the glyph inside it lands at 16: two
thirds, which is exactly how much smaller these read than the design. */
/* THE GLYPH IS A VARIABLE ON THE ITEM, not a rule on its icon, because the
float button needs the same one: whichever tab is current draws its icon
inside the button instead of in its slot. One declaration, two consumers. */
.v3-apptabs__item--account { --tab-icon: url("/img/v3/app/tab-account.svg"); }
.v3-apptabs__item--plans { --tab-icon: url("/img/v3/app/tab-plans.svg"); }
/* Two houses, and they are different drawings: the slot's is an outline in
a 36 group, the button's is the solid one Figma puts inside float-btn. */
.v3-apptabs__item--home { --tab-icon: url("/img/v3/app/tab-home-slot.svg"); }
/* this one's group is 32 rather than 36 (Figma's Group 29), so `contain` on a
36 box would stretch its glyph past 24 — pin it to the size it was drawn at */
.v3-apptabs__item--history {
--tab-icon: url("/img/v3/app/tab-history.svg");
--tab-icon-size: 32px 32px;
}
.v3-apptabs__icon {
display: block;
flex: 0 0 auto;
width: 36px;
height: 36px;
background: var(--v3-green-050);
-webkit-mask: var(--tab-icon) no-repeat center / var(--tab-icon-size, contain);
mask: var(--tab-icon) no-repeat center / var(--tab-icon-size, contain);
}
/* الألعاب is the logo mark, and it is artwork rather than a glyph — a mask
would flatten it to one colour. */
.v3-apptabs__item--games .v3-apptabs__icon {
background: url("/img/v3/app/tab-games.png") no-repeat center / 30.65px 29.74px;
-webkit-mask: none;
mask: none;
}
/* 12 in a 14-tall line box, NOT 14/1 — which is the same 14px box but glyphs
an eighth too big. Figma only gives the box (14), so the size came from
measuring the rendered ink against the design's: every one of the five came
out 1.175x too wide, and 14 / 1.175 is 12. The explicit line-height is what
keeps the box at 14 and the label on its 48.5 line. */
.v3-apptabs__label {
color: var(--v3-green-050);
font-family: var(--v3-font);
font-size: 12px;
font-weight: var(--v3-fw-bold);
line-height: 14px;
white-space: nowrap;
}
.v3-apptabs__item.is-active .v3-apptabs__label { color: var(--v3-orange-500); }
/* ---- the raised button, which is the ACTIVE tab ------------------------ */
/* IT IS NOT HOME'S. It was built as home's because Home was the first screen
drawn, and on that frame the button sits over الرئيسية with the house in it.
The pricing frame settles what it really is: there the button is over
الباقات, carries the ticket, and الرئيسية has gone back to being an ordinary
tab with a house icon. The button is how the bar says "you are here".
So the active item's icon stops being a 36 glyph in the slot and becomes the
56 button over the notch, drawing that item's own --tab-icon inside itself.
The notch follows through the same --notch-x the mask above reads; the view
sets it, because it knows which tab is current. */
.v3-apptabs__item.is-active {
position: static; /* so the button positions on the bar */
padding-top: 48.5px; /* nothing is in flow but the label */
}
.v3-apptabs__item.is-active .v3-apptabs__icon {
position: absolute;
left: var(--notch-x, 90%);
/* 32 clear of the bar's top edge, which is where Figma puts it: the button
is at y=-2 against a bar starting at y=30. At 24 it sat down in the notch
instead of standing out of it.
PLUS THE HOME INDICATOR, and leaving that out is what broke this on every
phone that has one. bottom is measured from the containing block's padding
box, and the bar's padding box runs to the bottom of the SCREEN — it is
75 tall plus the safe-area strip. So a flat 51 put the button 51 above the
screen's edge instead of 51 above the bar's, which on a 34px indicator
dropped it 34px down into the bar, on top of its own label. The notch does
not move with it — the mask measures from the TOP — so the bite and the
button came apart as well.
A phone without one has a 0 inset and lands where it always did. */
bottom: calc(51px + env(safe-area-inset-bottom, 0px)); /* 75 - 56 + 32 */
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--v3-orange-500);
box-shadow: 0 0 10px 0 rgba(242, 122, 61, .85);
-webkit-mask: none;
mask: none;
transform: translateX(-50%);
}
/* The glyph sits inside the button rather than being the button. The inset is
the GROUP's size, not the glyph's: these SVGs are the design's 36x36 icon
group with a 24 glyph in the middle, so a 24 box would scale the group and
land the glyph at 16 — the same two-thirds mistake the slots had. */
.v3-apptabs__item.is-active .v3-apptabs__icon::after {
content: "";
position: absolute;
inset: 10px; /* a 36 group inside the 56 disc */
background: var(--v3-white);
-webkit-mask: var(--tab-icon) no-repeat center / contain;
mask: var(--tab-icon) no-repeat center / contain;
}
/* ألعابي السابقة's group is 32 */
.v3-apptabs__item--history.is-active .v3-apptabs__icon::after { inset: 12px; }
/* and home swaps drawings: the button carries the solid house, at the 30 it is
drawn at inside Figma's float-btn rather than the slot outline's 36 */
.v3-apptabs__item--home.is-active .v3-apptabs__icon::after {
inset: 13px;
-webkit-mask-image: url("/img/v3/app/tab-home.svg");
mask-image: url("/img/v3/app/tab-home.svg");
}
/* and الألعاب's mark is artwork on the button too, so it keeps its picture */
.v3-apptabs__item--games.is-active .v3-apptabs__icon {
background: var(--v3-orange-500);
}
.v3-apptabs__item--games.is-active .v3-apptabs__icon::after {
inset: 13px;
background: url("/img/v3/app/tab-games.png") no-repeat center / 30.65px 29.74px;
-webkit-mask: none;
mask: none;
}
/* A bar with no current tab keeps its rounded top and loses the bite. The
notch exists to make room for the raised button, and a screen that is not a
tab has no button to make room for — تسجيل الدخول showed the hole without
it. See the note in views/v3/layouts/app-tabbar.ejs. */
.v3-apptabs--flat::before {
-webkit-mask-image: none;
mask-image: none;
}
/* ==========================================================================
ARRIVAL — what the payment flow leaves on the URL.
Two small pieces, both built by /js/v3/arrival.js: a line above the balance
cards when a sale has just gone through, and the gateway's own code inside
the failure dialog. Everything else it shows is the ordinary popup.
========================================================================== */
/* Above the two cards in رصيدك, when ?purchase_success= brought you here. It
is the sale being confirmed, so it reads as success rather than as a notice
— and the dialog under it is already answering "what is my balance now". */
.v3-arrival-note {
margin: 0 0 var(--v3-space-5);
padding: var(--v3-space-3) var(--v3-space-4);
border: 1px solid var(--v3-success-500);
border-radius: var(--v3-radius-md);
background: var(--v3-white);
color: var(--v3-success-700);
font-family: var(--v3-font);
font-size: var(--v3-fs-body);
font-weight: var(--v3-fw-medium);
line-height: var(--v3-lh-normal);
text-align: center;
}
/* The gateway's result code and its English description, inside the failure
dialog. LTR because it is neither Arabic nor ours: OPPWA's table supplies
both, and reversing them would make a support call harder, not easier. */
.v3-arrival-code {
display: block;
margin-top: var(--v3-space-4);
padding: var(--v3-space-2) var(--v3-space-3);
border-radius: var(--v3-radius-sm);
background: var(--v3-disabled-bg);
color: var(--v3-neutral-600);
font-size: var(--v3-fs-caption);
font-weight: var(--v3-fw-regular);
line-height: var(--v3-lh-normal);
text-align: center;
}
@media (max-width: 600px) {
.v3-arrival-note { font-size: var(--v3-fs-caption); }
}
/* ==========================================================================
المصادقة الثنائية — the password and code prompts.
These began on the login page, where the second step of signing in asks for
a 2FA code (/js/v3/auth.js). The account page's المصادقة الثنائية flow then
wanted the same field in the same dialog four more times
(/js/v3/my-account-2fa.js), so they moved here from pages/auth.css — two
pages is where a page sheet stops being the right home.
========================================================================== */
/* The dialog body is 24px because it is usually the whole message; here it is
one line of instruction above the thing you actually came to do. */
.v3-2fa .v3-dialog__body {
font-size: var(--v3-fs-body);
color: var(--v3-text-tertiary);
}
.v3-2fa__field {
display: flex;
flex-direction: column;
gap: var(--v3-space-2);
margin-top: var(--v3-space-5);
text-align: right;
}
/* CENTRED AND SPACED, unlike every other .v3-input, which is right-aligned
Arabic. This one holds six digits and nothing else: latin, LTR whatever the
page direction, and tracked out so the count is readable at a glance.
The PASSWORD field beside it deliberately does not carry this class — a
password is not six digits and centring it would be a lie about its shape. */
.v3-2fa__input {
direction: ltr;
font-family: var(--v3-font);
font-size: var(--v3-fs-h4);
font-weight: var(--v3-fw-semibold);
letter-spacing: 0.32em;
text-align: center;
/* the tracking is applied to the right of each glyph, including the last,
so the run sits off-centre by half a space without this */
text-indent: 0.32em;
}
.v3-2fa__input::placeholder {
font-weight: var(--v3-fw-regular);
letter-spacing: 0.32em;
}
.v3-2fa__input:focus-visible {
outline: 2px solid var(--v3-orange-500);
outline-offset: 2px;
}
.v3-2fa__input.is-error,
.v3-2fa__field .v3-input.is-error { border-color: var(--v3-error-500); }
.v3-2fa__error {
margin: 0;
color: var(--v3-error-600);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption);
line-height: var(--v3-lh-normal);
text-align: center;
}
/* ---- the two dialogs on الحساب --------------------------------------- */
/* A footer, which the balance and plans dialogs do not have: both of these end
in an action rather than in their content. */
.v3-modal__foot {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: var(--v3-space-3);
padding: 0 var(--v3-space-7) var(--v3-space-7);
}
/* Same rule as the dialog's own actions row, and for the same reason: sized by
the labels, wrapping rather than clipping when they do not fit. */
.v3-modal__foot > * { flex: 1 1 auto; }
.v3-modal--twofactor .v3-modal__dialog,
.v3-modal--backupcodes .v3-modal__dialog { width: min(520px, 100%); }
.v3-2fa__lead {
margin: 0;
color: var(--v3-text-primary);
font-family: var(--v3-font);
font-size: var(--v3-fs-body);
font-weight: var(--v3-fw-medium);
line-height: var(--v3-lh-normal);
text-align: center;
}
/* THREE STEPS, NOT THREE CARDS. v2 lays them out as a Bootstrap row of equal
cards, which on a phone stacks into three tall boxes with one sentence in
each. A numbered list says the same thing and says that the order matters. */
.v3-2fa__steps {
display: flex;
flex-direction: column;
gap: var(--v3-space-4);
margin: 0;
padding: 0;
list-style: none;
}
.v3-2fa__step {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--v3-space-3);
}
.v3-2fa__step-n {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--v3-bg-green);
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption);
font-weight: var(--v3-fw-semibold);
line-height: 1;
}
.v3-2fa__step-text {
color: var(--v3-text-primary);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption);
line-height: var(--v3-lh-normal);
}
/* The QR spans both columns under its own step, so it lines up with the text
rather than squeezing into the number's column. */
.v3-2fa__step--qr { grid-template-areas: "n t" ". q"; }
.v3-2fa__step--qr .v3-2fa__step-n { grid-area: n; }
.v3-2fa__step--qr .v3-2fa__step-text { grid-area: t; }
.v3-2fa__qr {
grid-area: q;
display: block;
width: 160px;
height: 160px;
margin-top: var(--v3-space-3);
border-radius: var(--v3-radius-md);
background: var(--v3-white);
}
.v3-2fa__entry {
display: flex;
flex-direction: column;
gap: var(--v3-space-2);
}
/* The warning above the codes. Not .v3-dialog__note: that one is the block
popup's orange strip, and this is an error the way v2 had it. */
.v3-2fa__warn {
display: flex;
align-items: flex-start;
gap: var(--v3-space-2);
margin: 0;
padding: var(--v3-space-3) var(--v3-space-4);
border: 1px solid var(--v3-error-500);
border-radius: var(--v3-radius-md);
background: var(--v3-bg-error);
color: var(--v3-error-700);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption);
line-height: var(--v3-lh-normal);
}
.v3-2fa__warn i {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 2px;
background: var(--v3-error-700);
-webkit-mask: url("/img/v3/game/alert.svg") no-repeat center / contain;
mask: url("/img/v3/game/alert.svg") no-repeat center / contain;
}
/* Two columns of codes, which is what v2 has and what ten of them want. */
.v3-2fa__codes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--v3-space-3);
}
/* A code is a value to copy, so it is monospaced, LTR and selectable — and it
is NOT an input, which is what v2 makes it. There is nothing to type. */
.v3-2fa__code {
direction: ltr;
padding: 12px var(--v3-space-3);
border: 1px solid var(--v3-border-green-off);
border-radius: var(--v3-radius-md);
background: var(--v3-bg-page);
color: var(--v3-text-primary);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--v3-fs-body);
letter-spacing: 0.08em;
text-align: center;
-webkit-user-select: all; /* Safari, iOS Safari */
user-select: all;
}
/* A spent code, struck through. The colour alone would not carry it. */
.v3-2fa__code.is-used {
border-color: var(--v3-disabled-border);
background: var(--v3-disabled-bg);
color: var(--v3-disabled-fg);
text-decoration: line-through;
}
@media (max-width: 600px) {
.v3-modal__foot { padding: 0 var(--v3-space-5) var(--v3-space-5); }
.v3-2fa__qr { width: 140px; height: 140px; }
.v3-2fa__codes { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
"ضع هاتفك في الوضع الأفقي" — Figma 7227:12061.
The two boards are landscape-only, so this is what a phone held upright
gets. It is the badged-dialog shape the rest of v3 uses — a circle
overhanging the panel's top edge, then title, picture, message, action —
but DARK: it sits over a board, not over the page ground.
MDB SHOWS AND HIDES IT, unchanged; see the note in the partial. So the
rules below have to beat MDB's own .modal-content, which is white with a
border and a radius of its own — hence the doubled class on the panel.
========================================================================== */
.v3-pw .modal-dialog {
/* 282 at 375, which is the frame the design is drawn on. */
width: min(282px, calc(100% - 32px));
max-width: none;
margin: 0 auto;
}
.v3-pw__panel {
/* POINTER EVENTS BACK ON, and this is the cost of dropping .modal-content.
Bootstrap puts `pointer-events: none` on .modal-dialog so a click on the
sheet around the panel reaches the backdrop, and restores `auto` on
.modal-content. Removing that class to escape overwrites.css's
`background !important` took the restore with it, and the whole dialog
went click-through — it looked perfect and خروج did nothing.
One class was carrying two unrelated jobs; only one of them was the one
being removed. */
pointer-events: auto;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* 40 top / 20 bottom / 45 each side — 7227:12062 inside a 282 x 226 panel */
padding: 40px 45px 20px;
border: 0;
border-radius: var(--v3-radius-lg);
background: var(--v3-bg-green);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .35);
/* the badge hangs over the top edge */
overflow: visible;
color: var(--v3-text-inverse);
text-align: center;
}
/* 54 square at y=-27: exactly half of it outside, unlike .v3-dialog__badge,
which Figma hangs by a different fraction. */
.v3-pw__badge {
position: absolute;
top: -27px;
left: 50%;
transform: translateX(-50%);
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--v3-orange-500);
}
.v3-pw__badge::before {
content: "";
width: 24px;
height: 24px;
background: var(--v3-text-inverse);
-webkit-mask: url("/img/v3/game/alert.svg") no-repeat center / contain;
mask: url("/img/v3/game/alert.svg") no-repeat center / contain;
}
.v3-pw__title {
margin: 0;
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: var(--v3-fs-h5); /* 20 in a 24 box */
font-weight: var(--v3-fw-bold);
line-height: var(--v3-lh-auto);
}
/* ---- the picture ------------------------------------------------------- */
.v3-pw__rotate {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
margin-top: 14px; /* 38 - 24 */
height: 48px;
}
.v3-pw__plate {
display: grid;
place-items: center;
width: 97px;
height: 48px;
flex: 0 0 auto;
border-radius: var(--v3-radius-md);
background: var(--v3-bg-page);
}
.v3-pw__plate::before {
content: "";
width: 24px;
height: 24px;
background: var(--v3-green-900);
-webkit-mask: url("/img/v3/game/rotate-phone.svg") no-repeat center / contain;
mask: url("/img/v3/game/rotate-phone.svg") no-repeat center / contain;
}
/* One asset, ROTATED — the pair is the same arc turned about the phone, not a
reflection of it. Mirroring put both heads at the same end and the two read as
brackets around the phone; turning one through half a circle puts the left
head at the top and the right head at the bottom, which is what makes them a
rotation.
Taller and narrower than before, because the arc itself now is: 26x46 against
the asset's own 32x48 leaves the stroke room without letterboxing it. */
.v3-pw__arrow {
width: 26px;
height: 46px;
flex: 0 0 auto;
background: var(--v3-green-050);
-webkit-mask: url("/img/v3/game/rotate-arrow.svg") no-repeat center / contain;
mask: url("/img/v3/game/rotate-arrow.svg") no-repeat center / contain;
}
/* RTL renders the first child rightmost, so --start is the RIGHT-hand arrow and
--end the left. The asset is drawn as the LEFT one — bulging left, head at the
top — so the left keeps it untouched and the right is that same shape turned
through half a circle. No vertical offsets: the design sits the two level. */
.v3-pw__arrow--start { transform: rotate(180deg); }
.v3-pw__message {
margin: 14px 0 0; /* 100 - 86 */
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption); /* 14 in a 16 box */
font-weight: var(--v3-fw-medium);
line-height: var(--v3-lh-auto);
}
/* ---- the way on, and the way out --------------------------------------- */
.v3-pw__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
margin-top: 14px; /* 130 - 116 */
}
/* The design's button says حسنًا; this one says خروج and goes to "/" — see
the note in the partial. It is a link rather than a button because it
navigates, and .v3-btn styles either. */
.v3-pw__leave { width: 100%; }
.v3-pw__leave:link, .v3-pw__leave:visited,
.v3-pw__leave:hover, .v3-pw__leave:focus, .v3-pw__leave:active {
color: var(--v3-text-inverse);
text-decoration: none;
}
/* ==========================================================================
The sponsor strip — Figma 11143:13021 (trivia) / 8672:16648 (وصلها)
The same pill on both boards: a dark teal bar carrying "برعاية" and the
sponsor's logo, sized to the column it sits in. Figma draws it with the
button's two shine leaves, so it is built from the same parts as .v3-btn —
but it is a , not a button, with no hover, no pointer and nothing to
focus. §7.5 asks for an ad that cannot be mistaken for a control; the shape
is the design's, the inertness is the rule's.
EVERYTHING SCALES FROM ONE NUMBER. --sponsor-h is set per surface and the
type, the padding, the gap and the shine are all fractions of it, because the
two boards size their columns completely differently — the trivia rail is a
container query, وصلها's board column is not — and duplicating six values
across both was six chances to have them disagree.
#13585a is the sponsor's own teal, not one of ours: it is the ground their
logo was designed against, and none of the v3 greens is close enough to
borrow without dulling the mark.
========================================================================== */
.v3-sponsor {
--sponsor-h: 56px; /* every surface overrides this */
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: .6em;
width: 100%;
height: var(--sponsor-h);
padding-inline: 1.2em;
/* A ROUNDED RECTANGLE, not the pill this used to draw. 15.2 of the 74 the
dock pill is drawn at, read off 9422:33303's corner: the arc meets the
straight edge 15 in, where a pill's would meet it at 37. */
border-radius: calc(var(--sponsor-h) * .205);
background: #13585a;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .18);
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: calc(var(--sponsor-h) * .3);
font-weight: var(--v3-fw-bold);
line-height: var(--v3-lh-auto);
white-space: nowrap;
overflow: hidden;
/* it is a picture of a sponsor, not something to drag, select or press */
cursor: default;
-webkit-user-select: none; /* Safari, iOS Safari */
user-select: none;
}
/* 92%, not 100%: the export already carries its own margin inside the 65x36
box, and filling the pill edge to edge crowds the shine. */
.v3-sponsor__logo {
display: block;
width: auto;
height: 92%;
}
/* The same two leaves .v3-btn wears — same art, and the same asymmetry, one
long arc and one short — but at THE SPONSOR'S OWN numbers, not the button's.
Taking the button's fractions drew them at roughly twice the size: 39.7 x
31.8 where 9422:33303 draws 18.5 x 10.09, which is what turned a fine
highlight into a grey smear across the corner.
Every number below is that node's, over the 74 it is drawn at. The SVGs
carry preserveAspectRatio="none", so giving them the drawn box gives the
drawn shape — the right-hand arc is flatter here than on a button, and that
is the design, not a stretch. */
.v3-sponsor::before,
.v3-sponsor::after {
content: "";
position: absolute;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.v3-sponsor::after {
top: calc(var(--sponsor-h) * .1364); /* 10.09 */
right: calc(var(--sponsor-h) * .2104); /* 201.57 - (167.5 + 18.5) */
width: calc(var(--sponsor-h) * .25); /* 18.5 */
height: calc(var(--sponsor-h) * .1364); /* 10.09 */
background-image: url("/img/v3/btn-shine-right.svg");
}
/* MIRRORED, like .v3-btn::before is. btn-shine-left.svg is the same leaf as the
right one drawn small, and the button flips it — without the flip it curves
the wrong way and the two ends of the pill do not read as one highlight.
Copying the geometry and not the transform is exactly what went wrong here.
It also sits FURTHER IN than the right one — 24 from the edge against 15.6 —
which is the design's asymmetry and not a mistake in it. */
.v3-sponsor::before {
top: calc(var(--sponsor-h) * .1352); /* 10.005 */
left: calc(var(--sponsor-h) * .3243); /* 23.996 */
width: calc(var(--sponsor-h) * .1258); /* 9.310 */
height: calc(var(--sponsor-h) * .0921); /* 6.814 */
background-image: url("/img/v3/btn-shine-left.svg");
transform: scaleX(-1);
}
/* ==========================================================================
"فئات جديدة" — the latest-categories pop-up
v2 laid this out as two halves: copy and a CTA on one side, the six cards on
the other, wrapping to three-per-row on desktop and turning into a horizontal
swipe on a phone. The v3 dialog already owns its head and foot, so the copy
goes under the title and the CTA into the footer slot, and the body is just
the cards — which leaves them the full width to be legible in.
The phone treatment is v2's and is kept: the grid becomes one scrolling row
rather than a tall column, so the dialog never grows past the screen and the
cards stay big enough to recognise.
========================================================================== */
.v3-modal--latest .v3-modal__dialog { width: min(760px, 100%); }
.v3-latest__lead {
margin: 0 0 var(--v3-space-5);
color: var(--v3-text-secondary);
font-family: var(--v3-font);
font-size: var(--v3-fs-body);
font-weight: var(--v3-fw-medium);
line-height: 1.7;
text-align: center;
}
.v3-latest__grid {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--v3-space-5);
margin: 0;
padding: 0;
list-style: none;
}
.v3-latest__card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border-radius: 16px;
background: var(--v3-bg-surface);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
overflow: hidden;
text-decoration: none;
transition: transform 160ms ease, box-shadow 160ms ease;
}
/* MDB's a:hover is (0,1,1) and a bare class is (0,1,0), so an anchor that
names no colour of its own goes blue the moment you point at it. Saying it
on the states is the guard — scripts/v3-audit.js check 1 is what caught
this card without one. */
.v3-latest__card:link,
.v3-latest__card:visited,
.v3-latest__card:hover,
.v3-latest__card:focus,
.v3-latest__card:active { color: var(--v3-green-900); }
.v3-latest__card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .14);
}
/* The image is the card's whole top; the name sits on an opaque strip under it,
which is how .v3-sg__card does it on /start-game — a name over artwork needs
a scrim, and a name under it needs nothing. */
.v3-latest__media {
position: relative;
display: block;
width: 100%;
min-height: 0;
aspect-ratio: 220 / 253.5;
background: var(--v3-green-100);
}
.v3-latest__img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.v3-latest__badge {
position: absolute;
inset-block-start: 6px;
inset-inline-end: 6px;
z-index: 2;
padding: 3px 10px;
border-radius: var(--v3-radius-pill);
background: var(--v3-green-800);
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption);
font-weight: var(--v3-fw-bold);
line-height: var(--v3-lh-auto);
}
/* مجددة is the rarer, more interesting state — an established category that has
just grown — so it takes the brand orange and جديدة stays green. */
.v3-latest__badge--renewed { background: var(--v3-orange-500); }
.v3-latest__subtitle {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 2;
padding: 4px 12px;
background: var(--v3-bg-brand);
color: var(--v3-text-inverse);
font-family: var(--v3-font);
font-size: var(--v3-fs-caption);
font-weight: var(--v3-fw-semibold);
line-height: var(--v3-lh-auto);
text-align: center;
}
.v3-latest__name {
display: grid;
place-items: center;
flex: 1 0 auto;
min-height: 56px;
padding: 8px 14px;
color: var(--v3-green-900);
font-family: var(--v3-font);
font-size: var(--v3-fs-title);
font-weight: var(--v3-fw-bold);
line-height: var(--v3-lh-auto);
text-align: center;
}
@media (max-width: 900px) {
.v3-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 960px) {
.v3-modal--latest .v3-modal__body { gap: var(--v3-space-4); padding: var(--v3-space-6); }
.v3-modal--latest .v3-modal__foot { padding: 0 var(--v3-space-6) var(--v3-space-6); }
.v3-latest__lead { margin-bottom: var(--v3-space-4); }
.v3-latest__grid { gap: var(--v3-space-4); }
.v3-latest__media { aspect-ratio: 1 / 1; }
.v3-latest__name { min-height: 46px; font-size: var(--v3-fs-body); }
}
/* v2's phone answer: one scrolling row rather than a six-card column, so the
dialog stays inside the screen and the cards keep their size.
THE SECOND QUERY IS LANDSCAPE. A phone turned sideways is 844 wide and 390
tall, so the width queries above all miss it and it gets the desktop grid
in 390px of height. Short is the same problem narrow is — there is no room
for two rows — and it has the same answer, so the row treatment is keyed on
either. 620 clears a landscape phone and stays under the shortest laptop
the height query above already handles. */
@media (max-width: 600px), (max-height: 620px) {
.v3-latest__grid {
display: flex;
gap: var(--v3-space-4);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.v3-latest__grid::-webkit-scrollbar { display: none; }
.v3-latest__item { flex: 0 0 auto; width: 148px; }
.v3-latest__name { min-height: 44px; font-size: var(--v3-fs-body); }
}
@media (max-height: 620px) {
.v3-latest__item { width: 128px; }
.v3-latest__name { min-height: 38px; }
}
/* ==========================================================================
The announcement pop-up — تحداني × بيڤو
THE ONE DIALOG THAT DOES NOT WEAR THE HOUSE CHROME. Every other v3 modal is
a green bar over a cream body, which is the system talking. This one is the
partner talking, so it takes their surface: #13585a is the teal bivo.svg is
drawn for — the same ground the in-game sponsor pill uses — and #88e8e8 is
the mark's own colour, sampled from the export rather than guessed.
Everything here is scoped under .v3-modal--announce, so the component is
untouched and the campaign can be deleted in one piece.
========================================================================== */
.v3-modal--announce {
--ann-ground: #13585a; /* the teal the mark is drawn for */
--ann-deep: #0d3f41; /* the same, further back */
--ann-mark: #88e8e8; /* sampled from bivo.svg */
}
/* Narrower than the shared 1040: a mark and two short lines do not want a
1040 dialog, and the copy reads badly at that measure. */
.v3-modal--announce .v3-modal__dialog {
width: min(480px, 100%);
/* One surface, lit from behind the mark. The gradient is what stops a flat
dark card reading as a slab — the light sits where the logo does. */
background:
radial-gradient(120% 90% at 50% 8%, rgba(136, 232, 232, .16) 0%, rgba(136, 232, 232, 0) 60%),
linear-gradient(180deg, var(--ann-ground) 0%, var(--ann-deep) 100%);
box-shadow: 0 24px 60px 0 rgba(4, 40, 42, .45);
}
/* THE BAR GOES. It is a band of a different green across the top of a teal
card — the one thing that would still look borrowed. The head keeps its
height so the close button lands where it always does. */
.v3-modal--announce .v3-modal__head {
background: none;
padding-inline: var(--v3-space-6);
}
.v3-modal--announce .v3-modal__title {
color: var(--v3-white);
font-weight: var(--v3-fw-bold);
}
/* تحداني's mark, beside a title that names both. */
.v3-modal--announce .v3-modal__head-icon { background: var(--v3-white); }
/* A cream disc is a hole punched in a dark card. Glass instead, and the × in
the mark's colour so the two ends of the dialog agree. */
.v3-modal--announce .v3-modal__close {
background: rgba(255, 255, 255, .12);
}
.v3-modal--announce .v3-modal__close::before { background: var(--ann-mark); }
.v3-modal--announce .v3-modal__close:hover { background: rgba(255, 255, 255, .22); }
.v3-modal--announce .v3-modal__body {
align-items: center;
gap: 0;
padding-top: var(--v3-space-3);
}
/* NO PLATE ANY MORE. The card is already the ground the mark wants, so the
logo sits straight on it — which is the whole reason this dialog changed
colour rather than gaining a coloured panel inside a cream one. */
.v3-announce__logo {
display: block;
width: min(208px, 62%);
height: auto;
margin: var(--v3-space-4) 0 var(--v3-space-6);
}
.v3-announce__lead {
margin: 0;
color: var(--v3-white);
font-family: var(--v3-font);
font-size: var(--v3-fs-h5);
font-weight: var(--v3-fw-bold);
line-height: 1.6;
text-align: center;
}
.v3-announce__text {
margin: var(--v3-space-3) 0 0;
/* The mark's colour at a quarter strength — a tint of the same light rather
than a second colour. */
color: rgba(224, 250, 250, .78);
font-family: var(--v3-font);
font-size: var(--v3-fs-body);
font-weight: var(--v3-fw-medium);
line-height: 1.75;
text-align: center;
}
/* THE ACTION IS THE MARK'S OWN COLOUR, which is the loudest thing on a dark
card and the only place the brand orange would have fought the teal. */
.v3-modal--announce .v3-modal__foot .v3-btn {
background: var(--ann-mark);
color: #0b3739;
font-weight: var(--v3-fw-bold);
box-shadow: 0 10px 24px 0 rgba(136, 232, 232, .22);
}
.v3-modal--announce .v3-modal__foot .v3-btn:hover {
background: #9ff2f2;
color: #0b3739;
}
/* .v3-btn's two shine leaves are cream at 70%, which on #88e8e8 is a smudge
rather than a highlight — the button is lighter than the shine. */
.v3-modal--announce .v3-modal__foot .v3-btn::before,
.v3-modal--announce .v3-modal__foot .v3-btn::after { display: none; }
@media (max-height: 620px) {
.v3-announce__logo { width: min(160px, 48%); margin-block: var(--v3-space-2) var(--v3-space-4); }
.v3-announce__lead { font-size: var(--v3-fs-body); }
.v3-announce__text { font-size: var(--v3-fs-caption); }
}