:root{--flow-blue:#188cff;--flow-ice:#dff6ff;--flow-violet:#8554e8;--flow-red:#b41736}
.start-flow{position:fixed;z-index:1000;inset:0;overflow:hidden;color:#f3f7ff;background:#01030a;font-family:"Noto Sans JP",system-ui,sans-serif}.start-flow[hidden]{display:none}.start-flow:before,.start-flow:after{content:"";position:absolute;inset:-20%;pointer-events:none}.start-flow:before{background:radial-gradient(circle at 50% 42%,#0b4d9877,transparent 23%),radial-gradient(circle at 18% 72%,#4e178055,transparent 28%),linear-gradient(125deg,#010208,#030b1a 55%,#070213);animation:flow-drift 18s ease-in-out infinite alternate}.start-flow:after{opacity:.38;background-image:radial-gradient(circle,#61c8ff 0 1px,transparent 1.5px);background-size:47px 53px;animation:flow-particles 24s linear infinite}
.flow-screen{position:absolute;z-index:2;inset:0;display:none;place-items:center;opacity:0}.flow-screen.active{display:grid;opacity:1;animation:flow-in .7s both}.flow-screen.leaving{animation:flow-out .55s both}.flow-frame{position:relative;width:min(1120px,calc(100% - 34px));height:min(760px,calc(100% - 32px));display:grid;place-items:center;border:1px solid #164d83;background:linear-gradient(135deg,#02050bea,#06142aec);box-shadow:inset 0 0 70px #02040b,0 0 45px #0a62ad33;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}.flow-frame:before,.flow-frame:after{content:"";position:absolute;width:110px;height:2px;background:#218ef0;box-shadow:0 0 13px #167fff}.flow-frame:before{left:16px;top:16px}.flow-frame:after{right:16px;bottom:16px}
.flow-emblem{width:clamp(92px,15vw,160px);aspect-ratio:1;background:radial-gradient(circle,#24b6ff 0 6%,#0d4bc6 7% 26%,transparent 27%),linear-gradient(135deg,transparent 37%,#2089ff 38% 47%,transparent 48%),linear-gradient(45deg,transparent 37%,#2089ff 38% 47%,transparent 48%);clip-path:polygon(50% 0,63% 22%,89% 10%,78% 43%,100% 65%,66% 69%,50% 100%,34% 69%,0 65%,22% 43%,11% 10%,37% 22%);filter:drop-shadow(0 0 22px #188fff)}
.opening-content,.title-content,.start-card{position:relative;z-index:2;text-align:center}.opening-content small,.title-content small,.start-card small{display:block;font:700 11px Cinzel,serif;letter-spacing:.34em;color:#58baff}.opening-content h1,.title-content h1{margin:14px 0 3px;font-family:serif;font-size:clamp(40px,8vw,92px);letter-spacing:.1em;text-shadow:0 0 28px #126aca}.opening-content p,.title-content p{margin:0;font:600 clamp(12px,2vw,20px) Cinzel,serif;letter-spacing:.3em;color:#bacce0}.opening-ready{display:grid;gap:18px;place-items:center}.opening-live{display:none}.opening-live.active{display:grid;place-items:center;gap:18px;animation:op-pulse 4s ease-in-out infinite}.opening-live strong{font:700 clamp(28px,6vw,66px) serif;letter-spacing:.18em}.opening-live span{font:700 12px Cinzel;color:#5ecaff;letter-spacing:.36em}.flow-button,.title-menu button,.confirm-actions button,.character-card button,.flow-settings button{appearance:none;color:#edf7ff;background:linear-gradient(105deg,#06142b,#0a3260);border:1px solid #2585cf;padding:13px 28px;font:800 13px Cinzel,serif;letter-spacing:.15em;cursor:pointer;box-shadow:inset 0 0 18px #0b3d6d}.flow-button:hover,.flow-button:focus-visible,.title-menu button:hover,.title-menu button:focus-visible,.character-card button:hover,.character-card button:focus-visible{outline:0;border-color:#71dfff;box-shadow:0 0 22px #168fff77,inset 0 0 20px #105398}.op-skip,.prologue-skip{position:absolute;z-index:9;right:24px;top:22px;padding:8px 13px;color:#a8c7e4;background:#030814cc;border:1px solid #315473;font:700 9px Cinzel;letter-spacing:.15em;cursor:pointer}
.title-content{display:grid;place-items:center}.title-content .flow-emblem{width:120px}.title-content h1{font-size:clamp(42px,7vw,82px)}.title-menu{display:grid;width:min(380px,80vw);gap:9px;margin-top:38px}.title-menu button{display:grid;gap:2px;padding:14px}.title-menu button span{font-size:7px;color:#6abef4}.title-menu button:disabled{opacity:.28;filter:grayscale(1);cursor:not-allowed}.flow-version{position:absolute;bottom:22px;right:30px;font:700 9px Cinzel;color:#456b92;letter-spacing:.18em}
.prologue-screen{cursor:pointer}.prologue-stage{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#0b3268,transparent 32%),linear-gradient(#01030a,#060b19);transition:background .8s}.prologue-stage.effect-midnight{background:radial-gradient(circle at 50% 40%,#56147955,transparent 28%),linear-gradient(#000,#05091b)}.prologue-stage.effect-arsene,.prologue-stage.effect-invitation{background:radial-gradient(circle at 50% 47%,#0b63b888,transparent 22%),linear-gradient(135deg,#02040c,#100621)}.prologue-copy{position:relative;z-index:2;width:min(780px,86vw);padding:30px;text-align:center}.prologue-time{display:block;margin-bottom:22px;font:700 clamp(28px,6vw,64px) Cinzel;color:#61caff;letter-spacing:.2em;text-shadow:0 0 22px #168fff}.prologue-text{white-space:pre-line;font-family:serif;font-size:clamp(17px,3vw,30px);line-height:1.9;letter-spacing:.08em;text-shadow:0 2px 8px #000}.prologue-progress{position:absolute;z-index:3;left:4%;right:4%;bottom:24px;height:2px;background:#18314f}.prologue-progress i{display:block;height:100%;background:#37aaff;box-shadow:0 0 12px #199aff;transition:width .45s}.prologue-next{position:absolute;z-index:3;right:5%;bottom:38px;font:700 8px Cinzel;color:#64b9ee;letter-spacing:.15em}
.select-wrap{position:relative;z-index:2;width:min(1180px,96vw);height:min(790px,95svh);display:grid;grid-template-rows:auto 1fr;gap:14px;padding:20px}.select-heading{text-align:center}.select-heading small{font:700 10px Cinzel;color:#5fc6ff;letter-spacing:.27em}.select-heading h1{margin:5px 0 0;font-family:serif;font-size:clamp(26px,4vw,44px);letter-spacing:.1em}.character-grid{min-height:0;display:grid;grid-template-columns:1.65fr repeat(3,1fr);gap:12px}.character-card{position:relative;min-width:0;overflow:hidden;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #174f86;background:linear-gradient(#06142b88,#02040be8);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}.character-card.available{border-color:#299ef1;box-shadow:inset 0 0 35px #0a4384,0 0 22px #147dd844}.character-card img{position:absolute;inset:2% 0 23%;width:100%;height:75%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 18px #167fff)}.character-card .card-info{position:relative;z-index:2;padding:13px;background:#01050ce8;border-top:1px solid #1c6aa4}.character-card h2{margin:0;font-family:serif;font-size:clamp(21px,3vw,34px)}.character-card h3{margin:3px 0 12px;font:700 9px Cinzel;color:#4bb8ff;letter-spacing:.18em}.character-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 10px;font-size:10px}.character-card dt{color:#5db9ee}.character-card dd{margin:0}.character-card p{min-height:35px;margin:0 0 10px;font-size:10px;color:#b6c6d8;line-height:1.65}.character-card.locked{filter:grayscale(1);opacity:.46;justify-content:center;text-align:center}.character-silhouette{height:62%;background:radial-gradient(ellipse,#142236,#02040b 65%);clip-path:polygon(43% 4%,58% 4%,65% 15%,61% 25%,72% 36%,79% 87%,65% 100%,35% 100%,21% 87%,28% 36%,39% 25%,35% 15%)}.character-card.locked strong{font:800 22px Cinzel;letter-spacing:.18em}.character-card.locked span{font:700 9px Cinzel;color:#8491a0}.flow-toast{position:absolute;z-index:20;left:50%;bottom:25px;translate:-50% 20px;padding:10px 18px;background:#09172aed;border:1px solid #3478aa;opacity:0;pointer-events:none;transition:.25s}.flow-toast.show{opacity:1;translate:-50% 0}
.flow-confirm{position:absolute;z-index:30;inset:0;display:none;place-items:center;background:#000b}.flow-confirm.active{display:grid}.confirm-card{width:min(480px,88vw);padding:30px;text-align:center;border:1px solid #247dc1;background:#030b19;box-shadow:0 0 40px #156dba66}.confirm-card small{font:700 9px Cinzel;color:#55bdff;letter-spacing:.2em}.confirm-card h2{font-family:serif;font-size:24px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-actions .danger{border-color:#9d2844;background:#2a0911}.start-card{display:grid;place-items:center;gap:12px}.start-card .flow-emblem{width:100px}.start-card strong{font:700 clamp(25px,5vw,54px) serif;letter-spacing:.14em}.start-card span{font:700 12px Cinzel;color:#66c7ff;letter-spacing:.24em}
.flow-settings{position:relative;z-index:2;width:min(680px,90vw);max-height:88svh;overflow:auto;padding:28px;border:1px solid #1e689e;background:#020917ed}.flow-settings h1{font:700 30px Cinzel;letter-spacing:.15em}.flow-settings .volume-row{margin:8px 0}.flow-settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.flow-settings-actions button{display:grid;gap:3px}.flow-settings-actions button span{font-size:8px;color:#88a8c1}.flow-settings-actions .danger{border-color:#8d2940;background:#25070f}.settings-back{margin-top:18px;width:100%}
.system-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.system-actions button{display:grid;gap:3px;padding:12px;color:#e9f6ff;background:#071b33;border:1px solid #286999;cursor:pointer;font:800 11px Cinzel}.system-actions button span{font:500 8px sans-serif;color:#86a9c4}.system-actions .danger{border-color:#853047;background:#250810}
@keyframes flow-drift{to{transform:translate3d(4%,2%,0) scale(1.04)}}@keyframes flow-particles{to{transform:translateY(80px)}}@keyframes flow-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}@keyframes flow-out{to{opacity:0;filter:blur(8px)}}@keyframes op-pulse{50%{filter:brightness(1.3)}}
@media(max-width:700px){.flow-frame{width:100%;height:100%;clip-path:none;border:0}.op-skip,.prologue-skip{right:10px;top:10px}.character-grid{grid-template-columns:1fr 1fr;grid-template-rows:1.6fr .75fr}.character-card.available{grid-column:1/3}.character-card.available img{inset:0 0 29%;height:69%}.character-card.available .card-info{padding:9px}.character-card.available p{display:none}.character-card.locked{min-height:0;padding:7px}.character-card.locked:nth-of-type(4){display:none}.character-silhouette{height:55%}.select-wrap{height:100svh;padding:10px}.select-heading h1{font-size:23px}.flow-settings{width:100%;height:100%;max-height:none;padding:20px 12px}.flow-settings-actions,.system-actions{grid-template-columns:1fr}.prologue-copy{padding:18px}.prologue-text{font-size:18px;line-height:1.75}.title-menu{margin-top:25px}}