/* BUSTVILLE — Saturday-morning cartoon UI. Ink outlines, flat fills, hard shadows. */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --pink:#e48fb0; --pink-2:#f3b6cd; --cream:#fff6e5; --ink:#151515; --paper:#fffdf7;
  --yellow:#ffd63d; --red:#f25c4a; --teal:#34d0e6; --green:#7ed957; --gray:#3a3a3f;
  --shadow: 5px 5px 0 var(--ink);
  --font-head: "Bangers", "Arial Black", Impact, sans-serif;
  --font-body: "Nunito", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}
html,body { width:100%; height:100%; overflow:hidden; background:var(--pink); overscroll-behavior:none; touch-action:none; }
body { font-family:var(--font-body); font-weight:700; color:var(--ink); user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
canvas#game { position:fixed; inset:0; display:block; touch-action:none; }
.hidden { display:none !important; }
button { font-family:inherit; font-weight:900; color:var(--ink); cursor:pointer; border:3px solid var(--ink); background:var(--paper);
  border-radius:14px; box-shadow:var(--shadow); transition:transform .06s, box-shadow .06s; touch-action:manipulation; }
button:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
button.big { font-family:var(--font-head); font-weight:400; font-size:clamp(22px,5vw,34px); letter-spacing:.06em; padding:12px 28px;
  background:var(--yellow); }
button.mid { font-size:15px; padding:10px 18px; margin-top:10px; }
button.link { border:none; box-shadow:none; background:transparent; font-size:14px; padding:8px 10px; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; }
button.link:active { transform:none; }

/* ---------- overlays ---------- */
.overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:18px;
  background:var(--pink);
  background-image: radial-gradient(rgba(255,255,255,.35) 2px, transparent 2.5px);
  background-size:22px 22px; overflow-y:auto; }
#pause,#busted,#escaped { background:rgba(21,21,21,.55); background-image:none; backdrop-filter:blur(2px); }
.title-card { text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
#portrait { width:min(52vw,260px); height:min(52vw,260px); border:4px solid var(--ink); border-radius:50%; background:var(--pink-2);
  box-shadow:var(--shadow); }
.logo { font-family:var(--font-head); font-weight:400; font-size:clamp(64px,16vw,132px); line-height:.9; letter-spacing:.03em; color:var(--cream);
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill;
  text-shadow:6px 6px 0 var(--ink); transform:rotate(-3deg); margin-top:10px; }
.logo span { color:var(--yellow); }
.tag { font-size:clamp(14px,3.2vw,20px); background:var(--ink); color:var(--cream); padding:4px 14px; border-radius:8px; transform:rotate(1.5deg); margin-bottom:14px; }
.title-foot { display:flex; gap:12px; margin-top:8px; }

.panel { background:var(--paper); border:4px solid var(--ink); border-radius:22px; box-shadow:8px 8px 0 var(--ink);
  padding:22px; width:min(96vw,760px); max-height:94vh; overflow-y:auto; }
