@font-face {
    font-family: 'Press Start 2P';
    src: url('/static/typeping/PressStart2P-Regular-f98cd910425bf727bd54ce767a9b6884.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0c2440;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-text {
    font-family: monospace;
    font-size: 24px;
    color: white;
    letter-spacing: 4px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
html,body{
    width:100%;height:100vh;overflow:hidden;
    background:#0b1f4c;
    margin:0;padding:0;
}
#shell{
    width:1530px;height:960px;
    background:url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201530%20960%22%20style%3D%22enable-background%3Anew%200%200%201530%20960%3B%22%20xml:space%3D%22preserve%22%3E%3Cstyle%20type%3D%22text/css%22%3E.st0%7Bfill%3A%2372C5FC%3B%7D%3C/style%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M765%2C894.5c-207-3-453-15.2-584-31.5c-51-6.1-90-40.6-97-83.3c-16-94.5-16-186.9-16-258c0-14.2%2C0-28.4%2C0-41.7s0-27.4%2C0-41.7c0-71.1%2C0-163.6%2C16-258c7-42.7%2C46-77.2%2C97-83.3c131-16.3%2C377-28.4%2C584-31.5l0%2C0c207%2C3%2C453%2C15.2%2C584%2C31.5c51%2C6.1%2C90%2C40.6%2C97%2C83.3c16%2C94.5%2C16%2C186.9%2C16%2C258c0%2C14.2%2C0%2C28.4%2C0%2C41.7s0%2C27.4%2C0%2C41.7c0%2C71.1%2C0%2C163.6-16%2C258c-7%2C42.7-46%2C77.2-97%2C83.3C1218%2C879.3%2C972%2C891.5%2C765%2C894.5z%22/%3E%3C/svg%3E') no-repeat center center;
    background-size:contain;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    transform-origin:center center;
}
#brand-logo{
    position:absolute;
    top:18px;
    left:18px;
    width:80px;
    height:auto;
    z-index:350;
}
#power-light{
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    width:12px;
    height:12px;
    background:#00ff00;
    border-radius:50%;
    z-index:350;
    box-shadow:0 0 8px #00ff00, 0 0 15px #00ff00;
    animation:power-blink 2s ease-in-out infinite;
}
@keyframes power-blink{
    0%{opacity:1;}
    2%{opacity:0.95;}
    4%{opacity:1;}
    45%{opacity:1;}
    47%{opacity:0.85;}
    49%{opacity:1;}
    50%{opacity:0.92;}
    51%{opacity:1;}
    95%{opacity:1;}
    97%{opacity:0.88;}
    100%{opacity:1;}
}
#tv-foreground {
    background: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1530 960" style="enable-background:new 0 0 1530 960" xml:space="preserve"><style type="text/css">.st0{fill:%230B1F4C;}.st1{fill:%2303040D;}</style><g><path class="st0" d="M0,0v960h1530V0H0z M1507.6,479.9c0,13.3,0,27.4,0,41.7c0,75.2,0,171.7-16.9,271.3c-9.9,58.9-61.5,104.6-128.1,112.8c-131.1,16.2-379.2,28.4-597.6,31.5c-218.4-3-466.5-15.2-597.6-31.5c-66.5-8.1-118.1-53.8-128.1-112.8c-16.9-99.6-16.9-196.1-16.9-271.3c0-14.2,0-28.4,0-41.7c0-13.3,0-27.4,0-41.7c0-75.2,0-171.7,16.9-271.3C49.2,108,100.8,62.3,167.4,54.1c131-16.3,379.2-28.4,597.6-31.5c218.4,3,466.5,15.2,597.6,31.5c66.5,8.1,118.1,53.8,128.1,112.8c16.9,99.6,16.9,196.1,16.9,271.3C1507.6,452.4,1507.6,466.6,1507.6,479.9z"/></g><path class="st0" d="M1512.7,157c-10.2-60.9-63-108.1-130.9-116.4c-134-16.8-387.5-29.4-610.7-32.5c-223.2,3.2-476.8,15.7-610.7,32.5C92.3,49.1,39.6,96.2,29.5,157C12.2,259.8,12.2,359.4,12.2,437c0,14.8,0,29.3,0,43c0,13.7,0,28.4,0,43c0,77.6,0,177.2,17.3,280c10.2,60.9,63,108.1,130.9,116.4c134,16.8,387.5,29.4,610.7,32.5c223.2-3.2,476.7-15.8,610.7-32.5c68.1-8.5,120.8-55.6,130.9-116.4c17.3-102.8,17.3-202.4,17.3-280c0-14.8,0-29.3,0-43s0-28.4,0-43C1530,359.4,1530,259.8,1512.7,157z M1483.4,480.2c0,13.7,0,28.3,0,43c0,73.4,0,168.8-16.4,266.3c-7.2,44.1-47,79.7-99.1,86c-133.9,16.8-385.3,29.4-596.8,32.5c-211.5-3.1-462.9-15.7-596.8-32.5c-52.1-6.3-92-41.9-99.1-86c-16.4-97.5-16.4-192.9-16.4-266.3c0-14.7,0-29.3,0-43c0-13.7,0-28.3,0-43c0-73.4,0-168.8,16.4-266.3c7.2-44.1,47-79.7,99.1-86c133.9-16.8,385.3-29.3,596.8-32.5c211.5,3.1,462.9,15.7,596.8,32.5c52.1,6.3,92,41.9,99.1,86c16.4,97.5,16.4,192.9,16.4,266.3C1483.4,451.8,1483.4,466.4,1483.4,480.2z"/><path class="st1" d="M1490.7,167c-10-59-61.6-104.7-128.1-112.8C1231.5,37.9,983.4,25.7,765,22.7c-218.4,3.1-466.6,15.2-597.6,31.5C100.8,62.4,49.2,108.1,39.3,167c-16.9,99.6-16.9,196.1-16.9,271.3c0,14.3,0,28.4,0,41.7c0,13.3,0,27.5,0,41.7c0,75.2,0,171.7,16.9,271.3c10,59,61.6,104.7,128.1,112.8c131.1,16.3,379.2,28.5,597.6,31.5c218.4-3.1,466.5-15.3,597.6-31.5c66.6-8.2,118.2-53.9,128.1-112.8c16.9-99.6,16.9-196.1,16.9-271.3c0-14.3,0-28.4,0-41.7c0-13.3,0-27.5,0-41.7C1507.6,363.1,1507.6,266.6,1490.7,167z M1462,480.1c0,13.3,0,27.4,0,41.7c0,71.1,0,163.6-16,258c-7,42.7-46,77.2-97,83.3c-131,16.3-377,28.5-584,31.5c-207-3-453-15.2-584-31.5c-51-6.1-90-40.6-97-83.3c-16-94.5-16-186.9-16-258c0-14.2,0-28.4,0-41.7c0-13.3,0-27.4,0-41.7c0-71.1,0-163.6,16-258c7-42.7,46-77.2,97-83.3c131-16.3,377-28.4,584-31.5c207,3,453,15.2,584,31.5c51,6.1,90,40.6,97,83.3c16,94.5,16,186.9,16,258C1462,452.6,1462,466.8,1462,480.1z"/></svg>') no-repeat center center;
    background-size: contain;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    pointer-events: none;
}

