/* Phase 2: the dark overlay belongs ONLY to the initial briefing. When the
   briefing is accepted it is hidden and the unobscured 3D world remains. */
body.pg-phase1-active #mobile, body.pg-phase1-active #help, body.pg-phase1-active #hud,
body.pg-phase1-active #walkDirectionGuide, body.pg-phase1-active #prompt {
  visibility:hidden !important; pointer-events:none !important;
}
#pgPhase1Overlay, #pgPhase1Hud, #pgPhase2Mobile {
  position:fixed; z-index:15000; font-family:system-ui,"Yu Gothic",sans-serif; color:#fff;
}
#pgPhase1Overlay.hidden, #pgPhase1Hud.hidden, #pgPhase1Intro.hidden {display:none !important}
#pgPhase1Overlay {inset:0; background:rgba(5,18,25,.76); display:grid; place-items:center;
  padding:18px; overflow:auto;}
#pgPhase1Intro {width:min(100%,650px); padding:clamp(18px,3vw,31px);
  background:linear-gradient(145deg,#15394a,#123041); border:2px solid #8cd8eb;
  border-radius:22px; box-shadow:0 22px 80px #0009;box-sizing:border-box;}
#pgPhase1Intro h2 {font-size:clamp(1.35rem,3vw,2rem);line-height:1.35;margin:.6em 0;color:#fff5c8}
#pgPhase1Intro p {font-size:clamp(.95rem,1.8vw,1.08rem);line-height:1.75;margin:.75em 0}
#pgPhase1Intro .pg-notice {padding:12px;border-radius:10px;background:#ffffff17;
  border:1px solid #ffffff40;color:#f9eabd}
#pgPhase1Intro .pg-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:22px}
#pgPhase1Overlay button, #pgPhase1Hud button, #pgPhase2Mobile button {
  font:inherit;font-weight:800;border-radius:10px;padding:10px 13px;min-height:42px;
  cursor:pointer;border:1px solid #cbdce2;background:#173947;color:#fff;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;outline:none;
}
#pgPhase1Overlay button::selection, #pgPhase1Hud button::selection, #pgPhase2Mobile button::selection {
  background:transparent;
}
#pgPhase1Overlay .pg-primary,#pgPhase1Hud .pg-primary {background:#f9d675;color:#3a2b11;border-color:#ffebae}
#pgPhase1Overlay button:focus-visible,#pgPhase1Hud button:focus-visible,#pgPhase2Mobile button:focus-visible {
  outline:3px solid #76dff5;outline-offset:3px;
}
#pgPhase1Hud {top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:min(96vw,670px);border-radius:15px;background:rgba(20,45,60,.82);
  padding:10px 13px;box-sizing:border-box;border:1px solid #cde5e966;
  backdrop-filter:blur(7px);text-align:center;pointer-events:auto}
#pgPhase1Hud .pg-flight-row {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}
#pgPhase1Hud .pg-label {font-size:.8rem;font-weight:800;color:#d7f6ff}
#pgPhase1Hud .pg-flight-metric {padding:2px 8px;background:#ffffff1c;border-radius:7px;font-size:.82rem}
#pgPhase1Message {display:block;font-size:clamp(.87rem,1.7vw,1.05rem);
  line-height:1.35;margin:5px 0 7px;font-weight:750}