.panel h2 { font-family:var(--font-head); font-weight:400; font-size:clamp(30px,7vw,48px); letter-spacing:.05em; text-align:center; line-height:1; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.cash { font-family:var(--font-head); font-size:24px; color:var(--green); -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill; }
.small-panel { width:min(92vw,420px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.muted { color:#6b6b70; font-weight:700; }
.small { font-size:12px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; }
.quote { font-style:italic; font-size:17px; line-height:1.35; padding:10px 14px; background:var(--cream); border:3px solid var(--ink); border-radius:14px; margin:8px 0; }
.busted h2 { color:var(--red); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; transform:rotate(-4deg); font-size:clamp(44px,10vw,68px); }
.escaped h2 { color:var(--green); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; transform:rotate(-2deg); }
.stars { font-size:46px; letter-spacing:.08em; color:var(--yellow); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; line-height:1; }
.tally { width:100%; display:grid; grid-template-columns:1fr auto; gap:4px 14px; font-size:15px; text-align:left; padding:8px 12px;
  background:var(--cream); border:3px dashed var(--ink); border-radius:12px; }
.tally .v { text-align:right; font-weight:900; }
.tally .total { font-family:var(--font-head); font-size:22px; border-top:3px solid var(--ink); padding-top:4px; margin-top:4px; }

/* level grid */
#level-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.lvl { background:var(--cream); border:3px solid var(--ink); border-radius:16px; box-shadow:var(--shadow); padding:12px; text-align:left; position:relative;
  display:flex; flex-direction:column; gap:4px; min-height:130px; }
.lvl .em { font-size:38px; line-height:1; }
.lvl .nm { font-family:var(--font-head); font-weight:400; font-size:20px; letter-spacing:.04em; line-height:1.05; }
.lvl .st { color:var(--yellow); -webkit-text-stroke:1px var(--ink); paint-order:stroke fill; font-size:20px; letter-spacing:.05em; }
.lvl .sub { font-size:11px; color:#6b6b70; }
.lvl.locked { background:#d8d4cc; color:#777; cursor:not-allowed; box-shadow:none; transform:none; }
.lvl.locked .em { filter:grayscale(1); opacity:.5; }
.lvl .num { position:absolute; top:-10px; right:-8px; background:var(--ink); color:var(--cream); width:30px; height:30px; border-radius:50%;
  font-family:var(--font-head); font-size:17px; display:flex; align-items:center; justify-content:center; }

/* briefing */
.brief { text-align:center; }
.brief-emoji { font-size:64px; line-height:1; }
.brief-tag { font-style:italic; color:#6b6b70; margin:2px 0 10px; }
.brief-text { font-size:16px; line-height:1.45; text-align:left; background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:12px 14px; }
.brief-goals { text-align:left; list-style:none; margin:12px 0 0; display:flex; flex-direction:column; gap:6px; }
.brief-goals li { padding:6px 10px; border-left:5px solid var(--yellow); background:#fff; border-radius:0 8px 8px 0; font-size:14px; }
.brief-goals li.req { border-left-color:var(--red); }

/* how-to */
.howto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin:14px 0 18px; font-size:13px; line-height:1.4; }
.howto-grid div { background:var(--cream); border:3px solid var(--ink); border-radius:12px; padding:10px; }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:20; }
#hud-top { position:absolute; top:calc(env(safe-area-inset-top,0px) + 8px); left:10px; right:10px; display:flex; align-items:center; gap:8px; }
#hud-level { font-family:var(--font-head); font-size:18px; letter-spacing:.05em; color:var(--cream); -webkit-text-stroke:1.2px var(--ink); paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hud-loot,#hud-time { background:var(--paper); border:3px solid var(--ink); border-radius:10px; padding:3px 10px; font-size:15px; box-shadow:3px 3px 0 var(--ink); }
#hud-loot.flash { animation:flash .5s; }
@keyframes flash { 0%{background:var(--red); color:#fff} 100%{background:var(--paper)} }
#hud-loot.full { background:var(--green); }
.hud-btn { pointer-events:auto; width:38px; height:38px; border-radius:10px; font-size:14px; box-shadow:3px 3px 0 var(--ink); }
#heat-wrap { position:absolute; top:calc(env(safe-area-inset-top,0px) + 54px); left:10px; width:150px; height:18px; border:3px solid var(--ink); border-radius:9px;
  background:var(--paper); overflow:hidden; box-shadow:3px 3px 0 var(--ink); }
#heat-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--yellow),var(--red)); transition:width .2s; }
#heat-label { position:absolute; inset:0; font-size:10px; letter-spacing:.2em; display:flex; align-items:center; justify-content:center; font-weight:900; }
#heat-wrap.hot { animation:shake .25s infinite; }
@keyframes shake { 0%{transform:translate(0,0)} 50%{transform:translate(1px,-1px)} 100%{transform:translate(-1px,1px)} }
#hint { position:absolute; top:calc(env(safe-area-inset-top,0px) + 86px); left:50%; transform:translateX(-50%) rotate(-1deg); max-width:86vw;
  background:var(--cream); border:3px solid var(--ink); border-radius:14px; padding:8px 14px; font-size:14px; text-align:center; box-shadow:4px 4px 0 var(--ink); }
#objective { position:absolute; top:calc(env(safe-area-inset-top,0px) + 54px); right:10px; background:var(--ink); color:var(--cream); border-radius:10px;
  padding:4px 10px; font-size:12px; letter-spacing:.04em; }

#touch-right { position:absolute; right:calc(env(safe-area-inset-right,0px) + 14px); bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; }
.gadget-row,.main-row { display:flex; gap:10px; align-items:flex-end; }
.tbtn { pointer-events:auto; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:400; letter-spacing:.05em; opacity:.92; }
.tbtn.action { width:84px; height:84px; border-radius:50%; background:var(--yellow); font-size:22px; }
.tbtn.run { width:66px; height:66px; border-radius:50%; background:var(--teal); font-size:17px; }
.tbtn.gadget { width:54px; height:54px; border-radius:14px; background:var(--paper); }
.tbtn.gadget .g-ico { font-size:22px; line-height:1; }
.tbtn.gadget .g-n { font-size:13px; font-family:var(--font-body); font-weight:900; }
.tbtn.gadget.empty { opacity:.4; }
.tbtn.action.hot { background:var(--red); color:#fff; animation:pulse .6s infinite; }
@keyframes pulse { 50%{ transform:scale(1.06);} }
.tbtn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
body.desktop #touch-right { display:none; }
body.desktop #hint { font-size:15px; }