/* =============================================================
   MARKET GAME — STYLES
   Section 1 (theme variables) is all you need for most restyling.
   Everything is scoped under .mg-root so it won't leak into or
   inherit much from the host page.
   ============================================================= */

/* ---------- 1. THEME ---------- */
.mg-root {
  /* Type */
  --mg-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mg-font-heading: var(--mg-font);
  --mg-font-numbers: var(--mg-font);

  /* Colors */
  --mg-text: #1d2329;
  --mg-text-muted: #5d6670;
  --mg-panel-bg: #ecdfcce0;
  --mg-panel-border: rgba(29, 35, 41, 0.10);
  --mg-rule: rgba(29, 35, 41, 0.12);
  --mg-accent: #89B940;
  --mg-accent-hover: #698e31;
  --mg-accent-text: #ffffff;
  --mg-toggle-bg: #eceff2;
  --mg-toggle-active-bg: #1d2329;
  --mg-toggle-active-text: #ffffff;
  --mg-positive: #1b7a48;
  --mg-negative: #b3372a;
  --mg-overlay: rgba(12, 16, 20, 0.55);

  /* Dialog variant accents */
  --mg-offer: var(--mg-accent);
  --mg-denied: #b3372a;
  --mg-review: #a86b12;
  --mg-approved: #1b7a48;

  /* Shape */
  --mg-radius: 0px;
  --mg-radius-sm: 0px;
  --mg-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);

  /* Frame size */
  --mg-aspect: 16 / 9;          /* desktop */
  --mg-aspect-narrow: 4 / 5;    /* narrow containers / phones */
  --mg-min-height-narrow: 580px;
  --mg-max-width: 100%;         /* e.g. 1200px to cap the game's width */

  /* Fallback colors shown if a background image is missing */
  --mg-bg-start-fallback: #6f8798;
  --mg-bg-game-fallback: #8a7f6b;
  --mg-bg-end-fallback: #4a5870;
}

/* ---------- 2. FRAME ---------- */
.mg-root {
  container-type: inline-size;
  container-name: mg;
  width: 100%;
  max-width: var(--mg-max-width);
  margin-inline: auto;
}
.mg-root *, .mg-root *::before, .mg-root *::after { box-sizing: border-box; }

.mg-game {
  position: relative;
  width: 100%;
  aspect-ratio: var(--mg-aspect);
  overflow: hidden;
  border-radius: var(--mg-radius);
  font-family: var(--mg-font);
  font-size: clamp(14px, 0.6rem + 0.55cqi, 18px);
  line-height: 1.5;
  color: var(--mg-text);
  background: #222;
}

.mg-screen {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mg-screen[hidden] { display: none; }
.mg-screen--start { background-color: var(--mg-bg-start-fallback); }
.mg-screen--game  { background-color: var(--mg-bg-game-fallback); }
.mg-screen--end   { background-color: var(--mg-bg-end-fallback); }

/* ---------- 3. SHARED PIECES ---------- */
.mg-card {
  background: var(--mg-panel-bg);
  border: 1px solid var(--mg-panel-border);
  border-radius: var(--mg-radius);
  box-shadow: var(--mg-shadow);
  padding: 1.5em 1.6em;
}

.mg-title {
  font-family: var(--mg-font-heading);
  font-size: 1.6em;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.45em;
}

.mg-text > * { margin: 0 0 0.8em; }
.mg-text > *:last-child { margin-bottom: 0; }

.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--mg-accent);
  color: var(--mg-accent-text);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.mg-btn:hover { background: var(--mg-accent-hover); }
.mg-btn[hidden] { display: none; }
.mg-btn:disabled { opacity: 0.55; cursor: default; }
.mg-btn--block { width: 100%; }
.mg-btn--ghost {
  background: transparent;
  color: var(--mg-text);
  box-shadow: inset 0 0 0 2px var(--mg-rule);
}
.mg-btn--ghost:hover { background: var(--mg-toggle-bg); }

.mg-root :focus-visible {
  outline: 3px solid var(--mg-accent);
  outline-offset: 2px;
}

.mg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 4. START SCREEN ---------- */
.mg-character {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 86%;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  pointer-events: none;
}

