@font-face { font-family: "RuneScape"; src: url(fonts/runescape.ttf) format("truetype"); font-display: block; }
@font-face { font-family: "RuneScape Small"; src: url(fonts/runescape_small.ttf) format("truetype"); font-display: block; }
@font-face { font-family: "RuneScape Bold"; src: url(fonts/runescape_bold.ttf) format("truetype"); font-weight: bold; font-display: block; }
@font-face { font-family: "RuneScape Quill"; src: url(fonts/runescape_quill.ttf) format("truetype"); font-display: block; }

html, body { margin: 0; height: 100%; background: #07060f; color: #cfc9ea; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#stage { position: fixed; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); display: flex; align-items: center; justify-content: center; background: #000; }
#game { position: relative; background: #000; overflow: hidden; }
#game .layer { position: absolute; left: 0; top: 0; image-rendering: auto; outline: none; }
#game canvas:focus { outline: none; }

/* boot cover: deep space, faint drifting stars, the Vanguard mark */
#boot { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #171233 0%, #0b0919 45%, #05040c 100%); transition: opacity .5s ease; }
#boot.done { opacity: 0; pointer-events: none; }
#boot .stars { position: absolute; inset: -50%; background-image: radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #cbd5ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 20%, #e0d4ff 50%, transparent 51%), radial-gradient(1px 1px at 10% 70%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 55% 15%, #fff 50%, transparent 51%); background-size: 380px 380px; opacity: .55; animation: drift 120s linear infinite; }
#boot .stars.s2 { background-size: 260px 260px; opacity: .3; animation-duration: 80s; animation-direction: reverse; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, -80px, 0); } }
#boot .panel { position: relative; text-align: center; padding: 28px 36px; border-radius: 18px; background: rgba(12, 10, 26, .55); border: 1px solid rgba(165, 116, 255, .25); box-shadow: 0 0 60px rgba(120, 80, 255, .18), inset 0 0 40px rgba(120, 80, 255, .06); backdrop-filter: blur(6px); min-width: min(72vw, 420px); }
#boot .logo { font-family: "RuneScape Bold", "Segoe UI", sans-serif; font-size: 42px; letter-spacing: 8px; color: #ece8ff; text-shadow: 0 0 18px rgba(165, 116, 255, .9), 0 0 2px #fff; }
#boot .tag { margin-top: 2px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #8d86b3; }
#bar { margin: 22px auto 10px; width: 100%; height: 6px; background: #1b1731; border-radius: 3px; overflow: hidden; border: 1px solid #2c2650; }
#barfill { height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, #b39cff 60%, #e6dcff); box-shadow: 0 0 12px rgba(165, 116, 255, .8); transition: width .25s; }
#msg { font-size: 13px; color: #a79fcb; min-height: 18px; }
#msg a { color: #c8b6ff; }

#ctl { position: fixed; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; gap: 6px; opacity: .55; transition: opacity .2s; }
#ctl:hover { opacity: 1; }
#ctl button { width: 34px; height: 34px; border-radius: 9px; background: rgba(20, 17, 38, .75); border: 1px solid rgba(165, 116, 255, .35); color: #ece8ff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; touch-action: manipulation; }
#ctl button.on { background: rgba(124, 92, 255, .85); }
#ctl button:active { background: rgba(124, 92, 255, .95); }
#kb { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; pointer-events: none; }

@media (pointer: coarse) { #ctl { opacity: .8; left: max(6px, env(safe-area-inset-left)); transform: none; } #ctl button { width: 40px; height: 40px; font-size: 17px; } }

/* portrait cover on phones: the game is a landscape layout */
#rotate { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #171233 0%, #0b0919 45%, #05040c 100%); }
#rotate[hidden] { display: none; }
#rotate .panel { text-align: center; padding: 28px 36px; border-radius: 18px; background: rgba(12, 10, 26, .55); border: 1px solid rgba(165, 116, 255, .25); }
#rotate .logo { font-family: "RuneScape Bold", "Segoe UI", sans-serif; font-size: 36px; letter-spacing: 8px; color: #ece8ff; text-shadow: 0 0 18px rgba(165, 116, 255, .9); }
#rotate .tag { margin-top: 6px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #cfc9ea; }
#rotate .hint { margin-top: 10px; font-size: 12px; color: #8d86b3; }

/* the composer: the soft keyboard's draft in plain sight above it (owner 2026-10-14). Square, one dark edge, flat inset. */
#composer { position: fixed; z-index: 70; display: none; align-items: center; gap: 8px; box-sizing: border-box; height: 46px; padding: 0 6px 0 10px;
  background: #17131f; border: 1px solid #2e2642; border-bottom: 2px solid #050409; color: #f2eee6; font-family: "RuneScape", "Segoe UI", sans-serif; }
#composer.on { display: flex; }
#composer .lbl { color: #e8c86a; font-size: 16px; white-space: nowrap; max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
#composer .txt { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; white-space: pre;
  padding: 0 8px; background: #0b0910; border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); font-size: 19px; color: #ffffff; }
#composer .txt.long { justify-content: flex-end; }
#composer .val { flex: none; }
#composer .caret { flex: none; width: 2px; height: 20px; margin-left: 1px; background: #e8c86a; animation: vgcaret 1s steps(1) infinite; }
@keyframes vgcaret { 50% { opacity: 0; } }
#composer button { flex: none; height: 34px; min-width: 58px; padding: 3px 10px 0; border-radius: 0; border: 1px solid #3a3054; border-bottom: 2px solid #050409;
  background: #2a2140; color: #f2eee6; font-family: "RuneScape", "Segoe UI", sans-serif; font-size: 16px; touch-action: manipulation; }
#composer button.send { background: #4b3a7a; }
#composer button:active { background: #6a54a8; }
#composer button.close { min-width: 40px; font-size: 15px; }