/* =========================================================
Tarneeb — Card Platform
Rich dark charcoal & gold casino palette
========================================================= */
:root {
/* =========================================================
"Kufi Noir" — pure black ground, ONE saffron accent.
Token NAMES are kept stable so existing rules re-skin in
place; only the VALUES change from the old charcoal+gold.
---- 2026-08 theme unification ----
The values below now mirror design-tokens.css, so the game table adopts
the same palette as every rebuilt screen without a single geometry rule
changing. That is the whole point of this seam: the file was written so
names stay stable and only values move, which means the card proportions
measured against Jawaker (21.5vw hand / 15.3vw table, aspect 1.4) cannot
be affected by a re-skin.
Where a name does NOT collide with a design token, this consumes the token
via var() so the table follows the theme. Where it DOES collide (--ink,
--red, --green exist in both files) the literal value is written instead —
`--ink: var(--ink)` is a cycle and silently invalidates the property.
========================================================= */
/* Surfaces */
--navy: var(--surf); /* surface: panels, felt, tray */
--navy-deep: var(--bg); /* the black ground */
--navy-soft: var(--surf2); /* raised surface */
--blue: var(--surf);
--blue-soft: var(--line2);
--blue-dark: var(--surf2);
/* Neutral "slate" family (was bronze) → greys + accent */
--slate: #8e867b;
--slate-soft: #a09689;
--slate-dark: #6b6459;
--slate-deep: var(--gold); /* accent */
/* Ink / paper — the card face, which is the one light surface on the table */
--cream: #efe9dc;
--cream-soft: var(--card);
--cream-dark: var(--card-line);
/* Accent — the design-token gold is THE only accent colour */
--orange: var(--gold);
--orange-soft: var(--gold-hi);
--orange-dark: var(--gold-dim);
/* Legacy aliases → gold / neutral (never bronze or lime) */
--yellow: var(--gold);
--yellow-soft: var(--gold-hi);
--yellow-dark: var(--gold-dim);
--lime: #8e867b;
--lime-soft: #a09689;
--lime-dark: #6b6459;
--sage: #8e867b;
--sage-soft: #a09689;
--sage-dark: #6b6459;
--sage-deep: var(--gold);
--sage-accent: var(--gold);
/* Flat backgrounds (no gradient) */
--bg-grad-1: var(--bg);
--bg-grad-2: var(--bg);
--bg-grad-3: var(--surf);
--panel: var(--surf);
--panel-2: var(--surf2);
--panel-3: var(--bg);
/* Solid hairline borders */
--border: var(--line2);
--border-soft: var(--line);
--border-lit: var(--gold-dim);
/* Literal, not var(): these three names exist in design-tokens.css too, and
a self-reference is a cycle that silently drops the declaration. Values
mirror the tokens. */
--ink: #efe9dc;
--ink-soft: #a09689;
/* Muted helper text kept at the AA-safe end of the token ramp — the
design's lighter grey fails contrast on these dark surfaces. */
--ink-mute: #8e867b;
--ink-inverse: #0d0c0b;
--accent: var(--orange);
--accent-dark: var(--orange-dark);
--highlight: var(--orange);
--red: #E0472F; /* danger + red suits */
--red-soft: #F0684F;
--green: #3FAE6E;
/* Team identity — used ONLY as thin underlines/bars, never large fills */
--team-blue: #4A7DD6;
--team-green: #3FAE6E;
--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.45);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
/* Kufi Noir is sharp — no radius (playing cards get their own 6px) */
--radius-sm: 0px;
--radius: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
/* Size of the circular seat avatars. Referenced by .seat .avatar and
by .table-panel so the panel width can leave clearance from the
W/E avatars on every breakpoint. Each responsive media-query rule
(bottom of this file) updates this token; the avatar rules and
panel width calc consume it. */
--seat-avatar-size: 80px;
/* Height reserved for the bottom .round-status pill so floating UI
(toasts, etc.) can anchor above it instead of overlapping. */
--status-bar-height: 48px;
--z-toast: 1100;
}
* { box-sizing: border-box; }
/* =========================================================
Kufi Noir — foundation add-ons (narrator, identity, seats).
Placed early; overrides use !important to win the cascade.
========================================================= */
/* Persistent narrator banner over the felt (the #1 clarity element). */
.narrator {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 4px 0 6px; padding: 0 12px;
background: var(--accent); color: #111111;
font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
font-size: 12.5px; line-height: 1.15;
/* FIXED single-line height so the banner never changes size and reflows the
table below it. Full width (see .ga-narrator grid-column) keeps the status
text on one line, so a short 34px bar is enough — no two-line wrapping. */
height: 34px; min-height: 34px; max-height: 34px; overflow: hidden;
box-shadow: 4px 4px 0 #1D1D1D;
}
.narrator-text { flex: 0 1 auto; min-width: 0; line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.narrator[hidden] { display: none !important; }
.narrator-wait { background: var(--panel); color: var(--ink); box-shadow: 4px 4px 0 #0A0A0A; }
.narrator-timer {
flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
background: #111111; color: var(--accent);
font-size: 13px; font-weight: 800;
}
.narrator-text { flex: 1 1 auto; }
/* "YOU — TEAM BLUE" identity row above the hand. */
.you-identity {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 3px 0 5px;
}
.you-identity[hidden] { display: none !important; }
.you-identity .yi-you { font-weight: 800; letter-spacing: 2px; font-size: 11px; color: var(--accent); }
.you-identity .yi-team { font-weight: 800; letter-spacing: 2px; font-size: 11px; padding: 1px 6px; }
.you-identity.team-0 .yi-team { color: var(--team-blue); box-shadow: inset 0 -3px 0 var(--team-blue); }
.you-identity.team-1 .yi-team { color: var(--team-green); box-shadow: inset 0 -3px 0 var(--team-green); }
/* Saffron ring on the active seat; explicit PARTNER label on the partner. */
.seat.turn { box-shadow: 0 0 0 3px var(--accent) !important; }
.seat.partner { position: relative; }
.seat.partner::after {
content: "PARTNER";
position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
font-size: 8px; font-weight: 800; letter-spacing: 2px;
padding: 1px 5px; background: var(--panel-2); white-space: nowrap; z-index: 4;
}
.seat.partner.team-0::after { color: var(--team-blue); box-shadow: inset 0 0 0 1px var(--team-blue); }
.seat.partner.team-1::after { color: var(--team-green); box-shadow: inset 0 0 0 1px var(--team-green); }
/* Kufi Noir: square avatar tiles (no circles). */
.seat .avatar, .seat .avatar img { border-radius: 0 !important; }
/* The felt is a BOUNDED, INSET SURFACE in Claude Design's dark green.
Decision 3 on the gameplay prototype: "A = inset felt, C = full-bleed felt,
B = no surface at all." Composition A is the reference logic — the seats
straddle the surface edge and the trick sits tight in the middle.
design-tokens.css has carried --felt (#123024) and --felt-gradient since the
handoff landed; these rules used to bury both under a flat #1D1D1D with
!important, so the tokens were never once referenced and the table read as an
unbounded black void. Radius 0, per the Kufi Noir rule. */
:root {
--felt-line: #2f5c45;
--felt-shadow:
inset 0 1px 0 rgba(232, 200, 116, 0.20),
inset 0 0 0 4px rgba(0, 0, 0, 0.28),
inset 0 -30px 50px rgba(0, 0, 0, 0.45),
0 14px 34px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] {
--felt-line: #3f7d59;
--felt-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.13),
inset 0 0 0 4px rgba(0, 0, 0, 0.10),
inset 0 -32px 52px rgba(0, 0, 0, 0.26),
0 12px 30px rgba(46, 70, 52, 0.26);
}
/* C2 Play. The sub line under "Find me a table" is the promise the button was
missing, and FULL is a STATE — a full table has no action, so it gets a tag
rather than a button that could only fail. */
.play-sub {
font: 400 12px/1.45 var(--font-ui);
color: var(--ink-mute);
text-align: center;
margin: -2px 0 10px;
}
.qj-eta { font-weight: 400; opacity: 0.8; margin-inline-start: 8px; }
.room-full-tag {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap);
padding: 0 14px;
font: 800 11px/1 var(--font-ui);
letter-spacing: 0.14em;
color: var(--ink-mute);
background: var(--surf2, #26262c);
border: 1px solid var(--line2, #2a2a30);
}
/* Toasts. Decision 7: "Its own lane on the table's bottom edge. It can never
cover the card you just played."
Outside a game they stay top-centre, which is right for a page. INSIDE a game
the lane moves to the bottom edge of the felt: the trick sits in the middle,
so a centred overlay is exactly where the card you just played lands. It was
also free-floating mid-right and clipping off the screen edge — hence the
explicit left/right bounds and the ellipsis. */
/* `.toast-host` is GONE, along with the second toast system that owned it.
It was top-anchored at 72px on every non-game page, which is the opposite of
what the handoff specifies ("One anchor — bottom, above the tab bar"), and it
painted its own hex palette and 10px corners outside the design system.
showToast() now adapts onto T.toast, and the in-game lane offset that used to
live here moved to `body.in-game #t-toasts` in components.css, next to the
component it belongs to. */
/* tokens.json: "radius.all: 0 — no rounded corners anywhere; circles only for
presence dots and frame artwork". The RADIUS TOKENS are already 0px
(--radius, --radius-sm/lg/xl); the violations are hardcoded literals that
bypass them. These are the ones visible during play — the trick zone was
18px, the table panels 14px and the last-trick tray a 999px pill, sitting
inside a felt this pass just squared off.
NOTE: styles.css still carries ~90 more hardcoded non-zero radii elsewhere.
A full sweep is its own task; blanket-forcing every element would also square
the presence dots and avatar-frame artwork, which are the documented
exceptions. */
#view-room .trick,
#view-room .table-panel,
#view-room .last-trick-tray,
#view-room .last-trick-mini,
#last-trick-mini,
#view-room .pass-btn,
#view-room .weak-suit-btn,
#view-room .cut-top,
#view-room .cut-bottom { border-radius: 0 !important; }
#view-room .felt-wrap { background: transparent; position: relative; }
/* Journey seat tiles (kn-seats, journey.html). The turn cue is the prototype's
own breathing ring — knRing 1600ms, verbatim keyframes. While the journey
tiles are mounted the legacy seat rectangles hide: two seat systems on one
felt is the two-toast-systems trap (#36) wearing a new hat. */
@keyframes knRing{0%,100%{box-shadow:0 0 0 2px var(--gold),0 0 12px rgba(201,162,74,.30)}50%{box-shadow:0 0 0 3px var(--gold-hi),0 0 22px rgba(201,162,74,.55)}}
/* Waiting room + partner sheet, verbatim from the prototype. */
@keyframes knSheet{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
@keyframes knMeter{from{width:0}}
/* Round summary's draining bar (prototype line 32). It is not decoration: its
length IS the remaining time, so the animation duration and the dismiss
timeout are the same number or the bar lies about how long you have. */
@keyframes knDrain{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes knDot{from{transform:scale(.3);opacity:0}}
/* The deck ceremony, verbatim. Riffle throws cards left and right; the cut
lifts a band clear and sets it back down. */
@keyframes knRiffL{0%{transform:translate(0,0) rotate(0)}22%{transform:translate(-44px,-7px) rotate(-8deg)}52%{transform:translate(-15px,-2px) rotate(-3deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes knRiffR{0%{transform:translate(0,0) rotate(0)}22%{transform:translate(44px,7px) rotate(8deg)}52%{transform:translate(15px,2px) rotate(3deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes knCutLift{0%{transform:translate(0,0) rotate(0)}26%{transform:translate(66px,-32px) rotate(6deg)}60%{transform:translate(66px,16px) rotate(2deg)}100%{transform:translate(0,28px) rotate(0)}}
@keyframes knCutStay{0%{transform:translate(0,0)}30%{transform:translate(0,7px)}100%{transform:translate(0,-15px)}}
/* While the designer's waiting room owns the screen, the legacy in-flow game
chrome behind it stays down — same one-system-per-surface rule as the seat
tiles (trap 36). The overlay is inside #view-room, so it inherits nothing. */
body.kn-waiting-live .ga-narrator,
body.kn-waiting-live #seat-panel { display: none !important; }
body.kn-seats-live .seat-slot, body.kn-seats-live #seat-south { display: none !important; }
#view-room .felt {
/* Inset from the felt cell on all four sides — the prototype's 11% / 14% /
16%, expressed as margins so the seats can still overlay the cell and sit
ON the edge rather than outside it. */
background: var(--felt-gradient) !important;
border: 1px solid var(--felt-line) !important;
border-radius: 0 !important;
box-shadow: var(--felt-shadow) !important;
margin: 4% 6% 6%;
}
.sp-felt { background: var(--felt-gradient); border: 1px solid var(--felt-line); border-radius: 0; }
/* Kufi Noir: flat saffron primary buttons with an offset block shadow. */
.primary, button.primary, a.primary, .gold, button.gold {
background: var(--accent) !important;
background-image: none !important;
color: #111111 !important;
border: none !important;
border-radius: 0 !important;
font-weight: 800 !important;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 4px 4px 0 #1D1D1D !important;
text-shadow: none !important;
}
.primary:hover, button.primary:hover, a.primary:hover, .gold:hover { filter: brightness(1.06); }
.primary:active:not(:disabled), button.primary:active:not(:disabled),
a.primary:active, .gold:active:not(:disabled) {
transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0 #1D1D1D !important;
}
.primary:disabled, button.primary:disabled, .gold:disabled {
background: #161616 !important; color: #777777 !important; box-shadow: none !important;
}
/* Kufi Noir: playable hand cards get a saffron ring. NO resting lift — a
translateY here made cards bob up when it became your turn and drop back
when it didn't, so the whole hand row jumped every turn. The ring alone
signals "playable"; the lift is reserved for hover/focus (see below). */
.hand .card.playable {
/* No highlight ring on playable cards (per Ahmad) — legal cards look normal;
the ILLEGAL cards dim (.invalid-play) to guide the eye instead. */
box-shadow: inset 0 0 0 2px #F5F1E8, inset 0 0 0 3px #1A1A1A !important;
}
/* Kufi Noir: table-slam celebration (capot / sweep). */
#view-room .felt { position: relative; }
.slam-overlay { position:absolute; inset:0; z-index:60; pointer-events:none; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.slam-flash { position:absolute; inset:0; background:radial-gradient(circle at 50% 55%, rgba(255,255,255,0.9), transparent 60%); opacity:0; animation:slamFlash 1s ease-out both; }
.slam-fist { position:absolute; top:50%; left:50%; transform:translate(-50%,-240px); font-size:84px; line-height:1; animation:slamHand 1.1s cubic-bezier(.2,.8,.2,1) both; }
.slam-cracks { position:absolute; top:50%; left:50%; width:72%; height:72%; transform:translate(-50%,-50%); opacity:0; animation:slamCrack 1.6s ease-out both; }
.slam-cracks polyline { fill:none; stroke:#888; stroke-width:2; vector-effect:non-scaling-stroke; }
.slam-word { position:relative; font-weight:800; letter-spacing:2px; font-size:34px; color:var(--accent); text-shadow:4px 4px 0 #111; opacity:0; white-space:nowrap; animation:slamWord 1.4s ease-out both; }
.slam-dust { position:absolute; top:50%; left:50%; width:10px; height:10px; border-radius:50%; background:rgba(210,210,210,.5); opacity:0; animation:slamDust .8s ease-out both; }
.slam-dust.d1{--dx:-70px;--dy:-40px}.slam-dust.d2{--dx:70px;--dy:-30px}.slam-dust.d3{--dx:-60px;--dy:50px}.slam-dust.d4{--dx:65px;--dy:55px}
.slam-shake { animation:slamShake .55s ease-in-out both; }
@keyframes slamHand { 0%{transform:translate(-50%,-240px) scale(2.4) rotate(-14deg);opacity:0} 12%{opacity:1} 26%{transform:translate(-50%,-4px) scale(1) rotate(0)} 33%{transform:translate(-50%,8px) scale(.94)} 44%{transform:translate(-50%,0) scale(1)} 72%{opacity:1} 100%{transform:translate(-50%,-60px) scale(1.1);opacity:0} }
@keyframes slamShake { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-6px,4px) rotate(-.6deg)} 25%{transform:translate(6px,-5px) rotate(.5deg)} 40%{transform:translate(-5px,3px)} 55%{transform:translate(4px,-3px) rotate(-.3deg)} 70%{transform:translate(-3px,2px)} 85%{transform:translate(2px,-1px)} }
@keyframes slamFlash { 0%,25%{opacity:0} 30%{opacity:.9} 45%,100%{opacity:0} }
@keyframes slamCrack { 0%,27%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 33%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} 38%{transform:translate(-50%,-50%) scale(1)} 88%{opacity:1} 100%{opacity:0} }
@keyframes slamWord { 0%,26%{opacity:0;transform:scale(.4)} 34%{opacity:1;transform:scale(1.15)} 44%{transform:scale(1)} 82%{opacity:1} 100%{opacity:0;transform:scale(1.05) translateY(-10px)} }
@keyframes slamDust { 0%{opacity:0;transform:translate(-50%,-50%)} 30%{opacity:.8} 100%{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))} }
/* Kufi Noir: emotes + bilingual quick-chat tray. */
/* Overlays the felt cell, bottom-right, the same way the seats overlay it.
NOT position:fixed — see the note in index.html: a fixed bottom:96px landed
inside the 191px hand lane and stole taps from the rightmost card. */
.emote-btn {
grid-area: felt; align-self: end; justify-self: end;
margin: 0 4px 6px 0; z-index: 45;
width: 40px; height: 40px; padding: 0; font-size: 20px; line-height: 1;
background: var(--panel); color: var(--ink);
border: 1px solid var(--border-lit); box-shadow: 3px 3px 0 #0A0A0A; cursor: pointer;
}
.emote-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #0A0A0A; }
.emote-tray {
position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 46;
max-width: 560px; margin: 0 auto;
background: var(--panel); border: 1px solid var(--border);
box-shadow: 0 -6px 24px rgba(0,0,0,0.6); padding: 14px 12px 14px;
display: flex; flex-direction: column; gap: 10px;
}
.emote-tray[hidden] { display: none !important; }
.emote-close { position: absolute; top: 5px; right: 8px; background: none; border: none; color: var(--ink-mute); font-size: 16px; cursor: pointer; }
.emote-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.emote-tile { width: 44px; height: 44px; font-size: 22px; padding: 0; background: #161616; border: 1px solid var(--border); cursor: pointer; }
.emote-tile:hover, .emote-tile:focus { border-color: var(--accent); box-shadow: 3px 3px 0 #0A0A0A; outline: none; }
.qc-wrap { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.qc-chip { padding: 6px 10px; font-size: 12px; font-weight: 700; background: #161616; color: var(--ink); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.qc-chip:hover, .qc-chip:focus { border-color: var(--accent); color: var(--accent); outline: none; }
/* Emote bubble anchored to the sender's seat. */
.emote-bubble {
position: fixed; z-index: 70; transform: translate(-50%,-100%);
background: var(--ink); color: #111; font-size: 26px; line-height: 1;
padding: 6px 8px; box-shadow: 4px 4px 0 #0A0A0A; pointer-events: none;
animation: emPop 2.1s ease-out both;
}
.emote-bubble.emote-phrase { font-size: 13px; font-weight: 800; max-width: 180px; white-space: normal; text-align: center; }
.emote-bubble.em-laugh { animation: emPop 2.1s ease-out both, emRock .35s ease-in-out 3; }
.emote-bubble.em-angry { animation: emPop 2.1s ease-out both, emShake .3s ease-in-out 4; box-shadow: 4px 4px 0 #0A0A0A, 0 0 0 3px rgba(224,71,47,.4); }
@keyframes emPop { 0%{transform:translate(-50%,-90%) scale(.2);opacity:0} 18%{transform:translate(-50%,-100%) scale(1.25);opacity:1} 30%{transform:translate(-50%,-100%) scale(1)} 80%{transform:translate(-50%,-100%) scale(1);opacity:1} 100%{transform:translate(-50%,-130%) scale(.6);opacity:0} }
@keyframes emRock { 0%,100%{rotate:-10deg} 50%{rotate:10deg} }
@keyframes emShake { 0%,100%{margin-left:0} 20%,60%{margin-left:-5px} 40%,80%{margin-left:5px} }
/* Kufi Noir: partner signals (knock / swap / tilt). Always-visible left-edge rail
during trick play + a suit-chooser popover + the anchored per-type badge. */
.signal-tray {
/* Bottom-left of the felt cell. This was position:fixed at bottom:178px — a
magic number chosen to "lift clear of the hand row" (96px before that, which
was worse). Both were guesses at a lane whose locked height is
card-w * 1.4 + 62px, i.e. 135px at 768 and up to 180px at 412, so no single
constant clears it everywhere; at 360-390 the rail sat on the leftmost
cards. Overlaying the felt cell tracks the lane exactly. */
grid-area: felt; align-self: end; justify-self: start;
margin: 0 0 6px 4px;
z-index: 45; display: flex; flex-direction: column; gap: 8px;
}
.signal-tray[hidden] { display: none !important; }
.signal-btn {
width: 40px; height: 40px; padding: 0; font-size: 20px; line-height: 1;
background: var(--panel); color: var(--ink);
border: 1px solid var(--border-lit); box-shadow: 3px 3px 0 #0A0A0A; cursor: pointer;
}
.signal-btn:hover, .signal-btn:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.signal-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #0A0A0A; }
.signal-suit-chooser {
position: fixed; z-index: 47; background: var(--panel);
border: 1px solid var(--border); box-shadow: 4px 4px 0 #0A0A0A;
padding: 6px; display: grid; grid-template-columns: repeat(2, 40px); gap: 6px;
}
.signal-suit-chooser[hidden] { display: none !important; }
.signal-suit-btn {
width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1;
background: #161616; border: 1px solid var(--border); cursor: pointer;
}
.signal-suit-btn:hover, .signal-suit-btn:focus { border-color: var(--accent); box-shadow: 3px 3px 0 #0A0A0A; outline: none; }
.signal-suit-btn.suit-hearts, .signal-suit-btn.suit-diamonds { color: #E0472F; }
.signal-suit-btn.suit-spades, .signal-suit-btn.suit-clubs { color: var(--ink); }
/* Signal badge anchored to the sender's seat (mirrors .emote-bubble). */
.signal-badge {
position: fixed; z-index: 70; transform: translate(-50%,-100%);
display: flex; align-items: center; gap: 6px;
background: var(--panel); color: var(--ink);
border: 1px solid var(--accent); box-shadow: 4px 4px 0 #0A0A0A;
padding: 5px 9px; pointer-events: none; white-space: nowrap;
animation: sigPop 2.2s ease-out both;
}
.signal-badge-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; }
.signal-badge-suit { font-size: 20px; line-height: 1; display: inline-block; }
.signal-badge-suit.suit-red { color: #E0472F; }
.signal-badge-suit.suit-black { color: var(--ink); }
@keyframes sigPop { 0%{transform:translate(-50%,-90%) scale(.2);opacity:0} 16%{transform:translate(-50%,-100%) scale(1.2);opacity:1} 28%{transform:translate(-50%,-100%) scale(1)} 80%{transform:translate(-50%,-100%) scale(1);opacity:1} 100%{transform:translate(-50%,-125%) scale(.6);opacity:0} }
/* knock → pulse + expanding ripple ring ("lead this!") */
.signal-badge.sig-knock { animation: sigPop 2.2s ease-out both, sigKnockPulse .5s ease-in-out 3; }
.signal-badge.sig-knock::after {
content: ""; position: absolute; inset: -4px; border: 2px solid var(--accent);
animation: sigRipple 1s ease-out 2; pointer-events: none;
}
@keyframes sigKnockPulse { 0%,100%{box-shadow:4px 4px 0 #0A0A0A} 50%{box-shadow:4px 4px 0 #0A0A0A, 0 0 0 4px rgba(245,176,39,.35)} }
@keyframes sigRipple { 0%{opacity:.7; transform:scale(1)} 100%{opacity:0; transform:scale(1.5)} }
/* swap → shuffle / cross wobble ("I'm void, swap suits") */
.signal-badge.sig-swap { animation: sigPop 2.2s ease-out both, sigSwapShuffle .4s ease-in-out 3; }
@keyframes sigSwapShuffle { 0%,100%{margin-left:0; rotate:0deg} 25%{margin-left:-6px; rotate:-4deg} 75%{margin-left:6px; rotate:4deg} }
/* tilt → the suit glyph tips 90° like a laid-down card ("I hold the Queen") */
.signal-badge.sig-tilt .signal-badge-suit { animation: sigTiltCard 1.4s ease-in-out both; transform-origin: 50% 80%; }
@keyframes sigTiltCard { 0%{rotate:0deg} 35%{rotate:90deg} 70%{rotate:90deg} 100%{rotate:0deg} }
/* Kufi Noir: felt watermark (Arabic wordmark) + classic double-border cards. */
.felt-logo { color: var(--accent) !important; opacity: 0.13 !important; font-size: 46px !important; letter-spacing: 3px !important; font-weight: 800 !important; }
.card, .trick .played-card { box-shadow: inset 0 0 0 2px #F5F1E8, inset 0 0 0 3px #1A1A1A; }
.card.red, .trick .played-card.red { box-shadow: inset 0 0 0 2px #F5F1E8, inset 0 0 0 3px #E0472F; }
.hand .card.playable { box-shadow: inset 0 0 0 2px #F5F1E8, inset 0 0 0 3px #1A1A1A !important; }
.hand .card.playable.red { box-shadow: inset 0 0 0 2px #F5F1E8, inset 0 0 0 3px #E0472F !important; }
/* Kufi Noir: home hub + bottom tab bar. */
.view-home { display: flex; flex-direction: column; min-height: calc(100dvh - 58px); }
.home-scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 20px; max-width: 560px; margin: 0 auto; width: 100%; }
.home-section-label { font-size: 10px; font-weight: 800; letter-spacing: 3px; color: var(--ink-mute); text-transform: uppercase; margin: 18px 2px 8px; }
.game-hero { position: relative; background: var(--panel); border: 1px solid var(--border); padding: 22px 18px; overflow: hidden; box-shadow: 5px 5px 0 #0A0A0A; }
.game-hero-ghost { position: absolute; right: -6px; top: -34px; font-size: 150px; color: var(--accent); opacity: 0.09; line-height: 1; pointer-events: none; }
.game-hero-title { font-size: 28px; font-weight: 800; letter-spacing: 2px; color: var(--ink); position: relative; }
.game-hero-meta { font-size: 12px; color: var(--ink-mute); margin: 6px 0 16px; position: relative; }
.gh-friends { color: var(--team-green); }
.game-hero-actions { display: flex; gap: 10px; position: relative; }
.game-hero-actions .primary { padding: 12px 24px; }
.tertiary { background: transparent; border: 1px solid var(--border-lit); color: var(--ink-soft); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 12px 18px; cursor: pointer; }
.tertiary:hover { border-color: var(--accent); color: var(--accent); }
.game-slot-soon { margin-top: 12px; border: 1px dashed var(--border-lit); color: var(--ink-mute); text-align: center; padding: 22px; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.home-friends { display: flex; gap: 10px; flex-wrap: wrap; }
.friend-invite { border: 1px dashed var(--border-lit); color: var(--ink-mute); padding: 14px 18px; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
.tab-bar { display: flex; background: var(--panel); border-top: 1px solid var(--border); flex: 0 0 auto; }
.tab-item { flex: 1 1 0; background: none; border: none; color: var(--ink-mute); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; padding: 8px 2px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tab-item.active { color: var(--accent); }
.tab-ic { font-size: 17px; }
/* Fix default-purple inline links on the login/lobby views. */
#view-login a, #view-lobby a:not(.ghost):not(.primary):not(.user-chip) { color: var(--accent); }
/* =========================================================
Native-app feel — kill browser tells when hosted in a
MAUI WebView / Capacitor shell, and stay well-behaved in
the browser too. Keep this block small and surgical.
========================================================= */
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100dvh; /* no jitter from mobile address bar */
background: #0C0C0F; /* match */
overscroll-behavior: none; /* no Chrome pull-to-refresh */
/* Pin text scaling to the design size in a MOBILE BROWSER the same way the
WebView shell pins native TextZoom=100. Without this, a phone with the
system Font size set above 100% inflates all text and causes the overlap/
clipping seen on web-but-not-app. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; /* no long-press "Copy Image" menu */
-webkit-user-select: none;
user-select: none;
touch-action: manipulation; /* no 300ms double-tap zoom */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Re-enable selection where it's useful (copying invite codes, typing). */
input, textarea, [contenteditable="true"],
.invite-code, #invite-code-display, #wr-invite-code, .wr-invite-url,
#invite-url-display, #log {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
/* Safe-area padding for the notch / home indicator when the app runs
fullscreen inside a WebView (apple-mobile-web-app-capable). Uses max()
so browser-only layout is unchanged. */
.top-bar { padding-top: max(6px, env(safe-area-inset-top)); }
.ga-hand { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.waiting-room-content,
.action-modal-card { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.view-center { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
/* Pressed-state feedback — without :hover on touch, buttons feel dead. */
button, .quick-join-btn, .sp-seat, .hand .card, .room-list .room-row {
transition: transform 80ms ease, filter 80ms ease, background-color 120ms ease;
-webkit-touch-callout: none;
}
button:active:not(:disabled),
.quick-join-btn:active,
.sp-seat:active,
.room-list .room-row:active,
.hand .card.playable:active {
transform: scale(0.97);
filter: brightness(0.92);
}
/* Settle, don't spring.
This was cubic-bezier(.2,.9,.25,1.2) on .card and .trick .played-card. The
1.2 is the y2 control point: the curve travels 20% PAST the destination and
comes back. On a modal or a sheet that reads as life; on a fanned hand of
thirteen overlapping cards it is the "too much stretch and come back"
Ahmad reported. Every card re-layout after a play — layoutHand() writes
marginInlineStart on all remaining cards — overshot its new position and
recoiled, thirteen cards at once, which is what made the hand hard to read.
It applied to CARDS by accident of scope, too: a bare `.card` longhand beats
the timing function inside `.hand .card`'s transition SHORTHAND depending on
cascade order, so it was silently reassigning the easing of rules that had
already chosen their own.
Sheets and modals keep the spring. Cards get a decelerating curve that stops
where it is going. */
.action-modal-card, .waiting-room-content {
transition-timing-function: cubic-bezier(.2, .9, .25, 1.2);
}
.card, .trick .played-card {
transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* Invisible scrollbars inside scrollable panels (WebView niceness). */
.rooms-list, #log, .go-history-scroll, .scores-details-panel,
.waiting-room-content, .action-modal-body {
scrollbar-width: none;
-ms-overflow-style: none;
}
.rooms-list::-webkit-scrollbar,
#log::-webkit-scrollbar,
.go-history-scroll::-webkit-scrollbar,
.scores-details-panel::-webkit-scrollbar,
.waiting-room-content::-webkit-scrollbar,
.action-modal-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
font-family: var(--font-ui);
font-weight: 600;
letter-spacing: 0.2px;
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(1200px 800px at 50% -10%, rgba(224,173,78,0.07) 0%, transparent 55%),
radial-gradient(900px 600px at 90% 100%, rgba(200,150,62,0.05) 0%, transparent 55%),
radial-gradient(600px 400px at 10% 80%, rgba(200,150,62,0.03) 0%, transparent 50%),
linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 55%, var(--bg-grad-3) 100%);
background-size: 80px 80px, auto, auto, auto, auto;
color: var(--ink);
min-height: 100vh;
min-height: 100dvh; /* dynamic vh — no jump as the mobile URL bar shows/hides */
-webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
/* ---------- Top bar ---------- */
/* Decision 1 on the gameplay prototype: the app bar does not exist during play.
`show()` puts .in-game on whenever #view-room is the active view. */
body.in-game .top-bar { display: none !important; }
.top-bar {
padding: 10px 24px;
background: linear-gradient(180deg, rgba(30,30,38,0.97), rgba(20,20,24,0.95));
border-bottom: 1px solid rgba(224,173,78,0.18);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 20;
}
/* Bar stretches edge-to-edge; inner content matches the .game-shell cap
so the logo + user chip align with the felt below on tablet/desktop. */
.top-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 720px;
margin-inline: auto;
gap: 12px;
}
.brand {
display: flex; align-items: center; gap: 12px;
font-weight: 700;
color: var(--ink);
}
.brand-mark {
display: inline-flex; gap: 3px;
font-size: 15px;
padding: 8px 12px;
background: var(--panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.brand-mark .suit.s { color: var(--ink); }
.brand-mark .suit.r { color: var(--red); }
.brand-name {
font-size: 22px;
letter-spacing: 1px;
color: #E0AD4E;
text-shadow: 0 1px 4px rgba(200,150,62,0.3);
}
.brand-sub {
font-size: 12px;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 2px;
margin-left: 2px;
padding-top: 4px;
font-weight: 600;
}
.top-bar-right {
display: flex; align-items: center; gap: 10px;
/* A signed-in GUEST carries the most chips of anyone: History, Store, wallet,
the legacy who + Logout pair, AND Log in / Register. Measured at 768px
(iPad Mini) the row ran to 941px — the who chip and Logout hung off the
right edge. Without wrap a flex row simply refuses to shrink past its
content, so it overflows silently rather than reflowing. */
flex-wrap: wrap;
justify-content: flex-end;
min-width: 0;
}
.user-chip {
padding: 8px 16px;
background: var(--panel);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
box-shadow: var(--shadow-sm);
}
/* The guest who-chip (#who) is an empty until a guest signs in —
without content it still painted as a small blank pill next to Register
for anonymous visitors. Hide any user-chip that has nothing to show. */
.user-chip:empty { display: none; }
/* Anchor chips in the top bar (History, Log in, Register). The .ghost /
.primary button skins are declared on `button.…` only, so plain
chips used to render as underlined links. Mirror the small ghost-button
look (like #btn-logout) for anchors, scoped to the top bar so links
elsewhere keep their normal styling. */
.top-bar-right a.ghost,
.top-bar-right a.primary {
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
border-radius: var(--radius);
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.top-bar-right a.ghost {
color: var(--ink-soft);
border: 1px solid var(--border);
background: transparent;
}
.top-bar-right a.ghost:hover {
color: var(--ink);
border-color: var(--sage-dark);
background: rgba(200, 150, 62, 0.18);
}
.top-bar-right a.primary {
background: linear-gradient(180deg, #E0AD4E, #C8963E);
border: 1px solid #8B6B2A;
color: #111114;
}
.top-bar-right a.primary:hover {
background: linear-gradient(180deg, #F0C76E, #E0AD4E);
border-color: #C8963E;
}
/* ---------- Main ---------- */
main {
padding: 14px 16px 18px;
max-width: 1600px;
margin: 0 auto;
}
/* In the game view, let the content fill the viewport so the grid has
height to distribute — override the generic `main` padding. */
main:has(#view-room:not(.hidden)) {
padding: 0;
max-width: 100%;
}
.view-center {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 140px);
min-height: calc(100dvh - 140px);
}
/* ---------- Panels ---------- */
.card-panel {
background: linear-gradient(180deg, var(--panel), var(--panel-2));
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
padding: 32px 36px;
}
/* Decorative corner accents on card panels */
.card-panel::after {
content: "";
position: absolute;
inset: 6px;
border: 1px solid rgba(200, 150, 62, 0.06);
border-radius: calc(var(--radius-xl) - 4px);
pointer-events: none;
z-index: 0;
background:
url("data:image/svg+xml;utf8,") no-repeat top left / 20px 20px,
url("data:image/svg+xml;utf8,") no-repeat top right / 20px 20px,
url("data:image/svg+xml;utf8,") no-repeat bottom left / 20px 20px,
url("data:image/svg+xml;utf8,") no-repeat bottom right / 20px 20px;
}
.login-panel { width: 100%; max-width: 400px; }
.login-panel h2 { margin: 0 0 4px; font-size: 24px; color: var(--ink); }
.login-panel .muted { margin: 0 0 20px; color: var(--ink-mute); font-size: 15px; }
.login-panel label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--ink-mute);
margin: 14px 0 6px;
}
.login-panel input { width: 100%; }
.divider {
display: flex;
align-items: center;
text-align: center;
color: var(--ink-mute);
font-size: 12px;
font-weight: 600;
margin: 20px 0 4px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.divider::before, .divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border-soft);
}
.divider span { padding: 0 12px; }
.lobby-panel { width: 100%; max-width: 760px; }
.lobby-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.lobby-head h2 { margin: 0; }
/* ---------- Quick Join ---------- */
.quick-join-section {
padding: 0 0 18px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 18px;
}
.quick-join-btn {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 22px;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(224, 173, 78, 0.15), rgba(224, 173, 78, 0.06));
border: 2px solid var(--yellow);
color: var(--ink);
cursor: pointer;
transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
text-align: left;
}
.quick-join-btn:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(224, 173, 78, 0.25), rgba(224, 173, 78, 0.12));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(224, 173, 78, 0.3);
}
.quick-join-btn:disabled { opacity: 0.5; cursor: wait; }
.quick-join-btn .qj-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.quick-join-btn .qj-text { display: flex; flex-direction: column; gap: 2px; }
.quick-join-btn .qj-text strong { font-size: 17px; font-weight: 800; color: var(--yellow); letter-spacing: 0.5px; }
.quick-join-btn .qj-text small { font-size: 13px; color: var(--ink-mute); font-weight: 500; }
/* ---------- Create room ---------- */
.new-room {
padding: 14px 0 20px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 18px;
}
.create-room-fields {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
.create-room-fields input { flex: 1; min-width: 140px; }
.create-room-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.create-room-actions button {
flex: 1;
min-width: 170px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.create-room-actions .btn-icon { font-size: 16px; line-height: 1; }
.new-room h3,
.join-code-section h3,
.lobby-panel > h3 {
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
}
.new-room h3::before,
.join-code-section h3::before,
.lobby-panel > h3::before {
content: "◆";
font-size: 8px;
color: var(--yellow);
opacity: 0.5;
}
/* ---------- Typography ---------- */
/* Poiret One for decorative headings only */
.brand-name, h1, h2, .felt-logo, .action-modal-header h3 {
font-family: var(--font-ui);
}
h1 { margin: 0; font-size: 28px; color: var(--ink); font-weight: 700; }
h2 { margin: 8px 0; font-size: 26px; color: var(--ink); font-weight: 700; }
h3 {
margin: 8px 0 6px;
font-size: 14px;
color: #E0AD4E;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
.muted { color: var(--ink-mute); }
/* ---------- Inputs & buttons ---------- */
input, select {
padding: 12px 16px;
/* 16px minimum prevents iOS Safari / WKWebView from auto-zooming
the whole page when a field gains focus. */
font-size: 16px;
font-family: inherit;
font-weight: 600;
border-radius: var(--radius);
border: 1px solid var(--border-lit);
background: rgba(255,255,255,0.06);
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
outline: none;
/* Force the native