.arcade-screen { position:absolute; z-index:5; overflow:hidden; pointer-events:auto; background:#f7f3de; border-radius:3%; }
.arcade-screen canvas { display:block; width:100%; height:100%; outline:none; touch-action:manipulation; cursor:pointer; }
.arcade-screen:focus-within { outline:2px solid #ec94ac; outline-offset:2px; }

.arcade-ranking { position:absolute; z-index:6; box-sizing:border-box; padding:5%; color:#251d24; pointer-events:auto; font-family:monospace; line-height:1.25; text-align:center; overflow:auto; }
.arcade-ranking strong { font-size:1.1em; }
.arcade-ranking ol { list-style:none; padding:0; margin:.5em 0; text-align:left; }
.arcade-ranking li { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcade-ranking p { margin:.4em 0; font-size:.85em; }
.arcade-ranking form { display:flex; flex-wrap:wrap; gap:.2em; }
.arcade-ranking form[hidden] { display:none; }
.arcade-ranking input,.arcade-ranking button { box-sizing:border-box; font:inherit; font-size:.9em; width:100%; min-width:0; padding:.2em; border:1px solid #51403b; background:#fff2be; color:#251d24; }
.arcade-ranking button { cursor:pointer; background:#38253b; color:#fff2be; }
.arcade-ranking :focus-visible { outline:2px solid #a13d67; }

.arcade-ranking { padding:8px; }
.arcade-ranking:has(form:not([hidden])) li:nth-child(n+3) { display:none; }

@font-face { font-family:ArcadePixel; src:url('/arcade/Silkscreen-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
.arcade-ranking { font-family:ArcadePixel,monospace; line-height:1.35; }
.arcade-ranking strong { font-weight:400; font-size:1em; }
.arcade-ranking input,.arcade-ranking button { font-family:inherit; }

.arcade-ranking .arcade-change-name { width:auto; padding:0; margin-top:.35em; background:none; color:#51403b; border:0; text-decoration:underline; font-size:.65em; }
.arcade-ranking .arcade-change-name[hidden] { display:none; }