@import url('/fonts/films/films-fonts.css');
/* Petits films du spawn (mêmes scènes que les panneaux en jeu), vue fixe 720×450 mise à l'échelle. */
:root{
  --ground:#0a0f15; --slate:#101820; --slate2:#151f29; --slate3:#1b2834; --edge:#2b3a4a; --metal:#7d8a9b;
  --wood:#3b2a17; --wood-l:#5a4126;
  --gold:#e8b84a; --gold-d:#a8791f; --green:#62d26a; --red:#e5484d; --purple:#b46cff; --text:#e9eef4; --muted:#93a1b2;
  --f-game:"Pixelify Sans","Courier New",monospace; --f-num:"Press Start 2P","Courier New",monospace; --f-ui:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{font-family:var(--f-game);font-size:.95rem;color:var(--text);background:var(--slate2);border:2px solid var(--edge);padding:7px 12px 7px 8px;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left}
.tab img{width:24px;height:24px;image-rendering:pixelated}
.tab small{font-family:var(--f-ui);color:var(--muted);font-size:.72rem;display:block;line-height:1.1}
.tab[aria-pressed="true"]{border-color:var(--gold);background:var(--slate3);box-shadow:0 0 0 2px #0008,0 0 14px #e8b84a33}
.tab:focus-visible,.btn:focus-visible,.dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tv{width:100%;aspect-ratio:720/450;position:relative;border:3px solid #000;background:#000;overflow:hidden;max-width:100%}
.stage{position:absolute;left:0;top:0;width:720px;height:450px;transform-origin:0 0;font-family:var(--f-game);overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,#0000 30%,#000c 100%),linear-gradient(#0a0f1599,#0a0f15cc),url(/images/films/pierre_taillee.png) 0 0/48px 48px;image-rendering:pixelated}
.world-hint{position:absolute;left:12px;top:6px;font-size:11px;color:#ffffff66;letter-spacing:.06em}
.post{position:absolute;top:396px;width:18px;height:60px;background:linear-gradient(90deg,var(--wood-l),var(--wood))}
.panel{position:absolute;left:40px;top:22px;width:640px;height:378px;background:linear-gradient(var(--slate2),var(--slate));
  border:6px solid var(--wood);box-shadow:0 0 0 2px #05080b,inset 0 0 0 2px var(--gold-d),0 10px 40px #000a;display:flex;flex-direction:column}
.p-head{display:flex;align-items:center;gap:10px;padding:8px 14px 6px}
.p-head img{width:28px;height:28px;image-rendering:pixelated}
.p-head .where{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.p-head .ttl{font-size:22px;font-weight:700;color:var(--gold);text-shadow:2px 2px 0 #3d2a06;line-height:1}
.p-head .pg{margin-left:auto;font-size:13px;color:var(--muted)}
.prog{height:4px;background:#070b10;margin:0 2px}
.prog i{display:block;height:100%;width:0;background:var(--gold)}
.scene{flex:1;position:relative;overflow:hidden}
.p-foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 14px 7px;min-height:34px}
.dots{display:flex;gap:6px}
.dot{width:12px;height:12px;background:#2a3846;border:2px solid #070b10;cursor:pointer;padding:0}
.dot.on{background:var(--gold)}
.btn{font-family:var(--f-game);font-size:14px;color:var(--text);background:linear-gradient(#3a4a5c,#26323f);border:2px solid #05080b;box-shadow:inset 2px 2px 0 #5a6c80,inset -2px -2px 0 #141c25;padding:3px 11px;cursor:pointer}

/* Décor commun */
.a{position:absolute}
.px{image-rendering:pixelated}
.n{font-family:var(--f-num);font-size:.74em;letter-spacing:0;font-weight:400}
.floor{position:absolute;left:0;right:0;top:200px;height:34px;background:linear-gradient(#3a2f26,#241c16);box-shadow:inset 0 3px 0 #4f4033}
.floor.red{background:linear-gradient(#3b2424,#221414);box-shadow:inset 0 3px 0 #5a3030}
.plat{position:absolute;background:linear-gradient(#2c3a2c,#1b241b);box-shadow:inset 0 3px 0 #4f7a4f,inset -3px 0 0 #0006}
.zlbl{position:absolute;font-size:12px;letter-spacing:.1em;color:#ffffff88}
.mob{position:absolute;width:24px;height:78px}
.mob .hd{position:absolute;left:0;top:0;width:24px;height:24px;background:linear-gradient(#3b2a17 0 7px,#c58c63 7px);box-shadow:inset 0 0 0 2px #0003}
.mob .hd:after{content:"";position:absolute;left:5px;top:12px;width:4px;height:4px;background:#2a3a6a;box-shadow:10px 0 0 #2a3a6a}
.mob .bd{position:absolute;left:0;top:24px;width:24px;height:30px;background:var(--shirt,#3a6fb0);box-shadow:inset 0 0 0 2px #0003}
.mob .lg{position:absolute;top:54px;width:12px;height:24px;background:#2e3550;transform-origin:50% 0}
.mob .l1{left:0}.mob .l2{left:12px}
.mob.walk .l1{animation:legA .4s infinite alternate}.mob.walk .l2{animation:legB .4s infinite alternate}
@keyframes legA{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}
@keyframes legB{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.mob .tagn{position:absolute;left:50%;top:-20px;transform:translateX(-50%);background:#0008;padding:1px 5px;font-size:12px;white-space:nowrap;color:#fff}
.item{position:absolute;width:26px;height:26px;image-rendering:pixelated}
.cap{position:absolute;left:12px;right:12px;bottom:6px;min-height:40px;display:flex;align-items:center;gap:10px;background:#0c1218;border:2px solid #05080b;padding:4px 10px}
.cap .num{flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--gold);color:#2a1d05;font-family:var(--f-num);font-size:10px}
.cap .ct{font-size:16px;color:var(--text);line-height:1.1}
.cap .cs{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.bar{position:absolute;left:50%;transform:translateX(-50%);top:8px;font-size:15px;white-space:nowrap;text-shadow:2px 2px 0 #000}
.cursor{position:absolute;width:20px;height:24px;z-index:20;pointer-events:none}
.ring{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid var(--gold);border-radius:50%;opacity:0;z-index:19}
.card{position:absolute;border:2px solid #05080b;padding:7px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.card.good{background:#12241a;box-shadow:inset 2px 2px 0 #24452f}.card.good b{color:#8cf095}
.card.bad{background:#2a1215;box-shadow:inset 2px 2px 0 #4d2228}.card.bad b{color:#ff8a8e}
.card b{font-size:14px;letter-spacing:.05em}
.card span{font-size:12px;color:var(--muted)}
.pill{position:absolute;background:#0c1218;border:2px solid #05080b;padding:3px 9px;font-size:14px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.pill img{width:18px;height:18px}
.chest{position:absolute;width:36px;height:39px}
.chest .cb{left:0;top:13px;width:36px;height:26px}
.chest .cl{left:0;top:0;width:36px;height:13px;transform-origin:50% 100%;z-index:2}
.chest .cl img{position:absolute;left:0;top:0;width:36px;height:13px}
.chest .cl .ck{left:15px;top:5px;width:5px;height:10px}
.spark{position:absolute;width:5px;height:5px;background:var(--purple);box-shadow:0 0 6px var(--purple)}
.tower{position:absolute;top:58px;width:56px;height:142px;background:linear-gradient(90deg,#5d6670,#46505a);box-shadow:inset 0 0 0 3px #2a3038,inset 0 8px 0 #6f7983}
.tower:after{content:"";position:absolute;left:16px;bottom:0;width:24px;height:36px;background:#11161c}
.flag{position:absolute;top:2px;transform:translateX(-50%);text-align:center;font-size:12px;white-space:nowrap}
.flag .pie{width:26px;height:26px;border-radius:50%;margin:0 auto 2px;border:2px solid #05080b}
.flag b{display:block;font-size:13px;letter-spacing:.05em}
.win{position:absolute;background:#141d27;border:3px solid #05080b;box-shadow:inset 0 0 0 2px #3a4a5c,0 8px 24px #000a;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px}
.win h4{margin:0;font-size:16px;color:var(--gold);letter-spacing:.06em}
.wbtn{font-size:13px;background:linear-gradient(#3a4a5c,#26323f);border:2px solid #05080b;box-shadow:inset 2px 2px 0 #5a6c80;padding:3px 9px;color:var(--text)}
.wbtn.go{background:linear-gradient(#3d7a45,#28552f);box-shadow:inset 2px 2px 0 #5aa063}
.hotbar{position:absolute;left:50%;transform:translateX(-50%);top:196px;display:flex;gap:2px;background:#000a;padding:2px;border:2px solid #05080b}
.slot{width:28px;height:28px;background:#8b8b8b33;box-shadow:inset 1px 1px 0 #0008;position:relative;display:grid;place-items:center}
.slot img{width:22px;height:22px}
.slot em{position:absolute;right:1px;bottom:-1px;font-style:normal;font-size:11px;color:#fff;text-shadow:1px 1px 0 #000}

@media (prefers-reduced-motion:reduce){.mob.walk .l1,.mob.walk .l2{animation:none}}
/* Adaptations au site */
.pb-lecteur{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:64px}
.pb-lecteur .tabs{flex-direction:column;flex-wrap:nowrap;gap:8px}
.pb-lecteur .tab{width:100%;border-radius:6px;font-size:1.05rem;padding:12px 14px;background:#1c1229;border-color:var(--pb-trait)}
.pb-lecteur .tab img{width:32px;height:32px}
.pb-lecteur .tab small{font-size:.8rem;margin-top:2px}
.pb-lecteur .tab[aria-pressed="true"]{border-color:var(--pb-or);background:#24183a}
.pb-lecteur .tab.bientot{opacity:.5;cursor:default}
.pb-ecran{display:flex;flex-direction:column;gap:10px;min-width:0}
.pb-ecran small{color:var(--pb-doux);font-size:13px}
.pb-ecran .tv{border-radius:8px;border:0;box-shadow:0 0 0 1px var(--pb-trait),0 30px 70px -30px #000,0 0 80px -40px var(--pb-violet)}
@media (max-width:820px){.pb-lecteur{grid-template-columns:1fr}.pb-lecteur .tabs{flex-direction:row;flex-wrap:wrap}.pb-lecteur .tab{width:auto}}