/* Rubik, self-hosted (fonts/rubik, SIL OFL 1.1, Google Fonts v31 variable 300-900): the guide named it with no
   @font-face, so every TV drew the system font (Founder 2026-10-08, lux-1000). */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/rubik/rubik-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/rubik/rubik-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/rubik/rubik-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/rubik/rubik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/rubik/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The venue TV: one channel frame plus a Smart-TV style guide around it.
   Deliberately not tied to any tenant theme: colourful tiles per channel, glass panels. */
:root {
  --bg: #07080d;
  --glass: rgba(18, 20, 30, 0.62);
  --line: rgba(255, 255, 255, 0.12);
  --txt: #ffffff;
  --dim: rgba(255, 255, 255, 0.64);
  --live: #ff3b5c;
  --focus: #ffffff;
  --rail-w: 600px;
  --zoom: 0.56;
  --gz: 1;            /* guide scale: the layout is drawn for 1920x1080; guide.js sets this on smaller screens (Fold, tablets) */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--txt);
  font-family: 'Rubik', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* ---------- the channel frame ---------- */
.stage { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; transform-origin: top right;
  transition: transform 0.55s cubic-bezier(.2,.8,.2,1), border-radius 0.55s, box-shadow 0.55s; z-index: 1; overflow: hidden; background: #000; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #000; transition: opacity 0.28s ease; }
.stage.switching iframe { opacity: 0; }
body.guide-open .stage { cursor: pointer; }
body.guide-open .stage { transform: translate(calc(-40px * var(--gz)), calc(110px * var(--gz))) scale(var(--zoom)); border-radius: 34px;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 40px 120px rgba(0,0,0,0.7), 0 0 120px var(--glow, rgba(90,120,255,0.35)); z-index: 3; }

.banner, .digits { zoom: var(--gz); } /* the corner hotspot keeps its full size: it is a finger's target */
.hotspot { position: fixed; top: 0; left: 0; width: 192px; height: 86px; border: 0; background: transparent; z-index: 5; cursor: pointer; }
/* The corner stays while the guide is open: a pointer remote (Hisense/VIDAA) has no Back key the page sees,
   so OK on the corner is its way out (cancel). */
.keys { position: fixed; left: 24px; bottom: 24px; z-index: 9; font: 700 40px/1.2 system-ui, sans-serif; color: #fff;
        background: rgba(0, 0, 0, 0.75); padding: 12px 20px; border-radius: 12px; pointer-events: none; }

/* ---------- colourful tiles (shared by rail, banner, info) ---------- */
.tile { background: var(--grad); }
[data-tone="green"]   { --grad: linear-gradient(135deg, #00c853, #00796b); --glow: rgba(0, 200, 83, 0.45); }
[data-tone="orange"]  { --grad: linear-gradient(135deg, #ff9100, #ff3d00); --glow: rgba(255, 110, 0, 0.45); }
[data-tone="lime"]    { --grad: linear-gradient(135deg, #c6ff00, #43a047); --glow: rgba(160, 230, 0, 0.45); }
[data-tone="ice"]     { --grad: linear-gradient(135deg, #40c4ff, #2962ff); --glow: rgba(64, 160, 255, 0.45); }
[data-tone="gold"]    { --grad: linear-gradient(135deg, #ffd600, #ff8f00); --glow: rgba(255, 190, 0, 0.45); }
[data-tone="violet"]  { --grad: linear-gradient(135deg, #b388ff, #6200ea); --glow: rgba(140, 90, 255, 0.45); }
[data-tone="pink"]    { --grad: linear-gradient(135deg, #ff4081, #c51162); --glow: rgba(255, 64, 129, 0.45); }
[data-tone="cyan"]    { --grad: linear-gradient(135deg, #18ffff, #00838f); --glow: rgba(24, 220, 255, 0.45); }
[data-tone="red"]     { --grad: linear-gradient(135deg, #ff5252, #b71c1c); --glow: rgba(255, 60, 60, 0.45); }
[data-tone="brown"]   { --grad: linear-gradient(135deg, #ffab40, #6d4c41); --glow: rgba(255, 160, 64, 0.4); }
[data-tone="indigo"]  { --grad: linear-gradient(135deg, #536dfe, #1a237e); --glow: rgba(83, 109, 254, 0.45); }
[data-tone="rainbow"] { --grad: linear-gradient(135deg, #ff4081, #7c4dff 45%, #00e5ff); --glow: rgba(124, 77, 255, 0.45); }
.glyph { display: grid; place-items: center; }
.glyph img { width: 62%; height: 62%; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.glyph svg { width: 62%; height: 62%; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }

/* ---------- channel banner (watching) ---------- */
.banner { position: fixed; left: 40px; bottom: 40px; z-index: 6; display: flex; align-items: center; gap: 22px;
  min-width: 520px; padding: 20px 30px 24px 20px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px var(--glow, transparent); overflow: hidden; animation: rise 0.35s cubic-bezier(.2,.8,.2,1); }
.banner-tile { width: 96px; height: 96px; border-radius: 24px; flex: 0 0 auto; background: var(--grad); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.banner-tile .banner-glyph { width: 100%; height: 100%; }
.banner-top { display: flex; align-items: center; gap: 10px; }
.banner-num { font-weight: 800; font-size: 17px; color: #111; background: #fff; border-radius: 9px; padding: 2px 11px; }
.banner-kind { font-size: 15px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 1.2px; }
.banner-name { font-size: 38px; font-weight: 800; line-height: 1.1; margin-top: 4px; white-space: nowrap; }
.banner-meta { margin-top: 6px; font-size: 18px; color: var(--dim); display: flex; gap: 10px; align-items: center; }
.banner-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,0.08); }
.banner-bar span { display: block; height: 100%; background: var(--grad); animation: drain 4s linear forwards; }
@keyframes drain { from { width: 100%; } to { width: 0; } }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.digits { position: fixed; top: 48px; right: 56px; z-index: 7; font-size: 96px; font-weight: 900; letter-spacing: 6px;
  padding: 6px 30px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.live-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 900; letter-spacing: 1.3px; color: #fff; background: var(--live); border-radius: 7px; padding: 3px 9px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- guide ---------- */
.guide { position: fixed; inset: 0; z-index: 2; zoom: var(--gz); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
body.guide-open .guide { opacity: 1; pointer-events: auto; }
.guide .rail, .guide .info, .guide .guide-top { transition: transform 0.55s cubic-bezier(.2,.8,.2,1); }
body:not(.guide-open) .guide .rail { transform: translateX(-60px); }
body:not(.guide-open) .guide .info { transform: translateY(60px); }
body:not(.guide-open) .guide .guide-top { transform: translateY(-40px); }
.guide-bg { position: absolute; inset: 0; background:
  radial-gradient(900px 600px at 12% 18%, rgba(124, 77, 255, 0.35), transparent 60%),
  radial-gradient(800px 600px at 88% 90%, rgba(0, 229, 255, 0.22), transparent 60%),
  radial-gradient(700px 500px at 60% 40%, rgba(255, 64, 129, 0.18), transparent 60%),
  var(--bg); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { filter: hue-rotate(40deg); } }
.guide-top { position: absolute; top: 34px; left: 44px; right: 44px; height: 64px; display: flex; align-items: center; gap: 22px; z-index: 4; }
.guide-title { display: flex; align-items: center; gap: 14px; font-size: 44px; font-weight: 900; letter-spacing: -0.5px; }
.tv-chip { font-size: 30px; padding: 2px 14px; border-radius: 12px; color: #111; background: linear-gradient(135deg, #ffd600, #ff9100); }
.guide-clock { margin-left: auto; font-size: 34px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }

.rail { position: absolute; top: 124px; bottom: 32px; left: 44px; width: var(--rail-w); overflow-y: auto; overflow-x: hidden;
  padding: 10px 14px 60px 6px; scroll-behavior: smooth; z-index: 4; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-group { margin: 18px 0 10px 8px; font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.ch { display: flex; align-items: center; gap: 18px; width: 100%; padding: 12px 16px 12px 12px; margin: 0 0 10px; border: 0; border-radius: 22px;
  background: rgba(255,255,255,0.05); cursor: pointer; text-align: left; transition: transform 0.18s, background 0.18s, box-shadow 0.18s; }
.ch:active { transform: scale(0.98); }
.ch-tile { width: 76px; height: 76px; border-radius: 20px; background: var(--grad); flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.ch-num { width: 44px; font-size: 22px; font-weight: 800; color: var(--dim); text-align: right; flex: 0 0 auto; }
.ch-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ch-name { font-size: 25px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-meta { font-size: 16px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.ch.focus { background: rgba(255,255,255,0.14); transform: scale(1.03); box-shadow: 0 0 0 3px var(--focus), 0 18px 50px rgba(0,0,0,0.45), 0 0 40px var(--glow); }
.ch.current .ch-num { color: #fff; }
.ch.current::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--live); margin-left: auto; box-shadow: 0 0 12px var(--live); }
.ch.empty { opacity: 0.45; }

.info { position: absolute; right: 40px; bottom: 32px; left: calc(var(--rail-w) + 80px); height: 262px; z-index: 4; display: flex; gap: 30px; align-items: center;
  padding: 28px 34px; border-radius: 30px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 0 80px var(--glow, transparent); }
.info-tile { width: 180px; height: 180px; border-radius: 40px; background: var(--grad); flex: 0 0 auto; box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 20px 50px rgba(0,0,0,0.4); }
.info-tile .info-glyph { width: 100%; height: 100%; }
.info-top { display: flex; align-items: center; gap: 12px; }
.info-num { font-size: 20px; font-weight: 900; color: #111; background: #fff; border-radius: 10px; padding: 3px 12px; }
.info-kind { font-size: 17px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.info-name { font-size: 54px; font-weight: 900; line-height: 1.05; margin-top: 10px; }
.info-desc { font-size: 22px; color: var(--dim); margin-top: 10px; }
.info-hint { font-size: 18px; margin-top: 16px; color: rgba(255,255,255,0.8); display: flex; gap: 10px; align-items: center; }
.key { font-size: 14px; font-weight: 900; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.10); }

/* ---------- race posters: a real frame of the channel's last race ---------- */
.has-poster { background-size: cover; background-position: center; position: relative; }
.has-poster::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55)); }
.ch-tile.has-poster { width: 128px; height: 76px; }
.poster-badge { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 9px; background: var(--grad); z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.poster-badge svg, .poster-badge img { width: 70%; height: 70%; }
.info-tile.has-poster { width: 320px; height: 180px; border-radius: 26px; }
.has-poster.art::after { display: none; } /* the game's artwork is shown as it is, no shade */
.info-tile.has-poster .info-glyph.poster-badge { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; border-radius: 14px; }

/* ---------- crash channels: the real client cropped to its flight and live bets ---------- */
.stage.cropped { background: radial-gradient(1200px 800px at 50% 40%, #1b1d2e, #05060a); }
.stage iframe.cropped { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
/* The kiosk's top screen (guide.js TOP): a channel with no page (the Arcade, the advertising skeleton) is black. */
.stage iframe[src="about:blank"] { visibility: hidden; }