/* The interface is a quiet frame around the island. */
#topleft{width:244px;padding:15px 17px;background:linear-gradient(120deg,#0b1b20eb,#101c20c9);border:1px solid #d2bd7b35;box-shadow:inset 2px 0 #cbb27b55,0 10px 35px #0003}
.bar{width:208px}.stamina{margin-top:2px}#staminafill{background:linear-gradient(90deg,#396e77,#a2d8c5);color:#9ad2c0}
#stats{font-size:11px;line-height:1.5}.bar .lbl{letter-spacing:.6px}
.boma-home{left:18px;top:auto;bottom:17px;transform:none;border:0;box-shadow:none;background:transparent;opacity:.65}
#wayfinder{top:22px;left:50%;transform:translateX(-50%);text-align:center;width:330px;pointer-events:auto}
#region{font:11px Georgia,serif;letter-spacing:4px;text-transform:uppercase;color:#e1d4b3;text-shadow:0 2px 5px #000;display:block;margin-bottom:9px}
#wayfinder button{display:inline-flex;gap:13px;align-items:center;background:linear-gradient(90deg,#08161d00,#08161dde 18%,#08161dde 82%,#08161d00);border:0;box-shadow:none;padding:9px 25px;max-width:100%;text-align:left;margin:0}
#wayfinder strong{display:block;color:#e5d6b2;font:15px Georgia,serif;white-space:normal}
#wayfinder small{display:block;color:#bac2bb;font:9px/1.7 ui-monospace,monospace;letter-spacing:.7px;margin-top:3px}
#wayarrow{display:inline-block;color:#e2c68e;font:27px Georgia,serif;transition:transform .15s linear;width:20px;text-align:center;flex-shrink:0}
#minimapbox{transform:scale(.83);transform-origin:top right;opacity:.96}
#questlog{bottom:116px;max-width:280px;font-size:11px;max-height:28vh}#questlog .q{padding:8px 12px}
#arrival{position:absolute;z-index:12;left:50%;top:27%;transform:translate(-50%,8px);opacity:0;text-align:center;pointer-events:none;transition:opacity 1s,transform 1.2s;width:min(600px,95vw);text-shadow:0 3px 14px #000,0 2px 4px #000}
#arrival.show{opacity:1;transform:translate(-50%,0)}
#arrival span{display:block;color:#d7cba9;font:9px ui-monospace,monospace;letter-spacing:5px;margin-bottom:12px}
#arrival strong{font:italic 36px Georgia,serif;color:#f0e4cb;font-weight:normal}
#arrival:after{content:'';display:block;height:1px;width:180px;margin:17px auto;background:linear-gradient(90deg,transparent,#c0ab72,transparent)}
body:has(#chaptercard.show) #arrival{opacity:0}
#memoryhint{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);z-index:12;border:1px solid #a2d5cb77;background:#0b2029e8;color:#d9eee3;padding:10px 18px;font:13px Georgia,serif;text-align:center;max-width:90vw;pointer-events:none;box-shadow:0 6px 30px #0008}
#actionbar{position:absolute;z-index:18;left:50%;bottom:34px;transform:translateX(-50%);display:flex;align-items:stretch;gap:3px;padding:5px 7px;background:#0a181ee8;border:1px solid #b4a37855;box-shadow:0 12px 32px #0007;max-width:calc(100vw - 24px)}
#actionbar button{background:transparent;box-shadow:none;border:1px solid transparent;color:#dddcc9;padding:6px 12px;margin:0;font-size:10px;min-width:62px;white-space:nowrap}
#actionbar button:hover,#actionbar button:focus-visible{background:#54746844;border-color:#afbf9355}
#actionbar button:disabled{opacity:.45}#actionbar kbd{display:block;font:12px ui-monospace,monospace;color:#e3c68a;margin-bottom:5px}
#actionbar>span{width:1px;background:#b9a77644;margin:6px}
#hints{bottom:6px;border:0;background:transparent;color:#bbc4b8;font-size:9px;pointer-events:none}
#journeypanel{width:min(710px,calc(100vw - 28px));max-width:710px;padding:28px 32px;max-height:86dvh}
.journal-head{padding:0 0 20px;border-bottom:1px solid #b9ac7d33}.memory-cap{font:9px/1.7 ui-monospace,monospace;letter-spacing:2.6px;color:#c3ae78}
.journal-head h2{font:italic 36px Georgia,serif;margin:10px 0;color:#e4d6b6}
.journal-head p{font:15px/1.7 Georgia,serif;color:#bac6bd}.journal-progress{color:#b8c6bf;font-size:10px;letter-spacing:1px;margin:20px 0 10px}
.journey-main{width:100%;text-align:left;margin:18px 0 0;padding:12px;font-size:11px}
.journal-site{display:flex;gap:18px;padding:17px 0;border-top:1px solid #acbba41f;align-items:center}.journal-site>div{flex:1;min-width:0}
.journal-sign{color:#88968b;font:italic 25px Georgia,serif;min-width:34px;text-align:center}.known .journal-sign{color:var(--memory)}
.journal-site h3{font:18px Georgia,serif;color:#9ba99e;margin:0 0 7px}.known h3{color:#e0d9c2}
.journal-site p{font:13px/1.6 Georgia,serif;color:#9baca5}.journal-site button{font-size:10px;padding:7px 10px;margin:9px 6px 0 0}
.journal-site .quiet{background:transparent;border-color:#a6b9a633}.memory-status{font:22px Georgia,serif;color:var(--memory)}
.journal-note{font:12px/1.7 Georgia,serif;color:#a1b1a7;margin:16px 0}
.memory-thought{font:italic 14px/1.7 Georgia,serif;border-left:2px solid #bdac78;padding:7px 15px;margin:15px 0 19px;color:#d5c798}
#dialog .memory-cap{margin:-4px 0 12px}
#touchpad{display:none;position:absolute;z-index:18;bottom:114px;left:16px;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:3px;touch-action:none}
#touchpad button{padding:0;margin:0;background:#102b32c9;border-color:#a9c2a455;font-size:21px;touch-action:none}
#touchpad button:first-child{grid-column:2}#touchpad button:nth-child(2){grid-row:2;grid-column:1}#touchpad button:nth-child(3){grid-row:2;grid-column:2}#touchpad button:nth-child(4){grid-row:2;grid-column:3}
button:focus-visible{outline:2px solid #e8cf8f;outline-offset:3px}
body:has(#dialog:not(.hidden)) #actionbar,body:has(.panel:not(.hidden)) #touchpad{visibility:hidden}
@media(pointer:coarse){#touchpad{display:grid}#questlog{bottom:220px;max-height:18vh}#hints{display:none}#actionbar{bottom:15px}#memoryhint{bottom:97px}}
@media(max-width:900px){#wayfinder{width:260px;top:18px}#wayfinder strong{font-size:13px}}
@media(max-width:700px){
  #topleft{width:169px;padding:9px}.bar{width:149px;height:12px;margin-bottom:6px}#stats{font-size:9px}
  #minimapbox{transform:scale(.56)}#wayfinder{top:137px;width:260px}#region{font-size:10px;margin-bottom:5px}
  #wayfinder button{padding:6px 17px}#wayfinder strong{font-size:13px}#wayfinder small{font-size:8px}
  #arrival{top:36%}#arrival strong{font-size:28px}#arrival span{font-size:8px}
  #actionbar{gap:0;padding:4px;bottom:28px;width:max-content}#actionbar button{padding:7px 8px;min-width:47px;font-size:9px}#actionbar kbd{font-size:10px}#actionbar>span{margin:6px 2px}
  .boma-home{display:none}#hints{font-size:8px;bottom:7px}#questlog{max-width:230px;font-size:10px;bottom:110px;max-height:22vh}
  #journeypanel{padding:23px 18px;max-height:90dvh}.journal-head h2{font-size:30px}.journal-site{gap:10px}.journal-site h3{font-size:16px}.journal-site p{font-size:12px}.journal-sign{min-width:25px;font-size:21px}
  #dialog{bottom:18px;max-height:calc(100dvh - 155px)}#memoryhint{font-size:12px;bottom:107px;width:max-content}
}
@media(max-height:600px){#wayfinder{top:12px;left:50%;width:260px}#arrival{top:30%}#questlog{max-height:24vh}#dialog{max-height:90dvh;bottom:10px}#actionbar{bottom:18px}#hints{display:none}}
@media(prefers-reduced-motion:reduce){#arrival,#wayarrow{transition:none}}
.journal-close{position:sticky;top:0;float:right;z-index:2;font:24px/1 Georgia,serif;padding:5px 10px;margin:-10px -10px 0 0;background:#183033;border-color:#c6b58166}
body:has(.panel:not(.hidden)) #actionbar{visibility:hidden}
#toasts{top:112px;padding:0 12px}.toast{max-width:min(600px,90vw);line-height:1.5}
@media(max-width:700px){#toasts{top:211px}.toast{font-size:10px}}
@media(pointer:coarse){#memoryhint{bottom:211px;max-width:calc(100vw - 28px)}#questlog{bottom:258px;max-height:16vh}#actionbar{bottom:15px}}
@media(pointer:coarse) and (max-height:600px){#wayfinder{top:10px;width:240px}#touchpad{bottom:88px}#questlog{display:none}#memoryhint{bottom:93px}#actionbar{bottom:12px}}
#touchpad button:nth-child(5){grid-column:3;grid-row:1;color:#d9c589}
@media(max-width:380px){#actionbar button{min-width:40px;padding:7px 5px}}
body:not(.playing) #actionbar,body:not(.playing) #touchpad,body:not(.playing) #wayfinder{visibility:hidden}

.act-journal{margin:20px 0 24px;padding:20px;border:1px solid #bd9b5b55;background:#c8a46409}
.act-journal h3{font:24px Georgia,serif;color:#e7d7ad;margin:9px 0}
.act-journal p{line-height:1.65;color:#c3ccc5;font-size:15px}
.act-journal ol{padding-left:22px;line-height:1.9;color:#b4bcb6;font-size:13px}
.act-journal .done{color:#b8d8c0}
.act-clue{border-left:2px solid #aa915d;padding-left:12px;font-style:italic}
body:has(.panel:not(.hidden)) #chaptercard,body:has(#dialog:not(.hidden)) #chaptercard{opacity:0}

body:has(.panel:not(.hidden)) #arrival,body:has(#dialog:not(.hidden)) #arrival{opacity:0}
