/* 1.0: keep the world visible and every dialog reachable on small screens. */
.screen{align-items:safe center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.choices{grid-template-columns:1fr}
.swatch{min-width:40px;min-height:40px}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #2769a1;outline-offset:3px}
dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
#help{line-height:1.55}#help h2{padding-right:34px}#help .close{min-width:44px;min-height:44px}
#guideLaunch{min-height:44px;border:0;border-radius:12px;padding:10px 14px;background:#d5ead5;color:#304b39;font-weight:700}
#help input[type=checkbox]{width:20px;height:20px;vertical-align:middle}
#chatPanel{max-height:calc(100dvh - 185px);overflow-y:auto;overscroll-behavior:contain}
#chatClose{min-width:44px;min-height:44px}
#playerChatDialog{max-height:min(calc(100dvh - 24px),calc(var(--visible-height,100dvh) - 16px));overflow-y:auto}
#playerChatHistory{height:clamp(72px,calc(var(--visible-height,100dvh) - 230px),380px);min-height:72px}
#playerChatInput{scroll-margin-block:20px}
.mini-active #hud #task,.mini-active #prompt{display:none}
#hud #miniHud{position:relative;inset:auto;transform:none;width:100%;max-width:100%;padding:7px 66px 7px 11px;background:#ffffffb3;border:0;border-radius:12px;box-shadow:none;pointer-events:none}
#miniTitle{font-size:13px;line-height:1.25;display:block}#miniText{font-size:11px;line-height:1.3;margin:5px 0 0}
#miniCancel{top:3px;right:3px;min-height:44px;padding:8px;font-size:11px;touch-action:manipulation}
#hud>#miniThrow{position:fixed;z-index:9;top:auto;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));min-width:78px;min-height:78px;border-radius:50%;padding:12px;font-size:14px;touch-action:manipulation}
#miniThrow[hidden]{display:none}
@media(max-height:540px) and (min-width:560px){
  #chatPanel{top:max(10px,env(safe-area-inset-top));bottom:auto;max-height:calc(100dvh - 20px);width:min(430px,calc(100vw - 280px));padding:12px}
  #chatPanel h3{font-size:14px;margin-bottom:8px}#chatChoices{gap:6px}
  .card{padding:16px}.logo h1{font-size:2.5rem}.logo span{font-size:2.5rem}
  #hud .topbar{width:min(400px,calc(100vw - 20px))}
}
@media(max-width:360px){.card{padding:16px}#playerChatDialog{padding:12px}#playerChatSend{padding:9px 10px}#passportDialog{padding:16px}}

/* All notices start at the top; no passive message covers a bottom activity. */
#notifications{position:fixed;z-index:10;top:var(--hud-bottom,116px);left:10px;width:min(440px,calc(100vw - 20px));display:grid;gap:6px;pointer-events:none;max-height:30vh;overflow:hidden}
#notifications #message,#notifications #prompt{position:static;inset:auto;transform:none;margin:0;max-width:100%;width:100%;font-size:12px;line-height:1.25;padding:7px 10px;text-align:left}
#notifications #message{display:none}#notifications #message.show{display:block}
#chatPanel{top:var(--hud-bottom,116px);bottom:auto;max-height:min(48dvh,calc(var(--visible-height,100dvh) - var(--hud-bottom,116px) - 110px))}
dialog{top:max(12px,env(safe-area-inset-top));bottom:auto;margin:0 auto}
@media(max-height:540px) and (min-width:560px){
  #notifications{left:auto;right:10px;top:10px;width:min(360px,calc(100vw - 430px));max-height:35vh}
  #chatPanel{top:10px;max-height:calc(var(--visible-height,100dvh) - 20px)}
}

/* 1.0.10: a clear, compact next step and a quiet compass. */
#hud #task{padding:10px 12px 10px 40px;background:linear-gradient(115deg,#fffbeeeb,#ffffffd9);border:1px solid #ffffffb8;box-shadow:0 3px 12px #294a3815;border-radius:15px;min-height:63px}
#hud #taskText{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.3;color:#304739}
#hud #sideTask{font-size:11px;line-height:1.3;color:#56685d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud #questCompass{position:absolute;left:10px;top:16px;color:#986817;font:24px/1 system-ui;transform-origin:center;display:block}
#hud #questCompass[hidden]{display:none}
#hud #task.stamp-earned{animation:stampGlow 1.6s ease-out}
@keyframes stampGlow{0%,35%{box-shadow:0 0 0 3px #eabf56,0 0 18px #f4d77a88}100%{box-shadow:0 3px 12px #294a3815}}
#passportStory{background:#e7efdf;padding:13px;border-left:4px solid #629363;border-radius:10px;font-size:14px;line-height:1.5}
#careProgress,.pass-tip{font-size:12px;line-height:1.5;color:#56685d}
.pass-task.tracked{border:2px solid #c5a142;background:#fff7db}
.pass-task button{min-height:44px;margin-top:8px;padding:8px 13px;border:1px solid #809a73;border-radius:10px;color:#294735;background:#e7f0dd;font-weight:700}
#guideDialog{background:linear-gradient(145deg,#fff8df,#f4f9ed);padding:22px;font-size:15px;line-height:1.55}
#guideProgress{display:inline-block;padding:4px 12px;border-radius:20px;background:#e0ebd7;color:#436947;font-weight:700}
#guideTitle{font-size:23px;line-height:1.2;color:#365b40}
#guideText{margin-bottom:12px}.guide-buttons{position:sticky;bottom:-22px;padding:12px 0;background:#f5f9ed}
.action.important{background:linear-gradient(145deg,#fff9d9,#ffe394)}
@media(max-height:540px){#hud #task{min-height:52px;padding-top:7px;padding-bottom:7px}#guideDialog{max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){#hud #task.stamp-earned{animation:none}}

#hud #questCompass{width:20px;height:20px;background:#986817;clip-path:polygon(0 36%,55% 36%,55% 5%,100% 50%,55% 95%,55% 64%,0 64%)}

/* The second passport unlocks after completing the original adventures. */
#superPassport{border-top:2px solid #b48be1;margin-top:16px;padding-top:8px}
#superPassport[hidden]{display:none}
#superTasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px;margin-bottom:16px}
#superProgress{color:#654082;font-weight:600}