/* SkillTV — charte orange néon, refonte 3 zones.
   Les couleurs sont des variables : changer :root suffit pour passer en bleu ou en gris,
   comme le fait theme.py côté bureau. */
:root {
  /* Mêmes valeurs que Tok dans src/skilltv/vitrine.py (bureau) */
  --accent:      #ff6b00;
  --accent-hover:#ff8c00;
  --accent-deep: #ff4500;
  --accent-soft: rgba(255, 107, 0, 0.16);
  --bg-top:      #0f0f0f;
  --bg:          #0a0a0a;
  --surface:     #161616;
  --surface-2:   #1c1c1c;
  --raised:      #252525;
  --line:        rgba(255, 255, 255, 0.08);
  --text:        #ffffff;
  --text-dim:    #b3b3b3;
  --text-3:      #8c8c8c;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px;
  --radius:      12px;
  --topbar-h:    56px;
  --panel-w:     320px;
}

* { box-sizing: border-box; }

/* Les classes ci-dessous posent display: flex/grid, ce qui bat la règle [hidden]
   du navigateur. Sans ce !important, #shell, #card et #gate resteraient affichés. */
[hidden] { display: none !important; }

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700 900; font-display: swap; src: url("fonts/Inter-Bold.ttf") format("truetype"); }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

button, input, select { font: inherit; color: inherit; }

.brand { font-weight: 800; letter-spacing: -0.02em; }
.brand span { color: var(--accent); }
.brand.big { font-size: 2.4rem; }

