html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#05040a;overscroll-behavior:none}
#app{position:fixed;inset:0;width:100%;height:100dvh;min-height:100svh}
canvas{display:block;touch-action:none}
#br-preboot{position:fixed;inset:0;z-index:139;display:grid;align-items:end;overflow:hidden;background:#05040a;color:#fff7e7;font-family:"Avenir Next","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;isolation:isolate}
#br-preboot:before{content:"";position:absolute;inset:0;z-index:-2;background:url("/share-card.jpg") 36% 45%/cover no-repeat;filter:saturate(1.06) contrast(1.04) brightness(.82);transform:scale(1.02)}
#br-preboot:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,4,10,.28),rgba(5,4,10,.12) 34%,rgba(5,4,10,.78) 72%,#05040a)}
#br-preboot .br-letterbox{position:absolute;left:0;right:0;height:clamp(16px,3.8vh,32px);background:#05040a;z-index:2;pointer-events:none}
#br-preboot .br-letterbox--top{top:0}
#br-preboot .br-letterbox--bot{bottom:0}
.v5-copy{position:relative;z-index:1;padding:28px 22px calc(28px + env(safe-area-inset-bottom,0px))}
.v5-kicker{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,247,231,.7)}
.v5-badge{display:none}
#br-preboot h1{margin:0 0 18px;max-width:12ch;font-size:clamp(42px,12vw,68px);font-weight:600;line-height:.82;letter-spacing:-.065em;text-transform:uppercase;text-shadow:0 2px 0 #1a0d14,0 16px 38px rgba(0,0,0,.45);text-wrap:balance}
#br-preboot h1 span{display:block;color:#e8578f}
#br-preboot p{margin:0 0 16px;max-width:30ch;color:rgba(255,247,231,.7);font:600 13px/1.45 system-ui}
.v5-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font:800 11px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,247,231,.72)}
.v5-row b:last-child{color:#fff7e7;font-variant-numeric:tabular-nums}
.v5-track{height:2px;overflow:hidden;background:rgba(255,247,231,.16)}
.v5-track i{display:block;width:100%;height:100%;background:#e8578f;transform-origin:left center;transform:scaleX(.08);will-change:transform;animation:v5-boot-fill 16s linear forwards}
@keyframes v5-boot-fill{from{transform:scaleX(.08)}to{transform:scaleX(.96)}}
#br-preboot small{display:block;margin-top:12px;color:rgba(255,247,231,.5);font:800 8px/1.3 system-ui;letter-spacing:.08em;text-transform:uppercase}
html[data-mobile-preboot="active"] body>.br-ocean-loader,html[data-mobile-preboot="active"] #br-ui-root .br-ocean-loader{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media(min-width:821px) and (pointer:fine){#br-preboot{display:none}}
@media(prefers-reduced-motion:reduce){.v5-track i{animation:none}}
