/* Pre-game screens: login / registration, character select, session resume card, reconnect curtain. The 3D scene (dusk sky, Kaslow skyline) is
   drawn behind the DOM, so the backdrop is only a soft vignette and the cards are semi-opaque lavender paper in a steel frame. */
@import url('charselect.css'); /* the character screen */
#lobby { position: absolute; inset: 0; overflow: auto; background: radial-gradient(ellipse at 50% 38%, rgba(20, 10, 4, 0), rgba(20, 10, 4, 0.55) 85%), linear-gradient(180deg, rgba(20, 10, 4, 0.1), rgba(20, 10, 4, 0.5)); }
.flow-wrap { max-width: 520px; margin: 0 auto; padding: 8vh 16px 40px; }
.flow-wrap.wide { max-width: 1020px; padding-top: 22px; }
.flow-card { position: relative; padding: 26px 28px; text-align: center; color: var(--ink); border-radius: 8px; backdrop-filter: blur(3px);
  background: repeating-linear-gradient(45deg, rgba(68, 64, 96, 0.06) 0 2px, transparent 2px 7px), linear-gradient(rgba(219, 218, 230, 0.94), rgba(174, 170, 198, 0.94));
  box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 5px #4c476b, 0 0 0 6px var(--accent), 0 0 0 8px var(--surface-deep), inset 0 0 0 1px #eae9f0, inset 0 0 0 3px rgba(96, 90, 136, 0.5), 0 14px 44px rgba(0, 0, 0, 0.55); }
.flow-card .logo { font-size: clamp(26px, 3vw, 34px); margin-bottom: 4px; color: #282638; text-shadow: 0 1px 0 #dddce7, 0 2px 6px rgba(143, 138, 177, 0.5); }
.flow-card .logo b { color: #b6560a; }
.flow-card .sub { margin-bottom: 14px; font-size: var(--fs-strong); }
.flow-card .mute, .flow-wrap .mute { color: #55526d; }
.flow-tabs { display: flex; gap: 6px; margin: 6px 0 14px; }
.flow-tab { flex: 1; padding: 8px 10px; border-radius: 10px 10px 0 0; font-weight: 800; color: var(--ink); background: linear-gradient(#b6b3cc, #9591b2); border: 2px solid #524d73; border-bottom: 0; }
.flow-tab.on { background: linear-gradient(#dfdee9, #c8c5d9); box-shadow: inset 0 4px 0 #908bb2; }
.flow-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.flow-form input[type="text"], .flow-form input[type="password"] { width: 100%; padding: 11px 12px; font-size: calc(15px * var(--ui-text)); }
.flow-form .row-check { margin: 2px 0; font-size: var(--fs-strong); color: #423f5c; }
.flow-msg { min-height: 18px; color: #b3262b; font-weight: 700; font-size: var(--fs-strong); text-align: center; }
.flow-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.flow-spin { width: 34px; height: 34px; margin: 14px auto; border-radius: 50%; border: 4px solid rgba(82, 77, 115, 0.3); border-top-color: var(--accent-lo); animation: flowspin 0.9s linear infinite; }
@keyframes flowspin { to { transform: rotate(360deg); } }
.flow-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; padding: 6px 14px; border-radius: 8px; background: linear-gradient(rgba(49, 46, 68, 0.9), rgba(19, 18, 26, 0.92)); box-shadow: var(--bevel); }
.flow-head .logo { font-size: calc(26px * var(--ui-text)); margin: 0; }
.flow-head .sub { flex: 1; color: var(--muted); }
.btn.small { padding: 3px 10px; font-size: var(--fs-body); margin-top: 4px; }
.cc-art { flex: none; align-self: center; image-rendering: auto; }
.reconnect { position: absolute; inset: 0; z-index: var(--z-flow); background: rgba(15, 8, 3, 0.78); display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.reconnect-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 34px; border-radius: 8px; text-align: center; color: var(--ink); background: linear-gradient(#d9d7e4, #b3afca);
  box-shadow: 0 0 0 2px var(--surface-deep), 0 0 0 5px #4c476b, 0 0 0 6px var(--accent), 0 0 0 8px var(--surface-deep), 0 14px 40px rgba(0, 0, 0, 0.6); }
.reconnect-card b { font-size: calc(20px * var(--ui-text)); color: #433e5e; }
.reconnect-card .btn { margin-top: 8px; }