.online-gate {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1fr minmax(390px, 480px);
  align-items: center; gap: clamp(50px, 8vw, 140px); padding: clamp(40px, 7vw, 112px);
  background: #100b10; color: #f2e5de; pointer-events: auto; overflow-y: auto;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; isolation: isolate;
}
.online-gate * { box-sizing: border-box; }
.online-game .save-actions { display: none; }
.online-game [data-screen="dead"] [data-action="start"], .online-game [data-screen="dead"] [data-action="startScavenge"] { display: none; }
.online-game .online-connection[data-status="online"] { display: none; }
.online-gate-art, .online-gate-shade { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.online-gate-art { background: url('./assets/title-background.jpg') 54% center / cover; opacity: .55; filter: saturate(.6); }
.online-gate-shade { background: linear-gradient(90deg, #170b1455, #110b13cc 53%, #110b14f7), linear-gradient(0deg, #120910f0, transparent 50%, #15091080); }
.online-brand { align-self: center; text-shadow: 0 3px 30px #10080c; }
.online-brand > span, .online-brand > strong { display: block; font-family: 'Cormorant Garamond', Georgia, serif; line-height: .88; letter-spacing: -2px; font-weight: 500; }
.online-brand > span { font-size: clamp(56px, 6.6vw, 105px); }
.online-brand > strong { font-size: clamp(72px, 8.5vw, 137px); color: #e4c7be; }
.online-brand > p { margin-top: 33px; font-size: 17px; color: #c89a9f; letter-spacing: 4px; }
.online-account-panel { width: 100%; max-width: 480px; padding: 25px 0; }
.online-account-tabs { display: flex; gap: 32px; border-bottom: 1px solid #c4929b38; }
.online-account-tabs button { color: #bfa6ad; font-size: 20px; border: 0; border-bottom: 2px solid transparent; background: none; min-height: 52px; padding: 10px 0 17px; }
.online-account-tabs button[aria-selected="true"] { border-bottom-color: #d35469; color: #fff0e8; }
.online-account-heading { padding: 32px 0; }
.online-eyebrow { color: #be8e98; font-size: 14px; letter-spacing: 1.9px; }
.online-account-heading h1 { color: #faeae2; font: 500 53px/1.06 'Cormorant Garamond', Georgia, serif; letter-spacing: -1px; margin: 12px 0; }
.online-account-heading p { color: #cbb5b9; font-size: 20px; line-height: 1.5; margin: 0; }
.online-gate form { display: flex; flex-direction: column; }
.online-gate label { color: #e7d3d2; font-size: 18px; margin: 0 0 10px; }
.online-gate input { display: block; width: 100%; border: 1px solid #ac7b854b; border-radius: 3px; background: #100c13aa; color: #f8ebe6; padding: 17px 18px; min-height: 60px; font: inherit; font-size: 20px; box-shadow: none; outline: none; user-select: text; }
.online-gate input::placeholder { color: #9b858e; }
.online-gate input:focus { border-color: #d66f80; box-shadow: 0 0 0 3px #a6324b22; }
.online-gate input[name="username"] { margin-bottom: 24px; }
.online-password-field { position: relative; margin-bottom: 26px; }
.online-password-field input { padding-right: 78px; }
.online-password-field button { position: absolute; top: 0; right: 4px; bottom: 0; min-width: 68px; background: none; border: 0; color: #ccabb4; font-size: 16px; }
.online-gate button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
.online-gate button:hover:not(:disabled) { color: #fff1eb; }
.online-gate button:disabled, .online-gate input:disabled { opacity: .5; cursor: default; }
.online-gate button:focus-visible, .online-gate[data-input="controller"] button:focus { outline: 2px solid #ef9dab; outline-offset: 5px; }
.online-gate .online-auth-submit { display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; min-height: 61px; padding: 17px 22px; background: linear-gradient(105deg, #b92c47, #832038); color: #fff0e9; border: 1px solid #d6556a; border-radius: 3px; font-size: 21px; box-shadow: inset 0 1px 0 #f3a7b135, 0 7px 30px #16091133; }
.online-auth-submit > span:last-child:not(.online-spinner) { margin-left: auto; font-size: 25px; }
.online-auth-error { border-left: 2px solid #e85e79; padding-left: 14px; color: #ffacb9; font-size: 18px; line-height: 1.5; margin: -5px 0 24px; }
.online-auth-note { color: #ab939d; font-size: 16px; line-height: 1.5; margin: 22px 0 0; }
.online-session-check { display: flex; align-items: center; gap: 14px; color: #d1b6bd; font-size: 20px; line-height: 1.5; padding: 20px 0; }
.online-session-retry { min-height: 56px; width: 100%; background: #a3304729; border: 1px solid #a8647666; border-radius: 3px; color: #efd2d5; font-size: 20px; margin-top: 18px; }
.online-spinner { display: inline-block; width: 21px; height: 21px; border: 2px solid #efb8c133; border-top-color: #e2a3ae; border-radius: 50%; animation: realm-spin 900ms linear infinite; flex: 0 0 auto; }
.online-gate-footer { position: absolute; bottom: 27px; left: clamp(40px, 7vw, 112px); right: clamp(40px, 7vw, 112px); display: flex; justify-content: space-between; color: #9c7a89; font-size: 14px; letter-spacing: 1.5px; }
.online-connection { position: fixed; z-index: 80; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; max-width: calc(100vw - 36px); padding: 10px 13px; background: #160e18e8; border: 1px solid #9c687c66; border-radius: 4px; color: #ead0d7; font: 16px/1.4 'Inter', system-ui, sans-serif; pointer-events: auto; box-shadow: 0 5px 24px #08070a55; }
.online-connection-dot { height: 7px; width: 7px; flex: 0 0 auto; border-radius: 50%; background: #df8292; }
.online-connection[data-status="online"], .online-connection[data-status="connected"] { top: auto; bottom: 10px; left: auto; right: 14px; transform: none; background: #160e18c9; font-size: 14px; padding: 7px 11px; }
.online-connection[data-status="online"] .online-connection-dot, .online-connection[data-status="connected"] .online-connection-dot { background: #b9c194; }
.online-connection[data-status="reconnecting"] .online-connection-dot, .online-connection[data-status="connecting"] .online-connection-dot { animation: realm-pulse 1s ease-in-out infinite alternate; }
.online-connection button { color: #dcb2be; background: none; border: 0; border-left: 1px solid #a86f843e; padding: 3px 0 3px 11px; white-space: nowrap; font: inherit; cursor: pointer; }
.online-connection button:hover { color: white; }
.online-connection button:focus-visible { outline: 2px solid #ef9dab; outline-offset: 4px; }
.online-gate [hidden], .online-connection[hidden] { display: none !important; }
@keyframes realm-spin { to { transform: rotate(360deg); } }
@keyframes realm-pulse { to { opacity: .35; } }
@media (max-width: 950px) {
  .online-gate { grid-template-columns: 1fr; gap: 40px; justify-items: center; padding: 50px 30px 90px; }
  .online-brand { width: min(480px, 100%); }
  .online-brand > span { font-size: 57px; }
  .online-brand > strong { font-size: 73px; }
  .online-brand > p { font-size: 14px; margin-top: 20px; }
  .online-gate-art { background-position: 36% center; opacity: .32; }
  .online-gate-shade { background: linear-gradient(0deg, #130c15, #130c15bb 80%); }
  .online-account-panel { padding: 0; }
  .online-gate-footer { position: static; width: min(480px, 100%); gap: 20px; font-size: 12px; }
}
@media (max-width: 480px) {
  .online-gate { padding: 30px 24px; gap: 30px; }
  .online-brand > span { font-size: 49px; }
  .online-brand > strong { font-size: 63px; }
  .online-account-heading { padding: 25px 0; }
  .online-account-heading h1 { font-size: 43px; }
  .online-account-tabs { gap: 27px; }
  .online-account-tabs button { font-size: 19px; }
  .online-connection { width: calc(100vw - 28px); font-size: 15px; }
  .online-connection[data-status="online"], .online-connection[data-status="connected"] { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .online-spinner, .online-connection-dot { animation: none !important; } }