.realm-queue { color: #eee8dd; text-align: center; padding: 0 6px 4px; }
.realm-queue__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; color: #d4b777; font-size: 9px; letter-spacing: .22em; font-weight: 600; }
.realm-queue__eyebrow span { height: 1px; width: 24px; background: linear-gradient(90deg, transparent, #b58d47); }
.realm-queue__eyebrow span:last-child { transform: rotate(180deg); }
.realm-queue h1 { margin: 12px 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 6vw, 36px); font-weight: 400; color: #f3dfb0; line-height: 1.15; }
.realm-queue__intro { max-width: 360px; margin: 0 auto; font-size: 13px; line-height: 1.7; color: #c3beb6; }
.realm-queue__portal { position: relative; width: 138px; height: 138px; margin: 18px auto 4px; display: grid; place-items: center; }
.realm-queue__orbit { position: absolute; inset: 2px; border: 1px solid #b58d4730; border-radius: 50%; box-shadow: 0 0 40px #b58d4712, inset 0 0 30px #b58d470c; }
.realm-queue__orbit::after { content: ''; position: absolute; inset: 9px; border: 1px dashed #b58d4740; border-radius: 50%; }
.realm-queue__arch { display: grid; place-items: center; width: 65px; height: 82px; border-radius: 34px 34px 5px 5px; border: 1px solid #d6b46a75; background: radial-gradient(ellipse at bottom, #d0ac4c30, #20283420 75%); color: #e4c785; box-shadow: 0 0 26px #c8a45614; }
.realm-queue__spark { position: absolute; width: 4px; height: 4px; background: #f1d396; transform: rotate(45deg); box-shadow: 0 0 9px #e8c27c; animation: realm-queue-glow 3s ease-in-out infinite alternate; }
.realm-queue__spark--one { top: 16px; right: 26px; }
.realm-queue__spark--two { left: 16px; bottom: 30px; animation-delay: 1s; }
.realm-queue__spark--three { right: 8px; bottom: 44px; width: 2px; height: 2px; animation-delay: 2s; }
.realm-queue__position > span { display: block; color: #bdb3a1; font-size: 10px; letter-spacing: .18em; }
.realm-queue__position strong { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(48px, 12vw, 66px); color: #f2d89d; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; }
.realm-queue__position small { font-size: .48em; color: #b99a60; vertical-align: middle; margin-right: 4px; }
.realm-queue__position p { color: #c6bdac; font-size: 12px; margin: 4px 0 22px; }
.realm-queue__stats { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #b58d4738; border-radius: 10px; background: #080e1880; margin: 0; }
.realm-queue__stats > div { padding: 15px 8px; min-width: 0; }
.realm-queue__stats > div + div { border-left: 1px solid #b58d4730; }
.realm-queue__stats dt { display: flex; align-items: center; justify-content: center; gap: 6px; color: #c3bba9; font-size: 11px; }
.realm-queue__stats dt svg { color: #c7a665; flex-shrink: 0; }
.realm-queue__stats dd { margin: 8px 0 0; color: #f0ddba; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.realm-queue__estimate { color: #a9a598; font-size: 11px; line-height: 1.6; margin: 12px 6px 18px; }
.realm-queue__notice { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px; border: 1px solid #7fa89330; border-radius: 8px; background: #658b6d10; }
.realm-queue__notice svg { color: #a4c3a2; flex-shrink: 0; }
.realm-queue__notice p { margin: 0; font-size: 12px; line-height: 1.6; color: #c1cdbd; }
.realm-queue__notice--offline { border-color: #c6a05d60; background: #a17b3610; }
.realm-queue__notice--offline svg, .realm-queue__notice--offline p { color: #e0c797; }
.realm-queue__leave { margin-top: 19px; padding: 8px 16px; color: #cbb17e; font-size: 12px; border-radius: 6px; background: transparent; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.realm-queue__leave:hover { background: #b58d4710; border-color: #b58d4740; color: #f0d69e; }
.realm-queue__leave:focus-visible { outline: 2px solid #e3bd72; outline-offset: 3px; }
.realm-queue__leave:disabled { opacity: .6; cursor: wait; }
@keyframes realm-queue-glow { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .realm-queue__spark { animation: none; } }
@media (max-width: 380px) { .realm-queue { padding: 0; } .realm-queue__stats dt { font-size: 10px; } .realm-queue__stats dd { font-size: 15px; } }