/* The Night Garden overhaul: one objective, two buttons, one context prompt; touch controls on phones. */
:root{--ng-panel:#09111dcc;--ng-panel-solid:#0b1522f2;--ng-line:#ffffff24;--ng-gold:#dfb77a;--ng-gold-soft:#dfb77a40;--ng-paper:#f2f0e9;--ng-muted:#b5c1ca;--ng-green:#9be59a;--ng-safe-t:env(safe-area-inset-top,0px);--ng-safe-b:env(safe-area-inset-bottom,0px);--ng-safe-l:env(safe-area-inset-left,0px);--ng-safe-r:env(safe-area-inset-right,0px)}

/* ---- Retire the old busy chrome (its buttons still exist and are driven from the new menu) ---- */
body.ng-hud #header,body.ng-hud #destinations,body.ng-hud #location,body.ng-hud #hint,body.ng-hud #walkpad,
body.ng-hud #evening-invitation,body.ng-hud #evening-plan-open,body.ng-hud .achievement-button,body.ng-hud .anywhere-binoculars,
body.ng-hud #garden-jump,body.ng-hud #garden-posture,body.ng-hud #tool-tray{display:none!important}
body.ng-hud.ng-touch #interact{visibility:hidden!important;pointer-events:none!important}
body.ng-hud .achievement-toast{top:calc(84px + var(--ng-safe-t))}
body.ng-hud:not(.entered) #ng-hud{display:none}
body.ng-hud.quiet #ng-hud,body.ng-hud.quiet .ng-pointer,body.ng-hud.quiet .ng-marker,body.ng-hud.quiet .ng-reticle,body.ng-hud.quiet .ng-touch{display:none!important}
body.ng-hud.using-binoculars #ng-hud .ng-objective{opacity:.55}

/* ---- Welcome: say what the game is in one look ---- */
#welcome .ng-how{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:6px 0 26px;padding:0}
#welcome .ng-how li{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border:1px solid #ffffff2e;border-radius:40px;background:#08101c99;backdrop-filter:blur(8px);font-size:14px;color:#e9ece6}
#welcome .ng-how b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ng-gold);color:#0a111b;font-size:13px}
@media (max-width:700px){#welcome .ng-how{gap:6px;margin-bottom:18px}#welcome .ng-how li{font-size:12.5px;padding:6px 11px 6px 6px}#welcome .ng-how b{width:20px;height:20px;font-size:11px}}

/* ---- Top bar ---- */
#ng-hud{position:fixed;inset:0 0 auto 0;z-index:30;pointer-events:none;padding:calc(16px + var(--ng-safe-t)) calc(18px + var(--ng-safe-r)) 0 calc(18px + var(--ng-safe-l));display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-family:var(--font,'DM Sans',Arial,sans-serif)}
#ng-hud>*{pointer-events:auto}
.ng-objective{width:min(360px,100%);border:1px solid var(--ng-line);border-radius:18px;background:var(--ng-panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ng-paper);box-shadow:0 10px 40px #0006;overflow:hidden}
.ng-objective.pulse{animation:ng-pulse 1.2s ease-out}
@keyframes ng-pulse{0%{box-shadow:0 0 0 0 #dfb77acc}100%{box-shadow:0 0 0 18px #dfb77a00}}
.ng-obj-toggle{all:unset;box-sizing:border-box;display:grid;gap:4px;width:100%;padding:13px 16px 12px;cursor:pointer}
.ng-obj-toggle:focus-visible{outline:2px solid var(--ng-gold);outline-offset:-3px;border-radius:18px}
.ng-obj-kicker{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.14em;color:var(--ng-gold);font-weight:600}
.ng-obj-count{color:var(--ng-muted);letter-spacing:.08em}
.ng-obj-title{font-family:var(--display,'Playfair Display',Georgia,serif);font-weight:500;font-size:21px;line-height:1.2;color:#fff}
.ng-obj-dots{display:flex;gap:6px;margin-top:5px;align-items:center}
.ng-obj-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid #ffffff66;box-sizing:border-box}
.ng-obj-dots i.star{width:12px;height:12px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border:0;background:#ffffff40}
.ng-obj-dots i.done{background:var(--ng-gold);border-color:var(--ng-gold)}
.ng-obj-dots i.now{outline:2px solid var(--ng-gold);outline-offset:2px;border-radius:50%}
.ng-obj-dots i.star.now{outline:0;background:#fff;animation:ng-twinkle 1.6s ease-in-out infinite}
@keyframes ng-twinkle{50%{opacity:.45}}
.ng-obj-detail{padding:0 16px 14px;border-top:1px solid var(--ng-line);font-size:14px;line-height:1.45;color:#dfe6ea}
.ng-obj-hint{margin:12px 0 10px;color:#fff}
.ng-obj-steps{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:4px;font-size:13px;color:var(--ng-muted)}
.ng-obj-steps li{display:flex;gap:9px;align-items:center}
.ng-obj-steps li::before{content:'';width:13px;height:13px;border-radius:50%;border:1.5px solid #ffffff55;flex:none;box-sizing:border-box}
.ng-obj-steps li.done{color:#e9ecef}.ng-obj-steps li.done::before{background:var(--ng-gold);border-color:var(--ng-gold)}
.ng-obj-steps li.now{color:#fff;font-weight:600}.ng-obj-steps li.now::before{border-color:#fff;box-shadow:0 0 0 3px #ffffff22}
.ng-obj-actions{display:flex;flex-wrap:wrap;gap:8px}
.ng-obj-actions button,.ng-found-actions button,.ng-reward-actions button{border:1px solid #ffffff38;border-radius:30px;background:#ffffff10;color:#fff;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer}
.ng-obj-actions button:first-child{background:var(--ng-gold);color:#0a111b;border-color:var(--ng-gold);font-weight:600}
.ng-obj-keys{margin:12px 0 0;font-size:11.5px;color:#93a3ae;letter-spacing:.02em}
.ng-objective.done .ng-obj-title{color:var(--ng-gold)}
.ng-top-actions{display:flex;gap:10px}
.ng-icon-btn{display:flex;align-items:center;gap:8px;height:46px;min-width:46px;padding:0 13px;justify-content:center;border:1px solid var(--ng-line);border-radius:30px;background:var(--ng-panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font:600 14px var(--font,'DM Sans',Arial,sans-serif);cursor:pointer;box-shadow:0 8px 30px #0005}
.ng-icon-btn svg{width:22px;height:22px}
.ng-icon-btn:focus-visible{outline:2px solid var(--ng-gold);outline-offset:2px}
#ng-sound{padding:0;width:46px}
#ng-sound .wave{display:none}#ng-sound.on .wave{display:inline}#ng-sound.on .mute{display:none}

/* ---- Guidance ---- */
.ng-pointer,.ng-marker,.ng-reticle{position:fixed;left:0;top:0;z-index:29;pointer-events:none;font-family:var(--font,'DM Sans',Arial,sans-serif)}
.ng-pointer{width:0;height:0}
.ng-pointer-arrow{position:absolute;left:-26px;top:-26px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--ng-gold);color:#0a111b;box-shadow:0 0 0 6px #dfb77a33,0 8px 26px #0008;animation:ng-nudge 1.4s ease-in-out infinite}
.ng-pointer-arrow svg{width:28px;height:28px}
@keyframes ng-nudge{50%{box-shadow:0 0 0 12px #dfb77a14,0 8px 26px #0008}}
.ng-pointer-label{position:absolute;left:0;top:34px;transform:translateX(-50%);white-space:nowrap;padding:4px 10px;border-radius:20px;background:#09111dd9;color:#fff;font-size:12.5px;font-weight:600;border:1px solid var(--ng-gold-soft)}
.ng-marker{width:0;height:0}
.ng-marker i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px dashed var(--ng-gold);box-sizing:border-box;animation:ng-spin 9s linear infinite}
.ng-marker[data-kind=ground] i{border-style:solid;animation:ng-bob 1.6s ease-in-out infinite}
@keyframes ng-spin{to{transform:rotate(360deg)}}
@keyframes ng-bob{50%{transform:translateY(-6px)}}
.ng-marker span{position:absolute;left:0;top:36px;transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:20px;background:#09111dcc;color:var(--ng-gold);font-size:12.5px;font-weight:600}
.ng-reticle{left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;--p:0}
.ng-reticle i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--ng-gold) calc(var(--p)*360deg),#ffffff2a 0);-webkit-mask:radial-gradient(circle,transparent 33px,#000 34px);mask:radial-gradient(circle,transparent 33px,#000 34px)}
.ng-reticle::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffffffaa}
.ng-reticle span{position:absolute;top:86px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:#fff;opacity:0;transition:opacity .2s;text-shadow:0 1px 6px #000}
.ng-reticle.holding span{opacity:1}
.ng-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Spotted card ---- */
.ng-found{position:fixed;left:50%;bottom:calc(28px + var(--ng-safe-b));z-index:33;width:min(560px,calc(100vw - 32px));transform:translateX(-50%);display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px;border:1px solid var(--ng-gold-soft);border-radius:20px;background:var(--ng-panel-solid);color:#fff;box-shadow:0 20px 60px #000a;font-family:var(--font,'DM Sans',Arial,sans-serif)}
.ng-found.pop{animation:ng-pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes ng-pop{from{transform:translate(-50%,20px) scale(.96);opacity:0}}
.ng-found img{width:150px;height:110px;object-fit:cover;border-radius:12px;background:#132233}
.ng-found h3{margin:2px 0 6px;font:500 22px/1.15 var(--display,'Playfair Display',Georgia,serif)}
.ng-found-kicker{font-size:11px;letter-spacing:.14em;color:var(--ng-gold);font-weight:600}
.ng-found-line{margin:0 0 4px;font-size:14px;line-height:1.4;color:#e4eaee}
.ng-found-meta{margin:0 0 10px;font-size:12px;color:#93a3ae}
.ng-found-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ng-found-photo{background:var(--ng-gold)!important;color:#0a111b!important;border-color:var(--ng-gold)!important;font-weight:600}
.ng-found-next{font-size:12.5px;color:var(--ng-muted)}
.ng-found-close{position:absolute;right:8px;top:6px;border:0;background:none;color:#fff;font-size:22px;width:36px;height:36px;cursor:pointer}

.ng-note{position:fixed;left:50%;top:calc(96px + var(--ng-safe-t));transform:translateX(-50%);z-index:34;display:grid;gap:2px;padding:12px 20px;border-radius:16px;border:1px solid var(--ng-gold-soft);background:var(--ng-panel-solid);color:#fff;font:14px var(--font,'DM Sans',Arial,sans-serif);text-align:center;box-shadow:0 12px 40px #0008;pointer-events:none;max-width:calc(100vw - 32px)}
.ng-note strong{font:500 18px var(--display,'Playfair Display',Georgia,serif);color:var(--ng-gold)}

/* ---- Menu sheet ---- */
.ng-menu{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:100%;width:min(400px,100vw);padding:calc(22px + var(--ng-safe-t)) 22px calc(22px + var(--ng-safe-b));border:0;border-left:1px solid var(--ng-line);background:#08101bf2;color:#fff;font-family:var(--font,'DM Sans',Arial,sans-serif);box-sizing:border-box;overflow:auto}
.ng-menu[open]{animation:ng-slide .25s ease-out}
@keyframes ng-slide{from{transform:translateX(30px);opacity:0}}
.ng-menu::backdrop{background:#02060c88;backdrop-filter:blur(2px)}
.ng-menu-head{display:flex;justify-content:space-between;align-items:flex-start}
.ng-menu-head small{font-size:11px;letter-spacing:.16em;color:var(--ng-gold);font-weight:600}
.ng-menu-head h2{margin:4px 0 0;font:500 30px var(--display,'Playfair Display',Georgia,serif)}
.ng-menu-close,.ng-reward-close{border:1px solid var(--ng-line);background:#ffffff10;color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer}
.ng-menu-goal{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;margin:18px 0 14px;padding:14px;border-radius:14px;background:#dfb77a14;border:1px solid var(--ng-gold-soft)}
.ng-menu-goal-count{grid-row:span 2;font:600 24px var(--display,'Playfair Display',Georgia,serif);color:var(--ng-gold)}
.ng-menu-goal-text{font-size:14px}
.ng-link{justify-self:start;border:0;background:none;color:var(--ng-muted);text-decoration:underline;padding:0;font:inherit;font-size:12.5px;cursor:pointer}
.ng-menu-list{display:grid;gap:6px}
.ng-menu-list button{display:grid;gap:2px;text-align:left;padding:13px 14px;border:1px solid transparent;border-radius:14px;background:#ffffff0a;color:#fff;font:inherit;cursor:pointer}
.ng-menu-list button:hover,.ng-menu-list button:focus-visible{border-color:var(--ng-gold-soft);background:#ffffff14;outline:0}
.ng-menu-list strong{font-size:15.5px;font-weight:600}
.ng-menu-list small{font-size:12.5px;color:var(--ng-muted)}
.ng-menu-list [data-m=tour]{background:#dfb77a1f;border-color:var(--ng-gold-soft)}
.ng-menu-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ng-line)}
.ng-menu-foot button{border:1px solid var(--ng-line);border-radius:30px;background:none;color:#cbd5db;padding:8px 13px;font:inherit;font-size:12.5px;cursor:pointer}

/* ---- Reward ---- */
.ng-reward{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:26px 28px;border:1px solid var(--ng-gold-soft);border-radius:24px;background:#08111cf5;color:#fff;font-family:var(--font,'DM Sans',Arial,sans-serif);box-shadow:0 30px 90px #000c}
.ng-reward::backdrop{background:#01040866}
.ng-reward-close{position:absolute;right:14px;top:14px}
.ng-reward-kicker{font-size:11px;letter-spacing:.16em;color:var(--ng-gold);font-weight:600}
.ng-reward h2{margin:6px 0 8px;font:500 34px/1.1 var(--display,'Playfair Display',Georgia,serif)}
.ng-reward-lead{margin:0 0 16px;color:#dfe6ea;line-height:1.5}
.ng-cert{width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;display:block;background:#0d1a2a}
.ng-reward-name{display:grid;gap:6px;margin:16px 0 12px;font-size:13px;color:var(--ng-muted)}
.ng-reward-name input{font:inherit;font-size:16px;padding:11px 14px;border-radius:12px;border:1px solid #ffffff38;background:#ffffff0d;color:#fff}
.ng-reward-actions{display:flex;flex-wrap:wrap;gap:10px}
.ng-reward-actions .primary{background:var(--ng-gold);color:#0a111b;border-color:var(--ng-gold);font-weight:600}
.ng-reward-small{font-size:12px;color:#8fa0ab;margin:12px 0 0}
.ng-reward-next{font-size:13.5px;color:#dfe6ea;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--ng-line);line-height:1.5}

/* ---- Desktop context prompt ---- */
@media (pointer:fine) and (min-width:701px){
  body.ng-hud #interact{left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:34px!important;max-width:min(520px,80vw)!important;border-color:var(--ng-gold-soft)!important;background:#09111de0!important;padding:10px 18px!important}
  body.ng-hud #interact-title{font-size:14px!important}
}

/* ---- Touch controls ---- */
.ng-touch{position:fixed;inset:auto 0 0 0;height:0;z-index:36;font-family:var(--font,'DM Sans',Arial,sans-serif)}
.ng-touch[hidden]{display:none}
.ng-stick{position:fixed;left:calc(22px + var(--ng-safe-l));bottom:calc(26px + var(--ng-safe-b));width:128px;height:128px;border-radius:50%;touch-action:none;-webkit-user-select:none;user-select:none}
.ng-stick[hidden]{display:none}
.ng-stick-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffffff4d;background:radial-gradient(circle,#0a142099 40%,#0a142066);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ng-stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#f2f0e9e6;box-shadow:0 6px 20px #0008;transition:transform .12s ease-out}
.ng-stick.held .ng-stick-knob{transition:none;background:#fff}
.ng-stick.held .ng-stick-ring{border-color:var(--ng-gold)}
.ng-buttons{position:fixed;right:calc(18px + var(--ng-safe-r));bottom:calc(22px + var(--ng-safe-b));width:170px;height:150px;pointer-events:none}
.ng-round{position:absolute;display:grid;place-items:center;border-radius:50%;border:1.5px solid #ffffff4d;background:#0a1420b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}
.ng-round[hidden]{display:none}
.ng-round svg{width:28px;height:28px}
.ng-round:active{transform:scale(.94)}
.ng-act{right:0;bottom:56px;width:80px;height:80px}
.ng-act:disabled{opacity:.38}
.ng-act.ready{background:var(--ng-gold);color:#0a111b;border-color:var(--ng-gold);box-shadow:0 0 0 6px #dfb77a33,0 10px 30px #0008}
.ng-act-label{position:absolute;right:92px;top:50%;transform:translateY(-50%);max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 11px;border-radius:20px;background:#09111de6;color:#fff;font-size:13px;font-weight:600;border:1px solid var(--ng-gold-soft)}
.ng-act-label:empty{display:none}
.ng-jump{right:92px;bottom:0;width:64px;height:64px}
.ng-bino{right:6px;bottom:0;width:50px;height:50px;opacity:.9}
.ng-bino svg{width:24px;height:24px}

/* ---- Phones ---- */
@media (max-width:700px){
  #ng-hud{padding:calc(10px + var(--ng-safe-t)) calc(10px + var(--ng-safe-r)) 0 calc(10px + var(--ng-safe-l));gap:8px}
  .ng-objective{border-radius:16px;flex:1;min-width:0}
  .ng-obj-toggle{padding:10px 13px 10px}
  .ng-obj-kicker{font-size:10px}
  .ng-obj-title{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ng-obj-dots{gap:5px;margin-top:3px}
  .ng-obj-detail{font-size:13.5px;max-height:calc(100dvh - 140px);overflow:auto}
  .ng-top-actions{flex-direction:column;gap:8px}
  .ng-icon-btn{height:44px;min-width:44px;padding:0;width:44px}
  .ng-icon-btn span{display:none}
  .ng-found{bottom:auto;top:calc(104px + var(--ng-safe-t));grid-template-columns:96px 1fr;gap:12px;padding:12px;border-radius:16px}
  .ng-found img{width:96px;height:96px}
  .ng-found h3{font-size:18px}
  .ng-found-line{font-size:13px}
  .ng-note{top:calc(110px + var(--ng-safe-t))}
  .ng-menu{width:100vw;border-left:0}
  .ng-reward{padding:20px 16px;border-radius:20px}
  .ng-reward h2{font-size:27px}
  body.ng-hud #toast{top:calc(110px + var(--ng-safe-t))!important}
}
@media (prefers-reduced-motion:reduce){.ng-pointer-arrow,.ng-marker i,.ng-obj-dots i.star.now,.ng-objective.pulse,.ng-found.pop{animation:none!important}}

/* ---- Red-torch mode ---- */
.ng-red-veil{position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:#ff1a00;mix-blend-mode:multiply;display:none}
body.ng-red .ng-red-veil{display:block}
body.ng-red dialog[open]{filter:sepia(1) saturate(6) hue-rotate(-50deg) brightness(.75)}
.ng-menu-foot [aria-pressed=true]{border-color:#ff5a3c;color:#ff8a70}

/* ---- Phones in landscape (short screens) ---- */
@media (max-height:480px) and (pointer:coarse){
  #ng-hud{padding-top:calc(8px + var(--ng-safe-t))}
  .ng-objective{width:min(330px,46vw);flex:none}
  .ng-obj-toggle{padding:8px 12px}
  .ng-obj-title{font-size:15px}
  .ng-top-actions{flex-direction:row}
  .ng-stick{width:108px;height:108px;bottom:calc(14px + var(--ng-safe-b))}
  .ng-stick-knob{width:50px;height:50px;margin:-25px 0 0 -25px}
  .ng-buttons{bottom:calc(10px + var(--ng-safe-b))}
  .ng-act{width:70px;height:70px;bottom:46px}
  .ng-jump{width:56px;height:56px;right:84px}
  .ng-found{top:auto;bottom:calc(12px + var(--ng-safe-b));left:50%;width:min(460px,52vw);grid-template-columns:80px 1fr}
  .ng-found img{width:80px;height:80px}
  .ng-obj-detail{max-height:calc(100dvh - 90px)}
  body.ng-hud #toast{top:calc(70px + var(--ng-safe-t))!important;bottom:auto!important;left:auto!important;right:calc(16px + var(--ng-safe-r))!important;width:auto!important;max-width:40vw!important}
}

/* ---- 29 Oct fixes ---- */
/* Welcome copy sat straight on the lit garden (fairy lights, gallery frames) and was hard to read on desktop. */
@media (min-width:701px){#welcome::before{content:'';position:absolute;inset:-14vh -10vw -12vh -14vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 62% at 38% 58%,#040910e6 0%,#040910b8 48%,#04091000 78%)}}
/* On phones Damon's spoken line covered the interact label and joystick: show it under the objective card instead. */
body.ng-touch .guide-aside{top:calc(112px + var(--ng-safe-t));bottom:auto}