/* Skesia game screens (title, pause, end): one look for every Skesia mini-game. Copy this file as is and load it after the page's own <style>.
   The title screen fits a phone without scrolling (portrait from 360 x 560, and on its side).
   Title markup:
   <div class="screen" id="titleScreen"><div class="panel title">
     <img class="logo" …><h1>Fyx …</h1><p class="tag">One line.</p>
     <ol class="steps"><li>Short step</li><li>…</li><li>…</li></ol>
     [game options, e.g. <div class="chapters">]
     <div class="purse"><span class="coin"></span><span class="walletN">0</span> pièces</div>
     <div class="btns"><button class="btn has-badge" id="playBtn">…Jouer</button><div class="more"><button class="btn lilac">…</button>…</div></div>
     <div class="links"><a>Son : activé</a></div>
   </div></div> */
.screen { position: fixed; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  background: rgba(30,18,56,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); overflow-y: auto; overscroll-behavior: contain; text-align: center; transition: opacity .3s, visibility 0s; }
.screen.hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.screen .panel { position: relative; box-sizing: border-box; width: 100%; max-width: 440px; margin: 0; padding: 22px 24px 18px; background: #fff; border-radius: 28px; text-align: center;
  border-bottom: 6px solid #e6dcf7; box-shadow: 0 24px 60px rgba(20,10,40,.35); }
.screen .panel img.logo { display: block; width: 132px; height: auto; margin: 0 auto 2px; }
.screen .panel img.fyx { display: block; width: 110px; height: auto; margin: -4px auto 2px; }
.screen .panel h1 { margin: 0 0 2px; font: 600 38px/1.05 Fredoka, sans-serif; background: linear-gradient(180deg, #ffb13b, #e8430f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.screen .panel h2 { margin: 0 0 4px; font: 600 30px/1.1 Fredoka, sans-serif; color: #25304c; }
.screen .panel p { margin: 4px 0 12px; font: 700 15px/1.3 Nunito, sans-serif; color: #697185; }
.screen .steps { list-style: none; counter-reset: step; display: grid; gap: 6px; margin: 0 0 12px; padding: 0; text-align: left; font: 800 14px/1.25 Nunito, sans-serif; color: #25304c; }
.screen .steps li { counter-increment: step; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #f6f3fc; border-radius: 12px; }
.screen .steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f07a2a; color: #fff; font: 600 14px Fredoka, sans-serif; }
.screen .purse { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px 12px; background: #fff3d9; border-radius: 999px; font: 900 15px Nunito, sans-serif; color: #25304c; }
.screen .purse .coin { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #f5b316 55%, #c47a06); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.screen .btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.screen .btns .more { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; }
.screen .btns > .btn:first-child { min-width: 262px; } /* wide enough for « Chargement… »: the button keeps its size once the game is ready */
.screen .btns .more .btn { height: 46px; padding: 0 16px; font-size: 16px; border-radius: 7px; }
.screen .links { margin-top: 8px; font: 800 13px Nunito, sans-serif; color: #697185; }
.screen .links a { color: #7445bb; text-decoration: none; cursor: pointer; pointer-events: auto; }
.screen .note { margin: 8px 0 0; font: 800 13px Nunito, sans-serif; color: #697185; } .screen .note:empty { display: none; }
/* end screen */
.screen .stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.screen .stats > div { min-width: 92px; padding: 8px 12px; background: #f6f3fc; border-radius: 14px; }
.screen .stats b { display: block; font: 600 28px/1.1 Fredoka, sans-serif; color: #e8670f; }
.screen .stats span { font: 900 11px Nunito, sans-serif; color: #697185; text-transform: uppercase; letter-spacing: .05em; }
.screen .record { min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; color: #1f9d55; }
/* game options under the steps (Fyx Run's chapters) */
.screen .chapters { margin: 0 0 12px; }
.screen .chapters > b { display: block; margin-bottom: 6px; font: 900 11px Nunito, sans-serif; color: #697185; text-transform: uppercase; letter-spacing: .06em; }
.screen .chapters [data-c] { padding: 4px 10px; font: 800 13px Nunito, sans-serif; border: 2px solid #e2d9ef; border-radius: 999px; background: #fff; color: #25304c; cursor: pointer; pointer-events: auto; }
.screen .chapters [data-c].on { background: #7445bb; border-color: #7445bb; color: #fff; }

/* shorter screens (phones with the browser bars): tighter, then without the logo */
@media (max-height: 740px) { .screen .panel { padding: 18px 20px 14px; } .screen .panel img.logo { width: 108px; } .screen .panel h1 { font-size: 34px; } .screen .panel img.fyx { width: 84px; } }
@media (max-height: 640px) { .screen .panel img.logo { display: none; } .screen .panel h1 { font-size: 30px; } .screen .panel p { margin: 2px 0 10px; font-size: 14px; }
  .screen .steps { font-size: 13px; gap: 5px; margin-bottom: 10px; } .screen .steps li { padding: 5px 8px; } .screen .btns > .btn:first-child { height: 52px; } .screen .panel img.fyx { display: none; }
  .screen .chapters { margin-bottom: 10px; } .screen .chapters [data-c] { padding: 3px 9px; font-size: 12px; } .screen .purse { margin-bottom: 10px; } }
@media (max-width: 360px) { .screen .panel { padding-left: 14px; padding-right: 14px; } .screen .btns .more .btn { padding: 0 12px; font-size: 15px; } }
/* phone on its side: the steps side by side, the buttons on one line */
@media (max-height: 500px) and (orientation: landscape) {
  .screen { padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); }
  .screen .panel { max-width: 680px; padding: 12px 20px 10px; border-radius: 22px; }
  .screen .panel img.logo, .screen .panel img.fyx { display: none; } .screen .panel h1 { font-size: 28px; } .screen .panel h2 { font-size: 24px; } .screen .panel p { margin: 0 0 8px; font-size: 14px; }
  .screen .steps { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; font-size: 12px; } .screen .steps li { padding: 5px 8px; gap: 6px; } .screen .steps li::before { width: 20px; height: 20px; font-size: 12px; }
  .screen .chapters { margin-bottom: 8px; } .screen .chapters > b { display: none; }
  .screen .purse { margin-bottom: 8px; }
  .screen .btns { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .screen .btns > .btn:first-child { min-width: 210px; height: 46px; padding: 0 22px 0 46px; font-size: 18px; } .screen .btns > .btn:first-child .badge { left: 14px; width: 22px; height: 22px; margin-top: -11px; }
  .screen .stats { margin: 4px 0 8px; } .screen .stats b { font-size: 22px; } .screen .links { margin-top: 4px; } }