/* ========================================================== 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); } /* ========================================================== 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 { width: 350px; 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; 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; justify-content:center; align-items:center; text-align:center; padding:40px; background:var(--bg-panel); box-sizing:border-box; } /* لوگو */ .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: space-between; 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; line-height: 1.2; } .card-power { font-size: clamp(11px, 18cqw, 18px); font-weight: 900; color: #fbbf24; flex-shrink: 0; margin-left: 4%; 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; 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); } /* ── About Developer panel redesign ── Profile-card layout: close button pinned to the corner, a large developer avatar centered up top, title below it, then the usual centered body copy and action row. Replaces the old .help-header (title+close in a row) for this modal only — that shared class is still used as-is by the other modals. */ .about-panel { position: relative; text-align: center; padding-top: 40px; } .about-close { position: absolute; top: 14px; right: 14px; } [dir="rtl"] .about-close { right: auto; left: 14px; } .about-avatar { display: flex; justify-content: center; margin-bottom: 10px; } .about-avatar [data-icon] { width: 96px; height: 96px; } .about-avatar .icon-image { width: 100%; height: 100%; object-fit: contain; } .about-title { margin: 0 0 18px; font-size: clamp(20px, 5vw, 26px); font-weight: 700; color: var(--text-main); } .about-content{ text-align:center; line-height:1.7; font-size:15px; } .about-content strong{ font-weight:700; } /* ── Lucky Wheel — Coming Soon (index.html #luckyWheelModal) ────── Same visual language as .about-panel above (dark-glass popup, centered icon + title + copy) rather than a new look. Only #luckyWheelBody's contents are expected to change when a real implementation replaces the Coming Soon state — this shell/layout is meant to stay. */ .lucky-wheel-panel { position: relative; text-align: center; padding-top: 40px; } .lucky-wheel-close { position: absolute; top: 14px; right: 14px; } [dir="rtl"] .lucky-wheel-close { right: auto; left: 14px; } .lucky-wheel-title { margin: 0 0 18px; font-size: clamp(20px, 5vw, 26px); font-weight: 700; color: var(--text-main); } .lucky-wheel-body { display: flex; flex-direction: column; align-items: center; gap: 12px; } .lucky-wheel-illustration { display: flex; justify-content: center; margin-bottom: 4px; } .lucky-wheel-illustration [data-icon] { font-size: 72px; line-height: 1; } .lucky-wheel-illustration .icon-image { width: 96px; height: 96px; object-fit: contain; } .lucky-wheel-desc { margin: 0; max-width: 260px; line-height: 1.6; font-size: 15px; color: var(--text-muted); } /* Row wrapper for the "Visit Website" / "Give Feedback" pair — keeps them side by side on one row (same height, same baseline) instead of relying on inline-element wrapping, which could drop the second button to its own line depending on available width. */ .about-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:15px; } .website-link{ display:inline-flex; align-items:center; margin-top:0; padding:10px 20px; border-radius:10px; background:var(--accent); color:white; text-decoration:none; font-weight:600; transition:.3s; } .website-link:hover{ opacity:.8; } .hidden { display: none; } .icon{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:24px; } [data-icon]{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; } .icon-image{ width:2em; height:2em; object-fit:contain; display:inline-block; vertical-align:middle; } /* ========================================================== ANIMAL GRID ========================================================== */ #animalGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(80px,10vw,120px), 1fr)); gap: 14px; align-items: start; justify-items: center; } /* ========================================================== Help COMPONENTS ========================================================== */ .help-layout { display: flex; flex-direction: column; gap: 16px; } .help-header { display: flex; justify-content: space-between; align-items: center; } .help-card-emoji { font-size: 42px; } .help-card-power { font-size: 24px; color: var(--accent); font-weight: bold; } .help-card-detail { text-align: center; } .help-card-detail h2 { font-size: 26px; color: #ffffff; } .help-divider, .settings-divider { width: 100%; height: 1px; background: rgba(255,255,255,.15); margin: 24px 0 16px; } .tutorial-text p{ margin: 0 0 6px 0; line-height: 1.2; } .tutorialPrevBtn, .tutorialNextBtn { background-color: transparent; background-repeat: no-repeat; border: none; } .animal-guide-title { text-align: center; margin: 0 0 20px; font-size: 1.2rem; font-weight: 700; color: var(--text-main); } .help-card-detail h3 { margin-top: 20px; color: var(--accent); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } .desc-text { color: var(--text-muted); line-height: 1.5; } .detail-emoji { font-size: 72px; margin-bottom: 10px; } /* ========================================================== POWER BADGE ========================================================== */ .power-badge { display: inline-block; padding: 8px 16px; border-radius: 20px; background: var(--accent); color: white; font-weight: bold; margin-bottom: 20px; } /* ========================================================== EXAMPLE SECTION ========================================================== */ .example-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .example-box { flex: 1; background: rgba(10,31,15,0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid #374151; border-radius: var(--radius-md); padding: 12px; position: relative; white-space: pre-line; font-family: monospace; } .example-box.before { border-left: 3px solid #ef4444; } .example-box.after { border-left: 3px solid #22c55e; } .example-box .label { font-size: 12px; opacity: .6; margin-bottom: 6px; } .example-box .text { font-family: monospace; font-size: 14px; white-space: pre-line; } .arrow { font-size: 22px; opacity: .7; } /* ========================================================== BUTTON SYSTEM ========================================================== */ .icon-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; } .icon-btn:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.3); } .icon-btn.close, .panel-close { color: #ef4444; border-color: #ef4444; } .icon-btn.close:hover, .panel-close:hover { background: rgba(239,68,68,.15); } /* ========================================================== CHAT & LOG ========================================================== */ #chatPanel { width: 100%; height: 140px; padding: 12px; } #gameLog { width: 100%; height: 260px; padding: 12px; display: flex; flex-direction: column; flex: 1; } #logEntries { flex: 1; overflow-y: auto; font-size: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 0; } .log-entry { padding: 6px 8px; background: rgba(255,255,255,.05); border-radius: 8px; } .player-name{ font-weight: 700; } .log-entry.p1 .player-name{ color: var(--p1); } .log-entry.p2 .player-name{ color: var(--p2); } .log-entry.p3 .player-name{ color: var(--p3); } .log-entry.p4 .player-name{ color: var(--p4); } /* ========================================================== KANGAROO MODAL ========================================================== */ .kangaroo-choice { width: 350px; text-align:center; } .kangaroo-buttons { display:flex; justify-content:center; gap:20px; margin-top:20px; } .kangaroo-buttons button { width:120px; height:60px; border-radius:12px; border:1px solid var(--border); background:#0d1a0d; color:white; font-size:18px; cursor:pointer; transition:.2s; } .kangaroo-buttons button:hover { background:#132213; transform:translateY(-3px); } /* ========================================================== MOBILE MENU BASE STATE ========================================================== */ #mobileMenu, #mobileTabs { display: none; } /* ========================================================== RESPONSIVE SYSTEM Single mobile breakpoint. Previous CSS had multiple duplicated 900px blocks. ========================================================== */ /* ========================================================== VERY SMALL DEVICES Optional fallback. Kept separate because it changes structure. ========================================================== */ /* ============================================================ MOBILE-ONLY BUTTONS — hidden on desktop ============================================================ */ .mobile-only-btn { display: none; } /* ============================================================ TABLET (601px – 1024px) ============================================================ */ /* ============================================================ TABLET (601px – 1024px) ============================================================ */ @media (max-width: 1024px) and (min-width: 601px) { #pageLayout { grid-template-columns: 220px 1fr; gap: 12px; padding: 8px; } #leftSidebar { width: 220px; } #gameLayout { grid-template-columns: clamp(160px, 20vw, 260px) 1fr clamp(160px, 20vw, 260px); gap: 14px; } #topBarContent { height: clamp(70px, 12vw, 140px); grid-template-columns: clamp(100px, 18vw, 220px) 1fr clamp(100px, 18vw, 220px); } .turn-label { font-size: clamp(13px, 2vw, 22px); } .round-label { font-size: clamp(11px, 1.6vw, 16px); } #queue .card, .queue-slot { width: clamp(58px, 7.5vw, 96px); height: clamp(82px, 10.5vw, 135px); } #playerHand .card, .deck-back { width: clamp(58px, 7vw, 90px); height: clamp(82px, 10vw, 126px); } #queue { gap: clamp(8px, 1.5vw, 20px); } #partyCards .card, #trashCards .card { width: clamp(50px, 6vw, 80px); height: clamp(70px, 8.5vw, 110px); } #animalGrid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; } } /* ============================================================ GLOBAL — mobile-only elements hidden on desktop ============================================================ */ /* mobile leaderboard: only shown inside the ≤600px block */ #mobileLeaderboard { display: none; } /* mobile-only buttons hidden on desktop */ .mobile-only-btn { display: none; } /* other-deck styled like player deck */ .other-deck { margin-top: 4px; display: flex; justify-content: center; } .other-deck-back { position: relative; width: clamp(32px, 5vw, 70px); height: clamp(45px, 7vw, 95px); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2); overflow: hidden; } .other-deck-back::before { content: ""; } .other-deck-count { position: relative; z-index: 1; font-size: clamp(12px, 3vw, 18px); font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); } .other-deck-back[data-player="p1"] { background: linear-gradient(145deg, var(--p1), #0d1a0d); } .other-deck-back[data-player="p2"] { background: linear-gradient(145deg, var(--p2), #0d1a0d); } .other-deck-back[data-player="p3"] { background: linear-gradient(145deg, var(--p3), #0d1a0d); } .other-deck-back[data-player="p4"] { background: linear-gradient(145deg, var(--p4), #0d1a0d); } /* ============================================================ NEW FEATURES — Animations, Warning, Queue, End Game ============================================================ */ /* Warning popup */ #warningPopup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.9); background: rgba(10,31,15,0.95); backdrop-filter: blur(18px); border: 1px solid rgba(249,115,22,0.7); color: #fff; padding: 18px 28px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; text-align: center; min-width: 220px; box-shadow: 0 8px 40px rgba(0,0,0,.7); } #warningPopup.visible { opacity: 1; transform: translate(-50%,-50%) scale(1); } /* Turn pulse — always the human seat's hand (p1), so it follows whatever color p1 is currently assigned via --p1-rgb. */ @keyframes turnPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb), 0.7); } 70% { box-shadow: 0 0 0 10px rgba(var(--p1-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb), 0); } } #playerHand.my-turn .card { animation: turnPulse 1.5s infinite; cursor: pointer; } #playerHand.my-turn .card:hover { transform: translateY(-8px) scale(1.06); } /* Card enter */ @keyframes cardEnter { from { opacity: 0; transform: scale(0.7) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .card-enter { animation: cardEnter 0.32s cubic-bezier(.4,0,.2,1) forwards; } /* ============================================================ PRESENTATION LAYER — semantic-event animations (js/presentation/director.js + js/ui/game-ui.js presenter) ============================================================ */ /* Input lock: dim the hand while the Director is animating a turn, so it visually reads as "not interactive right now". Deliberately does NOT set pointer-events:none any more — that used to also block the hold-to-info long-press gesture (js/ui/longPress.js) any time it wasn't this player's turn (director.isBusy() is true for most of an opponent's turn), even though holding is meant to work regardless of whose turn it is. Actually preventing a card from being PLAYED mid-sequence is already handled in JS — see playThisCard()'s own director.isBusy() / isMyTurn checks in game-ui.js — so this class only needs to carry the visual "locked" look now. */ body.gameplay-locked #playerHand .card { opacity: 0.82; filter: saturate(0.85); } /* Small "joining the line" settle after a card lands at the back of the queue. */ @keyframes cardJoinsLine { 0% { transform: scale(1.08) translateY(-6px); } 60% { transform: scale(0.97) translateY(1px); } 100% { transform: scale(1) translateY(0); } } .card-joins-line { animation: cardJoinsLine 0.24s cubic-bezier(.4,0,.2,1); } /* Opponent card-back → real card reveal flip. */ @keyframes cardReveal { 0% { transform: rotateY(90deg) scale(0.92); opacity: 0.4; } 100% { transform: rotateY(0deg) scale(1); opacity: 1; } } .card-reveal { animation: cardReveal 0.26s ease-out; } /* Hippo pushing a weaker card backward — a "flinch and give ground" reaction, distinct from being sent to trash. */ @keyframes cardFleeReact { 0% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(-6px) rotate(-3deg); } 70% { transform: translateX(4px) rotate(2deg); } 100% { transform: translateX(0) rotate(0deg); } } .card-flee-react { animation: cardFleeReact 0.22s ease-in-out; } .card-fleeing { filter: brightness(0.92); } /* Removal reaction — plays in place, just before the card leaves the queue for good. */ @keyframes cardRemovedReact { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(0.92) rotate(-4deg); } 50% { transform: scale(1.03) rotate(3deg); } 100% { transform: scale(0.94) rotate(0deg); opacity: 0.75; } } .card-removed-react { animation: cardRemovedReact 0.26s ease-in-out forwards; } /* Crocodile's bite — sharper, quicker snap than a generic removal. */ @keyframes cardEatenReact { 0% { transform: scale(1); } 30% { transform: scale(0.8) rotate(-6deg); } 60% { transform: scale(1.05) rotate(4deg); } 100% { transform: scale(0.7); opacity: 0.5; } } .card-eaten-react { animation: cardEatenReact 0.26s ease-in forwards; } /* Flight toward Trash: shrink + desaturate as it travels. */ .card-to-trash { filter: grayscale(0.6) brightness(0.85); opacity: 0.85; } @keyframes cardInTrash { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(0.94); opacity: 1; } } .card-in-trash { animation: cardInTrash 0.22s ease-out forwards; } /* Queue-resolution "result" cards — anticipation before the trip to Party. */ @keyframes cardResultAnticipation { 0% { transform: scale(1) translateY(0); } 30% { transform: scale(0.94) translateY(3px); } 70% { transform: scale(1.12) translateY(-8px) rotate(-2deg); } 100% { transform: scale(1.08) translateY(-2px) rotate(0deg); } } .card-result-anticipation { animation: cardResultAnticipation 0.26s cubic-bezier(.34,1.4,.64,1) forwards; } .card-to-party { filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.55)); } @keyframes cardPartyCelebrate { 0% { transform: scale(1.1) rotate(-3deg); } 30% { transform: scale(0.95) rotate(2deg); } 55% { transform: scale(1.06) rotate(-1deg); } 100% { transform: scale(1) rotate(0deg); } } .card-party-celebrate { animation: cardPartyCelebrate 0.42s cubic-bezier(.34,1.2,.64,1); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35), var(--shadow-card); } /* Queue-full pause beat. */ @keyframes queueFullFlash { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.65); } 50% { box-shadow: 0 0 0 14px rgba(250, 204, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } } .queue-full-flash { animation: queueFullFlash 0.7s ease-out; } /* ── Ability-specific visual language ────────────────────────── Each animal's rule gets its own motion flavor so the *shape* of the animation hints at what happened, not just that something happened. */ /* Lion — aggressive rush to the front: a low, fast dash with a hard ease-in, not a polite slide. */ .card-lion-rush { filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.45)); } @keyframes cardLionRushTilt { 0% { transform: rotate(0deg) scale(1); } 40% { transform: rotate(-3deg) scale(1.04); } 100% { transform: rotate(0deg) scale(1); } } .card-lion-rush.card-lion-rush { animation: cardLionRushTilt 0.32s ease-out; } /* Hippo — a heavy, slower shove; the displaced card resists a touch on its way out of the way. */ .card-heavy-push { filter: brightness(0.97); } @keyframes cardHeavyPushSquash { 0% { transform: scaleX(1) scaleY(1); } 35% { transform: scaleX(1.08) scaleY(0.94); } 100% { transform: scaleX(1) scaleY(1); } } .card-heavy-push.card-heavy-push { animation: cardHeavyPushSquash 0.46s ease-out; } /* Giraffe — one crisp little hop over its neighbor. */ @keyframes cardHop { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-14px) scale(1.03); } 100% { transform: translateY(0) scale(1); } } .card-hop.card-hop { animation: cardHop 0.3s cubic-bezier(.34,1.4,.64,1); } /* Sloth Bear — sticks close behind whoever it's following: a tight, short snap rather than a free slide. */ @keyframes cardStick { 0% { transform: scale(0.96); } 100% { transform: scale(1); } } .card-stick.card-stick { animation: cardStick 0.22s ease-out; } /* Sloth Bear being pushed — resists for a beat ("sticky"), then drags along, distinct from a card that simply gives ground. */ @keyframes cardStickyReact { 0% { transform: translateX(0); } 50% { transform: translateX(-3px); } 100% { transform: translateX(0); } } .card-sticky-react { animation: cardStickyReact 0.24s ease-in-out 2; } .card-sticky-drag { filter: brightness(0.95); } /* Kangaroo's jump — a bigger hop arc than a plain slide. */ @keyframes cardJumpArc { 0% { transform: translateY(0) scale(1) rotate(0deg); } 40% { transform: translateY(-30px) scale(1.06) rotate(-4deg); } 100% { transform: translateY(0) scale(1) rotate(0deg); } } .card-jump-arc { animation: cardJumpArc 0.46s cubic-bezier(.34,1.2,.64,1); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); } /* Snake's sort — a small chaotic wiggle while cards cross paths at once. */ @keyframes cardChaosMove { 0% { transform: rotate(0deg); } 25% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); } } .card-chaos-move.card-chaos-move { animation: cardChaosMove 0.38s ease-in-out; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4); } /* Seal's reversal — a dramatic full flip mid-flight. */ @keyframes cardReverseFlip { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } .card-reverse-flip.card-reverse-flip { animation: cardReverseFlip 0.48s ease-in-out; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.4); } /* A firm, non-moving "block" reaction — Zebra stopping Hippo/Crocodile, or a Lion holding its ground against a second Lion. */ @keyframes cardBlockReact { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 55% { transform: scale(0.97); } 100% { transform: scale(1); } } .card-block-react { animation: cardBlockReact 0.24s ease-out; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.5); } /* Crocodile's satisfied recoil after eating. */ @keyframes cardCrocRecoil { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.1) rotate(3deg); } 60% { transform: scale(0.96) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); } } .card-croc-recoil { animation: cardCrocRecoil 0.26s ease-out; } /* Scared off (Lion's Monkeys, Monkey pair vs Crocodile/Hippo) — a jittery flinch, faster and sharper than an ordinary "outmatched" removal. */ @keyframes cardScaredReact { 0% { transform: translate(0,0) rotate(0deg); } 20% { transform: translate(-3px,-2px) rotate(-5deg); } 40% { transform: translate(3px,1px) rotate(4deg); } 60% { transform: translate(-2px,0) rotate(-3deg); } 100% { transform: translate(0,0) rotate(0deg); opacity: 0.75; } } .card-scared-react { animation: cardScaredReact 0.24s ease-in-out forwards; } /* Bounced off another Lion — a firm recoil-back rather than fleeing or being outmatched. */ @keyframes cardBlockedOutReact { 0% { transform: translateX(0) scale(1); } 30% { transform: translateX(6px) scale(0.95); } 100% { transform: translateX(-4px) scale(0.9); opacity: 0.75; } } .card-blocked-out-react { animation: cardBlockedOutReact 0.26s ease-out forwards; } /* ── Anticipation: the wind-up beat before an ability's main action ─── */ @keyframes cardAnticipateRush { 0% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(-4px) scaleX(0.93); } } .card-anticipate-rush { animation: cardAnticipateRush 0.18s ease-in forwards; } @keyframes cardAnticipatePush { 0% { transform: scaleX(1); } 100% { transform: scaleX(0.9) translateX(-3px); } } .card-anticipate-push { animation: cardAnticipatePush 0.2s ease-in forwards; } @keyframes cardAnticipateBite { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1.02); } } .card-anticipate-bite { animation: cardAnticipateBite 0.22s ease-in-out forwards; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4); } @keyframes cardAnticipateJump { 0% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(4px) scaleY(0.85); } } .card-anticipate-jump { animation: cardAnticipateJump 0.18s ease-in forwards; } @keyframes cardAnticipateShimmer { 0% { transform: rotate(0deg); } 33% { transform: rotate(3deg); } 66% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); } } .card-anticipate-reverse, .card-anticipate-sort { animation: cardAnticipateShimmer 0.2s ease-in-out; } @keyframes cardAnticipateHop { 0% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(-3px) scaleY(1.08); } } .card-anticipate-hop { animation: cardAnticipateHop 0.12s ease-out forwards; } @keyframes cardAnticipateGeneric { 0% { transform: scale(1); } 100% { transform: scale(1.03); } } .card-anticipate-generic { animation: cardAnticipateGeneric 0.15s ease-out forwards; } /* Kangaroo hopping over a card — a light "duck" flash, not a full reaction, so a 2-card jump doesn't feel heavier than a 1-card one. */ @keyframes cardHoppedOver { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.92); } 100% { transform: scaleY(1); } } .card-hopped-over { animation: cardHoppedOver 0.22s ease-in-out; } /* Monkey troop banding together before scaring something off. */ @keyframes cardMonkeyGroup { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } .card-monkey-group { animation: cardMonkeyGroup 0.2s ease-in-out; } /* Temporarily dim everything an ability isn't touching, so the eye goes straight to what matters. */ .card.queue-dimmed { opacity: 0.4; filter: grayscale(0.4); transition: opacity 0.2s ease, filter 0.2s ease; } /* Confetti burst over the queue when it fills up. */ .confetti-layer { position: fixed; pointer-events: none; overflow: visible; z-index: 9998; } .confetti-piece { position: absolute; top: 40%; width: 7px; height: 12px; border-radius: 2px; opacity: 0.95; animation: confettiFall 0.85s ease-in forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(90px) rotate(340deg); opacity: 0; } } /* Reduced motion: keep the semantic sequence (each step still shows up, see js/presentation/flip.js), just drop the flourish. */ @media (prefers-reduced-motion: reduce) { .card-joins-line, .card-reveal, .card-jump-arc, .card-flee-react, .card-removed-react, .card-eaten-react, .card-in-trash, .card-result-anticipation, .card-party-celebrate, .queue-full-flash, .card-lion-rush, .card-heavy-push, .card-hop, .card-stick, .card-sticky-react, .card-chaos-move, .card-reverse-flip, .card-block-react, .card-croc-recoil, .card-scared-react, .card-blocked-out-react, .card-anticipate-rush, .card-anticipate-push, .card-anticipate-bite, .card-anticipate-jump, .card-anticipate-reverse, .card-anticipate-sort, .card-anticipate-hop, .card-anticipate-generic, .card-hopped-over, .card-monkey-group { animation: none !important; } .card.queue-dimmed { transition: none; } .confetti-layer { display: none; } } /* Guidance prompt (asked once per new game, before it starts) */ .guide-prompt-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; } .guide-prompt-no { background: rgba(255,255,255,0.08); color: inherit; } .guide-prompt-dontshow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 0.85rem; opacity: 0.75; cursor: pointer; user-select: none; } .guide-prompt-dontshow input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } /* ============================================================ CONTEXTUAL CARD GUIDANCE (js/ui/cardGuidance-ui.js — popup shown after a played card's ability resolves, explaining that specific ability with the real before/after queue.) ============================================================ */ .guide-modal-content { width: min(480px, 92vw); text-align: left; } [dir="rtl"] .guide-modal-content { text-align: right; } .guide-header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .guide-visual-img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-md); background: rgba(255,255,255,0.06); } .guide-visual-emoji { font-size: 40px; line-height: 1; } .guide-title-block h3 { margin: 0 0 2px; font-size: 18px; } .guide-ability-title { font-size: 13px; font-weight: 700; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.03em; } .guide-desc { font-size: 14px; line-height: 1.55; opacity: 0.92; margin: 6px 0 16px; } .guide-diagram { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .guide-queue-block { flex: 1 1 140px; min-width: 120px; } .guide-queue-label { font-size: 11px; opacity: 0.6; margin-bottom: 6px; text-align: center; } .guide-queue-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 44px; } .guide-queue-empty { opacity: 0.4; font-size: 12px; } .guide-diagram-arrow { font-size: 20px; opacity: 0.5; flex: 0 0 auto; } [dir="rtl"] .guide-diagram-arrow { transform: scaleX(-1); } .guide-chip { position: relative; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; } .guide-chip-img { width: 26px; height: 26px; object-fit: contain; } .guide-chip-emoji { font-size: 18px; line-height: 1; } .guide-chip-power { position: absolute; bottom: -4px; right: -4px; font-size: 9px; font-weight: 700; background: var(--accent, #22c55e); color: #06210c; border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; } .guide-chip-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 12px; } .guide-chip-affected { border-width: 2px; } .guide-chip-removed { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.35); } .guide-chip-jumped { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.35); } .guide-chip-escaped { border-color: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,0.35); } .guide-chip-none { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,0.35); } .guide-destination { flex-basis: 100%; } .guide-destination .guide-queue-row { justify-content: flex-start; } .guide-continue-btn { width: 100%; margin-top: 4px; } @media (max-width: 600px) { .guide-modal-content { padding: 18px; } .guide-visual-img, .guide-visual-emoji { width: 48px; height: 48px; } .guide-chip { width: 34px; height: 34px; } .guide-diagram { gap: 6px; } .guide-queue-block { flex-basis: 100%; } .guide-diagram-arrow { flex-basis: 100%; text-align: center; transform: rotate(90deg); } [dir="rtl"] .guide-diagram-arrow { transform: rotate(90deg) scaleX(-1); } } .guide-continue-btn:focus-visible, #stepGuidanceToggle:focus-visible + .switch-track { outline: 2px solid var(--accent, #22c55e); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .guide-reduced-motion .guide-chip { transition: none !important; } } /* Slot numbers */ .slot-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: clamp(22px, 4cqw, 44px); font-weight: 900; color: rgba(255,255,255,0.07); pointer-events: none; user-select: none; z-index: 0; } .queue-slot { position: relative; } /* Queue flanking icons */ #queueWithIcons { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 20px); justify-content: center; width: 100%; } #queueInner { flex: 1; display: flex; justify-content: center; } #queueInner #queue { display: flex; gap: clamp(6px, 2vw, 30px); } .queue-icon { font-size: clamp(24px, 4vw, 52px); line-height: 1; flex-shrink: 0; opacity: 0.85; } /* End game */ #endGameScreen .screen-content { max-width: 480px; width: 90vw; background: rgba(10,31,15,0.92); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 36px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.6); } #endGameTitle { font-size: clamp(28px, 7vw, 48px); margin: 0 0 8px; } #endGameText { font-size: clamp(14px, 3vw, 18px); opacity: 0.8; margin: 0 0 24px; } .final-score-header, .final-score-row { display: grid; grid-template-columns: 40px 1fr 70px 70px; gap: 8px; padding: 10px 12px; align-items: center; font-size: 14px; } .final-score-header { background: rgba(255,255,255,0.08); border-radius: var(--radius-sm); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; } .final-score-row { border-radius: var(--radius-sm); transition: background 0.2s; } .final-score-row:nth-child(even) { background: rgba(255,255,255,0.04); } .final-score-row.winner-row { background: rgba(59,130,246,0.18); border: 1px solid rgba(59,130,246,0.4); } .rank-badge { font-size: 18px; } .power-score { color: #fbbf24; font-weight: 700; } .party-count { color: #86efac; font-weight: 600; } /* End game — primary actions (Play Again / Return to Home). Two buttons with clear visual hierarchy: Play Again is the filled, higher-emphasis primary action; Return to Home is the outlined secondary action. Row layout on desktop/tablet/mobile-landscape (the only orientation game.html is ever shown in — see the Orientation Gate), stacking only as a narrow-viewport fallback. */ .endgame-actions { display: flex; width: 100%; gap: 12px; margin-top: 28px; flex-wrap: wrap; justify-content: center; } .endgame-actions .screen-btn { margin-top: 0; flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; box-sizing: border-box; } .endgame-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 18px; line-height: 1; flex-shrink: 0; } .endgame-btn-icon .icon-image { width: 100%; height: 100%; object-fit: contain; } .endgame-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(189, 93, 56, 0.35); } .endgame-btn-primary:hover { filter: brightness(1.08); } .endgame-btn-primary:active { filter: brightness(0.96); } .endgame-btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--text-main); border: 1px solid rgba(255, 255, 255, 0.2); } .endgame-btn-secondary:hover { background: rgba(255, 255, 255, 0.14); } .endgame-btn-secondary:active { background: rgba(255, 255, 255, 0.06); } @media (max-width: 420px) { .endgame-actions { flex-direction: column; } .endgame-actions .screen-btn { width: 100%; } } /* Help */ .help-tip { background: rgba(255,255,255,0.06); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--text-muted); } .help-text { font-size: 14px; line-height: 1.7; color: var(--text-muted); background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; } /* Party/Trash: hover no longer enlarges the card — these piles are read-only history, not playable/selectable, so a hover lift implied an interactivity that wasn't there. Hold-to-show-help (see js/ui/longPress.js) is the only interaction left on these cards, and it already has its own long-press-active visual feedback. */ #partyCards .card:hover, #trashCards .card:hover { transform: none; box-shadow: var(--shadow-card); z-index: auto; cursor: default; } #partyCards, #trashCards { overflow: visible; } /* ============================================================ MOBILE (≤ 600px) — single unified block ============================================================ */ @media (max-width: 600px) { /* ── Show mobile-only buttons ── */ .mobile-only-btn { display: flex; } /* ── Hide leaderboard button (inline version used) ── */ #leaderboardBtn { display: none !important; } /* ── Layout ── */ #pageLayout { display: block; padding: 0; } #leftSidebar { display: none; } #gameColumn { display: flex; flex-direction: column; min-height: 100dvh; } /* ── Top bar: logo top-center, left=turn/round, right=buttons ── */ #topBar { position: sticky; top: 0; z-index: 100; background: var(--bg-main); margin-bottom: 0; } #topBarContent { display: grid !important; grid-template-areas: "logo logo" "left right" !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; height: auto !important; padding: 8px 12px 6px !important; gap: 4px 0; } #topCenter { grid-area: logo !important; justify-self: center; display: flex; justify-content: center; align-items: center; } #topCenter picture img { height: clamp(44px, 14vw, 72px) !important; width: auto; object-fit: contain; } #topLeft { grid-area: left !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 0 !important; } .turn-label { font-size: clamp(10px, 2.8vw, 14px) !important; } .round-label { font-size: clamp(9px, 2.4vw, 12px) !important; } .turn-timer-label { font-size: clamp(9px, 2.4vw, 12px) !important; } .turn-divider { display: none; } #topRight { grid-area: right !important; display: flex; align-items: center; gap: 5px !important; padding: 0 !important; } .top-btn { width: clamp(28px, 8vw, 36px) !important; height: clamp(28px, 8vw, 36px) !important; font-size: 13px; } /* ── gameLayout: flex column, controlled order ── */ #gameLayout { display: flex !important; flex-direction: column; flex: 1; gap: 0; padding-bottom: 120px; } /* ── ORDER: leaderboard → otherPlayers → tabs → queue → hand ── */ #mobileLeaderboard { order: 0; } #otherPlayers { order: 1; } #mobileTabs { order: 2; } #centerArea { order: 3; } /* ── Inline leaderboard ── */ #mobileLeaderboard { display: block !important; margin: 6px 12px; padding: 8px 10px; background: rgba(255,255,255,0.05); border-radius: var(--radius-sm); box-sizing: border-box; } #mobileLeaderboard h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; margin: 0 0 6px; } #mobileLeaderboard .leaderboard-row { display: grid; column-gap: 14px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } /* ── Other players ── */ #otherPlayers { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; margin-bottom: 4px; } #topPlayer, #leftPlayer, #rightPlayer { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; } #sidePlayers { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } .player-label { font-size: 11px; white-space: nowrap; } .other-hand { gap: 3px; display: flex; } /* player's own hand card-back */ .card-back { width: clamp(44px, 12vw, 64px) !important; height: clamp(62px, 17vw, 90px) !important; } /* opponent hand cards: fixed small px, independent of viewport */ .other-hand .card-back { width: 24px !important; height: 34px !important; } .other-deck-back { width: clamp(44px, 12vw, 64px) !important; height: clamp(62px, 17vw, 90px) !important; } .other-deck-count { font-size: clamp(12px, 4vw, 18px); } /* ── mobileTabs (Party / Trash) ── */ #mobileTabs { display: flex; gap: 8px; justify-content: center; padding: 6px 12px 4px; } #partyTab, #trashTab { flex: 1; padding: 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0d1a0d; color: white; cursor: pointer; transition: .2s; font-size: 13px; } #partyTab:hover, #trashTab:hover { background: #132213; } #partyTab.active, #trashTab.active { border-color: var(--accent); background: rgba(189,93,56,.2); } /* ── Party / Trash popup ── */ #partyArea, #trashArea { display: none; position: fixed; top: 20px; left: 12px; right: 12px; bottom: 20px; z-index: 3000; background: rgba(10,31,15,0.92); backdrop-filter: blur(18px); border-radius: var(--radius-lg); padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow-y: auto; } #partyArea.mobile-open, #trashArea.mobile-open { display: flex; flex-direction: column; } body.popup-open { overflow: hidden; } /* ── centerArea ── */ #centerArea { display: flex; flex-direction: column; flex: 1; align-items: center; padding: 6px 0 0; min-height: 0; } /* ── Queue ── */ #queueArea { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 12px; box-sizing: border-box; } #queue { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: center; width: 100%; gap: 5px; scrollbar-width: none; padding: 4px 0; box-sizing: border-box; } #queue::-webkit-scrollbar { display: none; } #queue .card, .queue-slot { flex: 0 0 auto; width: clamp(52px, 14vw, 80px); height: clamp(74px, 20vw, 114px); } /* ── Hand: pinned to bottom ── */ #handArea { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--bg-main); border-top: 1px solid var(--border); padding: 8px 12px 16px !important; display: flex; justify-content: center; align-items: center; gap: clamp(6px, 2vw, 14px); box-sizing: border-box; } #playerHand { display: flex; justify-content: center; gap: clamp(4px, 1.5vw, 8px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #playerHand::-webkit-scrollbar { display: none; } #playerHand .card { flex: 0 0 auto; width: clamp(50px, 13vw, 70px); height: clamp(70px, 18vw, 98px); } #deckStack { flex-shrink: 0; } .deck-back { width: clamp(50px, 13vw, 70px); height: clamp(70px, 18vw, 98px); } #deckCount { font-size: clamp(16px, 5vw, 26px); } /* ── General card ── */ .card { width: clamp(52px, 14vw, 80px); height: clamp(74px, 20vw, 114px); } /* ── Party/Trash cards bigger ── */ #partyCards .card, #trashCards .card { width: 62px !important; height: 86px !important; } /* ── All modals: consistent margin ── */ .modal-content { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; box-sizing: border-box; } /* ── Help grid ── */ #animalGrid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .card-info { width: 100% !important; height: auto !important; aspect-ratio: 3/4; } /* ── Warning popup ── */ #warningPopup { font-size: 14px !important; padding: 14px 20px !important; min-width: 180px; z-index: 99999 !important; } } /* ============================================================ VERY SMALL (≤ 380px) ============================================================ */ @media (max-width: 380px) { .top-btn { width: 26px !important; height: 26px !important; font-size: 11px; } #topRight { gap: 3px !important; } #gameLayout { padding-bottom: 100px; } #playerHand .card, .deck-back { width: clamp(44px, 16vw, 58px); height: clamp(62px, 22vw, 82px); } #queue .card, .queue-slot { width: clamp(44px, 16vw, 60px); height: clamp(62px, 22vw, 84px); } } /* ============================================================ DIFFICULTY MODAL ============================================================ */ .difficulty-content { max-width: 480px; width: 90vw; padding: 36px 28px; } .difficulty-content h2 { font-size: clamp(20px, 5vw, 32px); margin: 0 0 6px; } .diff-subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; } #difficultyPanel { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; } .bot-row { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 14px 16px; border-left: 4px solid #4ade80; transition: border-color 0.3s; } /* Each row's left border reflects that seat's *actually selected* card color (js/ui/cardColor-ui.js sets --p2/--p3/--p4 on :root), not the bot's difficulty — difficulty is only shown via the Easy/Medium/Hard toggle and the avatar icon above. Reads live off the shared --p2..--p4 variables, so it updates the instant the color-trigger popover changes a seat's color, no extra JS needed. */ .bot-row[data-player="p2"] { border-left-color: var(--p2, #4ade80); } .bot-row[data-player="p3"] { border-left-color: var(--p3, #f59e0b); } .bot-row[data-player="p4"] { border-left-color: var(--p4, #ef4444); } .bot-avatar { font-size: 36px; width: 52px; text-align: center; flex-shrink: 0; transition: font-size 0.2s; } .bot-info { flex: 1; } .bot-name { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text-main); } .diff-toggle { display: flex; gap: 6px; } .diff-btn { flex: 1; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.15); background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .diff-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-main); } .diff-btn.active[data-diff="easy"] { background: rgba(74,222,128,0.2); border-color: #4ade80; color: #4ade80; } .diff-btn.active[data-diff="medium"] { background: rgba(245,158,11,0.2); border-color: #f59e0b; color: #f59e0b; } .diff-btn.active[data-diff="hard"] { background: rgba(239,68,68,0.2); border-color: #ef4444; color: #ef4444; } /* Player's own row on the Choose Bot Difficulty screen — same shape as a bot row, just without a difficulty toggle, and its left border reflects the player's own card color instead of a bot's. */ .player-row { border-left-color: var(--p1, #4ade80); } /* ── Player avatar display (Choose Bot Difficulty screen) ── Read-only portrait showing the player's current avatar, sized to match the bot avatar icons in the rows below it. Not a button — this screen never lets avatar or name be changed; editing only happens on profile.html (see .profile-avatar-grid further down). */ .player-avatar-mount { flex-shrink: 0; width: 52px; text-align: center; } .player-avatar-display { width: 72px; height: 72px; object-fit: contain; display: block; pointer-events: none; } /* Retained for the legacy avatar-trigger-mount width (still used by other emoji-icon rows); not used for the player avatar anymore. */ .avatar-trigger-mount { flex-shrink: 0; width: 52px; text-align: center; } .avatar-trigger { position: relative; } .avatar-trigger-btn { width: 72px; height: 72px; padding: 0; border-radius: 0; border: none; background: transparent; cursor: pointer; overflow: visible; transition: transform 0.15s ease, filter 0.15s ease; } .avatar-trigger-btn img { width: 100%; height: 100%; object-fit: contain; display: block; } .avatar-trigger-btn:hover { transform: scale(1.06); } .avatar-trigger-btn.open { filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)); } .avatar-trigger-popover { position: absolute; top: calc(100% + 8px); left: 0; display: none; gap: 10px; padding: 10px; background: rgba(10,31,15,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,0.45); z-index: 20; } .avatar-trigger-popover.open { display: flex; } [dir="rtl"] .avatar-trigger-popover { left: auto; right: 0; } .avatar-choice { width: 54px; height: 54px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: transparent; cursor: pointer; overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease; } .avatar-choice img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-choice:hover { transform: scale(1.06); } .avatar-choice.active { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.25); } /* ── Profile modal (js/ui/profile-ui.js) ───────────────────── Display name + avatar — the only place either is edited. Reuses the .avatar-choice look above at a slightly larger size since this grid isn't squeezed into a popover. */ .profile-panel { max-width: 360px; } /* The Achievement Collection redesign (grid + featured card + filter tabs) needs more breathing room than the avatar/name section above — still the same popup (per AGENTS.md rule 4), just a wider variant. Capped by .modal-content's own min(700px, 92vw)/88vh, so this never causes horizontal overflow on any viewport. */ .profile-panel.profile-panel--wide { /* .small-popup sets a fixed width: 350px — override it directly (not just max-width) so the wider layout actually takes effect. */ width: min(560px, 92vw); max-width: 560px; } .profile-content { display: flex; flex-direction: column; gap: 18px; padding: 4px 4px 8px; } .profile-avatar-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* Matches .player-avatar-display's untouched, uncropped look on the Choose Bot Difficulty screen — no border-radius/overflow-clipping, object-fit: contain so the whole illustration shows instead of being cover-cropped into the button's box. */ .profile-avatar-choice { width: 72px; height: 72px; padding: 0; border-radius: 0; border: none; background: transparent; cursor: pointer; overflow: visible; opacity: 0.55; transition: transform 0.15s ease, opacity 0.15s ease; } .profile-avatar-choice img { width: 100%; height: 100%; object-fit: contain; display: block; } .profile-avatar-choice:hover { transform: scale(1.06); } .profile-avatar-choice.active { opacity: 1; transform: scale(1.08); } .profile-name-row { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* ── Name row: read view (text + Edit) vs edit view (input) ── Read view is the default; tapping Edit swaps to the input (see js/ui/profile-ui.js setNameEditMode). Both share the row's centered layout so nothing shifts horizontally when toggling. */ .profile-name-display { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; } .profile-name-text { font-size: 16px; font-weight: 600; color: #fff; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-name-edit-btn { width: 32px; height: 32px; font-size: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); } .profile-name-edit-btn:hover { background: rgba(255,255,255,0.12); } .profile-name-edit-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } /* .hidden (display:none) is defined earlier in this file with the same specificity as the two rules above — without this compound override, source order would let .profile-name-display/.profile- name-edit-wrap's own `display: flex` win, so toggling the `hidden` class from js/ui/profile-ui.js wouldn't actually hide anything. Same pattern as .tut-video-container.hidden elsewhere in this file. */ .profile-name-display.hidden, .profile-name-edit-wrap.hidden { display: none; } .profile-name-edit-wrap .player-name-input { width: min(220px, 68%); } .profile-name-save-btn { flex-shrink: 0; width: 40px; height: 40px; font-size: 16px; border-radius: 12px; border: 1.5px solid rgba(74,222,128,0.4); background: rgba(74,222,128,0.12); } .profile-name-save-btn:hover { background: rgba(74,222,128,0.22); } /* ── Profile → Achievements section ────────────────────────── Reads from js/services/achievements.js, the real achievement system — see js/ui/profile-ui.js renderAchievements() and the .profile-achievement-* rules further down this file for the actual locked/unlocked/progress item styling. */ .profile-achievements { display: flex; flex-direction: column; gap: 10px; } .profile-achievements-title { margin: 0; font-size: 15px; font-weight: 700; color: white; } /* ── Per-seat color trigger (Choose Bot Difficulty screen) ── A small circle showing the seat's current card color; clicking it opens a popover with the full palette. Same underlying color state as the Settings → Player Colors picker (js/ui/cardColor-ui.js). */ .color-trigger-mount { flex-shrink: 0; } .color-trigger { position: relative; } .color-trigger-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); background: var(--swatch-color); padding: 0; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .color-trigger-btn:hover { transform: scale(1.08); } .color-trigger-btn.open { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); } .color-trigger-popover { position: absolute; top: calc(100% + 8px); right: 0; display: none; min-width: 150px; padding: 10px; background: rgba(10,31,15,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,0.45); z-index: 20; } .color-trigger-popover.open { display: block; } [dir="rtl"] .color-trigger-popover { right: auto; left: 0; } /* ============================================================ SETTINGS — sound switch ============================================================ */ .settings-content { padding: 4px 0; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; } .settings-label { font-size: 14px; font-weight: 600; } /* About Developer's entry row inside Settings — a clickable .settings-row (see the shared layout rule above) rather than a new row style, opening the existing #aboutModal nested on top of #settingsModal (js/ui/modal-ui.js already supports this — same pattern as #cardModal over #helpModal). */ .settings-row-link { width: 100%; background: none; border: none; cursor: pointer; color: inherit; font: inherit; text-align: inherit; } .settings-row-link .settings-label { display: flex; align-items: center; gap: 8px; } .settings-row-chevron { opacity: 0.6; flex-shrink: 0; } [dir="rtl"] .settings-row-chevron { transform: scaleX(-1); } .settings-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 0 16px; } /* Switch button */ .switch-btn { position: relative; display: inline-block; cursor: pointer; } .switch-btn input { opacity: 0; width: 0; height: 0; position: absolute; } .switch-track { display: block; width: 44px; height: 24px; background: rgba(255,255,255,0.15); border-radius: 12px; transition: background 0.25s; position: relative; } .switch-btn input:checked + .switch-track { background: var(--accent); } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.25s; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .switch-btn input:checked + .switch-track .switch-thumb { transform: translateX(20px); } /* ============================================================ PANEL HEADER (party / trash / log) ============================================================ */ .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .panel-header h3 { margin: 0; display: flex; align-items: center; gap: 6px; } .panel-close { display: none; } /* shown only on mobile */ /* Info tooltip button */ .panel-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.12); font-size: 11px; cursor: pointer; margin-left: 4px; position: relative; color: var(--text-muted); transition: background 0.2s; } .panel-info-btn:hover { background: rgba(255,255,255,0.25); } /* Desktop tooltip */ .panel-info-btn::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%); background: rgba(10,31,15,0.97); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 12px; font-weight: 400; white-space: normal; width: 220px; padding: 10px 12px; border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 200; line-height: 1.5; } .panel-info-btn::after { bottom: auto; top: 130%; } .panel-info-btn:hover::after { opacity: 1; } /* ============================================================ LEADERBOARD updated rows (4-col) ============================================================ */ .leaderboard-header, .leaderboard-row { display: grid; grid-template-columns: 28px 1fr 40px 44px; gap: 4px; align-items: center; padding: 5px 6px; font-size: 13px; } .leaderboard-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; } .lb-cards { color: #86efac; font-weight: 600; text-align: right; } .lb-score { color: #fbbf24; font-weight: 700; text-align: right; } /* ============================================================ MOBILE LOG PANEL — same as party/trash popup ============================================================ */ .mobile-panel-content { display: flex; flex-direction: column; max-height: 70vh; } #mobileLogContent { flex: 1; overflow-y: auto; padding-top: 8px; } /* ============================================================ MOBILE OVERRIDES ============================================================ */ @media (max-width: 600px) { /* hide desktop leaderboard; show mobile one */ #mobileLeaderboard { display: block !important; order: 0; margin: 6px 12px 0; padding: 8px 10px; background: rgba(255,255,255,0.05); border-radius: var(--radius-sm); box-sizing: border-box; } .mobile-only-btn { display: flex !important; } /* panel close button */ .panel-close { display: flex; } /* info tooltip → popup on mobile (handled via JS) */ .panel-info-btn::after { display: none; } /* hide button tooltip on mobile (no hover) */ .top-btn[data-title]::after { display: none; } /* Log modal same size as party panel */ #logModal .modal-content { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; height: 70vh !important; box-sizing: border-box; } /* all modals consistent margin */ .modal-content { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; box-sizing: border-box; } /* remove stray modal-content that causes scroll */ #pageLayout > .modal-content, #gameColumn > .modal-content, #gameLayout > .modal-content { display: none !important; } /* leaderboard order above mobileTabs */ #gameLayout { display: flex; flex-direction: column; } #mobileLeaderboard { order: 0; } #mobileTabs { order: 1; padding: 6px 12px 4px; } #otherPlayers { order: 2; } #centerArea { order: 3; } /* log, leaderboard btn hidden */ #leaderboardBtn { display: none !important; } /* leaderboard row smaller on mobile */ .leaderboard-header, .leaderboard-row { grid-template-columns: 22px 1fr 34px 38px; font-size: 11px; padding: 4px 4px; column-gap: 16px; } /* hand bottom padding */ #handArea { padding: 12px 12px 28px !important; } /* help 3-col grid */ #animalGrid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .card-info { width: 100% !important; height: auto !important; aspect-ratio: 3/4; } /* top bar */ #topBarContent { display: grid !important; grid-template-areas: "logo logo" "left right" !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; height: auto !important; padding: 8px 12px 6px !important; gap: 4px 0; } #topCenter { grid-area: logo !important; justify-self: center; } #topCenter picture img { height: clamp(44px, 14vw, 72px) !important; width: auto; } #topLeft { grid-area: left !important; flex-direction: column; align-items: flex-start; } #topRight { grid-area: right !important; } .turn-divider { display: none; } } /* Info popup overlay (mobile) */ .info-popup-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; } .info-popup-box { background: rgba(10,31,15,0.97); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: 24px 20px; max-width: calc(100vw - 48px); font-size: 14px; line-height: 1.6; color: #fff; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.6); } /* ============================================================ OTHER PLAYER ROW — avatar left, hand center, deck right ============================================================ */ .other-player-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border-radius: var(--radius-sm); border-left: 3px solid var(--bot-color, rgba(255,255,255,0.2)); background: rgba(255,255,255,0.03); box-sizing: border-box; margin-bottom: 4px; /* Outline (not border) so the current-turn frame below never shifts layout by changing box size — it just switches from invisible to visible/pulsing. */ outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s ease, background-color .2s ease; } /* Whose turn it is, for opponents: a glowing frame in that player's own identity color (--bot-color, same one already used for the resting left border/avatar), so at a glance the active seat is unmistakable — mirrors the pulse already used for the human player's own hand (#playerHand.my-turn) but as a full frame around the row instead of per-card, since opponents' cards are face-down placeholders. */ .other-player-row.current-turn { outline-color: var(--bot-color); background: color-mix(in srgb, var(--bot-color) 14%, rgba(255,255,255,0.03)); animation: turnPulseRow 1.5s infinite; } @keyframes turnPulseRow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bot-color) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .other-player-left { display: flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 60px; } .other-avatar { font-size: 20px; line-height: 1; flex-shrink: 0; } .other-player-right { flex-shrink: 0; } .other-hand { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; justify-content: center; } /* Smaller card-backs for opponent hands on desktop */ .other-hand .card-back { width: clamp(20px, 2.8vw, 42px); height: clamp(28px, 4vw, 60px); } /* ── leftSidebar also constrained ── */ #leftSidebar { overflow-y: auto; } /* ── centerArea fills remaining space ── */ #centerArea { overflow: hidden; min-height: 0; } @media (max-width: 600px) { .other-player-row { gap: 6px; padding: 3px 6px; margin-bottom: 3px; } .other-avatar { font-size: 16px; } .other-player-left { min-width: 50px; gap: 3px; } } /* ========================================================== TUTORIAL — redesigned help-page style ========================================================== */ .tut-panel { width: min(640px, 92vw); padding: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; border-radius: var(--radius-lg); background: rgba(10, 28, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 32px 80px rgba(0,0,0,0.7); } /* Header */ .tut-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); } .tut-header-left { display: flex; align-items: center; gap: 10px; } .tut-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .tut-counter { font-size: 0.75rem; color: var(--text-muted); opacity: 0.65; } /* Progress bar */ .tut-progress-track { width: 100%; height: 3px; background: rgba(255,255,255,0.08); } .tut-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #e8834a); transition: width 0.35s cubic-bezier(.4,0,.2,1); width: 0%; } /* Body */ .tut-body { display: flex; flex-direction: column; align-items: center; padding: 32px 28px 20px; gap: 24px; min-height: 220px; } .tut-image { width: 100%; max-height: 180px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.07); display: none; } .tut-content { text-align: center; flex: 1; } .tut-title { font-size: clamp(1.15rem, 3.5vw, 1.55rem); font-weight: 800; color: #ffffff; margin: 0 0 16px; line-height: 1.2; } .tut-text { color: var(--text-muted); font-size: clamp(0.88rem, 2.5vw, 0.97rem); line-height: 1.65; max-width: 480px; margin: 0 auto; } .tut-text p { margin: 0 0 8px; } .tut-text p:last-child { margin-bottom: 0; } /* Footer */ .tut-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 22px; border-top: 1px solid rgba(255,255,255,0.07); gap: 12px; } /* Nav buttons */ .tut-nav-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: white; cursor: pointer; transition: transform 0.15s; flex-shrink: 0; } .tut-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); transform: scale(1.07); } .tut-nav-btn:disabled { opacity: 0.25; cursor: default; } .tut-next.finish-btn { background: linear-gradient(135deg, var(--accent), #e8834a); border-color: transparent; width: 52px; height: 52px; box-shadow: 0 4px 16px rgba(189,93,56,0.45); } .tut-next.finish-btn:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(189,93,56,0.6); } /* Dots */ .tut-dots { display: flex; gap: 7px; align-items: center; flex: 1; justify-content: center; } .tut-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: background 0.25s, transform 0.25s; display: inline-block; } .tut-dot.active { background: var(--accent); transform: scale(1.35); } /* ── Responsive ── */ @media (max-width: 480px) { .tut-body { padding: 22px 18px 16px; } .tut-header { padding: 14px 16px 12px; } .tut-footer { padding: 12px 16px 16px; } .tut-nav-btn { width: 40px; height: 40px; } } /* ══════════════════════════════════════════ Tutorial Diagrams ══════════════════════════════════════════ */ .tut-diagram-wrap { margin-top: 18px; } .tut-diagram { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-md, 12px); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; } .tut-diagram-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, #bd5d38); margin-bottom: 2px; } /* ── Cards ── */ .tut-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .tut-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 68px; position: relative; } .tut-card-sm { padding: 7px 10px 6px; min-width: 56px; } .tut-card-emoji { font-size: 1.6rem; line-height: 1; } .tut-card-name { font-size: 0.68rem; font-weight: 600; color: #ffffff; white-space: nowrap; } .tut-card-power { font-size: 0.62rem; color: var(--accent, #bd5d38); font-weight: 700; } .tut-card-badge { position: absolute; top: -7px; right: -7px; background: var(--accent, #bd5d38); color: #fff; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 20px; } .tut-card-new { border-color: var(--accent, #bd5d38); box-shadow: 0 0 10px rgba(189,93,56,0.35); } /* outcome colours */ .tut-card-party { border-color: #4caf82; background: rgba(76,175,130,0.12); } .tut-card-trash { border-color: #e05252; background: rgba(224,82,82,0.10); opacity: 0.7; } .tut-card-stay { border-color: rgba(255,255,255,0.18); } /* ── Queue rows ── */ .tut-queue-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; justify-content: center; overflow-x: auto; padding-bottom: 2px; } .tut-queue-wrap { flex-wrap: wrap; gap: 6px 4px; } .tut-arrow { color: rgba(255,255,255,0.3); font-size: 1.1rem; flex-shrink: 0; padding: 0 2px; } /* ── Resolve legend ── */ .tut-resolve-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; } .tut-legend-dot { font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .tut-role-badge { font-size: 0.55rem; font-weight: 700; padding: 2px 5px; border-radius: 20px; white-space: nowrap; margin-top: 3px; } .badge-party { background: rgba(76,175,130,0.25); color: #4caf82; } .badge-trash { background: rgba(224,82,82,0.20); color: #e05252; } .badge-stay { background: rgba(255,255,255,0.10);color: rgba(255,255,255,0.6); } /* ── Ability list ── */ .tut-ability-list { display: flex; flex-direction: column; gap: 8px; } .tut-ability-card { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 12px; } .tut-ability-emoji { font-size: 1.4rem; flex-shrink: 0; } .tut-ability-info { display: flex; flex-direction: column; flex: 1; gap: 2px; text-align: left; } .tut-ability-name { font-size: 0.78rem; font-weight: 700; color: #fff; } .tut-ability-hint { font-size: 0.7rem; color: rgba(255,255,255,0.5); } .tut-ability-power { font-size: 0.72rem; font-weight: 700; color: var(--accent, #bd5d38); flex-shrink: 0; } /* ── Scoreboard ── */ .tut-scoreboard { display: flex; flex-direction: column; gap: 10px; } .tut-score-row { display: flex; align-items: center; gap: 10px; } .tut-score-name { font-size: 0.78rem; font-weight: 700; color: #fff; width: 56px; flex-shrink: 0; text-align: left; } .tut-score-bar-wrap { flex: 1; height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; } .tut-score-bar { display: block; height: 100%; background: rgba(255,255,255,0.2); border-radius: 999px; transition: width 0.5s ease; } .tut-score-winner .tut-score-bar { background: linear-gradient(90deg, var(--accent, #bd5d38), #e8834a); } .tut-score-num { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.55); width: 44px; text-align: right; flex-shrink: 0; } /* ── Responsive ── */ @media (max-width: 480px) { .tut-card { min-width: 50px; padding: 7px 8px 6px; } .tut-card-emoji { font-size: 1.3rem; } .tut-ability-card { padding: 7px 10px; } } /* ══════════════════════════════════════════ Language Selector ══════════════════════════════════════════ */ .settings-row-col { flex-direction: column; align-items: flex-start; gap: 10px; } .lang-selector { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; } .lang-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); font-size: 0.78rem; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s; } .lang-btn:hover { background: rgba(255,255,255,0.1); color: #fff; } .lang-btn.active { background: rgba(189,93,56,0.2); border-color: var(--accent, #bd5d38); color: #fff; box-shadow: 0 0 10px rgba(189,93,56,0.25); } .lang-flag { font-size: 1rem; line-height: 1; } .lang-label { line-height: 1; } /* ══════════════════════════════════════════ Card Color Picker (Settings) One row per seat (You / Bot 1 / Bot 2 / Bot 3), each repainting the shared --p1..--p4 variables that every card, hand border, deck-back and leaderboard row already reads its color from — see js/ui/cardColor-ui.js. Colors are kept unique across all four seats by swapping on conflict, so this UI never lets two seats collide. ══════════════════════════════════════════ */ .player-color-picker { display: flex; flex-direction: column; gap: 12px; width: 100%; } .player-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .player-color-name { font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-width: 56px; } .color-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; } .color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: var(--swatch-color); padding: 0; cursor: pointer; position: relative; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .color-swatch:hover { transform: scale(1.1); } .color-swatch.active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); } .color-swatch.active::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); } /* RTL global adjustments */ [dir="rtl"] .tut-queue-row, [dir="rtl"] .tut-hand, [dir="rtl"] .tut-ability-list { direction: rtl; } [dir="rtl"] .tut-score-name { text-align: right; } [dir="rtl"] .tut-score-num { text-align: left; } /* ══════════════════════════════════════════ Splash Settings Button ══════════════════════════════════════════ */ .splash-settings-btn { margin-top: 10px; padding: 10px 28px; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.65); border-radius: 12px; font-size: 0.85rem; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; } .splash-settings-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); } /* ══════════════════════════════════════════ Tutorial Video ══════════════════════════════════════════ */ .tut-video-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .tut-video-toggle { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: rgba(189,93,56,0.15); border: 1px solid rgba(189,93,56,0.35); border-radius: 8px; color: #fff; font-size: 0.82rem; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; transition: background 0.18s, border-color 0.18s; width: 100%; justify-content: center; } .tut-video-toggle:hover { background: rgba(189,93,56,0.28); border-color: var(--accent, #bd5d38); } .tut-video-icon { font-size: 0.9rem; } .tut-video-container { width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #000; aspect-ratio: 16 / 9; } .tut-video-container iframe { width: 100%; height: 100%; border: none; display: block; } .tut-video-container.hidden { display: none; } /* ══════════════════════════════════════════ Settings modal above splash screen ══════════════════════════════════════════ */ #settingsModal { z-index: 10000; } #settingsModal .modal-content { z-index: 10001; } /* ══════════════════════════════════════════ Language-specific fonts ══════════════════════════════════════════ */ :lang(fa) { font-family: 'Vazirmatn', sans-serif; } :lang(ar) { font-family: 'Noto Sans Arabic', sans-serif; } :lang(tr) { font-family: 'Noto Sans TR', 'Poppins', sans-serif; } /* ══════════════════════════════════════════ RTL: Mirror directional icons ══════════════════════════════════════════ */ [dir="rtl"] .tut-prev img, [dir="rtl"] .tut-next img { transform: scaleX(-1); } [dir="rtl"] .example-container .arrow { transform: scaleX(-1); display: inline-block; } /* Back button also flips in RTL */ [dir="rtl"] #cardBackBtn img { transform: scaleX(-1); } /* ══════════════════════════════════════════ Numbers always LTR (no digit reversal in RTL) ══════════════════════════════════════════ */ #deckCount, .other-deck-count, .slot-number, .card-power, .lb-cards, .lb-score, .party-count, .power-score, .power-badge { direction: ltr; unicode-bidi: isolate; } /* ══════════════════════════════════════════ RTL font & line-height fixes (Vazirmatn/Noto Arabic have taller glyphs) ══════════════════════════════════════════ */ :lang(fa), :lang(ar) { line-height: 1.5; } :lang(fa) .card-name, :lang(ar) .card-name, :lang(fa) .help-card-name, :lang(ar) .help-card-name, :lang(fa) .top-btn, :lang(ar) .top-btn, :lang(fa) .screen-btn, :lang(ar) .screen-btn, :lang(fa) .panel-header h3, :lang(ar) .panel-header h3 { line-height: 1.3; } /* Prevent card footer overflow in RTL */ :lang(fa) .card-footer, :lang(ar) .card-footer { flex-wrap: nowrap; gap: 4px; } :lang(fa) .card-name, :lang(ar) .card-name { font-size: clamp(9px, 1.3vw, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tooltip font fix for RTL */ :lang(fa) .top-btn[data-title]::after, :lang(ar) .top-btn[data-title]::after { font-family: 'Vazirmatn', 'Noto Sans Arabic', sans-serif; } :lang(tr) .top-btn[data-title]::after { font-family: 'Noto Sans TR', 'Poppins', sans-serif; } /* ══════════════════════════════════════════ Player Name Input (difficulty screen) ══════════════════════════════════════════ */ .player-name-row { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; width: 100%; } .player-name-label { font-size: 14px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .player-name-input { width: min(280px, 80%); padding: 10px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); color: #fff; font-size: 16px; font-family: inherit; text-align: center; outline: none; transition: border-color 0.2s, background 0.2s; } .player-name-input:focus { border-color: var(--accent); background: rgba(255,255,255,0.11); } .player-name-input::placeholder { color: rgba(255,255,255,0.3); font-size: 14px; } /* ══════════════════════════════════════════ IN-GAME WALKTHROUGH OVERLAY ══════════════════════════════════════════ */ .wt-overlay { position: fixed; inset: 0; z-index: 50000; pointer-events: none; } .wt-overlay.active { pointer-events: all; } /* Card-play step: overlay becomes click-through, only wt-box stays interactive */ .wt-overlay.active.wt-passthrough { pointer-events: none; } .wt-overlay.active.wt-passthrough .wt-box { pointer-events: all; } /* also dim the backdrop but keep it visible */ .wt-overlay.wt-passthrough::before { background: rgba(0,0,0,0.45); } /* dark backdrop with hole cut out for spotlight */ .wt-overlay::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 0; } /* spotlight — transparent box on top of backdrop */ .wt-spotlight { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 3px var(--accent), 0 0 24px 6px rgba(var(--accent-rgb, 80,200,120),0.35); transition: all 0.35s cubic-bezier(.4,0,.2,1); z-index: 1; pointer-events: none; } /* info box */ .wt-box { position: fixed; z-index: 2; background: rgba(12, 35, 20, 0.97); border: 1.5px solid rgba(255,255,255,0.13); border-radius: 16px; padding: 18px 20px 14px; width: clamp(240px, 80vw, 340px); box-shadow: 0 12px 40px rgba(0,0,0,0.6); transition: all 0.3s cubic-bezier(.4,0,.2,1); } .wt-step-label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; opacity: 0.85; } /* arrow pointing to spotlight */ .wt-arrow { display: none; position: absolute; width: 0; height: 0; } .wt-arrow.arrow-up { display: block; top: -10px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.13); } .wt-arrow.arrow-down { display: block; bottom: -10px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(255,255,255,0.13); } .wt-arrow.arrow-left { display: block; left: -10px; top: 50%; transform: translateY(-50%); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid rgba(255,255,255,0.13); } .wt-arrow.arrow-right { display: block; right: -10px; top: 50%; transform: translateY(-50%); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid rgba(255,255,255,0.13); } .wt-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; } .wt-text { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.6; margin: 0 0 14px; white-space: pre-line; } .wt-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wt-skip-btn { font-size: 12px; color: rgba(255,255,255,0.4); background: none; border: none; cursor: pointer; padding: 4px 0; transition: color 0.15s; } .wt-skip-btn:hover { color: rgba(255,255,255,0.7); } .wt-next-btn { padding: 9px 22px; background: var(--accent); color: #000; font-weight: 700; font-size: 13px; border: none; border-radius: 10px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; flex-shrink: 0; } .wt-next-btn:hover { opacity: 0.88; transform: scale(1.03); } .wt-next-btn.pulse { animation: wt-pulse 1.2s ease-in-out infinite; } /* special: waiting for card play */ .wt-waiting .wt-next-btn { display: none; } .wt-waiting .wt-skip-btn { margin-left: auto; } /* highlight ring on elements we want player to interact with */ .wt-highlight { position: relative; z-index: 49999 !important; pointer-events: all !important; } /* ensure all children inside highlighted elements are also clickable */ .wt-highlight * { pointer-events: all !important; } /* on mobile, hand area must sit above the walkthrough overlay when highlighted */ @media (max-width: 600px) { #handArea.wt-highlight, #handArea:has(.wt-highlight) { z-index: 49999 !important; } /* when walkthrough is active on step 7 (card play), lift hand area */ body.wt-card-step #handArea { z-index: 49999 !important; position: fixed !important; } } @keyframes wt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb,80,200,120),0.5); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb,80,200,120),0); } } [dir="rtl"] .wt-arrow.arrow-left { left: auto; right: -10px; border-right: none; border-left: 10px solid rgba(255,255,255,0.13); } [dir="rtl"] .wt-arrow.arrow-right { right: auto; left: -10px; border-left: none; border-right: 10px solid rgba(255,255,255,0.13); } /* ══════════════════════════════════════════ WALKTHROUGH — RESPONSIVE (mobile) ══════════════════════════════════════════ */ @media (max-width: 600px) { /* Box: always at bottom of screen, full-width */ .wt-box { position: fixed !important; left: 12px !important; right: 12px !important; bottom: 0 !important; top: auto !important; transform: none !important; width: auto !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; padding: 16px 16px 24px !important; box-sizing: border-box; } /* When hand step is active, push box up so it doesn't cover the pinned hand */ .wt-box.above-hand { bottom: 100px !important; border-radius: 16px !important; } /* Arrow hidden on mobile since box is always at bottom */ .wt-arrow { display: none !important; } /* Spotlight still works normally */ } /* ══════════════════════════════════════════ CARD HELP — LONG-PRESS DISCOVERABILITY (js/ui/cardHelpHint.js + affordance badges below) ══════════════════════════════════════════ */ /* ── Returning-player affordance ────────────────────────── A small "info" badge on each hand card, hidden by default and only faded in on hover (desktop), keyboard focus, or an active press (which also covers touch — see .long-press-active, toggled the moment a press starts, from js/ui/longPress.js). Never shown permanently, never intercepts a tap/click (pointer-events: none). */ .card-help-affordance { position: absolute; top: 5%; right: 6%; z-index: 4; width: clamp(14px, 2.6cqw, 20px); height: clamp(14px, 2.6cqw, 20px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.55); opacity: 0; transform: scale(0.7); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; } .card-help-affordance .icon-image { width: 65%; height: 65%; object-fit: contain; } .card:hover .card-help-affordance, .card:focus-visible .card-help-affordance, .card.long-press-active .card-help-affordance { opacity: 0.95; transform: scale(1); } [dir="rtl"] .card-help-affordance { right: auto; left: 6%; } /* ── First-time hint bubble ──────────────────────────────── Positioned with position:fixed and placed via JS from the hand's actual bounding rect (see js/ui/cardHelpHint.js) rather than anchored inside #handArea — #centerArea uses overflow:hidden for its own layout, which would otherwise risk clipping a bubble meant to poke up above the hand. Fixed positioning + a below-modal z-index keeps it clear of both that clipping and any modal that might open. Entirely pointer-events: none — it can never block a tap/click meant for a card underneath/behind it. */ .card-help-hint { position: fixed; z-index: 9500; transform: translate(-50%, 8px); opacity: 0; display: flex; flex-direction: column; align-items: center; transition: opacity 220ms ease, transform 220ms ease; max-width: min(86vw, 280px); } .card-help-hint.visible { transform: translate(-50%, 0); opacity: 1; } .card-help-hint-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-panel); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); text-align: center; } .card-help-hint-text { margin: 0; font-size: clamp(11px, 2.4vw, 13px); color: var(--text-main); line-height: 1.35; } .card-help-hint-arrow { width: 12px; height: 12px; margin-top: -7px; background: var(--bg-panel); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); backdrop-filter: var(--blur); } /* Small self-contained demo: an icon that presses down while a ring fills around it, then releases — the same visual language as the real long-press feedback (see .card.long-press-active), but staged on its own mini widget so the actual hand cards are never touched and the real Help modal is never opened automatically. */ .card-help-hint-demo { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .card-help-hint-demo-icon { font-size: 18px; line-height: 1; animation: card-help-demo-pulse 1.8s ease-in-out 2; } .card-help-hint-demo-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accent) 0deg, transparent 0deg); opacity: 0; animation: card-help-demo-ring 1.8s ease-in-out 2; } @keyframes card-help-demo-pulse { 0% { transform: scale(1); } 10% { transform: scale(0.88); } 75% { transform: scale(0.88); } 100% { transform: scale(1); } } @keyframes card-help-demo-ring { 0% { opacity: 0; background: conic-gradient(var(--accent) 0deg, transparent 0deg); } 10% { opacity: 0.9; background: conic-gradient(var(--accent) 0deg, transparent 0deg); } 75% { opacity: 0.9; background: conic-gradient(var(--accent) 360deg, transparent 360deg); } 100% { opacity: 0; background: conic-gradient(var(--accent) 360deg, transparent 360deg); } } @media (prefers-reduced-motion: reduce) { .card-help-hint-demo-icon, .card-help-hint-demo-ring { animation: none; } .card-help-hint-demo-ring { opacity: 0.5; background: conic-gradient(var(--accent) 180deg, transparent 180deg); } } /* On the narrow mobile layout #handArea becomes position:fixed at the bottom of the screen (see the existing mobile #handArea rule); the JS-computed position in cardHelpHint.js already re-anchors above whatever the hand's current rect is, so only the bubble's own max width needs a tighter mobile cap here. */ @media (max-width: 600px) { .card-help-hint { max-width: min(80vw, 240px); } } @media (prefers-reduced-motion: reduce) { .other-player-row.current-turn { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bot-color) 55%, transparent); } } /* ══════════════════════════════════════════════════════════ Feedback / survey form ══════════════════════════════════════════════════════════ */ .feedback-link-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--text-main); font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s; } .feedback-link-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .endgame-feedback-btn { margin-top: 10px; display: flex; justify-content: center; } .feedback-modal-content { text-align: left; box-sizing: border-box; } :lang(fa) .feedback-modal-content, :lang(ar) .feedback-modal-content { text-align: right; } .feedback-subtitle { color: var(--text-muted); font-size: 14px; margin: 4px 0 18px; } .feedback-form { display: flex; flex-direction: column; gap: 16px; width: 100%; box-sizing: border-box; } .feedback-field { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; } .feedback-label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .feedback-stars { display: flex; gap: 6px; } .feedback-star { background: none; border: none; cursor: pointer; font-size: 28px; line-height: 1; color: rgba(255, 255, 255, 0.25); transition: transform .15s, color .15s; padding: 2px; } .feedback-star:hover { transform: scale(1.15); } .feedback-star.active { color: #facc15; } .feedback-textarea, .feedback-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); color: var(--text-main); font-size: 14px; font-family: inherit; resize: vertical; } .feedback-textarea:focus, .feedback-input:focus { outline: none; border-color: var(--accent); } .feedback-status { min-height: 18px; font-size: 13px; margin: 0; } .feedback-status.is-error { color: #ef4444; } .feedback-status.is-success { color: #22c55e; } .feedback-submit-btn { width: 100%; box-sizing: border-box; margin-top: 0; } /* ── Random in-game toast ── */ .feedback-toast { position: fixed; right: 16px; bottom: 16px; z-index: 1500; max-width: 320px; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; } :lang(fa) .feedback-toast, :lang(ar) .feedback-toast { right: auto; left: 16px; } .feedback-toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .feedback-toast-bubble { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(10, 31, 15, 0.92); border: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } .feedback-toast-icon { font-size: 20px; } .feedback-toast-text { margin: 0; font-size: 14px; color: var(--text-main); line-height: 1.4; } .feedback-toast-actions { display: flex; gap: 8px; } .feedback-toast-yes, .feedback-toast-later { flex: 1; padding: 8px 10px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: .2s; } .feedback-toast-yes { background: var(--accent); color: white; } .feedback-toast-yes:hover { opacity: .85; } .feedback-toast-later { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } .feedback-toast-later:hover { background: rgba(255, 255, 255, 0.14); } @media (max-width: 600px) { .feedback-toast { left: 12px; right: 12px; max-width: none; } :lang(fa) .feedback-toast, :lang(ar) .feedback-toast { left: 12px; right: 12px; } } /* ── Achievement Unlock toast (js/ui/achievementNotification-ui.js) ── Same fixed-position fade/slide lifecycle as .feedback-toast above, anchored top-center instead of bottom-right so it never collides with the feedback toast or the in-game action bar. */ .achievement-toast { position: fixed; top: 16px; left: 50%; transform: translate(-50%, -16px); z-index: 1600; width: min(360px, calc(100% - 24px)); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .achievement-toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .achievement-toast-bubble { display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; padding: 14px 16px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(255, 199, 44, 0.16), rgba(10, 31, 15, 0.94)); border: 1px solid rgba(255, 199, 44, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } .achievement-toast-icon { font-size: 28px; line-height: 1; flex-shrink: 0; } .achievement-toast-body { flex: 1; min-width: 0; } .achievement-toast-eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #ffc72c; text-transform: uppercase; } .achievement-toast-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.3; } .achievement-toast-desc { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.35; } .achievement-toast-close { flex-shrink: 0; background: transparent; border: none; cursor: pointer; opacity: .7; padding: 2px; } .achievement-toast-close:hover { opacity: 1; } @media (max-width: 600px) { .achievement-toast { width: calc(100% - 24px); } } /* ══════════════════════════════════════════════════════════ ACHIEVEMENT COLLECTION (see index.html #profileAchievements, js/ui/profile-ui.js renderAchievements()/renderAchievementCard()) A game-quality collection UI, not a settings list: header summary + overall progress bar, an optional "Recently Unlocked" featured card, category filter tabs, then a responsive card grid. All colors/radii/ shadows reuse the existing design tokens from :root — no parallel token system. Locked/unlocked/progress are always communicated with an icon + text label, never color alone. ══════════════════════════════════════════════════════════ */ .ach-header { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .profile-achievements-title { display: flex; align-items: center; justify-content: center; gap: 6px; } .ach-header-icon { font-size: 16px; line-height: 1; } .profile-achievements-summary { margin: 0; font-size: 13px; color: var(--text-muted); } /* ── Overall progress bar ── */ .ach-progress { display: flex; flex-direction: column; gap: 4px; } .ach-progress-label-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; } .ach-progress-label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .ach-progress-pct { color: var(--text-main); font-weight: 700; } .ach-progress-track { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); overflow: hidden; } .ach-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffc72c); transition: width 0.5s cubic-bezier(.4,0,.2,1); } /* ── Featured / "Recently Unlocked" ── Only ever shown when real unlock data exists (see renderAchievements()) — the section itself stays .hidden otherwise. */ .ach-featured { display: flex; flex-direction: column; gap: 6px; } .ach-featured-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #ffc72c; } .ach-featured-card .ach-card { animation: ach-featured-in 0.4s cubic-bezier(.4,0,.2,1); } @keyframes ach-featured-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Category filter tabs ── */ .ach-filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .ach-filter { padding: 5px 12px; font-size: 11.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .ach-filter:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); } .ach-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; } .ach-filter:focus-visible, .ach-card:focus-visible { outline: 2px solid #ffc72c; outline-offset: 2px; } /* ── Card grid ── auto-fill/minmax reflows naturally from a single mobile-landscape column up to several desktop columns with no per-breakpoint rules needed — see the max-width media query below only for a floor on very narrow mobile-landscape heights. */ .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 300px; overflow-y: auto; padding: 2px; } .ach-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .ach-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } .ach-card--filtered-out { display: none; } /* Unlocked state — communicated via a stronger icon presentation, a completed badge/status pill, and a subtle warm border/glow, never by color alone (the badge icon + status text carry the meaning). */ .ach-card.unlocked { background: rgba(255, 199, 44, 0.08); border-color: rgba(255, 199, 44, 0.4); } .ach-card.locked { opacity: 0.82; } .ach-card-icon-wrap { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); } .ach-card.unlocked .ach-card-icon-wrap { background: rgba(255, 199, 44, 0.15); border-color: rgba(255, 199, 44, 0.5); box-shadow: 0 0 0 4px rgba(255, 199, 44, 0.08); } .ach-card-icon { font-size: 24px; line-height: 1; opacity: .6; } .ach-card.unlocked .ach-card-icon { opacity: 1; } .ach-card-badge { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; border-radius: 50%; background: var(--bg-main); border: 1px solid var(--border); } .ach-card.unlocked .ach-card-badge { border-color: rgba(74, 222, 128, 0.5); } .ach-card-title { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-main); } .ach-card.locked .ach-card-title { color: var(--text-muted); } .ach-card-desc { margin: 0; font-size: 10.5px; line-height: 1.3; color: var(--text-muted); } .ach-card-progress { width: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .ach-card-progress-track { width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .ach-card-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s cubic-bezier(.4,0,.2,1); } .ach-card-progress-label { font-size: 10px; font-weight: 700; color: #ffc72c; } .ach-card-unlockdate { margin: 2px 0 0; font-size: 9.5px; color: var(--text-muted); } .ach-card-status { margin-top: 4px; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } .ach-card.unlocked .ach-card-status { background: rgba(74, 222, 128, 0.18); color: #4ade80; } /* Featured card variant: same card, slightly larger/centered, no duplicate rules needed since it reuses .ach-card directly. */ .ach-featured-card .ach-card { max-width: 220px; margin: 0 auto; padding: 16px 12px 12px; } .ach-featured-card .ach-card-icon-wrap { width: 56px; height: 56px; } .ach-featured-card .ach-card-icon { font-size: 28px; } @media (prefers-reduced-motion: reduce) { .ach-progress-fill, .ach-card-progress-fill, .ach-card, .ach-filter { transition: none; } .ach-featured-card .ach-card { animation: none; } } /* ── Mobile landscape (the game is landscape-only — see js/ui/orientation-ui.js) — keep the grid to two columns and trim vertical paddings so the whole Achievements section stays reachable within a short viewport without introducing horizontal overflow; .modal-content's own mobile rule already caps width at calc(100vw - 24px). ── */ @media (max-width: 700px) { .ach-grid { grid-template-columns: repeat(2, 1fr); max-height: 240px; } .ach-card { padding: 10px 6px 8px; } .ach-filters { gap: 5px; } .ach-filter { padding: 4px 10px; font-size: 11px; } } @media (max-height: 420px) and (orientation: landscape) { .ach-grid { max-height: 160px; } .ach-featured { display: none; } } /* ========================================================== HOME / MAIN HUB New default landing screen between the splash name-entry step and the existing splash->difficulty->match flow. Reuses existing tokens (--bg-panel, --radius-*, --shadow-*, --accent) and the .screen-overlay/.screen-content/.top-btn visual language already established by the splash screen and in-game top bar, per docs/UI_UX_PLAN.md secs 1-2, 11-16. ========================================================== */ .home-screen { align-items: stretch; } .home-content { width: 100%; height: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 18px 20px 14px; box-sizing: border-box; overflow-y: auto; background: var(--bg-panel); } .home-topbar { display: flex; justify-content: space-between; align-items: center; } /* ── Profile entry point ────────────────────────────────── Compact avatar + name chip — the one place on Home that surfaces the player's identity (js/services/profile.js). Tapping it opens #profileModal (js/ui/profile-ui.js). */ .home-profile-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); border-radius: 999px; color: var(--text-main); font-family: inherit; cursor: pointer; max-width: 42vw; transition: background .18s ease, transform .18s ease; } .home-profile-chip:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } .home-profile-chip-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; } .home-profile-chip-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Currency group — wraps the Coins + Gems pills so .home-topbar's space-between still puts exactly two items (profile chip, this group) on opposite ends, regardless of how many currencies exist. */ .home-currency-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Coin pill — a real, persisted balance (js/services/profile.js), defaulting to 0 for every player since nothing can earn/spend it yet (see docs/ECONOMY_PLAN.md and the Achievement/Shop/Lucky Wheel foundation notes in profile.js). Reused by Store/Rewards once a real economy is wired up. */ .home-coin-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--text-main); } .home-coin-icon { font-size: 16px; line-height: 1; } /* Gem pill — same shape/behavior as the coin pill, tinted toward the existing --p4 (purple) player color token rather than a new color system, so it reads as a distinct currency without introducing a parallel palette. */ .home-gem-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(var(--p4-rgb), 0.12); border: 1px solid rgba(var(--p4-rgb), 0.35); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--text-main); } .home-gem-icon { font-size: 16px; line-height: 1; } .home-banner { width: min(420px, 78vw); max-height: 22vh; object-fit: contain; margin: 0 auto; } /* ── Start Game tabs ────────────────────────────────────── Kept as the dominant, vertically-centered focus of Home regardless of where the secondary nav/profile chip above it end up sizing to (auto margins share the flex column's remaining space with .home-bottom-nav's own margin-top: auto). Only Play vs Bot is active; Rank/Friendly are real switchable tabs whose panel honestly says Coming Soon rather than pretending to start a match. */ .home-gamestart { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: auto; margin-bottom: auto; } .home-gamestart-title { margin: 0; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); } .home-tabs { display: flex; gap: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; } .home-tab { flex: 1; border: none; border-radius: calc(var(--radius-md) - 4px); background: transparent; color: var(--text-muted); font-family: inherit; font-weight: 800; font-size: 15px; padding: 10px 8px; cursor: pointer; transition: background .18s ease, color .18s ease; } .home-tab:hover { color: var(--text); } .home-tab[aria-selected="true"] { background: linear-gradient(145deg, var(--accent), #8f4527); color: #fff; } .home-tab-panel { display: flex; flex-direction: column; gap: 12px; } .home-tab-panel.hidden { display: none; } .home-tab-comingsoon { margin: 0; text-align: center; color: var(--text-muted); font-size: 15px; padding: 22px 12px; background: rgba(255, 255, 255, 0.06); border: 1px dashed var(--border); border-radius: var(--radius-md); } .home-primary-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: var(--radius-md); padding: 18px 24px; font-size: 19px; font-weight: 800; font-family: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .home-play-btn { background: linear-gradient(145deg, var(--accent), #8f4527); color: #fff; box-shadow: var(--shadow-card); font-size: 22px; padding: 22px 24px; } .home-play-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); } .home-btn-icon { font-size: 1.1em; line-height: 1; } .home-coming-soon-tag { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text-muted); padding: 3px 8px; border-radius: 999px; } /* ── Secondary nav row ──────────────────────────────────── Same icon-button visual language as the in-game top bar (.top-btn), extended with a text label since these sit on their own screen rather than a cramped top bar. */ .home-secondary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; } .home-nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-main); padding: 12px 8px 10px; min-height: 76px; cursor: pointer; font-family: inherit; transition: background .18s ease, transform .18s ease; } .home-nav-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .home-nav-icon { font-size: 22px; line-height: 1; } .home-nav-label { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; } .home-nav-soon { position: absolute; top: 4px; right: 4px; font-size: 8px; font-weight: 700; text-transform: uppercase; background: rgba(0, 0, 0, 0.5); border-radius: 6px; padding: 2px 5px; color: var(--text-muted); letter-spacing: .3px; } /* ── Bottom nav (Store / Tournament / Leaderboard) ───────── */ .home-bottom-nav { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); } .home-bottom-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 600; padding: 8px 4px; cursor: pointer; border-radius: var(--radius-sm); transition: background .18s ease, color .18s ease; } .home-bottom-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); } .home-bottom-icon { font-size: 20px; line-height: 1; } .home-bottom-btn .home-coming-soon-tag { font-size: 9px; padding: 2px 6px; } /* ── Disabled-state primitive (reused wherever a Home feature is gated: Online Game today, future locked nav entries) ── */ [aria-disabled="true"] { opacity: .72; } /* ── Keyboard focus (Home introduces plain