:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#000;color-scheme:dark}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #c3dd93;outline-offset:4px}
#screen-wrap{position:fixed;inset:0;width:100%;height:100dvh;background:#000;overflow:hidden}
#game{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;outline:none;touch-action:none}
.softkeys{position:absolute;inset:0;pointer-events:none;z-index:3}
.softkeys button,#fullscreen{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));width:48px;height:44px;border:1px solid #ffffff59;border-radius:10px;background:#0009;backdrop-filter:blur(6px);font-size:18px;font-weight:600;pointer-events:auto;user-select:none}
.softkeys button:first-child{left:max(18px,env(safe-area-inset-left))}
.softkeys button:last-child{right:max(18px,env(safe-area-inset-right))}
.softkeys button:hover,.softkeys button.held,.softkeys button:active,#fullscreen:hover,#fullscreen:active{background:#355b38dc;border-color:#c3dd93}
#fullscreen{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));bottom:auto;display:grid;place-items:center;z-index:6}
#pause-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0009;z-index:4}
#resume{padding:12px 24px;border:1px solid #ffffff80;border-radius:8px;background:#18251eee}
#error{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(560px,90%);padding:16px;border:1px solid #ec9a85;border-radius:8px;background:#421d17f2;color:#ffdfd6;font-size:14px;line-height:1.6;overflow-wrap:anywhere;z-index:5}
#name-controls{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:min(350px,90%);max-height:50dvh;overflow:auto;padding:12px;border:1px solid #ffffff40;border-radius:10px;background:#101a14ed;z-index:2}
#name-controls p{margin:0 0 10px;font-size:11px;line-height:1.5;color:#d4dfce}
#alphabet{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
#alphabet button,.name-actions button{min-height:32px;background:#ffffff12;border:1px solid #ffffff40;border-radius:4px;font-size:12px}
.name-actions{display:flex;gap:8px;margin-top:8px}
.name-actions button{flex:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}