:root {
      --bg: #686446;
      --panel: #f7f4e8;
      --ink: #211f19;
      --muted: #6f6a58;
      --line: #d7cfb5;
      --accent: #3f6f68;
      --accent-strong: #284c48;
      --profit: #1b8f5a;
      --loss: #bc3b3b;
      --gold: #c18a2c;
      --blue-soft: #e2eadf;
      --green-soft: #e4efdf;
      --shadow: 0 18px 42px rgba(23, 22, 15, 0.22);
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Roboto", Arial, Helvetica, sans-serif;
      color: var(--ink);
      background: var(--bg);
    }

    button,
    input,
    select,
    textarea {
      font-family: inherit;
    }

    .save-toast {
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 80;
      min-width: min(420px, calc(100vw - 36px));
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: #f7f4e8;
      background: #35393d;
      box-shadow: 0 18px 42px rgba(8, 18, 30, 0.32);
      font-weight: 800;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -120%);
    }

    .save-toast.is-success {
      border-color: rgba(27, 143, 90, 0.45);
      background: #284c48;
    }

    .save-toast.is-error {
      border-color: rgba(188, 59, 59, 0.55);
      background: #7c2e2e;
    }

    .save-toast.is-visible {
      animation: saveToastLifecycle 2.55s ease-in-out forwards;
    }

    @keyframes saveToastLifecycle {
      0% {
        opacity: 0;
        transform: translate(-50%, -120%);
      }

      10% {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      88% {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, 36px);
      }
    }

    .game {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(260px, 370px) minmax(380px, 1fr) minmax(260px, 320px);
      gap: 18px;
      padding: 18px;
    }

    .panel,
    .office-stage {
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .panel {
      border-radius: 8px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .section {
      border-bottom: 1px solid var(--line);
      padding-bottom: 16px;
    }

    .section:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    h2 {
      margin: 0 0 12px;
      font-size: 0.92rem;
      letter-spacing: 0;
      color: var(--accent-strong);
      text-transform: uppercase;
    }

    .metric {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      gap: 12px;
      padding: 10px 0;
      border-top: 1px solid #edf1f4;
    }

    .metric:first-of-type {
      border-top: 0;
    }

    .label {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.25;
    }

    .label-with-action {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .owner-finances {
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafb;
    }

    .owner-finances .metric {
      padding: 8px 0;
    }

    .inject-button {
      width: 100%;
      margin-top: 8px;
    }

    .icon-button {
      position: relative;
      width: 28px;
      height: 28px;
      border: 1px solid #b9c9d4;
      border-radius: 6px;
      padding: 0;
      background: var(--blue-soft);
      color: var(--accent-strong);
      cursor: pointer;
    }

    .icon-button:hover {
      background: #c8e2f3;
    }

    .window-glyph {
      position: absolute;
      inset: 6px;
      border: 2px solid currentColor;
      border-radius: 2px;
    }

    .window-glyph::before,
    .window-glyph::after {
      content: "";
      position: absolute;
      background: currentColor;
    }

    .window-glyph::before {
      left: 0;
      right: 0;
      top: 4px;
      height: 2px;
    }

    .window-glyph::after {
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
    }

    .value {
      position: relative;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .profit {
      color: var(--profit);
    }

    .loss {
      color: var(--loss);
    }

    .break-even-burst {
      animation: breakEvenPulse 640ms ease-out;
      text-shadow: 0 0 18px rgba(27, 143, 90, 0.65);
    }

    .profit-particle {
      position: fixed;
      z-index: 1000;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      pointer-events: none;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 12px currentColor;
      animation: profitParticleBurst 980ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes breakEvenPulse {
      0% {
        transform: scale(1);
      }

      38% {
        transform: scale(1.22);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes profitParticleBurst {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
      }

      70% {
        opacity: 1;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
      }

      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .profit-particle {
        animation: none;
        display: none;
      }

      .break-even-burst {
        animation: none;
      }
    }

    .office-stage {
      border-radius: 8px;
      overflow: hidden;
      min-height: calc(100vh - 36px);
      display: grid;
      grid-template-rows: minmax(340px, 1fr) auto;
    }

    .office-art {
      position: relative;
      min-height: 420px;
      background: #636152;
      box-shadow: inset -1px 2px 200px 0px #000;
      overflow: hidden;
    }

    .office-logo {
      position: absolute;
      top: 35px;
      left: 35px;
      z-index: 10;
    }

    .time-band {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 2;
      width: 100%;
      height: auto;
      opacity: 0.38;
      pointer-events: none;
      transform: translate(100%, -50%);
      animation: timeBandSweep 5s ease-in-out infinite;
    }

    .office-art > img:not(.office-logo):not(.time-band) {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 5;
      width: min(100%, 691px);
      max-height: min(100%, 528px);
      aspect-ratio: 691 / 528;
      transform: translate(-50%, -50%);
      object-fit: contain;
    }

    .office-art > img.office-zoom-in:not(.office-logo) {
      animation: officeZoomSquash 620ms cubic-bezier(0.19, 1, 0.22, 1);
    }

    .office-art > img:not(.office-logo):not(.time-band).is-missing {
      display: none;
    }

    @keyframes timeBandSweep {
      0% {
        transform: translate(100%, -50%);
      }

      100% {
        transform: translate(-100%, -50%);
      }
    }

    @keyframes officeZoomSquash {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
      }

      54% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08, 0.94);
      }

      78% {
        transform: translate(-50%, -50%) scale(0.98, 1.03);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .office-art > img.office-zoom-in:not(.office-logo) {
        animation: none;
      }
    }

    .company-hud {
      position: relative;
      display: grid;
      gap: 2px;
      padding: 20px;
      background: #35393d;
      border-top: 1px solid var(--line);
    }

    .company-eyebrow {
      color: #d7cfb5;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .company-name {
      width: 100%;
      border: 0;
      border-bottom: 2px solid var(--accent);
      padding: 0 2px 8px;
      font-size: clamp(1.8rem, 4vw, 3.2rem);
      font-weight: 800;
      color: #f7f4e8;
      outline: none;
      letter-spacing: 0;
      background: transparent;
    }

    .time-row {
      margin-top: 8px;
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 14px;
      color: #d7cfb5;
      font-weight: 700;
    }

    #monthCounter {
      position: relative;
      z-index: 4;
      display: inline-block;
      transform-origin: left center;
    }

    #monthCounter.month-zoom-out {
      animation: monthZoomOut 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes monthZoomOut {
      0% {
        opacity: 1;
        text-shadow: none;
        transform: scale(1);
      }

      30% {
        opacity: 1;
        text-shadow:
          0 0 16px rgba(255, 255, 255, 1),
          0 0 42px rgba(255, 255, 255, 0.95),
          0 0 86px rgba(255, 225, 125, 0.9),
          0 0 140px rgba(255, 225, 125, 0.65),
          0 0 220px rgba(255, 225, 125, 0.45);
        transform: scale(5);
      }

      100% {
        opacity: 1;
        text-shadow: none;
        transform: scale(1);
      }
    }

    .progress-shell {
      position: relative;
      z-index: 1;
      height: 18px;
      border-radius: 999px;
      background: #dbe4ea;
      border: 1px solid #c7d3dd;
      overflow: hidden;
    }

    .progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--gold));
      transition: width 0.35s ease;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    button {
      border: 0;
      border-radius: 6px;
      padding: 10px 14px;
      color: #fff;
      background: var(--accent);
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background: var(--accent-strong);
    }

    .secondary {
      color: var(--accent-strong);
      background: var(--blue-soft);
    }

    .secondary:hover {
      background: #c8e2f3;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 54px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--profit);
      font-weight: 800;
    }

    .capacity-bar {
      height: 10px;
      margin-top: 8px;
      border-radius: 999px;
      background: #e5ebef;
      overflow: hidden;
    }

    .capacity-fill {
      height: 100%;
      width: var(--fill);
      background: var(--gold);
      border-radius: inherit;
    }

    .market-acceptance {
      position: relative;
      padding: 8px 0 10px;
      border-top: 1px solid #edf1f4;
    }

    .acceptance-track {
      position: relative;
      height: 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, #bc3b3b 0%, #d49825 50%, #1b8f5a 100%);
      border: 1px solid #c8d2db;
    }

    .acceptance-marker {
      position: absolute;
      top: 50%;
      left: var(--acceptance, 100%);
      width: 18px;
      height: 18px;
      border: 3px solid #fff;
      border-radius: 999px;
      background: var(--ink);
      box-shadow: 0 3px 8px rgba(23, 32, 42, 0.24);
      transform: translate(-50%, -50%);
    }

    .acceptance-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .acceptance-particles {
      position: absolute;
      left: 0;
      right: 0;
      top: 28px;
      height: 72px;
      overflow: visible;
      pointer-events: none;
      z-index: 4;
    }

    .acceptance-emoji {
      position: absolute;
      bottom: 8px;
      left: var(--x, 50%);
      font-size: 1.18rem;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
      transform: translate(-50%, 0) scale(0.72);
      animation: acceptanceEmojiRise 1.35s ease-out forwards;
    }

    @keyframes acceptanceEmojiRise {
      0% {
        opacity: 0;
        transform: translate(-50%, 14px) scale(0.45) rotate(-8deg);
      }

      18% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift, 0px)), -58px) scale(1.1) rotate(8deg);
      }
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(23, 32, 42, 0.46);
    }

    .modal-overlay.is-open {
      display: flex;
    }

    .modal-overlay.is-open .modal {
      animation: modalDropIn 520ms cubic-bezier(0.2, 0.9, 0.2, 1.12);
      transform-origin: top center;
    }

    .modal {
      position: relative;
      width: min(440px, 100%);
      border-radius: 8px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 24px 70px rgba(8, 18, 30, 0.28);
      overflow: hidden;
    }

    .modal-overlay.decision-flash::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events: none;
      background: #fff;
      animation: decisionFlash 180ms ease-out forwards;
    }

    @keyframes decisionFlash {
      0% {
        opacity: 0;
      }

      18%,
      38% {
        opacity: 0.7;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes modalDropIn {
      0% {
        opacity: 0;
        transform: translateY(-140px) scaleY(0.92) scaleX(1.03);
      }

      62% {
        opacity: 1;
        transform: translateY(14px) scaleY(1.04) scaleX(0.98);
      }

      82% {
        transform: translateY(-5px) scaleY(0.99) scaleX(1.01);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .modal-overlay.is-open .modal {
        animation: none;
      }

      .modal-overlay.decision-flash::after {
        animation: none;
        display: none;
      }
    }

    .modal-header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
    }

    .modal-title {
      margin: 0;
      color: var(--accent-strong);
      font-size: 1.05rem;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .modal-close {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      padding: 0;
      color: var(--accent-strong);
      background: var(--blue-soft);
      font-size: 1.25rem;
      line-height: 1;
    }

    .cost-list {
      display: grid;
      gap: 4px;
      padding: 14px 18px 18px;
    }

    .result-list {
      display: grid;
      gap: 4px;
      padding: 14px 18px 18px;
    }

    .cost-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid #edf1f4;
    }

    .cost-row.total {
      margin-top: 6px;
      border-bottom: 0;
      border-top: 2px solid var(--line);
      color: var(--ink);
      font-weight: 800;
    }

    .market-result-zoom {
      transform-origin: center;
      animation: marketResultZoomOut 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes marketResultZoomOut {
      0% {
        opacity: 0;
        transform: scale(3);
      }

      35% {
        opacity: 1;
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .decision-form {
      display: grid;
      gap: 14px;
      padding: 16px 18px 18px;
    }

    .decision-field {
      display: grid;
      gap: 7px;
    }

    .decision-field label {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .decision-field input,
    .decision-field select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px 11px;
      color: var(--ink);
      background: #fff;
      font: inherit;
    }

    .decision-field input.input-error {
      border-color: var(--loss);
      color: #fff;
      background: var(--loss);
    }

    .decision-field input.input-error:focus {
      outline: 2px solid rgba(188, 59, 59, 0.34);
      outline-offset: 2px;
    }

    .decision-summary {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--green-soft);
    }

    .decision-summary span {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .decision-summary strong {
      color: var(--profit);
      white-space: nowrap;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 6px;
    }

    .danger-link {
      border: 0;
      border-radius: 6px;
      padding: 10px 14px;
      color: #fff;
      background: var(--loss);
      font-weight: 700;
      text-decoration: none;
    }

    .danger-link:hover {
      background: #932f2f;
    }

    .play-button {
      display: none;
      position: relative;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      padding: 0;
    }

    .play-button::before {
      content: "";
      position: absolute;
      left: 14px;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 12px solid #fff;
    }

    .decision-section-title {
      margin: 4px 0 0;
      color: var(--accent-strong);
      font-size: 0.95rem;
      text-transform: uppercase;
    }

    .staff-decision {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .staff-decision.staff-hire-flash {
      animation: staffHireFlash 1.4s ease-out forwards;
    }

    .staff-decision.staff-fire-flash {
      animation: staffFireFlash 1.4s ease-out forwards;
    }

    @keyframes staffHireFlash {
      0% {
        background: #7edc92;
        box-shadow: 0 0 0 rgba(27, 143, 90, 0);
      }

      18% {
        background: #7edc92;
        box-shadow: 0 0 24px rgba(27, 143, 90, 0.35);
      }

      100% {
        background: #fff;
        box-shadow: 0 0 0 rgba(27, 143, 90, 0);
      }
    }

    @keyframes staffFireFlash {
      0% {
        background: #e97878;
        box-shadow: 0 0 0 rgba(188, 59, 59, 0);
      }

      18% {
        background: #e97878;
        box-shadow: 0 0 24px rgba(188, 59, 59, 0.34);
      }

      100% {
        background: #fff;
        box-shadow: 0 0 0 rgba(188, 59, 59, 0);
      }
    }

    .staff-name {
      display: block;
      color: var(--muted);
      font-weight: 700;
      font-size: 0.9rem;
    }

    .staff-count {
      display: block;
      margin-top: 4px;
      font-size: 1.35rem;
      font-weight: 800;
    }

    .staff-actions {
      display: flex;
      gap: 8px;
    }

    .staff-actions button {
      padding: 9px 10px;
    }

    .decision-alert {
      min-height: 20px;
      margin: 0;
      color: var(--loss);
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .research-button {
      width: 100%;
      margin-top: 12px;
    }

    .panel-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: auto;
    }

    .panel-action-link {
      border-radius: 6px;
      padding: 11px 12px;
      color: #fff;
      background: var(--accent);
      font-weight: 800;
      text-align: center;
      text-decoration: none;
      transition: background 0.18s ease, transform 0.18s ease;
    }

    .panel-action-link:hover {
      background: var(--accent-strong);
      transform: translateY(-1px);
    }

    .modal-copy {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.35;
    }

    .bankruptcy-copy {
      color: var(--loss);
      font-weight: 800;
    }

    .office-button {
      width: 100%;
      margin-top: 14px;
    }

    .logout-button {
      display: block;
      width: 100%;
      margin-top: auto;
      border-radius: 6px;
      padding: 12px 16px;
      color: #fff;
      background: var(--loss);
      font-weight: 800;
      text-align: center;
      text-decoration: none;
      transition: transform 0.18s ease, filter 0.18s ease;
    }

    .logout-button:hover {
      filter: brightness(0.92);
      transform: translateY(-1px);
    }

    .office-selector {
      display: grid;
      gap: 12px;
      padding: 16px 18px 18px;
    }

    .office-carousel {
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      gap: 10px;
    }

    .carousel-button {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      padding: 0;
      font-size: 1.8rem;
      line-height: 1;
    }

    .carousel-button:disabled {
      cursor: not-allowed;
      opacity: 0.38;
    }

    .instructions-modal {
      width: min(560px, 100%);
    }

    .instructions-carousel {
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      gap: 12px;
      padding: 18px;
    }

    .instructions-slides {
      min-height: 180px;
      display: grid;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
      background: #f8fafb;
    }

    .instruction-slide {
      display: none;
    }

    .instruction-slide.is-active {
      display: grid;
      gap: 10px;
    }

    .instruction-slide h3 {
      margin: 0;
      color: var(--accent-strong);
      font-size: 1.2rem;
      letter-spacing: 0;
    }

    .instruction-slide p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .instructions-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 18px 18px;
    }

    .instructions-counter {
      color: var(--muted);
      font-weight: 800;
    }

    .office-image {
      position: relative;
      min-height: 180px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #2f3336;
    }

    .office-image img {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #2f3336;
    }

    .office-image img.is-missing {
      display: none;
    }

    .office-image::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 24px;
      width: 46%;
      height: 58%;
      transform: translateX(-50%);
      border: 5px solid #31485a;
      background:
        repeating-linear-gradient(90deg, transparent 0 24%, rgba(49, 72, 90, 0.22) 24% 26%),
        repeating-linear-gradient(0deg, transparent 0 28%, rgba(49, 72, 90, 0.16) 28% 30%),
        linear-gradient(140deg, #fbfdff, #c6dce8);
      box-shadow: 0 14px 30px rgba(20, 35, 50, 0.22);
    }

    .office-image::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 28px;
      background: #56636d;
    }

    .office-selector input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
    }

    .office-warning {
      min-height: 20px;
      margin: 0;
      color: var(--loss);
      font-size: 0.88rem;
      font-weight: 700;
    }

    @media (max-width: 960px) {
      .game {
        grid-template-columns: 1fr;
      }

      .office-stage {
        min-height: auto;
      }

      .office-art {
        min-height: 360px;
      }

      .instructions-carousel {
        grid-template-columns: 36px 1fr 36px;
        gap: 8px;
        padding: 14px;
      }

      .instructions-slides {
        min-height: 220px;
        padding: 16px;
      }
    }