/* PaskaTok v0.2 — REAL VIDEO ENGINE */
.feed-player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#080604;display:none;z-index:1}
.feed-video.has-video .feed-player{display:block}
.feed-video.has-video .demo-scene{display:none}
.demo-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.demo-stamp{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:grid;place-items:center;gap:9px;opacity:.62;font:600 8px var(--font-mono);letter-spacing:.14em;color:var(--porcelain-dim)}
.demo-stamp img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.play-toggle{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:1px solid rgba(242,236,221,.22);background:rgba(12,10,6,.52);color:#fff;font-size:22px;display:none;place-items:center;backdrop-filter:blur(8px)}
.feed-video.paused .play-toggle{display:grid}
.video-progress{position:absolute;z-index:7;left:0;right:0;bottom:0;height:3px;background:rgba(242,236,221,.12)}
.video-progress i{display:block;height:100%;width:0;background:var(--hazard);transition:width .12s linear}
.icon-btn{position:relative}
.feed-side{gap:14px!important}
.feed-side .icon-circle{backdrop-filter:blur(8px)}
.feed-side .feed-count{min-height:10px}
.comments-sheet{max-height:72%;display:flex;flex-direction:column}
.comment-list{min-height:80px;max-height:330px;overflow:auto;padding:0 14px 8px}
.comment-row{padding:10px 4px;border-bottom:1px solid var(--sludge-line);font-size:12px;line-height:1.4}
.comment-row b{display:block;font:600 9px var(--font-mono);color:var(--hazard);margin-bottom:3px}
.comment-empty{padding:24px 8px;text-align:center;font:10px var(--font-mono);color:var(--porcelain-dim);line-height:1.55}
.comment-form{display:flex;gap:8px;padding:10px 12px 0;border-top:1px solid var(--sludge-line)}
.comment-form input{flex:1;min-width:0;border:1px solid var(--sludge-line);background:#171009;color:var(--porcelain);border-radius:12px;padding:10px 12px;font:11px var(--font-body);outline:none}
.comment-form button,.review-actions button,.camera-sourcebar button,.library-import{border:1px solid var(--sludge-line);background:var(--sludge-panel-2);color:var(--porcelain);border-radius:12px;padding:9px 11px;font:600 9px var(--font-mono);cursor:pointer}
.comment-form button,.review-actions .release-video{background:var(--hazard);color:#171009;border-color:var(--hazard)}
.camera-sourcebar{position:absolute;z-index:8;left:12px;right:12px;top:10px;display:flex;gap:6px}
.camera-sourcebar button{background:rgba(23,16,9,.68);backdrop-filter:blur(10px);padding:7px 9px}
.camera-sourcebar button:last-of-type{margin-left:auto}
.camera-status{position:absolute;z-index:5;left:16px;top:54px;font:8px var(--font-mono);letter-spacing:.08em;color:var(--moss);background:rgba(23,16,9,.58);padding:5px 7px;border-radius:8px}
.cam-preview{position:absolute!important;inset:0!important;overflow:hidden}
.cam-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#090705;transition:filter .2s ease;transform:scaleX(1)}
.cam-preview.filter-ultra video{filter:contrast(1.08) saturate(.88) sepia(.08)}
.cam-preview.filter-bidee video{filter:saturate(.72) hue-rotate(145deg) contrast(1.04)}
.cam-preview.filter-ruskea video{filter:sepia(.72) saturate(1.35) contrast(1.08)}
.cam-preview.front-camera video{transform:scaleX(-1)}
.camera-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;background:radial-gradient(circle at 50% 38%,#2d2112,#0a0806 72%);color:var(--porcelain-dim);font:9px var(--font-mono);z-index:1}
.camera-empty img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 14px 28px rgba(0,0,0,.48))}
.camera-empty b{font:12px var(--font-display);color:var(--porcelain)}
.camera-empty.hidden{display:none}
.cam-filters{position:absolute!important;right:0;top:78px;margin:0!important}
.flip-btn,.timer-chip,.filter-chip{border:0;color:inherit}
.capture-countdown{position:absolute;inset:0;z-index:18;display:none;place-items:center;background:rgba(10,8,6,.34);font:72px var(--font-display);color:var(--hazard);text-shadow:0 8px 30px #000}
.capture-countdown.show{display:grid}
.review-panel{position:absolute;inset:0;z-index:25;background:#0a0806;display:none;flex-direction:column}
.review-panel.open{display:flex}
.review-panel video{width:100%;flex:1;min-height:0;object-fit:contain;background:#000}
.review-copy{padding:9px 12px 5px;display:grid;gap:7px;background:var(--sludge-panel)}
.review-copy label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;font:8px var(--font-mono);color:var(--porcelain-dim)}
.review-copy input{border:1px solid var(--sludge-line);background:var(--sludge-panel-2);color:var(--porcelain);border-radius:9px;padding:8px;font:10px var(--font-body);outline:none}
.review-actions{display:flex;gap:8px;padding:8px 12px 14px;background:var(--sludge-panel)}
.review-actions button{flex:1}
.record-btn.recording{box-shadow:0 0 0 7px rgba(194,73,47,.18),0 0 32px rgba(194,73,47,.45)}
.record-btn.recording .inner{border-radius:12px!important;width:28px!important;height:28px!important}
.timer-chip.armed{box-shadow:0 0 0 2px var(--hazard);color:var(--hazard)}
.library-sheet{max-height:76%;display:flex;flex-direction:column}
.library-list{overflow:auto;padding:2px 10px 10px;display:grid;gap:8px}
.library-item{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:8px;border:1px solid var(--sludge-line);border-radius:13px;background:#1b1309}
.library-thumb{width:58px;height:76px;border-radius:9px;overflow:hidden;background:#080604;position:relative}
.library-thumb video{width:100%;height:100%;object-fit:cover}
.library-meta b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.library-meta span{display:block;font:8px var(--font-mono);color:var(--porcelain-dim);margin-top:4px}
.library-actions{display:grid;gap:5px}
.library-actions button{border:1px solid var(--sludge-line);background:transparent;color:var(--porcelain-dim);border-radius:8px;padding:6px;font:8px var(--font-mono)}
.library-actions button.danger{color:#e58b72}
.library-import{margin:0 10px 4px;width:calc(100% - 20px);padding:11px}
.library-empty{padding:28px 14px;text-align:center;font:10px var(--font-mono);color:var(--porcelain-dim);line-height:1.6}
.p-cell{border:0;color:inherit;padding:0;cursor:pointer}
.p-cell.local-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-cell.local-video::before{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62))}
.p-cell .local-badge{position:absolute;top:5px;left:5px;z-index:2;background:var(--hazard);color:#171009;border-radius:6px;padding:3px 5px;font:700 7px var(--font-mono)}
.studio-realnote{margin:0 18px 8px;padding:9px 10px;border-left:2px solid var(--moss);background:rgba(142,162,60,.07);font:9px var(--font-mono);color:var(--porcelain-dim);line-height:1.45}
@media(max-width:520px){
  .camera-sourcebar{top:max(8px,env(safe-area-inset-top))}
  .cam-filters{top:86px}
  .feed-side{bottom:calc(112px + env(safe-area-inset-bottom))!important}
  .feed-bottom{bottom:calc(22px + env(safe-area-inset-bottom))!important}
  .comments-sheet,.library-sheet{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}


/* v0.2.1 lighter sludge pass */
.feed-player{background:#1c130a;}
.comment-form input{background:rgba(43,29,15,.96);}
.comment-form button,.review-actions button,.camera-sourcebar button,.library-import{border-color:rgba(255,255,255,.08);}
.library-item{background:rgba(58,40,22,.9);}
.review-panel{background:#24180d;}
.camera-empty{background:radial-gradient(circle at 50% 38%,#6d4a26,#24170c 72%);}
.feed-video.scene-0{background:radial-gradient(ellipse at 30% 20%,rgba(154,168,67,.32),transparent 55%),radial-gradient(ellipse at 72% 78%,rgba(210,138,76,.32),transparent 56%),repeating-linear-gradient(115deg,#5f4021 0 2px,#45301a 2px 40px);}
.feed-video.scene-1{background:radial-gradient(circle at 62% 30%,rgba(104,147,139,.36),transparent 36%),linear-gradient(150deg,#20302b,#4a2e18 48%,#1e150b);}
.feed-video.scene-2{background:linear-gradient(180deg,rgba(239,196,67,.09),transparent 35%),repeating-radial-gradient(circle at 60% 50%,#49331c 0 9px,#2f2113 10px 26px);}
.feed-video.scene-3{background:radial-gradient(circle at 30% 70%,rgba(210,100,71,.24),transparent 40%),linear-gradient(135deg,#2f1c12,#5b371f,#252013);}
.sound-item .si-thumb{box-shadow:0 8px 18px rgba(0,0,0,.18);}
.studio-realnote{background:rgba(154,168,67,.08);}
@media(max-width:520px){
  .camera-status{top:60px;}
  .story .sring{width:54px;height:54px;}
}


/* =========================================================
   v0.2.2 — CAMERA RESCUE + PROFILE POLISH
   Targeted overrides only. No global sludge avalanche.
   ========================================================= */

/* Feed: keep the live badge from sitting on top of the tabs. */
#view-feed .feed-top{
  min-height:44px;
  align-items:flex-start;
  padding-top:10px;
}
#view-feed .live-pill{
  top:52px;
  left:14px;
  max-width:188px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
#view-feed .feed-more{
  top:52px;
  right:12px;
}
#view-feed .feed-side{
  right:10px;
  bottom:122px;
  gap:13px!important;
}
#view-feed .feed-side .icon-circle{
  width:44px;
  height:44px;
  font-size:18px;
  background:rgba(62,42,23,.60);
  border-color:rgba(250,244,231,.20);
}
#view-feed .feed-side .lbl{font-size:8px;}
#view-feed .feed-side .feed-count{font-size:7.7px;}
#view-feed .feed-bottom{
  left:18px;
  right:78px;
}
#view-feed .sound-row{font-size:9.6px;}
#view-feed .tags{font-size:10.5px;}

/* Search: cleaner horizontal scrollers and denser cards. */
#view-search .challenge-row{
  gap:10px;
  padding-right:16px;
  scrollbar-width:none;
  scroll-padding-inline:16px;
}
#view-search .challenge-row::-webkit-scrollbar{display:none;}
#view-search .challenge-card{
  width:132px;
  height:96px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}
#view-search .sound-list{padding-bottom:2px;}
#view-search .sound-item{padding:11px 0;}

/* Inbox: cards read as messages instead of loose rows floating in sludge. */
#view-inbox .dm-list{
  gap:7px;
  padding:0 12px 24px;
}
#view-inbox .dm-item{
  border:1px solid rgba(255,255,255,.045);
  background:rgba(52,35,18,.20);
  padding:11px 12px;
}
#view-inbox .dm-avatar{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.12);
}
#view-inbox .story-rail{
  padding-left:18px;
  padding-right:18px;
  scrollbar-width:none;
}
#view-inbox .story-rail::-webkit-scrollbar{display:none;}

/* Profile: stop the lower half from looking like three empty sewer shafts. */
#view-profile .profile-top{
  padding:26px 18px 18px;
  background:
    radial-gradient(circle at 50% 15%,rgba(239,196,67,.08),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 72%);
}
#view-profile .profile-logo{
  width:104px;
  height:104px;
  border-color:rgba(239,196,67,.24);
  background:radial-gradient(circle at 38% 25%,rgba(239,196,67,.20),rgba(154,168,67,.07));
}
#view-profile .handle{font-size:17px;margin-top:12px;}
#view-profile .bio{font-size:11.5px;max-width:310px;}
#view-profile .stat-row{
  width:100%;
  justify-content:space-around;
  gap:8px;
  margin-top:18px;
}
#view-profile .stat{min-width:86px;}
#view-profile .stat .n{font-size:17px;}
#view-profile .stat .l{font-size:7.8px;line-height:1.35;}
#view-profile .studio-link{
  margin-top:18px;
  min-width:220px;
  justify-content:center;
  background:rgba(62,42,23,.42);
  border-color:rgba(239,196,67,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
#view-profile .ptabs{
  position:sticky;
  top:0;
  overflow-x:auto;
  scrollbar-width:none;
  justify-content:flex-start;
  border-color:rgba(255,255,255,.07);
}
#view-profile .ptabs::-webkit-scrollbar{display:none;}
#view-profile .ptabs span{
  flex:0 0 25%;
  min-width:94px;
  white-space:normal;
  line-height:1.25;
}
#view-profile .p-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  padding:10px 10px 18px;
}
#view-profile .p-cell{
  aspect-ratio:9/13;
  min-width:0;
  background:linear-gradient(160deg,#60431f,#25180d);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
#view-profile .p-cell:not(.local-video)::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.92;
  background:
    radial-gradient(circle at 50% 36%,rgba(239,196,67,.18),transparent 42%),
    url('/assets/brand/paskatok-logo.png') center 40%/46% auto no-repeat,
    linear-gradient(160deg,#665024,#24170c);
}
#view-profile .p-cell:nth-child(2):not(.local-video)::before{
  background:
    radial-gradient(circle at 50% 36%,rgba(104,147,139,.20),transparent 42%),
    url('/assets/brand/tuoreet-tortut-live.png') center 40%/48% auto no-repeat,
    linear-gradient(160deg,#3f604d,#20170d);
}
#view-profile .p-cell:nth-child(3):not(.local-video)::before{
  background:
    radial-gradient(circle at 50% 36%,rgba(210,138,76,.18),transparent 42%),
    url('/assets/brand/suolikanava-studio.png') center 40%/50% auto no-repeat,
    linear-gradient(160deg,#4d321c,#20150c);
}
#view-profile .p-cell::after{
  z-index:3;
  left:9px;
  bottom:8px;
  font-size:8.5px;
  color:var(--porcelain);
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}

/* Camera rescue: every control has one surface, one rhythm, no white browser-default tiles. */
#view-camera{
  overflow:hidden;
  background:#1d140b;
}
#view-camera .cam-preview{
  inset:0!important;
  background:#171009;
}
#view-camera .cam-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 64%,rgba(0,0,0,.36)),
    radial-gradient(circle at 50% 48%,transparent 45%,rgba(43,29,15,.15));
}
#view-camera .camera-sourcebar{
  left:12px;
  right:12px;
  top:12px;
  gap:7px;
  align-items:center;
  z-index:12;
}
#view-camera .camera-sourcebar button{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(250,244,231,.14);
  background:rgba(43,29,15,.72);
  color:var(--porcelain);
  border-radius:999px;
  padding:9px 12px;
  min-height:38px;
  font:600 9px var(--font-mono);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
