/* ========================================================================= * Battle-Royale web client — login overlay + layout. * * Architecture: * #game — the OSRS gamepack canvas (765x503 backbuffer). Z-index 0. * Hidden behind the backdrop while the login overlay is up. * #backdrop — full-bleed still image with a slow Ken Burns drift. * Z-index 1. Replace /assets/login-bg.png with your own art. * #login-overlay — the dark centered login card. Z-index 10. * .sidebar-* — corner icons (music, discord, fullscreen). Z-index 11. * #version — bottom-right version string. Z-index 11. * * State transitions are driven by classes on : * .state-booting — everything hidden, just a top-left boot message. * .state-login — backdrop + card + progress bar + sidebar visible. * .state-ingame — overlay fades out, canvas becomes visible. * ========================================================================= */ :root { --brand-gold: #e9b94b; --brand-gold-2: #c89532; --brand-red: #8b2a2a; --panel-bg: rgba(18, 14, 10, 0.82); --panel-border: rgba(233, 185, 75, 0.35); --input-bg: rgba(0, 0, 0, 0.55); --input-border: rgba(233, 185, 75, 0.25); --text-primary: #eadfc8; --text-dim: #9c9280; --text-label: #b79a52; --progress-bg: rgba(0, 0, 0, 0.55); --progress-fg: linear-gradient(180deg, #4ea94e 0%, #2f7d2f 100%); } html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background: #000; color: var(--text-primary); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; } /* ------------------------------------------------------------------------- * Canvas — always rendering. Opacity is driven by body state so the gamepack * output stays invisible behind the login overlay until the user is in-game. * ------------------------------------------------------------------------- */ #game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* object-fit: contain preserves the buffer's aspect ratio. When the gamepack's layout mode switches at runtime the backing buffer size can change (765×503 for Fixed, viewport-matched for Resizable). If we let CSS stretch, fixed-mode looks distorted and — worse — click coordinates go through our letterbox-aware mapper which assumes contain letterboxing, so without this rule clicks lands on the wrong buffer coordinates and nothing is tappable. */ object-fit: contain; image-rendering: pixelated; /* crisp 2D blit output */ z-index: 0; opacity: 0; pointer-events: none; /* disabled until in-game */ transition: opacity 400ms ease-out; } body.state-ingame #game { opacity: 1; pointer-events: auto; } /* ------------------------------------------------------------------------- * Backdrop — static image with gentle Ken Burns drift. Hidden once in-game. * ------------------------------------------------------------------------- */ #backdrop { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; background-color: #0a0805; } #backdrop::before { content: ""; position: absolute; inset: -6%; background-image: url('assets/login-bg.png'); background-size: cover; background-position: center 40%; filter: saturate(1.05) brightness(0.92); animation: drift 28s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translate(0, 0) scale(1.00); } 50% { transform: translate(-1.2%, 0.6%) scale(1.03); } 100% { transform: translate(1.2%, -0.6%) scale(1.01); } } body.state-ingame #backdrop { opacity: 0; pointer-events: none; transition: opacity 400ms ease-out; } /* ------------------------------------------------------------------------- * Top-left boot status — visible only while TeaVM is loading. * ------------------------------------------------------------------------- */ #status { position: fixed; top: 10px; left: 10px; z-index: 20; padding: 6px 12px; background: rgba(0, 0, 0, 0.7); color: #9f9; font-size: 12px; font-family: ui-monospace, monospace; border-radius: 4px; pointer-events: none; max-width: calc(100% - 40px); white-space: pre-wrap; } body.state-login #status, body.state-ingame #status { display: none; } /* ------------------------------------------------------------------------- * Diagnostic panel — full readout + collapsible-chip toggle. * * UX: * * Default state is EXPANDED on desktop (≥900px wide) and COLLAPSED on * mobile, set by JS at boot based on viewport. User toggle via the * #diag-toggle button overrides + persists via localStorage. * * When collapsed: panel is hidden, just the small "▾ DIAG" chip shows * in the top-right corner. * * When expanded: full panel back at top, click anywhere on the * chip/header to collapse again. * * Without the collapse, the panel covers the top ~30% of mobile screens * (it can grow to max-height: 80vh) which obscures chat broadcasts + * any in-game widget at the top of the viewport. * ------------------------------------------------------------------------- */ #diag { position: fixed; top: 8px; left: 8px; right: 8px; z-index: 100; padding: 4px 8px; background: rgba(0,0,0,0.85); color: #9cf; font: 9px/1.3 ui-monospace, monospace; border-radius: 3px; pointer-events: auto; /* clickable so the user can tap it to collapse */ cursor: pointer; white-space: pre; max-height: 80vh; overflow: hidden; } body.diag-collapsed #diag { display: none; } /* Tiny chip — always-visible toggle, top-right corner. Clicked to expand when the panel is collapsed; the panel itself is also clickable as a shortcut to collapse. */ #diag-toggle { position: fixed; top: 8px; right: 8px; z-index: 101; /* above #diag */ padding: 4px 10px; background: rgba(0,0,0,0.85); color: #9cf; font: 10px/1 ui-monospace, monospace; border: 1px solid rgba(156, 204, 255, 0.3); border-radius: 3px; cursor: pointer; user-select: none; -webkit-user-select: none; pointer-events: auto; } #diag-toggle:hover { background: rgba(0,0,0,0.95); border-color: rgba(156, 204, 255, 0.6); } #diag-toggle:active { transform: scale(0.97); } /* When the panel is OPEN, hide the chip — clicking the panel itself collapses it, no need for a separate button. */ body:not(.diag-collapsed) #diag-toggle { display: none; } /* ------------------------------------------------------------------------- * Login card — centered panel with logo, form, and progress bar. * ------------------------------------------------------------------------- */ #login-overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 400ms ease-out; } body.state-login #login-overlay { opacity: 1; pointer-events: auto; } .login-card { /* Stays under 340px on desktop, never wider than 92% of viewport on narrow phones (so a 390px iPhone gets a 359px card with breathing room on each side). */ width: min(340px, 92vw); /* Same idea for height-driven content: cap to viewport when stacked. */ max-height: 92vh; overflow-y: auto; padding: 22px 22px 18px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-sizing: border-box; } /* Brand logo — CSS text treatment for now; swap to once art exists. */ .login-card .logo { text-align: center; margin: 4px 0 24px; font-family: 'Cinzel', 'Trajan Pro', 'Georgia', serif; font-weight: 800; font-size: 30px; letter-spacing: 0.08em; line-height: 1; background: linear-gradient(180deg, var(--brand-gold) 0%, var(--brand-gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(233, 185, 75, 0.15); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); } .login-card .logo small { display: block; font-size: 10px; letter-spacing: 0.4em; font-weight: 600; color: var(--text-label); margin-top: 6px; background: none; -webkit-text-fill-color: var(--text-label); } .login-card label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-label); margin: 12px 0 5px; } .login-card input[type="text"], .login-card input[type="password"] { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 14px; color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 4px; outline: none; transition: border-color 120ms, box-shadow 120ms; font-family: inherit; } .login-card input:focus { border-color: var(--brand-gold); box-shadow: 0 0 0 2px rgba(233, 185, 75, 0.15); } .login-card input:disabled { opacity: 0.5; cursor: not-allowed; } .password-field { position: relative; } .password-field .toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .password-field .toggle:hover { color: var(--brand-gold); } .remember-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-label); cursor: pointer; } .remember-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--brand-gold); cursor: pointer; } .login-btn { width: 100%; margin-top: 14px; padding: 11px; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #1a1408; background: linear-gradient(180deg, #d0d0ce 0%, #8f8e89 100%); border: 1px solid #2a2a26; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; transition: filter 120ms; } .login-btn:hover { filter: brightness(1.08); } .login-btn:active { filter: brightness(0.94); } .login-btn:disabled { cursor: not-allowed; filter: grayscale(0.5) brightness(0.7); } /* ------------------------------------------------------------------------- * Quick-login (#quick-login-form) — shown in place of the username/password * fields when remember-me is active. Big tap target sized for mobile; the * top button is the saved-credentials login, the smaller one below clears * the saved creds and reveals the normal form. * ------------------------------------------------------------------------- */ #quick-login-form { display: flex; flex-direction: column; gap: 4px; } .quick-login-btn { /* The username IS the button label — big brand-gold tap target anchoring the card. No "LOG IN" preamble; clicking the name logs you in. */ padding: 20px 14px; background: linear-gradient(180deg, #f0c75a 0%, #b8862a 100%); color: #1a1408; display: flex; justify-content: center; align-items: center; } .quick-login-btn .user { font-size: 20px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .quick-logout-btn { /* Smaller / muted variant — secondary action. */ padding: 9px; font-size: 11px; letter-spacing: 0.32em; background: linear-gradient(180deg, #d8a957 0%, #8a6324 100%); color: #1a1408; } /* ------------------------------------------------------------------------- * Progress bar — shown below the form while gamepack boots. * Hidden once gameState reaches 10 (login screen ready). * ------------------------------------------------------------------------- */ #progress { margin-top: 14px; height: 22px; position: relative; background: var(--progress-bg); border: 1px solid var(--input-border); border-radius: 3px; overflow: hidden; } #progress .bar { position: absolute; inset: 0; width: 0; background: var(--progress-fg); transition: width 200ms ease-out; } #progress .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } body.progress-done #progress { display: none; } /* 2FA code input — large centered digits for a more native feel. */ .auth-input { text-align: center; font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; font-size: 22px; letter-spacing: 0.4em; padding: 12px 10px !important; } .login-btn.secondary { background: transparent; color: var(--text-label); border-color: var(--panel-border); box-shadow: none; margin-top: 8px; } .login-btn.secondary:hover { color: var(--brand-gold); border-color: var(--brand-gold); filter: none; } /* Login error message — shown below the form if BR_API.login rejects. */ .login-error { margin-top: 10px; padding: 8px 10px; border-radius: 3px; font-size: 11px; text-align: center; color: #ffb5a4; background: rgba(139, 42, 42, 0.35); border: 1px solid rgba(220, 90, 90, 0.4); } /* ------------------------------------------------------------------------- * Sidebar icons — bottom-left (music) and bottom-right (discord, fullscreen). * ------------------------------------------------------------------------- */ .sidebar { position: fixed; bottom: 18px; z-index: 11; display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 300ms ease-out; } body.state-login .sidebar { opacity: 1; pointer-events: auto; } .sidebar.left { left: 18px; } .sidebar.right { right: 18px; align-items: center; } .icon-btn { width: 36px; height: 36px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--panel-border); border-radius: 5px; color: var(--text-label); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: color 120ms, border-color 120ms, background 120ms; text-decoration: none; } .icon-btn:hover { color: var(--brand-gold); border-color: var(--brand-gold); background: rgba(0, 0, 0, 0.7); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn.muted { color: var(--text-dim); opacity: 0.6; } /* Music button: swap between two SVGs based on .muted class. */ #btn-music .icon-off { display: none; } #btn-music.muted .icon-on { display: none; } #btn-music.muted .icon-off { display: inline-block; } #version { font-size: 10px; color: var(--text-dim); margin-left: 8px; font-family: ui-monospace, monospace; letter-spacing: 0.04em; user-select: text; }