/* N8Games / édition 02. Les jeux conservent leurs coordonnées Canvas natives. */
:root { --v2-mint: #b8f574; --v2-night: #10151e; --v2-soft: #a6afbd; }
html { scroll-padding-top: 90px; }
body { background: #f4f2eb; }
.privacy-page { font:16px/1.75 system-ui,sans-serif; margin:0; }
.privacy-page .site-shell { max-width:760px; margin:48px auto; }
.privacy-page h1 { font-size:clamp(30px,6vw,48px); line-height:1.12; }
.privacy-page a { color:#b8f574; }
body[data-theme="night"] { --bg: #10151e; --panel-solid:#19202b; --ink:#f6f5ed; --text:#f6f5ed; --muted:#a6afbd; --line:#ffffff18; background:#10151e; color:#f6f5ed; }
[hidden] { display:none !important; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
:focus-visible { outline:3px solid #72bd32; outline-offset:4px; }
.skip-link { position:fixed; top:8px; left:16px; padding:12px; background:#b8f574; color:#10151e; z-index:100; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.site-shell { width: min(1280px, calc(100% - 64px)); max-width:none; }
.site-header, body[data-theme="night"] .site-header { position:sticky; top:0; border-bottom:1px solid var(--line); backdrop-filter:blur(20px); z-index:30; }
body[data-theme="night"] .site-header { background:#10151eef; }
.nav { min-height:76px; gap:24px; }
.brand-logo { width:78px; height:61px; object-fit:contain; }
.nav-links { gap:32px; }
.nav-links a { font-size:14px; font-weight:650; }
.nav-links a:hover { color:#8bc546; }
.nav-actions { gap:8px; }
button, .button { border-radius:12px; }
.primary, .button.primary { background:#b8f574; color:#172312; box-shadow:none; font-weight:800; border:1px solid #b8f574; }
.primary:hover { background:#caf99a; color:#172312; transform:translateY(-1px); }
.secondary, body[data-theme="night"] .secondary { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
.theme-toggle { min-height:44px; border-radius:12px; }
.hero { grid-template-columns:1.3fr .7fr; min-height:0; padding:52px 0 36px; gap:32px; align-items:center; }
.hero-copy { max-width:760px; }
.eyebrow { background:transparent; border:0; color:var(--muted); padding:0; font-size:11px; letter-spacing:.16em; gap:9px; }
.live-dot { display:inline-block; height:7px; width:7px; background:#91d85b; border-radius:50%; vertical-align:middle; margin-right:5px; box-shadow:0 0 10px #b8f57433; }
.hero h1 { font-size:clamp(40px,4.8vw,66px); line-height:1.08; letter-spacing:-.055em; margin:18px 0; font-weight:850; max-width:none; }
.hero .accent-word { color:#92c959; }
body[data-theme="night"] .hero .accent-word { color:#b8f574; }
.lead { max-width:610px; font-size:16px; line-height:1.7; color:var(--muted); }
.cta-row { margin-top:23px; gap:10px; }
.cta-row button { min-height:49px; font-size:14px; padding:12px 18px; }
.chip-row { margin-top:20px; gap:18px; }
.chip, body[data-theme="night"] .chip { background:transparent; border:0; padding:0; font-size:11px; color:var(--muted); font-weight:500; }
.chip::before { content:'✓'; margin-right:6px; color:#87b958; }
.hero-art { min-height:0; height:330px; position:relative; }
.hero-art::before { content:''; position:absolute; inset:15%; background:radial-gradient(ellipse,#b8f57419,transparent 70%); }
.hero .preview-frame { position:absolute; inset:0; min-height:0; height:100%; width:100%; padding:0; aspect-ratio:auto; transform:rotate(5deg); border:0; background:none; box-shadow:none; }
.hero .hero-image { width:100%; height:100%; max-height:330px; object-fit:contain; filter:drop-shadow(0 20px 25px #0003); }
.section { padding:30px 0; margin:0 auto; }
.section-heading { display:block; max-width:none; text-align:left; margin:0 0 20px; }
.section-heading h2 { font-size:28px; letter-spacing:-.035em; line-height:1.3; }
.section-heading p { font-size:14px; margin-top:7px; max-width:none; color:var(--muted); }
.count-tag { vertical-align:middle; font-size:11px; letter-spacing:0; border:1px solid var(--line); padding:5px 9px; border-radius:8px; margin-left:9px; color:var(--muted); font-weight:500; }
.catalog-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; }
.game-filters { display:flex; gap:6px; flex-wrap:wrap; }
.game-filters button, .surprise-button { padding:10px 14px; min-height:42px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:12px; font-weight:650; border-radius:9px; }
.game-filters button[aria-pressed="true"] { color:var(--text); background:var(--panel-solid); border-color:#92c959; }
.surprise-button { color:var(--text); }
.games-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.game-card, .game-card.neon, .game-card.forest, .game-card.lab { padding:0; display:flex; flex-direction:column; gap:0; min-height:0; overflow:hidden; border:1px solid var(--line); background:var(--panel-solid); border-radius:16px; box-shadow:none; transition:transform .18s,border-color .18s; }
.game-card:hover { transform:translateY(-5px); border-color:#92c959; box-shadow:0 14px 28px #0002; }
.game-card[aria-current="true"] { border-color:#92c959; }
.game-card .mini-visual { height:145px; min-height:0; width:100%; margin:0; border:0; border-radius:0; background:#20332d; overflow:hidden; }
.game-card .mini-visual::before, .game-card .mini-visual::after { display:none; }
.mini-visual > .game-art { width:100%; height:100%; scale:1; transition:transform .3s; }
.game-card:hover .game-art { transform:scale(1.055); }
.game-card > span:nth-child(2) { padding:15px 16px 5px; }
.game-card .game-eyebrow { font-size:9px; letter-spacing:.13em; color:var(--muted); }
.game-card h3 { font-size:18px; margin:4px 0 0; letter-spacing:-.03em; color:var(--text); }
.game-card .tag-row { padding:4px 16px 9px; gap:5px; }
.tag, .tag.hot { background:transparent; color:var(--muted); padding:0; font-size:10px; border:0; }
.tag + .tag::before { content:'·'; margin:0 5px; }
.best-preview { display:flex; border-top:1px solid var(--line); padding:11px 16px; margin-top:auto; font-size:11px; }
.best-preview small { font-size:9px; color:var(--muted); text-transform:none; }
.best-preview strong { font-size:13px; color:var(--text); }
.mini-cta { background:none; color:#79a849; padding:0; font-size:12px; font-weight:700; }
body[data-theme="night"] .mini-cta { color:#b8f574; }
#play { scroll-margin-top:18px; }
.stage-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:var(--panel-solid); border:1px solid var(--line); border-radius:16px 16px 0 0; }
.stage-toolbar label { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:12px; }
select { padding:11px 34px 11px 12px; border:1px solid var(--line); color:var(--text); background:var(--panel-solid); border-radius:9px; font:inherit; max-width:100%; }
.stage-toolbar select { font-size:15px; font-weight:750; }
.stage-tools { display:flex; gap:8px; }
.stage-tools button { padding:10px 12px; min-height:44px; font-size:12px; }
.session-strip { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 20px; border:1px solid var(--line); border-top:0; font-size:11px; color:var(--muted); }
.play-panel { padding:0; border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; background:var(--panel-solid); box-shadow:none; }
.play-grid { display:block; }
.game-stage, body[data-theme="night"] .game-stage { padding:20px; background:transparent; border:0; box-shadow:none; border-radius:0; }
.game-head, .runner-header { gap:12px; align-items:center; margin-bottom:15px; }
.game-head h3, .runner-header h3 { font-size:20px; letter-spacing:-.02em; }
.status { color:var(--muted); font-size:12px; margin-top:5px; }
.game-actions { display:flex; gap:6px; flex-wrap:wrap; }
.game-actions button { padding:10px 14px; font-size:12px; min-height:44px; }
canvas { display:block; max-width:100%; height:auto; touch-action:none; outline-offset:3px; }
#gameCanvas { width:min(100%,580px); margin:0 auto; aspect-ratio:1; }
#runnerCanvas, #survivorCanvas, #arcadeCanvas { width:100%; height:auto; max-height:none; margin:auto; aspect-ratio:auto; border-radius:12px; }
.hud, .runner-hud, .survivor-hud, .arcade-hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.runner-hud, .survivor-hud { grid-template-columns:repeat(6,minmax(0,1fr)); }
.pill, body[data-theme="night"] .pill { min-width:0; border:1px solid var(--line); padding:12px 14px; background:transparent; border-radius:10px; }
.pill strong { font-size:18px; color:var(--text); line-height:1.2; overflow-wrap:anywhere; }
.pill span { margin-top:5px; font-size:9px; letter-spacing:.06em; color:var(--muted); }
.control-note, body[data-theme="night"] .control-note { margin-top:12px; padding:12px 0 0; border:0; background:none; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.mobile-controls { display:flex; gap:8px; }
.control-button { min-width:48px; min-height:46px; border-radius:10px; background:var(--panel-solid); color:var(--text); border:1px solid var(--line); font-size:16px; touch-action:none; user-select:none; }
.mission-strip { gap:8px; margin-top:10px; }
.mission, body[data-theme="night"] .mission { padding:10px 12px; background:transparent; border:1px solid var(--line); font-size:11px; }
#quick-games { width:100%; padding:0; margin:0; }
#quick-games > .section-heading, #arcadePicker { display:none; }
#quick-games .lab-panel { border:0; box-shadow:none; background:none; padding:20px; border-radius:0; }
.arcade-layout { display:block; }
.arcade-stage { min-width:0; }
.v2-touch-pad { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:15px; }
.v2-touch-pad button { min-width:50px; min-height:48px; border:1px solid var(--line); border-radius:12px; background:var(--panel-solid); color:var(--text); font:inherit; font-size:15px; touch-action:none; user-select:none; }
.v2-touch-pad button:active, .control-button:active { background:#b8f574; color:#172312; }
.v2-game-help { padding:16px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); line-height:1.6; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.v2-game-help strong { display:block; color:var(--text); margin-bottom:4px; font-size:12px; }
.v2-leaderboard { display:block; padding:28px; border:1px solid var(--line); background:var(--panel-solid); border-radius:16px; box-shadow:none; }
.leaderboard-label { font-size:12px; display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--muted); }
#leaderboardContent { min-height:110px; color:var(--muted); font-size:14px; }
#leaderboardContent table { border-collapse:collapse; width:100%; text-align:left; }
#leaderboardContent th, #leaderboardContent td { border-bottom:1px solid var(--line); padding:12px; }
.fine-print { color:var(--muted); font-size:11px; margin-top:18px; }
.about { padding:25px 0; border:0; background:none; box-shadow:none; max-width:750px; }
.about h2 { font-size:24px; margin:12px 0; }
.about p { font-size:14px; color:var(--muted); }
.site-footer { border-top:1px solid var(--line); background:transparent; margin-top:20px; }
.footer-grid { gap:30px; padding:28px 0; }
.footer-brand img { width:64px; height:48px; }
.footer-brand p, .footer-links { font-size:12px; }
.footer-grid strong { font-size:12px; }
dialog { color:var(--text); background:var(--panel-solid); padding:28px; width:min(460px,calc(100% - 24px)); max-height:90dvh; border:1px solid var(--line); border-radius:18px; box-shadow:0 25px 90px #0008; }
dialog::backdrop { background:#071019bb; backdrop-filter:blur(5px); }
dialog h2 { font-size:24px; margin:0 0 15px; }
dialog p { color:var(--muted); font-size:13px; line-height:1.6; }
dialog label { display:block; font-size:12px; margin:14px 0; }
dialog input { width:100%; box-sizing:border-box; padding:13px; margin-top:7px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); font:inherit; font-size:16px; }
dialog button { min-height:44px; padding:11px 15px; margin:4px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
dialog button[type="submit"] { background:#b8f574; color:#15220d; font-weight:750; }
body.cinema .hero, body.cinema #games, body.cinema #leaderboard, body.cinema #about, body.cinema .site-footer { display:none; }
body.cinema #play { width:min(1450px,calc(100% - 32px)); padding-top:18px; }
body.cinema #play > .section-heading { display:none; }
body.cinema #gameCanvas { width:min(100%,calc(100dvh - 310px)); min-width:280px; }
body.cinema #runnerCanvas, body.cinema #arcadeCanvas, body.cinema #survivorCanvas { max-height:calc(100dvh - 320px); width:auto; max-width:100%; }
@media(min-width:1500px) { .games-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:980px) { .site-shell { width:calc(100% - 40px); } .games-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .hero h1{font-size:48px;} .hero-art{height:280px;} .nav-links{gap:18px;} .nav{gap:14px;} }
@media(max-width:700px) {
  html{scroll-padding-top:75px;} .site-shell{width:calc(100% - 28px);} .nav{min-height:65px;} .brand-logo{width:60px;height:48px;} .nav-links{display:none;} .nav-actions{margin-left:auto;} #accountOpen{font-size:12px;padding:9px 12px;} .theme-toggle{padding:9px;min-width:44px;} #themeLabel{display:none;}
  .hero{grid-template-columns:1fr;gap:0;padding:34px 0 24px;} .hero-art{display:none;} .hero h1{font-size:45px;} .hero .lead{font-size:14px;} .eyebrow{font-size:9px;} .cta-row{gap:8px;} .cta-row button{font-size:11px;padding:10px 13px;} .chip-row{gap:13px;} .chip{font-size:10px;}
  .section{padding:24px 0;} .section-heading h2{font-size:24px;} .section-heading p{font-size:12px;} .catalog-tools{gap:10px;align-items:flex-start;} .game-filters{gap:5px;} .game-filters button{font-size:10px;padding:9px 10px;} .surprise-button{font-size:0;padding:9px;min-width:42px;} .surprise-button::after{content:'✦';font-size:18px;}
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .game-card .mini-visual{height:108px;} .game-card > span:nth-child(2){padding:12px 12px 3px;} .game-card h3{font-size:15px;} .game-card .game-eyebrow{font-size:8px;} .game-card .tag-row{padding:4px 12px 9px;} .best-preview{padding:9px 12px;} .tag{font-size:9px;}
  .stage-toolbar{padding:12px;flex-wrap:wrap;gap:8px;} .stage-toolbar label{flex:1;font-size:0;gap:0;} .stage-toolbar select{font-size:14px;width:100%;} .stage-tools{gap:5px;} .stage-tools button{font-size:10px;padding:8px;} .session-strip{padding:10px 12px;font-size:10px;} #accountStatus{max-width:100%;}
  .game-stage,#quick-games .lab-panel{padding:10px;} .game-head,.runner-header{flex-direction:column;align-items:stretch;gap:10px;} .game-actions{display:grid;grid-template-columns:repeat(3,1fr);} .game-actions button{font-size:11px;padding:10px 6px;} .status{font-size:11px;min-height:16px;} .game-head h3,.runner-header h3{font-size:18px;}
  .pill,body[data-theme="night"] .pill{padding:9px 7px;} .pill strong{font-size:15px;} .pill span{font-size:8px;} .runner-hud,.survivor-hud{grid-template-columns:repeat(3,minmax(0,1fr));} .hud,.arcade-hud{gap:5px;} .arcade-hud .pill:last-child strong{font-size:10px;}
  .mission-strip{grid-template-columns:1fr;} .mission,body[data-theme="night"] .mission{padding:8px 10px;display:flex;gap:10px;} .control-note{font-size:11px;} .mobile-controls{width:100%;justify-content:center;} .v2-touch-pad{gap:6px;} .v2-touch-pad button{min-width:46px;padding:8px;}
  .v2-game-help{grid-template-columns:1fr;padding:14px;gap:10px;font-size:12px;} .v2-leaderboard{padding:18px;} .leaderboard-label{flex-direction:column;align-items:flex-start;} .leaderboard-label select{width:100%;} .footer-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .upgrade-row{gap:5px;padding:8px;} .upgrade-button{padding:9px 5px;font-size:10px;} .upgrade-icon{font-size:16px;} body.cinema #play{width:calc(100% - 16px);} body.cinema canvas{max-height:none!important;width:100%!important;}
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;} }
@media(max-width:700px) {
  .stage-toolbar label { min-width:160px; }
  .stage-tools #focusGame,.stage-tools #soundToggle { font-size:0; width:44px; height:44px; padding:8px; }
  #focusGame::after { content:'⛶'; font-size:20px; }
  #focusGame[aria-pressed="true"]::after { content:'↙'; }
  #soundToggle::after { content:'♫'; font-size:20px; }
  #soundToggle[aria-pressed="true"]::after { content:'♪'; text-decoration:line-through; }
  .arcade-hud { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .arcade-hud .pill:last-child { display:none; }
  .arcade-hud .pill:nth-child(3) strong { font-size:12px; }
}
.locale-control { display:flex; align-items:center; gap:6px; font-size:.75rem; }
#accountOpen { display:inline-flex; align-items:center; gap:9px; min-height:44px; }
#accountOpen[data-signed-in="true"] { border-color:#25bba0; }
.account-avatar { position:relative; display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border-radius:50%; background:#154941; color:#fff; font-size:12px; font-weight:800; }
.account-avatar::after { content:''; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:#55edb2; border:2px solid var(--panel-solid); }
.account-name { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#accountPanel .google-sign-in { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; margin:12px 0; padding:10px 12px; border:1px solid #747775; border-radius:20px; background:#fff; color:#1f1f1f; font-size:14px; font-weight:500; }
#accountPanel .google-sign-in img { width:20px; height:20px; object-fit:contain; flex-shrink:0; }
@media(max-width:700px) { #accountOpen[data-signed-in="true"] { padding:6px; justify-content:center; min-width:44px; } #accountOpen[data-signed-in="true"] .account-name { display:none; } }
.locale-control select { min-height:40px; max-width:100px; border:1px solid var(--line); border-radius:10px; padding:5px; color:var(--text); background:var(--panel-solid); font:inherit; }
@media(max-width:700px) { .locale-control > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .locale-control select { max-width:82px; } }