/* =========================================================================
   NO TIME TO STOP - HTML5 EDITION - stylesheet
   ========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #241a12;
  --cream: #f7eed6;
  --cream-2: #eadfc0;
  --green: #74b94a;
  --blue: #4a90c8;
  --yellow: #f0b429;
  --red: #e8483c;
  --purple: #8e5fd0;
  --pink: #e8749f;
  --panel: #1d3a2c;
}
html, body {
  height: 100%;
  background: #10160f;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#app { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.screen.active { display: flex; }
.screen canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  font-family: inherit;
  font-size: clamp(15px, 1.55vw, 26px);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff8e8;
  padding: .62em 1.5em;
  border: 4px solid rgba(32,24,16,.85);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: transform .08s ease, filter .15s ease;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  box-shadow: 0 6px 0 rgba(24,18,12,.55), inset 0 3px 0 rgba(255,255,255,.35);
  min-width: 240px;
}
.btn:hover { filter: brightness(1.09); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(24,18,12,.55), inset 0 3px 0 rgba(255,255,255,.25); }
.btn:disabled { filter: grayscale(.75) brightness(.85); cursor: not-allowed; transform: none; }
.btn-green { background: linear-gradient(#8fd35f, #5d9e3a); }
.btn-blue { background: linear-gradient(#6fb6e8, #3d7fae); }
.btn-yellow { background: linear-gradient(#ffd35c, #d99a15); color: #3a2a08; text-shadow: 0 2px 0 rgba(255,255,255,.35); }
.btn-red { background: linear-gradient(#f2756a, #c33327); }
.btn-purple { background: linear-gradient(#a97ad9, #6f43a8); }
.btn-pink { background: linear-gradient(#f392b6, #cc5b86); }
.btn-cream { background: linear-gradient(#fff6dc, #ded0ac); color: #3a2c1c; text-shadow: none; }
.btn.wide { min-width: min(520px, 60vw); }
.btn.big { font-size: clamp(18px, 1.9vw, 32px); padding: .7em 2em; }

/* --------------------------------------------------------------- menu --- */
.menu-plate {
  position: relative;
  background: #fdf8ea;
  border: 8px solid #241a12;
  border-radius: 26px;
  padding: 2.2vh 3.4vw 1.6vh;
  text-align: center;
  box-shadow: 0 14px 0 rgba(20,26,14,.35);
  margin-bottom: 2vh;
  z-index: 2;
}
.menu-plate.small { padding: 1.6vh 3vw 1.2vh; }
.menu-plate h1 {
  font-size: clamp(38px, 7.2vw, 118px);
  line-height: .92;
  letter-spacing: .02em;
  color: #5aa6dc;
  -webkit-text-stroke: 3px #241a12;
  text-shadow: 0 5px 0 #2f5f85, 0 0 0 #241a12;
}
.menu-plate.small h1 { font-size: clamp(30px, 4.4vw, 74px); }
.menu-plate .sub {
  font-size: clamp(14px, 1.7vw, 30px);
  color: #e8749f; font-weight: 900; margin-top: .35em;
  letter-spacing: .05em;
}
.menu-plate .tag {
  font-size: clamp(11px, 1vw, 17px); color: #7d6b52; margin-top: .3em; letter-spacing: .18em; text-transform: uppercase;
}
.menu-buttons {
  position: relative;
  display: flex; flex-direction: column; gap: 1.5vh;
  align-items: center; z-index: 2;
  margin-top: 1vh;
}
.menu-buttons .btn span { font-size: .7em; opacity: .85; }
#screen-menu { flex-direction: column; }
#screen-mode { flex-direction: column; }
.credit {
  position: absolute; bottom: 1.2vh; left: 0; right: 0;
  text-align: center; font-size: clamp(11px, 1vw, 16px); color: #f2e8d2;
  text-shadow: 0 2px 3px rgba(0,0,0,.6); letter-spacing: .1em; z-index: 2;
}

/* ------------------------------------------------------------- gallery -- */
#screen-gallery { background: #0c120b; }
.gallery-bar {
  position: absolute; bottom: 1.4vh; left: 50%; transform: translateX(-50%);
  display: flex; gap: .7vw; z-index: 5; flex-wrap: wrap; justify-content: center;
}
.gallery-bar .chip { font-size: clamp(11px, 1.05vw, 17px); padding: .6em 1.2em; }

