/* Rover Commander: styles. The page is built to fit the screen with no scrolling. */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --ink:#3A1410;          /* deep oxide, used for text and outlines */
  --muted:#7C4B3E;
  --panel:#FFF3E8;        /* pale dust */
  --chip:#FBE2CF;
  --sky1:#F7CFAA; --sky2:#E88F6F;
  --soilA:#D9795A; --soilB:#CE6C4E; --soilLine:#B65B40;
  --fwd:#FFD166; --back:#C9A5DE; --left:#7AD7D0; --right:#F4A6B8;
  --go:#FF8A4C; --sun:#FFC83D;
  --lcol:250px; --rcol:268px;
  --font:"Fredoka","Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%; height:100dvh; scroll-padding-top:env(safe-area-inset-top,0px)}
[hidden]{display:none !important}
body{
  margin:0; height:100%; overflow:hidden; color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.35;
  background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 60%,#D97C5E 100%) fixed;
}
button{font-family:inherit; color:inherit}
:focus-visible{outline:4px solid #1E3A8A; outline-offset:3px}

.shell{height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; padding:10px 16px 14px; max-width:1560px; margin:0 auto}
.card{background:var(--panel); border:3px solid var(--ink); border-radius:20px; box-shadow:0 5px 0 var(--ink)}

/* Header */
.top{display:grid; grid-template-columns:var(--lcol) minmax(0,1fr) var(--rcol); gap:16px; align-items:center}
.logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:23px; line-height:1.05; margin:0}
.logo svg{width:36px; height:36px; flex:none}
.chips{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px 6px; min-width:0}
.chip{
  padding:2px 2px 1px; border:3px solid var(--ink); border-radius:11px; background:var(--panel);
  box-shadow:0 3px 0 var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center;
  line-height:1.05; font-size:16px; font-weight:600;
}
.chip .st{font-size:10px; letter-spacing:1px; color:#D9B8A4}
.chip .st b{color:#E58A00; font-weight:400}
.chip .st.tr{letter-spacing:0; font-weight:600; color:#2F6F69}
.chip[aria-current="true"]{background:var(--sun)}
.chip[aria-current="true"] .st{color:rgba(58,20,16,.3)}
.chip[aria-current="true"] .st b{color:#B34A00}
.chip[aria-current="true"] .st.tr{color:#1F4F4A}
.chip:active{transform:translateY(2px); box-shadow:0 1px 0 var(--ink)}

/* Commander rank */
.rank{
  align-self:stretch; display:flex; align-items:center; gap:10px; padding:4px 12px 4px 8px; min-width:0;
  background:linear-gradient(180deg,#FFEDB5,#FFD66B); border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink);
}
.rank svg{width:50px; height:50px; flex:none}
.rtext{min-width:0}
.rlabel{font-size:13px; font-weight:600; line-height:1.1; color:#6B3A00}
.rname{font-weight:700; font-size:21px; line-height:1.1}
.rsubtxt{font-size:12px; line-height:1.15; color:#6B3A00; font-weight:500}

/* Main three column layout */
.app{
  display:grid; grid-template-columns:var(--lcol) minmax(0,1fr) var(--rcol); grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"prog info info" "prog stage side"; column-gap:16px; row-gap:6px; min-height:0;
}

/* Program panel */
.program{grid-area:prog; display:flex; flex-direction:column; min-height:0; padding:12px 10px 10px}
.program h2{margin:0; font-size:21px; font-weight:700}
.phead{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 4px 8px}
.count{color:var(--muted); font-size:14px; font-weight:500}
.steps{list-style:none; margin:0; padding:2px 4px 6px; overflow:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:6px}
.step{
  display:flex; align-items:center; gap:8px; padding:4px 5px 4px 7px; border:3px solid var(--ink); border-radius:14px;
  background:var(--c); font-weight:600; font-size:16px; transition:transform .15s ease; flex:none;
}
.step[data-c="F"]{--c:var(--fwd)} .step[data-c="B"]{--c:var(--back)}
.step[data-c="L"]{--c:var(--left)} .step[data-c="R"]{--c:var(--right)}
.step .num{width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid var(--ink); display:grid; place-items:center; font-size:13px; flex:none}
.step svg{width:22px; height:22px; flex:none}
.step .lbl{flex:1}
.step .rm{width:28px; height:28px; border:0; border-radius:9px; background:rgba(255,255,255,.65); cursor:pointer; flex:none; display:grid; place-items:center}
.step .rm:hover{background:#fff}
.step .rm svg{width:14px; height:14px}
.step.now{transform:scale(1.03); box-shadow:0 0 0 3px var(--sun), 0 0 0 5px var(--ink)}
.step.done{opacity:.55}
.empty{color:var(--muted); padding:10px 6px; font-size:15px}
.pfoot{display:flex; gap:8px; padding-top:8px}

/* Buttons */
.btn{
  border:3px solid var(--ink); border-radius:14px; background:var(--panel); box-shadow:0 4px 0 var(--ink); cursor:pointer;
  font-weight:600; font-size:17px; padding:7px 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:0 2px 0 var(--ink)}
.btn svg{width:20px; height:20px}
.btn.small{font-size:15px; padding:5px 10px; flex:1}
.btn.go{background:var(--go); font-size:22px; padding:9px 14px}
.btn.go svg{width:26px; height:26px}
.btn.stop{background:#FFB0A6}
.btn.route{flex-direction:column; gap:0; padding:5px 12px; line-height:1.15; background:#E9F7F5}
.btn.route[aria-pressed="true"]{background:#7AD7D0}
.btn.route .rmain{display:inline-flex; align-items:center; gap:8px; font-size:17px}
.btn.route .rsub{font-size:12px; font-weight:500; color:var(--muted)}

/* Centre: mission info and board */
.info{grid-area:info; min-width:0}
.titlerow{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px}
.info h2{margin:0; font-size:25px; font-weight:700; line-height:1.15}
.info .hint{margin:0; font-size:16px; line-height:1.3}
.meta{display:flex; flex-wrap:wrap; gap:2px 14px; font-size:14px; font-weight:500; align-items:center}
.meta svg{width:16px; height:16px; vertical-align:-3px; margin-right:4px}

.stagewrap{
  grid-area:stage; position:relative; min-height:0; min-width:0; display:flex; flex-direction:column; gap:8px; padding:10px 12px;
  background:var(--panel); border:3px solid var(--ink); border-radius:20px; box-shadow:0 5px 0 var(--ink);
}
.boardbox{flex:1; min-height:0; min-width:0; display:grid; place-items:center; overflow:hidden}

/* Battery meter */
.meter{display:flex; align-items:center; gap:10px; flex-wrap:nowrap}
.mlabel{display:flex; align-items:center; gap:6px; font-weight:600; font-size:16px; flex:none}
.mlabel svg{width:24px; height:24px}
.segs{
  flex:1; min-width:100px; height:24px; display:flex; gap:3px; padding:3px; border:3px solid var(--ink); border-radius:9px;
  background:#fff; position:relative; --seg:#3DBB6E; margin-right:8px;
}
.segs::after{content:""; position:absolute; right:-9px; top:5px; width:6px; height:10px; border-radius:0 4px 4px 0; background:var(--ink)}
.segs.mid{--seg:#F2A516}
.segs.low{--seg:#E5483A}
.seg{flex:1; border-radius:4px; background:#F1E1D5; transition:background .25s ease}
.seg.on{background:var(--seg)}
.segs.flash{animation:flash .7s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(255,200,61,.95)}100%{box-shadow:0 0 0 12px rgba(255,200,61,0)}}
.mtext{font-weight:600; font-size:16px; min-width:70px; text-align:right; flex:none}
.sunstatus{display:flex; align-items:center; gap:5px; padding:2px 10px 2px 5px; border:2px solid var(--ink); border-radius:999px; font-size:14px; font-weight:600; background:#FFE9A8; flex:none; white-space:nowrap}
.sunstatus.shade{background:#C7B5D6}
.sunstatus svg{width:18px; height:18px}

.legend{display:flex; flex-wrap:wrap; gap:2px 16px; font-size:13px; font-weight:500; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.sw{width:16px; height:16px; border-radius:5px; border:2px solid var(--ink); display:inline-block}
.sw.sunny{background:#F4C06A}
.sw.shady{background:repeating-linear-gradient(135deg,#6A3A4E 0 4px,#7B4A5E 4px 8px)}

/* Board */
.board{
  position:relative; --cell:48px; display:grid; grid-template-columns:repeat(var(--cols),var(--cell)); grid-auto-rows:var(--cell);
  border:4px solid var(--ink); border-radius:10px; overflow:hidden; background:var(--soilA); flex:none;
}
.cell{position:relative; background:var(--soilA); border:1px solid var(--soilLine); display:grid; place-items:center}
.cell.alt{background:var(--soilB)}
.cell.base{background:#E9A98A}
.cell svg{width:88%; height:88%; display:block; position:relative; z-index:1}
.cell svg.crater{width:100%; height:100%; opacity:.9}
.cell.sunny::before{content:""; position:absolute; inset:0; background:rgba(255,215,130,.20)}
.cell.shade::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(48,14,46,.46) 0 7px, rgba(48,14,46,.36) 7px 14px);
}
.item.got svg{animation:got .4s ease-out forwards}
@keyframes got{to{transform:scale(1.7); opacity:0}}
.item{width:100%; height:100%; display:grid; place-items:center; position:relative; z-index:1}

#rover{
  position:absolute; left:0; top:0; width:var(--cell); height:var(--cell); z-index:3; pointer-events:none;
  transform:translate(calc(var(--rx) * var(--cell) + var(--bx,0px)), calc(var(--ry) * var(--cell) + var(--by,0px)));
  transition:transform .42s ease-in-out;
}
#rover .inner{width:100%; height:100%; transform:rotate(var(--rot,0deg)); transition:transform .38s ease-in-out}
#rover svg{width:94%; height:94%; margin:3%; display:block; filter:drop-shadow(0 3px 0 rgba(58,20,16,.35))}
#rover.shake svg{animation:shake .4s linear}
#rover.dead .inner svg{filter:grayscale(1) brightness(.75) drop-shadow(0 3px 0 rgba(58,20,16,.35))}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:3px 0}}
#rover .oop{position:absolute; right:-8%; top:-12%; width:50%; height:50%; z-index:4; animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}
#rover .oop svg{width:100%; height:100%; margin:0; filter:none}

/* Route overlay */
.route-svg{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}

/* Right hand controls */
.side{
  grid-area:side; display:flex; flex-direction:column; gap:10px; min-height:0; overflow:auto; padding:12px;
  background:var(--panel); border:3px solid var(--ink); border-radius:20px; box-shadow:0 5px 0 var(--ink);
}
.commands{display:grid; grid-template-columns:1fr 1fr; gap:10px; grid-auto-rows:clamp(62px,11vh,96px)}
.cmd{
  --c:var(--fwd); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 4px 5px;
  border:3px solid var(--ink); border-radius:18px; background:var(--c); box-shadow:0 5px 0 var(--ink); cursor:pointer;
  font-size:17px; font-weight:600; min-height:0;
}
.cmd[data-c="B"]{--c:var(--back)} .cmd[data-c="L"]{--c:var(--left)} .cmd[data-c="R"]{--c:var(--right)}
.cmd svg{width:clamp(28px,5vh,42px); height:clamp(28px,5vh,42px)}
.cmd:active:not(:disabled){transform:translateY(4px); box-shadow:0 1px 0 var(--ink)}
.cmd:disabled{opacity:.45; cursor:not-allowed}
.runrow{display:flex; flex-direction:column; gap:10px}
.msg{display:flex; align-items:center; gap:10px; padding:8px 12px; border:3px solid var(--ink); border-radius:16px; background:var(--chip); font-size:15px; font-weight:500; line-height:1.3}
.msg.bad{background:#FFCFC7; color:#6D1A10}
.msg.good{background:#CDF0D3; color:#0E4A2C}
.msg.warn{background:#FFEDB0; color:#5C4300}
.routenote{margin:0; padding:5px 10px; border:2px dashed var(--ink); border-radius:12px; background:#FFEDB0; font-size:13px; font-weight:500; line-height:1.3}
.tip{margin:auto 0 0; color:#5B2E24; font-size:12px; line-height:1.3}

/* Win overlay */
.overlay{position:absolute; inset:0; display:grid; place-items:center; padding:14px; border-radius:17px; background:rgba(58,20,16,.62); z-index:10}
.win{padding:18px 22px 20px; text-align:center; max-width:380px; width:100%}
.win h3{margin:0 0 4px; font-size:28px}
.win p{margin:6px 0; font-size:16px}
.stars{display:flex; justify-content:center; gap:6px; margin:4px 0 8px}
.stars svg{width:56px; height:56px}
.stars .on{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i) * .2s)}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.winbtns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.winbtns .btn{flex:1; min-width:130px}
.winbtns .btn.go{font-size:20px; padding:9px 14px}
.trainee-badge{display:inline-flex; flex-direction:column; align-items:center; gap:2px; font-weight:700; font-size:22px}
.trainee-badge svg{width:62px; height:62px}

/* Narrower laptops: slimmer side columns so the mission buttons never touch the rank box */
@media (max-width:1180px){
  :root{--lcol:210px; --rcol:236px}
  .rank svg{width:42px; height:42px}
  .rname{font-size:18px}
  .rlabel{font-size:12px}
  .rsubtxt{font-size:11px}
  .chip{font-size:14px; padding:2px 0 1px}
  .chip .st{font-size:9px; letter-spacing:0}
}

/* Short screens */
@media (max-height:720px){
  .shell{gap:8px; padding-top:8px; padding-bottom:10px}
  .chip{font-size:14px; border-width:2px; border-radius:9px}
  .chip .st{font-size:9px}
  .logo{font-size:21px} .logo svg{width:30px; height:30px}
  .rank svg{width:40px; height:40px} .rname{font-size:17px} .rlabel{font-size:12px} .rsubtxt{font-size:11px}
  .info h2{font-size:21px} .info .hint{font-size:14px}
  .cmd{font-size:15px}
  .btn.go{font-size:19px; padding:6px 12px}
  .btn.route{padding:3px 12px}
  .tip{display:none}
}

/* Tablets in portrait: board on top, program and controls underneath */
@media (max-width:899px){
  .top{grid-template-columns:1fr minmax(0,270px)}
  .chips{grid-column:1 / -1; grid-row:2}
  .rank{grid-row:1; grid-column:2}
  .app{
    grid-template-columns:minmax(200px,38%) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) minmax(0,44%);
    grid-template-areas:"info info" "stage stage" "prog side";
  }
  .commands{grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(48px,7vh,72px)}
  .runrow{flex-direction:row}
  .runrow .btn{flex:1}
  .tip{display:none}
}

/* Phones: let the page scroll rather than squash everything */
@media (max-width:599px){
  html,body{height:auto; overflow:auto}
  .shell{height:auto; display:flex; flex-direction:column}
  .app{display:flex; flex-direction:column; gap:10px}
  .info{order:1} .stagewrap{order:2} .side{order:3} .program{order:4; max-height:300px}
  .stagewrap{min-height:420px}
  .boardbox{min-height:280px}
  .side{overflow:visible}
  .top{grid-template-columns:1fr}
  .rank{grid-column:1; grid-row:auto}
  .commands{grid-template-columns:repeat(4,1fr); grid-auto-rows:70px}
  .cmd{font-size:13px}
  .runrow{flex-direction:column}
  .chips{grid-template-columns:repeat(5,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .stars .on,#rover.shake svg,.segs.flash,#rover .oop{animation:none}
  .step{transition:none}
}