/* Shared popup surfaces. Layout and state styles live together to avoid legacy overrides. */
#levels-dialog,#how-dialog,#result{
  font-family:'Poppins',sans-serif;color:#f7faff;background:linear-gradient(145deg,#204d7c,#102f55);
  border:1px solid #5485b5;border-radius:24px;box-shadow:0 24px 70px #061a3980;clip-path:none;
}
dialog::backdrop,.result-backdrop{background:#071a32a6;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.result-backdrop{display:none;position:absolute;inset:0;z-index:20;pointer-events:auto}
.arena:has(#result:not([hidden]))>.result-backdrop{display:block}
#levels-dialog,#how-dialog{padding:0;overflow:auto;max-height:calc(100dvh - 40px);scrollbar-width:thin;scrollbar-color:#5380ac transparent}
.popup-header{display:flex;align-items:center;gap:18px;padding:24px 26px;margin:0;border-bottom:1px solid #87b6e326}
.popup-header h2,#levels-title{font:600 27px/1.25 'Poppins',sans-serif;letter-spacing:-.7px;margin:0;flex:1;min-width:0}
.popup-header .close-button{position:static;flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;padding:0;background:#0c294bbb;color:#d5e6f6;border:1px solid #79a8d133;border-radius:12px;box-shadow:none;transition:background .15s}
.popup-header .close-button:hover{background:#355e8a;color:#fff}
.popup-header .close-button .material-symbols-rounded{font-size:24px}
#levels-dialog button:focus-visible,#how-dialog button:focus-visible,#how-dialog summary:focus-visible,#result button:focus-visible{outline:2px solid #d7ebff;outline-offset:3px}
#levels-dialog button:focus:not(:focus-visible),#how-dialog button:focus:not(:focus-visible),#result button:focus:not(:focus-visible){outline:none}
/* The selected carousel: one target image and three full-bleed route cards. */
.rating-star{display:block;width:24px;height:24px;object-fit:contain;flex:none;filter:none!important}
#shot-stars .rating-star{width:29px;height:29px}
#levels-dialog{
  --picker-gap:clamp(12px,1.6vw,22px);
  width:min(1450px,calc(100% - 40px),calc((100dvh - 48px)*1.54));max-width:none;
  background:linear-gradient(130deg,#174f87,#0d345e);border:2px solid #4388bb;
  border-radius:30px;padding:0;overflow:auto;max-height:calc(100dvh - 32px);
}
#levels-dialog .popup-header{padding:clamp(18px,2.5vw,34px);border:0;gap:24px}
#levels-dialog #levels-title{font:600 clamp(23px,3.6vw,54px)/1.15 'Poppins',sans-serif;letter-spacing:-1px}
#levels-dialog .campaign-total{display:flex;align-items:center;gap:5px;height:68px;box-sizing:border-box;border:1px solid #588ac060;border-radius:18px;background:#0b2b50a6;padding:0 19px;font:500 clamp(14px,1.5vw,22px)/1 'Poppins';color:#b1cbe4;margin:0;white-space:nowrap}
#levels-dialog .campaign-total strong{font-size:clamp(18px,2.1vw,30px);color:#fff}
#levels-dialog .campaign-total .rating-star{width:32px;height:32px;margin-right:5px}
#levels-dialog .close-button{width:68px;height:68px;flex-basis:68px;border-radius:18px;background:#0b2b50a6}
#levels-dialog .close-button .material-symbols-rounded{font-size:40px}
.target-browser{display:flex;flex-direction:column;gap:var(--picker-gap);padding:0 clamp(18px,2.5vw,34px) clamp(18px,2vw,28px)}
.target-preview{position:relative;aspect-ratio:2.88;min-width:0;overflow:hidden;border:2px solid #548fc2;border-radius:26px;isolation:isolate;outline:none}
.selected-target-art{position:absolute;inset:0;background:#315986}
.selected-target-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.target-preview:after{content:'';position:absolute;inset:46% 0 0;background:linear-gradient(transparent,#144c90e6);pointer-events:none;z-index:1}
#levels-dialog .target-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:clamp(44px,6.5vw,88px);height:clamp(44px,6.5vw,88px);padding:0;border-radius:50%;border:1px solid #7ab7df88;background:#124473ef;color:#fff;z-index:3;box-shadow:none}
#levels-dialog .target-arrow-prev{left:24px}
#levels-dialog .target-arrow-next{right:24px}
#levels-dialog .target-arrow .material-symbols-rounded{font-size:clamp(34px,4vw,60px);font-variation-settings:'wght' 500}
#levels-dialog .target-arrow:hover:not(:disabled){background:#1d5a94}
#levels-dialog .target-arrow:disabled{opacity:.3;cursor:default}
.selected-target-heading{position:absolute;left:5%;right:5%;bottom:6%;display:flex;align-items:center;gap:clamp(16px,2vw,28px);z-index:2;color:#fff}
#selected-target-level{font:600 clamp(28px,4.3vw,64px)/1 'Poppins';color:#a6cff7}
#levels-dialog #stage-picker-title{font:600 clamp(20px,3.2vw,46px)/1.15 'Poppins';letter-spacing:-.6px;margin:0;min-width:0;flex:1;color:#fff}
#selected-target-lock{width:30px;height:30px;object-fit:contain;flex:none;opacity:.85}
#selected-target-lock[hidden]{display:none}
#selected-target-stars{gap:10px;flex:none}
#selected-target-stars .rating-star{width:clamp(32px,6.4vw,86px);height:clamp(32px,6.4vw,86px)}
#levels-dialog .stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--picker-gap);margin:0}
#levels-dialog .stage-card{position:relative;display:block;min-width:0;min-height:0;width:100%;aspect-ratio:1.65;padding:0;border:2px solid #4789be;border-radius:24px;overflow:hidden;isolation:isolate;background:#174c81;box-shadow:none;clip-path:none;color:#fff;text-align:left;transition:border-color .15s,filter .15s}
#levels-dialog .stage-card:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#124a82 92%);z-index:1;pointer-events:none}
#levels-dialog .stage-card:hover:not(:disabled){border-color:#b9dcf7;filter:brightness(1.08);transform:none}
#levels-dialog .stage-card[aria-current=step]{border-color:#ffd23c;box-shadow:0 0 0 1px #ffd23c}
.stage-route-image{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover}
.stage-card-action{position:absolute;right:0;top:0;width:58px;height:54px;display:grid;place-items:center;background:#092b4baa;border-radius:0 0 0 16px;z-index:2}
.stage-card-action .material-symbols-rounded{font-size:40px;font-variation-settings:'FILL' 1}
.stage-card-action img{display:block;width:40px;height:40px;object-fit:contain}
.stage-card-copy{position:absolute;left:6%;right:6%;bottom:7%;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2}
.stage-card-copy strong{font:600 clamp(15px,2.2vw,32px)/1.2 'Poppins';white-space:nowrap;letter-spacing:-.4px}
#levels-dialog .stage-card .star-row{gap:3px;margin:0;flex:none}
#levels-dialog .stage-card .rating-star{width:clamp(23px,3.8vw,54px);height:clamp(23px,3.8vw,54px)}
#levels-dialog .stage-card:disabled{cursor:not-allowed;border-color:#4b7291;color:#bbd0e4}
#levels-dialog .stage-card:disabled .stage-route-image{filter:saturate(.4) brightness(.55)}
#levels-dialog .stage-card:disabled .stage-card-action{color:#c0d3e5}
#levels-dialog .progress-save-note{padding:0 22px 14px;margin:0}
.help-scoring>.rating-star{width:32px;height:32px}
#result #result-stars .rating-star{width:42px;height:42px}
#result-symbol .rating-star{width:40px;height:40px}
#result[data-outcome=success] .result-emblem{background:#234e78;color:#fff}

/* Keep the desktop picker comfortably inside the scene, including short laptops. */
@media (min-width:1101px) and (min-height:601px){
  #levels-dialog{--picker-gap:16px;width:min(1040px,calc(100% - 80px),calc((100dvh - 160px)*1.65));max-height:calc(100dvh - 80px);border-radius:24px}
  #levels-dialog .popup-header{padding:24px;gap:16px}
  #levels-dialog #levels-title{font-size:32px;letter-spacing:-.7px}
  #levels-dialog .campaign-total{height:48px;padding:0 13px;font-size:16px;border-radius:14px}
  #levels-dialog .campaign-total strong{font-size:22px}
  #levels-dialog .campaign-total .rating-star{width:24px;height:24px;margin-right:3px}
  #levels-dialog .close-button{width:48px;height:48px;flex-basis:48px;border-radius:14px}
  #levels-dialog .close-button .material-symbols-rounded{font-size:30px}
  #levels-dialog .target-browser{padding:0 24px 24px}
  #levels-dialog .target-preview{border-radius:20px}
  #levels-dialog .target-arrow{width:56px;height:56px}
  #levels-dialog .target-arrow-prev{left:18px}
  #levels-dialog .target-arrow-next{right:18px}
  #levels-dialog .target-arrow .material-symbols-rounded{font-size:38px}
  #levels-dialog .selected-target-heading{gap:18px}
  #selected-target-level{font-size:40px}
  #levels-dialog #stage-picker-title{font-size:30px}
  #selected-target-stars{gap:6px}
  #selected-target-stars .rating-star{width:clamp(38px,6vh,56px);height:clamp(38px,6vh,56px)}
  #levels-dialog .stage-card{border-radius:18px}
  #levels-dialog .stage-card-action{width:40px;height:38px;border-radius:0 0 0 12px}
  #levels-dialog .stage-card-action .material-symbols-rounded{font-size:28px}
  #levels-dialog .stage-card-action img{width:28px;height:28px}
  #levels-dialog .stage-card-copy strong{font-size:clamp(16px,2.7vh,22px)}
  #levels-dialog .stage-card .rating-star{width:clamp(24px,4vh,34px);height:clamp(24px,4vh,34px)}
}

@media(max-width:650px){
  #levels-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:21px}
  #levels-dialog .popup-header{padding:16px;gap:10px}
  #levels-dialog #levels-title{font-size:20px;letter-spacing:-.5px}
  #levels-dialog .campaign-total{padding:8px;gap:2px;font-size:11px;border-radius:11px}
  #levels-dialog .campaign-total strong{font-size:15px}
  #levels-dialog .campaign-total .rating-star{width:20px;height:20px;margin:0}
  #levels-dialog .close-button{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  #levels-dialog .close-button .material-symbols-rounded{font-size:25px}
  .target-browser{padding:0 12px 14px;gap:12px}
  .target-preview{aspect-ratio:1.48;border-radius:16px}
  #levels-dialog .target-arrow{width:38px;height:38px;top:43%}
  #levels-dialog .target-arrow-prev{left:8px}
  #levels-dialog .target-arrow-next{right:8px}
  .selected-target-heading{left:12px;right:12px;bottom:13px;gap:10px;flex-wrap:wrap}
  #selected-target-level{font-size:26px}
  #levels-dialog #stage-picker-title{font-size:19px}
  #selected-target-stars{width:100%;justify-content:flex-end;gap:3px}
  #selected-target-stars .rating-star{width:29px;height:29px}
  #selected-target-lock{width:20px;height:20px}
  #levels-dialog .stage-grid{gap:8px}
  #levels-dialog .stage-card{aspect-ratio:.86;border-radius:13px}
  .stage-route-image{height:auto;aspect-ratio:1.67;object-fit:cover}
  .stage-card-action{width:30px;height:30px;border-radius:0 0 0 9px}
  .stage-card-action .material-symbols-rounded{font-size:24px}
  .stage-card-action img{width:24px;height:24px}
  .stage-card-copy{left:7px;right:7px;bottom:10px;flex-direction:column;align-items:flex-start;gap:7px}
  .stage-card-copy strong{font-size:14px}
  #levels-dialog .stage-card .star-row{gap:0}
  #levels-dialog .stage-card .rating-star{width:23px;height:23px}
  #shot-stars .rating-star{width:24px;height:24px}
}
@media(max-height:550px) and (min-width:651px){
  #levels-dialog{width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 24px)}
  #levels-dialog .popup-header{padding:14px 18px;gap:12px}
  #levels-dialog #levels-title{font-size:23px}
  #levels-dialog .campaign-total{padding:6px 10px;font-size:12px}
  #levels-dialog .campaign-total strong{font-size:17px}
  #levels-dialog .campaign-total .rating-star{width:22px;height:22px}
  #levels-dialog .close-button{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  #levels-dialog .close-button .material-symbols-rounded{font-size:25px}
  .target-browser{padding:0 18px 16px;gap:10px}
  .target-preview{aspect-ratio:4.5;border-radius:16px}
  #levels-dialog .stage-card{aspect-ratio:2.35;border-radius:14px}
  #selected-target-level{font-size:28px}
  #levels-dialog #stage-picker-title{font-size:23px}
  #selected-target-stars .rating-star{width:38px;height:38px}
  #levels-dialog .target-arrow{width:42px;height:42px;top:40%}
  #levels-dialog .target-arrow .material-symbols-rounded{font-size:32px}
  .stage-card-copy strong{font-size:16px}
  #levels-dialog .stage-card .rating-star{width:26px;height:26px}
  .stage-card-action{width:32px;height:30px}
  .stage-card-action .material-symbols-rounded{font-size:25px}
  .stage-card-action img{width:25px;height:25px}
}