:root{
  --good:#16a34a;
  --bad:#e0384a;
  --accent:#ff2d78;
  --footer-h:calc(38px + env(safe-area-inset-bottom,0px));
}
*{ box-sizing:border-box }
html, body{
  margin:0; padding:0; height:100%;
  background:#000; color:#fff;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  overscroll-behavior-y:contain;
}

#feed{
  height:100vh; height:100dvh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
}
.card{
  position:relative;
  height:100vh; height:100dvh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  overflow:hidden;
}
.card img{
  display:block;
  pointer-events:none;
  user-select:none; -webkit-user-select:none;
}
.card-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(35px) brightness(.55);
  transform:scale(1.2);
}
.card-fg{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
}
.card-cover{
  width:100%; height:100%;
  object-fit:cover;
}

.top-bar{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; justify-content:center; align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 24px;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  background:linear-gradient(rgba(0,0,0,.55), transparent);
  pointer-events:none;
}

.rate-actions{
  position:absolute; right:12px; bottom:0; z-index:4;
  display:flex; flex-direction:column; align-items:flex-end; gap:18px;
  padding:0 0 calc(var(--footer-h) + 24px);
}
.rate-good-row{ display:flex; align-items:center; gap:8px }
.rate-pct-badge{
  padding:8px 14px; border-radius:999px; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  font-size:20px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
  transition:transform .15s ease;
}
.rate-pct-badge.flash{ animation:pctFlash .5s ease }
@keyframes pctFlash{
  0%{ transform:scale(1.35) }
  100%{ transform:scale(1) }
}
.rate-btn{
  position:relative;
  width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
  font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.rate-btn.good{ font-size:32px }
.rate-btn:active{ transform:scale(.9) }
.rate-btn.active{
  border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35);
  animation:rateBtnPop .45s cubic-bezier(.2,1.4,.4,1);
}
.rate-btn.good.active{ border-color:#ff6fa3; box-shadow:0 0 0 4px rgba(255,111,163,.35); color:#ff3d68 }
.rate-btn.bad.active{ border-color:#8fa6bf; box-shadow:0 0 0 4px rgba(143,166,191,.35) }
.rate-btn.active::after{
  content:''; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid rgba(255,255,255,.8);
  animation:rateRipple .6s ease-out;
  pointer-events:none;
}
.rate-btn.good.active::after{ border-color:rgba(255,111,163,.85) }
.rate-btn.bad.active::after{ border-color:rgba(143,166,191,.85) }
@keyframes rateBtnPop{
  0%{ transform:scale(1) }
  35%{ transform:scale(1.35) }
  100%{ transform:scale(1.08) }
}
@keyframes rateRipple{
  0%{ transform:scale(1); opacity:1 }
  100%{ transform:scale(1.9); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .rate-btn.active{ animation:none }
  .rate-btn.active::after{ animation:none; display:none }
}
.rate-btn.dimmed{ opacity:.35 }
.rate-btn:disabled{ cursor:default }
.icon-mono{ filter:grayscale(1) brightness(0) invert(1); display:inline-flex }

.scroll-hint{
  position:absolute; top:50%; right:14px; transform:translateY(-50%); z-index:2;
  color:rgba(255,255,255,.55); font-size:22px; font-weight:900; line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none;
  animation:scrollBounce 1.6s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%, 100%{ transform:translateY(-50%) translateY(0); opacity:.55 }
  50%{ transform:translateY(-50%) translateY(8px); opacity:.2 }
}
@media (prefers-reduced-motion:reduce){ .scroll-hint{ animation:none } }

.boot{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:13px }

.footer-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around; align-items:center;
  height:var(--footer-h);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(10,10,14,.85); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-nav-item{
  display:flex; flex-direction:row; align-items:center; gap:4px;
  background:none; border:none; color:rgba(255,255,255,.5);
  font-size:9.5px; font-weight:700; line-height:1; cursor:pointer;
  font-family:inherit; text-decoration:none;
}
.footer-nav-item .footer-icon{
  font-size:14px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  height:1em; transform:translateY(-1px);
}
.footer-nav-item.active{ color:#fff }