#screen{
    width:1422px;height:852px;
    background:transparent;
    border-radius:180px;
    position:relative;overflow:hidden;
    box-shadow:none;
}
#screen::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:200;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,16,46,.07) 3px,rgba(0,16,46,.07) 4px);
    border-radius:inherit;
}
#screen::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:201;border-radius:inherit;
    background:
            rgba(255,255,255,.12);

}
#vig{
    position:absolute;inset:0;pointer-events:none;z-index:199;border-radius:inherit;
    background:transparent;
}
canvas{position:absolute;inset:0;z-index:1;}

.scr{
    position:absolute;inset:0;z-index:50;
    display:none;flex-direction:column;align-items:center;justify-content:center;
    font-family:'Press Start 2P',monospace;
}
.scr.on{display:flex;}

#home .logo{
    position:absolute;
    top:180px;
    left:393px;
    font-size:70px;color:#0d2840;letter-spacing:2px;
    text-shadow:5px 5px 0 rgba(8,22,46,.55);
    white-space:nowrap;
}
#home .logo span[style*="font-size: 110px"] {
    transform: translateY(4px);
    display: inline-block;
}
#home .btns{
    position:absolute;
    top:53%;
    left:50%;
    transform:translate(-50%, -50%);
    display:flex;flex-direction:column;gap:15px;align-items:center;
}
#home .hint{
    position:absolute;
    bottom:80px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;color:#122c4a;letter-spacing:1.5px;text-align:center;line-height:2.5;
    width:100%;
}
.hint kbd{
    display:inline-block;background:rgba(8,32,64,.17);border:2px solid rgba(8,32,64,.28);
    padding:1px 8px;border-radius:3px;font-family:inherit;font-size:10px;
}
.btns{display:flex;flex-direction:column;gap:15px;align-items:center;}
.btn{
    font-family:'Press Start 2P',monospace;font-size:14px;color:#0c2640;
    background:rgba(8,32,64,.09);border:3px solid rgba(8,32,64,.3);
    padding:14px 52px;cursor:pointer;letter-spacing:3px;
    transition:background .12s,border-color .12s,box-shadow .12s,transform .08s;
    border-radius:5px;text-transform:uppercase;min-width:300px;text-align:center;
    display:flex;align-items:center;justify-content:center;gap:12px;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.btn-icon{
    font-size:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    margin-top:-6px;
}
.btn-icon.play-symbol {
    margin-top:0px;
}
.btn-icon.svg-icon {
    margin-top:-4px;
}
.btn:hover{background:rgba(8,32,64,.22);border-color:rgba(8,32,64,.6);transform:scale(1.03);}
.btn:active{transform:scale(.97);}

#settings.pause-bg{
    background:rgba(0,0,0,0.1);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:65;
}
.stitle{font-size:28px;color:#0c2440;letter-spacing:7px;margin-bottom:50px;text-shadow:2px 2px 0 rgba(8,30,64,.3);}
.srow{display:flex;align-items:center;gap:26px;margin-bottom:30px;width:540px;}
.slbl{font-size:11px;color:#0c2440;letter-spacing:2px;width:100px;text-align:left;opacity:1;}
.swrap{flex:1;display:flex;align-items:center;gap:14px;}
input[type=range]{
    -webkit-appearance:none;appearance:none;flex:1;height:8px;
    background:rgba(8,32,64,.18);border:2px solid rgba(8,32,64,.3);border-radius:4px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:22px;height:22px;background:#0c2440;border-radius:3px;cursor:pointer;
    box-shadow:0 0 8px rgba(8,32,64,.4);
}
.sval{font-size:11px;color:#0c2440;width:36px;text-align:center;opacity:1;}

#pause{
    background:rgba(0,0,0,0.1);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:65;
}
.ptitle{position:absolute;top:33%;left:50.5%;transform:translate(-50%,-50%);font-size:48px;color:#0c2440;letter-spacing:12px;margin-bottom:0;animation:blink 1s step-end infinite;}
#pause .btns{position:absolute;top:45%;left:50%;transform:translateX(-50%);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.22}}

.wtxt{
    position:absolute;top:35%;left:50.6%;transform:translate(-50%,-50%);
    font-size:42px;color:#0c2440;letter-spacing:5px;margin-bottom:0;text-align:center;
}
.wsub{font-size:22px;color:#0c2440;letter-spacing:8px;opacity:1;margin-top:100px;margin-bottom:45px;}

#hud{position:absolute;inset:0;pointer-events:none;z-index:60;display:none;}
#hud.on{display:block;}
.plbl{position:absolute;top:54px;font-family:'Press Start 2P',monospace;font-size:24px;color:#0c2440;opacity:1;letter-spacing:2px;}
#pl1{left:150px;}#pl2{right:150px;}
#sc{
    position:absolute;top:110px;left:50.4%;transform:translateX(-50%);
    display:flex;gap:90px;align-items:center;
    font-family:'Press Start 2P',monospace;font-size:78px;color:#ffffff;
    letter-spacing:2px;pointer-events:none;
}
#cdown{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    z-index:62;pointer-events:none;
    font-family:'Press Start 2P',monospace;font-size:120px;color:#0c2440;
    opacity:0;transition:opacity .18s;
    will-change:opacity;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
#rmsg{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:'Press Start 2P',monospace;font-size:18px;color:#0c2440;
    letter-spacing:3px;opacity:0;z-index:70;pointer-events:none;
    text-align:center;line-height:2.4;transition:opacity .3s;
}
.cf{position:absolute;pointer-events:none;z-index:150;animation:cfall linear forwards;}
@keyframes cfall{0%{opacity:1;transform:translateY(0) rotate(0deg);}100%{opacity:0;transform:translateY(400px) rotate(900deg) scale(.1);}}