/* =========================================================================================== Thème Y2K / Frutiger Aero : verre translucide, dégradés aqua + vert citron, boutons "gel" brillants, perles, bulles, ciel bleu. Aucune image : tout est en CSS. =========================================================================================== */ :root { --ink: #0b3a5e; --ink2: #2b6a95; --dim: #4f87ad; --accent: #1aa7f2; --good: #3f9a05; --warn: #d97f00; --bad: #d6334b; --edge: rgba(255, 255, 255, 0.9); --font: 'Segoe UI', 'Frutiger', 'Trebuchet MS', 'Lucida Grande', Verdana, sans-serif; --gel-aqua: linear-gradient(180deg, #a6ecff 0%, #3bbdf8 47%, #0a8ad6 53%, #35c1f7 100%); --gel-lime: linear-gradient(180deg, #eaffb4 0%, #98e63a 47%, #4aa30a 53%, #86d824 100%); --gel-silver: linear-gradient(180deg, #ffffff 0%, #dcebf5 47%, #b6cddd 53%, #e4f1fa 100%); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; background: #3aa0e0; color: var(--ink); font: 15px/1.45 var(--font); } #gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } .hidden { display: none !important; } kbd { display: inline-block; padding: 0 6px; border-radius: 5px; border: 1px solid #7bb3d6; border-bottom-width: 2px; background: linear-gradient(180deg, #fff, #d7ecf9); color: var(--ink); font: 600 12px var(--font); box-shadow: 0 1px 0 #fff inset; } /* ---------- fond du menu : ciel, lueurs et bulles ---------- */ #menu { position: fixed; inset: 0; display: flex; padding: 16px; z-index: 10; overflow: auto; background: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(255, 255, 255, 0.65), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(150, 255, 170, 0.45), transparent 70%), linear-gradient(180deg, rgba(70, 180, 245, 0.62), rgba(10, 105, 190, 0.7)); } #menu.ingame { background: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(255, 255, 255, 0.45), transparent 70%), linear-gradient(180deg, rgba(70, 180, 245, 0.42), rgba(10, 105, 190, 0.55)); } .bubbles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .bubbles i { position: absolute; bottom: -120px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0.25) 22%, rgba(120, 220, 255, 0.12) 60%, rgba(255, 255, 255, 0.35) 100%); box-shadow: inset 0 -6px 14px rgba(255, 255, 255, 0.35), 0 0 14px rgba(255, 255, 255, 0.3); animation: rise linear infinite; } .bubbles i:nth-child(1) { left: 6%; width: 46px; height: 46px; animation-duration: 17s; animation-delay: -2s; } .bubbles i:nth-child(2) { left: 14%; width: 22px; height: 22px; animation-duration: 12s; animation-delay: -7s; } .bubbles i:nth-child(3) { left: 27%; width: 70px; height: 70px; animation-duration: 24s; animation-delay: -12s; } .bubbles i:nth-child(4) { left: 41%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: -4s; } .bubbles i:nth-child(5) { left: 58%; width: 54px; height: 54px; animation-duration: 20s; animation-delay: -9s; } .bubbles i:nth-child(6) { left: 69%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: -1s; } .bubbles i:nth-child(7) { left: 80%; width: 84px; height: 84px; animation-duration: 27s; animation-delay: -15s; } .bubbles i:nth-child(8) { left: 91%; width: 36px; height: 36px; animation-duration: 16s; animation-delay: -6s; } @keyframes rise { from { transform: translate(0, 0) scale(0.9); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(24px, -55vh) scale(1); } to { transform: translate(-18px, -125vh) scale(1.08); opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .bubbles i { animation: none; opacity: 0.5; bottom: 20%; } } /* ---------- fenêtre en verre ---------- */ .panel { position: relative; z-index: 1; margin: auto; flex: none; width: min(600px, 100%); border-radius: 16px 16px 14px 14px; color: var(--ink); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0, rgba(232, 247, 255, 0.66) 22%, rgba(196, 232, 255, 0.58) 100%); border: 1px solid var(--edge); box-shadow: 0 0 0 1px rgba(8, 92, 156, 0.55), 0 24px 56px rgba(0, 50, 100, 0.5), inset 0 1px 0 #fff, inset 0 -26px 50px rgba(110, 200, 255, 0.28); backdrop-filter: blur(16px) saturate(1.5); } .panel::after { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 120px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); pointer-events: none; } .titlebar { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 50, 100, 0.8); background: linear-gradient(180deg, rgba(160, 230, 255, 0.95) 0%, rgba(40, 175, 245, 0.92) 48%, rgba(8, 128, 210, 0.95) 52%, rgba(60, 190, 250, 0.92) 100%); border-bottom: 1px solid rgba(6, 90, 150, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } .tbIcon { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, #b6f24a 40%, #3f9a05 100%); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 6px rgba(190, 255, 120, 0.9); } .tbText { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tbBtns { display: flex; gap: 4px; } .tbBtns i { width: 26px; height: 17px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(120, 200, 250, 0.5) 50%, rgba(30, 140, 220, 0.6) 52%, rgba(120, 215, 255, 0.6)); box-shadow: 0 1px 2px rgba(0, 50, 100, 0.5); } .tbBtns i.x { width: 40px; background: linear-gradient(180deg, #ffb0a0, #ee5a40 50%, #c42a12 52%, #ee6a50); border-color: #ffd0c8; } .panelBody { position: relative; z-index: 1; padding: 16px 22px 20px; } .panel h1 { margin: 0; font-size: 44px; line-height: 1; letter-spacing: 2px; font-weight: 800; font-style: italic; background: linear-gradient(180deg, #ffffff 0%, #c4ecff 44%, #1ea4ee 50%, #0b69b2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 70, 125, 0.55)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); } .panel h1 b { background: linear-gradient(180deg, #f2ffc8 0%, #a8ee45 44%, #4fae0c 50%, #2b7d02 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sub { margin: 4px 0 14px; color: var(--ink2); font-size: 13px; } label { display: block; margin: 10px 0; color: var(--ink2); font-size: 13px; font-weight: 600; } input[type=text], input[type=password], input:not([type]) { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; border-radius: 9px; border: 1px solid #6aa8cf; background: linear-gradient(180deg, #e3f2fb, #fff 40%); color: var(--ink); font: inherit; font-weight: 500; outline: none; box-shadow: inset 0 2px 4px rgba(0, 70, 120, 0.25), 0 1px 0 #fff; } input[type=text]:focus, input[type=password]:focus, input:not([type]):focus { border-color: #1aa7f2; box-shadow: inset 0 2px 4px rgba(0, 70, 120, 0.25), 0 0 0 3px rgba(60, 190, 255, 0.45); } .row { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--ink2); font-size: 13px; font-weight: 600; } #colors, #chColors { display: flex; gap: 9px; flex-wrap: wrap; } #colors i, #chColors i { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 2px 4px rgba(0, 60, 110, 0.45), inset 0 -5px 7px rgba(0, 0, 0, 0.22); } #colors i::after, #chColors i::after { content: ''; position: absolute; left: 18%; top: 8%; width: 64%; height: 42%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)); } #colors i.sel, #chColors i.sel { box-shadow: 0 0 0 3px #1aa7f2, 0 0 12px rgba(30, 170, 250, 0.9), inset 0 -5px 7px rgba(0, 0, 0, 0.22); transform: scale(1.1); } .buttons { display: flex; gap: 10px; margin-top: 14px; } /* choix du mode */ .modeRow { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; color: var(--ink2); font-weight: 700; font-size: 13px; } button.mode { padding: 8px 18px; filter: saturate(0.5) brightness(0.97); } button.mode b { font-size: 15px; } button.mode.sel { filter: none; box-shadow: 0 0 0 3px #b6f23a, 0 0 16px rgba(170, 255, 80, 0.8), 0 2px 5px rgba(0, 60, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); } button.mode.mini { padding: 6px 12px; } button.mapbtn { padding: 8px 18px; filter: saturate(0.5) brightness(0.97); } button.mapbtn b { font-size: 15px; } button.mapbtn.sel { filter: none; box-shadow: 0 0 0 3px #b6f23a, 0 0 16px rgba(170, 255, 80, 0.8), 0 2px 5px rgba(0, 60, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); } button.mapbtn.mini { padding: 6px 12px; } /* choix de l'équipe */ .teamBox { display: flex; gap: 12px; margin: 12px 0 4px; } .teamCards { flex: 1; display: flex; flex-direction: column; gap: 10px; } button.team { flex: 1; text-align: left; padding: 12px 18px 12px 52px; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; filter: saturate(0.55) brightness(0.97); } button.team b { font-size: 17px; line-height: 1.15; } button.team small { font-weight: 600; opacity: 0.92; font-size: 12px; letter-spacing: 1px; } button.team::after { content: ''; position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.95); background: radial-gradient(circle at 35% 28%, #fff 0 12%, rgba(255, 255, 255, 0) 45%), rgba(0, 40, 80, 0.28); box-shadow: inset 0 2px 4px rgba(0, 40, 80, 0.4); } button.team.sel { filter: none; box-shadow: 0 0 0 3px #b6f23a, 0 0 18px rgba(170, 255, 80, 0.85), 0 2px 5px rgba(0, 60, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); } button.team.sel::after { background: radial-gradient(circle at 35% 28%, #fff 0 12%, rgba(255, 255, 255, 0) 45%), var(--gel-lime); } button.team.sel::after { content: '✔'; display: grid; place-items: center; color: #fff; font-size: 15px; text-shadow: 0 1px 1px rgba(20, 70, 0, 0.8); } button.team.t { background: linear-gradient(180deg, #ffe7a6 0%, #ffb338 47%, #e07c00 53%, #ffbe4a 100%); border-color: #a65800; text-shadow: 0 1px 2px rgba(110, 50, 0, 0.8); } #teamPreview { width: 170px; height: 230px; border-radius: 16px; border: 1px solid #fff; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.85), rgba(150, 215, 255, 0.55) 60%, rgba(60, 170, 240, 0.5)); box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 60, 110, 0.35); } .pauseTeam { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--ink2); font-weight: 700; } button.team.mini { padding: 8px 12px 8px 44px; flex: 1 1 150px; min-width: 0; border-radius: 14px; flex-direction: row; justify-content: flex-start; align-items: center; } button.team.mini b { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } button.team.mini::after { left: 10px; width: 22px; height: 22px; margin-top: -11px; } @media (max-width: 520px) { #teamPreview { display: none; } } /* boutons "gel" */ button { flex: 1; position: relative; overflow: hidden; padding: 10px 16px; border-radius: 999px; border: 1px solid #0a64a2; color: #fff; font: 700 15px var(--font); text-shadow: 0 1px 2px rgba(0, 50, 100, 0.75); cursor: pointer; background: var(--gel-aqua); box-shadow: 0 2px 5px rgba(0, 60, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 80, 140, 0.4); transition: filter 0.12s, transform 0.08s; } button::before { content: ''; position: absolute; left: 5%; right: 5%; top: 2px; height: 46%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12)); pointer-events: none; } button:hover { filter: brightness(1.08) saturate(1.15); } button:active { transform: translateY(1px); filter: brightness(0.94); } button.primary { background: var(--gel-lime); border-color: #357a05; text-shadow: 0 1px 2px rgba(20, 70, 0, 0.75); } button:disabled { opacity: 0.55; cursor: wait; } button svg { position: relative; } .error { color: var(--bad); min-height: 1.2em; margin: 8px 0 0; font-size: 13px; font-weight: 600; } /* réglages repliables */ details { margin-top: 12px; } summary { cursor: pointer; list-style: none; padding: 8px 14px; border-radius: 10px; border: 1px solid #7bb3d6; color: var(--ink); font-weight: 700; background: var(--gel-silver); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 70, 120, 0.25); } summary::-webkit-details-marker { display: none; } summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--accent); transition: transform 0.15s; } details[open] summary::before { transform: rotate(90deg); } details[open] summary { border-radius: 10px 10px 0 0; } details > :not(summary) { margin-left: 8px; margin-right: 8px; } /* curseurs : piste en creux + perle brillante */ .range { display: grid; grid-template-columns: 118px 1fr 48px; align-items: center; gap: 10px; } .range output { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: linear-gradient(180deg, #9fc4db, #eaf7ff); box-shadow: inset 0 2px 3px rgba(0, 60, 100, 0.5), 0 1px 0 #fff; } input[type=range]::-moz-range-track { height: 10px; border-radius: 6px; background: linear-gradient(180deg, #9fc4db, #eaf7ff); box-shadow: inset 0 2px 3px rgba(0, 60, 100, 0.5); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -6px; border-radius: 50%; border: 1px solid #0a64a2; background: radial-gradient(ellipse 60% 40% at 50% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #7fe0ff, #0d93e0); box-shadow: 0 2px 4px rgba(0, 50, 90, 0.55), inset 0 -3px 5px rgba(0, 80, 140, 0.5); } input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #0a64a2; background: radial-gradient(ellipse 60% 40% at 50% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)), linear-gradient(180deg, #7fe0ff, #0d93e0); } input[type=range]:hover::-webkit-slider-thumb { filter: brightness(1.1); } /* cases à cocher glossy */ .check { display: flex; gap: 9px; align-items: center; } input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 19px; height: 19px; margin: 0; border-radius: 5px; border: 1px solid #0a64a2; cursor: pointer; display: inline-grid; place-content: center; background: linear-gradient(180deg, #fff, #cfe9f8); box-shadow: inset 0 1px 2px rgba(0, 60, 100, 0.3), 0 1px 0 #fff; } input[type=checkbox]:checked { background: var(--gel-lime); border-color: #357a05; } input[type=checkbox]:checked::after { content: '✔'; color: #fff; font-size: 12px; line-height: 1; text-shadow: 0 1px 1px rgba(0, 60, 0, 0.7); } .help { margin-top: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.45); color: var(--ink2); font-size: 12.5px; line-height: 1.9; box-shadow: inset 0 1px 3px rgba(0, 70, 120, 0.15); } .help b { color: var(--ink); } /* chargement */ #loader { margin: 8px 0 14px; } #loadBar { height: 16px; border-radius: 9px; background: linear-gradient(180deg, #9fc4db, #eaf7ff); overflow: hidden; border: 1px solid #6aa8cf; box-shadow: inset 0 2px 3px rgba(0, 60, 100, 0.45); } #loadBar i { display: block; height: 100%; width: 0; transition: width 0.15s; border-radius: 8px; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 10px, rgba(255, 255, 255, 0) 10px 20px), var(--gel-lime); background-size: 40px 100%, 100% 100%; animation: stripes 0.8s linear infinite; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } @keyframes stripes { to { background-position: 40px 0, 0 0; } } #loadText { display: block; margin-top: 6px; font-size: 13px; color: var(--ink2); font-weight: 600; } /* ---------- lecteur de musique ---------- */ #player { margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(215, 241, 255, 0.5)); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0, 70, 120, 0.2); } .plHead { display: flex; justify-content: space-between; align-items: center; color: var(--ink2); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .plHead .check { margin: 0; text-transform: none; letter-spacing: 0; } #plTitle { margin: 6px 0 8px; font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #fff; } #plSeek { height: 12px; border-radius: 7px; background: linear-gradient(180deg, #9fc4db, #eaf7ff); border: 1px solid #6aa8cf; box-shadow: inset 0 2px 3px rgba(0, 60, 100, 0.45); cursor: pointer; position: relative; touch-action: none; } #plSeek::before { content: ''; position: absolute; inset: -8px 0; } #plSeek i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--gel-lime); pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .plTime { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; } .plBtns { display: flex; justify-content: center; gap: 12px; margin: 8px 0 6px; } .plBtns button { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; } .plBtns button::before { left: 12%; right: 12%; top: 3px; height: 44%; } .plBtns button svg { width: 20px; height: 20px; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 50, 100, 0.7)); } .plBtns button.on { background: var(--gel-lime); border-color: #357a05; } .plBtns button.primary { width: 54px; height: 54px; } #plList { list-style: none; margin: 8px 0 0; padding: 0; max-height: 210px; overflow: auto; border: 1px solid #6aa8cf; border-radius: 8px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 2px 4px rgba(0, 70, 120, 0.2); } #plList li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; cursor: pointer; font-size: 14px; color: var(--ink); } #plList li:nth-child(odd) { background: rgba(190, 228, 250, 0.35); } #plList li:hover { background: rgba(120, 210, 255, 0.4); } #plList li.cur { background: linear-gradient(180deg, #7fe0ff, #1d9fec 50%, #0a84d4 52%, #2bb3f3); color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 50, 100, 0.7); } #plList li span:last-child { color: var(--dim); font-variant-numeric: tabular-nums; } #plList li.cur span:last-child { color: #e6f8ff; } #plList::-webkit-scrollbar { width: 14px; } #plList::-webkit-scrollbar-track { background: linear-gradient(90deg, #cfe6f4, #f4fbff); } #plList::-webkit-scrollbar-thumb { border-radius: 8px; border: 1px solid #0a64a2; background: linear-gradient(90deg, #8fe3ff, #1d9fec 60%, #6cd2fb); } #menuPause .buttons { margin-top: 0; } /* ---------- HUD ---------- */ #hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 3px rgba(0, 40, 80, 0.85); } /* Viseur : 4 branches positionnées au pixel physique près par JS (layoutCrosshair) -> net, centré, sans flou */ #crosshair { position: absolute; left: 0; top: 0; width: 0; height: 0; } #crosshair i { position: absolute; background: var(--ch-color, #3dff7a); box-shadow: 0 0 0 var(--ch-ol, 1px) rgba(0, 0, 0, 0.85); } .pill, #timer, #nowPlaying, #netInfo, #toast { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.9); text-shadow: none; color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(190, 232, 255, 0.6) 50%, rgba(140, 214, 255, 0.55) 52%, rgba(200, 240, 255, 0.7)); box-shadow: 0 2px 8px rgba(0, 50, 100, 0.4), inset 0 1px 0 #fff; backdrop-filter: blur(6px); } #nowPlaying { position: absolute; right: 14px; bottom: 14px; padding: 5px 16px; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.6s; max-width: 40vw; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nowPlaying.show { opacity: 1; } #timer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 4px 28px 6px; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 1px; } #timer small { display: block; margin-top: -2px; font-size: 11px; letter-spacing: 3px; color: var(--ink2); font-weight: 700; } #timer.running small { color: var(--good); } #timer.done small { color: var(--warn); } #timer small#timerBest { margin-top: 0; font-size: 12px; letter-spacing: 1.5px; color: #b7791f; } #timer.done small#timerBest { color: #b7791f; } #speedBox { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 50px; font-weight: 800; font-style: italic; line-height: 1; color: #fff; text-shadow: 0 0 14px rgba(70, 200, 255, 0.95), 0 0 4px rgba(0, 90, 160, 0.9), 0 3px 0 rgba(0, 70, 130, 0.65); } #speedBox small { font-size: 13px; margin-left: 6px; color: #d4f3ff; font-weight: 700; font-style: normal; text-shadow: 0 1px 2px rgba(0, 50, 100, 0.9); } #keys { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } #keys span { min-width: 30px; padding: 4px 8px; text-align: center; border-radius: 7px; font: 700 12px var(--font); color: var(--ink2); text-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(200, 235, 252, 0.7)); border: 1px solid rgba(255, 255, 255, 0.95); border-bottom: 2px solid rgba(80, 160, 210, 0.9); box-shadow: 0 2px 4px rgba(0, 50, 100, 0.35); } #keys span.wide { min-width: 58px; } #keys span.on { background: var(--gel-lime); color: #fff; border-color: #357a05; text-shadow: 0 1px 1px rgba(20, 70, 0, 0.7); transform: translateY(1px); } #netInfo { position: absolute; top: 12px; right: 14px; padding: 3px 14px; font-size: 12px; font-weight: 600; text-align: right; line-height: 1.5; } #toast { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); padding: 6px 22px; font-size: 17px; font-weight: 800; color: var(--ink); opacity: 0; transition: opacity 0.4s; text-align: center; } #toast.show { opacity: 1; } #chat { position: absolute; left: 14px; bottom: 14px; width: min(420px, 45vw); font-size: 13.5px; } #chatLog { display: flex; flex-direction: column; gap: 1px; max-height: 190px; overflow: hidden; justify-content: flex-end; } #chatLog div { width: fit-content; max-width: 100%; padding: 2px 8px; border-radius: 3px; word-break: break-word; transition: opacity 1s; color: #fff; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 3px #000; } #chatLog div b { font-weight: 800; } #chatLog div.old { opacity: 0; } #chatLog div.sys { color: #c9d3e3; font-style: italic; font-weight: 500; } #chat.typing #chatLog div.old { opacity: 1; } #chat.typing #chatLog { background: rgba(10, 14, 22, 0.45); border-radius: 4px; padding: 4px 0; } #chatLog div .tag { font-weight: 800; font-size: 12px; margin-right: 2px; color: #b9c2d0; } #chatLog div .tag.ct { color: #7fb2ff; } #chatLog div .tag.t { color: #f0c24b; } #chatLog div .tag.aero { color: #35d8f0; } #chatLog div .tag.msn { color: #4da3ff; } #chatBar { display: none; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 10px; border-radius: 4px; background: rgba(10, 14, 22, 0.75); border: 1px solid rgba(255, 255, 255, 0.25); pointer-events: auto; } #chat.typing #chatBar { display: flex; } #chatLabel { font-weight: 800; font-size: 13px; color: #b9c2d0; white-space: nowrap; text-shadow: 0 1px 2px #000; } #chat.team #chatLabel { color: #f0c24b; } #chat.team.ct #chatLabel { color: #7fb2ff; } #chat.team.aero #chatLabel { color: #35d8f0; } #chat.team.msn #chatLabel { color: #4da3ff; } #chatInput { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; box-shadow: none; color: #fff; padding: 2px 0; font: inherit; font-weight: 600; } #board { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, 92vw); padding: 14px 18px; color: var(--ink); text-shadow: none; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(205, 238, 255, 0.72)); border: 1px solid var(--edge); box-shadow: 0 0 0 1px rgba(8, 92, 156, 0.5), 0 14px 40px rgba(0, 50, 100, 0.5), inset 0 1px 0 #fff; backdrop-filter: blur(12px); } #board h3 { margin: 6px 0; padding: 3px 12px; border-radius: 999px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 50, 100, 0.7); background: var(--gel-aqua); border: 1px solid #0a64a2; } #board ol { margin: 0 0 4px; padding-left: 26px; font-weight: 600; } #boardPlayers div { display: flex; justify-content: space-between; padding: 3px 4px; font-weight: 600; } #boardPlayers div:nth-child(odd) { background: rgba(190, 228, 250, 0.4); border-radius: 6px; } #boardPlayers i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(0, 50, 100, 0.4); } #devInfo { position: absolute; top: 12px; left: 12px; font: 12px ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, 0.55); color: #fff; padding: 6px 8px; border-radius: 6px; white-space: pre; } #flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.5s; } #flash.on { opacity: 0.85; transition: none; } @media (max-width: 700px) { #chat { width: 70vw; } #speedBox { font-size: 38px; } .panelBody { padding: 12px 14px 16px; } .range { grid-template-columns: 96px 1fr 40px; } } /* ---------- manette : focus visible dans les menus, aides à l'écran ---------- */ button:focus-visible, summary:focus-visible, input:focus-visible, #colors i:focus-visible, #chColors i:focus-visible { outline: 3px solid #b6f23a; outline-offset: 2px; box-shadow: 0 0 16px rgba(170, 255, 80, 0.95); } #colors i, #chColors i { outline: none; } #padHelp { display: none; position: absolute; right: 14px; bottom: 54px; max-width: 46vw; padding: 5px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.9); color: var(--ink2); font-size: 11.5px; font-weight: 700; text-shadow: none; text-align: right; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(190, 232, 255, 0.6)); box-shadow: 0 1px 6px rgba(0, 50, 100, 0.3); } body.pad #padHelp { display: block; } /* ---------- panneau de réglages (menu principal et menu Échap) ---------- */ #menuSettings { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; padding-right: 6px; } #menuSettings.hidden { display: none; } #menuSettings .settingsTitle { margin: 0 0 4px; font-size: 20px; color: var(--ink); } #menuSettings .buttons { position: sticky; bottom: 0; padding-top: 8px; } /* case « inclure dans la lecture » de chaque piste */ #plList li .plKeep { flex: 0 0 auto; margin: 0 2px 0 0; cursor: pointer; } #plList li span:nth-child(2) { flex: 1; } #plList li.off span { opacity: 0.45; text-decoration: line-through; } #plList li.cur.off span { opacity: 0.8; } /* écran court : le bloc d'aide des contrôles est masqué pour que le menu tienne sans trop le réduire */ .panel.compact .help { display: none; } /* ---------- tactile (téléphone / tablette) ---------- */ html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #gl { touch-action: none; } .touchOnly { display: none; } body.touch span.touchOnly { display: inline; } body.touch div.touchOnly { display: block; } body.touch label.range.touchOnly { display: grid; } body.touch .desktopOnly { display: none; } body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } body.touch input[type=text], body.touch input:not([type]) { font-size: 16px; -webkit-user-select: text; user-select: text; } /* 16 px : évite le zoom automatique d'iOS */ body.touch #menu { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } @media (max-height: 520px) { #teamPreview { display: none; } .panelBody { padding: 8px 14px 12px; } .panel h1 { font-size: 34px; } } #touch { display: none; position: fixed; inset: 0; z-index: 6; touch-action: none; } body.touch.playing #touch { display: block; } #tLook { position: absolute; inset: 0; touch-action: none; } /* croix directionnelle (en bas à gauche) : 4 branches qui s'allument selon la direction ; un seul doigt la pilote (8 directions) */ #dpad { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: 22px; width: 156px; height: 156px; touch-action: none; } #dpad i { position: absolute; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(20, 110, 190, 0.45); box-shadow: 0 2px 8px rgba(0, 40, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; transition: background 0.06s; } #dpad i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 9px solid transparent; } #dpad .up { left: 52px; top: 0; width: 52px; height: 64px; border-radius: 14px 14px 4px 4px; } #dpad .dn { left: 52px; bottom: 0; width: 52px; height: 64px; border-radius: 4px 4px 14px 14px; } #dpad .lf { left: 0; top: 52px; width: 64px; height: 52px; border-radius: 14px 4px 4px 14px; } #dpad .rt { right: 0; top: 52px; width: 64px; height: 52px; border-radius: 4px 14px 14px 4px; } #dpad .up::after { margin: -14px 0 0 -9px; border-bottom-color: rgba(255, 255, 255, 0.9); } #dpad .dn::after { margin: -4px 0 0 -9px; border-top-color: rgba(255, 255, 255, 0.9); } #dpad .lf::after { margin: -9px 0 0 -14px; border-right-color: rgba(255, 255, 255, 0.9); } #dpad .rt::after { margin: -9px 0 0 -4px; border-left-color: rgba(255, 255, 255, 0.9); } #dpad .ctr { left: 52px; top: 52px; width: 52px; height: 52px; border-radius: 4px; opacity: 0.85; } #dpad.u .up, #dpad.d .dn, #dpad.l .lf, #dpad.r .rt { background: rgba(110, 215, 40, 0.8); } button.tb { position: absolute; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; font: 800 13px var(--font); letter-spacing: 0.5px; background: rgba(20, 110, 190, 0.45); box-shadow: 0 2px 8px rgba(0, 40, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); touch-action: none; } button.tb::before { display: none; } button.tb:hover { filter: none; } button.tb:active, button.tb.on { background: rgba(110, 215, 40, 0.75); transform: none; filter: none; } #tJump { width: 88px; height: 88px; right: max(26px, env(safe-area-inset-right)); bottom: 34px; font-size: 15px; } #tDuck { width: 64px; height: 64px; right: calc(max(26px, env(safe-area-inset-right)) + 104px); bottom: 24px; font-size: 9.5px; } #tKnife { width: 52px; height: 52px; right: calc(max(26px, env(safe-area-inset-right)) + 14px); bottom: 136px; font-size: 20px; } #tMenu, #tBoard, #tChat, #tRespawn, #tMusic { width: 40px; height: 40px; top: 10px; font-size: 17px; border-radius: 12px; } #tMenu { left: max(10px, env(safe-area-inset-left)); } #tBoard { left: calc(max(10px, env(safe-area-inset-left)) + 48px); } #tChat { left: calc(max(10px, env(safe-area-inset-left)) + 96px); } #tRespawn { left: calc(max(10px, env(safe-area-inset-left)) + 144px); } #tMusic { left: calc(max(10px, env(safe-area-inset-left)) + 192px); } #tMusic.off { opacity: 0.7; } /* HUD sur téléphone : touches clavier masquées, chat en haut (le bas est occupé par les pouces), marges d'encoche */ body.touch #keys { display: none; } body.touch #chat { bottom: auto; top: 58px; left: max(10px, env(safe-area-inset-left)); width: min(420px, 50vw); } body.touch #netInfo { right: max(14px, env(safe-area-inset-right)); } body.touch #nowPlaying { bottom: auto; top: 44px; right: max(14px, env(safe-area-inset-right)); } body.touch #speedBox { bottom: 20px; } body.touch #timer { font-size: 24px; padding: 2px 22px 4px; } body.touch #toast { top: 74px; } #rotate { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; text-align: center; background: #0b3a5e; color: #fff; font: 700 20px/1.6 var(--font); } @media (orientation: portrait) { body.touch.playing #rotate { display: grid; } } /* aide plein écran iPhone */ #fsHelp { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(0, 40, 80, 0.6); } .fsBox { width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 16px 20px; border-radius: 14px; color: var(--ink); border: 1px solid var(--edge); background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(205, 238, 255, 0.9)); box-shadow: 0 14px 40px rgba(0, 50, 100, 0.5); } .fsBox h2 { margin: 0 0 8px; font-size: 18px; } .fsBox ol { margin: 0 0 12px; padding-left: 22px; line-height: 1.5; font-size: 14px; } .shareIcon { display: inline-block; padding: 0 5px; border: 1px solid #6aa8cf; border-radius: 4px; background: #fff; } .fsBox button { flex: none; width: 100%; } /* compteur de joueurs en ligne (menus) */ .onlineCount { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink2); } .onlineCount::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #7bd34f; vertical-align: 1px; } .onlineCount.off::before { background: #888; } button.team.aero { background: linear-gradient(180deg, #e4fff0 0%, #7fe8b0 40%, #17b6e8 52%, #9af2ff 100%); border-color: #0b7fa3; color: #fff; text-shadow: 0 1px 2px rgba(0, 70, 100, 0.8); } button.team.msn { background: linear-gradient(180deg, #c9e4ff 0%, #4da3ff 42%, #1458d8 52%, #6fcf3a 100%); border-color: #0b3f9e; color: #fff; text-shadow: 0 1px 2px rgba(0, 30, 90, 0.8); } /* petits écrans (téléphone) : les 4 personnages tiennent sans défiler (grille 2x2, cartes compactes) */ @media (max-width: 520px), (max-height: 520px) { .teamCards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } button.team { padding: 6px 8px 6px 36px; border-radius: 12px; } button.team b { font-size: 13px; } button.team small { display: none; } button.team::after { left: 8px; width: 20px; height: 20px; margin-top: -10px; } button.team.sel::after { font-size: 12px; } .pauseTeam { flex-wrap: wrap; gap: 6px; } button.team.mini { flex: 1 1 45%; padding: 6px 8px 6px 34px; } } .onlineCount:empty { display: none; } .onlineCount small { margin-left: 6px; font-weight: 600; opacity: 0.8; } /* téléphone / petits écrans : titre, carte et compteur de joueurs rangés proprement (compteur en pastille en haut à droite) */ @media (max-width: 760px), (max-height: 520px) { .subLong { display: none; } .sub { margin: 2px 0 8px; font-size: 12px; font-weight: 700; } .onlineCount { position: absolute; top: 10px; right: 14px; margin: 0; padding: 3px 11px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 1px 4px rgba(0, 60, 110, 0.25); font-size: 12px; line-height: 1.25; text-align: right; } .onlineCount small { display: block; margin: 0; font-size: 10.5px; } } /* listes déroulantes (langue, interface) */ select { min-width: 0; padding: 6px 28px 6px 10px; border-radius: 9px; border: 1px solid #6aa8cf; color: var(--ink); font: 600 13px var(--font); cursor: pointer; outline: none; background: linear-gradient(180deg, #e3f2fb, #fff 45%); box-shadow: inset 0 2px 4px rgba(0, 70, 120, 0.2), 0 1px 0 #fff; } select:focus-visible { outline: 3px solid #b6f23a; outline-offset: 2px; } .range select { grid-column: 2 / 4; } body.touch select { font-size: 16px; } /* évite le zoom automatique d'iOS */ /* outils de développement détectés : le jeu est bloqué tant qu'ils sont ouverts */ #guard { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; text-align: center; background: #0b3a5e; color: #fff; } #guard h2 { margin: 0 0 8px; font-size: 24px; } #guard p { margin: 0; color: #cfe8fa; } /* équipe (menu pause) : étiquette sur sa ligne, puis grille 2x2 — les noms longs (ex. « Counter-Terrorists ») tiennent entiers à côté du rond */ .pauseTeam.teams > span { flex: 0 0 100%; } .pauseTeam.teams button.team.mini { flex: 1 1 calc(50% - 6px); } /* ---------- tutoriel ---------- */ #tuto { position: absolute; left: 0; right: 0; top: 10px; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .tutoCard { position: relative; width: min(600px, 94vw); padding: 10px 16px 12px; border-radius: 16px; border: 1px solid var(--edge); color: var(--ink); text-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(214, 240, 255, 0.82)); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 0 0 1px rgba(8, 92, 156, 0.5), 0 10px 28px rgba(0, 50, 100, 0.4), inset 0 1px 0 #fff; } .tutoHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 11px var(--font); letter-spacing: 2px; color: var(--ink2); } #tutoDots { display: flex; gap: 5px; } #tutoDots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(43, 106, 149, 0.25); border: 1px solid rgba(255, 255, 255, 0.9); } #tutoDots i.done { background: var(--gel-lime); border-color: #357a05; } #tutoDots i.cur { background: var(--gel-aqua); border-color: #0a64a2; box-shadow: 0 0 8px rgba(30, 170, 250, 0.9); transform: scale(1.25); } #tutoTitle { margin: 3px 0 2px; font: 800 22px var(--font); font-style: italic; color: var(--ink); } #tutoText { font-size: 15px; line-height: 1.7; color: var(--ink); } #tutoText kbd { font-size: 13px; padding: 1px 8px; margin: 0 1px; } #tutoBar { height: 7px; margin-top: 8px; border-radius: 999px; background: rgba(43, 106, 149, 0.2); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); } #tutoBar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gel-lime); transition: width 0.2s; } #tutoHint { display: none; margin-top: 8px; padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.6; color: #7a4a00; background: rgba(255, 233, 160, 0.85); border: 1px solid rgba(217, 127, 0, 0.5); } #tutoHint.show { display: block; } #tutoHint:empty { display: none !important; } #tutoSkip { margin-top: 6px; text-align: right; font-size: 12px; color: var(--dim); } #tutoSkip.btn { pointer-events: auto; cursor: pointer; padding: 6px 4px; font-size: 14px; font-weight: 700; color: var(--ink2); } #tutoSkip kbd { font-size: 11px; } .tutoCard:has(#tutoSkip:empty) #tutoSkip { display: none; } #tuto.last .tutoCard { box-shadow: 0 0 0 2px #b6f23a, 0 0 22px rgba(170, 255, 80, 0.85), 0 10px 28px rgba(0, 50, 100, 0.4); } #tutoArrow { margin-top: 10px; width: 52px; height: 52px; filter: drop-shadow(0 2px 4px rgba(0, 50, 100, 0.6)); transition: transform 0.08s linear; } #tutoArrow svg { width: 100%; height: 100%; } #tutoArrow path { fill: #4de1ff; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; } #tutoArrow.near path { fill: #b6f23a; } /* touches à utiliser : clignotent dans l'affichage des touches */ #keys span.hint { border-color: #1aa7f2; box-shadow: 0 0 0 2px rgba(60, 190, 255, 0.85), 0 0 14px rgba(60, 190, 255, 0.9); animation: keyHint 1s ease-in-out infinite; } @keyframes keyHint { 50% { box-shadow: 0 0 0 2px rgba(182, 242, 58, 0.95), 0 0 18px rgba(182, 242, 58, 0.95); } } body.tutorial #timer, body.tutorial #netInfo { display: none; } /* menu : bouton Tutoriel et accueil du mode tutoriel */ .tutoRow { margin-top: 10px; } button.tutoBtn { background: var(--gel-silver); color: var(--ink); border-color: #7bb3d6; text-shadow: 0 1px 0 #fff; } button.tutoBtn.new { animation: tutoPulse 1.6s ease-in-out infinite; } @keyframes tutoPulse { 50% { box-shadow: 0 0 0 3px #b6f23a, 0 0 16px rgba(170, 255, 80, 0.9), 0 2px 5px rgba(0, 60, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); } } @media (prefers-reduced-motion: reduce) { button.tutoBtn.new, #keys span.hint { animation: none; } } #tutoIntro h2 { margin: 4px 0 6px; font-size: 24px; font-style: italic; color: var(--ink); } #tutoIntro p { margin: 0 0 6px; color: var(--ink2); line-height: 1.7; } body.tutorial #menuMain > :not(#tutoIntro):not(.keep) { display: none; } body.tutorial #menuPause .pauseTeam.teams, body.tutorial #menuPause #player { display: none; } .tutoEnd { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-weight: 800; color: #2b6a05; background: rgba(214, 255, 160, 0.8); border: 1px solid #5aa80a; } body.touch .tutoCard { padding: 6px 12px 8px; width: min(520px, 62vw); } body.touch #tutoTitle { font-size: 17px; margin: 1px 0; } body.touch #tutoText { font-size: 13px; line-height: 1.5; } body.touch #tutoArrow { position: fixed; top: 46%; left: 50%; margin: 0 0 0 -26px; opacity: 0.8; } @media (max-height: 520px) { #tutoText { font-size: 13px; line-height: 1.45; } #tutoTitle { font-size: 17px; } #tutoArrow { display: none; } } /* ============================================================================================= Menu à onglets (maquette « C ») : une seule fenêtre pour le menu principal et le menu pause. Onglets : Jouer, Personnage, Musique, Réglages, Aide ; lecteur de musique réduit à une ligne en bas. ============================================================================================= */ #menu:not(.ingame) .onlyPause { display: none !important; } #menu.ingame .onlyMain { display: none !important; } .panel:has(#menuMain:not(.hidden)) { width: min(960px, 100%); height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column; } .panel:has(#menuMain:not(.hidden)) .panelBody { flex: 1; min-height: 0; padding: 0; display: flex; flex-direction: column; } #menuMain { flex: 1; min-height: 0; display: flex; flex-direction: column; } #menuMain.hidden { display: none; } #menuMain:not(.hidden) ~ .loadHead { display: none; } .loadHead { padding: 0; } .shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 208px minmax(0, 1fr); } .tabnav { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; min-height: 0; overflow: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(150, 215, 255, 0.45)); border-right: 1px solid rgba(255, 255, 255, 0.9); } .tabnav .brand { padding: 2px 8px 12px; } .tabnav .brand h1 { font-size: 30px; } .tabnav .grow { flex: 1; } .tabnav > button.primary { flex: none; padding: 12px 14px; font-size: 16px; } button.tabbtn { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink2); text-shadow: none; box-shadow: none; font-size: 15px; text-align: left; filter: none; } button.tabbtn::before { display: none; } button.tabbtn svg { width: 21px; height: 21px; fill: currentColor; flex: none; } button.tabbtn:hover { background: rgba(255, 255, 255, 0.5); filter: none; } button.tabbtn[aria-selected="true"] { background: var(--gel-aqua); color: #fff; border-color: #0a64a2; text-shadow: 0 1px 2px rgba(0, 50, 100, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 5px rgba(0, 60, 110, 0.4); } .pages { min-width: 0; min-height: 0; padding: 16px 22px; overflow: auto; } .page { display: flex; flex-direction: column; gap: 14px; min-height: 100%; } .page.hidden { display: none; } .pgTop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .pgTop .nameBox { flex: 0 1 270px; margin: 0; } .pgTop .onlineCount, #menu .onlineCount { position: static; flex: 1; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: right; font-size: 13px; } #menu .onlineCount small { display: inline; margin-left: 6px; font-size: 12px; } .mapGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } button.mapbtn { --fb: linear-gradient(180deg, #4aa0e0, #c8763a 60%, #7a3a22); position: relative; flex: none; aspect-ratio: 16 / 10; padding: 0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; border: 1px solid #fff; background: var(--img) center / cover no-repeat, var(--fb); box-shadow: 0 2px 6px rgba(0, 60, 110, 0.45); filter: saturate(0.6) brightness(0.92); text-shadow: 0 1px 4px rgba(0, 30, 60, 0.95); } button.mapbtn::before { left: 0; right: 0; top: 0; height: 100%; border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 35%, rgba(0, 25, 55, 0.8)); } button.mapbtn b { position: relative; padding: 0 14px; font-size: 20px; line-height: 1.1; } button.mapbtn .mcnt { position: relative; padding: 0 14px 10px; font-size: 12px; font-weight: 700; opacity: 0.95; } button.mapbtn .mcnt::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #48d02a; box-shadow: 0 0 6px #7fff55; } button.mapbtn.sel { filter: none; box-shadow: 0 0 0 3px #b6f23a, 0 0 18px rgba(170, 255, 80, 0.85), 0 2px 6px rgba(0, 60, 110, 0.45); } button.mapbtn[data-map="surf_utopia_njv"] { --fb: linear-gradient(160deg, #6fb6ee 0 40%, #e9f3fb 40% 70%, #b9d3e8 70%); } button.mapbtn[data-map="surf_boreas"] { --fb: linear-gradient(170deg, #dfe5e6 0 55%, #4a5a58 55% 80%, #2c3a38 80%); } button.mapbtn[data-map="surf_mesa_revo"] { --fb: linear-gradient(180deg, #4aa0e0 0 24%, #c8763a 24% 60%, #7a3a22 60%); } button.tutoBtn { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 9px 14px; border-radius: 14px; border: 1px dashed #4aa30a; background: rgba(214, 255, 160, 0.75); color: #2b6a05; text-shadow: none; box-shadow: none; text-align: left; filter: none; } button.tutoBtn::before { display: none; } button.tutoBtn:hover { filter: brightness(1.05); } .tutoOrb { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gel-lime); border: 1px solid #357a05; color: #fff; font-weight: 800; font-size: 19px; text-shadow: 0 1px 2px rgba(20, 70, 0, 0.8); } .tutoTx { display: flex; flex-direction: column; min-width: 0; } .tutoTx b { font-size: 15px; } .tutoTx small { font-size: 12px; font-weight: 600; color: #4f7a2a; } .playActions { margin-top: auto; } .playActions .acts { display: flex; gap: 12px; align-items: stretch; } .playActions button.big { padding: 14px 22px; font-size: 19px; } .playActions button.sq { flex: 0 0 54px; font-size: 20px; padding: 0; } button.danger { background: linear-gradient(180deg, #ffd0c8, #ee5a40 47%, #c42a12 53%, #ee6a50); border-color: #a02010; text-shadow: 0 1px 2px rgba(80, 10, 0, 0.8); } /* personnage */ .persoGrid { display: grid; grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); gap: 22px; align-items: start; } #menu #teamPreview { display: block; width: 100%; height: auto; aspect-ratio: 240 / 325; } .persoSide { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .persoSide .teamCards { display: flex; flex-direction: column; gap: 10px; } .persoSide button.team { flex: none; } /* musique : lecteur complet à gauche, liste des pistes à droite */ #player { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-content: start; } #player > * { grid-column: 1; min-width: 0; } #player > #plList { grid-column: 2; grid-row: 1 / span 9; max-height: none; margin: 0; height: 100%; min-height: 220px; } /* réglages : deux colonnes */ .help { margin-top: 0; } /* lecteur d'une ligne */ .menuFoot { flex: none; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, 0.9); background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(190, 228, 255, 0.4)); } #miniPlayer { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(190, 228, 255, 0.8)); box-shadow: 0 1px 4px rgba(0, 60, 110, 0.35), inset 0 1px 0 #fff; } .mpNote { color: #1e8fdc; font-weight: 800; font-size: 16px; } #mpTitle { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } button.mpb { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; } button.mpb::before { left: 12%; right: 12%; top: 2px; height: 44%; } button.mpb svg { width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 50, 100, 0.6)); } #mpVol { flex: none; width: 120px; } /* tutoriel : écran d'accueil seul (la fenêtre à onglets n'apparaît qu'en pause) */ body.tutorial #menu:not(.ingame) .shell, body.tutorial #menu:not(.ingame) .menuFoot { display: none; } body.tutorial #menu:not(.ingame) .panel:has(#menuMain:not(.hidden)) { width: min(600px, 100%); height: auto; } body.tutorial #menu:not(.ingame) .panel:has(#menuMain:not(.hidden)) .panelBody { padding: 16px 22px 20px; } #menu.ingame #tutoIntro { display: none; } /* écrans étroits ou bas : onglets réduits à leurs icônes */ @media (max-width: 860px), (max-height: 520px) { .shell { grid-template-columns: 62px minmax(0, 1fr); } .tabnav { padding: 10px 6px; align-items: center; } .tabnav .brand { display: none; } button.tabbtn { justify-content: center; padding: 11px 0; width: 100%; } button.tabbtn span { display: none; } .pages { padding: 12px 14px; } } @media (max-width: 760px) { .setGrid { grid-template-columns: 1fr; } .persoGrid { grid-template-columns: 1fr; } #player { grid-template-columns: 1fr; } #player > #plList { grid-column: 1; grid-row: auto; height: auto; max-height: 200px; min-height: 0; margin-top: 8px; } .pgTop .nameBox { flex: 1 1 100%; } button.mapbtn b { font-size: 16px; padding: 0 10px; } button.mapbtn .mcnt { padding: 0 10px 8px; } #mpVol { width: 70px; } } @media (max-height: 520px) { .panel:has(#menuMain:not(.hidden)) { height: calc(100dvh - 20px); } #menu { padding: 10px; } button.mapbtn { aspect-ratio: 16 / 8; } #menu #teamPreview { max-height: 190px; width: auto; } .persoGrid { grid-template-columns: auto minmax(0, 1fr); } .playActions button.big { padding: 10px 16px; font-size: 16px; } .menuFoot { padding: 5px 10px; } #miniPlayer { height: 38px; } button.mpb { width: 28px; height: 28px; } } /* téléphone : boutons d'action sur une ligne, cartes lisibles, actions toujours visibles */ .playActions { position: sticky; bottom: 0; } .playActions button { white-space: nowrap; } @media (max-width: 560px) { .shell { grid-template-columns: 52px minmax(0, 1fr); } .pages { padding: 10px; } .mapGrid { grid-template-columns: 1fr; gap: 8px; } button.mapbtn { aspect-ratio: 16 / 5; } button.mapbtn b { font-size: 18px; } .playActions .acts { flex-wrap: wrap; gap: 8px; } .playActions button.big { flex: 1 1 40%; padding: 12px 10px; font-size: 16px; border-radius: 999px; } .playActions button.sq { flex: 0 0 48px; height: 48px; } .pgTop .onlineCount { flex: 1 1 100%; text-align: left; } #mpVol { display: none; } .tutoTx small { display: none; } } @media (max-height: 520px) { .mapGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } button.mapbtn { aspect-ratio: 16 / 6; } button.mapbtn b { font-size: 15px; } button.mapbtn .mcnt { padding-bottom: 6px; } .page { gap: 8px; } .pgTop { gap: 8px; } .playActions { padding-top: 6px; background: linear-gradient(180deg, transparent, rgba(190, 228, 255, 0.9) 30%); } } /* correctifs téléphone : actions pleine largeur, ordre adapté aux écrans bas */ .playActions { position: static; background: none; } @media (max-width: 560px) { .playActions .acts { flex-direction: column; } .playActions button.big, .playActions button.sq, .playActions .acts > button { flex: none; width: 100%; height: auto; padding: 12px 10px; } #menu .pgTop .onlineCount { flex: 1 1 100%; text-align: left; } } @media (max-height: 520px) { .playActions { order: -1; margin-top: 0; padding-top: 0; background: none; } .playActions .acts { flex-direction: row; flex-wrap: nowrap; } .playActions .acts > button { width: auto; flex: 1 1 0; padding: 8px 10px; } .playActions button.sq { flex: 0 0 44px; } } @media (max-width: 560px) { .playActions { order: -1; margin-top: 0; } } /* croix de la barre de titre (menu pause) : même effet que « Reprendre » */ .tbBtns button.x { position: relative; width: 40px; height: 17px; padding: 0; border-radius: 4px; border: 1px solid #ffd0c8; background: linear-gradient(180deg, #ffb0a0, #ee5a40 50%, #c42a12 52%, #ee6a50); box-shadow: 0 1px 2px rgba(0, 50, 100, 0.5); cursor: default; filter: none; } .tbBtns button.x::before, .tbBtns button.x::after { content: none; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: #fff; box-shadow: 0 1px 1px rgba(90, 10, 0, 0.7); } #menu.ingame .tbBtns button.x { cursor: pointer; } #menu.ingame .tbBtns button.x::before { content: ''; transform: rotate(45deg); } #menu.ingame .tbBtns button.x::after { content: ''; transform: rotate(-45deg); } #menu.ingame .tbBtns button.x:hover { filter: brightness(1.12); } #menu.ingame .tbBtns button.x:active { filter: brightness(0.9); } /* onglet Musique : la page ne défile pas, seule la playlist défile */ .pages:has(#pg_music:not(.hidden)) { overflow: hidden; } #pg_music { height: 100%; min-height: 0; } #player { height: 100%; min-height: 0; grid-template-rows: repeat(7, auto) minmax(0, 1fr); } #player > #plList { grid-column: 2; grid-row: 1 / -1; height: auto; min-height: 0; max-height: none; overflow: auto; } @media (max-width: 760px) { #player > #plList { grid-column: 1; grid-row: 8; max-height: none; margin-top: 8px; } } @media (max-height: 520px) { .pages:has(#pg_music:not(.hidden)) { overflow: auto; } #pg_music, #player { height: auto; } #player > #plList { max-height: 200px; } } /* réglages : cartes thématiques en deux colonnes */ .setGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .setCard { min-width: 0; margin: 0; padding: 6px 16px 14px; display: flex; flex-direction: column; gap: 11px; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(205, 235, 252, 0.55)); box-shadow: 0 2px 6px rgba(0, 70, 120, 0.25), inset 0 1px 0 #fff; } .setCard legend { padding: 3px 14px; border-radius: 999px; border: 1px solid #0a64a2; background: var(--gel-aqua); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 50, 100, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 60, 110, 0.4); } .setCard .range { grid-template-columns: 96px minmax(0, 1fr) 42px; } .setCard .range select { grid-column: 2 / 4; width: 100%; } .setCard .net { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink2); } .setCard .net input { width: 100%; } .setCard .row { margin: 0; } @media (max-width: 760px) { .setCard .range { grid-template-columns: 90px minmax(0, 1fr) 40px; } } .setGrid { display: block; column-count: 2; column-gap: 14px; } .setCard { break-inside: avoid; margin: 0 0 14px; padding-bottom: 12px; gap: 8px; } .setCard .range { min-height: 30px; } @media (max-width: 760px) { .setGrid { column-count: 1; } } @media (min-width: 761px) { .setCard:nth-child(3) { break-after: column; } } .setCard .row > span { display: none; } .setCard .row { justify-content: center; } /* réglages compacts : tout tient dans la fenêtre sans défilement */ .panel:has(#menuMain:not(.hidden)) { height: min(700px, calc(100dvh - 24px)); } .pages:has(#pg_settings:not(.hidden)) { padding: 12px 18px; } .setGrid { column-gap: 12px; } .setCard { margin-bottom: 10px; padding: 4px 14px 10px; gap: 5px; } .setCard legend { font-size: 11px; padding: 2px 12px; } .setCard .range { min-height: 26px; font-size: 13px; } .setCard .range select, .setCard .net input { padding-top: 4px; padding-bottom: 4px; } .setCard .net { flex-direction: row; align-items: center; gap: 10px; } .setCard .net span { flex: none; width: 96px; } .setCard .check { font-size: 13px; } .setCard .row { gap: 8px; } #chColors i { width: 22px; height: 22px; } @media (max-height: 520px) { .panel:has(#menuMain:not(.hidden)) { height: calc(100dvh - 20px); } } .setCard > label, .setCard > .row { margin: 0; } .setCard { gap: 11px; padding: 6px 16px 14px; margin-bottom: 14px; } .setCard .range { min-height: 32px; } .setCard .check { min-height: 24px; } #chColors i { width: 24px; height: 24px; } /* réglages symétriques : Général | Audio, Contrôles pleine largeur, Graphismes | Viseur */ .setGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-count: auto; gap: 14px; align-items: stretch; } .setGrid .setCard { margin: 0; break-inside: auto; break-after: auto; } .setCard.wide { grid-column: 1 / -1; } .setCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; } .setCol { display: flex; flex-direction: column; gap: 11px; min-width: 0; } .setCol h4 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink2); border-bottom: 1px solid rgba(40, 140, 200, 0.35); padding-bottom: 3px; } .setCol > label { margin: 0; } @media (max-width: 760px) { .setGrid, .setCols { grid-template-columns: 1fr; } } .setCard:last-child { gap: 6px; } .setCard:last-child .range { min-height: 28px; } .setCard.wide .setCol { gap: 8px; } .setCard.wide { padding-bottom: 12px; } .setGrid { gap: 12px; } /* la croix est toujours dessinée ; elle n'agit qu'en pause */ .tbBtns button.x::before { content: ''; transform: rotate(45deg); } .tbBtns button.x::after { content: ''; transform: rotate(-45deg); } /* onglet Personnage : grande scène à gauche, équipes en grille 2×2 et couleurs dans un cadre à droite */ .persoGrid { grid-template-columns: minmax(200px, 310px) minmax(0, 1fr); gap: 26px; align-items: center; min-height: 100%; } .stage { position: relative; border-radius: 20px; border: 1px solid #fff; overflow: hidden; background: radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.9), rgba(160, 220, 255, 0.6) 55%, rgba(50, 160, 235, 0.55)); box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.85), 0 3px 10px rgba(0, 70, 120, 0.4); } .stage::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 5%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 70, 130, 0.45), transparent 70%); pointer-events: none; } .stage #teamPreview, #menu .stage #teamPreview { border: 0; border-radius: 0; background: none; box-shadow: none; position: relative; z-index: 1; } .persoSide { gap: 10px; } .persoH { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink2); border-bottom: 1px solid rgba(40, 140, 200, 0.35); padding-bottom: 3px; } .persoSide .teamCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .persoSide button.team { min-height: 92px; padding: 12px 12px 12px 54px; border-radius: 18px; } .persoSide button.team b { font-size: 16px; } .persoSide button.team::after { left: 13px; } .colorBox { padding: 14px 16px; border-radius: 16px; border: 1px solid #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(205, 235, 252, 0.55)); box-shadow: 0 2px 6px rgba(0, 70, 120, 0.25), inset 0 1px 0 #fff; } .colorBox #colors { justify-content: space-between; gap: 8px; } .colorBox #colors i { width: 34px; height: 34px; } @media (max-width: 760px) { .persoGrid { grid-template-columns: 1fr; } .stage { max-width: 260px; margin: 0 auto; } .persoSide .teamCards { grid-template-columns: 1fr; } } @media (max-height: 520px) { .persoGrid { grid-template-columns: 200px minmax(0, 1fr); gap: 14px; } .stage { max-height: none; } #menu .stage #teamPreview { max-height: 250px; } .persoSide button.team { min-height: 60px; } .colorBox #colors i { width: 28px; height: 28px; } } #pg_perso .persoGrid { flex: 1; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); } @media (max-width: 760px) { #pg_perso .persoGrid { grid-template-columns: 1fr; } } @media (max-height: 520px) { #pg_perso .persoGrid { grid-template-columns: 200px minmax(0, 1fr); } } #pg_perso .persoGrid { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); } .colorBox { padding: 12px 14px; } .colorBox #colors { flex-wrap: nowrap; gap: 6px; } .colorBox #colors i { width: 28px; height: 28px; flex: none; } @media (max-width: 760px) { #pg_perso .persoGrid { grid-template-columns: 1fr; } } @media (max-height: 520px) { #pg_perso .persoGrid { grid-template-columns: 200px minmax(0, 1fr); } } .persoSide .nameField { width: 100%; } #menu.ingame .persoSide .nameField { display: none; } /* cartes d'équipe : tuiles de verre claires avec une perle de couleur, coche verte sur l'équipe choisie */ .persoSide button.team { --c1: #8fd0ff; --c2: #1d7fe0; position: relative; filter: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; min-height: 76px; border-radius: 16px; text-align: left; color: var(--ink); text-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(214, 238, 252, 0.8)); border: 1px solid #fff; box-shadow: 0 2px 6px rgba(0, 70, 120, 0.3), inset 0 1px 0 #fff; } .persoSide button.team.t { --c1: #ffd27a; --c2: #e07c00; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(214, 238, 252, 0.8)); border-color: #fff; text-shadow: none; } .persoSide button.team.aero { --c1: #b8fff0; --c2: #10b8d8; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(214, 238, 252, 0.8)); border-color: #fff; color: var(--ink); text-shadow: none; } .persoSide button.team.msn { --c1: #a8d4ff; --c2: #2a6ae0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(214, 238, 252, 0.8)); border-color: #fff; color: var(--ink); text-shadow: none; } .persoSide button.team::before { display: none; } .persoSide button.team::after, .persoSide button.team.sel::after { content: ''; position: static; flex: none; width: 42px; height: 42px; margin: 0; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle at 35% 28%, #fff 0 14%, rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 80%, var(--c1), var(--c2)); box-shadow: 0 2px 5px rgba(0, 60, 110, 0.5), inset 0 -6px 9px rgba(0, 0, 0, 0.2); font-size: 0; } .persoSide button.team.sel::after { background: radial-gradient(circle at 35% 28%, #fff 0 14%, rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 80%, var(--c1), var(--c2)); } .persoSide button.team > * { order: 1; } .persoSide button.team::after { order: 0; } .persoSide button.team b { display: block; font-size: 15px; line-height: 1.15; } .persoSide button.team small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--dim); opacity: 1; } .persoSide button.team:hover { background: linear-gradient(180deg, #fff, rgba(190, 230, 255, 0.9)); } .persoSide button.team.sel { background: linear-gradient(180deg, #f4ffe0, rgba(205, 245, 150, 0.8)); border-color: #7cc61a; box-shadow: 0 0 0 3px #b6f23a, 0 0 16px rgba(170, 255, 80, 0.8), 0 2px 6px rgba(0, 60, 110, 0.4), inset 0 1px 0 #fff; } .persoSide button.team.sel > b::after { content: '✔'; position: absolute; top: 7px; right: 9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--gel-lime); border: 1px solid #357a05; text-shadow: 0 1px 1px rgba(20, 70, 0, 0.8); } .persoSide button.team { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 12px; row-gap: 1px; } .persoSide button.team::after, .persoSide button.team.sel::after { grid-column: 1; grid-row: 1 / 3; } .persoSide button.team > b { grid-column: 2; grid-row: 1; align-self: end; padding-right: 22px; } .persoSide button.team > small { grid-column: 2; grid-row: 2; align-self: start; margin: 0; } /* sélecteur d'équipe, variante A : quatre vignettes à monogramme */ .persoSide .teamCards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .persoSide button.team { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0; padding: 8px 4px 8px; border-radius: 14px; text-align: center; } .persoSide button.team::after, .persoSide button.team.sel::after { content: attr(data-mono); order: 0; display: grid; place-items: center; width: 100%; max-width: 62px; height: auto; aspect-ratio: 1; border-radius: 12px; border: 1px solid #fff; font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 80, 0.7); background: linear-gradient(180deg, var(--c1), var(--c2) 52%, var(--c2)); box-shadow: 0 2px 4px rgba(0, 60, 110, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .persoSide button.team > b { order: 1; padding: 0; font-size: 11px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; align-self: stretch; } .persoSide button.team > small { display: none; } .persoSide button.team.sel > b::after { content: none; } .persoSide button.team.sel { background: linear-gradient(180deg, #f4ffe0, rgba(205, 245, 150, 0.85)); } /* Camman : cinquième personnage, tuile à sigle graphite et filet rouge ; 3 tuiles en haut, 2 plus larges en bas */ .persoSide button.team.cam { --c1: #d8dfe8; --c2: #4c5a6c; } .persoSide .teamCards { grid-template-columns: repeat(6, minmax(0, 1fr)); } .persoSide .teamCards > button.team:nth-child(-n+3) { grid-column: span 2; } .persoSide .teamCards > button.team:nth-child(n+4) { grid-column: span 3; } .persoSide .teamCards > button.team:nth-child(n+4)::after { max-width: 54px; } #chat.team.cam #chatLabel { color: #ff6a5a; } @media (max-width: 760px) { .persoSide .teamCards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persoSide .teamCards > button.team:nth-child(n) { grid-column: span 1; } .persoSide .teamCards > button.team:nth-child(5) { grid-column: 1 / -1; } } /* tuiles d'équipe : petite illustration du personnage (rendue en 3D une fois au chargement) sur un fond de couleur d'équipe, à la place du sigle */ .persoSide button.team::after, .persoSide button.team.sel::after { display: none; } .persoSide button.team > .art { order: 0; display: block; width: 64px; height: auto; aspect-ratio: 99 / 134; border-radius: 12px; border: 1px solid #fff; align-self: center; background: radial-gradient(ellipse at 50% 35%, #fff 0, var(--c1) 55%, var(--c2) 130%); box-shadow: 0 2px 5px rgba(0, 60, 110, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.7); } .persoSide button.team.sel > .art { box-shadow: 0 2px 6px rgba(40, 110, 0, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.8); } .persoSide button.team { padding-top: 8px; } @media (max-height: 520px) { .persoSide button.team > .art { width: 40px; } } /* tuiles d'équipe : toutes de la même taille, plus petites (3 en haut, 2 centrées en bas) */ .persoSide .teamCards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .persoSide .teamCards > button.team:nth-child(n) { grid-column: span 2; min-height: 0; padding: 6px 4px 6px; gap: 4px; border-radius: 13px; } .persoSide .teamCards > button.team:nth-child(4) { grid-column: 2 / span 2; } .persoSide .teamCards > button.team:nth-child(5) { grid-column: 4 / span 2; } .persoSide button.team > .art { width: 46px; border-radius: 10px; } .persoSide button.team > b { font-size: 10.5px; } @media (max-width: 760px) { .persoSide .teamCards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .persoSide .teamCards > button.team:nth-child(n) { grid-column: span 1; } } /* les cases se remplissent simplement de gauche à droite, ligne après ligne (plus de rangée centrée) */ .persoSide .teamCards > button.team:nth-child(4), .persoSide .teamCards > button.team:nth-child(5) { grid-column: span 2; } /* illustrations plus grandes, cadrées sur le haut du corps (carrées) */ .persoSide button.team > .art { width: 78px; aspect-ratio: 1; border-radius: 14px; } @media (max-height: 520px) { .persoSide button.team > .art { width: 48px; } } /* illustrations encore plus serrées (tête et buste) ; fond de Bulle renforcé pour mieux faire ressortir le gel clair */ .persoSide button.team.aero > .art { background: radial-gradient(ellipse at 50% 30%, #6fd8ff 0, #1a86cc 62%, #083f78 130%); } .persoSide button.team.sel.aero > .art { box-shadow: 0 2px 6px rgba(40, 110, 0, 0.5), inset 0 0 8px rgba(160, 230, 255, 0.5); } /* ============================================================================================= Médailles, classement, fantômes, mode spectateur ============================================================================================= */ svg.medal { display: block; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 40, 80, 0.45)); } svg.medal.none { color: var(--dim); filter: none; } /* médaille obtenue, en coin de la carte de map */ .mbadge { position: absolute; top: 6px; right: 8px; z-index: 2; display: flex; } .mbadge:empty { display: none; } /* médaille du record personnel, à droite du chrono */ #timerMedal { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: flex; } #timerMedal:empty { display: none; } /* médaille de fin de course */ #medalPop { position: absolute; top: 132px; left: 50%; display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); text-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(200, 238, 255, 0.75) 50%, rgba(150, 218, 255, 0.7) 52%, rgba(214, 244, 255, 0.85)); box-shadow: 0 3px 12px rgba(0, 50, 100, 0.45), inset 0 1px 0 #fff; opacity: 0; transform: translate(-50%, -14px) scale(0.9); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; } #medalPop.show { opacity: 1; transform: translate(-50%, 0) scale(1); } #medalPop .mpTx { display: flex; flex-direction: column; line-height: 1.2; } #medalPop b { font-size: 19px; font-weight: 800; } #medalPop small { font-size: 12.5px; font-weight: 700; color: var(--ink2); } body.touch #medalPop { top: 110px; } /* carte de map verrouillée en cours de partie : on ne change de map qu'en quittant */ #menu.ingame .mapGrid button.mapbtn:not(.sel) { pointer-events: none; opacity: 0.5; filter: grayscale(0.85) brightness(0.9); } /* onglet Classement */ .rankMaps { display: flex; gap: 8px; flex-wrap: wrap; } button.rankmap { padding: 6px 18px; border-radius: 999px; font-size: 14px; } button.rankmap.sel { background: var(--gel-lime); border-color: #357a05; color: #fff; text-shadow: 0 1px 2px rgba(20, 70, 0, 0.8); } .rankHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(205, 235, 252, 0.55)); box-shadow: 0 2px 6px rgba(0, 70, 120, 0.25), inset 0 1px 0 #fff; } .rankMine { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; color: var(--ink); } .rankMine small { display: block; font-size: 12px; font-weight: 700; color: var(--ink2); } .rankMine .mt { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } .rankGoals { display: flex; gap: 14px; } .rankGoals span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; } ol.rankList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .rankList li { display: grid; grid-template-columns: 40px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 14px; min-height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.55); font-weight: 700; color: var(--ink); } .rankList li .rk { font-style: italic; font-weight: 800; color: var(--ink2); } .rankList li:nth-child(1) .rk { color: #c98a00; } .rankList li:nth-child(2) .rk { color: #7b8794; } .rankList li:nth-child(3) .rk { color: #b0601e; } .rankList li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rankList li .tm { font-variant-numeric: tabular-nums; } .rankList li.me { background: linear-gradient(180deg, #eaffb4, #c4f27a); border-color: #6fb81a; } .rankList li.empty { display: block; text-align: center; padding: 22px 0; background: none; border: 0; color: var(--dim); font-weight: 600; } @media (max-width: 560px) { .rankList li { grid-template-columns: 30px 22px minmax(0, 1fr) auto; padding: 3px 8px; gap: 6px; } .rankGoals { gap: 9px; } } /* crédit de la musique, sous le lecteur */ .soundCredit { margin-top: 3px; text-align: center; font-size: 11.5px; font-weight: 700; font-style: italic; letter-spacing: 0.3px; color: var(--ink2); } @media (max-height: 520px) { .soundCredit { display: none; } } /* mode spectateur */ #specBar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 18px 8px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); text-shadow: none; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(190, 232, 255, 0.65) 50%, rgba(140, 214, 255, 0.6) 52%, rgba(200, 240, 255, 0.75)); box-shadow: 0 2px 8px rgba(0, 50, 100, 0.4), inset 0 1px 0 #fff; backdrop-filter: blur(6px); } #specBar .specRow { display: flex; align-items: center; gap: 10px; font-size: 16px; } #specBar .specTag { padding: 1px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--gel-lime); border: 1px solid #357a05; text-shadow: 0 1px 1px rgba(20, 70, 0, 0.7); } #specBar #specName { font-size: 18px; font-weight: 800; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #specBar #specView { font-size: 12.5px; font-weight: 700; color: var(--ink2); } #specBar small { font-size: 11.5px; font-weight: 600; color: var(--ink2); } #specBar .specBtns { display: none; gap: 8px; pointer-events: auto; } #specBar .specBtns button { width: 38px; height: 30px; padding: 0; border-radius: 10px; font-size: 18px; } body.touch #specBar .specBtns { display: flex; } body.touch #specBar small { display: none; } body.spectating #timer, body.spectating #keys, body.spectating #crosshair, body.spectating #medalPop, body.spectating #padHelp { display: none; } body.spectating #dpad, body.spectating #tJump, body.spectating #tDuck, body.spectating #tKnife, body.spectating #tRespawn { display: none; } body.spectating.spec-free #dpad, body.spectating.spec-free #tJump, body.spectating.spec-free #tDuck { display: block; } body.spectating.spec-free #tJump, body.spectating.spec-free #tDuck { display: grid; } body.touch.spectating #specBar { top: 58px; } /* ---------- retouches : réglage des fantômes dans l'onglet Jouer, crédit de la musique, réglages plus compacts ---------- */ .ghostRow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(205, 235, 252, 0.55)); box-shadow: 0 2px 6px rgba(0, 70, 120, 0.25), inset 0 1px 0 #fff; } .ghostRow label { font-weight: 800; color: var(--ink2); } .ghostRow select { flex: 0 1 230px; min-width: 0; } .ghostRow small { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 1.3; } .soundCredit { margin-top: 9px; } .menuFoot { padding-bottom: 8px; } .pages:has(#pg_settings:not(.hidden)) { padding: 8px 16px; } .setCard { margin-bottom: 6px; padding: 3px 14px 7px; gap: 4px; } .setCard .range { min-height: 24px; } /* ============================================================================================= Collection de disques et cassettes ============================================================================================= */ .colTop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; } .colTop .rankmap small { margin-left: 8px; padding: 0 8px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, 0.85); color: var(--ink); text-shadow: none; font-variant-numeric: tabular-nums; } .colTotal { padding: 4px 14px; border-radius: 999px; border: 1px solid #357a05; background: var(--gel-lime); color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(20, 70, 0, 0.8); font-variant-numeric: tabular-nums; } .colLayout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: start; } .colMain { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .colPanel { padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(205, 235, 252, 0.55)); box-shadow: 0 2px 6px rgba(0, 70, 120, 0.25), inset 0 1px 0 #fff; } .colSect { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink2); } .colBase, .colGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } button.colSlot { padding: 6px 4px 6px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; border: 1px solid #fff; background: linear-gradient(180deg, #fff, #dcebf5); color: var(--ink); text-shadow: none; box-shadow: 0 1px 4px rgba(0, 60, 110, 0.3); filter: none; } button.colSlot::before { display: none; } button.colSlot.sel { box-shadow: 0 0 0 3px #b6f23a, 0 0 14px rgba(170, 255, 80, 0.8); } button.colSlot img { width: 62px; height: 62px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 50, 100, 0.4)); } button.colSlot b { font-size: 11.5px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } button.colSlot small { font-size: 10.5px; font-weight: 700; color: var(--dim); } button.colSlot.locked { background: linear-gradient(180deg, #eef4f9, #cfdbe6); } button.colSlot.locked img { filter: grayscale(1) brightness(1.2) opacity(0.45); } button.colSlot.locked b { color: var(--dim); } .colTag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; padding: 0 7px; border-radius: 999px; background: var(--gel-aqua); color: #fff; border: 1px solid #0a64a2; text-shadow: 0 1px 1px rgba(0, 50, 100, 0.7); } .colDetail { position: sticky; top: 0; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; } .colDetail img { width: 132px; height: 132px; filter: drop-shadow(0 4px 6px rgba(0, 50, 100, 0.45)); } .colDetail img.lockedArt { filter: grayscale(1) brightness(1.2) opacity(0.45) drop-shadow(0 4px 6px rgba(0, 50, 100, 0.3)); } .colDetail h3 { margin: 0; font-size: 17px; text-wrap: balance; } .colDetail p { margin: 0; font-size: 12.5px; color: var(--ink2); } .colDetail .colHint { padding: 6px 10px; border-radius: 10px; background: rgba(214, 255, 160, 0.8); border: 1px dashed #4aa30a; color: #2b6a05; font-weight: 700; font-size: 12.5px; } .colEmpty { grid-column: 1 / -1; padding: 14px 0; text-align: center; color: var(--dim); font-weight: 600; } @media (max-width: 760px) { .colLayout { grid-template-columns: 1fr; } .colDetail { position: static; } } /* liste des pistes : piste verrouillée */ #plList li.lock { cursor: default; opacity: 0.6; font-style: italic; } #plList li.lock:hover { background: rgba(190, 228, 250, 0.35); } /* compteur en jeu et fenêtre « nouvelle piste » */ #cdCount { position: absolute; top: 44px; right: 14px; display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.9); color: var(--ink); text-shadow: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(190, 232, 255, 0.6) 50%, rgba(140, 214, 255, 0.55) 52%, rgba(200, 240, 255, 0.7)); box-shadow: 0 2px 8px rgba(0, 50, 100, 0.4), inset 0 1px 0 #fff; backdrop-filter: blur(6px); } #cdCount img { width: 22px; height: 22px; display: block; } #cdCount.pop { animation: cdPop 0.6s ease-out; } @keyframes cdPop { 30% { transform: scale(1.3); } } body.touch #cdCount { top: 74px; right: max(14px, env(safe-area-inset-right)); } body.spectating #cdCount { display: none; } #cdPop { position: absolute; top: 208px; left: 50%; display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); text-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(200, 238, 255, 0.75) 50%, rgba(150, 218, 255, 0.7) 52%, rgba(214, 244, 255, 0.85)); box-shadow: 0 3px 12px rgba(0, 50, 100, 0.45), inset 0 1px 0 #fff; opacity: 0; transform: translate(-50%, -14px) scale(0.9); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; } #cdPop.show { opacity: 1; transform: translate(-50%, 0) scale(1); } #cdPop .mpTx { display: flex; flex-direction: column; line-height: 1.2; } #cdPop b { font-size: 17px; font-weight: 800; } #cdPop small { font-size: 12.5px; font-weight: 700; color: var(--ink2); } #cdPop img { filter: drop-shadow(0 2px 3px rgba(0, 50, 100, 0.4)); } body.touch #cdPop { top: 170px; } button.rankmap { white-space: nowrap; } /* ============================================================================================= Compte (pseudo + mot de passe) ============================================================================================= */ .acctBox { display: flex; align-items: center; gap: 8px; min-height: 34px; font-weight: 700; color: var(--ink2); } .acctBox button { padding: 4px 14px; border-radius: 999px; font-size: 13px; } .acctBox .acctOk { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; color: #fff; background: var(--gel-lime); border: 1px solid #357a05; text-shadow: 0 1px 1px rgba(20, 70, 0, 0.8); } .acctBox b { color: var(--ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .colAcct { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(205, 235, 252, 0.55)); } .colAcct p { margin: 0; flex: 1 1 260px; font-size: 13px; font-weight: 600; color: var(--ink2); } .colAcct button { padding: 6px 16px; border-radius: 999px; font-size: 13px; } #acctModal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(0, 40, 90, 0.45); backdrop-filter: blur(3px); } #acctModal.hidden { display: none; } .acctCard { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; border-radius: 16px; border: 1px solid #fff; color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(205, 235, 252, 0.92)); box-shadow: 0 10px 40px rgba(0, 40, 90, 0.55), inset 0 1px 0 #fff; } .acctCard h2 { margin: 0; font-size: 22px; font-style: italic; } .acctTabs { display: flex; gap: 8px; } .acctTabs button { flex: 1; padding: 6px 10px; border-radius: 999px; font-size: 13px; } .acctTabs button.sel { background: var(--gel-lime); border-color: #357a05; color: #fff; text-shadow: 0 1px 2px rgba(20, 70, 0, 0.8); } .acctCard label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; color: var(--ink2); } .acctCard label.hidden { display: none; } .acctCard .error { margin: 0; min-height: 1.2em; } .acctCard .buttons { display: flex; gap: 8px; flex-wrap: wrap; } .acctCard .buttons button { flex: 1 1 140px; } /* ---------- onglet Jouer : bandeau d'identité plus net (pseudo, compte, langue, joueurs en ligne) ---------- */ .pgTop { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name acct lang" "online online online"; align-items: end; gap: 6px 12px; } .pgTop .nameBox { grid-area: name; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink2); } .pgTop .nameBox input { margin: 0; height: 38px; padding-top: 0; padding-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; } .pgTop .nameBox input[readonly] { background: linear-gradient(180deg, #eef8e0, #fff 45%); border-color: #6fb81a; } .pgTop .acctBox { grid-area: acct; height: 38px; padding: 0 6px 0 12px; gap: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.95); white-space: nowrap; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(205, 235, 252, 0.6)); box-shadow: 0 1px 4px rgba(0, 60, 110, 0.3), inset 0 1px 0 #fff; } .pgTop .acctBox button { padding: 4px 14px; font-size: 13px; } .pgTop select.langSel { grid-area: lang; width: auto; height: 38px; margin: 0; } .pgTop .onlineCount { grid-area: online; flex: none; margin: 0; text-align: left; font-size: 12.5px; } #menu .pgTop .onlineCount small { display: none; } /* le détail par map est déjà sur chaque carte */ #menu.ingame .pgTop { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "acct lang" "online online"; } #menu.ingame .pgTop .acctBox { justify-self: start; } @media (max-width: 560px) { .pgTop { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "acct lang" "online online"; } .pgTop .acctBox { justify-self: start; } } #menu:not(.ingame) .acctNm { display: none; } /* le pseudo est déjà dans le champ ; en pause (champ masqué) on affiche le nom */ #menu.ingame .acctWord { display: none; } @media (max-width: 560px) { .pgTop .acctBox { min-width: 0; padding-left: 8px; gap: 6px; } .pgTop .acctBox .acctWord { display: none; } /* téléphone : coche + bouton seulement (place) */ .pgTop .acctBox button { padding: 4px 10px; } .pgTop select.langSel { max-width: 130px; } } /* texte pour les moteurs de recherche et les lecteurs d'écran (même contenu que l'aide du jeu), hors de l'écran sans être masqué */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } button.newTab { width: 100%; margin: 0 0 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; }