/* ===== 8-bit / early-90s sim vibe ===== */

:root {
  --bg: #1a1c2c;
  --panel: #29366f;
  --panel-dark: #1f2a52;
  --border: #94b0c2;
  --text: #f4f4f4;
  --accent: #ffcd75;
  --green: #38b764;
  --red: #b13e53;
  --blue: #41a6f6;
  --sky: #3b5dc9;
  --dirt: #566c86;
}

/* The UI itself climbs the ladder: each tier re-themes the panels,
 * borders, and accents. Hard cuts, no fades — it lands with the fanfare. */
body[data-tier='0'] { --panel: #333c57; --panel-dark: #232838; --border: #566c86; --accent: #94b0c2; }
/* tier 1 (HUSTLER) is the base :root theme */
body[data-tier='2'] { --panel: #3a4e8f; --panel-dark: #232f5c; --border: #94b0c2; --accent: #ffcd75; }
body[data-tier='3'] { --panel: #257179; --panel-dark: #143d42; --border: #73eff7; --accent: #ffcd75; }
body[data-tier='4'] { --panel: #1e6647; --panel-dark: #12402c; --border: #38b764; --accent: #ffcd75; }
body[data-tier='5'] { --panel: #3b5dc9; --panel-dark: #29366f; --border: #94b0c2; --accent: #73eff7; }
body[data-tier='6'] { --panel: #5d275d; --panel-dark: #38173a; --border: #ef7d57; --accent: #ffcd75; }
body[data-tier='7'] { --panel: #7a2c3f; --panel-dark: #4a1b28; --border: #ef7d57; --accent: #ffcd75; }
body[data-tier='8'] { --panel: #8a3162; --panel-dark: #451831; --border: #73eff7; --accent: #ef7d57; } /* Miami Vice */
body[data-tier='9'] { --panel: #1a1c2c; --panel-dark: #000000; --border: #ffcd75; --accent: #ffcd75; } /* gold on black */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  touch-action: manipulation; /* no double-tap zoom on rapid SLEEP taps */
  background: var(--bg);
  color: var(--text);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.7;
  image-rendering: pixelated;
}

#crt {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

/* subtle scanlines over everything */
#crt::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
}

h1 {
  font-size: 20px;
  color: var(--accent);
  text-shadow: 3px 3px 0 #000;
}

#header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

#day-counter {
  font-size: 16px;
  color: var(--blue);
  text-shadow: 2px 2px 0 #000;
  cursor: pointer;
}

#day-counter:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

h2 {
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 10px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
}

/* ===== Scene (placeholder for future graphics) ===== */

#scene {
  position: relative;
  height: 140px;
  border: 4px solid var(--border);
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  margin-bottom: 16px;
}

#sky {
  position: absolute;
  inset: 0 0 28px 0;
  background: var(--sky);
}

#ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background-color: var(--ground-c, var(--dirt));
  background-image: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, 0.3) 0 6px, transparent 6px 32px);
  border-top: 4px solid var(--ground-top, #333c57);
  animation: ground-scroll 0.7s steps(8) infinite;
}

@keyframes ground-scroll {
  to { background-position-x: -32px; }
}

/* Parallax skyline: two building layers sliding at different speeds */
#skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 52px;
  overflow: hidden;
}

#skyline::before,
#skyline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 96px);
}

#skyline::before {
  top: var(--far-top, 12px);
  background: repeating-linear-gradient(90deg,
    var(--far-c, rgba(26, 28, 44, 0.75)) 0 26px, transparent 26px 44px,
    var(--far-c, rgba(26, 28, 44, 0.75)) 44px 64px, transparent 64px 96px);
  animation: skyline-far 60s linear infinite;
}

#skyline::after {
  top: var(--near-top, 26px);
  background: repeating-linear-gradient(90deg,
    var(--near-c, rgba(51, 60, 87, 0.9)) 0 18px, transparent 18px 54px);
  animation: skyline-near 27s linear infinite;
}

@keyframes skyline-far  { to { transform: translateX(-96px); } }
@keyframes skyline-near { to { transform: translateX(-54px); } }

#sun {
  position: absolute;
  top: 6px;
  left: 74%;
  width: 14px;
  height: 14px;
  background: #ffcd75;
  box-shadow: 0 0 0 4px rgba(255, 205, 117, 0.25);
}

/* Pixel clouds drifting by at their own pace */
.cloud {
  position: absolute;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 #f4f4f4, 8px 0 #f4f4f4, 16px 0 #f4f4f4,
              4px -8px #f4f4f4, 12px -8px #f4f4f4;
  opacity: 0.65;
}

#cloud1 { top: 34px; animation: drift 44s linear infinite; }
#cloud2 { top: 16px; animation: drift 67s linear infinite; animation-delay: -33s; }

