/* The royal identity card remains independent of the selected chess world. */
.royal-brand { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.royal-brand button { padding:0; color:#243f36; border:0; background:none; cursor:pointer; }
.royal-brand .royal-mark { display:grid; place-items:center; width:48px; height:48px; }
.royal-mark img { width:48px; height:44px; }
.royal-wordmark { font:600 19px Georgia,serif; letter-spacing:.08em; white-space:nowrap; }
.royal-brand button:focus-visible, #royal-about :focus-visible { outline:2px solid #287d78; outline-offset:5px; border-radius:3px; }
#royal-about { --royal-gold:#a8894e; width:calc(100% - 28px); max-width:570px; max-height:calc(100dvh - 32px); padding:0; overflow:hidden; overscroll-behavior:contain; color:#243f36; background:radial-gradient(ellipse at 50% 10%,#fffdf5 0,transparent 58%),#f7f3e9; border:1px solid #bba36d; border-radius:8px; box-shadow:0 28px 100px #102c2580,inset 0 0 0 6px #f7f3e9,inset 0 0 0 7px #d4c5a04d; text-align:center; }
#royal-about::backdrop { background:#142e29b3; backdrop-filter:blur(7px); }
#royal-about .royal-close { position:absolute; z-index:2; right:13px; top:12px; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; background:#f7f3e9e6; border-radius:50%; color:#53685d; font:28px Georgia,serif; cursor:pointer; }
#royal-about .royal-close:hover { background:#e7dfcc80; border-radius:50%; }
.royal-emblem { width:164px; height:144px; display:block; margin:0 auto 5px; filter:drop-shadow(0 5px 7px #6b4c2412); }
#royal-about h2 { margin:0; font:500 34px Georgia,serif; letter-spacing:.12em; line-height:1.2; }
.royal-motto { margin:9px 0 17px; font:italic 12px Georgia,serif; letter-spacing:.2em; color:#8a343d; }
.royal-intro { max-width:340px; margin:0 auto; font:italic 16px/1.6 Georgia,serif; color:#5c6b5d; }
.royal-rule { display:flex; align-items:center; gap:13px; margin:21px 0; color:#a8894e; font-size:10px; }
.royal-rule::before,.royal-rule::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,#cbb98d); }
.royal-rule::after { transform:rotate(180deg); }
#royal-about h3 { margin:0 0 12px; color:#7c6741; font:600 10px/1.4 'Segoe UI',sans-serif; letter-spacing:.19em; }
.royal-story p { margin:8px 0; font:14px/1.65 Georgia,serif; }
.royal-story .name-meaning { margin:13px 0; color:#243f36; }
.royal-story em { color:#8a343d; }
#royal-about .royal-creators { display:flex; justify-content:center; align-items:baseline; gap:9px; white-space:nowrap; font:500 15px/1.6 Georgia,serif; margin:0; }
.royal-creators .credit-dot { color:#a8894e; }
.royal-company { margin:13px 0 5px; font:600 12px/1.5 'Segoe UI',sans-serif; letter-spacing:.04em; }
.royal-copyright { margin:0; font:10px/1.6 'Segoe UI',sans-serif; color:#667369; }
#about-build { display:block; margin:13px 0; color:#667369; font:10px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.royal-links { display:flex; justify-content:center; gap:24px; }
.royal-links a { color:#28716d; text-underline-offset:4px; font:12px/2 'Segoe UI',sans-serif; padding:4px 0; }
.royal-guide { max-width:720px; margin:50px auto; padding:0 24px 40px; line-height:1.7; }
.royal-guide h1,.royal-guide h2 { font-family:Georgia,serif; font-weight:400; }
.royal-guide h2 { margin-top:32px; }
.royal-guide a { color:#28716d; }
@media(max-width:600px) {
 .royal-wordmark { font-size:17px; letter-spacing:.05em; }
 #royal-about { padding:23px 21px; max-height:calc(100dvh - 24px); }
 .royal-emblem { width:138px; height:121px; }
 #royal-about h2 { font-size:28px; }
 #royal-about .royal-creators { font-size:clamp(11px,3.45vw,15px); gap:6px; }
 .royal-rule { margin:17px 0; }
}

.royal-about-body { max-height:calc(100dvh - 34px); overflow-y:auto; overscroll-behavior:contain; padding:32px 44px 27px; }
@media (min-width:601px) and (max-height:800px) {
 .royal-about-body { padding:22px 40px; }
 .royal-emblem { width:126px; height:110px; }
 .royal-rule { margin:14px 0; }
 .royal-intro { font-size:15px; line-height:1.5; }
 .royal-story p { line-height:1.5; }
 #royal-about h2 { font-size:30px; }
 #about-build { margin:9px 0; }
}
@media(max-width:600px) {
 #royal-about { padding:0; }
 .royal-about-body { max-height:calc(100dvh - 26px); padding:23px 21px; }
}