/* Visual polish only: no board dimensions or HUD positioning. */
.screen:not(.screen--game) .section-heading h2{color:#eee6ff;-webkit-text-stroke:0;text-shadow:0 2px 0 #311458,0 0 14px #a955e044;letter-spacing:.015em}
.screen:not(.screen--game) :is(.button,.back-button,.skin-card,.mode-card,.metric,.achievement,.options-card,.tab){box-shadow:inset 0 1px 0 #ffffff16,0 8px 22px #02020a55}
.screen:not(.screen--game) .button--primary{background:linear-gradient(110deg,#7323c4,#b94beb);border-color:#d49af3;box-shadow:inset 0 1px #ffffff42,0 6px 20px #8b31c43b}
.screen:not(.screen--game) :is(.skin-card,.mode-card):before{opacity:.2}
.screen:not(.screen--game) :is(.skin-card,.mode-card):hover{border-color:#e5beff;filter:brightness(1.08)}
.skin-card__snake i,.skin-card__snake b,.skin-preview__snake i,.skin-preview__snake b{border-radius:5px;box-shadow:inset 0 3px #ffffff44,inset 0 -3px #00000038}
.skin-card__snake,.skin-preview__snake{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--skin,#b256ef) 40%,transparent))}
.screen--home .hero-copy h1 strong{text-shadow:none;filter:drop-shadow(0 3px 0 #4b1b6c);-webkit-text-stroke:0}
.achievement__icon{transform:none;border-radius:9px}.achievement__icon>*{transform:none}
.gameover-card h2{-webkit-text-stroke:0;text-shadow:0 3px #7e173c,0 0 18px #ff3f7b55}
.leaderboard-row:nth-child(2n){background:#ab71ff06}
.screen:not(.screen--game) :is(.mode-card,.skin-card,.options-card,.gameover-card){background-image:radial-gradient(ellipse at 50% 0,#9c57ce12,transparent 65%),linear-gradient(145deg,#15102b,#080819)}
/* The backdrop is a separate fixed layer, behind the opaque playing surface. */
.game-scenery{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body[data-mode] .game-scenery{display:block}
.game-scenery .orb{position:absolute;top:19%;width:clamp(70px,9vw,170px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 33% 28%,#8356af,#42256c 40%,#130d2c 72%);box-shadow:inset -18px -9px 25px #050413,0 0 55px #70349d26}
.game-scenery .orb:first-child{left:4%}.game-scenery .orb:last-child{right:4%;top:30%;transform:scale(.7)}
.game-scenery .orb:first-child:after{content:'';position:absolute;inset:39% -35%;border:3px solid #9060b8;border-radius:50%;transform:rotate(-25deg);opacity:.7}
.game-scenery .ridge{position:absolute;bottom:0;width:22%;height:48%;background:linear-gradient(#422552,#120b26 55%,#060514);clip-path:polygon(0 100%,0 57%,12% 40%,20% 52%,32% 18%,40% 31%,45% 27%,58% 63%,69% 40%,76% 48%,85% 25%,100% 68%,100% 100%);opacity:.8}
.game-scenery .ridge--left{left:0}.game-scenery .ridge--right{right:0;transform:scaleX(-1)}
.game-scenery .orb:before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(ellipse at 26% 33%,#190d384f 0 11%,transparent 12%),radial-gradient(ellipse at 68% 58%,#b288da22 0 15%,transparent 16%),repeating-linear-gradient(155deg,transparent 0 8px,#c69aee0d 9px 10px);box-shadow:inset 2px 2px 7px #bda0e520}
.game-scenery .ridge:before{content:'';position:absolute;inset:15% 0 0;background:linear-gradient(115deg,transparent 30%,#9671b21c 31% 33%,transparent 34% 50%,#b79ad51c 51% 52%,transparent 53%);}
.game-scenery .ridge:after{content:'';position:absolute;inset:38% 0 0;background:#080616;clip-path:polygon(0 100%,0 62%,9% 37%,18% 65%,24% 41%,28% 59%,38% 25%,47% 72%,56% 51%,61% 63%,74% 33%,80% 53%,88% 45%,100% 68%,100% 100%)}
.game-scenery{background:radial-gradient(ellipse at 5% 65%,#703ca21c,transparent 22%),radial-gradient(ellipse at 95% 58%,#995da31c,transparent 23%)}
body[data-mode]:before,body[data-mode]:after{display:none}
body[data-mode] .app-shell{z-index:1}
@media(max-width:700px){.game-scenery{opacity:.35}}
@media(prefers-reduced-motion:reduce){.screen *{animation:none!important;transition:none!important}}

/* Panoramic artwork generated for the in-game outer scenery. */
.game-scenery{background:#050410 url('./assets/game-scenery-v1.png') center center/cover no-repeat;opacity:.92}
.game-scenery .orb,.game-scenery .ridge{display:none}
body[data-mode] .screen--game{box-shadow:0 0 0 1px color-mix(in srgb,var(--mode-accent) 35%,#27134c),0 0 50px #020108d9,inset 0 0 35px color-mix(in srgb,var(--mode-accent) 7%,transparent)}
body[data-mode] .screen--game:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,#080719f2 0 3%,#080719d9 13%,#080719d9 87%,#080719f2 97%)}
@media(max-width:700px){.game-scenery{background-position:center top;opacity:.32}}

/* Dedicated home illustration: the playable elements stay on the perspective grid. */
.screen--home .hero-art{
  border-left:0;
  background:transparent url('./assets/home-hero-v1.png') center center/contain no-repeat!important;
  filter:drop-shadow(0 24px 38px #020108b8);
}
.screen--home .hero-art:before,.screen--home .hero-art:after,.screen--home .hero-art>*{display:none!important}
@media(max-width:700px){
  .screen--home .hero-art{
    min-height:260px;
    background-size:cover!important;
    background-position:center 71%!important;
    border-radius:12px;
    opacity:.86;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  }
}

/* Skin gallery v3: every material has a readable silhouette and surface language. */
.skin-card__snake,.skin-preview__snake{gap:3px;isolation:isolate}
.skin-card__snake i,.skin-card__snake b,.skin-preview__snake i,.skin-preview__snake b{
  position:relative;border-radius:0!important;
  clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);
}
.skin-card__snake i:after,.skin-preview__snake i:after{content:'';position:absolute;left:13%;right:13%;top:12%;height:10%;background:#ffffff8f;box-shadow:0 1px 5px #fff4}
.skin-card__snake b:before,.skin-card__snake b:after,.skin-preview__snake b:before,.skin-preview__snake b:after{z-index:2;border:1px solid #fff9;background:#101020!important;box-shadow:0 0 4px #000!important}
.skin-card[data-skin="classic"] :is(.skin-card__snake,.skin-preview__snake) i{background:linear-gradient(145deg,#b4ffc4 0 14%,#34ef84 15% 65%,#118b50 66%)}
.skin-card[data-skin="retro"] :is(.skin-card__snake,.skin-preview__snake) i,.skin-preview__snake[data-skin="retro"] i{clip-path:none;background:repeating-linear-gradient(135deg,#fff 0 21%,#c4c8d8 22% 44%,#747b95 45% 58%);border:1px solid #fff}
.skin-card[data-skin="pixelonia"] :is(.skin-card__snake,.skin-preview__snake) i,.skin-preview__snake[data-skin="pixelonia"] i{background:linear-gradient(135deg,#ffd2ff 0 18%,#e45cff 19% 44%,#7e2bd8 45% 67%,#cf43ef 68%)}
.skin-card[data-skin="robot"] :is(.skin-card__snake,.skin-preview__snake) i,.skin-preview__snake[data-skin="robot"] i{clip-path:polygon(7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%,0 7%);background:linear-gradient(145deg,#efffff 0 13%,#72c9e8 14% 54%,#28527c 55%);border:2px solid #a9edff}
.skin-card[data-skin="robot"] :is(.skin-card__snake,.skin-preview__snake) i:before,.skin-preview__snake[data-skin="robot"] i:before{content:'';position:absolute;width:18%;height:18%;right:16%;bottom:15%;background:#59efff;box-shadow:0 0 6px #59efff}
.skin-card[data-skin="fire"] :is(.skin-card__snake,.skin-preview__snake) i,.skin-preview__snake[data-skin="fire"] i{clip-path:polygon(14% 9%,31% 0,47% 14%,64% 2%,88% 12%,100% 35%,95% 100%,5% 100%,0 36%);background:linear-gradient(155deg,#fff185 0 16%,#ff9a31 17% 53%,#e62c45 54% 78%,#75152d 79%)}
.skin-card[data-skin="ice"] :is(.skin-card__snake,.skin-preview__snake) i,.skin-preview__snake[data-skin="ice"] i{clip-path:polygon(17% 0,83% 5%,100% 27%,89% 87%,66% 100%,11% 92%,0 31%);background:linear-gradient(135deg,#fff 0 16%,#baf8ff 17% 31%,#53d8ff 32% 57%,#286fc8 58%);border:1px solid #ddffff}
.skin-card[data-skin="neon"] :is(.skin-card__snake,.skin-preview__snake) i:nth-child(3n+1),.skin-preview__snake[data-skin="neon"] i:nth-child(3n+1){background:linear-gradient(145deg,#edffff,#43e8ff 34%,#2769dc)}
.skin-card[data-skin="neon"] :is(.skin-card__snake,.skin-preview__snake) i:nth-child(3n+2),.skin-preview__snake[data-skin="neon"] i:nth-child(3n+2){background:linear-gradient(145deg,#fff0ff,#ff50e5 36%,#9925cc)}
.skin-card[data-skin="neon"] :is(.skin-card__snake,.skin-preview__snake) i:nth-child(3n),.skin-preview__snake[data-skin="neon"] i:nth-child(3n){background:linear-gradient(145deg,#eee2ff,#873fff 38%,#3d25aa)}
.skin-card[data-skin="gold"] :is(.skin-card__snake,.skin-preview__snake) i,.skin-preview__snake[data-skin="gold"] i{background:linear-gradient(145deg,#fffbd1 0 13%,#ffe56b 14% 34%,#d49a13 35% 67%,#714000 68%);border:1px solid #ffe889}
.skin-card[data-skin="gold"] :is(.skin-card__snake,.skin-preview__snake) i:before,.skin-preview__snake[data-skin="gold"] i:before{content:'◆';position:absolute;inset:0;display:grid;place-items:center;color:#fff3a7;font-size:42%;text-shadow:0 0 5px #fff}
.skin-card[data-skin="noirblanc"] :is(.skin-card__snake,.skin-preview__snake) i:nth-child(odd),.skin-preview__snake[data-skin="noirblanc"] i:nth-child(odd){background:linear-gradient(135deg,#fff 0 45%,#18191e 46%)}
.skin-card[data-skin="noirblanc"] :is(.skin-card__snake,.skin-preview__snake) i:nth-child(even),.skin-preview__snake[data-skin="noirblanc"] i:nth-child(even){background:linear-gradient(135deg,#18191e 0 45%,#fff 46%)}
.skin-preview{border-color:color-mix(in srgb,var(--preview-color,#31e87e) 55%,#7443bd);box-shadow:inset 0 0 50px color-mix(in srgb,var(--preview-color,#31e87e) 14%,transparent),0 18px 38px #020109a8}

/* Panorama commun à tous les écrans, sauf l'accueil qui garde son illustration dédiée. */
body[data-screen="home"] .game-scenery{display:none!important}
body:not([data-screen="home"]) .game-scenery{display:block;opacity:.76}
body:not([data-screen="home"]) .game-scenery:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050311b8 0,#05031142 24%,#05031124 50%,#05031142 76%,#050311b8 100%),linear-gradient(180deg,#0704194f,#03020ba8);pointer-events:none}
body:not([data-screen="home"]) .app-shell{position:relative;z-index:1}
body:not([data-screen="home"]):not([data-mode]) .topbar{background:linear-gradient(110deg,#10092dda,#08051ddd);border:1px solid #7445bc8a;box-shadow:0 12px 35px #0201089c,inset 0 1px #ffffff12;backdrop-filter:blur(7px)}
body:not([data-screen="home"]):not([data-mode]) .screen.active{background:radial-gradient(ellipse at 50% 0,#54279a2e,transparent 42%),linear-gradient(145deg,#0c0828e6,#050417dc)!important;box-shadow:0 0 0 1px #381875c4,0 26px 70px #020108d9,inset 0 0 70px #9b4cff0c;backdrop-filter:blur(4px)}
body[data-screen="gameover"] .game-scenery{filter:saturate(.82) hue-rotate(8deg)}
body[data-screen="skins"] .game-scenery{filter:saturate(1.08)}
@media(max-width:700px){body:not([data-screen="home"]) .game-scenery{opacity:.46;background-position:center center}}

/* Bonus temporaires dans le HUD compact. */
.top-effect-status{display:none;align-items:center;justify-content:center;min-width:92px;height:38px;padding:0 11px;border:1px solid #ff9c5f;border-radius:7px;background:linear-gradient(145deg,#4b1e18,#180b25);color:#fff2c7;font:700 12px Verdana,Arial,sans-serif;white-space:nowrap;text-shadow:0 0 8px #ff914d;box-shadow:inset 0 1px #ffffff26,0 0 15px #ff713b4f}
.top-effect-status[data-active="true"]{display:flex;animation:effect-hud-pulse 1s steps(2,end) infinite}
@keyframes effect-hud-pulse{50%{border-color:#ffd07b;filter:brightness(1.16)}}
body:not([data-mode]) .top-effect-status{display:none!important}
@media(max-width:900px){body[data-mode] .top-effect-status{position:absolute;z-index:8;right:8px;top:calc(100% + 5px);height:34px;background:#35151bf2}}
@media(prefers-reduced-motion:reduce){.top-effect-status[data-active="true"]{animation:none}}

/* Sélecteur de modes v4 — cartes de mission arcade premium. */
[data-screen="modes"] .section-heading h2{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#f5efff!important;color:#f5efff!important;-webkit-text-stroke:0!important;letter-spacing:.015em!important;text-shadow:0 3px 0 #341267,0 0 20px #c16cff78!important;filter:none!important}
[data-screen="modes"] .mode-grid{gap:clamp(12px,1.6vh,18px) clamp(16px,1.5vw,22px)}
[data-screen="modes"] .mode-card{--accent:#b56bff;--deep:#35185c;isolation:isolate;border:1px solid color-mix(in srgb,var(--accent) 82%,#fff);border-radius:18px!important;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 43%),linear-gradient(145deg,color-mix(in srgb,var(--deep) 65%,#100b2c),#08071c 68%,#050513)!important;box-shadow:inset 0 1px #ffffff1f,inset 0 0 55px color-mix(in srgb,var(--accent) 8%,transparent),0 16px 38px #020109c7!important;overflow:hidden}
[data-screen="modes"] .mode-card--classic{--accent:#38f59a;--deep:#124e3b}
[data-screen="modes"] .mode-card--chrono60{--accent:#42ddff;--deep:#123f59}
[data-screen="modes"] .mode-card--chrono120{--accent:#ffc342;--deep:#594018}
[data-screen="modes"] .mode-card--survival{--accent:#ff4d86;--deep:#591934}
[data-screen="modes"] .mode-card:before{content:'';position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:12px;background:repeating-linear-gradient(0deg,transparent 0 15px,color-mix(in srgb,var(--accent) 4%,transparent) 16px 17px),linear-gradient(115deg,transparent 0 44%,#ffffff07 45% 48%,transparent 49%);opacity:1!important;pointer-events:none}
[data-screen="modes"] .mode-card:after{position:absolute;content:'01';left:auto;right:20px;top:12px;width:auto;height:auto;background:none;color:color-mix(in srgb,var(--accent) 18%,transparent);font:900 clamp(2.8rem,4.4vw,4.8rem)/1 Verdana,Arial,sans-serif;letter-spacing:-.08em;text-shadow:none;box-shadow:none;opacity:1;pointer-events:none}
[data-screen="modes"] .mode-card--chrono60:after{content:'02'}[data-screen="modes"] .mode-card--chrono120:after{content:'03'}[data-screen="modes"] .mode-card--survival:after{content:'04'}
[data-screen="modes"] .mode-card>*{position:relative;z-index:2}
[data-screen="modes"] .mode-icon{display:grid;place-items:center;width:clamp(102px,8.5vw,132px)!important;height:clamp(78px,9vh,104px)!important;margin:0 auto 2px!important;border:1px solid color-mix(in srgb,var(--accent) 58%,transparent);clip-path:polygon(14% 0,86% 0,100% 18%,100% 82%,86% 100%,14% 100%,0 82%,0 18%);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 29%,transparent),transparent 60%),linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,#171039),#08071d);color:var(--accent)!important;font-size:clamp(3.25rem,5.4vh,4.8rem)!important;line-height:1!important;text-shadow:0 0 9px var(--accent),0 0 25px color-mix(in srgb,var(--accent) 60%,transparent)!important;filter:none!important;box-shadow:inset 0 0 25px color-mix(in srgb,var(--accent) 13%,transparent),0 0 22px color-mix(in srgb,var(--accent) 18%,transparent)}
[data-screen="modes"] .mode-icon:before{inset:7px!important;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)!important;clip-path:inherit!important;opacity:1!important}
[data-screen="modes"] .mode-icon:after{content:'';position:absolute;left:-48%;right:-48%;top:50%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent);box-shadow:0 -13px color-mix(in srgb,var(--accent) 18%,transparent),0 13px color-mix(in srgb,var(--accent) 18%,transparent);z-index:-1}
[data-screen="modes"] .mode-icon i{bottom:8px;color:#dffaff;font-size:12px;text-shadow:0 0 8px var(--accent)}
[data-screen="modes"] .mode-card strong{margin-top:clamp(9px,1.2vh,14px)!important;color:var(--accent)!important;font-size:clamp(1rem,1.16vw,1.28rem)!important;letter-spacing:.065em;text-shadow:0 0 13px color-mix(in srgb,var(--accent) 68%,transparent)!important}
[data-screen="modes"] .mode-card strong:before{content:'MISSION';display:block;margin-bottom:5px;color:color-mix(in srgb,var(--accent) 64%,#fff);font:700 12px Verdana,Arial,sans-serif;letter-spacing:.2em;opacity:.72}
[data-screen="modes"] .mode-card strong:after{display:block;width:max-content;margin:7px auto 0;padding:3px 8px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,#08071d);color:color-mix(in srgb,var(--accent) 80%,#fff);font:700 12px Verdana,Arial,sans-serif;letter-spacing:.08em;text-shadow:none}
[data-screen="modes"] .mode-card--classic strong:after{content:'SANS LIMITE · MURS TRAVERSABLES'}
[data-screen="modes"] .mode-card--chrono60 strong:after{content:'60 SECONDES · MURS SOLIDES'}
[data-screen="modes"] .mode-card--chrono120 strong:after{content:'120 SECONDES · MURS SOLIDES'}
[data-screen="modes"] .mode-card--survival strong:after{content:'PRESSION MAX · MURS SOLIDES'}
html[lang="en"] [data-screen="modes"] .mode-card--classic strong:after{content:'NO LIMIT · WRAP-AROUND WALLS'}html[lang="en"] [data-screen="modes"] .mode-card--chrono60 strong:after{content:'60 SECONDS · SOLID WALLS'}html[lang="en"] [data-screen="modes"] .mode-card--chrono120 strong:after{content:'120 SECONDS · SOLID WALLS'}html[lang="en"] [data-screen="modes"] .mode-card--survival strong:after{content:'MAX PRESSURE · SOLID WALLS'}
[data-screen="modes"] .mode-card small{margin-top:clamp(6px,.9vh,9px)!important;color:#f2edf9;font-size:clamp(.76rem,.83vw,.9rem)!important;line-height:1.4!important;text-shadow:0 2px 8px #000}
[data-screen="modes"] .mode-speed{margin-top:clamp(7px,1vh,11px)!important;padding:6px 11px!important;border-color:color-mix(in srgb,var(--accent) 45%,transparent)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,#09071d),#08071dcc)!important;color:#fff!important;font-size:12px!important;box-shadow:inset 0 0 12px color-mix(in srgb,var(--accent) 8%,transparent),0 0 12px color-mix(in srgb,var(--accent) 12%,transparent)!important}
[data-screen="modes"] .mode-speed:before{color:var(--accent)}
[data-screen="modes"] .mode-card:hover{transform:translateY(-5px) scale(1.01)!important;border-color:#fff!important;filter:none!important;box-shadow:inset 0 1px #ffffff3d,inset 0 0 55px color-mix(in srgb,var(--accent) 14%,transparent),0 22px 45px #020109dc,0 0 30px color-mix(in srgb,var(--accent) 24%,transparent)!important}
[data-screen="modes"] .mode-card:active{transform:translateY(-1px) scale(.992)!important}
@media(max-width:700px){[data-screen="modes"] .mode-card:after{right:12px;top:10px;font-size:2.4rem}[data-screen="modes"] .mode-icon{width:88px!important;height:68px!important;font-size:3rem!important}[data-screen="modes"] .mode-card strong:after{max-width:95%;font-size:10px;white-space:normal}[data-screen="modes"] .mode-card small{font-size:12px!important}[data-screen="modes"] .mode-speed{font-size:10px!important;padding-inline:7px!important}}

/* En-têtes de menus : le bouton retour respire avant le titre. */
@media (min-width:701px){
  .screen:not(.screen--game) .section-heading{grid-template-columns:130px minmax(0,1fr) 70px;column-gap:22px}
  .screen:not(.screen--game) .section-heading .back-button{padding-inline:10px;border:1px solid #6845ae;border-radius:9px;background:linear-gradient(145deg,#1b1247,#0a0823);box-shadow:inset 0 0 12px #9c4eff16,0 6px 16px #03010b66;min-height:44px;display:flex;align-items:center}
  .screen:not(.screen--game) .section-heading:after{left:152px}
}
@media (max-width:700px){.screen:not(.screen--game) .section-heading .back-button{padding-inline:8px;min-height:38px;border-radius:8px}}

/* Titres de pages : contraste franc et finition arcade, sans effet de texte creux. */
.screen:not(.screen--game) .section-heading h2{font-family:Verdana,Arial,sans-serif!important;font-weight:800!important;line-height:1.08!important;letter-spacing:.015em!important;color:#fff8ff!important;-webkit-text-fill-color:#fff8ff!important;-webkit-text-stroke:0!important;text-shadow:0 3px 0 #2b105e,0 0 8px #c87affaa,0 0 24px #8f42ff66!important;filter:none!important}
.screen:not(.screen--game) .section-heading .eyebrow{font-family:Verdana,Arial,sans-serif!important;font-weight:700!important;letter-spacing:.16em;color:#c9a8ff!important;text-shadow:0 0 10px #a44eff88}
.screen:not(.screen--game) .section-heading:after{height:2px;background:linear-gradient(90deg,#ca6dff,#7e3fd8 48%,transparent);box-shadow:0 0 10px #a84cffaa}
@media (max-width:700px){.screen:not(.screen--game) .section-heading h2{font-size:clamp(1.45rem,7vw,2.35rem)!important;letter-spacing:0!important}.screen:not(.screen--game) .section-heading .eyebrow{letter-spacing:.1em}}

/* Cohesive arcade finish across the secondary screens. Keep the board geometry intact. */
body:not([data-screen="home"]) .game-scenery{opacity:.9}
body:not([data-screen="home"]) .game-scenery:after{background:linear-gradient(90deg,#050311a8 0%,#05031131 19%,#05031138 50%,#05031131 81%,#050311a8 100%),linear-gradient(180deg,#08051b34,#04021380)}
body:not([data-screen="home"]):not([data-mode]) .screen.active{background:radial-gradient(ellipse at 50% -8%,#6a32bd32,transparent 38%),linear-gradient(155deg,#0d092bdd,#060419d8)!important}
.screen:not(.screen--game) .section-heading{isolation:isolate}
.screen:not(.screen--game) .section-heading .heading-decoration{filter:drop-shadow(0 0 13px #bf62ff99)}
.screen:not(.screen--game) :is(.button,.back-button,.tab,.skin-card,.mode-card,.home-links button,.toggle,.language-button,.fullscreen-button){transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease}
.screen:not(.screen--game) :is(.button,.back-button,.tab,.skin-card,.mode-card,.home-links button,.fullscreen-button):focus-visible,.topbar__right :is(button):focus-visible{outline:2px solid #fff0ff;outline-offset:3px;box-shadow:0 0 0 5px #b34dff75,0 0 22px #b34dff88}
.screen:not(.screen--game) :is(.back-button,.button--ghost,.tab,.home-links button,.fullscreen-button):hover{border-color:#cc8fff;box-shadow:inset 0 1px #ffffff2d,0 0 18px #a94bff40}

/* Mission cards: descriptions must not run words together on short desktops. */
@media (min-width:701px) and (max-height:720px){[data-screen="modes"] .mode-card small br{display:initial}}
[data-screen="modes"] .mode-card small{max-width:34ch}
html[lang="es"] [data-screen="modes"] .mode-card--classic strong:after{content:'SIN LÍMITE · BORDES TRANSITABLES'}
html[lang="es"] [data-screen="modes"] :is(.mode-card--chrono60,.mode-card--chrono120) strong:after{content:'TIEMPO LIMITADO · BORDES SÓLIDOS'}
html[lang="es"] [data-screen="modes"] .mode-card--survival strong:after{content:'PRESIÓN MÁXIMA · BORDES SÓLIDOS'}
html[lang="de"] [data-screen="modes"] .mode-card--classic strong:after{content:'OHNE LIMIT · DURCHLÄSSIGE WÄNDE'}
html[lang="de"] [data-screen="modes"] :is(.mode-card--chrono60,.mode-card--chrono120) strong:after{content:'ZEITLIMIT · FESTE WÄNDE'}
html[lang="de"] [data-screen="modes"] .mode-card--survival strong:after{content:'MAXIMALER DRUCK · FESTE WÄNDE'}
html[lang="pt"] [data-screen="modes"] .mode-card--classic strong:after{content:'SEM LIMITE · PAREDES TRANSITÁVEIS'}
html[lang="pt"] [data-screen="modes"] :is(.mode-card--chrono60,.mode-card--chrono120) strong:after{content:'TEMPO LIMITADO · PAREDES SÓLIDAS'}
html[lang="pt"] [data-screen="modes"] .mode-card--survival strong:after{content:'PRESSÃO MÁXIMA · PAREDES SÓLIDAS'}

/* Statistics get the same illustrated depth as the mode cards. */
[data-screen="stats"] :is(.metric,.mode-stat){position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-radius:12px;background-image:linear-gradient(110deg,transparent 35%,#ffffff06 35.5% 36%,transparent 36.5%),repeating-linear-gradient(0deg,transparent 0 17px,#a969ff09 18px 19px),radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--accent,#a45cff) 13%,transparent),transparent 55%),linear-gradient(145deg,#161039e8,#09071fe8)!important}
[data-screen="stats"] .metric:nth-child(1){--accent:#c377ff}[data-screen="stats"] .metric:nth-child(2){--accent:#54dbff}[data-screen="stats"] .metric:nth-child(3){--accent:#52eb9b}[data-screen="stats"] .metric:nth-child(4){--accent:#d479ff}[data-screen="stats"] .metric:nth-child(5){--accent:#ffcd69}
[data-screen="stats"] :is(.metric,.mode-stat):before{content:'';position:absolute;right:18px;top:50%;width:clamp(34px,5vh,54px);aspect-ratio:1;transform:translateY(-50%) rotate(45deg);border:2px solid color-mix(in srgb,var(--accent) 37%,transparent);box-shadow:inset 0 0 15px color-mix(in srgb,var(--accent) 15%,transparent),0 0 19px color-mix(in srgb,var(--accent) 10%,transparent);opacity:.65;pointer-events:none}
[data-screen="stats"] :is(.metric,.mode-stat)>*{position:relative;z-index:1}
[data-screen="stats"] .metric strong{font-size:clamp(1.45rem,3vh,2rem);color:#fff}
[data-screen="stats"] .mode-stat header{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
[data-screen="stats"] .mode-stat header b{font-size:clamp(1rem,2.2vh,1.3rem)}
[data-screen="stats"] .mode-stat p{margin-top:7px;color:#c7bbdc}

/* Locked achievements remain clearly legible; unlocked ones retain their reward glow. */
[data-screen="achievements"] .achievement:not(.unlocked){opacity:1!important;border-color:#5b428e;background:linear-gradient(115deg,#171139e8,#09071eea)!important}
[data-screen="achievements"] .achievement:not(.unlocked) strong{color:#eee7fb}
[data-screen="achievements"] .achievement:not(.unlocked) small{color:#bfb2db}
[data-screen="achievements"] .achievement:not(.unlocked) .achievement__icon{color:#c0a3ed;border-color:#77539e;background:#281644}
[data-screen="achievements"] .achievement.unlocked{border-color:#ecba69;box-shadow:0 0 0 1px #f9d88144,0 0 24px #e9a94b26,inset 0 0 22px #d68a4525}

/* The records, settings and end-of-run panels share one consistent frame. */
[data-screen="hall"] .leaderboard,[data-screen="options"] .options-card,[data-screen="gameover"] .gameover-card{border:1px solid #8053be;box-shadow:0 0 0 1px #24134d,0 18px 42px #02010bb3,inset 0 1px #ffffff1d,inset 0 0 35px #a553ff0c}
[data-screen="hall"] .leaderboard-head{border-bottom:1px solid #9260cf;background:linear-gradient(90deg,#2a1752,#140d35);color:#f4eaff}
[data-screen="hall"] .leaderboard-row{border-top:1px solid #493574a6}
[data-screen="hall"] .leaderboard-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:clamp(160px,29vh,240px);padding:18px 24px;color:#e5d9f8;font:600 14px/1.5 Verdana,Arial,sans-serif;text-align:center;background:radial-gradient(ellipse at 50% 12%,#7435b624,transparent 56%),repeating-linear-gradient(0deg,transparent 0 23px,#a965ee09 24px 25px)}
[data-screen="hall"] .leaderboard-empty:before{content:'♜';display:grid;place-items:center;width:66px;height:66px;border:1px solid #9c5ede;border-radius:13px;color:#d89dff;font:900 40px/1 Verdana,Arial,sans-serif;text-shadow:0 0 16px #b052f5;box-shadow:inset 0 0 18px #8d45dd2e,0 0 24px #8d45dd3a}
[data-screen="hall"] .hall-note{color:#c9b3ef;font-size:12px;letter-spacing:.08em}
[data-screen="options"] .option-row:before{background:linear-gradient(#d78aff,#7133bb)}
[data-screen="options"] .option-row strong{color:#f7f1ff}
[data-screen="options"] .option-row small{color:#bfb5d7}
[data-screen="gameover"] .result-grid>div{background:linear-gradient(115deg,#1b123d,#0b0825);box-shadow:inset 0 1px #ffffff12}
@media(max-width:700px){body:not([data-screen="home"]) .game-scenery{opacity:.52}[data-screen="stats"] :is(.metric,.mode-stat):before{width:28px;right:12px}[data-screen="modes"] .mode-card strong:after{font-size:12px;line-height:1.35}}

/* Phone layout: the utility controls get their own top row, without masking titles. */
@media(max-width:700px){
  :is(body:not([data-mode]),body[data-mode=""]) .topbar{top:12px;right:12px}
  :is(body:not([data-mode]),body[data-mode=""]) #app>.screen:not(.screen--game).active{padding-top:68px}
  :is(body:not([data-mode]),body[data-mode=""]) #app>.screen--home.active{padding-top:70px}
  .screen--home .hero-copy h1{font-size:clamp(3rem,15vw,4.4rem)!important;line-height:.83!important}
  .screen--home .hero-tagline{margin:16px 0 18px!important}
  .screen--home .home-links{gap:8px!important;margin-top:16px!important}
  .screen--home .home-links button{min-width:0;padding-inline:7px!important;font:700 12px Verdana,Arial,sans-serif!important;letter-spacing:0!important;white-space:nowrap}
  .screen--home .home-links button:before{width:20px!important;height:20px!important;flex-basis:20px!important;margin-right:5px!important}
  .screen--home .hero-art{top:auto!important;bottom:42px!important;height:clamp(205px,30dvh,270px)!important;min-height:0!important;background-size:contain!important;background-position:center center!important;opacity:.9!important}
  [data-screen="modes"] .section-heading{min-height:64px;margin-bottom:8px}
  [data-screen="modes"] .section-heading .eyebrow{display:none}
  [data-screen="modes"] .section-heading h2{font-size:clamp(1.2rem,5vw,1.5rem)!important;line-height:1.1!important}
  [data-screen="modes"] .heading-decoration{display:none}
  [data-screen="modes"] .mode-grid{gap:9px!important}
  [data-screen="modes"] .mode-card{min-width:0;padding:9px 7px!important}
  [data-screen="modes"] .mode-card:after{font-size:2rem;right:10px}
  [data-screen="modes"] .mode-icon{width:72px!important;height:58px!important;font-size:2.7rem!important}
  [data-screen="modes"] .mode-card strong{font-size:12px!important;letter-spacing:0!important;line-height:1.25}
  [data-screen="modes"] .mode-card strong:before{font-size:12px;letter-spacing:.08em}
  [data-screen="modes"] .mode-card strong:after{display:none!important}
  [data-screen="modes"] .mode-card small{font-size:12px!important;line-height:1.35!important;overflow-wrap:anywhere}
  [data-screen="modes"] .mode-speed{max-width:100%;font-size:12px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere}
}
@media(max-width:370px){.screen--home .home-links button{font-size:12px!important;padding-inline:4px!important}.screen--home .home-links button:before{margin-right:3px!important}}
@media(max-width:700px){
  :is(body:not([data-mode]),body[data-mode=""]) #app>.screen--home.active{min-height:calc(100dvh - 18px)!important}
  .screen--home .hero-art{background-size:cover!important;background-position:center 57%!important;opacity:.72!important}
  [data-screen="modes"] .section-heading{grid-template-columns:88px minmax(0,1fr) 0;column-gap:12px}
  [data-screen="modes"] .mode-grid{height:min(620px,calc(100dvh - 190px));grid-template-rows:repeat(2,minmax(0,1fr))}
  [data-screen="modes"] .mode-card{min-height:0;height:100%}
}

/* Mode selection v5: four distinct pixel-art windows into the surrounding world. */
[data-screen="modes"] .mode-card{
  background-image:linear-gradient(180deg,#08071a72 0%,#08071ac7 46%,#060617ee 100%),radial-gradient(ellipse at 50% 7%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 63%),url('./assets/game-scenery-v1.png')!important;
  background-size:cover,cover,220% auto!important;
  background-position:center,center,var(--art-position)!important;
  background-repeat:no-repeat!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 -40px 58px #030310a6,0 16px 38px #020109c7!important;
}
[data-screen="modes"] .mode-card--classic{--art-position:0% 84%}
[data-screen="modes"] .mode-card--chrono60{--art-position:100% 4%}
[data-screen="modes"] .mode-card--chrono120{--art-position:0% 4%}
[data-screen="modes"] .mode-card--survival{--art-position:100% 92%}
[data-screen="modes"] .mode-card:before{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 27%,#05041324 76%,#050413a1),repeating-linear-gradient(0deg,transparent 0 18px,#ffffff08 19px 20px);
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:inset 0 0 25px #03030f73,0 0 14px color-mix(in srgb,var(--accent) 11%,transparent);
}
[data-screen="modes"] .mode-card:after{color:color-mix(in srgb,var(--accent) 28%,transparent);text-shadow:0 1px #03020a91}
[data-screen="modes"] .mode-icon{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 27%,transparent),transparent 62%),#060719d9;box-shadow:inset 0 0 20px color-mix(in srgb,var(--accent) 18%,transparent),0 0 0 3px #05061491,0 0 25px color-mix(in srgb,var(--accent) 34%,transparent)}
[data-screen="modes"] .mode-card :is(strong,small,.mode-speed){filter:drop-shadow(0 2px 5px #000)}

/* Statistics: illustrated data chips and matching miniature landscapes for the four modes. */
[data-screen="stats"] .metric{
  background-image:radial-gradient(ellipse at 92% 40%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 49%),repeating-linear-gradient(0deg,transparent 0 19px,#ffffff08 20px 21px),linear-gradient(115deg,#19113ae8,#08071deb)!important;
  border-color:color-mix(in srgb,var(--accent) 66%,#382360);
  box-shadow:inset 0 1px #ffffff20,inset 0 0 30px color-mix(in srgb,var(--accent) 8%,transparent),0 9px 22px #02010b88;
}
[data-screen="stats"] .metric:before{
  display:grid;place-items:center;right:clamp(13px,2vw,24px);top:50%;width:clamp(40px,5.8vh,58px);height:clamp(40px,5.8vh,58px);aspect-ratio:auto;transform:translateY(-50%);
  border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:9px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 17%,#171030),#09091e);
  color:var(--accent);font:700 clamp(25px,3.7vh,38px)/1 Verdana,Arial,sans-serif;text-shadow:0 0 13px var(--accent);opacity:.94;
}
[data-screen="stats"] .metric:nth-child(1):before{content:'▦'}
[data-screen="stats"] .metric:nth-child(2):before{content:'◷'}
[data-screen="stats"] .metric:nth-child(3):before{content:'◆'}
[data-screen="stats"] .metric:nth-child(4):before{content:'✦'}
[data-screen="stats"] .metric:nth-child(5):before{content:'↗'}
[data-screen="stats"] .metric:after{width:5px;height:5px;background:var(--accent);opacity:.7;box-shadow:9px 0 var(--accent),18px 0 var(--accent),0 0 10px var(--accent)}
[data-screen="stats"] .mode-stat{
  background-image:linear-gradient(90deg,#0b0929ec 0%,#0b0928d8 54%,#0b0929af 100%),radial-gradient(ellipse at 80% 36%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),url('./assets/game-scenery-v1.png')!important;
  background-size:cover,cover,210% auto!important;background-position:center,center,var(--art-position)!important;background-repeat:no-repeat!important;
  border-color:color-mix(in srgb,var(--accent) 42%,#3e2c75);box-shadow:inset 0 1px #ffffff1c,inset 0 0 25px color-mix(in srgb,var(--accent) 8%,transparent),0 9px 20px #02010b77;
}
[data-screen="stats"] .mode-stat:nth-child(1){--art-position:0% 85%}
[data-screen="stats"] .mode-stat:nth-child(2){--art-position:100% 0%}
[data-screen="stats"] .mode-stat:nth-child(3){--art-position:0% 0%}
[data-screen="stats"] .mode-stat:nth-child(4){--art-position:100% 92%}
[data-screen="stats"] .mode-stat:before{right:18px;top:auto;bottom:10px;width:auto;height:auto;aspect-ratio:auto;transform:none;border:0;background:none;box-shadow:none;color:color-mix(in srgb,var(--accent) 55%,transparent);font:900 clamp(1.4rem,3.3vh,1.9rem)/1 Verdana,Arial,sans-serif;letter-spacing:-.06em;opacity:1}
[data-screen="stats"] .mode-stat:nth-child(1):before{content:'01'}
[data-screen="stats"] .mode-stat:nth-child(2):before{content:'02'}
[data-screen="stats"] .mode-stat:nth-child(3):before{content:'03'}
[data-screen="stats"] .mode-stat:nth-child(4):before{content:'04'}
[data-screen="stats"] .mode-stat header b{color:var(--accent);text-shadow:0 0 15px color-mix(in srgb,var(--accent) 65%,transparent)}
@media(max-width:700px){[data-screen="modes"] .mode-card{background-size:cover,cover,340% auto!important}[data-screen="stats"] .metric:before{right:12px;width:38px;height:38px;font-size:24px}[data-screen="stats"] .mode-stat{background-size:cover,cover,260% auto!important}[data-screen="stats"] .mode-stat:before{font-size:1.4rem;right:12px;bottom:9px}}
@media(max-width:700px){[data-screen="modes"] .mode-card{background-image:linear-gradient(180deg,#08071aaf 0%,#08071ae1 47%,#060617f5 100%),radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 62%),url('./assets/game-scenery-v1.png')!important}}