#world3d{position:fixed;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:grab}#world3d:active{cursor:grabbing}#world{z-index:2;pointer-events:none}.vignette{z-index:3;box-shadow:inset 0 0 130px #263d5329}.creator{z-index:10}#gameUI{position:fixed;inset:0;z-index:5;pointer-events:none}#gameUI button,#gameUI .quest-tracker,#gameUI .top-actions{pointer-events:auto}dialog{z-index:20}
#fpCompass{position:absolute;top:83px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#203d50d9;border:1px solid #fff4d13b;border-radius:12px;padding:10px 17px;color:#ffefd2;box-shadow:0 6px 22px #18374b20;backdrop-filter:blur(10px);max-width:38vw}#fpHeading{font:600 10px Outfit;color:#c2dbd9;border-right:1px solid #b1c8b83b;padding-right:12px;min-width:26px}#fpBearing{font-size:27px;color:#f5c57d;display:block;line-height:1}#fpCompass strong{display:block;font:500 12px Outfit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#fpCompass small{font-size:9px;color:#bfd7cf;display:block;margin-top:3px}#crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border:1px solid #fff6ce8a;border-radius:50%;box-shadow:0 1px 3px #152e4166}#crosshair i{position:absolute;left:7px;top:7px;width:2px;height:2px;border-radius:50%;background:#fffbe9}#crosshair.near{border-color:#ffce76;box-shadow:0 0 10px #ffdb9a99}#crosshair.near i{background:#ffce76}
#lookHint{position:absolute;left:50%;bottom:111px;transform:translateX(-50%);font-size:10px;background:#173b50af;color:#e7e8d6;padding:9px 16px;border:1px solid #fff3ce30;border-radius:30px;white-space:nowrap;backdrop-filter:blur(8px)}#lookHint span{margin:0 6px;color:#f7cc8d}.look-button{background:#f8f2e6e8;border:1px solid #fff8;border-radius:10px;color:#3b5864;font-size:11px;padding:15px}.bottom-bar{gap:10px}.keyboard-help{font-size:8px;padding:10px;gap:6px}.keyboard-help span{margin-right:4px}.explore-label{bottom:105px;text-shadow:0 2px 6px #183a52,0 3px 25px #15364c66}.explore-label h2{font-size:30px}.quest-tracker{width:230px;top:125px;background:#f7f2e6e8}.interaction-hint{bottom:157px;background:#173f51e8}.toast{top:153px}.location-chip{background:#f8f4e5dd}.power-button{min-width:215px}.power-button>span:first-child{color:#efbb7e}.power-button .key{margin-left:8px}#fpLoadStatus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f8f1de;padding:25px;border-radius:12px;color:#284754;font-size:14px;text-align:center}
@media(max-width:800px){#fpCompass{top:81px;left:auto;right:11px;transform:none;max-width:165px;gap:7px;padding:8px 10px}#fpHeading{font-size:8px;min-width:15px;padding-right:7px}#fpBearing{font-size:21px}#fpCompass strong{font-size:10px;max-width:102px;white-space:normal}#fpCompass small{font-size:8px}.quest-tracker{top:151px;width:179px;padding:12px;left:11px}.quest-tracker h3{font-size:15px}.quest-tracker p{font-size:9px;line-height:1.5}.quest-tracker .progress-row{font-size:9px;padding:7px}.quest-tracker .eyebrow{font-size:6px}.quest-tracker button{font-size:9px}.look-button{display:none}.keyboard-help{display:none}.power-button{min-width:0}.bottom-bar{gap:8px;bottom:17px;left:14px;right:14px}.touch-pad{bottom:95px;z-index:4}.interaction-hint{left:50%;right:auto;transform:translateX(-50%);bottom:179px;max-width:90vw;white-space:nowrap}#lookHint{bottom:80px;font-size:8px;padding:7px 10px;max-width:94vw;white-space:normal;text-align:center}.toast{top:350px;font-size:10px;max-width:90vw}.game-top{top:12px}.explore-label{display:none}}
@media(pointer:coarse){.look-button{display:none}}

#techniqueFlash{position:absolute;right:8%;top:43%;font:800 italic clamp(22px,3.5vw,46px) Outfit,sans-serif;letter-spacing:-1px;color:#fff1d0;text-shadow:3px 3px 0 #284256,-1px -1px 0 #284256;transform:rotate(-6deg);border-bottom:4px solid #efbb70;padding:4px 20px;background:linear-gradient(100deg,transparent,#23495eb0);pointer-events:none}@media(max-width:800px){#techniqueFlash{top:54%;right:5%;font-size:23px}}

.anime-dialogue{display:flex;align-items:center;gap:25px;min-height:250px}.anime-dialogue canvas{width:130px;height:233px;flex:0 0 130px;filter:drop-shadow(4px 6px 0 #d9ddcd);background:radial-gradient(ellipse,#d5e2cd66,transparent 70%)}.anime-dialogue p{font-size:14px;line-height:1.8;color:#3d5b65}@media(max-width:500px){.anime-dialogue{gap:14px;min-height:210px}.anime-dialogue canvas{width:96px;height:172px;flex-basis:96px}.anime-dialogue p{font-size:12px;line-height:1.7}}

.graphics-setting{display:grid;gap:9px;margin:22px 0;color:#3b5961;font-weight:700}.graphics-setting select{width:100%;padding:13px;border:1px solid #b9c9bb;border-radius:10px;background:#f6f2e5;color:#284d5c;font:inherit}.anime-dialogue canvas{filter:drop-shadow(0 6px 7px #183b4820)}
.waystone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}.waystone-grid button{text-align:left;font-size:12px;padding:12px}@media(max-width:500px){.waystone-grid button{font-size:10px;padding:10px}}

dialog:has(#mapCanvas){width:min(1050px,94vw);max-width:1050px}.map-wrap canvas{width:100%;height:auto}

dialog:has(#mapCanvas) .map-wrap{display:flex;justify-content:center;aspect-ratio:auto}dialog:has(#mapCanvas) .map-wrap canvas{width:auto;height:auto;max-width:100%;max-height:calc(85vh - 280px);object-fit:contain}dialog:has(#mapCanvas) .map-legend{font-size:12px;margin:10px 0}@media(max-width:600px){dialog:has(#mapCanvas) .map-wrap canvas{max-height:36vh}}
@media(min-width:800px){dialog:has(#mapCanvas) .modal-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:14px 24px}dialog:has(#mapCanvas) .map-wrap{grid-row:1/3;align-items:center}dialog:has(#mapCanvas) .map-wrap canvas{max-height:calc(85vh - 180px)}dialog:has(#mapCanvas) .waystone-grid{grid-template-columns:1fr;margin:0;gap:6px}dialog:has(#mapCanvas) .waystone-grid button{padding:8px 12px}dialog:has(#mapCanvas) .map-legend{margin:0}}

.minimap{position:absolute;top:99px;right:25px;width:200px;padding:7px;border:1px solid #fff4d6aa;border-radius:15px;background:#faf7e9ed;box-shadow:0 5px 24px #203d5026;color:#294752;text-align:left;overflow:hidden;backdrop-filter:blur(10px)}.minimap:hover,.minimap:active{transform:none;background:#fff9e9}.minimap-title{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:3px 4px 8px;font:600 12px Outfit,sans-serif}.minimap-title>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minimap canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:9px}.minimap-footer{display:flex;justify-content:space-between;gap:6px;padding:7px 4px 2px;font-size:9px}.minimap-footer>span:first-child{color:#a66b32}@media(max-width:800px){.minimap{top:151px;right:11px;width:128px;padding:5px;border-radius:12px}.minimap-title{font-size:9px;padding:2px 2px 5px}.minimap-footer{font-size:7px;padding:5px 1px 1px;gap:3px}}@media(max-width:350px){.minimap{width:110px}}@media(max-height:500px) and (min-width:801px){.minimap{top:91px;width:142px}.minimap-title{font-size:10px}.minimap-footer{font-size:8px}}
/* An illustrated portrait and speech balloon frame conversations in the world. */
.anime-dialogue{position:relative;border:2px solid #263644;border-radius:5px;background:radial-gradient(circle at 2px 2px,#aabcb65c 1px,transparent 1.5px) 0 0/7px 7px,#f2eddd;padding:14px 16px;box-shadow:3px 3px 0 #263644;gap:14px;overflow:hidden}
.anime-dialogue canvas{background:linear-gradient(140deg,#bfe4d7 0 52%,#93bbbd 52% 55%,#aacbc8 55% 100%);border:2px solid #334455;border-radius:3px;filter:none;align-self:stretch;object-fit:contain}
.anime-dialogue p{position:relative;isolation:isolate;background:#fffef5;border:2px solid #334455;border-radius:16px 14px 17px 4px;padding:13px;color:#283946;line-height:1.6;box-shadow:2px 2px 0 #334455}
.anime-dialogue p:before{content:'';position:absolute;left:-8px;top:40%;width:10px;height:10px;background:#fffef5;border-left:2px solid #334455;border-bottom:2px solid #334455;transform:rotate(45deg)}
@media(max-width:500px){.anime-dialogue{gap:8px;padding:6px}.anime-dialogue canvas{width:75px;flex-basis:75px}.anime-dialogue p{padding:9px}}

/* The two village mentors get an illustrated close-up when they speak. */
.anime-dialogue.shinobi-dialogue{--paper:#ffce69;display:grid;grid-template-columns:minmax(120px,39%) minmax(0,1fr);gap:0;min-height:0;padding:0;align-items:center;background:radial-gradient(circle at 1px 1px,#28374530 .8px,transparent 1.2px) 0 0/5px 5px,linear-gradient(105deg,var(--paper),#fbefcf 88%);border:2px solid #24283c}
.gaara-dialogue.shinobi-dialogue{--paper:#c97868}
.shinobi-dialogue .shinobi-portrait{display:block;width:100%;height:100%;min-height:195px;object-fit:cover;object-position:50% 30%;clip-path:polygon(0 0,100% 0,92% 100%,0 100%);align-self:stretch}
.shinobi-dialogue p{margin:12px 13px 12px 2px;padding:12px 14px;font-size:14px;line-height:1.5}
@media(max-width:520px){.anime-dialogue.shinobi-dialogue{display:flex;flex-direction:column}.shinobi-dialogue .shinobi-portrait{height:143px;min-height:0;object-position:50% 31%;clip-path:none;border-bottom:2px solid #24283c}.shinobi-dialogue p{margin:8px 10px 11px;font-size:13px}.shinobi-dialogue p:before{display:none}}

/* Keep the full realm visible while destinations scroll independently. */
.map-search{font-size:11px;font-weight:600;display:block}.map-search input{display:block;margin-top:6px;padding:10px 12px}.new-region{float:right;margin-left:6px;color:#55745f;font-size:8px;font-weight:700;letter-spacing:1px;background:#dce9d7;padding:3px 5px;border-radius:4px}
@media(min-width:800px){dialog:has(#mapCanvas) .modal-body{grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:12px 22px}dialog:has(#mapCanvas) .map-wrap{grid-row:1/4;grid-column:1}dialog:has(#mapCanvas) .map-legend{grid-row:1;grid-column:2}dialog:has(#mapCanvas) .map-search{grid-row:2;grid-column:2}dialog:has(#mapCanvas) .waystone-grid{grid-row:3;grid-column:2;max-height:36vh}dialog:has(#mapCanvas) .modal-actions{grid-column:1/3;flex-wrap:wrap;margin-top:0}dialog:has(#mapCanvas) .map-wrap canvas{max-height:55vh}}
@media(max-width:799px){.map-search{margin:12px 0}dialog:has(#mapCanvas) .waystone-grid{max-height:32vh;overflow:auto}}
@media(max-width:799px){dialog:has(#mapCanvas) .modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}dialog:has(#mapCanvas) .modal-actions button{width:100%;min-height:48px;padding:10px;font-size:11px;line-height:1.4}}

#fpCompass #mobileWorldClock{display:none}@media(max-width:800px){#fpCompass #mobileWorldClock{display:block;color:#ffe0a0}}