/* Styles for the page and the lobby (the HTML screen before the game). The game itself is drawn by Phaser.
   👤 Owner: Game logic & backend.
   Colours match the game's palette: dark plum #160c11 / #2a1820, cream #fbefd5, orange #ff8a3d, gold #ffd34d. */

/* Fonts are bundled from npm packages so the game works offline on a LAN */
@font-face { font-family: 'Press Start 2P'; src: url('/fonts/press-start-2p/press-start-2p-latin-400-normal.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'VT323'; src: url('/fonts/vt323/vt323-latin-400-normal.woff2') format('woff2'); font-display: block; }

/* The game canvas fills the window; pixelated scaling keeps the 8-bit look sharp */
html, body { margin: 0; height: 100%; background: #160c11; overflow: hidden; }
#game { width: 100vw; height: 100vh; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- lobby ---------- */
/* The lobby covers the whole window until the game starts */
#lobby { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 120%, #7a2d17 0, #2a1018 45%, #0b0610 80%); z-index: 10; font-family: 'VT323', monospace; color: #fbefd5; font-size: 20px; overflow: auto; }
#lobby .panel { background: #2a1820; border: 3px solid #f3d9a4; box-shadow: 0 0 0 3px #000; padding: 16px 22px; max-width: 640px; width: 94%; text-align: center; }
#lobby h1 { font-family: 'Press Start 2P'; color: #ff8a3d; font-size: 24px; margin: 6px 0; text-shadow: 3px 3px 0 #000; }
#lobby .sub { color: #c9ad93; font-size: 18px; margin: 4px 0 10px; }
#lobby .warn { color: #ff5f5f; }
/* Name box and buttons */
#lobby input { font-family: 'VT323'; font-size: 24px; background: #0006; color: #fbefd5; border: 2px solid #f3d9a4; padding: 4px 8px; width: 220px; text-align: center; margin-top: 4px; }
#lobby button { font-family: 'VT323'; font-size: 20px; background: #3a2129; color: #fbefd5; border: 2px solid #f3d9a4; padding: 6px 12px; cursor: pointer; margin: 4px; }
#lobby button:hover:not(:disabled) { background: #5a3040; }
#lobby button:disabled { opacity: .45; cursor: not-allowed; }
#lobby button.big { font-size: 22px; padding: 8px 18px; }
/* Visor colour circles */
#lobby-looks { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
#lobby .look { width: 36px; height: 36px; border: 3px solid transparent; border-radius: 50%; }
#lobby .look.sel { border-color: #fff; box-shadow: 0 0 0 2px #000; }
/* Job cards (taken ones are faded) */
#lobby-jobs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#lobby .job { width: 180px; text-align: left; border-width: 3px; line-height: 1.1; }
#lobby .job.sel { background: #1f3a2a; }
#lobby .job small { color: #c9ad93; font-size: 16px; }
#lobby .job i { color: #ffd34d; font-size: 16px; }
/* The leader's 'play the story' checkbox and the crew list */
#lobby-story-wrap { font-size: 17px; color: #c9ad93; margin: 6px; }
#lobby-story-wrap input { width: auto; transform: scale(1.3); margin-right: 6px; }
#lobby-crew { list-style: none; padding: 0; margin: 8px 0; }

/* ---------- game codes (create / join a game) ---------- */
#lobby-code-row { margin-top: 8px; border-top: 2px dashed #5a3a3a; padding-top: 4px; }
#lobby-code-row p { margin: 6px 0 2px; color: #c9ad93; }
#lobby #lobby-code { width: 110px; letter-spacing: 6px; text-transform: uppercase; font-family: 'Press Start 2P'; font-size: 18px; }
#lobby .room-code { font-size: 22px; color: #ffd34d; margin: 2px 0 8px; }
#lobby .room-code b { font-family: 'Press Start 2P'; font-size: 22px; letter-spacing: 4px; color: #fff; }
#lobby .room-code small { color: #c9ad93; font-size: 16px; }
#lobby .sel-all { user-select: all; color: #6cc4ff; word-break: break-all; }