/* css/narnia-monde.css — page narnia en 3D (essai 2026-10-24, narnia-essai.php) : la scène plein écran
   (includes/narnia-monde.js), le grain de pellicule, le voile blanc du passage dans l'armoire, les noms des 12 lueurs,
   et le panneau où s'ouvre un jeu. Sans WebGL (pas de classe na-3d sur body) : la page classique de narnia.css. */

body.narnia-monde{background:#050405}
body.na-3d{overflow:hidden}
body.narnia-monde .theme-btn,body.narnia-monde footer{display:none}

/* scène */
.na-stage{position:fixed;inset:0;z-index:0;touch-action:manipulation}
.na-stage canvas{display:block;width:100%;height:100%}
.na-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.13;mix-blend-mode:overlay;animation:na-grain 1s steps(6) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes na-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}
.na-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(0,0,0,.65))}
.na-veil{position:absolute;inset:0;pointer-events:none;background:#e4ecf6;opacity:0}

/* noms des 12 lueurs, posés sous chacune (planet-home a la même mécanique pour ses points) */
.na-marks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease 1s}
body.na-in-forest .na-marks{opacity:1}
.na-mark{position:absolute;left:0;top:0;margin:18px 0 0 -60px;width:120px;padding:0;border:0;background:none;color:rgba(240,234,222,.72);
  font:13px/1.25 var(--font);text-align:center;pointer-events:auto;cursor:pointer;text-shadow:0 1px 6px #000}
.na-mark.on,.na-mark:hover{color:#fff}
.na-mark:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:4px;border-radius:2px}

/* haut de page, indications */
.na-top{position:fixed;left:clamp(18px,3vw,36px);top:clamp(16px,3vh,32px);z-index:5}
.na-back{color:rgba(232,226,214,.7);font-size:14px}
.na-back:hover{color:#fff}
.na-title{margin-top:12px;font-size:30px;font-weight:400;letter-spacing:-.02em;color:#ece6da}
.na-hint{position:fixed;left:0;right:0;bottom:26px;z-index:5;text-align:center;color:rgba(232,226,214,.55);font-size:13px;letter-spacing:.04em;pointer-events:none;transition:opacity .6s}
body.na-opening .na-hint-room,body.na-in-forest .na-hint-room{opacity:0}
.na-hint-forest{opacity:0}
body.na-in-forest .na-hint-forest{opacity:1;transition-delay:1.6s}
body.na-playing .na-hint{opacity:0}
.na-open{position:fixed;left:50%;bottom:60px;z-index:6;transform:translateX(-50%);padding:8px 14px;border:1px solid rgba(255,255,255,.4);border-radius:4px;background:#050405;color:#fff}
.na-open:not(:focus-visible){width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}

/* sans 3D : rien de tout ça, la page classique */
body:not(.na-3d) .na-stage,body:not(.na-3d) .na-top,body:not(.na-3d) .na-hint,body:not(.na-3d) .na-open{display:none}
body:not(.na-3d) .na-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 20px;margin:20px 0 28px}

/* avec 3D : les jeux restent dans la page (clavier, moteurs) mais hors de l'écran ; la liste réapparaît au clavier */
body.na-3d .na-games{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body.na-3d .na-games:focus-within{left:clamp(18px,3vw,36px);bottom:60px;z-index:6;width:auto;height:auto;clip-path:none;padding:12px 16px;border-radius:6px;background:rgba(5,4,5,.92)}
body.na-3d .na-games:focus-within > :not(.na-list){display:none}
.na-list a{display:block;padding:4px 0;color:#d9d3c7}

/* un jeu ouvert : une carte au milieu de l'écran (2026-10-24, demande d'Ana), la forêt assombrie derrière ; couleurs de
   nuit quel que soit le thème du site, liseré et lueur couleur de la lanterne */
.na-voile{position:fixed;inset:0;z-index:19;background:rgba(3,5,10,.62)}
.na-voile[hidden]{display:none}
.na-panel{position:fixed;left:50%;top:50%;z-index:20;width:min(calc(100vw - 32px),1000px);max-height:min(88vh,880px);overflow:auto;
  transform:translate(-50%,-50%);padding:30px clamp(18px,4vw,44px) 34px;border-radius:10px;
  background:linear-gradient(180deg,#0e1522,#0a0f19 40%);border:1px solid rgba(233,184,114,.24);
  box-shadow:0 40px 120px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,236,200,.08),0 -30px 90px -50px rgba(233,184,114,.45);
  animation:na-carte .38s cubic-bezier(.2,.8,.2,1);
  --bg:#0b111c;--fg:#f1ede4;--card:#111a28;--card-in:rgba(20,30,46,.6);--line:#1f2b3d;--line-2:#2d3c52;
  --g50:#111a28;--g100:#1a2537;--g200:#1f2b3d;--g300:#2d3c52;--g400:#7d8aa0;--g500:#a3aec0;--g600:#a3aec0;--g700:#d6dbe4;--g800:#e7eaf0;--g900:#f4f5f8;
  --eyebrow:#7d8aa0;--muted:#a3aec0;--strong:#d6dbe4;--brand:#e9b872;--brand-200:#5a4120;color:var(--fg);color-scheme:dark}
.na-panel[hidden]{display:none}
@keyframes na-carte{from{opacity:0;transform:translate(-50%,-47%) scale(.985)}}
.na-close{position:absolute;right:16px;top:16px;z-index:2;width:38px;height:38px;display:grid;place-items:center;padding:0;border-radius:50%;
  border:1px solid rgba(233,184,114,.35);background:rgba(10,15,25,.8);color:#f1e7d4;font-size:14px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.na-close:hover{border-color:#e9b872;color:#fff}
.na-close:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}
.na-panel .narnia-game-head{padding-right:52px}
.na-slot .narnia-game{margin:0;max-width:1040px}
.na-panel{--screen-bg:#070b13;--screen-fg:#efe9dc;--warn:#e9b872;--warn-200:rgba(233,184,114,.16);--warn-ink:#f1cf98;--ok:#9fd3a8;--danger:#e4776b}
/* plus de cartes à double cadre ni de pilules grises : le jeu posé directement sur la nuit */
.na-panel .card-base,.na-panel .card-inner{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.na-panel .narnia-game-head{align-items:baseline;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid rgba(233,184,114,.22)}
.na-panel .narnia-game-head h2{font-size:clamp(24px,3.2vw,34px);font-weight:400;letter-spacing:-.03em;color:#f3eee4}
.na-panel .eb{font-weight:500;letter-spacing:.08em;color:#8f9bb0}
.na-panel .how-to{background:none;border-radius:0;padding:4px 0 0 16px;border-left:1px solid rgba(233,184,114,.35)}
.na-panel .how-to p{color:#b8c0cd}
.na-panel .hud{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:6px 0}
.na-panel .pill-btn,.na-panel .na-diff-btn,.na-panel .dpad-row button{border-radius:3px;border:1px solid rgba(233,184,114,.45);background:transparent;color:#f1e7d4;box-shadow:none}
.na-panel .pill-btn:hover,.na-panel .na-diff-btn:hover{border-color:#e9b872;color:#fff}
.na-panel .na-diff-btn.active{background:#e9b872;border-color:#e9b872;color:#1a1208}
.na-panel .cell{border-radius:2px;background:#16223a;border-color:#22314d;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.na-panel .cell:hover:not(.revealed):not(.flagged){background:#1d2c49}
.na-panel .cell.revealed{background:#0c1320;border-color:#141e30}
.na-panel .overlay{background:rgba(7,11,19,.95)}
.na-panel .overlay .pill-btn{background:#e9b872;color:#1a1208;border-color:#e9b872}

@media(max-width:640px){.na-panel{width:calc(100vw - 16px);max-height:92vh;padding:24px 16px 28px}.na-close{right:10px;top:10px}}
@media(prefers-reduced-motion:reduce){.na-grain,.na-panel{animation:none}.na-marks,.na-hint{transition:none}}