html,
      body {
          height: calc(var(--vh, 1vh) * 100);
          margin: 0;
          padding: 0;
          overflow: hidden;
      }

      body {
          background: url('images/background.jpg') no-repeat center center fixed;
          background-size: cover;
          color: #333;
          zoom: 1.15;
      }

      h1 {
          font-size: 3em;
          line-height: 1em;
          margin: 0 auto;
          font-family: "Amarante", sans-serif;
      }

      #wrapper {
          font-family: "Gill Sans", sans-serif;
          padding: 1em;
          width: fit-content;
          height: 100%;
          margin: auto;
          background: rgba(255, 255, 255, .9);
      }

      #user {
          display: flex;
          margin: 0 0 .25em 0;
          line-height: 1em;
          align-items: flex-end;
          font-family: "Amarante", sans-serif;
      }

      #user div {
          margin-right: .25em;
          display: flex;
          flex-direction: column;
      }

      #user div.horizontal {
          padding: 0;
          flex-direction: row;
          margin-left: auto;
      }

      #user input,
      #user button {
          font-size: 1.5em;
          line-height: 1.25em;
      }

      #user input {
          width: 3.25em;
          border: none;
          background: transparent;
          box-shadow: none;
          outline: none;
          padding: 0;
      }

      #user button {
          font-family: "Amarante", sans-serif;
          margin: 0 0 0 .25em;
          padding: .25em;
          cursor: pointer;
          border-radius: .25em;
          border: 4px solid #eaeaea;
      }

      #user label {
          font-size: 1em;
      }

      #board-container {
          position: relative;
          display: inline-block;
      }

      #board {
          caption-side: top;
          --cell-size: min(125px, 18vw, 18vh);
          table-layout: fixed;
          width: calc(var(--cell-size) * 5);
      }

      #feedback-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          pointer-events: none;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          padding: 1em;
          z-index: 10;
      }

      #feedback-overlay p {
          background: rgba(180, 218, 247, 0.95);
          border: 1px solid #000;
          border-radius: 0.5em;
          padding: 1em 1.5em;
          margin: 0.25em 0;
          font-size: 1.25em;
          font-family: "Amarante", sans-serif;
          text-align: center;
          animation: fadeCaption ease 5s;
          animation-fill-mode: forwards;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      #feedback-overlay p.pinned {
          animation: none;
          opacity: 1;
      }

      #feedback-overlay p.good {
          background: rgba(183, 247, 180, 0.95);
      }

      #feedback-overlay p.bad {
          background: rgba(247, 180, 180, 0.95);
      }

      #feedback-overlay p.item {
          background: rgba(180, 218, 247, 0.95);
      }

      #feedback-overlay p.loading {
          background: rgba(255, 248, 186, 0.95);
      }

      #board td p.cell-feedback {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: calc(100% - 1rem);
          box-sizing: border-box;
          background: rgba(180, 218, 247, 0.95);
          border: 1px solid #000;
          border-radius: 0.5em;
          padding: 0.45em 0.55em;
          margin: 0;
          font-size: 0.58em;
          line-height: 1.2;
          text-align: center;
          color: #111;
          pointer-events: none;
          z-index: 2;
          animation: fadeCellCaption ease 1.9s forwards;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
      }

      #board td p.cell-feedback.good {
          background: rgba(183, 247, 180, 0.95);
      }

      #board td p.cell-feedback.bad {
          background: rgba(247, 180, 180, 0.95);
      }

      #board td p.cell-feedback.bought {
          background: rgba(220, 220, 220, 0.95);
      }

      #board td p.cell-feedback.item {
          background: rgba(220, 220, 220, 0.95);
      }

      #board.win {
          box-shadow: 0 0 50px 15px #eed00b;
          animation: fadeWin ease 5s;
          animation-fill-mode: forwards;
      }

      @keyframes fadeWin {
          0% {
              background: #eed00b;
              box-shadow: 0 0 50px 15px #eed00b;
          }

          100% {
              background: none;
              box-shadow: none;
          }
      }


      @keyframes fadeCaption {
          0% {
              opacity: 1;
          }

          100% {
              opacity: 0;
          }
      }

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

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

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

      @keyframes flashInsufficientBorder {
          0% {
              border-color: rgba(0, 0, 0, 0.15);
              box-shadow: none;
          }

          35% {
              border-color: #c62828;
              box-shadow: 0 0 14px 3px rgba(198, 40, 40, 0.45);
          }

          100% {
              border-color: rgba(0, 0, 0, 0.15);
              box-shadow: none;
          }
      }

      #board td {
          vertical-align: top;
          border-width: 10px;
          border-style: solid;
          border-color: rgba(0, 0, 0, 0.15);
          width: var(--cell-size);
          height: var(--cell-size);
          text-align: center;
          font-size: 1.5em;
          cursor: pointer;
          box-sizing: border-box;
          overflow: hidden;
          transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          position: relative;
          color: white;
      }

      #board td span.purchase {
          font-size: .6em;
          color: #333;
          display: none;
          background: rgba(255, 255, 255, 0.85);
          padding: 0.15em 0.3em;
          margin: 0;
          border-radius: 0.25em 0.25em 0 0;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          z-index: 1;
      }

      #board td.owned span.purchase {
          display: inline-block;
      }

      #board td span.current {
          font-size: 0.9em;
          color: #333;
          font-weight: bold;
          padding: 0.15em 0.3em;
          margin: 0.1em;
          border-radius: 0 0 0.25em 0.25em;
          white-space: nowrap;
          display: inline-block;
      }

      #board td.new span.current,
      #board td.rising span.current,
      #board td.falling span.current {
          background: rgba(255, 255, 255, 0.85);
      }

      #board td.rising span.current::after {
          content: " \25B2";
          color: #1f8f36;
          font-size: 0.9em;
          font-weight: 900;
          line-height: 1;
      }

      #board td.falling span.current::after {
          content: " \25BC";
          color: #c62828;
          font-size: 0.9em;
          font-weight: 900;
          line-height: 1;
      }

      #board td.new {
          background-color: #f1f3f5;
      }

      #board td.falling {
          background-color: #fde8e8;
      }

      #board td.rising {
          background-color: #e8f8ea;
      }

      #board td.owned {
          background-color: #e7f1ff;
          border-color: rgba(0, 0, 0, 0.75);
      }

      #board td.owned.new:not(.profit),
      #board td.owned.rising:not(.profit),
      #board td.owned.falling:not(.profit) {
          border-color: #9fd8a5;
      }

      #board td.profit {
          border-color: #d4af37;
          box-shadow: 0 0 22px 5px rgba(212, 175, 55, 0.55);
      }

      #board td.insufficient {
          animation: flashInsufficientBorder 0.7s ease;
      }

      /* Fading house image layer */
      #board td .house-img {
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          opacity: 0;
          transition: opacity .6s ease;
          pointer-events: none;
          z-index: 0;
      }
      #board td .house-img.visible { opacity: 1; }
      /* Ensure price spans render above image */
      #board td span { position: relative; z-index: 1; }