:root{--ink:#384653;--paper:#f9f7f2;--glass:#f6f4efeb;--edge:#ffffffb0;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#dce4ec;color:var(--ink);font:14px "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-user-select:none;user-select:none}button,a,canvas{-webkit-tap-highlight-color:transparent}button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #497052;outline-offset:3px}a{color:inherit}main{position:fixed;inset:0;width:100%;height:100%;height:100dvh}.world{position:absolute;inset:0;overflow:hidden;background:#dce4ec}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}canvas:active{cursor:grabbing}
/* All HUD pieces float above the full-viewport world. Empty HUD space passes input through. */
.header{position:fixed;top:calc(var(--safe-top) + 16px);left:calc(var(--safe-left) + 20px);right:calc(var(--safe-right) + 20px);z-index:5;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:12px}.location-hud,.header-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}.location-hud{background:var(--glass);border:1px solid var(--edge);border-radius:12px;padding:0 12px;box-shadow:0 4px 20px #243c2910;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:7px;font:24px Georgia,serif}.brand b{font:13px serif;letter-spacing:2px}.room-button{display:flex;align-items:center;gap:8px;font-size:12px;padding:0 0 0 12px;margin-left:4px;border-left:1px solid #d4dec9;min-height:44px}.live-dot{width:5px;height:5px;background:#789771;border-radius:50%}.room-tag{font-size:9px;color:#839176}.chevron{margin-left:3px}.icon-button{width:44px;height:44px;border:1px solid var(--edge);border-radius:11px;background:var(--glass);font-size:21px;box-shadow:0 3px 14px #243c2910;backdrop-filter:blur(12px)}.icon-button[aria-pressed=true]{background:#cbdcbd}.scene-label{position:absolute;bottom:calc(var(--safe-bottom) + 22px);left:calc(var(--safe-left) + 24px);display:flex;align-items:center;gap:9px;color:#4c6549;font-size:10px;letter-spacing:1px;pointer-events:none;text-shadow:0 1px 5px #fff9}.tiny-line{width:16px;height:1px;background:#7a8e6e}#clock{font-variant-numeric:tabular-nums;margin-left:6px;opacity:.7}.compass{position:absolute;top:calc(var(--safe-top) + 144px);right:calc(var(--safe-right) + 29px);width:32px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#4e6b51;pointer-events:none;text-shadow:0 1px 5px #fff8}.compass span{font:30px Georgia,serif}.compass small{font-size:8px}
.bottom-bar{position:fixed;inset:0;pointer-events:none;z-index:4}.identity{position:absolute;top:calc(var(--safe-top) + 76px);left:calc(var(--safe-left) + 20px);display:flex;gap:10px;align-items:center;border:1px solid #ffffff80;border-radius:12px;padding:9px 12px;background:#fafbf0b8;backdrop-filter:blur(8px)}.avatar{position:relative;overflow:hidden;width:32px;height:32px;background:#e1e7d5;border-radius:50%}.avatar:before{content:"";position:absolute;width:14px;height:16px;background:#dec2a0;border-radius:50%;left:9px;top:4px}.avatar:after{content:"";position:absolute;width:23px;height:20px;left:5px;top:19px;background:#919e84;border-radius:10px 10px 0 0}.identity-name{font-size:11px}.identity-name span{font-size:8px;margin-left:3px;color:#839373}.identity small{display:block;font-size:9px;color:#718266;margin-top:5px}.daily-count{position:absolute;top:calc(var(--safe-top) + 78px);right:calc(var(--safe-right) + 23px);text-align:right;text-shadow:0 1px 6px #fff8}.daily-count>span{font-size:9px;letter-spacing:1px;color:#58734e}.daily-count strong{display:block;font-weight:400;margin-top:5px}.daily-count b{font:23px Georgia,serif}.daily-count small{font-size:10px;margin-left:5px}.daily-count i{font-style:normal;margin:0 12px;color:#7a8d6a}.practice-controls{position:absolute;bottom:calc(var(--safe-bottom) + 22px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;border:1px solid var(--edge);border-radius:16px;background:var(--glass);padding:7px;box-shadow:0 8px 30px #243c2920;backdrop-filter:blur(12px);pointer-events:auto}.practice-controls button{display:flex;align-items:center;gap:8px;padding:9px 14px;min-height:48px;border-radius:10px;font-size:11px;white-space:nowrap}.practice-controls button:hover,.practice-controls button.active{background:#dce7d2}.practice-controls button>span{font:24px Georgia,serif;color:#657d5b}.practice-controls kbd{font:9px sans-serif;border:1px solid #cdd7c0;border-radius:3px;padding:2px 4px;margin-left:3px;color:#849575}.control-divider{height:24px;border-left:1px solid #d6dfca;margin:0 3px}.zoom-controls{position:absolute;right:calc(var(--safe-right) + 23px);bottom:calc(var(--safe-bottom) + 25px);display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--edge);border-radius:11px;backdrop-filter:blur(12px);box-shadow:0 4px 20px #243c2915}.zoom-controls button{width:44px;height:44px;font-size:21px}.zoom-controls button+button{border-top:1px solid #dce4d1}.move-hint{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 105px);transform:translateX(-50%);display:flex;align-items:center;gap:11px;color:#405b3d;font-size:10px;white-space:nowrap;text-shadow:0 1px 6px #fffa;pointer-events:none}.mouse-icon{font-size:16px}.hint-divider{height:10px;border-left:1px solid #8c9e7b}#player-label{position:absolute;top:0;left:0;padding:5px 9px;border:1px solid #ffffff99;border-radius:20px;background:#faf9ecdb;color:#52664c;font-size:9px;white-space:nowrap;pointer-events:none;box-shadow:0 3px 10px #27442215}#player-label>span{display:inline-block;width:4px;height:4px;background:#7c9862;border-radius:50%;margin-right:4px}#player-label small{font-size:7px;background:#e0e9d2;border-radius:4px;padding:2px 3px;margin-left:3px}
#joystick{position:absolute;left:calc(var(--safe-left) + 28px);bottom:calc(var(--safe-bottom) + 30px);width:100px;height:100px;border-radius:50%;border:1px solid #f7ffe9c9;background:#f7faed60;box-shadow:inset 0 0 20px #57774512;display:none;align-items:center;justify-content:center;touch-action:none}#joystick-stick{width:42px;height:42px;border-radius:50%;background:#fafbf0e6;border:1px solid #ffffffb0;box-shadow:0 3px 15px #28451f20;pointer-events:none}#webgl-error{position:absolute;inset:0;z-index:20;background:#e8eddfef;padding:30px;display:grid;align-content:center;justify-items:center;text-align:center}#webgl-error[hidden]{display:none}#webgl-error p{line-height:1.8;max-width:420px}#webgl-error button{background:#49684f;color:white;padding:12px 20px;border-radius:8px}body:has(#webgl-error:not([hidden])) .header,body:has(#webgl-error:not([hidden])) .bottom-bar{visibility:hidden}#toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 148px);transform:translate(-50%,10px);max-width:calc(100% - 32px);background:#3f5849eb;color:#fff;padding:12px 20px;border-radius:20px;font-size:12px;text-align:center;line-height:1.7;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.visible{opacity:1;transform:translate(-50%,0)}
/* Dialogs scroll independently, including on phones in landscape. */
dialog{border:1px solid #e2e5d7;border-radius:16px;padding:38px;background:var(--paper);color:var(--ink);width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 25px 100px #27382030;-webkit-user-select:text;user-select:text}dialog::backdrop{background:#2c3d3270;backdrop-filter:blur(5px)}.eyebrow{font-size:10px;letter-spacing:2px;color:#839078}dialog h2{font:400 27px Georgia,"Noto Serif KR",serif;margin:17px 0}dialog p{font-size:12px;line-height:1.9;color:#7d8873}.close{position:absolute;top:7px;right:7px;min-width:44px;min-height:44px;font-size:25px;color:#7b8a71}.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.rooms button{text-align:left;background:#edf0e4;border-radius:8px;padding:22px 16px}.rooms button:hover{background:#e0e7d4}.rooms button>span{display:block;font-size:34px;color:#849873;margin-bottom:24px}.rooms strong{display:block;font-size:15px;font-weight:500}.rooms small{display:block;font-size:9px;line-height:1.7;color:#8b947c;margin:9px 0 23px}.rooms em{font-size:10px;font-style:normal}.dialog-note{font-size:10px!important;color:#8a967d!important;line-height:1.8}dialog ul{list-style:none;padding:12px 0;font-size:12px;line-height:3;color:#7b886e}dialog li b{font-size:10px;padding:3px 7px;background:#e7ebde;border-radius:3px;margin-right:10px}dialog a{display:inline-block;font-size:11px;padding:12px 0}.reset-records{display:block;font-size:11px;min-height:44px;text-decoration:underline;color:#7b886e}#rosary-dialog{text-align:center;width:min(420px,calc(100vw - 32px))}#rosary-ring{width:240px;height:240px;border-radius:50%;display:block;margin:24px auto;position:relative;touch-action:none;user-select:none}#rosary-ring .bead{position:absolute;width:27px;height:27px;border-radius:50%;background:radial-gradient(circle at 32% 27%,#b1946b,#806044 70%,#654c37);box-shadow:1px 3px 4px #49321a25;left:calc(50% - 13.5px);top:calc(50% - 13.5px)}#ring-count{font:40px Georgia,serif}#rosary-ring>small{display:block;font-size:10px;color:#9d9f8a;margin-top:6px}.rosary-progress{height:3px;background:#e5e7da;border-radius:3px;margin:20px 0}.rosary-progress i{display:block;width:0;height:100%;background:#92a67a;transition:width .2s}
body[data-theme=night] .scene-label,body[data-theme=night] .compass,body[data-theme=night] .daily-count,body[data-theme=night] .daily-count>span,body[data-theme=night] .move-hint{color:#e1ebd4;text-shadow:0 1px 5px #152524}body[data-theme=night] .hint-divider{border-color:#c4d2b3}
@media(pointer:coarse){#joystick{display:flex}.move-hint{display:none}.scene-label{bottom:calc(var(--safe-bottom) + 144px)}}
@media(max-width:720px){.header{top:calc(var(--safe-top) + 10px);left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px);gap:8px}.location-hud{padding:0 9px;border-radius:10px;gap:3px}.brand{font-size:21px;gap:4px}.brand b{font-size:11px;letter-spacing:0}.room-button{padding-left:8px;margin-left:2px;gap:5px;font-size:10px}.room-tag{display:none}.header-actions{gap:4px}.icon-button{width:44px;height:44px;border-radius:10px;font-size:19px}.identity{top:calc(var(--safe-top) + 66px);left:calc(var(--safe-left) + 12px);padding:7px 9px;gap:7px}.identity-name{font-size:10px}.identity small{font-size:8px}.avatar{width:28px;height:28px}.avatar:before{left:7px}.avatar:after{left:3px}.daily-count{top:calc(var(--safe-top) + 69px);right:calc(var(--safe-right) + 15px)}.daily-count>span{font-size:8px}.daily-count b{font-size:20px}.daily-count i{margin:0 8px}.compass{right:calc(var(--safe-right) + 19px);top:calc(var(--safe-top) + 125px)}.scene-label{display:none}.practice-controls{left:auto;right:calc(var(--safe-right) + 14px);bottom:calc(var(--safe-bottom) + 18px);transform:none;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:5px;border-radius:13px}.practice-controls button{justify-content:center;gap:5px;min-height:48px;padding:6px 9px;font-size:10px}.practice-controls button>span{font-size:21px}.practice-controls kbd,.control-divider{display:none}.zoom-controls{right:calc(var(--safe-right) + 14px);bottom:calc(var(--safe-bottom) + 140px);flex-direction:row}.zoom-controls button+button{border-top:0;border-left:1px solid #dce4d1}.move-hint{display:none}#joystick{left:calc(var(--safe-left) + 22px);bottom:calc(var(--safe-bottom) + 26px)}#player-label{font-size:8px}#toast{bottom:calc(var(--safe-bottom) + 198px);font-size:10px}dialog{padding:36px 22px 24px}dialog h2{font-size:23px}.rooms{grid-template-columns:1fr;gap:8px}.rooms button{display:grid;grid-template-columns:36px 1fr auto;align-items:center;padding:14px;gap:8px}.rooms button>span{font-size:25px;margin:0;grid-row:span 2}.rooms small{grid-column:2;margin:0}.rooms em{grid-column:3;grid-row:1 / span 2}}
@media(max-width:380px){.brand b,.chevron{display:none}.location-hud{padding:0 8px}.header-actions{gap:3px}.practice-controls button{padding:5px 7px;font-size:9px}#joystick{left:calc(var(--safe-left) + 16px);width:88px;height:88px}}
@media(max-height:500px) and (orientation:landscape){.identity{top:calc(var(--safe-top) + 62px);padding:5px 9px}.daily-count{top:calc(var(--safe-top) + 68px)}.compass{display:none}.scene-label{display:none}.practice-controls{left:auto;right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 14px);transform:none;display:flex;padding:5px;gap:3px}.practice-controls button{padding:6px 9px;min-height:44px;font-size:10px}.practice-controls kbd,.control-divider{display:none}.zoom-controls{right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 86px);flex-direction:row}.zoom-controls button+button{border-top:0;border-left:1px solid #dce4d1}#joystick{width:84px;height:84px;bottom:calc(var(--safe-bottom) + 20px)}.move-hint{display:none}#toast{bottom:calc(var(--safe-bottom) + 145px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Camera mode and live visitors */
.view-button{font-size:11px;min-width:48px;white-space:nowrap}.view-button[aria-pressed=true]{background:#cbdcbd;border-color:#9cb18b}.crosshair{display:none;position:absolute;left:50%;top:50%;width:5px;height:5px;border:1px solid #fff;border-radius:50%;background:#344b3690;box-shadow:0 0 3px #0006;pointer-events:none}body[data-view=first] .crosshair{display:block}body[data-view=first] .zoom-controls{display:none}.room-tag[data-state=offline]{color:#997748}.invite-button{display:block;margin-top:16px;min-height:44px;padding:12px 16px;border-radius:8px;background:#e2ead7}.remote-label{position:absolute;top:0;left:0;font-size:9px;white-space:nowrap;pointer-events:none;padding:5px 9px;border:1px solid #dce9f0aa;border-radius:20px;color:#3c5b64;background:#e4f0efd9}#remote-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
@media(max-width:720px){.room-tag{display:block;position:fixed;left:calc(var(--safe-left) + 14px);top:calc(var(--safe-top) + 122px);padding:5px 8px;border-radius:8px;background:#fafbf0c9;font-size:9px}.brand b{display:none}.header{gap:5px}.header-actions{gap:3px}.icon-button{width:40px;min-height:44px}.view-button{min-width:44px;font-size:10px}.location-hud{padding:0 7px}.room-button{padding-left:6px}.compass{top:calc(var(--safe-top) + 155px)}}
@media(max-width:360px){.brand{display:none}.room-button{padding-left:0;border-left:0;margin-left:0}.icon-button{width:38px}.header{left:8px;right:8px}.header-actions{gap:2px}}

/* Silver, ivory and walnut accents for the church. */
.practice-controls button>b{font:inherit;font-weight:400}.practice-controls button:hover,.practice-controls button.active{background:#e0e5eb}.practice-controls button>span{color:#7a7e91}.avatar:after{background:#7e8b9b}.live-dot{background:#8395b3}.icon-button[aria-pressed=true]{background:#d5dfeb}.view-button[aria-pressed=true]{border-color:#a5b5c7}.invite-button{background:#e2e7ee}#rosary-ring{height:320px;width:240px;margin:18px auto 12px}#rosary-ring .bead{width:10px;height:10px;left:calc(50% - 5px);top:calc(50% - 5px);background:radial-gradient(circle at 30% 25%,#f3e9d4,#a69a80);box-shadow:1px 2px 3px #493b2725;z-index:2}#rosary-ring .bead.large{width:14px;height:14px;left:calc(50% - 7px);top:calc(50% - 7px);background:radial-gradient(circle at 30% 25%,#dce4ee,#75849a)}#rosary-ring .bead.active{background:#cba65b;box-shadow:0 0 0 4px #cba65b35}#ring-count{display:block;transform:translateY(-50px);font-size:34px}#rosary-ring>small{transform:translateY(-50px)}.rosary-chain{position:absolute;left:calc(50% - .5px);top:191px;bottom:26px;width:1px;background:#bcac8a}.rosary-cross{position:absolute;left:calc(50% - 3px);bottom:9px;height:30px;width:6px;background:#b5a27b;border-radius:1px}.rosary-cross:before{content:"";position:absolute;width:22px;height:5px;left:-8px;top:8px;background:#b5a27b;border-radius:1px}.brand{color:#707d93}.reset-records{color:#707d93}