/* ===================================================================== SKULL KING — « TAVERNE DES PIRATES » Table de taverne nocturne : chêne, cordage, laiton patiné, feutre vert bouteille et parchemins. Les cartes sont du papier crème vieilli à dorure éraflée ; l'or n'est jamais jaune vif, et rien de décoratif ne passe devant une zone de lecture. ===================================================================== */ :root{ /* ---------- SOCLE : les 7 valeurs de la charte ---------- */ --sk-night:#07171B; /* fond, noir bleuté très profond */ --sk-oak:#24170D; /* noyer sombre, bois de la table */ --sk-felt:#123C32; /* feutre vert bouteille */ --sk-brass:#B88935; /* laiton ancien — JAMAIS jaune vif */ --sk-parch:#E6D2A0; /* parchemin, ivoire chaud */ --sk-wine:#741A16; /* bordeaux / velours, accent */ --sk-cream:#F2D69A; /* texte, crème dorée */ /* ---------- dérivées ---------- */ --sk-night-2:#0B2126; --sk-night-3:#041013; --sk-oak-lo:#160D06; --sk-oak-hi:#3A2513; --sk-oak-edge:#0D0703; --sk-felt-lo:#08211B; --sk-felt-hi:#154438; --sk-brass-hi:#E8CE92; --sk-brass-lo:#7A5A20; --sk-brass-dead:#4A3512; --sk-copper:#9A6432; --sk-copper-lo:#5A3418; --sk-parch-hi:#F6E9C6; --sk-parch-lo:#C7AE79; --sk-parch-ink:#2A1B0C; --sk-wine-hi:#9C2A22; --sk-wine-lo:#3E0B08; --sk-cream-2:#CBB183; --sk-cream-3:#96805C; /* ---------- familles de plis (validées au rendu, cf. planche) ------- Noms de règle inchangés : vert / jaune / violet / noir. */ --sk-vert:#237B5C; --sk-vert-d:#0C3427; /* vert bouteille éclairci : le feutre est lui aussi vert bouteille, il a fallu écarter les deux valeurs pour qu'une carte verte ne s'y dissolve pas */ --sk-jaune:#A8792C; --sk-jaune-d:#4C3210; /* ocre parchemin */ --sk-violet:#5B2340; --sk-violet-d:#280E1C; /* prune de velours */ --sk-noir:#131C2E; --sk-noir-d:#05080F; /* bleu nuit — atout */ /* ---------- cartes spéciales ---------- */ --sk-pirate:#741A16; --sk-pirate-d:#380A07; --sk-sirene:#17434A; --sk-sirene-d:#082126; --sk-fuite:#6E6A5E; --sk-fuite-d:#33302A; /* étain chaud : elle renonce */ --sk-butin:#8A6A2E; --sk-butin-d:#3E2E0E; --sk-kraken:#0E2A2A; --sk-kraken-d:#041111; --sk-baleine:#D3C39C; --sk-baleine-d:#7E7051; --sk-sk:#14100C; --sk-sk-d:#050302; /* ---------- sémantique ---------- */ --sk-kept:#4E8A4A; --sk-failed:#9C2A22; /* ---------- anatomie de carte, échelle « main » ---------- */ --sk-w:84px; /* largeur de référence */ --sk-edge:3px; /* liseré de papier crème */ --sk-band:8px; /* bande peinte */ --sk-fillet:1px; /* dorure éraflée */ --sk-radius:8px; --sk-seal:13px; /* sceau d'angle */ --sk-tagw:62%; /* cartouche : 48 px sur 84 */ --sk-num:1.30rem; --sk-corner:16px; /* équerre de cordage */ /* ---------- matières ---------- */ --sk-grain:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27140%27 height=%27140%27 filter=%27url(%23n)%27 opacity=%27.55%27/%3E%3C/svg%3E'); --sk-oakgrain:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27300%27 height=%27120%27%3E%3Cfilter id=%27w%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.012 0.44%27 numOctaves=%274%27 seed=%277%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3CfeComponentTransfer%3E%3CfeFuncA type=%27linear%27 slope=%27.7%27/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width=%27300%27 height=%27120%27 filter=%27url(%23w)%27/%3E%3C/svg%3E'); --sk-medallion:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E %3Cdefs%3E %3ClinearGradient id=%27ring%27 x1=%27.12%27 y1=%270%27 x2=%27.88%27 y2=%271%27%3E %3Cstop offset=%270%27 stop-color=%27%23FBF0D2%27/%3E%3Cstop offset=%27.22%27 stop-color=%27%23DDB05C%27/%3E %3Cstop offset=%27.46%27 stop-color=%27%23B8862F%27/%3E%3Cstop offset=%27.62%27 stop-color=%27%23EFD79B%27/%3E %3Cstop offset=%27.82%27 stop-color=%27%239C7226%27/%3E%3Cstop offset=%271%27 stop-color=%27%235E4212%27/%3E%3C/linearGradient%3E %3CradialGradient id=%27disc%27 cx=%27.38%27 cy=%27.28%27 r=%27.88%27%3E %3Cstop offset=%270%27 stop-color=%27%23C4291A%27/%3E%3Cstop offset=%27.55%27 stop-color=%27%238E150A%27/%3E %3Cstop offset=%271%27 stop-color=%27%234E0703%27/%3E%3C/radialGradient%3E %3ClinearGradient id=%27stA%27 x1=%27.18%27 y1=%27.10%27 x2=%27.82%27 y2=%27.90%27%3E %3Cstop offset=%270%27 stop-color=%27%23FFFFFF%27/%3E%3Cstop offset=%27.34%27 stop-color=%27%23F4F2EC%27/%3E %3Cstop offset=%27.70%27 stop-color=%27%23CBC9C2%27/%3E%3Cstop offset=%271%27 stop-color=%27%238E8C86%27/%3E%3C/linearGradient%3E %3ClinearGradient id=%27stB%27 x1=%27.82%27 y1=%27.10%27 x2=%27.18%27 y2=%27.90%27%3E %3Cstop offset=%270%27 stop-color=%27%23FFFFFF%27/%3E%3Cstop offset=%27.34%27 stop-color=%27%23EFEDE7%27/%3E %3Cstop offset=%27.70%27 stop-color=%27%23C2C0B9%27/%3E%3Cstop offset=%271%27 stop-color=%27%2386847E%27/%3E%3C/linearGradient%3E %3ClinearGradient id=%27grip%27 x1=%270%27 y1=%270%27 x2=%271%27 y2=%271%27%3E %3Cstop offset=%270%27 stop-color=%27%23F3DFA8%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23C9973F%27/%3E %3Cstop offset=%271%27 stop-color=%27%236E4C13%27/%3E%3C/linearGradient%3E %3C/defs%3E %3Ccircle cx=%2732%27 cy=%2730%27 r=%2724%27 fill=%27url(%23ring)%27/%3E %3Ccircle cx=%2732%27 cy=%2730%27 r=%2724%27 fill=%27none%27 stroke=%27%233A280B%27 stroke-width=%271.6%27/%3E %3Ccircle cx=%2732%27 cy=%2730%27 r=%2720.6%27 fill=%27none%27 stroke=%27%23FBF0D2%27 stroke-width=%27.9%27 opacity=%27.45%27/%3E %3Ccircle cx=%2732%27 cy=%2730%27 r=%2717%27 fill=%27url(%23disc)%27/%3E %3Ccircle cx=%2732%27 cy=%2730%27 r=%2717%27 fill=%27none%27 stroke=%27%233A0A05%27 stroke-width=%271.5%27/%3E %3Cg stroke=%27%23171009%27 stroke-width=%27.9%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E %3Cpath d=%27M45.5 55.5 L37.5 46%27 stroke=%27%233A280B%27 stroke-width=%275%27/%3E %3Cpath d=%27M45.5 55.5 L37.5 46%27 stroke=%27url(%23grip)%27 stroke-width=%273.2%27/%3E %3Cpath d=%27M41.59 44.78 L35.61 49.82%27 stroke=%27%233A280B%27 stroke-width=%274.4%27/%3E %3Cpath d=%27M41.59 44.78 L35.61 49.82%27 stroke=%27url(%23grip)%27 stroke-width=%272.6%27/%3E %3Cpath d=%27M40.11 43.98 Q35.1 25.12 15.5 17.5 Q26.62 31.66 34.89 48.02 Z%27 fill=%27url(%23stB)%27/%3E %3C/g%3E %3Cg stroke=%27%23171009%27 stroke-width=%27.9%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E %3Cpath d=%27M18.5 55.5 L26.5 46%27 stroke=%27%233A280B%27 stroke-width=%275%27/%3E %3Cpath d=%27M18.5 55.5 L26.5 46%27 stroke=%27url(%23grip)%27 stroke-width=%273.2%27/%3E %3Cpath d=%27M22.41 44.78 L28.39 49.82%27 stroke=%27%233A280B%27 stroke-width=%274.4%27/%3E %3Cpath d=%27M22.41 44.78 L28.39 49.82%27 stroke=%27url(%23grip)%27 stroke-width=%272.6%27/%3E %3Cpath d=%27M23.89 43.98 Q28.9 25.12 48.5 17.5 Q37.38 31.66 29.11 48.02 Z%27 fill=%27url(%23stA)%27/%3E %3C/g%3E %3Cg stroke=%27%233A280B%27 stroke-width=%271.1%27%3E %3Ccircle cx=%2717.4%27 cy=%2756.8%27 r=%273.2%27 fill=%27url(%23grip)%27/%3E %3Ccircle cx=%2746.6%27 cy=%2756.8%27 r=%273.2%27 fill=%27url(%23grip)%27/%3E %3C/g%3E%3C/svg%3E'); --sk-rivet:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E %3Cdefs%3E%3CradialGradient id=%27d%27 cx=%27.34%27 cy=%27.28%27 r=%27.82%27%3E %3Cstop offset=%270%27 stop-color=%27%23FBF0D2%27/%3E%3Cstop offset=%27.34%27 stop-color=%27%23DDB05C%27/%3E %3Cstop offset=%27.72%27 stop-color=%27%23B8862F%27/%3E%3Cstop offset=%271%27 stop-color=%27%235E4212%27/%3E %3C/radialGradient%3E%3C/defs%3E %3Ccircle cx=%2732%27 cy=%2732%27 r=%2729%27 fill=%27url(%23d)%27 stroke=%27%232B1D07%27 stroke-width=%273.5%27/%3E %3Ccircle cx=%2732%27 cy=%2732%27 r=%2721%27 fill=%27none%27 stroke=%27%23FBF0D2%27 stroke-width=%272.4%27 opacity=%27.30%27/%3E %3Cellipse cx=%2724%27 cy=%2723%27 rx=%277.5%27 ry=%275.5%27 fill=%27%23FFF8E2%27 opacity=%27.45%27 transform=%27rotate(-32 24 23)%27/%3E %3C/svg%3E'); --sk-ropecorner:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 40%27%3E%3Cdefs%3E%3ClinearGradient id=%27b%27 x1=%270%27 y1=%270%27 x2=%271%27 y2=%271%27%3E%3Cstop offset=%270%27 stop-color=%27%23E8CE92%27/%3E%3Cstop offset=%27.45%27 stop-color=%27%23B88935%27/%3E%3Cstop offset=%271%27 stop-color=%27%235C4318%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%27M4 38 L4 14 A10 10 0 0 1 14 4 L38 4%27 fill=%27none%27 stroke=%27%232A1B0C%27 stroke-width=%277%27 stroke-linecap=%27round%27/%3E%3Cpath d=%27M4 38 L4 14 A10 10 0 0 1 14 4 L38 4%27 fill=%27none%27 stroke=%27url(%23b)%27 stroke-width=%274.6%27 stroke-linecap=%27round%27/%3E%3Cg stroke=%27%232A1B0C%27 stroke-width=%271.1%27 opacity=%27.55%27%3E%3Cpath d=%27M2 30 L6.6 27%27/%3E%3Cpath d=%27M2 23 L6.6 20%27/%3E%3Cpath d=%27M2.6 16 L7 12.6%27/%3E%3Cpath d=%27M7 8 L10.4 12%27/%3E%3Cpath d=%27M13 5 L16 9.2%27/%3E%3Cpath d=%27M20 2.2 L23 6.6%27/%3E%3Cpath d=%27M27 2.2 L30 6.6%27/%3E%3Cpath d=%27M34 2.2 L37 6.6%27/%3E%3C/g%3E%3C/svg%3E'); --sk-arrow:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12 L18 12 M12.5 6 L18.5 12 L12.5 18%27 fill=%27none%27 stroke=%27%23F3E9D6%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E'); --sk-back:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M20 12 L6 12 M11.5 6 L5.5 12 L11.5 18%27 fill=%27none%27 stroke=%27%23C9B694%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E'); /* Sabre gravé seul : le médaillon complet devient illisible sous 34 px, ce motif le remplace partout où la place manque (enseigne, boutons). */ --sk-sabre:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Cdefs%3E%3ClinearGradient id=%27b%27 x1=%27.2%27 y1=%270%27 x2=%27.8%27 y2=%271%27%3E%3Cstop offset=%270%27 stop-color=%27%23F0DCA8%27/%3E%3Cstop offset=%27.42%27 stop-color=%27%23B88935%27/%3E%3Cstop offset=%271%27 stop-color=%27%234A3213%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%27url(%23b)%27 fill-rule=%27evenodd%27 stroke=%27%2314100A%27 stroke-width=%271.4%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M23.89 45 Q29 24 52 14 Q39 30 30 49 Z%27/%3E%3Cpath d=%27M17 57 L27.5 45.5 L31.5 48.6 L21.5 60 Z%27/%3E%3Cpath d=%27M20.6 42.4 L29.2 49.2 L26.4 52.6 L17.8 45.8 Z%27/%3E%3Ccircle cx=%2716.5%27 cy=%2758.5%27 r=%274%27/%3E%3C/g%3E%3C/svg%3E'); /* Motifs marins : un par famille de plis, plus les gravures des cartes spéciales. La couleur n'est jamais le seul canal — quatre silhouettes franchement différentes (boucle fermée, axe vertical, forme radiale, diagonale) restent lisibles en dichromatie et à 12 px. */ --sk-gl-rope:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%278%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2738%27%20r%3D%2717%27%2F%3E%3Cpath%20d%3D%27M21%2026%20C24%2010%2040%2010%2043%2026%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --sk-gl-anchor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2711%27%20r%3D%276%27%2F%3E%3Cpath%20d%3D%27M32%2018%20L32%2056%27%2F%3E%3Cpath%20d%3D%27M18%2027%20L46%2027%27%2F%3E%3Cpath%20d%3D%27M11%2039%20C11%2052%2021%2058%2032%2058%20C43%2058%2053%2052%2053%2039%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --sk-gl-wheel:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M32%205%20L32%2059%20M5%2032%20L59%2032%20M13%2013%20L51%2051%20M51%2013%20L13%2051%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --sk-gl-skull:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%20d%3D%27M32%206C18%206%209%2016%209%2029c0%208%204%2013%208%2016v7c0%203%202%205%205%205h20c3%200%205-2%205-5v-7c4-3%208-8%208-16C55%2016%2046%206%2032%206Zm-9%2017a6.5%206.5%200%201%200%200%2013%206.5%206.5%200%200%200%200-13Zm18%200a6.5%206.5%200%201%200%200%2013%206.5%206.5%200%200%200%200-13Zm-9%2020h6l1%208h-8Z%27%2F%3E%3C%2Fsvg%3E"); --sk-gl-flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%277%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M17%207%20L17%2058%27%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M22%2010%20C34%203%2044%2016%2057%209%20L57%2032%20C44%2039%2034%2026%2022%2033%20Z%27%2F%3E%3C%2Fsvg%3E"); --sk-gl-coins:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27black%27%3E%3Cellipse%20cx%3D%2725%27%20cy%3D%2748%27%20rx%3D%2719%27%20ry%3D%278%27%2F%3E%3Cellipse%20cx%3D%2723%27%20cy%3D%2739%27%20rx%3D%2719%27%20ry%3D%278%27%2F%3E%3Cellipse%20cx%3D%2727%27%20cy%3D%2730%27%20rx%3D%2715%27%20ry%3D%277%27%2F%3E%3Cellipse%20cx%3D%2747%27%20cy%3D%2752%27%20rx%3D%2713%27%20ry%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --sk-gl-fin:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M8%2054c14-2%2022-9%2027-19%203-6%204-13%204-21%200-3%204-4%206-2%208%208%2013%2019%2013%2030%200%203-3%205-6%204-6-2-11-2-16%200-9%204-17%208-25%2012-3%201-5-3-3-4Z%27%2F%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M6%2040c6%201%2011%204%2015%209%201%202-1%204-3%203-5-2-9-3-14-3-2%200-3-3-1-4Z%27%2F%3E%3C%2Fsvg%3E"); --sk-gl-tentacle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%277%27%20stroke-linecap%3D%27round%27%20d%3D%27M14%208c0%2014%206%2022%2016%2026%2010%204%2016%2011%2016%2022%27%2F%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%20d%3D%27M46%2056c-6%200-9-4-9-9s3-8%208-8%27%2F%3E%3Cg%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2724%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2734%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%2742%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --sk-gl-whale:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M4%2036c0-10%2012-18%2026-18%2012%200%2021%205%2026%2013%201%202%200%204-2%204-4%201-6%203-6%206%200%204%203%207%207%208%202%201%202%204-1%205-7%203-16%204-24%204C12%2058%204%2048%204%2036Z%27%2F%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M56%2012c3%204%205%209%205%2014%200%202-3%203-4%201-2-4-5-7-9-9-2-1-1-4%201-4%203-1%205-2%207-2Z%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2732%27%20r%3D%273%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E"); --sk-gl-plank:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%2040%20L48%2040%27%2F%3E%3Cpath%20d%3D%27M48%2030%20L58%2040%20L48%2050%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2718%27%20r%3D%277%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --sk-sealimg:var(--sk-rivet); /* < 34 px : rivet ; ≥ 34 px : médaillon */ /* Le dos de carte, peint : cuir noir, cartouche d'ocre, lettrage doré. Il remplace le velours bordeaux frappé du médaillon, qui était un dégradé CSS — quatre endroits le dessinaient, ils tirent tous d'ici. */ --sk-dos:url('assets/skin/dos-carte.webp'); } /* ===================================================================== LA SALLE — nuit bleutée, halo ambré de lanterne au centre. Le fond ne bouge pas : dans cette charte, une seule chose est lumineuse à la fois, et c'est toujours l'action en cours. ===================================================================== */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; /* La cloison de bois, jamais le bleu nuit. `cover` plutôt qu'un carrelage : une texture répétée trahit sa couture en damier sur un grand écran, et les modèles d'image ne produisent pas de raccord invisible. L'image est donc unique et recadrée — aucune répétition, donc aucune couture. */ background: #140d07 url('assets/skin/fond-bois.webp') 50% 50% / cover no-repeat fixed; font-family: 'Spectral', Georgia, serif; color: var(--sk-cream); -webkit-font-smoothing: antialiased; } /* Grain de la salle, puis vignette : deux voiles fixes, jamais animés. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: var(--sk-grain); opacity: 0.07; mix-blend-mode: overlay; } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(78% 62% at 50% 44%, transparent 38%, rgba(2, 7, 9, 0.8) 100%); } .app { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 16px; text-align: center; } .sk-app { max-width: 760px; } /* --- Titres : Cinzel Decorative gravé, dorure en dégradé ------------- */ h1 { font-family: 'Cinzel Decorative', Georgia, serif; font-size: 3.4rem; line-height: 1.02; margin: 6px auto 4px; letter-spacing: 0.02em; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(178deg, #fbf0d2 6%, var(--sk-brass-hi) 34%, var(--sk-brass) 62%, var(--sk-brass-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.75)) drop-shadow(0 0 22px rgba(184, 137, 53, 0.26)); } h2, h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 0.06em; color: var(--sk-cream); } /* --- Le bandeau peint de l'accueil ---------------------------------- La scène de taverne remonte jusqu'aux bords de la page (d'où les marges négatives qui annulent le padding de .app) et s'éteint vers le bas : le logo se pose sur cette pénombre sans qu'aucun trait ne les sépare. */ /* ===================================================================== L'ACCUEIL — la taverne occupe l'écran entier. Le logo est posé en haut, les commandes tombent en bas : entre les deux, la scène respire. L'écran sort de `.app` (420 px) par un `position: fixed` — c'est la seule façon de dépasser la colonne sans démonter la mise en page des trois autres écrans, qui eux y restent. D'où le `:not(.hidden)` : sans lui, l'identifiant l'emporterait sur `.hidden` et l'accueil resterait affiché par-dessus la partie. ===================================================================== */ #sk-screen-home:not(.hidden) { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 4px 18px 30px; overflow-y: auto; max-width: none; } .sk-hero { position: fixed; inset: 0; z-index: -1; margin: 0; overflow: hidden; border-radius: 0; box-shadow: none; } .sk-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; mask-image: none; -webkit-mask-image: none; } /* Un voile qui s'épaissit vers le bas : les commandes s'y posent et se lisent, sans qu'on ait à leur donner un cadre qui masquerait la scène. */ .sk-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 5, 2, 0.62) 0%, rgba(8, 5, 2, 0.12) 26%, rgba(8, 5, 2, 0.34) 56%, rgba(8, 5, 2, 0.88) 100%); } .sk-hero-back { position: fixed; left: 18px; top: 14px; margin: 0; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } .sk-home-title { display: block; margin: -12px auto 0; flex: 0 0 auto; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.85)); background: none; -webkit-text-fill-color: initial; } /* Tout ce qui suit le logo est repoussé en bas de l'écran : c'est cette seule marge automatique qui sépare le titre des commandes. */ #sk-screen-home:not(.hidden) .tagline { margin-top: auto; } .sk-home-title img { display: block; width: 100%; max-width: min(620px, 78vw); height: auto; margin: 0 auto; } .tagline { margin: 8px auto 18px; max-width: 46ch; color: var(--sk-cream-2); font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 1rem; line-height: 1.5; } .hidden { display: none !important; } .hint { color: var(--sk-cream-2); font-family: 'Spectral', Georgia, serif; font-size: 0.92rem; line-height: 1.45; } /* Petit intertitre gravé, réutilisé dans tous les panneaux. */ .invite-label, .sk-side-title { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-brass); } /* Bulle d'explication au survol des cartes à pouvoir : remplace le title natif du navigateur (lent, non stylable). Suit la souris, ne capte jamais le clic (pointer-events: none) pour ne pas gêner la pose de la carte. Devenue une fiche de parchemin, comme les panneaux du panneau de droite. */ .sk-card-tooltip { position: fixed; z-index: 90; max-width: 264px; padding: 9px 12px 10px; border-radius: 2px; background: linear-gradient(176deg, var(--sk-parch-hi), var(--sk-parch) 58%, var(--sk-parch-lo)); box-shadow: 0 0 0 1px var(--sk-brass), 0 0 0 2px rgba(30, 18, 6, 0.8), 0 8px 20px rgba(0, 0, 0, 0.6); color: var(--sk-parch-ink); font-family: 'Spectral', Georgia, serif; font-size: 0.8rem; line-height: 1.48; pointer-events: none; } .sk-toast { min-height: 1.2em; margin: 0 0 10px; } /* ===================================================================== BOIS, LAITON, CIRE — boutons, champs, panneaux, modales. Trois matières et trois seulement : le bois pour les objets qu'on manipule, le laiton pour ce qui appelle l'action, la cire rouge pour ce qui ferme ou termine. ===================================================================== */ /* Planche de noyer, réutilisée par tous les panneaux et bandeaux. */ .sk-wood { position: relative; background: linear-gradient(180deg, rgba(255, 232, 190, 0.09), rgba(0, 0, 0, 0.34)), linear-gradient(178deg, var(--sk-oak-hi) 0%, var(--sk-oak) 34%, var(--sk-oak-lo) 100%); } .sk-wood::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: var(--sk-oakgrain); background-size: 300px 120px; opacity: 0.3; mix-blend-mode: overlay; } /* Éraflures du bois : trois traits fixes, jamais animés. */ .sk-wood::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(92deg, transparent 12%, rgba(255, 236, 196, 0.05) 12.4%, transparent 12.8%), linear-gradient(88deg, transparent 47%, rgba(0, 0, 0, 0.28) 47.3%, transparent 47.7%), linear-gradient(91deg, transparent 71%, rgba(255, 236, 196, 0.04) 71.3%, transparent 71.7%); } .btn { display: inline-block; padding: 10px 22px; border: 1px solid var(--sk-brass-lo); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.1), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #33200f, #170d05); color: var(--sk-cream); font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.24), 0 2px 0 rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.5); transition: transform 0.14s ease, box-shadow 0.16s ease, background 0.16s ease; } .btn:hover { background: linear-gradient(180deg, rgba(255, 236, 196, 0.16), rgba(0, 0, 0, 0.26)), linear-gradient(180deg, #432b14, #1e1108); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.34), 0 3px 0 rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 14px rgba(184, 137, 53, 0.24); } .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 0, 0, 0.5); } .btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.12), 0 2px 0 rgba(0, 0, 0, 0.5); } .btn-link { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px; padding: 4px 0; border: none; background: none; color: var(--sk-cream-2); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; cursor: pointer; text-align: left; text-decoration: none; } .btn-link:hover { color: var(--sk-cream); text-decoration: none; text-shadow: 0 0 10px rgba(232, 206, 146, 0.4); } .btn-rules-link { display: inline-block; margin: 0 0 30px; padding: 7px 16px; border: 1px solid rgba(184, 137, 53, 0.34); border-radius: 3px; background: transparent; color: var(--sk-cream-2); font-family: 'Cinzel', Georgia, serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .btn-rules-link:hover { background: rgba(184, 137, 53, 0.12); color: var(--sk-cream); } /* Le laiton n'appelle qu'une action à la fois : c'est le seul plein or de l'écran, il ne doit jamais y en avoir deux visibles ensemble. */ /* Les actions principales portent la plaque de laiton peinte. Le libellé y est GRAVÉ : encre très sombre, et le seul reflet passe SOUS la lettre. Un reflet au-dessus délavait le trait — sur du laiton clair, un brun clair ne se lit pas. Les états ne coûtent aucune image de plus : le survol monte d'un cran de luminosité, l'appui l'assombrit et enfonce le bouton d'un pixel. */ .btn-primary { border-style: solid; border-width: 14px 16px; border-image: url('assets/skin/btn-laiton.webp') 130 150 fill / 14px 16px stretch; border-radius: 0; background: none; box-shadow: none; color: #170E03; text-shadow: 0 1px 0 rgba(255, 241, 205, 0.55), 0 -1px 1px rgba(0, 0, 0, 0.35); padding: 4px 10px 6px; min-height: 54px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); } .btn-rouge { border-style: solid; border-width: 13px 15px; border-image: url('assets/skin/btn-rouge.webp') 125 145 fill / 13px 15px stretch; border-radius: 0; background: none; box-shadow: none; color: #F6E9C6; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); padding: 4px 10px 6px; min-height: 52px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); } .btn-primary:hover, .btn-rouge:hover { background: none; box-shadow: none; transform: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) brightness(1.14) saturate(1.05); } .btn-primary:active, .btn-rouge:active { background: none; box-shadow: none; transform: translateY(1px); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)) brightness(0.86); } .btn-primary:disabled, .btn-rouge:disabled { filter: grayscale(0.65) brightness(0.62); cursor: default; } .btn-create { width: 100%; max-width: 300px; margin: 0 auto; padding: 6px 18px 8px; min-height: 62px; font-size: 1.18rem; letter-spacing: 0.12em; border-radius: 0; display: flex; align-items: center; justify-content: center; text-align: center; gap: 0; animation: create-btn-breathe 3.2s ease-in-out infinite; } @keyframes create-btn-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.65), inset 0 -2px 0 rgba(60, 42, 12, 0.5), 0 3px 0 #33240a, 0 8px 18px rgba(0, 0, 0, 0.55); } 50% { box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.65), inset 0 -2px 0 rgba(60, 42, 12, 0.5), 0 3px 0 #33240a, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 26px rgba(232, 206, 146, 0.45); } } /* L'emoji des boutons cède la place au sabre gravé du logotype. */ .btn-icon { width: 19px; height: 19px; flex: 0 0 19px; font-size: 0; background: var(--sk-sabre) center / contain no-repeat; filter: brightness(0) saturate(0) invert(9%) sepia(30%) saturate(1200%) hue-rotate(350deg); opacity: 0.85; } .btn-small { padding: 7px 14px; font-size: 0.66rem; letter-spacing: 0.1em; } .divider { position: relative; margin: 22px auto; max-width: 300px; font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sk-cream-3); display: flex; align-items: center; gap: 12px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sk-brass-lo), transparent); } #sk-form-join { display: flex; gap: 8px; justify-content: center; } #sk-input-code { width: 132px; padding: 11px 12px; border-radius: 2px; border: 0; background: linear-gradient(180deg, #1a120b, #241a12); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.34), inset 0 2px 5px rgba(0, 0, 0, 0.65); color: var(--sk-cream); text-align: center; text-transform: uppercase; letter-spacing: 0.28em; font-family: 'Bitter', Georgia, serif; font-size: 0.95rem; font-weight: 700; } .error { color: #e09a90; font-family: 'Spectral', Georgia, serif; font-style: italic; min-height: 1.2em; margin-top: 12px; } .nickname-field { max-width: 300px; margin: 0 auto 18px; } .nickname-field input, .join-modal-content input { width: 100%; padding: 11px 13px; border-radius: 2px; border: 0; background: linear-gradient(180deg, #1a120b, #241a12); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.65); color: var(--sk-cream); font-family: 'Spectral', Georgia, serif; font-size: 0.98rem; text-align: center; transition: box-shadow 0.15s ease; } .nickname-field input::placeholder, .join-modal-content input::placeholder, #sk-input-code::placeholder { color: #6e5c42; font-style: italic; letter-spacing: normal; } .nickname-field input:focus, .join-modal-content input:focus, #sk-input-code:focus { outline: none; box-shadow: inset 0 0 0 1px var(--sk-brass), inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(184, 137, 53, 0.28); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .invite-label { margin: 6px 0 12px; } /* Switch « Jouer avec l'extension » : cliquable pour l'hôte (piste en laiton quand il est actif), lecture seule pour les autres — un vrai état, pas un bouton cassé. */ .sk-extension-toggle { display: flex; align-items: center; gap: 10px; margin: 18px auto 4px; padding: 9px 16px; border: 1px solid var(--sk-brass-lo); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.08), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); color: var(--sk-cream); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.18), 0 2px 0 rgba(0, 0, 0, 0.5); transition: box-shadow 0.15s ease; } .sk-extension-toggle:not(:disabled):hover { box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.28), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(184, 137, 53, 0.3); } .sk-extension-toggle:disabled { cursor: default; } .sk-extension-toggle--readonly { opacity: 0.72; } .sk-extension-toggle-track { position: relative; width: 38px; height: 20px; border-radius: 10px; background: #150c06; box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.8); flex-shrink: 0; transition: background 0.2s ease; } .sk-extension-toggle-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fbefcc, var(--sk-brass) 52%, #5a4318 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .sk-extension-toggle--on .sk-extension-toggle-track { background: #3a2513; box-shadow: inset 0 0 0 1px var(--sk-brass), inset 0 2px 4px rgba(0, 0, 0, 0.6); } .sk-extension-toggle--on .sk-extension-toggle-knob { transform: translateX(18px); } /* --- La planche des extensions ------------------------------------- Huit lignes là où il n'y avait qu'un interrupteur. Le grand bouton reste en tête, mais il ne dit plus « jouer avec l'extension » : il allume ou éteint les huit d'un geste, ce qu'on fait neuf fois sur dix. Les lignes servent à s'écarter du bloc, pas à le composer. -------------------------------------------------------------------- */ /* La planche des extensions se contente de moins de largeur que les autres : ses libellés sont courts, et ce qu'elle rendait aux Réglages leur manquait — sous 298px la rangée des dix manches laisse le « 10 » retomber seul sur une deuxième ligne. */ .sk-ext-card { flex: 0.9 1 258px; max-width: 300px; } .sk-ext-master { width: 100%; margin: 0 0 10px; justify-content: flex-start; } .sk-ext-list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(184, 137, 53, 0.24); } .sk-ext-line { display: flex; align-items: center; gap: 9px; padding: 3px 0; } /* L'interrupteur de ligne est le même objet que le grand, en plus petit et sans sa plaque de bois : la planche fait déjà le fond, une deuxième épaisseur par ligne aurait donné huit boutons empilés au lieu d'une liste. Il garde en revanche ses classes d'état — le rail et le bouton dorés viennent tels quels de .sk-extension-toggle--on. */ .sk-ext-switch { display: flex; align-items: center; gap: 9px; /* L'interrupteur épouse son contenu au lieu d'occuper la ligne : c'est ce qui pose le « ? » contre le nom plutôt qu'à l'autre bout, et le compte de cartes reste chassé à droite par sa propre marge. */ flex: 0 1 auto; min-width: 0; padding: 3px 2px; border: none; background: none; cursor: pointer; color: var(--sk-cream-2); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; } .sk-ext-switch:not(:disabled):hover { color: var(--sk-cream); } /* Vu par les autres joueurs : la planche reste lisible mais se retire d'un cran, comme le grand interrupteur et le choix du paquet. C'est le même signal partout dans le salon — ce qui est terni ne se règle pas d'ici. */ .sk-ext-switch:disabled { cursor: default; opacity: 0.72; } .sk-ext-switch .sk-extension-toggle-track { width: 30px; height: 16px; } .sk-ext-switch .sk-extension-toggle-knob { top: 2.5px; left: 2.5px; width: 11px; height: 11px; } .sk-ext-switch.sk-extension-toggle--on .sk-extension-toggle-knob { transform: translateX(14px); } /* Le « ? » posé après le nom lui a pris une vingtaine de pixels, et les deux plus longs libellés se coupaient. Ils reviennent à la ligne plutôt que de finir en points de suspension : une planche un peu plus haute coûte moins cher qu'un « LE COFFRE DE DAVY J… ». */ .sk-ext-name { white-space: normal; } /* Ce que la ligne ajoute au paquet. C'est ce chiffre qui explique le pied de planche : douze cartes de plus ouvrent un huitième siège, une seule non. */ .sk-ext-count { flex-shrink: 0; margin-left: auto; font-family: 'Bitter', Georgia, serif; font-size: 0.62rem; font-variant-numeric: tabular-nums; color: var(--sk-brass-hi); opacity: 0.75; } /* Le « ? » : un jeton de laiton gravé, à la taille d'une pastille. Il ne règle rien — il ouvre la fiche — donc il reste actif même pour les joueurs qui voient la planche en lecture seule. */ .sk-ext-help { flex-shrink: 0; width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.58rem; line-height: 1; color: var(--sk-cream-3); background: radial-gradient(circle at 50% 34%, #241608, #0d0703); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.14), 0 0 0 1px rgba(184, 137, 53, 0.34); transition: color 0.12s, filter 0.12s; } .sk-ext-help:hover { color: #2a1b06; background: linear-gradient(160deg, var(--sk-brass), var(--sk-brass-lo)); } /* LA FICHE D'UNE CARTE — l'illustration en grand, son nom, sa règle. */ .sk-card-modal-content { max-width: 340px; text-align: center; } .sk-card-modal-art { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; } .sk-card-modal-art .sk-card { --sk-w: 190px; } .sk-card-modal-art--trio .sk-card { --sk-w: 92px; } .sk-card-modal-title { margin: 0 0 10px; font-family: 'Cinzel', Georgia, serif; font-size: 0.98rem; letter-spacing: 0.05em; color: var(--sk-brass-hi); } .sk-card-modal-rule { margin: 0 0 18px; font-size: 0.86rem; line-height: 1.5; color: var(--sk-cream-2); } /* LES RÈGLES — une pile de fiches de parchemin dans le cadre de bois. Une fiche à la fois, toutes à la même hauteur : la navigation ne saute pas d'une fiche à l'autre. */ /* Le bouton qui les ouvre est un bout de la même fiche : parchemin, encre bordeaux, crâne d'or. Ni laiton (réservé à l'action de l'écran) ni lien discret : il doit se voir au premier regard. */ .sk-regles-bouton { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border: 0; border-radius: 4px; color: var(--sk-wine); font-family: 'Cinzel', Georgia, serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; cursor: pointer; background: radial-gradient(120% 120% at 50% 40%, transparent 50%, rgba(122, 90, 32, 0.32)), linear-gradient(170deg, var(--sk-parch-hi), var(--sk-parch) 55%, var(--sk-parch-lo)); box-shadow: inset 0 0 0 1px rgba(122, 90, 32, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.55); transition: filter 0.15s ease, transform 0.15s ease; } .sk-regles-bouton::before, .sk-regles-bouton::after { content: ''; width: 16px; height: 18px; background: url('assets/skin/crane-or.webp') center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(42, 27, 12, 0.6)); } .sk-regles-bouton:hover, .sk-regles-bouton:focus-visible { filter: brightness(1.08); transform: translateY(-1px); } .sk-regles-bouton:active { filter: brightness(0.92); transform: translateY(1px); } /* Au salon, centré au-dessus de la planche des extensions. Hors grille à trois planches, il ouvre simplement la pile. */ .sk-regles-bouton--salon { display: flex; width: fit-content; margin: 0 auto 10px; } /* En jeu, sous le bandeau, un peu en retrait de son bord gauche, et en double : sur la scène, à côté des cartes, un bouton de lien se perdait. */ .sk-regles-bouton--jeu { position: absolute; left: 22px; top: calc(100% + 12px); gap: 12px; padding: 11px 16px; border-radius: 6px; font-size: 1.15rem; } .sk-regles-bouton--jeu::before, .sk-regles-bouton--jeu::after { width: 26px; height: 30px; } .sk-regles { width: 100%; max-width: 400px; padding: 16px 16px 12px; } .sk-regles-fermer { position: absolute; top: 20px; right: 22px; z-index: 1; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--sk-parch-ink); font-size: 1.35rem; line-height: 1; cursor: pointer; opacity: 0.6; } .sk-regles-fermer:hover { opacity: 1; background: rgba(122, 90, 32, 0.16); } .sk-regles-fiche { box-sizing: border-box; padding: 12px 14px 14px; border-radius: 10px; color: var(--sk-parch-ink); font-family: 'Spectral', Georgia, serif; font-size: 0.86rem; line-height: 1.32; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(122, 90, 32, 0.3)), linear-gradient(170deg, var(--sk-parch-hi), var(--sk-parch) 55%, var(--sk-parch-lo)); box-shadow: inset 0 0 0 1px rgba(122, 90, 32, 0.55), 0 6px 14px rgba(0, 0, 0, 0.5); } .sk-regles-kicker { margin: 0; text-align: center; font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-brass-lo); } .sk-regles-fiche--ext .sk-regles-kicker { color: var(--sk-wine); } .sk-regles .sk-regles-titre { margin: 0 0 10px; font-size: 1.18rem; color: var(--sk-wine); text-shadow: none; } .sk-regles-consigne { margin: 0 0 10px; text-align: center; font-style: italic; } /* Les remarques de bas de fiche : ce qui change l'issue d'un pli et qu'on oublie. Un cartouche bordeaux, un triangle d'alerte devant : elles ne doivent pas passer pour une légende en petit. */ .sk-regles-notes { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .sk-regles-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 6px 9px; border-radius: 7px; background: rgba(122, 28, 28, 0.09); box-shadow: inset 0 0 0 1px rgba(122, 28, 28, 0.32); font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--sk-parch-ink); } .sk-regles-alerte { flex: none; width: 18px; height: 17px; margin-top: 1px; } .sk-regles-alerte path { fill: #c0392b; stroke: #7a1c1c; stroke-width: 1.2; stroke-linejoin: round; } .sk-regles-alerte rect, .sk-regles-alerte circle { fill: #fff6e0; } .sk-regles-fiche sup { font-size: 0.6em; } /* Les vignettes : une vraie illustration du paquet, à l'échelle d'une icône. Les classes `sk-card--art-*` ne posent que la variable --art. */ .sk-regles-carte { display: block; flex: none; width: 34px; aspect-ratio: 7 / 10; border-radius: 4px; background: #1a0e06 var(--art) 50% 50% / cover no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* La tête d'un Pirate : sa carte recadrée sur le visage (--vx, --vy : le centre du visage en fraction de la carte, voir REGLES_VISAGES). La carte est agrandie 2,6 fois ; 3,714 = 2,6 × 10/7 pour la hauteur. */ .sk-regles-tete { --d: 40px; display: block; flex: none; width: var(--d); height: var(--d); border-radius: 50%; background-color: #1a0e06; background-image: var(--art); background-repeat: no-repeat; background-size: calc(var(--d) * 2.6) auto; background-position: calc(var(--d) / 2 - var(--vx) * var(--d) * 2.6) calc(var(--d) / 2 - var(--vy) * var(--d) * 3.714); box-shadow: 0 0 0 2px var(--sk-brass), 0 0 0 3px rgba(42, 27, 12, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); } .sk-regles-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .sk-regles-ligne { display: flex; align-items: center; gap: 11px; width: 100%; padding: 4px 6px; border: none; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .sk-regles-liste--tetes .sk-regles-ligne { padding: 5px 8px; } .sk-regles-ligne:hover, .sk-regles-ligne:focus-visible { outline: none; background: rgba(122, 90, 32, 0.16); } .sk-regles-texte b { display: block; font-family: 'Cinzel', Georgia, serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; color: var(--sk-wine); } /* Les numérotées d'extension tiennent sur une ligne : trois vignettes en éventail serré, puis une sous-ligne par carte. */ .sk-regles-trio { display: flex; flex: none; } .sk-regles-trio .sk-regles-carte { width: 28px; } .sk-regles-trio .sk-regles-carte + .sk-regles-carte { margin-left: -16px; } .sk-regles-sous { display: block; margin-top: 2px; } .sk-regles-texte .sk-regles-sous b { display: inline; margin-right: 3px; font-size: 0.7rem; } /* Depuis l'accueil, toutes les extensions sont montrées : la marque dit lesquelles ne sont pas du jeu de base. */ .sk-regles-ext { display: inline-block; margin-right: 5px; padding: 0 4px 1px; border-radius: 3px; background: var(--sk-wine); color: var(--sk-parch-hi); font-family: 'Cinzel', Georgia, serif; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; vertical-align: 1px; } .sk-regles-texte b + .sk-regles-ext { margin-top: 1px; } /* La manche : deux faits, puis le barème. */ .sk-regles-faits { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; padding: 0; list-style: none; } .sk-regles-faits li { display: flex; align-items: center; gap: 12px; } .sk-regles-logo { flex: none; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .sk-regles-faits .sk-regles-carte { width: 27px; margin: 0 5px; } .sk-regles-faits b { font-family: 'Cinzel', Georgia, serif; font-size: 0.78rem; color: var(--sk-wine); } .sk-regles-score { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .sk-regles-score th, .sk-regles-score td { padding: 6px 4px; border-bottom: 1px solid rgba(122, 90, 32, 0.32); text-align: center; } .sk-regles-score th { font-family: 'Cinzel', Georgia, serif; font-size: 0.66rem; font-weight: 700; color: var(--sk-parch-ink); } .sk-regles-score tbody th { text-align: left; } .sk-regles-score thead th { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sk-brass-lo); } .sk-regles-score .plus { color: #2E6B2A; font-weight: 600; } .sk-regles-score .moins { color: var(--sk-wine); font-weight: 600; } /* Le pli : l'échelle des numérotées, puis le cycle des personnages. */ .sk-regles-echelle { display: flex; align-items: flex-start; justify-content: center; gap: 2px; } .sk-regles-echelle figure { display: flex; flex-direction: column; align-items: center; width: 70px; margin: 0; } .sk-regles-echelle .sk-regles-carte { width: 36px; } .sk-regles-echelle figcaption, .sk-regles-cycle-carte figcaption { margin-top: 4px; text-align: center; font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .sk-regles-echelle small { display: block; font-family: 'Spectral', Georgia, serif; font-size: 0.7rem; font-weight: 600; color: var(--sk-wine); } .sk-regles-inf { padding-top: 15px; font-family: 'Cinzel', Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--sk-brass-lo); } .sk-regles-echelle-suite { width: 54px; padding-top: 12px; text-align: center; font-size: 0.7rem; font-style: italic; line-height: 1.2; } /* Le cycle : trois cartes en triangle, une flèche du gagnant au perdant, et sur chaque flèche le bonus que le gagnant empoche. Les coordonnées sont celles du viewBox, en pixels : le cadre ne se met pas à l'échelle. */ .sk-regles-cycle { position: relative; width: 260px; height: 214px; margin: 12px auto 0; } .sk-regles-cycle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sk-regles-cycle path { fill: none; stroke: var(--sk-wine); stroke-width: 2.2; stroke-linecap: round; marker-end: url(#sk-regles-pointe); } .sk-regles-cycle marker path { fill: var(--sk-wine); stroke: none; } .sk-regles-cycle text { font-family: 'Cinzel', Georgia, serif; font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--sk-wine); paint-order: stroke; stroke: var(--sk-parch-hi); stroke-width: 3px; } .sk-regles-cycle .sk-regles-cycle-cle { font-family: 'Spectral', Georgia, serif; font-size: 11px; font-style: italic; font-weight: 500; fill: var(--sk-parch-ink); } .sk-regles-cycle-carte { position: absolute; display: flex; flex-direction: column; align-items: center; width: 48px; margin: 0; } .sk-regles-cycle-carte .sk-regles-carte { width: 48px; } .sk-regles-cycle--haut { left: 106px; top: 0; } .sk-regles-cycle--gauche { left: 18px; top: 124px; } .sk-regles-cycle--droite { left: 194px; top: 124px; } /* La navigation : flèches et points. Les extensions sont des losanges — on voit d'un coup d'œil combien de fiches elles ajoutent. */ .sk-regles-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; } .sk-regles-fleche { width: 34px; height: 34px; padding: 0 0 3px; border: 1px solid rgba(184, 137, 53, 0.5); border-radius: 50%; background: transparent; color: var(--sk-cream); font-size: 1.4rem; line-height: 1; cursor: pointer; } .sk-regles-fleche:hover:not(:disabled) { background: rgba(184, 137, 53, 0.16); } .sk-regles-fleche:disabled { opacity: 0.28; cursor: default; } .sk-regles-points { display: flex; align-items: center; gap: 9px; } .sk-regles-point { width: 10px; height: 10px; padding: 0; border: 1px solid var(--sk-brass); border-radius: 50%; background: transparent; cursor: pointer; } .sk-regles-point--ext { border-radius: 1px; transform: rotate(45deg); } .sk-regles-point[aria-current="true"] { background: var(--sk-brass-hi); border-color: var(--sk-brass-hi); } .sk-ext-tally { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(184, 137, 53, 0.24); text-align: center; } /* Panneau de choix au moment de la pose : le texte explicatif passe sur toute la largeur, les boutons se répartissent en dessous — même structure que .sk-bid-choices. Il ne reste que le Joker : le 0/14 et la Planche ont quitté la pilule pour un cadre plein écran, ils ne précisent pas une carte, ils décident de ce qu'elle est ou de ce qu'une autre devient. */ #sk-joker-choice .hint { flex-basis: 100%; margin: 0 0 4px; } .lobby-players { margin: 24px auto; max-width: 300px; } /* La discussion du salon, en colonne étroite (téléphone) : même gabarit que les autres blocs du salon. En paysage elle devient une planche, sous le code de la partie — voir plus bas. */ .sk-lobby-chat { display: flex; flex-direction: column; margin: 24px auto; max-width: 300px; } /* Le fil du salon a une hauteur FIXE, et deux fois plus courte qu'avant. Il se réglait jusqu'ici sur la planche la plus haute du salon (voir ajusterHauteurSalon) : c'était juste tant que la colonne des réglages déroulait tout son contenu, mais elle se replie maintenant en trois lignes, et un fil qui se cale sur ses voisines aurait suivi — changeant de taille à chaque volet ouvert, sous les yeux de qui écrit. Trois messages visibles, le reste défile : c'est une salle d'attente, pas une messagerie. Le `min-height` du fil de jeu est explicitement annulé — sans ça il l'emportait sur la hauteur posée ici. */ .sk-lobby-chat .sk-chat-log { flex: none; /* Hauteur de boîte, bordures comprises (box-sizing: border-box en tête de feuille) : en paysage le creux prend 8 px de rembourrage de chaque côté, il reste de quoi lire trois messages. */ height: 84px; min-height: 0; max-height: none; } .lobby-list { /* La cote d'une ligne d'équipage : le médaillon (26 px plus ses 2 px de cerclage) et les 4 px de rembourrage au-dessus comme en dessous. Elle est nommée ici parce que la planche du salon en déduit sa hauteur — cinq rangs réservés d'avance, voir .sk-lobby-col .lobby-list. */ --sk-crew-ligne: 38px; --sk-crew-ecart: 7px; /* Le nombre de rangs réservés. Cinq par défaut, soit la table la plus grande que le jeu connaisse (neuf matelots sur deux colonnes) ; le salon le rabaisse selon le paquet réellement choisi — sept joueurs sans extension, cela ne fait que quatre rangs, et le cinquième était un rang de bois nu au milieu de la planche. */ --sk-crew-rangs: 5; list-style: none; margin: 0; padding: 0; /* La place de l'équipage est réservée dès l'ouverture du salon. Sans cela, hors de la mise en page paysage, la planche centrale prenait la hauteur de ses seuls occupants : son cerclage bas n'était pas encore visible à l'arrivée, puis apparaissait dès qu'un joueur ou un bot s'ajoutait. Les deux colonnes et les rangées fixes donnent donc le même cadre, vide ou rempli. Les règles paysage plus bas n'en ajustent que les cotes pour les grands écrans. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 48px; align-content: start; gap: var(--sk-crew-ecart); height: calc( var(--sk-crew-rangs) * 48px + (var(--sk-crew-rangs) - 1) * var(--sk-crew-ecart) ); overflow: hidden; } /* Le rôle d'équipage : une ligne de bois par matelot, marquée au laiton. */ .lobby-list li { display: flex; align-items: center; padding: 9px 13px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.28)), linear-gradient(180deg, #2a1b0f, #170e07); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.22), 0 2px 0 rgba(0, 0, 0, 0.45); border-left: 3px solid var(--sk-brass-lo); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--sk-cream); text-align: left; animation: menu-pop-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; } /* L'hôte porte la barre du capitaine, pas une couronne d'emoji. */ .lobby-list li.lobby-host { border-left-color: var(--sk-brass-hi); } .lobby-list li.lobby-host::after { content: 'CAPITAINE'; margin-left: auto; padding-left: 10px; font-family: 'Cinzel', Georgia, serif; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.16em; color: var(--sk-brass); } /* Un joueur automatique porte son nom de pirate comme les autres : rien, sur sa ligne, ne disait que ce n'en était pas un. Cette marque tient la même place que la barre du capitaine, à droite du rang, mais en laiton éteint — c'est une mention, pas une distinction. */ .sk-lobby-bot { flex-shrink: 0; margin-left: auto; padding: 1px 5px; border: 1px solid var(--sk-brass-dead); border-radius: 2px; font-family: 'Cinzel', Georgia, serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; color: var(--sk-brass-lo); } /* Le cartouche du niveau d'un bot : une à trois petites têtes de mort en or, le crâne de la carte Skull King de l'accueil (détouré de skull-sk.png). Le même sur la ligne du bot et dans le menu qui l'ajoute : on retrouve son niveau d'un écran à l'autre. */ .sk-cranes { display: flex; gap: 1px; padding: 1px 3px; border: 1px solid var(--sk-brass-lo); border-radius: 4px; background: rgba(0, 0, 0, 0.3); } /* Sur la ligne, le cartouche EST la marque : il remplace « BOT ». Une largeur fixe, tout juste celle de trois crânes, quel que soit le niveau : les pseudos à côté ne bougent pas d'un bot à l'autre, et « Barbe-Rousse » tient encore — à 31 px, il perdait son « SE ». Les crânes sont centrés dedans, et le filet est celui, éteint, de la marque, qui s'allume au survol. */ .sk-lobby-bot.sk-lobby-bot-niveau { justify-content: center; align-items: center; width: 27px; height: 14px; padding: 1px; border-color: var(--sk-brass-dead); border-radius: 4px; background: rgba(0, 0, 0, 0.3); } /* Une taille fixe, en pixels entiers, quel que soit le nombre : à une taille fractionnaire, Chrome rééchantillonnait chaque crâne différemment et celui du milieu paraissait plus gros. */ .sk-cranes i { flex: 0 0 7px; height: 10px; background: url('assets/skin/crane-or.webp') center / contain no-repeat; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); } /* Pour l'hôte, la marque est le bouton qui change le niveau du bot. Elle garde son allure de mention : seul le survol dit qu'elle se clique. */ button.sk-lobby-bot { background: none; cursor: pointer; transition: color 0.12s, border-color 0.12s; } button.sk-lobby-bot:hover, button.sk-lobby-bot:focus-visible { color: var(--sk-brass); border-color: var(--sk-brass-lo); } /* Les deux ensemble : la croix se range contre la marque au lieu de partager l'espace libre avec elle. */ .sk-lobby-bot + .sk-lobby-vire { margin-left: 6px; } /* Le renvoi d'un bot : discret tant qu'on ne le cherche pas, franc au survol. Il ne s'affiche que pour l'hôte et sur les lignes de bots. */ .sk-lobby-vire { flex-shrink: 0; margin-left: auto; padding: 0 4px; border: none; background: none; cursor: pointer; font-family: 'Bitter', Georgia, serif; font-size: 0.72rem; line-height: 1; color: var(--sk-brass-lo); opacity: 0.65; transition: color 0.12s, opacity 0.12s; } .sk-lobby-vire:hover { color: #d4574a; opacity: 1; } /* Le second temps du renvoi d'un joueur : la croix devient une question, rouge d'emblée, pour qu'on sache qu'un clic de plus débarque pour de bon. */ .sk-lobby-vire.sk-lobby-vire-confirme { color: #d4574a; opacity: 1; font-weight: 600; white-space: nowrap; } .lobby-list li:nth-child(1) { animation-delay: 0.03s; } .lobby-list li:nth-child(2) { animation-delay: 0.08s; } .lobby-list li:nth-child(3) { animation-delay: 0.13s; } .lobby-list li:nth-child(4) { animation-delay: 0.18s; } .lobby-list li:nth-child(5) { animation-delay: 0.23s; } .lobby-list li:nth-child(6) { animation-delay: 0.28s; } .lobby-list li:nth-child(7) { animation-delay: 0.33s; } @keyframes menu-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .screen:not(.hidden) { animation: menu-pop-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .join-modal-content { text-align: center; } .join-modal-content input { margin: 14px 0; } .modal { position: fixed; inset: 0; background: rgba(3, 8, 10, 0.74); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; } .modal.hidden { display: none; } /* Les modales sont des panneaux de bois cerclés de laiton, avec le léger flottement d'un objet suspendu à la lumière des flammes. */ .modal-content { position: relative; border-radius: 5px; padding: 24px 26px; max-width: 420px; text-align: left; max-height: 80vh; overflow-y: auto; color: var(--sk-cream); background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 18px 40px rgba(0, 0, 0, 0.65); } /* Fin de partie : le lettrage peint annonce l'écran. Il tient la moitié de la hauteur du verdict, assez pour qu'on voie de quel jeu on sort d'une capture d'écran ; le nom du vainqueur reste ce qu'on lit en premier parce qu'il est écrit, pas parce que le logo s'efface. */ .sk-end-logo { display: block; width: 300px; height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7)); } .modal-content h2, #sk-end-title { margin-top: 0; margin-bottom: 14px; text-align: center; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.34rem; color: var(--sk-cream); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } .modal-content ol { padding-left: 20px; line-height: 1.62; font-family: 'Spectral', Georgia, serif; font-size: 0.92rem; color: var(--sk-cream-2); } .modal-content ol li { margin-bottom: 9px; padding-left: 4px; } .modal-content ol li::marker { color: var(--sk-brass); font-family: 'Cinzel', Georgia, serif; font-weight: 700; } .modal-content strong { color: var(--sk-cream); font-weight: 600; } .modal-content .btn { display: block; margin: 20px auto 0; } .reconnect-overlay { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 70; background: linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: 0 0 0 1px var(--sk-brass-lo), 0 6px 16px rgba(0, 0, 0, 0.6); border-radius: 3px; padding: 7px 18px; font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--sk-cream); } /* --- Écran de jeu : table ovale façon poker --- */ /* ===================================================================== LE BANDEAU DU HAUT — bois bordé de laiton, enseigne de taverne, et la progression des manches en rangée de doublons. C'est le seul endroit permanent de l'écran : il porte donc ce qui doit être vrai à chaque instant — où on en est dans la partie, et où on en est de son propre contrat. La pastille « Manche 1/10 » a disparu : elle doublonnait la rangée. ===================================================================== */ .sk-game-header { position: relative; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 16px 10px; margin-bottom: 10px; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.14), 0 0 0 1px var(--sk-brass-lo), 0 3px 0 rgba(0, 0, 0, 0.55), 0 12px 26px rgba(0, 0, 0, 0.5); } /* Clous de laiton du bandeau, sur toute sa longueur. */ .sk-game-header::before { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 5px; z-index: 3; background-image: radial-gradient(circle, var(--sk-brass-hi) 0 22%, var(--sk-brass-lo) 34%, transparent 44%); background-size: 52px 5px; background-repeat: repeat-x; opacity: 0.45; } .sk-topbar-side { display: flex; align-items: center; gap: 12px; min-width: 0; } .sk-topbar-side--end { justify-content: flex-end; } .sk-game-header .btn-link { margin: 0; flex-shrink: 0; } /* La consigne de manche reste dans le DOM pour les lecteurs d'écran (elle est en aria-live) : la rangée de doublons la dit visuellement. */ .sk-round-indicator { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* La piste et le cartouche décrivent la même information : ils forment un seul objet, sans l'espace de grille qui les séparait auparavant. */ .sk-round-progress { display: flex; align-items: center; justify-self: center; min-width: 0; gap: 2px; } /* --- Enseigne de taverne : le lettrage peint, sur une ligne ---------- Hauteur fixe, largeur déduite du ratio (2.75) : 30 px de haut, 82 de large, la barre garde sa hauteur d'origine. */ .sk-sign { display: block; height: 30px; width: auto; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); } /* --- La rangée de doublons ------------------------------------------ */ /* --- Cartouche de la manche en cours : cartes + encoches de plis ------ */ /* Le cartouche de la manche : la banderole peinte, aux deux bouts taillés en pointe. Tranches 0/154 : seuls les biseaux restent à taille fixe, le corps s'étire avec le libellé. Le biseau a été mesuré sur l'image (la hauteur opaque cesse de grimper à 148 px), pas estimé à l'oeil. */ .sk-round-scroll { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; border-style: solid; border-width: 0 17px; border-image: url('assets/skin/plaque-manche.webp') 0 154 fill / 0 17px stretch; padding: 5px 4px 6px; justify-self: center; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6)); } .sk-round-scroll .sk-scroll-t { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: none; color: var(--sk-parch-ink); white-space: nowrap; text-align: center; } /* --- Encoches : une par pli. La forme porte le sens, pas la couleur --- */ .sk-notches { display: flex; gap: 3px; justify-content: center; align-items: center; } .sk-notches i { width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: rgba(42, 27, 12, 0.16); box-shadow: inset 0 0 0 1px rgba(42, 27, 12, 0.38); } .sk-notches i.is-won { background: linear-gradient(160deg, var(--sk-brass-hi), var(--sk-brass-lo)); box-shadow: inset 0 0 0 1px rgba(42, 27, 6, 0.6); } .sk-notches i.is-now { background: var(--sk-parch-hi); box-shadow: 0 0 0 1px var(--sk-wine), 0 0 7px rgba(156, 42, 34, 0.6); } /* Un pli en trop : l'encoche est barrée. Un contrat perdu doit se voir sans percevoir la teinte. */ .sk-notches i.is-over { position: relative; background: var(--sk-wine); box-shadow: inset 0 0 0 1px rgba(42, 27, 12, 0.5); } .sk-notches i.is-over::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--sk-parch-hi); } /* Sur bois plutôt que sur parchemin, les encoches s'inversent. */ .sk-notches--dark i { background: rgba(232, 206, 146, 0.12); box-shadow: inset 0 0 0 1px rgba(232, 206, 146, 0.5); } .sk-notches--dark i.is-won { background: linear-gradient(160deg, var(--sk-brass-hi), var(--sk-brass-lo)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); } /* ===================================================================== LES DEUX PLAQUES DE LA MAIN — « Mon contrat » à gauche de l'éventail, « Gain si contrat rempli » à droite. Une plaque de laiton vissée sur le bois, du même vocabulaire que l'interrupteur du salon : un creux sombre, un filet de laiton, et rien d'autre. Elles ne portent pas de parchemin — le parchemin est la matière de la colonne de droite, qui se lit ; ces deux-là se regardent du coin de l'œil pendant qu'on choisit une carte. ===================================================================== */ .sk-plaque { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 10px 9px; border-radius: 3px; border: 1px solid var(--sk-brass-lo); background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.34)), linear-gradient(180deg, rgba(29, 18, 9, 0.88), rgba(12, 7, 3, 0.92)); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.14), 0 2px 0 rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.55); text-align: center; } .sk-plaque-k { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.56rem; letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; color: var(--sk-brass); } /* Jamais « 1/0 » : le même glyphe voulait dire « annonce/plis » dans l'historique et « plis/annonce » sur la table. On écrit la phrase. */ .sk-mine-v, .sk-round-tricks-v { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.02rem; color: var(--sk-cream); white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); } /* Rouge tant que le contrat n'est pas tenu, vert dès qu'il l'est. Le filet et la lueur portent la couleur, pas le fond : un fond rouge sous une rangée d'encoches de laiton les aurait rendues illisibles, et la plaque est posée sur du bois sombre où un halo se voit de loin. */ .sk-mine--rate { border-color: #7d2b22; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.1), inset 0 0 12px rgba(125, 43, 34, 0.34), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(156, 42, 34, 0.34); } .sk-mine--rate .sk-mine-v { color: #e5a79e; } .sk-mine--tenu { border-color: #2f7a4e; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.1), inset 0 0 12px rgba(47, 122, 78, 0.34), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(47, 122, 78, 0.4); } .sk-mine--tenu .sk-mine-v { color: #9bd79e; } /* Total des annonces de la table : bleu quand elle en promet moins qu'il n'y a de plis, vert quand le compte tombe juste, rouge quand elle en promet plus qu'il n'en existe. Même plaque que le contrat : seule la teinte du filet change. */ .sk-round-tricks--under { border-color: #2d6598; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.1), inset 0 0 12px rgba(45, 101, 152, 0.34), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(45, 101, 152, 0.4); } .sk-round-tricks--under .sk-round-tricks-v { color: #9bc9ed; } .sk-round-tricks--exact { border-color: #2f7a4e; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.1), inset 0 0 12px rgba(47, 122, 78, 0.34), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(47, 122, 78, 0.4); } .sk-round-tricks--exact .sk-round-tricks-v { color: #9bd79e; } .sk-round-tricks--over { border-color: #7d2b22; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.1), inset 0 0 12px rgba(125, 43, 34, 0.34), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(156, 42, 34, 0.34); } .sk-round-tricks--over .sk-round-tricks-v { color: #e5a79e; } /* Le gain : un seul chiffre, celui qu'on vient chercher. Le détail des composantes tient dessous en petit, et ne s'écrit que s'il y a autre chose que le socle du contrat (voir renderGain). */ .sk-gain-v { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.32rem; line-height: 1; color: var(--sk-brass-hi); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); } .sk-gain-detail { display: flex; flex-direction: column; gap: 1px; font-family: 'Spectral', Georgia, serif; font-size: 0.62rem; line-height: 1.3; color: var(--sk-cream-3); } .sk-gain-detail:empty { display: none; } /* Contrat dépassé : le gain n'est plus atteignable. Le chiffre reste lisible — c'est bien ce que la manche AURAIT rapporté, et le voir barré dit mieux ce qu'on vient de perdre qu'un cadre vide — mais il est barré et la plaque se retire d'un cran, pour ne plus rien promettre. */ .sk-gain--perdu { opacity: 0.6; } .sk-gain--perdu .sk-gain-v { color: var(--sk-cream-3); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(224, 154, 144, 0.85); } /* --- Paliers de dégradation ----------------------------------------- Budget mesuré à 1000 px : gauche 262 + rangée 389 + droite 300 + 64 de gouttières et de marges. L'enseigne écrite tombe donc la première. */ @media (max-width: 1239px) { .sk-sign { height: 22px; } } /* Sous 1000 px la barre n'a plus la place du lettrage : les 60 px qu'il occupe débordait de sa colonne. Restent le bouton Quitter, le cartouche de la manche et le contrat. */ @media (max-width: 999px) { .sk-sign { display: none; } } @media (max-width: 1099px) { .sk-chain { height: 28px; } .sk-chain-bout--g { width: calc(28px * 99 / 171); } .sk-chain-bout--d { width: calc(28px * 95 / 171); } .sk-chain-alveole { width: calc(28px * 147 / 171); } .sk-round-scroll .sk-scroll-t { font-size: 0.52rem; letter-spacing: 0.06em; } .sk-round-scroll { padding: 3px 8px 4px; } } /* Sous 760 px, la rangée devient une règle d'encoches : on garde le chemin parcouru, on abandonne les chiffres. */ @media (max-width: 759px) { .sk-game-header { grid-template-columns: auto 1fr; gap: 6px 8px; padding: 6px 10px 9px; } .sk-topbar-side { grid-row: 1; } .sk-topbar-side--end { grid-column: 2; } /* Sur téléphone, la progression et son cartouche restent ensemble sur leur propre ligne. */ .sk-round-progress { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .sk-chain { height: 24px; } .sk-chain-bout--g { width: calc(24px * 99 / 171); } .sk-chain-bout--d { width: calc(24px * 95 / 171); } .sk-chain-alveole { width: calc(24px * 147 / 171); } .sk-round-scroll { padding: 2px 6px 3px; } .sk-round-scroll .sk-scroll-t { display: none; } } .sk-play-area { display: flex; gap: 14px; align-items: stretch; } /* ===================================================================== LA PISTE DES MANCHES — deux embouts et une alvéole par manche. La barre peinte a été débitée en trois pièces parce que son dessin portait dix alvéoles gravées : une partie en 5 manches en aurait laissé cinq vides. Chaque pièce garde son propre rapport, donc rien ne se déforme, quelle que soit la longueur de la partie. ===================================================================== */ .sk-chain { display: flex; align-items: stretch; justify-content: center; min-width: 0; height: 34px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); } .sk-chain-bout, .sk-chain-alveole { display: block; flex: 0 0 auto; height: 100%; background: center / 100% 100% no-repeat; } /* Les rapports viennent des découpes : 99x171, 147x171, 95x171. */ .sk-chain-bout--g { width: calc(34px * 99 / 171); background-image: url('assets/skin/barre-bout-g.webp'); } .sk-chain-bout--d { width: calc(34px * 95 / 171); background-image: url('assets/skin/barre-bout-d.webp'); } .sk-chain-alveole { position: relative; width: calc(34px * 147 / 171); background-image: url('assets/skin/barre-cellule.webp'); } /* Le doublon s'assied dans son creux : 72 % de la largeur de l'alvéole. */ .sk-dbl { position: absolute; top: 50%; left: 50%; width: 72%; transform: translate(-50%, -50%); display: block; } /* Les manches à venir : le même or, resté dans l'ombre de la barre. */ .sk-dbl--futur { filter: brightness(0.55) saturate(0.85); } /* La manche en cours respire — la seule chose qui bouge dans la piste. */ .sk-dbl--now { width: 88%; animation: sk-dbl-now 2.6s ease-in-out infinite; } @keyframes sk-dbl-now { 0%, 100% { filter: drop-shadow(0 0 3px rgba(232, 206, 146, 0.34)); } 50% { filter: drop-shadow(0 0 8px rgba(232, 206, 146, 0.72)); } } @media (prefers-reduced-motion: reduce) { .sk-dbl--now { animation: none; } } /* ===================================================================== LA TABLE DE TAVERNE — une seule image peinte, vue en légère plongée : le feutre, le cordage, les planches ferrées et le décor de bord y sont déjà. Le CSS ne fabrique plus la matière, il tient le cadre. D'où le ratio figé et le fond posé en `100% 100%` : l'image épouse exactement la boîte, et les fractions du trapèze du feutre (surFeutre() dans skullking.js) restent vraies à toutes les tailles. Un `cover` recadrerait, et toute la géométrie des sièges tomberait à côté. ===================================================================== */ .sk-table { position: relative; flex: 0 1 auto; width: 100%; min-width: 0; max-width: 760px; margin-inline: auto; aspect-ratio: 1369 / 1149; border-radius: 10px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6); } /* Mon tour : la bougie monte sur le feutre. Un halo, pas un cerclage — un rectangle inscrit trahirait la plongée. C'est le plus grand objet de l'écran, on le voit en vision périphérique sans lire la consigne. */ .sk-table::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(46% 30% at 50% 48%, rgba(232, 206, 146, 0.26) 0%, rgba(232, 206, 146, 0.1) 46%, transparent 76%); } .sk-table--mine::after { opacity: 1; animation: sk-breathe-table 2.4s ease-in-out infinite; } @keyframes sk-breathe-table { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Le bandeau du centre a quitté le milieu du feutre : depuis que les cartes se posent contre leur joueur, ma carte à moi monte du bas et vient justement s'arrêter au centre. Il se cale donc dans le tiers haut, la seule bande que la couronne laisse libre quel que soit l'effectif — sous le siège du haut quand il y en a un, au-dessus de ma carte toujours. */ .sk-table-center { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); width: 84%; /* Au-dessus des cartes, y compris de la gagnante (5). Le centre ne portait qu'une ligne de commentaire, qu'on pouvait laisser passer derrière un pli ; il porte maintenant le verdict, et une carte posée dessus en mangeait la moitié. Ce qui est écrit au centre se lit toujours — d'où aussi le fond posé sous le verdict, pour qu'il tienne par-dessus une illustration. */ z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Chaque carte du pli est posée devant son joueur (position calculée en JS entre son siège et le centre) : le pli forme un cercle, on voit donc immédiatement à qui appartient la carte gagnante. */ /* --sk-depth : la mise à l'échelle selon la profondeur, posée par renderTrick. Une carte du fond du tapis est plus loin, donc plus petite — sans quoi elle paraît deux fois plus grosse que celle du premier plan. */ .sk-trick-card { position: absolute; /* --sk-depth : la profondeur, posée par renderTrick. --sk-gagne : le cran de hauteur de la carte qui mène. Les deux se multiplient — une carte du fond qui mène reste une carte du fond. */ transform: translate(-50%, -50%) scale(calc(var(--sk-depth, 1) * var(--sk-gagne, 1))); z-index: 3; animation: sk-card-drop 0.25s cubic-bezier(0.34, 1.4, 0.64, 1); transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); } @keyframes sk-card-drop { from { transform: translate(-50%, -20%) scale(calc(var(--sk-depth, 1) * 0.7)); opacity: 0; } to { transform: translate(-50%, -50%) scale(calc(var(--sk-depth, 1) * var(--sk-gagne, 1))); opacity: 1; } } /* Qui mène le pli. Le halo seul suffisait quand les cartes se rejoignaient au centre : à cinq cartes voisines, un liseré un peu plus clair se remarquait. Réparties chacune contre son joueur, elles occupent maintenant toute la scène, et ce halo-là se cherchait. Il lui faut un cerclage de laiton et un cran de hauteur — c'est la question qu'on se pose à chaque carte posée (« est-ce que ça passe devant ? »), elle mérite de se lire de loin. */ .sk-trick-card--leading { z-index: 4; --sk-gagne: 1.07; filter: drop-shadow(0 0 18px rgba(232, 206, 146, 0.5)); } .sk-trick-card--leading .sk-card { box-shadow: 0 0 0 3px var(--sk-brass), 0 0 0 4px rgba(20, 12, 5, 0.85), 0 10px 22px rgba(0, 0, 0, 0.6); } /* Manche 1, pendant le jeu : la carte est sur le tapis depuis l'annonce mais son porteur ne l'a pas encore posée. Elle est là, lisible, à sa place — le tapis ne se vide plus entre l'annonce et le jeu — mais elle ne compte pas encore dans le pli. Un cran plus petite et à peine effacée : assez pour que « déjà tombée » se distingue de « va tomber », pas assez pour qu'on croie qu'il lui manque quelque chose. */ /* TENUE : la carte est encore en main de son porteur. Un cran plus petite, serrée contre son médaillon (la position vient de renderTrick) et penchée comme une carte qu'on tient — l'angle dépend du côté de la table où l'on est assis, sinon la couronne resterait raide. C'est ce que la POSE redresse, et c'est ce qui fait qu'on voit chacun abattre sa carte au lieu de voir le pli apparaître d'un bloc. Posée dès l'annonce, où personne n'a encore joué : ainsi rien ne saute au changement de phase. */ .sk-trick-card--tenue { --sk-gagne: 0.82; /* Derrière les cartes déjà tombées : ce qui est joué prime sur ce qui est encore tenu, et les deux se frôlent. */ z-index: 2; } .sk-trick-card--tenue .sk-card { transform: rotate(var(--sk-tenue, 0deg)); box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.7), 0 3px 10px rgba(0, 0, 0, 0.55); } /* LA REPRISE. À la fin de l'annonce, chacun reprend sa carte en main : elle rentre dans le siège de son porteur — le chemin est relevé par renderTrick au moment où elle est placée — en rapetissant et en s'effaçant. Les cartes partent décalées d'un souffle l'une sur l'autre (le retard est posé en JS), sinon six d'entre elles s'évanouiraient d'un bloc, ce qui se lit comme un défaut d'affichage plutôt que comme un geste. Elle n'est plus une `.sk-trick-card` à ce moment-là : cette classe est balayée à chaque rendu, et le rendu suivant arrive avant la fin de l'animation. D'où la reprise, ici, de ce qui la positionne. */ .sk-carte-reprise { position: absolute; /* Le même plan que la carte qu'elle était : elle frôle le siège de son porteur en y rentrant, et rien ne justifie qu'elle passe dessous pour s'en aller. */ z-index: 3; pointer-events: none; animation: sk-reprise 0.48s cubic-bezier(0.45, 0, 0.75, 0.5) forwards; } @keyframes sk-reprise { from { transform: translate(-50%, -50%) scale(calc(var(--sk-depth, 1) * var(--sk-gagne, 1))); opacity: 1; } to { transform: translate(calc(-50% + var(--sk-reprise-x, 0px)), calc(-50% + var(--sk-reprise-y, 0px))) scale(calc(var(--sk-depth, 1) * 0.5)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* Le départ reste, il n'est plus raconté : la carte s'efface sur place. */ .sk-carte-reprise { animation: sk-reprise-sobre 0.2s linear forwards; } @keyframes sk-reprise-sobre { to { opacity: 0; } } } /* Mises hors course par le Monstre Marin actif. Le Kraken éteint toutes les autres cartes du pli ; la Baleine blanche ou la Raie Tachetée annulent les cartes spéciales. Un Pirate, un Skull King, une Sirène posés sous elles ne valent plus rien, et rien ne le disait — un joueur a vu son Pirate ne rien remporter et a cherché la faute ailleurs. Le voile est froid et il éteint : la couleur part (le laiton et le rouge des cadres peints sont ce qui accroche l'œil), la carte s'assombrit et recule d'un cran. Le liseré d'étain la referme, la même couleur que la Fuite — ce qu'elle est devenue, une carte qui ne peut plus gagner. Pas de rature ni de croix : la carte reste lisible, elle n'est pas annulée du pli, elle est hors course. On doit pouvoir la lire pour comprendre ce qu'on vient de perdre. */ .sk-trick-card--neutralisee { z-index: 2; --sk-gagne: 0.94; } .sk-trick-card--neutralisee .sk-card { filter: grayscale(0.72) brightness(0.62) contrast(0.94); box-shadow: 0 0 0 2px rgba(150, 158, 166, 0.5), 0 0 0 3px rgba(12, 14, 16, 0.75), 0 6px 14px rgba(0, 0, 0, 0.55); } /* Le voile passe DEVANT le laiton du meneur, et c'est voulu. Une carte peut porter les deux : quand le monstre détruit le pli, `resolveTrick` renvoie `leaderIdx: 0` — la première carte posée, qui mènera le pli suivant sans avoir rien gagné, et qui est souvent hors course elle-même. Lui laisser le cerclage de laiton la ferait passer pour la gagnante d'un pli que personne ne remporte. Le voile étant déclaré après, son étain et son échelle l'emportent : il suffit de ne pas déplacer ce bloc au-dessus du meneur. */ /* Le pli est tombé. La carte qui l'emporte se hausse d'un cran de plus et son laiton respire : le bandeau du centre nomme le vainqueur, la carte dit laquelle c'était. Les deux ensemble, parce qu'un nom ne désigne pas une carte et qu'une carte qui brille ne se rattache pas à un joueur. */ .sk-trick-card--gagnante { z-index: 5; --sk-gagne: 1.16; } .sk-trick-card--gagnante .sk-card { animation: sk-carte-gagnante 1.5s ease-in-out infinite; } @keyframes sk-carte-gagnante { 0%, 100% { box-shadow: 0 0 0 3px var(--sk-brass), 0 0 0 4px rgba(20, 12, 5, 0.85), 0 10px 22px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 0 4px var(--sk-brass-hi), 0 0 0 5px rgba(20, 12, 5, 0.85), 0 0 26px rgba(255, 226, 150, 0.7), 0 10px 22px rgba(0, 0, 0, 0.6); } } @media (prefers-reduced-motion: reduce) { .sk-trick-card--gagnante .sk-card { animation: none; } } /* LE VERDICT DU PLI. Quand le pli tombe, le centre ne commente plus : il tranche. La pièce du vainqueur d'abord — c'est le même jeton qu'à son siège, sur la roue et dans le récap, et il se reconnaît avant tout mot — puis son nom, gravé en Cinzel, dans SA couleur. Le reste de la phrase reste en crème : c'est le nom qu'on cherche, pas le verbe. Il arrive en même temps que le ramassage des cartes, et par le même mouvement : monter d'un cran en se posant. Les deux disent la même chose au même instant, l'un par le geste, l'autre par le nom. */ .sk-trick-verdict { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 18px 8px; border-radius: 14px; background: radial-gradient(60% 70% at 50% 50%, rgba(4, 9, 11, 0.72), rgba(4, 9, 11, 0) 78%); /* L'entrée est jouée en JS (voir playTrickWinAnimation), pas ici. En CSS elle ne se déclenchait qu'une fois par chargement de page : le verdict est masqué puis réaffiché dans le MÊME passage de renderTrick, et le navigateur, qui ne recalcule rien entre les deux, ne voyait aucun changement à animer. Le pli suivant l'affichait donc d'un coup. */ } .sk-trick-verdict.hidden { display: none; } .sk-verdict-piece .sk-piece-img { display: block; width: 46px; height: 46px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75)); } .sk-verdict-texte { margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sk-cream-2); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95); } /* Le nom porte la couleur de la pièce, posée en style par le JS. Le halo doré autour, lui, ne dépend pas du joueur : c'est celui du laiton, le même que sur le cerclage de la carte gagnante. */ .sk-verdict-nom { font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 226, 150, 0.4); } /* Le commentaire du pli est un ruban de parchemin posé sur le feutre. */ .sk-trick-caption { margin: 0; min-height: 1.1em; font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 0.82rem; color: var(--sk-cream-2); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } /* --- MARCHER SUR LA PLANCHE : QUI PASSE PAR-DESSUS BORD -------------- Même cadre que le choix de la Tigresse, et pour la même raison : le geste décide de ce qu'un autre joueur a joué, et rien ne le reprend. Les Pirates du pli y sont montrés EN GRAND, chacun sous le nom de qui l'a posé — la carte répond à « lequel », le nom à « à qui ». ------------------------------------------------------------------- */ .sk-plank-choice { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 8, 10, 0.76); } .sk-plank-choice.hidden { display: none; } .sk-plank-cadre { position: relative; max-width: 620px; max-height: 100%; overflow-y: auto; padding: 20px 26px 18px; border-radius: 5px; text-align: center; color: var(--sk-cream); background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 18px 40px rgba(0, 0, 0, 0.65); /* Centré sur le plateau comme les autres messages du jeu. */ translate: var(--sk-plateau-dx, 0px) var(--sk-plateau-dy, 0px); } .sk-plank-titre { margin: 0 0 14px; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.16rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } /* Les cibles s'enroulent : à neuf joueurs le pli peut porter cinq Pirates, plus la Tigresse jouée comme Pirate. */ .sk-plank-cibles { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; } .sk-plank-cible { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 10px; border: 0; border-radius: 4px; cursor: pointer; background: none; transition: background 0.16s ease; } /* La carte est le bouton : elle se soulève et s'allume au survol, le nom ne fait que dire à qui elle est. Rouge vif et pas le grenat des Pirates — c'est une mise en joue, elle ne doit pas se confondre avec le bandeau de la carte qu'elle vise. */ .sk-plank-cible .sk-card { --sk-w: clamp(84px, 12vw, 116px); transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease; } .sk-plank-cible:hover .sk-card, .sk-plank-cible:focus-visible .sk-card { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 0 3px #d6543d, 0 0 0 4px rgba(20, 12, 5, 0.85), 0 0 22px rgba(214, 84, 61, 0.55), 0 14px 28px rgba(0, 0, 0, 0.6); } .sk-plank-cible:hover, .sk-plank-cible:focus-visible { background: rgba(255, 236, 196, 0.05); } .sk-plank-cible:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 2px; } .sk-plank-nom { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } .sk-plank-note { margin: 12px 0 0; font-family: 'Spectral', Georgia, serif; font-size: 0.76rem; color: var(--sk-cream-2); opacity: 0.68; } /* Écran bas : les portraits rapetissent plutôt que de sortir du cadre. */ @media (max-height: 560px) { .sk-plank-cadre { padding: 12px 20px 10px; } .sk-plank-titre { margin-bottom: 8px; font-size: 1rem; } .sk-plank-cible .sk-card { --sk-w: clamp(64px, 16vh, 96px); } .sk-plank-note { margin-top: 8px; } } /* --- LE KRAKEN ENGLOUTIT LE PLI ------------------------------------- Le geste est piloté en JS (playKrakenAnimation) : les distances dépendent de la position réelle des cases, qui change à chaque pli. Il ne reste ici que ce qui rend le retournement possible — un tas de cartes qui se retourne doit montrer un DOS, pas son propre dessin en miroir. */ .sk-trick-card--kraken { /* Au-dessus de tout ce qui reste sur le feutre : c'est lui qui avale. */ z-index: 7; } /* Le dos peint, posé par-dessus le dessin et masqué jusqu'à la tranche : au milieu du demi-tour, la case est écrasée à 2 % de sa largeur, on échange ce qui est visible et le tas se redéploie face contre table. Même dos que partout ailleurs, et il porte déjà son encadrement doré. */ .sk-kraken-dos { position: absolute; inset: 0; border-radius: var(--sk-radius); background: #16110d var(--sk-dos) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.7), 0 10px 22px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; } /* Le verdict d'un pli englouti attend que le tas ait fini de s'effacer. Écrit tout de suite, il se serait retrouvé sous les cartes qui convergent vers le centre — et c'est précisément ce qu'on ne veut pas. `backwards` le tient invisible pendant le délai, sans avoir à le poser puis à le retirer depuis le JS. */ .sk-trick-caption--apres-kraken { /* --sk-attente : posé par renderTrick, il vaut le temps que met le tas à finir de s'effacer. `backwards` tient la ligne invisible jusque-là. */ animation: sk-verdict-englouti 0.4s ease-out var(--sk-attente, 1.6s) backwards; } /* Et elle s'écrit LÀ OÙ le tas vient de disparaître, pas dans le bandeau du centre : celui-ci est posé dans le tiers haut du tapis, où il passe sur les noms des sièges du fond. Le centre du feutre, lui, est vide — le Kraken vient précisément de le vider. En unités du tapis (cqh) parce que la position se déduit de la projection du plateau : v = 0,5 tombe à 48,1 % de sa hauteur, le bandeau est à 27 %, reste 21,1 % à descendre. */ .sk-scene .sk-trick-caption--apres-kraken { --sk-descente: 21.1cqh; transform: translateY(var(--sk-descente)); } @keyframes sk-verdict-englouti { from { opacity: 0; transform: translateY(calc(var(--sk-descente, 0px) + 7px)); } to { opacity: 1; transform: translateY(var(--sk-descente, 0px)); } } @media (prefers-reduced-motion: reduce) { .sk-trick-caption--apres-kraken { animation: none; } } /* --- Sièges : médaillons de capitaine en laiton --------------------- */ .sk-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; z-index: 2; } .sk-seat-label { position: relative; display: flex; align-items: center; gap: 5px; padding: 2px 9px 3px; border-radius: 2px; background: rgba(6, 14, 11, 0.8); box-shadow: 0 0 0 1px rgba(184, 137, 53, 0.4); max-width: 100%; } .sk-seat-name { font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--sk-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-seat-bid { font-family: 'Bitter', Georgia, serif; font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sk-brass-hi); flex-shrink: 0; } /* Qui a la main : le laiton s'allume sur son étiquette. Le reflet clair posé sous les lettres n'appartient qu'à CETTE plaque — il n'a de sens que sous une encre sombre gravée dans du métal. Partout où la plaque est retirée (la scène peinte, ≥1000px), il doit l'être aussi : voir la règle qui l'annule là-bas. */ .sk-seat--turn .sk-seat-label { background: linear-gradient(180deg, #eedca8, var(--sk-brass) 56%, var(--sk-brass-lo)); box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.85), 0 0 16px rgba(232, 206, 146, 0.5); } .sk-seat--turn .sk-seat-name, .sk-seat--turn .sk-seat-bid { color: #2a1b06; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.4); } .sk-seat--disconnected { opacity: 0.42; } /* Le jeton d'entame — le seul jeton du tapis. Frère du médaillon, jamais un enfant de l'étiquette : posé sur le pseudo, il le rendait illisible ; au coin haut-droit du médaillon, il ne recouvre rien qui se lise. Sa taille suit le feutre comme le reste du siège — en pixels fixes, il devenait un grain de poussière sur un grand écran. Il remplace la paire donneur (« D ») / entame (« 1 ») : deux pastilles au même bord du même médaillon, l'une laiton l'autre étain, se lisaient l'une pour l'autre, et celle du donneur ne servait à personne. Restant seul, il peut être plus gros et plein laiton — c'est un repère qu'on cherche du regard à chaque pli, il doit se trouver sans être cherché. Le halo doré du siège, lui, ne dit toujours qu'une chose : « à lui d'agir, maintenant ». */ .sk-seat-leader { position: absolute; top: -4%; right: 2%; z-index: 4; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; /* Plein laiton, pas ivoire : un dégradé qui n'atteignait la couleur qu'aux deux tiers du disque donnait, à cette taille, une pastille d'os. Le reflet tient donc dans le premier dixième, le laiton occupe le milieu, et le bord se ternit comme celui d'une pièce usée. */ background: radial-gradient(circle at 32% 26%, #FFEFC2 0 6%, #E7C273 24%, var(--sk-brass) 52%, #8A6524 78%, #46320F 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0.34cqw rgba(16, 9, 3, 0.92), 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.75), 0 0 2.4cqw rgba(255, 226, 150, 0.6); } /* La rose est gravée : encre très sombre, et le seul reflet passe SOUS le trait — au-dessus, il délavait le dessin, comme sur les plaques de laiton des boutons. */ .sk-seat-leader svg { width: 66%; height: 66%; fill: #1E1305; filter: drop-shadow(0 0.14cqw 0 rgba(255, 246, 220, 0.55)); } /* Pile de distribution au centre de la table, et cartes volantes qui en sortent vers chaque siège en début de manche (voir maybeAnimateDeal) : même dos peint que les cartes cachées. À 34 px de large le lettrage n'est plus lisible, mais c'est la bonne matière et la bonne couleur — c'est tout ce qu'on demande à une pile vue de loin. */ .sk-deck-pile, .sk-flying-card { position: absolute; width: 34px; height: 48px; border-radius: 4px; background: #16110d var(--sk-dos) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.8), inset 0 0 0 2px rgba(184, 137, 53, 0.3); } .sk-deck-pile { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; animation: sk-card-drop 0.25s cubic-bezier(0.34, 1.4, 0.64, 1); } .sk-flying-card { z-index: 6; pointer-events: none; } .sk-seat-count { font-family: 'Bitter', Georgia, serif; font-size: 0.62rem; font-weight: 600; color: var(--sk-cream-2); background: rgba(6, 14, 11, 0.7); box-shadow: 0 0 0 1px rgba(184, 137, 53, 0.3); border-radius: 2px; padding: 0 5px; flex-shrink: 0; } /* ===================================================================== LE PANNEAU DE DROITE — une planche de noyer portant trois parchemins punaisés : l'objectif scellé à la cire, le registre de bord réglé, et le carnet du capitaine où l'on discute. Il ne porte plus la progression des manches (remontée dans le bandeau) : la place libérée va au carnet, qui grandit désormais au lieu de rétrécir quand la table est petite. ===================================================================== */ /* ===================================================================== LA PLANCHE LATÉRALE — la colonne de droite est une planche de bois ferrée, posée contre la cloison. C'est elle qui fait frontière avec le plateau peint : sans elle, les deux images se touchaient sans qu'on sache où l'une finissait. Le parchemin y est cloué, le carnet posé dessus, le carré du chat accroché en bas. En 9 tranches : elle s'allonge avec le nombre de joueurs, et seuls ses quatre coins ferrés restent à taille fixe. ===================================================================== */ .sk-scoreboard { position: relative; width: 322px; flex-shrink: 0; padding: 0 2px 2px; filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.6)); } /* Punaise de laiton en haut de la planche. */ .sk-scoreboard::after { content: ''; position: absolute; top: 6px; left: 50%; margin-left: -5px; width: 11px; height: 11px; z-index: 4; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fbefcc, var(--sk-brass) 52%, #5a4318 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(16, 9, 3, 0.6); } /* Le registre de bord : lignes fines réglées, chiffres alignés à la plume. */ /* Le carnet peint : reliure de cuir en haut (tranche de 255 px), papier ligné au centre. Le titre s'écrit SUR la reliure — d'où la marge négative qui le remonte dans la bordure. */ .sk-carnet { position: relative; margin: 4px 0 14px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); transform: rotate(0.3deg); } .sk-carnet .sk-side-title { position: absolute; position: static; margin: 0 0 5px; text-align: center; color: #5A3E19; text-shadow: none; } /* Le registre s'ouvre d'un clic : à la taille de la colonne il ne porte que les médaillons et les chiffres, et « qui est ce bronze-là » est justement la question qu'on ne peut pas y répondre. La main du curseur est tout ce qui l'annonce — un bouton posé sur la page peinte y ferait une pièce rapportée. */ .sk-scoreboard-rows { display: flex; flex-direction: column; gap: 0; padding: 0; cursor: pointer; } /* Au survol, la page se réchauffe à peine : c'est un papier qu'on touche du doigt, pas un bouton qui s'allume. */ .sk-scoreboard-rows:hover { background: rgba(90, 67, 24, 0.07); } .sk-scoreboard-rows:focus-visible { outline: 2px solid rgba(90, 67, 24, 0.55); outline-offset: 1px; } .sk-score-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 3px 4px; border-bottom: 1px solid rgba(90, 67, 24, 0.22); font-family: 'Bitter', Georgia, serif; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: #33240f; } .sk-score-row:last-child { border-bottom: 0; } /* Ma ligne est marquée à l'encre rouge du registre, pas par un fond plein : sur un parchemin, un aplat lirait comme une rature. */ .sk-score-row--me { color: #5a1512; font-weight: 700; } .sk-score-row-name { display: flex; align-items: center; gap: 5px; font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le médaillon tient la place du pseudo. Assez grand pour qu'on distingue la figure gravée (une ancre d'un gouvernail) et pas seulement l'émail, assez petit pour ne pas creuser la ligne du registre. */ /* Le médaillon du registre, cerclé de la couleur du joueur — la même qui porte son pseudo, son siège et le bout de sa courbe. Le cerclage est posé sur le SPAN et l'ombre sur l'image : une `filter` sur le span mangerait le `box-shadow` avec elle, les deux se peignent dans le même passage. Deux anneaux : la couleur, puis un cheveu d'encre autour. Sans le second, un cerclage clair posé à même le papier n'avait pas de bord et flottait ; avec, il se lit comme un émail serti, le vocabulaire des pièces. */ /* Les deux anneaux sont peints DEDANS, en `inset` : posés à l'extérieur en `box-shadow`, ils débordaient de la boîte du médaillon et se faisaient trancher net par le premier bord venu — l'`overflow` du nom, celui de la page du registre qui défile, la marge de la colonne. On voyait un cerclage carré d'un côté, plus rien de l'autre. Rien ne dépasse plus : la boîte s'agrandit de l'épaisseur des anneaux, la figure se rétrécit d'autant (le `padding` la retient), et le médaillon reste rond partout. L'ordre compte : le cheveu d'encre est listé en premier, donc peint par-dessus, et occupe le pixel le plus extérieur. */ .sk-score-row-piece { flex: 0 0 auto; box-sizing: border-box; width: 28px; height: 28px; padding: 3px; display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(53, 33, 8, 0.4), inset 0 0 0 3px var(--sk-piece-couleur, transparent); } .sk-score-row-piece .sk-piece-img { filter: drop-shadow(0 1px 1px rgba(53, 33, 8, 0.45)); } .sk-score-row--me .sk-score-row-piece { width: 31px; height: 31px; } .sk-score-row-total { font-weight: 700; color: #33240f; flex-shrink: 0; } .sk-score-row--me .sk-score-row-total { color: #5a1512; } /* --- Le registre agrandi ----------------------------------------------- La page de la colonne répond à « où j'en suis » ; ouverte, elle répond à « qui est où ». D'où les deux choses qu'elle ne peut pas porter à la taille du carnet : le pseudo écrit en toutes lettres à côté de sa pièce, et de l'air entre les lignes. Le classement est un feuillet de parchemin CERCLÉ DE LAITON posé dans la planche de bois — un cadre, comme la fiche des cartes et les panneaux de la colonne. Sans lui, les lignes flottaient sur le fond sombre de la modale et ne se lisaient plus comme un registre mais comme une liste. */ .sk-ranking-content { width: min(560px, 100%); max-width: min(560px, 100%); } .sk-grand-registre { max-height: 58vh; overflow-y: auto; padding: 6px 14px 8px; border-radius: 2px; background: linear-gradient(176deg, var(--sk-parch-hi), var(--sk-parch) 58%, var(--sk-parch-lo)); box-shadow: 0 0 0 1px var(--sk-brass), 0 0 0 2px rgba(30, 18, 6, 0.8), inset 0 2px 6px rgba(90, 67, 24, 0.22); color: var(--sk-parch-ink); } /* Six colonnes tenues à la même gouttière pour l'en-tête et les lignes : le rang, la pièce, le nom, les annonces, les plis, le score. Le nom est la seule qui s'étire — c'est la colonne pour laquelle on a ouvert la planche. Les largeurs sont en REM, pas en EM : l'en-tête est écrit plus petit que les lignes, et des `em` s'y résolvaient contre SA taille de police. Ses colonnes rétrécissaient donc d'un tiers pendant que celles des joueurs gardaient leur largeur — la grille n'était plus la même d'une ligne à l'autre, et « ANNONCES », trop long pour sa case rabougrie, débordait sur « PLIS ». */ .sk-grand-row { display: grid; grid-template-columns: 2.3rem 34px minmax(0, 1fr) 4.5rem 2.9rem 3rem; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(90, 67, 24, 0.22); font-family: 'Bitter', Georgia, serif; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: #33240f; } .sk-grand-row:last-child { border-bottom: 0; } /* L'en-tête est écrit à la plume, en petites capitales : il nomme les colonnes sans peser autant qu'une ligne de joueur. */ .sk-grand-row--tete { padding-bottom: 4px; border-bottom: 1px solid rgba(90, 67, 24, 0.45); font-family: 'Cinzel', Georgia, serif; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: #6b4c1d; } /* Les trois libellés de chiffres se calent à droite, comme les chiffres qu'ils annoncent : à gauche de leur case, ils flottaient à côté de la colonne qu'ils nomment. Le dernier `letter-spacing` d'un mot pousse un blanc après la dernière lettre — retiré ici, sinon l'aplomb à droite est faux d'un cheveu. */ .sk-grand-row--tete span:nth-child(n + 4) { margin-inline-end: -0.13em; text-align: right; white-space: nowrap; } /* Ma ligne, à l'encre rouge du registre — la même marque que dans la colonne, pour qu'on la retrouve d'un écran à l'autre. */ .sk-grand-row--me { color: #5a1512; font-weight: 700; } .sk-grand-rank { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.86rem; font-style: normal; letter-spacing: 0.04em; color: #6b4c1d; } .sk-grand-row--me .sk-grand-rank { color: #5a1512; } /* Mêmes anneaux peints dedans que dans la colonne, à l'échelle de la planche : c'est le même médaillon, il ne doit pas changer de vocabulaire en s'agrandissant. */ .sk-grand-piece { box-sizing: border-box; width: 34px; height: 34px; padding: 3px; display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(53, 33, 8, 0.4), inset 0 0 0 3px var(--sk-piece-couleur, transparent); } .sk-grand-piece .sk-piece-img { filter: drop-shadow(0 1px 1px rgba(53, 33, 8, 0.45)); } /* Le pseudo entier, sur une ligne. Tronqué s'il le faut, mais à 560 px de planche il faut un nom très long pour y arriver. */ .sk-grand-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; } /* Le joueur déconnecté est pâli, comme à son siège. */ .sk-grand-row--absent { opacity: 0.55; } .sk-grand-annonces, .sk-grand-plis, .sk-grand-total { text-align: right; white-space: nowrap; } .sk-grand-annonces, .sk-grand-plis { font-size: 0.86rem; color: #5c4620; } .sk-grand-total { font-weight: 700; font-size: 1.02rem; } /* --- Discussion agrandie ------------------------------------------- */ .sk-chat-livre { cursor: pointer; } .sk-chat-livre .sk-defiler { cursor: pointer; } .sk-chat-livre:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 3px; } .sk-chat-content { width: min(640px, 100%); max-width: min(640px, 100%); display: flex; flex-direction: column; overflow: hidden; } .sk-chat-content h2 { padding: 0 34px; } .sk-chat-modal-log { min-height: 230px; max-height: min(52vh, 520px); overflow-y: auto; padding: 12px 14px; border-radius: 3px; background: linear-gradient(180deg, #1a120b, #241a12); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), inset 0 2px 7px rgba(0, 0, 0, 0.65); } .sk-chat-modal-log .sk-chat-line { font-size: 0.96rem; line-height: 1.55; } .sk-chat-modal-form { margin-bottom: 14px; } .sk-chat-content > .btn { align-self: center; } /* --- Annonces, indicateur de tour, main en éventail --- */ /* La consigne du tour : une phrase, pas un signal. Ce qui prévient qu'on doit jouer, c'est le cerclage de la table et le liseré sous la main — cette ligne dit seulement QUOI faire, une fois le regard revenu. */ /* Posées sur le feutre, en haut, là où rien n'est joué : les cartes du pli descendent au centre et les sièges tiennent les bords. Le fond sombre n'est pas décoratif — sans lui le texte crème se perd dans le vert. */ .sk-turn-indicator { position: absolute; top: 34.4%; left: 43%; transform: translateX(-50%); z-index: 3; margin: 0; max-width: 76%; padding: 5px 16px; border-radius: 999px; background: rgba(6, 4, 2, 0.72); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.4); color: var(--sk-cream); font-size: 0.9rem; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); pointer-events: none; } #sk-power-banner { position: absolute; top: 27.6%; left: 43%; transform: translateX(-50%); z-index: 3; margin: 0; max-width: 76%; padding: 4px 14px; border-radius: 999px; background: rgba(6, 4, 2, 0.72); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3); text-align: center; pointer-events: none; } .sk-turn-indicator b, .sk-turn-indicator strong { color: var(--sk-cream); font-weight: 600; } /* Un joueur nommé dans la consigne : médaillon puis pseudo, sur une ligne. En `em` pour suivre les tailles de police que la consigne prend selon l'écran. */ /* La phrase entière est une rangée centrée : posé en ligne, le médaillon tirait le pseudo vers le milieu de la ligne pendant que le reste du texte restait sur la ligne de base, et « joue… » tombait plus bas que le nom. */ .sk-ti-ligne { /* En bloc, pas en ligne : posée en ligne, la rangée s'asseyait sur la ligne de base et laissait sous elle la place des jambages — le contenu remontait dans la pilule. */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15em 0.45em; /* Le médaillon est plus haut que le texte : sans ce jour il touchait les bords de la pilule. */ padding: 0.25em 0; } .sk-ti-joueur { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; } .sk-ti-piece { width: 1.5em; height: 1.5em; object-fit: contain; flex: none; } .sk-ti-grand { font-size: 1.3em; } .sk-bid-choices { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 4px; } .sk-bid-choices .btn { padding: 8px 15px; } /* Panneau d'action d'un pouvoir de pirate : texte explicatif au-dessus, boutons de choix en dessous. */ .sk-power-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 4px; padding: 10px; background: rgba(232, 206, 146, 0.07); border: 2px solid rgba(232, 206, 146, 0.21); border-radius: 12px; } .sk-power-panel .hint { margin: 0; } .sk-power-panel .btn { margin: 2px; } /* --- Pouvoir de Juanita Jade : cartes retournées une à une, au survol ou au tap - pas de minuteur imposé, le rythme est donné par le joueur lui-même. La grille n'emprunte plus la classe .sk-hand : elle en héritait le défilement horizontal, la hauteur minimale de l'éventail et le survol qui soulève la carte, trois choses qui n'ont aucun sens pour une planche de cartes posées à plat. --sk-flip-w est posée par ajusterGrilleJuanita : c'est la largeur qui fait tenir les 85 cartes possibles sans défilement. */ .sk-juanita-row { --sk-flip-w: 84px; --sk-flip-k: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; width: 100%; min-height: 0; padding: 0; overflow: visible; } /* Le saut de rangée entre les spéciales (en haut) et les numérotées : de largeur pleine et de hauteur nulle, il ne coûte rien à la grille et garantit qu'aucune rangée ne mélange les deux paquets. */ .sk-juanita-saut { flex-basis: 100%; width: 100%; height: 0; } .sk-flip-card { position: relative; width: var(--sk-flip-w, 84px); height: calc(var(--sk-flip-w, 84px) / 0.7); flex-shrink: 0; cursor: pointer; perspective: 600px; } /* Toute la carte est mise à l'échelle, pas seulement sa boîte : sans ça une carte de 30 px gardait un pied de 30 px et un chiffre de 2,9 rem. */ .sk-juanita-row .sk-flip-card-face.sk-card { --sk-w: var(--sk-flip-w); --sk-pad: calc(4px * var(--sk-flip-k)); --sk-foot: calc(30px * var(--sk-flip-k)); --sk-fig: calc(2.9rem * var(--sk-flip-k)); --sk-corner: calc(16px * var(--sk-flip-k)); --sk-seal: calc(13px * var(--sk-flip-k)); --sk-radius: calc(8px * var(--sk-flip-k)); } /* Le survol découvre la carte, il ne la referme jamais. Seul le cadre reçoit le pointeur : les deux faces sont hors d'atteinte, donc plus aucune règle de survol ne peut venir écraser leur rotation — c'est exactement ce que faisait .sk-hand .sk-card:hover, qui remettait la face avant à plat et la rendait invisible (backface-visibility) tant que le curseur restait dessus. La rotation ne dépend plus que de la classe --flipped, qui, elle, ne se retire jamais. */ .sk-juanita-row .sk-flip-card-face { pointer-events: none; } .sk-flip-card--flipped { cursor: default; } .sk-flip-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .sk-flip-card--flipped .sk-flip-card-inner { transform: rotateY(180deg); } .sk-flip-card-face { position: absolute; inset: 0; backface-visibility: hidden; } /* Dos de carte peint — même objet que .sk-card--hidden, mais sur une face 3D qui ne peut pas porter d'enfant. Le dos porte déjà son propre encadrement doré : plus de liseré de laiton posé par-dessus, il en faisait deux. */ .sk-flip-card-back { border-radius: var(--sk-radius); background: #16110d var(--sk-dos) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5); } .sk-flip-card-face.sk-card { transform: rotateY(180deg); cursor: default; } /* --- LA MAIN — éventail à chevauchement adaptatif --------------------- --lap est négatif par défaut : les cartes ont une gouttière et ne se recouvrent pas. Il ne devient positif que si la rangée déborde, et il est plafonné (voir layoutHand côté JS) pour que la bande visible ne descende jamais sous la largeur du pied, seul porteur de l'indice. Se recouvrir quand la place existe ne sert à rien et coûte la lecture. */ .sk-hand { --lap: -8px; display: flex; justify-content: center; align-items: flex-end; padding: 28px 16px 6px; min-height: 158px; overflow-x: auto; } .sk-card-arc { position: relative; transform-origin: bottom center; margin-left: calc(var(--lap) * -1); flex-shrink: 0; } .sk-card-arc:first-child { margin-left: 0; } /* Mon tour : le liseré sous la main s'allume et respire. C'est le plus grand objet de la zone où l'on doit agir — on le voit sans le lire. */ .sk-hand--mine::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sk-brass-hi), transparent); box-shadow: 0 0 18px rgba(232, 206, 146, 0.7); animation: sk-breathe 2.4s ease-in-out infinite; } @keyframes sk-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ===================================================================== LA CARTE — papier crème vieilli, fenêtre de couleur, dorure éraflée. Anatomie, de l'extérieur vers l'intérieur : 1. le papier : c'est la carte elle-même, et c'est lui qui la détache du feutre (12:1 de contraste) ; 2. la fenêtre de couleur : la famille se lit à distance, sans lire le chiffre — c'est la décision la plus fréquente du jeu (suivre la couleur) ; 3. la dorure éraflée : un filet de laiton, interrompu en quatre endroits, autour de la fenêtre ; 4. le PIED de parchemin : chiffre (ou nom) + motif de famille. Le pied est le seul élément dont la lisibilité est garantie : dans l'éventail les cartes se recouvrent et il ne reste qu'une bande gauche. Rien d'identifiant ne vit donc au centre — le grand chiffre du milieu n'est qu'un renfort, jamais la source. ===================================================================== */ .sk-card { --sk-w: 84px; --sk-pad: 4px; --sk-foot: 30px; --sk-fig: 2.9rem; --band: var(--sk-vert); --band-d: var(--sk-vert-d); position: relative; flex-shrink: 0; width: var(--sk-w); height: calc(var(--sk-w) / 0.7); /* ratio 7:10, celui des illustrations */ border-radius: var(--sk-radius); background: radial-gradient(120% 90% at 22% 8%, var(--sk-parch-hi) 0%, var(--sk-parch) 46%, var(--sk-parch-lo) 100%); box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.6), 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5); overflow: hidden; transition: transform 0.26s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease; } /* Grain du papier, posé au-dessus de tout : c'est ce qui empêche la carte de ressembler à un aplat vectoriel. */ .sk-card::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; background-image: var(--sk-grain); opacity: 0.24; mix-blend-mode: multiply; } /* --- La fenêtre de couleur + sa dorure ------------------------------- */ .sk-card__field { position: absolute; top: var(--sk-pad); left: var(--sk-pad); right: var(--sk-pad); bottom: var(--sk-foot); z-index: 1; border-radius: 2px; background: radial-gradient(120% 100% at 26% 8%, color-mix(in srgb, var(--band) 78%, var(--sk-parch-hi) 22%) 0%, var(--band) 46%, var(--band-d) 100%); box-shadow: 0 0 0 1px var(--sk-brass), 0 0 0 2px rgba(38, 24, 8, 0.85), inset 0 1px 0 rgba(255, 244, 214, 0.16), inset 0 -6px 14px rgba(0, 0, 0, 0.34); } .sk-card__field::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--sk-grain); opacity: 0.3; mix-blend-mode: overlay; } /* La dorure s'écaille : quatre interruptions du filet, toujours aux mêmes endroits — une usure régulière lirait comme un motif. */ .sk-card__field::after { content: ''; position: absolute; inset: -1px; pointer-events: none; background: linear-gradient(90deg, transparent 22%, var(--band) 22%, var(--band) 27%, transparent 27%) top / 100% 1px no-repeat, linear-gradient(90deg, transparent 63%, var(--band) 63%, var(--band) 70%, transparent 70%) bottom / 100% 1px no-repeat, linear-gradient(180deg, transparent 40%, var(--band) 40%, var(--band) 48%, transparent 48%) left / 1px 100% no-repeat, linear-gradient(180deg, transparent 74%, var(--band) 74%, var(--band) 80%, transparent 80%) right / 1px 100% no-repeat; opacity: 0.85; } /* --- Le grand chiffre imprimé à l'encre, au centre de la fenêtre ------ Renfort de lecture uniquement : à moitié masqué dans l'éventail, il ne porte jamais seul l'identité de la carte. */ .sk-card__figure { position: absolute; top: var(--sk-pad); left: var(--sk-pad); right: var(--sk-pad); bottom: var(--sk-foot); z-index: 2; display: flex; align-items: center; justify-content: center; font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: var(--sk-fig); line-height: 1; color: var(--sk-parch-hi); opacity: 0.3; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); pointer-events: none; } .sk-card__figure--wild { font-size: calc(var(--sk-fig) * 0.46); letter-spacing: -0.02em; } /* Gravure monochrome des cartes spéciales — jamais d'emoji : ils dépendent de la police du système et jurent avec le reste peint. */ .sk-card__wm { position: absolute; top: calc(var(--sk-pad) + 8%); left: 18%; right: 18%; bottom: calc(var(--sk-foot) + 8%); z-index: 2; pointer-events: none; background: var(--sk-parch-hi); opacity: 0.34; -webkit-mask: var(--gl, var(--sk-sabre)) center / contain no-repeat; mask: var(--gl, var(--sk-sabre)) center / contain no-repeat; } /* --- Équerres de cordage et sceau du jeu ----------------------------- */ .sk-card__rope { position: absolute; width: var(--sk-corner); height: var(--sk-corner); z-index: 5; background: var(--sk-ropecorner) center / contain no-repeat; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); } .sk-card__rope--tl { top: 0; left: 0; } .sk-card__rope--br { bottom: 0; right: 0; transform: scale(-1, -1); } /* Le médaillon complet devient une croix illisible sous 34 px : à la taille d'une carte, c'est donc un rivet de laiton bombé. Un ornement illisible vaut moins qu'un ornement absent. */ .sk-card__seal { position: absolute; top: calc(var(--sk-pad) + 2px); right: calc(var(--sk-pad) + 2px); width: var(--sk-seal); height: var(--sk-seal); z-index: 6; background: var(--sk-sealimg) center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); } /* --- LE PIED : l'indice, sur le papier nu ---------------------------- */ .sk-card__foot { position: absolute; left: var(--sk-pad); right: var(--sk-pad); bottom: 0; height: var(--sk-foot); z-index: 6; display: flex; align-items: center; gap: 3px; padding: 0 3px; color: var(--sk-parch-ink); overflow: hidden; } /* Chiffre : encre sombre sur papier, 14:1 de contraste, constant sur les quatre familles — c'est ce qui survivra aux illustrations. */ .card-emblem { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: calc(var(--sk-w) * 0.31); line-height: 1; font-variant-numeric: tabular-nums; color: var(--sk-parch-ink); text-shadow: 0 1px 0 rgba(255, 248, 226, 0.6); } /* Le 0/14 non déclaré porte quatre caractères là où une numérotée n'en porte qu'un ou deux : il est réduit pour tenir dans le pied. */ .card-emblem--wild { font-size: calc(var(--sk-w) * 0.15); letter-spacing: -0.02em; white-space: nowrap; } /* Nom d'une carte spéciale : capitales gravées, coupées si besoin — les libellés sont volontairement courts (voir SPECIAL_INFO côté JS). */ .sk-special-label { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: calc(var(--sk-w) * 0.088); line-height: 1.12; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sk-parch-ink); text-align: left; overflow-wrap: break-word; hyphens: auto; } /* --- Motif de famille : la couleur n'est jamais le seul canal --------- Quatre silhouettes franchement différentes — une boucle fermée, un axe vertical, une forme radiale, une diagonale — reconnaissables à 12 px et en dichromatie, là où bordeaux et vert bouteille sont la même couleur pour un protanope. */ .sk-card__suit { margin-left: auto; flex: 0 0 auto; width: calc(var(--sk-w) * 0.15); height: calc(var(--sk-w) * 0.15); background: var(--sk-parch-ink); opacity: 0.62; -webkit-mask: var(--gl) center / contain no-repeat; mask: var(--gl) center / contain no-repeat; } .sk-card--vert { --band: var(--sk-vert); --band-d: var(--sk-vert-d); --gl: var(--sk-gl-rope); } .sk-card--jaune { --band: var(--sk-jaune); --band-d: var(--sk-jaune-d); --gl: var(--sk-gl-anchor); } .sk-card--violet { --band: var(--sk-violet); --band-d: var(--sk-violet-d); --gl: var(--sk-gl-wheel); } .sk-card--noir { --band: var(--sk-noir); --band-d: var(--sk-noir-d); --gl: var(--sk-sabre); } /* Le 0/14 garde la couleur de sa famille dès la donne ; tant qu'il n'est pas déclaré, la fenêtre est coupée en deux (papier / ocre) pour dire l'ambiguïté. Le Joker prend les quatre familles à la fois. */ .sk-card--wild14 .sk-card__field { background: linear-gradient(154deg, var(--sk-parch) 0%, var(--sk-parch) 46%, var(--sk-jaune) 54%, var(--sk-jaune-d) 100%); } .sk-card--wild14 .sk-card__figure { color: var(--sk-parch-ink); opacity: 0.4; } .sk-card--wild15 .sk-card__field { background: linear-gradient(154deg, var(--sk-vert) 0%, var(--sk-jaune) 34%, var(--sk-violet) 67%, var(--sk-noir) 100%); } /* Le 0/14 une fois DÉCLARÉ : la pastille de la valeur retenue, frappée sur le dessin. La carte peinte reste la sienne — ses médaillons d'angle disent toujours ce qu'elle PEUT valoir — et la pastille du centre dit ce qu'elle vaut. Sans elle, un 0/14 joué à 14 et un joué à 0 seraient le même dessin sur le tapis, alors que l'un remporte le pli et que l'autre le donne. C'est le même objet que celui qu'on a choisi dans le cadre de déclaration : on reconnaît sur le tapis ce qu'on vient de cliquer. Même place et même taille que l'emblème de la Tigresse, pour la même raison — c'est le second cas où une carte change de nature en se posant. */ .sk-card__declare { position: absolute; z-index: 8; left: 50%; top: 61%; width: 52%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); pointer-events: none; background: var(--sk-pastille) 50% 50% / contain no-repeat; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)); } .sk-card__declare--0.sk-card__declare--jaune { --sk-pastille: url('assets/skin/pastille-0-jaune.webp'); } .sk-card__declare--0.sk-card__declare--vert { --sk-pastille: url('assets/skin/pastille-0-vert.webp'); } .sk-card__declare--0.sk-card__declare--violet { --sk-pastille: url('assets/skin/pastille-0-violet.webp'); } .sk-card__declare--0.sk-card__declare--noir { --sk-pastille: url('assets/skin/pastille-0-noir.webp'); } .sk-card__declare--14.sk-card__declare--jaune { --sk-pastille: url('assets/skin/pastille-14-jaune.webp'); } .sk-card__declare--14.sk-card__declare--vert { --sk-pastille: url('assets/skin/pastille-14-vert.webp'); } .sk-card__declare--14.sk-card__declare--violet { --sk-pastille: url('assets/skin/pastille-14-violet.webp'); } .sk-card__declare--14.sk-card__declare--noir { --sk-pastille: url('assets/skin/pastille-14-noir.webp'); } /* Dans l'éventail, la carte est recouverte par sa voisine : la pastille remonte et rétrécit pour rester dans la bande visible. */ .sk-hand .sk-card__declare { top: 46%; width: 44%; } /* Le bonus des 14, posé CONTRE le médaillon d'angle et mordant dessus : une pièce qui repose sur le chiffre, pas une pastille flottante. Les positions se déduisent du médaillon relevé sur les planches peintes (centré à 17,5 % / 10,6 %, large comme 26 % de la carte) : la pièce fait 22 % et son centre est posé à 20 % de là, en diagonale — de quoi mordre le médaillon sur quatre points de large. Elles valent aussi pour le cadre dessiné, qui place son chiffre au même endroit. 22 % et pas 16 % : à 16, sur une carte de la main large de 88 px, la pièce tombait à quatorze pixels et « +10 » n'y était plus qu'un grain d'or. Coin haut-gauche et pas bas-droit : c'est la bande que l'éventail laisse voir quand les cartes se recouvrent. Une pièce au pied de la carte ne se verrait qu'une fois la carte posée, c'est-à-dire trop tard pour décider. Tout est en pourcentage de la carte : la pièce suit donc le feutre, la main, la fiche agrandie et la planche du salon sans une valeur à régler. */ .sk-card__bonus { position: absolute; left: 31%; top: 20.5%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--sk-bonus) 50% 50% / contain no-repeat; filter: drop-shadow(0 0.4% 3% rgba(0, 0, 0, 0.85)); z-index: 2; pointer-events: none; } .sk-card__bonus--10 { --sk-bonus: url('assets/skin/bonus-10.webp'); } .sk-card__bonus--20 { --sk-bonus: url('assets/skin/bonus-20.webp'); } /* Le 7 et le 8 d'extension : même pièce, même place, même taille — c'est le même geste de règle, il doit se lire au même endroit. Étain et non laiton : elles ne rapportent pas toujours, et l'une fait perdre. */ .sk-card__bonus--plus5 { --sk-bonus: url('assets/skin/bonus-plus-5.webp'); } .sk-card__bonus--moins5 { --sk-bonus: url('assets/skin/bonus-moins-5.webp'); } /* --- Cartes spéciales ------------------------------------------------ .sk-card--special est le fourre-tout : il vient EN PREMIER pour que les classes de genre ci-dessous le remplacent (spécificité égale, c'est l'ordre qui tranche). */ .sk-card--special { --band: var(--sk-sirene); --band-d: var(--sk-sirene-d); --gl: var(--sk-gl-anchor); } .sk-card--pirate { --band: var(--sk-pirate); --band-d: var(--sk-pirate-d); --gl: var(--sk-sabre); } .sk-card--k-siren { --band: var(--sk-sirene); --band-d: var(--sk-sirene-d); --gl: var(--sk-gl-fin); } .sk-card--k-skullking { --band: var(--sk-sk); --band-d: var(--sk-sk-d); --gl: var(--sk-gl-skull); } .sk-card--k-loot { --band: var(--sk-butin); --band-d: var(--sk-butin-d); --gl: var(--sk-gl-coins); } .sk-card--k-kraken { --band: var(--sk-kraken); --band-d: var(--sk-kraken-d); --gl: var(--sk-gl-tentacle); } .sk-card--k-whale { --band: var(--sk-baleine); --band-d: var(--sk-baleine-d); --gl: var(--sk-gl-whale); } .sk-card--k-stingray { --band: var(--sk-kraken); --band-d: var(--sk-kraken-d); --gl: var(--sk-gl-fin); } .sk-card--k-lastvolley { --band: var(--sk-pirate); --band-d: var(--sk-pirate-d); --gl: var(--sk-sabre); } .sk-card--k-plank { --band: var(--sk-fuite); --band-d: var(--sk-fuite-d); --gl: var(--sk-gl-plank); } .sk-card--k-davyjones { --band: var(--sk-butin); --band-d: var(--sk-butin-d); --gl: var(--sk-gl-coins); } /* La Baleine blanche est la seule fenêtre claire du paquet : son chiffre central doit s'encrer en sombre, pas en crème. */ .sk-card--k-whale .sk-card__wm, .sk-card--k-whale .sk-card__figure { background: var(--sk-parch-ink); color: var(--sk-parch-ink); opacity: 0.3; } /* Le NOIR est atout permanent, et le Skull King ne perd qu'une fois par partie : dorure doublée pour l'un, halo permanent pour l'autre. */ .sk-card--noir .sk-card__field, .sk-card--k-skullking .sk-card__field { box-shadow: 0 0 0 1px var(--sk-brass-hi), 0 0 0 2px var(--sk-brass-lo), 0 0 0 3px rgba(24, 15, 6, 0.9), inset 0 1px 0 rgba(255, 244, 214, 0.16), inset 0 -6px 14px rgba(0, 0, 0, 0.4); } .sk-card--k-skullking { box-shadow: 0 0 0 1px var(--sk-brass-lo), 0 0 15px rgba(184, 137, 53, 0.35), 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.55); } /* Famille Fuite : elle ne prend jamais le pli, elle est donc la carte ternie — étain chaud, à l'opposé du bordeaux des Pirates, qui est la confusion la plus fréquente et la plus chère. */ .sk-card--escape { --band: var(--sk-fuite); --band-d: var(--sk-fuite-d); --gl: var(--sk-gl-flag); } /* La Tigresse est Pirate ou Fuite au choix : tant que son choix n'est pas connu, sa fenêtre est coupée en deux. */ .sk-card--tigress { --band: #8e241e; --band-d: #3b382f; --gl: var(--sk-sabre); } .sk-card--tigress .sk-card__field { background: linear-gradient(154deg, #8e241e 0%, var(--sk-pirate-d) 46%, var(--sk-fuite-d) 54%, #8a8578 100%); } /* Une fois la décision révélée (pli résolu), elle bascule franchement dans la couleur correspondante — on lit son choix sans avoir à le déduire. */ .sk-card--tigress-pirate .sk-card__field { background: radial-gradient(120% 100% at 26% 8%, #a8322a 0%, var(--sk-pirate) 46%, var(--sk-pirate-d) 100%); } .sk-card--tigress-escape .sk-card__field { background: radial-gradient(120% 100% at 26% 8%, #8a8578 0%, var(--sk-fuite) 46%, var(--sk-fuite-d) 100%); } /* --- Dos de carte : velours bordeaux, médaillon centré --------------- */ /* Carte cachée : le dos peint, plein cadre. Le cartouche qu'on dessinait par-dessus (un rectangle de laiton posé à 3 px du bord) doublait celui que l'illustration porte déjà — on le retire plutôt que d'empiler deux cadres. */ .sk-card--hidden { background: #16110d var(--sk-dos) center / cover no-repeat; cursor: default; } .sk-card--hidden .sk-card__field { display: none; } .sk-card--hidden:hover { transform: none; } .sk-hidden-mark { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 900; font-size: calc(var(--sk-w) * 0.42); color: var(--sk-brass-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); /* Le dos est maintenant une illustration dorée : un « ? » doré posé dessus s'y perdait. Ce voile sombre lui rend un fond, sans cacher le dessin — il s'éteint bien avant les bords de la carte. */ background: radial-gradient(circle at 50% 50%, rgba(6, 4, 2, 0.88) 0%, rgba(6, 4, 2, 0.7) 32%, rgba(6, 4, 2, 0) 62%); } /* --------------------------------------------------------------------- CARTE ILLUSTRÉE — l'illustration EST la carte. Les PNG fournis portent déjà leur bord crème, leur bande peinte, leur dorure et leurs médaillons d'angle : on ne rajoute donc ni fenêtre, ni filet, ni sceau, ni cordage. Leur ratio est exactement 7:10, celui de .sk-card — l'image se pose en `cover` sans être recadrée. Seul le pied se surimpose, sur un vrai cartouche de parchemin. --------------------------------------------------------------------- */ .sk-card--art { background: #1a0e06 var(--art) 50% 50% / cover no-repeat; } .sk-card--art .sk-card__field, .sk-card--art .sk-card__figure, .sk-card--art .sk-card__wm, .sk-card--art .sk-card__rope, .sk-card--art .sk-card__seal { display: none; } .sk-card--art::after { opacity: 0.1; } /* Et pas de cartouche : une carte illustrée n'a rien par-dessus son dessin. Le pied part hors de l'écran plutôt qu'en `display:none` — c'est lui que lisent les technologies d'assistance, et lui seul porte le nom ou le chiffre sous une forme que la machine sait lire. */ .sk-card--art .sk-card__foot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; background: none; box-shadow: none; } /* Le paquet perso : quatre Pirates, quatre visages de l'équipage. Ils ne portent pas leur nom peint — leur pied de parchemin reste visible. */ .sk-card--art-anto { --art: url('assets/cards/anto-coco.webp'); } .sk-card--art-mams { --art: url('assets/cards/guy-mams.webp'); } .sk-card--art-guigui { --art: url('assets/cards/guigui.webp'); } .sk-card--art-pablo { --art: url('assets/cards/pablo.webp'); } /* Le paquet classique : la planche des spéciales. Elles peignent leur nom dans un cartouche, mais gardent quand même leur pied — à la taille d'une carte en main, le nom peint n'est plus lisible (voir artClasses). */ .sk-card--art-classique-skullking { --art: url('assets/cards/classique-skullking.webp'); } .sk-card--art-classique-fuite { --art: url('assets/cards/classique-fuite.webp'); } .sk-card--art-classique-sirene-1 { --art: url('assets/cards/classique-sirene-1.webp'); } .sk-card--art-classique-sirene-2 { --art: url('assets/cards/classique-sirene-2.webp'); } .sk-card--art-classique-will { --art: url('assets/cards/classique-will.webp'); } .sk-card--art-classique-harry { --art: url('assets/cards/classique-harry.webp'); } .sk-card--art-classique-rosie { --art: url('assets/cards/classique-rosie.webp'); } .sk-card--art-classique-juanita { --art: url('assets/cards/classique-juanita.webp'); } .sk-card--art-classique-rascal { --art: url('assets/cards/classique-rascal.webp'); } .sk-card--art-classique-kraken { --art: url('assets/cards/classique-kraken.webp'); } .sk-card--art-classique-butin { --art: url('assets/cards/classique-butin.webp'); } .sk-card--art-classique-baleine { --art: url('assets/cards/classique-baleine.webp'); } .sk-card--art-classique-raie { --art: url('assets/cards/classique-raie.webp'); } .sk-card--art-classique-tigresse { --art: url('assets/cards/classique-tigresse.webp'); } .sk-card--art-classique-forban { --art: url('assets/cards/classique-forban.webp'); } .sk-card--art-classique-mary { --art: url('assets/cards/classique-mary.webp'); } .sk-card--art-classique-planche { --art: url('assets/cards/classique-planche.webp'); } .sk-card--art-classique-davyjones { --art: url('assets/cards/classique-davyjones.webp'); } .sk-card--art-classique-salve { --art: url('assets/cards/classique-salve.webp'); } .sk-card--art-classique-joker { --art: url('assets/cards/classique-joker.webp'); } /* La Tigresse illustrée : son cadre peint est rouge, celui d'un Pirate. Tant que son choix n'est pas connu ce rouge ne ment pas — elle en est un, au choix. Une fois annoncée, il faut le dire : la fenêtre coupée en deux, qui portait ce signal sur la carte dessinée, est sous l'illustration. Un liseré de la couleur retenue prend le relais, doublé du pied qui l'écrit en toutes lettres. */ .sk-card--art.sk-card--tigress-pirate, .sk-card--art.sk-card--tigress-escape { box-shadow: 0 0 0 3px var(--sk-tigresse-liser), 0 0 0 4px rgba(20, 12, 5, 0.7), 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5); } .sk-card--art.sk-card--tigress-pirate { --sk-tigresse-liser: var(--sk-pirate); } .sk-card--art.sk-card--tigress-escape { --sk-tigresse-liser: var(--sk-fuite); } /* Le sceau de la Tigresse : l'emblème retenu, frappé sur le dessin dès que le choix est connu. Le liseré ci-dessus dit la couleur, mais il se lit de près et suppose qu'on sache que rouge = Pirate ; sur la table, à trois sièges de distance, il ne se voit pas. L'emblème, lui, dit la fonction : le pavillon blanc ou les sabres croisés, les mêmes qu'au moment du choix. Posé bas, sur le buste et la banderole — le visage reste dégagé, et c'est à cet endroit que la carte est le moins recouverte dans le pli. */ .sk-card__tigresse { position: absolute; z-index: 8; left: 50%; top: 61%; width: 62%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); pointer-events: none; background: var(--sk-embleme) 50% 50% / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75)); } .sk-card--tigress-pirate .sk-card__tigresse { --sk-embleme: url('assets/skin/embleme-pirate.webp'); } .sk-card--tigress-escape .sk-card__tigresse { --sk-embleme: url('assets/skin/embleme-fuite.webp'); } /* Dans l'éventail, les cartes se recouvrent par la droite : un sceau centré passerait sous la voisine. Il glisse alors vers la bande gauche, la seule qui reste toujours visible — c'est la règle de toute la carte (voir cardShell). Ta Tigresse à toi porte son choix dès la pose, elle n'est donc plus en main : ce cas ne se produit que si un paquet la remet en main. */ .sk-hand .sk-card__tigresse { left: 34%; top: 64%; width: 54%; } /* Le Joker posé : même dispositif, même raison. Son 15 est peint, la famille qu'il vient de déclarer ne l'est pas — elle ne peut pas l'être, elle change à chaque partie. `--band` est déjà la couleur de la famille, posée par la classe de couleur qui accompagne la pose. Tant qu'il est en main, pas de liseré : il n'a encore rien déclaré. */ .sk-card--art.sk-card--wild15-pose { box-shadow: 0 0 0 3px var(--band), 0 0 0 4px rgba(20, 12, 5, 0.7), 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5); } /* Les quatre familles peintes : le coffre (Jaune), la carte au trésor (Violet), le pavillon noir (Noir, l'atout) et les Perroquets (Vert). Les trois premières se passent de leur pied, le Vert le garde — voir plus bas. */ .sk-card--art-tresor-1 { --art: url('assets/cards/tresor-1.webp'); } .sk-card--art-tresor-2 { --art: url('assets/cards/tresor-2.webp'); } .sk-card--art-tresor-3 { --art: url('assets/cards/tresor-3.webp'); } .sk-card--art-tresor-4 { --art: url('assets/cards/tresor-4.webp'); } .sk-card--art-tresor-5 { --art: url('assets/cards/tresor-5.webp'); } .sk-card--art-tresor-6 { --art: url('assets/cards/tresor-6.webp'); } .sk-card--art-tresor-7 { --art: url('assets/cards/tresor-7.webp'); } .sk-card--art-tresor-8 { --art: url('assets/cards/tresor-8.webp'); } .sk-card--art-tresor-9 { --art: url('assets/cards/tresor-9.webp'); } .sk-card--art-tresor-10 { --art: url('assets/cards/tresor-10.webp'); } .sk-card--art-tresor-11 { --art: url('assets/cards/tresor-11.webp'); } .sk-card--art-tresor-12 { --art: url('assets/cards/tresor-12.webp'); } .sk-card--art-tresor-13 { --art: url('assets/cards/tresor-13.webp'); } .sk-card--art-tresor-14 { --art: url('assets/cards/tresor-14.webp'); } /* Les 0/14 de l'extension : le dessin du 5 de chaque famille, ses deux médaillons remplacés par la pastille 0/14 de sa couleur. Ils n'ont pas de planche à eux — les planches numérotées vont de 1 à 14 — ils sont composés par briefs/composer-cartes-0-14.py. */ .sk-card--art-tresor-014 { --art: url('assets/cards/tresor-014.webp'); } .sk-card--art-perroquet-014 { --art: url('assets/cards/perroquet-014.webp'); } .sk-card--art-carte-014 { --art: url('assets/cards/carte-014.webp'); } .sk-card--art-pavillon-014 { --art: url('assets/cards/pavillon-014.webp'); } .sk-card--art-carte-1 { --art: url('assets/cards/carte-1.webp'); } .sk-card--art-carte-2 { --art: url('assets/cards/carte-2.webp'); } .sk-card--art-carte-3 { --art: url('assets/cards/carte-3.webp'); } .sk-card--art-carte-4 { --art: url('assets/cards/carte-4.webp'); } .sk-card--art-carte-5 { --art: url('assets/cards/carte-5.webp'); } .sk-card--art-carte-6 { --art: url('assets/cards/carte-6.webp'); } .sk-card--art-carte-7 { --art: url('assets/cards/carte-7.webp'); } .sk-card--art-carte-8 { --art: url('assets/cards/carte-8.webp'); } .sk-card--art-carte-9 { --art: url('assets/cards/carte-9.webp'); } .sk-card--art-carte-10 { --art: url('assets/cards/carte-10.webp'); } .sk-card--art-carte-11 { --art: url('assets/cards/carte-11.webp'); } .sk-card--art-carte-12 { --art: url('assets/cards/carte-12.webp'); } .sk-card--art-carte-13 { --art: url('assets/cards/carte-13.webp'); } .sk-card--art-carte-14 { --art: url('assets/cards/carte-14.webp'); } .sk-card--art-pavillon-1 { --art: url('assets/cards/pavillon-1.webp'); } .sk-card--art-pavillon-2 { --art: url('assets/cards/pavillon-2.webp'); } .sk-card--art-pavillon-3 { --art: url('assets/cards/pavillon-3.webp'); } .sk-card--art-pavillon-4 { --art: url('assets/cards/pavillon-4.webp'); } .sk-card--art-pavillon-5 { --art: url('assets/cards/pavillon-5.webp'); } .sk-card--art-pavillon-6 { --art: url('assets/cards/pavillon-6.webp'); } .sk-card--art-pavillon-7 { --art: url('assets/cards/pavillon-7.webp'); } .sk-card--art-pavillon-8 { --art: url('assets/cards/pavillon-8.webp'); } .sk-card--art-pavillon-9 { --art: url('assets/cards/pavillon-9.webp'); } .sk-card--art-pavillon-10 { --art: url('assets/cards/pavillon-10.webp'); } .sk-card--art-pavillon-11 { --art: url('assets/cards/pavillon-11.webp'); } .sk-card--art-pavillon-12 { --art: url('assets/cards/pavillon-12.webp'); } .sk-card--art-pavillon-13 { --art: url('assets/cards/pavillon-13.webp'); } .sk-card--art-pavillon-14 { --art: url('assets/cards/pavillon-14.webp'); } /* La famille VERTE est illustrée de bout en bout : les 14 Perroquets. Chaque valeur a sa carte parce que le chiffre est peint dans les médaillons d'or, en haut à gauche et en bas à droite. Le pied de parchemin le redit quand même : dans l'éventail, les cartes se recouvrent et le médaillon du haut passe sous la voisine — seul le pied reste lisible. */ .sk-card--art-perroquet-1 { --art: url('assets/cards/perroquet-1.webp'); } .sk-card--art-perroquet-2 { --art: url('assets/cards/perroquet-2.webp'); } .sk-card--art-perroquet-3 { --art: url('assets/cards/perroquet-3.webp'); } .sk-card--art-perroquet-4 { --art: url('assets/cards/perroquet-4.webp'); } .sk-card--art-perroquet-5 { --art: url('assets/cards/perroquet-5.webp'); } .sk-card--art-perroquet-6 { --art: url('assets/cards/perroquet-6.webp'); } .sk-card--art-perroquet-7 { --art: url('assets/cards/perroquet-7.webp'); } .sk-card--art-perroquet-8 { --art: url('assets/cards/perroquet-8.webp'); } .sk-card--art-perroquet-9 { --art: url('assets/cards/perroquet-9.webp'); } .sk-card--art-perroquet-10 { --art: url('assets/cards/perroquet-10.webp'); } .sk-card--art-perroquet-11 { --art: url('assets/cards/perroquet-11.webp'); } .sk-card--art-perroquet-12 { --art: url('assets/cards/perroquet-12.webp'); } .sk-card--art-perroquet-13 { --art: url('assets/cards/perroquet-13.webp'); } .sk-card--art-perroquet-14 { --art: url('assets/cards/perroquet-14.webp'); } /* --- Extension : fanion de laiton au coin coupé ---------------------- */ .sk-card--ext::before { content: ''; position: absolute; top: 0; right: 0; z-index: 6; width: 0; height: 0; border-top: 14px solid var(--sk-brass); border-left: 14px solid transparent; filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.65)); } /* --- États ----------------------------------------------------------- */ .sk-hand .sk-card { cursor: pointer; } /* Le survol soulève la carte et l'éclaire d'un halo chaud — c'est le seul endroit du jeu où une carte s'allume toute seule. */ .sk-hand .sk-card:hover, .sk-hand .sk-card:active { transform: translateY(-18px) scale(1.05); z-index: 3; box-shadow: 0 0 0 1px var(--sk-brass), 0 0 26px rgba(232, 206, 146, 0.34), 0 16px 26px rgba(0, 0, 0, 0.6); } /* Carte numérotée hors-couleur alors qu'on doit suivre : elle perd sa dorure — le filet de laiton est ce qui dit « jouable » — et se ternit. Elle reste cliquable pour rappeler la règle plutôt que de rester muette. */ .sk-card--unplayable { filter: saturate(0.24) brightness(0.6); cursor: not-allowed; } .sk-card--unplayable .sk-card__field { box-shadow: 0 0 0 1px rgba(110, 106, 94, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.7); } .sk-hand .sk-card--unplayable:hover, .sk-hand .sk-card--unplayable:active { transform: none; z-index: auto; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.6), 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5); } /* Les deux cartes tout juste piochées par Will le Bandit : un liseré de cuivre pour les repérer une fois mêlées au reste de la main. Le laiton clair, lui, est réservé à la carte qu'on désigne (voir le cadre du troc, plus bas) — deux métaux, deux états. */ .sk-card--will-drawn { box-shadow: 0 0 0 2px var(--sk-copper), 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5); } /* --- Échelles -------------------------------------------------------- Une seule variable pilote la carte : sa largeur. La hauteur, le pied, le chiffre et les motifs en découlent, ce qui évite qu'un palier oublie une dimension et casse la lisibilité du pied. */ .sk-trick-card .sk-card { /* --sk-trick-scale est posée par renderTrick : sur un feutre trop court pour loger deux cartes entre les sièges opposés, elles rétrécissent plutôt que de venir se poser sur les étiquettes. */ --sk-w: calc(76px * var(--sk-trick-scale, 1)); --sk-foot: calc(27px * var(--sk-trick-scale, 1)); --sk-fig: calc(2.5rem * var(--sk-trick-scale, 1)); --sk-corner: 14px; --sk-seal: 11px; cursor: default; } /* Compteur de plis (paysage) : plis remportés sur plis annoncés, en pilule sous le pseudo — la place que la maquette donne à l'annonce. Il était posé hors du flux, tantôt au-dessus tantôt en dessous du siège, pour esquiver la carte du pli. Depuis que les cartes se posent en couronne à l'extérieur des sièges, ce jeu de côtés ne tenait plus : à neuf joueurs, le compteur d'un siège du haut et celui de son voisin du bas se rejoignaient dans le même trou. Dans le flux, il fait simplement partie du siège — et la carte, qui se dégage du RECTANGLE mesuré du siège, l'évite sans qu'on ait à y penser. */ .sk-seat-tally { order: 3; padding: 1px 8px 2px; border-radius: 2px; background: rgba(6, 14, 11, 0.85); box-shadow: 0 0 0 1px rgba(184, 137, 53, 0.42); font-family: 'Bitter', Georgia, serif; font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; color: var(--sk-cream); white-space: nowrap; pointer-events: none; } /* Annonce tenue pile / dépassée. La couleur ne fait que redoubler : le texte lui-même est explicite (« 2 sur 3 »), parce qu'un vert et un rouge sont la même couleur pour 8 % des joueurs masculins. */ .sk-seat-tally--exact { box-shadow: 0 0 0 1px var(--sk-kept); color: #9bd79e; } .sk-seat-tally--over { box-shadow: 0 0 0 1px var(--sk-failed); color: #e09a90; } /* --- Bannière de début de manche --- */ .sk-round-start-banner { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; pointer-events: none; } .sk-round-start-banner span { padding: 16px 40px 18px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.08), rgba(0, 0, 0, 0.34)), linear-gradient(178deg, var(--sk-oak-hi) 0%, var(--sk-oak) 34%, var(--sk-oak-lo) 100%); color: var(--sk-cream); font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 900; font-size: 2.2rem; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.2), 0 0 0 1px var(--sk-brass), 0 0 0 3px rgba(16, 9, 3, 0.9), 0 18px 40px rgba(0, 0, 0, 0.7); animation: sk-round-start-pop 1.8s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; } @keyframes sk-round-start-pop { 0% { opacity: 0; transform: scale(0.7); } 15% { opacity: 1; transform: scale(1.05); } 25% { transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } } /* --- Révélation des annonces : la phase passe d'un coup de "bidding" à "playing" côté serveur dès la dernière annonce reçue, sans palier - sans ça les chiffres apparaissaient d'un coup dans le tableau des scores. Chaque annonce apparaît l'une après l'autre plutôt que toutes en même temps, façon boule à facettes. --- */ .sk-bid-reveal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; } .sk-bid-reveal-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 30px 22px; border-radius: 5px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.32)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 20px 44px rgba(0, 0, 0, 0.72); } .sk-bid-reveal-title { margin: 0; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.24rem; color: var(--sk-cream); letter-spacing: 0.03em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } /* Assez large pour aligner 6 annonces d'un coup ; au-delà (jusqu'à 9 avec l'extension) ça passe sur deux rangs, ce qui reste lisible. La borne suit la fenêtre : sur téléphone, 580px déborderaient. */ .sk-bid-reveal-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: min(580px, 84vw); } /* Annonces révélées : une carte face cachée par joueur, qui se retourne en cascade. Même idiome 3D que le pouvoir de Juanita (preserve-3d + backface-visibility), volontairement dupliqué plutôt que mutualisé. Le nom du joueur est SOUS la carte, pas dessus : la face est une plaque peinte, on ne pose rien sur un dessin. Il lui faut donc une boîte à lui, hors de la perspective — dans la carte, il se retournerait avec elle. */ .sk-bid-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Le rapport 7:10 des cartes du jeu, celui du dos qu'on retourne. Il suivait avant celui de la plaque peinte (283 x 480), qui n'est plus là : le dos, lui, est bien une carte, et sur un cadre trop haut il était rogné en haut et en bas. Même largeur qu'une carte en main, à un cheveu près. */ .sk-bid-card { width: 84px; height: 120px; perspective: 700px; } .sk-bid-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: sk-bid-flip 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: var(--sk-bid-delay, 0s); } /* Animation plutôt que transition : elle démarre d'elle-même, sans avoir à peindre un état initial puis basculer une classe depuis JS (ce qui imposait un double rAF, gelé dans un onglet en arrière-plan). */ @keyframes sk-bid-flip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } } .sk-bid-card-face { position: absolute; inset: 0; border-radius: var(--sk-radius); backface-visibility: hidden; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5); } .sk-bid-card-back { background: #16110d var(--sk-dos) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5); } /* La face révélée est SOBRE, et c'est tout son travail : neuf annonces se découvrent d'un coup et il faut les lire avant de jouer. Une face crème, le chiffre en brun-gris posé dessus, la pièce du joueur dessous — le seul contraste fort de la face tombe donc sur la seule chose qui change d'une annonce à l'autre. Le décor est ailleurs : le dos peint qui se retourne juste avant, et le panneau de bois qui les porte toutes. Un liseré d'encre plutôt qu'un cadre de laiton : il détache le crème du fond sombre du panneau, sans rien ajouter à regarder. */ .sk-bid-card-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* Crème et non parchemin : le parchemin des cartes tire sur le doré et porte son grain, ces plaques-ci ne sont pas des cartes. Le dégradé est à peine là — juste de quoi éviter l'aplat mort. */ background: linear-gradient(180deg, #F5EBD6, #E8DBBE); box-shadow: 0 0 0 1px rgba(38, 27, 16, 0.75), 0 8px 16px rgba(0, 0, 0, 0.5); } /* La pièce du joueur, dans le flux sous le chiffre : c'est elle qui dit DE QUI est l'annonce — le même médaillon que sur son siège, sur la roue et au bout de sa courbe du récap. Elle était sertie dans le crâne casqué de la plaque peinte, elle est maintenant simplement posée, et elle garde son ombre portée pour ne pas flotter sur le crème. */ .sk-bid-piece { width: 40%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } /* Le chiffre : gros, au corps de la face, en brun-gris foncé. Pas d'ombre portée — sur un fond clair elle ne creuse rien, elle salit le tracé. */ .sk-bid-card-num { font-family: 'Cinzel', Georgia, serif; font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #473E36; } /* LA CARTE DU TOTAL. Elle ferme la rangée et se retourne en dernier : elle n'a de sens qu'une fois toutes les annonces découvertes. Elle se distingue des plaques de joueurs sans changer de forme — un fond de laiton pâle plutôt que la crème, parce que ce n'est l'annonce de personne. */ .sk-bid-card--total .sk-bid-card-front { gap: 2px; background: linear-gradient(180deg, #E9D9AE, #D6C08C); } .sk-bid-total-titre { font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(71, 62, 54, 0.72); } /* Trois glyphes au lieu d'un : à 2,4 rem le « 5/6 » débordait de la plaque. Il reste la plus grosse chose de la carte, c'est ce qu'on vient y lire. */ .sk-bid-total-num { font-size: 1.6rem; letter-spacing: -0.02em; } /* Le Total prend TOUJOURS sa propre ligne, sous un filet. Ce n'est pas une annonce de plus au bout de la rangée : c'est ce que la rangée donne une fois additionnée. Glissé à la suite des plaques il se lisait comme un joueur de plus — et il passait à la ligne par accident ou non selon l'effectif, ce qui est la pire des deux options. */ .sk-bid-slot--total { flex-basis: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(232, 206, 146, 0.16); } /* Pas de couleur de joueur ici : ce total n'appartient à personne. Et pas de troncature non plus — la borne de 106 px vaut pour des pseudos qu'on raccourcit sans perte, pas pour un libellé de deux mots. */ /* Sélecteur en deux classes, et pas `.sk-bid-nom--total` seul : la règle générale des pseudos est déclarée plus bas dans la feuille et gagnerait à spécificité égale. */ .sk-bid-slot--total .sk-bid-nom { max-width: none; color: var(--sk-cream-2); font-style: italic; text-transform: none; letter-spacing: 0.04em; } /* Le pseudo, sous la carte, dans la couleur de la pièce du joueur : la même qui l'identifie sur son siège, sur la roue et au bout de sa courbe. La couleur est posée en ligne par showBidReveal (elle est propre à chacun), d'où l'absence de `color` ici. Il se coupe proprement plutôt que d'élargir la colonne : c'est le chiffre qu'on vient lire, le nom le rattache. */ .sk-bid-nom { /* Un peu plus large que la carte, et au corps d'un vrai libellé : à 0,6 rem le nom se lisait comme une mention de pied de page alors que c'est la moitié de l'information — le chiffre ne vaut rien sans lui. */ max-width: 106px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Cinzel', Georgia, serif; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } /* --- Roue de tirage au sort (qui mène le premier pli) : un gouvernail peint d'une seule pièce, flèche comprise, qui tourne sur lui-même et s'arrête sur la pièce d'un joueur. Ne joue qu'une fois, au tout début de la partie (voir playStartReveal côté JS). Elle avait avant la DA de celle du Rami : un camembert de feutres sous un cadre de bois immobile, et une barre rapportée qui pivotait seule au centre. Trois objets pour une seule idée, dont deux qui ne bougeaient pas — et un camembert dont les parts changeaient de taille avec le nombre de joueurs, donc un dessin différent à chaque partie. Il n'en reste qu'un, et c'est celui qu'on lance : le gouvernail entier. Les pièces des joueurs sont posées autour, fixes, et c'est sur elles que la flèche vient s'arrêter — comme sur une roue de fortune, où ce qui tourne désigne ce qui ne tourne pas. --- */ .sk-start-reveal { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(60% 50% at 50% 44%, rgba(20, 12, 5, 0.88), rgba(3, 8, 10, 0.95)); } /* Le cadre ne porte plus rien : c'est une boîte carrée, du diamètre du gouvernail flèche comprise, dans laquelle la roue tourne et autour de laquelle les pièces se posent. Le fichier est cadré sur son MOYEU (voir briefs/detourer-volant.py, qui le relève et recentre l'image dessus) : le centre de rotation et le centre de la boîte sont donc le même point, et il n'y a plus de --sk-roue-cx/cy à tenir en phase avec l'image. */ .sk-wheel-frame { position: relative; /* La boîte du TOUT, pièces comprises, et non celle de la roue : les médaillons sortent largement du gouvernail, et une boîte à la taille de la roue ne réservait pas leur place — la plaque du joueur du bas passait alors sur « X ouvre la manche », qui se pose juste en dessous. 560 = 2 x (236 de rayon + 44 de demi-étiquette). */ width: 560px; height: 560px; /* Rayon des pièces, posé par playStartReveal : au moins de quoi les tenir juste au-delà de la course de la flèche, plus de quoi que deux plaques de nom voisines ne se touchent pas quand la table se remplit. */ --sk-roue-etiquettes: 236px; } /* La roue entière, flèche comprise. Elle occupe toute la boîte : le fichier est calé sur la pointe de la flèche (rayon 0,984 du demi-côté), donc la pointe affleure le bord quel que soit l'angle (elle balaie donc 207 px sur les 420 de la roue), et les poignées tiennent à 0,871 — c'est l'espace entre les deux qui laisse la flèche se détacher. Les deux rayons sont relevés par briefs/detourer-volant.py et réimprimés à chaque passage : la roue peinte a déjà changé une fois, et les poignées avec elle. Départ vif puis très longue traîne : la roue part d'un coup et n'arrête plus vraiment de ralentir. La durée vient de --sk-roue-duree, posée par playStartReveal, pour qu'elle ne puisse pas diverger de ses minuteries. */ .sk-wheel { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; /* `translate` et non `transform` : c'est une propriété à part, composée AVANT `transform`. Le centrage ne consomme donc pas la transformation, qui reste libre pour la seule rotation — et cette rotation tourne bien autour du moyeu, puisque le fichier est cadré dessus. */ translate: -50% -50%; transform: rotate(0deg); transform-origin: 50% 50%; transition: transform var(--sk-roue-duree, 5400ms) cubic-bezier(0.08, 0.86, 0.06, 1); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.7)); } /* Les pièces par-dessus la roue : si la flèche vient les frôler, c'est le médaillon qu'on doit continuer de lire, pas la pointe. */ .sk-wheel-labels { position: absolute; inset: 0; z-index: 2; } /* Une étiquette par joueur : sa pièce au-dessus de son nom, pour qu'on reconnaisse son secteur à la figure autant qu'à la couleur. Le placement est polaire et tient entièrement ici : JS ne pose que l'angle. Les deux rotations s'annulent — la première emmène l'étiquette sur son rayon, la seconde la remet d'aplomb, sinon les noms du bas se liraient la tête en bas. */ .sk-wheel-tag { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: rotate(var(--sk-tag-angle, 0deg)) translateY(calc(-1 * var(--sk-roue-etiquettes))) rotate(calc(-1 * var(--sk-tag-angle, 0deg))); display: flex; flex-direction: column; align-items: center; gap: 3px; } /* Le médaillon est posé au-dessus de la plaque, pas dessus : son cerclage émaillé se suffit, sur le parchemin il aurait l'air collé. 46 px et non 30 : c'est LUI que la flèche désigne maintenant, il n'est plus la vignette d'un secteur de feutre. À 30 px sur une roue de 340 il fallait le chercher, et la pointe s'arrêtait devant quelque chose de plus petit qu'elle. */ .sk-wheel-tag-piece { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75)); transition: filter 0.25s; } .sk-wheel-tag-name { padding: 4px 12px 5px; border-radius: 2px; background: linear-gradient(178deg, var(--sk-parch-hi), var(--sk-parch) 60%, var(--sk-parch-lo)); box-shadow: 0 0 0 1px var(--sk-brass-lo), 0 2px 6px rgba(0, 0, 0, 0.6); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--sk-parch-ink); white-space: nowrap; max-width: 118px; overflow: hidden; text-overflow: ellipsis; transition: background 0.25s, box-shadow 0.25s, color 0.25s; } .sk-wheel-tag--winner .sk-wheel-tag-name { background: linear-gradient(180deg, #eedca8, var(--sk-brass) 56%, var(--sk-brass-lo)); box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.85), 0 0 18px rgba(232, 206, 146, 0.55); color: #2a1b06; } .sk-wheel-tag--winner .sk-wheel-tag-piece { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(232, 206, 146, 0.9)); } /* Neuf étiquettes autour d'une roue de 420 px débordent d'un téléphone : on rapetisse toute la roue d'un bloc plutôt que de reprendre chaque nombre — les pièces et les plaques, posées dans le cadre, suivent. Un cran plus bas qu'avant : les pièces ont grossi et sortent plus loin du bois. */ @media (max-width: 560px), (max-height: 600px) { .sk-wheel-frame { scale: 0.6; } } .sk-start-reveal-text { font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 1.5rem; font-style: normal; font-family: 'Cinzel', Georgia, serif; color: var(--sk-brass-hi); text-align: center; max-width: 420px; margin-top: 18px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 24px rgba(232, 206, 146, 0.35); opacity: 0; /* Le nom monte d'un cran en apparaissant : posé sec, on ne le voyait pas arriver au bout d'une rotation de cinq secondes. */ transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); } .sk-start-reveal-text.sk-visible { opacity: 1; transform: translateY(0); } /* Ajouter un bot reste une action secondaire du salon : le liseré pointillé la distingue du lancement de partie sans la présenter comme un outil de test. */ .sk-bot-add { background: none; border: 2px dashed rgba(232, 206, 146, 0.28); color: var(--sk-cream-2); box-shadow: none; font-size: 0.8rem; padding: 7px 14px; margin-bottom: 8px; } .sk-bot-add:hover { background: rgba(232, 206, 146, 0.10); box-shadow: none; transform: none; } /* Le bouton ouvre un menu : la flèche le dit, et se retourne quand il est ouvert. */ .sk-bot-add::after { content: '▾'; display: inline-block; margin-left: 7px; font-size: 0.75em; transition: transform 0.15s; } .sk-bot-add[aria-expanded='true']::after { transform: rotate(180deg); } /* Le choix du niveau d'un bot. Il s'ancre sur la rangée d'actions — d'où sa position relative, sans décalage, qui ne déplace rien — et se pose au-dessus d'elle, par-dessus les planches : fermé, il ne prend aucune place, ouvert, il ne pousse rien. */ .sk-lobby-actions { position: relative; } .sk-bot-menu { position: absolute; bottom: 100%; left: 50%; z-index: 30; width: 300px; max-width: calc(100vw - 32px); padding: 6px; transform: translateX(-50%); border-radius: 5px; text-align: left; color: var(--sk-cream); background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 14px 32px rgba(0, 0, 0, 0.7); } .sk-bot-menu[hidden] { display: none; } .sk-bot-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; margin: 0; padding: 7px 9px; border: none; border-radius: 3px; background: none; color: inherit; text-align: left; cursor: pointer; transition: background 0.12s; } .sk-bot-menu-item:hover, .sk-bot-menu-item:focus-visible { outline: none; background: rgba(232, 206, 146, 0.1); } /* Le chiffre du niveau, en tête de ligne ; le cartouche de crânes, à côté du nom, est celui que la marque BOT portera sur la ligne du bot. */ .sk-bot-menu-chiffre { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--sk-brass-lo); border-radius: 50%; font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; font-weight: 700; color: var(--sk-brass); } /* Le dernier niveau choisi : c'est celui qu'on reprend le plus souvent. */ .sk-bot-menu-prefere .sk-bot-menu-chiffre { border-color: var(--sk-brass); background: var(--sk-brass); color: var(--sk-oak-lo); } .sk-bot-menu-texte { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* Le cartouche du niveau, en bout de ligne : la même taille pour les trois niveaux, donc une seule colonne, et la hauteur du nom et de sa difficulté réunis — la place y est, les crânes y sont plus grands que sur la ligne du salon. */ .sk-bot-menu-cranes { flex: none; justify-content: center; align-items: center; gap: 2px; width: 58px; height: 30px; padding: 0; } .sk-bot-menu-cranes i { flex-basis: 14px; height: 20px; } .sk-bot-menu-nom { font-family: 'Cinzel', Georgia, serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--sk-cream); } .sk-bot-menu-desc { font-family: 'Spectral', Georgia, serif; font-size: 0.8rem; line-height: 1.25; color: var(--sk-cream-3); } /* --- Historique des manches (panneau de scores → modale) --- */ .sk-history-link { margin: 10px 0 0; padding: 7px 8px 8px; border: 1px dashed rgba(184, 137, 53, 0.34); border-radius: 2px; background: none; color: var(--sk-cream-2); font-family: 'Cinzel', Georgia, serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sk-history-link:hover { background: rgba(184, 137, 53, 0.12); color: var(--sk-cream); } .sk-history-content { max-width: 760px; } .sk-history-body { max-height: 60vh; overflow: auto; } .sk-hist-table { width: 100%; border-collapse: collapse; font-family: 'Bitter', Georgia, serif; font-size: 0.78rem; } .sk-hist-table th, .sk-hist-table td { padding: 5px 7px; text-align: center; border-bottom: 1px solid rgba(232, 206, 146, 0.11); } .sk-hist-table thead th { color: var(--sk-brass-hi); font-size: 0.72rem; white-space: nowrap; } .sk-hist-round { color: var(--sk-cream-2); font-weight: 800; white-space: nowrap; } .sk-hist-round small { display: block; font-size: 0.6rem; font-weight: 600; opacity: 0.5; } /* Une case = annonce/plis, points de la manche, cumul. Le fond dit tout de suite si le contrat a été tenu, sans avoir à comparer les deux chiffres. */ .sk-hist-table td { line-height: 1.25; } .sk-hist-hit { background: rgba(78, 138, 74, 0.16); } .sk-hist-miss { background: rgba(156, 42, 34, 0.15); } .sk-hist-bid { display: block; font-weight: 800; } .sk-hist-delta { display: block; font-size: 0.72rem; opacity: 0.85; } .sk-hist-total { display: block; font-size: 0.68rem; font-weight: 800; color: var(--sk-brass-hi); } .sk-hist-legend { margin: 10px 0 0; font-size: 0.7rem; text-align: center; } /* --- Pop-up de fin de manche --- */ .sk-round-popup { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .sk-round-popup-inner { border-radius: 5px; padding: 20px 22px 22px; max-width: 360px; width: 100%; /* La planche est centrée sur le PLATEAU, qui est bas dans la fenêtre : elle descend donc de `--sk-plateau-dy`, et une planche déjà haute (neuf joueurs) sortait par le bas — avec le bouton « Manche suivante » avec elle. Une boîte centrée de hauteur H descendue de dy a son bord bas en (V + H) / 2 + dy : pour qu'il reste à 20 px du bord, il faut H <= V - 40 - 2 dy. C'est exactement ce que dit ce calcul, et le `max` écarte le cas d'un plateau plus haut que le centre de la fenêtre, où le décalage rendrait de la place au lieu d'en prendre. À sept joueurs sur un écran d'ordinateur le plafond n'est jamais atteint ; au-delà la planche défile plutôt que de se faire couper. */ max-height: calc(100dvh - 40px - 2 * max(var(--sk-plateau-dy, 0px), 0px)); /* Ce qui défile, c'est la LISTE, pas la planche : le titre, la jauge et « Manche suivante » restent en place. Sinon le bouton de l'hôte partait sous le pli du panneau, à chercher au défilement au moment précis où toute la table l'attend. */ display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 20px 44px rgba(0, 0, 0, 0.7); animation: sk-popup-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); } @keyframes sk-popup-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .sk-round-popup-inner h3 { margin: 0 0 14px; text-align: center; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.16rem; color: var(--sk-cream); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } .sk-round-popup-rows { position: relative; display: flex; flex-direction: column; gap: 5px; padding-left: 10px; } .sk-round-popup-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px 8px; border-radius: 2px; background: rgba(255, 236, 196, 0.035); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.16); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; } /* --- Lien entre alliés du Butin : ligne tracée derrière les lignes du tableau, entre les deux (ou trois, si un joueur cumule deux alliances) joueurs concernés - même si d'autres lignes s'intercalent entre eux. --- */ .sk-round-popup-row--loot { border-left: 3px solid var(--sk-brass-hi); padding-left: 7px; } /* Le pictogramme d'alliance Butin : le tas de doublons peint. Il vaut aux deux endroits — à côté du pseudo sur le tapis, de la formation de l'alliance jusqu'à la fin de la manche, et sur la ligne du récapitulatif, une fois par Butin noué. Dimensionné en `em` : il suit le corps du texte auquel il est accroché, qui n'est pas le même sur la scène peinte (en cqw) et dans la planche de fin de manche. Le ratio est celui de l'image, 231x192. Calé sur le BAS (`50% 100%`) : un tas de pièces pose sur la ligne, il ne flotte pas. */ .sk-round-popup-loot, .sk-seat-loot { display: inline-block; background: url('assets/skin/tas-butin.webp') 50% 100% / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); animation: sk-loot-coin-pop 0.4s ease forwards; } /* Le récapitulatif est une planche à taille fixe : le tas s'y mesure en rem, comme le reste de la planche. */ .sk-round-popup-loot { width: 2.1rem; height: 1.75rem; margin-left: 7px; vertical-align: -0.5rem; } /* Sur la scène peinte, tout est à l'échelle du tapis et le pseudo lui-même est en cqw : le tas se mesure donc en `em`, sur le corps du pseudo auquel il est accroché, sinon il resterait de la même taille sur une scène deux fois plus grande. */ .sk-seat-loot { width: 2.6em; height: 2.16em; margin-left: 5px; vertical-align: -0.72em; } @keyframes sk-loot-coin-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } } .sk-round-popup-row-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* Le pseudo et son « 0/4 plis » tiennent sur la même ligne ; le pseudo cède le premier si la place manque. */ .sk-round-popup-row-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .sk-round-popup-row-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le compteur garde la plume du détail qu'il remplace : Spectral italique, à mi-voix derrière le pseudo. */ .sk-round-popup-row-tricks { flex-shrink: 0; font-family: 'Spectral', Georgia, serif; font-style: italic; font-weight: 400; font-size: 0.78rem; letter-spacing: 0; color: var(--sk-cream-2); } /* Annonce tenue : le compteur passe au vert du delta positif. */ .sk-round-popup-row-tricks--ok { color: #8fc98c; } .sk-round-popup-row-breakdown { font-family: 'Bitter', Georgia, serif; font-weight: 500; font-size: 0.68rem; letter-spacing: 0; color: var(--sk-brass); } .sk-round-popup-row-delta { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.06rem; font-variant-numeric: tabular-nums; flex-shrink: 0; } .sk-delta--up { color: #8fc98c; } .sk-delta--down { color: #e09a90; } /* Le signe est déjà écrit devant le nombre (+10 / -10) : la couleur ne fait que redoubler, elle ne porte jamais l'information seule. */ .sk-round-popup-timer { margin-top: 16px; height: 4px; border-radius: 2px; background: rgba(184, 137, 53, 0.16); overflow: hidden; } .sk-round-popup-bar { height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--sk-brass-lo), var(--sk-brass-hi)); box-shadow: 0 0 8px rgba(232, 206, 146, 0.6); transform-origin: left center; } #sk-btn-next-round { display: block; margin: 12px auto 0; } .sk-score-table { width: 100%; max-width: 380px; border-collapse: collapse; margin: 16px auto; } .sk-score-table th, .sk-score-table td { padding: 8px 12px; border-bottom: 1px solid rgba(232, 206, 146, 0.19); text-align: center; font-family: 'Bitter', Georgia, serif; } .sk-score-table th { color: var(--sk-brass-hi); } /* Éléments introduits pour la mise en page paysage (marque du bandeau, intertitres et légende du panneau de scores, jeton de siège, colonne plis/annonce). Masqués par défaut : sous 1000px la mise en page verticale reste strictement celle d'avant, ces ajouts n'y apparaissent jamais. */ .sk-side-title, .sk-seat-av, .sk-bar-hint, .sk-score-row-bid { display: none; } @media (max-width: 680px) { /* Sur téléphone, l'écran défile : la main doit rester juste sous le tapis, sinon il faut passer tout le panneau (objectif, registre, carnet) pour atteindre ses cartes — c'est-à-dire perdre le tapis de vue au moment de jouer. `display: contents` sort le tapis et le panneau du conteneur pour qu'ils puissent être ordonnés individuellement. */ #sk-screen-game { display: flex; flex-direction: column; } .sk-game-header { order: 0; } .sk-play-area { display: contents; } .sk-table { order: 1; } #sk-power-banner, .sk-power-panel, .sk-turn-indicator { order: 2; } .sk-bid-choices { order: 3; } .sk-hand { order: 4; } .sk-scoreboard { order: 5; margin-top: 12px; } /* Sur téléphone le tapis prend toute la largeur ; sa hauteur suit le ratio de l'image, l'écran défile de toute façon. */ .sk-table { flex: none; width: 100%; max-width: none; border-radius: 6px; } .sk-trick-card .sk-card { --sk-w: 52px; --sk-foot: 19px; --sk-fig: 1.7rem; --sk-corner: 10px; --sk-seal: 8px; --sk-radius: 6px; } .sk-turn-indicator { margin: 6px 0 4px; } .sk-hand { padding: 20px 10px 0; min-height: 128px; } .sk-scoreboard { width: 100%; } .sk-scoreboard-rows { flex-direction: row; flex-wrap: wrap; } .sk-score-row { flex: 1 1 44%; } .sk-seat { width: 84px; } .sk-seat-label { flex-direction: column; gap: 0; padding: 2px 5px 3px; } .sk-seat-name { max-width: 74px; font-size: 0.62rem; } .sk-seat-bid { font-size: 0.6rem; } .sk-seat-leader { top: -8px; right: -10px; width: 19px; height: 19px; box-shadow: 0 0 0 1px rgba(16, 9, 3, 0.92), 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 7px rgba(255, 226, 150, 0.6); } .sk-seat-leader svg { filter: none; } /* Le carnet reste court : sur un écran qui défile déjà, il ne doit pas repousser la main hors de portée. */ .sk-chat-log { max-height: 96px; } .sk-hand { padding: 22px 10px 6px; min-height: 140px; } .sk-hand .sk-card { --sk-w: 72px; --sk-foot: 26px; --sk-fig: 2.3rem; --sk-corner: 13px; --sk-seal: 11px; } } /* ========================================================= MISE EN PAGE PAYSAGE — écran de jeu uniquement, ≥1000px. Reprend l'architecture validée sur la maquette skullking-v2.html : barre du haut fine, table pleine hauteur + panneau de scores à droite, barre d'actions + main groupées en bas, zéro défilement de page (seules les zones trop remplies défilent dans leur cadre). Scopé via :has() à .sk-app quand l'écran de jeu est affiché : les autres écrans (accueil, salon, fin) gardent leur colonne étroite habituelle. En dessous de 1000px, ou sur un navigateur sans :has(), rien ne change : la mise en page verticale actuelle reste la référence mobile, aucun risque de régression. */ /* La condition porte DEUX cas, et le premier est inchangé : sur un écran d'au moins 1000 px, rien de ce bloc ne bouge d'un pixel. Le second ajoute le téléphone COUCHÉ — la scène peinte y remplit l'écran exactement comme sur un ordinateur, mais il n'a que ~850 px de large et retombait dans la mise en page « colonne étroite » : sièges sans médaillon, colonne du registre sans ses intitulés ni sa colonne d'annonces, pseudo à partager avec un jeton dans une plaque de 35 px. Les cotes de ce bloc, taillées pour un grand écran, sont reprises plus bas à l'échelle du téléphone (voir « TÉLÉPHONE COUCHÉ »). */ @media (min-width: 1000px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (hover: none) { .app.sk-app:has(#sk-screen-game:not(.hidden)) { max-width: 1600px; width: 100%; height: 100dvh; padding: 0; display: flex; flex-direction: column; } #sk-screen-game { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* --- Bandeau du haut : plein cadre, marque à gauche, pilule d'avancement (manche + annonces/pli en cours) poussée à droite. --- */ /* En paysage, le bandeau tient toute la largeur et ne défile pas avec le reste : c'est la seule barre permanente de l'écran. */ .sk-game-header { flex-shrink: 0; margin: 0; border-radius: 0; padding: 8px 18px 10px; } /* --- Corps : tapis pleine hauteur + panneau de scores permanent. --- */ .sk-play-area { flex: 1; min-height: 0; align-items: stretch; gap: 12px; padding: 12px 16px 4px; } /* En paysage l'écran ne défile pas : le tapis est borné par la hauteur restante autant que par la largeur. Les 302 px retranchés sont le bandeau, la main et les boutons d'annonce, mesurés à 1440×900. `align-self` neutralise l'étirement du panneau voisin, qui écraserait le ratio. */ .sk-table { align-self: center; max-width: min(620px, calc((100dvh - 302px) * 1369 / 1149)); } /* Cartes du pli : même gabarit que celles de la main. Tout ce qui est posé sur le tapis doit être à la même échelle, sinon les adversaires ont l'air de figurines à côté du jeu. */ /* Taille des cartes du pli, pilotée par renderTrick : sur un tapis trop court pour loger deux cartes entre les sièges opposés, elles rétrécissent plutôt que de venir se poser sur les avatars. L'échelle vaut 1 dès qu'il y a la place. */ .sk-trick-card .sk-card { --sk-w: calc(86px * var(--sk-trick-scale, 1)); --sk-foot: calc(30px * var(--sk-trick-scale, 1)); --sk-fig: calc(2.8rem * var(--sk-trick-scale, 1)); } .sk-trick-caption { width: fit-content; max-width: 100%; margin: 0 auto; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.27); } /* --- Sièges : jeton rond porteur du tour, nom en dessous. Dimensionnés pour tenir l'échelle des cartes posées à côté d'eux. --- */ .sk-seat { width: 132px; } .sk-seat-av { order: 0; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; font-size: 1.6rem; /* Couleur propre au joueur, posée par avatarLook() ; le bordeaux ne sert plus que de repli si la variable manque. */ background: radial-gradient(circle at 35% 30%, var(--sk-av-color, var(--sk-wine-lo)), var(--sk-oak-lo)); border: 3px solid var(--sk-oak-lo); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); transition: all 0.25s; } /* Aucun liseré sur mon propre jeton : il est toujours en bas au centre, et c'est le seul dont on lit le pseudo sans chercher. Le marquer en plus ne faisait que salir l'émail du médaillon. */ .sk-seat--turn .sk-seat-av { background: radial-gradient(circle at 35% 30%, var(--sk-brass-hi), var(--sk-brass-lo)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(184, 137, 53, 0.25); } /* Comme sur la maquette : nom sur sa ligne, annonce en pilule en dessous. */ .sk-seat-label, .sk-seat--turn .sk-seat-label { order: 1; flex-direction: column; gap: 3px; padding: 0; background: none; border: none; box-shadow: none; color: inherit; } .sk-seat-name { font-size: 0.92rem; font-weight: 800; max-width: 132px; } /* Ici la plaque de laiton n'existe plus (voir .sk-seat-label juste au dessus) : le pseudo est posé à même la scène peinte. Le reflet clair hérité de la plaque doublait alors chaque lettre d'un halo crème décalé d'un pixel — le nom du joueur au trait, et lui seul, paraissait flou. On le retire, et on lui donne l'ombre portée sombre des autres textes posés sur le décor. */ .sk-seat--turn .sk-seat-name { color: var(--sk-brass); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); } .sk-seat .sk-seat-bid, .sk-seat--turn .sk-seat-bid { text-shadow: none; font-size: 0.66rem; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.33); border: 1px solid rgba(232, 206, 146, 0.21); color: var(--sk-cream); } .sk-seat .sk-seat-bid--hit, .sk-seat--turn .sk-seat-bid--hit { background: rgba(78, 138, 74, 0.33); border-color: rgba(78, 138, 74, 0.53); color: #9bd79e; } .sk-seat .sk-seat-bid--over, .sk-seat--turn .sk-seat-bid--over { background: rgba(156, 42, 34, 0.33); border-color: rgba(156, 42, 34, 0.53); color: #e09a90; } /* --- Panneau de scores : le poste de pilotage de la manche. La planche peinte tient le fond — pas de `background` ni de `border` ici, ils écraseraient le `border-image` posé plus haut. --- */ .sk-scoreboard { display: flex; flex-direction: column; gap: 6px; min-height: 0; text-align: left; } .sk-side-title { display: block; margin: 0; font-size: 0.6rem; letter-spacing: 0.16em; } .sk-scoreboard-rows { overflow-y: auto; min-height: 0; gap: 4px; } .sk-score-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 6px 9px; border-radius: 9px; font-size: 0.76rem; background: rgba(232, 206, 146, 0.07); border: 1px solid transparent; } .sk-score-row--me { background: rgba(184, 137, 53, 0.12); border-color: rgba(184, 137, 53, 0.3); } .sk-score-row-bid { display: inline-block; font-family: 'Bitter', Georgia, serif; font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #6e5320; white-space: nowrap; } /* Contrat tenu / dépassé : la couleur ne fait que redoubler une forme — le contrat tenu est souligné, le contrat perdu est barré. */ .sk-score-row-bid--hit { color: #2d5a2b; border-bottom: 1.5px solid #2d5a2b; } .sk-score-row-bid--over { color: #5a1512; text-decoration: line-through; text-decoration-thickness: 1.5px; } .sk-score-row-total { min-width: 32px; text-align: right; } /* --- Bas de l'écran : consigne, barre d'actions flottante, main. --- */ .sk-turn-indicator { flex-shrink: 0; margin: 4px 0 6px; padding: 0 16px; font-size: 0.85rem; } #sk-power-banner, .sk-power-panel { margin-left: 16px; margin-right: 16px; } /* Les panneaux de choix (annonce, Tigresse, Joker, valeur déclarée, planche) partagent la même pilule flottante : une seule barre d'actions, toujours au même endroit. :empty écarte #sk-bid-choices quand il est vidé — sans ça une pilule vide flotterait pendant toute la phase de jeu. */ /* --- La barre d'actions : une planche posée sous le tapis ----------- Annonce, Tigresse, Joker, 0/14, Marcher sur la Planche et les pouvoirs de Pirate partagent la même barre, toujours au même endroit. */ .sk-bid-choices:not(.hidden):not(:empty) { flex-shrink: 0; align-items: center; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 6px; padding: 8px 14px 9px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.07), rgba(0, 0, 0, 0.32)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.18), 0 0 0 1px var(--sk-brass-lo), 0 4px 0 rgba(0, 0, 0, 0.5), 0 10px 22px rgba(0, 0, 0, 0.55); } /* Les chiffres d'annonce sont des jetons frappés, comme les doublons de la rangée du haut : c'est le même vocabulaire d'un bout à l'autre. */ .sk-bid-choices .btn { min-width: 38px; padding: 7px 13px 8px; font-size: 0.8rem; letter-spacing: 0.06em; border-radius: 3px; border: 1px solid rgba(184, 137, 53, 0.34); background: linear-gradient(180deg, rgba(255, 236, 196, 0.08), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #33200f, #170d05); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.18); } .sk-bid-choices .btn:hover { background: linear-gradient(180deg, rgba(255, 236, 196, 0.16), rgba(0, 0, 0, 0.26)), linear-gradient(180deg, #432b14, #1e1108); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.3), 0 0 12px rgba(184, 137, 53, 0.28); transform: none; } .sk-bid-choices .btn-primary, .sk-bid-choices .btn-primary:hover { border-color: #5a4318; color: #241505; background: linear-gradient(180deg, rgba(255, 248, 226, 0.28), rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #dcbe7e, var(--sk-brass) 50%, #7a5a20); box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.6); } .sk-bar-hint { display: inline; font-size: 0.7rem; opacity: 0.55; padding: 0 4px; } /* Hauteur calée sur la carte la plus haute une fois l'éventail incliné (la rotation agrandit la boîte englobante) + la place du survol : sans cette marge, les cartes du bas dépassaient sous l'écran. */ .sk-hand { flex-shrink: 0; min-height: 186px; padding: 10px 20px 36px; overflow: visible; } .sk-hand .sk-card { --sk-w: 88px; --sk-foot: 31px; --sk-fig: 3rem; } } /* --- Annonce d'un pouvoir de Pirate --- Remplace le toast (une ligne grise en haut de page) : un pouvoir décide qui mène le pli suivant, modifie une annonce ou impose une carte, il faut que toute la table le voie passer. Ne bloque pas les clics : la partie continue derrière pendant les 3,6 s d'affichage. */ .sk-power-announce { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; pointer-events: none; } .sk-power-announce-card { max-width: min(90vw, 420px); padding: 16px 30px 18px; text-align: center; border-radius: 5px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.32)), linear-gradient(180deg, #33180f, #180a06); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-wine), 0 0 0 2px rgba(16, 9, 3, 0.9), 0 18px 40px rgba(0, 0, 0, 0.7); animation: sk-power-announce-pop 3.6s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; } .sk-power-announce-kicker { margin: 0 0 5px; font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sk-copper); } .sk-power-announce-title { margin: 0 0 7px; font-family: 'Cinzel Decorative', Georgia, serif; font-size: 1.42rem; font-weight: 700; color: var(--sk-cream); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85); } .sk-power-announce-detail { margin: 0; font-family: 'Spectral', Georgia, serif; font-size: 0.94rem; font-weight: 400; line-height: 1.45; color: var(--sk-cream-2); } /* Entrée franche, longue pause de lecture, sortie douce : le texte doit être lisible en entier même en jetant un œil au dernier moment. */ @keyframes sk-power-announce-pop { 0% { opacity: 0; transform: scale(0.75); } 10% { opacity: 1; transform: scale(1.04); } 18% { transform: scale(1); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.96); } } /* --- Pièces de joueur --- */ /* Le SVG occupe une part fixe du jeton : plus d'emoji, donc plus de dépendance à la police du système ni de calage approximatif — la figure est centrée au pixel dans son rond, à toutes les tailles. */ .sk-piece-svg { width: 58%; height: 58%; display: block; color: #fff5e6; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); } /* Choix de sa pièce dans le salon : une grille de 9, celles déjà prises restent visibles (barrées) pour qu'on voie qui a quoi. */ .sk-piece-picker { margin: 0 auto 18px; max-width: 300px; } /* Le côté du médaillon et l'écart entre deux : posés en variables parce qu'ils bougent ENSEMBLE. La pièce retenue est agrandie par un `transform` — qui ne prend pas de place dans la grille — et déborde donc de sa case d'un sixième de sa largeur de chaque côté ; l'écart doit valoir au moins ça, sinon elle mord sur ses voisines. */ /* NEUF PIÈCES, DONC CINQ PUIS QUATRE — et les quatre en QUINCONCE, logées dans les creux des cinq. Alignées en colonnes, la seconde rangée laissait un trou net à droite : la grille se lisait comme une rangée de cinq et une rangée cassée, et le vide attirait l'œil plus que les pièces. La demi-case se prend en DOUBLANT les colonnes : dix demi-colonnes, une pièce sur deux, et la sixième démarre une demi-case plus loin. Le pas des deux rangées reste donc exactement le même — c'est ce qui fait le quinconce — et rien n'est décalé par un `transform`, qui serait entré en conflit avec celui du survol et celui de la pièce retenue. */ .sk-piece-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--sk-piece-ecart, 8px); justify-items: center; } .sk-piece-grid > * { grid-column: span 2; } .sk-piece-grid > :nth-child(6) { grid-column: 2 / span 2; } /* LA SUITE, derrière la flèche : quatre pièces en carré au milieu, deux sur deux. Le quinconce ne se fait pas à quatre sans laisser un côté plus lourd que l'autre ; le carré, lui, tient sur les deux rangées de la vitrine et la grille ne change pas de hauteur. Placées à la main : la vitrine laisse l'auto-placement faire, ici il partirait de la gauche. */ .sk-piece-grid--suite > :nth-child(1) { grid-area: 1 / 4 / auto / span 2; } .sk-piece-grid--suite > :nth-child(2) { grid-area: 1 / 6 / auto / span 2; } /* Depuis que la pieuvre a son propre cadre (voir .sk-jeton-perso), la suite n'en compte plus que trois : la troisième se centre sous les deux autres. */ .sk-piece-grid--suite > :nth-child(3):not(.sk-piece-fleche) { grid-area: 2 / 5 / auto / span 2; } .sk-piece-grid--suite > :nth-child(4):not(.sk-piece-fleche) { grid-area: 2 / 6 / auto / span 2; } /* La flèche tient dans la demi-case que le quinconce laisse vide en bout de seconde rangée : à droite sous la vitrine (elle mène à la suite), à gauche sous la suite (elle ramène). Elle ne prend donc la place d'aucune pièce, et la grille garde sa hauteur d'une page à l'autre. Un chevron de laiton, le même trait que celui des volets repliables (.sk-fold). */ .sk-piece-grid > .sk-piece-fleche { grid-area: 2 / 10 / auto / span 1; align-self: center; width: calc(var(--sk-piece-cote, 48px) * 0.46); height: calc(var(--sk-piece-cote, 48px) * 0.46); padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(16, 9, 3, 0.45); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .sk-piece-grid--suite > .sk-piece-fleche { grid-area: 2 / 1 / auto / span 1; } .sk-piece-fleche::before { content: ''; width: 28%; height: 28%; margin-left: -12%; border-right: 2px solid var(--sk-brass-hi); border-bottom: 2px solid var(--sk-brass-hi); transform: rotate(-45deg); } .sk-piece-grid--suite > .sk-piece-fleche::before { margin-left: 12%; transform: rotate(135deg); } .sk-piece-fleche:hover { background: rgba(16, 9, 3, 0.7); transform: scale(1.12); } .sk-piece-btn { position: relative; width: var(--sk-piece-cote, 48px); height: var(--sk-piece-cote, 48px); padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 40%, var(--sk-av-color, var(--sk-wine)), rgba(0, 0, 0, 0.75)); box-shadow: 0 0 0 3px var(--sk-brass-lo), 0 0 0 4px rgba(16, 9, 3, 0.9), inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 5px 12px rgba(0, 0, 0, 0.6); cursor: pointer; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, opacity 0.15s ease; } .sk-piece-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); } .sk-piece-btn--mine { box-shadow: 0 0 0 3px var(--sk-brass-hi), 0 0 0 4px rgba(16, 9, 3, 0.9), inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 206, 146, 0.55); cursor: default; } .sk-piece-btn--taken { opacity: 0.32; cursor: not-allowed; } /* Barre oblique sur une pièce déjà prise : plus lisible qu'un simple estompage, qui pouvait passer pour un bouton désactivé sans raison. */ .sk-piece-btn--taken::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 3px; border-radius: 2px; background: #fff5e6; transform: rotate(-45deg); } /* LA COULEUR DE SA PIÈCE. Au bord gauche de la bande du pseudo, une pastille arc-en-ciel dit qu'un clic change la couleur ; la palette s'ouvre alors PAR-DESSUS la planche, sous la bande du pseudo (top posé par renderPalette) — positionnée en absolu, elle ne prend aucune place et rien ne bouge dans le salon quand on l'ouvre. */ .sk-piece-picker { position: relative; } .sk-lobby-couleur { flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(#c4161c, #f0701a, #f4c81e, #9ec21e, #2f8a3a, #62d6a6, #0c9aa0, #45b0ea, #1f48a8, #6d3fc4, #c4207e, #f4a8c8, #c4161c); box-shadow: 0 0 0 2px var(--sk-brass-lo), 0 0 0 3px rgba(16, 9, 3, 0.9); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .sk-lobby-couleur:hover, .sk-lobby-couleur:focus-visible, .sk-lobby-couleur[aria-expanded='true'] { transform: scale(1.15); outline: none; box-shadow: 0 0 0 2px var(--sk-brass-hi), 0 0 0 3px rgba(16, 9, 3, 0.9); } .sk-couleur-palette { position: absolute; top: 100%; left: 50%; z-index: 40; transform: translateX(-50%); padding: 8px 12px 12px; border-radius: 10px; background: linear-gradient(180deg, #2a1a0c, #170e06); box-shadow: 0 0 0 1px var(--sk-brass-lo), 0 0 0 2px rgba(16, 9, 3, 0.9), 0 12px 28px rgba(0, 0, 0, 0.7); } .sk-couleur-palette.hidden { display: none; } .sk-couleur-titre { margin: 0 0 8px; text-align: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-brass-hi); } .sk-couleur-grille { display: grid; grid-template-columns: repeat(7, 26px); gap: 9px; } .sk-couleur-btn { position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.35), transparent 55%), var(--sk-couleur); box-shadow: 0 0 0 2px var(--sk-brass-lo), 0 0 0 3px rgba(16, 9, 3, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .sk-couleur-btn:hover:not(:disabled), .sk-couleur-btn:focus-visible { transform: scale(1.15); outline: none; box-shadow: 0 0 0 2px var(--sk-brass-hi), 0 0 0 3px rgba(16, 9, 3, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.35); } .sk-couleur-btn--mine { box-shadow: 0 0 0 2px var(--sk-brass-hi), 0 0 0 4px rgba(16, 9, 3, 0.9), 0 0 12px rgba(232, 206, 146, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.35); } .sk-couleur-btn--taken { opacity: 0.3; cursor: not-allowed; } .sk-couleur-btn--taken::after { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; border-radius: 2px; background: #fff5e6; transform: rotate(-45deg); } /* LE JETON PERSONNEL, sous la discussion : un creux dans la planche, du même dessin que le fil juste au-dessus, avec la pièce au milieu. */ .sk-jeton-perso { margin-top: 12px; padding: 8px 9px 12px; border-radius: 2px; background: linear-gradient(180deg, rgba(10, 6, 3, 0.5), rgba(26, 18, 11, 0.38)); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.22), inset 0 3px 7px rgba(0, 0, 0, 0.5); } .sk-jeton-perso.hidden { display: none; } .sk-jeton-perso-titre { margin: 0 0 8px; text-align: center; } /* Une seule rangée : les pièces gagnées à gauche, le code à droite, séparés d'un filet. Le cadre ne rallonge donc la colonne que d'une ligne de pièces — empilés, ils la faisaient déborder sous la planche, où la grille du salon les coupait. S'il y a trop de pièces, le code passe dessous. */ .sk-jeton-perso-corps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; } .sk-jeton-perso-mes { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; } .sk-jeton-perso .sk-piece-btn { --sk-piece-cote: 40px; } .sk-jeton-perso-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-piece-ecart, 8px); } .sk-jeton-perso-grid.hidden, .sk-jeton-perso-vide.hidden, .sk-jeton-code-msg.hidden { display: none; } .sk-jeton-perso-vide { margin: 0; text-align: center; font-style: italic; font-size: 0.85rem; color: var(--sk-cream-3); } /* Le bouton « Débloquer », à droite des pièces, séparé d'elles par un filet. */ .sk-jeton-debloquer { flex: none; margin-left: 2px; } /* LA FENÊTRE DU CODE, ouverte par « Débloquer ». Le salon s'assombrit, la carte monte en se dépliant, puis les quatre cases tombent l'une après l'autre. À la fermeture, tout repart à l'envers, plus vite. */ .sk-code-fenetre { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 3, 1, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .sk-code-carte { position: relative; width: min(340px, 100%); padding: 30px 24px 22px; border-radius: 3px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(232, 206, 146, 0.12), transparent 60%), linear-gradient(180deg, #3a2a1a, #24180e); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.45), inset 0 0 0 5px rgba(20, 12, 6, 0.6), inset 0 0 0 6px rgba(184, 137, 53, 0.25), 0 24px 60px rgba(0, 0, 0, 0.7); transform-origin: 50% 60%; } .sk-code-fermer { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--sk-cream-3); cursor: pointer; } .sk-code-fermer:hover, .sk-code-fermer:focus-visible { color: var(--sk-brass-hi); } .sk-code-titre { margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; color: var(--sk-brass-hi); } .sk-code-aide { margin: 6px 0 18px; font-size: 0.9rem; color: var(--sk-cream-2); } .sk-code-fenetre--entree { animation: sk-code-fond-entree 0.25s ease both; } .sk-code-fenetre--entree .sk-code-carte { animation: sk-code-carte-entree 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .sk-code-fenetre--entree .sk-pin-case { animation: sk-code-case-entree 0.36s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .sk-code-fenetre--entree .sk-pin-case:nth-of-type(1) { animation-delay: 0.16s; } .sk-code-fenetre--entree .sk-pin-case:nth-of-type(2) { animation-delay: 0.22s; } .sk-code-fenetre--entree .sk-pin-case:nth-of-type(3) { animation-delay: 0.28s; } .sk-code-fenetre--entree .sk-pin-case:nth-of-type(4) { animation-delay: 0.34s; } .sk-code-fenetre--sortie { animation: sk-code-fond-entree 0.22s ease reverse both; } .sk-code-fenetre--sortie .sk-code-carte { animation: sk-code-carte-sortie 0.22s ease-in both; } @keyframes sk-code-fond-entree { from { opacity: 0; } } @keyframes sk-code-carte-entree { from { opacity: 0; transform: translateY(26px) scale(0.86) rotateX(18deg); } } @keyframes sk-code-carte-sortie { to { opacity: 0; transform: translateY(14px) scale(0.92); } } @keyframes sk-code-case-entree { from { opacity: 0; transform: translateY(-14px) scale(0.7); } } /* Les quatre cases du code de connexion (compte.css), montrant des lettres et non des points. Le vrai champ est posé dessus, transparent. */ .sk-jeton-code-cases .sk-pin-case { text-transform: uppercase; } input.sk-jeton-code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: text; } .sk-jeton-code--attente .sk-pin-case { animation: sk-code-attente 0.9s ease-in-out infinite alternate; } @keyframes sk-code-attente { to { box-shadow: inset 0 0 0 1px var(--sk-brass-hi), inset 0 2px 5px rgba(0, 0, 0, 0.6); } } .sk-jeton-code--refus .sk-jeton-code-cases { animation: sk-code-refus 0.4s ease; } @keyframes sk-code-refus { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } .sk-jeton-code-msg { min-height: 1.2em; margin: 10px auto 0; text-align: center; font-size: 0.85rem; color: var(--sk-cream-2); } .sk-jeton-perso-corps > .sk-jeton-code-msg { max-width: 150px; min-height: 0; margin: 0; font-size: 0.78rem; } .sk-jeton-code-msg--erreur { color: #e8846e; } .sk-jeton-code-msg a { color: var(--sk-brass-hi); } @media (prefers-reduced-motion: reduce) { .sk-code-fenetre--entree .sk-code-carte, .sk-code-fenetre--entree .sk-pin-case, .sk-code-fenetre--sortie .sk-code-carte { animation: none; } } /* LE GRATTAGE d'une pièce gagnée par code : le salon s'assombrit, des rayons d'or tournent derrière, la pièce tombe en tournoyant sous sa feuille. */ .sk-grattage { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(40, 26, 10, 0.86), rgba(6, 3, 1, 0.94)); } .sk-grattage.hidden { display: none; } .sk-grattage-rayons { position: absolute; left: 50%; top: 50%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; background: repeating-conic-gradient(rgba(232, 206, 146, 0.13) 0deg 7deg, transparent 7deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); mask-image: radial-gradient(circle, #000 0, transparent 55%); opacity: 0; pointer-events: none; } .sk-grattage--entree .sk-grattage-rayons { animation: sk-rayons-entree 0.8s ease forwards, sk-rayons-tour 24s linear infinite; } @keyframes sk-rayons-entree { to { opacity: 1; } } @keyframes sk-rayons-tour { to { transform: rotate(360deg); } } .sk-grattage-boite { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; text-align: center; } .sk-grattage--entree .sk-grattage-boite { animation: sk-boite-entree 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; } @keyframes sk-boite-entree { from { transform: scale(0.7); opacity: 0; } } .sk-grattage-titre { margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.06em; background: linear-gradient(100deg, #b88935 20%, #fff2c8 45%, #b88935 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sk-titre-reflet 2.4s linear infinite; } @keyframes sk-titre-reflet { from { background-position: 100% 0; } to { background-position: -150% 0; } } .sk-grattage-aide { margin: 6px 0 16px; font-size: 0.95rem; color: var(--sk-cream-2); } .sk-grattage .sk-cache { visibility: hidden; } .sk-grattage-piece { position: relative; width: min(260px, 62vw, 52vh); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(184, 137, 53, 0.5); } .sk-grattage--entree .sk-grattage-piece { animation: sk-piece-chute 1.1s cubic-bezier(0.25, 0.9, 0.3, 1.15) 0.15s both; } @keyframes sk-piece-chute { 0% { transform: translateY(-60vh) rotate(-540deg) scale(0.4); } 70% { transform: translateY(0) rotate(12deg) scale(1.04); } 85% { transform: rotate(-5deg) scale(0.99); } 100% { transform: none; } } .sk-grattage-img, .sk-grattage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .sk-grattage-img { object-fit: contain; } .sk-grattage-canvas { cursor: grab; touch-action: none; transition: opacity 0.6s ease; } .sk-grattage-canvas:active { cursor: grabbing; } .sk-grattage-canvas:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: -4px; } .sk-grattage-canvas--parti { opacity: 0; pointer-events: none; } .sk-grattage--revele .sk-grattage-piece { animation: sk-piece-eclat 1.6s ease-out both; } @keyframes sk-piece-eclat { 0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(184, 137, 53, 0.5); transform: scale(1); } 25% { box-shadow: 0 0 60px 18px rgba(255, 224, 150, 0.75), 0 0 0 3px rgba(255, 230, 170, 0.9); transform: scale(1.08); } 100% { box-shadow: 0 0 34px 6px rgba(232, 206, 146, 0.4), 0 0 0 3px rgba(184, 137, 53, 0.5); transform: scale(1); } } .sk-grattage-nom { min-height: 1.4em; margin: 18px 0 12px; font-family: 'Cinzel', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--sk-brass-hi); } @media (prefers-reduced-motion: reduce) { .sk-grattage--entree .sk-grattage-piece, .sk-grattage--entree .sk-grattage-boite, .sk-grattage--revele .sk-grattage-piece, .sk-grattage-titre { animation: none; } .sk-grattage--entree .sk-grattage-rayons { animation: sk-rayons-entree 0.3s ease forwards; } } /* Pastille de rappel à côté du pseudo dans la liste du salon. */ .sk-lobby-piece { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; vertical-align: middle; border-radius: 50%; border: 2px solid var(--sk-oak-lo); background: radial-gradient(circle at 35% 30%, var(--sk-av-color, var(--sk-wine-lo)), var(--sk-oak-lo)); } /* --- Récap de fin de partie --- */ /* Dans sa planche, le tableau prend toute la largeur disponible : le plafond de 380px de .sk-score-table est celui du récap de manche, qui flotte au milieu de l'écran, pas d'un panneau déjà borné. */ .sk-end-table { margin: 0; max-width: none; } /* Cinq colonnes dans une planche : l'espacement du récap de manche, lui qui dispose de toute la largeur de l'écran, poussait ici le total hors cadre — sur téléphone c'est la page entière qui débordait. */ .sk-end-table th, .sk-end-table td { padding: 7px 6px; } .sk-end-table td:first-child, .sk-end-table th:first-child { width: 2.4em; text-align: center; } .sk-end-table td:nth-child(3), .sk-end-table td:nth-child(4), .sk-end-table th:nth-child(3), .sk-end-table th:nth-child(4) { text-align: center; opacity: 0.8; } /* Sa propre ligne surlignée : dans un tableau à 7 ou 9 joueurs, on cherche d'abord la sienne. */ .sk-end-row--me { background: rgba(250, 204, 21, 0.12); } .sk-end-row--me td { color: var(--sk-brass-hi); } /* En-tête du récap : le lettrage et le verdict tiennent sur une seule ligne d'attention, le reste de l'écran est du contenu. */ .sk-end-head { margin-bottom: 10px; } /* Le nom du vainqueur porte sa pièce au-dessus de lui — pas à côté, et pas au-dessus de la phrase entière : c'est LE nom qu'elle annonce. D'où une colonne inline, qui garde « remporte la partie ! » sur la même ligne. */ .sk-end-winner { display: inline-flex; flex-direction: column; align-items: center; vertical-align: bottom; gap: 2px; } /* Portée à la taille d'un trophée, et dorée par un halo de bougie : c'est la pièce qu'on a suivie toute la partie, elle finit en haut de l'écran. */ .sk-end-winner-piece { display: block; width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.45)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.75)); } /* Une planche par bloc du récap (classement, courbe, faits marquants) : même chêne cerclé de laiton que le salon et les parchemins de la table, pour qu'aucun de ces trois blocs ne flotte sur le fond. */ .sk-end-panel { position: relative; padding: 14px 16px 12px; border-radius: 4px; text-align: left; background: linear-gradient(180deg, rgba(255, 232, 190, 0.07), rgba(0, 0, 0, 0.34)), linear-gradient(178deg, var(--sk-oak-hi) 0%, var(--sk-oak) 34%, var(--sk-oak-lo) 100%); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), 0 0 0 1px var(--sk-brass-lo), 0 14px 30px rgba(0, 0, 0, 0.5); } /* Le classement est un tableau à cinq colonnes : sur une fenêtre étroite il est plus large que sa planche. Il défile alors dans son cadre plutôt que de pousser la page entière hors de l'écran. */ .sk-end-panel--rank { overflow-x: auto; } .sk-end-panel-title { margin: 0 0 8px; font-family: 'Cinzel', Georgia, serif; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sk-brass-hi); opacity: 0.85; } /* Le récap empilé (téléphone, fenêtre étroite) : les planches se suivent. */ .sk-end-grid { display: flex; flex-direction: column; gap: 14px; } .sk-end-actions { margin-top: 16px; } /* Le récap vu par un spectateur : à la place de « Rejouer », ce qui va lui arriver. Une ligne de texte, pas un bouton — il n'a rien à faire. */ .sk-end-spectator-note { margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 0.82rem; color: var(--sk-cream); text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } /* --- Le cadre des faits marquants --------------------------------- Une ligne par fait, en trois temps : l'intitulé gravé au laiton, le joueur (médaillon + pseudo à sa couleur), puis le chiffre. Avant, tout était noyé dans une phrase et rien ne ressortait. */ .sk-fact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } /* Deux lignes seulement : l'intitulé du fait, puis le joueur et son chiffre côte à côte. Empilés sur trois lignes, l'intitulé devait rester minuscule pour ne pas écraser le reste ; sur deux, il peut prendre la taille de ce qu'il annonce — c'est lui qu'on lit en premier. */ .sk-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; padding: 8px 11px; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.05), rgba(0, 0, 0, 0.26)); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.2); border-left: 3px solid var(--sk-brass-lo); } .sk-fact-label { grid-column: 1 / -1; font-family: 'Cinzel', Georgia, serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sk-brass-hi); } .sk-fact-who { grid-column: 1; display: inline-flex; align-items: baseline; gap: 6px; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; } /* Le médaillon suit la ligne de base du pseudo plutôt que son milieu : aligné au centre, il flottait au-dessus du texte voisin. */ .sk-fact-who .sk-nom-piece { align-self: center; } .sk-fact-detail { grid-column: 2; align-self: baseline; font-family: 'Spectral', Georgia, serif; font-size: 0.8rem; line-height: 1.35; color: var(--sk-cream-2); } /* --- Le pseudo à la couleur de sa pièce ----------------------------- Même teinte que le médaillon, remontée en clarté par surFondSombre. Le liseré noir la décolle du bois quand elle en approche. */ .sk-nom { font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85); } .sk-nom-piece { width: 18px; height: 18px; flex-shrink: 0; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); } .sk-lobby-nom { color: inherit; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85); } .sk-end-name { display: inline-flex; align-items: center; gap: 7px; } .sk-end-name-cell, .sk-end-table th:nth-child(2) { text-align: left; } /* --- Courbe des scores (récap de fin) --- */ .sk-curve-wrap { margin: 0; } .sk-curve { width: 100%; height: auto; display: block; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(232, 206, 146, 0.11); } /* La vignette est cliquable : un bouton nu qui ne porte que la courbe, avec la mention « Agrandir » gravée dans un coin. Sans elle, rien ne dit qu'il y a quelque chose derrière — un tracé n'a pas l'air d'un bouton. */ .sk-curve-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; position: relative; font: inherit; color: inherit; } .sk-curve-zoom:hover .sk-curve, .sk-curve-zoom:focus-visible .sk-curve { border-color: rgba(232, 206, 146, 0.34); background: rgba(0, 0, 0, 0.34); } .sk-curve-zoom:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 2px; } .sk-curve-loupe { position: absolute; top: 7px; left: 9px; padding: 2px 7px; border-radius: 3px; font-family: 'Cinzel', Georgia, serif; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sk-brass-hi); background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.34); opacity: 0.5; transition: opacity 0.16s; } .sk-curve-zoom:hover .sk-curve-loupe, .sk-curve-zoom:focus-visible .sk-curve-loupe { opacity: 1; } /* Le quadrillage de la version agrandie : un fond de plan, pas un tracé. Il doit se voir assez pour qu'on suive une valeur jusqu'à la marge, et pas plus — sinon il concurrence les lignes des joueurs. */ .sk-curve-grid { stroke: rgba(232, 206, 146, 0.2); stroke-width: 1; } .sk-curve-axis { stroke: rgba(232, 206, 146, 0.42); stroke-width: 1.4; } .sk-curve-axis-name { fill: rgba(232, 206, 146, 0.6); font-family: 'Cinzel', Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle; } /* Un point par manche, agrandie : c'est ce qui permet de poser une valeur sur une graduation, et de la nommer au survol. */ .sk-curve-dot { stroke: rgba(10, 6, 3, 0.75); stroke-width: 1; } .sk-curve-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.75; } /* Sa propre ligne passe devant et plus épaisse : c'est celle qu'on suit. */ .sk-curve-line--me { stroke-width: 3.4; opacity: 1; } /* Le bout de chaque ligne porte le médaillon du joueur. L'ombre portée le décolle des lignes qui passent derrière ; sans elle il se confond avec la polyligne quand deux joueurs finissent au même score. */ .sk-curve-piece { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); } /* Le sien est déjà plus gros (voir renderScoreCurve) ; on le cercle en plus d'un halo clair, pour le retrouver d'un coup d'œil dans un peloton. */ .sk-curve-piece--me { filter: drop-shadow(0 0 3px rgba(232, 206, 146, 0.75)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); } .sk-curve-zero { stroke: rgba(232, 206, 146, 0.39); stroke-width: 1; stroke-dasharray: 3 3; } .sk-curve-tick, .sk-curve-round { fill: rgba(232, 206, 146, 0.63); font-size: 9px; font-weight: 700; } .sk-curve-tick { text-anchor: end; } .sk-curve-round { text-anchor: middle; } /* Agrandie, la courbe est lue de plus loin : les chiffres des axes doivent suivre, sinon le quadrillage porte des valeurs illisibles. */ .sk-curve--grand .sk-curve-tick, .sk-curve--grand .sk-curve-round { fill: rgba(232, 206, 146, 0.8); font-size: 13px; } .sk-curve--grand .sk-curve-line { stroke-width: 3; } .sk-curve--grand .sk-curve-line--me { stroke-width: 4.6; } /* --- La planche agrandie ------------------------------------------- */ /* La planche prend toute la largeur qu'on lui laisse — la gouttière est déjà celle de `.modal`. Une simple max-width ne suffit pas : posée en élément flexible, la boîte se dimensionnerait sur son contenu. */ .sk-curve-content { width: min(1220px, 100%); max-width: min(1220px, 100%); /* Une colonne dont un seul étage cède : le tracé. Le titre, la légende et le bouton gardent leur hauteur, la courbe prend ce qui reste. Sans ça, la planche défilait en bloc et la légende passait sous le bord — à neuf joueurs, il fallait faire défiler une modale pour savoir quelle couleur était la sienne, ce qui est exactement l'inverse d'un agrandissement. */ display: flex; flex-direction: column; overflow: hidden; /* Une hauteur POSÉE, pas seulement plafonnée : c'est ce qui la rend définie, et sans hauteur définie l'étage du tracé n'a rien contre quoi calculer son `100 %` — il gardait sa taille naturelle et se faisait rogner par le bord au lieu de se serrer. Le plafond de 800 px est la hauteur qu'occupent le tracé à sa taille maximale et ce qui l'entoure : au-delà, la planche se contenterait de gagner du vide. */ height: min(80vh, 800px); /* Sans ce 0, la planche ne peut pas descendre sous la largeur utile de la courbe (voir min-width plus bas) : posée en élément flexible, elle refuserait de rétrécir et déborderait de l'écran au lieu de la laisser défiler dans son cadre. */ min-width: 0; } /* La croix de fermeture, punaisée dans le coin de la planche : agrandir se fait d'un clic, refermer doit se faire du même geste, sans aller chercher le bouton en bas d'une planche qui remplit l'écran. Un clou de laiton, comme ceux qui tiennent les parchemins. */ .sk-modal-x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-size: 1.15rem; line-height: 1; color: var(--sk-brass-hi); background: radial-gradient(circle at 38% 32%, rgba(255, 236, 196, 0.16), rgba(0, 0, 0, 0.42)); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.42), 0 2px 5px rgba(0, 0, 0, 0.55); transition: color 0.15s, box-shadow 0.15s; } .sk-modal-x:hover { color: var(--sk-cream); box-shadow: inset 0 0 0 1px rgba(232, 206, 146, 0.7), 0 2px 7px rgba(0, 0, 0, 0.65); } .sk-modal-x:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 2px; } /* Le titre laisse la place à la croix : centré, il passerait dessous. */ .sk-curve-content h2, .sk-ranking-content h2 { padding: 0 34px; } /* Sur un téléphone, la courbe agrandie ne tient pas en largeur sans devenir illisible — un quadrillage réduit à 380 px ne se lit pas mieux que la vignette. Elle garde donc sa largeur utile et défile dans son cadre. */ .sk-curve-modal-body { /* Le seul étage qui cède. `min-height: 0` sans quoi un élément flexible refuse de descendre sous la taille de son contenu et rien ne rétrécit. */ flex: 1 1 auto; min-height: 0; /* `min-width: 0` sur un élément flexible qui est LUI-MÊME un conteneur flexible : sans lui, il refuse de descendre sous la largeur utile du tracé (520 px, voir plus bas) et c'est la planche entière qui s'élargit et sort de l'écran d'un téléphone, au lieu de laisser le tracé défiler dans son cadre. */ min-width: 0; display: flex; /* `safe` : centré tant que ça rentre, calé au bord dès que ça déborde. Un centrage nu rend le début du tracé inatteignable au défilement. */ align-items: safe center; justify-content: safe center; margin-bottom: 14px; overflow: auto; } /* Rien à borner ici : c'est le tracé lui-même qui est dessiné à la hauteur de la case (voir dessinerCourbeAgrandie). Il prend donc toute la largeur, et sa hauteur tombe juste. */ .sk-curve-modal-body .sk-curve { flex: 0 0 auto; width: 100%; height: auto; min-width: 520px; border-radius: 6px; } .sk-curve-legend--grande { flex: 0 0 auto; margin-top: 0; margin-bottom: 14px; gap: 7px 20px; } .sk-curve-content > .btn { flex: 0 0 auto; } /* La légende agrandie porte les pseudos à la taille d'un texte qu'on lit, pas d'une mention : c'est elle qui rattache une couleur à un joueur, et à sept lignes voisines on y revient plusieurs fois. */ .sk-curve-legend--grande .sk-curve-key { font-family: 'Cinzel', Georgia, serif; font-size: 1.02rem; letter-spacing: 0.03em; opacity: 1; } .sk-curve-legend--grande .sk-curve-key i { width: 24px; height: 5px; } .sk-curve-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 6px; } .sk-curve-key { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; opacity: 0.85; } .sk-curve-key i { width: 14px; height: 3px; border-radius: 2px; } /* --- « Ton objectif » : ce qu'il te reste à faire cette manche --------- Un parchemin scellé à la cire, punaisé au-dessus du registre. C'est la phrase qu'on se répète en jouant, et elle n'était écrite nulle part. */ /* Le parchemin cacheté : le sceau de cire et les quatre clous sont PEINTS dedans. Pas de découpe en 9 tranches ici — un sceau posé au milieu du bord haut s'étirerait avec lui. Le rapport est donc figé et l'image épouse la boîte, ce qui garde le dessin intact. Le texte vit dans la fenêtre de papier plein, mesurée sur l'image : il commence sous la coulée de cire et s'arrête avant les bords déchirés. D'où des marges en pourcentage plutôt qu'en pixels — elles suivent l'image quand la colonne change de largeur. */ .sk-objective { position: relative; margin: 2px 0 14px; aspect-ratio: 1051 / 1313; background: url('assets/skin/parchemin-objectif.webp') 50% 50% / 100% 100% no-repeat; padding: 26% 15% 20% 21%; color: var(--sk-parch-ink); text-align: left; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)); } .sk-objective-kicker { margin: 0 0 4px; font-family: 'Cinzel', Georgia, serif; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #6e5320; } .sk-objective-text { margin: 0; font-family: 'Spectral', Georgia, serif; font-size: 0.9rem; font-weight: 400; line-height: 1.42; color: #33240f; } /* Quatre états. Le liseré de gauche porte l'état pour qu'on le lise sans lire la phrase — et le mot fort du texte est encré, pas seulement teinté, parce qu'un vert et un rouge sont la même couleur pour un deutan. */ .sk-objective--todo { border-left: 4px solid var(--sk-brass); } .sk-objective--tendu { border-left: 4px solid var(--sk-copper); } .sk-objective--ok { border-left: 4px solid var(--sk-kept); } .sk-objective--ok .sk-objective-text { color: #2d5a2b; } .sk-objective--perdu { border-left: 4px solid var(--sk-failed); } .sk-objective--perdu .sk-objective-text { color: #5a1512; } /* Bouton de confirmation de l'annonce : c'est le seul plein laiton de l'écran à ce moment-là, donc le seul endroit où le regard doit aller. Une fois envoyée, il devient un état plutôt qu'une action : il reste lisible mais n'invite plus au clic. */ .sk-bid-confirm { margin-left: 8px; border-color: #5a4318 !important; color: #241505 !important; background: linear-gradient(180deg, rgba(255, 248, 226, 0.28), rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #dcbe7e, var(--sk-brass) 50%, #7a5a20) !important; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45); box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.6), 0 0 18px rgba(232, 206, 146, 0.35) !important; } /* Une fois l'annonce envoyée, le laiton s'éteint — et le reflet clair posé sous les lettres doit s'éteindre avec lui. Il était fait pour de l'encre sombre gravée dans la plaque ; sur ce fond presque noir il devenait un halo crème décalé d'un pixel sous chaque lettre, et le bouton se lisait flou juste après le clic. */ .sk-bid-confirm--done, .sk-bid-confirm--done:hover { text-shadow: none; color: var(--sk-cream-3) !important; background: linear-gradient(180deg, rgba(255, 236, 196, 0.05), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #241a12, #140d08) !important; border-color: rgba(184, 137, 53, 0.34) !important; box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.1) !important; } /* --- Le carnet du capitaine : la discussion de la table --------------- Cuir sombre éclairé par une bougie au coin bas-droit. C'est le seul bloc qui grandit : la place libérée par la progression des manches lui revient. --------------------------------------------------------------------- */ .sk-chat { display: none; flex-direction: column; min-height: 0; margin-top: 12px; } /* Le carnet existe désormais à toutes les largeurs. Il était en display:none sous 1000 px, c'est-à-dire absent sur téléphone : un jeu d'annonces où l'on bluffe se joue en parlant, et les messages envoyés depuis un ordinateur se perdaient sans que personne ne le sache. */ @media (min-width: 1000px) { .sk-chat { display: flex; flex: 1; } } @media (max-width: 999px) { .sk-chat { display: flex; } .sk-chat-log { max-height: 132px; min-height: 64px; } } .sk-chat-log { flex: 1; min-height: 96px; overflow-y: auto; /* Le carré ferré du lot 2 : accroché sur la grande planche, son propre cadre le détache du fond sans qu'on ait à tracer un liseré. */ padding: 0 2px; text-align: left; } .sk-chat-line { margin-bottom: 6px; font-family: 'Spectral', Georgia, serif; font-size: 0.84rem; line-height: 1.5; } /* Les arrivées et les départs. Ce n'est pas quelqu'un qui parle : pas de nom en capitales de laiton, pas de couleur de pièce — de l'italique, un crème éteint et un corps plus petit, pour que le fil garde son relief entre ce qui se dit et ce qui se passe. Le fil est court (une dizaine de lignes visibles), et ces lignes-là doivent pouvoir être sautées d'un coup d'œil. */ .sk-chat-line--systeme { font-style: italic; font-size: 0.78rem; color: var(--sk-cream-3); overflow-wrap: anywhere; } /* Le nom, sur la même ligne que le message et juste avant lui. La couleur est posée en ligne par ligneChat (elle est propre à chacun) ; celle d'ici n'est que le repli, pour un auteur dont on n'a pas la pièce — un message d'avant la reconnexion, par exemple. Les petites capitales et le corps plus serré suffisent à détacher le nom du texte : pas besoin de deux-points ni de gras par-dessus. */ .sk-chat-who { display: inline; margin-right: 5px; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sk-brass); } /* Le message peut contenir n'importe quoi : on force la coupure pour qu'une suite de caractères sans espace ne déborde pas du carnet. Il reste crème pour tout le monde — voir ligneChat. */ .sk-chat-text { display: inline; color: var(--sk-cream-2); overflow-wrap: anywhere; } .sk-chat-form { display: flex; gap: 7px; margin-top: 7px; } .sk-chat-form input { flex: 1; min-width: 0; padding: 8px 11px; border-radius: 2px; border: 0; background: linear-gradient(180deg, #1a120b, #241a12); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.65); color: var(--sk-cream); font-family: 'Spectral', Georgia, serif; font-size: 0.86rem; } .sk-chat-form input::placeholder { color: #6e5c42; font-style: italic; } .sk-chat-form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--sk-brass), inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(184, 137, 53, 0.28); } /* Le bouton d'envoi est un cachet de cire frappé d'une flèche gravée. */ .sk-chat-send { flex-shrink: 0; width: 36px; height: 36px; border: 0; font-size: 0; cursor: pointer; background: var(--sk-arrow) center / 17px 17px no-repeat, radial-gradient(70% 90% at 32% 22%, var(--sk-wine-hi) 0%, var(--sk-wine) 46%, var(--sk-wine-lo) 100%); border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%; box-shadow: inset 0 1px 0 rgba(255, 170, 150, 0.34), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(30, 4, 3, 0.7), 0 6px 14px rgba(0, 0, 0, 0.55); transition: transform 0.14s ease; } .sk-chat-send:hover { transform: translateY(-1px) rotate(-4deg); } /* ===================================================================== RANG GRAVÉ DANS LE REGISTRE L'ordre des lignes ne bouge jamais (c'est le tour de table) : seul ce chiffre romain change de ligne en ligne au fil de la partie. ===================================================================== */ .sk-rank { display: inline-block; width: 17px; font-family: 'Cinzel', Georgia, serif; font-style: normal; font-weight: 700; font-size: 0.56rem; letter-spacing: 0; color: #8a6528; } /* ===================================================================== BANDEAU DE GABIER — pourquoi cette carte est bloquée, sur la carte. Le message était un toast en haut de page, à 700 px du doigt : on retapait trois fois la même carte avant de comprendre l'obligation de suivre. ===================================================================== */ .sk-card__why { position: absolute; left: -3px; right: -3px; bottom: 38%; z-index: 8; padding: 3px 2px 4px; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: calc(var(--sk-w) * 0.088); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--sk-parch-ink); background: linear-gradient(180deg, var(--sk-parch-hi), var(--sk-parch-lo)); box-shadow: 0 0 0 1px var(--sk-brass-lo), 0 2px 5px rgba(0, 0, 0, 0.6); transform: rotate(-4deg); pointer-events: none; } /* Le bandeau doit rester lisible même quand la carte est ternie. */ .sk-card--unplayable .sk-card__why { filter: saturate(3.5) brightness(1.7); } /* ===================================================================== MOUVEMENT RÉDUIT Les états restent portés par la couleur et la forme ; seuls les déplacements, rotations et respirations disparaissent. ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .sk-hand .sk-card:hover, .sk-hand .sk-card:active { transform: none; } .sk-hand--mine::before, .sk-table--mine::after { animation: none; opacity: 1; } } /* ===================================================================== PASTILLE DE COULEUR IMPOSÉE Elle accompagne toujours le nom écrit de la couleur : la pastille ne porte jamais l'information seule (deutéranopie). ===================================================================== */ .sk-suit-dot { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(20, 12, 5, 0.8), inset 0 1px 0 rgba(255, 244, 214, 0.3); } .sk-suit-dot--vert { background: var(--sk-vert); } .sk-suit-dot--jaune { background: var(--sk-jaune); } .sk-suit-dot--violet { background: var(--sk-violet); } .sk-suit-dot--noir { background: var(--sk-noir); } /* ===================================================================== LES ACCESSOIRES — plume et bougie. Ils DÉBORDENT de leur panneau : c'est ce débordement qui donne la profondeur, et c'est pour ça qu'ils ne sont pas peints dans le carnet ni dans la couverture. Un panneau en 9 tranches ne peut rien laisser dépasser — tout ce qui touche son bord se retrouve figé dans un coin ou répété le long d'une arête. ===================================================================== */ .sk-carnet, .sk-chat-livre { position: relative; } /* Le dessin de la plume va du bec (en bas à gauche) au panache (en haut à droite), soit ~55° de l'horizontale. On la fait basculer d'autant pour qu'elle se couche sur le bas de la page : le bec repose sur le papier, le panache sort du livre par la droite. */ .sk-plume { position: absolute; right: -44px; bottom: 2px; width: 128px; transform: rotate(48deg); transform-origin: 50% 50%; filter: drop-shadow(-4px 5px 8px rgba(0, 0, 0, 0.6)); pointer-events: none; z-index: 2; } .sk-bougie { position: absolute; right: -26px; bottom: -26px; width: 112px; filter: drop-shadow(-3px 5px 10px rgba(0, 0, 0, 0.72)); pointer-events: none; z-index: 2; } /* La flamme éclaire vraiment la page : un halo posé sous la bougie, pas dessus, sinon il laverait le texte du chat. */ .sk-chat-livre::after { content: ''; position: absolute; right: 0; bottom: 22px; width: 156px; height: 156px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 104, 0.26) 0%, transparent 68%); pointer-events: none; } /* ===================================================================== NOMBRE DE MANCHES — réglé par l'hôte dans le salon. Un jeton par valeur plutôt qu'un menu : huit choix seulement, et la rangée dit d'elle-même de quoi il s'agit — c'est la piste du bandeau en petit. ===================================================================== */ /* LE PAQUET — deux vignettes à choisir. Ce sont de vraies cartes du paquet, au même rapport 7:10 que sur le tapis : on reconnaît ce qu'on prend. Le choix retenu est frappé en laiton, comme le nombre de manches juste en dessous. */ /* --- LES VOLETS DU SALON --------------------------------------------- Le salon présentait ses réglages tous ouverts : deux vignettes de paquet, trois allures, cinq durées, huit interrupteurs d'extension — une trentaine de commandes en travers de l'écran, alors qu'on n'en touche presque jamais aucune. Le paquet, le rythme et l'extension arrivent maintenant repliés : on voit trois lignes de titre, et ce qu'on va jouer se lit dans l'état inscrit à droite de chacune (« Classiques », « Normal », « 8 modules »). Un
natif, pas un bouton et une classe : c'est lui qui porte l'ouverture, le clavier et l'annonce aux lecteurs d'écran, et il garde son état tout seul entre deux rendus du salon — les réglages se redessinent à chaque événement de lobby, un volet géré en JS se serait refermé sous les doigts de l'hôte à chaque fois qu'un joueur arrive. -------------------------------------------------------------------- */ .sk-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; /* La zone de clic dépasse le texte : le titre fait 0,62 rem, viser une ligne de 9 px au doigt n'est pas une cible. */ padding: 5px 0; list-style: none; user-select: none; } /* Le triangle du navigateur est remplacé par un chevron dessiné : celui de Chrome est noir plein, il jurait sur le bois autant qu'il aurait juré sur le laiton. */ .sk-fold > summary::-webkit-details-marker { display: none; } .sk-fold > summary::after { content: ''; flex: none; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid var(--sk-brass); border-bottom: 2px solid var(--sk-brass); transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; } .sk-fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .sk-fold > summary:hover .sk-fold-nom { color: var(--sk-brass-hi); } .sk-fold-nom { flex: none; } /* L'état, chassé à droite du titre : c'est lui qui rend le repli gratuit. Sans lui, refermer le paquet reviendrait à cacher lequel on joue, et il faudrait rouvrir les trois volets pour savoir à quoi on s'assoit. */ .sk-fold-etat { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-family: 'Spectral', Georgia, serif; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; color: var(--sk-cream-3); } /* Ouvert, l'état ne sert plus à rien : le contenu du volet le dit en entier, et en double il se lisait comme un second réglage posé sur le titre. */ .sk-fold[open] > summary .sk-fold-etat { opacity: 0; } .sk-fold-corps { padding-top: 4px; } /* Le volet de l'extension est coiffé par le TITRE de sa planche, pas par un libellé de champ : il porte donc aussi .sk-lobby-col-title, qui le pose en `block` (deux fois, dont une en paysage). Il faut plus spécifique que ces deux-là pour lui rendre sa rangée titre / état / chevron. */ .sk-ext-card .sk-fold > summary.sk-lobby-col-title { display: flex; padding-bottom: 7px; } .sk-deck-field { margin: 4px auto 2px; max-width: 320px; } .sk-deck-grid { display: flex; justify-content: center; gap: 12px; margin-top: 7px; } .sk-deck-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px 5px 4px; border: none; border-radius: 4px; cursor: pointer; background: rgba(10, 6, 3, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(232, 206, 146, 0.07); transition: transform 0.1s, filter 0.12s; } .sk-deck-choice:hover:not(:disabled) { filter: brightness(1.2); } .sk-deck-choice:active:not(:disabled) { transform: translateY(1px); } .sk-deck-choice:disabled { cursor: default; } .sk-deck-vignette { display: block; width: 54px; height: calc(54px / 0.7); border-radius: 3px; background: #1a0e06 var(--art) 50% 50% / cover no-repeat; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } .sk-deck-nom { font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--sk-cream-3); } .sk-deck-choice.is-on { background: linear-gradient(180deg, rgba(255, 244, 214, 0.2), rgba(0, 0, 0, 0.2) 60%), linear-gradient(160deg, var(--sk-brass), var(--sk-brass-lo)); box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.5), 0 0 0 2px rgba(184, 137, 53, 0.35), 0 2px 5px rgba(0, 0, 0, 0.6); } .sk-deck-choice.is-on .sk-deck-nom { color: #2a1b06; } .sk-deck-hint { margin-top: 7px; } /* LES MANCHES — leur propre planche, en travers, sous l'enseigne. Elles étaient un réglage parmi d'autres dans la colonne du milieu ; c'est pourtant la seule décision du salon que toute la table regarde (elle dit combien de temps on en a), et la seule qui reste dépliée. */ .sk-rounds-card { margin: 4px auto 18px; max-width: 340px; } .sk-rounds-card .sk-rounds-grid { margin-top: 9px; } .sk-rounds-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; } .sk-round-choice { width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.8rem; color: var(--sk-cream-3); background: radial-gradient(circle at 50% 34%, #1c1108, #0c0703); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(184, 137, 53, 0.16), 0 1px 0 rgba(232, 206, 146, 0.08); transition: transform 0.1s, filter 0.12s; } .sk-round-choice:hover:not(:disabled) { filter: brightness(1.35); } .sk-round-choice:active:not(:disabled) { transform: translateY(1px); } /* Le choix retenu est frappé en laiton — même matière que le doublon d'une manche tenue, pour que le lien avec la piste se fasse tout seul. */ .sk-round-choice.is-on { color: #2a1b06; background: linear-gradient(180deg, rgba(255, 244, 214, 0.36), rgba(0, 0, 0, 0.24) 56%), linear-gradient(160deg, var(--sk-brass), var(--sk-brass-lo)); box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.6), inset 0 -1px 0 rgba(42, 27, 6, 0.55), 0 0 0 2px rgba(184, 137, 53, 0.35), 0 2px 5px rgba(0, 0, 0, 0.6); } .sk-round-choice:disabled { cursor: default; } .sk-rounds-hint { margin-top: 7px; } /* --- LE RYTHME DE LA PARTIE ------------------------------------------ Cinq durées d'attente réglables, en pied de la planche des Réglages. Elles ne touchent ni aux règles ni au paquet : c'est du confort de table, et le bloc est bâti pour se lire d'un coup d'œil puis se laisser oublier — trois allures toutes faites en tête, le détail replié en lignes serrées dessous, sous le filet qui le sépare du nombre de manches. */ .sk-pace-field { margin: 14px auto 0; padding-top: 12px; max-width: 336px; border-top: 1px solid rgba(184, 137, 53, 0.24); } .sk-pace-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; } /* Même laiton frappé que les jetons de manche (.sk-round-choice), mais en pastille : « Tranquille » ne tient pas dans un rond de 32 px. */ .sk-pace-preset { padding: 6px 13px; border: none; border-radius: 999px; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--sk-cream-3); background: radial-gradient(circle at 50% 34%, #1c1108, #0c0703); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(184, 137, 53, 0.16), 0 1px 0 rgba(232, 206, 146, 0.08); transition: transform 0.1s, filter 0.12s; } .sk-pace-preset:hover:not(:disabled) { filter: brightness(1.35); } .sk-pace-preset:active:not(:disabled) { transform: translateY(1px); } .sk-pace-preset.is-on { color: #2a1b06; background: linear-gradient(180deg, rgba(255, 244, 214, 0.36), rgba(0, 0, 0, 0.24) 56%), linear-gradient(160deg, var(--sk-brass), var(--sk-brass-lo)); box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.6), inset 0 -1px 0 rgba(42, 27, 6, 0.55), 0 0 0 2px rgba(184, 137, 53, 0.35), 0 2px 5px rgba(0, 0, 0, 0.6); } .sk-pace-preset:disabled { cursor: default; } /* Le détail : même filet de séparation que la liste des extensions, pour que les deux planches se lisent comme un même meuble. */ .sk-pace-list { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(184, 137, 53, 0.24); } .sk-pace-row + .sk-pace-row { margin-top: 7px; } /* Le nom au-dessus de ses valeurs, et non à côté : côte à côte, « Tableau de fin de manche » et quatre durées ne laissaient que deux mots par ligne dans une colonne de 330 px. Le pointillé sous le nom annonce la bulle qui dit à quoi sert la durée — le même signe que partout ailleurs dans le salon. */ .sk-pace-name { /* En `inline-block` le pointillé s'arrête au bout du texte : en `block` il courait sur toute la largeur et se lisait comme un filet de séparation, pas comme le signe « survole-moi » qu'il est partout ailleurs. */ display: inline-block; margin-bottom: 4px; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--sk-cream-3); border-bottom: 1px dotted rgba(184, 137, 53, 0.4); cursor: help; } .sk-pace-choices { display: flex; flex-wrap: wrap; gap: 4px; } /* Les valeurs se partagent la largeur à parts égales : une rangée régulière se compare d'un regard, là où des pastilles taillées sur leur texte faisaient danser « 1,4 s » et « 2 min » d'une ligne à l'autre. */ .sk-pace-choice { flex: 1 1 0; min-width: 44px; padding: 5px 4px; border: none; border-radius: 4px; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-size: 0.7rem; color: var(--sk-cream-3); background: linear-gradient(180deg, rgba(28, 17, 8, 0.95), rgba(12, 7, 3, 0.95)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(184, 137, 53, 0.14); transition: transform 0.1s, filter 0.12s; } .sk-pace-choice:hover:not(:disabled) { filter: brightness(1.4); } .sk-pace-choice:active:not(:disabled) { transform: translateY(1px); } .sk-pace-choice.is-on { color: #2a1b06; background: linear-gradient(180deg, rgba(255, 244, 214, 0.36), rgba(0, 0, 0, 0.24) 56%), linear-gradient(160deg, var(--sk-brass), var(--sk-brass-lo)); box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.6), inset 0 -1px 0 rgba(42, 27, 6, 0.55), 0 1px 4px rgba(0, 0, 0, 0.6); } .sk-pace-choice:disabled { cursor: default; } /* Un pied de bloc, pas de planche : le filet du haut sépare déjà le rythme des manches, un second en bas aurait encadré ces cinq lignes comme si elles pesaient plus que le reste de la colonne. */ .sk-pace-hint { margin: 9px 0 0; text-align: center; } /* ===================================================================== LA SCÈNE — une seule image peinte qui fait le décor ET la table. Il n'y a plus de fond d'un côté et de plateau de l'autre : le feutre est dedans, à une place fixe. D'où le rapport figé. Un `cover` recadrerait selon la fenêtre et le feutre se déplacerait sous les cartes ; ici la scène garde ses proportions et se centre, et tout se pose en pourcentage d'elle. Les marges éventuelles sont comblées par la même image, floutée : on ne voit pas de bandes noires, juste la salle qui continue. ===================================================================== */ #sk-screen-game:not(.hidden) { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; max-width: none; padding: 0; overflow: hidden; } #sk-screen-game:not(.hidden)::before { content: ''; position: absolute; inset: -40px; background: url('assets/skin/scene-jeu.webp') 50% 50% / cover no-repeat; filter: blur(26px) brightness(0.5); } .sk-scene { position: relative; container-type: size; aspect-ratio: 1672 / 941; width: min(100%, calc(100dvh * 1672 / 941)); max-height: 100dvh; background: url('assets/skin/scene-jeu.webp') 50% 50% / 100% 100% no-repeat; } /* --- Le feutre. Coordonnées relevées sur l'image, pas estimées. ------- */ .sk-scene .sk-table { position: absolute; /* Coordonnées du feutre RELEVÉES SUR LA SCÈNE ACTUELLE. Elles ne se devinent pas : chaque nouvelle scène les déplace, et une valeur restée de la scène précédente décale tous les sièges sans rien casser d'autre — c'est exactement ce qui était arrivé ici. */ left: 23.35%; top: 41.55%; width: 38.61%; height: 36.56%; max-width: none; margin: 0; aspect-ratio: auto; background: none; border-radius: 0; box-shadow: none; } /* --- Le bandeau flotte sur le haut de la scène. ----------------------- */ .sk-scene .sk-game-header { position: absolute; top: 1.4%; left: 1.5%; right: 1.5%; margin: 0; z-index: 5; } /* --- La colonne flotte sur la droite, du bandeau jusqu'au bas. -------- */ .sk-scene .sk-play-area { display: contents; } .sk-scene .sk-scoreboard { position: absolute; right: 0.8%; top: 12%; bottom: 2%; width: 21.5%; z-index: 4; overflow: hidden; } /* --- La main, les annonces et les choix, posés sur la scène ----------- */ /* Les pilules d'annonce et de choix sont sorties du flux : la scène est une image à ratio fixe, tout ce qui s'y pose se repère en pourcentages d'elle. Chacune dit ensuite OÙ elle se pose — l'annonce au-dessus du feutre (ou sous le siège, manche 1), les choix de pose en son centre. Le coin bas-gauche, qui les tenait toutes, ne servait qu'à ne pas recouvrir le siège du joueur ; le centrage vertical au-dessus du tapis y arrive aussi, sans obliger l'œil à quitter la table. ----------------------------------------------------------------------- */ .sk-scene .sk-bid-choices, .sk-scene .sk-power-panel, .sk-scene > #sk-hand { position: absolute; z-index: 5; } .sk-scene .sk-bid-choices { width: 34%; margin: 0; justify-content: center; flex-wrap: wrap; } /* La barre est passée AU-DESSUS de la main : à égalité de plan, c'est l'éventail qui gagnait (il vient plus tard dans le document) et il avalait les clics destinés au bouton « Confirmer ». */ .sk-scene .sk-bid-choices:not(.hidden):not(:empty) { width: 26%; max-width: 26%; margin: 0; z-index: 8; } /* À partir de la manche 7, les onze jetons d'annonce + « Confirmer » + le rappel formaient une pilule de 620 px qui débordait jusque sous les cartes : le bouton de confirmation se retrouvait sous la main. Les jetons passent donc en grille de six colonnes, dans une pilule d'un quart de scène — deux rangées au plus, quel que soit le nombre de manches. */ .sk-scene #sk-bid-choices:not(.hidden):not(:empty) { display: grid; /* Le nombre de colonnes vient du JS : il dépend du nombre de jetons, et c'est lui qui garde les rangées égales (voir renderBidChoices). */ grid-template-columns: repeat(var(--sk-bid-cols, 6), minmax(0, 1fr)); gap: 5px; align-content: end; /* La pilule ne s'élargit qu'autant que ses jetons le demandent, et pas au-delà du quart de scène — deux jetons dans une pilule de 26 % font deux plaques de laiton démesurées. */ width: min(26%, max-content); /* Centrée sur le feutre, comme les choix de pose. La demi-largeur part en `translateX` plutôt qu'en `margin-left` : la pilule est en pourcentages de la scène, sa largeur propre est en pourcentages aussi, et translater évite d'avoir à les additionner. */ left: 42.66%; /* 23.35 % + 38.61 % / 2, le centre du feutre */ right: auto; transform: translateX(-50%); /* Au-dessus du tapis, et sous le bandeau : la pilule s'arrête juste avant la bulle de consigne (elle occupe 35 → 37,8 %), qui dit précisément quoi annoncer. Ancrée par le BAS — c'est le bord qui doit rester à sa place quand la grille passe d'une rangée à deux, de la manche 6 à la 7. */ bottom: 66%; top: auto; /* Tout ce qui se pose sur la scène est en pourcentages d'elle ; la pilule, elle, était en pixels. Tant qu'elle vivait dans un coin ça passait — elle grossissait avec les petits écrans sans rien heurter. Placée entre le bandeau et le tapis, il lui faut la même échelle que le reste, sinon elle déborde sous le bandeau dès que la fenêtre se raccourcit. D'où `cqh`, le centième de la hauteur de scène (`.sk-scene` est un conteneur de taille), et des marges en `em` : une seule molette règle toute la pilule. À la hauteur de référence, 1,62 cqh vaut les 0,8 rem d'avant — rien ne bouge sur un grand écran. */ font-size: clamp(9px, 1.62cqh, 13px); gap: 0.4em; padding: 0.63em 1.1em 0.7em; } .sk-scene #sk-bid-choices .sk-bar-hint { font-size: 0.88em; } /* La manche 1 est la seule qu'on annonce à l'aveugle : ta carte reste cachée, et ce que tu lis pour décider, ce sont les cartes des AUTRES, posées à leurs sièges tout autour du feutre. La pilule ne peut donc pas se mettre au-dessus du tapis, elle couvrirait la moitié de ce qu'il faut regarder. Elle descend sous ton propre siège — la seule bande libre : ta main ne tient qu'une carte, l'éventail est vide. */ .sk-scene #sk-bid-choices[data-manche="1"]:not(.hidden):not(:empty) { top: 83.6%; /* le nom du siège se termine à 82,4 % */ bottom: auto; align-content: start; } .sk-scene #sk-bid-choices .btn { min-width: 0; padding: 0.55em 0.16em 0.63em; font-size: 1em; } .sk-scene #sk-bid-choices .sk-bid-confirm { grid-column: 1 / -1; margin-left: 0; padding: 0.55em 0.8em 0.63em; } .sk-scene #sk-bid-choices .sk-bar-hint { grid-column: 1 / -1; text-align: center; padding: 0; line-height: 1.25; } /* Scène trop basse (téléphone couché, fenêtre écrasée) : sous cette hauteur le `clamp` bloque la pilule à 9 px de texte, elle cesse de rétrécir avec la scène et ne tient plus entre le bandeau et le tapis. Elle retourne alors d'où elle vient — le coin bas-gauche, par-dessus l'éventail, qui reste la seule bande où une pilule à taille fixe ne recouvre rien d'utile. */ @container (max-height: 600px) { .sk-scene #sk-bid-choices:not(.hidden):not(:empty), .sk-scene #sk-bid-choices[data-manche="1"]:not(.hidden):not(:empty) { left: 4%; right: auto; top: auto; bottom: 5%; transform: none; align-content: end; } } /* Les choix de POSE — le Joker qui déclare sa famille, le 0/14 qui fixe sa valeur, Marcher sur la Planche qui désigne son Pirate — quittent le coin bas-gauche pour le CENTRE DU FEUTRE. Le coin bas-gauche est la bonne place pour l'annonce : elle reste à l'écran toute la phase d'annonce, à côté d'une main qu'on relit entre deux jetons, et centrée elle recouvrait le siège du joueur. Un choix de pose n'a rien de tout ça — il dure deux secondes, il porte sur la carte qu'on vient de lâcher sur le tapis, et pendant qu'il est ouvert la main est gelée. Le regarder en bas à gauche pendant que la carte part au centre demandait un aller-retour que rien ne justifiait. La Tigresse a ouvert la voie avec son cadre au centre (voir plus bas) ; ces trois-là suivent, à ceci près qu'ils se posent sur le feutre et non sur toute la fenêtre : ils ne décident pas de ce qu'EST la carte, seulement de son détail. Les pourcentages sont ceux du feutre, moitié de sa largeur et de sa hauteur ajoutées à son origine — ils suivent donc `.sk-table` si la scène change. */ /* Le 0/14 puis la Planche ont quitté cette liste : ils ne précisent plus un détail, ils décident de ce qu'une carte EST — la sienne ou celle d'un autre. Ils ont donc leur cadre plein écran, comme la Tigresse. Le Joker, qui ne fait que choisir une famille, reste dans la pilule. */ .sk-scene #sk-joker-choice:not(.hidden) { left: 42.66%; /* 23.35 % + 38.61 % / 2 */ top: 59.83%; /* 41.55 % + 36.56 % / 2 */ right: auto; bottom: auto; width: max-content; max-width: 34%; transform: translate(-50%, -50%); /* Au-dessus de l'éventail comme la barre d'annonce, et au-dessus des cartes du pli, qu'il recouvre le temps du choix. */ z-index: 9; } /* Le panneau de pouvoir est le seul bloc dont le contenu est imprévisible : un simple bouton pour Harry, une grille d'une douzaine de cartes pour Juanita. Il est donc large, centré sous le feutre, et BORNÉ en hauteur — au-delà il défile, il ne recouvre pas la table. */ .sk-scene .sk-power-panel { left: 50%; transform: translateX(-50%); bottom: 3%; width: 62%; max-height: 30%; overflow-y: auto; scrollbar-width: thin; margin: 0; padding: 8px 12px; background: rgba(10, 6, 3, 0.86); border-color: rgba(232, 206, 146, 0.3); z-index: 7; } /* --- LES POUVOIRS QUI SE RÈGLENT D'UN BOUTON ------------------------- Rosie la Douce, Mary Thorne, Rascal le Flambeur, Harry le Géant : quatre questions, une poignée de boutons, et c'est réglé. Ils restaient dans la lanière du bas de l'écran pendant que les quatre autres pauses du jeu — la Tigresse, la Planche, Juanita Jade, le troc de Will — avaient toutes pris le centre. Or c'est la même situation : le pli vient de se résoudre AU CENTRE, tout est gelé, et la question s'ouvrait dans le bas de la fenêtre, là où l'œil n'est justement pas. Les pouvoirs les plus simples du jeu étaient les moins vus. Le cadre se pose donc au CENTRE DU FEUTRE, avec le même rideau de 100vmax qui éteint la table : il n'y a rien à faire ailleurs tant qu'on n'a pas répondu. Les pourcentages sont ceux du feutre, moitié de sa largeur et de sa hauteur ajoutées à son origine — ils suivent donc `.sk-table` si la scène change (chaque scène a les siens, voir .sk-scene--v2 plus bas). Et c'est une RANGÉE : la carte du pirate à gauche, la question à droite. ------------------------------------------------------------------- */ .sk-scene .sk-power-panel--choix { left: 42.66%; /* 23.35 % + 38.61 % / 2 */ top: 59.83%; /* 41.55 % + 36.56 % / 2 */ bottom: auto; transform: translate(-50%, -50%); /* `max-content` puis un plafond : le cadre vaut ce que la question lui demande — trois boutons pour Rascal, neuf noms pour Rosie à table pleine — sans jamais déborder du bois peint. */ width: max-content; max-width: 66%; max-height: 80%; overflow: hidden; flex-direction: row; align-items: center; gap: 20px; padding: 16px 22px 18px; border: 0; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 0 0 100vmax rgba(4, 2, 1, 0.66), 0 18px 44px rgba(0, 0, 0, 0.7); z-index: 40; } /* LA CARTE DU PIRATE, à gauche du cadre. Le bandeau nommait le pouvoir en toutes lettres, mais sur six pirates nommés il faut se souvenir duquel fait quoi — et la carte, elle, est celle qu'on vient de voir remporter le pli. On reconnaît le pouvoir avant d'avoir lu la question. Elle est en `cqh` : la scène est un conteneur de taille, la carte suit donc la hauteur du décor comme les sièges et les cartes du tapis. */ .sk-power-portrait { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; gap: 8px; margin: 0; } .sk-power-portrait .sk-card { --sk-w: clamp(72px, 15cqh, 118px); } /* Même corps que les boutons, à la lettre : même fonte, mêmes capitales, même 0,82 rem. Le nom du pirate et les réponses sont les deux seuls textes gravés du cadre, ils se lisent d'un même souffle. */ .sk-power-portrait-nom { font-family: 'Cinzel', Georgia, serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--sk-cream-2); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } /* Le corps : la question, puis les boutons. C'est la seule partie élastique du cadre — à neuf joueurs, Rosie propose neuf noms, et ce sont eux qui défilent plutôt que de pousser le portrait hors du bois. */ .sk-power-corps { display: flex; flex-direction: column; align-items: center; gap: 12px; /* Le plafond de largeur est ce qui garde au cadre sa forme de PANNEAU. Sans lui, les six ou neuf noms de Rosie s'alignaient sur une seule rangée : un bandeau large et plat de 730 px, c'est-à-dire exactement la lanière qu'on vient de quitter, déménagée au centre. Bornés, les boutons s'enroulent sur deux ou trois rangées et le cadre reste un objet posé sur le feutre. 460 et non 420 : les trois réponses de Harry le Géant — −1, ne pas changer, +1 — forment une échelle, et une échelle se lit sur une ligne. À 420 elles tenaient à quatre pixels près, et un chiffre d'annonce un peu large (un 4 plutôt qu'un 1) suffisait à faire tomber « +1 » sur une seconde rangée. */ max-width: min(460px, 34cqw); min-width: 0; min-height: 0; } /* LA QUESTION, AU CORPS DES BOUTONS. Elle était à 0,86 rem contre 0,82 pour les boutons — plus grande sur le papier, nettement plus petite à l'œil : les boutons sont en capitales de Cinzel, grasses et espacées, où toute la lettre monte à la hauteur de capitale, quand une bas-de-casse de Spectral ne remplit que sa hauteur d'x. Le chiffre de la taille disait donc l'inverse de ce qu'on voyait, et c'est la question — celle qui porte l'information, « ton annonce actuelle : 5 » — qui passait pour une note de bas de page sous ses propres réponses. Un rem tout rond rattrape l'écart : la hauteur d'x rejoint la hauteur de capitale d'en face, et les deux textes pèsent enfin pareil. */ .sk-scene .sk-power-panel--choix .sk-power-consigne { flex-shrink: 0; /* Pas de mesure à elle : c'est le corps qui borne la largeur du cadre, et la question s'y range comme les boutons. Une contrainte de plus lui aurait taillé une colonne étroite au-dessus d'une rangée large. */ margin: 0; font-family: 'Spectral', Georgia, serif; font-size: 1rem; line-height: 1.45; text-align: center; color: var(--sk-cream); } .sk-power-choix { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .sk-power-panel--choix .sk-power-choix .btn { margin: 0; } /* --- ROSIE LA DOUCE : UN TAPIS EN RÉDUCTION -------------------------- Sa question ne porte pas sur des mots mais sur des PLACES : qui entame décide qui joue avant moi. Le cadre s'élargit donc et rend le feutre en petit, les capitaines assis tout autour comme sur le vrai — moi en bas — et la question gravée au centre du feutre, là où le pli se pose. Le cadre est plus grand que celui des trois autres pouvoirs : ce n'est plus une rangée de réponses, c'est une table qu'on regarde. -------------------------------------------------------------------- */ .sk-scene .sk-power-panel--tapis { max-width: 86%; gap: 26px; padding: 18px 26px 20px; } /* Le corps borne la largeur des autres cadres pour que les boutons s'enroulent (voir plus haut) ; ici c'est le tapis qui commande sa taille, et un plafond de 460 px l'écraserait. */ .sk-power-panel--tapis .sk-power-corps { max-width: none; } /* La boîte du tapis : les sièges s'y posent en absolu, aux mêmes angles que sur le feutre. Le rapport 5/3 lui donne la largeur qu'il faut pour que les deux pseudos des extrémités tiennent en entier de part et d'autre. */ .sk-mini-tapis { position: relative; flex: 0 0 auto; width: min(58cqw, 112cqh, 580px); aspect-ratio: 5 / 3; } /* La table, en ovale. En BOIS et non en feutre vert : la scène peinte n'a pas de tapis, on joue sur la table de la taverne, et un ovale vert au milieu du cadre n'aurait rappelé aucune des deux. Bois ciré, veinage et liseré de laiton : c'est la table qu'on a sous les yeux depuis le début de la partie, en réduction. Elle se reconnaît sans légende — c'est tout l'intérêt de la dessiner plutôt que de l'écrire. */ .sk-mini-feutre { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 48%; height: 48%; padding: 0 5%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 26%, rgba(255, 232, 190, 0.14), rgba(0, 0, 0, 0.42) 78%), radial-gradient(ellipse at 50% 30%, var(--sk-oak-hi), var(--sk-oak) 52%, var(--sk-oak-lo)); box-shadow: inset 0 0 0 2px rgba(122, 90, 32, 0.75), inset 0 10px 26px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.5); } /* Le veinage du bois, comme sur les planches du reste de l'écran (.sk-wood). */ .sk-mini-feutre::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: var(--sk-oakgrain); background-size: 300px 120px; opacity: 0.28; mix-blend-mode: overlay; } /* La question est au centre du feutre : elle ne coiffe plus les réponses, elle est l'endroit vers lequel tous les sièges regardent. */ .sk-scene .sk-power-panel--tapis .sk-mini-consigne { position: relative; max-width: 100%; font-size: clamp(0.8rem, 2.7cqh, 1rem); line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } /* UN SIÈGE. Le jeton peint par-dessus le pseudo, comme sur le feutre en paysage : c'est le jeton qu'on reconnaît de loin, le pseudo qui confirme. */ .sk-mini-siege { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 6px 10px 7px; transform: translate(-50%, -50%); border: 0; border-radius: 9px; background: linear-gradient(180deg, #33220f, #190f07); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 5px 12px rgba(0, 0, 0, 0.55); color: var(--sk-cream); cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } .sk-mini-siege:hover, .sk-mini-siege:focus-visible { background: linear-gradient(180deg, #4a3117, #23150a); box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.24), 0 0 0 1px var(--sk-brass-hi), 0 8px 18px rgba(0, 0, 0, 0.6); outline: none; /* La translation fait partie du placement : la répéter, sinon le siège saute au centre du tapis au premier survol. */ transform: translate(-50%, -50%) scale(1.06); } .sk-mini-siege:active { transform: translate(-50%, -50%) scale(0.98); } /* Mon propre siège, en bas : cerclé de laiton, comme le halo du tour sur le feutre. C'est le repère qui rend les autres lisibles — sans lui, un cercle de pseudos ne dit pas de quel côté on est assis. */ .sk-mini-siege--moi { box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.2), 0 0 0 2px var(--sk-brass), 0 5px 12px rgba(0, 0, 0, 0.55); } .sk-mini-jeton { display: flex; align-items: center; justify-content: center; width: clamp(26px, 6.4cqh, 40px); height: clamp(26px, 6.4cqh, 40px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--sk-av-color, var(--sk-wine-lo)), var(--sk-oak-lo)); border: 2px solid var(--sk-oak-lo); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } .sk-mini-jeton .sk-piece-img { display: block; width: 72%; height: 72%; } /* Même gravure que les boutons des autres cadres : Cinzel en capitales. Un pseudo à rallonge est tronqué plutôt que de pousser son voisin hors du bois — le titre du bouton le donne alors en entier. */ .sk-mini-nom { max-width: 14ch; overflow: hidden; font-family: 'Cinzel', Georgia, serif; font-size: clamp(0.66rem, 2.1cqh, 0.8rem); font-weight: 700; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: var(--sk-cream); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } /* Mary Thorne : combien de cartes reste-t-il dans la main visée. Un siège sans carte ne peut pas être désigné : il s'éteint. */ .sk-mini-detail { font-size: clamp(0.6rem, 1.8cqh, 0.72rem); font-style: italic; color: rgba(244, 228, 193, 0.72); } .sk-mini-siege:disabled { opacity: 0.45; cursor: not-allowed; transform: translate(-50%, -50%); } /* SOUS UNE CERTAINE TAILLE, PLUS DE PLAN DE TABLE. Un plan n'a d'intérêt que s'il reste lisible : sur une scène étroite (téléphone tenu debout, fenêtre réduite au quart), les sièges se chevauchaient et débordaient du cadre — le dessin disait alors le contraire de ce qu'il vient dire. On revient donc à ce que font les trois autres pouvoirs : la question, puis les réponses en rangée, dans l'ordre du tour — qui est déjà celui des sièges, moi en tête. Les jetons peints, eux, restent. Le seuil est celui où le tapis descend sous ~420 px de large : la scène garde ses proportions, la largeur et la hauteur disent donc la même chose, mais une fenêtre très plate tombe par la seconde. */ @container (max-width: 720px) or (max-height: 400px) { .sk-mini-tapis { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; width: auto; max-width: min(420px, 60cqw); aspect-ratio: auto; } .sk-mini-feutre { position: static; width: 100%; height: auto; padding: 0 0 2px; transform: none; border-radius: 0; background: none; box-shadow: none; } .sk-mini-feutre::before { content: none; } .sk-mini-siege { position: static; transform: none; } .sk-mini-siege:hover, .sk-mini-siege:focus-visible { transform: scale(1.06); } .sk-mini-siege:active { transform: scale(0.98); } .sk-mini-siege:disabled { transform: none; } } /* La seconde scène a son propre feutre : mêmes moitiés, autres coordonnées. */ .sk-scene--v2 .sk-power-panel--choix { left: 52.48%; /* 32.63 % + 39.69 % / 2 */ top: 50.46%; /* 32.68 % + 35.55 % / 2 */ } /* Fenêtre basse : le portrait rapetisse plutôt que le cadre ne déborde, comme sur le cadre de la Planche. */ @media (max-height: 560px) { .sk-scene .sk-power-panel--choix { gap: 14px; padding: 12px 16px 14px; } .sk-power-portrait .sk-card { --sk-w: clamp(58px, 14cqh, 88px); } /* Le tapis se resserre avec le reste : il vaut mieux un feutre petit mais entier qu'un feutre coupé par le bord du cadre. */ .sk-mini-siege { padding: 4px 7px 5px; gap: 3px; } } /* Juanita Jade est le seul pouvoir qui montre le reste du paquet — jusqu'à 85 cartes. Dans la barre du bas, bornée à 30 % de hauteur, il fallait descendre puis faire défiler pour en voir la moitié : c'est justement ce qu'on demande au joueur de LIRE, en une fois. Le panneau passe donc au centre de l'écran, avec un fond qui éteint la table derrière lui, et les cartes rétrécissent jusqu'à tenir entièrement (ajusterGrilleJuanita). */ .sk-scene .sk-power-panel--juanita { top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%); width: 88%; max-width: 88%; height: 86%; max-height: 86%; overflow: hidden; justify-content: center; gap: 10px; padding: 14px 18px 16px; border-radius: 8px; background: rgba(8, 5, 2, 0.94); box-shadow: 0 0 0 1px var(--sk-brass-lo), 0 0 0 100vmax rgba(4, 2, 1, 0.66), 0 18px 44px rgba(0, 0, 0, 0.7); z-index: 40; } /* Le défilement reste possible en dernier recours (écran minuscule, où même la carte la plus petite ne rentrerait pas) : mieux vaut faire défiler que rogner des cartes sur lesquelles on ne pourrait plus cliquer. Sur un écran d'ordinateur il ne sert jamais — les 85 cartes tiennent. */ .sk-scene .sk-power-panel--juanita .sk-juanita-row { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .sk-juanita-done { flex-shrink: 0; } /* Le minuteur de Juanita Jade : une barre qui se vide. C'est le seul moment du jeu où l'on peut passer trop de temps sans s'en apercevoir — on lit, et le pli reprend sans prévenir. Elle occupe maintenant LA PLACE DE LA CONSIGNE, en tête du panneau : la phrase disait ce qui se voyait déjà (le compte des cartes, la vague qui part seule, le survol), la barre dit la seule chose qui ne se voit pas. Elle en prend donc aussi la présence — une gouttière de six pixels se lisait comme un filet décoratif sous un paragraphe ; seule en tête, il faut qu'elle se remarque du coin de l'œil sans réclamer le regard que les cartes occupent. D'où une vraie barre, plus haute et plus large, avec le creux de bois et le halo de laiton du reste de l'habillage. */ .sk-juanita-minuteur { flex-shrink: 0; width: min(680px, 94%); height: 12px; margin: 2px 0 4px; padding: 2px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, 0.62); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 206, 146, 0.34), 0 0 16px rgba(232, 206, 146, 0.16); } /* `transform-origin: left` : elle se vide par la droite, comme une mèche qui brûle — se vider par le centre ne raconte rien. Le remplissage et la couleur sont animés en JS, la durée venant du serveur. */ .sk-juanita-jauge { display: block; width: 100%; height: 100%; border-radius: 999px; transform-origin: left center; background: var(--sk-brass); /* Le laiton luit dans son creux : sans ça, une barre de douze pixels d'un aplat mat ressemble à une barre de chargement de navigateur. */ box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.45); } @media (prefers-reduced-motion: reduce) { /* Le décompte reste : c'est une information, pas une décoration. */ .sk-juanita-jauge { transition: none; } } /* --- Le troc de Will le Bandit --------------------------------------- Le pouvoir demande DEUX gestes qui n'en font qu'un : encaisser deux cartes du reliquat, en rendre deux. Il se jouait à deux endroits — un cadre dans la barre du bas montrait le butin et portait le bouton, la désignation se faisait dans l'éventail. Or ce cadre était posé PAR-DESSUS l'éventail (bas : 3 %, la main à 3,5 %, et un plan au-dessus d'elle) : les cartes qu'il fallait cliquer passaient dessous. On voyait ce qu'on gagnait, on ne pouvait pas payer. Le troc prend donc le centre de l'écran, comme la Tigresse et comme Juanita Jade, et il porte toute la main. Un seul endroit, un seul geste. --------------------------------------------------------------------- */ .sk-scene .sk-power-panel--will { top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%); /* LA LARGEUR DU CADRE, ET LA TAILLE DES CARTES, D'UNE SEULE MESURE. `--sk-will-cols` compte en largeurs de carte la place qu'il faut : mon éventail (une carte pleine, puis 80 % par carte suivante, le reste passant sous la voisine), le trait de séparation, puis le butin (une carte pleine et 84 % pour la seconde, moins recouverte parce qu'elles ne sont que deux). Le recouvrement est faible — 20 % — parce que le cadre a la place : à un tiers, un éventail de dix cartes ne laissait de la Sirène et du Skull King qu'une bande, et on ne choisit pas ce qu'on ne reconnaît pas. C'est l'inverse de l'éventail du bas de l'écran, qui se resserre parce que la largeur, elle, lui est imposée. Le cadre vaut ce compte à pleine taille de carte ; les cartes, elles, valent ce que le cadre leur laisse (100cqw plus bas). Les deux se déduisent du même nombre, donc ils ne peuvent pas se contredire — et un cadre mesuré par ses cartes tandis que ses cartes le seraient par lui tournerait en rond. `max(560px, …)` : jamais plus étroit que ce qu'il faut à la consigne. */ --sk-will-cols: calc(1 + 0.8 * (var(--sk-will-n, 10) - 1) + 1.84); container-type: inline-size; width: min(92%, max(560px, calc(var(--sk-will-cols) * 98px + 130px))); max-height: 88%; overflow: hidden; gap: 10px; padding: 18px 22px 20px; border: 0; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); /* Le halo de 100vmax éteint la table derrière le cadre : c'est le même rideau que celui de Juanita Jade, et il dit qu'il n'y a rien à faire ailleurs tant que le troc n'est pas réglé. */ box-shadow: inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 0 0 100vmax rgba(4, 2, 1, 0.7), 0 18px 44px rgba(0, 0, 0, 0.7); z-index: 40; } .sk-will-titre { flex-shrink: 0; margin: 0; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--sk-brass-hi); text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } .sk-scene .sk-power-panel--will .sk-will-consigne { flex-shrink: 0; max-width: 62ch; margin: 0; font-family: 'Spectral', Georgia, serif; font-size: 0.82rem; line-height: 1.5; text-align: center; color: var(--sk-cream-2); } .sk-will-consigne b { color: var(--sk-cream); font-weight: 700; } /* LES DEUX ÉVENTAILS, côte à côte : ce que j'avais, et ce que je viens de prendre. C'est la séparation qui raconte le troc — mêlées dans une seule rangée triée, les deux piochées ne se distinguaient que par un liseré, qu'il fallait chercher. */ .sk-will-tables { /* La carte vaut ce que le cadre lui laisse, réparti sur le compte de colonnes. Le plancher de 44 px passe avant : sous cette taille le chiffre du pied n'est plus lisible, mieux vaut alors que le cadre déborde un peu. */ --sk-will-w: clamp(44px, min(11vh, calc((100cqw - 86px) / var(--sk-will-cols))), 98px); flex: 0 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 30px; min-height: 0; padding: 4px 0 0; } .sk-will-groupe { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; } /* L'éventail : les arcs se recouvrent, le premier entier. La levée au survol (9 px) et l'inclinaison de la carte désignée (10 px) demandent leur marge, sinon le cadre rogne net le geste qu'on vient de faire. */ .sk-will-eventail { --sk-lap: 0.2; display: flex; align-items: flex-end; justify-content: center; padding: 14px 0 12px; } /* Le butin n'est que deux cartes : à peine ouvert, à peine recouvert — on doit les lire toutes les deux d'un coup d'œil, c'est le butin. */ .sk-will-eventail--butin { --sk-lap: 0.16; } .sk-will-arc { position: relative; transform-origin: bottom center; flex-shrink: 0; margin-left: calc(var(--sk-will-w) * var(--sk-lap) * -1); } .sk-will-arc:first-child { margin-left: 0; } /* Une carte qu'on survole, ou qu'on désigne, passe devant ses voisines : dans un éventail, ce qui est recouvert n'existe qu'à moitié. */ .sk-will-arc:hover, .sk-will-arc:focus-within { z-index: 6; } .sk-will-arc:has(.sk-will-carte--rendue) { z-index: 5; } /* `.sk-card` pose sa propre largeur de référence : la variable doit être redéclarée SUR la carte, sinon celle du parent ne l'atteint jamais (même nécessité que pour la grille de Juanita Jade). */ .sk-will-tables .sk-card { --sk-w: var(--sk-will-w); } /* Le trait qui sépare les deux mains. Tracé, pas écrit : il dit « et de l'autre côté » sans prendre de mot, comme le slash du choix de la Tigresse. */ .sk-will-separateur { align-self: stretch; flex-shrink: 0; width: 2px; margin-bottom: 30px; border-radius: 1px; background: linear-gradient( 180deg, rgba(184, 137, 53, 0), var(--sk-brass) 22%, var(--sk-brass) 78%, rgba(184, 137, 53, 0) ); opacity: 0.8; } .sk-will-legende { margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--sk-cream-3); opacity: 0.62; } /* « Piochées » vaut pour les deux d'un coup, puisqu'elles sont groupées — et c'est la seule des deux légendes qui apprend quelque chose. Elle est donc frappée en cuivre sur une plaque, à la taille où on la lit sans la chercher, là où l'ancienne étiquette était une pastille de 0,6 rem collée sous chaque carte. */ .sk-will-legende--butin { padding: 3px 12px 4px; border-radius: 2px; background: rgba(6, 4, 2, 0.9); box-shadow: 0 0 0 1px var(--sk-copper), 0 2px 6px rgba(0, 0, 0, 0.5); font-size: 0.78rem; color: #d59a5c; opacity: 1; } .sk-will-carte { position: relative; cursor: pointer; transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1); } .sk-will-carte:hover, .sk-will-carte:focus-visible { transform: translateY(-9px); outline: none; } .sk-will-carte:focus-visible .sk-card, .sk-will-carte:hover .sk-card { box-shadow: 0 0 0 1px var(--sk-brass), 0 0 24px rgba(232, 206, 146, 0.32), 0 14px 24px rgba(0, 0, 0, 0.6); } /* Les piochées gardent leur cercle de cuivre au survol : c'est ce qui les nomme, et on peut très bien vouloir rendre celle qu'on vient de tirer. */ .sk-will-carte--piochee:hover .sk-card, .sk-will-carte--piochee:focus-visible .sk-card { box-shadow: 0 0 0 2px var(--sk-copper), 0 0 24px rgba(232, 206, 146, 0.28), 0 14px 24px rgba(0, 0, 0, 0.6); } /* Elles tombent dans le butin l'une après l'autre à l'ouverture du cadre (le retard est posé par renderWillTroc) : c'est le seul instant où l'on voit ce que le pouvoir rapporte. `backwards` pour qu'elles ne soient pas déjà en place pendant leur retard. Sa propre image, et pas `sk-card-drop` : celle-là finit sur translate(-50%, -50%), le recentrage des cartes du pli, qui sont posées en absolu. Sur une carte rangée dans un éventail elle la faisait partir d'un quart de carte en haut à gauche pour y revenir d'un coup sec à la fin — l'ancienne rangée des piochées traînait ce défaut. */ .sk-will-carte--piochee .sk-card { animation: sk-will-entree 0.44s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; } @keyframes sk-will-entree { from { transform: translateY(-30px) scale(0.84); opacity: 0; } to { transform: none; opacity: 1; } } /* LA CARTE DÉSIGNÉE. Elle ne s'illumine pas — on ne la choisit pas pour la jouer, on s'en sépare. Elle sort de l'éventail par le bas, se ternit, et prend le bandeau de gabier qui dit déjà « Suis le vert » sur une carte bloquée : c'est là que l'œil vient chercher l'état d'une carte dans ce jeu. Un cran d'inclinaison en plus de celle de l'arc, pour qu'elle se décroche de la courbe au lieu d'y glisser. */ .sk-will-carte--rendue, .sk-will-carte--rendue:hover, .sk-will-carte--rendue:focus-visible { transform: translateY(14px) rotate(-5deg); } .sk-will-carte--rendue .sk-card, .sk-will-carte--rendue:hover .sk-card { filter: saturate(0.38) brightness(0.72); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.65); } /* Le cerclage rouge est porté par la CASE, pas par la carte : sur la carte il passait sous le `filter` qui la ternit — une ombre portée se ternit comme le reste — et le rouge y devenait un gris parmi d'autres. Ici il garde sa couleur, et c'est lui qui dit de loin laquelle des douze part. La case épouse maintenant exactement la carte : le cerclage la couvre d'un bord à l'autre. */ .sk-will-carte--rendue::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: var(--sk-radius); box-shadow: 0 0 0 2px var(--sk-failed), 0 0 18px rgba(156, 42, 34, 0.5); pointer-events: none; } .sk-will-marque { opacity: 0; /* Un cran plus gros que le bandeau « Suis le vert » de l'éventail du bas : les cartes du troc sont plus petites que celles de la main, et à 0,088 de leur largeur le mot devenait un pâté de 7 px. */ font-size: calc(var(--sk-w) * 0.13); padding: 4px 2px 5px; transition: opacity 0.14s ease; } /* Le bandeau reste lisible sur une carte ternie — même correctif que pour la carte injouable. */ .sk-will-carte--rendue .sk-will-marque { opacity: 1; filter: saturate(3.5) brightness(1.7); } .sk-will-valider { flex-shrink: 0; min-width: 15rem; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { /* L'inclinaison et le ternissement restent : ils DISENT quelle carte part. Seules les entrées et les levées au survol disparaissent. */ .sk-will-carte--piochee .sk-card { animation: none; } .sk-will-carte:hover, .sk-will-carte:focus-visible { transform: none; } .sk-will-carte--rendue, .sk-will-carte--rendue:hover, .sk-will-carte--rendue:focus-visible { transform: translateY(14px) rotate(-5deg); } } /* Tant que l'annonce n'est pas partie, le bloc appelle. Le repère est le bouton de confirmation lui-même : il porte `--done` une fois l'annonce envoyée, donc pas besoin d'un drapeau supplémentaire côté JS — et le clignotement s'arrête exactement quand il n'y a plus rien à décider. */ .sk-scene .sk-bid-choices:not(.hidden):not(:has(.sk-bid-confirm--done)) { animation: sk-attente 1.7s ease-in-out infinite; } @keyframes sk-attente { 0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 206, 146, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(232, 206, 146, 0.55)); } } @media (prefers-reduced-motion: reduce) { .sk-scene .sk-bid-choices { animation: none; } } /* L'éventail est centré sous MON médaillon, donc sous le centre du feutre : 42,6 % de la scène (le siège du joueur est mesuré à 42,58 %, le feutre à 42,66 %). Il était calé à droite — 32,5 % à 79 %, soit un centre à 55,75 % — parce que la pilule d'annonce occupait le coin bas-gauche et qu'il fallait la contourner. Elle a déménagé au-dessus du tapis, le coin est libre, et l'éventail retombe sous le joueur à qui il appartient : ses cartes partaient vers le centre de la table en biais depuis la droite. Largeur inchangée (46,5 %), seul le centre bouge. */ .sk-scene > #sk-hand { left: 19.35%; /* 42,6 % - 46,5 % / 2 */ right: 34.15%; /* 3,5 % et non 1 % : la carte dépasse son conteneur d'environ 1,7 % vers le bas (le rehaussement au survol est prévu dans sa boîte), et à 1 % le pied des cartes était coupé net par le bord de la scène. Mesuré au rendu, pas estimé. */ bottom: 3.5%; min-height: 0; padding: 0; } /* Les deux plaques encadrent l'éventail, sur le bois que rien n'occupait. Leurs bornes sont celles de la main, prises à l'envers : la main va de 19,35 % à 65,85 %, la colonne de parchemin commence à 77,7 % (droite 0,8 % + largeur 21,5 %). Restent deux bandes de bois sombre, l'une de 19 % à gauche, l'autre de 12 % à droite — la seconde est la plus étroite des deux, et c'est elle qui fixe la largeur du texte des deux plaques. Alignées par le BAS sur l'éventail : les deux plaques n'ont pas la même hauteur (le gain porte parfois trois lignes de détail, le contrat jamais), et c'est le bas qui fait la ligne d'horizon du bandeau. */ .sk-scene > .sk-plaque, .sk-scene > .sk-plaque-pile { position: absolute; bottom: 5.5%; z-index: 5; } /* Le contrat et les plis de la manche vont par deux : ils répondent à la même question — où j'en suis de ce que j'ai annoncé — et se lisent d'un seul regard, donc côte à côte dans la bande de bois à gauche de l'éventail. Cette bande fait 19,35 % (elle bute sur la main) : deux plaques y tiennent, mais pas deux plaques de 10,6 %. Le couple prend donc toute la bande et se la partage à parts égales. `grid-template-columns: 1fr 1fr` d'abord — les deux colonnes font la même largeur, quoi que porte leur texte ; l'étirement par défaut des lignes de grille ensuite — les deux plaques font la même hauteur, alors que le contrat porte trois lignes (libellé, encoches, valeur) et les plis deux. Deux plaques rigoureusement identiques, à la teinte du filet près. Alignée par le bas sur l'éventail et sur le gain, comme avant. */ .sk-scene > .sk-plaque-pile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; /* Le couple se centre dans la bande, et la bande se mesure sur l'éventail PLEIN : la main commence à 19,35 % mais ses 20 px de garde repoussent la première carte à ~20,5 % de la scène, et c'est la carte, pas la boîte, que l'œil prend pour la limite. Le couple se centre donc dans 0 → 20,6 % — un demi-point plus à droite qu'un centrage sur 19,35 %. */ left: 0.4%; width: 19.8%; } /* Dix pour cent plus grandes que la plaque du gain, cadre ET contenu : ce sont les deux chiffres qu'on consulte le plus souvent en choisissant une carte, et la bande de bois de gauche a la place de les porter. La largeur vient de la grille ci-dessus, la hauteur de ce qui suit — creux, gouttière et corps de texte montent du même dixième, pour que la plaque reste exactement la même, seulement plus lisible. */ .sk-plaque-pile > .sk-plaque { /* Étirée à la hauteur de sa voisine, la plus courte des deux centre ses lignes au lieu de les coller en haut. */ justify-content: center; gap: 5.5px; padding: 8.8px 11px 9.9px; border-radius: 3.3px; } .sk-plaque-pile .sk-plaque-k { font-size: 0.616rem; /* 0,56 × 1,1 ; le crénage est en em, il suit */ } .sk-plaque-pile .sk-mine-v, .sk-plaque-pile .sk-round-tricks-v { font-size: 1.122rem; /* 1,02 × 1,1 */ } .sk-plaque-pile .sk-notches { gap: 3.3px; } .sk-plaque-pile .sk-notches i { width: 7.7px; height: 7.7px; } .sk-scene > #sk-gain { left: 66.5%; width: 10.6%; } /* Scène trop basse : la pilule d'annonce est retournée dans le coin bas-gauche (voir le @container qui la renvoie), l'éventail lui rend donc la place et reprend son calage à droite. Ce bloc vient APRÈS la règle ci-dessus, à dessein : à spécificité égale c'est le dernier qui gagne. */ @container (max-height: 600px) { .sk-scene > #sk-hand { left: 32.5%; right: 21%; } /* L'éventail ayant repris la droite, il ne reste plus rien entre lui et la colonne de parchemin : le couple de gauche et le gain se rangent côte à côte dans la bande de gauche, qui vient de gagner treize points de largeur. Ils gardent leur ordre — le total et le contrat d'abord, le gain ensuite. */ .sk-scene > .sk-plaque-pile { left: 0.5%; width: 15.84%; } /* Le gain recule d'un demi-point pour laisser passer le couple élargi ; il reste très loin de l'éventail, qui ne commence qu'à 32,5 %. */ .sk-scene > #sk-gain { left: 17.2%; width: 14%; } } /* --- Les cartes du pli, à l'échelle du feutre ------------------------- Elles étaient en pixels fixes (76 px) : sur une scène qui occupe toute la fenêtre, elles devenaient illisibles. `container-type: size` sur le feutre permet de les exprimer en cqw — 17,5 % de sa largeur — donc elles grandissent exactement comme lui. La même fraction est reprise dans renderTrick (CARTE_LARGEUR_FRAC) pour le calcul d'encombrement. --------------------------------------------------------------------- */ .sk-scene .sk-table { container-type: size; } .sk-scene .sk-trick-card .sk-card { --sk-w: calc(22.5cqw * var(--sk-trick-scale, 1)); --sk-foot: calc(8cqw * var(--sk-trick-scale, 1)); --sk-fig: calc(10.3cqw * var(--sk-trick-scale, 1)); --sk-corner: 4.1cqw; --sk-seal: 3.1cqw; --sk-radius: 1.8cqw; } /* Les jetons de siège suivent, sinon ils paraissent perdus à côté. */ .sk-scene .sk-seat { width: 17cqw; } /* --- Les pièces peintes ------------------------------------------------ Un médaillon par figure, son cerclage émaillé portant déjà la couleur du joueur. Le carré de fond teinté qui existait pour les silhouettes SVG n'a donc plus lieu d'être — il ne ferait que jurer avec l'émail. */ .sk-piece-img { display: block; width: 100%; height: 100%; object-fit: contain; } .sk-lobby-piece, .sk-piece-btn, .sk-seat-avatar { background: none; border-color: transparent; } /* ===================================================================== LA COLONNE EST PEINTE DANS LA SCÈNE — le parchemin, le livre ouvert et la couverture de cuir font partie du décor. Il ne reste donc plus rien à habiller : chaque bloc n'est qu'une fenêtre de texte posée sur sa zone, aux coordonnées relevées sur l'image. C'est pour ça que tous les `border-image` de la colonne sont annulés ici : les garder empilerait un panneau peint sur un panneau peint. ===================================================================== */ .sk-scene .sk-scoreboard { display: contents; } .sk-scene .sk-objective, .sk-scene .sk-carnet, .sk-scene .sk-chat-livre { position: absolute; border: none; border-image: none; background: none; box-shadow: none; filter: none; transform: none; aspect-ratio: auto; margin: 0; z-index: 4; overflow: hidden; } /* Le parchemin cacheté, en haut. Le sceau mord le bord droit : la fenêtre de texte s'arrête avant lui. */ .sk-scene .sk-objective { left: 84.5%; top: 11.8%; width: 8.2%; height: 13.4%; padding: 0; color: #100A04; } /* Le livre ouvert. Le texte enjambe la gouttière — c'est ce que fait un vrai registre tenu à deux pages. */ .sk-scene .sk-carnet { left: 83.4%; top: 34.2%; width: 12.6%; height: 23.6%; padding: 0; color: #3A2510; } /* La couverture de cuir : texte pâle, la bougie l'éclaire depuis la droite. */ .sk-scene .sk-chat-livre { left: 84.2%; top: 70.6%; width: 10.4%; height: 18.2%; } /* La zone de texte défile à l'intérieur, jamais au-delà de sa page. */ .sk-scene .sk-scoreboard-rows, .sk-scene .sk-chat-log { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding: 0; border: none; border-image: none; background: none; box-shadow: none; min-height: 0; } .sk-scene .sk-scoreboard-rows::-webkit-scrollbar, .sk-scene .sk-chat-log::-webkit-scrollbar { display: none; } /* Sur la scène, la page du registre est peinte dans le décor : un aplat au survol, même pâle, se verrait comme une tache sur le papier. Le curseur suffit à dire que ça s'ouvre. */ .sk-scene .sk-scoreboard-rows:hover { background: none; } .sk-scene .sk-carnet .sk-side-title, .sk-scene .sk-chat .sk-side-title, .sk-scene .sk-history-link { display: none; } /* Sauf les Réglages. La colonne peinte laisse un vide entre le registre (qui s'arrête à 57,8 %) et le carnet de cuir (qui commence à 70,6 %) : c'est là que traîne la plume, et c'est la seule bande de la colonne où poser une commande ne recouvre aucun texte. Sélecteur plus précis que la règle ci-dessus, pour ne pas dépendre de l'ordre des blocs. */ /* Le bouton des réglages vit maintenant dans la barre du haut, près de « Quitter », avec son propre contour afin de rester immédiatement repérable sur le bois sombre. */ .sk-game-header .sk-reglages-link { min-height: 30px; padding: 5px 10px; border: 1px solid rgba(232, 206, 146, 0.6); border-radius: 3px; background: linear-gradient(180deg, rgba(255, 236, 196, 0.13), rgba(0, 0, 0, 0.26)); color: var(--sk-cream); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.16), 0 2px 4px rgba(0, 0, 0, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .sk-game-header .sk-reglages-link:hover, .sk-game-header .sk-reglages-link:focus-visible { border-color: var(--sk-brass-hi); background: linear-gradient(180deg, rgba(255, 236, 196, 0.23), rgba(0, 0, 0, 0.2)); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.28), 0 0 0 2px rgba(184, 137, 53, 0.24), 0 3px 7px rgba(0, 0, 0, 0.52); } /* Le parchemin porte son titre, comme un vrai ordre de mission. */ .sk-scene .sk-objective-kicker { display: block; margin: 0 0 3px; font-size: 1.05cqw; font-weight: 700; letter-spacing: 0.12em; text-align: center; /* Même encre noire que le texte : le brun doré le faisait passer pour une mention secondaire alors que c'est le titre du papier. */ color: #100A04; opacity: 1; } /* Le texte est resserré pour tenir dans la feuille : c'est la seule zone de la colonne dont la hauteur ne peut pas défiler sans casser l'effet de papier cloué. */ .sk-scene .sk-objective-text { margin: 0; font-size: 0.92cqw; line-height: 1.3; text-align: center; /* Encre noire franche sur le papier : le brun de la charte se confondait avec les taches du parchemin. Le poids monte aussi d'un cran — un serif clair sur un fond texturé perd ses déliés bien avant sa couleur. */ color: #100A04; font-weight: 600; } /* Les nombres, à l'encre rouge — c'est ce qu'on vient chercher ici. */ .sk-obj-n { color: #A01109; font-weight: 800; } /* Le champ de saisie du chat, sous la couverture. */ .sk-scene .sk-chat { display: contents; } .sk-scene .sk-chat-form { position: absolute; left: 84.2%; top: 89.6%; width: 13.4%; z-index: 5; display: flex; gap: 4px; } /* --- Le cadre de la discussion ---------------------------------------- Le cuir peint disait « il y a un carnet ici », pas « c'est ici qu'on se parle » : sans bord ni fond propres, les messages flottaient sur la couverture et se noyaient dans ses reflets. On pose donc une vitre par dessus le cuir : - un liseré de laiton, qui borne la zone comme le reste de la colonne et donne enfin un bord à la discussion ; - un fond sombre TRANSLUCIDE, pas opaque — le cuir reste lisible en dessous, il perd seulement les hautes lumières qui mangeaient le texte crème. L'alpha est le vrai réglage ici : au-delà de ~0,6 la couverture peinte disparaît et on retrouve la boîte grise d'avant l'habillage ; en deçà de ~0,35 elle ne rattrape plus le contraste. */ .sk-scene .sk-chat-livre { border-radius: 0.55cqw; background: linear-gradient(180deg, rgba(10, 6, 3, 0.54) 0%, rgba(26, 16, 8, 0.44) 100%); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.5), inset 0 0 0.9cqw rgba(0, 0, 0, 0.5), 0 0.12cqw 0.5cqw rgba(0, 0, 0, 0.5); } /* Le texte ne colle plus au liseré : la fenêtre de défilement rentre d'un demi-pas de chaque côté. `inset` et non `padding` — le journal est en position absolue, un padding sur le carnet ne le repousserait pas. */ .sk-scene .sk-chat-log { inset: 0.5cqw 0.75cqw; /* Le halo de la bougie passe par-dessus les lignes ; une ombre portée leur garde leur dessin quand elle les traverse. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72); } /* Tant que personne n'a parlé, la fenêtre dirait « cadre vide » : elle dit plutôt à quoi elle sert. Même formule que le salon. */ .sk-scene .sk-chat-log:empty::before { content: 'Personne n\2019 a encore parlé.'; display: block; font-style: italic; color: var(--sk-cream-3); opacity: 0.75; } /* Les flèches de laiton se rangeaient sur le bord du carnet : elles y chevauchent maintenant le liseré. Un cran vers l'intérieur. */ .sk-scene .sk-chat-livre .sk-defiler { right: 5%; } .sk-scene .sk-chat-livre .sk-defiler--haut { top: 4%; } .sk-scene .sk-chat-livre .sk-defiler--bas { bottom: 4%; } /* --- « Écrire à la table… » ------------------------------------------- L'invite était en #6e5c42 italique sur un champ presque noir, posé sur une scène sombre : deux crans au-dessus de son fond, illisible dès que la bougie ne tombait pas dessus. Elle passe en crème pleine, droite — c'est le seul mot qui dit où l'on écrit, il doit se voir de loin. Le champ reprend par ailleurs le liseré de la fenêtre du dessus : les deux se lisent alors comme un seul bloc « la discussion ». */ .sk-scene .sk-chat-form input { border-radius: 0.35cqw; background: linear-gradient(180deg, rgba(9, 5, 2, 0.74) 0%, rgba(28, 18, 9, 0.64) 100%); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.52), inset 0 2px 5px rgba(0, 0, 0, 0.55); color: var(--sk-cream); } .sk-scene .sk-chat-form input::placeholder { color: var(--sk-cream); opacity: 0.86; font-style: normal; } .sk-scene .sk-chat-form input:focus { box-shadow: inset 0 0 0 1px var(--sk-brass-hi), inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(184, 137, 53, 0.3); } /* --- Les flèches : elles n'apparaissent que si ça déborde ------------- Le bouton porte lui-même l'information « il y a autre chose au-dessus / en dessous ». Une barre de défilement peinte n'aurait aucun sens dans un livre ; deux flèches de laiton, si. */ .sk-defiler { position: absolute; right: 2%; width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%; cursor: pointer; z-index: 6; font-size: 8px; line-height: 1; color: #2A1B0C; background: radial-gradient(circle at 40% 30%, #E8CE92, #B88935 60%, #6E4C13); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; transition: opacity 0.15s; } .sk-defiler--haut { top: 1%; } .sk-defiler--bas { bottom: 1%; } .sk-defiler.is-visible { opacity: 0.92; pointer-events: auto; } .sk-defiler:hover { filter: brightness(1.2); } /* Le porte-icône du bouton de création est vide depuis le retrait des emojis : s'il garde une largeur, le libellé n'est plus centré mais décalé de cette largeur-là. */ .btn-create .btn-icon { display: none; } /* --- Le choix de pièce, depuis que les médaillons sont peints ---------- Chaque médaillon porte son propre cerclage de laiton et son émail. Les anneaux que le CSS ajoutait autour dataient des anciennes silhouettes, qui n'avaient rien : posés sur un médaillon peint, ils en doublent le bord et le halo pâle du « c'est la tienne » effaçait justement l'émail qu'il devait mettre en valeur. L'appartenance se dit donc par la TAILLE, et rien d'autre : la pièce retenue est simplement plus grande que les autres. C'est immédiat, ça ne recouvre rien, et ça ne demande aucune légende. */ .sk-piece-btn, .sk-piece-btn--mine, .sk-piece-btn:hover:not(:disabled) { background: none; box-shadow: none; border: 0; } .sk-piece-btn { transform-origin: 50% 50%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)); transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.16s ease; } /* Au survol elle grandit — l'ancienne version la faisait monter, ce qui, à côté d'une pièce retenue déjà surélevée, donnait l'illusion inverse. */ .sk-piece-btn:hover:not(:disabled) { transform: scale(1.16); filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.7)) brightness(1.1); } .sk-piece-btn--mine, .sk-piece-btn--mine:hover { transform: scale(1.34); filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.75)); cursor: default; } .sk-piece-btn--taken { opacity: 0.34; cursor: not-allowed; } /* --- Loupe sur une carte posée ---------------------------------------- Sur un feutre à 7 ou 9 joueurs, les cartes du pli deviennent petites et leurs pictogrammes illisibles. Le survol la ramène au premier plan, agrandie — sans déplacer les autres, puisqu'elle est en position absolue. Le facteur MULTIPLIE la profondeur au lieu de la remplacer : une carte du fond est réduite par `--sk-depth`, l'écraser d'un `scale` fixe la ferait bondir plus que celles du premier plan. */ .sk-scene .sk-trick-card { cursor: zoom-in; transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.16s ease; } .sk-scene .sk-trick-card:hover { transform: translate(-50%, -50%) scale(calc(var(--sk-depth, 1) * 1.7)); z-index: 9; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75)); /* L'animation de pose fixe elle aussi `transform` : sans cette coupure, survoler une carte dans les 250 ms qui suivent sa pose n'aurait aucun effet, l'animation gardant la main. */ animation: none; } /* ===================================================================== VARIANTE DE SCÈNE — `?scene=2` dans l'URL. Sert à comparer deux fonds sans dupliquer la page : mêmes gabarits, seules les coordonnées des zones changent, puisqu'elles sont propres à chaque peinture. Toutes les valeurs ci-dessous sont RELEVÉES sur l'image (feutre olive isolé par masque, papiers clairs de la colonne, cuir du chat), jamais estimées — une zone devinée décale silencieusement tous les sièges. ===================================================================== */ .sk-scene--v2 { aspect-ratio: 1400 / 768; width: min(100%, calc(100dvh * 1400 / 768)); background-image: url('assets/skin/scene-jeu-2.webp'); } #sk-screen-game:not(.hidden).sk-v2::before { background-image: url('assets/skin/scene-jeu-2.webp'); } /* Le feutre : plus haut et plus centré que sur la première scène. */ .sk-scene--v2 .sk-table { left: 32.63%; top: 32.68%; width: 39.69%; height: 35.55%; } /* La consigne remonte d'autant : le bord haut du feutre passe de 41,6 % à 32,7 %, elle se serait retrouvée dessus. */ .sk-scene--v2 .sk-turn-indicator { top: 25.6%; } .sk-scene--v2 #sk-power-banner { top: 18.8%; } /* --- La colonne de droite ---------------------------------------------- */ .sk-scene--v2 .sk-objective { left: 85.4%; top: 11.4%; width: 7.5%; height: 13.6%; } .sk-scene--v2 .sk-carnet { left: 84.1%; top: 34.2%; width: 11.8%; height: 23.2%; } .sk-scene--v2 .sk-chat-livre { left: 84.6%; top: 70.4%; width: 9.6%; height: 17.6%; } .sk-scene--v2 .sk-chat-form { left: 84.6%; top: 88.8%; width: 12.6%; } /* --- Le registre enjambe la reliure ------------------------------------ Les deux pages du livre sont séparées par une gouttière sombre, à peu près à mi-largeur de la zone (46 % sur la scène 1, 49 % sur la 2). Une colonne qui tombe dessus y devient illisible — le chiffre est bien rendu, il disparaît simplement dans l'ombre du pli. On passe donc la ligne en grille avec un vide au milieu, calé sur la reliure : le nom tient la page de gauche, l'annonce et le score celle de droite. */ .sk-scene .sk-score-row { display: grid; grid-template-columns: 44% 1fr auto; column-gap: 8%; align-items: baseline; width: 100%; } .sk-scene .sk-score-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-scene .sk-score-row-bid, .sk-scene .sk-score-row-total { text-align: right; white-space: nowrap; } /* --- Textes de la colonne, à l'échelle de la scène --------------------- Comme pour l'objectif : en `rem` ils restaient figés pendant que leur page grandissait avec la fenêtre. */ .sk-scene .sk-score-row-name, .sk-scene .sk-score-row-bid { font-size: 0.82cqw; } .sk-scene .sk-score-row-total { font-size: 0.92cqw; } .sk-scene .sk-chat-log, .sk-scene .sk-chat-log * { font-size: 0.8cqw; line-height: 1.35; } .sk-scene .sk-chat-form input { font-size: 0.82cqw; } /* ===================================================================== SALON ET RÉCAP EN PAYSAGE Ces deux écrans vivaient dans la colonne de 420/760px héritée du téléphone : sur un portable, le salon faisait défiler code, réglages, pièces et équipage les uns sous les autres, et le récap enfilait classement, courbe et faits marquants sur près de deux hauteurs d'écran. On les étale ici en planches côte à côte — c'est la même bascule que celle du plateau (voir le bloc min-width:1000px plus haut), et sous ce seuil rien ne change : la grille redevient une colonne et l'ordre du DOM est déjà le bon. ===================================================================== */ /* La barre du salon : « Quitter » à gauche, le code et son bouton de partage à droite. Le code était une planche de la grille, quatrième colonne d'une rangée qu'il déséquilibrait — et sous 1000px il repartait tout en haut de la colonne unique, à gauche comme le reste. Il tient maintenant le coin haut droit à toutes les largeurs, ce qui est l'endroit où on le cherche : on arrive au salon pour le dicter, et on y revient pour le relire. `align-items: flex-start` parce que les deux extrémités n'ont pas la même hauteur — un lien d'un côté, une planche punaisée de l'autre. */ .sk-waiting-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; text-align: left; } /* L'ÉTIQUETTE DU CODE. C'était une planche de chêne punaisée, clou de laiton compris, avec une plaque gravée au milieu : le plus lourd des objets du salon pour la moins durable de ses informations — quatre lettres qu'on lit une fois en arrivant, qu'on dicte, et qu'on ne regarde plus. Elle campait en haut à droite avec le poids d'un titre. Elle se pose maintenant dans le coin haut gauche, sous « Quitter » : du verre fumé cerclé d'un cheveu de laiton, aux angles franchement adoucis — 14px, de quoi lire une pastille et non un panneau. Présente quand on la cherche, muette le reste du temps. */ .sk-share-chip { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px 10px; padding: 10px 15px 12px; border-radius: 17px; background: linear-gradient(180deg, rgba(255, 232, 190, 0.055), rgba(0, 0, 0, 0.28)); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.24), 0 3px 10px rgba(0, 0, 0, 0.35); } .sk-share-chip-label { grid-column: 1 / -1; margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sk-cream-3); } /* Le code reste la seule chose qu'on doit pouvoir lire de loin : il garde le laiton, mais en ENCRE sur un creux d'ombre plutôt qu'en plaque pleine. Le contraste suffit largement à quatre capitales très espacées, et l'étiquette cesse d'être un éclat d'or dans un coin de l'écran. */ .sk-share-chip-code { padding: 5px 12px; border-radius: 11px; background: rgba(0, 0, 0, 0.34); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3); font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--sk-brass-hi); } /* Le bouton n'est plus un bouton de laiton : un contour de cheveu, qui ne s'allume qu'au survol. Copier le lien est un geste qu'on fait une fois. */ .sk-share-chip-copy { padding: 6px 13px; border: 1px solid rgba(184, 137, 53, 0.3); border-radius: 11px; background: none; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sk-cream-3); transition: color 0.16s ease, border-color 0.16s ease; } .sk-share-chip-copy:hover, .sk-share-chip-copy:focus-visible { border-color: var(--sk-brass); color: var(--sk-cream); } /* L'enseigne du salon. Le lettrage peint porte déjà son ombre et sa dorure : il n'a besoin d'aucun cadre, il se pose sur la cloison. */ .sk-waiting-logo { display: block; width: min(340px, 82%); height: auto; margin: 2px auto 16px; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.75)); } /* Intertitres de colonne : ils ne servent qu'en paysage, où les planches sont côte à côte. Empilées, l'ordre parle de lui-même. */ .sk-lobby-col-title { display: none; } /* Sauf ceux qui sont le SEUL libellé de leur bloc — la pièce, la discussion : empilés sur un téléphone, les masquer laissait une grille de médaillons et un fil de messages sans un mot pour dire ce qu'ils sont. Ils gardent en revanche le petit corps du téléphone : le filet et le corps d'intertitre ne valent qu'en paysage, où ils coiffent une planche. (Le code de la partie était le troisième ; il porte maintenant son propre libellé, voir .sk-share-chip-label.) */ .sk-piece-picker .sk-lobby-col-title, .sk-lobby-chat .sk-lobby-col-title { display: block; } /* La planche des manches n'est pas une colonne : elle est seule en travers, au-dessus de la grille, et son titre EST son libellé de réglage — le masquer sur téléphone laissait dix jetons de laiton sans un mot pour dire ce qu'ils comptent. */ .sk-rounds-card .sk-lobby-col-title { display: block; } /* Sauf sur la planche des extensions. Les autres intertitres nomment une COLONNE, et une colonne n'existe qu'en paysage — empilés, ils redisaient ce que la page montre déjà. Celui-ci nomme un RÉGLAGE, comme « Nombre de manches » : sans lui, huit interrupteurs arrivent sur le téléphone sans qu'aucun mot ne dise de quoi ils parlent. */ .sk-ext-card .sk-lobby-col-title { display: block; margin: 16px 0 8px; } /* Et sur celle des réglages, pour la même raison. Elle portait les jetons des manches, qui disaient d'eux-mêmes de quoi il s'agissait ; depuis qu'ils sont passés dans la modale, il ne reste sur le téléphone qu'un bouton « Modifier » et une ligne de résumé — sans ce titre, on ne sait pas ce qu'on modifierait. */ .sk-lobby-settings-card .sk-lobby-col-title { display: block; } /* L'enseigne de la planche de l'équipage est un NOM — le tien — et porte le bouton qui le change. Elle garde la typographie et le filet des autres intertitres (c'est la même classe), mais se met en rangée. Ces deux règles viennent après celles du dessus, et sont plus spécifiques que celle du bloc paysage : c'est ce qui leur garde leur mise en rangée aux deux largeurs. La bande fait 26 px de haut dans les deux états — le nom et son bouton, ou le champ et les siens. C'est ce qui empêche la grille des médaillons de sauter d'un cran quand on ouvre le champ, et 26 px est la hauteur du bouton, l'élément le plus haut des deux rangées. */ .sk-piece-picker .sk-lobby-identite, .sk-piece-picker .sk-rename-form { align-items: center; gap: 10px; min-height: 26px; /* Le filet à toutes les largeurs, alors que les autres enseignes ne l'ont qu'en paysage : celle-ci porte un bouton, et sans trait sous elle « Modifier » flottait au-dessus de la grille des médaillons sans qu'on sache lequel des deux il commandait. Il tient aussi la promesse de la ligne suivante — l'enseigne et le champ qui la remplace font alors la MÊME boîte, et la grille ne saute pas quand on ouvre le champ. */ margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(184, 137, 53, 0.28); } /* Le nom tient le milieu de la PLANCHE, pas le milieu de ce que le bouton lui laisse. D'où les trois colonnes plutôt qu'une rangée : les deux extrêmes valent la même chose, le nom occupe celle du centre, et « Modifier » se pousse au bord de la troisième. En rangée simple il se calait à gauche, décentré de toute la largeur du bouton. Le nom passe avant le vide quand la place manque : la colonne du centre peut manger les deux autres jusqu'au bouton, qui garde la sienne. */ .sk-piece-picker .sk-lobby-identite { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; } .sk-piece-picker .sk-rename-form { display: flex; justify-content: space-between; } /* Le nom est un nom : il garde la casse qu'on lui a donnée, là où les autres enseignes passent en capitales (voir .invite-label). « McGraw » écrit « MCGRAW » n'est plus le pseudo de personne. Long, il s'abrège plutôt que de pousser le bouton hors de la planche. Sa COULEUR est celle de sa pièce, posée par renderMonIdentite : c'est le même repère qu'au rôle juste en dessous, au médaillon du tapis, à la roue et au registre. Sur sa propre planche, on doit reconnaître sa couleur avant d'avoir lu son nom. */ .sk-lobby-identite .sk-lobby-couleur { grid-column: 1; justify-self: start; margin-left: 4px; } .sk-lobby-moi { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; text-transform: none; } .sk-lobby-identite .sk-lobby-edit { grid-column: 3; justify-self: end; } /* Le champ se règle sur la HAUTEUR du bouton qui le flanque, pas sur le confort d'un champ de saisie ordinaire : c'est lui, le plus haut des trois éléments de la bande, qui décide si la grille des pièces saute d'un cran à l'ouverture. */ .sk-rename-form input { flex: 1 1 auto; min-width: 0; padding: 2px 8px; line-height: 1.35; border: 0; border-radius: 2px; background: linear-gradient(180deg, #1a120b, #241a12); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.65); color: var(--sk-cream); font-family: 'Spectral', Georgia, serif; font-size: 0.8rem; } .sk-rename-form input::placeholder { color: #6e5c42; font-style: italic; } .sk-rename-form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--sk-brass), inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(184, 137, 53, 0.28); } /* `margin: 0` n'est pas décoratif : .btn-link porte 16 px de marge basse (il est fait pour clore un écran, pas pour tenir dans une rangée), et cette marge devenait la hauteur de la bande — le champ dépassait l'enseigne de six pixels, et la grille des pièces sautait à chaque ouverture. */ .sk-rename-annuler { flex: none; margin: 0; padding: 0; font-size: 0.72rem; } @media (min-width: 1000px) { /* Le salon tenait sur 1080px tant qu'il portait trois planches. La quatrième — l'extension — les faisait passer à la ligne, et l'équipage se retrouvait seul sur un deuxième rang alors que c'est la planche qu'on regarde le plus. La grille garde son flex-wrap : sous cette largeur elle se replie toute seule, comme avant. */ .app.sk-app:has(#sk-screen-waiting:not(.hidden)) { max-width: 1320px; } .app.sk-app:has(#sk-screen-end:not(.hidden)) { max-width: 1240px; } /* --- Le salon : trois planches, code / réglages / équipage --- */ #sk-screen-waiting { position: relative; padding-top: 4px; } /* Le « Quitter » quitte le flux : centré, il poussait les trois planches vers le bas pour une commande qu'on ne cherche qu'en dernier. Le code en fait autant à l'autre bout (voir plus bas) : la rangée qui les porte retombe alors à zéro, et l'enseigne remonte occuper toute la bande qu'ils laissent libre entre eux. */ .sk-waiting-top { display: block; margin: 0; } #sk-btn-leave-waiting { position: absolute; left: 0; top: 0; margin: 0; } /* `flex-start` et non `stretch` : les trois planches n'ont pas la même charge (un code, quatre réglages, neuf pièces et sept matelots). Mises à la même hauteur, les deux premières se terminaient sur un grand vide de bois — chacune s'arrête donc où son contenu s'arrête, comme des planches punaisées de tailles différentes. */ /* En paysage l'enseigne a la place de s'ouvrir : elle passe au-dessus des trois planches et occupe la bande qui restait vide en haut de l'écran. Le « Quitter » est en absolu dans le coin, elle ne le heurte pas. */ .sk-waiting-logo { width: 460px; margin: 0 auto 6px; } .sk-lobby-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px; margin: 16px 0 0; } /* Chaque colonne est une planche punaisée, comme le bloc d'invitation : celui-ci en portait déjà le décor, les deux autres le reprennent pour qu'aucune ne flotte à côté des autres. */ .sk-lobby-col { position: relative; flex: 1 1 250px; min-width: 0; max-width: 330px; margin: 0; padding: 31px 16px 16px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 232, 190, 0.09), rgba(0, 0, 0, 0.34)), linear-gradient(178deg, var(--sk-oak-hi) 0%, var(--sk-oak) 34%, var(--sk-oak-lo) 100%); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), 0 0 0 1px var(--sk-brass-lo), 0 16px 34px rgba(0, 0, 0, 0.55); } /* Le clou peint qui tient la planche, dans sa marge haute : le `padding-top` de chaque planche lui réserve sa hauteur plus le jeu, sans quoi il retombe sur les capitales du titre. */ .sk-lobby-col::before { content: ''; position: absolute; top: 7px; left: 50%; margin-left: -8px; width: 16px; height: 16px; background: url('assets/skin/clou-laiton.webp') 50% 50% / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); } /* La planche des manches est hors grille : elle ne suit pas les colonnes, elle les coiffe. Plus large qu'elles — la rangée des dix jetons fait 298 px à elle seule et se lit mieux avec de l'air autour. Elle vient après .sk-lobby-col, dont elle reprend le bois : à spécificité égale, c'est l'ordre qui lui rend sa largeur et son centrage. */ .sk-rounds-card { max-width: 420px; margin: 6px auto 0; padding-bottom: 14px; } /* L'équipage est la planche qu'on regarde le plus (qui est là, qui a pris quelle pièce) : elle a droit à plus de largeur que les deux autres. */ /* La rangée des dix manches fait 298px à elle seule : sous cette largeur le « 10 » retombe seul sur une deuxième ligne. */ /* La rangée des dix manches fait 298px de contenu à elle seule, soit 330px de planche : c'est un plancher, pas une préférence. Il était tenu tant que trois planches se partageaient la largeur ; la quatrième l'a ramené au pixel près, et le « 10 » retombait seul sur une deuxième ligne. */ /* Les cotes vivent sur la pile qui la contient (voir .sk-lobby-pile) : la planche des réglages, elle, remplit simplement la colonne. On les garde ici quand même — c'est la planche qui les justifie, et la pile n'existe que pour l'accompagner. */ .sk-lobby-col--settings { flex: 1.1 1 336px; max-width: 360px; } /* La pile des réglages : la planche des réglages et celle des extensions l'une sous l'autre, dans la colonne du milieu. Elle en porte donc la largeur (voir .sk-lobby-col--settings, dont elle reprend les cotes) et l'écart entre ses deux planches. Ses planches, elles, ne grandissent pas d'elles-mêmes. Sans ce `flex: none`, elles héritaient du `flex: 1 1 250px` de .sk-lobby-col — qui, dans une colonne, se lit en HAUTEUR : les réglages et les extensions se partageaient la pile à parts égales, chacun étiré sur 250 px de vide. */ .sk-lobby-pile { display: flex; flex-direction: column; gap: 16px; flex: 1.1 1 336px; min-width: 0; max-width: 360px; } .sk-lobby-pile > .sk-lobby-col { flex: none; max-width: none; } /* Les trois planches gardent leurs hauts alignés : le bouton des règles flotte au-dessus de la pile, dans le vide laissé à gauche des réglages. */ #sk-screen-waiting .sk-lobby-pile { position: relative; } .sk-regles-bouton--salon { position: absolute; left: 0; right: 0; bottom: calc(100% + 18px); margin: 0 auto; } /* La discussion tient le bout de la rangée, à droite de l'équipage : c'est à lui qu'on écrit, et le fil se lit à côté de la liste de ceux qui attendent plutôt que sous le code de la partie. Une planche plus étroite que les autres — une ligne de message est courte, et la largeur qu'elle rend profite aux réglages. */ .sk-lobby-chat { margin: 0; flex: 0.9 1 260px; max-width: 320px; /* Plus serrée que les autres planches sur les côtés et en pied — tout ce qu'on lui prend en marges, elle le rend en lignes lisibles. En tête, non : le clou y loge comme partout ailleurs. */ padding: 29px 13px 11px; } .sk-lobby-chat .sk-lobby-col-title { margin-bottom: 9px; padding-bottom: 6px; } .sk-lobby-chat .sk-chat-form { margin-top: 8px; } /* Un CREUX dans la planche, comme le champ de saisie juste en dessous : c'était le seul bloc du salon dont le contenu flottait à même le bois, sans rien pour dire où le fil commence ni où il s'arrête. La hauteur, elle, vient de la règle de base — elle ne se mesure plus. */ .sk-lobby-chat .sk-chat-log { /* Seule dans sa colonne, la planche n'a plus le code de la partie au-dessus d'elle : le fil reprend la hauteur qu'il lui laissait — six messages au lieu de trois. Toujours une hauteur FIXE, pour la raison d'avant : les volets voisins s'ouvrent et se referment, un fil qui se calerait sur eux changerait de taille sous les yeux de qui écrit dedans. */ height: 186px; padding: 8px 9px; border-radius: 2px; background: linear-gradient(180deg, rgba(10, 6, 3, 0.5), rgba(26, 18, 11, 0.38)); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.22), inset 0 3px 7px rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: rgba(184, 137, 53, 0.4) transparent; } /* Salon tout juste ouvert : le creux vide se lisait comme un bloc cassé. Une ligne suffit à dire que c'est un fil, et qu'il n'a rien encore. */ .sk-lobby-chat .sk-chat-log:empty::before { content: 'Personne n\2019 a encore parlé.'; display: block; padding-top: 4px; font-family: 'Spectral', Georgia, serif; font-size: 0.8rem; font-style: italic; color: var(--sk-cream-3); opacity: 0.7; } /* L'équipage passe à gauche : c'est la planche qu'on regarde en premier en arrivant (qui est là, qui manque), et elle était au bout de la rangée. `order` plutôt qu'un déplacement dans le HTML — sous 1000px la grille redevient une colonne et c'est l'ordre du DOM qui empile, où le code de la partie doit rester en tête et la discussion en pied. */ .sk-lobby-col--crew { /* Le facteur de compacité de la planche. 1 = les cotes de dessin : médaillons de 62 px, rangs de 38. Quand la fenêtre est trop courte pour la table pleine, c'est LUI qui bouge (posé en JS, voir ajusterHauteurSalon) — les pièces et les rangs se resserrent ensemble, d'un même geste, jusqu'à ce que les neuf matelots tiennent dans la planche. On rabotait avant la planche elle-même, qui défilait alors sous la molette : un invité, qui n'a rien à y régler, se retrouvait à faire glisser la seule chose qu'il était venu regarder, et la moitié de l'équipage vivait sous le pli de son propre cadre. */ --sk-crew-facteur: 1; order: -1; flex: 1.6 1 356px; max-width: 440px; display: flex; flex-direction: column; min-height: 0; /* Quand la fenêtre est trop courte pour la table pleine, c'est ICI qu'on défile — et d'un seul bloc, la planche entière : les pièces, le libellé, le rôle. Le rôle défilait autrefois seul dans son cadre, pièces et titre cloués en tête : la molette posée sur le médaillon qu'on venait de choisir ne faisait rien, et celle posée deux centimètres plus bas emportait la moitié de la planche. Une planche, un défilement. Le plafond est posé en JS (voir ajusterHauteurSalon) ; sans lui elle ne défile pas — la règle ne coûte rien tant que tout rentre. */ overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(184, 137, 53, 0.4) transparent; } /* Rien ne s'étire ni ne se comprime pour tenir dans le plafond : chaque bloc garde sa hauteur et c'est la planche qui déborde, donc qui défile. Sans ça, le rôle se serait laissé raboter et aurait défilé tout seul. */ .sk-lobby-col--crew > * { flex: none; } /* Le rôle d'équipage sur deux colonnes. Une seule, il grandissait de 51 px par matelot : au cinquième, l'équipage devenait la planche la plus haute et « Lancer la partie », qui suit la grille, descendait sous le pli à chaque arrivée. Sur deux colonnes il grandit deux fois moins vite, et un plafond (posé en JS, voir ajusterHauteurEquipage) l'empêche de dépasser ses voisines dans tous les cas. */ .sk-lobby-col .lobby-list { /* Mêmes cotes qu'ailleurs tant que la fenêtre est haute ; elles se resserrent avec les médaillons quand elle ne l'est pas (voir --sk-crew-facteur sur .sk-lobby-col--crew). */ --sk-crew-ligne: calc(38px * var(--sk-crew-facteur, 1)); --sk-crew-ecart: calc(7px * var(--sk-crew-facteur, 1)); display: grid; grid-template-columns: 1fr 1fr; /* Des rangées de hauteur FIXE, et leur place réservée d'avance : le cadre fait le nombre de rangs qu'il faut pour la table PLEINE (le maximum du paquet, sur deux colonnes — voir --sk-crew-rangs, posé en JS). Il est donc le même du premier joueur au dernier : c'était le seul bloc du salon qui changeait de taille pendant qu'on attend, et il emportait les boutons du bas avec lui. Les rangées vides ne se voient pas — le bois de la planche est le même dessous. */ grid-auto-rows: var(--sk-crew-ligne); align-content: start; gap: var(--sk-crew-ecart); height: calc( var(--sk-crew-rangs) * var(--sk-crew-ligne) + (var(--sk-crew-rangs) - 1) * var(--sk-crew-ecart) ); /* La liste ne défile plus d'elle-même : sa hauteur est celle de la table pleine, son contenu y tient toujours. Quand la fenêtre est trop courte pour ces rangs, c'est la planche entière qui défile (voir .sk-lobby-col--crew) — le rôle part avec les pièces, d'un seul geste. */ overflow: hidden; } /* Deux fois moins large : le pseudo se coupe plutôt que de pousser la barre du capitaine hors de la ligne. */ /* Serrées : neuf matelots sur deux colonnes tiennent alors dans ce que les planches voisines laissent, et la liste ne défile jamais d'une partie complète. */ .sk-lobby-col .lobby-list li { min-width: 0; /* Le rembourrage suit le rang : à rang resserré, une hauteur fixe de 4 px au-dessus et au-dessous suffisait à faire déborder la pastille de sa ligne. */ padding: calc(4px * var(--sk-crew-facteur, 1)) 10px; } /* La pastille est ce qu'il y a de plus haut dans la ligne : c'est elle qui en fixe la cote (26 px plus son cerclage, voir --sk-crew-ligne). Elle suit donc le même facteur, sans quoi le rang se resserrerait autour d'un médaillon resté grand. */ .sk-lobby-col .lobby-list .sk-lobby-piece { width: calc(26px * var(--sk-crew-facteur, 1)); height: calc(26px * var(--sk-crew-facteur, 1)); margin-right: calc(8px * var(--sk-crew-facteur, 1)); } .sk-lobby-col .lobby-list .sk-lobby-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La barre du capitaine se resserre : sur une demi-largeur, elle prenait assez de place pour couper le pseudo de celui qu'elle désigne. */ .sk-lobby-col .lobby-list li.lobby-host::after { padding-left: 6px; letter-spacing: 0.1em; } /* Même resserrement pour la marque des bots : sur une demi-largeur, elle mangeait le pseudo qu'elle qualifie. */ .sk-lobby-col .lobby-list .sk-lobby-bot { padding: 0 3px; letter-spacing: 0.08em; } /* L'enseigne de la planche. Au corps des autres libellés (0,62 rem, la taille d'une mention de champ), les quatre titres se lisaient comme des étiquettes posées dessus plutôt que comme le nom de la planche : on cherchait ce qu'on avait sous les yeux. Ils passent au corps d'un vrai intertitre, en laiton clair, sur un filet qui court sur toute la largeur — c'est le filet, plus que le corps, qui dit « ceci coiffe tout ce qui suit ». Les libellés internes (paquet, manches, joueurs) gardent leur petit corps : la hiérarchie ne tient que par l'écart entre les deux. */ .sk-lobby-col-title, .sk-ext-card .sk-lobby-col-title { display: block; margin: 0 0 13px; padding-bottom: 8px; border-bottom: 1px solid rgba(184, 137, 53, 0.28); font-size: 0.88rem; letter-spacing: 0.12em; color: var(--sk-brass-hi); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65); } /* Les blocs internes perdent leurs marges de colonne : c'est la planche qui borne maintenant, plus le `max-width: 300px` de chacun. */ .sk-lobby-col .sk-piece-picker, .sk-lobby-col .lobby-players { max-width: none; margin-left: 0; margin-right: 0; } /* La planche de l'équipage est la plus large des quatre : les médaillons y passent de 48 à 62 px. À 48 ils étaient dessinés pour une colonne de téléphone, et sur un écran d'ordinateur l'émail et la gravure — ce qu'on regarde justement pour choisir — tombaient sous le seuil où on les distingue. L'écart suit dans la même proportion, sinon la pièce retenue, agrandie d'un tiers, viendrait mordre ses voisines. */ .sk-lobby-col .sk-piece-picker { --sk-piece-cote: calc(62px * var(--sk-crew-facteur, 1)); --sk-piece-ecart: calc(11px * var(--sk-crew-facteur, 1)); margin-top: 0; margin-bottom: calc(16px * var(--sk-crew-facteur, 1)); } .sk-lobby-col .lobby-players { margin-top: 0; margin-bottom: 0; } .sk-lobby-col .invite-label { margin-top: 0; } /* Le bouton de lancement sort des planches : c'est l'action de l'écran, elle se pose sous les trois et non au bout de l'une d'elles. */ .sk-lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; } .sk-lobby-actions .btn { margin: 0; } .sk-lobby-actions .hint { margin: 0; } /* Le salon est une vue, pas une page à parcourir : les actions restent dans la dernière rangée de la fenêtre, quelle que soit la taille de l'équipage. Les réglages détaillés vivent dans leurs modales, ce qui laisse au lobby uniquement les informations à surveiller avant le départ. */ #sk-screen-waiting:not(.hidden) { height: calc(100dvh - 32px); max-height: 900px; display: flex; flex-direction: column; overflow: hidden; } /* Le rabotage de la grille tombe sur le bord de son REMBOURRAGE, jamais sur celui de sa marge : sans ces trois pixels, il rasait le cerclage de laiton qui fait le tour des planches, et les trois cadres de la rangée (extensions, ta pièce, discussion) commençaient par une arête nue — on voyait le bois, pas la bordure claire que la planche des réglages, hors grille, gardait juste au-dessus d'eux. La marge du dessus rend ce qu'on prend en rembourrage : rien ne se déplace. */ #sk-screen-waiting .sk-lobby-grid { flex: 1 1 auto; min-height: 0; margin-top: 13px; padding: 3px 0; overflow: hidden; } #sk-screen-waiting .sk-lobby-actions { flex: none; margin-top: 12px; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, rgba(20, 13, 7, 0.88) 35%); } .sk-lobby-summary { min-height: 2.8em; margin: 0 0 11px; color: var(--sk-cream-3); font-size: 0.88rem; line-height: 1.35; } /* Le nombre de manches se détache du reste de la ligne : c'est la seule des deux valeurs qu'on change vraiment d'une partie à l'autre, et le crème éteint du résumé rendait un gras seul à peine perceptible. */ .sk-lobby-summary strong { font-weight: 700; color: var(--sk-cream); } .sk-lobby-open { width: 100%; margin: 0; } /* Les cartes réellement dans le paquet, dans le cadre du salon. Elles défilaient sur une seule ligne : à huit modules, la moitié sortait du cadre par la droite et on ne voyait pas ce qu'on venait de cocher. Elles passent donc à la ligne — la planche s'allonge de deux rangs, ce qui est exactement l'information qu'on lui demande. */ .sk-active-extensions { display: flex; flex-wrap: wrap; /* Le creux garde la MÊME hauteur qu'il y ait une extension ou huit : ce sont les cartes qui s'adaptent à lui, pas lui qui s'adapte à elles (la largeur est calculée en JS, voir ajusterCartesExtension). Seule prise, une extension se voit en grand ; à huit elles rapetissent juste assez pour tenir toutes dans le cadre — on ne défile jamais pour savoir ce qu'il y a dans le paquet. Centrées, parce qu'une carte seule au coin d'un creux vide se lit comme un reste. */ align-content: center; justify-content: center; height: 168px; gap: 6px; padding: 2px 1px 6px; } .sk-active-extensions:empty::before { content: 'Aucune extension active'; color: var(--sk-cream-3); font-size: 0.82rem; font-style: italic; } /* Le bouton se moule sur sa carte plutôt que de lui imposer des cotes : la hauteur d'une .sk-card se déduit de sa largeur par le ratio 7:10, et deux jeux de mesures concurrents finissaient toujours par se contredire d'un pixel. `line-height: 0` pour qu'il ne reste pas la place d'une ligne de texte sous le dessin. */ .sk-active-extension { flex: 0 0 auto; padding: 0; overflow: hidden; line-height: 0; border: 1px solid rgba(184, 137, 53, 0.62); border-radius: 3px; cursor: pointer; background: #160e08; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } /* Toutes les cotes de la carte suivent le même facteur, comme la carte retournée du plateau (voir --sk-flip-k) : à ne mettre à l'échelle que la largeur, le liseré et le pied gardaient la taille d'une vignette sur une carte grande comme la main. Le repli — 0.52, soit les 44 px d'avant — sert tant que le JS n'a pas mesuré le creux. */ .sk-active-extension .sk-card { --sk-ext-k: var(--sk-ext-facteur, 0.52); --sk-w: calc(84px * var(--sk-ext-k)); --sk-pad: calc(4px * var(--sk-ext-k)); --sk-foot: calc(30px * var(--sk-ext-k)); --sk-fig: calc(2.9rem * var(--sk-ext-k)); display: block; border-radius: 0; transform: none; pointer-events: none; box-shadow: none; } .sk-active-extension:hover, .sk-active-extension:focus-visible { border-color: var(--sk-brass-hi); filter: brightness(1.12); outline: none; } /* L'ÉVENTAIL DES NUMÉROTÉES. Une ligne d'extension vaut une carte, sauf celle-là : elle en ajoute trois (le 7, le 8 et le 0/14). Le cadre du salon n'en montrait que la première, et on cochait donc « numérotées » sans voir ce qui entrait dans le paquet. Les trois s'y posent maintenant en éventail serré — le même trio que la fiche ouvre en grand. L'éventail tient dans l'empreinte d'UNE carte : le calcul qui taille le creux (ajusterCartesExtension) répartit des vignettes de largeur égale, et un bouton plus large qu'un autre lui ferait déborder un rang. Les trois cartes rapetissent donc à 0.66 et se chevauchent, décalées d'un dixième de carte et tournées de 8° — de quoi les compter d'un coup d'œil sans sortir du cadre de laiton. */ .sk-ext-fan { --sk-fan-k: var(--sk-ext-facteur, 0.52); position: relative; width: calc(84px * var(--sk-fan-k)); height: calc(120px * var(--sk-fan-k)); } .sk-active-extension .sk-ext-fan .sk-card { --sk-ext-k: calc(var(--sk-fan-k) * 0.66); position: absolute; top: 50%; left: 50%; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); transform: translate(-50%, -50%) translateX(calc(var(--sk-fan-i) * 8.8px * var(--sk-fan-k))) rotate(calc(var(--sk-fan-i) * 8deg)); } /* La rangée de pied des cadres de réglage du salon. Un seul bouton pour l'instant, mais centré et détaché du dernier réglage par le même trait de laiton que les autres sections. */ .sk-lobby-config-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(184, 137, 53, 0.28); text-align: center; } .sk-lobby-valider { min-width: 180px; margin: 0; } .sk-lobby-config-modal { width: min(560px, 100%); } .sk-config-section + .sk-config-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(184, 137, 53, 0.28); } .sk-config-section > .invite-label { margin-top: 0; } /* Hiérarchie du salon : l'enseigne et le code coiffent la table, les manches viennent juste après. La pièce est le choix central ; les variantes du jeu restent dans la colonne de droite. */ @media (min-width: 1000px) { #sk-screen-waiting .sk-waiting-logo { width: 390px; margin: 0 auto 4px; } /* La rangée de tête : trois colonnes dont deux vides, pour que la planche des réglages reste centrée SUR L'ÉCRAN — et non sur ce que l'étiquette lui laisse. Le code se pose au bout de la troisième, à mi-hauteur de la planche : la même ligne, la même bande. Si l'étiquette est plus large que sa colonne de vide (fenêtre juste au-dessus du seuil), les `1fr` cèdent et les réglages glissent d'autant vers la gauche plutôt que de passer dessous. Seul « Quitter » reste hors du flux, et l'enseigne centrée garde toute la bande du haut. */ .sk-lobby-headline { display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; align-items: center; gap: 12px; } /* Le code se COLLE à la planche des réglages, au lieu de filer au bout de la troisième colonne. Rejeté contre le bord de l'écran, il n'était plus voisin de rien : deux objets aux deux extrémités d'une bande vide, dont on ne savait pas s'ils allaient ensemble. Contre la planche, la rangée de tête redevient un seul bloc — ce qu'est cette partie, et comment on y entre — et les réglages gardent leur centrage sur l'écran, puisque c'est la colonne du milieu qui le tient, pas le code. */ #sk-screen-waiting #sk-share-block { grid-column: 3; justify-self: start; } #sk-screen-waiting .sk-rounds-card { flex: none; width: 420px; max-width: 420px; margin: 0 auto 4px; padding-top: 22px; } /* Colonne du milieu de la rangée de tête, posée à la main : sans ça l'auto-placement la mettait dans la première colonne libre — celle du vide de gauche — et l'étiquette du code restait seule à droite. */ #sk-screen-waiting .sk-lobby-settings-card { grid-column: 2; flex: none; width: auto; max-width: none; margin: 0 0 4px; padding: 22px 16px 13px; } #sk-screen-waiting .sk-lobby-settings-card .sk-lobby-summary { min-height: 0; margin: 0; } #sk-screen-waiting .sk-lobby-grid { display: grid; grid-template-columns: minmax(230px, 320px) minmax(340px, 440px) minmax(260px, 360px); align-items: start; justify-content: center; gap: 16px; margin-top: 8px; } /* La grille rabote toujours ses côtés et son pied, mais plus son haut : le bouton dépasse au-dessus d'elle. `clip-path` sur la boîte de bord (sans bordure, elle vaut celle de rembourrage) coupe au même endroit que l'`overflow: hidden` qu'il remplace. */ #sk-screen-waiting .sk-lobby-grid { overflow: visible; clip-path: inset(-80px 0 0 0); } #sk-screen-waiting .sk-lobby-chat { grid-column: 3; grid-row: 1; max-width: none; } #sk-screen-waiting .sk-lobby-col--crew { grid-column: 2; grid-row: 1; order: 0; max-width: none; } #sk-screen-waiting .sk-lobby-pile { grid-column: 1; grid-row: 1; max-width: none; } } @media (max-width: 999px) { #sk-screen-waiting:not(.hidden) { height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; } #sk-screen-waiting .sk-waiting-logo { width: min(270px, 62vw); margin-bottom: 7px; } #sk-screen-waiting .sk-lobby-grid { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 3px; } #sk-screen-waiting .sk-lobby-actions { flex: none; margin-top: 6px; padding-top: 8px; background: linear-gradient(180deg, transparent, rgba(20, 13, 7, 0.92) 38%); } .sk-lobby-summary { min-height: 0; } } /* --- Le récap : classement / courbe / faits marquants de front --- */ .sk-end-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; } .sk-end-logo { width: 285px; margin: 0; } #sk-end-title { margin: 0; font-size: 1.6rem; } .sk-end-winner-piece { width: 74px; height: 74px; } .sk-end-grid { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 16px; } .sk-end-panel--rank { flex: 1.1 1 330px; min-width: 0; max-width: 450px; } /* La courbe garde la part la plus large : c'est un tracé, il perd sa pente dès qu'on le comprime. */ .sk-end-panel--curve { flex: 1.2 1 360px; min-width: 0; display: flex; flex-direction: column; } .sk-end-panel--curve .sk-curve-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; } .sk-end-panel--facts { flex: 1 1 310px; min-width: 0; max-width: 420px; } .sk-end-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; } .sk-end-actions .btn { margin: 0; } } /* --- Le choix de la Tigresse ---------------------------------------- Les autres choix de pose (Joker, 0/14, Marcher sur la Planche) tiennent dans la barre d'actions : ils précisent une carte. Celui-ci décide de ce qu'elle EST, et une fois posé rien ne le reprend. Il prend donc le centre de l'écran, et il le prend en images : les deux emblèmes peints, séparés d'un slash, comme sur la carte elle-même où ils cohabitent dans les médaillons d'angle tant que le choix reste ouvert. */ .sk-tigress-choice, .sk-declare-choice { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 8, 10, 0.76); } .sk-tigress-choice.hidden, .sk-declare-choice.hidden { display: none; } .sk-tigress-cadre, .sk-declare-cadre { position: relative; max-width: 560px; max-height: 100%; overflow-y: auto; padding: 20px 26px 18px; border-radius: 5px; text-align: center; color: var(--sk-cream); background: linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #2a1b0f, #150c06); box-shadow: inset 0 0 0 1px rgba(16, 9, 3, 0.9), inset 0 1px 0 rgba(232, 206, 146, 0.16), 0 0 0 1px var(--sk-brass-lo), 0 18px 40px rgba(0, 0, 0, 0.65); } .sk-tigress-titre, .sk-declare-titre { margin: 0 0 14px; font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.16rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } .sk-tigress-duel, .sk-declare-duel { display: flex; align-items: center; justify-content: center; gap: 10px; } /* Le slash de la maquette : c'est lui qui dit « l'un OU l'autre ». Tracé au trait, pas au caractère — un « / » de fonte penche selon la police et ne monte jamais aussi haut que les deux disques. */ .sk-tigress-slash, .sk-declare-slash { flex-shrink: 0; width: 3px; height: clamp(100px, 23vw, 156px); border-radius: 2px; transform: rotate(16deg); background: linear-gradient(180deg, rgba(184, 137, 53, 0), var(--sk-brass) 22%, var(--sk-brass) 78%, rgba(184, 137, 53, 0)); font-size: 0; /* le « / » du DOM reste pour qui lit la page en texte brut */ } .sk-tigress-option, .sk-declare-option { /* `auto` et pas `0` : les deux libellés doivent tenir sur une ligne, et « Comme Pirate » est plus long que « Comme Fuite ». À base zéro les deux colonnes sont strictement égales et la plus longue passe à la ligne, ce qui décale son blason par rapport à l'autre. */ flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; border: 0; border-radius: 4px; cursor: pointer; background: none; color: var(--sk-cream-2); font-family: 'Cinzel', Georgia, serif; transition: background 0.16s ease, color 0.16s ease; } /* L'emblème est le bouton : il grossit et s'allume au survol, le libellé ne fait que le nommer. */ /* La pastille EST le bouton, comme le blason l'est pour la Tigresse : elle grossit et s'allume au survol, le libellé ne fait que la nommer. Sa couleur suit la famille de la carte qu'on pose — `data-famille`, posé par le clic qui ouvre le cadre. C'est la même image que celle qui sera frappée sur la carte : rien à reconnaître entre le clic et le tapis. */ .sk-declare-pastille { width: clamp(104px, 26vw, 168px); aspect-ratio: 1 / 1; background: var(--sk-pastille) 50% 50% / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.18s ease; } .sk-declare-choice[data-famille='jaune'] .sk-declare-option--0 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-0-jaune.webp'); } .sk-declare-choice[data-famille='vert'] .sk-declare-option--0 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-0-vert.webp'); } .sk-declare-choice[data-famille='violet'] .sk-declare-option--0 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-0-violet.webp'); } .sk-declare-choice[data-famille='noir'] .sk-declare-option--0 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-0-noir.webp'); } .sk-declare-choice[data-famille='jaune'] .sk-declare-option--14 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-14-jaune.webp'); } .sk-declare-choice[data-famille='vert'] .sk-declare-option--14 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-14-vert.webp'); } .sk-declare-choice[data-famille='violet'] .sk-declare-option--14 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-14-violet.webp'); } .sk-declare-choice[data-famille='noir'] .sk-declare-option--14 .sk-declare-pastille { --sk-pastille: url('assets/skin/pastille-14-noir.webp'); } .sk-declare-option:hover .sk-declare-pastille, .sk-declare-option:focus-visible .sk-declare-pastille { transform: scale(1.06); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px var(--sk-halo)); } /* Le halo dit l'enjeu : froid pour le zéro qui renonce, chaud pour le quatorze qui prend. */ .sk-declare-option--0 { --sk-halo: rgba(90, 158, 214, 0.55); } .sk-declare-option--14 { --sk-halo: rgba(214, 168, 74, 0.6); } .sk-tigress-embleme { width: clamp(104px, 26vw, 168px); aspect-ratio: 1 / 1; background: var(--sk-embleme) 50% 50% / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.18s ease; } .sk-tigress-option--fuite .sk-tigress-embleme { --sk-embleme: url('assets/skin/embleme-fuite.webp'); } .sk-tigress-option--pirate .sk-tigress-embleme { --sk-embleme: url('assets/skin/embleme-pirate.webp'); } .sk-tigress-option:hover .sk-tigress-embleme, .sk-tigress-option:focus-visible .sk-tigress-embleme { transform: scale(1.06); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px var(--sk-halo)); } .sk-tigress-option--fuite { --sk-halo: rgba(90, 158, 214, 0.55); } .sk-tigress-option--pirate { --sk-halo: rgba(178, 52, 42, 0.6); } .sk-tigress-option:hover, .sk-tigress-option:focus-visible, .sk-declare-option:hover, .sk-declare-option:focus-visible { color: var(--sk-cream); background: rgba(255, 236, 196, 0.05); } .sk-tigress-option:focus-visible, .sk-declare-option:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 2px; } .sk-tigress-nom, .sk-declare-nom { white-space: nowrap; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.05em; } .sk-tigress-effet, .sk-declare-effet { font-family: 'Spectral', Georgia, serif; font-size: 0.74rem; opacity: 0.66; } .sk-tigress-note, .sk-declare-note { margin: 12px 0 0; font-family: 'Spectral', Georgia, serif; font-size: 0.76rem; color: var(--sk-cream-2); opacity: 0.68; } /* Le cadre s'ouvre sur un clic de carte : il faut pouvoir en ressortir sans avoir choisi, sinon un clic de travers coûte la Tigresse. */ .sk-tigress-annuler, .sk-declare-annuler { margin-top: 10px; padding: 4px 10px; border: 0; border-radius: 3px; cursor: pointer; background: none; color: var(--sk-cream-2); font-family: 'Spectral', Georgia, serif; font-size: 0.76rem; text-decoration: underline; text-underline-offset: 3px; opacity: 0.6; } .sk-tigress-annuler:hover { opacity: 1; } /* Téléphone en portrait : les deux disques côte à côte tombent sous 100 px et l'ordre du duel se perd. On les empile, le slash devient la barre horizontale qui les sépare. La hauteur est dans la condition : empilés, les deux blasons demandent ~550 px, qu'un téléphone couché n'a pas — il les garde alors côte à côte, quitte à les rapetisser (bloc suivant). */ @media (max-width: 420px) and (min-height: 620px) { .sk-tigress-duel { flex-direction: column; gap: 2px; } .sk-tigress-slash { width: clamp(120px, 52vw, 200px); height: 2px; transform: none; background: linear-gradient(90deg, rgba(184, 137, 53, 0), var(--sk-brass) 22%, var(--sk-brass) 78%, rgba(184, 137, 53, 0)); } .sk-tigress-embleme, .sk-declare-pastille { width: clamp(96px, 34vw, 132px); } } /* Écran bas (téléphone couché, la position de jeu la plus courante) : le cadre doit tenir en hauteur sans ascenseur, sinon un des deux choix se trouve hors champ au moment de trancher. */ @media (max-height: 560px) { .sk-tigress-cadre, .sk-declare-cadre { padding: 12px 20px 10px; } .sk-tigress-titre, .sk-declare-titre { margin-bottom: 8px; font-size: 1rem; } .sk-tigress-embleme, .sk-declare-pastille { width: clamp(76px, 17vh, 116px); } .sk-tigress-slash { height: clamp(64px, 14vh, 96px); } .sk-tigress-note { margin-top: 8px; } } /* ===================================================================== CENTRÉ SUR LE PLATEAU, PAS SUR LA FENÊTRE Les messages qui se posent par-dessus le jeu partagent tous la même mécanique : une boîte `fixed; inset: 0` centrée en flex, avec un voile qui doit couvrir tout l'écran. On ne peut donc pas rétrécir la boîte au plateau — on laisse le centrage travailler sur la fenêtre et on déplace la carte du delta entre les deux centres, publié par le JS (voir publierCentreDuPlateau). `translate` et non `transform` : c'est une propriété à part, appliquée AVANT `transform` dans la composition. Les animations d'apparition, qui sont toutes des `transform` (scale, translateY), continuent donc de jouer par-dessus sans qu'on ait à les réécrire. Hors jeu les deux variables valent 0 : rien ne bouge sur l'accueil, au salon ni à l'écran de fin. ===================================================================== */ .sk-round-start-banner span, .sk-power-announce-card, .sk-bid-reveal-inner, .sk-round-popup-inner, .sk-tigress-cadre, .sk-start-reveal > * { translate: var(--sk-plateau-dx, 0px) var(--sk-plateau-dy, 0px); } /* La liste des résultats est la seule partie élastique de la planche de fin de manche (voir .sk-round-popup-inner) : à neuf joueurs sur une fenêtre basse, c'est elle qui défile. */ #sk-round-popup-rows { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(184, 137, 53, 0.4) transparent; } /* ===================================================================== RÉGLAGES D'AFFICHAGE — la planche qui s'ouvre depuis la barre latérale. Un curseur de laiton dans une glissière de bois : même vocabulaire que le champ de saisie (un creux) et que les boutons (une plaque). ===================================================================== */ .sk-settings-content { max-width: 380px; text-align: center; } .sk-settings-label { margin: 0 0 12px; font-family: 'Cinzel', Georgia, serif; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sk-brass-hi); } .sk-settings-rangee { display: flex; align-items: center; gap: 10px; } .sk-settings-borne { flex-shrink: 0; font-family: 'Spectral', Georgia, serif; font-size: 0.72rem; font-style: italic; color: var(--sk-cream-3); } .sk-settings-valeur { margin: 10px 0 0; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--sk-cream); } .sk-settings-note { margin: 12px 0 0; font-size: 0.76rem; line-height: 1.5; } .sk-settings-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; } .sk-settings-actions .btn { margin: 0; } /* La glissière : un creux dans la planche, comme le champ de saisie. Un petit point clair y est gravé à la valeur par défaut : c'est le cran où revenir quand on a poussé trop loin, et il se voit sans rien lire. Les deux familles de pseudo-éléments sont OBLIGATOIREMENT dans des règles séparées — un navigateur qui ne connaît pas l'un jette tout le sélecteur, et le curseur retomberait au gris du système. */ .sk-range { /* Fraction de la course du curseur où se trouve la valeur par défaut. Posée par le script à l'ouverture de la planche, parce qu'elle dépend des bornes ; la valeur écrite ici n'est qu'un repli. */ --sk-range-defaut: 0.286; flex: 1; min-width: 0; height: 20px; margin: 0; padding: 0; cursor: pointer; background: none; -webkit-appearance: none; appearance: none; } .sk-range:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 4px; } .sk-range::-webkit-slider-runnable-track { height: 8px; border-radius: 2px; background: radial-gradient(circle at calc(10px + var(--sk-range-defaut) * (100% - 20px)) 50%, rgba(251, 239, 204, 0.85) 0 2px, rgba(0, 0, 0, 0) 2.5px), linear-gradient(180deg, #150e07, #2a1e13); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.32), inset 0 2px 5px rgba(0, 0, 0, 0.7); } .sk-range::-moz-range-track { height: 8px; border-radius: 2px; background: radial-gradient(circle at calc(10px + var(--sk-range-defaut) * (100% - 20px)) 50%, rgba(251, 239, 204, 0.85) 0 2px, rgba(0, 0, 0, 0) 2.5px), linear-gradient(180deg, #150e07, #2a1e13); box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.32), inset 0 2px 5px rgba(0, 0, 0, 0.7); } /* Le curseur est un doublon frappé, comme les jetons d'annonce. */ .sk-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px; border: 0; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fbefcc, var(--sk-brass) 52%, #5a4318 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 9, 3, 0.7); } .sk-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fbefcc, var(--sk-brass) 52%, #5a4318 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 9, 3, 0.7); } /* Le trait qui sépare les deux réglages : le même filet de laiton que sous le titre de la planche des extensions. Deux réglages sans rien entre eux se lisaient comme un seul, la note du premier passant pour celle du second. */ .sk-settings-trait { height: 0; margin: 20px 0 14px; border: 0; border-top: 1px solid rgba(184, 137, 53, 0.24); } /* Un interrupteur et non un curseur : la fiche est là ou elle n'est pas. C'est celui des lignes d'extension du salon — rail et bouton repris tels quels de .sk-extension-toggle-* — mais centré, la planche des réglages l'étant, là où la liste du salon est chassée à gauche. */ .sk-settings-switch { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 300px; max-width: 100%; margin: 0 auto; padding: 3px 2px; border: none; background: none; cursor: pointer; color: var(--sk-cream-2); font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; } /* Deux réglages de même famille : ils se suivent, séparés par un souffle et non par un filet — le filet, lui, sépare la taille du survol. */ .sk-settings-switch + .sk-settings-switch { margin-top: 10px; } .sk-settings-switch:hover { color: var(--sk-cream); } .sk-settings-switch:focus-visible { outline: 2px solid var(--sk-brass-hi); outline-offset: 3px; } /* Le libellé tient sur deux lignes plutôt que de déborder de la planche : 380 px de large, et « Règles au survol des cartes en main » en capitales espacées n'y entre pas d'un trait sur un écran étroit. */ .sk-settings-switch-nom { min-width: 0; white-space: normal; } .sk-settings-switch .sk-extension-toggle-track { width: 30px; height: 16px; } .sk-settings-switch .sk-extension-toggle-knob { top: 2.5px; left: 2.5px; width: 11px; height: 11px; } .sk-settings-switch.sk-extension-toggle--on .sk-extension-toggle-knob { transform: translateX(14px); } /* La rangée de tête du salon (réglages + code de la partie). Empilée sur téléphone, elle n'est qu'un conteneur ; en paysage elle devient une rangée de trois colonnes (voir plus haut). `flex: none` parce que le salon est une colonne flex à hauteur fixe : sans ça la rangée se serait tassée pour faire de la place aux planches. */ .sk-lobby-headline { flex: none; } /* La planche des réglages se lit en deux blocs côte à côte : ce qu'on a réglé à gauche (le titre et sa ligne de résumé), le bouton qui le change à droite. `center` sur l'axe transversal : le bouton se pose alors à mi-hauteur de la planche, en face du texte entier, et non contre le bord haut où il s'alignait sur les capitales du titre en laissant le résumé courir seul sous lui. */ .sk-lobby-settings-card { display: flex; align-items: center; gap: 12px; } .sk-lobby-settings-text { flex: 1 1 auto; min-width: 0; } /* La ligne de résumé est la dernière du bloc : sa marge de pied ferait pencher le centrage d'un demi-interligne. */ .sk-lobby-settings-text .sk-lobby-summary { margin-bottom: 0; } /* L'effectif, en tête de la ligne de résumé : le nombre et le mot, rien de plus. Le minimum et le maximum restent sur la planche de l'équipage — c'est là qu'on les lit, en regardant qui manque ; ici on veut juste savoir combien on est sans compter les lignes. Cerclé de laiton au milieu du texte : c'est la seule valeur de la ligne qui change pendant qu'on attend, et l'œil doit pouvoir y revenir sans relire la phrase. */ .sk-lobby-effectif { display: inline-block; padding: 2px 8px; border-radius: 2px; border: 1px solid rgba(184, 137, 53, 0.42); background: linear-gradient(180deg, rgba(255, 236, 196, 0.07), rgba(0, 0, 0, 0.32)); font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; color: var(--sk-brass-hi); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65); } .sk-lobby-edit { flex: none; margin: 0; padding: 5px 9px; font-size: 0.66rem; } /* Variante compacte du salon pour téléphone : la page elle-même ne défile jamais, seules les informations secondaires peuvent défiler dans la zone centrale tandis que les actions restent présentes. */ @media (max-width: 999px) { #sk-screen-waiting:not(.hidden) { height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; } #sk-screen-waiting .sk-waiting-logo { width: min(270px, 62vw); margin-bottom: 7px; } #sk-screen-waiting .sk-lobby-grid { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 3px; } #sk-screen-waiting .sk-lobby-actions { flex: none; margin-top: 6px; padding-top: 8px; background: linear-gradient(180deg, transparent, rgba(20, 13, 7, 0.92) 38%); } .sk-lobby-summary { min-height: 0; margin: 0 0 11px; color: var(--sk-cream-3); font-size: 0.88rem; line-height: 1.35; } .sk-lobby-open { width: 100%; margin: 0; } .sk-lobby-config-modal { width: min(560px, 100%); } .sk-config-section + .sk-config-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(184, 137, 53, 0.28); } /* Empilée, la rangée de tête redevient deux blocs l'un sous l'autre : les réglages, puis le code — juste sous l'enseigne, là où on le cherche en arrivant. Centré et au gabarit des blocs voisins : à gauche d'une colonne étroite, une étiquette de deux lignes se lisait de travers. */ #sk-screen-waiting #sk-share-block { width: fit-content; max-width: 300px; margin: 10px auto 0; justify-items: center; text-align: center; } /* La planche des réglages garde ses deux blocs côte à côte, mais le bouton se resserre : sur une colonne de téléphone, « Modifier » et une ligne de résumé de trois valeurs se disputent la largeur. */ .sk-lobby-settings-card { gap: 10px; } } /* ===================================================================== LA PORTE DU PAYSAGE — téléphone tenu debout La scène de jeu est une peinture au rapport figé : elle se cale sur la plus petite dimension de la fenêtre. En portrait, c'est la largeur — 390 px de large donnent 220 px de table, et plus rien n'y est jouable. On demande donc le geste plutôt que de dessiner une seconde scène verticale qu'il faudrait tenir en double. Tout est ici, dans la feuille de style : la porte s'ouvre et se ferme avec l'orientation, sans qu'aucun script ait à écouter quoi que ce soit. Le JS ne fait qu'ajouter le verrouillage en paysage et la sortie de secours (voir `sk-portrait-force`). ===================================================================== */ .sk-rotate-gate { /* Fermée par défaut : c'est la règle d'orientation, plus bas, qui l'ouvre. Un écran de bureau ne doit jamais la rencontrer. */ display: none; position: fixed; inset: 0; /* Au-dessus de tout — la table (2 et 3), les modales (jusqu'à 90) et les cadres de choix. Rien ne passe devant la porte. */ z-index: 999; place-items: center; padding: 26px 22px; /* Noir plein, pas un voile : tant que la porte est là, il n'y a rien à lire derrière. Le halo chaud rappelle seulement la bougie de la taverne, il n'éclaire aucun contenu. */ background: radial-gradient(72% 52% at 50% 44%, rgba(184, 137, 53, 0.12), transparent 70%), #000; text-align: center; -webkit-user-select: none; user-select: none; } .sk-rotate-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 30ch; } /* --- Le téléphone qui se couche -------------------------------------- Le geste demandé, montré. Le boîtier tourne d'un quart de tour, marque le temps couché, puis revient : c'est la boucle qu'on fait soi-même avec l'appareil dans la main. */ .sk-rotate-phone { width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 14px; } .sk-rotate-phone-corps { display: block; width: 54px; height: 92px; padding: 7px 5px; border-radius: 9px; border: 2px solid var(--sk-brass); background: linear-gradient(180deg, #1a120b, #0b0704); box-shadow: 0 0 22px rgba(184, 137, 53, 0.25); animation: sk-rotate-hint 3.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; } .sk-rotate-phone-ecran { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(180deg, rgba(232, 206, 146, 0.30), rgba(184, 137, 53, 0.10)); } @keyframes sk-rotate-hint { 0%, 26% { transform: rotate(0deg); } 52%, 88% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } .sk-rotate-titre { margin: 0; font-family: 'Cinzel Decorative', Georgia, serif; font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--sk-brass-hi); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); } .sk-rotate-texte { margin: 8px 0 0; font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--sk-cream-2); } .sk-rotate-lock { margin-top: 22px; min-height: 46px; font-size: 0.9rem; } /* La sortie de secours se lit, mais ne se propose pas : c'est le second choix, pour un appareil dont la rotation est verrouillée au niveau du système. */ .sk-rotate-skip { margin-top: 16px; font-size: 0.78rem; opacity: 0.6; } /* Écran très bas (téléphone couché qui ne verrouille pas, clavier ouvert) : le dessin cède la place au texte plutôt que de le pousser dehors. */ @media (max-height: 420px) and (pointer: coarse) and (hover: none) { .sk-rotate-phone { width: 62px; height: 62px; margin-bottom: 8px; } .sk-rotate-phone-corps { width: 36px; height: 60px; padding: 5px 4px; } .sk-rotate-titre { font-size: 1.15rem; } .sk-rotate-texte { font-size: 0.84rem; } .sk-rotate-lock { margin-top: 12px; } .sk-rotate-skip { margin-top: 9px; } } @media (prefers-reduced-motion: reduce) { .sk-rotate-phone-corps { animation: none; transform: rotate(-90deg); } } /* LA CONDITION — et rien qu'elle. Trois conditions qui doivent TOUTES tenir, parce que cette porte ne doit jamais se refermer sur un écran d'ordinateur : `pointer: coarse` + `hover: none` — un appareil qu'on touche du doigt. C'est ce couple, et pas la largeur, qui distingue un téléphone d'une fenêtre de navigateur qu'on a rétrécie : une fenêtre étroite sur un poste de bureau garde une souris, donc un pointeur fin et le survol. Un ordinateur ne rencontre donc jamais la porte, quelle que soit la forme qu'on donne à sa fenêtre. `orientation: portrait` — l'appareil est tenu debout. `max-width: 900px` — c'est bien un téléphone, pas une tablette large tenue debout, où la scène tient encore. */ @media (orientation: portrait) and (max-width: 900px) and (pointer: coarse) and (hover: none) { html:not(.sk-portrait-force) .sk-rotate-gate { display: grid; } /* Rien ne défile derrière une porte fermée : sans ça, un doigt posé sur la plaque noire faisait glisser l'accueil en dessous. */ html:not(.sk-portrait-force) body { overflow: hidden; } } /* ===================================================================== TÉLÉPHONE COUCHÉ — ce que la porte impose devient la mise en page de référence sur mobile. La table, elle, n'a besoin de rien : la scène est une peinture au rapport 16/9 qui se cale sur la hauteur et remplit l'écran d'un téléphone couché. Ce sont les trois AUTRES écrans — l'accueil, le salon, le récap — qui sont dessinés en colonne et qui, sur 390 px de haut, se retrouvent à défiler. `max-height` et pas `max-width` : c'est la hauteur qui manque. Et le même couple `pointer: coarse` + `hover: none` que la porte, pour la même raison : sur un ordinateur, RIEN de ce qui suit ne doit s'appliquer, pas même à une fenêtre qu'on aurait aplatie. ===================================================================== */ @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (hover: none) { /* La colonne de 760 px du reste du site laissait 116 px de bois nu de chaque côté d'un téléphone couché — c'est-à-dire la largeur qui manque à l'équipage pour tenir ses médaillons. Couché, l'écran EST la colonne. (L'accueil et la table, eux, sont en `position: fixed` : ils ne dépendaient déjà plus de cette cote.) */ .app.sk-app { max-width: none; padding: 5px 12px; } /* --- L'ACCUEIL, en deux colonnes --------------------------------- Couché, l'écran a de la largeur en trop et plus de hauteur du tout : l'enseigne et sa phrase prennent la gauche, les commandes la droite. Empilés, le logo seul mangeait 225 px des 390 disponibles et le formulaire de code tombait sous la ligne de flottaison. */ #sk-screen-home:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 290px); align-content: center; justify-content: center; column-gap: 30px; padding: 12px 22px; overflow-y: auto; } #sk-screen-home:not(.hidden) .sk-home-title { grid-column: 1; grid-row: 1 / 4; align-self: center; margin: 0; } .sk-home-title img { max-width: min(400px, 40vw); } /* La marge automatique qui, en colonne, repoussait les commandes en bas de l'écran n'a plus lieu d'être : la grille place elle-même. */ #sk-screen-home:not(.hidden) .tagline { grid-column: 1; grid-row: 4; margin: 0 auto; font-size: 0.82rem; line-height: 1.4; } #sk-screen-home:not(.hidden) .btn-rules-link { grid-column: 1; grid-row: 5; justify-self: center; align-self: start; margin: 10px 0 0; } #sk-screen-home:not(.hidden) .nickname-field { grid-column: 2; grid-row: 1; margin: 0 auto 10px; } #sk-screen-home:not(.hidden) .btn-create { grid-column: 2; grid-row: 2; min-height: 52px; font-size: 1.02rem; } #sk-screen-home:not(.hidden) .divider { grid-column: 2; grid-row: 3; margin: 12px auto; } #sk-screen-home:not(.hidden) #sk-form-join { grid-column: 2; grid-row: 4; } #sk-screen-home:not(.hidden) #sk-home-error { grid-column: 2; grid-row: 5; margin-top: 8px; } /* --- LE SALON, en deux colonnes ----------------------------------- Le salon de téléphone est une colonne : l'enseigne, la rangée de tête, puis une zone qui défile, puis les actions. Sur 390 px de haut, les trois blocs fixes ne laissaient à la zone qui défile que 55 px de hauteur pour 744 px de contenu — l'équipage, les pièces et la discussion étaient tous derrière un trou de serrure. Couché, l'écran a de la largeur en trop : on met à GAUCHE tout ce qui ne défile pas (enseigne, réglages, code, actions) et on donne à la zone qui défile toute la hauteur de la colonne de droite. Elle passe de 55 px à ~330, et ses trois planches s'y rangent côte à côte. */ #sk-screen-waiting:not(.hidden) { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: start; column-gap: 14px; height: calc(100dvh - 12px); overflow: hidden; } #sk-screen-waiting .sk-waiting-top { grid-column: 1; grid-row: 1; margin: 0; } #sk-screen-waiting .sk-waiting-logo { grid-column: 1; grid-row: 2; width: min(176px, 21vw); margin: 0 auto 4px; } /* La rangée de tête se DISSOUT : ses deux planches deviennent des cases de la grille du salon et se séparent. Ensemble dans la colonne de gauche, elles ne tenaient pas — le code passait sous les boutons d'action, c'est-à-dire nulle part, alors que c'est la seule chose du salon qu'on doive lire à voix haute. Les réglages restent donc à gauche, sous l'enseigne ; le code monte au bout de la première rangée, en face du « Quitter », dans la bande que rien n'occupait. */ #sk-screen-waiting .sk-lobby-headline { display: contents; } #sk-screen-waiting .sk-lobby-settings-card { grid-column: 1; grid-row: 3; align-self: start; min-height: 0; max-height: 100%; overflow-y: auto; } /* Le code, en une seule ligne : l'étiquette, les quatre lettres, le bouton. Empilé sur trois lignes il redevenait une planche, et une planche ne tient pas dans une bande de bandeau. */ #sk-screen-waiting #sk-share-block { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; width: auto; max-width: none; grid-template-columns: auto auto auto; align-items: center; gap: 8px; margin: 0; padding: 5px 11px 6px; border-radius: 13px; text-align: left; } #sk-screen-waiting .sk-share-chip-label { grid-column: auto; font-size: 0.58rem; letter-spacing: 0.12em; } #sk-screen-waiting .sk-share-chip-code { padding: 3px 10px; font-size: 1rem; } #sk-screen-waiting .sk-share-chip-copy { padding: 4px 10px; font-size: 0.6rem; } #sk-screen-waiting .sk-lobby-actions { grid-column: 1; grid-row: 4; margin: 0; padding: 6px 0 0; /* Le dégradé qui, en colonne, détachait les actions du contenu qui défilait derrière elles n'a plus rien derrière lui. */ background: none; } /* La zone qui défile prend toute la colonne de droite, du haut de l'enseigne au bas de l'écran. Ses trois planches s'y rangent en deux bandes : l'équipage tient la sienne sur toute la hauteur — c'est la seule où l'on CHOISIT quelque chose — les extensions et la discussion se partagent l'autre. */ #sk-screen-waiting .sk-lobby-grid { grid-column: 2; grid-row: 2 / -1; display: grid; /* L'équipage prend la bande la plus large : c'est une grille de médaillons et une liste de pseudos, les deux se coupent dès qu'on les serre. Les extensions et la discussion sont du texte, elles se replient. */ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-content: start; gap: 10px; min-height: 0; margin: 0; padding: 2px 3px 6px 0; overflow-y: auto; } #sk-screen-waiting .sk-lobby-pile { grid-column: 1; grid-row: 1; max-width: none; } #sk-screen-waiting .sk-lobby-col--crew { grid-column: 2; grid-row: 1 / span 2; max-width: none; } #sk-screen-waiting .sk-lobby-chat { grid-column: 1; grid-row: 2; margin: 0; max-width: none; } .sk-lobby-summary { min-height: 0; margin-bottom: 8px; } /* --- LE RÉCAP DE FIN ---------------------------------------------- Même partage que le salon : ce qui ne défile pas tient la fenêtre, le reste défile dessous. L'enseigne verticale et le verdict prenaient à eux seuls 230 des 390 px, et « Rejouer » tombait deux écrans plus bas. L'enseigne se couche donc à côté du verdict, et les trois planches se rangent en deux bandes. */ #sk-screen-end:not(.hidden) { display: flex; flex-direction: column; height: calc(100dvh - 12px); overflow: hidden; } .sk-end-head { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; } .sk-end-logo { width: 84px; margin: 0; } .sk-end-winner-piece { width: 28px; height: 28px; } #sk-end-title { margin: 0; font-size: 1rem; line-height: 1.2; } .sk-end-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-content: start; align-items: start; gap: 8px; overflow-y: auto; padding-right: 3px; } .sk-end-panel { padding: 9px 11px 8px; } .sk-end-panel--rank { grid-column: 1; grid-row: 1 / span 2; } .sk-end-actions { flex: none; margin-top: 7px; } /* --- LA TABLE ------------------------------------------------------ La scène est une peinture au rapport 16/9 : couchée sur un téléphone elle se cale sur la HAUTEUR et ne fait plus que ~690 px de large. Tout ce qui s'y pose en pourcentage suit sans broncher ; ce qui reste en pixels — le bandeau du haut, ses trois blocs — ne suit pas, et les trois se chevauchaient : « Quitter » sous la piste des manches, « Réglages » sous le cartouche. Le bandeau se resserre donc d'un cran de plus que la règle des 760 px (qui, elle, regarde la fenêtre — 844 px ici — et ne se déclenche pas, alors que c'est la SCÈNE qui est étroite). */ .sk-scene .sk-game-header { gap: 6px; padding: 4px 8px 6px; } .sk-scene .sk-chain { height: 21px; } .sk-scene .sk-chain-bout--g { width: calc(21px * 99 / 171); } .sk-scene .sk-chain-bout--d { width: calc(21px * 95 / 171); } .sk-scene .sk-chain-alveole { width: calc(21px * 147 / 171); } .sk-scene .sk-round-scroll { padding: 2px 7px 3px; } .sk-scene .sk-round-scroll .sk-scroll-t { font-size: 0.46rem; letter-spacing: 0.05em; } .sk-scene .sk-topbar-side .btn-link { font-size: 0.58rem; letter-spacing: 0.08em; } .sk-scene .sk-topbar-side .btn-small { padding: 5px 9px 6px; font-size: 0.56rem; letter-spacing: 0.08em; } /* L'ÉVENTAIL. Les cartes de la main sont en pixels fixes (84 px) : sur une scène de 693 px elles pèsent 12 % de la largeur, contre 6 % sur un écran d'ordinateur. Dix cartes réclamaient alors deux fois la bande qui leur est réservée, et la moitié de la main partait au défilement horizontal. Elles se mesurent donc sur la scène — `cqw`, comme les cartes du tapis — sans jamais descendre sous 50 px, la taille en dessous de laquelle le chiffre du pied cesse de se lire. */ .sk-scene > #sk-hand .sk-card { --sk-w: clamp(50px, 9.2cqw, 84px); } /* Les étiquettes de siège ont la même maladie à l'envers : leur plaque est en `cqw` (elle rétrécit avec la scène), leur texte en `rem` (il ne rétrécit pas). « Barbe-Rousse » devenait « B… ». */ /* Le médaillon du siège vaut 58 px sur une scène d'ordinateur large de 1400 : quatre pour cent de la peinture. Sur une scène de 693 px, les mêmes 58 px en font huit, et cinq médaillons recouvraient le feutre et le talon de cartes. On les ramène à leur part. */ .sk-scene .sk-seat-av { width: 30px; height: 30px; border-width: 2px; font-size: 0.95rem; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } .sk-scene .sk-seat--turn .sk-seat-av { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(184, 137, 53, 0.25); } /* La pilule « x sur y » sous le pseudo suit la même échelle. */ .sk-scene .sk-seat-tally { font-size: 0.52rem; padding: 0 5px; } /* La plaque de siège se mesure sur le FEUTRE (`cqw` — le tapis est lui aussi un conteneur), qui ne fait que 268 px sur une scène de téléphone : 17 % de 268 laissaient 30 px au pseudo, une fois le jeton d'annonce servi. Elle prend un quart du feutre, ce qui reste très en deçà de l'écart entre deux sièges voisins. */ .sk-scene .sk-seat { width: 25cqw; } .sk-scene .sk-seat-name { font-size: 0.56rem; letter-spacing: 0.02em; /* Et le nom se REPLIE plutôt que de se faire couper : la plaque fait 48 px de large sur une scène de téléphone, « Barbe-Rousse » y tenait en « B… » — de quoi reconnaître une couleur, pas un joueur. Deux lignes courtes valent mieux qu'une initiale. */ white-space: normal; /* `break-word` et non `anywhere` : on ne coupe un mot que s'il ne tient pas seul sur sa ligne — « Le Borgne » se plie entre les deux mots, il ne se casse pas en « BORGN / E ». */ overflow-wrap: break-word; line-height: 1.06; } .sk-scene .sk-seat-bid { font-size: 0.55rem; } /* La légende du tapis suit : deux lignes italiques centrées dans un feutre de 268 px, elles montaient sur les plaques des deux sièges du fond. */ .sk-scene .sk-trick-caption { font-size: 0.62rem; } /* La consigne est une bulle de texte à taille fixe posée sur une scène qui, elle, a rétréci : sa phrase passait sur deux lignes et la seconde retombait sur le bord haut du feutre, juste là où s'assoient les deux sièges du fond. Une ligne suffit si la bulle se met à l'échelle, et elle remonte d'autant. Le bandeau de pouvoir la suit — les deux s'affichent parfois ensemble, l'un au-dessus de l'autre. */ .sk-scene .sk-turn-indicator { top: 28%; padding: 4px 12px; font-size: 0.68rem; } .sk-scene #sk-power-banner { top: 20.5%; padding: 3px 11px; font-size: 0.66rem; } /* LES DEUX PLAQUES DE GAUCHE. Elles se partagent une bande de 15,8 % — 110 px sur une scène de téléphone, soit 51 px chacune — pendant que leur texte, lui, reste en `rem`. « ANNONCÉS » à lui seul est plus large que sa plaque : les deux débordaient de leur case et passaient sous celle du gain, « MON CONTRAT » se lisant à travers « GAIN SI CONTRAT REMPLI ». Elles s'empilent donc au lieu de se ranger côte à côte : chacune retrouve les 110 px de la bande, et la hauteur, elle, ne manque pas de ce côté-là de la scène. */ .sk-scene > .sk-plaque-pile { grid-template-columns: minmax(0, 1fr); gap: 5px; } .sk-plaque-pile > .sk-plaque { padding: 5px 8px 6px; gap: 3px; } .sk-scene .sk-plaque-k { font-size: 0.5rem; letter-spacing: 0.07em; } .sk-plaque-pile .sk-mine-v, .sk-plaque-pile .sk-round-tricks-v, .sk-scene .sk-gain-v { font-size: 0.92rem; } .sk-scene > #sk-gain { padding: 5px 8px 6px; } /* La pilule d'annonce et les deux plaques se disputent le MÊME coin. Sur une scène basse, la pilule est renvoyée en bas à gauche (voir le `@container (max-height: 600px)`) — c'est-à-dire exactement là où le couple « total annoncé / mon contrat » est posé, et sur un téléphone les deux se recouvraient, chiffres sur jetons. Le coin revient à la pilule le temps de l'annonce. Ce n'est pas un arbitrage arbitraire : pendant qu'on annonce, les deux plaques ne disent rien — le total ne se remplit qu'à la révélation, et « mon contrat » est précisément ce que les jetons sont en train de fixer. Elles reviennent dès que la pilule se referme, avec leurs vraies valeurs. */ .sk-scene:has(> #sk-bid-choices:not(.hidden):not(:empty)) > .sk-plaque-pile, .sk-scene:has(> #sk-bid-choices:not(.hidden):not(:empty)) > #sk-gain { display: none; } /* Le cadre de fin de manche sait déjà défiler (voir .sk-round-popup-inner) ; il gagne seulement en marges, ce qui rend une ligne de score de plus à la liste. */ .sk-round-popup-inner { padding: 12px 16px 14px; } .sk-round-popup-inner h3 { margin-bottom: 8px; font-size: 1.05rem; } /* --- LES MODALES --------------------------------------------------- Une fenêtre de 390 px de haut ne tient pas une page de règles : le cadre garde ses bords et c'est son contenu qui défile. */ .modal-content { max-height: calc(100dvh - 16px); padding: 16px 20px; overflow-y: auto; } /* --- LES RÈGLES ---------------------------------------------------- Une fiche de bureau fait 470 px de haut : couchée sur un téléphone, elle passe en deux colonnes et prend la largeur qu'elle gagne en hauteur — les flèches restent à l'écran, sans défiler. */ #sk-rules-modal { padding: 8px; } /* Le bouton suit le bandeau resserré d'un cran : il reste le plus voyant du coin sans peser plus lourd que la barre au-dessus de lui. */ .sk-regles-bouton { gap: 5px; padding: 4px 7px; font-size: 0.64rem; } .sk-regles-bouton::before, .sk-regles-bouton::after { width: 13px; height: 15px; } .sk-regles-bouton--salon { position: static; margin: 0 auto 8px; } .sk-regles-bouton--jeu { left: 14px; top: calc(100% + 6px); gap: 8px; padding: 7px 11px; font-size: 0.86rem; } .sk-regles-bouton--jeu::before, .sk-regles-bouton--jeu::after { width: 18px; height: 21px; } .sk-regles { max-width: min(720px, 100%); padding: 8px 10px 6px; } .sk-regles-fermer { top: 12px; right: 14px; } .sk-regles-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; column-gap: 18px; padding: 6px 12px 8px; } .sk-regles-fiche > * { grid-column: 1 / -1; } .sk-regles .sk-regles-titre { margin-bottom: 6px; } .sk-regles-liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; } .sk-regles-fiche--manche .sk-regles-faits { grid-column: 1; margin: 0; } .sk-regles-fiche--manche .sk-regles-score { grid-column: 2; grid-row: 3; align-self: center; } .sk-regles-fiche--pli .sk-regles-consigne, .sk-regles-fiche--pli .sk-regles-echelle { grid-column: 1; } .sk-regles-fiche--pli .sk-regles-echelle { margin-top: 8px; } .sk-regles-fiche--pli .sk-regles-cycle { grid-column: 2; grid-row: 3 / span 3; margin-top: 0; } .sk-regles-nav { margin-top: 6px; } .sk-regles-fleche { width: 30px; height: 30px; } /* --- LE CHOIX DU NIVEAU D'UN BOT ----------------------------------- Les actions sont en bas de la colonne de gauche : au-dessus du bouton, il ne reste pas la hauteur du menu, qui sortait de l'écran par le haut. Il s'ouvre donc à DROITE de la colonne, calé sur son pied, par-dessus la zone qui défile — et se resserre pour tenir dans 360 px. */ .sk-bot-menu { left: calc(100% + 10px); bottom: 0; transform: none; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 4px; } .sk-bot-menu-item { padding: 5px 8px; } } /* Confirmation de départ en pleine partie : une question, deux boutons côte à côte, « Rester » en premier parce que c'est le clic sans conséquence. */ .sk-leave-confirm-content { width: min(360px, 100%); text-align: center; } .sk-leave-confirm-text { margin: 0 0 18px; } .sk-leave-confirm-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .sk-leave-confirm-actions .btn { min-width: 120px; margin: 0; }