.mg-card--start {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: min(26em, 40%);
}
.mg-card--start .mg-text { color: var(--mg-text-muted); margin-bottom: 1.2em; }

/* ---------- 5. BUDGET SHEET ---------- */
.mg-budget {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 3%;
  width: min(27em, 44%);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.mg-budget__head {
  padding: 1.1em 1.5em 0.8em;
  border-bottom: 1px solid var(--mg-rule);
}

.mg-shopname {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.mg-shopname__input {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 -0.25em;
  padding: 0.1em 0.25em;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--mg-text);
  font-family: var(--mg-font-heading);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.2;
}
.mg-shopname__input:hover:not([readonly]),
.mg-shopname__input:focus { border-color: var(--mg-rule); outline: none; }
.mg-shopname__input:focus-visible { border-color: var(--mg-accent); border-style: solid; }
.mg-shopname__hint { color: var(--mg-text-muted); font-size: 0.9em; }
.mg-shopname__input[readonly] + .mg-shopname__hint { display: none; }

.mg-budget__month {
  margin: 0.15em 0 0;
  color: var(--mg-text-muted);
  font-size: 0.9em;
}

.mg-budget__body {
  flex: 1;
  overflow-y: auto;
  padding: 1em 1.5em;
  outline: none;
}

.mg-budget__total {
  margin: 0 0 0.6em;
  font-size: 1.1em;
}

.mg-lines { list-style: none; margin: 0; padding: 0; }

.mg-line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label amount" "control control";
  align-items: baseline;
  column-gap: 1em;
  padding: 0.45em 0;
  border-bottom: 1px solid var(--mg-rule);
}
.mg-line__label  { grid-area: label; }
.mg-line__amount {
  grid-area: amount;
  text-align: right;
  font-family: var(--mg-font-numbers);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mg-line__control { grid-area: control; margin-top: 0.3em; }

.mg-was { color: var(--mg-text-muted); margin-right: 0.35em; }
.mg-now { font-weight: 650; }

.mg-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--mg-toggle-bg);
}
.mg-toggle__btn {
  min-height: 32px;
  padding: 0.25em 0.95em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mg-text-muted);
  font: inherit;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}
.mg-toggle__btn[aria-pressed="true"] {
  background: var(--mg-toggle-active-bg);
  color: var(--mg-toggle-active-text);
}
.mg-toggle__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mg-summary { margin-top: 0.8em; }
.mg-summary[hidden] { display: none; }
.mg-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 0.2em 0;
  font-variant-numeric: tabular-nums;
}
.mg-summary__row--total { font-weight: 650; }
.mg-summary__row.is-negative { color: var(--mg-negative); font-weight: 650; }
.mg-summary__row.is-positive { color: var(--mg-positive); font-weight: 650; }

.mg-budget__foot {
  padding: 0.8em 1.5em 1em;
  border-top: 1px solid var(--mg-rule);
}

/* ---------- 6. DIALOGS ---------- */
.mg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4%;
  background: var(--mg-overlay);
  animation: mg-fade 180ms ease-out;
}
.mg-overlay[hidden] { display: none; }

.mg-dialog {
  width: min(30em, 100%);
  max-height: 100%;
  overflow-y: auto;
  border-top: 6px solid var(--mg-offer);
}
.mg-dialog[data-variant="denied"]   { border-top-color: var(--mg-denied); }
.mg-dialog[data-variant="review"]   { border-top-color: var(--mg-review); }
.mg-dialog[data-variant="approved"] { border-top-color: var(--mg-approved); }
.mg-dialog[data-variant="denied"]   .mg-title { color: var(--mg-denied); }
.mg-dialog[data-variant="review"]   .mg-title { color: var(--mg-review); }
.mg-dialog[data-variant="approved"] .mg-title { color: var(--mg-approved); }
.mg-dialog .mg-title { font-size: 1.3em; }

.mg-dialog__action { margin-top: 1.3em; text-align: center; }

.mg-check {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.5em 1.1em 0.5em 0.9em;
  border: 2px solid var(--mg-rule);
  border-radius: var(--mg-radius-sm);
  font-weight: 650;
  cursor: pointer;
}
.mg-check:hover { border-color: var(--mg-accent); }
.mg-check input {
  width: 1.3em;
  height: 1.3em;
  margin: 0;
  accent-color: var(--mg-accent);
  cursor: pointer;
}
.mg-check:has(input:checked) { border-color: var(--mg-accent); }

