/* One electric palette across entry, lobby, dialogs and play. */
:root{--cyan:#00eaff;--pink:#ff40ce;--blue:#7555ff;--yellow:#f6f943}
html,body{background-color:#050416;color:#f2f8ff}
body{background: url('system/neon-home.svg') center top/min(100%,700px) auto repeat-y,radial-gradient(ellipse at 0 12%,#001fff35,transparent 55%),radial-gradient(ellipse at 100% 40%,#d600ff30,transparent 55%),#050416}
#lobby{padding-top:24px}
#lobby .appToolbar .tools button,#lobby .iconbtn,.iconbtn{background:#111334;border:1px solid #00eaffaa;box-shadow:0 0 12px #00eaff40,inset 0 0 10px #0088ff22;color:#d9ffff}
#lobby .appToolbar svg{filter:drop-shadow(0 0 4px #00eaff)}
.rankingPanel{position:relative;background:linear-gradient(135deg,#15143aec,#190b32ee);border:1px solid #c350ff!important;border-radius:16px!important;padding:20px!important;box-shadow:0 0 22px #a600ff44,inset 0 0 26px #6600ff20!important;margin-bottom:26px}
.rankingPanel h2{color:#fff;text-shadow:0 0 4px #fff,0 0 14px #ff40ce,0 0 28px #ff00d4;font-style:italic;letter-spacing:2px}
.rankFilters select{background:#080c28;color:#e4ffff;border:1px solid #705aff;border-radius:7px;padding:10px;font-size:15px;box-shadow:inset 0 0 12px #6b00ff22}
.rankrow{border-color:#804cff55}.rankrow strong{color:#f6f943;text-shadow:0 0 10px #eeff0055}
#rankPeriod button{background:#110b2e;border-color:#914aff;color:#dfd6ff;border-radius:7px}
#rankPeriod button.selected{background:#db1cbb;color:white;border-color:#ffb5ed;box-shadow:0 0 15px #ff00cc88,inset 0 0 12px #ff83ed44;text-shadow:0 0 6px #fff}
#lobby .songList{gap:24px}
#lobby .songCard{border:1px solid #00dfff;border-radius:14px;height:184px;box-shadow:0 0 18px #00aaff55,inset 0 0 12px #00eaff55;isolation:isolate}
#lobby .songItem:nth-child(even) .songCard{border-color:#ff40ce;box-shadow:0 0 18px #ff00d455}
#lobby .songCard:after{background:linear-gradient(0deg,#090622ed,#04061922 80%);box-shadow:inset 0 -3px 15px #006bff55}
#lobby .songCard h2{font-size:24px;color:white;text-shadow:0 0 8px #006bff,0 2px 4px #000}
#lobby .songCard time{color:#b4f9ff;text-shadow:0 0 8px #00eaff}
#lobby .songCard.active{border:2px solid #eeffff;box-shadow:0 0 8px #00eaff,0 0 25px #00bfff88}
#lobby .songItem.open{border:0;padding-bottom:4px}
#detail{padding:20px 0 8px}
#difficulty button{background:#121135;border-color:#795be2;color:#ece4ff;border-radius:8px;box-shadow:inset 0 0 8px #5533cc33}
#difficulty button.selected{background:#00d5ed;color:#03152b;border-color:#b6ffff;box-shadow:0 0 17px #00eaff88}
#difficulty button[data-diff=oni]{color:#ff75e6;border-color:#ff40ce;box-shadow:0 0 9px #ff00d433}
#difficulty button[data-diff=oni].selected{background:#f900bc;color:white;box-shadow:0 0 20px #ff00d488}
#lobby .primary,.opening .primary,dialog .primary{background: url('system/neon-button.svg') center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;color:white!important;min-height:72px;font-size:30px;font-style:italic;text-shadow:0 0 5px #fff,0 0 14px #00eaff;filter:drop-shadow(0 0 9px #ae00ff66);border-radius:0}
button:active,.novelLink:active{filter:brightness(1.3)}
.setting output{color:#00eaff;text-shadow:0 0 8px #00eaff88}.setting input[type=range]{accent-color:#ff40ce;filter:drop-shadow(0 0 4px #ff00cc66)}
.secondary,.fullTrack,.rankbtn{background:#15102d;border:1px solid #8d5aff;color:#eafcff;border-radius:8px;box-shadow:0 0 10px #8844ff33}
#lobby .fullTrack{border-color:#00eaff;color:#9bffff;background:#072138;box-shadow:0 0 12px #00eaff33}
.siteFooter .novelLink{background:#270944;color:#ffbaf5;border:1px solid #ff40ce;border-radius:8px;box-shadow:0 0 20px #ff00cc55;text-shadow:0 0 8px #ff40ce}
.siteFooter p{color:#aea9d0}
dialog{background:radial-gradient(ellipse at 100% 0,#51078366,transparent 60%),#09091e;border:1px solid #b059ff;border-radius:16px;box-shadow:0 0 36px #b000ff55}
dialog::backdrop{background:#020416dd}dialog h2{color:#e8ffff;text-shadow:0 0 12px #00eaff88}
dialog .howto,dialog .profileSetting{background:#171030;border-color:#8055d4}
input[type=text],#nicknameInput,.opening #nicknameInput{background:#080c25;border:1px solid #00eaff;box-shadow:0 0 16px #00eaff33,inset 0 0 14px #00aaff22;color:#edffff}
.opening{background:url('system/neon-home.svg') center/cover,radial-gradient(ellipse,#53107755,transparent 65%),#050416}
.openingLabel{color:#b6ffff;text-shadow:0 0 8px #00eaff;letter-spacing:5px!important}
.introHalo{filter:brightness(1.6)}
#gameScreen .gameTop{background:linear-gradient(100deg,#071933,#1d0b32);border-color:#00eaff66}
#gameScreen .scorebox strong{color:#f6f943;text-shadow:0 0 12px #eaff0077}
#gameScreen .comboHud strong{color:#fff;text-shadow:0 0 8px #ff40ce,0 0 20px #ff00cc}
#gameScreen .arena{background:radial-gradient(ellipse at 0 95%,#003b6855,transparent 55%),radial-gradient(ellipse at 100% 95%,#59005955,transparent 55%),#040719}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Two travelling highlights follow the artwork's rim; the label stays still. */
@property --glow-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
#lobby .primary,.opening .primary,dialog .primary{position:relative;isolation:isolate;overflow:visible}
#lobby .primary::before,.opening .primary::before,dialog .primary::before,
#lobby .primary::after,.opening .primary::after,dialog .primary::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:conic-gradient(from var(--glow-angle),transparent 0deg,#00eaff22 28deg,#00eaff 55deg,#f1ffff 67deg,transparent 82deg,transparent 180deg,#ff40ce33 208deg,#ff40ce 235deg,#ffe5ff 247deg,transparent 262deg);
 -webkit-mask:url('system/neon-button-rim.svg') center/100% 100% no-repeat;
 mask:url('system/neon-button-rim.svg') center/100% 100% no-repeat;
 animation:neonOrbit 4.8s linear infinite;
}
#lobby .primary::before,.opening .primary::before,dialog .primary::before{opacity:.9}
#lobby .primary::after,.opening .primary::after,dialog .primary::after{-webkit-mask-image:url('system/neon-button-aura.svg');mask-image:url('system/neon-button-aura.svg');opacity:.65}
#lobby .primary:disabled::before,#lobby .primary:disabled::after,
.opening .primary:disabled::before,.opening .primary:disabled::after,
dialog .primary:disabled::before,dialog .primary:disabled::after{animation-play-state:paused;opacity:.25}
/* Static gradients are composited with slow opacity, avoiding animated blur costs. */
.rankingPanel::after{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;box-shadow:0 0 24px #a600ff55,inset 0 0 18px #b940ff15;opacity:.35;animation:neonBreathe 5.6s ease-in-out infinite alternate}
#lobby .fullTrack,.siteFooter .novelLink{position:relative;isolation:isolate}
#lobby .fullTrack::before,.siteFooter .novelLink::before{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;box-shadow:0 0 17px #00eaff55,inset 0 0 9px #00eaff15;opacity:.3;animation:neonBreathe 4.8s ease-in-out infinite alternate}
.siteFooter .novelLink::before{box-shadow:0 0 20px #ff40ce66,inset 0 0 10px #ff40ce18;animation-delay:-2.4s}
#lobby .songCard{transition:box-shadow .3s ease,border-color .3s ease}
#lobby .songCard:focus-visible,#lobby .primary:focus-visible,.opening .primary:focus-visible{outline:2px solid #dcffff;outline-offset:4px}
@keyframes neonOrbit{to{--glow-angle:360deg}}
@keyframes neonBreathe{to{opacity:.85}}
.reduced .primary::before,.reduced .primary::after,.reduced .rankingPanel::after,
.reduced .fullTrack::before,.reduced .novelLink::before{animation:none!important}
@media(prefers-reduced-motion:reduce){.primary::before,.primary::after,.rankingPanel::after,.fullTrack::before,.novelLink::before{animation:none!important}}

/* A quiet, character-led ending with just two ways back into the music. */
#gameOver{--over-color:#ff40ce;inset:0;margin:auto;width:min(100%,560px);height:100dvh;max-height:100dvh;max-width:none;border:0;border-radius:0;padding:max(24px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));overflow:auto;background:radial-gradient(ellipse at 50% 53%,#331d5366,transparent 62%),url('system/neon-home.svg') center/cover,#050714;box-shadow:none}
#gameOver[open]{display:grid;place-items:center}
#gameOver::backdrop{background:#01030deb}
#gameOver[data-character=kanon]{--over-color:#ffaf72}
#gameOver[data-character=rin]{--over-color:#859aff}
#gameOver[data-character=mitsuki]{--over-color:#ffdc69}
.gameOverContent{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;width:100%;height:min(100%,760px);min-height:0;text-align:center}
#gameOverHeading{margin:0;font-size:clamp(35px,10vw,52px);line-height:1.1;font-style:italic;letter-spacing:.025em;color:#fff3fa;text-shadow:0 0 8px #ff40ce88,0 0 26px #ff40ce55}
#gameOverSong{margin:0;color:#c4c5e0;font:500 16px/1.5 'Noto Sans KR','Noto Sans JP',sans-serif;overflow-wrap:anywhere}
.gameOverPortrait{position:relative;isolation:isolate;min-height:0}
.gameOverPortrait::before{content:'';position:absolute;inset:25% 6% 1%;z-index:-1;background:radial-gradient(ellipse,var(--over-color),transparent 68%);opacity:.13;pointer-events:none}
#gameOverArt{display:block;position:absolute;inset:15%;width:70%;height:70%;object-fit:contain;animation:gameOverArrival .55s cubic-bezier(.2,.7,.2,1) both}
.gameOverActions{display:grid;gap:8px;padding-top:4px}
#gameOverReplay,#gameOverList{width:100%;margin:0;touch-action:manipulation}
#gameOverList{min-height:52px;font-size:22px;color:#dfffff;background:#10182b;border:1px solid #00eaff88;box-shadow:inset 0 0 13px #00eaff0c,0 0 14px #00eaff22}
#gameOverList:focus-visible{outline:2px solid #ddffff;outline-offset:3px}
@keyframes gameOverArrival{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.reduced #gameOverArt{animation:none!important}
@media(max-height:620px){#gameOver{padding-top:14px;padding-bottom:12px}.gameOverContent{gap:5px}#gameOverHeading{font-size:32px}#gameOverSong{font-size:14px}#gameOverReplay{min-height:60px}#gameOverList{min-height:44px}}

/* Start the logo and opening music together after the first gesture. */
.openingWaiting .openingInner{visibility:hidden;pointer-events:none}
.openingWaiting .introStage *,.openingWaiting .openingEntry{animation-play-state:paused!important}
.openingTap{position:fixed;inset:0;z-index:20;display:grid;place-items:center;width:100%;height:100dvh;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;filter:none;color:#f7fbff;text-align:center;touch-action:manipulation}
.openingTap span{display:block;margin:0;padding-left:.12em;font-size:clamp(25px,5vw,36px);line-height:1.3;letter-spacing:.12em;text-align:center;text-shadow:0 0 12px #64e6ff80,0 0 30px #706dff50;animation:tapTextGlow 2.4s ease-in-out infinite}
.openingTap:before,.openingTap:after{content:none!important}
.openingTap:focus-visible{outline:0}.openingTap:focus-visible span{outline:2px solid #8defff;outline-offset:12px}
.openingTap:disabled{opacity:1}.openingTap:disabled span{animation:none}
@keyframes tapTextGlow{50%{opacity:.65}}
.reduced .openingTap span{animation:none}
@media(max-width:480px){.pcKeys{grid-template-columns:minmax(0,1fr);gap:8px}.pcKeys dt{display:flex;gap:6px;flex-wrap:wrap}.pcKeys dd{margin:0 0 14px;font-size:16px;line-height:1.5}.syncActions{flex-direction:column}.syncActions button{width:100%;min-width:0;white-space:nowrap}}
.musicCurtain{position:fixed;inset:0;z-index:1000;background:#03030b;opacity:0;pointer-events:none;transition:opacity .3s ease}
.musicDissolve .musicCurtain{opacity:1;transition-duration:.55s;pointer-events:auto}
.reduced .musicCurtain{transition:none}