@keyframes drift {
  from { left: 104%; }
  to   { left: -6%; }
}

#player {
  position: absolute;
  bottom: 26px;
  left: 6%;
  z-index: 2;
  width: 60px;   /* 20x30 sprite canvas at 3x */
  height: 90px;
  image-rendering: pixelated;
  transition: left 0.8s steps(10); /* chunky 8-bit stride between renders */
  animation: walk-bob 0.64s steps(2) infinite;
}

@keyframes walk-bob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

/* ===== Per-tier environments =====
 * Sky brightens, buildings grow from alley shacks to gold towers,
 * and the ground climbs from dirt to marble as the tiers rise. */

/* BROKE: dark alley, barely a skyline, dirt underfoot */
#scene[data-tier='0'] { --far-c: rgba(0, 0, 0, 0); --near-top: 36px; --near-c: rgba(26, 28, 44, 0.9);
                        --ground-c: #3c3a49; --ground-top: #1a1c2c; }
#scene[data-tier='0'] #sky { background: #333c57; }

/* HUSTLER / CLIMBER: low streets */
#scene[data-tier='1'] { --far-top: 30px; --near-top: 32px; }
#scene[data-tier='1'] #sky { background: #29366f; }
#scene[data-tier='2'] { --far-top: 26px; --near-top: 28px; }
#scene[data-tier='2'] #sky { background: #2c3f80; }

/* DRIFTER / SAVER: midtown fills in */
#scene[data-tier='3'] { --far-top: 16px; --near-top: 22px; }
#scene[data-tier='3'] #sky { background: #3b5dc9; }
#scene[data-tier='4'] { --far-top: 12px; --near-top: 18px; }
#scene[data-tier='4'] #sky { background: #3b5dc9; }

/* INVESTOR / MAGNATE: downtown towers, paved streets */
#scene[data-tier='5'] { --far-top: 6px; --near-top: 14px; --far-c: rgba(41, 54, 111, 0.8);
                        --ground-c: #333c57; --ground-top: #1a1c2c; }
#scene[data-tier='5'] #sky { background: #41a6f6; }
#scene[data-tier='6'] { --far-top: 2px; --near-top: 10px; --far-c: rgba(41, 54, 111, 0.8);
                        --ground-c: #333c57; --ground-top: #1a1c2c; }
#scene[data-tier='6'] #sky { background: #41a6f6; }

/* MOGUL / TYCOON: glass district, marble walk */
#scene[data-tier='7'] { --far-top: 0px; --near-top: 6px; --far-c: rgba(59, 93, 201, 0.55);
                        --near-c: rgba(86, 108, 134, 0.9); --ground-c: #94b0c2; --ground-top: #566c86; }
#scene[data-tier='7'] #sky { background: #73eff7; }
#scene[data-tier='8'] { --far-top: 0px; --near-top: 4px; --far-c: rgba(148, 176, 194, 0.5);
                        --near-c: rgba(86, 108, 134, 0.9); --ground-c: #94b0c2; --ground-top: #566c86; }
#scene[data-tier='8'] #sky { background: #73eff7; }

/* RIFT LEGEND: the golden city */
#scene[data-tier='9'] { --far-top: 0px; --near-top: 2px; --far-c: rgba(255, 205, 117, 0.45);
                        --near-c: rgba(239, 125, 87, 0.75); --ground-c: #94b0c2; --ground-top: #ffcd75; }
#scene[data-tier='9'] #sky { background: #73eff7; }
#scene[data-tier='9'] #player { filter: drop-shadow(0 0 6px #ffcd75); }

#tier-label {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  color: var(--text);
  text-shadow: 2px 2px 0 #000;
}

/* ===== Day/night: sunrise on sleep, strobing time-lapse on FF ===== */

#daycycle {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

#daycycle.timelapse {
  animation: night-strobe 0.3s steps(2) infinite;
}

@keyframes night-strobe {
  0%   { background: #1a1c2c; opacity: 0.5; }
  50%  { opacity: 0; }
  100% { background: #1a1c2c; opacity: 0.5; }
}

/* The world blurs past during a fast-forward */
#scene.warp #ground            { animation-duration: 0.1s; }
#scene.warp #skyline::before   { animation-duration: 5s; }
#scene.warp #skyline::after    { animation-duration: 2s; }
#scene.warp .cloud             { animation-duration: 6s; }

/* Tier-change moment: screen flash over the scene + outfit-swap blink */

#flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

#flash.flash-up {
  background: #f4f4f4;
  animation: screen-flash 0.5s steps(2) 2;
}

#flash.flash-down {
  background: #b13e53;
  animation: screen-flash 0.6s steps(2) 1;
}

@keyframes screen-flash {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}

