/* Online arrival card, scoped away from the local character selection. */
#game #class-screen:has(#online-entry) {
  padding:32px 20px;
  background:linear-gradient(180deg,#10241c66,#0b1c17bb),url('/games/main/assets/environment/world-maps-v1/training-village.png') center/cover;
  align-items:center;
}
#game #online-entry {
  box-sizing:border-box;width:min(440px,100%);margin:auto;padding:26px 36px 24px;
  border:1px solid #c5a66b80;border-radius:24px;
  background:radial-gradient(ellipse at top,#3d51423b,transparent 65%),linear-gradient(145deg,#203a30f5,#10241ef7);
  box-shadow:0 24px 90px #03100ccc,inset 0 0 0 5px #debe7920,inset 0 1px 0 #ffe7b440;
  color:#f5ecd6;text-align:center;backdrop-filter:blur(16px);
}
#game #online-entry .online-brand {display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:20px}
#game #online-entry .online-brand img {width:160px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 10px #0006)}
#game #online-entry .online-badge {display:inline-flex;align-items:center;gap:7px;color:#c6d9ba;font-size:10px;letter-spacing:3px}
#game #online-entry .online-badge::before {content:'';width:5px;height:5px;border-radius:50%;background:#b3cf8f;box-shadow:0 0 8px #b3cf8f66}
#game #online-entry h2 {font-size:clamp(22px,4vw,27px);line-height:1.5;margin:0 0 6px;letter-spacing:-.4px;color:#fff0cd}
#game #online-entry .online-intro {font-size:13px;line-height:1.8;color:#b9c9ba;margin:0 0 24px}
#game #online-entry .online-tabs {display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#061a145c;border:1px solid #d4c4951c;border-radius:12px;margin-bottom:24px}
#game #online-entry button {font:inherit;cursor:pointer;border-radius:9px;min-height:44px;transition:background .16s,border-color .16s,box-shadow .16s}
#game #online-entry .online-tabs button {border:1px solid transparent;background:transparent;color:#a7bbae;font-size:13px;font-weight:600;box-shadow:none}
#game #online-entry .online-tabs button[aria-pressed=true] {background:#52645155;border-color:#d8c18d55;color:#ffeac0;box-shadow:0 2px 6px #0002}
#game #online-entry .online-form {display:grid;gap:17px;text-align:left}
#game #online-entry .online-field {display:grid;gap:8px;font-size:12px;font-weight:600;color:#ddd9c4;text-align:left}
#game #online-entry input,#game #online-entry select {box-sizing:border-box;width:100%;min-width:0;min-height:48px;padding:12px 14px;border:1px solid #9cae9655;border-radius:10px;background:#081c1680;color:#f8f0dc;font:inherit;font-size:16px;box-shadow:inset 0 2px 4px #0002;outline:none}
#game #online-entry input::placeholder {color:#849a8d;font-size:13px;opacity:1}
#game #online-entry input:focus,#game #online-entry select:focus {border-color:#dcc28a;box-shadow:0 0 0 3px #dcc28a20}
#game #online-entry button:focus-visible,#game #online-entry a:focus-visible {outline:2px solid #efd497;outline-offset:4px}
#game #online-entry .online-primary {width:100%;min-height:50px;margin-top:5px;border:1px solid #f1dba2;background:linear-gradient(180deg,#eed39a,#c6a56c);color:#253428;font-size:14px;font-weight:700;box-shadow:0 4px 14px #0003,inset 0 1px 0 #fff6}
#game #online-entry .online-primary:hover {background:linear-gradient(180deg,#f7e1b2,#dfbb7a);box-shadow:0 4px 18px #e3c58b22}
#game #online-entry button:disabled {cursor:wait;opacity:.55}
#game #online-entry .online-status {font-size:12px;line-height:1.7;color:#f0cb97;margin:12px 0;overflow-wrap:anywhere}
#game #online-entry .online-status:empty {display:none}
#game #online-entry .online-footer {border-top:1px solid #dbc28d26;margin-top:24px;padding-top:18px}
#game #online-entry .online-footer a {display:inline-block;padding:5px;color:#d6d8bd;font-size:12px;text-decoration:none}
#game #online-entry .online-footer a:hover {color:#ffe7b0;text-decoration:underline}
#game #online-entry .online-footer p {font-size:10px;line-height:1.8;color:#91a798;margin:6px 0 0}
#game #online-entry .online-characters {display:grid;gap:10px;margin-bottom:22px}
#game #online-entry .online-characters button {text-align:left;padding:12px 16px;background:#a3b88b14;border:1px solid #b6c79c55;color:#f3e4bf}
#game #online-entry .online-characters p {font-size:13px;color:#b9c9ba}
#game #online-entry h3 {margin:0;font-size:14px;color:#e7d4a5}
#game #online-entry .online-form + button {margin-top:18px;padding:8px 16px;background:transparent;border:1px solid #adc09444;color:#c3ceba;font-size:12px}
@media(max-width:480px) {
  #game #class-screen:has(#online-entry) {padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
  #game #online-entry {padding:22px 24px;border-radius:20px}
}
@media(max-height:700px) {
  #game #class-screen:has(#online-entry) {align-items:flex-start}
  #game #online-entry .online-brand {margin-bottom:12px}
  #game #online-entry .online-brand img {width:120px;height:60px}
  #game #online-entry .online-intro {margin-bottom:16px}
  #game #online-entry .online-tabs {margin-bottom:16px}
}

#game #online-entry .online-back {width:100%;padding:8px 12px;background:transparent;border:1px solid #adc09444;color:#c3ceba;font-size:13px}
#game #online-entry .online-back:hover {background:#a3b88b14;color:#ffe7b0}