/* A reserved strip keeps teaching text outside the road and controls. */
#tutorial-guide {
  position:fixed;z-index:10;top:0;left:0;right:0;
  height:calc(82px + env(safe-area-inset-top,0px));box-sizing:border-box;
  display:grid;grid-template-columns:36px minmax(0,1fr) 88px;gap:12px;align-items:center;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
  color:#293d3e;background:linear-gradient(110deg,#faf3da,#e8ddba);
  border-bottom:2px solid #9c8051;box-shadow:0 2px 7px #293d3e25;
  font-family:system-ui,sans-serif;
}
#tutorial-guide[hidden]{display:none!important}
#tutorial-step{display:grid;place-items:center;width:34px;height:34px;border:1px solid #a8894a;border-radius:50%;color:#faf0cf;background:#375956;font:700 21px Georgia,serif}
#tutorial-progress{display:block;color:#74603c;font:750 10px/13px system-ui;letter-spacing:.7px}
#tutorial-title{display:block;margin:2px 0;color:#233d3c;font:700 17px/20px Georgia,serif}
#tutorial-text{display:block;font:500 12px/16px system-ui}
#tutorial-skip{min-width:76px;min-height:44px;padding:6px;border:1px solid #aa9466;border-radius:6px;background:#fff8e4;color:#344e4d;font:700 12px/16px system-ui;cursor:pointer}
#tutorial-guide button:focus-visible{outline:3px solid #315f76;outline-offset:2px}
body[data-tutorial-active="true"] #m1-playtest-label{display:none!important}
body[data-tutorial-active="true"] .cg-friend-entry{display:none!important}
body [data-tutorial-target="true"]{outline:3px solid #dcb764!important;outline-offset:2px;box-shadow:0 0 0 5px #fff3b755!important}
body[data-tutorial-active="true"] #result .overlay-card.result-card{display:block;max-width:460px;width:calc(100vw - 32px);text-align:center}
body[data-tutorial-active="true"] #result .score-card,
body[data-tutorial-active="true"] #result :is(#score-rule,#score-breakdown,#share-result,#share-status,#score-challenge,#share-copy){display:none!important}
body[data-tutorial-active="true"] #result .result-brand{width:180px;max-width:70%;margin:0 auto 10px}
body[data-tutorial-active="true"] #result #outcome{font-size:clamp(30px,8vw,42px)}
body[data-tutorial-active="true"] #result #result-celebration{font-size:16px;line-height:23px}
body[data-tutorial-active="true"] #result .overlay-actions{display:flex;flex-direction:column;gap:8px}
body[data-tutorial-active="true"] #result .overlay-actions button{width:100%;min-height:46px}
body[data-tutorial-active="true"] #result #next-map{order:-1;background:linear-gradient(#eecb80,#c4994f)!important;color:#342d1b!important}
@media(max-width:520px) and (min-height:500px){
  #tutorial-guide{height:calc(102px + env(safe-area-inset-top,0px));grid-template-columns:28px minmax(0,1fr) 72px;gap:8px;padding-left:10px;padding-right:10px}
  #tutorial-step{width:26px;height:26px;font-size:18px}
  #tutorial-title{font-size:15px;line-height:18px}
  #tutorial-skip{min-width:68px}
}
@media(max-height:500px){
  #tutorial-guide{height:calc(66px + env(safe-area-inset-top,0px));grid-template-columns:28px minmax(0,1fr) 88px;gap:10px;padding-top:calc(5px + env(safe-area-inset-top,0px));padding-bottom:5px}
  #tutorial-step{width:27px;height:27px;font-size:18px}
  #tutorial-progress{font-size:9px;line-height:11px}
  #tutorial-title{font-size:15px;line-height:17px;margin:1px 0}
  #tutorial-text{font-size:11px;line-height:14px}
  body[data-tutorial-active="true"] #result .result-brand{width:125px}
}