#view-camera .camera-sourcebar button:last-of-type{
  margin-left:auto;
}
#view-camera .camera-status{
  left:14px;
  top:62px;
  z-index:12;
  color:#c8d27b;
  background:rgba(43,29,15,.70);
  border:1px solid rgba(154,168,67,.18);
  border-radius:999px;
  padding:7px 10px;
  font-size:7.8px;
}
#view-camera .cam-filters{
  right:12px!important;
  top:108px!important;
  margin:0!important;
  gap:9px!important;
  width:68px;
  align-items:center;
  z-index:12;
}
#view-camera .flip-btn,
#view-camera .timer-chip{
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(250,244,231,.15);
  background:rgba(43,29,15,.66);
  color:var(--porcelain);
  display:grid;
  place-items:center;
  padding:0;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
}
#view-camera .filter-chip{
  appearance:none;
  -webkit-appearance:none;
  width:68px;
  min-height:76px;
  padding:7px 5px 6px;
  border-radius:16px;
  border:1px solid rgba(250,244,231,.12);
  background:rgba(43,29,15,.64);
  color:var(--porcelain-dim);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
}
#view-camera .filter-chip .sw{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(250,244,231,.15);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
#view-camera .filter-chip span{
  width:58px;
  min-height:18px;
  font:7px/1.18 var(--font-mono);
  color:var(--porcelain-dim);
}
#view-camera .filter-chip.active{
  background:rgba(82,56,29,.78);
  border-color:rgba(239,196,67,.55);
}
#view-camera .filter-chip.active span{color:var(--hazard);}
#view-camera .filter-chip.active .sw{
  box-shadow:0 0 0 2px var(--hazard),0 8px 18px rgba(0,0,0,.25);
}
#view-camera .cam-bottom{
  left:14px;
  right:14px;
  bottom:20px;
  z-index:12;
  gap:12px;
  padding:14px 12px 8px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(43,29,15,.02),rgba(43,29,15,.38));
}
#view-camera .duration-row{
  width:100%;
  justify-content:center;
  gap:18px;
  font-size:9.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
#view-camera .duration-row span{
  padding:5px 2px;
  white-space:nowrap;
}
#view-camera .record-btn{
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(43,29,15,.32);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.28);
}
#view-camera .record-btn .inner{
  width:54px;
  height:54px;
  background:#df7452;
}
#view-camera .go-label{
  font-size:8.5px;
  color:var(--porcelain);
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
#view-camera .camera-empty{
  background:radial-gradient(circle at 50% 38%,#6c4a28,#26180d 72%);
}

@media(max-width:390px){
  #view-camera .camera-sourcebar{left:9px;right:9px;gap:5px;}
  #view-camera .camera-sourcebar button{padding:8px 10px;font-size:8px;}
  #view-camera .cam-filters{right:8px!important;width:62px;}
  #view-camera .filter-chip{width:62px;min-height:70px;padding:6px 4px;}
  #view-camera .filter-chip .sw{width:38px;height:38px;}
  #view-camera .filter-chip span{width:52px;font-size:6.5px;}
  #view-camera .duration-row{gap:10px;font-size:8.8px;}
  #view-camera .cam-bottom{left:8px;right:8px;bottom:14px;}
  #view-profile .ptabs span{min-width:86px;font-size:8.3px;}
}