@import url('ui-fonts.css?v=0.35.0');
/* Base game layout; Launch Party supplies the approved player shell. */
:root {
  --accent: #7cff5a;
  --accent-dark: #1f4d14;
  --gold: #ffd166;
  --bg: #07090d;
  --panel: #0b0e14;
  --panel2: #141821;
  --ink: #f4f4f4;
  --muted: #8b93a3;
  --edge: #000;
  --px: 4px;
  --notch: polygon(0 12px, 12px 12px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 12px), 0 calc(100% - 12px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: Nunito, sans-serif; font-size: 20px; overflow: hidden; -webkit-user-select: none; user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; }
.screen.center { display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; overscroll-behavior: contain; background: repeating-linear-gradient(0deg, rgba(124, 255, 90, 0.04) 0 2px, transparent 2px 6px), radial-gradient(ellipse at 50% 30%, rgba(124, 255, 90, 0.14), rgba(7, 9, 13, 0.75) 60%); pointer-events: auto; }
[hidden] { display: none !important; }

.px { font-family: Launch, Nunito, sans-serif; }
.logo { color: var(--accent); font-size: 18px; text-shadow: 3px 3px 0 var(--accent-dark), 0 0 14px rgba(124, 255, 90, 0.5); letter-spacing: 1px; }
.logo.big { font-size: 28px; margin: 6px 0 10px; text-shadow: 4px 4px 0 var(--accent-dark), 0 0 22px rgba(124, 255, 90, 0.55); }
h2 { font-family: Launch, sans-serif; font-size: 24px; margin: 12px 0 14px; color: var(--gold); text-shadow: 4px 4px 0 #5a3d00; line-height: 1.3; }

.card { background: var(--panel); border: var(--px) solid var(--accent); padding: 22px; width: min(540px, 100%); text-align: center; clip-path: var(--notch); box-shadow: inset 0 0 0 4px #10300a; margin: auto; flex: none; position: relative; }
.card::after { content: ''; position: absolute; inset: 8px; border: 2px dashed rgba(124, 255, 90, 0.18); pointer-events: none; }
.tagline { font-family: Launch, sans-serif; font-size: 11px; color: #fff; margin: 0 0 10px; line-height: 1.6; text-shadow: 2px 2px 0 var(--accent-dark); }
.pitch { margin: 8px 0 14px; color: var(--muted); font-size: 18px; letter-spacing: 0.5px; line-height: 1.25; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 12px 0; }
.muted { color: var(--muted); }
.small { font-size: 15px; line-height: 1.3; }
.err { color: #ff6b6b; font-size: 16px; min-height: 20px; margin: 4px 0; }

button { pointer-events: auto; cursor: pointer; font-family: Launch, sans-serif; font-size: 11px; line-height: 1; letter-spacing: 0.5px; border-radius: 10px; padding: 14px 16px; border: var(--px) solid var(--edge); background: var(--panel2); color: var(--ink); box-shadow: 4px 4px 0 var(--edge), inset -4px -4px 0 rgba(0, 0, 0, 0.45), inset 4px 4px 0 rgba(255, 255, 255, 0.08); transition: none; }
button:hover { filter: brightness(1.1); }
button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--edge), inset -4px -4px 0 rgba(0, 0, 0, 0.45), inset 4px 4px 0 rgba(255, 255, 255, 0.08); }
button.primary { background: var(--accent); color: #04110a; box-shadow: 4px 4px 0 var(--accent-dark), inset -4px -4px 0 rgba(0, 0, 0, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.28); }
button.primary:active { box-shadow: 0 0 0 var(--accent-dark), inset -4px -4px 0 rgba(0, 0, 0, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.28); }
button:disabled { opacity: 0.55; cursor: default; }
input { pointer-events: auto; font-family: Nunito, sans-serif; font-size: 22px; padding: 10px 14px; border-radius: 10px; border: var(--px) solid var(--edge); background: #05070a; color: var(--ink); min-width: 0; width: 100%; box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px #1d2430; }
input:focus { outline: none; box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.6), 0 0 0 4px var(--accent); }
input::placeholder { color: #4b5261; text-transform: uppercase; }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 10px 0; }

/* HUD */
#hud .brand { position: absolute; left: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
#hud .brand .muted { font-size: 18px; }
#hud .stats { position: absolute; right: 16px; top: 16px; font-family: Launch, sans-serif; font-size:11px; color: var(--muted); text-align: right; line-height: 1.6; }
#hud .stats #online { color: var(--accent); }
#hud .controls { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 14px; justify-content: center; font-size: 16px; color: var(--muted); }
#hud .controls b { color: var(--accent); font-family: Launch, sans-serif; font-size:11px; }
@media (pointer: coarse) { #hud .controls { display: none; } }
#stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: var(--px) solid rgba(124, 255, 90, 0.5); background: rgba(7, 9, 13, 0.35); pointer-events: none; }
#stick .knob { position: absolute; left: 36px; top: 36px; width: 40px; height: 40px; background: var(--accent); border: var(--px) solid var(--edge); }
#jump { position: absolute; right: 22px; bottom: 34px; padding: 22px 20px; }
.ver { position: absolute; right: 10px; bottom: 6px; font-family: Launch, sans-serif; font-size:11px; color: #3b4150; }

/* Keep the world visible while choosing an identity. */
#start.screen { justify-content: flex-start; padding: 40px; background: linear-gradient(90deg, rgba(7,9,13,.72), transparent 75%); }
#start .card { width: 410px; margin: 0; text-align: left; padding: 28px; border-color: #718681; background: rgba(11,18,25,.94); box-shadow: inset 0 0 0 4px #24352f; }
#start .card::after { display: none; }
#start .logo.big { font-size: 23px; margin-bottom: 22px; }
#start .tagline { color: #e1e9dc; font-size:11px; line-height: 1.9; }
#start .pitch { margin: 22px 0; font-size: 18px; color: #b7c4c8; line-height: 1.4; }
/* The first line is a label for the body copy, not a plaza name: pixel font, small caps, accent colour. */
#start .pitch-lead { display: block; font-family: Launch, sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #53edff; margin-bottom: 10px; }
#start .btns button { width: 100%; min-height: 52px; }
input::placeholder { color: #8c9da7; }
button:focus-visible { outline: 3px solid #fff1c8; outline-offset: 5px; }
#hud .brand, #hud .stats { padding: 12px; background: rgba(11,18,25,.82); border-bottom: 3px solid #657d75; }
.destination { position: absolute; top: 94px; left: 28px; display: flex; flex-direction: column; gap: 9px; text-shadow: 2px 2px #07090d; }
.destination .px { font-size:11px; color: #fff1c8; }
.destination span + span { font-size: 16px; color: #d3ded5; }
@media (max-width: 600px) {
  #start.screen { padding: 16px; align-items: flex-end; background: linear-gradient(0deg, rgba(7,9,13,.6), transparent); }
  #start .card { width: 100%; padding: 22px; }
  #start .logo.big { font-size: 20px; margin-bottom: 14px; }
  #start .pitch { margin: 14px 0; font-size: 18px; }
  #hud .brand { left: 10px; top: 10px; }
  #hud .brand .logo { font-size: 12px; }
  #hud .stats { right: 10px; top: 80px; font-size:11px; }
  .destination { left: 22px; top: 137px; }
  .destination span + span { font-size: 13px; }
}

/* Festival controls remain reachable without covering the centre of the plaza. */
#partyControls { position:absolute; right:22px; bottom:38px; display:flex; gap:10px; }
#partyControls button { min-height:44px; font-size:11px; border:2px solid #426b87; background:#101b30; color:#a9eaf4; padding:12px; }
#partyControls button[aria-pressed="true"] { border-color:#ff58c7; color:#fff; box-shadow:0 0 18px #ff58c733; }
#start .card { background:rgba(12,17,36,.93); border-color:#55b2c2; box-shadow:inset 0 0 0 3px #1d304b; }
#start .tagline { font-size:26px; line-height:1.55; color:#edf5ff; text-shadow:3px 3px #6c3269; }
#start .logo.big { font-size:20px; margin-bottom:26px; }
#start .pitch { color:#b2c2de; font-size:20px; }
#start.screen { background:linear-gradient(90deg,rgba(9,13,30,.75),transparent 72%); }
#hud .brand, #hud .stats { background:rgba(10,16,33,.83); border-bottom-color:#4694a1; }
#hud .controls { bottom:12px; }
@media(max-width:600px) {
  #partyControls { right:14px; bottom:112px; flex-direction:column; gap:8px; }
  #partyControls button { width:98px; padding:10px 5px; font-size:11px; }
  #start .tagline { font-size:22px; line-height:1.5; }
  #start .logo.big { font-size:18px; margin-bottom:16px; }
  #start .pitch { font-size:18px; margin:12px 0; }
  #start .card { padding:20px; }
  #start.screen { background:linear-gradient(0deg,rgba(9,13,30,.65),transparent 90%); }
}

#petUgly[hidden] { display:none; }
#partyControls #petUgly { color:#7cff5a; border-color:#7cff5a; }
#petStatus { position:absolute; right:22px; bottom:100px; color:#7cff5a; background:#131b30; font-size:20px; padding:4px 8px; pointer-events:none; }
#petStatus:empty { display:none; }
@media(max-width:700px) { #petStatus { right:14px; bottom:340px; font-size:18px; } }

.owner-link { display:inline-block; margin-top:18px; color:#53edff; font-size:18px; pointer-events:auto; text-underline-offset:4px; }
.owner-link:focus-visible { outline:3px solid #ffd166; outline-offset:5px; }

.portal-link{position:absolute;bottom:140px;left:50%;transform:translateX(-50%);background:#7cff5a;color:#10152e;padding:18px 22px;border:3px solid #10152e;box-shadow:0 0 0 2px #7cff5a;font:12px Launch;text-align:center;text-decoration:none;pointer-events:auto;max-width:85%;line-height:1.7}.portal-link[hidden]{display:none}.home-link{position:absolute;top:152px;left:16px;padding:12px;background:#10152e;color:#53edff;font:12px Launch;pointer-events:auto;z-index:5}a:focus-visible{outline:3px solid #ffd166;outline-offset:4px}

@media(max-width:700px){.home-link{top:185px;padding:14px;font-size:11px}}

@media(max-width:600px){.portal-link{bottom:285px;width:calc(100% - 40px);max-width:350px;padding:16px;font-size:11px}}