/* Castle Maze title screen: the keep is the hero, controls live on the left. */
#realm-scene{display:none;position:fixed;right:-3vw;top:0;width:70vw;height:100vh;pointer-events:none;z-index:11}
#realm-scene canvas{width:100%;height:100%;display:block}
body.title-screen{background:#101e23}
.title-screen #wrap{visibility:hidden}
.host-paused #ov{pointer-events:none}
.title-screen #save-status{margin:12px 0;max-width:430px;box-sizing:border-box}
.title-screen #realm-scene:not([hidden]){display:block}
.title-screen #ov{position:fixed;inset:0;z-index:12;border-radius:0;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;padding:32px;box-sizing:border-box;background:#101e23e8;scrollbar-color:#a38a61 #101e23}
.title-screen #ov[data-kind=menu]{display:block;text-align:left;padding:0;background:linear-gradient(90deg,#101e23 0%,#101e23f2 24%,#101e2380 43%,#101e2300 63%);animation:none}
#ov[data-kind=menu]>*{animation:none}
.title-screen #ov[data-kind=menu]::before,.title-screen #ov[data-kind=menu]::after{display:none}
.menu-shell{width:430px;max-width:calc(100% - 48px);margin:clamp(32px,6vh,72px) 0 30px clamp(28px,7vw,112px);position:relative}
#ov .menu-title{font:900 clamp(54px,5.4vw,82px)/.93 'Cinzel Decorative',Georgia,serif;text-align:left;letter-spacing:-.035em;color:#e8d6ae!important;background:none;filter:none;text-shadow:0 5px 22px #0005!important;margin:0 0 20px;animation:none}
.menu-title span{display:block;color:#e0af5f}
#ov .menu-story{font:17px/1.55 Georgia,serif;color:#d5ddcf;text-align:left;max-width:315px;margin:0 0 26px}
.menu-story strong{font-weight:400;color:#f6e9cc}
#ov .menu-shell button{min-height:44px;max-width:100%;box-sizing:border-box;border-radius:2px;box-shadow:none;text-shadow:none;font-size:13px;transition:background .15s,transform .15s}
#ov .menu-shell button:hover{filter:none;box-shadow:none;transform:translateY(-1px)}
#ov .menu-shell button:active{transform:translateY(1px)}
#ov .menu-shell button:focus-visible,#ov .menu-shell summary:focus-visible{outline:3px solid #fff2a8;outline-offset:4px}
#ov .menu-shell .menu-play{display:flex;width:100%;margin:0;min-height:68px;padding:12px 20px;justify-content:space-between;background:#d6a15b;border:1px solid #edbc72;color:#21190d;text-align:left}
#ov .menu-play b{font:700 20px Cinzel,Georgia,serif;display:block}
#ov .menu-play small{font:13px/1.7 Georgia,serif;color:inherit;display:block}
#ov .menu-play svg{width:30px;height:30px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
#ov .menu-shell .menu-play:hover{background:#edbc72}
.menu-other{display:flex;gap:18px;align-items:center;margin:7px 0 19px}
#ov .menu-other button{flex:1;background:none;border:0;border-bottom:1px solid #63736b;color:#cfdbce;padding:8px 0;margin:0;justify-content:space-between;font-size:12px}
#ov .menu-other small{font:12px Georgia,serif;color:#c1cdbf}
.menu-maps{margin:0 0 24px}
.menu-maps h3{font:600 12px Cinzel,Georgia,serif;color:#c6cdbb;border:0;text-align:left;margin:0 0 10px;display:flex;justify-content:space-between}
.menu-maps h3 span{color:#f0d29c;font:12px Georgia,serif}
.menu-map-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#ov .menu-map-list button{width:100%;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;background:none;border:0;border-bottom:2px solid transparent;padding:0 0 7px;margin:0;font:10px Cinzel,Georgia,serif;color:#c8d4c6}
#ov .menu-map-list button[aria-pressed=true]{border-color:#e7b569;color:#fff0d1}
#ov .menu-map-list button:hover{background:#ffffff08}
#ov .menu-map-list canvas{width:100%;height:48px;border-radius:1px;background:#253b36;box-shadow:none}
.menu-footer{display:flex;flex-wrap:wrap;gap:2px 20px;border-top:1px solid #526055;padding-top:7px}
#ov .menu-footer button{width:auto;min-width:44px;min-height:44px;padding:6px 0;margin:0;background:none;border:0;justify-content:flex-start;color:#cdd6c6;font:12px Cinzel,Georgia,serif}
#ov .menu-footer button:hover{color:#ffe2a5}
#ov .menu-trial{display:flex;background:none;border:0;border-bottom:1px solid #526055;width:100%;padding:11px 0;margin:0 0 10px;text-align:left;justify-content:space-between;color:#e6c78c}
#ov .menu-trial small{color:#bdcbbd;font:12px Georgia,serif}
#ov .menu-shell .credits{margin:15px 0 0;text-align:left;font:11px Georgia,serif;color:#9eaea4}
#ov .menu-shell .resume-copy,#ov .menu-shell .save-note{margin:7px 0 12px;text-align:left;font:13px/1.4 Georgia,serif;color:#d0dac9}
#ov .menu-shell #o-continue{background:#466655;border-color:#91aa81;color:#fff0ce;margin-bottom:6px}
.menu-new{margin:8px 0 0;color:#e2ceb0;font:12px Cinzel,Georgia,serif}
.menu-new summary{cursor:pointer;padding:12px 0;min-height:24px;line-height:24px}
.menu-new[open] summary{margin-bottom:8px}
.realm-fallback{display:none;position:absolute;inset:0;background:url('realm-fallback.png') center/contain no-repeat}
#realm-scene[hidden]{display:none!important}
body.realm-unavailable #realm-scene{display:block!important}
body.realm-unavailable .realm-fallback{display:block}
body.realm-unavailable #realm-scene canvas{display:none}
body.realm-unavailable:not(.title-screen) #realm-scene{display:none!important}
@media(min-width:1600px){.menu-shell{margin-top:10vh}#realm-scene{width:72vw}}
@media(max-width:900px) and (min-width:601px){.menu-shell{width:365px;margin-left:32px}#realm-scene{right:-14vw;width:78vw}#ov .menu-title{font-size:62px}}
@media(max-width:600px){
  #realm-scene{top:-25px;right:-27%;width:112%;height:360px}
  .title-screen #ov[data-kind=menu]{background:linear-gradient(180deg,#101e2310 0,#101e2320 180px,#101e23ec 300px,#101e23 430px)}
  .menu-shell{margin:30px 24px 22px;max-width:none;width:auto;padding-top:0}
  #ov .menu-title{font-size:47px;margin:0 0 155px;max-width:210px;text-shadow:0 3px 18px #101e23}
  #ov .menu-story{font-size:15px;max-width:320px;margin:0 0 19px}
  #ov .menu-play b{font-size:18px}
  #ov .menu-shell .menu-play{min-height:64px;padding:10px 16px}
  .menu-other{margin-bottom:18px}
  .menu-maps{margin-bottom:18px}
  .menu-map-list{gap:8px}
  #ov .menu-map-list button{font-size:9px}
  #ov .menu-trial{font-size:11px}
  #ov .menu-trial small{font-size:11px}
  .title-screen #ov:not([data-kind=menu]){padding:22px 16px;justify-content:flex-start}
  .title-screen #ov .box{min-width:0!important;box-sizing:border-box;max-width:100%}
  .title-screen #ov .achl{min-width:0;max-width:100%}
  .title-screen #ov .set{min-width:0}
}
@media(max-height:600px) and (min-width:601px){.menu-shell{margin-top:22px;width:370px}#ov .menu-title{font-size:48px;margin-bottom:12px}#ov .menu-story{font-size:14px;margin-bottom:14px}.menu-maps{margin-bottom:12px}#realm-scene{position:fixed;right:-9vw;width:70vw}.menu-other{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#ov .menu-shell button{transition:none;transform:none!important}}