/* ============================================================ POPOTE WAR — LES GRANDS ÉCRANS ------------------------------------------------------------ Le jeu est dessiné pour un pouce et un écran de six pouces, et il le reste : on ne fabrique pas une seconde interface pour l'ordinateur. Ce fichier POSE le jeu dans un cadre centré et occupe le reste de l'écran avec du décor. Pourquoi pas une vraie mise en page bureau, en deux colonnes ? Parce qu'elle voudrait dire deux interfaces à dessiner, deux à tester et deux à corriger, pour un public qui joue à 95 % sur téléphone. Le cadre donne un ordinateur utilisable pour le coût d'une feuille de style — et le jeu reste exactement le même partout, ce qui est aussi ce que le joueur attend quand il passe de son téléphone à son écran. Trois seuils : ≤ 700 px le téléphone, tel qu'il a été dessiné 701 à 1023 px tablette : cadre, sans décor ≥ 1024 px cadre + décor + confort clavier et souris ============================================================ */ /* ------------------------------------------------------------ LE CADRE ------------------------------------------------------------ */ @media (min-width: 701px) { /* La page devient le décor ; le jeu, un objet posé dessus. */ body { display: grid; place-items: center; height: 100dvh; /* `hidden` et non `clip` ici : tout tient dans le cadre, qui a sa propre gestion. Sans ça, le décalage vertical ci-dessous ajoutait quelques pixels de trop et la fenêtre entière se mettait à défiler — un jeu qui glisse sous le curseur donne l'impression d'une page web, exactement ce qu'on cherche à faire oublier. */ overflow: hidden; background: var(--tissage), radial-gradient(90% 60% at 50% 0%, #23261A 0%, transparent 60%), linear-gradient(180deg, #0E0F0A 0%, var(--nuit) 40%, #0B0C07 100%); background-attachment: fixed; } #app { position: relative; width: min(460px, 96vw); /* La hauteur suit l'écran, mais s'arrête : au-delà, l'écusson flotte au milieu d'une colonne vide et le bouton principal s'éloigne du regard. */ height: min(100dvh, 940px); overflow: hidden; border-radius: 22px; border: 1px solid var(--kaki); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(217,207,168,.07); /* Le fond du jeu lui-même, plus clair que le décor : c'est ce décalage qui fait exister le cadre sans dessiner de boîtier. */ background: var(--tissage), radial-gradient(120% 55% at 50% -8%, #23261A 0%, transparent 62%), linear-gradient(180deg, var(--nuit) 0%, #101109 100%); } /* Les zones sûres n'ont plus de sens hors d'un téléphone : les remettre à zéro évite des marges fantômes en haut et en bas. */ #app { --safe-t: 0px; --safe-b: 0px; --safe-l: 0px; --safe-r: 0px; } /* Les écrans remplissent le cadre, plus la fenêtre. */ .screen { height: 100%; min-height: 0; } #screen-home { height: 100%; } /* La barre d'onglets se cale au bas du CADRE, pas de la fenêtre. */ .tabs { position: absolute; border-radius: 0 0 21px 21px; } /* Les calques restent au-dessus de tout, mais dans le cadre. */ .sheet { position: absolute; } /* ⚠️ LA FEUILLE VIT HORS DE `#app`, ET LA RÈGLE CI-DESSUS NE SUFFISAIT DONC PAS. `position: absolute` se résout contre le premier ancêtre positionné. Le calque est déclaré APRÈS la fermeture de `#app` dans le HTML — il se cale sur la fenêtre, pas sur le cadre. Sur un écran de dix-neuf cents pixels, toutes les feuilles du jeu s étalaient donc sur toute la largeur pendant que le jeu tenait dans quatre cent soixante. Le symptôme le plus visible : l échelle des sept jours de présence, sept cases carrées en `1fr`, devenait sept carrés de deux cent quatre-vingt-quinze pixels de côté avec un chiffre de onze pixels au milieu. « Assez vide », et c est exactement ce que c était. On BORNE la boîte plutôt que de la déplacer dans le HTML : un `position: fixed` sur téléphone se résout contre la fenêtre, sauf si un ancêtre porte un `transform` — la déplacer dans `#app` reviendrait à parier sur ça. Une largeur maximale ne parie sur rien. `margin-inline: auto` et non `translateX` : la boîte porte déjà une animation `monte` qui joue sur `transform`, et les deux se chasseraient. */ .sheet__box { border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: min(460px, 96vw); margin-inline: auto; } .veil { position: absolute; } .toast { position: absolute; } .update { position: absolute; } .loading { position: absolute; } /* Le filigrane appartient au jeu, pas au décor. */ #app::before { position: absolute; font-size: 68px; } /* Un quiz se joue à la verticale, mais sur un ordinateur en paysage il n'y a rien à retourner : le message n'a plus lieu d'être. */ body::after { content: none !important; } /* ⚠ LES RATTRAPAGES DE LA VITRINE ONT ÉTÉ RETIRÉS D'ICI. Ils existaient pour une bonne raison : l'écusson était calibré en `vw`, donc sur la largeur de la FENÊTRE. Dans un cadre de 460 px posé sur un écran de 1920, il se retrouvait minuscule au milieu d'un grand vide, et on le remettait à 200 px en dur. La vitrine se mesure maintenant en `cqw` — sur sa propre largeur, celle du cadre. Elle est donc déjà juste ici, et ces rattrapages DOUBLAIENT la correction : l'écusson repassait à 200 px, débordait de sa colonne et venait recouvrir la plaque d'identité. C'est le défaut qu'on voyait sur ordinateur. La leçon tient en une ligne : une taille exprimée sur la boîte qui la contient n'a besoin d'aucune exception d'écran. */ .vitrine__halo { width: 74cqw; } } /* ------------------------------------------------------------ LE DÉCOR ET LE CONFORT — souris et clavier ------------------------------------------------------------ */ @media (min-width: 1024px) { /* Deux insignes en filigrane de part et d'autre du cadre. Ils ne racontent rien de plus que le jeu ; ils empêchent seulement l'écran de ressembler à une page vide avec une bande au milieu. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 16% 42%, rgba(200,162,76,.05) 0 2px, transparent 3px) 0 0 / 46px 46px, radial-gradient(circle at 84% 58%, rgba(200,162,76,.05) 0 2px, transparent 3px) 0 0 / 46px 46px; mask-image: linear-gradient(90deg, #000 0 26%, transparent 34% 66%, #000 74% 100%); } #app { z-index: 1; } /* Le survol n'existe qu'avec une souris. `hover: hover` évite de l'appliquer aux tablettes, où il resterait collé après un appui. */ @media (hover: hover) and (pointer: fine) { .answer:hover:not([disabled]) { border-color: var(--laiton); background: linear-gradient(180deg, #2E3120, var(--toile-2)); } .horloge:hover { border-color: var(--laiton); } .combattre:hover, .btn--fight:hover { filter: brightness(1.08); } .btn:hover:not([disabled]) { filter: brightness(1.08); } .tab:hover { color: var(--sable); } .arm:hover:not([disabled]) { border-color: var(--laiton); } .cpnx__code:hover { color: var(--laiton); } } /* Les raccourcis clavier, affichés seulement là où ils servent. Sur un téléphone la pastille n'apparaît jamais : elle serait un mensonge, et elle mangerait de la place. */ .answer__key::after { content: attr(data-touche); display: none; } .clavier .answer__key { position: relative; } .clavier .answer::after { content: attr(data-touche); margin-left: auto; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--kaki); font-family: var(--chiffre); font-size: .7rem; color: var(--sable-b); } .clavier .combattre::after { content: "ENTRÉE"; font-family: var(--chiffre); font-size: .65rem; letter-spacing: .1em; opacity: .6; } } /* ------------------------------------------------------------ LE CADRE RESPIRE, QUAND L'ÉCRAN EST ASSEZ HAUT ------------------------------------------------------------ En dessous de 800 px de haut, le cadre prend toute la hauteur : sur un portable 1366×768, chaque pixel compte, et une marge décorative se paierait sur la taille de la question. ------------------------------------------------------------ */ @media (min-width: 701px) and (min-height: 800px) { #app { height: min(calc(100dvh - 48px), 940px); } } /* ------------------------------------------------------------ TRÈS GRANDS ÉCRANS Le cadre ne grandit plus : au-delà, on gagnerait des pixels sans gagner de lisibilité, et un bouton de six cents pixels de large n'est pas plus facile à viser. ------------------------------------------------------------ */ @media (min-width: 1600px) { #app { width: 480px; } }