@font-face{font-family:"Noto Sans Myanmar";font-style:normal;font-weight:400;font-display:swap;src:url("/31-realms/assets/fonts/NotoSansMyanmar-Regular.ttf") format("truetype")}
@font-face{font-family:"Noto Sans Myanmar";font-style:normal;font-weight:700;font-display:swap;src:url("/31-realms/assets/fonts/NotoSansMyanmar-Bold.ttf") format("truetype")}
@font-face{font-family:"Noto Serif Myanmar";font-style:normal;font-weight:700;font-display:swap;src:url("/31-realms/assets/fonts/NotoSerifMyanmar-Bold.ttf") format("truetype")}
:root{--site-page:#120807;--site-surface:#211211;--site-surface-strong:#4a1a1a;--site-primary:#f7c62f;--site-accent:#7de2c3;--site-text:#fff7e8;--site-muted:#c9bdb0;--site-border:#8e681c;--site-body-font:"Pyidaungsu","Noto Sans Myanmar",system-ui,sans-serif;--site-heading-font:"Noto Serif Myanmar","Pyidaungsu",Georgia,serif;--site-on-primary:#120807;--site-on-accent:#120807;--site-on-page:#fff7e8;--site-on-surface:#fff7e8;--site-on-strong:#fff7e8;--site-button-bg:var(--site-surface-strong);--site-button-ink:var(--site-on-strong);--site-button-border:var(--site-primary);--site-secondary-bg:var(--site-surface);--site-secondary-ink:var(--site-on-surface);--site-focus:var(--site-primary);--custom-font-size:16px;--custom-button-radius:10px;--custom-button-height:44px;--realm-toolbar-height:160px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--site-page);color:var(--site-text);font-family:var(--site-body-font);font-size:var(--custom-font-size);line-height:1.8}
body{position:relative}
button,a,summary{touch-action:manipulation}
button,summary{cursor:pointer}
button{font:inherit}
a{color:inherit;text-decoration:none}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,summary:focus-visible,#canvas-container:focus-visible{outline:3px solid var(--site-focus);outline-offset:3px}
[hidden],.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#canvas-container{position:absolute;inset:0;z-index:1;outline-offset:-4px}
#canvas-container canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#canvas-container canvas:active{cursor:grabbing}
#labels-container,#poi-labels-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.realm-label-3d,.poi-marker-3d{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;min-height:44px;max-width:min(220px,70vw);padding:6px 10px;border:1px solid var(--site-border);border-radius:var(--custom-button-radius);background:var(--site-surface);color:var(--site-text);font:700 max(12px,calc(var(--custom-font-size) * .8))/1.7 var(--site-body-font);text-align:center;white-space:normal;overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 14px #0007}
.poi-marker-3d{transform:translate(-50%,-100%)}
.realm-label-3d:hover,.poi-marker-3d:hover{border-color:var(--site-primary);background:var(--site-surface-strong);color:var(--site-on-strong)}
.portal-marker-3d,.portal-marker-exit{border-color:var(--site-accent)}
.scene-toolbar{position:fixed;z-index:20;inset:0 0 auto;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:color-mix(in srgb,var(--site-page) 95%,transparent);border-bottom:1px solid var(--site-border);box-shadow:0 6px 20px #0004}
.scene-title-row{display:flex;align-items:center;gap:12px;min-width:0}
.scene-title{min-width:0;flex:1}
.scene-title h1{margin:0;font-family:var(--site-heading-font);font-size:1.08em;font-weight:700;line-height:1.7;color:var(--site-primary);overflow-wrap:anywhere}
#location-status-badge{font:inherit;font-size:.75em;color:var(--site-muted);background:transparent;border:0;padding:0}
.scene-toolbar :is(button,a,summary),.scene-drawer button,.scene-navigation button,.scene-status a{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-width:44px;min-height:max(44px,var(--custom-button-height));max-width:100%;padding:6px 10px;border:1px solid var(--site-border);border-radius:var(--custom-button-radius);background:var(--site-secondary-bg);color:var(--site-secondary-ink);font:700 .85em/1.8 var(--site-body-font);white-space:normal;overflow-wrap:anywhere;text-align:center;text-shadow:none;box-shadow:none;transform:none}
.scene-toolbar :is(button,a,summary):hover,.scene-drawer button:hover,.scene-navigation button:hover{border-color:var(--site-primary)}
.scene-toolbar button[aria-pressed="true"],.scene-toolbar button[aria-expanded="true"],.scene-drawer button[aria-pressed="true"],.scene-drawer #btn-dive-action{background:var(--site-button-bg);color:var(--site-button-ink);border-color:var(--site-button-border)}
.scene-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.scene-actions button{width:100%;font-size:.85em}
.scene-options{position:relative;flex:0 0 auto}
.scene-options summary{list-style:none}
.scene-options summary::-webkit-details-marker{display:none}
.scene-options-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;padding:14px;border:1px solid var(--site-border);border-radius:14px;background:var(--site-page);box-shadow:0 18px 50px #0009}
.scene-options-panel button{width:100%;margin-bottom:8px}
.scene-options-panel p{margin:0 0 12px;font-size:.85em;color:var(--site-muted)}
.scene-illustration-note{font-size:.8em;line-height:1.9;color:var(--site-muted);margin:12px 0 0;padding-top:12px;border-top:1px solid var(--site-border)}
#scene-drawer-backdrop{position:fixed;inset:var(--realm-toolbar-height) 0 0;z-index:24;background:#0006}
.scene-drawer{position:fixed;top:calc(var(--realm-toolbar-height) + 10px);bottom:max(12px,env(safe-area-inset-bottom));z-index:30;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - var(--realm-toolbar-height) - 22px);display:flex;flex-direction:column;border:1px solid var(--site-border);border-radius:16px;background:var(--site-page);color:var(--site-text);overflow:hidden;box-shadow:0 18px 50px #0008;min-width:0}
#realm-sidebar{left:max(12px,env(safe-area-inset-left));transform:none!important}
#realm-detail-card{right:max(12px,env(safe-area-inset-right));width:min(400px,calc(100vw - 24px))}
.drawer-heading{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--site-border);background:var(--site-surface)}
.drawer-heading h2{margin:0;min-width:0;font-size:1em;line-height:1.8;color:var(--site-primary);font-family:var(--site-heading-font)}
.drawer-heading button{flex-shrink:0}
.drawer-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:12px;flex:1;user-select:text;-webkit-user-select:text}
.realm-filters{display:grid;flex-shrink:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px;border-bottom:1px solid var(--site-border)}
.realm-filters button{font-size:.75em;padding:6px 4px}
#realm-list-container{display:grid;align-content:start;gap:8px}
#realm-list-container button{width:100%;justify-content:space-between;text-align:left;padding:10px;line-height:1.9}
#realm-list-container button .truncate,#poi-buttons-list button .truncate{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#realm-list-container button :is(div,span){min-width:0}
#realm-list-container button :is(.text-xs,.text-\[10px\]){font-size:inherit;color:inherit}
.nibbana-entry{flex-shrink:0;padding:10px 12px;border-top:1px solid var(--site-border);background:var(--site-surface)}
.nibbana-entry button{width:100%}
.nibbana-entry small{display:block;font-size:.75em;line-height:1.8;color:var(--site-muted);margin-top:6px}
#detail-header-bg{background:var(--site-surface);border:1px solid var(--site-border);border-radius:12px;padding:12px}
.realm-badges{display:flex;flex-wrap:wrap;gap:6px;font-size:.75em;color:var(--site-muted)}
#detail-title{font-family:var(--site-heading-font);font-size:1.18em;line-height:1.8;color:var(--site-primary);margin:8px 0}
#detail-subtitle{margin:0;color:var(--site-muted);font-size:.9em}
.detail-section{margin:12px 0;padding:12px;border:1px solid var(--site-border);border-radius:12px;background:var(--site-surface);overflow-wrap:anywhere;min-width:0}
.detail-section h3{margin:4px 0 8px;color:var(--site-primary);font-family:var(--site-heading-font);font-size:1em}
.detail-section p{margin:8px 0;font-size:.95em;line-height:2}
.detail-section dt{font-weight:700;color:var(--site-primary)}
.detail-section dd{margin:4px 0 12px;font-size:.95em}
#btn-dive-action{width:100%}
.realm-step-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.realm-step-controls button{display:flex;flex-direction:column;min-width:0;font-size:.8em}
#poi-buttons-list{display:grid;gap:8px}
#poi-buttons-list button{width:100%;text-align:left;justify-content:space-between}
#poi-buttons-list button>span:first-child{min-width:0}
#poi-buttons-list button>span:last-child{flex-shrink:0;font-size:.75em;color:var(--site-muted)}
#active-poi-description{padding:12px;margin-top:12px;background:var(--site-page);border:1px solid var(--site-border);border-radius:10px;font-size:.9em;line-height:2;color:var(--site-text)}
#active-poi-description strong{color:var(--site-primary)}
.scene-navigation{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:15;width:max-content;max-width:calc(100vw - 24px);padding:8px;border:1px solid var(--site-border);border-radius:16px;background:var(--site-page);box-shadow:0 8px 32px #0008}
.scene-gesture-hint{margin:0 2px 6px;text-align:center;color:var(--site-muted);font-size:.7em;line-height:1.7}
.scene-camera-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.scene-camera-controls button{flex:0 1 auto;padding:5px 8px;font-size:.8em}
.movement-controls{padding-top:8px;margin-top:8px;border-top:1px solid var(--site-border)}
.movement-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:.85em}
.movement-grid{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:6px}
.movement-grid .dpad-btn{touch-action:none;user-select:none;font-size:1em}
.movement-grid [data-move="forward"]{grid-column:2}
.movement-grid [data-move="left"]{grid-row:2;grid-column:1}
.movement-grid [data-move="backward"]{grid-row:2;grid-column:2}
.movement-grid [data-move="right"]{grid-row:2;grid-column:3}
.movement-grid [data-move="up"]{grid-row:1;grid-column:3;font-size:.8em}
.movement-grid [data-move="down"]{grid-row:1;grid-column:1;font-size:.8em}
.dpad-btn.active-key,.dpad-btn:active{background:var(--site-button-bg);color:var(--site-button-ink);border-color:var(--site-button-border)}
.scene-status{position:fixed;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--site-border);border-radius:16px;background:var(--site-page);color:var(--site-text);box-shadow:0 20px 80px #000b;text-align:center}
.scene-status h2{font-family:var(--site-heading-font);font-size:1.1em;color:var(--site-primary);margin:0 0 12px}
.scene-status p{font-size:.9em;margin:0 0 16px}
#warp-overlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;pointer-events:none;opacity:0;background:color-mix(in srgb,var(--site-page) 95%,transparent);color:var(--site-text);text-align:center;transition:opacity .2s}
#warp-overlay.active{opacity:1}
#warp-title{font-family:var(--site-heading-font);font-size:1.1em;margin:0;color:var(--site-primary)}
#warp-subtitle{font-size:.85em;margin:0}
#realm-toast{position:fixed;top:calc(var(--realm-toolbar-height) + 12px);left:50%;transform:translateX(-50%);z-index:38;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px;border:1px solid var(--site-border);border-radius:12px;background:var(--site-page);color:var(--site-text);font-size:.85em;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 25px #0008}
#realm-toast.opacity-0{opacity:0}
#realm-toast.opacity-100{opacity:1}
@media(min-width:1200px){.scene-toolbar{display:flex;align-items:center;gap:20px}.scene-title-row{flex:1}.scene-actions{margin:0;flex:1;max-width:620px}.scene-options{order:3}.scene-title{order:2}.scene-back{order:1}#scene-drawer-backdrop{background:transparent;pointer-events:none}.scene-drawer{bottom:16px}.scene-navigation{max-width:calc(100vw - 820px)}}
@media(max-width:600px){.scene-title-row{flex-wrap:wrap;gap:6px}.scene-title{flex:1;order:1}.scene-back{order:0;font-size:.75em!important}.scene-options{order:2}.scene-options summary{font-size:.7em;padding:4px 7px}.scene-title h1{font-size:.9em}.scene-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}.scene-actions button{font-size:.8em}.scene-toolbar{padding:8px 10px}.scene-drawer{top:calc(var(--realm-toolbar-height) + 8px);width:calc(100vw - 20px);max-height:calc(100dvh - var(--realm-toolbar-height) - 18px)}#realm-sidebar{left:10px}#realm-detail-card{right:10px;width:calc(100vw - 20px)}.scene-navigation{max-width:calc(100vw - 16px);padding:6px}.scene-camera-controls{gap:4px}.scene-camera-controls button{font-size:.75em;padding:5px 7px}.scene-gesture-hint{font-size:.65em}.scene-status{padding:18px}.realm-filters{padding:8px}.drawer-scroll{padding:10px}}
@media(max-height:540px){.scene-toolbar{padding-top:4px;padding-bottom:4px}.scene-title-row{flex-wrap:nowrap}.scene-actions{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:4px}.scene-title h1{font-size:.85em}#location-status-badge{display:none}.scene-gesture-hint{display:none}.scene-navigation{left:auto;right:10px;transform:none;max-width:calc(100vw - 20px)}.scene-options-panel{max-height:calc(100dvh - 70px)}.movement-controls{max-height:calc(100dvh - var(--realm-toolbar-height) - 100px);overflow:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}