#player.outfit-swap {
  animation: walk-bob 0.6s steps(2) infinite,
             outfit-blink 0.8s steps(1) both;
}

@keyframes outfit-blink {
  0%, 20%, 40%, 60%, 80%       { filter: brightness(3); }
  10%, 30%, 50%, 70%, 90%, 100% { filter: none; }
}

/* ===== Panels ===== */

#dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.panel {
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow: 4px 4px 0 #000;
  padding: 12px;
}

/* ===== Stats ===== */

#stats-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

#stats-panel td {
  padding: 4px 0;
}

#stats-panel td.money {
  text-align: right;
  color: var(--green);
}

#stats-panel td.money.loss {
  color: var(--red);
}

.hidden {
  display: none !important;
}

#modal-text h3 {
  font-size: 10px;
  color: var(--accent);
  margin: 10px 0 6px;
}

#modal-text h3:first-child {
  margin-top: 0;
}

#modal-text ul {
  list-style: none;
  font-size: 9px;
  line-height: 2;
}

#modal-text li {
  margin-bottom: 4px;
}

#modal-text table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
  margin-bottom: 8px;
}

#modal-text th {
  text-align: left;
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  padding: 4px 6px 4px 0;
}

#modal-text td {
  padding: 4px 6px 4px 0;
  border-bottom: 1px solid var(--panel-dark);
}

#modal-text td.money,
#modal-text th:nth-child(n+3) {
  text-align: right;
}

#modal-text td.money {
  color: var(--green);
}

#modal-text .fine {
  font-size: 8px;
  color: var(--border);
  line-height: 2;
}

.shop-desc {
  display: block;
  font-size: 8px;
  color: var(--border);
  margin-top: 6px;
}

button:hover:not(:disabled) .shop-desc {
  color: #000;
}

/* ===== Achievement badges ===== */

#badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.badge-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: #000;
  border: 2px solid var(--bc);
  color: var(--bc);
  box-shadow: 2px 2px 0 #000;
  cursor: default;
}

.badge-icon.new {
  animation: badge-pop 0.6s steps(4);
}

@keyframes badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.5); filter: brightness(2); }
  100% { transform: scale(1); }
}

/* ===== Sparkline ===== */

#spark-wrap {
  margin-top: 12px;
}

#spark-title {
  font-size: 8px;
  color: var(--border);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

#spark-readout {
  color: var(--text);
}

#sparkline {
  width: 100%;
  height: 64px;
  display: block;
  background: #000;
  border: 3px solid var(--border);
  image-rendering: pixelated;
}

/* ===== License cards ===== */

#licenses-panel {
  margin-bottom: 16px;
}

#license-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.license-card {
  position: relative;
  background: var(--panel-dark);
  border: 3px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-x {
  position: absolute;
  top: 6px;
  right: 6px;
  flex: 0 0 auto;
  font-size: 8px;
  padding: 4px 7px;
  background: var(--red);
  border-color: var(--red);
  box-shadow: 2px 2px 0 #000;
}

.license-card h3 {
  font-size: 11px;
  color: var(--accent);
}

.lic-rate {
  font-size: 8px;
  color: var(--border);
}

.lic-status {
  font-size: 8px;
  padding: 4px 6px;
  border: 2px solid;
  text-align: center;
}

.lic-status.off     { color: var(--dirt);  border-color: var(--dirt); }
.lic-status.on      { color: var(--green); border-color: var(--green); }
.lic-status.expired { color: var(--red);   border-color: var(--red); animation: blink 1s steps(1) infinite; }

@keyframes blink {
  50% { opacity: 0.3; }
}

.license-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.license-card td { padding: 2px 0; }
.license-card td.money { text-align: right; color: var(--green); }

.card-row {
  display: flex;
  gap: 6px;
}

.card-row input {
  width: 105px;
  padding: 8px 6px;
  font-size: 9px;
}

.license-card button {
  font-size: 9px;
  padding: 8px 6px;
}

@media (max-width: 640px) {
  #license-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Modal ===== */

body.modal-open {
  overflow: hidden; /* no background scrolling behind a modal */
}

/* ===== Tooltip (8-bit take on the native title bubble) ===== */

#tooltip {
  white-space: pre-line; /* tips can line-break with \n */
  position: fixed;
  z-index: 200;
  max-width: 280px;
  padding: 6px 8px;
  background: #000;
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  font-size: 8px;
  line-height: 1.8;
  pointer-events: none;
}

#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-box {
  background: var(--panel);
  border: 4px solid var(--accent);
  box-shadow: 6px 6px 0 #000;
  padding: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh; /* the longer How to Play scrolls inside the box */
  overflow-y: auto;
}

#modal-text {
  font-size: 10px;
  line-height: 2;
  margin-bottom: 16px;
}

#modal-buttons {
  display: flex;
  gap: 10px;
}

