/* ───────────────────────────────────────────────
   ShortFlix · TikTok Mini — Design Tokens & Base
   SF system font · Red/Gray/White · Flat, minimal shadow
   ─────────────────────────────────────────────── */
:root{
  /* Brand red */
  --red:#FF3333;          /* primary actions, active states */
  --red-strong:#FF0000;   /* emphasis / pressed */
  --red-ink:#E11414;      /* red text on light */
  --red-tint:#FFEDED;     /* soft red surface */
  --red-tint-2:#FFF5F5;

  /* Neutrals (light) */
  --bg:#F5F5F5;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --ink:#16161A;
  --ink-2:#6B6B73;
  --ink-3:#9C9CA5;
  --hairline:rgba(20,20,26,0.08);
  --hairline-2:rgba(20,20,26,0.06);

  /* Accents */
  --gold:#F5B81E;          /* coins */
  --gold-deep:#E09A1B;
  --vip-1:#F4D27A;         /* vip gradient */
  --vip-2:#D89B33;
  --vip-ink:#5A3D08;
  --ad:#3B82F6;            /* ad-unlock blue */
  --ad-tint:#EAF1FF;
  --green:#22A565;

  /* Dark (player) */
  --d-bg:#0B0B0D;
  --d-surface:#17171A;
  --d-surface-2:#212126;
  --d-ink:#FFFFFF;
  --d-ink-2:rgba(255,255,255,0.62);
  --d-ink-3:rgba(255,255,255,0.40);
  --d-hairline:rgba(255,255,255,0.10);

  /* Radii */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:14px;
  --r-xl:20px;
  --r-sheet:24px;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);background:#E9E9EC;color:var(--ink);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{display:block;max-width:100%;}

/* hide scrollbars inside screens but keep scroll */
.noscroll::-webkit-scrollbar{width:0;height:0;display:none;}
.noscroll{scrollbar-width:none;-ms-overflow-style:none;}

/* the phone screen scroll region */
.screen-scroll{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}

/* line clamp helpers */
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* press feedback */
.pressable{transition:transform .12s ease, opacity .12s ease, background .15s ease;}
.pressable:active{transform:scale(.96);opacity:.9;}

/* keyframes */
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popIn{0%{transform:scale(.92);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes coinPop{0%{transform:translateY(0) scale(1);opacity:0;}
  20%{opacity:1;}100%{transform:translateY(-34px) scale(1.15);opacity:0;}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulseRing{0%{transform:scale(.85);opacity:.7;}70%{transform:scale(1.4);opacity:0;}100%{opacity:0;}}
@keyframes slideInR{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes shakeX{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(3px);}}
@keyframes toastUp{from{transform:translate(-50%,12px);opacity:0;}to{transform:translate(-50%,0);opacity:1;}}

/* gradient drama poster shimmer overlay */
.poster-sheen{position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:200% 100%;}