/* A realistic iPhone (16 Pro proportions) for the home page hero. Loads
   after css/home.css, which places it and its floating badges.

   The phone is built in layers: a stack of frame-coloured slices behind the
   front gives it real thickness, so the side of the frame shows when the
   page's pointer parallax tilts it. The screen is laid out at the app's real
   size (393 x 852 points, the same numbers as the Flutter code) and scaled
   down, so it reads like a screenshot rather than a drawing. */

/* ------------------------------------------------------------ icons */
.ms{
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  font-size:24px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; direction:ltr; user-select:none;
  -webkit-font-smoothing:antialiased; font-feature-settings:'liga';
  font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms.fill{ font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ------------------------------------------------------------ device */
.iphone{
  --ti-a:#7a7a80; --ti-b:#3c3c40; --ti-c:#202023;
  --edge-hi:#86868c; --edge-top:#3d3d41; --edge-bot:#1b1b1d; --back:#232326;
  --w:287px; --h:598px; --r:50px; --band:3.5px; --bezel:7px; --depth:32px;
  position:relative; width:var(--w); height:var(--h); flex:none;
  border-radius:var(--r);
  transform-style:preserve-3d;
}

/* thickness: slices from just behind the front to the back glass */
.ip-depth{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.ip-depth i{
  position:absolute; inset:0; border-radius:var(--r);
  background:linear-gradient(180deg, var(--edge-top), var(--edge-bot));
}
.ip-depth i:nth-child(1){ transform:translateZ(-1px); background:var(--edge-hi); }
.ip-depth i:nth-child(2){ transform:translateZ(-3px); }
.ip-depth i:nth-child(3){ transform:translateZ(-5px); }
.ip-depth i:nth-child(4){ transform:translateZ(-7px); }
.ip-depth i:nth-child(5){ transform:translateZ(-9px); }
.ip-depth i:nth-child(6){ transform:translateZ(-11px); }
.ip-depth i:nth-child(7){ transform:translateZ(-13px); }
.ip-depth i:nth-child(8){ transform:translateZ(-15px); }
.ip-depth i:nth-child(9){ transform:translateZ(-17px); }
.ip-depth i:nth-child(10){ transform:translateZ(-19px); }
.ip-depth i:nth-child(11){ transform:translateZ(-21px); }
.ip-depth i:nth-child(12){ transform:translateZ(-23px); }
.ip-depth i:nth-child(13){ transform:translateZ(-25px); }
.ip-depth i:nth-child(14){ transform:translateZ(-27px); }
.ip-depth i:nth-child(15){ transform:translateZ(-30px); background:var(--edge-hi); opacity:.9; }
.ip-depth i:nth-child(16){
  transform:translateZ(calc(var(--depth) * -1)); background:var(--back);
  box-shadow:
    0 2px 3px rgba(0,0,0,.35),
    0 14px 28px -6px rgba(0,0,0,.55),
    0 40px 80px -16px rgba(0,0,0,.7);
}

/* side buttons, half way back so they stick out of the frame's side */
.ip-btn{
  position:absolute; width:3px; transform:translateZ(-16px);
  background:linear-gradient(90deg, var(--ti-c), var(--ti-a) 45%, var(--ti-b));
  box-shadow:0 0 1px rgba(0,0,0,.6);
}
.ip-btn.l{ left:-2.6px; border-radius:2px 0 0 2px; }
.ip-btn.r{ right:-2.6px; border-radius:0 2px 2px 0; }
.ip-action{ top:104px; height:26px; }
.ip-vol-up{ top:150px; height:46px; }
.ip-vol-down{ top:206px; height:46px; }
.ip-power{ top:166px; height:74px; }

/* front: the titanium band, black glass border and screen */
.ip-face{
  position:absolute; inset:0; border-radius:var(--r); padding:var(--band);
  background:linear-gradient(145deg, var(--ti-a) 0%, var(--ti-b) 12%, var(--ti-c) 38%, var(--ti-c) 62%, var(--ti-b) 88%, var(--ti-a) 100%);
}
/* a 1px specular rim around the outside edge */
.ip-face::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.8), rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 46%, rgba(255,255,255,.05) 72%, rgba(255,255,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* antenna lines: tiny breaks in the band near each corner */
.ip-face > b{ position:absolute; background:rgba(0,0,0,.28); }
.ip-face > b:nth-of-type(1){ left:0; top:68px; width:var(--band); height:2px; }
.ip-face > b:nth-of-type(2){ right:0; top:68px; width:var(--band); height:2px; }
.ip-face > b:nth-of-type(3){ left:0; bottom:68px; width:var(--band); height:2px; }
.ip-face > b:nth-of-type(4){ right:0; bottom:68px; width:var(--band); height:2px; }

.ip-bezel{
  position:relative; width:100%; height:100%; padding:var(--bezel);
  border-radius:calc(var(--r) - var(--band)); background:#030303;
  box-shadow:0 0 0 .75px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.045);
}
.ip-screen{
  position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate;
  border-radius:calc(var(--r) - var(--band) - var(--bezel)); background:#1A1A1A;
}
/* soft reflection on the cover glass */
.ip-glass{
  position:absolute; inset:0; z-index:60; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 34%, rgba(255,255,255,0) 35%);
}

/* ------------------------------------------------------------ iOS */
/* Everything inside is in points (393 x 852), scaled to the screen. */
.ios{
  position:absolute; left:0; top:0; width:393px; height:852px;
  transform:scale(.6768); transform-origin:0 0;
  background:#1A1A1A; color:#F0F0F0; overflow:hidden;
  font-family:'M PLUS Rounded 1c', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.ios-status{
  position:absolute; left:0; right:0; top:0; height:54px; z-index:40; color:#fff;
  font-family:-apple-system, 'SF Pro Text', system-ui, sans-serif;
}
.ios-time{
  position:absolute; left:34px; width:72px; top:17px; text-align:center;
  font-size:17px; font-weight:600; letter-spacing:-.3px; line-height:22px;
}
.ios-icons{ position:absolute; right:30px; top:21px; display:flex; align-items:center; gap:6px; }
.ios-icons svg{ display:block; fill:currentColor; }
.ios-island{
  position:absolute; top:11px; left:50%; width:125px; height:37px; margin-left:-62.5px;
  border-radius:20px; background:#000; z-index:50;
}
.ios-island::after{
  content:""; position:absolute; right:13px; top:50%; width:11px; height:11px; margin-top:-5.5px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #3a4a6e 0, #141a2b 32%, #050608 62%, #000 100%);
  box-shadow:inset 0 0 0 1.5px #0b0b0d;
}
.ios-home{
  position:absolute; bottom:8px; left:50%; width:139px; height:5px; margin-left:-69.5px;
  border-radius:3px; background:rgba(255,255,255,.9); z-index:40;
}

/* ------------------------------------------------------------ the app */
/* main shell header: lib/features/shell/presentation/pages/main_shell.dart */
.ts-header{
  position:absolute; top:59px; left:0; right:0; height:50px; padding:6px 12px;
  display:flex; align-items:center; gap:4px; color:#727272;
}
.ts-header .ms{ font-size:26px; }
.ts-team{ flex:1; min-width:0; font-size:20px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-acct{ display:flex; flex-direction:column; align-items:center; font-size:10px; line-height:14px; }
.ts-acct .ms{ font-size:24px; color:#F0F0F0; }

/* bottom tabs */
.ts-tabs{
  position:absolute; left:0; right:0; bottom:0; height:80px; z-index:20;
  display:flex; padding-top:4px; background:#1A1A1A;
}
.ts-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#727272; font-size:10px; line-height:14px; }
.ts-tab .ms{ font-size:24px; }
.ts-tab.on{ color:#F0F0F0; }

/* Videos tab: lib/features/videos/presentation/pages/videos_tab.dart */
.ts-hero{
  position:absolute; left:12px; top:117px; width:369px; height:207.6px;
  border-radius:14px; overflow:hidden; background:#393939;
}
.video{ position:absolute; inset:0; container-type:inline-size; overflow:hidden; }
.video > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ts-hero-title{
  position:absolute; left:0; right:0; bottom:0; padding:28px 12px 10px; text-align:center;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.87));
  color:#fff; font-size:19px; font-weight:700; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ts-live{
  position:absolute; top:10px; right:10px; padding:3px 8px; border-radius:6px;
  background:#F44336; color:#fff; font:800 12px/1.2 system-ui, -apple-system, sans-serif;
}
.ts-grid{
  position:absolute; left:12px; right:12px; top:336.6px;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 10px;
}
.ts-tile{
  height:155px; display:flex; flex-direction:column; padding-top:6px;
  border-radius:12px; background:#1A1A1A; box-shadow:0 0 8px #393939; min-width:0;
}
.ts-thumb{
  position:relative; flex:1; margin:0 10px; border-radius:12px; overflow:hidden;
  background:#232323; box-shadow:0 0 8px #393939;
}
.ts-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ts-thumb::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.3); }
.ts-thumb .ms{
  position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%);
  font-size:40px; color:#fff; font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
}
.ts-views{
  position:absolute; right:4px; bottom:4px; z-index:1; display:flex; align-items:center; gap:2px;
  padding:2px 6px; border-radius:4px; background:rgba(0,0,0,.7);
  color:#fff; font:600 10px/1.2 system-ui, -apple-system, sans-serif;
}
.ts-views .ms{ position:static; transform:none; font-size:10px; }
.ts-tile-title{
  margin-top:8px; padding:0 10px; text-align:center; font-size:15px; font-weight:700; line-height:24px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#F0F0F0;
}
.ts-tile-date{
  margin-top:2px; padding:0 10px 6px; text-align:center; font-size:12px; font-weight:700; line-height:19.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#727272;
}

