:root{
  --bg:#120814;
  --card:#1c1024;
  --ink:#fff7fb;
  --muted:#cbb8d2;
  --pink:#ff3d86;
  --pink-2:#ff7ab0;
  --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#120814;color:var(--ink);font-family:"Noto Sans JP",system-ui,sans-serif}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}
.phone{
  position:relative;
  width:100%;
  height:100%;
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:8px 0 8px;
  background:#120814;
}
.stage{flex:1;min-height:0}
.reel{
  position:absolute;inset:0;z-index:0;
  padding:0 12px;
  overflow:hidden;
  pointer-events:none;
}
.reel-track{display:flex;flex-direction:column;gap:10px;will-change:transform}
.reel-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:var(--row-h,220px);flex-shrink:0}
.reel-card{position:relative;height:100%;min-width:0}
.reel-card img{
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 12%;
  border-radius:18px;
}
.reel-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
}
.reel-cap{position:absolute;z-index:1;left:10px;right:34px;bottom:8px}
.reel-cap strong{display:block;font-size:14px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.reel-cap span{display:block;margin-top:2px;font-size:12px;font-weight:700;color:#f6e7ef}
.reel-card i{
  position:absolute;z-index:2;right:10px;bottom:-12px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,8,16,.72);color:var(--pink);font-style:normal;font-size:13px;
}
.top,.inbox,.sheet{position:relative;z-index:1;flex-shrink:0}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 8px;padding:0 12px 2px;background:transparent;
}
.brand{display:flex;align-items:center;gap:7px;font-weight:900;font-size:18px;letter-spacing:.01em;flex-shrink:0}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,61,134,.2)}
.online{
  display:flex;align-items:center;gap:6px;min-width:0;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700;color:#efe4f4;
}
.online span{white-space:nowrap}
.online b{width:7px;height:7px;border-radius:50%;background:#3dde8a;box-shadow:0 0 0 0 rgba(61,222,138,.7);animation:pulse 1.6s infinite}
.online em{font-style:normal;color:#fff}
@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(61,222,138,0)}}
.inbox{display:flex;flex-direction:column;gap:8px;margin:0 12px}
.chat{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;border-radius:16px;
  background:rgba(24,12,30,.9);border:1px solid var(--line);
}
.ava{position:relative;width:36px;height:36px;flex-shrink:0}
.ava img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.ava i{position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;background:#3dde8a;border:2px solid #1a1022}
.chat b{display:block;font-size:13px}
.chat small{font-weight:700;color:var(--muted)}
.chat em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:#f6dce8}
.sheet{
  position:relative;margin:8px 12px 0;padding:14px 12px 10px;border-radius:22px;overflow:hidden;
  background:#1a0c20;
  border:1px solid rgba(255,61,134,.28);
}
.pill{
  width:max-content;margin:0 auto 8px;padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  font-size:12px;font-weight:700;
}
.sheet h1{text-align:center;font-size:22px;line-height:1.25;font-weight:900}
.sheet h1 span{color:var(--pink)}
.sub{margin:6px 0 10px;text-align:center;color:var(--muted);font-size:12px;font-weight:700}
.live-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px}
.live-head strong{display:flex;align-items:center;gap:5px;color:var(--pink)}
.live-head strong i{width:6px;height:6px;border-radius:50%;background:var(--pink)}
.live-head span{color:var(--muted);font-weight:700}
.live-head em{margin-left:auto;font-style:normal;color:#8d7a92;font-weight:700}
.lives{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.lives::-webkit-scrollbar{display:none}
.live{
  flex:0 0 68px;position:relative;height:78px;border-radius:12px;overflow:hidden;background:#000;
}
.live img{width:100%;height:100%;object-fit:cover}
.live::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.75))}
.live .tag{
  position:absolute;z-index:1;top:4px;left:4px;padding:1px 5px;border-radius:4px;
  background:#ff2d55;font-size:8px;font-weight:900;letter-spacing:.04em;
}
.live b{position:absolute;z-index:1;left:4px;right:3px;bottom:11px;font-size:9px;line-height:1.1}
.live small{position:absolute;z-index:1;left:4px;bottom:2px;font-size:8px;color:#ffd0e2}
.near{margin:6px 0;text-align:center;font-size:11px;font-weight:700;color:#f3d5e4}
.near b{color:#fff}
.apk{
  width:100%;height:46px;border-radius:999px;
  background:linear-gradient(90deg,#ff4d8d,#ff2d72);
  font-size:15px;font-weight:900;
  box-shadow:0 8px 18px rgba(255,45,114,.35);
}
.trust{
  list-style:none;display:flex;flex-wrap:nowrap;justify-content:center;gap:4px 8px;
  margin-top:6px;color:#b9a4c2;font-size:10px;font-weight:700;
}
.trust li{display:flex;align-items:center;gap:3px}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:#3dde8a}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#fff;color:#1a0b14;font-weight:800;font-size:13px;
  padding:10px 14px;border-radius:12px;z-index:5;
}