/* ============================================================
   SKILLFORGE — shell chrome (menus, settings, pause, tutorial).
   One mood: a quiet dark room with one lit thing in it. Hierarchy comes from
   size, not colour: the title is ~4x the body, and everything secondary sits at
   reduced opacity rather than a lighter grey, so the palette stays whole.
   ============================================================ */
:root {
  --bg: #191919;
  --ink: #f2f2f2;
  --green: #7dc23f;
  --red: #e8384f;
  --yellow: #ffd23f;
  --font: "Gaegu", "Comic Sans MS", cursive, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
#app { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; }

/* every full-screen panel shares this: opaque enough to read on, with a soft
   glow behind the content so the background is never a flat dead rectangle */
.screen {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5vh 6vw;
  background:
    radial-gradient(circle at 50% 42%, rgba(125, 194, 63, 0.07), transparent 62%),
    #171717;
}
.screen.dim { background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.55), rgba(14,14,14,0.94) 70%); }
.screen.solid { background: #131313; }
.screen[hidden] { display: none; }
.shell { z-index: 30; }

.stack { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
/* Anything you have to READ gets an opaque card. Reading through a dimmed
   playfield means two layers of text at once, which is the complaint. */
.stack.card {
  background: #1c1c1c;
  border-radius: 18px;
  padding: 34px 46px 30px;
  box-shadow: 0 10px 0 rgba(0,0,0,0.4);
  max-width: 560px;
}
.stack.narrow { max-width: 560px; gap: 16px; }

/* the hero: nothing else on screen comes close in size */
.big {
  margin: 0;
  font: 700 clamp(58px, 9vw, 132px)/0.94 var(--font);
  letter-spacing: 0.015em;
}
.mid { margin: 0 0 4px; font: 700 clamp(34px, 4.4vw, 56px)/1 var(--font); }
.lead {
  margin: 0; max-width: 30ch;
  font: 400 clamp(20px, 2vw, 29px)/1.35 var(--font);
  color: rgba(242, 242, 242, 0.62);
}
.lead em { color: var(--yellow); font-style: normal; }

.row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* buttons read as pressable: a lift, a seated shadow, and an obvious travel */
.btn {
  display: inline-block;
  border: 0; border-radius: 12px;
  background: #2f2f2f;
  color: rgba(242, 242, 242, 0.85);
  font: 400 clamp(21px, 1.9vw, 28px)/1 var(--font);
  padding: 15px 30px 18px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 5px 0 #1d1d1d;
  transition: transform 0.07s ease, background 0.1s linear, box-shadow 0.07s ease;
}
.btn:hover { background: #3c3c3c; color: #fff; transform: translateY(-2px); box-shadow: 0 7px 0 #1d1d1d; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1d1d1d; }
.btn.primary {
  background: var(--green); color: #16240a; font-weight: 700;
  padding: 18px 62px 21px;
  font-size: clamp(26px, 2.5vw, 36px);
  box-shadow: 0 6px 0 #4c7a24;
}
.btn.primary:hover { background: #91d84c; box-shadow: 0 8px 0 #4c7a24; }
.btn.primary:active { box-shadow: 0 2px 0 #4c7a24; }
.btn.ghost { background: transparent; box-shadow: none; color: rgba(242,242,242,0.5); }
.btn.ghost:hover { background: #2b2b2b; color: #fff; box-shadow: none; transform: none; }
.btn.danger { background: #3a1f24; color: #f0a3ae; box-shadow: 0 5px 0 #261418; }
.btn.danger:hover { background: var(--red); color: #fff; box-shadow: 0 7px 0 #261418; }
.btn.wish { background: #1f2f45; color: #9ecbff; box-shadow: 0 5px 0 #131e2c; }
.btn.wish:hover { background: #2c4363; color: #cfe6ff; }

.save { margin: 4px 0 0; font: 400 clamp(16px, 1.4vw, 21px)/1 var(--font); color: rgba(242,242,242,0.34); }
.credit { position: absolute; bottom: 3.4vh; margin: 0; font: 400 clamp(16px, 1.4vw, 20px)/1 var(--font); color: rgba(242,242,242,0.3); }
.credit.inline { position: static; margin-top: 10px; }
.credit b { color: rgba(242,242,242,0.62); font-weight: 400; }
.hint { margin: 2px 0 0; font: 400 clamp(16px, 1.4vw, 20px)/1.4 var(--font); color: rgba(242,242,242,0.34); }
.hint b { color: var(--yellow); font-weight: 400; }

/* the tutorial: one idea per row, the claim on its own line in white and the
   detail beneath it in grey. Wrapping bold and grey together in one paragraph is
   what made this unreadable. */
.stack.tut { max-width: 640px; gap: 22px; }
.steps { margin: 6px 0 0; padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 20px; counter-reset: s; }
.steps li {
  counter-increment: s;
  position: relative; padding-left: 56px;
}
.steps li b {
  display: block;
  font: 700 clamp(20px, 1.75vw, 26px)/1.25 var(--font);
  color: #fff;
}
.steps li span {
  display: block; margin-top: 3px;
  font: 400 clamp(17px, 1.5vw, 22px)/1.35 var(--font);
  color: rgba(242, 242, 242, 0.55);
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: #2f2f2f; color: var(--green);
  font: 700 22px/38px var(--font); text-align: center;
}
.steps em { color: var(--yellow); font-style: normal; }

/* toggles look obviously on or off, not subtly */
.toggle {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 380px;
  padding: 14px 20px; border-radius: 12px;
  background: #242424; cursor: pointer;
  font: 400 clamp(20px, 1.8vw, 26px)/1 var(--font);
  color: rgba(242, 242, 242, 0.85);
}
.toggle:hover { background: #2e2e2e; }
.toggle input { width: 26px; height: 26px; accent-color: var(--green); cursor: pointer; }
.toggle input:not(:checked) + span { color: rgba(242, 242, 242, 0.36); text-decoration: line-through; }

/* in-game corner buttons — top right, where a pause button belongs, and each
   one carries a real icon rather than a character that happens to look like one */
.hud-btn {
  position: fixed; top: 18px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 11px;
  background: #2b2b2b;
  width: 46px; height: 46px; cursor: pointer;
  box-shadow: 0 4px 0 #1b1b1b;
  padding: 0;
}
.hud-btn svg { width: 26px; height: 26px; fill: rgba(242,242,242,0.7); display: block; }
.hud-btn:hover { background: #3a3a3a; }
.hud-btn:hover svg { fill: #fff; }
.hud-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1b1b1b; }
#pauseBtn { right: 18px; }
#recenter { right: 74px; }
#recenter svg { width: 22px; height: 22px; opacity: 0.8; }
body:not(.playing) .hud-btn { display: none; }

/* the run summary: the payout is the headline, everything else is one short list */
.stack.recap { gap: 8px; }
.recapRun { margin: 0; font: 400 clamp(17px, 1.5vw, 21px)/1 var(--font); color: rgba(242,242,242,0.4); }
.recapPay { margin: 0; font: 700 clamp(60px, 7vw, 96px)/1 var(--font); color: var(--yellow); }
.recapNew { margin: -2px 0 0; font: 700 clamp(20px, 1.8vw, 26px)/1 var(--font); color: var(--green); }
.recapNew[hidden] { display: none; }
.recapList { margin: 14px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.recapList li { font: 400 clamp(18px, 1.6vw, 23px)/1.2 var(--font); color: rgba(242,242,242,0.72); padding-left: 26px; position: relative; }
.recapList li::before { position: absolute; left: 0; top: 0; }
.recapList li.yes::before { content: "\2022"; color: var(--green); }
.recapList li.no::before { content: "\2022"; color: var(--red); }
.recapList li.flat::before { content: "\2022"; color: rgba(242,242,242,0.28); }
.recapList li.no { color: rgba(242,242,242,0.45); }

/* settings must sit above the pause panel it is opened from */
#settings { z-index: 60; }
#tut { z-index: 55; }

#over { z-index: 58; }