/* M4-P2 access-screen material slice (local; pending Codex review).
   Main Menu (#screenLanding), Host Login (#screenHostLogin) and the dynamically
   built Join screen (#playerContainer .joinScreen). Same approach and art as
   lobby-materials.css: nine-sliced ui-kit derivatives behind live HTML, with
   solid CSS fallbacks. Creator-approved landing layout (no box behind the
   title/logo), castle framing, logo and knight poses are unchanged.
   arena-controls.css resets border-image through `border: ... !important`, so
   every button border-image below is !important. */
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) {
  --lm-panel-art: url('ui-kit-navy-panel.webp');
  --lm-gold-art: url('ui-kit-gold-button.webp');
  --lm-navy-art: url('ui-kit-navy-button.webp');
  --lm-ink: #172a4f;
  --lm-pale: #fff7e5;
  --lm-navy: #17418f;
  --lm-rim: #d9a441;
  --lm-rail: linear-gradient(145deg, #fff2bb 0%, #eac262 27%, #9c631b 58%, #f9d875 79%, #b17b2f 100%);
  --lm-cream: linear-gradient(170deg, #fffdf4, #f4e7cc);
  --lm-ledge: #8a5a14;
  --lm-panel-rim: 36px;
}

/* ===== Gold primary buttons ===== */
#screenLanding .epicBtn,
#screenHostLogin .loginBtn.primary,
#playerContainer .joinScreen .joinBtn.primary {
  border: 4px solid #c08a2a !important;
  border-image: var(--lm-gold-art) 56 76 fill / 22px 30px stretch !important;
  background: #f8cf4f padding-box !important;
  color: var(--lm-ink) !important;
  text-shadow: 0 1px 0 #fff8 !important;
  border-radius: 999px;
  box-shadow: var(--lm-state-shadow, 0 4px 0 var(--lm-ledge), 0 9px 16px #07182d4d) !important;
  min-height: 52px;
}
/* The two Main Menu tiles are taller: bigger corners, straight sides. */
#screenLanding .epicBtn {
  border-image-width: 28px 38px !important;
  border-radius: 30px;
  box-shadow: var(--lm-state-shadow, 0 5px 0 var(--lm-ledge), 0 12px 20px #132c4866) !important;
}
#screenLanding .epicBtn :is(.btnText, .btnSub) { color: var(--lm-ink) !important; text-shadow: 0 1px 0 #fff8 !important; }

/* ===== Navy secondary: character pause control, Create Account, Restore ===== */
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) .landingMotion,
#screenHostLogin .loginBtn.secondary {
  border: 4px solid #c08a2a !important;
  border-image: var(--lm-navy-art) 56 76 fill / 20px 27px stretch !important;
  background: #123c8a padding-box !important;
  color: var(--lm-pale) !important;
  border-radius: 999px;
  box-shadow: var(--lm-state-shadow, 0 3px 0 #6b4712, 0 7px 12px #07182d4d) !important;
  min-height: 44px;
  padding: 8px 18px;
}
#screenHostLogin .loginBtn.secondary { min-height: 52px; }

/* ===== Interaction states (shared) ===== */
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) button { transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) button:hover:not(:disabled) { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); }
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) button:active:not(:disabled) {
  filter: brightness(.95);
  transform: translateY(3px);
  --lm-state-shadow: 0 1px 0 #6b4712, 0 3px 6px #07182d40;
}
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) button:is(:disabled, .disabled-permanent) {
  filter: grayscale(.85) brightness(.92);
  opacity: .65 !important;
  cursor: not-allowed;
  transform: none;
  --lm-state-shadow: none;
}
/* The old hover outline on Join looked like a focus ring; keyboard focus keeps its ring. */
#playerContainer .joinScreen .joinBtn.primary:hover:not(:focus-visible) { outline: none; }

/* Focus on the open castle backdrop: white gap + dark ring, readable on sky, stone or banners. */
:is(#screenLanding .epicBtn, :is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) .landingMotion):focus-visible {
  outline: 3px solid #0b2a6b;
  outline-offset: 3px;
  --lm-state-shadow: 0 0 0 3px #fff;
}
#screenLanding .socialLink:focus-visible { outline: 3px solid #0b2a6b; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
/* Inside the navy cards the existing gold ring (#ffdc7a) stays; mouse clicks stay clean. */
:is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) :is(button, a):focus:not(:focus-visible) { outline: none; }

/* ===== Main Menu social links: original icons, coordinated gold ring only ===== */
#screenLanding .socialLink {
  border: 3px solid transparent;
  background: radial-gradient(circle at 35% 30%, #3a6fc0, #17304e 70%) padding-box, var(--lm-rail) border-box;
  color: #fff;
}

