body.game-open { overflow: hidden; }
.signal-game [hidden] { display: none !important; }

.signal-game { --game-cyan:#58e7f2; --game-lime:#c9ff3d; --game-pink:#ff4fd8; position:fixed; inset:0; z-index:120; min-width:320px; min-height:100svh; overflow:hidden; isolation:isolate; background:#020506; color:#f7fbff; font-family:"Space Grotesk",sans-serif; }
.signal-game[hidden] { display:none; }
.signal-game::before { content:""; position:absolute; inset:-45%; z-index:-3; background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 10deg,rgba(88,231,242,.07) 10deg 11deg); animation:game-spin 60s linear infinite; }
.signal-game::after { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 18% 28%,rgba(255,79,216,.2),transparent 24%),radial-gradient(circle at 78% 30%,rgba(88,231,242,.18),transparent 26%),radial-gradient(circle at 50% 95%,rgba(201,255,61,.13),transparent 24%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,auto,auto,56px 56px,56px 56px; }
.signal-game__field { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.signal-game__field span { position:absolute; color:var(--game-cyan); opacity:.35; text-shadow:0 0 18px currentColor; animation:game-symbol 7s ease-in-out infinite; }
.signal-game__field span:nth-child(1){left:5%;top:24%}.signal-game__field span:nth-child(2){right:7%;top:19%;color:var(--game-pink);animation-delay:-2s}.signal-game__field span:nth-child(3){left:43%;bottom:7%;color:var(--game-lime);animation-delay:-4s}.signal-game__field span:nth-child(4){right:4%;bottom:25%;animation-delay:-6s}
.signal-game__head { position:relative; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:82px; margin:0 clamp(18px,4vw,64px); border-bottom:1px solid rgba(255,255,255,.15); }
.signal-game__head > a { display:inline-flex; align-items:center; gap:10px; justify-self:start; color:#f7fbff; font-family:"Archivo Black",sans-serif; text-decoration:none; }
.signal-game__head img { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(88,231,242,.4)); }
.signal-game__head a span { display:grid; line-height:.9; }
.signal-game__head small { margin-top:6px; color:rgba(235,244,248,.55); font-family:"Space Grotesk",sans-serif; font-size:.42rem; letter-spacing:.16em; }
.signal-game__head p { display:flex; align-items:center; gap:8px; margin:0; color:rgba(235,244,248,.6); font-size:.54rem; letter-spacing:.16em; }
.signal-game__head p i { width:6px; height:6px; border-radius:50%; background:var(--game-lime); box-shadow:0 0 12px var(--game-lime); animation:game-blink 1.2s steps(2,end) infinite; }
.signal-game__head > button { justify-self:end; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(0,0,0,.3); color:#fff; font:inherit; font-size:1.45rem; cursor:pointer; transition:transform 260ms ease,border-color 180ms ease,color 180ms ease; }
.signal-game__head > button:hover { border-color:var(--game-pink); color:var(--game-pink); transform:rotate(90deg); }
.signal-game__menu { display:grid; grid-template-columns:minmax(300px,620px) minmax(300px,560px); align-items:center; justify-content:center; gap:clamp(28px,5vw,90px); min-height:calc(100svh - 82px); padding:clamp(28px,5vw,72px); }
.signal-game__character { position:relative; display:grid; place-items:center; width:min(42vw,570px); aspect-ratio:1; }
.signal-game__character::before,.signal-game__character::after,.signal-game__character span { content:""; position:absolute; border-radius:50%; }
.signal-game__character::before { inset:3%; border:2px dashed rgba(201,255,61,.45); animation:game-spin 16s linear infinite; }
.signal-game__character::after { inset:13%; border:1px solid rgba(88,231,242,.45); box-shadow:inset 0 0 60px rgba(255,79,216,.14),0 0 50px rgba(88,231,242,.14); animation:game-spin 11s linear infinite reverse; }
.signal-game__character span { inset:20%; background:conic-gradient(var(--game-cyan),var(--game-pink),var(--game-lime),var(--game-cyan)); filter:blur(35px); opacity:.25; animation:game-spin 7s linear infinite; }
.signal-game__character img { position:relative; z-index:2; width:94%; max-height:86%; object-fit:contain; filter:drop-shadow(0 0 28px rgba(29,255,100,.5)); animation:game-float 4s ease-in-out infinite; }
.signal-game__intro > p { margin:0 0 14px; color:var(--game-lime); font-size:.6rem; font-weight:600; letter-spacing:.2em; }
.signal-game__intro h2 { margin:0; color:transparent; background:linear-gradient(100deg,#fff,var(--game-cyan),var(--game-pink),var(--game-lime)); background-size:220%; background-clip:text; -webkit-background-clip:text; font-family:"Archivo Black",sans-serif; font-size:clamp(3.8rem,8vw,8rem); line-height:.78; animation:game-title 6s linear infinite; }
.signal-game__intro h2 span { color:transparent; }
.signal-game__keys { display:flex; align-items:center; gap:7px; margin-top:36px; }
.signal-game__keys kbd { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.04); color:#fff; font:600 .7rem "Space Grotesk",sans-serif; box-shadow:inset 0 -4px 0 rgba(0,0,0,.3); }
.signal-game__keys span { margin-left:8px; color:rgba(235,244,248,.55); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }
.signal-game__intro > button,.signal-game__result button { display:flex; align-items:center; justify-content:space-between; gap:42px; min-width:250px; min-height:54px; margin-top:28px; padding:0 17px; border:1px solid var(--game-lime); border-radius:0; background:var(--game-lime); color:#05080a; font:600 .66rem "Space Grotesk",sans-serif; letter-spacing:.13em; cursor:pointer; transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease,color 180ms ease; }
.signal-game__intro > button:hover,.signal-game__result button:hover { transform:translateY(-4px); box-shadow:0 0 28px rgba(201,255,61,.25); background:transparent; color:#fff; }
.signal-game__session { display:grid; grid-template-rows:auto 1fr; width:min(94vw,980px); height:calc(100svh - 110px); margin:18px auto 0; }
.signal-game__hud { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(255,255,255,.14); background:rgba(3,8,10,.62); backdrop-filter:blur(15px); }
.signal-game__hud p { display:grid; gap:4px; margin:0; padding:11px 16px; border-right:1px solid rgba(255,255,255,.12); color:rgba(235,244,248,.5); font-size:.5rem; letter-spacing:.15em; }
.signal-game__hud p:last-child { border:0; text-align:right; }
.signal-game__hud p:nth-child(2) { text-align:center; }
.signal-game__hud strong { color:#fff; font-family:"Archivo Black",sans-serif; font-size:clamp(1rem,2vw,1.45rem); letter-spacing:0; }
.beat-board { position:relative; display:grid; grid-template-columns:repeat(4,1fr); min-height:0; border:1px solid rgba(255,255,255,.14); border-top:0; overflow:hidden; background:linear-gradient(180deg,rgba(5,9,12,.28),rgba(5,9,12,.8)); }
.beat-board::before { content:""; position:absolute; z-index:4; left:0; right:0; bottom:82px; height:2px; background:linear-gradient(90deg,var(--game-cyan),var(--game-lime),var(--game-pink),var(--game-cyan)); box-shadow:0 0 18px rgba(88,231,242,.7); pointer-events:none; }
.beat-lane { position:relative; min-width:0; padding:0; border:0; border-right:1px solid rgba(255,255,255,.1); background:transparent; color:#fff; cursor:pointer; overflow:hidden; touch-action:manipulation; }
.beat-lane:last-of-type { border-right:0; }
.beat-lane::before { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(0deg,rgba(88,231,242,.22),transparent 42%); transition:opacity 90ms ease; }
.beat-lane.is-pressed::before { opacity:1; }
.beat-lane:nth-child(2)::before { background:linear-gradient(0deg,rgba(201,255,61,.2),transparent 42%); }
.beat-lane:nth-child(3)::before { background:linear-gradient(0deg,rgba(255,79,216,.2),transparent 42%); }
.beat-lane__rail { position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.055); }
.beat-lane > b { position:absolute; z-index:6; left:50%; bottom:24px; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); background:rgba(3,8,10,.85); font-size:.7rem; transform:translateX(-50%); transition:background 100ms ease,color 100ms ease,transform 100ms ease; }
.beat-lane.is-pressed > b { background:var(--game-cyan); color:#05080a; transform:translateX(-50%) scale(.9); }
.beat-note { position:absolute; z-index:3; left:50%; top:0; display:grid; place-items:center; width:clamp(40px,5vw,62px); height:18px; border:1px solid var(--note-color,var(--game-cyan)); background:color-mix(in srgb,var(--note-color,var(--game-cyan)) 24%,#05080a); box-shadow:0 0 18px color-mix(in srgb,var(--note-color,var(--game-cyan)) 45%,transparent); transform:translate(-50%,-50%); pointer-events:none; }
.beat-note::after { content:""; width:42%; height:2px; background:var(--note-color,var(--game-cyan)); box-shadow:0 0 9px currentColor; }
.beat-note.is-hit { animation:note-hit 180ms ease-out forwards; }
.beat-note.is-missed { opacity:.15; filter:grayscale(1); }
.beat-board__judgement { position:absolute; z-index:8; left:50%; top:44%; color:#fff; font-family:"Archivo Black",sans-serif; font-size:clamp(1.4rem,4vw,3rem); text-shadow:0 0 22px currentColor; opacity:0; transform:translate(-50%,-50%) scale(.7); pointer-events:none; }
.beat-board__judgement.show { animation:judge-pop 420ms ease-out; }
.beat-board__judgement[data-tone="perfect"] { color:var(--game-lime); }.beat-board__judgement[data-tone="good"] { color:var(--game-cyan); }.beat-board__judgement[data-tone="miss"] { color:var(--game-pink); }
.signal-game__result { display:grid; place-items:center; align-content:center; min-height:calc(100svh - 82px); text-align:center; }
.signal-game__result > p { margin:0; color:var(--game-lime); font-size:.6rem; letter-spacing:.2em; }
.signal-game__result h2 { margin:18px 0 6px; color:transparent; background:linear-gradient(135deg,var(--game-cyan),var(--game-lime),var(--game-pink)); background-clip:text; -webkit-background-clip:text; font-family:"Archivo Black",sans-serif; font-size:clamp(7rem,24vw,16rem); line-height:.75; filter:drop-shadow(0 0 30px rgba(88,231,242,.2)); }
.signal-game__result > strong { color:#fff; font-family:"Archivo Black",sans-serif; font-size:clamp(1.5rem,4vw,3rem); }
.signal-game__result > div { display:flex; gap:8px; }
.signal-game__result button { min-width:180px; margin-top:34px; justify-content:center; }
.signal-game__result button:last-child { border-color:var(--game-cyan); background:transparent; color:#fff; }
@keyframes game-spin{to{transform:rotate(360deg)}}@keyframes game-symbol{50%{opacity:.7;transform:translateY(-18px) rotate(90deg)}}@keyframes game-blink{50%{opacity:.2}}@keyframes game-float{50%{transform:translateY(-12px) rotate(1.5deg)}}@keyframes game-title{to{background-position:-130% 50%}}@keyframes note-hit{to{opacity:0;transform:translate(-50%,-50%) scale(2.2);filter:blur(3px)}}@keyframes judge-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-65%) scale(1.08)}}
@media(max-width:760px){.signal-game__head{grid-template-columns:1fr auto;margin:0 14px}.signal-game__head>p{display:none}.signal-game__menu{grid-template-columns:1fr;align-content:center;gap:0;padding:16px}.signal-game__character{position:absolute;right:-70px;top:80px;width:290px;opacity:.48}.signal-game__intro{position:relative;z-index:3}.signal-game__intro h2{font-size:clamp(3.6rem,20vw,5.3rem)}.signal-game__keys{margin-top:28px}.signal-game__keys kbd{width:36px;height:36px}.signal-game__keys span{font-size:.48rem}.signal-game__session{width:calc(100vw - 20px);height:calc(100svh - 96px);margin-top:8px}.signal-game__hud p{padding:8px}.beat-board::before{bottom:70px}.beat-lane>b{bottom:18px;width:38px;height:38px}.signal-game__result>div{width:calc(100vw - 32px);flex-direction:column}.signal-game__result button{width:100%;margin-top:18px}.signal-game__result button+button{margin-top:0}}
@media(prefers-reduced-motion:reduce){.signal-game::before,.signal-game__field span,.signal-game__character::before,.signal-game__character::after,.signal-game__character span,.signal-game__character img,.signal-game__head p i{animation:none!important}}

/* Endless piano mode */
.signal-game__keys{display:grid;gap:7px}.signal-game__keys>div{display:flex;gap:5px}.signal-game__keys>div:nth-child(2){padding-left:21px}.signal-game__keys>span{margin:4px 0 0;color:rgba(235,244,248,.55);font-size:.5rem;letter-spacing:.09em}.signal-game__keys kbd{width:34px;height:34px}.signal-game__keys>div:nth-child(2) kbd{border-color:rgba(255,79,216,.42);background:rgba(255,79,216,.08);color:#ffb5ee}
.signal-game__hud{grid-template-columns:1.25fr .8fr .7fr .9fr 1.25fr}.signal-game__hud p{padding:9px 12px}.signal-game__hud p:nth-child(2),.signal-game__hud p:nth-child(3),.signal-game__hud p:nth-child(4){text-align:center}.signal-game__hud p:nth-child(4) strong{color:var(--game-pink);font-size:clamp(.72rem,1.4vw,1rem);letter-spacing:.08em}.signal-game__hud p:nth-child(5){border:0;text-align:right}
.beat-board{position:relative;display:block}.beat-board::before{bottom:122px;background:linear-gradient(90deg,var(--game-cyan),var(--game-pink),var(--game-lime),var(--game-cyan))}.beat-board__rails{position:absolute;inset:0 0 122px;display:grid;grid-template-columns:repeat(7,1fr)}.beat-board__rails i{border-right:1px solid rgba(255,255,255,.065)}.beat-board__rails i:last-child{border:0}.beat-board__notes{position:absolute;inset:0 0 122px}.piano-keys{position:absolute;z-index:7;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(7,1fr);height:122px;background:#050708}.piano-key{position:relative;min-width:0;padding:0;border-radius:0;font-family:"Space Grotesk",sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.piano-key--white{display:flex;align-items:end;justify-content:center;padding-bottom:12px;border:1px solid #171c1d;border-top-color:rgba(255,255,255,.45);background:linear-gradient(180deg,#f8fbf7,#bfc8c4);color:#050708;box-shadow:inset 0 -8px 14px rgba(0,0,0,.15)}.piano-key--white+ .piano-key--white{border-left:0}.piano-key--black{position:absolute;z-index:2;top:0;left:var(--key-left);display:grid;place-items:center;align-content:end;width:8.2%;height:70%;padding-bottom:8px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,#101517,#020304);color:#fff;box-shadow:0 6px 10px rgba(0,0,0,.55);transform:translateX(-50%)}.piano-key span{font-family:"Archivo Black",sans-serif;font-size:.62rem}.piano-key b{display:grid;place-items:center;width:24px;height:24px;margin-top:5px;border:1px solid currentColor;font-size:.48rem;opacity:.7}.piano-key.is-pressed{background:var(--game-lime);color:#050708;box-shadow:inset 0 0 24px rgba(0,0,0,.28),0 0 22px rgba(201,255,61,.45)}.piano-key--black.is-pressed{background:var(--game-pink);color:#050708;transform:translateX(-50%) translateY(3px)}
.beat-note{left:var(--note-x);width:clamp(28px,4vw,50px);height:24px;color:var(--note-color,var(--game-cyan));font:600 .5rem "Space Grotesk",sans-serif}.beat-note::after{display:none}.beat-note--sharp{--note-color:var(--game-pink);height:20px;border-style:dashed}.beat-note:not(.beat-note--sharp){--note-color:var(--game-cyan)}.beat-board__judgement{top:42%}.signal-game__result>small{margin-top:12px;color:rgba(235,244,248,.5);font-size:.52rem;letter-spacing:.14em}.signal-game__result>small b{color:var(--game-lime)}
@media(max-width:760px){.signal-game__keys kbd{width:29px;height:29px}.signal-game__session{height:calc(100svh - 88px)}.signal-game__hud p{padding:7px 4px;font-size:.36rem;letter-spacing:.08em}.signal-game__hud strong{font-size:.72rem}.signal-game__hud p:nth-child(4) strong{font-size:.55rem}.beat-board::before{bottom:100px}.beat-board__rails,.beat-board__notes{bottom:100px}.piano-keys{height:100px}.piano-key--white{padding-bottom:8px}.piano-key--black{width:10%;height:68%;padding-bottom:5px}.piano-key span{font-size:.48rem}.piano-key b{width:20px;height:20px;font-size:.4rem}.beat-note{width:25px;height:18px;font-size:.4rem}}