:root{
  --bg:#02050a;
  --panel:rgba(4,13,23,.82);
  --panel-2:rgba(5,17,29,.94);
  --cyan:#7eeaff;
  --cyan-strong:#22cfff;
  --cyan-deep:#087da8;
  --red:#ff4258;
  --red-deep:#7a1421;
  --text:#edfaff;
  --muted:#7f9ba7;
  --line:rgba(119,225,255,.18);
  --safe-top:max(18px,env(safe-area-inset-top));
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
body{background:radial-gradient(circle at 50% 45%,rgba(4,72,108,.13),transparent 34%),radial-gradient(circle at 20% 20%,rgba(20,112,150,.07),transparent 28%),#02050a}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:1px solid var(--cyan);outline-offset:4px}
.hidden{display:none!important}
.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s ease}
.screen.active{opacity:1;pointer-events:auto}
.app{position:relative;width:100%;height:100%;isolation:isolate}
#ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.scanlines,.noise{position:fixed;inset:0;pointer-events:none;z-index:80}
.scanlines{opacity:.10;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}
.noise{opacity:.035;background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1px),radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 1px);background-size:57px 71px,83px 61px;animation:noiseShift 1.1s steps(2,end) infinite}
@keyframes noiseShift{0%{transform:translate(0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(.5%,.75%)}100%{transform:translate(0)}}
.system-panel{position:relative;background:linear-gradient(180deg,rgba(8,25,41,.93),rgba(2,9,17,.9));border:1px solid rgba(109,228,255,.32);box-shadow:0 0 0 1px rgba(13,108,148,.1) inset,0 0 38px rgba(26,197,255,.08);backdrop-filter:blur(18px)}
.system-panel::before,.system-panel::after{content:"";position:absolute;width:18px;height:18px;border-color:var(--cyan);opacity:.72;pointer-events:none}
.system-panel::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}.system-panel::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}
.sys-button{appearance:none;border:1px solid rgba(109,231,255,.38);background:rgba(7,23,36,.66);min-height:46px;padding:0 22px;letter-spacing:.16em;font-size:11px;font-weight:500;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;position:relative;overflow:hidden;text-transform:uppercase}
.sys-button:hover{transform:translateY(-1px);border-color:rgba(109,231,255,.92);box-shadow:0 0 22px rgba(31,207,255,.16),0 0 20px rgba(31,207,255,.08) inset;color:#fff}.sys-button:active{transform:translateY(0) scale(.99)}
.sys-button.primary{border-color:rgba(109,231,255,.9);background:linear-gradient(180deg,rgba(14,99,128,.38),rgba(7,29,43,.84));box-shadow:0 0 24px rgba(31,207,255,.10) inset}
.sys-button.danger-ghost{border-color:rgba(255,66,88,.34);color:#f6dce0}.sys-button.danger-ghost:hover{border-color:rgba(255,66,88,.8);box-shadow:0 0 20px rgba(255,66,88,.11)}
.choice-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.glitch-target{filter:drop-shadow(0 0 20px rgba(34,220,255,.42))}
.glitching{animation:glitchBurst .22s steps(2,end) 1}
@keyframes glitchBurst{0%{transform:translate(0);filter:drop-shadow(2px 0 rgba(255,60,90,.7)) drop-shadow(-2px 0 rgba(40,220,255,.85))}20%{transform:translate(-3px,1px) skewX(-1deg)}40%{transform:translate(2px,-1px) skewX(1deg)}65%{transform:translate(-1px,0)}100%{transform:translate(0)}}
.icon-close{appearance:none;background:transparent;border:0;color:var(--muted);font-size:28px;line-height:1;cursor:pointer;padding:4px 8px}.icon-close:hover{color:var(--text)}
.modal-layer{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,4,9,.76);backdrop-filter:blur(10px);z-index:140;opacity:0;pointer-events:none;transition:opacity .28s ease}
.modal-layer.open{opacity:1;pointer-events:auto}.modal-layer.open>*{animation:modalIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.982);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.modal-header,.creator-security-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.2em;color:#9fc4d2}

/* Cinematic notification engine */
.notification-layer{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:22px;pointer-events:none;opacity:0;transition:opacity .2s ease;background:radial-gradient(circle at center,rgba(0,18,32,.24),transparent 56%)}
.notification-layer.visible{opacity:1;pointer-events:auto}
.notification-float{width:min(760px,94vw);animation:floatInfinity 16s ease-in-out infinite;will-change:transform}
@keyframes floatInfinity{0%,100%{transform:translate3d(0,0,0)}12.5%{transform:translate3d(8px,-6px,0)}25%{transform:translate3d(15px,0,0)}37.5%{transform:translate3d(8px,6px,0)}50%{transform:translate3d(0,0,0)}62.5%{transform:translate3d(-8px,-6px,0)}75%{transform:translate3d(-15px,0,0)}87.5%{transform:translate3d(-8px,6px,0)}}
.notification-frame{position:relative;min-height:318px;padding:88px 60px 52px;background:linear-gradient(180deg,rgba(3,15,27,.9),rgba(2,8,15,.94));box-shadow:0 0 85px rgba(0,184,255,.22),0 0 110px rgba(0,83,170,.12) inset;overflow:hidden;backdrop-filter:blur(22px);isolation:isolate}
.notification-frame::before{content:"";position:absolute;inset:13px;border:1px solid rgba(108,227,255,.2);background:linear-gradient(135deg,rgba(82,215,255,.055),transparent 26%,rgba(65,188,255,.025) 64%,transparent);box-shadow:0 0 36px rgba(41,199,255,.075) inset;pointer-events:none}
.notification-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(125,229,255,.025) 3px 4px);mix-blend-mode:screen;opacity:.6}
.notification-rail,.notification-side{position:absolute;z-index:5;opacity:0;pointer-events:none}
.notification-rail{left:1.6%;right:1.6%;height:8px;transform:scaleX(0);transform-origin:center;background:linear-gradient(90deg,transparent 0%,rgba(103,230,255,.5) 5%,rgba(119,241,255,1) 18%,rgba(35,187,255,1) 50%,rgba(119,241,255,1) 82%,rgba(103,230,255,.5) 95%,transparent 100%);filter:drop-shadow(0 0 8px rgba(41,211,255,.95)) drop-shadow(0 0 17px rgba(34,178,255,.5));box-shadow:0 -3px 0 rgba(71,196,255,.23),0 3px 0 rgba(103,234,255,.18)}
.notification-rail::before,.notification-rail::after{content:"";position:absolute;top:-5px;width:56px;height:18px;border-top:2px solid rgba(126,237,255,.72);opacity:.8}.notification-rail::before{left:6%;transform:skewX(-34deg)}.notification-rail::after{right:6%;transform:skewX(34deg)}
.notification-rail-top{top:15px}.notification-rail-bottom{bottom:15px;transform-origin:center}
.notification-side{top:22px;bottom:22px;width:5px;transform:scaleY(0);transform-origin:center;background:linear-gradient(180deg,transparent,rgba(67,207,255,.65) 8%,rgba(117,239,255,.96) 50%,rgba(67,207,255,.65) 92%,transparent);filter:drop-shadow(0 0 8px rgba(35,197,255,.8))}.notification-side-left{left:2.2%}.notification-side-right{right:2.2%}
.notification-layer.opening .notification-rail,.notification-layer.open .notification-rail{animation:railOpen .72s cubic-bezier(.2,.78,.16,1) forwards}.notification-layer.opening .notification-side,.notification-layer.open .notification-side{animation:sideOpen .46s .31s ease forwards}
@keyframes railOpen{0%{opacity:0;transform:scaleX(0)}18%{opacity:1}62%{transform:scaleX(1.025)}100%{opacity:1;transform:scaleX(1)}}@keyframes sideOpen{from{opacity:0;transform:scaleY(0)}to{opacity:.92;transform:scaleY(1)}}
.notification-layer.closing .notification-text,.notification-layer.closing .notification-actions,.notification-layer.closing .notification-header{animation:notificationContentOut .24s ease forwards}.notification-layer.closing .notification-side{animation:sideClose .3s .2s ease forwards}.notification-layer.closing .notification-rail{animation:railClose .5s .34s cubic-bezier(.67,.05,.83,.38) forwards}
@keyframes notificationContentOut{to{opacity:0;filter:blur(5px);transform:translateY(-2px)}}@keyframes sideClose{to{opacity:0;transform:scaleY(0)}}@keyframes railClose{from{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}
.notification-header{position:absolute;z-index:7;top:45px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;color:#e5fbff;opacity:0;letter-spacing:.28em;font-size:11px;font-weight:350;text-shadow:0 0 13px rgba(84,222,255,.92)}
.notification-layer.open .notification-header{animation:headerIn .34s .42s ease forwards}@keyframes headerIn{from{opacity:0;transform:translateX(-50%) translateY(5px);filter:blur(3px)}to{opacity:1;transform:translateX(-50%);filter:none}}
.notification-icon{width:39px;height:39px;border:2px solid rgba(145,240,255,.95);display:grid;place-items:center;border-radius:50%;font-size:17px;font-weight:400;box-shadow:0 0 15px rgba(68,213,255,.34) inset,0 0 22px rgba(68,213,255,.2);background:rgba(10,40,58,.22)}
.notification-body{position:relative;z-index:6;display:flex;min-height:174px;flex-direction:column;align-items:center;justify-content:center}
.notification-text{max-width:590px;text-align:center;font-size:clamp(16px,2vw,23px);line-height:1.68;letter-spacing:.045em;font-weight:300;color:#e8fbff;text-shadow:0 0 13px rgba(77,220,255,.31);text-wrap:balance;white-space:pre-wrap;transition:opacity .18s ease,filter .18s ease,transform .18s ease}
.notification-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap;opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease}.notification-actions.ready{opacity:1;transform:none}.notification-actions:empty{display:none}
.notification-frame.switching .notification-text,.notification-frame.switching .notification-actions{opacity:0;filter:blur(4px);transform:translateY(-3px)}
.notification-glitch{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:linear-gradient(transparent 0 15%,rgba(71,219,255,.08) 15% 18%,transparent 18% 52%,rgba(255,74,93,.035) 52% 54%,transparent 54% 77%,rgba(71,219,255,.05) 77% 80%,transparent 80%);mix-blend-mode:screen}
.notification-frame.glitch-pulse{animation:frameGlitch .12s steps(2,end)}.notification-frame.glitch-pulse .notification-glitch{animation:glitchBands .12s steps(2,end)}
@keyframes frameGlitch{0%{transform:none}25%{transform:translateX(-4px) skewX(.65deg)}50%{transform:translateX(3px)}75%{transform:translateX(-1px)}100%{transform:none}}@keyframes glitchBands{0%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}100%{opacity:0;transform:translateY(-4px)}}
.notification-frame.error .notification-rail{background:linear-gradient(90deg,transparent,rgba(255,108,126,.64) 8%,rgba(255,129,142,1) 22%,rgba(255,55,79,1) 50%,rgba(255,129,142,1) 78%,rgba(255,108,126,.64) 92%,transparent);filter:drop-shadow(0 0 8px rgba(255,66,88,.95)) drop-shadow(0 0 18px rgba(255,53,75,.48))}.notification-frame.error .notification-side{background:linear-gradient(180deg,transparent,rgba(255,86,104,.78),rgba(255,137,149,.96),rgba(255,86,104,.78),transparent);filter:drop-shadow(0 0 9px rgba(255,66,88,.86))}.notification-frame.error .notification-header,.notification-frame.error .notification-text{color:#ffe9ec;text-shadow:0 0 13px rgba(255,66,88,.42)}.notification-frame.error .notification-icon{border-color:rgba(255,126,140,.95);box-shadow:0 0 18px rgba(255,66,88,.25) inset,0 0 16px rgba(255,66,88,.15)}

.levelup{position:fixed;top:calc(var(--safe-top) + 14px);left:50%;transform:translate(-50%,-18px);z-index:220;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;color:#e8fdff;text-shadow:0 0 13px rgba(85,226,255,.95);letter-spacing:.24em;font-size:11px;font-weight:500}
.levelup.visible{animation:levelUpIn 2.35s ease both}.levelup-line{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}.levelup-line:last-child{background:linear-gradient(90deg,var(--cyan),transparent)}
@keyframes levelUpIn{0%{opacity:0;transform:translate(-50%,-20px) scale(.96);filter:blur(2px)}16%{opacity:1;transform:translate(-50%,0) scale(1);filter:none}76%{opacity:1}100%{opacity:0;transform:translate(-50%,-7px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}