/* =====================================================================
   Blockup — styles
   Canvas fills the screen; menus and controls are HTML on top.
   ===================================================================== */

:root{
  --ink:#1d2433;
  --panel:#fffdf7;
  --line:#2b3448;
  --green:#4caf50;
  --green-dark:#2e7d32;
  --gold:#ffc83d;
  --sky:#4fb8ec;
  --font:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  /* How far the visible area is inset from the page edges — set from
     visualViewport by game.js. Zero unless the browser has zoomed or
     shifted the page (e.g. after the on-screen keyboard closes). */
  --vv-t:0px;--vv-r:0px;--vv-b:0px;--vv-l:0px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  /* iPhones enlarge text when rotated to landscape unless told not to. */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
html,body{
  margin:0;height:100%;overflow:hidden;background:#4fb8ec;color:var(--ink);
  font-family:var(--font);
  /* No scrolling, pinch zoom, text selection or long-press menus while playing. */
  touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
[hidden]{display:none !important}

#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* Menu buttons: no double-tap zoom, so tapping ▶ quickly in the character maker just cycles. */
button,input,.opt-row,.level-card{touch-action:manipulation}

/* ---------- Buttons ---------- */
.btn{
  font:inherit;font-weight:800;font-size:18px;color:var(--ink);
  background:#fff;border:3px solid var(--line);border-radius:14px;
  padding:12px 20px;min-height:52px;cursor:pointer;
  box-shadow:0 5px 0 var(--line);transition:transform .06s, box-shadow .06s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.btn.primary{background:var(--green);color:#fff}
.btn.big{font-size:24px;padding:14px 34px;min-height:62px}
.btn.small{font-size:15px;padding:8px 14px;min-height:44px}
.btn:disabled{opacity:.5}

/* ---------- Screens ---------- */
.screen{
  position:fixed;inset:0;z-index:20;overflow-y:auto;touch-action:pan-y;
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
}
.screen.overlay{background:rgba(20,26,40,.55);display:grid;place-items:center}
.panel{
  background:var(--panel);border:4px solid var(--line);border-radius:22px;box-shadow:0 8px 0 var(--line);
  padding:22px 22px 26px;width:min(440px,100%);display:flex;flex-direction:column;gap:12px;text-align:center;
  max-height:100%;overflow-y:auto;
}
.panel h2{margin:0 0 4px;font-size:30px}

/* ---------- Title ---------- */
#titleScreen{display:grid;place-items:center;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.18))}
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.logo{margin:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.logo span{
  display:grid;place-items:center;width:clamp(44px,11vw,76px);height:clamp(44px,11vw,76px);
  font-size:clamp(30px,7.5vw,54px);font-weight:900;color:#fff;
  border:4px solid var(--line);border-radius:10px;box-shadow:0 6px 0 var(--line);
  text-shadow:0 3px 0 rgba(0,0,0,.25);animation:hop 2.4s ease-in-out infinite;
}
.logo span:nth-child(1){background:#e53935;animation-delay:0s}
.logo span:nth-child(2){background:#fb8c00;animation-delay:.1s}
.logo span:nth-child(3){background:#fdd835;animation-delay:.2s;color:var(--ink)}
.logo span:nth-child(4){background:#43a047;animation-delay:.3s}
.logo span:nth-child(5){background:#1e88e5;animation-delay:.4s}
.logo span:nth-child(6){background:#8e24aa;animation-delay:.5s}
.logo span:nth-child(7){background:#ec407a;animation-delay:.6s}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-12px)}}
.tagline{margin:4px 0 6px;font-size:19px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);max-width:30ch}
.rotate-hint{display:none;margin:6px 0 0;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
@media (orientation:portrait){ .rotate-hint{display:block} }

/* ---------- Character maker ---------- */
#creatorScreen{background:linear-gradient(#bfe9ff,#8fd47a)}
.creator{display:flex;gap:18px;height:100%;align-items:stretch}
.preview-wrap{
  flex:1 1 45%;min-height:220px;background:rgba(255,255,255,.45);border:4px solid var(--line);
  border-radius:22px;overflow:hidden;position:relative;
}
#preview{position:absolute;inset:0;width:100%;height:100%}
/* Landscape: the preview stays put and only the options scroll. */
#creatorScreen{overflow:hidden}
.options{flex:1 1 55%;display:flex;flex-direction:column;gap:10px;max-width:520px;overflow-y:auto;padding:2px 4px 10px}
.options > *{flex-shrink:0}
.options h2{margin:0;font-size:26px}
.name-field{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--line);border-radius:14px;padding:6px 12px}
.name-field span{font-weight:800;min-width:92px}
.name-field input{
  flex:1;min-width:0;font:inherit;font-weight:800;font-size:20px;border:0;outline:0;background:transparent;
  color:var(--ink);padding:8px 0;-webkit-user-select:text;user-select:text;
}
.opt-row{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--line);border-radius:14px;padding:6px}
.opt-row .label{font-weight:800;min-width:96px;padding-left:6px;font-size:16px}
.opt-row .value{flex:1;text-align:center;font-weight:800;font-size:18px}
.opt-row button{
  font:inherit;font-size:20px;font-weight:900;width:48px;height:44px;border-radius:10px;
  border:3px solid var(--line);background:var(--gold);color:var(--ink);cursor:pointer;
}
.opt-row button:active{transform:translateY(2px)}
.lock-note{margin:0;font-size:14px;font-weight:700;color:#24402a}
@media (orientation:portrait){
  .creator{flex-direction:column}
  #creatorScreen{overflow-y:auto}
  .options{overflow:visible}
  .preview-wrap{flex:0 0 34vh}
  .options{max-width:none}
}

/* ---------- Levels ---------- */
#levelsScreen{background:linear-gradient(#bfe9ff,#4fb8ec)}
.levels-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:16px}
.levels-head h2{margin:0;font-size:26px;text-align:center;flex:1}
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;max-width:900px;margin:0 auto}
.level-card{
  font:inherit;color:var(--ink);background:#fff;border:4px solid var(--line);border-radius:18px;
  box-shadow:0 6px 0 var(--line);padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
}
.level-card:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.level-card .ic{font-size:46px;line-height:1}
.level-card .nm{font-weight:900;font-size:19px}
.level-card .st{font-size:20px;letter-spacing:2px;color:#f2a900}
.level-card.locked{opacity:.55;cursor:default}
.level-card.locked:active{transform:none;box-shadow:0 6px 0 var(--line)}

/* ---------- HUD ---------- */
#hud{
  position:fixed;z-index:10;top:calc(10px + var(--safe-t) + var(--vv-t));left:calc(10px + var(--safe-l) + var(--vv-l));right:calc(10px + var(--safe-r) + var(--vv-r));
  display:flex;gap:8px;align-items:center;pointer-events:none;flex-wrap:wrap;
}
.hud-pill,.hud-btn{
  background:rgba(255,255,255,.88);border:3px solid var(--line);border-radius:12px;
  font-weight:900;font-size:17px;padding:5px 10px;display:flex;gap:6px;align-items:center;min-height:40px;
}
.hud-btn{pointer-events:auto;font:inherit;font-weight:900;cursor:pointer;min-width:44px;justify-content:center}
#toast{
  position:fixed;z-index:15;top:calc(64px + var(--safe-t) + var(--vv-t));left:50%;transform:translateX(-50%);
  background:rgba(29,36,51,.88);color:#fff;font-weight:800;font-size:18px;padding:10px 18px;border-radius:14px;
  max-width:90vw;text-align:center;pointer-events:none;animation:pop .25s ease-out;
}
@keyframes pop{from{transform:translateX(-50%) scale(.8);opacity:0}}

/* ---------- Touch controls ---------- */
/* The controls box tracks the visible area, so the buttons can never be pushed off screen. */
#controls{position:fixed;top:var(--vv-t);right:var(--vv-r);bottom:var(--vv-b);left:var(--vv-l);z-index:11;pointer-events:none}
.move-pad{
  position:absolute;left:calc(12px + var(--safe-l));bottom:calc(12px + var(--safe-b));
  display:flex;gap:10px;pointer-events:auto;touch-action:none;padding:4px;
}
.act-pad{
  position:absolute;right:calc(12px + var(--safe-r));bottom:calc(12px + var(--safe-b));
  display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;
}
.ctl{
  width:var(--ctl);height:var(--ctl);border-radius:22%;display:grid;place-items:center;
  font-family:var(--font);font-size:calc(var(--ctl) * .4);font-weight:900;color:var(--ink);
  /* Solid enough to read on snow, sand and night sky alike: a light face,
     a dark outline, and a soft dark halo behind it. */
  background:rgba(255,255,255,.8);border:3px solid var(--line);
  box-shadow:0 4px 0 rgba(29,36,51,.7), 0 0 0 3px rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.25);
  pointer-events:none;
}
.ctl.on{background:#fff;transform:translateY(3px);box-shadow:0 1px 0 rgba(29,36,51,.7), 0 0 0 3px rgba(255,255,255,.35)}
.act-pad .ctl{pointer-events:auto;touch-action:none;cursor:pointer}
.ctl.jump{width:var(--jump);height:var(--jump);border-radius:50%;background:rgba(56,160,64,.92);color:#fff;font-size:calc(var(--jump) * .42)}
.ctl.jump.on{background:#2e8b36}
.ctl.action{width:var(--act);height:var(--act);border-radius:50%;background:rgba(255,200,61,.95);font-size:calc(var(--act) * .44);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

/* Button sizes: full size on tablets, smaller on narrow or short phones,
   never under a comfortable thumb size. */
:root{--ctl:84px;--jump:96px;--act:76px}
@media (max-height:420px){ :root{--ctl:70px;--jump:82px;--act:64px} }
@media (max-height:340px){ :root{--ctl:62px;--jump:72px;--act:58px} }
@media (max-width:400px){ :root{--ctl:64px;--jump:74px;--act:58px} }
@media (max-width:340px){ :root{--ctl:58px;--jump:68px;--act:54px} }

/* ---------- Level complete ---------- */
.stars{font-size:40px;letter-spacing:6px;color:#f2a900;line-height:1}
.stars .off{color:#d9d4c6}
.stats{margin:0;font-weight:700;font-size:16px}
.gift{
  font-size:88px;line-height:1;background:none;border:0;cursor:pointer;margin:4px auto 0;
  animation:wobble 1s ease-in-out infinite;
}
.gift.open{animation:burst .5s ease-in forwards}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.05)}75%{transform:rotate(10deg) scale(1.05)}}
@keyframes burst{to{transform:scale(1.8);opacity:0}}
.hint{margin:0;font-weight:800;color:#8a5a00}
.surprise{animation:rise .5s ease-out}
.surprise .s-icon{font-size:80px;line-height:1.1}
.surprise h3{margin:4px 0;font-size:24px}
.surprise p{margin:0;font-weight:600}
@keyframes rise{from{transform:translateY(20px) scale(.6);opacity:0}}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* Short landscape phones: keep the level-complete panel on one screen. */
@media (max-height:500px){
  .panel{padding:12px 16px 16px;gap:6px}
  .panel h2{font-size:22px;margin:0}
  .stars{font-size:26px}
  .stats{font-size:14px}
  .gift{font-size:56px}
  .hint{font-size:14px}
  .surprise .s-icon{font-size:46px}
  .surprise h3{font-size:18px;margin:2px 0}
  .surprise p{font-size:14px}
  .panel .btn{min-height:42px;font-size:15px;padding:8px 14px}
}

/* ---------- How to play ---------- */
.title-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.panel.help{width:min(760px,100%);text-align:left}
.panel.help h2{text-align:center}
.help-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .help-cols{grid-template-columns:1fr} }
.help-block{background:#fff;border:3px solid var(--line);border-radius:14px;padding:10px 14px}
.help-block h3{margin:0 0 8px;font-size:18px}
.help-block.first{border-color:var(--green);box-shadow:0 0 0 3px rgba(76,175,80,.3)}
.keys{border-collapse:collapse;width:100%;font-size:15px}
.keys td{padding:6px 4px;vertical-align:middle;border-top:1px dashed #d9d4c6}
.keys tr:first-child td{border-top:0}
.keys td:first-child{white-space:nowrap;padding-right:10px}
kbd{
  display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;
  font:inherit;font-weight:900;font-size:15px;color:var(--ink);background:#f4f1ea;
  border:2px solid var(--line);border-radius:7px;box-shadow:0 3px 0 var(--line);margin:2px 0 4px;
}
kbd.wide{min-width:58px}
.or{font-size:12px;color:#7a7466;margin:0 2px}
.pill{
  display:inline-grid;place-items:center;min-width:44px;height:34px;padding:0 8px;font-weight:900;
  background:#fff;border:2px solid var(--line);border-radius:9px;
}
.pill.round{width:36px;min-width:0;border-radius:50%}
.pill.green{background:#38a040;color:#fff}
.pill.gold{background:var(--gold)}
.help-note{margin:6px 0 0;font-size:13px;color:#5d5748}
.tips ul{margin:0;padding-left:20px;font-size:15px}
.tips li{margin-bottom:5px}
@media (max-height:500px){
  .help-block{padding:8px 12px}
  .keys{font-size:14px}
  kbd{height:28px;min-width:28px;font-size:14px}
  kbd.wide{min-width:50px}
}

/* ---------- Saved progress ---------- */
.bank{margin:2px 0 0;color:#fff;font-weight:800;font-size:16px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bank-pill{display:inline-block;font-size:15px;background:#fff;border:2px solid var(--line);border-radius:10px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.bank-pill:empty{display:none}
.saved-note{margin:-4px 0 4px;font-size:14px;font-weight:700;color:#2e7d32}
.level-card .st.cont{color:var(--green-dark);font-size:16px;letter-spacing:0;font-weight:900}
@media (max-height:440px){
  .title-wrap{gap:9px}
  .logo span{width:clamp(40px,9vw,64px);height:clamp(40px,9vw,64px);font-size:clamp(28px,6vw,44px)}
  .tagline{margin:0;font-size:16px}
  .title-wrap .btn.big{font-size:21px;min-height:54px;padding:10px 26px}
}

/* ---------- Save code ---------- */
.code-panel{width:min(560px,100%);text-align:left}
.code-panel h2{text-align:center}
.code-intro{margin:-4px 0 4px;text-align:center;font-weight:700}
.code-panel .help-block{display:flex;flex-direction:column;gap:8px}
.code-panel textarea{
  width:100%;font:600 14px ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:#f7f5ef;
  border:2px solid var(--line);border-radius:10px;padding:8px 10px;resize:none;word-break:break-all;
  -webkit-user-select:text;user-select:text;touch-action:manipulation;
}
.code-panel .row{justify-content:flex-start;margin:0}
.code-msg{margin:0;font-weight:800;color:#2e7d32}
.code-msg.error{color:#c62828}
.code-preview{background:#e8f5e9;border:2px solid var(--green);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.code-preview p{margin:0;font-weight:800}
.code-note{margin:0;font-size:13px;color:#5d5748}

@media (max-height:350px){
  .tagline{display:none}
  .title-row .btn{min-height:44px;font-size:15px;padding:7px 12px}
  .title-row{gap:8px}
}