/* ---------------------------------------------------------- how to play - */
#screen-how { background: #2b2117; }
.how-wrap {
  position: relative; z-index: 2;
  width: min(1500px, 94vw); max-height: 92vh; overflow: auto;
  background: var(--cream); border: 8px solid #241a12; border-radius: 22px;
  padding: 2.4vh 2.4vw; box-shadow: 0 16px 0 rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; gap: 1.6vh;
}
.how-wrap h2 {
  font-size: clamp(24px, 2.6vw, 44px); color: #1d5c3a; letter-spacing: .04em;
  text-transform: uppercase;
}
.how-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4vw; width: 100%; }
.how-card {
  background: #fff9e8; border: 4px solid #241a12; border-radius: 14px; padding: 1.4vh 1.2vw;
}
.how-card h3 {
  font-size: clamp(15px, 1.35vw, 22px); color: #b3432a; margin: .7em 0 .35em; text-transform: uppercase; letter-spacing: .03em;
}
.how-card h3:first-child { margin-top: 0; }
.how-card p, .how-card li { font-size: clamp(13px, 1.15vw, 19px); line-height: 1.45; color: #3d3226; }
.how-card ul { padding-left: 1.2em; }
.how-card b { color: #1d5c3a; }

/* ----------------------------------------------------- character pick -- */
#screen-pick { flex-direction: column; }
.pick-wrap {
  position: relative; z-index: 2;
  width: min(1520px, 95vw); max-height: 94vh; overflow: auto;
  background: var(--cream); border: 8px solid #241a12; border-radius: 22px;
  padding: 1.8vh 2vw; box-shadow: 0 16px 0 rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
}
.pick-wrap h2 {
  font-size: clamp(22px, 2.4vw, 42px); color: #1d5c3a;
  text-transform: uppercase; letter-spacing: .04em;
}
.pick-sub { font-size: clamp(11px, 1.05vw, 17px); color: #7d6b52; text-align: center; }
.pick-row { display: flex; gap: 1.1vw; justify-content: center; flex-wrap: wrap; width: 100%; }
.pick-card {
  background: #fff9e8; border: 5px solid #241a12; border-radius: 16px;
  padding: 1.1vh .9vw; display: flex; flex-direction: column; align-items: center; gap: .6vh;
  box-shadow: 0 8px 0 rgba(24,18,12,.35);
}
.pick-badge {
  font-weight: 900; font-size: clamp(12px, 1.2vw, 19px); color: #fff8e8;
  background: linear-gradient(#8fd35f, #4f8f31); border: 3px solid #241a12;
  border-radius: 9px; padding: .1em .6em; letter-spacing: .04em;
}
.pick-card .pick-figure {
  /* two classes on purpose: the card canvas sits in the flow and must beat
     the .screen canvas full-screen positioning rule */
  position: relative; inset: auto; display: block;
  width: clamp(140px, 13.5vw, 230px); height: clamp(210px, 20vw, 330px);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.32));
}
.pick-name {
  font-family: inherit; font-weight: 900; font-size: clamp(13px, 1.2vw, 19px);
  text-align: center; width: 88%; padding: .28em .5em; color: #3a2c1c;
  background: #fffdf5; border: 3px solid #241a12; border-radius: 9px;
}
.pick-identity { font-size: clamp(10px, .95vw, 15px); color: #6b5a42; text-align: center; }
.pick-controls { display: flex; gap: .4vw; align-items: center; }
.pick-gender { min-width: 7.5em; }
.pick-buttons { display: flex; gap: 1vw; flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------- save slots -- */
#screen-saves { flex-direction: column; }
.saves-wrap {
  position: relative; z-index: 2;
  width: min(1520px, 95vw); max-height: 94vh; overflow: auto;
  background: var(--cream); border: 8px solid #241a12; border-radius: 22px;
  padding: 2vh 2vw; box-shadow: 0 16px 0 rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; gap: 1.4vh;
}
.saves-wrap h2 {
  font-size: clamp(22px, 2.4vw, 42px); color: #1d5c3a;
  text-transform: uppercase; letter-spacing: .04em;
}
.saves-sub { font-size: clamp(11px, 1.05vw, 17px); color: #7d6b52; text-align: center; }
.saves-row { display: flex; gap: 1vw; justify-content: center; flex-wrap: wrap; width: 100%; }
.saves-card {
  width: clamp(200px, 17vw, 290px);
  background: #fff9e8; border: 5px solid #241a12; border-radius: 16px;
  padding: 1.1vh .8vw; display: flex; flex-direction: column; align-items: center; gap: .5vh;
  box-shadow: 0 8px 0 rgba(24,18,12,.35); text-align: center;
}
.saves-card.empty { background: #f2ece0; border-style: dashed; }
.saves-card.current { border-color: #4f8f31; box-shadow: 0 8px 0 rgba(24,18,12,.35), 0 0 0 4px rgba(143,211,95,.45); }
.slot-head { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: .4em; }
.slot-no {
  font-weight: 900; font-size: clamp(12px, 1.15vw, 18px); color: #fff8e8;
  background: linear-gradient(#8fd35f, #4f8f31); border: 3px solid #241a12;
  border-radius: 9px; padding: .05em .55em;
}
.slot-when { font-size: clamp(9px, .85vw, 14px); color: #7d6b52; }
.slot-tag {
  align-self: center; font-size: clamp(9px, .82vw, 13px); font-weight: 900; letter-spacing: .08em;
  color: #1d5c3a; background: #d7efc2; border: 2px solid #4f8f31; border-radius: 7px; padding: .1em .5em;
}
.saves-card .slot-face {
  /* stays in the flow - the .screen canvas rule must not stretch it */
  position: relative; inset: auto; display: block;
  width: clamp(58px, 5.4vw, 88px); height: clamp(58px, 5.4vw, 88px);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.35));
}
.slot-who { font-size: clamp(11px, 1vw, 16px); color: #3a2c1c; font-weight: 900; line-height: 1.3; }
.slot-who em { font-style: normal; color: #8a785c; font-weight: 700; }
.slot-meta { font-size: clamp(10px, .95vw, 15px); color: #1d5c3a; font-weight: 900; }
.slot-empty { font-size: clamp(12px, 1.1vw, 18px); color: #8a785c; font-weight: 900; letter-spacing: .12em; padding: 2vh 0; }
.slot-actions { display: flex; gap: .4vw; flex-wrap: wrap; justify-content: center; }
.slot-actions .chip { font-size: clamp(10px, .92vw, 15px); }
.chip.danger { background: linear-gradient(#f8a196, #d3564a); color: #fff6ee; }
.saves-buttons { display: flex; gap: 1vw; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- HUD --- */
.hud-top {
  position: absolute; top: 1.4vh; left: 50%; transform: translateX(-50%);
  background: linear-gradient(#2b6b52, #1b4634);
  border: 4px solid rgba(20,28,20,.9);
  border-radius: 14px; padding: .8vh 2.4vw; text-align: center; z-index: 4;
  box-shadow: 0 6px 0 rgba(12,18,10,.5);
  min-width: min(620px, 52vw);
}
.hud-top.slim { min-width: min(520px, 46vw); }
.hud-top h2 {
  color: #fdf6e2; font-size: clamp(17px, 1.9vw, 32px); letter-spacing: .05em;
}
.hud-top p { color: #cfe8c8; font-size: clamp(11px, 1.05vw, 17px); margin-top: .15em; }
.hud-right { position: absolute; top: 1.4vh; right: 1.4vw; display: flex; gap: .6vw; z-index: 4; flex-wrap: wrap; justify-content: flex-end; }
.chip {
  font-family: inherit; font-weight: 900; font-size: clamp(10px, .95vw, 15px);
  letter-spacing: .05em; background: linear-gradient(#fff7e0, #e2d5b4);
  border: 3px solid rgba(32,24,16,.8); border-radius: 9px;
  padding: .5em 1em; cursor: pointer; color: #3a2c1c;
  box-shadow: 0 4px 0 rgba(24,18,12,.45);
}
.chip:hover { filter: brightness(1.06); }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(24,18,12,.45); }

.player-card {
  position: absolute; top: 1.4vh; left: 1.4vw; z-index: 4;
  width: clamp(170px, 13vw, 250px);
  display: flex; flex-direction: column; align-items: center;
}
.pc-head { position: relative; }
#portrait-canvas {
  position: relative; width: clamp(96px, 8.4vw, 160px); height: clamp(96px, 8.4vw, 160px);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45));
}
.pc-badge {
  position: absolute; top: -6px; right: -14px;
  background: linear-gradient(#8fd35f, #4f8f31);
  color: #fff8e8; font-weight: 900; font-size: clamp(12px, 1.2vw, 20px);
  border: 3px solid #241a12; border-radius: 9px; padding: .1em .55em;
  box-shadow: 0 4px 0 rgba(20,30,12,.5);
}
.pc-money {
  margin-top: .5vh;
  background: #fdf8ea; border: 4px solid #241a12; border-radius: 12px;
  padding: .12em .8em; font-size: clamp(16px, 1.7vw, 30px); font-weight: 900; color: #1d5c3a;
  box-shadow: 0 5px 0 rgba(24,18,12,.4);
}
.pc-stats {
  margin-top: .6vh; width: 100%;
  background: rgba(20,26,16,.72); border: 3px solid rgba(240,225,180,.55); border-radius: 10px;
  padding: .5em .6em; color: #f4ecd6; font-size: clamp(9.5px, .92vw, 14px);
  line-height: 1.5; backdrop-filter: blur(2px);
}
.pc-stats b { color: #ffd76e; }
.pc-stats .bad { color: #ff9c8e; }
.pc-stats .good { color: #a6e88a; }

.clock-wheel {
  position: absolute; left: 50%; bottom: 9.5vh; transform: translateX(-50%);
  width: clamp(120px, 11vw, 190px); height: clamp(120px, 11vw, 190px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfe8a8, #74b94a 55%, #3f7a2c);
  border: 8px solid #2f5f22; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 4;
  box-shadow: 0 8px 0 rgba(20,30,12,.55), inset 0 6px 12px rgba(255,255,255,.35);
}
.clock-wheel span { font-size: clamp(26px, 3vw, 52px); font-weight: 900; color: #17300f; line-height: 1; }
.clock-wheel small { font-size: clamp(9px, .85vw, 13px); font-weight: 900; letter-spacing: .12em; color: #2c5520; }
.clock-wheel.low { background: radial-gradient(circle at 35% 30%, #ffd7a0, #e8843c 55%, #b3451c); border-color: #8a3312; }
.clock-wheel.low small { color: #6b2a10; }

.map-actions {
  position: absolute; left: 50%; bottom: 1.4vh; transform: translateX(-50%);
  display: flex; gap: .8vw; z-index: 4; align-items: flex-end; flex-wrap: wrap; justify-content: center;
}
.turn-flag {
  position: absolute; left: 1.4vw; top: 40vh; z-index: 4;
  background: #fdf8ea; border: 4px solid #241a12; border-radius: 10px;
  padding: .3em .8em; font-weight: 900; font-size: clamp(11px, 1.05vw, 17px);
  box-shadow: 0 5px 0 rgba(24,18,12,.4);
}
#btn-endturn { position: absolute; right: 1.4vw; bottom: 1.4vh; z-index: 5; }

/* ----------------------------------------------------------- interiors -- */
.interior-panel {
  position: absolute; left: 1.4vw; top: 15vh; width: clamp(236px, 23vw, 430px);
  background: linear-gradient(#fdf8ea, #efe4c8);
  border: 5px solid #241a12; border-radius: 18px;
  padding: .9vh .9vw; z-index: 5;
  box-shadow: 0 10px 0 rgba(20,16,10,.45);
  max-height: 74vh; overflow: auto;
}
.interior-panel h3 {
  background: linear-gradient(#ffd35c, #e0a413); border: 3px solid #241a12;
  border-radius: 10px; padding: .4em .6em; text-align: center;
  font-size: clamp(14px, 1.35vw, 22px); color: #3a2a08; text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: .5vh;
}
.interior-panel .note {
  font-size: clamp(10px, .95vw, 15px); color: #6b5a44; text-align: center; margin: .2em 0 .8vh;
  font-style: italic;
}
.interior-panel .grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6vh .6vw; }
.interior-panel .grid.one { grid-template-columns: 1fr; }
.act {
  font-family: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(#fffdf6, #eadfc0);
  border: 3px solid #241a12; border-radius: 10px; padding: .5em .7em;
  box-shadow: 0 4px 0 rgba(24,18,12,.35);
  transition: transform .08s ease;
}
.act:hover { filter: brightness(1.04); transform: translateY(-1px); }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(24,18,12,.35); }
.act:disabled { filter: grayscale(.7) brightness(.92); cursor: not-allowed; }
.act .lbl { display: block; font-weight: 900; font-size: clamp(11px, 1.05vw, 17px); color: #2c2118; letter-spacing: .02em; }
.act .sub { display: block; font-size: clamp(9.5px, .88vw, 14px); color: #6b5a44; margin-top: .12em; }
.act.good .lbl { color: #1d5c3a; }
.act.bad .lbl { color: #b3432a; }
.act.gold .lbl { color: #a8730c; }
.act.locked { opacity: .8; }

.money-flag, .clock-flag {
  position: absolute; bottom: 2vh; z-index: 5;
  background: #fdf8ea; border: 4px solid #241a12; border-radius: 10px;
  padding: .3em .9em; font-weight: 900;
  box-shadow: 0 5px 0 rgba(24,18,12,.4);
}
.money-flag { left: 1.6vw; color: #1d5c3a; font-size: clamp(16px, 1.8vw, 32px); }
.clock-flag { left: 50%; transform: translateX(-50%); color: #6b4a10; font-size: clamp(12px, 1.2vw, 20px); }
#btn-leave { position: absolute; right: 1.6vw; bottom: 2vh; min-width: clamp(150px, 14vw, 260px); z-index: 5; }

.overlay {
  position: absolute; inset: 0; display: none; z-index: 8;
  background: rgba(10,14,8,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.overlay.open { display: flex; }
.sheet {
  background: var(--cream); border: 6px solid #241a12; border-radius: 20px;
  width: min(1360px, 92vw); max-height: 88vh; overflow: auto;
  box-shadow: 0 16px 0 rgba(0,0,0,.45); padding: 1.4vh 1.4vw;
}
.sheet h2 {
  background: linear-gradient(#2b6b52, #1b4634); color: #fdf6e2;
  border: 4px solid #241a12; border-radius: 12px; text-align: center;
  padding: .45em .6em; font-size: clamp(16px, 1.7vw, 28px); letter-spacing: .04em;
  text-transform: uppercase;
}
.sheet h2 small { display: block; font-size: .5em; color: #cfe8c8; letter-spacing: .06em; margin-top: .3em; font-weight: 700; }
.tabs { display: flex; flex-wrap: wrap; gap: .4vw; margin: .9vh 0; }
.tab {
  font-family: inherit; font-weight: 900; cursor: pointer;
  font-size: clamp(10px, 1vw, 16px); letter-spacing: .03em;
  background: linear-gradient(#fffdf6, #e2d5b4); border: 3px solid #241a12;
  border-radius: 9px; padding: .45em .9em; box-shadow: 0 3px 0 rgba(24,18,12,.35);
}
.tab.on { background: linear-gradient(#ffd35c, #d99a15); color: #3a2a08; }
.job-row {
  display: flex; align-items: center; gap: .8vw;
  background: #fff9e8; border: 3px solid #241a12; border-radius: 12px;
  padding: .5em .8em; margin-bottom: .5vh;
}
.job-row .tier {
  width: 2.1em; height: 2.1em; flex: 0 0 auto; border-radius: 50%;
  background: #2b6b52; color: #fff; font-weight: 900; display: flex;
  align-items: center; justify-content: center; font-size: clamp(10px, 1vw, 16px);
  border: 3px solid #241a12;
}
.job-row .meta { flex: 1 1 auto; min-width: 0; }
.job-row .meta b { display: block; font-size: clamp(12px, 1.15vw, 19px); color: #2c2118; }
.job-row .meta span { font-size: clamp(9.5px, .88vw, 14px); color: #6b5a44; }
.job-row .pay { text-align: right; flex: 0 0 auto; }
.job-row .pay b { display: block; color: #1d5c3a; font-size: clamp(13px, 1.25vw, 21px); }
.job-row .pay span { font-size: clamp(9px, .85vw, 13px); color: #6b5a44; }
.badge {
  display: inline-block; border-radius: 8px; padding: .15em .55em; font-size: clamp(9px, .85vw, 13px);
  font-weight: 900; letter-spacing: .03em; border: 2px solid rgba(36,26,18,.7);
  background: #e2d5b4; color: #3a2c1c; margin-right: .35em;
}
.badge.edu { background: #cfe1ff; }
.badge.dress { background: #e6d3ff; }
.badge.time { background: #d8f0c8; }
.badge.warn { background: #ffd9d2; }
.sheet .foot { text-align: center; font-size: clamp(10px, .95vw, 16px); color: #6b5a44; margin-top: .8vh; font-style: italic; }
.sheet-close { display: flex; justify-content: center; margin-top: 1vh; }

/* ------------------------------------------------------------- casino --- */
#screen-casino { flex-direction: column; background: #150d24; }
#casino-canvas {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(1180px, 86vw); height: auto; border-radius: 18px;
  border: 6px solid #2b1b45; box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.casino-head {
  position: absolute; top: 1vh; left: 0; right: 0; text-align: center; z-index: 4;
  color: #ffe9a0;
}
.casino-head h2 { font-size: clamp(18px, 2vw, 34px); letter-spacing: .1em; text-shadow: 0 3px 0 #000; }
.casino-stats { font-size: clamp(11px, 1.1vw, 18px); color: #f7e08a; margin-top: .2em; }
.casino-controls {
  position: absolute; bottom: 8vh; left: 0; right: 0; z-index: 5;
  display: flex; gap: .8vw; justify-content: center; flex-wrap: wrap;
}
#btn-casino-leave { position: absolute; bottom: 1.4vh; left: 50%; transform: translateX(-50%); z-index: 6; min-width: 300px; }

/* ----------------------------------------------------------- game over -- */
#screen-over { background: radial-gradient(circle at 50% 30%, #2b2117, #0d0b08); }
.over-card {
  position: relative; z-index: 3; width: min(1000px, 92vw);
  background: var(--cream); border: 8px solid #241a12; border-radius: 22px;
  padding: 2.6vh 2.4vw; text-align: center; box-shadow: 0 18px 0 rgba(0,0,0,.5);
}
.over-card h2 { font-size: clamp(26px, 3.4vw, 56px); color: #1d5c3a; text-transform: uppercase; letter-spacing: .04em; }
.over-card h2.lose { color: #b3432a; }
.over-card p { margin-top: .6em; font-size: clamp(13px, 1.3vw, 21px); color: #4a3d2c; }
#over-stats { margin: 1.6vh auto; display: grid; gap: .5vh; max-width: 620px; }
#over-stats div {
  display: flex; justify-content: space-between; background: #fff9e8;
  border: 3px solid #241a12; border-radius: 10px; padding: .35em .8em;
  font-size: clamp(11px, 1.05vw, 17px); font-weight: 700;
}
#over-stats div span:last-child { color: #1d5c3a; }
.over-buttons { display: flex; gap: 1vw; justify-content: center; flex-wrap: wrap; margin-top: 1vh; }

/* ------------------------------------------------------------- toasts --- */
#toast-wrap {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: .6vh; align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(22,28,18,.94); color: #fdf6e2; border: 3px solid #241a12;
  border-left: 7px solid #8fd35f; border-radius: 10px;
  padding: .5em 1.1em; font-weight: 900; font-size: clamp(12px, 1.15vw, 19px);
  box-shadow: 0 6px 0 rgba(0,0,0,.4); animation: pop .28s ease;
  max-width: 80vw; text-align: center;
}
.toast.bad { border-left-color: #e8483c; color: #ffd9d2; }
.toast.good { border-left-color: #8fd35f; }
.toast.warn { border-left-color: #e8b84b; color: #ffeec2; }
.toast.gold { border-left-color: #ffd76e; color: #ffe9a0; }
@keyframes pop { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- misc ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 820px) {
  .interior-panel { width: min(420px, 62vw); }
  .btn { min-width: 190px; }
}