/* ===== Host Login and Join cards: navy/gold panel art ===== */
#screenHostLogin .loginCard,
#playerContainer .joinScreen .joinCard {
  border: 12px solid var(--lm-rim);
  border-image: var(--lm-panel-art) 72 fill / var(--lm-panel-rim) stretch;
  background: var(--lm-navy) padding-box;
  border-radius: 21px;
  box-shadow: 0 5px 0 #6b4712, 0 18px 40px #0a203c80;
  padding: 26px 28px;
}
#screenHostLogin .loginTitle { color: #ffe39b; }
#screenHostLogin :is(.loginSub, .loginFooter p), #playerContainer .joinScreen :is(.joinSubtext, .joinTips) { color: #e5ecf5; }
#screenHostLogin .loginFooter a, #screenHostLogin .comingSoonText a { color: #f5dc9a; }
/* Join labels and help were translucent white (40-70%); use the same solid pale tones as Host Login. */
#playerContainer .joinScreen .joinField label { color: #dce7f4; }
#playerContainer .joinScreen .joinTips span { color: #e5ecf5; }
#screenHostLogin .loginFooter, #playerContainer .joinScreen .joinTips { border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, #eac262, transparent) 1; }

/* Cream fields with a gold rail; the existing gold focus ring stays visible on navy. */
#screenHostLogin .loginInput,
#playerContainer .joinScreen .joinInput {
  border: 2px solid transparent;
  background: var(--lm-cream) padding-box, var(--lm-rail) border-box;
  color: var(--lm-ink);
  border-radius: 12px;
  min-height: 48px;
  box-shadow: inset 0 2px 4px #142c5526;
}
:is(#screenHostLogin, #playerContainer .joinScreen) :is(.loginInput, .joinInput):focus-visible { outline: 3px solid #ffdc7a; outline-offset: 3px; }

/* Settings-style inset for the registration notice. */
#screenHostLogin .comingSoonBanner {
  background: #0b265c8c;
  border: 1px solid #e3b95a73;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #ffffff14;
}
#screenHostLogin .comingSoonTitle { color: #ffe39b; }

/* Messages: cream boxes with a meaning stripe, readable on navy. */
#screenHostLogin .loginError,
#playerContainer .joinScreen .joinStatus:is(.error, .connecting, .success) {
  background: #fff6de;
  color: var(--lm-ink);
  border: 2px solid #e3b95a;
  border-left-width: 6px;
  border-radius: 12px;
  text-align: left;
}
#screenHostLogin .loginError, #playerContainer .joinScreen .joinStatus.error { background: #fff1ee; color: #7a1f2a; border-color: #c0525a; }
#playerContainer .joinScreen .joinStatus.success { border-color: #3f8a5a; color: #1d4d2f; background: #eef8f0; }

/* Back links: 44px tall tap area without changing their look. */
:is(#screenHostLogin .loginBack, #playerContainer .joinScreen .joinBack) a { display: inline-block; padding: 12px 10px; min-height: 44px; }

@media (max-width: 1000px) {
  :is(#screenHostLogin .loginCard, #playerContainer .joinScreen .joinCard) { padding: 20px; }
}
/* Pre-existing (also live): the 48px letter-spaced WELCOME overflowed 320-340px phones
   by up to 29px sideways. Scale it with the screen below 400px only. */
@media (max-width: 400px) {
  #screenLanding .titleLine1 { font-size: min(48px, 12.5vw); letter-spacing: min(8px, 1.4vw); }
}
@media (max-width: 600px) {
  :is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) { --lm-panel-rim: 28px; }
  :is(#screenHostLogin .loginCard, #playerContainer .joinScreen .joinCard) { border-width: 9px; border-radius: 16px; padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#screenLanding, #screenHostLogin, #playerContainer .joinScreen) button { transition: none !important; transform: none !important; }
}

/* M4-P4 farewell: compact confirmation after a confirmed Leave Game (one visit only; the gate knight
   above shows the Farewell pose). It stands in for the greeting line under ENTER THE ARENA, so the
   form stays where it was. Same cream message box as the join status; round navy/gold close. */
#playerContainer .joinScreen .joinFarewell {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0 0 0 10px;
  background: #fff6de; color: var(--lm-ink); border: 2px solid #e3b95a; border-left-width: 6px; border-radius: 12px; text-align: left;
}
#playerContainer .joinScreen .joinFarewellText { flex: 1 1 auto; margin: 0; font-weight: 700; line-height: 1.35; color: var(--lm-ink); }
#playerContainer .joinScreen .joinFarewellDismiss {
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; cursor: pointer;
  border: 3px solid transparent !important; border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #4f86d8, #17418f 60%, #0b2a6b) padding-box, var(--lm-rail) border-box !important;
  color: #fff7e5 !important; font-size: 16px; line-height: 1; box-shadow: 0 2px 0 #6b4712 !important;
}
#playerContainer .joinScreen .joinFarewellDismiss:focus-visible { outline: 3px solid #17418f; outline-offset: 2px; }