/* ---------- 7. END SCREEN ---------- */
.mg-card--end {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: min(32em, 52%);
  max-height: 88%;
  overflow-y: auto;
}
.mg-end__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 1.3em;
}

/* Placeholder if the character image fails to load */
.mg-character-missing {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22%;
  height: 70%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  color: #fff;
  font-size: 0.85em;
  text-align: center;
}
.mg-character-missing[hidden] { display: none; }

/* ---------- 8. NARROW CONTAINERS (phones, small embeds) ---------- */
@container mg (max-width: 640px) {
  .mg-game {
    aspect-ratio: var(--mg-aspect-narrow);
    min-height: var(--mg-min-height-narrow);
  }
  .mg-character { top: 3%; bottom: auto; height: 55%; max-width: 80%; }
  .mg-character-missing { top: 3%; bottom: auto; height: 50%; width: 40%; }
  .mg-card--start,
  .mg-card--end {
    left: 4%;
    right: 4%;
    bottom: 4%;
    width: auto;
  }
  .mg-card--end { max-height: 92%; }
  .mg-card { padding: 1.2em 1.25em; }
  .mg-budget { left: 3%; right: 3%; width: auto; top: 3%; bottom: 3%; }
  .mg-budget__head, .mg-budget__body, .mg-budget__foot { padding-left: 1.2em; padding-right: 1.2em; }
}

@keyframes mg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mg-overlay { animation: none; }
}

/* Center the Start, Continue and Learn more buttons */
.mg-card--start .mg-btn,
.mg-dialog__action .mg-btn {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}
.mg-end__actions { justify-content: center; }

/* Apply checkbox: red outline, no fill */
.mg-root { --mg-check-color: #c62828; }

.mg-check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 1.3em;
  height: 1.3em;
  border: 2px solid var(--mg-check-color);
  border-radius: 4px;
  background: transparent;
}

/* Tick mark, shown only when checked */
.mg-check input::before {
  content: "";
  width: 0.35em;
  height: 0.65em;
  border: solid var(--mg-check-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-0.08em);
  opacity: 0;
}
.mg-check input:checked::before { opacity: 1; }

/* Center titles and text on the start, dialog and end cards */
.mg-card--start,
.mg-dialog,
.mg-card--end {
  text-align: center;
}

 /* ---------- 9. CUSTOMIZATIONS ---------- */
 
    /* Center the Start, Continue and Learn more buttons */
    .mg-card--start .mg-btn,
    .mg-dialog__action .mg-btn {
      display: flex;
      width: fit-content;
      margin-inline: auto;
    }
    .mg-end__actions { justify-content: center; }
 
    /* Center titles and text on the start, dialog and end cards */
    .mg-card--start,
    .mg-dialog,
    .mg-card--end {
      text-align: center;
    }
 
    /* Apply checkbox: red outline, no fill */
    .mg-root { --mg-check-color: #c62828; }
 
    .mg-check input {
      appearance: none;
      -webkit-appearance: none;
      display: grid;
      place-content: center;
      width: 1.3em;
      height: 1.3em;
      border: 2px solid var(--mg-check-color);
      border-radius: 4px;
      background: transparent;
    }
 
    /* Tick mark, shown only when checked */
    .mg-check input::before {
      content: "";
      width: 0.35em;
      height: 0.65em;
      border: solid var(--mg-check-color);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg) translateY(-0.08em);
      opacity: 0;
    }
    .mg-check input:checked::before { opacity: 1; }
 
    /* Fill the whole window (or iframe) instead of a fixed aspect ratio.
       Delete this block to go back to a 16:9 box. */
    html, body { height: 100%; }
    .mg-root {
      height: 100vh;
      height: 100dvh;
      max-width: none;
    }
    .mg-root .mg-game {
      height: 100%;
      aspect-ratio: auto;
      min-height: 0;
      border-radius: 0;
    }
    .mg-card--start {
      max-height: 88%;
      overflow-y: auto;
    }