#modal-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

#modal-input-row.hidden {
  display: none;
}

#modal-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

#modal-date-row.hidden {
  display: none;
}

#modal-date-row span {
  font-size: 9px;
  color: var(--accent);
}

/* ===== 8-bit date picker (month / day / year spinners) ===== */

.dp-store {
  display: none; /* the bound hidden input holding YYYY-MM-DD */
}

.dp {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.dp-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dp-btn {
  flex: 0 0 auto;
  font-size: 9px;
  padding: 6px 7px;
}

.dp-val {
  font-size: 9px;
  color: var(--green);
  background: #000;
  border: 2px solid var(--border);
  padding: 7px 6px;
  min-width: 44px;
  text-align: center;
}

.modal-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.modal-field span {
  font-size: 9px;
  color: var(--accent);
  flex: 0 0 auto;
}

.modal-field input,
.modal-field select {
  flex: 1;
  width: auto;
}

input[type='range'] {
  accent-color: var(--green);
  height: 18px;
}

/* Volume widget under the SND button */
#snd-wrap {
  position: relative;
}

#snd-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 150;
  width: 180px;
  padding: 12px;
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 #000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#snd-pop.hidden {
  display: none;
}

.snd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  color: var(--text);
}

.snd-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.modal-field input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.modal-field.hidden {
  display: none;
}

#modal-auto {
  margin-bottom: 16px;
}

#modal-input-label {
  font-size: 9px;
  color: var(--accent);
}

#modal-input {
  flex: 1;
  width: auto;
}

#modal-random {
  flex: 0 0 auto;
  font-size: 9px;
}

#modal-ok {
  background: var(--green);
  color: #000;
  border-color: var(--text);
}

#stats-panel tr.sep td {
  border-bottom: 2px dashed var(--border);
  padding: 4px 0;
}

#gear {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  font-size: 9px;
  padding: 4px 8px;
  border: 2px solid var(--green);
  color: var(--green);
}

.badge.off {
  border-color: var(--dirt);
  color: var(--dirt);
}

/* ===== Actions ===== */

.action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

button {
  font-family: inherit;
  font-size: 10px;
  padding: 10px 12px;
  background: var(--panel-dark);
  color: var(--text);
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  flex: 1;
}

button:hover:not(:disabled) {
  background: var(--blue);
  color: #000;
}

button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

button.big {
  font-size: 12px;
  padding: 14px;
  background: var(--green);
  color: #000;
  border-color: var(--text);
}

/* Shortcut-letter highlight on buttons: [D]EPOSIT, [R]EINVEST, [U]NDO */
u.key {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

button.big u.key,
button:hover:not(:disabled) u.key {
  color: inherit;
}

.btn-sub {
  display: block;
  font-size: 8px;
  margin-top: 5px;
  opacity: 0.75;
}

button.big:hover:not(:disabled) {
  background: var(--accent);
}

.cheat-glow {
  animation: cheat-glow 0.32s steps(2) 4;
}

@keyframes cheat-glow {
  50% { background: var(--accent); color: #000; }
}

#btn-next-day.deposit-day {
  background: var(--accent); /* gold: tomorrow lands an auto-deposit */
}

#btn-next-day.deposit-day:hover:not(:disabled) {
  background: var(--green);
}

button.ff {
  font-size: 9px;
  padding: 8px 4px;
}

button.danger {
  background: var(--red);
  border-color: var(--red);
}

button.small {
  font-size: 8px;
  padding: 6px 8px;
  flex: 0 0 auto;
}

#auto-row.pinged {
  animation: auto-ping 0.5s steps(2) 2;
}

@keyframes auto-ping {
  50% { filter: brightness(2.4); }
}

.row-label {
  font-size: 8px;
  color: var(--border);
  margin: 2px 0 6px;
  line-height: 2;
}

select {
  font-family: inherit;
  font-size: 9px;
  padding: 6px;
  background: #000;
  color: var(--green);
  border: 3px solid var(--border);
  flex: 1;
}

input[type='number'],
input[type='text'] {
  font-family: inherit;
  font-size: 10px;
  line-height: 2; /* Press Start 2P glyphs clip at the default line height */
  padding: 6px 10px;
  width: 150px;
  background: #000;
  color: var(--green);
  border: 3px solid var(--border);
}

/* ===== Log ===== */

#log-panel {
  margin-bottom: 16px;
}

#log {
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  font-size: 9px;
}

#log li {
  padding: 3px 0;
  border-bottom: 1px solid var(--panel-dark);
}

#log li .log-day {
  color: var(--blue);
  margin-right: 8px;
}

#log li.good { color: var(--green); }
#log li.bad  { color: var(--red); }

@media (max-width: 640px) {
  #dashboard {
    grid-template-columns: 1fr;
  }
}