/* Family-friendly game-exit controls.
   This adds ONLY a gameplay dialog; the Adventure Lobby, score and rewards
   screens are unchanged. The server's timed Challenge clock never pauses. */
#gameExitBtn[hidden],
#gameExitConfirm[hidden],
#gameExitChallengeWarning[hidden],
#gameExitPracticeNotice[hidden]{display:none!important}
#gameExitBtn{
  position:absolute;
  z-index:17;
  right:max(12px,env(safe-area-inset-right));
  top:max(10px,env(safe-area-inset-top));
  box-sizing:border-box;
  min-width:72px;
  min-height:42px;
  padding:6px 12px;
  cursor:pointer;
  touch-action:manipulation;
  border:2px solid #f8eac9;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(64,90,69,.96),rgba(38,65,52,.96));
  color:#fffced;
  font:900 clamp(12px,2.4dvh,15px)/1 system-ui,Arial,sans-serif;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(17,36,25,.42);
  box-shadow:0 3px 0 rgba(29,47,35,.54),0 5px 15px rgba(17,40,30,.28),inset 0 1px 0 rgba(255,255,255,.22);
}
#gameExitBtn:active {transform:translateY(2px);box-shadow:0 1px 0 rgba(29,47,35,.54)}
#gameExitBtn:focus-visible,
#gameExitConfirm button:focus-visible {
  outline:3px solid #ffdb6c;outline-offset:3px;
}
/* Existing HUD avoids the new control; the separate sound button stays
   immediately below it in its previously approved location. */
#hud {right:max(100px,calc(90px + env(safe-area-inset-right)))}

#gameExitConfirm {
  position:absolute;
  inset:0;
  z-index:28;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right))
    max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background:rgba(16,40,29,.65);
  backdrop-filter:blur(3px);
  overflow:hidden;
  touch-action:manipulation;
}
#gameExitConfirm .gameExitCard {
  box-sizing:border-box;
  width:min(94vw,425px);
  max-height:calc(100dvh - 20px);
  min-height:0;
  padding:clamp(11px,2.65dvh,21px) clamp(12px,3vw,22px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(5px,1.55dvh,11px);
  overflow-y:auto;
  text-align:center;
  border:3px solid #806044;
  border-radius:20px;
  color:#4d3c2c;
  background:linear-gradient(160deg,#fffdf0,#f1edd7);
  box-shadow:0 16px 45px rgba(13,34,24,.33),inset 0 1px 0 white;
}
#gameExitConfirm .gameExitEmblem {
  width:clamp(30px,7.7dvh,47px);
  height:clamp(30px,7.7dvh,47px);
  border-radius:50%;
  background:linear-gradient(135deg,#e8f4de,#c1d9b4);
  border:1px solid #91b185;
  display:grid;
  place-items:center;
  font-size:clamp(18px,4.3dvh,28px);
  flex:0 0 auto;
}
#gameExitTitle{
  margin:0;
  font-size:clamp(19px,5dvh,28px);
  font-weight:950;
  line-height:1.12;
  color:#5a4933;
}
#gameExitMessage,
#gameExitChallengeWarning,
#gameExitPracticeNotice {
  margin:0;
  font-size:clamp(11px,2.5dvh,14px);
  line-height:1.24;
  color:#4f5a46;
}
#gameExitChallengeWarning{
  box-sizing:border-box;
  padding:6px 9px;
  background:#fff0cc;
  border:1px solid #d9b86b;
  border-radius:10px;
  color:#77562b;
  font-weight:800;
}
#gameExitPracticeNotice{
  box-sizing:border-box;
  padding:6px 9px;
  background:#edf6de;
  border:1px solid #a3c08e;
  border-radius:10px;
  color:#466e49;
  font-weight:800;
}
#gameExitConfirm .gameExitActions{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(7px,1.65vw,12px);
  margin-top:clamp(2px,.75dvh,6px);
}
#gameExitConfirm .gameExitActions button{
  box-sizing:border-box;
  width:100%;
  min-height:clamp(43px,9.5dvh,53px);
  padding:7px;
  cursor:pointer;
  touch-action:manipulation;
  border:2px solid #618653;
  border-radius:12px;
  font:900 clamp(11px,2.65dvh,15px)/1.16 system-ui,Arial,sans-serif;
  color:#fffdf2;
  background:linear-gradient(180deg,#78a664,#4d834e);
  box-shadow:0 3px 0 rgba(45,73,38,.28);
}
#gameExitConfirm .gameExitActions #gameExitLeave{
  background:linear-gradient(180deg,#fffdf4,#efe4c7);
  border-color:#b49c74;
  color:#69533e;
  box-shadow:0 3px 0 rgba(96,70,47,.16);
}
#gameExitConfirm .gameExitActions button:active{transform:translateY(2px)}

@media (orientation:landscape) and (max-height:390px){
  #gameExitBtn{
    min-width:66px;min-height:39px;padding:5px 8px;
    font-size:12px;top:8px;
  }
  #hud{right:max(88px,calc(80px + env(safe-area-inset-right)))}
  #gameExitConfirm .gameExitCard{
    width:min(89vw,510px);
    padding:7px 16px;
    gap:4px;
  }
  #gameExitConfirm .gameExitEmblem{display:none}
  #gameExitConfirm .gameExitActions button{min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  #gameExitConfirm {backdrop-filter:none}
}