/* DP-220: the same authored palace and jade plaque used by the Unity game. */
:root {
  --ground:#071125; --surface:#112640; --raised:#204266;
  --text:#f3f7ff; --muted:#a7b8cd; --accent:#36dcf0;
  --line:#284460; --gold:#ffc640;
}
body { background:var(--ground); }
.site-header { background:rgba(5,14,24,.97); border-bottom-color:#bb8b4480; }
.site-header .brand { color:var(--gold); }
.nav-play { background:var(--gold); color:var(--ground); border:1px solid var(--gold); border-radius:5px; }
.primary-action {
  background:var(--gold);
  color:var(--ground); min-height:64px; min-width:290px;
  padding:22px 42px; justify-content:center; text-align:center;
  text-shadow:none; border:0; border-radius:4px 16px 4px 16px;
}
.primary-action:hover { background-color:#ffde7d; }
.primary-action>span:last-child { font-size:inherit; }
.primary-action svg { display:none; }
main>.palace-hero {
  position:relative; isolation:isolate; overflow:hidden; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center; min-height:790px; min-height:min(900px,calc(100svh - 84px));
  padding:45px max(5vw,calc((100vw - 1450px)/2)) 80px;
  background:var(--ground);
  border-bottom:1px solid #bb8b44;
}
.palace-hero::after { content:""; position:absolute; z-index:-1; inset:auto 0 0; height:130px; background:linear-gradient(transparent,var(--ground)); pointer-events:none; }
.palace-copy { position:relative; z-index:1; max-width:580px; grid-column:2; padding-left:35px; }
.world-eyebrow { font-size:12px; color:var(--gold); letter-spacing:.17em; margin:0 0 12px; }
.world-logo { width:180px; height:155px; object-fit:contain; margin:0 0 14px; }
.palace-copy h1 { font-size:clamp(40px,4.1vw,66px); color:var(--text); text-shadow:0 4px 22px #020814; margin-bottom:20px; }
.palace-copy>p:not(.world-eyebrow) { color:#e0e6df; font-size:15px; text-shadow:0 2px 8px #000; }
.palace-copy .availability { font-size:12px!important; min-height:22px; margin:10px 0; max-width:390px; }
.palace-character { position:absolute; inset:0; z-index:-1; min-width:0; }
.palace-character img { width:100%; height:100%; max-height:none; object-fit:cover; object-position:35% center; }
.palace-character>span { display:none; }
.world-scroll { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--gold); display:flex; gap:20px; align-items:center; min-height:44px; white-space:nowrap; }
.world-scroll span { font-size:21px; }
.arena-intro { background:var(--ground); border-bottom:1px solid #bb8b4440; }
.arena-intro h2 { margin-bottom:24px; }
.arena-view figure,.lobby-section figure { border:1px solid #bb8b44; box-shadow:0 16px 50px #0005; }
.scene-toolbar button { border-color:#bb8b4480; border-radius:4px; }
.scene-toolbar button[aria-pressed=true] { background:#145c4e; color:var(--text); border-color:var(--gold); }
.dragon-studio { background:linear-gradient(#061322de,#061322ef),url('/assets/palace-environment.png') center/cover; border-block:1px solid #bb8b4460; }
.portrait-stage { background:linear-gradient(transparent,#071828aa),url('/assets/palace-environment.png') center/cover; border:1px solid #bb8b44; border-radius:12px; }
.portrait-caption { background:#071828dd; margin:0 -15px -10px; padding:18px; border-color:#bb8b44; border-radius:5px; }
.dragon-roster button { background:#071828a8; border:1px solid #bb8b4438; border-radius:8px; }
.dragon-roster button:hover,.dragon-roster button[aria-pressed=true] { background:#145c4e99; border-color:var(--gold); }
.guide-tabs button[aria-pressed=true] { background:#145c4e; color:var(--text); }
.item-grid button { border:1px solid #bb8b4433; border-radius:10px; background:linear-gradient(#12344666,transparent); }
.launch-section { background:linear-gradient(90deg,#061322f0,#061322b0),url('/assets/palace-environment.png') center 35%/cover; border-top:1px solid #bb8b44; }
.download-page .download-intro { background:linear-gradient(90deg,#061322f0,#061322bd),url('/assets/palace-environment.png') center/cover; border-bottom:1px solid #bb8b44; }
.reading-page .reading-intro,.legal-page .legal-intro { background:linear-gradient(90deg,#061322f5,#061322df),url('/assets/palace-environment.png') center/cover; }
@media(max-width:1000px) {
  main>.palace-hero { min-height:720px; grid-template-columns:1fr 1fr; padding-inline:30px; }
  .world-logo { width:140px; height:130px; }
  .palace-copy h1 { font-size:42px; }
  .palace-copy>p br { display:none; }
  .palace-character img { min-height:360px; }
}
@media(max-width:650px) {
  main>.palace-hero { min-height:0; padding:0 22px 75px; display:flex; flex-direction:column; justify-content:flex-start; }
  .palace-copy { width:100%; text-align:center; padding:24px 0 0; order:2; }
  .world-eyebrow { font-size:10px; margin-bottom:7px; }
  .world-logo { width:118px; height:100px; margin:0 auto 8px; }
  .palace-copy h1 { font-size:38px; margin-bottom:12px; }
  .palace-copy>p:not(.world-eyebrow) { font-size:13px; margin:10px auto 14px; }
  .palace-copy .availability { font-size:11px!important; }
  .primary-action { min-width:0; width:100%; max-width:330px; min-height:74px; padding-inline:30px; }
  .palace-character { position:relative; inset:auto; z-index:0; width:calc(100% + 44px); margin:0 -22px; order:1; }
  .palace-character img { display:block; min-height:0; height:300px; object-position:25% center; }
  .palace-character>span { font-size:10px; }
  .world-scroll { bottom:17px; }
  .portrait-caption { margin:0; }
  .arena-intro h2 { font-size:34px; }
  .launch-section .primary-action { align-self:flex-start; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(max-width:360px) {
  .site-header { padding-inline:10px; gap:8px; }
  .site-header .brand { gap:5px; }
  .site-header>.brand span { font-size:11px; }
  .nav-toggle,.nav-play { flex-shrink:0; white-space:nowrap; }
  .nav-toggle { min-width:44px; }
  .nav-play { padding-inline:8px; }
}