/* Rover Commander Junior: styles. Big buttons, few words, no scrolling on tablets and laptops. */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --ink:#1F2A44; --muted:#4A5878; --panel:#F4FAFF;
  --sky1:#CFEFFF; --sky2:#8FD0EA;
  --soilA:#D9795A; --soilB:#CE6C4E; --soilLine:#B65B40;
  --fwd:#FFD166; --back:#C9A5DE; --left:#7AD7D0; --right:#F4A6B8;
  --go:#4FCB7A; --sun:#FFC83D;
  --rcol:280px;
  --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:18px; line-height:1.3;
  background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 60%,#6FC0BE 100%) fixed;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
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:1400px; margin:0 auto}
.card{background:var(--panel); border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--ink)}

/* Header */
.top{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:24px; line-height:1.05; margin:0}
.logo svg{width:40px; height:40px; flex:none}
.logo em{font-style:normal; color:#fff; background:var(--ink); border-radius:10px; padding:0 8px; margin-left:2px}
.chips{display:flex; gap:7px; flex:1; justify-content:center; min-width:0}
.chip{
  position:relative; width:clamp(36px,5vw,54px); height:clamp(36px,5vw,54px); border:3px solid var(--ink); border-radius:14px;
  background:var(--panel); box-shadow:0 4px 0 var(--ink); cursor:pointer; font-size:clamp(17px,2.2vw,24px); font-weight:700; padding:0;
  display:grid; place-items:center;
}
.chip .tick{position:absolute; right:-7px; top:-9px; width:22px; height:22px}
.chip[aria-current="true"]{background:var(--sun)}
.chip:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.score{display:flex; align-items:center; gap:6px; padding:5px 14px 5px 8px; background:var(--panel); border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink); font-weight:700; font-size:20px; white-space:nowrap}
.score svg{width:30px; height:30px}

/* Layout */
.app{display:grid; grid-template-columns:minmax(0,1fr) var(--rcol); gap:16px; min-height:0}
.center{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0}
.titlerow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.info h2{margin:0; font-size:30px; font-weight:700; line-height:1.1}
.info .hint{margin:2px 0 0; font-size:21px; font-weight:500; line-height:1.25}
.par{font-weight:600; font-size:19px; background:#FFE9A8; border:3px solid var(--ink); border-radius:999px; padding:0 14px}
.tubes{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:20px; background:var(--panel); border:3px solid var(--ink); border-radius:999px; padding:0 14px 0 6px}
.tubes svg{width:30px; height:30px}

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

/* Board */
.board{
  position:relative; --cell:80px; display:grid; grid-template-columns:repeat(var(--cols),var(--cell)); grid-auto-rows:var(--cell);
  border:4px solid var(--ink); border-radius:14px; 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}
.item{width:100%; height:100%; display:grid; place-items:center; position:relative; z-index:2}
.item.got svg{animation:got .45s ease-out forwards}
@keyframes got{to{transform:scale(1.7); opacity:0}}

#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 .55s ease-in-out;
}
#rover .inner{width:100%; height:100%; transform:rotate(var(--rot,0deg)); transition:transform .5s 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 .45s linear}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:3px 0}}
#rover .oops{position:absolute; right:-6%; top:-14%; z-index:4; background:#fff; border:3px solid var(--ink); border-radius:12px; padding:0 8px; font-weight:700; font-size:calc(var(--cell) * .24); animation:pop .35s cubic-bezier(.3,1.6,.5,1) both}


