@font-face{font-family:"Arial Arcade";src:url("../../assets/fonts/press-start-2p/PressStart2P-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.arcade[hidden],.arcade form[hidden]{display:none}
.arcade{--pixel:"Arial Arcade","Courier New",monospace;position:absolute;z-index:2;top:45%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 48px));padding:28px 24px;background:#000;color:#eee;font:10px/1.8 var(--pixel);max-height:calc(100% - 220px);overflow:auto;user-select:none}
.arcade-top,.arcade-best{display:none}
.arcade h2{font:400 clamp(14px,2vw,20px)/1.6 var(--pixel);letter-spacing:0;margin:0 0 30px;text-align:center}
.arcade-result,.arcade-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.arcade[data-current-listed=false] .arcade-result{position:static;width:auto;height:auto;clip-path:none;display:flex;justify-content:center;gap:20px;font-size:8px;margin:0 0 24px}.arcade[data-current-listed=false] .arcade-result .arcade-label{display:inline;margin-right:8px;font-size:6px}
.arcade-board-header{font-size:7px;color:#aaa;margin:0 0 18px;text-align:center}
.arcade table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;line-height:1.6}
.arcade th{font-size:9px;font-weight:400;text-align:left;color:#bbb;padding:0 0 14px}.arcade td{padding:9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arcade th:first-child{width:65px}.arcade th:nth-child(2){width:55%}.arcade th:last-child,.arcade td:last-child{text-align:right}.arcade tr.arcade-current{color:#fff}
.arcade form{margin-top:28px}.arcade-label{display:block;font:400 7px/1.8 var(--pixel);color:#aaa;margin-bottom:12px;text-align:center}.arcade-entry{display:flex;justify-content:center;align-items:center;gap:24px}
.arcade-initials{position:relative;flex:none;width:194px;height:34px}.arcade-slots{display:flex;gap:6px;height:100%}.arcade-slots span{display:grid;place-items:center;width:34px;height:34px;color:#eee;font:400 18px/1 var(--pixel)}.arcade-slots span[data-active=true]{background:#eee;color:#000}.arcade-initials:focus-within{outline:1px dotted #777;outline-offset:5px}
.arcade input{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:transparent;caret-color:transparent;font:400 18px var(--pixel);letter-spacing:6px;outline:none!important;opacity:.01;user-select:text}
.arcade button,.arcade a{font:400 8px/1.8 var(--pixel);border-radius:0;letter-spacing:0;min-height:44px;white-space:nowrap}.arcade form button{background:none;border:0;color:#bbb;padding:8px 0}.arcade form button:hover{color:#fff}
.arcade-keys{font:400 6px/2 var(--pixel);color:#777;margin:12px 0 0;text-align:center}.arcade-feedback{font-size:7px;color:#aaa;margin:24px 0 0;text-align:center}.arcade-feedback:empty{display:none}
.arcade-actions{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:28px;text-align:center}.arcade-actions button{padding:10px 18px;background:none;color:#fff;border:0;font-size:12px}.arcade-actions button:hover{opacity:1;background:none;text-decoration:underline;text-underline-offset:7px}.arcade-actions button:active{transform:translateY(1px)}.arcade-actions a{font-size:6px;display:flex;align-items:center;justify-content:center;color:#777;padding:8px 0}.arcade button:focus-visible,.arcade a:focus-visible{outline:1px solid #eee;outline-offset:3px}
.hero[data-arcade-state=running]{user-select:none}
.arcade[data-state=entering]{animation:arcade-unlock .74s cubic-bezier(.22,1,.36,1) both}
.arcade[data-state=entering]:before{content:'';position:absolute;top:50%;left:24px;right:24px;height:1px;background:#ddd;pointer-events:none;animation:arcade-line .28s ease-out both}
.arcade[data-state=entering] h2{animation:arcade-settle .34s cubic-bezier(.22,1,.36,1) .08s both}
.arcade[data-state=entering] .arcade-board-header,.arcade[data-state=entering] thead{animation:arcade-settle .32s cubic-bezier(.22,1,.36,1) .16s both}
.arcade[data-state=entering] tbody tr{animation:arcade-settle .3s cubic-bezier(.22,1,.36,1) .22s both}
.arcade[data-state=entering] tbody tr:nth-child(2){animation-delay:.255s}.arcade[data-state=entering] tbody tr:nth-child(3){animation-delay:.29s}.arcade[data-state=entering] tbody tr:nth-child(4){animation-delay:.325s}.arcade[data-state=entering] tbody tr:nth-child(5){animation-delay:.36s}
.arcade[data-state=entering] form,.arcade[data-state=entering] .arcade-actions{animation:arcade-settle .3s cubic-bezier(.22,1,.36,1) .4s both}
@keyframes arcade-unlock{0%{clip-path:inset(50% 40%)}12%{clip-path:inset(calc(50% - 1px) 0)}68%,100%{clip-path:inset(0)}}
@keyframes arcade-line{0%{opacity:0;transform:scaleX(.2)}30%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes arcade-settle{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.arcade{width:calc(100% - 32px);padding:20px 12px;top:44%;max-height:calc(100% - 190px);font-size:8px}.arcade h2{font-size:13px;margin-bottom:24px}.arcade-board-header{font-size:6px;margin-bottom:16px}.arcade table{font-size:8px}.arcade th{font-size:7px;padding-bottom:12px}.arcade th:first-child{width:34px}.arcade th:nth-child(2){width:55%}.arcade td{padding:10px 0}.arcade-current td:last-child:after{font-size:6px}.arcade-entry{gap:12px}.arcade-initials{width:156px;height:30px}.arcade-slots{gap:4px}.arcade-slots span{width:28px;height:30px;font-size:16px}.arcade-keys{font-size:5px;line-height:2.4}.arcade-actions button{font-size:9px}.arcade-actions{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.arcade[data-state=entering],.arcade[data-state=entering] *{animation:none!important}.arcade[data-state=entering]:before{display:none}}