/* ============================================================================ * Solitaire Arena — feuille de style unique. * ---------------------------------------------------------------------------- * Tout est piloté par des variables posées sur par themes.js. Aucune * couleur n'est écrite en dur ici, sauf dans les motifs de tapis et de dos. * ==========================================================================*/ *, *::before, *::after { box-sizing: border-box; } :root { /* Palette de repli : celle de l'univers Nocturne. themes.js la remplace dès * que le script tourne, mais la page doit rester lisible avant cela — et * même si le script ne tourne jamais. */ --bg: #0b0f16; --panel: #141b26; --panel-2: #1b2431; --line: #243040; --text: #e6edf6; --muted: #8b9ab0; --accent: #38e1c8; --accent-2: #5eead4; --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --radius: 14px; --card-radius: 9px; --font: 'Inter var', system-ui, -apple-system, 'Segoe UI', sans-serif; --shadow: 0 10px 30px rgba(0, 0, 0, .45); --felt-bg: #10161f; --felt-pattern: none; --felt-size: auto; --back-image: linear-gradient(160deg, #2a6, #063); --back-size: auto; --back-border: 1px solid rgba(255, 255, 255, .2); --back-filter: none; --cw: 76px; /* largeur de carte, calculée par le jeu */ --ch: calc(var(--cw) * 1.4); --gap: 10px; --header: 56px; --ease: cubic-bezier(.22, .8, .3, 1); --speed: 1; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.02rem; } p { margin: 0 0 .8em; } .muted { color: var(--muted); } .small { font-size: .85rem; } .tiny { font-size: .76rem; } .center { text-align: center; } .grow { flex: 1; } .row { display: flex; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; } [hidden] { display: none !important; } ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); } /* --- Bandeau ------------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 60; height: var(--header); display: flex; align-items: center; gap: 12px; padding: 0 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand .mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #04121a; font-weight: 800; font-size: .8rem; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); } .nav { display: flex; gap: 2px; margin-left: 6px; } .nav a { padding: 7px 11px; border-radius: 9px; color: var(--muted); font-size: .9rem; font-weight: 500; white-space: nowrap; } .nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; } .nav a.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } /* --- Boutons -------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-weight: 550; font-size: .92rem; cursor: pointer; transition: transform .12s var(--ease), border-color .15s, background .15s, box-shadow .15s; user-select: none; -webkit-user-select: none; } .btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .btn:active { transform: translateY(1px) scale(.985); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #000)); border-color: transparent; color: #05131a; font-weight: 650; box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 32%, transparent); } .btn-primary:hover { filter: brightness(1.07); } .btn-ghost { background: transparent; } .btn-sm { padding: 6px 11px; font-size: .84rem; border-radius: 8px; } .btn-icon { padding: 8px; width: 36px; height: 36px; } .btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: .76rem; color: var(--muted); white-space: nowrap; } .chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .chip.good { color: var(--good); } .chip.bad { color: var(--bad); } /* --- Cartes d'interface ---------------------------------------------------------- */ .card-ui { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card-pad { padding: 16px; } .screen { max-width: 1120px; margin: 0 auto; padding: 22px 16px 90px; } .screen.wide { max-width: 1400px; } /* --- Accueil ---------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line); background: radial-gradient(80% 130% at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%), radial-gradient(70% 120% at 92% 20%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0%, transparent 55%), var(--panel); padding: 30px 26px; margin-bottom: 20px; } .hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.5rem); } .hero p { max-width: 56ch; color: var(--muted); } .hero .row { margin-top: 16px; } .games-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); } .game-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px; text-align: left; cursor: pointer; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; } .game-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 85% 0%, var(--tint) 0%, transparent 62%); opacity: .5; } .game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .game-card .ico { font-size: 1.9rem; line-height: 1; } .game-card .name { font-size: 1.14rem; font-weight: 650; } .game-card .tag { color: var(--muted); font-size: .86rem; } .game-card .foot { margin-top: auto; padding-top: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .game-card .foot .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; } .dots { display: inline-flex; gap: 3px; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .dots i.on { background: var(--accent); } .stats-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .stat { flex: 1 1 130px; padding: 13px 15px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .stat b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; } .stat span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } /* ============================================================================ * LA TABLE DE JEU * ==========================================================================*/ /* Pendant une partie, le bandeau du site s'efface : sur un téléphone couché, * ces 56 pixels font la différence entre des cartes lisibles et des timbres. * L'écran de jeu a son propre bouton de retour. */ body.playing .topbar { display: none; } .play { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--felt-bg); } .play::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--felt-pattern); background-size: var(--felt-size); opacity: .9; } .hud { position: relative; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); flex-wrap: wrap; } .hud .meter { display: flex; flex-direction: column; line-height: 1.15; min-width: 54px; } .hud .meter b { font-variant-numeric: tabular-nums; font-size: .98rem; font-weight: 650; } .hud .meter span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } .hud .sep { width: 1px; height: 26px; background: var(--line); } .progress { height: 3px; background: color-mix(in srgb, var(--line) 60%, transparent); position: relative; z-index: 4; } .progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s var(--ease); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); } .table { position: relative; z-index: 2; flex: 1; overflow: hidden; touch-action: none; } /* --- Emplacements ---------------------------------------------------------------- */ .slot { position: absolute; width: var(--cw); height: var(--ch); border-radius: var(--card-radius); border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); background: color-mix(in srgb, #000 14%, transparent); display: grid; place-items: center; color: color-mix(in srgb, var(--text) 30%, transparent); font-size: calc(var(--cw) * .34); transition: border-color .15s, background .15s, box-shadow .15s; } .slot.hot { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); } .slot .pip { width: 42%; opacity: .5; fill: currentColor; } .slot.stock-empty { cursor: pointer; } .slot .redeal-mark { font-size: calc(var(--cw) * .4); opacity: .55; } /* --- Cartes ------------------------------------------------------------------------ */ .card { position: absolute; top: 0; left: 0; width: var(--cw); height: var(--ch); border-radius: var(--card-radius); transform: translate3d(0, 0, 0); transition: transform calc(.22s / var(--speed)) var(--ease), box-shadow .15s; will-change: transform; perspective: 900px; cursor: default; } .card.movable { cursor: grab; } .card.dragging { cursor: grabbing; transition: none; z-index: 900 !important; } .card.no-anim { transition: none; } .cin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform calc(.34s / var(--speed)) var(--ease); border-radius: inherit; } .card.down .cin { transform: rotateY(180deg); } .cface, .cback { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } .cback { transform: rotateY(180deg); background-image: var(--back-image); background-size: var(--back-size); border: var(--back-border); filter: var(--back-filter); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .35); } .cface { background: #fbfaf7; color: #16202e; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .1); } .card.red .cface { color: #d1273b; } .corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .9; left: 5.5%; top: 3.5%; width: 22%; } .corner.br { left: auto; top: auto; right: 5.5%; bottom: 3.5%; transform: rotate(180deg); } .corner .idx { font-weight: 700; font-size: calc(var(--cw) * .27); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .corner .pip.small { width: calc(var(--cw) * .17); margin-top: 4%; } .pip { display: block; fill: currentColor; width: calc(var(--cw) * .21); } .spots { position: absolute; inset: 0; } .spot { position: absolute; transform: translate(-50%, -50%); width: calc(var(--cw) * .215); } .spot.flip { transform: translate(-50%, -50%) rotate(180deg); } .spot .pip { width: 100%; } /* L'emblème des figures reste bas dans la carte : dans une colonne en éventail, * seule la bande du haut est visible et elle doit montrer l'index, pas un * morceau de dessin. */ .court-wrap { position: absolute; inset: 30% 20% 14%; display: grid; place-items: center; } .court { width: 82%; fill: currentColor; opacity: .92; } /* --- Styles de face ------------------------------------------------------------------ */ body[data-face="classique"] .cface { background: #fdfcf8; } body[data-face="classique"] .corner .idx { font-size: calc(var(--cw) * .25); } body[data-face="moderne"] .cface { background: linear-gradient(165deg, #ffffff 0%, #f1f3f7 100%); } body[data-face="moderne"] .corner .idx { font-size: calc(var(--cw) * .29); font-weight: 750; } body[data-face="neon"] .cface { background: linear-gradient(165deg, #0c1622 0%, #060c14 100%); color: #6ee7ff; box-shadow: inset 0 0 0 1px color-mix(in srgb, #6ee7ff 40%, transparent), 0 2px 10px rgba(0, 0, 0, .5); } body[data-face="neon"] .card.red .cface { color: #ff6b9d; box-shadow: inset 0 0 0 1px rgba(255, 107, 157, .4), 0 2px 10px rgba(0, 0, 0, .5); } body[data-face="neon"] .pip, body[data-face="neon"] .court { filter: drop-shadow(0 0 4px currentColor); } body[data-face="neon"] .corner .idx { text-shadow: 0 0 8px currentColor; } body[data-face="minimal"] .cface { background: #ffffff; } body[data-face="minimal"] .spots, body[data-face="minimal"] .court-wrap { display: none; } body[data-face="minimal"] .corner.br { display: none; } body[data-face="minimal"] .corner.tl { inset: 0; width: 100%; height: 100%; flex-direction: column; justify-content: center; gap: 2%; } body[data-face="minimal"] .corner .idx { font-size: calc(var(--cw) * .52); font-weight: 700; } body[data-face="minimal"] .corner .pip.small { width: calc(var(--cw) * .26); } body[data-face="verre"] .cface { background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(230, 240, 255, .7) 100%); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 4px 14px rgba(0, 0, 0, .4); } body[data-face="verre"] .cface::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); pointer-events: none; } /* --- Piles et empilement --------------------------------------------------------------- */ .card.lift { box-shadow: 0 14px 30px rgba(0, 0, 0, .55); } .card.hintsrc .cface, .card.hintsrc .cback { box-shadow: 0 0 0 3px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent); } .card.bad-shake { animation: shake .32s var(--ease); } @keyframes shake { 0%, 100% { transform: var(--tx) translateX(0); } 25% { transform: var(--tx) translateX(-6px); } 75% { transform: var(--tx) translateX(6px); } } /* --- Plateau du Senku -------------------------------------------------------------------- */ .pegboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: calc(var(--cw) * .1); padding: calc(var(--cw) * .28); border-radius: calc(var(--radius) + 8px); background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow); } .peg { width: var(--cw); height: var(--cw); border: 0; padding: 0; background: none; cursor: default; display: grid; place-items: center; position: relative; } .peg.wall { visibility: hidden; } .peg::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .22)); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); } .peg .ball { position: relative; z-index: 2; width: 74%; height: 74%; border-radius: 50%; background: radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .85) 0%, transparent 38%), linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 45%, #000) 100%); box-shadow: 0 3px 9px rgba(0, 0, 0, .5), inset 0 -2px 6px rgba(0, 0, 0, .35); transform: scale(1); transition: transform .2s var(--ease), opacity .2s; } .peg.hole .ball { transform: scale(0); opacity: 0; } .peg.peg-on { cursor: pointer; } .peg.sel .ball { box-shadow: 0 0 0 3px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); transform: scale(1.06); } .peg.target::after { content: ''; position: absolute; inset: 24%; border-radius: 50%; border: 2px solid var(--accent); animation: pulse 1.3s infinite; } .peg.jumped .ball { animation: pop .28s var(--ease) forwards; } @keyframes pop { to { transform: scale(1.5); opacity: 0; } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: .4; } } /* --- Barre d'actions -------------------------------------------------------------------- */ .actions { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(12px); border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); flex-wrap: wrap; } .actions .btn { min-width: 44px; } /* --- Fenêtres --------------------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(6px); animation: fade .18s var(--ease); } @keyframes fade { from { opacity: 0; } } .modal { width: min(560px, 100%); max-height: min(86vh, 760px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); animation: rise .22s var(--ease); } .modal.lg { width: min(880px, 100%); } @keyframes rise { from { transform: translateY(14px) scale(.98); opacity: 0; } } .modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--panel); } .modal-head h2 { margin: 0; } .modal-body { padding: 18px; } .modal-foot { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--panel); } .tabs { display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap; } .tabs button { padding: 8px 13px; border-radius: 9px 9px 0 0; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; } .tabs button.on { background: var(--panel-2); border-color: var(--line); color: var(--text); } /* --- Formulaires -------------------------------------------------------------------------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 5px; } .input, select.input { width: 100%; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); outline: none; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; } .seg button { padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: .86rem; white-space: nowrap; } .seg button.on { background: var(--accent); color: #05131a; font-weight: 600; } .switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .switch:last-child { border-bottom: 0; } .switch .lab b { display: block; font-weight: 550; font-size: .94rem; } .switch .lab span { color: var(--muted); font-size: .8rem; } .toggle { position: relative; width: 44px; height: 25px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; transition: background .18s, border-color .18s; } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--muted); transition: transform .18s var(--ease), background .18s; } .toggle.on { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); } .toggle.on::after { transform: translateX(19px); background: var(--accent); } input[type="range"] { width: 100%; height: 26px; background: none; -webkit-appearance: none; appearance: none; } input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; margin-top: -6.5px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); } input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; border: 0; border-radius: 50%; background: var(--accent); } input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); cursor: pointer; } /* --- Vignettes de personnalisation ------------------------------------------------------- */ .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; } .swatch { padding: 8px; border-radius: 12px; cursor: pointer; text-align: center; border: 2px solid var(--line); background: var(--panel-2); transition: transform .15s var(--ease), border-color .15s; } .swatch:hover { transform: translateY(-2px); } .swatch.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .swatch .mini { height: 52px; border-radius: 8px; margin-bottom: 6px; overflow: hidden; position: relative; } .swatch .mini.felt::after { content: ''; position: absolute; inset: 0; } .swatch b { display: block; font-size: .78rem; font-weight: 550; } .swatch span { display: block; font-size: .68rem; color: var(--muted); } .mini-cards { display: flex; justify-content: center; align-items: center; height: 52px; gap: 2px; } .card.sample { position: relative; width: 34px; height: 48px; transition: none; } .card.sample.small { --cw: 34px; } /* --- Tableaux et classements ----------------------------------------------------------------- */ table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; } table.tbl th, table.tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); } table.tbl th { color: var(--muted); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; } table.tbl tr:last-child td { border-bottom: 0; } table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl tr.me { background: color-mix(in srgb, var(--accent) 10%, transparent); } .rank-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--panel-2); font-size: .78rem; font-weight: 650; } .rank-badge.g1 { background: linear-gradient(140deg, #f7d774, #b98f2a); color: #241a04; } .rank-badge.g2 { background: linear-gradient(140deg, #dfe6ee, #98a4b4); color: #1a2330; } .rank-badge.g3 { background: linear-gradient(140deg, #e0a476, #a4653a); color: #241204; } /* --- Succès et profil ----------------------------------------------------------------------- */ .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .ach { display: flex; gap: 11px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); } .ach.done { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } .ach .ico { font-size: 1.5rem; opacity: .45; } .ach.done .ico { opacity: 1; } .ach b { display: block; font-size: .9rem; } .ach p { margin: 2px 0 6px; font-size: .78rem; color: var(--muted); } .bar { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); } .avatar { border-radius: 12px; background: var(--panel-2); display: block; } /* --- Notifications --------------------------------------------------------------------------- */ .toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .88rem; animation: toastin .25s var(--ease); max-width: min(92vw, 460px); } .toast.good { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); } .toast.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); } @keyframes toastin { from { transform: translateY(10px); opacity: 0; } } /* --- Victoire ------------------------------------------------------------------------------- */ .win-card { text-align: center; padding: 26px 22px; } .win-card .big { font-size: 2.6rem; margin-bottom: 4px; } .win-card h2 { font-size: 1.6rem; } .win-stats { display: flex; justify-content: center; gap: 22px; margin: 16px 0; flex-wrap: wrap; } .win-stats div b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; } .win-stats div span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; } /* --- Effets d'ambiance ------------------------------------------------------------------------ */ body.fx-scan .play::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; opacity: .5; } body.fx-glow .card .cface, body.fx-glow .card .cback { box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); } body.fx-stars .play::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(circle, rgba(255, 255, 255, .8) .7px, transparent .7px); background-size: 120px 120px; animation: drift 60s linear infinite; opacity: .3; } @keyframes drift { to { background-position: 120px 240px; } } /* --- Accessibilité et confort ----------------------------------------------------------------- */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body.no-fx .card, body.no-fx .cin { transition: none; } /* --- Petits écrans -------------------------------------------------------------------------------- */ @media (max-width: 760px) { .nav a { padding: 7px 9px; font-size: .84rem; } .nav .lbl { display: none; } .screen { padding: 16px 12px 80px; } .hero { padding: 22px 18px; } .hud { padding: 6px 9px; gap: 6px; } .hud .meter { min-width: 44px; } .hud .meter b { font-size: .9rem; } .actions { gap: 6px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); } .actions .btn { padding: 9px 10px; } .actions .btn .lbl { display: none; } .modal { max-height: 92vh; } .toasts { bottom: 96px; } } @media (max-width: 420px) { .brand span { display: none; } .swatches { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } } /* Écran très bas — un téléphone tenu à l'horizontale : on récupère chaque * pixel sur les barres pour le donner aux cartes. */ @media (max-height: 520px) { .hud { padding: 3px 8px; gap: 5px; } .hud .meter b { font-size: .82rem; } .hud .meter span { font-size: .58rem; } .hud .sep { height: 18px; } .actions { padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); gap: 5px; } .actions .btn { padding: 7px 9px; } .actions .btn .lbl { display: none; } } /* Mode une main : les actions passent à portée du pouce, à droite. */ body.one-hand .actions { justify-content: flex-end; padding-right: 14px; } /* Écrans très larges : on laisse la table respirer sans étirer les cartes. */ @media (min-width: 1500px) { .table { max-width: 1500px; margin: 0 auto; width: 100%; } } /* ============================================================================ * SOLITAIRE_ARENA_V11_CARD_CORE * Meta Games isolated app polish — mobile first, sans toucher aux règles. * ========================================================================== */ .meta-game-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .62rem; font-weight: 800; letter-spacing: .12em; white-space: nowrap; } .hero-kicker { margin-bottom: 8px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; } body.meta-embedded .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--header) + env(safe-area-inset-top)); } body.meta-embedded .screen { padding-bottom: calc(90px + env(safe-area-inset-bottom)); } body.meta-embedded.playing .play { padding-top: env(safe-area-inset-top); } body.meta-embedded .hud { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); } body.meta-embedded .actions { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); } @media (max-width: 760px) { .meta-game-chip { font-size: .56rem; padding-inline: 7px; } body.meta-embedded .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; } body.meta-embedded .nav { overflow-x: auto; scrollbar-width: none; } body.meta-embedded .nav::-webkit-scrollbar { display: none; } body.meta-embedded .screen { padding-left: 10px; padding-right: 10px; } body.meta-embedded .hero { padding: 20px 16px; } } @media (max-width: 430px) { body.meta-embedded .meta-game-chip { display: none; } body.meta-embedded .nav a:nth-child(5) { display: none; } }