/* Program strip */
.program{background:var(--panel); border:3px solid var(--ink); border-radius:20px; box-shadow:0 4px 0 var(--ink); padding:8px 10px; min-height:84px; display:flex; align-items:center}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; width:100%}
.steps li.empty{color:var(--muted); font-size:19px; font-weight:500; padding:6px 4px}
.step{
  position:relative; width:clamp(44px,6.2vw,62px); height:clamp(44px,6.2vw,62px); border:3px solid var(--ink); border-radius:14px; background:var(--c);
  padding:0; cursor:pointer; display:grid; place-items:center; box-shadow:0 3px 0 var(--ink); transition:transform .15s ease;
}
.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 svg{width:62%; height:62%}
.step .num{position:absolute; left:-6px; top:-8px; width:21px; height:21px; border-radius:50%; background:#fff; border:2px solid var(--ink); display:grid; place-items:center; font-size:12px; font-weight:700}
.step.now{transform:scale(1.14); box-shadow:0 0 0 4px var(--sun), 0 0 0 7px var(--ink)}
.step.done{opacity:.5}
.step:disabled{cursor:default}

/* Controls */
.side{display:flex; flex-direction:column; gap:12px; min-height:0; overflow:auto; padding:2px 3px 8px}
.commands{display:grid; grid-template-columns:1fr 1fr; gap:12px; grid-auto-rows:clamp(78px,15vh,124px)}
.cmd{
  --c:var(--fwd); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 4px 5px;
  border:4px solid var(--ink); border-radius:22px; background:var(--c); box-shadow:0 6px 0 var(--ink); cursor:pointer;
  font-size:19px; font-weight:700; 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(34px,6.5vh,56px); height:clamp(34px,6.5vh,56px)}
.cmd:active:not(:disabled){transform:translateY(5px); box-shadow:0 1px 0 var(--ink)}
.cmd:disabled{opacity:.45; cursor:not-allowed}
.commands.one{grid-template-columns:1fr}

.btn{
  border:3px solid var(--ink); border-radius:16px; background:var(--panel); box-shadow:0 4px 0 var(--ink); cursor:pointer;
  font-weight:600; font-size:19px; padding:8px 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:24px; height:24px}
.btn.go{background:var(--go); font-size:34px; font-weight:700; padding:10px 14px; border-width:4px; border-radius:22px; box-shadow:0 6px 0 var(--ink)}
.btn.go svg{width:36px; height:36px}
.btn.go.stop{background:#FFB0A6}
.smallrow{display:flex; gap:10px}
.btn.small{flex:1; font-size:18px; padding:7px 8px}

.msg{padding:10px 14px; border:3px solid var(--ink); border-radius:18px; background:#FBE2CF; font-size:19px; font-weight:600; line-height:1.25}
.msg.good{background:#CDF0D3; color:#0E4A2C}
.msg.warn{background:#FFEDB0; color:#5C4300}

/* Win overlay */
.overlay{position:absolute; inset:0; display:grid; place-items:center; padding:14px; border-radius:19px; background:rgba(31,42,68,.62); z-index:10}
.win{padding:20px 24px 22px; text-align:center; max-width:420px; width:100%}
.win h3{margin:0 0 4px; font-size:38px}
.win p{margin:6px 0; font-size:21px; font-weight:500}
.stars{display:flex; justify-content:center; gap:8px; margin:4px 0 8px}
.stars svg{width:96px; height:96px; animation:pop .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i) * .22s)}
@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:140px}
.winbtns .btn.go{font-size:24px; padding:10px 14px}

/* Short screens */
@media (max-height:720px){
  .shell{gap:8px; padding-top:8px; padding-bottom:10px}
  .info h2{font-size:25px} .info .hint{font-size:18px}
  .logo{font-size:21px} .logo svg{width:34px; height:34px}
  .program{min-height:70px}
  .btn.go{font-size:28px; padding:6px 12px}
  .cmd{font-size:17px}
}

/* Tablets in portrait */
@media (max-width:899px){
  .app{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto}
  .side{display:grid; grid-template-columns:2fr 1fr; gap:10px; overflow:visible}
  .commands{grid-column:1; grid-row:1 / span 2; grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(60px,9vh,86px)}
  .side .btn.go{grid-column:2; grid-row:1}
  .smallrow{grid-column:2; grid-row:2}
  .msg{grid-column:1 / -1}
  .score{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}
  .stagewrap{min-height:340px}
  .boardbox{min-height:280px}
  .chips{flex-wrap:wrap}
  .side{display:flex}
  .commands{grid-template-columns:repeat(2,1fr); grid-auto-rows:80px}
}
@media (prefers-reduced-motion: reduce){
  .stars svg,#rover.shake svg,#rover .oops{animation:none}
  .step,#rover,#rover .inner{transition:none}
}