/** * Styles - Jeux RKUL * Plateforme centralisee */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Les variables historiques de la plateforme sont desormais des ALIAS des tokens de css/retro-tokens.css (ticket #134). Aucune utilisation n'a eu a etre renommee dans les 1000 lignes qui suivent — et le conflit de sens avec lobby/css/lobby.css, ou --primary valait #a855f7 au lieu de #667eea, disparait : les deux pointent maintenant sur le meme --rk-accent. */ :root { --bg-dark: var(--rk-void); --bg-card: var(--rk-surface); --primary: var(--rk-accent); --primary-hover: var(--rk-accent-2); --secondary: var(--rk-accent-2); --success: var(--rk-ok); --danger: var(--rk-danger); --warning: var(--rk-warn); --text: var(--rk-ink); --text-muted: var(--rk-ink-dim); --trix-color: var(--rk-g-trix); --tetris-color: var(--rk-g-tetris); } body { /* Le fond et la police viennent de .rk-page (css/retro.css), pose sur le de chaque page. Il ne reste ici que la mise en page. */ min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; } /* Header */ .platform-header { text-align: center; margin-bottom: 30px; margin-top: 20px; } .platform-title { font-family: var(--rk-font-display); /* Press Start 2P est ~1,7x plus large que Segoe UI : on la declare nettement plus petite que les 2.5rem d'origine. */ font-size: clamp(1rem, 5.2vw, 1.9rem); line-height: 1.7; letter-spacing: -0.02em; text-transform: uppercase; /* Couleur pleine + text-shadow plutot que background-clip:text : avec un texte transparent, le halo serait rendu SOUS le texte, en bloc plein. */ color: var(--rk-accent); text-shadow: var(--rk-glow); overflow-wrap: anywhere; margin-bottom: 12px; } .platform-subtitle { color: var(--text-muted); font-size: 1rem; } /* Container */ .platform-container { width: 100%; max-width: 500px; } /* Ecrans */ .screen { display: none; animation: fadeIn 0.3s ease; } .screen.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Boutons */ .btn { display: inline-block; padding: 12px 24px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; color: white; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(var(--rk-accent-rgb), 0.4); } .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--rk-line); } .btn-secondary:hover:not(:disabled) { background: var(--rk-surface-2); } .btn-block { display: block; width: 100%; } .btn-small { padding: 8px 16px; font-size: 0.85rem; } /* Ces deux boutons sont des APLATS neon (les seuls du depot : « Accepter » et « Refuser » d'une invitation). Leur encre ne peut pas etre blanche : en theme nuit, du blanc sur le vert #7cff5a donne 1,5:1 et le mot disparait. --rk-on-neon vaut l'encre de l'ecran la nuit, le blanc le jour. */ .btn-danger { background: var(--danger); color: var(--rk-on-neon); font-weight: 700; } .btn-danger:hover:not(:disabled) { filter: brightness(1.15); } .btn-success { background: var(--success); color: var(--rk-on-neon); font-weight: 700; } .btn-success:hover:not(:disabled) { filter: brightness(1.15); } /* Formulaires */ .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: var(--text-muted); } .form-group input { width: 100%; padding: 12px; border: 1px solid var(--rk-line); border-radius: 8px; background: var(--rk-inset); color: var(--text); font-size: 1.1rem; text-align: center; } .form-group input:focus { outline: none; border-color: var(--primary); } .error-message { color: var(--danger); font-size: 0.9rem; margin-top: 10px; text-align: center; min-height: 1.2em; } /* ===== ECRAN LOGIN ===== */ #loginScreen { text-align: center; } #loginScreen h2 { margin-bottom: 20px; font-size: 1.5rem; } .existing-users { display: flex; flex-direction: column; gap: 8px; margin-bottom: 25px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; /* ne pas entrainer la page (#137) */ } .user-card { background: var(--bg-card); border: 1px solid var(--rk-line); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; } .user-card:hover { background: var(--rk-surface-2); border-color: var(--primary); transform: translateY(-1px); } .user-card .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .user-card .user-name { font-size: 1.05rem; font-weight: 500; } .no-users { color: var(--text-muted); font-size: 0.9rem; padding: 15px; } .separator { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 0.85rem; } .separator::before, .separator::after { content: ''; flex: 1; height: 1px; /* --rk-line, pas --rk-surface-2 : c'est un trait, pas une surface. En theme clair, --rk-surface-2 serait invisible sur le fond. */ background: var(--rk-line); } .create-account { background: var(--bg-card); border-radius: 12px; padding: 20px; } .create-account .form-group input { text-transform: none; letter-spacing: normal; } /* ═══════════════════════════════════════════════════════════════════════ HUB : les 3 portes du dashboard ═══════════════════════════════════════════════════════════════════════ */ .hub-doors { display: flex; flex-direction: column; gap: 12px; margin: 30px 0 10px; } .hub-door { display: flex; align-items: center; gap: 16px; padding: 18px 18px; background: var(--bg-card); border: 1px solid var(--rk-line); border-left: 4px solid var(--primary); border-radius: 12px; text-decoration: none; color: var(--text); transition: transform 0.2s ease, background 0.2s ease; } .hub-door:hover { transform: translateX(4px); background: var(--rk-surface-2); } /* Trois neons distincts : --primary et --trix-color aliasent tous deux le cyan depuis le ticket #134, les portes multi et solo se seraient confondues. */ .hub-door.door-multi { border-left-color: var(--rk-cyan); color: var(--rk-ink); } .hub-door.door-solo { border-left-color: var(--rk-magenta); color: var(--rk-ink); } .hub-door.door-divers { border-left-color: var(--rk-yellow); color: var(--rk-ink); } .hub-door.door-multi .door-title { color: var(--rk-cyan); } .hub-door.door-solo .door-title { color: var(--rk-magenta); } .hub-door.door-divers .door-title { color: var(--rk-yellow); } /* Icone generee, a la place de l'emoji de 1.9rem d'avant le ticket #134. */ .door-icon { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 8px; } .door-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .door-title { font-family: var(--rk-font-display); font-size: 0.76rem; line-height: 1.5; letter-spacing: -0.02em; overflow-wrap: anywhere; } .door-sub { color: var(--text-muted); font-size: 0.82rem; line-height: 1.35; } .door-arrow { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════ ECRANS DE CATALOGUE (multi / solo / divers) ═══════════════════════════════════════════════════════════════════════ */ .screen-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .screen-nav h2 { font-size: 1.4rem; } .screen-intro { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 22px; } .catalog-grid { display: flex; flex-direction: column; gap: 12px; } /* Tuiles en TEXTE SEUL : les vignettes ont ete retirees des catalogues. */ .game-tile { display: block; padding: 16px; background: var(--bg-card); border: 1px solid var(--rk-line); border-radius: 12px; text-decoration: none; color: var(--text); transition: transform 0.2s ease, background 0.2s ease; } .game-tile:hover { transform: translateY(-3px); background: var(--rk-surface-2); } .tile-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .tile-title { font-family: var(--rk-font-display); font-size: 0.78rem; line-height: 1.5; letter-spacing: -0.02em; color: var(--rk-tile-accent, var(--rk-accent)); overflow-wrap: anywhere; } .tile-desc { color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; } .tile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .tile-tag { background: var(--rk-surface-2); color: var(--text-muted); padding: 3px 9px; border-radius: 10px; font-size: 0.72rem; } /* L'effectif prend la couleur d'identite du jeu, comme son titre : c'est l'unique pastille des tuiles de jeu, autant qu'elle serve le repere visuel plutot que de faire une tache grise de plus. */ .tile-tag.tag-players { background: var(--rk-surface-2); color: var(--rk-tile-accent, var(--rk-accent)); border: 1px solid currentColor; font-weight: 600; } .tile-tag.tag-standalone { background: rgba(255, 152, 0, 0.15); color: var(--warning); } /* Scores solo (dashboard) */ .solo-stats-list .game-stat-block { cursor: default; } /* ===== ECRAN DASHBOARD ===== */ .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .dashboard-header h2 { font-size: 1.4rem; } /* Stats */ .stats-section { margin-top: 30px; margin-bottom: 25px; } .stats-section h3, .invitations-section h3, .create-game-section h3, .active-games-section h3 { font-size: 1.1rem; margin-bottom: 12px; color: var(--text-muted); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; } .stat-card { background: var(--bg-card); border-radius: 10px; padding: 14px 10px; text-align: center; } .stat-value { /* Police pixel monospace : un score qui passe de 999 a 1000 ne fait plus sauter la mise en page. Taille reduite, la fonte est ~1,7x plus large. */ font-family: var(--rk-font-display); font-size: 1.35rem; line-height: 1.5; letter-spacing: -0.03em; color: var(--rk-accent); text-shadow: var(--rk-glow); } /* Le background-clip:text d'origine est devenu inutile (la valeur n'est plus un degrade) et il aurait masque le halo : couleur pleine + halo assorti. */ .stat-value.win { color: var(--rk-ok); text-shadow: 0 0 8px rgba(var(--rk-ok-rgb), .5); } .stat-value.lose { color: var(--rk-danger); text-shadow: 0 0 8px rgba(var(--rk-danger-rgb), .5); } .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; } .stats-by-game { display: flex; flex-direction: column; gap: 8px; } .game-stat-block { border-radius: 8px; overflow: hidden; background: var(--bg-card); } .game-stat-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.9rem; } .expandable .game-stat-row { cursor: pointer; user-select: none; } .expandable .game-stat-row:hover { background: var(--rk-surface-2); } .game-stat-row .game-name { font-weight: 600; min-width: 90px; /* Repli sur --text si le jeu n'a pas d'identite declaree. */ color: var(--rk-tile-accent, var(--text)); } .game-stat-row .game-detail { color: var(--text-muted); flex: 1; } .stat-toggle { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s; } .game-stat-block.open .stat-toggle { transform: rotate(180deg); } .game-history-list { display: none; border-top: 1px solid var(--rk-line); padding: 4px 0; } .game-stat-block.open .game-history-list { display: block; } .game-history-item { display: flex; flex-direction: column; gap: 5px; padding: 8px 14px; font-size: 0.85rem; } .game-history-item:not(:last-child) { border-bottom: 1px solid var(--rk-line); } .hist-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hist-players { display: flex; flex-wrap: wrap; gap: 6px; } .hist-player { background: var(--rk-surface-2); border-radius: 8px; padding: 2px 8px; font-size: 0.8rem; color: var(--text-muted); } .hist-player.winner { background: rgba(76, 175, 80, 0.18); color: var(--success); font-weight: 600; } .hist-opponent { flex: 1; color: var(--text-muted); } .hist-score { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 40px; text-align: center; } .hist-result { min-width: 56px; text-align: right; font-size: 0.8rem; font-weight: 600; } .hist-result.win { color: var(--success); } .hist-result.loss { color: var(--danger); } .hist-result.draw { color: var(--text-muted); } .hist-date { color: var(--text-muted); font-size: 0.8rem; min-width: 36px; text-align: right; } /* Invitations */ .invitations-section { margin-bottom: 25px; } .invitations-list { display: flex; flex-direction: column; gap: 8px; } .invitation-card { background: var(--bg-card); border: 1px solid var(--rk-line); border-radius: 10px; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .invitation-info { flex: 1; } .invitation-from { font-weight: 600; font-size: 0.95rem; } .invitation-game { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .invitation-actions { display: flex; gap: 6px; } .invitation-actions .btn { padding: 6px 12px; font-size: 0.8rem; } .no-invitations { color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 10px; } /* Parties actives */ .active-games-section { margin-bottom: 25px; } .active-games-list { display: flex; flex-direction: column; gap: 8px; } .active-game-card { background: var(--bg-card); border: 1px solid var(--rk-line); border-radius: 10px; padding: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s; } .active-game-card:hover { border-color: var(--primary); transform: translateY(-1px); } .active-game-info .active-game-type { font-weight: 600; font-size: 0.95rem; color: var(--rk-tile-accent, var(--text)); } .active-game-info .active-game-status { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .active-game-arrow { color: var(--text-muted); font-size: 1.2rem; } /* Creer une partie */ .create-game-section { margin-bottom: 10px; } /* Une seule colonne : chaque bouton porte desormais son effectif et sa description, qui ne tiennent pas dans une grille a 3 colonnes. Meme rythme vertical que le catalogue solo. */ .game-picker { display: flex; flex-direction: column; gap: 10px; } /* Meme anatomie que .game-tile du catalogue solo : les deux catalogues doivent rester interchangeables a l'oeil. Texte seul, sans vignette. */ .btn-game { display: block; width: 100%; padding: 16px; border: 1px solid var(--rk-line); border-radius: 12px; background: var(--rk-surface); text-align: left; /* La couleur du jeu arrive par --rk-tile-accent, pose en attribut style depuis PlatformConfig.gameTypes. Une seule regle au lieu des 6 blocs .btn-{game} + 12 lignes .game-name / .active-game-type qui vivaient ici : ajouter un jeu ne demande plus aucune ligne de CSS. */ color: var(--rk-tile-accent, var(--rk-accent)); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .btn-game:hover:not(:disabled) { transform: translateY(-3px); background: var(--rk-surface-2); box-shadow: 0 0 18px rgba(0, 0, 0, .35), 0 0 0 1px var(--rk-tile-accent, var(--rk-accent)); } .game-btn-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } /* Seul le nom porte la police pixel : elle est ~1,7x plus large que Segoe UI et rendrait la description illisible. */ .game-btn-title { font-family: var(--rk-font-display); font-size: 0.62rem; line-height: 1.6; letter-spacing: -0.02em; text-shadow: 0 0 10px rgba(0, 0, 0, .5); } .game-btn-desc { font-size: 0.84rem; font-weight: 400; line-height: 1.45; color: var(--text-muted); } /* ─── Identite de chaque jeu, en un seul endroit ──────────────────────── Une classe par jeu ne fait plus que POSER --rk-tile-accent ; ce sont les composants (bouton, libelle de stat, partie en cours) qui la consomment. js/platform-ui.js genere deja `class="game-name ${type}"` et `class="game-name solo-${id}"` : rien a changer cote JS. Les 6 blocs .btn-{game} en degrades codes en dur, plus leurs 12 lignes de .game-name / .active-game-type, tenaient dans ~85 lignes. */ .btn-trix, .game-name.trix, .active-game-type.trix { --rk-tile-accent: var(--rk-g-trix); } .btn-tetris, .game-name.tetris, .active-game-type.tetris { --rk-tile-accent: var(--rk-g-tetris); } .btn-bubbles, .game-name.bubbles, .active-game-type.bubbles { --rk-tile-accent: var(--rk-g-bubbles); } .btn-cassebrik, .game-name.cassebrik, .active-game-type.cassebrik { --rk-tile-accent: var(--rk-g-cassebrik); } .btn-serpent, .game-name.serpent, .active-game-type.serpent { --rk-tile-accent: var(--rk-g-serpent); } .btn-imposteur, .game-name.imposteur, .active-game-type.imposteur { --rk-tile-accent: var(--rk-g-imposteur); } .btn-camarade, .game-name.camarade, .active-game-type.camarade { --rk-tile-accent: var(--rk-g-camarade); } .btn-piquetteparty, .game-name.piquetteparty, .active-game-type.piquetteparty { --rk-tile-accent: var(--rk-g-piquetteparty); } /* Scores solo du dashboard : `game-name solo-${id}` (cf. platform-ui.js:134). Rappel : solo/tetris et games/tetris sont deux jeux distincts, avec deux tables de score distinctes — d'ou le prefixe solo-. */ .game-name.solo-serpent { --rk-tile-accent: var(--rk-g-serpent); } .game-name.solo-tetris { --rk-tile-accent: var(--rk-g-tetris); } .game-name.solo-arena { --rk-tile-accent: var(--rk-g-arena); } .game-name.solo-flip7 { --rk-tile-accent: var(--rk-g-flip7); } /* ===== ECRAN PARTIE CREEE ===== */ #gameCreatedScreen { text-align: center; } #gameCreatedScreen h2 { margin-bottom: 20px; font-size: 1.5rem; } .game-code-display { text-align: center; margin-bottom: 20px; } .game-code-display .label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 5px; } .game-code-display .code { font-family: var(--rk-font-display); /* clamp() indispensable : un code de 6 caracteres en pixel a 2.5rem deborde sur un ecran de 320 px. */ font-size: clamp(1.1rem, 7vw, 1.9rem); line-height: 1.7; /* La fonte porte deja sa propre chasse : 8px d'origine devenaient enormes. */ letter-spacing: 2px; color: var(--rk-accent); text-shadow: var(--rk-glow); } .invite-options { background: var(--bg-card); border-radius: 12px; padding: 20px; margin-bottom: 20px; text-align: left; } .invite-options h3 { font-size: 1rem; margin-bottom: 12px; } .invite-link-container { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; } .invite-link { flex: 1; padding: 10px; background: var(--rk-inset); border-radius: 8px; font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invite-options h4 { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 10px; } .invite-user-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; } .invite-user-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--rk-inset); border-radius: 8px; } .invite-user-row .user-name { font-size: 0.95rem; } .invite-user-row .btn { padding: 4px 12px; font-size: 0.8rem; } .invite-user-row .btn.invited { background: var(--success); cursor: default; } .action-buttons { display: flex; flex-direction: column; gap: 10px; } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rk-line); border-radius: 4px; } /* .theme-toggle a demenage dans css/retro.css (ticket #134) : il est desormais disponible sur les 15 pages, et plus seulement ici. */ /* ═══════════════════════════════════════════════════════════════════════ PAGE DES REGLES (/regles.html) Seule la mise en page est ici : le contenu des fiches (objectif, puces, touches) est stylé par js/game-rules.js, qui porte son propre CSS pour pouvoir s'injecter dans les 12 jeux sans toucher a leurs feuilles. ═══════════════════════════════════════════════════════════════════════ */ .rules-container { max-width: 720px; } /* Lien discret vers /regles.html, en fin de .screen-intro */ .rules-link { display: inline-block; margin-left: 4px; color: var(--primary); text-decoration: none; white-space: nowrap; } .rules-link:hover { text-decoration: underline; } .rules-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .rules-toc a { padding: 6px 12px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--rk-line); color: var(--text-muted); text-decoration: none; font-size: 0.84rem; transition: color 0.15s ease, border-color 0.15s ease; } .rules-toc a:hover { color: var(--text); border-color: var(--primary); } .rules-section { margin-bottom: 32px; } .rules-heading { font-size: 1.15rem; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rk-line); } .rules-card { background: var(--bg-card); border: 1px solid var(--rk-line); border-radius: 14px; padding: 18px 20px 22px; margin-bottom: 14px; /* Compense le header fixe absent : l'ancre ne colle pas au bord haut. */ scroll-margin-top: 16px; } .rules-card .gr-head h2 { font-size: 1.15rem; } /* ═══════════════════════════════════════════════════════════════════════ THEME CLAIR Il n'y a plus rien ici, et c'est le but du ticket #134. Cette section contenait ~25 selecteurs `:root[data-theme="light"] .classe` avec des valeurs en dur — une rustine par composant, a maintenir en double a chaque ajout. Le theme clair est desormais une CONSEQUENCE des tokens de css/retro-tokens.css : --rk-surface, --rk-line, --rk-inset, --rk-ink et --rk-card-shadow basculent, et tout ce qui les consomme suit. Un nouveau composant n'a donc plus de doublon a ecrire : il suffit qu'il n'utilise aucune couleur en dur. ═══════════════════════════════════════════════════════════════════════ */ /* Seule survivance du bloc supprime, et sous forme derivee : en sombre une carte se detache du fond par contraste et --rk-card-shadow vaut `none` ; en clair, blanc sur blanc-casse, il lui faut une ombre. Une regle groupee au lieu des 9 doublons `:root[data-theme="light"] .classe` d'avant. */ .stat-card, .game-stat-block, .create-account, .invite-options, .user-card, .invitation-card, .active-game-card, .game-tile, .hub-door, .rules-card { box-shadow: var(--rk-card-shadow); } /* Ces quatre-la n'avaient aucune bordure : invisibles en theme clair, ou leur fond blanc se confond avec celui de la page. */ .stat-card, .game-stat-block, .create-account, .invite-options { border: 1px solid var(--rk-line); }