:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#111827;background:#f5f7fb;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:#f5f7fb}.site-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:#111827;color:white;z-index:40;min-height:68px;box-shadow:0 3px 16px #0002}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;letter-spacing:.08em;font-weight:600}.brand-logo{width:43px;height:43px;border-radius:11px;object-fit:cover;box-shadow:0 0 15px #f006}.menu-toggle{display:grid;gap:5px;width:46px;height:46px;padding:11px;background:#1f2937;border:1px solid #ffffff22}.menu-toggle span{display:block;height:2px;border-radius:2px;background:#fff}.menu-backdrop{position:fixed;inset:0;background:#0008;z-index:48}.mobile-menu{position:fixed;top:0;right:0;width:min(86vw,350px);height:100dvh;background:#fff;z-index:50;padding:18px;display:flex;flex-direction:column;gap:7px;box-shadow:-18px 0 40px #0003;transform:translateX(105%);transition:transform .2s ease}.mobile-menu.open{transform:translateX(0)}.menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.menu-brand{display:flex;align-items:center;gap:10px}.menu-brand img{width:48px;height:48px;border-radius:12px}.menu-brand strong{display:block;font-size:18px}.menu-brand small{color:#6b7280}.menu-close{font-size:32px;line-height:1;width:44px;height:44px;padding:0;background:#eef1f6;color:#111827}.menu-item{width:100%;text-align:left;background:#f3f4f6;color:#111827;padding:14px 15px;font-size:15px}.menu-item:active{background:#e5e7eb}.menu-spacer{flex:1}.danger-item{background:#fee2e2;color:#991b1b}main{max-width:760px;margin:auto;padding:16px}.card,.hero,.ranking-item{background:#fff;border-radius:18px;box-shadow:0 4px 18px #0000000d}.auth{max-width:460px;margin:7vh auto;padding:24px;text-align:center}.auth-logo{width:92px;height:92px;border-radius:22px;box-shadow:0 8px 30px #6d28d955;margin-bottom:8px}.auth input,.search input{width:100%;padding:14px;border:1px solid #d6dbe6;border-radius:12px;margin:7px 0;font-size:16px;text-align:left}button{border:0;border-radius:12px;padding:12px 16px;background:#111827;color:#fff;font-weight:700}.ghost{background:#eef1f6;color:#111827}.row{display:flex;gap:8px;margin-top:10px}.row>*{flex:1}.hero{padding:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.hero-title{display:flex;align-items:center;gap:12px;min-width:0}.hero-logo{width:55px;height:55px;border-radius:14px;flex:0 0 auto}.hero h1{margin:4px 0;font-size:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero p{margin:0;color:#6b7280}.section-title{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.section-title h2{font-size:19px}.live-dot{font-size:12px;font-weight:800;color:#ef4444}.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 14px}.tabs button{background:#e5e7eb;color:#111827}.tabs button.active{background:#111827;color:white}.search{margin-bottom:10px}.ranking{display:grid;gap:8px}.ranking-item{padding:14px;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}.rank{font-weight:800;font-size:20px}.name{font-weight:700}.tags{font-size:12px;color:#6b7280}.value{font-weight:800;text-align:right}.vip{color:#b7791f}.muted{color:#6b7280}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:10px;display:none;z-index:70}.mobile-section{margin-top:26px;padding-bottom:4px}.mobile-section h2{font-size:18px}.battle-summary{font-size:24px;font-weight:800;margin:8px 0 12px}.notice{margin:12px 0;padding:12px 14px;background:#eef6ff;border:1px solid #d9eaff;border-radius:14px;color:#334155;font-size:13px;line-height:1.6}.first{display:inline-block;margin-left:5px;padding:2px 7px;border-radius:999px;background:#dcfce7;color:#166534;font-size:11px;font-weight:800}.battle-row{grid-template-columns:48px 1fr auto}.battle-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e5e7eb;display:grid;place-items:center}.avatar-fallback{font-weight:800;color:#475569}.anchor-section{scroll-margin-top:84px}@media(min-width:680px){.tabs{grid-template-columns:repeat(4,1fr)}}

