/* 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 parchment in a bronze + gold 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(120, 90, 40, 0.06) 0 2px, transparent 2px 7px), linear-gradient(rgba(242, 232, 206, 0.94), rgba(214, 196, 154, 0.94));
  box-shadow: 0 0 0 2px var(--wood-dark), 0 0 0 5px #8a5a28, 0 0 0 6px var(--gold), 0 0 0 8px var(--wood-dark), inset 0 0 0 1px #fff7da, inset 0 0 0 3px rgba(168, 116, 58, 0.5), 0 14px 44px rgba(0, 0, 0, 0.55); }
.flow-card .logo { font-size: clamp(26px, 3vw, 34px); margin-bottom: 4px; color: #4a2f14; text-shadow: 0 1px 0 #fff3c4, 0 2px 6px rgba(241, 192, 74, 0.5); }
.flow-card .logo b { color: #b6560a; }
.flow-card .sub { margin-bottom: 14px; font-size: 13px; }
.flow-card .mute, .flow-wrap .mute { color: #7a6544; }
.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(#d9c9a6, #c3ae80); border: 2px solid #8a6636; border-bottom: 0; }
.flow-tab.on { background: linear-gradient(#fff3c8, #f6e3a8); box-shadow: inset 0 4px 0 #f1b84c; }
.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: 15px; }
.flow-form .row-check { margin: 2px 0; font-size: 13px; color: #6a5230; }
.flow-msg { min-height: 18px; color: #b3262b; font-weight: 700; font-size: 13px; 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(138, 102, 54, 0.3); border-top-color: var(--gold-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(84, 56, 30, 0.9), rgba(34, 20, 10, 0.92)); box-shadow: var(--bevel); }
.flow-head .logo { font-size: 26px; margin: 0; }
.flow-head .sub { flex: 1; color: var(--muted); }
.btn.small { padding: 3px 10px; font-size: 12px; margin-top: 4px; }
.cc-art { flex: none; align-self: center; image-rendering: auto; }
.reconnect { position: absolute; inset: 0; z-index: 90; 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(#f1e6ca, #d9c8a0);
  box-shadow: 0 0 0 2px var(--wood-dark), 0 0 0 5px #8a5a28, 0 0 0 6px var(--gold), 0 0 0 8px var(--wood-dark), 0 14px 40px rgba(0, 0, 0, 0.6); }
.reconnect-card b { font-size: 20px; color: #7a4c22; }
.reconnect-card .btn { margin-top: 8px; }