/* ------------------------------------------------------------ the burned-in scoreboard */
/* Same proportions as ScoreboardRenderer: a 720 x 52 bar drawn at 1.4x on a
   1920-wide frame, so every size here is a share of the video's width. */
.burn{
  position:absolute; top:.73cqw; left:50%; width:52.5cqw; height:3.79cqw; margin-left:-26.25cqw;
  display:grid; grid-template-columns:1fr 7.58cqw 1fr; align-items:center;
  border-radius:.73cqw; color:#fff; font-family:'M PLUS Rounded 1c', system-ui, sans-serif; font-weight:700;
  background:linear-gradient(120deg, #405682 0%, #020617 46%, #020617 54%, #405682 100%);
  box-shadow:0 0 0 1px rgba(15,23,42,.9), inset 0 0 0 1px rgba(255,255,255,.2), 0 .66cqw 1.4cqw rgba(0,0,0,.7);
}
.b-side{ display:flex; align-items:center; gap:.58cqw; padding:0 1.02cqw; min-width:0; height:100%; }
.b-home{ justify-content:flex-end; }
.b-logo{ flex:none; width:2.19cqw; height:2.19cqw; object-fit:contain; }
.b-name{
  flex:1; min-width:0; font-size:.95cqw; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.b-home .b-name{ text-align:right; }
.b-score{ flex:none; width:2.48cqw; text-align:center; font-size:1.75cqw; font-variant-numeric:tabular-nums; }
.b-mid{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2cqw;
  border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14);
}
.b-mid b{ font-size:1.31cqw; letter-spacing:.08em; line-height:1; font-variant-numeric:tabular-nums; }
.b-mid small{ font-size:.66cqw; letter-spacing:.22em; line-height:1; color:rgba(255,255,255,.78); }