/* ============================================================================ ATOUZ — habillage. Mobile-first : une seule colonne, la table tient dans la hauteur d'écran, tout se joue au pouce. Le langage visuel est celui du kit studio (mêmes cartes, mêmes boutons, mêmes rebonds que POPLYN / MYRVA), la palette est celle d'un tapis de belote. Les cosmétiques (dos de cartes, tapis) ne touchent que des VARIABLES CSS : `src/game.js` les repose sur , aucune règle n'est dupliquée. RTL : la mise en page est en flux logique (flex + `margin-inline`), donc `dir="rtl"` posé sur par src/i18n.js suffit. ========================================================================== */ :root { --bg:#0b1f17; --glow:#17472f; --panel:#12291f; --cell:#1c3b2c; --line:#26543c; --ink:#eef6ef; --muted:#8fae9e; --accent:#ffd23f; --red:#ff6a7a; --back-a:#1f6f4a; --back-b:#0e3c28; /* dos de cartes (cosmétique) */ --felt-a:#17472f; --felt-b:#0b1f17; /* tapis (cosmétique) */ /* Les quatre familles (réglage « 4 couleurs / 2 couleurs », src/deck-theme.js). `--suit-X` se lit sur la carte, `--ink-X` sur les panneaux sombres. */ --suit-H:#c8102e; --suit-D:#0b57d0; --suit-S:#14181f; --suit-C:#0b7a3c; --ink-H:#ff6a7a; --ink-D:#7ab2ff; --ink-S:#eef6ef; --ink-C:#4fd08a; /* Les ATOUTS du tarot forment une cinquième famille : elle ne dépend pas du réglage 4/2 couleurs, un atout doit toujours sauter aux yeux. */ --suit-T:#7a3fb5; --ink-T:#c79bff; /* Deux tailles de carte, toutes deux RESPONSIVES : le tapis et ma main (qu'on touche, donc plus grande). Tout le dessin d'une carte se déduit de sa largeur — elle reste proportionnée du petit téléphone à la tablette. */ --card-w:clamp(54px, 15vw, 78px); --hand-w:clamp(64px, 18.5vw, 92px); --card-ratio:1.45; } * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body { margin:0; height:100%; background: radial-gradient(1200px 600px at 50% -10%, var(--felt-a) 0%, var(--felt-b) 65%); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; overscroll-behavior:none; } #wrap { max-width:520px; margin:0 auto; padding:env(safe-area-inset-top) 12px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:100%; } header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:8px 4px 0; } .brand { font-weight:800; letter-spacing:2px; font-size:22px; } .brand b { color:var(--accent); } .chips { display:flex; gap:8px; align-items:center; } .chip { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; } .chip-btn { font-family:inherit; width:auto; margin:0; padding:5px 12px; font-size:15px; background:var(--panel); color:var(--ink); } footer { color:var(--muted); font-size:12px; text-align:center; padding-bottom:6px; min-height:16px; } /* ---- La table ------------------------------------------------------------ */ .table { position:relative; width:100%; aspect-ratio:1/1; max-height:52vh; border-radius:24px; background:radial-gradient(120% 90% at 50% 40%, var(--felt-a) 0%, var(--felt-b) 100%); border:1px solid var(--line); overflow:hidden; } .seat { position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:700; color:var(--muted); } .seat .ava { font-size:22px; line-height:1; filter:grayscale(.4); transition:transform .18s ease; } .seat .who { color:var(--ink); font-size:12px; } .seat .cards { font-size:10px; letter-spacing:1px; } .seat.turn .ava { transform:scale(1.22); filter:none; } .seat.turn .who { color:var(--accent); } .seat.taker .who::after { content:" ♦"; color:var(--accent); } /* Sièges et cartes du pli sont posés sur un CERCLE : `--x` / `--y` viennent de src/game.js (la place regardée en bas, les autres dans l'ordre du tour), et la même table accueille 3, 4 ou 5 joueurs sans une règle de plus. */ .seat { inset-inline-start:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-50%); } /* Le pli au centre : une carte par siège, posée à sa place */ .trick { position:absolute; inset:16% 21%; } /* Le centrage passe par les marges : la transformation reste libre pour l'animation de pose. */ .trick .card { position:absolute; margin:0; inset-inline-start:var(--x,50%); top:var(--y,50%); margin-inline-start:calc(var(--card-w) / -2); margin-top:calc(var(--card-w) * var(--card-ratio) / -2); animation:card-in .22s cubic-bezier(.2,1.4,.5,1); } @keyframes card-in { from { opacity:0; transform:translate(0,14px) scale(.8); } } .banner { position:absolute; inset-inline:0; top:44%; text-align:center; font-size:20px; font-weight:900; color:var(--accent); text-shadow:0 3px 12px rgba(0,0,0,.6); pointer-events:none; animation:banner-in .25s ease-out; } @keyframes banner-in { from { opacity:0; transform:scale(.7); } } canvas.fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* ---- Cartes -------------------------------------------------------------- */ /* Une carte se lit à deux niveaux : le GROS symbole de famille au centre (ce qu'on voit d'un coup d'œil) et les indices rang + petit symbole aux deux coins (ce qui reste visible quand la main est en éventail). */ .card-face, .card-back { border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.45); user-select:none; } .card { width:var(--card-w); height:calc(var(--card-w) * var(--card-ratio)); position:relative; background:#f6f7f2; color:#16181d; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.45); line-height:1; user-select:none; } .card .pip { font-size:calc(var(--card-w) * .66); line-height:1; } .card .cnr { position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1; } .card .cnr .r { font-size:calc(var(--card-w) * .31); font-weight:900; } .card .cnr .s { font-size:calc(var(--card-w) * .25); font-style:normal; } .card .tl { top:6%; inset-inline-start:8%; } .card .br { bottom:6%; inset-inline-end:8%; } /* Les quatre familles portent leur couleur en variable : le réglage bascule EN DIRECT, sans redessiner une seule carte. */ .card.suit-H { color:var(--suit-H); } .card.suit-D { color:var(--suit-D); } .card.suit-S { color:var(--suit-S); } .card.suit-C { color:var(--suit-C); } .card.suit-T { color:var(--suit-T); } .card.back { background:linear-gradient(135deg, var(--back-a), var(--back-b)); color:transparent; border:2px solid rgba(255,255,255,.12); } .card.mini { --card-w:clamp(38px, 10vw, 52px); } /* Ma main : cartes VOLONTAIREMENT grandes (c'est ce qu'on touche). Elles se chevauchent juste assez pour que huit tiennent dans la largeur — l'indice du coin haut reste toujours dégagé. */ /* `--fan-count` est posé par renderHand() : le chevauchement se resserre quand la main est pleine et se relâche à mesure que les plis tombent. */ .hand { width:100%; display:flex; justify-content:center; align-items:flex-end; min-height:calc(var(--hand-w) * var(--card-ratio) + 14px); padding:6px 0 2px; --fan-count:8; --fan:min(100vw, 520px); --overlap:calc(max(0px, var(--hand-w) * var(--fan-count) + 26px - var(--fan)) / max(1, var(--fan-count) - 1)); } .hand .card { --card-w:var(--hand-w); margin-inline-start:calc(-1 * var(--overlap)); transition:transform .16s ease, filter .16s ease; cursor:pointer; } .hand .card:first-child { margin-inline-start:0; } .hand .card.playable { outline:2px solid var(--accent); } .hand .card.playable:active { transform:translateY(-10px) scale(1.04); } .hand .card.muted { filter:brightness(.55) saturate(.6); cursor:default; } /* Écart du tarot : la carte choisie sort de l'éventail, comme sur le tapis. */ .hand .card.picked { transform:translateY(-14px); outline:3px solid var(--accent); } .hand .card.pop { animation:pop .32s cubic-bezier(.2,1.5,.4,1); } @keyframes pop { 50% { transform:translateY(-12px) scale(1.1); } } /* ---- HUD ----------------------------------------------------------------- */ .hud { width:100%; display:flex; gap:10px; align-items:center; justify-content:space-between; padding:0 4px; } .score { text-align:start; } .score.end { text-align:end; } .score .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; } .score .val { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; } .chip.trump { font-size:16px; } .chip.pulse, .score.pulse { animation:chip-pop .35s ease-out; } @keyframes chip-pop { 0%{ transform:scale(1); } 45%{ transform:scale(1.18); } 100%{ transform:scale(1); } } /* ---- Overlays ------------------------------------------------------------ */ .overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(4,12,8,.74); backdrop-filter:blur(3px); z-index:5; padding:14px; } .overlay.show { display:flex; animation:fade-in .16s ease-out; } @keyframes fade-in { from { opacity:0; } } /* `>` volontaire : le panneau, PAS les cartes à jouer qu'il contient (la retourne des enchères garde son habillage de carte). */ .overlay > .card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:24px 20px; width:min(380px,92vw); max-height:94vh; overflow-y:auto; text-align:center; height:auto; box-shadow:0 20px 60px rgba(0,0,0,.5); color:var(--ink); font-weight:400; display:block; animation:card-rise .22s cubic-bezier(.2,1.2,.4,1); } @keyframes card-rise { from { opacity:0; transform:translateY(16px) scale(.96); } } .overlay h2 { margin:0 0 4px; font-size:25px; } .overlay .big { font-size:34px; font-weight:900; color:var(--accent); margin:8px 0 2px; letter-spacing:2px; font-variant-numeric:tabular-nums; } .overlay .sub { color:var(--muted); font-size:13px; margin-bottom:14px; } button { border:0; border-radius:14px; padding:13px 16px; font-size:16px; font-weight:800; width:100%; cursor:pointer; margin-top:9px; font-family:inherit; transition:transform .12s ease; } button:active { transform:scale(.96); } button:disabled { opacity:.45; cursor:default; } .btn-primary { background:var(--accent); color:#1d2a10; } .btn-ghost { background:var(--cell); color:var(--ink); } .btn-ghost.on { background:var(--accent); color:#1d2a10; } .btn-rewarded { background:linear-gradient(90deg,#2f9e6b,#5bd68a); color:#06231a; } .btn-rewarded small { display:block; font-weight:600; opacity:.85; font-size:11px; } .row { display:flex; gap:9px; } .row .half, .row button { flex:1; width:auto; } .overlay > .card.home { padding:22px 20px 18px; } .logo { font-weight:900; letter-spacing:5px; font-size:38px; line-height:1; } .logo b { color:var(--accent); } .field-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:12px 0 8px; text-align:start; } .badge { display:inline-block; background:var(--accent); color:#1d2a10; font-weight:900; font-size:12px; letter-spacing:1px; text-transform:uppercase; border-radius:999px; padding:4px 12px; margin-bottom:6px; } /* enchères : le panneau se pose EN HAUT, sans voile ni flou, pour que la MAIN reste visible dessous — on prend la retourne (ou on nomme une couleur) en voyant son jeu. Seul le panneau capte le doigt. */ .overlay.sheet { inset:0 0 auto; align-items:flex-start; background:none; backdrop-filter:none; pointer-events:none; padding:calc(env(safe-area-inset-top) + 48px) 12px 0; } /* Le plafond garde le panneau AU-DESSUS de la main, même sur un écran court : au-delà, c'est le panneau qui défile, jamais la main qui disparaît. */ .overlay.sheet > .card { pointer-events:auto; padding:16px 18px 14px; max-height:calc(100vh - var(--hand-w) * var(--card-ratio) - 160px); overflow-y:auto; } .overlay.sheet h2 { font-size:21px; } .overlay.sheet .sub { margin-bottom:8px; } .retourne { display:flex; justify-content:center; margin:8px 0 4px; } .retourne .card { --card-w:clamp(66px, 19vw, 96px); } .suits { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin:10px 0 2px; } .suits button { margin:0; padding:12px 4px; font-size:28px; background:var(--cell); color:var(--ink); } .suits button.on { background:var(--accent); color:#1d2a10; } .suits button.suit-H { color:var(--ink-H); } .suits button.suit-D { color:var(--ink-D); } .suits button.suit-S { color:var(--ink-S); } .suits button.suit-C { color:var(--ink-C); } /* Sélectionné : le fond passe au clair, la famille reprend sa teinte « carte ». */ .suits button.on.suit-H { color:var(--suit-H); } .suits button.on.suit-D { color:var(--suit-D); } .suits button.on.suit-S { color:var(--suit-S); } .suits button.on.suit-C { color:var(--suit-C); } /* coinche : les paliers annonçables, en grille compacte au-dessus des couleurs */ .values { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:10px 0 2px; } .values button { margin:0; padding:10px 2px; font-size:14px; background:var(--cell); color:var(--ink); border-radius:11px; } .values button.on { background:var(--accent); color:#1d2a10; } .values button.capot { grid-column:span 2; font-size:13px; } /* tarot : les quatre contrats, deux par ligne, et le chien étalé */ .bids { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 2px; } .bids button { margin:0; padding:12px 4px; font-size:14px; background:var(--cell); color:var(--ink); border-radius:11px; } .bids button.on { background:var(--accent); color:#1d2a10; } .chien { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin:8px 0 4px; } /* comptage de fin de manche */ .tally { list-style:none; margin:8px 0 4px; padding:0; text-align:start; font-size:14px; } .tally li { display:flex; justify-content:space-between; gap:10px; padding:6px 9px; border-radius:10px; font-variant-numeric:tabular-nums; } .tally li:nth-child(odd) { background:var(--cell); } .tally li b { font-weight:800; } /* gain quotidien */ .dots { display:flex; gap:6px; justify-content:center; margin:10px 0 4px; } .dots .dot { width:26px; height:26px; border-radius:50%; background:var(--cell); color:var(--muted); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; } .dots .dot.on { background:var(--accent); color:#1d2a10; } /* réglages : sélecteur de langue */ .langs { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .langs button { margin:0; padding:11px 8px; font-size:14px; background:var(--cell); color:var(--ink); } .langs button.on { background:var(--accent); color:#1d2a10; } /* boutique */ .shop-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); text-align:start; } .shop-row .nm { flex:1; font-weight:800; font-size:14px; } .shop-row .ds { display:block; font-weight:600; font-size:11px; color:var(--muted); margin-top:2px; } .shop-row button { width:auto; flex:none; margin:0; padding:9px 14px; font-size:13px; white-space:nowrap; } .shop-row .owned { color:var(--accent); font-weight:800; font-size:13px; } .swatch { width:34px; height:48px; border-radius:8px; border:1px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; font-size:20px; } /* concours entre amis */ .lb-groups { display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; } .lb-groups button { width:auto; flex:none; margin:0; padding:8px 13px; font-size:13px; background:var(--cell); color:var(--ink); white-space:nowrap; } .lb-groups button.on { background:var(--accent); color:#1d2a10; } .lb-tabs { display:flex; gap:7px; margin-bottom:8px; } .tab { flex:1; width:auto; margin:0; padding:9px 8px; font-size:13px; background:var(--cell); color:var(--ink); } .tab.on { background:var(--line); color:var(--accent); } .lb { list-style:none; margin:0; padding:0; max-height:34vh; overflow-y:auto; text-align:start; } .lb li { display:flex; align-items:baseline; gap:8px; padding:6px 9px; border-radius:10px; font-size:13px; font-variant-numeric:tabular-nums; } .lb li:nth-child(odd) { background:var(--cell); } .lb li.me { background:var(--accent); color:#1d2a10; font-weight:800; } .lb .rank { width:20px; color:var(--muted); font-weight:800; } .lb li.me .rank { color:#1d2a10; } .lb .who { flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb .pts { font-size:12px; color:var(--muted); } .lb li.me .pts { color:#1d2a10; opacity:.75; } .lb .empty { color:var(--muted); font-size:13px; padding:8px 9px; } /* invite de saisie */ .field { width:100%; border-radius:14px; border:1px solid var(--line); background:var(--cell); color:var(--ink); padding:13px 14px; font-size:17px; font-family:inherit; font-weight:700; text-align:center; } .prompt-err { color:#ff8fa3; font-size:12px; font-weight:700; margin-top:8px; } /* notification passagère + gain qui monte */ .toast { position:fixed; inset-inline:0; bottom:calc(16px + env(safe-area-inset-bottom)); margin-inline:auto; width:max-content; max-width:88vw; background:var(--line); color:var(--ink); border:1px solid #2f7350; border-radius:999px; padding:10px 18px; font-size:13px; font-weight:700; z-index:9; animation:toast-in .18s ease-out; } @keyframes toast-in { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .fx-pop { position:fixed; transform:translate(-50%,-100%); color:var(--accent); font-weight:900; font-size:20px; pointer-events:none; z-index:10; text-shadow:0 2px 8px rgba(0,0,0,.6); animation:fx-rise .9s ease-out forwards; } @keyframes fx-rise { to { opacity:0; transform:translate(-50%,-190%) scale(1.15); } } /* Un écran court : on rabote la table plutôt que la main (c'est elle qu'on touche) — les cartes restent nettement plus grandes qu'un dé à coudre. */ @media (max-height:680px){ .table { max-height:42vh; } :root { --card-w:clamp(48px, 13vw, 66px); --hand-w:clamp(56px, 16vw, 78px); } }