/* SKYGORGE (templates/skygorge.html, static/skygorge.js). A wide stage
   (16:10) sized to the window's height, so a run needs no scrolling; the
   menus, the hangar and the HUD sit over the canvas. On a phone the stage is
   taller than the canyon: the rock fills above and below, and the HUD sits
   on the rock. How to play follows below the game. */
.sg-page{padding:var(--s3) 0 var(--s5);background:radial-gradient(900px 520px at 80% 0%,rgba(255,150,80,.08),transparent 60%),var(--bg);}
.sg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-bottom:var(--s2);}
.sg-head .crumbs{flex-basis:100%;}
.sg-head h1{font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin-top:6px;
  background:linear-gradient(90deg,#36E2F0,#FFB547 60%,#FF6B5A);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sg-head .lede{margin:0;font-size:16px;}

.sg-stage{position:relative;width:min(100%,calc((100svh - 225px) * 16 / 10));aspect-ratio:16/10;min-height:280px;margin:0 auto;
  border-radius:20px;overflow:hidden;background:#140C12;color:#F4ECE6;
  box-shadow:0 30px 70px -20px rgba(5,10,24,.75),0 0 0 1px rgba(255,181,71,.2),0 0 60px -10px rgba(255,120,60,.18);
  font-family:Manrope,system-ui,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.sg-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:pointer;}
.sg-canvas:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,181,71,.7);}

