/* Sky Ranks — follows the PlayDapple design language: warm paper, forest green, terracotta accents,
   small-caps eyebrows, soft rounded panels, Georgia italics for notes. Depends only on ../../styles.css. */
.sky-page{padding-top:28px;padding-bottom:60px;max-width:1100px}
.sky-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}
.sky-heading h1{font-size:clamp(38px,6vw,60px);letter-spacing:-2px;margin:12px 0}
.sky-heading p:last-child{color:#4e6047;line-height:1.7}
.sky-badge{font-size:11px;border:1px solid #bdc9b3;border-radius:30px;padding:10px 14px;white-space:nowrap;color:#4e6047}

.sky-panel{border:1px solid #c9d3bc;border-radius:18px;overflow:hidden;background:#fbfaf3;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 15px 40px #263e2e08}
.sky-hud{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 16px;padding:16px 24px;background:#eff1e4;color:#4e6047;font-size:10px;letter-spacing:1.5px}
.sky-hud strong{display:block;font-size:17px;letter-spacing:0;margin-top:5px;color:#244d3d;white-space:nowrap}
.sky-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.sky-scene{background:#dde8df;padding:18px;display:flex;justify-content:center;align-items:flex-start}
.sky-canvas-wrap{position:relative;width:min(100%,480px,calc((100dvh - 250px)*.75));min-width:min(100%,300px);aspect-ratio:3/4;border:6px solid #58705a;border-radius:14px;overflow:hidden;background:#cfe3df;box-shadow:0 8px 14px #1b382720}
.sky-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px!important}
.sky-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#eef3df9c;padding:14px;overflow:auto}
.sky-overlay[hidden]{display:none}
.sky-overlay>div{background:#fbfaf3f5;text-align:center;width:min(100%,400px);max-height:100%;overflow:auto;border:1px solid #cad4bd;border-radius:15px;padding:22px;box-shadow:0 8px 35px #244d3d15}
.sky-overlay h2{font-size:27px;margin:10px 0;letter-spacing:-.8px}
.sky-overlay p{font-size:13px;line-height:1.6;color:#4e6047;margin-bottom:14px}
.sky-overlay .eyebrow{color:#4e6047}
#overlay-extra:empty{display:none}
#overlay-extra{margin-bottom:16px}
.tip-line{font-size:12px;line-height:1.6;color:#4e6047;background:#f1eadb;border-radius:9px;padding:10px 12px;text-align:left}
.tip-line strong{color:#244d3d}
.kbd-row{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11px;color:#4e6047}

/* side cards */
.sky-side{background:#f3f2e6;border-left:1px solid #dfe1d0;padding:18px;display:flex;flex-direction:column;gap:14px}
.side-card{background:#fbfaf3;border:1px solid #dcdfcf;border-radius:12px;padding:14px 16px}
.side-card .eyebrow{font-size:9px;color:#4e6047;letter-spacing:1.5px}
.side-card h3{font-size:19px;letter-spacing:-.4px;margin-top:6px}
.side-card p{font-size:12px;line-height:1.6;color:#4e6047;margin-top:6px}
.pilot-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.pilot-row h3{margin:0}
.pilot-row small{display:block;font-size:11px;color:#68725f;margin-top:4px}
.insignia{flex-shrink:0;border-radius:16px}
.bars{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.bars li{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;font-size:11px;color:#4e6047}
.bars .track{position:relative;height:8px;border-radius:5px;background:#e3e6d6}
.bars .track i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:#5f7f56}
.bars .track b{position:absolute;top:-3px;width:2px;height:14px;background:#c86a43;border-radius:1px}
.weapon-line{margin-top:10px;font-size:11px;color:#4e6047}
.weapon-line strong{color:#244d3d}

/* bottom bar */
.sky-bottom{padding:16px 24px 20px;border-top:1px solid #dfe1d0}
.sky-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sky-actions button{border:1px solid #b8c7ac;border-radius:7px;min-height:44px;background:#eff1e4;color:#244d3d;padding:10px 18px;font-size:13px}
.sky-actions button:hover:not(:disabled){background:#e3e8d5}
.sky-actions button[aria-pressed="true"]{background:#dce7cc;border-color:#8fa680}
.sky-actions span{margin-left:auto;font-size:12px;color:#4e6047}
.sky-touch{display:none;align-items:center;justify-content:space-between;gap:18px;max-width:460px;margin:16px auto 0}
.sky-touch .pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:8px;grid-template-areas:". up ." "left down right"}
.sky-touch button{min-width:0;border:1px solid #9eaf90;border-bottom:3px solid #9eaf90;border-radius:12px;background:#dce7cc;color:#244d3d;font-size:22px;touch-action:none;min-height:52px}
.sky-touch [data-action="up"]{grid-area:up}.sky-touch [data-action="left"]{grid-area:left}.sky-touch [data-action="down"]{grid-area:down}.sky-touch [data-action="right"]{grid-area:right}
.sky-touch .loop-button{flex:1;min-height:124px;max-width:190px;font-size:34px;background:#f3d8b8;border-color:#cba984}
.sky-touch .loop-button small{display:block;font-size:12px;margin-top:2px}
.sky-touch button.held{background:#b9ceaa;border-bottom-width:1px}
.sky-touch .loop-button.held{background:#ecc28e}
.sky-touch button:focus-visible{outline:3px solid #9b5233;outline-offset:2px}
#status{font-size:13px;color:#244d3d;margin:14px 0 8px;min-height:20px}
#sky-help{font-size:12px;line-height:1.7;color:#4e6047}

/* notes and ladder */
.sky-notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
.sky-notes h2{font-size:24px;margin:14px 0}
.sky-notes p:not(.eyebrow){font-size:14px;line-height:1.8;color:#4e6047}
.sky-notes .eyebrow{color:#4e6047}
.sky-ladder-section{margin-top:56px}
.rank-ladder{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rank-ladder li{display:flex;align-items:center;gap:12px;border:1px solid #e0e0d5;border-radius:12px;background:#faf9f3;padding:12px}
.rank-ladder li strong{display:block;font-size:14px;letter-spacing:-.2px}
.rank-ladder li small{display:block;font-size:11px;color:#68725f;margin-top:3px}
.rank-ladder li.done{background:#eef1e2;border-color:#cdd8bd}
.rank-ladder li.current{background:#fdf1e4;border-color:#c86a43;box-shadow:0 0 0 3px #c86a4322}
.rank-ladder li.upcoming .insignia{opacity:.55}
.rank-ladder .insignia{width:44px;height:44px;border-radius:12px}
.rank-ladder li.tier-start{grid-column-start:auto}

/* debrief, medals */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin-top:12px}
.stat-grid span{font-size:9px;letter-spacing:1.3px;color:#4e6047;background:#f1eadb;border-radius:9px;padding:9px 11px}
.stat-grid strong{display:block;font-size:17px;letter-spacing:0;color:#244d3d;margin-top:4px}
.medal{display:flex;justify-content:center;margin:6px 0 2px}
.medal svg{width:74px;height:74px}

/* promotion */
.stamp-wrap{display:flex;justify-content:center;margin:2px 0 8px}
.stamp{width:92px;height:92px;animation:sky-stamp .75s cubic-bezier(.2,.9,.3,1.15) both}
.stamp svg{width:100%;height:100%}
.promoted-banner{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.4px;color:#fffaf0;background:#c86a43;border-radius:5px;padding:7px 14px;animation:sky-banner .55s .35s cubic-bezier(.2,.8,.2,1) both}
.tier-note{font-family:Georgia,serif;font-style:italic;font-size:13px;color:#77602b;margin:8px 0 0}
.hangar{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 6px}
.hangar figure{margin:0;text-align:center;font-size:11px;color:#4e6047}
.hangar figure canvas{display:block;width:88px;height:88px;border-radius:12px;background:#e3ebe2;margin:0 auto 6px}
.hangar figure.new canvas{background:#f3e7c9;box-shadow:0 0 0 3px #e7bd5d66;animation:sky-hangar .7s .7s cubic-bezier(.2,.8,.2,1) both}
.hangar figure strong{display:block;font-size:13px;color:#244d3d}
.hangar .arrow{font-size:22px;color:#c86a43}
.celebrating .sky-overlay>div{border:2px solid #d7b669;background:#fffaf0f5;box-shadow:0 0 0 7px #f7dc963d,0 15px 50px #665b3025}
.celebrating .sky-overlay h2{color:#365a40}
.celebrating .sky-overlay .eyebrow{color:#77602b}
.star-row{display:flex;justify-content:center;gap:6px;margin:6px 0 4px}
.star-row svg{width:40px;height:40px;animation:sky-star .5s calc(var(--i)*.4s + .2s) cubic-bezier(.2,.9,.3,1.4) both}
.credits{height:92px;overflow:hidden;border-radius:9px;background:#f1eadb;margin-top:12px;position:relative}
.credits div{padding:8px 12px;font-family:Georgia,serif;font-style:italic;font-size:13px;line-height:1.9;color:#4e6047;animation:sky-credits 14s linear infinite}
@keyframes sky-stamp{0%{opacity:0;transform:scale(2.6) rotate(-16deg)}60%{opacity:1;transform:scale(.94) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes sky-banner{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes sky-hangar{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes sky-star{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes sky-credits{from{transform:translateY(60%)}to{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){.credits{height:auto;max-height:110px;overflow:auto}.credits div{animation:none}}

/* narrower screens */
@media(max-width:980px){
.sky-stage{grid-template-columns:1fr}
.sky-side{border-left:0;border-top:1px solid #dfe1d0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sky-side #mission-card{grid-column:1/-1}
.sky-touch{display:flex}
.rank-ladder{grid-template-columns:repeat(2,1fr)}
/* Phones and tablets: controls sit right under the sky, the info cards go last. */
.sky-panel{display:flex;flex-direction:column}
.sky-stage,.sky-bottom{display:contents}
.sky-scene{order:1}.sky-touch{order:2;width:calc(100% - 32px);margin:14px 16px 0}
.sky-actions{order:3;margin:14px 16px 0}#status{order:4;margin:12px 16px 0}#sky-help{order:5;margin:0 16px 16px}
.sky-side{order:6}
}
@media(pointer:coarse){.sky-touch{display:flex}}
@media(max-width:600px){
.sky-heading{display:block}.sky-badge{display:inline-block;margin:0 0 10px}
.sky-hud{padding:12px;font-size:8px;letter-spacing:.7px;gap:8px 10px}.sky-hud strong{font-size:13px}
.sky-scene{padding:10px}
.sky-canvas-wrap{width:100%;border-width:4px;border-radius:12px}
.sky-overlay{padding:8px}.sky-overlay>div{padding:14px}
.sky-overlay h2{font-size:21px;margin:4px 0}.sky-overlay p{font-size:12px;margin-bottom:8px}.sky-overlay .eyebrow{font-size:8px}
.stamp{width:64px;height:64px}.hangar figure canvas{width:64px;height:64px}
.stat-grid strong{font-size:14px}.medal svg{width:56px;height:56px}.credits{display:none}.star-row svg{width:30px;height:30px}.stat-grid span{padding:7px 9px}
.sky-side{grid-template-columns:1fr;padding:12px}
.sky-touch{width:calc(100% - 24px);margin:12px 12px 0}.sky-actions{margin:12px 12px 0}#status{margin:10px 12px 0}#sky-help{margin:0 12px 12px}
.sky-actions span{display:none}.sky-actions button{padding:10px 12px;font-size:12px}
.sky-touch{gap:12px}.sky-touch .pad{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px)}
.sky-notes{grid-template-columns:1fr;gap:18px}
.rank-ladder{grid-template-columns:1fr}
}
@media(max-width:360px){.sky-touch .pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,50px)}.sky-touch .loop-button{min-height:108px}}