/* Downfall: a portrait picture 360 wide and as tall as the screen allows, shown at a whole-number scale, centred on
   black, nearest-neighbour so every pixel stays a pixel. On a phone it fills the screen. */
html, body { margin: 0; height: 100%; background: #07050b; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Menlo, monospace; }
#frame { position: relative; width: 360px; height: 640px; transform-origin: center center; }
#game { display: block; width: 360px; height: 640px; image-rendering: pixelated; image-rendering: crisp-edges; background: #07050b; }
/* the touch ring: where the moving thumb landed, with a nub that follows it sideways */
#ring { position: fixed; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 36px; border: 2px solid rgba(232,220,245,0.35); background: rgba(20,12,28,0.25); pointer-events: none; z-index: 5; }
#ring[hidden] { display: none; }
#ring .nub { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 15px; background: rgba(255,46,136,0.55); border: 1px solid rgba(255,255,255,0.5); }

/* the name box: the one piece of HTML over the game (a canvas cannot take typing); the game's own look */
#namer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,3,10,0.72); z-index: 10; }
#namer[hidden] { display: none; }
#namer .box { width: min(320px, 88vw); background: #140c1c; border: 2px solid #ff2e88; box-shadow: 0 0 0 2px #07050b, 0 12px 40px rgba(0,0,0,0.6); padding: 18px 16px 16px; font-family: ui-monospace, Menlo, monospace; text-align: center; color: #f8f8ff; }
#namer .h { font-size: 20px; font-weight: 700; letter-spacing: 2px; color: #ff2e88; }
#namer .p { font-size: 12px; letter-spacing: 1px; color: #b894d8; margin: 8px 0 14px; }
#namer input { width: 100%; box-sizing: border-box; font: 700 22px ui-monospace, Menlo, monospace; letter-spacing: 3px; text-transform: uppercase; text-align: center; color: #f8f8ff; background: #07050b; border: 2px solid #3a3344; padding: 10px 8px; outline: none; border-radius: 0; -webkit-user-select: text; user-select: text; }
#namer input:focus { border-color: #b894d8; }
#namer .row { display: flex; gap: 10px; margin-top: 14px; }
#namer button { flex: 1; font: 700 16px ui-monospace, Menlo, monospace; letter-spacing: 2px; padding: 12px 0; border: 2px solid #3a3344; background: #1d1427; color: #b894d8; border-radius: 0; cursor: pointer; }
#namer button.ok { background: #ff2e88; border-color: #ff2e88; color: #f8f8ff; }