/* ---------- Porte d'entrée ---------- */
.gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 0%, var(--bg-top), var(--bg) 60%);
  padding: 24px;
}
.gate-card {
  width: min(420px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: grid; gap: 14px;
}
.gate-card h1 { margin: 0; font-size: 1.9rem; }
.gate-card p { margin: 0; color: var(--text-dim); }
.gate-card input, .gate-card button {
  padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); width: 100%;
}
.gate-card button {
  background: var(--accent); color: #fff; border: 0; font-weight: 700; cursor: pointer;
}
.gate-card button:hover { background: #ff8c38; }
.gate-card button:disabled { opacity: .5; cursor: not-allowed; }
.hint { font-size: .82rem; }
.hint code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.error { color: #ff6b6b; }

/* ---------- Zone 1 : barre du haut ---------- */
#shell { height: 100%; display: flex; flex-direction: column; }

.topbar {
  flex: 0 0 var(--topbar-h); height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; background: var(--bg-top);
  border-bottom: 1px solid var(--line); z-index: 5;
}
.tabs { display: flex; gap: 2px; }
.tab {
  background: none; border: 0; padding: 8px 13px; border-radius: 7px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
#search {
  flex: 1; min-width: 120px; max-width: 520px; margin-left: auto;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
}
#search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.icon-btn {
  background: none; border: 0; color: var(--text-dim);
  font-size: 1.1rem; padding: 7px 9px; border-radius: 7px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.is-on { color: var(--accent); }

/* ---------- Mise en page ---------- */
/* flex: 1 plutôt qu'un calc() sur un parent de hauteur indéfinie, et min-height: 0
   partout, sans quoi un enfant en overflow refuse de se réduire sous sa taille de
   contenu et pousse la liste hors de l'écran. */
.body { flex: 1; min-height: 0; display: flex; }

/* ---------- Zone 2 : panneau ---------- */
.panel {
  width: var(--panel-w); flex: 0 0 var(--panel-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--line);
}
.panel.is-hidden { display: none; }
.panel-head { padding: 10px; display: grid; gap: 7px; border-bottom: 1px solid var(--line); }
#group {
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); width: 100%;
}
.count { color: var(--text-dim); font-size: .82rem; }
.switch {
  display: flex; align-items: center; gap: 7px;
  color: var(--text-dim); font-size: .84rem; cursor: pointer;
}
.switch input { accent-color: var(--accent); }
.list li.is-dead { opacity: .45; }
.list li.is-dead .sub { color: #ff6b6b; }
.list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.list li:hover { background: var(--surface-2); }
.list li.is-playing { background: var(--accent-soft); color: var(--accent); }
.list img {
  width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px;
  background: var(--bg); border-radius: 5px;
}
.list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .sub { color: var(--text-dim); font-size: .78rem; }
.more {
  margin: 8px; padding: 9px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
}

/* ---------- Zone 3 : scène ---------- */
.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.video-wrap { position: relative; flex: 1; background: #000; min-height: 0; }
#video { width: 100%; height: 100%; display: block; background: #000; }
.placeholder {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; gap: 8px; color: var(--text-dim);
  background: radial-gradient(circle at 50% 35%, var(--bg-top), #000 70%);
}
.playbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-top); border-top: 1px solid var(--line);
}
.now { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }

.card {
  display: flex; gap: 14px; padding: 14px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.card img { width: 72px; height: 108px; object-fit: cover; border-radius: 7px; background: var(--bg); }
.card-text { flex: 1; min-width: 0; }
.card h2 { margin: 0 0 4px; font-size: 1.1rem; }
.meta { margin: 0 0 9px; color: var(--text-dim); font-size: .87rem; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button {
  padding: 7px 13px; border-radius: 7px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
}
.actions button.primary { background: var(--accent); color: #fff; border: 0; font-weight: 650; }

/* ---------- Message éphémère ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: 999px; z-index: 20;
}

/* ---------- Petits écrans : le panneau passe au-dessus ---------- */
@media (max-width: 760px) {
  :root { --panel-w: 100%; }
  #shell { height: auto; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .body { flex: none; min-height: 0; flex-direction: column; }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: 45vh; }
  .video-wrap { aspect-ratio: 16 / 9; flex: none; }
  #search { max-width: none; }
}

/* ---------- Sélecteur de catégories : groupes repliables, recherche, épinglées, récentes ---------- */
.picker { position: relative; }
.picker-btn {
  width: 100%; text-align: left; padding: 8px 28px 8px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
}
.picker-btn::after { content: "▾"; position: absolute; right: 10px; color: var(--text-dim); }
.picker-pop {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 8px; display: grid; gap: 6px;
}
.picker-pop input {
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg);
}
.picker-tree { max-height: 62vh; overflow-y: auto; }
.pk-head, .pk-leaf {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px;
  cursor: pointer; color: var(--text);
}
.pk-head { color: var(--text-dim); font-weight: 650; font-size: .86rem; }
.pk-head::before { content: "▸"; font-size: .7rem; width: 10px; transition: transform .12s; }
.pk-head.is-open::before { transform: rotate(90deg); }
.pk-head:hover, .pk-leaf:hover { background: var(--surface-2); }
.pk-leaf { font-size: .88rem; }
.pk-leaf.is-child { padding-left: 26px; }
.pk-leaf.is-current { background: var(--accent-soft); color: var(--accent); }
.pk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-n { color: var(--text-dim); font-size: .76rem; }
.pk-pin { background: none; border: 0; color: var(--text-dim); cursor: pointer; opacity: 0; padding: 0 4px; }
.pk-leaf:hover .pk-pin, .pk-pin.is-on { opacity: 1; }
.pk-pin.is-on { color: var(--accent); }
.pk-body[hidden] { display: none; }

/* =====================================================================
   Vues : « page » (accueil, films, séries), « split » (direct, reprise, favoris), « watch »
   ===================================================================== */
.page { scrollbar-color: #3a3a3a transparent; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
#body[data-view="split"] .page { display: none; }
#body[data-view="page"] .panel, #body[data-view="page"] .stage { display: none; }
#body[data-view="watch"] .panel, #body[data-view="watch"] .page { display: none; }
.back { font-size: 1.3rem; }

/* ---------- Bannière ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(360px, 52vh, 520px); padding: 48px clamp(20px, 4vw, 56px) 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.hero::before {                       /* l'affiche, floue, sert de décor */
  content: ""; position: absolute; inset: -40px; z-index: -2;
  background: var(--poster) center / cover; filter: blur(46px) saturate(1.2); opacity: .55;
  transform: scale(1.1);
}
.hero::after {                        /* fondu vers le fond de page, en bas et à gauche */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.2) 100%),
              linear-gradient(0deg, var(--bg) 0%, transparent 38%);
}
.hero-text { max-width: 620px; display: grid; gap: 12px; justify-items: start; }
.badge {
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 6px;
}
.hero h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.hero-meta { color: var(--text-dim); font-weight: 600; }
.hero-plot {
  margin: 0; color: var(--text-dim); max-width: 56ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.btn {
  padding: 11px 20px; border-radius: var(--r-sm); border: 0; cursor: pointer; font-weight: 650;
  background: rgba(255,255,255,.14); color: #fff; transition: background .2s, transform .2s;
}
.btn:hover { background: rgba(255,255,255,.24); }
.btn.primary { background: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn:focus-visible, .pc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-poster {
  flex: 0 0 auto; width: clamp(150px, 16vw, 224px); aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.6); background: var(--surface-2);
}
.dots { position: absolute; left: clamp(20px, 4vw, 56px); bottom: 20px; display: flex; gap: 8px; }
.dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.35); transition: width .28s, background .28s;
}
.dots button.is-on { width: 24px; background: var(--accent); }

