/* ========================================================================= Super Serpent — habillage du jeu ========================================================================= */ body.game-body { overflow: hidden; overscroll-behavior: none; /* Le jeu gère lui-même les zones sûres : sinon, sur iPhone en mode plein écran, le rembourrage du s'ajoute au 100dvh et la croix directionnelle sort de l'écran. */ padding: 0; } .game { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); height: 100vh; height: 100dvh; padding: max(clamp(8px, 1.6vh, 16px), env(safe-area-inset-top)) max(clamp(10px, 2.4vw, 22px), env(safe-area-inset-right)) max(clamp(8px, 1.6vh, 16px), env(safe-area-inset-bottom)) max(clamp(10px, 2.4vw, 22px), env(safe-area-inset-left)); } /* ---------- Barre du haut & tableau de bord ---------- */ .game__top { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hud { display: flex; flex: 1; justify-content: center; gap: 8px; min-width: 0; } .hud__chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: clamp(15px, 2vw, 18px); font-weight: 600; white-space: nowrap; background: var(--card); border-radius: var(--r-pill); box-shadow: var(--lift-1); } .hud__chip b { font-size: 1.28em; font-variant-numeric: tabular-nums; } .hud__chip.is-bumped { animation: chip-bump 0.42s var(--bounce); } @keyframes chip-bump { 40% { transform: scale(1.18) rotate(-3deg); } } @media (max-width: 480px) { .hud__chip--level { display: none; } } /* ---------- Plateau de jeu ---------- */ .stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; } .board-wrap { position: relative; width: min(100%, 68vh); aspect-ratio: 1; border-radius: var(--r-lg); background: linear-gradient(160deg, #dff7e6, #cdeffd); box-shadow: var(--lift-2), inset 0 0 0 6px rgba(255, 255, 255, 0.65); overflow: hidden; touch-action: none; transition: transform 0.1s linear; } @media (prefers-color-scheme: dark) { .board-wrap { background: linear-gradient(160deg, #26305c, #1d2a4d); box-shadow: var(--lift-2), inset 0 0 0 6px rgba(255, 255, 255, 0.08); } } .board-wrap.is-shaking { animation: shake 0.42s ease-in-out; } @keyframes shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-8px, 4px) rotate(-1deg); } 40% { transform: translate(7px, -5px) rotate(1deg); } 60% { transform: translate(-5px, -3px); } 80% { transform: translate(4px, 3px); } } #board { width: 100%; height: 100%; display: block; } /* ---------- Compte à rebours ---------- */ .countdown { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; font-size: clamp(90px, 26vh, 190px); font-weight: 700; color: #fff; text-shadow: 0 8px 0 rgba(44, 33, 80, 0.35); background: rgba(28, 20, 58, 0.16); pointer-events: none; } .countdown[hidden] { display: none; } .countdown span { animation: count-pop 0.9s var(--bounce); } @keyframes count-pop { 0% { transform: scale(0.3); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.15; } } /* ---------- Écrans de jeu : plein écran, y compris sur téléphone ---------- */ .overlay--full { position: fixed; z-index: 60; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); } .panel__hero { font-size: clamp(44px, 11vh, 68px); line-height: 1; margin-bottom: 4px; } /* Paysage court (téléphone couché) : on compacte tout pour rester lisible */ @media (max-height: 560px) { .overlay--full .panel { padding: 16px 20px; border-radius: var(--r-lg); } .panel__hero { font-size: 34px; } .overlay--full .panel__title { font-size: 22px; } .overlay--full .panel__text { font-size: 0.86em; margin-bottom: 8px; } .result__label { margin-bottom: 6px; } .leaderboard { display: none; } /* Les niveaux passent en trois colonnes : on gagne beaucoup de hauteur */ .levels { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; } .level-opt { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; } .level-opt__emoji { font-size: 26px; } .level-opt__hint { display: none; } .level-opt__name br { display: none; } .result__score { font-size: 40px; } .stars { font-size: 26px; margin: 2px 0 8px; } .btn--lg { min-height: 54px; padding: 12px 24px; font-size: 17px; } } /* ---------- Choix du niveau ---------- */ .levels { display: grid; gap: 10px; margin: 16px 0 20px; } .level-opt { display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-align: left; background: var(--card-2); border: 3px solid transparent; border-radius: var(--r-md); transition: transform 0.16s var(--bounce), border-color 0.16s var(--ease), background 0.16s var(--ease); } .level-opt:hover { transform: translateY(-2px) scale(1.02); } .level-opt[aria-pressed="true"] { border-color: var(--lime); background: rgba(61, 220, 132, 0.14); } .level-opt__emoji { font-size: 34px; flex-shrink: 0; } .level-opt__name { font-weight: 700; font-size: 1.05em; } .level-opt__hint { font-size: 0.82em; color: var(--ink-soft); line-height: 1.3; } /* ---------- Fin de partie ---------- */ .result__emoji { font-size: clamp(58px, 14vw, 84px); animation: pop-in 0.5s var(--bounce); } .result__score { font-size: clamp(48px, 13vw, 68px); font-weight: 700; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; } .result__label { font-size: 0.9em; color: var(--ink-soft); margin-bottom: 10px; } .stars { display: flex; justify-content: center; gap: 8px; font-size: 34px; margin: 6px 0 14px; } .stars span { filter: grayscale(1); opacity: 0.35; transition: all 0.3s var(--bounce); } .stars span.is-on { filter: none; opacity: 1; animation: star-pop 0.5s var(--bounce) backwards; } .stars span.is-on:nth-child(2) { animation-delay: 0.14s; } .stars span.is-on:nth-child(3) { animation-delay: 0.28s; } @keyframes star-pop { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.35) rotate(10deg); } } .result__actions { display: grid; gap: 10px; margin-top: 6px; } /* ---------- Classement ---------- */ .board-list { display: grid; gap: 6px; margin: 4px 0 16px; text-align: left; } .board-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 0.94em; background: var(--card-2); border-radius: var(--r-sm); } .board-row.is-me { background: rgba(123, 92, 255, 0.16); font-weight: 700; } .board-row__pos { width: 26px; font-weight: 700; color: var(--ink-faint); } .board-row__name { flex: 1; } .board-row__score { font-variant-numeric: tabular-nums; font-weight: 700; } details.leaderboard { margin-top: 4px; } details.leaderboard > summary { padding: 10px; font-weight: 600; color: var(--ink-soft); cursor: pointer; list-style: none; border-radius: var(--r-sm); } details.leaderboard > summary::-webkit-details-marker { display: none; } details.leaderboard > summary:hover { background: var(--card-2); } /* ---------- Commandes tactiles ---------- */ .controls { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .dpad { display: none; grid-template-columns: repeat(3, auto); grid-template-areas: ". up ." "left down right"; gap: 8px; touch-action: none; } .dpad__btn { display: grid; place-items: center; width: clamp(58px, 15vw, 74px); height: clamp(58px, 15vw, 74px); font-size: clamp(24px, 6vw, 30px); color: #fff; background: var(--lime); border-radius: 22px; box-shadow: 0 6px 0 var(--lime-deep); transition: transform 0.08s var(--ease), box-shadow 0.08s var(--ease); user-select: none; } .dpad__btn:active, .dpad__btn.is-active { transform: translateY(6px); box-shadow: 0 0 0 var(--lime-deep); } .dpad__btn--up { grid-area: up; } .dpad__btn--down { grid-area: down; } .dpad__btn--left { grid-area: left; } .dpad__btn--right { grid-area: right; } .kbd-hint { font-size: 0.85em; color: var(--ink-faint); text-align: center; } .kbd { display: inline-block; padding: 2px 8px; font-size: 0.9em; font-weight: 600; background: var(--card); border-radius: 8px; box-shadow: var(--lift-1); } @media (hover: none), (pointer: coarse) { .dpad { display: grid; } .kbd-hint { display: none; } } /* Paysage sur téléphone : la croix passe à côté du plateau, sinon le plateau devient minuscule et les boutons sortent de l'écran. */ @media (max-height: 620px) and (orientation: landscape) { .game { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top" "stage controls"; gap: 6px 10px; align-items: center; } .game__top { grid-area: top; } .stage { grid-area: stage; } .controls { grid-area: controls; } .dpad__btn { width: clamp(46px, 11vh, 60px); height: clamp(46px, 11vh, 60px); font-size: clamp(19px, 4.5vh, 24px); border-radius: 18px; } }