/* Emo Night: one canvas, as big as the screen allows at a whole-number scale, nearest-neighbour so every pixel stays a
   pixel. The picture's own size (view.W x view.H) is set by src/view.js from the window. */
html, body { margin: 0; height: 100%; background: #06040a; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Menlo, monospace; }
#frame { position: relative; transform-origin: center center; }
#game { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #06040a; }

/* the name box: the one piece of HTML over the game (a canvas cannot take typing) */
#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; }

/* the night's card, over the game: the big picture scaled down by the browser (crisp), share or close */
#cardview { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,3,10,0.86); z-index: 10; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#cardview[hidden] { display: none; }
#cardview .box { width: min(720px, 94vw); font-family: ui-monospace, Menlo, monospace; text-align: center; }
#cardview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 2px solid #ff2e88; box-shadow: 0 0 0 2px #07050b, 0 12px 40px rgba(0,0,0,0.6); background: #06040a; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
#cardview .tip { font-size: 11px; letter-spacing: 1px; color: #5a4a6a; margin-top: 10px; }
#cardview .row { display: flex; gap: 10px; margin-top: 12px; }
#cardview button { flex: 1; font: 700 16px ui-monospace, Menlo, monospace; letter-spacing: 2px; padding: 14px 0; border: 2px solid #3a3344; background: #1d1427; color: #b894d8; border-radius: 0; cursor: pointer; }
#cardview button.ok { background: #ff2e88; border-color: #ff2e88; color: #f8f8ff; }
@media (pointer: fine) { #cardview .tip { display: none; } }