#pgPhase1Hud .pg-control {display:flex;justify-content:center;flex-wrap:wrap;gap:7px}
#pgPhase1Hud .pg-note {font-size:.72rem;margin:5px 0 0;color:#d9ebf5}
#pgPhase2Mobile {display:none;bottom:max(12px,env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);gap:8px;touch-action:none}
#pgPhase2Mobile button {display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:62px;min-height:58px;font-size:1.3rem;background:#143647dc}
#pgPhase2Mobile small {font-size:.70rem}
#pgPhase2Mobile button.pressed {background:#efca72;color:#37270f;transform:scale(.97)}
body.pg-phase1-active.pg-phase2-flying #pgPhase2Mobile {display:flex}
@media (hover:hover) and (pointer:fine) {body.pg-phase1-active.pg-phase2-flying #pgPhase2Mobile{display:none}}
@media (max-width:600px) {#pgPhase1Hud{width:96vw;padding:6px 7px}
 #pgPhase1Hud .pg-control button{min-height:36px;padding:5px 7px;font-size:.75rem}
 #pgPhase1Hud .pg-note{font-size:.67rem}#pgPhase1Message{font-size:.86rem;margin:3px 0}
 #pgPhase2Mobile button{min-width:57px;min-height:55px}}
@media (max-height:570px) {#pgPhase1Hud{top:4px;padding:4px 8px}
 #pgPhase1Hud .pg-flight-help{display:none}#pgPhase1Intro{padding:12px}
 #pgPhase1Intro p{line-height:1.45}#pgPhase2Mobile{bottom:5px}}

/* Phase 3: wind-state strip; flight remains unobscured by the briefing backdrop. */
#pgPhase3WindState[hidden], #pgPhase3Recovery[hidden]{display:none !important}
#pgPhase3WindState{padding:5px 10px;margin:3px auto 6px;max-width:560px;
  border-radius:9px;background:rgba(52,164,181,.24);border:1px solid rgba(153,247,251,.62);
  color:#e4fdff;font-weight:800;font-size:clamp(.76rem,1.5vw,.91rem);line-height:1.35}
#pgPhase3WindState.pg-turbulence{background:rgba(175,91,34,.53);border-color:#ffd087;color:#fff1d9}
#pgPhase3WindState.pg-recovering{background:rgba(150,118,26,.35);border-color:#f2d778;color:#fff5cb}
#pgPhase3Recovery{height:5px;border-radius:10px;overflow:hidden;margin:5px 6px 0;
  background:rgba(255,255,255,.28)}
#pgPhase3RecoveryFill{display:block;height:100%;width:0%;border-radius:inherit;
  background:#ffdf87;transition:width .12s linear}
@media(max-width:600px){#pgPhase3WindState{font-size:.72rem;margin:2px auto 3px;padding:3px 6px}}
@media(max-height:570px){#pgPhase3WindState{padding:2px 6px;margin:2px auto}}

/* Phase 4: no full-screen dark layer when scoring/landing. The player can keep
   watching the landscape while their result appears in a small HUD card. */
#pgPhase4Approach[hidden], #pgPhase4MobileApproach[hidden], #pgPhase4Result[hidden] {
  display:none !important;
}
#pgPhase4Approach:not([hidden]) {background:#ffdc80;color:#392a14;border-color:#fff2ba}
#pgPhase4MobileApproach:not([hidden]) {background:#ffdc80;color:#392a14;border-color:#fff2ba}
#pgPhase4Result {
  position:fixed;z-index:15005;bottom:max(90px,env(safe-area-inset-bottom) + 76px);
  left:50%;transform:translateX(-50%);width:min(92vw,520px);box-sizing:border-box;
  border:2px solid #ffe5a0;border-radius:18px;
  background:rgba(21,41,51,.94);box-shadow:0 13px 45px #0008;
  color:#fff7dc;text-align:center;padding:17px 20px;
  font:750 clamp(.9rem,2vw,1.06rem)/1.5 system-ui,'Yu Gothic',sans-serif;
  pointer-events:none;
}
#pgPhase4Result .pg-result-title {font-size:clamp(1.2rem,3vw,1.7rem);color:#ffda82;letter-spacing:.035em}
#pgPhase4Result strong {display:block;margin:5px 0;color:#d5f8da;font-size:clamp(.94rem,2vw,1.05rem)}
#pgPhase4Result small {display:block;color:#e6e9e8;font-size:.73rem;line-height:1.55}
@media(max-width:600px){#pgPhase4Result{padding:10px 12px;bottom:max(89px,env(safe-area-inset-bottom) + 82px)}}
@media(max-height:560px){#pgPhase4Result{bottom:max(61px,env(safe-area-inset-bottom) + 59px);padding:7px 10px}}

/* Phase 5: island-only result dialog. Normal landing HUD remains unmodified. */
#pgPhase5IsletDialog[hidden] {display:none !important}
.pg-islet-dialog {
  position:fixed; inset:0; z-index:15550;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  box-sizing:border-box; overflow:auto;
  background:rgba(8,19,31,.66); backdrop-filter:blur(5px);
  color:#fff4da; font:600 16px/1.6 system-ui,'Yu Gothic',sans-serif;
}
.pg-islet-card {
  width:min(100%,650px); box-sizing:border-box; max-height:100%; overflow:auto;
  background:linear-gradient(145deg,#253e3b,#192c35);
  border:2px solid #ffdf8d; border-radius:22px; text-align:center;
  box-shadow:0 25px 85px #000a; padding:clamp(20px,4vw,35px);
}
.pg-islet-eyebrow {font-size:.91rem;color:#ffdd8a;letter-spacing:.08em}
.pg-islet-card h2 {font-size:clamp(1.35rem,3vw,2.1rem);color:#ffeaaf;line-height:1.4;margin:9px 0 17px}
.pg-islet-elder {font-size:clamp(1rem,2vw,1.16rem);margin:0 0 17px}
.pg-islet-reward {background:#fff3cb14;border:1px solid #ffdc8caa;border-radius:13px;padding:15px;margin:10px 0 13px}
.pg-islet-reward strong {display:block;color:#ffe499;font-size:clamp(1.04rem,2.5vw,1.4rem)}
.pg-islet-reward p {font-size:clamp(1rem,2.5vw,1.28rem);margin:8px 0 0;color:#d4f8cf}
.pg-islet-note {color:#d9e9d8;font-size:.87rem;margin:8px 0 16px}
#pgPhase5IsletClose {min-height:46px;max-width:100%;padding:10px 24px;border-radius:12px;
  border:1px solid #ffe7a1;background:#ffdb82;color:#34240f;
  font:800 1rem/1.4 system-ui,'Yu Gothic',sans-serif;cursor:pointer}
#pgPhase5IsletClose:focus-visible {outline:3px solid #80e9ff;outline-offset:3px}
body.pg-islet-result #pgPhase1Hud, body.pg-islet-result #pgPhase2Mobile {display:none !important}
@media(max-height:480px){.pg-islet-dialog{align-items:flex-start}.pg-islet-card{max-height:none}}

/* Sea crossing: unobtrusive direction hint, updated by the shared flight HUD. */
.pg-islet-guide:not([hidden]) {
  margin: .28rem 0 .38rem; font-size: .91rem; font-weight: 700;
  color: #c2f5e6; text-align: center;
}

/* Phase 5.3: brief status strip only; flight never inherits a dark modal overlay. */
#pgPhase6SpecialNotice[hidden]{display:none !important}
#pgPhase6SpecialNotice.pg-special-notice{
  margin:5px auto; padding:5px 10px; max-width:550px;
  color:#fff0bd; background:rgba(91,47,84,.87); border:1px solid #ffcb85;
  border-radius:10px; font-weight:850; line-height:1.35; font-size:clamp(.74rem,1.5vw,.94rem);
}
@media(max-height:570px){#pgPhase6SpecialNotice.pg-special-notice{margin:2px auto;padding:2px 6px}}

/* City welcome: show the crowd first, then reveal the celebratory dialog. */
#pgCityWelcomeDialog[hidden]{display:none !important}
#pgCityWelcomeDialog .pg-city-welcome-card{background:linear-gradient(140deg,#193b4b,#1d3446);border-color:#ffdb8a}
#pgCityWelcomeDialog .pg-islet-reward{background:rgba(255,222,143,.14)}
body.pg-city-welcome #pgPhase1Hud .pg-control button:not(#pgPhase1Return){pointer-events:none;opacity:.58}
body.pg-city-welcome #pgPhase2Mobile{pointer-events:none;opacity:.5}