/* Hoshi TCG — base : page, header, dock, boutons, formulaires, composants génériques. */
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: var(--track);
min-height: 100svh;
}
/* ── Fond réactif « Afterglow » : canvas fixe, parallaxe à la souris (voir app.js) ── */
.bg-canvas {
position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1200px;
background: linear-gradient(180deg, #0b101d 0%, #080c16 60%, #05070d 100%);
}
.bg-canvas > * { position: absolute; will-change: transform; }
.bg-glow {
right: 8%; top: 6%; width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(220, 235, 255, 0.26), rgba(220, 235, 255, 0.04) 60%, transparent 72%);
filter: blur(10px);
}
.bg-glow.two { left: 4%; bottom: 22%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(179, 148, 224, 0.16), transparent 70%); }
/* Fondu du fond (retour Noé 2026-07-28 : le trait du haut se voyait comme une ligne parasite
pleine largeur sur toutes les pages — retiré, le dégradé seul suffit). */
.bg-band {
left: 0; right: 0; bottom: 0; height: 19%;
background: linear-gradient(180deg, transparent, rgba(188, 215, 255, 0.05) 55%, rgba(6, 8, 13, 0.9));
}
.bg-stars { inset: 0; color: var(--accent); }
.bg-stars i { position: absolute; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.18; font-weight: 500; letter-spacing: var(--track-wide); }
h1 { font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 500; }
h2 { font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 500; }
h3 { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.08em; }
a { text-decoration: none; }
p a, .link { color: var(--accent); }
p a:hover, .link:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s4) calc(96px + var(--s6)); }
/* Bandeau bêta : extrait dans beta-banner.css (fichier au plafond de 300 lignes, voir layout.php
pour le associé). */
/* ── Header : continuité du fond (pas de barre, juste un fondu haut) ── */
.site-head {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: var(--s4);
padding: var(--s4) var(--s5);
background: linear-gradient(180deg, rgba(6, 9, 16, 0.9), rgba(6, 9, 16, 0.4) 60%, transparent);
}
.brand { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.22em; color: var(--ink); text-transform: uppercase; }
.brand em { color: var(--accent); font-style: normal; }
.head-season { font-size: 0.68rem; color: var(--ink-faint); letter-spacing: 0.16em; text-transform: uppercase; }
/* Version du produit, a cote de la saison — ancre du futur changelog (retour Noe 2026-08-17). */
.head-version { font-size: 0.62rem; color: var(--ink-faint); letter-spacing: 0.1em; opacity: 0.75; }
.head-spacer { flex: 1; }
/* Points + daily (header sobre : titre · saison | points · daily) */
/* white-space:nowrap + flex-shrink:0 : ceinture et bretelles contre la coupure du solde sur deux
lignes en petit écran (le vrai correctif est l'espace insécable de fmt_num, voir helpers.php,
mais rien ne garantit qu'un futur libellé ne réintroduise pas une espace sécable ici). */
.head-gems { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; white-space: nowrap; flex-shrink: 0; }
.gem { width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 7px rgba(188, 215, 255, 0.6); flex-shrink: 0; display: inline-block; }
.head-gems strong { font-weight: 500; }
.head-gems .plus { color: var(--ink-dim); }
.head-gems:hover .plus { color: var(--accent); }
.head-daily { font-size: 0.7rem; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid rgba(188, 215, 255, 0.3); padding-bottom: 2px; }
.head-daily.done { color: var(--ink-faint); border-bottom-color: transparent; }
.head-daily:hover:not(.done) { color: #fff; border-bottom-color: var(--accent); }
.head-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: var(--r-md); color: var(--ink-dim);
border: 1px solid var(--border); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.head-icon svg { width: 18px; height: 18px; }
.head-icon:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--border-strong); }
/* Rail de navigation (desktop + mobile) + tiroir : extrait dans nav.css (fichier au plafond de
300 lignes, voir layout.php pour le associé). */
/* ── Boutons ── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
min-height: 44px; padding: 0 var(--s5);
border-radius: var(--r-sm); font-weight: 500; font-size: 0.9rem;
letter-spacing: 0.14em; text-transform: uppercase;
transition: transform 100ms ease-out, background var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
/* Primaire (gold) et secondaire (ghost) : MÊME grammaire de survol à deux intensités (retour Noé
2026-08-16 — le gold sautait à une bordure quasi blanche + halo sans changer de fond, le ghost
ne changeait que de fond). Les deux lèvent le même fond et éclaircissent leur bordure du même
pas ; le gold reste un cran au-dessus aux deux états (repos .5/.32, survol .75/.5). Halo retiré
du repos : il faisait passer tout bouton primaire pour déjà survolé. */
.btn-gold { color: var(--ink); border: 1px solid rgba(188, 215, 255, 0.5); box-shadow: none; }
.btn-gold:hover { background: var(--accent-soft); border-color: rgba(188, 215, 255, 0.75); color: #fff; }
.btn-ghost { border: 1px solid var(--border-strong); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--accent-soft); border-color: rgba(188, 215, 255, 0.5); color: var(--ink); }
.btn-danger { background: rgba(255, 143, 160, 0.12); color: var(--danger); border: 1px solid rgba(255, 143, 160, 0.4); }
.btn-sm { min-height: 34px; padding: 0 var(--s3); font-size: 0.76rem; letter-spacing: 0.1em; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* ── Formulaires ── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink-dim); }
.input, select.input, textarea.input {
background: var(--bg-raised); border: 1px solid var(--border-strong);
border-radius: var(--r-md); padding: 10px 14px; min-height: 44px; color: var(--ink);
transition: border-color var(--t-fast) var(--ease-out);
}
.input:focus { border-color: var(--gold); outline: none; }
.input::placeholder { color: var(--ink-faint); }
/* Curseur (slider quantité de packs, etc.) : la classe .input générique (pensée pour du texte)
lui ajoutait un fond/bordure/padding qui casse le rendu natif sur PC et décale visuellement le
bout de la piste — retour Noé 2026-07-28 : « le slider ne va pas jusqu'au bout ». Piste et
curseur redessinés à la main, cohérents entre navigateurs. */
input[type="range"].input {
-webkit-appearance: none; appearance: none; background: transparent; border: none;
padding: 0; min-height: 0; height: 22px; width: 100%; cursor: pointer;
}
input[type="range"].input::-webkit-slider-runnable-track {
height: 6px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border-strong);
}
input[type="range"].input::-moz-range-track {
height: 6px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border-strong);
}
input[type="range"].input::-webkit-slider-thumb {
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; margin-top: -8px;
background: var(--gold); border: 2px solid var(--bg); box-shadow: 0 0 8px rgba(245, 198, 79, 0.5); cursor: pointer;
}
input[type="range"].input::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg);
box-shadow: 0 0 8px rgba(245, 198, 79, 0.5); cursor: pointer;
}
.hint { font-size: 0.78rem; color: var(--ink-faint); }
.error-text { color: var(--danger); font-size: 0.85rem; }
/* ── Panneaux, listes, états ── */
.panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); }
.panel + .panel { margin-top: var(--s4); }
/* Page paramètres : panneaux centrés, élargis sur desktop (plus de respiration — retour Noé
2026-08-14, avant capé à 560px partout même en grand viewport). Les panneaux texte-dense
(mot de passe, 2FA) restent plus étroits, pas besoin de la largeur complète. Repli mobile
identique à avant : sous 720px (breakpoint déjà utilisé partout ailleurs, voir .rail/.wrap),
le panneau redevient pleine largeur (le cap dépasse déjà le viewport, donc en pratique inchangé). */
.settings-panel { max-width: 860px; margin-inline: auto; }
.settings-panel--narrow { max-width: 640px; }
@media (max-width: 720px) {
.settings-panel, .settings-panel--narrow { max-width: none; margin-inline: 0; }
}
.page-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head .sub { color: var(--ink-dim); font-size: 0.9rem; }
.empty {
text-align: center; padding: var(--s7) var(--s4); color: var(--ink-dim);
border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}
.empty .big { font-size: 1.6rem; display: block; margin-bottom: var(--s2); }
.divider { border: none; border-top: 1px solid var(--border); margin: var(--s5) 0; }
/* ── Flash / toasts ── */
/* Descendue sous le header (retour Noé 2026-08-17) : à 68px la première notification recouvrait
la ligne sélecteur de langue / cloche / cristaux / pack du jour. Mesuré, le bas du header est à
95px (bandeau bêta + .site-head) — 104px laisse un interligne visible. */
.toast-zone { position: fixed; top: 104px; right: var(--s4); z-index: 60; display: flex; flex-direction: column; gap: var(--s2); }
.toast {
background: var(--bg-card); border: 1px solid var(--border-strong); border-left: 3px solid var(--gold);
border-radius: var(--r-md); padding: var(--s3) var(--s4); max-width: 320px; font-size: 0.9rem;
box-shadow: var(--shadow-2);
animation: toast-in var(--t-med) var(--ease-spring);
}
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast.out { opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
/* ── Pagination ── */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }
.pager a, .pager .cur {
min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 10px; border-radius: var(--r-sm); font-size: 0.88rem; font-variant-numeric: tabular-nums;
}
.pager a { border: 1px solid var(--border); color: var(--ink-dim); }
.pager a:hover { border-color: var(--gold); color: var(--ink); }
.pager .cur { background: var(--gold-soft); color: var(--gold); font-weight: 700; }
.pager .dots { color: var(--ink-faint); }
/* ── Tables (classement) ── */
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); padding: var(--s2) var(--s3); }
.table td { padding: var(--s3); border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; text-align: center; }
.table tr.me td { background: var(--gold-soft); }
/* Le nom du joueur reste lisible en lecture naturelle (gauche) ; tout le reste (rang, stats) est centré. */
.table th:nth-child(2), .table td:nth-child(2) { text-align: left; }
/* ── Responsive ── */
@media (max-width: 720px) {
.wrap { padding-inline: var(--s3); }
/* Header un peu large avant : brand + gems + 2 boutons daily/rente arrivaient presque bord à
bord (mesuré : ~12px de marge restante sur 375px). Resserré (padding, gap, tailles). */
.site-head { padding: var(--s3); gap: var(--s2); }
.head-season, .head-version { display: none; }
.head-stat#hud-packs { display: none; }
.brand { font-size: 0.92rem; letter-spacing: 0.16em; }
.head-gems { font-size: 0.8rem; gap: 5px; }
.head-daily { font-size: 0.62rem; letter-spacing: 0.1em; }
.rail-item { min-width: 68px; }
.rail-item .rail-label { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
.site-head, .rail { background: var(--bg-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
}