/* ==========================================================
DESIGN SYSTEM
Shared variables used across the game UI.
Keeping these here makes future theme changes easier.
========================================================== */
:root {
/* Player colors */
--p1: #3b82f6;
--p2: #22c55e;
--p3: #f97316;
--p4: #a855f7;
/* RGB triplets of the above, kept in sync by
js/ui/cardColor-ui.js applyCardColors() — lets rgba(var(--pN-rgb), a)
be used anywhere a translucent player color is needed. */
--p1-rgb: 59, 130, 246;
--p2-rgb: 34, 197, 94;
--p3-rgb: 249, 115, 22;
--p4-rgb: 168, 85, 247;
/* Base colors */
--bg-main: #0a1f0f;
--bg-panel: rgba(255, 255, 255, 0.06);
--bg-card: linear-gradient(145deg, #1f2937, #111827);
--text-main: #e5e7eb;
--text-muted: #cbd5e1;
--accent: #bd5d38;
--border: #334155;
/* Common values */
--radius-sm: 10px;
--radius-md: 12px;
--radius-lg: 18px;
--shadow-card:
0 10px 25px rgba(0, 0, 0, 0.4);
--shadow-panel:
0 8px 20px rgba(0, 0, 0, 0.35);
--blur:
blur(16px);
/* Shared horizontal padding for standard popups (.modal-content's
header/body/footer, and the mobile Leaderboard/Party/Trash
panels) — one responsive value so every popup keeps equal
left/right breathing room instead of each screen inventing its
own margin. See css note near .modal-content below. */
--popup-pad-x: clamp(16px, 4vw, 24px);
}
/* ==========================================================
STARTUP — Splash → Loading → Error (js/ui/startup-ui.js)
The very first thing painted; sits above Home (z-index 9999)
and every modal (z-index 10000) since it can cover both while
js/home-main.js's bootHome() is still running. Fixed background
matches .screen-overlay/.modal's existing dark-glass treatment
so it reads as part of the same app, not a separate splash app.
========================================================== */
.startup-screen {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 20000;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-main);
transition: opacity 0.4s ease;
}
.startup-screen-exit {
opacity: 0;
pointer-events: none;
}
.startup-splash,
.startup-loading,
.startup-error {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.startup-logo {
width: min(160px, 40vw);
height: min(160px, 40vw);
object-fit: contain;
animation: startupLogoIn 1.4s ease forwards;
}
@keyframes startupLogoIn {
0% { opacity: 0; transform: scale(0.85); }
35% { opacity: 1; transform: scale(1.04); }
55% { opacity: 1; transform: scale(1); }
100% { opacity: 1; transform: scale(1); }
}
.startup-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.15);
border-top-color: var(--accent);
animation: startupSpin 0.8s linear infinite;
}
@keyframes startupSpin {
to { transform: rotate(360deg); }
}
.startup-status {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
text-align: center;
}
.startup-error .startup-status {
color: var(--text-main);
}
/* ==========================================================
ORIENTATION GATE — Rotate Your Device (js/ui/orientation-ui.js)
Reusable across every real top-level page. Sits above literally
everything else, including .startup-screen (20000) and every
.modal (10000/2000), since it must be able to block regardless of
what else is on screen. Deliberately its own thing rather than a
.modal: it's not dismissible, has no close button, and is driven
entirely by device state, not a user action. Same dark-glass
treatment as .startup-screen/.modal so it still reads as part of
the same app rather than a bolted-on warning page.
========================================================== */
.orientation-gate {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-main);
/* Blocks every click/tap on whatever is rendered underneath —
this alone is what makes Gameplay/buttons/cards non-interactive
while shown; nothing underneath is disabled or torn down. */
}
.orientation-gate-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: min(340px, 84vw);
text-align: center;
padding: 32px 28px;
border-radius: var(--radius-lg);
background: var(--bg-panel);
box-shadow: var(--shadow-panel);
}
.orientation-gate-icon {
font-size: 56px;
line-height: 1;
/* Purely decorative flourish on the icon itself — NOT the feature's
blocking mechanism, which is entirely matchMedia/JS-driven (see
js/ui/orientation-ui.js). This has zero effect on whether the
gate shows or hides. */
animation: orientationGateRock 1.8s ease-in-out infinite;
}
@keyframes orientationGateRock {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-12deg); }
75% { transform: rotate(12deg); }
}
.orientation-gate-title {
margin: 0;
font-size: 19px;
font-weight: 700;
color: var(--text-main);
}
.orientation-gate-body {
margin: 0;
font-size: 14px;
color: var(--text-muted);
line-height: 1.45;
}
/* ==========================================================
GLOBAL
========================================================== */
body {
margin: 0;
min-height: 100vh;
background: var(--bg-main);
color: var(--text-main);
font-family: sans-serif;
overflow-x: hidden;
overflow-y: auto;
font-family:'Poppins', sans-serif;
}
/* Shared glass UI component.
Used by panels, logs, leaderboards, etc. */
.glass-panel {
background: var(--bg-panel);
backdrop-filter: var(--blur);
border-radius: var(--radius-md);
box-sizing: border-box;
}
/* Shared shadow component */
.card-info,
.modal-content,
.card {
box-shadow: var(--shadow-panel);
}
/* ==========================================================
HEADER
========================================================== */
#topBarContent {
display:grid;
grid-template-columns: clamp(120px, 22vw, 300px) 1fr clamp(120px, 22vw, 300px);
align-items:center;
height: clamp(60px, 6vw, 100px);
flex-shrink:0;
}
/* LEFT */
#topLeft {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
padding-left: clamp(8px, 1.5vw, 20px);
}
.turn-label {
font-size: clamp(14px, 2.2vw, 28px);
font-weight: 700;
color: var(--accent);
}
.turn-divider {
width: 120px;
height: 2px;
background: rgba(255,255,255,.3);
margin: 10px 0;
}
.round-label {
font-size: clamp(11px, 1.4vw, 18px);
color: var(--text-main);
display: flex;
align-items: baseline;
gap: 6px;
}
.round-timer-sep {
color: rgba(255,255,255,.35);
}
.turn-timer-icon {
display: inline-flex;
align-items: center;
font-size: clamp(11px, 1.4vw, 18px);
line-height: 1;
}
/* If config.json's "timer" icon is later switched from an emoji to an
image path, icon-ui.js swaps in an ![]()
; size it
to match the text so the swap doesn't jump the layout. */
.turn-timer-icon .icon-image {
width: 1em;
height: 1em;
object-fit: contain;
}
.turn-timer-label {
font-weight: 700;
display: inline-block;
color: var(--text-main);
/* JS (renderTurnTimer in game-ui.js) sets the actual color every
tick, smoothly interpolating from --text-main to red as the
countdown nears 0 — this transition just softens each step. */
transition: color .3s ease;
}
/* Last few seconds: an extra pulse on top of the color shift so a
glance catches the urgency even without focusing on the number. */
@keyframes turnTimerPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.turn-timer-label.turn-timer-critical {
display: inline-block; /* transform: scale() needs this to apply */
animation: turnTimerPulse 0.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.turn-timer-label.turn-timer-critical {
animation: none;
}
}
/* Full-screen red flash echoing the turn-timer's urgency once it drops
under 3 seconds (see #screenDamage in index.html, triggered from
renderTurnTimer in js/ui/game-ui.js). A plain fixed overlay, never
intercepts clicks, sits above the game board but below modals/the
walkthrough overlay (z-index: 50000). */
#screenDamage {
position: fixed;
inset: 0;
z-index: 40000;
pointer-events: none;
opacity: 0;
background: radial-gradient(ellipse at center,
rgba(239,68,68,0) 55%,
rgba(239,68,68,.55) 100%);
}
#screenDamage.screen-damage-flash {
animation: screenDamageFlash .5s ease-out;
}
@keyframes screenDamageFlash {
0% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
#screenDamage.screen-damage-flash {
animation: none;
opacity: 0;
}
}
/* CENTER */
#topCenter {
height: 100%;
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
}
#topCenter picture {
height: 140%;
display: flex;
justify-content: center;
align-items: center;
}
#topCenter img {
height: 60%;
width: auto;
max-height: 100%;
display: block;
object-fit: contain;
}
/* RIGHT */
#topRight {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
padding-right: clamp(8px, 1.5vw, 20px);
}
.top-btn {
width: clamp(34px, 3.5vw, 50px);
height: clamp(34px, 3.5vw, 50px);
border-radius: 12px;
border: none;
background: transparent;
color: white;
font-size: 20px;
cursor: pointer;
transition: .2s;
display: flex;
justify-content: center;
align-items: center;
}
.top-btn:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,.3);
}
/* ── Button tooltip (matches party panel tooltip style) ── */
.top-btn[data-title] {
position: relative;
}
.top-btn[data-title]::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 8px);
bottom: auto;
left: 50%;
transform: translateX(-50%) scale(0.92);
background: rgba(10, 31, 15, 0.97);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 12px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
white-space: nowrap;
padding: 7px 11px;
border-radius: var(--radius-sm, 8px);
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
pointer-events: none;
opacity: 0;
transition: opacity 0.18s, transform 0.18s;
z-index: 500;
line-height: 1.4;
}
.top-btn[data-title]:hover::after {
opacity: 1;
transform: translateX(-50%) scale(1);
}
.top-btn[data-title]:hover { cursor: pointer; }
/* Small popup */
.small-popup {
/* Was a fixed 350px — overflowed horizontally on the narrowest
real phones (320px-wide viewports leave under 350px of usable
width once the browser/OS chrome and .modal-content's own
margins are accounted for). */
width: min(350px, 92vw);
text-align: center;
}
.small-popup p {
font-size: 18px;
line-height: 1.6;
}
/* ==========================================================
PAUSE PANEL
========================================================== */
.pause-panel .help-header {
justify-content: center;
}
.pause-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: clamp(16px, 5vw, 36px);
margin-top: 8px;
}
.pause-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0;
color: inherit;
cursor: pointer;
font-family: inherit;
}
/* Icon box reuses the exact dimensions of the gameplay top-bar
buttons (.top-btn, css/style.css #topRight) so the pause panel's
icons read as the same UI element, just in a different context —
background left transparent, unlike .top-btn's own default. */
.pause-action-icon.top-btn {
background: transparent;
}
.pause-action-icon.top-btn:hover {
background: transparent;
transform: none;
box-shadow: none;
}
.pause-action-label {
font-size: 13px;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
#topBar {
text-align: center;
margin-bottom: 8px;
flex-shrink: 0;
}
#gameTitle {
display:flex;
justify-content:center;
align-items:center;
margin-top:10px;
}
#gameTitle img {
width:280px;
height:auto;
object-fit:contain;
}
#turnInfo,
#currentTurn {
color: var(--accent);
}
#turnInfo {
font-size: 14px;
margin-top: 4px;
}
#currentTurn {
font-size: 18px;
font-weight: bold;
}
/* ==========================================================
PAGE STRUCTURE
========================================================== */
#pageLayout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;
padding: 10px;
min-height: 100vh;
box-sizing: border-box;
}
#leftSidebar {
width: 260px;
display: flex;
flex-direction: column;
gap: 12px;
height: calc(100vh - 20px);
}
#gameColumn {
display: flex;
flex-direction: column;
height: calc(100vh - 20px);
}
#gameLayout {
flex: 1;
display: grid;
grid-template-columns:
clamp(180px, 22vw, 280px)
1fr
clamp(180px, 22vw, 280px);
gap: 12px;
min-height: 0;
overflow: hidden;
}
#centerArea {
display: flex;
flex-direction: column;
min-height: 0;
}
/* ==========================================================
SPLASH FULL SCREEN
========================================================== */
.screen-overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100vw;
height:100vh;
/* Dynamic viewport unit: shrinks to the *visible* area on mobile
browsers whose address/tab bar can show/hide, instead of the
old 100vh which is measured against the largest possible
viewport and can leave content (and buttons) hidden behind the
browser chrome. Ignored by browsers that don't support dvh,
which keep the 100vh value above. */
height:100dvh;
background:rgba(0,0,0,.8);
backdrop-filter:blur(10px);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}
.screen-content {
width:100%;
height:100%;
display:flex;
flex-direction:column;
/* `safe center`: centers short content exactly like plain `center`
used to, but falls back to start-aligned once content is taller
than the viewport instead of clipping/centering it off both
edges — the exact bug that hid the Choose-Bot-Difficulty and
End-Game action buttons on short screens. Browsers without
`safe`/`unsafe` support (very old Safari) just read this as
`center` and keep the previous behavior; see the `@supports`
fallback further down that trades centering for correctness on
those browsers instead. */
justify-content:center;
justify-content:safe center;
align-items:center;
text-align:center;
padding:40px;
background:var(--bg-panel);
box-sizing:border-box;
/* Any .screen-content whose content grows taller than the
viewport now scrolls instead of silently overflowing — this
alone fixes every "button not visible on smaller screens" case
across every .screen-overlay page (Choose Bot Difficulty, End
Game, Coming Soon, guidance prompts, splash) without needing a
markup change on each one. Panels with real footer buttons
(Choose Bot Difficulty, End Game) additionally use the
.screen-content--panel modifier below so those buttons are
pinned rather than merely scrollable. */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@supports not (justify-content: safe center) {
.screen-content {
/* No `safe` keyword support: prioritize "never hide content"
over perfect vertical centering for short content. */
justify-content: flex-start;
}
}
/* لوگو */
.screen-logo {
width:min(700px,70vw);
max-height:60vh;
object-fit:contain;
}
/* ── Back-to-Home link ────────────────────────────────────
Every standalone top-level page (Profile, Settings, Cards,
Game Modes, Coming Soon — see profile.html, settings.html,
cards.html, game-modes.html, coming-soon.html) uses this same
affordance to return to Home. It's a real navigation (an
to index.html), not a modal close — browser Back already does
the same thing, this is just a visible, clickable equivalent. */
.page-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-bottom: 14px;
color: var(--text-muted);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: color .15s ease;
}
.page-back-link:hover {
color: var(--text-main);
}
/* دسکتاپ بزرگ */
@media(min-width:1200px){
.screen-logo{
width:800px;
max-height:65vh;
}
}
/* لپتاپ */
@media(min-width:700px) and (max-width:1199px){
.screen-logo{
width:600px;
max-height:55vh;
}
}
/* موبایل */
@media(max-width:600px){
.screen-logo{
width:90vw;
max-height:35vh;
}
}
.creator {
position:absolute;
bottom:25px;
left:0;
width:100%;
text-align:center;
font-family:'Poppins', sans-serif;
font-size:14px;
font-weight:400;
letter-spacing:.5px;
color:rgba(255,255,255,.75);
}
.creator a{
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.creator a:hover{
opacity:.7;
text-decoration:underline;
}
/* Mobile */
@media(max-width:600px){
.creator{
bottom:15px;
font-size:12px;
}
}
/* موبایل */
@media(max-width:600px){
.creator{
bottom:15px;
font-size:12px;
}
}
/* دکمه */
.screen-btn {
margin-top:30px;
padding:14px 35px;
border:none;
border-radius:12px;
cursor:pointer;
font-size:18px;
font-weight:700;
}
/* موبایل */
@media(max-width:600px){
.screen-content{
padding:20px;
}
.screen-logo{
width:90vw;
max-height:35vh;
}
.screen-btn{
width:100%;
max-width:300px;
}
}
/* ==========================================================
LEADERBOARD
========================================================== */
#leaderboard {
width: 100%;
padding: 12px;
background: var(--bg-panel);
backdrop-filter: var(--blur);
border-radius: var(--radius-lg);
box-sizing: border-box;
box-shadow: var(--shadow-panel);
}
/*
Kept separate from .glass-panel because the leaderboard
has a unique internal grid structure.
*/
.leaderboard-header,
.leaderboard-row {
display: grid;
grid-template-columns:
1fr
60px
60px;
gap: 10px;
padding: 6px 0;
font-size: 13px;
}
.leaderboard-header {
opacity: 0.6;
border-bottom:
1px solid rgba(255,255,255,0.1);
margin-bottom: 8px;
}
.leaderboard-row {
align-items: center;
}
/* Player color mapping */
.leaderboard-row[data-player="p1"] {
color: var(--p1);
}
.leaderboard-row[data-player="p2"] {
color: var(--p2);
}
.leaderboard-row[data-player="p3"] {
color: var(--p3);
}
.leaderboard-row[data-player="p4"] {
color: var(--p4);
}
/* ==========================================================
TOP PLAYERS
========================================================== */
#topPlayers {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.player {
width: 200px;
padding: 10px;
border:
1px solid #555;
border-radius: var(--radius-sm);
}
.player[data-player="p1"] {
border-left: 4px solid var(--p1);
}
.player[data-player="p2"] {
border-left: 4px solid var(--p2);
}
.player[data-player="p3"] {
border-left: 4px solid var(--p3);
}
.player[data-player="p4"] {
border-left: 4px solid var(--p4);
}
/* ==========================================================
PANELS
Reusable glass containers for game sections.
========================================================== */
#partyArea,
#trashArea,
#chatPanel,
#gameLog {
background: var(--bg-panel);
backdrop-filter: var(--blur);
border-radius: var(--radius-lg);
box-sizing: border-box;
}
/* ==========================================================
PARTY / TRASH
========================================================== */
#partyArea,
#trashArea {
display: flex;
flex-direction: column;
min-height: 0;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding: 16px;
}
#partyArea h3,
#trashArea h3 {
margin-top: 0;
margin-bottom: 12px;
text-align: center;
color: var(--text-main);
letter-spacing: 1px;
}
#partyCards,
#trashCards {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(60px, 70px));
gap: 6px;
justify-content: center;
overflow: visible;
}
#partyCards .card,
#trashCards .card {
width: 62px;
height: 84px;
font-size: 11px;
border-radius: 8px;
transform: none;
}
/* ==========================================================
CARD COMPONENT
========================================================== */
.card,
.card-info {
width: clamp(60px, 6.5vw, 90px);
height: clamp(85px, 9.2vw, 120px);
border-radius: var(--radius-md);
background: var(--bg-card);
border:
1px solid rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
box-shadow: var(--shadow-card);
transition:
transform .2s ease,
box-shadow .2s ease;
container-type: size;
}
/* Help card-info: same layout as game card but no owner badge */
.card-info {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0;
overflow: hidden;
/* bigger in the help grid */
width: clamp(80px, 10vw, 120px);
height: clamp(110px, 14vw, 165px);
}
.card-info .help-card-emoji {
font-size: unset;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-top: 12%;
font-size: clamp(1.2em, 28cqw, 2.6em);
line-height: 1;
}
.card-info .card-image {
width: 65%;
height: 65%;
object-fit: contain;
}
.card-info .help-card-footer {
width: 100%;
background: rgba(0,0,0,0.38);
display: flex;
justify-content: space-between;
align-items: center;
padding: 3% 7%;
box-sizing: border-box;
flex-shrink: 0;
}
.card-info .help-card-name {
font-size: clamp(7px, 10cqw, 11px);
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.card-info .help-card-power {
font-size: clamp(8px, 12cqw, 14px);
font-weight: 800;
color: #fbbf24;
flex-shrink: 0;
margin-left: 4%;
line-height: 1.2;
}
/*
Interaction feedback:
Cards lift when hovered to communicate
that they are selectable.
*/
.card:hover,
.card-info:hover {
transform:
translateY(-6px)
scale(1.05);
box-shadow:
0 10px 20px rgba(0,0,0,.4);
cursor: pointer;
}
/* ── Card new layout ── */
.card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0;
overflow: hidden;
}
/* ── Long-press feedback ──────────────────────────────────
Scale + shake "wind-up" + glow + circular progress ring while a card
is being held. Purely visual — driven by the .long-press-active class
toggled from js/ui/longPress.js the instant a press starts (not once
it fires), so the shake plays through the whole hold, not just at the
end. The ring's fill duration is set inline via --long-press-duration
(see js/ui/game-ui.js) so it always matches the actual timer, with no
duplicated number in CSS. Disappears immediately (no transition delay)
if the gesture is cancelled, since the class is simply removed. */
.card.long-press-active {
animation: long-press-shake 260ms ease-out both;
box-shadow: var(--shadow-card), 0 0 0 3px rgba(189, 93, 56, 0.55);
transition: box-shadow 120ms ease-out;
}
@keyframes long-press-shake {
0% { transform: scale(1) rotate(0deg); }
15% { transform: scale(1.025) rotate(-1.4deg); }
30% { transform: scale(1.035) rotate(1.4deg); }
45% { transform: scale(1.04) rotate(-1deg); }
60% { transform: scale(1.04) rotate(0.7deg); }
80% { transform: scale(1.04) rotate(-0.3deg); }
100% { transform: scale(1.04) rotate(0deg); }
}
.card.long-press-active::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
border-radius: inherit;
background: conic-gradient(var(--accent) 0deg, transparent 0deg);
opacity: 0.35;
animation: long-press-ring var(--long-press-duration, 800ms) linear forwards;
}
@keyframes long-press-ring {
from { background: conic-gradient(var(--accent) 0deg, transparent 0deg); }
to { background: conic-gradient(var(--accent) 360deg, transparent 360deg); }
}
@media (prefers-reduced-motion: reduce) {
.card.long-press-active {
animation: none;
transform: scale(1.02);
transition: none;
}
.card.long-press-active::after {
animation: none;
opacity: 0.25;
}
}
.card-owner-badge {
position: absolute;
top: 5%;
left: 6%;
font-size: clamp(7px, 1.1cqw, 10px);
font-weight: 700;
padding: 1px 5px;
border-radius: 20px;
background: rgba(0,0,0,0.5);
color: #fff;
letter-spacing: 0.2px;
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 2;
line-height: 1.6;
}
.card-visual {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-top: 28%;
min-height: 0;
}
.card-emoji {
font-size: clamp(1.2em, 38cqw, 3em);
line-height: 1;
}
.card-image {
width: 85%;
height: 85%;
object-fit: contain;
}
.card-footer {
width: 100%;
background: rgba(0,0,0,0.38);
display: flex;
justify-content: center;
align-items: center;
padding: 3% 7%;
box-sizing: border-box;
flex-shrink: 0;
}
.card-name {
font-size: clamp(7px, 10cqw, 11px);
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
line-height: 1.2;
}
/* Player card themes.
Driven by --p1..--p4-rgb (set alongside --p1..--p4 in
js/ui/cardColor-ui.js applyCardColors()) rather than a fixed color,
so a picked color actually repaints these — previously hardcoded
here, this block silently ignored any player-color choice. */
.card[data-player="p1"] {
background:
linear-gradient(
145deg,
rgba(var(--p1-rgb), .25),
#111827
);
}
.card[data-player="p2"] {
background:
linear-gradient(
145deg,
rgba(var(--p2-rgb), .25),
#111827
);
}
.card[data-player="p3"] {
background:
linear-gradient(
145deg,
rgba(var(--p3-rgb), .25),
#111827
);
}
.card[data-player="p4"] {
background:
linear-gradient(
145deg,
rgba(var(--p4-rgb), .25),
#111827
);
}
/* ==========================================================
BOARD
========================================================== */
#board {
display: flex;
justify-content: center;
gap: 16px;
min-width: 0;
flex-wrap: nowrap;
}
/* ==========================================================
QUEUE
========================================================== */
#queue,
#queue {
display: flex;
gap: clamp(6px, 2vw, 30px);
}
#queue .card {
width: clamp(68px, 8vw, 110px);
height: clamp(96px, 11.5vw, 155px);
/* Taken out of flex flow so a second card briefly sharing this slot
(mid-animation handoff, e.g. Hippo push) can never cause the flex
container to shrink either card to make room. Both cards keep
their full, unchanged size and simply overlap instead. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* When two cards are forced into the same queue slot at once, DOM order
reflects arrival order (appendChild → last child = newest arrival).
The newer card renders underneath the one already occupying the slot. */
.queue-slot .card ~ .card {
z-index: 1;
}
.queue-slot {
width: clamp(68px, 8vw, 110px);
height: clamp(96px, 11.5vw, 155px);
border:
1px dashed rgba(255,255,255,.2);
border-radius: var(--radius-sm);
background:
rgba(255,255,255,.02);
display: flex;
align-items: center;
justify-content: center;
}
#queueArea {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
/* ==========================================================
PLAYER HAND
========================================================== */
#handArea {
display:flex;
justify-content:center;
align-items:center;
gap: clamp(8px, 2vw, 25px);
margin-top:8px;
flex-shrink: 0;
flex-wrap: wrap;
}
#playerHand {
display:flex;
justify-content:center;
gap: clamp(4px, 1.2vw, 16px);
flex-wrap:wrap;
}
#playerHand .card {
width: clamp(68px, 8vw, 100px);
height: clamp(96px, 11.5vw, 140px);
}
/* Let the browser keep handling horizontal scroll/pan of the hand strip
itself (see the mobile overflow-x:auto rule below); our long-press
handler cancels on the same real drag via its own movement threshold,
so this doesn't fight that — it just avoids blocking scroll for the
fraction of a gesture before our JS threshold check runs. */
#playerHand .card {
touch-action: pan-x;
}
/* .owner removed - replaced by .card-owner-badge */
/* =========================
Deck Stack
========================= */
#deckStack {
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
gap: 6px;
}
/* Name + avatar tag above the player's own deck, matching how each
opponent shows their avatar and name next to their hand
(.other-avatar / .player-label in the OTHER PLAYER ROW rules
above) — this is the human seat's equivalent, sitting by their own
deck instead since their hand is laid out full-width. */
.player-deck-info {
display: flex;
align-items: center;
gap: 6px;
max-width: clamp(90px, 10vw, 130px);
}
.player-deck-avatar-wrap {
width: 26px;
height: 26px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid var(--p1, #4ade80);
}
.player-deck-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.player-deck-name {
font-size: 12px;
font-weight: 700;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 600px) {
.player-deck-avatar-wrap { width: 20px; height: 20px; }
.player-deck-name { font-size: 10px; }
}
.deck-back {
width: clamp(68px, 8vw, 100px);
height: clamp(96px, 11.5vw, 140px);
border-radius:12px;
background:
linear-gradient(
145deg,
#374151,
#111827
);
border:
2px solid rgba(255,255,255,.2);
box-shadow:
0 10px 25px rgba(0,0,0,.5);
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
/* The player's own deck (data-player="p1" — always the human seat, see
js/game-main.js) — colored the same way the opponents' .other-deck-back
already is, from the live --p1 variable set in
js/ui/cardColor-ui.js applyCardColors(). */
.deck-back[data-player="p1"] {
background:
linear-gradient(
145deg,
var(--p1),
#0d1a0d
);
}
#deckCount {
position:relative;
font-size:32px;
font-weight:bold;
color:white;
}
/* ==========================================================
OTHER PLAYER HANDS
========================================================== */
#otherPlayers {
flex-direction:column;
align-items:center;
gap:20px;
}
#topPlayer {
display:flex;
flex-direction:column;
align-items:center;
}
#sidePlayers {
display:flex;
justify-content:space-between;
width:100%;
}
.other-hand {
display:flex;
gap:6px;
}
.card-back {
width: clamp(32px, 5.5vw, 85px);
height: clamp(45px, 8vw, 120px);
border-radius:8px;
border:
1px solid rgba(255,255,255,.25);
box-shadow:
0 5px 12px rgba(0,0,0,.4);
position:relative;
overflow:hidden;
}
.card-back[data-player="p1"] {
background:
linear-gradient(
145deg,
var(--p1),
#111827
);
}
.card-back[data-player="p2"] {
background:
linear-gradient(
145deg,
var(--p2),
#111827
);
}
.card-back[data-player="p3"] {
background:
linear-gradient(
145deg,
var(--p3),
#111827
);
}
.card-back[data-player="p4"] {
background:
linear-gradient(
145deg,
var(--p4),
#111827
);
}
.card-back::after {
content:"";
position:absolute;
inset:0;
background-image:
url("../assets/img/branding/logo-small.png");
background-repeat:no-repeat;
background-position:center;
background-size:60%;
opacity:0.85;
}
.player-label {
margin-bottom:8px;
font-size:14px;
color:var(--text-muted);
}
/* ==========================================================
SCOREBOARD
========================================================== */
#scoreboard {
position: fixed;
top: 10px;
left: 10px;
}
/* ==========================================================
MODAL
========================================================== */
.modal {
position: fixed;
inset: 0;
background:
rgba(0,0,0,.85);
backdrop-filter:
blur(6px);
display: flex;
justify-content: center;
align-items: center;
/* Home (index.html) is itself a .screen-overlay at z-index 9999
(see above) — About Developer and the How-to-Play tutorial are
genuine modals opened *on top of* Home, not a separate page, so
they need a higher z-index or they'd render underneath it. */
z-index: 10000;
}
.modal-content {
width: min(700px, 92vw);
max-width: 92%;
padding: 24px;
border-radius: var(--radius-md);
max-height: 88vh;
max-height: 88dvh; /* mobile-browser-chrome-safe, see .screen-overlay */
overflow-y: auto;
z-index: 2000;
color: white;
border:
1px solid var(--border);
background: rgba(10,31,15,0.82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow:
0 20px 60px rgba(0,0,0,.6);
/* Popup Panel Architecture: Header → Scrollable Body → Fixed
Footer. Existing modals (no .modal-body/.modal-footer children)
are unaffected — display:flex + flex-direction:column lays out
a set of plain block children identically to the old block
flow, so they keep scrolling as one box exactly as before. Any
modal that opts in with an explicit .modal-body wrapper (and
optionally .modal-footer) instead gets a header/footer that
stay put while only the body scrolls — see the :has() rule
below and Settings/Profile/Card Guide/Feedback for real
examples. */
display: flex;
flex-direction: column;
}
.modal-content:has(.modal-body) {
padding: 0;
overflow: hidden; /* .modal-body scrolls instead of the shell */
}
/* .modal-form: an intermediate wrapper (typically a