/* Monkey Wheel: same universe as imi / imu / ims.arrangedgodly.com. Jungle-deep green, banana yellow, wood brown, cream, Press Start 2P + VT323. */
:root {
  --jungle: #0a2a1c; --jungle2: #123d28; --jungle3: #1d5a36; --leaf: #2f8a35; --leaf-hi: #74c648;
  --banana: #ffd23a; --banana-dk: #c98f0e; --banana-hi: #fff08c; --wood: #8a5a2b; --wood-dk: #5a3517; --wood-hi: #c08a4a;
  --ink: #1a0f14; --cream: #fff6d6; --cream-dk: #c9b88a; --red: #b8322a; --red-hi: #e86a50; --ok: #9ccf3f; --blue: #6ac0f0;
  --px: 'Press Start 2P', 'Courier New', monospace; --vt: 'VT323', 'Courier New', monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--jungle); color: var(--cream); font-family: var(--vt); font-size: 20px; overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

#app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 33dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }

/* chunky pixel frame: stepped corners made from box-shadows */
.px { box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }

/* ---------- HUD ---------- */
#hud { display: grid; grid-template-columns: 1.3fr 1.1fr 0.8fr; gap: 8px; padding: 8px 10px 6px; }
.stat { background: var(--wood-dk); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 var(--wood), inset 0 -3px 0 rgba(0, 0, 0, .35); padding: 5px 8px 4px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stat .lbl { font: 8px/1 var(--px); color: var(--cream-dk); letter-spacing: 1px; }
.stat b { font: 12px/1.3 var(--px); color: var(--banana); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.cash b { font-size: 14px; }
.stat.sp b { color: #8ad8ff; }
.stat small { font-size: 17px; line-height: 1; color: var(--cream-dk); white-space: nowrap; }
#mute { background: none; border: 0; padding: 0; font: 7px var(--px); color: var(--cream-dk); text-decoration: underline; }

/* ---------- stage ---------- */
#stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; background: #03060e; border-block: 3px solid var(--ink); touch-action: none; overflow: hidden; cursor: pointer; }
#scene { display: block; touch-action: none; }
#hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 8px/1.5 var(--px); background: var(--ink); color: var(--banana); padding: 7px 10px; border: 2px solid var(--banana-dk); white-space: nowrap; pointer-events: none; animation: pulse 1.1s steps(2) infinite; }
#hint.gone { display: none; }
@keyframes pulse { 50% { color: var(--cream); border-color: var(--banana); } }
#ocBtn { position: absolute; top: 8px; right: 8px; font: 8px/1.4 var(--px); background: #123a6a; color: #d6f4ff; border: 3px solid #8ad8ff; padding: 7px 9px; animation: zap .5s steps(2) infinite; }
@keyframes zap { 50% { background: #1d5fb0; box-shadow: 0 0 0 3px rgba(138, 216, 255, .35); } }
#toast { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) translateY(-140%); background: var(--ink); color: var(--cream); font: 8px/1.6 var(--px); padding: 8px 12px; border: 2px solid var(--banana); max-width: 90%; text-align: center; transition: transform .2s steps(4); pointer-events: none; z-index: 5; }
#toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- controls ---------- */
#controls { padding: 6px 10px 8px; display: grid; gap: 5px; }
.meters { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--cream-dk); }
.meters #rpm { min-width: 86px; color: var(--cream); }
.meters .bar { flex: 1; height: 10px; background: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--wood-dk); }
.meters .bar i { display: block; height: 100%; width: 100%; background: var(--ok); transition: width .15s steps(5); }
.meters .bar i.mid { background: var(--banana); } .meters .bar i.bad { background: var(--red-hi); }
.meters #tum { min-width: 108px; text-align: right; } .meters #tum.bad { color: var(--red-hi); }
.rotbar { height: 4px; background: var(--ink); } .rotbar i { display: block; height: 100%; width: 0; background: var(--banana); }
#controls .row { display: flex; gap: 6px; align-items: stretch; }
#gears { display: flex; gap: 4px; }
#gears button, #autoGear { background: var(--wood-dk); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 var(--wood); font: 9px/1.2 var(--px); padding: 6px 7px; color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; }
#gears button small { font: 7px var(--px); color: var(--banana-hi); }
#gears button.on, #autoGear.on { background: var(--banana-dk); box-shadow: inset 0 3px 0 var(--banana); color: var(--ink); }
#gears button.on small { color: var(--ink); }
#gears button.lock, #autoGear:disabled { opacity: .4; cursor: default; }
#hold { flex: 1; min-width: 96px; background: var(--leaf); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 var(--leaf-hi), inset 0 -3px 0 rgba(0, 0, 0, .3); font: 12px/1.2 var(--px); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; touch-action: none; }
#hold small { font: 7px var(--px); }
#hold.on, #hold:active { background: var(--banana); box-shadow: inset 0 3px 0 var(--banana-hi), inset 0 -3px 0 rgba(0, 0, 0, .3); transform: translateY(2px); }

/* ---------- shop panel ---------- */
#panel { min-height: 0; display: flex; flex-direction: column; background: var(--jungle2); border-top: 3px solid var(--ink); }
.tabs { display: flex; gap: 4px; padding: 8px 8px 0; align-items: flex-end; flex: none; }
.tab { background: var(--wood-dk); border: 3px solid var(--ink); border-bottom: 0; padding: 7px 9px 6px; font: 8px var(--px); color: var(--cream-dk); }
.tab.on { background: var(--wood); color: var(--cream); padding-bottom: 9px; box-shadow: inset 0 3px 0 var(--wood-hi); }
.buymode { margin-left: auto; display: flex; gap: 3px; align-self: center; }
.buymode button { background: var(--ink); border: 2px solid var(--wood-dk); font: 7px var(--px); padding: 5px 6px; color: var(--cream-dk); }
.buymode button.on { border-color: var(--banana); color: var(--banana); }
#list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--wood); border-top: 3px solid var(--ink); box-shadow: inset 0 3px 0 var(--wood-hi); -webkit-overflow-scrolling: touch; }
.card { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; text-align: left; background: var(--jungle3); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .3); padding: 5px 8px 5px 5px; opacity: .72; }
.card.can { opacity: 1; background: var(--leaf); }
.card.can .cost { background: var(--banana); color: var(--ink); }
.card.dead { opacity: .5; }
.card:active.can { transform: translateY(2px); }
.card.nope { animation: nope .25s steps(4); }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.iconbox { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--jungle); border: 2px solid var(--ink); }
.info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.info .nm { font: 8px/1.4 var(--px); color: var(--banana-hi); }
.info .ds { font-size: 17px; line-height: 1.05; color: var(--cream); }
.info .st { font-size: 16px; color: var(--cream-dk); }
.cost { font: 8px/1.3 var(--px); background: var(--ink); color: var(--cream-dk); padding: 7px 8px; text-align: center; white-space: nowrap; min-width: 74px; }

#ocPanel { background: var(--wood); padding: 8px 10px 0; border-top: 3px solid var(--ink); flex: none; }
#ocPanel .story { margin: 0 0 4px; font-size: 18px; line-height: 1.05; color: var(--cream); }
#ocInfo { margin: 0 0 6px; font-size: 18px; color: var(--cream-dk); line-height: 1.1; } #ocInfo b { color: var(--banana); font-weight: normal; }
#ocGo { width: 100%; background: #123a6a; border: 3px solid #8ad8ff; font: 9px/1.5 var(--px); color: #d6f4ff; padding: 10px 8px; }
#ocGo:disabled { background: var(--ink); border-color: var(--wood-dk); color: var(--cream-dk); cursor: default; }
#ocGo.armed { background: var(--red); border-color: var(--red-hi); color: var(--cream); animation: zap .4s steps(2) infinite; }
#panel.oc { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#panel.oc #list { flex: none; overflow: visible; }
.tabs { position: sticky; top: 0; z-index: 2; background: var(--jungle2); }
#ocPanel + #list { border-top: 0; box-shadow: none; padding-top: 8px; }

/* ---------- splash ---------- */
#splash { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, var(--jungle3), var(--jungle) 70%); padding: 16px; }
#splash.gone { display: none; }
.splash-in { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#heroCv { width: 240px; height: 160px; }
#splash h1 { margin: 0; font: 14px/1.7 var(--px); color: var(--banana); text-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; gap: 4px; }
#splash h1 .t2 { font-size: 11px; color: var(--cream); }
#splash .tag { margin: 0; font-size: 22px; line-height: 1.05; color: var(--cream); }
#splash .how { margin: 0; font-size: 20px; line-height: 1.05; color: var(--cream-dk); } #splash .how b { color: var(--banana); font-weight: normal; }
#clockin { margin-top: 6px; background: var(--banana); border: 4px solid var(--ink); box-shadow: inset 0 4px 0 var(--banana-hi), inset 0 -4px 0 var(--banana-dk); font: 16px var(--px); color: var(--ink); padding: 16px 28px 12px; display: flex; flex-direction: column; gap: 8px; animation: bob 1s steps(2) infinite; }
#clockin small { font: 7px var(--px); }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* ---------- wide screens: stage left, shop right ---------- */
@media (min-width: 860px) {
  #app { grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr) 440px; }
  #panel { border-top: 0; border-left: 3px solid var(--ink); }
  #hud { padding-inline: 14px; }
}
@media (max-height: 640px) and (max-width: 859px) {
  #app { grid-template-rows: minmax(0, 1fr) 32dvh; }
  #hud { padding-block: 4px 3px; } .stat { padding: 3px 6px; }
  .card { grid-template-columns: 1fr auto; } .iconbox { display: none; }
}