/* 言語の切り替え */
.lang-picker{display:flex;align-items:center;gap:8px;margin:12px 0 0}.lang-picker select{flex:1;min-height:40px;border-radius:10px;padding:6px 10px;font:inherit;background:rgba(127,127,127,.12);color:inherit;border:1px solid rgba(127,127,127,.35)}.menu-lang{padding:0 16px}

/* BGMプレイリスト */
.bgm-open{width:100%;margin-top:10px;padding:14px;border-radius:12px;border:0;background:#ff568c;color:#fff;font:inherit;font-weight:700}
.clip-links{display:grid;gap:8px}.bgm-open.bgm-second{background:transparent;color:#ff568c;border:2px solid #ff568c}

/* iPhone の時計・電池の下に重ならないように（ホーム画面に追加して全画面で開いたとき） */
.site-header{padding-top:calc(11px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));min-height:calc(68px + env(safe-area-inset-top))}.mobile-menu{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom))}main{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.menu-toggle{width:50px;height:50px}

/* つなぐコード */
.pair-box{margin-top:10px;padding-top:10px;border-top:1px solid rgba(127,127,127,.25)}.pair-row{display:flex;gap:8px;align-items:stretch}.pair-row input{flex:1;min-width:0;padding:12px;border-radius:12px;border:1px solid rgba(127,127,127,.4);font:inherit;font-size:18px;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:inherit}.pair-row .bgm-open{width:auto;margin:0;padding:12px 18px}
.menu-link{display:block;text-decoration:none;color:inherit}.terms-note{margin:12px 0 0;font-size:13px}.terms-note a{color:inherit;opacity:.75}
.clip-links[hidden],.pair-box[hidden]{display:none}

/* ログインしたときのアニメーション：Live Crew のアイコンが光りながら回って広がり、消える */
.lc-splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#3a1660 0,#120a24 45%,#05050b 80%);animation:lcSplashOut .55s ease 1.45s forwards;overflow:hidden}
.lc-splash img{grid-area:1/1;width:124px;height:124px;border-radius:30px;box-shadow:0 0 0 2px #ffffff22,0 0 50px #ff2d95cc,0 0 90px #25f4ee66;animation:lcIcon 1.5s cubic-bezier(.2,.8,.2,1) forwards}
.lc-splash .lc-ring{grid-area:1/1;width:124px;height:124px;border-radius:50%;border:3px solid #25f4ee;opacity:0;animation:lcRing 1.3s ease-out .25s forwards}
.lc-splash .lc-ring.r2{border-color:#ff2d95;animation-delay:.45s}
.lc-splash .lc-ring.r3{border-color:#ffffff;border-width:2px;animation-delay:.65s}
.lc-splash p{position:absolute;left:0;right:0;bottom:24%;margin:0;text-align:center;color:#fff;font-weight:800;font-size:18px;letter-spacing:.18em;opacity:0;text-shadow:0 0 18px #ff2d95;animation:lcText 1.1s ease .35s forwards}
@keyframes lcIcon{0%{transform:scale(.25) rotate(-35deg);opacity:0;filter:blur(8px)}40%{transform:scale(1.18) rotate(8deg);opacity:1;filter:none}62%{transform:scale(.96) rotate(0deg)}82%{transform:scale(1.02)}100%{transform:scale(1.9);opacity:0;filter:blur(3px)}}
@keyframes lcRing{0%{transform:scale(.6);opacity:.95}100%{transform:scale(3.4);opacity:0}}
@keyframes lcText{0%{opacity:0;transform:translateY(12px)}35%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes lcSplashOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){.lc-splash,.lc-splash *{animation-duration:.01s!important;animation-delay:0s!important}}
/* ログインしたあと、まだPCとつないでいないときの「PCとつなぐ」欄 */
#clip-section.lc-focus{border:2px solid #ff568c;box-shadow:0 0 0 4px #ff568c22,0 8px 30px #ff568c33}