/* JETOUR G700 Kiosk Race — screen layout (js/layout.js, CONFIG.layout).
   portrait  = the kiosk (1080x1920): #top-media 25 % / #game-area 50 % / #board 25 % (CONFIG.layout.portrait)
   landscape = #game-area fills the window (the original full-screen layout; laptops, 16:9 screens)
   #game-area holds the game canvas host (#game) and the UI root (#ui). #ui is a size container ("kui"): every game
   screen is sized from the game area, not from the window (css/kiosk.css). */

#kiosk {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  --lay-top: 18%; --lay-game: 60%; --lay-board: 22%; --lay-max-aspect: 0.625;
}
#game-area { position: relative; overflow: hidden; background: #000; }
#game { position: absolute; inset: 0; z-index: 0; background: #000; }
#game canvas { display: block; width: 100%; height: 100%; outline: none; }
#ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; container: kui / size; }

/* ---------------------------------------------------------------- landscape: the game is the whole window */
#kiosk.layout-landscape #game-area { position: absolute; inset: 0; }
#kiosk.layout-landscape #top-media,
#kiosk.layout-landscape #board { display: none; }

/* ---------------------------------------------------------------- portrait: three stacked sections */
#kiosk.layout-portrait {
  display: grid;
  grid-template-rows: var(--lay-top) var(--lay-game) var(--lay-board);
  grid-template-columns: 100%;
  /* a forced portrait preview in a wide window: a centred column with the kiosk's proportions */
  width: min(100vw, calc(100vh * var(--lay-max-aspect)));
  left: 0; right: 0; margin: 0 auto;          /* centred without a transform (no containing block / layer over the canvas) */
}
#kiosk.layout-portrait > * { min-height: 0; min-width: 0; }
#kiosk.layout-portrait #game-area { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* ---------------------------------------------------------------- top media (image now, muted looping video later) */
#top-media { position: relative; overflow: hidden; background: #050607; container: topmedia / size; }
#top-media .tm-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
#top-media video.tm-media { opacity: 0; transition: opacity .6s ease; }
#top-media.has-media video.tm-media { opacity: 1; }
/* shown when there is no media file (or it failed): dark gradient + the white logo, never a broken image */
#top-media .tm-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4cqh;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(242,164,58,.16) 0%, rgba(242,164,58,0) 70%),
    linear-gradient(180deg, #1a1f25 0%, #0b0e11 62%, #050607 100%);
  color: #f3f1ea; font-family: 'Rajdhani', system-ui, 'Segoe UI', sans-serif; text-align: center;
}
#top-media .tm-fallback::after {          /* a thin amber horizon line under the logo block */
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 14%; height: 2px;
  background: linear-gradient(90deg, rgba(242,164,58,0), rgba(242,164,58,.55), rgba(242,164,58,0));
}
#top-media .tm-logo { width: min(58cqw, 150cqh); height: auto; display: block; }   /* artwork 5.21:1 */
#top-media .tm-model { font-size: min(10cqh, 9cqw); font-weight: 700; letter-spacing: .5em; margin-right: -.5em; color: #f2a43a; line-height: 1; }
#top-media .tm-tag { font-size: min(4.4cqh, 3.6cqw); font-weight: 600; letter-spacing: .35em; margin-right: -.35em; color: #b9b5a8; }

/* ---------------------------------------------------------------- bottom leaderboard section (KioskUI.renderBoard) */
#board { position: relative; overflow: hidden; background: #07090b; container: board / size; }