:root {
  color-scheme: dark;
  --cyan: #55e8ff;
  --pink: #ff55c7;
  --amber: #ffcf76;
  --ink: #070a12;
  --glass: rgba(20, 30, 45, .52);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--ink); color: #f5f7fb; font-family: "Segoe UI", "Noto Sans SC", system-ui, sans-serif; }
button, a { font: inherit; }
.street-scene, .street-photo, .street-vignette, .rain-sheen { position: fixed; inset: 0; pointer-events: none; }
.street-scene { z-index: -4; background: #05070d; }
.street-photo { background-size: cover; background-position: center; filter: saturate(.82) contrast(1.08) brightness(.6); transform: scale(1.02); }
.street-vignette { background: radial-gradient(circle at 50% 48%, transparent 22%, rgba(2,5,12,.18) 58%, rgba(1,3,8,.9) 100%), linear-gradient(180deg, rgba(2,5,10,.52), transparent 28%, rgba(2,4,9,.48)); }
.rain-sheen { opacity: .35; background: linear-gradient(112deg, transparent 25%, rgba(105,210,255,.08) 43%, transparent 58%); }

.arcade-sign { position:relative; left:50%; width:min(640px,82vw); margin:22px 0 8px; padding:10px 28px 13px; transform:translateX(-50%); text-align:center; border:1px solid rgba(128,230,255,.6); border-radius:10px; background:rgba(5,11,20,.72); box-shadow:0 0 12px rgba(66,214,255,.38),inset 0 0 24px rgba(255,74,195,.08); backdrop-filter:blur(10px); letter-spacing:.16em; animation:signFlicker 8s infinite; }
.arcade-sign strong { display:block; color:#f7fcff; font-size:clamp(1.8rem,4vw,3.35rem); line-height:1; letter-spacing:.22em; text-indent:.22em; text-shadow:0 0 6px #fff,0 0 18px var(--cyan),0 0 36px rgba(85,232,255,.65); }
.sign-eyebrow { display:block; color:#a7f4ff; font-size:.68rem; text-indent:.16em; }

.entrance-layout { width:min(1460px,96vw); min-height:calc(100vh - 185px); margin:0 auto; display:grid; grid-template-columns:minmax(220px,280px) minmax(480px,760px) minmax(220px,280px); gap:clamp(14px,2vw,30px); align-items:center; justify-content:center; }
.info-board { position: relative; padding: 24px; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 18px 55px rgba(0,0,0,.45); backdrop-filter: blur(15px); }
.door-poster { position:absolute; z-index:7; right:5.5%; top:15%; width:34%; max-height:66%; overflow:hidden; padding:15px 16px; color:#201a17; background:linear-gradient(135deg,rgba(255,242,212,.95),rgba(221,199,161,.93)); border:1px solid rgba(91,66,45,.28); box-shadow:0 8px 25px rgba(0,0,0,.4); transform:rotate(1.5deg); }
.door-poster::after { content:""; position:absolute; inset:6px; border:1px dashed rgba(64,46,36,.25); pointer-events:none; }
.tape { position:absolute; top:-12px; width:64px; height:25px; background:rgba(222,211,180,.72); box-shadow:0 2px 5px rgba(0,0,0,.2); }
.tape-left { left:18px; transform:rotate(-7deg); }.tape-right { right:18px; transform:rotate(6deg); }
.board-kicker { margin:0; color:#9d283f; font-weight:900; font-size:.68rem; letter-spacing:.23em; }
.door-poster h2, .info-board h2 { margin:4px 0 17px; font-size:1.35rem; }
.door-poster h2{margin-bottom:9px;font-size:1.05rem}.door-poster .board-kicker{font-size:.55rem}.door-poster .poster-news{padding:7px 0}
.poster-news { padding:12px 0; border-top:1px solid rgba(47,35,29,.2); }
.poster-news time { color:#a33b4e; font-size:.62rem; font-weight:800; letter-spacing:.14em; }
.poster-news h3 { margin:4px 0; font-size:.95rem; }.poster-news p { margin:0; font-size:.78rem; line-height:1.55; color:#54463e; }
.ranking-teaser { margin-top:10px; padding:9px; border:2px solid rgba(118,45,65,.4); text-align:center; }
.ranking-teaser span, .ranking-teaser small { display:block; font-size:.6rem; letter-spacing:.14em; }.ranking-teaser strong { display:block; margin:3px 0; }

.door-zone { position:relative; display:flex; flex-direction:column; align-items:center; perspective:1000px; }
.open-status { position:absolute; z-index:9; top:22px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; background:rgba(3,9,14,.86); border:1px solid currentColor; font-weight:800; font-size:.76rem; letter-spacing:.18em; box-shadow:0 0 22px currentColor; }
.is-online { color:#67ffb0; }.is-maintenance { color:#ff6b76; }
.status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; animation:pulse 1.7s infinite; }
.door-frame { position:relative; width:min(720px, 100%); aspect-ratio:1.38/1; overflow:hidden; border:12px solid rgba(7,11,17,.92); border-top-width:18px; background:radial-gradient(circle at 42% 55%, rgba(76,221,255,.22), transparent 18%), radial-gradient(circle at 66% 45%, rgba(255,76,193,.2), transparent 21%), linear-gradient(rgba(7,10,18,.08),rgba(7,10,18,.16)), url('/static/assets/entrance-night-v1.webp') center/cover; box-shadow:0 22px 70px rgba(0,0,0,.72), 0 0 40px rgba(77,209,255,.11); }
.inside-glow { position:absolute; inset:0; background:linear-gradient(105deg, rgba(30,196,255,.16), rgba(255,69,190,.2), rgba(255,177,83,.12)); filter:blur(18px); animation:insideFlicker 4.8s steps(1) infinite; }
.cabinet-light { position:absolute; width:18%; height:28%; top:37%; border-radius:14px; filter:blur(12px); opacity:.55; animation:cabinetPulse 3s infinite alternate; }.light-one{left:23%;background:#29c9ff}.light-two{right:20%;background:#ff4cc9;animation-delay:-1.2s}
.inside-person { position:absolute; bottom:12%; width:8%; height:38%; border-radius:46% 46% 20% 20%; background:rgba(0,0,0,.7); filter:blur(9px); opacity:.58; }.person-one{left:45%}.person-two{right:27%;height:31%;opacity:.35}
.glass-door { position:absolute; z-index:4; top:0; bottom:0; width:50.3%; overflow:hidden; background:linear-gradient(115deg, rgba(190,220,238,.14), rgba(15,28,43,.56) 43%, rgba(166,210,224,.11)); border:1px solid rgba(197,231,244,.2); backdrop-filter:blur(12px) saturate(.65); transition:transform .95s cubic-bezier(.68,0,.2,1); }
.glass-left{left:0;transform-origin:left}.glass-right{right:0;transform-origin:right}
.is-near-door .glass-door{backdrop-filter:blur(7px) saturate(.78)}.is-near-door .inside-glow{opacity:1.18}
.glass-reflection { position:absolute; inset:-20%; background:linear-gradient(105deg, transparent 32%, rgba(200,238,255,.12) 45%, transparent 58%); }
.scratch { position:absolute; width:34%; height:1px; background:rgba(255,255,255,.16); transform:rotate(-17deg); }.scratch-a{left:16%;top:29%}.scratch-b{right:12%;bottom:24%;transform:rotate(11deg)}
.poster-residue { position:absolute; right:18%; top:25%; width:62px; height:84px; opacity:.25; border:2px dashed rgba(240,240,220,.5); transform:rotate(4deg); }
.door-handle { position:absolute; top:43%; width:13px; height:27%; border:3px solid #9fa8b0; border-radius:10px; background:linear-gradient(90deg,#4b535d,#c9d0d2,#505965); box-shadow:0 5px 12px #000,0 0 8px rgba(214,244,255,.28); }.handle-left{right:20px}.handle-right{left:20px}
.sticker { position:absolute; display:block; padding:7px; background:rgba(240,238,224,.78); color:#312d2c; text-align:center; font-size:.62rem; line-height:1.1; box-shadow:0 2px 6px rgba(0,0,0,.25); }.sticker b{font-size:.42rem}.no-smoking{left:8%;top:21%;transform:rotate(-3deg);color:#a92836}.hours{left:12%;top:61%;transform:rotate(2deg)}
.mcd-poster{position:absolute;z-index:2;left:10%;top:35%;display:flex;width:46%;aspect-ratio:1/1;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:#fff;background:linear-gradient(150deg,#d81625 0 68%,#b00916 68%);border:3px solid rgba(255,240,203,.78);box-shadow:0 5px 16px rgba(0,0,0,.38);text-align:center;transform:rotate(-1.8deg)}.mcd-poster::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,231,177,.35)}.mcd-mark{position:relative;z-index:1;color:#ffc72c;font-family:Arial Black,sans-serif;font-size:2rem;font-style:normal;line-height:.8;letter-spacing:-.2em;text-indent:-.2em;text-shadow:0 2px 0 rgba(108,0,8,.35)}.mcd-poster strong,.mcd-poster small{position:relative;z-index:1;display:block}.mcd-poster strong{margin-top:5px;font-size:.72rem}.mcd-poster small{margin-top:2px;color:#ffe6a7;font-size:.46rem;letter-spacing:.08em}.mcd-burger{position:relative;z-index:1;display:block;width:42px;height:18px;margin-top:8px;border-radius:15px 15px 4px 4px;background:#eeb94d;box-shadow:0 5px 0 #69301d,0 9px 0 #f3bb3f}.mcd-burger em{position:absolute;left:2px;right:2px;bottom:-4px;height:5px;background:#62a940;transform:skewX(-18deg)}
.enter-handle { position:absolute; z-index:8; left:50%; bottom:11%; transform:translateX(-50%); min-width:260px; display:flex; align-items:center; justify-content:center; gap:12px; padding:11px 18px; color:#f5fdff; border:1px solid rgba(114,235,255,.7); border-radius:8px; background:rgba(5,13,22,.88); box-shadow:0 0 18px rgba(73,220,255,.2); cursor:pointer; transition:.25s ease; }
.enter-handle:hover:not(:disabled),.enter-handle:focus-visible{transform:translateX(-50%) translateY(-3px);box-shadow:0 0 28px rgba(73,220,255,.65);border-color:#fff}.enter-handle:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.62}
.handle-icon{font-size:1.6rem;color:var(--cyan)}.handle-copy{text-align:left}.handle-copy b,.handle-copy small{display:block}.handle-copy b{font-size:.9rem;letter-spacing:.08em}.handle-copy small{margin-top:2px;color:#8fb5c2;font-size:.53rem;letter-spacing:.18em}
.door-lock{display:none;position:absolute;z-index:9;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-8deg);padding:7px 13px;color:#ff8690;border:3px solid #ff6876;font-weight:900;letter-spacing:.18em;background:rgba(30,4,8,.62)}
.is-closed .door-lock{display:block}.is-closed .inside-glow{filter:grayscale(1) blur(20px);opacity:.25}
.door-hint{margin:10px 0 0;color:rgba(225,237,244,.64);font-size:.68rem;letter-spacing:.06em;text-shadow:0 2px 5px #000}
.sound-wave { position:absolute; z-index:3; left:50%; bottom:3%; transform:translateX(-50%); display:flex; align-items:end; gap:4px; height:24px; opacity:.35; }.sound-wave i{display:block;width:2px;height:8px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:wave 1.2s ease-in-out infinite}.sound-wave i:nth-child(2n){animation-delay:-.4s}.sound-wave i:nth-child(3n){animation-delay:-.75s}

.info-board { color:#dcecf4; background:linear-gradient(155deg,rgba(9,18,29,.9),rgba(7,10,18,.78)); border-color:rgba(80,215,255,.3); }
.info-board::before{content:"";position:absolute;inset:7px;border:1px solid rgba(83,220,255,.09);pointer-events:none}
.info-heading{display:flex;justify-content:space-between;align-items:center}.info-heading span{color:#64ffb0;font-size:.62rem;font-weight:900;line-height:28px;letter-spacing:.18em;text-shadow:0 0 10px currentColor}.store-board .info-heading{margin-top:-8px}
.info-board dl{margin:0}.info-board dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.09);font-size:.76rem}.info-board dt{color:#8ba2ae;font-weight:500}.info-board dd{margin:0;text-align:right}.info-board dd strong{font-size:1.15rem;color:#fff}
.status-refresh{padding:6px 9px;color:#dffbff;background:rgba(87,220,255,.05);border:1px solid rgba(87,220,255,.35);border-radius:5px;cursor:pointer;font-size:.65rem;white-space:nowrap}.status-refresh b{display:inline-block;margin-right:3px;font-size:.9rem}.status-refresh:hover{background:rgba(87,220,255,.13)}.status-refresh:disabled{opacity:.55;cursor:wait}
.notice-details{margin-top:10px;border-top:1px solid rgba(255,255,255,.09);font-size:.7rem;color:#b8c9d1}.notice-details summary{padding:10px 0;cursor:pointer;color:#e7f9ff}.notice-details ol,.notice-details p{margin:0 0 8px;padding-left:20px;line-height:1.65}.notice-details p{padding-left:0}
.service-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}.service-status{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:9px;padding:11px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(2,7,13,.34);font-size:.75rem}.service-status small{font-size:.62rem;font-weight:750}.service-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}.service-status.is-up,.service-status.is-up small{color:#67ffb0}.service-status.is-down,.service-status.is-down small{color:#ff6b76}.service-status b{color:#edf7fb;font-weight:650}
.server-updated{margin:12px 0 0;text-align:right;color:#718994;font-size:.58rem;letter-spacing:.04em}

.entrance-footer{position:relative;z-index:3;display:flex;justify-content:space-between;gap:20px;width:min(1420px,94vw);margin:0 auto;padding:8px 0 14px;color:rgba(205,218,226,.52);font-size:.58rem;letter-spacing:.06em}
.login-overlay{position:fixed;z-index:110;inset:0;padding:20px;background:radial-gradient(circle at 50% 46%,rgba(30,187,230,.13),rgba(2,5,11,.82) 68%);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s ease}
.login-open .login-overlay{opacity:1;visibility:visible;pointer-events:auto}.login-open{overflow:hidden}
.door-login{position:absolute;left:50%;top:50%;width:min(410px,calc(100vw - 40px));padding:34px 34px 28px;border:1px solid rgba(101,229,255,.55);border-radius:14px;background:linear-gradient(150deg,rgba(14,26,39,.94),rgba(5,9,17,.96));box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 35px rgba(63,218,255,.2),inset 0 0 35px rgba(255,69,193,.05);transform:translate(-50%,calc(-50% + 20px)) scale(.97);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.login-open .door-login{transform:translate(-50%,-50%) scale(1)}
.login-close{position:absolute;right:12px;top:9px;width:34px;height:34px;border:0;background:transparent;color:#8ca6b2;font-size:1.7rem;cursor:pointer}.login-close:hover,.login-close:focus-visible{color:#fff}
.login-neon-mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border:1px solid var(--cyan);border-radius:50%;color:#effdff;font-weight:900;letter-spacing:.08em;text-shadow:0 0 10px var(--cyan);box-shadow:0 0 22px rgba(85,232,255,.28),inset 0 0 15px rgba(255,85,199,.13)}
.login-kicker,.login-copy,.door-login h2{text-align:center}.login-kicker{margin:0;color:#62eaff;font-size:.58rem;font-weight:800;letter-spacing:.18em}.door-login h2{margin:6px 0 3px;font-size:1.4rem;letter-spacing:.05em}.login-copy{margin:0 0 22px;color:#8299a5;font-size:.72rem}
.door-login label{display:block;margin:12px 0 5px;color:#b8ccd5;font-size:.68rem;letter-spacing:.06em}.door-login input{width:100%;padding:11px 12px;color:#f4fbff;background:rgba(3,8,14,.75);border:1px solid rgba(139,202,222,.26);border-radius:7px;outline:none}.door-login input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,232,255,.1),0 0 16px rgba(85,232,255,.12)}
.login-error{min-height:18px;margin:8px 0 0;color:#ff8792;font-size:.67rem}.login-submit{width:100%;padding:11px;border:1px solid rgba(101,233,255,.7);border-radius:7px;color:#f2fdff;background:linear-gradient(90deg,rgba(42,177,215,.34),rgba(208,58,162,.28));font-weight:800;letter-spacing:.12em;cursor:pointer;box-shadow:0 0 18px rgba(68,217,255,.12)}.login-submit:hover,.login-submit:focus-visible{border-color:#fff;box-shadow:0 0 28px rgba(68,217,255,.34)}.login-submit:disabled{opacity:.55;cursor:wait}
.login-register{margin:17px 0 0;text-align:center;color:#718792;font-size:.66rem}.login-register a{color:#9fefff;text-decoration:none;border-bottom:1px solid rgba(159,239,255,.35)}.login-register a:hover{color:#fff}
body.is-entering .glass-left{transform:translateX(-94%)}body.is-entering .glass-right{transform:translateX(94%)}body.is-entering .door-frame{transform:scale(1.04);transition:transform 1.1s ease}

@keyframes pulse{50%{opacity:.42;transform:scale(.75)}}
@keyframes wave{50%{height:22px;opacity:.8}}
@keyframes cabinetPulse{to{opacity:.82;transform:scale(1.05)}}
@keyframes insideFlicker{0%,18%,22%,63%,67%,100%{opacity:1}20%,65%{opacity:.73}}
@keyframes signFlicker{0%,7%,9%,58%,60%,100%{opacity:1}8%,59%{opacity:.76}}
@keyframes doorPeek{0%,82%,100%{transform:translateX(0)}86%,91%{transform:translateX(-9px)}}
@keyframes doorPeekRight{0%,82%,100%{transform:translateX(0)}86%,91%{transform:translateX(9px)}}
body:not(.is-closed):not(.is-entering) .glass-left{animation:doorPeek 10s ease-in-out infinite}body:not(.is-closed):not(.is-entering) .glass-right{animation:doorPeekRight 10s ease-in-out infinite}

@media (max-width:1050px){.entrance-layout{grid-template-columns:minmax(200px,260px) minmax(460px,1fr)}.server-board{grid-column:1/-1;width:min(780px,94vw);justify-self:center}.entrance-footer{margin-top:14px}}
@media (max-width:760px){.arcade-sign{margin-top:12px}.entrance-layout{display:flex;flex-direction:column;width:94vw;min-height:0}.door-zone{order:1;width:100%}.store-board{order:2}.server-board{order:3}.info-board{width:100%;display:block}.door-frame{aspect-ratio:.92/1;max-height:72vh}.door-poster{right:4%;top:17%;width:42%;padding:12px 11px}.door-poster .poster-news p{display:none}.door-poster .poster-news:nth-of-type(n+3){display:none}.sticker{transform:scale(.85)}.entrance-footer{flex-direction:column;text-align:center;gap:4px}.info-board{padding:20px}.street-photo{background-position:50% center}.enter-handle{min-width:230px}.open-status{top:14px}.door-login{padding:30px 22px 24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}