/* ============================================================================ Mini design system — read this before adding a new page or hardcoding a color. Tokens (defined below in :root / :root[data-mode='light']): --bg/--surface/--surface-2/--text/--muted base page + text colors --accent/--accent-2/--good/--bad semantic colors (link/CTA, success, danger) --accent-rgb/--good-rgb raw "r, g, b" components of the two above, for alpha-blended tints — use rgba(var(--accent-rgb), .15) instead of a hardcoded rgba(...) so the tint still matches the active mode --panel-bg/--nav-bg/--panel-border/--hover-tint/--hairline frosted-glass chrome (cards, side nav) — do not reuse --surface for these --site-bg/--cell-* swappable via Paramètres → Personnalisation (public/js/core/theme.js), light/dark-aware --ship-*, --hit-*, --sunk-* board piece colors — intentionally NOT overridden in light mode (the board itself stays dark-styled in both modes) Any new color in a page or component should reuse one of these — if none fits, add a token here rather than a literal hex/rgb in a rule or an inline style="". Layout components (server/protected-pages/**): .page-header + .nav-card (+ .stat-strip for a KPI row) — the standard content-page skeleton, used by every page except the two below. .topbar (mode-pills, turn/clock info) — the compact header used instead of .page-header on the two live-gameplay screens (game.html, duel.html) where a descriptive header would waste vertical space needed for the board. .nav-card.narrow-card — a .nav-card meant to stand alone and centered (e.g. duel.html's guest-join/waiting panels) instead of sitting in a page's card grid. ============================================================================ */ :root { color-scheme: dark; --bg: #0a0f22; --surface: #10162d; --surface-2: #181f3b; --text: #f3f7ff; --muted: #8f9bc1; --accent: #4de4ff; --accent-2: #8b5cff; --good: #39d98a; --bad: #ff5b5b; /* Raw RGB components of --accent/--good, for alpha-blended tints (rgba(var(--accent-rgb), .15)) that need to react to light/dark mode instead of being hardcoded to one mode's hue. */ --accent-rgb: 77, 228, 255; --good-rgb: 57, 217, 138; /* Frosted-glass panels (side nav, cards) — separate from --surface so the game-board "hidden-review" modal (which uses --surface) can stay a flat color while these stay translucent over --site-bg. */ --panel-bg: rgba(16, 22, 45, 0.92); --nav-bg: rgba(16, 22, 45, 0.97); --panel-border: rgba(255, 255, 255, 0.08); --hover-tint: rgba(255, 255, 255, 0.06); --hairline: rgba(255, 255, 255, 0.08); /* Customizable theme layer — overridden at runtime by theme.js from saved preferences. Default decor is "Ciel" (sky blue) — keep in sync with BG_THEMES[0] in theme.js. */ --site-bg: radial-gradient(circle at top, #38a9e4, #071a2e); --cell-empty-bg: rgba(255, 255, 255, 0.13); --cell-empty-border: rgba(255, 255, 255, 0.22); --cell-miss-bg: rgba(30, 36, 50, 0.85); --ship-a: #4de4ff; --ship-b: #2b5cb1; --hit-a: #ffd84d; --hit-b: #ffb703; --sunk-a: #ff5b5b; --sunk-b: #d7263d; } /* Light mode — toggled via theme.js, which sets data-mode on and persists the choice. Board "decor" gradients (--site-bg) are dark-only moods, so theme.js forces a fixed light background here regardless of the saved decor pick; switching back to dark restores it. */ :root[data-mode='light'] { color-scheme: light; --bg: #eef2fb; --surface: #ffffff; --surface-2: #f3f6fc; --text: #10162a; --muted: #56607a; --accent: #0092b3; --accent-2: #6a3fd6; --good: #16a34a; --bad: #dc2626; --accent-rgb: 0, 146, 179; --good-rgb: 22, 163, 74; --panel-bg: rgba(255, 255, 255, 0.86); --nav-bg: rgba(255, 255, 255, 0.92); --panel-border: rgba(16, 23, 42, 0.1); --hover-tint: rgba(16, 23, 42, 0.06); --hairline: rgba(16, 23, 42, 0.12); --cell-empty-bg: rgba(16, 23, 42, 0.07); --cell-empty-border: rgba(16, 23, 42, 0.18); --cell-miss-bg: rgba(51, 65, 85, 0.6); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; } body { font-family: Inter, Segoe UI, Roboto, Arial, sans-serif; background: var(--site-bg); color: var(--text); } button, input { font: inherit; } .side-nav { position: fixed; top: 0; left: 0; z-index: 200; height: 100vh; height: 100dvh; width: 230px; transform: translateX(-100%); transition: transform 0.25s ease; } .side-nav.open { transform: translateX(0); } /* Dock the sidebar permanently open (Chess.com-style) instead of the overlay drawer, and shift the page content over to make room for it. Used on the home page and on the pages sans topbar (.nav-docked : /pvp, /duel, /practice, /probability-lab) où la barre latérale docké remplace la navigation qu'apportait la topbar. Desktop-only — un rail fixe de 230px mangerait la moitié d'un écran de téléphone (le drawer à toggle reste utilisé sous 900px). */ @media (min-width: 900px) { body.home-page .side-nav, body.nav-docked .side-nav { transform: translateX(0); } body.home-page .side-nav-toggle, body.nav-docked .side-nav-toggle { display: none; } body.home-page .app-shell, body.nav-docked .app-shell { margin-left: 230px; } body.home-page.has-footer .site-footer, body.nav-docked.has-footer .site-footer { margin-left: 230px; } } .side-nav-inner { height: 100%; width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 18px 10px; background: var(--nav-bg); border-right: 1px solid var(--panel-border); backdrop-filter: blur(14px); box-shadow: 18px 0 40px rgba(0, 0, 0, 0.35); overflow-y: auto; } .side-nav-toggle { position: absolute; top: 18px; left: 100%; width: 26px; height: 44px; background: var(--nav-bg); border: 1px solid var(--panel-border); border-left: none; border-radius: 0 12px 12px 0; color: var(--text); font-size: 1rem; display: flex; align-items: center; justify-content: center; } .side-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .side-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.92rem; } .side-nav-link:hover { background: var(--hover-tint); } .side-nav-icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 1.05rem; } .side-nav-parent { width: 100%; background: transparent; border: 0; cursor: pointer; } .side-nav-caret { margin-left: auto; color: var(--muted); transition: transform 0.2s ease; } .side-nav-group.open .side-nav-caret { transform: rotate(90deg); } .side-nav-group.active > .side-nav-parent { color: var(--accent); } .side-nav-submenu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .side-nav-group.open .side-nav-submenu { max-height: 400px; } .side-nav-sublink { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 34px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 0.85rem; } .side-nav-sublink:hover { background: var(--hover-tint); color: var(--text); } .side-nav-sublink.active { color: var(--accent); } .side-nav-submenu-divider { height: 1px; margin: 6px 12px 6px 34px; background: var(--hairline); } .side-nav-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); } .side-nav-search { display: flex; align-items: center; gap: 12px; background: transparent; border: 0; color: var(--muted); padding: 8px 10px; border-radius: 10px; font-size: 0.88rem; text-align: left; } .side-nav-search:hover { background: var(--hover-tint); color: var(--text); } #installAppBtn { display: none; } #installAppBtn.show { display: flex; color: var(--accent); } .side-nav-profile { display: flex; align-items: center; gap: 10px; padding: 6px 10px; } .side-nav-avatar { width: 30px; height: 30px; font-size: 0.75rem; border-radius: 8px; } .side-nav-username { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-nav-icons { display: flex; justify-content: space-between; padding: 4px 8px 0; font-size: 1rem; color: var(--muted); } .app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 16px; gap: 14px; min-height: 0; } .topbar, .board-panel-frame, .nav-card { background: var(--panel-bg); border: 1px solid var(--panel-border); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); } /* A .nav-card meant to stand alone and centered rather than sit in a grid/row (e.g. the guest-join/waiting panels on /duel before a match starts). */ .nav-card.narrow-card { max-width: 520px; margin: 0 auto; } .topbar { position: relative; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 18px; flex-shrink: 0; } .topbar h1, .card-heading h3 { margin: 0; } .brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .brand h1 { font-size: 1.15rem; } .brand-icon { font-size: 1.3rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.72rem; color: var(--accent); margin-bottom: 6px; } .topbar-actions { display: flex; gap: 10px; align-items: center; } .leaderboard-trigger { position: relative; } .ghost-btn { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 9px 14px; font-size: 0.85rem; text-decoration: none; } .leaderboard-popover { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 260px; background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); z-index: 40; } .leaderboard-popover.show { display: block; } .mode-pills { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 4px; } .mode-btn { background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; } .pill-input { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--muted); } .pill-input input { border: 1px solid rgba(255, 255, 255, 0.13); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 8px 14px; min-width: 130px; } button { border: 0; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } button:hover { transform: translateY(-1px); } #newMatchBtn, .mode-btn.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: white; padding: 10px 16px; border-radius: 999px; } .dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; flex: 1; min-height: 0; } .board-stage { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .player-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 8px 14px; } .player-bar.active { border-color: rgba(var(--good-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--good-rgb), 0.2) inset; } .turn-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); opacity: 0.35; } .player-bar.active .turn-dot { background: var(--good); opacity: 1; box-shadow: 0 0 10px rgba(var(--good-rgb), 0.9); } .player-id { display: flex; align-items: center; gap: 10px; min-width: 0; } .avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.82rem; } .avatar-ai { background: linear-gradient(135deg, var(--bad), #8a2f2f); } .avatar-player { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06151f; } .player-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .player-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-meta { font-size: 0.72rem; color: var(--muted); } .clock { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 700; background: rgba(255, 255, 255, 0.05); color: var(--muted); padding: 6px 14px; border-radius: 10px; min-width: 64px; text-align: center; } .player-bar.active .clock { background: var(--good); color: #06241a; } .turn-banner { flex-shrink: 0; text-align: center; margin: 0; font-size: 0.8rem; letter-spacing: 0.03em; color: var(--muted); } .board-row { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 14px; } .board-panel-frame { display: flex; flex-direction: column; gap: 8px; border-radius: 20px; padding: 12px; min-height: 0; } .main-board-frame { flex: 1 1 auto; min-width: 0; align-items: center; } .fleet-frame { flex: 0 0 auto; width: clamp(130px, 22vh, 220px); } .fleet-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .streamer-btn { flex-shrink: 0; background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 4px 9px; font-size: 0.8rem; line-height: 1; } .streamer-btn.active { background: var(--good); } .board-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .grid-mask { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(5, 8, 22, 0.94); border-radius: 12px; color: var(--muted); font-size: 0.72rem; text-align: center; padding: 8px; } .grid-mask-icon { font-size: 1.3rem; } .fleet-frame.grid-hidden .board { visibility: hidden; } .fleet-frame.grid-hidden .grid-mask { display: flex; } .legend { display: flex; gap: 8px; color: var(--muted); font-size: 0.78rem; flex-wrap: wrap; flex-shrink: 0; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .board { aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); gap: 3px; } .main-board-frame .board { height: 100%; width: auto; max-width: 100%; margin: 0 auto; } .fleet-frame .board { width: 100%; height: auto; max-height: 100%; } .cell { border-radius: 5px; background: var(--cell-empty-bg); border: 1px solid var(--cell-empty-border); } .cell.ship { background: linear-gradient(135deg, var(--ship-a), var(--ship-b)); } .cell.hit { background: linear-gradient(135deg, var(--hit-a), var(--hit-b)); } .cell.sunk { background: linear-gradient(135deg, var(--sunk-a), var(--sunk-b)); } .cell.miss { background: var(--cell-miss-bg); } .cell.unknown { cursor: pointer; } .cell.unknown:hover { outline: 2px solid var(--accent); } /* Queued premove (issue #28) — a distinct amber marker with its firing order, shown while it's the opponent's turn. Cleared/converted once the shot actually fires. */ .cell.premove { background: linear-gradient(135deg, rgba(245, 158, 11, 0.85), rgba(217, 119, 6, 0.85)); color: #1a1205; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.9); } .cell.best-cell { box-shadow: inset 0 0 0 3px var(--hit-a); } .cell.chosen-cell { box-shadow: inset 0 0 0 3px var(--accent); } .cell.best-cell.chosen-cell { box-shadow: inset 0 0 0 3px var(--hit-a), inset 0 0 0 6px var(--accent); } .prob-import { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } .prob-import label { font-size: 0.8rem; color: var(--muted); } .prob-import select, .prob-import textarea { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: var(--text); padding: 10px 12px; font: inherit; } .prob-import textarea { min-height: 76px; resize: vertical; } #resultsPanel.hidden, #inviteRow.hidden, #duelBoards.hidden, #duelInviteRow.hidden, #statusPanel.hidden, #waitingPanel.hidden, #duelDashboard.hidden, #guestJoinPanel.hidden { display: none; } .hidden { display: none; } .prob-lab-layout { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-top: 16px; } .prob-board-frame { width: min(920px, 100%); flex-shrink: 0; } .prob-lab-layout .sidebar { flex: 0 1 260px; min-width: 220px; max-width: 280px; max-height: 720px; } .prob-board-row { display: flex; gap: 16px; align-items: flex-start; } .prob-board-slot { flex: 1 1 auto; min-width: 0; } .prob-board-slot .board { width: 100%; height: auto; } .prob-turn-stats { flex: 0 0 180px; display: flex; flex-direction: column; gap: 8px; } .prob-legend { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); } .prob-legend-bar { flex: 1; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--good-rgb), 0.05), rgba(var(--good-rgb), 0.9)); border: 1px solid rgba(255, 255, 255, 0.08); } .legend-swatch { display: inline-block; width: 13px; height: 13px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; } #shotListPanel .move-row { cursor: pointer; } .sidebar { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-right: 2px; } .nav-card { border-radius: 20px; padding: 14px; flex-shrink: 0; } .card-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .card-heading span { color: var(--muted); font-size: 0.8rem; } .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stat { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .stat span { color: var(--muted); font-size: 0.72rem; } .stat strong { font-size: 1rem; } .movecenter-card { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 10px; } .tabs-row { display: flex; gap: 4px; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tab-btn { background: transparent; color: var(--muted); padding: 8px 12px; font-size: 0.85rem; border-radius: 0; border-bottom: 2px solid transparent; } .tab-btn.active { color: var(--text); border-color: var(--accent); } .tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } .tab-panel.hidden { display: none; } #replayGameBtn { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 8px 12px; } .action-row { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .save-status { margin: 0; font-size: 0.76rem; color: var(--muted); min-height: 1em; } .move-log { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 4px 0; background: rgba(255, 255, 255, 0.03); border-radius: 14px; color: var(--text); font-size: 0.85rem; } .move-log-empty { margin: 0; padding: 10px; color: var(--muted); } .chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 4px 0; } .chat-message { align-self: flex-start; max-width: 85%; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 0.85rem; word-break: break-word; } .chat-message.mine { align-self: flex-end; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #06121f; } .chat-message-time { display: block; margin-top: 2px; font-size: 0.68rem; opacity: 0.7; } .chat-input-row { display: flex; gap: 8px; margin-top: 8px; flex-shrink: 0; } .chat-input-row input { flex: 1; border: 1px solid var(--panel-border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 8px 14px; } .move-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; } .move-row:nth-child(odd) { background: rgba(255, 255, 255, 0.03); } .move-num { color: var(--muted); font-size: 0.75rem; text-align: right; } .move-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; min-width: 0; } .move-coord { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .move-cell.miss .move-coord { color: var(--muted); } .move-cell.hit .move-coord { color: var(--hit-a); } .move-cell.sunk .move-coord { color: var(--bad); font-weight: 600; } .move-time { flex-shrink: 0; font-size: 0.72rem; color: var(--muted); } #leaderboardList { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 8px; } #leaderboardList li { display: flex; justify-content: space-between; gap: 12px; color: var(--text); } .hidden-review { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; background: rgba(3, 6, 16, 0.65); backdrop-filter: blur(6px); z-index: 50; padding: 16px; } .hidden-review:has(.hidden-review-content.show) { display: flex; } .hidden-review-content { display: none; position: relative; width: 100%; max-width: 380px; padding: 26px 22px 22px; border-radius: 24px; background: var(--surface); color: var(--text); border: 1px solid var(--panel-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-align: center; } .hidden-review-content.show { display: block; } .review-close { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.08); color: var(--text); width: 28px; height: 28px; border-radius: 50%; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .result-header { margin-bottom: 16px; } .result-trophy { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 215, 100, 0.15); font-size: 1.8rem; margin-bottom: 10px; } .result-header h2 { margin: 0; font-size: 1.3rem; } .result-header p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; } .result-message { display: flex; align-items: flex-start; gap: 10px; text-align: left; background: rgba(255, 255, 255, 0.04); border-radius: 16px; padding: 12px; margin-bottom: 14px; } .speech-bubble { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--text); } .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .metric { background: rgba(255, 255, 255, 0.05); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .metric-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--good); color: #06241a; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .metric strong { font-size: 1rem; } .metric-label { color: var(--muted); font-size: 0.7rem; } .primary-btn { display: block; width: 100%; padding: 13px; border-radius: 14px; background: linear-gradient(90deg, var(--good), #2bb673); color: #06241a; font-weight: 700; text-decoration: none; margin-bottom: 10px; } .modal-actions { display: flex; gap: 8px; } .modal-actions button, .modal-actions a { flex: 1; background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px; font-size: 0.82rem; text-decoration: none; text-align: center; } @media (min-width: 1025px) { /* Desktop: pin the whole board layout to the viewport height so a growing move/chat list can never push the grids around. .page-main becomes a flex column (instead of a scrolling block) so .dashboard { flex: 1 } gets a definite height; overflow is then absorbed *inside* .sidebar / .move-log (which already carry overflow-y: auto), not by growing the container. */ .board-page .page-main { display: flex; flex-direction: column; overflow: hidden; } /* Make the dashboard fill the full viewport height. height: 100% (not just flex: 1) is the reliable lever here — .page-main is a flex child of the 100dvh .app-shell, so it has a definite height and this resolves even if flex-grow doesn't. grid-template-rows: minmax(0, 1fr) then pins the row to that full height, so the Coups/Chat card is full-height and fixed: a growing move list scrolls inside .move-log / .sidebar instead of resizing the card or shifting the grids. */ .board-page .dashboard { height: 100%; grid-template-rows: minmax(0, 1fr); } /* Desktop: the mobile-derived layout (main board sized purely by available height, fleet minimap pinned at a small fixed width) leaves a large dead gap between the two boards on wide/short viewports. Let the main board frame size to its actual square instead of flex-growing past it, and size the fleet minimap off the space that frees up so it's legible. */ .board-row { gap: 24px; } .main-board-frame { flex: 0 1 auto; } .fleet-frame { width: clamp(220px, 34vh, 400px); align-self: flex-start; } } @media (max-width: 1024px) { .dashboard { grid-template-columns: 1fr; overflow-y: auto; } .board-stage { min-height: 480px; } .sidebar { overflow-y: visible; } .movecenter-card { min-height: 340px; } .move-log { max-height: 280px; } } @media (max-width: 720px) { .app-shell { padding: 12px; gap: 10px; } .topbar { flex-wrap: wrap; justify-content: center; padding: 10px 14px; } .fleet-frame { width: clamp(96px, 26vw, 150px); } #replayGameBtn { width: 100%; } } @media (max-width: 640px) { html, body { overflow: auto; } .app-shell { height: auto; min-height: 100vh; min-height: 100dvh; padding: 10px; gap: 8px; } .topbar { flex-direction: column; padding: 10px; gap: 8px; } .brand h1 { font-size: 1.05rem; } .mode-pills { width: 100%; justify-content: center; } .mode-btn { flex: 1; padding: 8px 4px; font-size: 0.78rem; } .topbar-actions { width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px; } .topbar-actions .pill-input { display: none; } .topbar-actions .leaderboard-trigger, .topbar-actions #newMatchBtn, .topbar-actions #logoutBtn { flex: 1 1 auto; text-align: center; } .leaderboard-popover { left: 50%; transform: translateX(-50%); } .dashboard { height: auto; overflow: visible; } .board-stage { min-height: auto; } .board-row { gap: 8px; } .fleet-frame { width: clamp(78px, 24vw, 110px); } .fleet-frame .legend { display: none; } .fleet-header { justify-content: flex-end; } .sidebar { overflow: visible; } .movecenter-card { min-height: auto; } .move-log { max-height: 220px; } } /* Landing page */ .landing-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 16px; gap: 24px; } .landing-topbar { flex-shrink: 0; } .primary-link-btn { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: white; padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; } .landing-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 20px; max-width: 1100px; width: 100%; margin: 0 auto; align-items: start; } .landing-hero { padding: 40px; border-radius: 24px; display: flex; flex-direction: column; gap: 16px; } .landing-hero h2 { margin: 0; font-size: 2rem; line-height: 1.25; } .landing-hero p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 46ch; } .landing-cta { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .landing-leaderboard { border-radius: 24px; padding: 18px; } @media (max-width: 860px) { .landing-main { grid-template-columns: 1fr; } } /* Auth pages (login / signup) */ .auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; } .auth-card { width: 100%; max-width: 380px; padding: 28px 26px; border-radius: 24px; display: flex; flex-direction: column; gap: 16px; } .auth-brand { justify-content: center; } .auth-card h2 { margin: 0; text-align: center; font-size: 1.2rem; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-form .pill-input { gap: 6px; } .auth-form .pill-input input { width: 100%; min-width: 0; } .form-error { margin: 0; min-height: 1em; color: var(--bad); font-size: 0.82rem; } .form-notice { margin: 0; min-height: 1em; color: var(--good); font-size: 0.82rem; } .auth-switch { margin: 0; text-align: center; color: var(--muted); font-size: 0.85rem; } .auth-switch a { color: var(--accent); } .auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 999px; background: #fff; color: #1f1f1f; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.1); } .google-btn:hover { background: #f3f4f6; } .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* Dashboard-style content pages (home, challenges, learn, practice, leaderboard, community, settings) */ .side-nav-link.active { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } .page-main { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px 24px; } .page-header { margin-bottom: 18px; } .page-header h2 { margin: 0 0 4px; font-size: 1.5rem; } .page-header p { margin: 0; color: var(--muted); } .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat-strip-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .stat-strip-icon { font-size: 1.5rem; flex-shrink: 0; } .stat-strip-item strong { display: block; font-size: 1.05rem; } .stat-strip-item span { color: var(--muted); font-size: 0.78rem; } .home-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; } .quick-actions { display: flex; flex-direction: column; gap: 10px; } .quick-action-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: var(--text); font-weight: 600; } .quick-action-btn .quick-action-icon { font-size: 1.3rem; flex-shrink: 0; } .quick-action-btn.soon { opacity: 0.55; cursor: default; position: relative; } .quick-action-badge { margin-left: auto; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.1); color: var(--muted); padding: 3px 8px; border-radius: 999px; } .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; } .preview-card { padding: 18px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); } .preview-card-icon { font-size: 1.6rem; } .preview-card h3 { margin: 0; font-size: 1rem; } .preview-card p { margin: 0; color: var(--muted); font-size: 0.85rem; flex: 1; } .preview-card-cta { color: var(--accent); font-size: 0.85rem; font-weight: 600; } /* Online play (chess.com-style): fleet placement card, board preview, and mode picker, centered as a group instead of the old inline mode-pills-only layout. */ .pvp-layout { display: flex; gap: 20px; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-top: 16px; } /* PC : remplir la hauteur et centrer les cartes verticalement plutôt que de les coller en haut avec un grand vide en dessous. .page-main devient une colonne flex (l'en-tête reste en haut) et .pvp-layout prend la hauteur restante en centrant les 3 cartes. Uniquement en mode horizontal (≥1001px) — sous ce seuil la page est empilée et défile naturellement. */ @media (min-width: 1001px) { body.pvp-page .page-main { display: flex; flex-direction: column; } body.pvp-page .pvp-layout { flex: 1; align-items: center; margin-top: 0; } } .pvp-placement-card { width: min(300px, 100%); flex-shrink: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-self: center; } .pvp-placement-hint { margin: 0; color: var(--muted); font-size: 0.85rem; } /* Placement de la flotte repliable — mobile uniquement. Le placement est purement cosmétique (le serveur place la flotte aléatoirement), donc sur petit écran on replie les réglages par défaut pour remonter la carte matchmaking sans scroll : le plateau (la flotte) reste visible, une flèche déplie les réglages. Sur desktop le corps est toujours affiché et la flèche masquée — aucun changement. */ .pvp-placement-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 12px; margin-bottom: 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: transparent; color: inherit; font-weight: 700; font-size: 0.95rem; text-align: left; cursor: default; } .pvp-placement-body { display: flex; flex-direction: column; gap: 12px; } .pvp-placement-chevron { display: none; margin-left: auto; font-size: 0.9rem; color: var(--muted); transition: transform 0.2s ease; } /* Binaire : soit les 3 cartes vraiment côte à côte (horizontal), soit tout empilé (vertical) — jamais « 2 en haut + 1 dessous ». On empile dès qu'un plateau en 3 colonnes deviendrait trop petit : à ≤1000px, placement (300) + matchmaking (300) mangent la largeur et le plateau tomberait sous ~300px. La règle de base ne remet donc les 3 sur une ligne qu'au-dessus de 1000px, où le plateau reste ≥ ~325px (≥ la largeur des cartes). */ @media (max-width: 1000px) { .pvp-layout { flex-direction: column; align-items: center; } /* Plateau à taille fixe et centré : annule le flex:1 1 0 de base. Sélecteur à specificité renforcée (.pvp-layout …) car la règle de base .pvp-preview-frame est déclarée plus bas dans le fichier et gagnerait sinon à égalité. */ .pvp-layout .pvp-preview-frame { flex: none; width: min(300px, 100%); padding: 10px; } .pvp-panel { width: min(420px, 100%); } } @media (max-width: 720px) { .pvp-placement-toggle { cursor: pointer; } .pvp-placement-chevron { display: inline-block; transform: rotate(-90deg); /* replié : flèche pointant vers la droite */ } .pvp-placement-card.expanded .pvp-placement-chevron { transform: rotate(0); /* déplié : flèche vers le bas */ } .pvp-placement-body { display: none; } .pvp-placement-card.expanded .pvp-placement-body { display: flex; } } .pvp-placement-actions { display: flex; gap: 8px; } .pvp-placement-actions .pvp-placement-btn { flex: 1; padding: 10px 6px; font-size: 0.8rem; } .pvp-placement-btn.active { background: rgba(var(--good-rgb), 0.18); border-color: rgba(var(--good-rgb), 0.5); color: var(--good); } .pvp-favorites { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .pvp-favorites-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; } .pvp-favorite-slot { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 8px; } .pvp-favorite-preview { width: 56px; height: 56px; flex-shrink: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 3px; cursor: pointer; } .pvp-favorite-preview.empty { cursor: default; opacity: 0.4; } .pvp-mini-cell { border-radius: 1px; background: rgba(255, 255, 255, 0.08); } .pvp-mini-cell.ship { background: linear-gradient(135deg, var(--ship-a), var(--ship-b)); } .pvp-favorite-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; } .pvp-favorite-name { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); color: var(--text); font-size: 0.8rem; padding: 3px 0; } .pvp-favorite-name:focus { outline: none; border-color: var(--accent); } .pvp-favorite-save { flex-shrink: 0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 5px 7px; font-size: 0.82rem; color: var(--text); } /* Plateau flexible : il rétrécit pour tenir sur la même ligne que la carte de placement et la carte matchmaking dès qu'il y a la place (tablette+), au lieu de rester bloqué à 720px et de forcer le passage à la ligne. min-width:0 est indispensable pour qu'un enfant flex puisse réellement rétrécir sous sa taille de contenu. Sur mobile (≤720px) il est repassé en taille fixe centrée. */ .pvp-preview-frame { flex: 1 1 0; /* basis 0 : ne compte quasi pas dans le calcul de retour à la ligne, et le plateau grandit pour absorber l'espace restant → 3 cartes sur une ligne dès ~720px, plateau qui grandit avec l'écran. */ min-width: 0; max-width: 720px; padding: 16px; } .pvp-preview-frame .board { width: 100%; height: auto; } .pvp-preview-frame .cell.ship { cursor: grab; touch-action: none; } .pvp-preview-frame .board.locked .cell.ship { cursor: default; opacity: 0.9; } .pvp-panel { /* grow:0 pour que l'espace libre aille au plateau (flex:1 1 0) et pas à la carte matchmaking — sinon les deux se partagent la place et le plateau reste minuscule sur tablette. */ flex: 0 1 300px; min-width: 260px; max-width: 420px; align-self: center; /* centrée verticalement dans la ligne, comme la carte de placement, au lieu d'être collée en haut à côté du plateau */ padding: 20px; display: flex; flex-direction: column; gap: 14px; } .pvp-panel-heading { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pvp-panel-heading-icon { font-size: 1rem; } .pvp-mode-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .pvp-mode-group-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; } .pvp-mode-option { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; color: var(--text); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 0.92rem; text-align: left; } .pvp-mode-option:hover { background: rgba(255, 255, 255, 0.09); } .pvp-mode-option.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); } .pvp-start-btn { background: linear-gradient(90deg, var(--good), #2fbf76); color: #06241a; font-weight: 700; padding: 14px; border-radius: 14px; font-size: 0.95rem; margin-top: 4px; } .pvp-start-btn:disabled { opacity: 0.5; cursor: default; } .pvp-waiting { text-align: center; padding: 12px 0; } .pvp-waiting-hint { color: var(--muted); font-size: 0.85rem; } .pvp-secondary-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .last-game-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .last-game-empty { color: var(--muted); font-size: 0.9rem; } .history-list { display: flex; flex-direction: column; gap: 6px; } .history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); cursor: pointer; text-align: left; color: var(--text); border: 0; width: 100%; font: inherit; } .history-row:hover { background: rgba(255, 255, 255, 0.08); } .history-row-outcome { font-weight: 700; font-size: 0.85rem; } .history-row-outcome.win { color: var(--good); } .history-row-outcome.loss { color: var(--bad); } .history-row-meta { color: var(--muted); font-size: 0.78rem; } .hidden-review-content.wide { max-width: 640px; } .move-row.active { background: rgba(var(--accent-rgb), 0.15); outline: 1px solid rgba(var(--accent-rgb), 0.4); } .hidden-review-content.extra-wide { max-width: 820px; max-height: 90vh; overflow-y: auto; } .replay-caption-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .replay-caption { text-align: center; color: var(--muted); font-size: 0.85rem; } .ghost-btn.small { padding: 6px 12px; font-size: 0.78rem; } .ghost-btn.active { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); } .replay-boards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } .replay-board-frame { display: flex; flex-direction: column; gap: 6px; width: 220px; align-items: center; } .replay-board { width: 100%; } .replay-clock { font-variant-numeric: tabular-nums; font-weight: 700; background: rgba(255, 255, 255, 0.05); padding: 4px 12px; border-radius: 8px; font-size: 0.85rem; } .replay-board-label { margin: 0; color: var(--muted); font-size: 0.75rem; } .replay-controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; } .replay-controls button { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; width: 44px; height: 38px; font-size: 1.1rem; } .replay-controls button:hover { background: rgba(255, 255, 255, 0.14); } .replay-controls button:disabled { opacity: 0.35; cursor: default; transform: none; } .leaderboard-table { width: 100%; border-collapse: collapse; } .leaderboard-table th { text-align: left; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px; } .leaderboard-table td { padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; } .leaderboard-table tr.is-you { background: rgba(var(--accent-rgb), 0.08); } .leaderboard-table .rank-cell { font-weight: 700; color: var(--muted); width: 40px; } .leaderboard-table .player-cell { display: flex; align-items: center; gap: 10px; } .leaderboard-table th.col-active, .leaderboard-table td.col-active { color: var(--text); font-weight: 700; } .guide-section { padding: 20px; border-radius: 20px; margin-bottom: 14px; } .guide-section h3 { margin-top: 0; } .guide-section p, .guide-section li { color: var(--muted); line-height: 1.6; } /* /learn (issue #5): tabbed Leçons / Classroom / Ouvertures card. */ .learn-tabs-card { padding: 20px; } .learn-tabs-card .tab-panel { margin-top: 16px; } .lessons-list .guide-section:last-child { margin-bottom: 0; } .classroom-hint { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; line-height: 1.5; } #openingsVariantPicker { margin-bottom: 14px; max-width: 480px; } .classroom-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .classroom-board-frame { width: min(480px, 100%); flex-shrink: 0; padding: 16px; } .classroom-board-frame .board { width: 100%; height: auto; } .classroom-panel { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 14px; } .classroom-brush-row { display: flex; flex-direction: column; gap: 8px; } .classroom-brush-tip { margin: 0; color: var(--muted); font-size: 0.8rem; } .practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .practice-card { padding: 20px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; } .practice-card h3 { margin: 0; } .practice-card p { margin: 0; color: var(--muted); font-size: 0.85rem; flex: 1; } .invite-row { display: flex; gap: 8px; } .invite-row input { flex: 1; border: 1px solid rgba(255, 255, 255, 0.13); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 10px 16px; min-width: 0; } .settings-section { padding: 20px; border-radius: 20px; margin-bottom: 14px; max-width: 480px; } .settings-section h3 { margin-top: 0; } .settings-form { display: flex; flex-direction: column; gap: 14px; } .settings-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .settings-row span:first-child { color: var(--muted); } .settings-hint { margin-top: -6px; margin-bottom: 14px; color: var(--muted); font-size: 0.85rem; } .customize-section { max-width: 640px; } /* Toggle switch used for on/off gameplay preferences (e.g. premoves). */ .settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; } .settings-toggle .settings-toggle-label { color: var(--text); font-weight: 600; } .settings-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .settings-toggle .switch-track { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); transition: background 0.18s ease; } .settings-toggle .switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.18s ease; } .settings-toggle input:checked + .switch-track { background: var(--accent); } .settings-toggle input:checked + .switch-track::after { transform: translateX(20px); } .settings-toggle input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-preview-row { display: flex; gap: 20px; align-items: flex-start; } .theme-swatch-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; } .theme-swatch { position: relative; aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--panel-border); overflow: hidden; padding: 0; } .theme-swatch:hover { border-color: var(--muted); transform: none; } .theme-swatch.active { border-color: var(--good); } .theme-swatch-check { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #06241a; display: none; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; } .theme-swatch.active .theme-swatch-check { display: flex; } .theme-swatch-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 0.66rem; text-align: center; background: rgba(2, 4, 12, 0.5); color: var(--text); } .theme-swatch-ship { position: absolute; inset: 0; } .theme-preview-board { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 40px); grid-auto-rows: 40px; gap: 5px; padding: 12px; border-radius: 16px; background: var(--surface-2); } @media (max-width: 640px) { .theme-preview-row { flex-direction: column; } .theme-preview-board { align-self: center; } } @media (max-width: 640px) { .home-grid { grid-template-columns: 1fr; } } /* ============================================================================ Immersive mobile game board (duel + solo) — Chess.com-style single big board. The attack board fills the width; your fleet sits as a small minimap top-right; the header collapses to a back arrow; the move sheet becomes a bottom strip. Scoped to board pages via .board-page so other pages keep their normal header. ============================================================================ */ .mobile-back { display: none; } @media (max-width: 640px) { .board-page .topbar { display: none; } body.board-page { overflow-x: hidden; } .mobile-back { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 2px 2px 4px; } .mobile-back a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .mobile-back .mobile-back-arrow { font-size: 1.5rem; line-height: 1; } /* Keep the board column from ever pushing wider than the screen */ .board-page .dashboard, .board-page .board-stage, .board-page .board-row, .board-page .sidebar { min-width: 0; max-width: 100%; } /* One big board, fleet minimap floated to the top-right above it */ .board-row { flex-direction: column; align-items: stretch; gap: 8px; } .main-board-frame { order: 2; padding: 2px; background: transparent; } .main-board-frame .board { width: 100%; height: auto; max-width: none; } .fleet-frame { order: 1; align-self: flex-end; width: 38%; max-width: 150px; margin-right: 2px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.05); } /* Move sheet: horizontal scrolling strip of turn chips at the bottom */ .move-log { display: flex; flex: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 4px; max-height: none; padding: 6px; } .move-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 92px; flex: 0 0 auto; padding: 6px; } .move-num { text-align: center; } .move-cell { justify-content: center; } .move-log-empty { white-space: nowrap; } } /* ============================================================================ Portrait lock: on phones held in landscape, cover the app with a "rotate your device" curtain. Paired with manifest "orientation": portrait and a best-effort screen.orientation.lock() in pwa-register.js. Gated on (pointer: coarse) so a short desktop window in landscape is never affected. ============================================================================ */ #rotate-lock-overlay { display: none; } @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { #rotate-lock-overlay { display: flex; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--site-bg); } .rotate-lock-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 320px; } .rotate-lock-icon { font-size: 3rem; animation: rotate-lock-tilt 1.8s ease-in-out infinite; } .rotate-lock-inner p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; } @keyframes rotate-lock-tilt { 0%, 55%, 100% { transform: rotate(0deg); } 75%, 95% { transform: rotate(-90deg); } } } /* Victory confetti: a 1s burst of falling emoji shown before the end-of-game popup. */ .confetti-layer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; } .confetti-piece { position: absolute; top: -8%; will-change: transform, opacity; animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards; } @keyframes confetti-fall { 0% { transform: translateY(-12vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(112vh) rotate(340deg); opacity: 0.85; } } /* Site footer, injected by /js/core/footer.js on every page. A normal block in the document flow, sitting right after the page's content — not fixed/overlaid. body.has-footer just needs to allow scrolling past one viewport to reach it (the global html/body rule is overflow:hidden, since most pages are exactly one viewport tall and don't need to scroll at all otherwise). */ body.has-footer { height: auto; min-height: 100%; overflow-y: auto; } .site-footer { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; color: var(--muted); font-size: 0.82rem; text-align: center; background: var(--nav-bg); border-top: 1px solid var(--panel-border); backdrop-filter: blur(14px); } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--text); text-decoration: underline; } .site-footer .site-footer-sep { opacity: 0.5; } /* Legal pages (mentions légales, confidentialité, CGU) — public, standalone, own scroll container since these pages are longer than a viewport and the global body is overflow:hidden. */ body.legal-page { height: auto; min-height: 100%; overflow-y: auto; } .legal-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 16px; gap: 24px; } .legal-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding-bottom: 24px; } .legal-card { padding: 32px clamp(20px, 5vw, 44px); border-radius: 24px; } .legal-card h2 { margin-top: 0; } .legal-updated { color: var(--muted); font-size: 0.85rem; margin-top: -8px; } .legal-card h3 { margin-bottom: 6px; } .legal-card section { margin-bottom: 26px; } .legal-card section:last-child { margin-bottom: 0; } .legal-card p, .legal-card li { color: var(--muted); line-height: 1.6; } .legal-card ul { margin: 8px 0; padding-left: 20px; } .legal-card a { color: var(--accent); } .legal-placeholder { border: 1px dashed var(--panel-border); border-radius: 12px; padding: 12px 14px; font-size: 0.85rem; } .legal-nav-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; } /* --- Guest mode: entry CTAs + feature locks + sign-up prompt modal --- */ .auth-guest-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); text-align: center; } .landing-guest-link { margin-top: 14px; background: none; border: none; color: var(--accent); font-size: 0.9rem; cursor: pointer; padding: 0; } .landing-guest-link:hover { text-decoration: underline; } /* A locked control stays visible but dimmed, with a small padlock badge. */ .nc-locked { position: relative; opacity: 0.55; cursor: not-allowed; } .nc-lock-badge { margin-left: 6px; font-size: 0.85em; } .nc-guest-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 8, 20, 0.72); backdrop-filter: blur(4px); } .nc-guest-modal { position: relative; width: min(400px, 100%); background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 28px 24px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .nc-guest-modal-icon { font-size: 2rem; } .nc-guest-modal h3 { margin: 10px 0 6px; } .nc-guest-modal p { margin: 0 0 20px; color: var(--muted); font-size: 0.9rem; } .nc-guest-modal-actions { display: flex; flex-direction: column; gap: 10px; } .nc-guest-modal-actions .primary-btn, .nc-guest-modal-actions .ghost-btn { justify-content: center; text-decoration: none; } .nc-guest-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; } /* Unranked matchmaking toggle on the PvP panel. */ .pvp-unranked-toggle { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.04); cursor: pointer; } .pvp-unranked-toggle input { margin-top: 3px; flex-shrink: 0; } .pvp-unranked-text { display: flex; flex-direction: column; gap: 2px; } .pvp-unranked-text small { color: var(--muted); font-size: 0.78rem; } .pvp-unranked-forced { opacity: 0.75; cursor: not-allowed; }