/* Знакомство с живым аулом: только DOM над существующей сценой. */
.welcome { position: fixed; inset: 0; z-index: 30; isolation: isolate; overflow: hidden; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); color: var(--felt, #f4ecdc); font: 600 16px/1.45 Inter, sans-serif; }
.welcome *, .welcome *::before, .welcome *::after { box-sizing: border-box; }
.welcome-spot { position: absolute; border: 2px solid #f3d68a; border-radius: 20px; box-shadow: 0 0 0 200vmax #120e0bbd, 0 0 28px 5px #f2c44070, inset 0 0 18px #f2c44038; pointer-events: none; transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease; }
.welcome-overview .welcome-spot { border-color: #f3d68a40; box-shadow: 0 0 0 200vmax #120e0b80, 0 0 50px #f2c44020; border-radius: 42%; }
.welcome-card { position: absolute; width: min(520px, calc(100% - 24px)); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid #c4a464; border-radius: 24px; background: rgb(var(--pan2, 20 13 8) / .98); box-shadow: 0 18px 65px #0006; }
.welcome-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 10px; background: var(--horn) repeat-x center / 18px 10px; transform: scaleY(-1); }
.welcome-kicker { margin: 0 0 10px; color: #edce89; font: 800 11px/1.4 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.welcome-title { margin: 0; color: #fff3da; font: 700 clamp(20px, 3vw, 26px)/1.3 Lora, Georgia, serif; text-wrap: pretty; }
.welcome-progress { display: flex; gap: 7px; margin: 18px 0; }
.welcome-dot { width: 7px; height: 7px; border-radius: 20px; background: #f4ecdc40; transition: width .2s ease; }
.welcome-dot.on { width: 28px; background: #f2c440; box-shadow: 0 0 12px #f2c44055; }
.welcome-example { margin-top: 14px; padding: 10px; border: 1px dashed #c4a464; border-radius: 12px; color: #ffe5a6; font-size: 13px; }
.welcome-actions { display: flex; align-items: center; gap: 10px; }
.welcome-primary, .welcome-secondary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none; font: 800 15px/1.3 Inter, sans-serif; }
.welcome-primary { flex: 1; color: #2a1a0c; background: linear-gradient(135deg, #ffe398, #edbb36); box-shadow: 0 4px 0 #997128, 0 6px 22px #e1b12c26; }
.welcome-secondary { color: #e4d6bd; background: transparent; font-weight: 600; }
.welcome-primary:hover { filter: brightness(1.08); }
.welcome-secondary:hover { background: #f4ecdc12; }
.welcome-primary:active { transform: translateY(2px); }
.welcome :focus-visible { outline: 3px solid #fff0bb; outline-offset: 3px; }
.welcome-raid { display: flex; align-items: center; justify-content: center; background: #110d09c9; }
.welcome-raid::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px 24px #cc48296b; animation: welcome-beacon 1.8s ease-in-out 3; }
.welcome-alarm { position: relative; width: min(480px, 100%); max-height: 100%; padding: 30px 24px 18px; text-align: center; border-color: #d8ac62; background: radial-gradient(ellipse at top, #74402c 0, rgb(var(--pan2)) 72%); animation: welcome-arrive .45s ease-out both; }
.welcome-alarm .welcome-title { font-size: clamp(28px, 5vw, 38px); line-height: 1.14; animation: welcome-shake .48s ease-in-out .45s; }
.welcome-crest { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 18px; border: 1px solid #edce8980; border-radius: 50%; background: #edce8912; box-shadow: 0 0 0 7px #edce8909; font-size: 40px; }
.welcome-raid-text { margin: 18px 0 24px; color: #ecdfc8; line-height: 1.5; }
.welcome-alarm .welcome-primary { width: 100%; min-height: 60px; font-size: 18px; }
.welcome-alarm .welcome-secondary { margin: 10px auto 0; min-width: 100px; text-decoration: underline; text-underline-offset: 4px; }
@keyframes welcome-beacon { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes welcome-shake { 20%, 60% { transform: translateX(-2px) rotate(-.3deg); } 40%, 80% { transform: translateX(2px) rotate(.3deg); } }
@keyframes welcome-arrive { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 400px) { .welcome-card { padding: 22px 18px 18px; } .welcome-primary, .welcome-secondary { padding-inline: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .welcome *, .welcome::before { animation: none !important; transition: none !important; }
  .welcome-raid::before { display: none; }
  .welcome-primary:active { transform: none; }
}