/* ---------- Rangées ---------- */
.row { padding: 8px 0 12px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 clamp(20px, 4vw, 56px); }
.row-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.row-head a { color: var(--text-dim); font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.row-head a:hover { color: #fff; }
.rail {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 14px clamp(20px, 4vw, 56px) 18px; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent;
  scroll-padding-inline: clamp(20px, 4vw, 56px);
}

/* ---------- Carte d'affiche ---------- */
.pc {
  position: relative; flex: 0 0 160px; width: 160px; scroll-snap-align: start;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit;
}
.pc-art {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-sm); overflow: hidden;
  background: var(--g, linear-gradient(135deg, #2a2a2a, #161616));
  transition: transform .2s, box-shadow .2s;
}
.pc:hover .pc-art, .pc:focus-visible .pc-art { transform: scale(1.04); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.pc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-fallback {                         /* pas d'affiche : le titre sur un dégradé */
  position: absolute; inset: 0; display: grid; place-items: end start; padding: 10px;
  font-weight: 800; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.pc .badge { position: absolute; top: 8px; left: 8px; }
.pc-title { margin-top: 8px; font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sub { color: var(--text-3); font-size: .76rem; }
.pc.wide { flex-basis: 288px; width: 288px; }
.pc.wide .pc-art { aspect-ratio: 16 / 9; }
.pc.wide .pc-art img { object-position: center 25%; }
.bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.25); }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.skeleton .pc-art { animation: shimmer 1.4s infinite linear; background: linear-gradient(90deg, #161616, #222, #161616) 0 0 / 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Grille d'affiches (films, séries) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(20px, 4vw, 56px); background: linear-gradient(var(--bg) 70%, transparent);
}
.toolbar .picker { width: min(360px, 100%); }
.toolbar .count { white-space: nowrap; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 12px;
  padding: 6px clamp(20px, 4vw, 56px) 24px;
}
.grid .pc { width: auto; flex: none; }
.page .more { display: block; margin: 8px auto 40px; padding: 11px 28px; }
.empty { padding: 40px clamp(20px, 4vw, 56px); color: var(--text-dim); }

/* ---------- Série : saisons et épisodes ---------- */
.show { padding: 24px clamp(20px, 4vw, 56px) 48px; display: grid; gap: 18px; max-width: 980px; }
.show-head { display: flex; gap: 20px; align-items: flex-start; }
.show-head img { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
.show h1 { margin: 0 0 6px; font-size: 1.8rem; }
.season h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--text-dim); }
.ep {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; text-align: left; color: inherit;
}
.ep:hover { background: var(--surface-2); }
.ep b { color: var(--accent); min-width: 3.4em; }
.ep .seen { margin-left: auto; color: var(--text-3); font-size: .8rem; }

/* ---------- Fiche (Plus d'infos) ---------- */
.info { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); padding: 0; width: min(720px, 94vw); }
.info::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.info-body { display: flex; gap: 22px; padding: 24px; }
.info-body img { width: 180px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); flex: 0 0 auto; }
.info h2 { margin: 0 0 6px; font-size: 1.6rem; }
.info-text p { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .pc-art, .btn, .dots button { transition: none; }
  .skeleton .pc-art { animation: none; }
  .page { scroll-behavior: auto; }
}
@media (max-width: 760px) {
  .hero { flex-direction: column-reverse; align-items: flex-start; padding-top: 28px; }
  .hero-poster { width: 120px; }
  .info-body { flex-direction: column; }
  #body[data-view="page"] { display: block; }
}

/* =====================================================================
   Thème clair — activé par html[data-theme="light"]
   (détection auto via prefers-color-scheme gérée dans index.html)
   ===================================================================== */
:root[data-theme="light"] {
  --bg-top:    #e4e4e4;
  --bg:        #f3f3f3;
  --surface:   #ffffff;
  --surface-2: #ebebeb;
  --raised:    #e2e2e2;
  --line:      rgba(0, 0, 0, 0.10);
  --text:      #1a1a1a;
  --text-dim:  #555555;
  --text-3:    #888888;
}

:root[data-theme="light"] .hero::after {
  background:
    linear-gradient(90deg, rgba(243,243,243,.94) 0%, rgba(243,243,243,.55) 55%, rgba(243,243,243,.15) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 38%);
}

:root[data-theme="light"] .placeholder {
  background: radial-gradient(circle at 50% 35%, var(--bg-top), var(--bg) 70%);
}

:root[data-theme="light"] .page  { scrollbar-color: #b8b8b8 transparent; }
:root[data-theme="light"] .rail  { scrollbar-color: #b8b8b8 transparent; }

:root[data-theme="light"] .skeleton .pc-art {
  background: linear-gradient(90deg, #e8e8e8, #d2d2d2, #e8e8e8) 0 0 / 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

:root[data-theme="light"] .dots button         { background: rgba(0,0,0,.22); }
:root[data-theme="light"] .dots button.is-on   { background: var(--accent); }

:root[data-theme="light"] .btn                 { background: rgba(0,0,0,.09); color: var(--text); }
:root[data-theme="light"] .btn:hover           { background: rgba(0,0,0,.16); }
:root[data-theme="light"] .btn.primary         { background: var(--accent); color: #fff; }
:root[data-theme="light"] .btn.primary:hover   { background: var(--accent-hover); }

:root[data-theme="light"] .error { color: #c0392b; }

:root[data-theme="light"] .picker-pop {
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* ---------- Modal de pré-chargement ---------- */
.premodal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); padding: 24px;
}
.premodal-card {
  width: min(460px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 32px; display: grid; gap: 18px; text-align: center;
}
.premodal-image { font-size: 4.8rem; line-height: 1; }
.premodal-image:empty { display: none; }
.premodal-card h2 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.premodal-card h2:empty { display: none; }
.premodal-card p { margin: 0; color: var(--text-dim); line-height: 1.6; }
.premodal-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-size: .92rem; color: var(--text);
}
.premodal-label input { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }
.premodal-card .btn { padding: 13px 24px; font-size: 1rem; }
.premodal-card .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Écran de chargement ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; place-content: center;
  gap: 18px; background: var(--bg); padding: 24px;
}
.preloader img { max-width: min(320px, 70vw); max-height: 40vh; object-fit: contain; }
.preloader p {
  margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--text);
  text-align: center; letter-spacing: -0.01em;
}

/* ---------- Porc Progression Protocol (ppp.js) ---------- */
.ppp-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.ppp-extra { display: grid; gap: 14px; text-align: left; }
.premodal-card #premodal-text { white-space: pre-line; }
.premodal-note {
  text-align: left; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86rem;
  background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 12px 14px;
}
.premodal-refuse {
  background: none; border: 0; color: var(--text-3); font: inherit; font-size: .8rem; cursor: pointer; padding: 6px;
}
.premodal-refuse:hover { color: var(--text); }
.premodal-refuse:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.ppp-countdown {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-2); font-size: 1.4rem;
}
.ppp-clock { font-family: ui-monospace, Menlo, monospace; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ppp-meter { display: grid; gap: 6px; }
.ppp-meter-head { display: flex; justify-content: space-between; align-items: baseline; }
.ppp-score { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-variant-numeric: tabular-nums; }
.ppp-segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ppp-segs i { height: 12px; border-radius: 3px; background: var(--raised); transition: background .5s; }
.ppp-segs i.on { background: var(--accent); }
.ppp-bar { position: relative; height: 12px; border-radius: 999px; background: var(--raised); margin: 8px 0; }
.ppp-bar-fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-deep), var(--accent), #ffb347);
  transition: width .7s ease-out;
}
.ppp-bar-pig { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1.3rem; line-height: 1; transition: left .7s ease-out; }

.ppp-hud { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(320px, calc(100vw - 32px)); display: grid; gap: 8px; }
.ppp-pill {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); font: inherit; font-size: .8rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ppp-pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ppp-pill-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppp-pill-clock { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--accent); }
.ppp-panel {
  display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.ppp-small { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-dim); }
.ppp-perk { color: var(--accent); }
.ppp-tip { font-style: italic; border-left: 2px solid var(--accent); padding-left: 10px; }

.ppp-popup {
  position: fixed; z-index: 120; left: 50%; bottom: 72px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); border: 2px solid var(--accent); border-radius: var(--r-lg);
  padding: 16px 40px 16px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: ppp-pop .4s ease-out;
}
.ppp-popup p { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--text-dim); }
.ppp-popup-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--text-3); font-size: 1.3rem; cursor: pointer; }
@keyframes ppp-pop { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (prefers-reduced-motion: reduce) {
  .ppp-popup { animation: none; }
  .ppp-segs i, .ppp-bar-fill, .ppp-bar-pig { transition: none; }
}