.sg-hud{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:10px 14px;pointer-events:none;}
.sg-hud[hidden]{display:none;}
.sg-hud-top,.sg-hud-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.sg-hud-bottom{align-items:center;}
.sg-score{display:flex;align-items:baseline;gap:8px;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 12px rgba(255,181,71,.55);}
.sg-score small{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#FFD23F;animation:sgBlink .6s steps(1) infinite;}
@keyframes sgBlink{50%{opacity:.4;}}
.sg-sub{display:flex;gap:10px;font-size:12.5px;font-weight:700;color:#F2D9C4;text-shadow:0 1px 2px rgba(0,0,0,.7);font-variant-numeric:tabular-nums;}
.sg-combo{color:#FFD23F;font-weight:800;}
.sg-hud-right{display:flex;align-items:center;gap:10px;}
.sg-coins{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(20,12,18,.55);
  font-size:14px;font-weight:800;color:#FFE08A;font-variant-numeric:tabular-nums;}
.sg-coin-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;
  background:radial-gradient(circle at 35% 35%,#FFF4C2,#FFC93C 55%,#C98A12);box-shadow:0 0 0 1px rgba(120,70,0,.6);}
.sg-icon{pointer-events:auto;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(20,12,18,.55);
  color:#F4ECE6;font-size:12px;cursor:pointer;}
.sg-icon:hover{background:rgba(60,36,40,.75);}
.sg-icon:focus-visible{outline:2px solid #FFB547;outline-offset:2px;}
.sg-weapon{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;background:rgba(20,12,18,.6);
  border:1px solid var(--sg-wc,#7CF5EC);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-wc,#7CF5EC);}
.sg-pips{display:inline-flex;gap:3px;}
.sg-pips i{display:block;width:7px;height:10px;border-radius:2px;background:rgba(255,255,255,.18);}
.sg-pips i.on{background:var(--sg-wc,#7CF5EC);box-shadow:0 0 6px var(--sg-wc,#7CF5EC);}
.sg-shield{display:inline-flex;gap:4px;padding:5px 9px;border-radius:999px;background:rgba(20,12,18,.6);}
.sg-shield i{display:block;width:14px;height:14px;clip-path:polygon(50% 0,100% 18%,92% 62%,50% 100%,8% 62%,0 18%);background:rgba(255,255,255,.18);}
.sg-shield i.on{background:#5FE1FF;}
.sg-hud-bottom{flex-wrap:wrap;}
.sg-burner{display:inline-flex;align-items:center;gap:7px;margin-right:auto;margin-left:8px;padding:5px 10px;border-radius:999px;background:rgba(20,12,18,.6);
  border:1px solid rgba(255,154,77,.45);font-size:11px;font-weight:800;letter-spacing:.08em;color:#FFB27A;}
.sg-burner b{font-weight:800;}
.sg-gauge{display:block;width:70px;height:8px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;}
.sg-gauge i{display:block;height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,#FF6B3D,#FFB547);}
.sg-burner.is-on{border-color:#FFD23F;color:#FFE08A;box-shadow:0 0 14px rgba(255,150,60,.55);}
.sg-burner.is-on .sg-gauge i{background:linear-gradient(90deg,#FFB547,#FFF2C0);}
.sg-burner em{font-style:normal;color:#FFD23F;}
.sg-burner em[hidden]{display:none;}
.sg-ready{display:inline-flex;gap:3px;}
.sg-ready span{display:inline-block;min-width:15px;padding:0 3px;border-radius:4px;text-align:center;font-size:10px;line-height:15px;color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);}
.sg-burner.roll-ready .sg-r,.sg-burner.loop-ready .sg-l{color:#1A0E08;background:#9FE8FF;}
/* The touch buttons, under the stage; only on a touch screen, and only
   visible in flight (the space is kept, so nothing jumps). */
.sg-ctl{display:none;justify-content:flex-end;align-items:center;gap:12px;max-width:100%;margin:10px auto 0;}
.sg-ctl-btn{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,181,71,.45);background:#2A1A20;
  color:#FFE9D6;font:800 13px Manrope,system-ui,sans-serif;letter-spacing:.04em;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;cursor:pointer;}
.sg-ctl-burn{width:76px;height:76px;font-size:16px;color:#1A0E08;border:0;background:radial-gradient(circle at 40% 35%,#FFE08A,#FF8A3D 70%);box-shadow:0 6px 20px -6px rgba(255,138,61,.8);}
.sg-ctl-btn.is-on{filter:brightness(1.2);box-shadow:0 0 0 3px rgba(255,210,63,.7),0 0 24px rgba(255,150,60,.8);}
.sg-ctl-btn.is-wait{opacity:.4;}
@media (hover:none),(pointer:coarse){
  .sg-ctl{display:flex;visibility:hidden;width:min(100%,calc((100svh - 310px) * 16 / 10));}
  .sg-stage{width:min(100%,calc((100svh - 310px) * 16 / 10));}
  .sg-stage[data-state="playing"] + .sg-ctl{visibility:visible;}
  .sg-ready{display:none;}
}

.sg-screen{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:20px;text-align:center;}
.sg-screen[hidden]{display:none;}
.sg-title{background:linear-gradient(180deg,rgba(20,12,18,.15),rgba(20,12,18,.62) 70%);cursor:pointer;}
.sg-title > *{cursor:auto;}
.sg-panel{background:rgba(20,12,18,.88);overflow-y:auto;justify-content:safe center;}
.sg-logo{margin:0;font-weight:800;font-size:clamp(34px,7vw,64px);letter-spacing:.06em;line-height:1;color:#FFF3E6;
  text-shadow:0 2px 0 #7A2E1E,0 0 22px rgba(255,140,60,.7),0 0 50px rgba(54,226,240,.35);}
.sg-logo span{color:#FFB547;}
.sg-tag{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFE2C8;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.sg-play{font:inherit;font-size:17px;font-weight:800;letter-spacing:.06em;min-width:170px;min-height:52px;padding:12px 26px;border:0;border-radius:999px;
  cursor:pointer;color:#1A0E08;background:linear-gradient(90deg,#FFD23F,#FF8A3D);box-shadow:0 10px 30px -8px rgba(255,138,61,.7);}
.sg-play:hover{filter:brightness(1.08);}
.sg-play:focus-visible,.sg-ghost:focus-visible,.sg-toggle:focus-visible,.sg-buy:focus-visible{outline:2px solid #36E2F0;outline-offset:3px;}
.sg-ghost{font:inherit;font-size:14px;font-weight:700;min-height:44px;padding:8px 18px;border-radius:999px;cursor:pointer;
  color:#FFE9D6;background:rgba(20,12,18,.45);border:1px solid rgba(255,255,255,.28);}
.sg-ghost:hover{background:rgba(60,36,40,.7);}
.sg-small{font-size:13px;min-height:40px;}
.sg-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;}
.sg-bestline{margin:0;font-size:13px;color:#F2D9C4;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.sg-bestline strong{color:#fff;font-size:16px;font-variant-numeric:tabular-nums;}
.sg-dotsep{margin:0 4px;opacity:.6;}
.sg-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:12.5px;font-weight:700;color:#FFE2C8;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.sg-keys kbd{display:inline-block;margin-right:5px;padding:1px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.35);border-bottom-width:2px;
  background:rgba(20,12,18,.55);font:800 11.5px/1.5 Manrope,system-ui,sans-serif;color:#fff;text-shadow:none;}
.sg-keys-touch{display:none;}
@media (hover:none),(pointer:coarse){ .sg-keys-desk{display:none;} .sg-keys-touch{display:flex;} }
.sg-hint{margin:0;font-size:12.5px;color:#FFE2C8;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.sg-panel-title{margin:0;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#FFC79A;}
.sg-final{margin:0;font-size:52px;font-weight:800;line-height:1;color:#fff;text-shadow:0 0 22px rgba(255,181,71,.6);font-variant-numeric:tabular-nums;}
.sg-line{margin:0;font-size:16px;font-weight:700;color:#FFD23F;}
.sg-stats,.sg-earned{margin:0;font-size:13px;color:#F2D9C4;}
.sg-earned strong{color:#FFE08A;}
.sg-afford{margin:0;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:800;color:#1A0E08;background:#9BE84B;
  animation:sgPop .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes sgPop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.sg-over .champ-entry{width:min(320px,92%);}

.sg-wallet{margin:0;font-size:15px;color:#FFE9D6;}
.sg-wallet strong{color:#FFE08A;font-size:18px;font-variant-numeric:tabular-nums;}
.sg-shop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;width:min(720px,100%);}
.sg-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:10px 12px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);}
.sg-item-name{font-size:14px;font-weight:800;color:#fff;}
.sg-item-text{grid-column:1;font-size:12px;line-height:1.4;color:#E6CDB8;}
.sg-item .sg-pips{grid-column:1;}
.sg-item .sg-pips i.on{background:#FFB547;box-shadow:none;}
.sg-buy{grid-column:2;grid-row:1 / span 3;font:inherit;font-size:13px;font-weight:800;min-width:86px;min-height:44px;padding:6px 12px;border-radius:12px;cursor:pointer;
  border:0;color:#1A0E08;background:linear-gradient(90deg,#FFD23F,#FF8A3D);}
.sg-buy:disabled{cursor:not-allowed;color:#CDB8A6;background:rgba(255,255,255,.08);}
.sg-buy.is-max:disabled{color:#9BE84B;}
.sg-item.just{animation:sgPop .4s cubic-bezier(.3,1.6,.5,1);border-color:#9BE84B;}
.sg-toggle{font:inherit;font-size:12.5px;font-weight:700;min-height:40px;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#FFE9D6;}

.sg-info{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s4);margin-top:var(--s4);}
.sg-how{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.sg-how li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:var(--text-2);}
.sg-how li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:8px;
  clip-path:polygon(0 30%,60% 30%,100% 50%,60% 70%,0 70%,15% 50%);background:#FF8A3D;}
.sg-notes{display:grid;gap:10px;align-content:start;}
.sg-notes p{margin:0;}
.sg-info kbd{display:inline-block;min-width:22px;padding:1px 6px;border:1px solid var(--border-strong,var(--border));
  border-bottom-width:2px;border-radius:5px;font:700 12px/1.5 ui-monospace,Menlo,Consolas,monospace;text-align:center;background:var(--surface);}

/* A tablet: the stage keeps its shape at the width of the page. */
@media (max-width:860px){
  .sg-info{grid-template-columns:1fr;gap:var(--s3);}
}
/* A phone: a taller stage, the canyon across the middle and rock above and
   below it, where the HUD sits. */
@media (max-width:620px){
  .sg-page{padding-top:var(--s2);}
  .sg-stage{width:100%;aspect-ratio:4/5;max-height:calc(100svh - 70px);border-radius:16px;}
  .sg-burner{margin-left:6px;padding:5px 8px;gap:5px;}
  .sg-head .lede{font-size:14.5px;}
  .sg-final{font-size:42px;}
  .sg-screen{gap:10px;padding:16px;}
  .sg-shop{grid-template-columns:1fr;}
  .sg-gauge{width:46px;}
  .sg-keys{gap:5px 10px;font-size:12px;}
  .sg-ctl{width:100%;margin-top:8px;}
}
@media (prefers-reduced-motion:reduce){ .sg-score small,.sg-afford,.sg-item.just{animation:none;} }