:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #1e1e24;
  --paper: #f7eedc;
  --paper-deep: #ead4ad;
  --token: #ffc857;
  --monitor: #6de3ff;
  --bug: #e45757;
  --upgrade: #54c06a;
  --panel: #fff8ea;
  --shadow: rgba(30, 30, 36, 0.34);
  --active-item-bg: #e6ffdf;
  --panel-glow: rgba(186, 241, 166, 0.32);
  background: var(--ink);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(109, 227, 255, 0.18), transparent 36%),
    var(--ink);
}

button {
  min-height: 44px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow);
}

button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

button:focus-visible {
  outline: 4px solid var(--monitor);
  outline-offset: 2px;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100vw, 480px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
}

#sceneLayer {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #9fc6d0;
}

#sceneLayer::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(30, 30, 36, 0.13) 0 0.8px, transparent 1px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
}

#resourceHud {
  position: absolute;
  z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: 1.25fr 0.72fr 0.8fr 0.72fr;
  gap: 8px;
}

.resource {
  padding: 7px 8px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.92);
  box-shadow: 4px 4px 0 var(--shadow);
}

.resource-tokens {
  background: var(--token);
}

.resource-money {
  background: #baf1a6;
}

.resource span {
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  opacity: 0.68;
}

.resource strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1;
}

#roomFrame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #182027;
}

#roomFrame::before {
  display: none;
}

#roomImage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#monitorGlow {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 50%;
  top: 42%;
  width: 34%;
  height: 18%;
  transform: translate(-5%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 227, 255, 0.38), transparent 70%);
  mix-blend-mode: screen;
  animation: monitorPulse 1.8s ease-in-out infinite;
}

#roomDecor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.decor {
  position: absolute;
  display: none;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(30, 30, 36, 0.32);
}

.has-poster .decor-poster {
  display: block;
  top: 26%;
  left: 44%;
  width: 11%;
  aspect-ratio: 0.72;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 35%, #ffc857 0 18%, transparent 19%),
    linear-gradient(145deg, #6de3ff, #d76cff 58%, #1e1e24 60%);
  transform: rotate(-3deg);
}

.has-plant .decor-plant {
  display: block;
  left: 14%;
  bottom: 28%;
  width: 11%;
  aspect-ratio: 0.72;
  border: 0;
  box-shadow: none;
  background:
    radial-gradient(ellipse at 40% 14%, #4fd36b 0 18%, transparent 19%),
    radial-gradient(ellipse at 65% 25%, #36aa55 0 16%, transparent 17%),
    radial-gradient(ellipse at 34% 39%, #67df78 0 16%, transparent 17%),
    linear-gradient(#2a8f46, #2a8f46) 50% 34% / 10% 42% no-repeat,
    linear-gradient(#a66539, #7b422b);
  border-bottom: 3px solid var(--ink);
}

.has-lamp .decor-lamp {
  display: block;
  right: 19%;
  top: 38%;
  width: 14%;
  height: 9%;
  border-radius: 999px;
  border-color: rgba(30, 30, 36, 0.7);
  background: radial-gradient(circle, rgba(255, 200, 87, 0.95), rgba(255, 200, 87, 0.08) 62%, transparent 70%);
  mix-blend-mode: screen;
  box-shadow: 0 0 26px rgba(255, 200, 87, 0.72);
}

.has-rug .decor-rug {
  display: block;
  left: 23%;
  bottom: 10%;
  width: 46%;
  height: 8%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(30, 30, 36, 0.18) 0 4px, transparent 4px 11px),
    #6de3ff;
  opacity: 0.82;
}

.coder-avatar {
  position: absolute;
  z-index: 3;
  left: 43%;
  top: 50%;
  width: 22%;
  height: 24%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(5px 7px 0 rgba(30, 30, 36, 0.28));
}

.coder-shadow {
  position: absolute;
  left: 18%;
  right: 6%;
  bottom: 0;
  height: 10%;
  border-radius: 50%;
  background: rgba(30, 30, 36, 0.32);
}

.coder-seat {
  position: absolute;
  left: 24%;
  bottom: 15%;
  width: 48%;
  height: 22%;
  border: 3px solid var(--ink);
  border-radius: 28% 28% 20% 20%;
  background: #222b32;
}

.coder-seat::after {
  position: absolute;
  left: 48%;
  top: 82%;
  width: 9%;
  height: 58%;
  content: "";
  background: var(--ink);
}

.coder-body {
  position: absolute;
  inset: 0;
}

.coder-torso {
  position: absolute;
  left: 33%;
  top: 35%;
  width: 37%;
  height: 38%;
  border: 3px solid var(--ink);
  border-radius: 35% 42% 25% 22%;
  background: #1c8bc3;
  transform: rotate(-8deg);
}

.skin-black .coder-torso,
.skin-black .coder-arm {
  background: #252532;
}

.skin-neon .coder-torso,
.skin-neon .coder-arm {
  background: #d75cff;
}

.skin-green .coder-torso,
.skin-green .coder-arm {
  background: #43b66a;
}

.coder-neck {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 10%;
  height: 9%;
  border: 2px solid var(--ink);
  background: #d99363;
  transform: rotate(-6deg);
}

.coder-head {
  position: absolute;
  left: 45%;
  top: 14%;
  width: 29%;
  height: 24%;
  border: 3px solid var(--ink);
  border-radius: 46% 52% 46% 48%;
  background: #df9f69;
  transform: rotate(-8deg);
}

.coder-hair {
  position: absolute;
  border-radius: 50%;
  background: #15151b;
}

.hair-a {
  left: -9%;
  top: -19%;
  width: 88%;
  height: 42%;
  transform: rotate(-8deg);
}

.hair-b {
  right: -8%;
  top: -8%;
  width: 56%;
  height: 40%;
}

.coder-ear {
  position: absolute;
  left: -12%;
  top: 45%;
  width: 18%;
  height: 22%;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #d99363;
}

.coder-eye {
  position: absolute;
  right: 24%;
  top: 39%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
}

.coder-mouth {
  position: absolute;
  right: 15%;
  bottom: 28%;
  width: 18%;
  height: 8%;
  border-bottom: 2px solid var(--ink);
  border-radius: 50%;
}

.coder-arm {
  position: absolute;
  top: 48%;
  width: 48%;
  height: 11%;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #1c8bc3;
  transform-origin: 14% 50%;
}

.coder-arm i {
  position: absolute;
  right: -12%;
  top: 24%;
  width: 20%;
  height: 76%;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #df9f69;
}

.coder-arm-left {
  left: 55%;
  top: 47%;
  transform: rotate(-4deg);
}

.coder-arm-right {
  left: 54%;
  top: 56%;
  transform: rotate(8deg);
}

.coder-leg {
  position: absolute;
  bottom: 13%;
  width: 16%;
  height: 28%;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #243852;
}

.coder-leg-left {
  left: 35%;
  transform: rotate(6deg);
}

.coder-leg-right {
  left: 55%;
  transform: rotate(-20deg);
}

#roomFx {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.fx-code-line,
.fx-chip,
.fx-stamp {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fx-code-line {
  right: 14%;
  width: 26%;
  height: 8px;
  border: 2px solid rgba(30, 30, 36, 0.86);
  border-radius: 999px;
  background: var(--monitor);
  box-shadow: 3px 3px 0 rgba(30, 30, 36, 0.3);
}

.fx-code-1 {
  top: 44%;
}

.fx-code-2 {
  top: 48%;
  width: 18%;
  background: var(--token);
}

.fx-code-3 {
  top: 52%;
  width: 23%;
  background: var(--upgrade);
}

.fx-chip {
  padding: 6px 9px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 4px 4px 0 var(--shadow);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.fx-token-1 {
  top: 36%;
  left: 12%;
  background: var(--token);
}

.fx-token-2 {
  top: 31%;
  right: 18%;
  background: var(--monitor);
}

.fx-bug-1 {
  top: 36%;
  left: 16%;
  background: #ff9f9f;
}

.fx-bug-2 {
  top: 47%;
  right: 16%;
  background: var(--upgrade);
}

.fx-like-1 {
  top: 34%;
  left: 14%;
  background: #ff8fc7;
}

.fx-like-2 {
  top: 27%;
  right: 12%;
  background: var(--token);
}

.fx-upgrade {
  left: 50%;
  bottom: 22%;
  background: var(--upgrade);
}

.fx-stamp {
  left: 50%;
  top: 42%;
  padding: 10px 14px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--token);
  box-shadow: 6px 6px 0 var(--shadow);
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
}

#roomOverlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

#projectCard {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.92);
  box-shadow: 5px 5px 0 var(--shadow);
}

#projectCard span,
#projectCard small {
  display: block;
  font-size: 11px;
  font-weight: 850;
  opacity: 0.62;
}

#projectCard strong {
  display: block;
  margin: 2px 0 3px;
  font-size: 17px;
  line-height: 1.05;
}

#controlLayer {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  padding: 9px 10px max(9px, env(safe-area-inset-bottom));
  border-top: 4px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 22%),
    var(--paper-deep);
  overflow: hidden;
}

#progressPanel {
  display: grid;
  grid-template-columns: 1fr 0.76fr;
  gap: 8px;
  margin-bottom: 7px;
}

.meter {
  padding: 6px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 950;
}

.bar {
  height: 8px;
  margin-top: 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #d7c29d;
  overflow: hidden;
}

.bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--monitor);
}

#energyBar {
  background: var(--upgrade);
}

#actions {
  display: grid;
  grid-template-columns: minmax(74px, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 6px;
}

#actions button,
#tabs button {
  min-width: 0;
  padding-inline: 5px;
}

.primary-action {
  background: var(--token);
  font-size: 17px;
}

#actions button:not(.primary-action) {
  font-size: 11px;
}

#tabs {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(46px, 0.58fr) minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 6px;
  margin-top: 8px;
}

.tab {
  min-height: 39px;
  font-size: 13px;
  background: #f1dfbd;
}

.tab.active {
  background: var(--monitor);
  box-shadow:
    2px 2px 0 var(--shadow),
    inset 0 -5px 0 rgba(30, 30, 36, 0.14);
}

.shop-tab {
  background: #baf1a6;
  font-size: 19px;
}

#panelContent {
  position: absolute;
  inset: 43px 10px 10px;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  padding: 0 3px 3px 0;
  scrollbar-width: thin;
}

.card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 9px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--shadow);
}

.card h3 {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.1;
}

.card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.72;
}

.card .price {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 950;
  color: #8a5a00;
}

.card button {
  min-width: 76px;
  min-height: 42px;
  background: var(--upgrade);
  font-size: 12px;
}

.shop-card {
  grid-template-columns: 54px 1fr auto;
}

.shop-preview {
  width: 44px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-deep);
  box-shadow: 3px 3px 0 var(--shadow);
}

.preview-poster {
  background:
    radial-gradient(circle at 50% 35%, #ffc857 0 19%, transparent 20%),
    linear-gradient(145deg, #6de3ff, #d75cff 58%, #1e1e24 60%);
}

.preview-plant {
  background:
    radial-gradient(ellipse at 35% 18%, #4fd36b 0 18%, transparent 19%),
    radial-gradient(ellipse at 65% 28%, #36aa55 0 17%, transparent 18%),
    linear-gradient(#a66539 58%, #7b422b 59%);
}

.preview-lamp {
  background: radial-gradient(circle, #ffc857, rgba(255, 200, 87, 0.2) 62%, #1e1e24 64%);
}

.preview-rug {
  background:
    repeating-linear-gradient(90deg, rgba(30, 30, 36, 0.24) 0 4px, transparent 4px 10px),
    #6de3ff;
}

.preview-cursor {
  background:
    linear-gradient(90deg, transparent 0 38%, var(--token) 38% 52%, transparent 52%),
    #1c2030;
}

.preview-error {
  background:
    repeating-linear-gradient(180deg, #ff9b9b 0 7px, #fff8ea 7px 13px);
}

.preview-ai {
  background:
    radial-gradient(circle at 70% 26%, var(--monitor) 0 18%, transparent 19%),
    linear-gradient(145deg, #fff8ea, #6de3ff);
}

.preview-deploy {
  background:
    radial-gradient(circle at 50% 50%, var(--token) 0 28%, transparent 29%),
    #1c2030;
}

.preview-black {
  background: #252532;
}

.preview-neon {
  background: #d75cff;
}

.preview-green {
  background: #43b66a;
}

.preview-hardware {
  background:
    linear-gradient(90deg, transparent 0 18%, #1e1e24 18% 27%, transparent 27% 34%, #1e1e24 34% 43%, transparent 43%),
    linear-gradient(180deg, #6de3ff 0 48%, #ffc857 49%);
}

.preview-software {
  background:
    linear-gradient(90deg, rgba(30, 30, 36, 0.28) 0 14%, transparent 14%),
    repeating-linear-gradient(180deg, #6de3ff 0 6px, #fff8ea 6px 12px);
}

.shop-card.active-item {
  background: var(--active-item-bg);
}

.log-entry {
  margin-bottom: 7px;
  padding: 8px 9px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.8);
  font-size: 12px;
  line-height: 1.25;
}

.pop {
  animation: pop 260ms ease-out;
}

#app.fx-code .fx-code-line {
  animation: codeBurst 780ms ease-out both;
}

#app.fx-code .coder-avatar {
  animation: typeBody 520ms steps(2, end) 2;
}

#app.fx-code .coder-arm-left {
  animation: typeLeft 140ms steps(2, end) infinite;
}

#app.fx-code .coder-arm-right {
  animation: typeRight 130ms steps(2, end) infinite;
}

#app.fx-code .fx-code-2 {
  animation-delay: 80ms;
}

#app.fx-code .fx-code-3 {
  animation-delay: 150ms;
}

#app.fx-ai #monitorGlow {
  animation: aiGlow 760ms ease-out both;
}

#app.fx-ai .fx-token-1,
#app.fx-ai .fx-token-2 {
  animation: chipFly 900ms ease-out both;
}

#app.fx-ai .fx-token-2 {
  animation-delay: 110ms;
}

#app.fx-fix .fx-bug-1,
#app.fx-fix .fx-bug-2 {
  animation: chipSquash 820ms ease-out both;
}

#app.fx-fix .fx-bug-2 {
  animation-delay: 90ms;
}

#app.fx-post .fx-like-1,
#app.fx-post .fx-like-2 {
  animation: likeFloat 980ms ease-out both;
}

#app.fx-post .fx-like-2 {
  animation-delay: 130ms;
}

#app.fx-deploy .fx-stamp {
  animation: stampIn 940ms cubic-bezier(0.15, 1.15, 0.28, 1) both;
}

#app.fx-upgrade .fx-upgrade {
  animation: upgradePop 820ms ease-out both;
}

#app.fx-shop .fx-upgrade {
  animation: upgradePop 820ms ease-out both;
}

#app.fx-deny #roomFrame {
  animation: denyShake 320ms ease-in-out;
}

@keyframes monitorPulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.9;
  }
}

@keyframes pop {
  0% {
    transform: scale(0.96);
  }

  65% {
    transform: scale(1.04);
  }

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

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

  50% {
    transform: translate(-50%, -50%) rotate(-1.5deg);
  }
}

@keyframes typeLeft {
  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    transform: rotate(-12deg) translateY(6px);
  }
}

@keyframes typeRight {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }

  50% {
    transform: rotate(17deg) translateY(5px);
  }
}

@keyframes codeBurst {
  0% {
    opacity: 0;
    transform: translateX(26px) scaleX(0.45);
  }

  26% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-8px) scaleX(1.05);
  }
}

@keyframes aiGlow {
  0% {
    opacity: 0.35;
    transform: translate(-5%, -50%) scale(0.82);
  }

  45% {
    opacity: 1;
    transform: translate(-5%, -50%) scale(1.28);
  }

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

@keyframes chipFly {
  0% {
    opacity: 0;
    transform: translateY(24px) rotate(-6deg) scale(0.82);
  }

  20%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-42px) rotate(7deg) scale(1.06);
  }
}

@keyframes chipSquash {
  0% {
    opacity: 0;
    transform: scale(1.25) rotate(-8deg);
  }

  24% {
    opacity: 1;
    transform: scale(1) rotate(3deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.35) rotate(14deg);
  }
}

@keyframes likeFloat {
  0% {
    opacity: 0;
    transform: translateY(18px) rotate(-5deg) scale(0.82);
  }

  22%,
  76% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-58px) rotate(8deg) scale(1.08);
  }
}

@keyframes stampIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-11deg) scale(1.85);
  }

  28%,
  76% {
    opacity: 1;
  }

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

@keyframes upgradePop {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) rotate(5deg) scale(0.7);
  }

  24%,
  74% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -34px) rotate(-4deg) scale(1.08);
  }
}

@keyframes denyShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }
}

@media (max-height: 760px) {
  #roomFrame.monitor-shell {
    padding: 64px 11px 96px;
  }

  #resourceHud {
    gap: 6px;
  }

  .resource strong {
    font-size: 18px;
  }

  #actions,
  #tabs {
    gap: 5px;
  }

  button {
    min-height: 40px;
  }
}

@media (max-width: 340px) {
  #roomFrame.monitor-shell {
    padding: 58px 9px 12px;
  }

  #monitorBezel {
    border-width: 4px;
    border-radius: 12px;
  }

  #monitorScreen {
    inset: 5px;
  }

  #desktopTopbar {
    top: 6px;
    left: 6px;
    right: 6px;
    height: 24px;
    gap: 5px;
    padding: 0 6px;
    font-size: 10px;
  }

  .monitor-app {
    top: 36px;
    left: 8px;
    right: 8px;
    bottom: 9px;
    border-width: 3px;
  }

  .window-title {
    height: 27px;
    padding: 0 8px;
    font-size: 11px;
  }

  .code-editor {
    inset: 27px 0 0;
  }

  #codeFeed {
    padding: 8px 6px 10px 36px;
    font-size: 10px;
    line-height: 1.45;
  }

  #projectCard {
    display: none;
  }

  #resourceHud {
    grid-template-columns: 1fr 0.72fr 0.76fr 0.66fr;
  }

  .resource {
    padding: 6px 5px;
  }

  .resource span {
    font-size: 9px;
  }

  .resource strong {
    font-size: 17px;
  }

  .primary-action {
    font-size: 14px;
  }

  #actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr);
  }

  #actions button:nth-child(5) {
    grid-column: span 2;
  }

  #actions button:not(.primary-action),
  .tab {
    font-size: 10px;
  }

  .shop-tab {
    font-size: 16px;
  }
}

/* v10 compact shell: resources live inside the monitor, bottom controls are simpler. */
#roomFrame.monitor-shell {
  padding: 18px 14px 100px;
}

#desktopTopbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 38px;
  gap: 7px;
}

#desktopTopbar > span {
  white-space: nowrap;
}

#desktopTopbar > i {
  display: none;
}

#resourceHud {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.72fr;
  min-width: 0;
  gap: 4px;
}

.resource {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  gap: 3px;
  padding: 3px 4px;
  border: 2px solid rgba(14, 14, 20, 0.82);
  border-radius: 5px;
  box-shadow: none;
}

.resource span {
  display: none;
}

.resource strong {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-app {
  top: 52px;
}

#notificationBanner {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: block;
  min-height: 0;
  padding: 10px 12px;
  pointer-events: auto;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.94);
  box-shadow: 5px 5px 0 var(--shadow);
  cursor: pointer;
  text-align: left;
}

#notificationBanner span,
#notificationBanner small {
  display: block;
  font-size: 11px;
  font-weight: 850;
  opacity: 0.62;
}

#notificationBanner strong {
  display: block;
  margin: 2px 0 3px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#notificationBanner small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#actions {
  grid-template-columns: minmax(104px, 1.35fr) minmax(72px, 0.82fr) minmax(88px, 0.95fr);
}

#tabs {
  grid-template-columns: 1.25fr 1fr 0.82fr;
}

.shop-tab {
  font-size: 13px;
}

.notification-offer {
  background: #e6ffdf;
}

@media (max-height: 760px) {
  #roomFrame.monitor-shell {
    padding: 14px 11px 82px;
  }

  #notificationBanner {
    bottom: 10px;
    padding: 8px 10px;
  }

  #notificationBanner strong {
    font-size: 14px;
  }
}

@media (max-width: 340px) {
  #roomFrame.monitor-shell {
    padding: 10px 9px 12px;
  }

  #desktopTopbar {
    height: 31px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px;
  }

  #screenTitle {
    display: none;
  }

  #resourceHud {
    gap: 3px;
  }

  .resource {
    padding: 2px 3px;
  }

  .resource strong {
    font-size: 10px;
  }

  .monitor-app {
    top: 42px;
  }

  #notificationBanner {
    display: none;
  }

  #actions {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 0.95fr);
  }

  #actions button:nth-child(5) {
    grid-column: auto;
  }
}
/* v11 monitor layout repair and compact controls */
#sceneLayer {
  background:
    radial-gradient(circle at 50% 16%, rgba(109, 227, 255, 0.26), transparent 28%),
    linear-gradient(180deg, #171920, #20222b 55%, #111218);
}

#roomFrame.monitor-shell {
  position: absolute;
  inset: 0;
  padding: 18px 14px 100px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 200, 87, 0.14), transparent 34%),
    #171920;
}

#monitorGlow {
  pointer-events: none;
}

#monitorBezel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 6px solid #0e0e14;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 24%),
    #232630;
  box-shadow:
    0 18px 0 #0c0d12,
    0 30px 36px rgba(0, 0, 0, 0.42);
}

#monitorScreen {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  border: 3px solid #0e0e14;
  border-radius: 9px;
  background:
    radial-gradient(circle at 72% 22%, rgba(109, 227, 255, 0.22), transparent 26%),
    linear-gradient(135deg, #1c2030, #0f1720 58%, #16101f);
}

#monitorScreen::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 18px 18px;
}

#desktopTopbar {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 8px;
  border: 2px solid rgba(255, 248, 234, 0.24);
  border-radius: 7px;
  background: rgba(14, 14, 20, 0.74);
  color: #fff8ea;
  font-size: 11px;
  font-weight: 950;
}

#resourceHud {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.72fr;
  min-width: 0;
  gap: 4px;
}

.resource {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  gap: 3px;
  padding: 3px 4px;
  border: 2px solid rgba(14, 14, 20, 0.82);
  border-radius: 5px;
  box-shadow: none;
}

.resource span {
  display: none;
}

.resource strong {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-app {
  position: absolute;
  z-index: 2;
  top: 52px;
  left: 12px;
  right: 12px;
  bottom: 20px;
  display: none;
  overflow: hidden;
  border: 4px solid #0e0e14;
  border-radius: 10px;
  background: #fff8ea;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.28);
}

.monitor-app.active {
  display: block;
}

.window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border-bottom: 3px solid #0e0e14;
  background: var(--token);
  font-size: 12px;
  font-weight: 950;
}

.window-title small {
  opacity: 0.64;
}

.code-editor {
  position: absolute;
  inset: 32px 0 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(30, 30, 36, 0.08) 0 32px, transparent 32px),
    repeating-linear-gradient(180deg, transparent 0 28px, rgba(30, 30, 36, 0.06) 28px 30px),
    #fff8ea;
}

#codeFeed {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 11px 8px 16px 42px;
  overflow: hidden;
  color: #21242c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.72;
  list-style: decimal-leading-zero;
}

#codeFeed li {
  min-height: 19px;
  padding-left: 8px;
  border-radius: 5px;
  white-space: nowrap;
  animation: linePop 340ms ease-out both;
}

#codeFeed li.generated {
  background: rgba(109, 227, 255, 0.18);
}

#codeFeed li.error {
  color: #8f2222;
  background: rgba(228, 87, 87, 0.18);
}

#codeFeed li.fixed {
  color: #14642b;
  background: rgba(84, 192, 106, 0.18);
}

#cursorSprite {
  position: absolute;
  right: 18px;
  bottom: 13px;
  width: 8px;
  height: 24px;
  border: 2px solid #0e0e14;
  border-radius: 3px;
  background: var(--token);
  animation: cursorBlink 0.75s steps(2, end) infinite;
}

.app-ai {
  background:
    radial-gradient(circle at 88% 16%, rgba(109, 227, 255, 0.32), transparent 22%),
    #fff8ea;
}

.ai-title,
.panel-titlebar {
  background: var(--monitor);
}

#aiMessages {
  position: absolute;
  inset: 44px 10px 82px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.chat-bubble {
  max-width: 82%;
  padding: 8px 10px;
  border: 3px solid #0e0e14;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(30, 30, 36, 0.22);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.18;
  animation: linePop 300ms ease-out both;
}

.chat-bubble.user {
  align-self: flex-start;
  background: var(--token);
}

.chat-bubble.ai {
  align-self: flex-end;
  background: var(--monitor);
}

#aiGeneratedCode {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  min-height: 62px;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  border: 3px solid #0e0e14;
  border-radius: 8px;
  color: #d9fff0;
  background: #111821;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.35;
}

.app-terminal {
  color: #fff8ea;
  background: #10151d;
}

.terminal-title {
  color: #fff8ea;
  background: #1f2933;
}

#terminalFeed {
  position: absolute;
  inset: 45px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  color: #fff8ea;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 850;
}

.term-line {
  padding: 6px 7px;
  border-left: 4px solid var(--monitor);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.term-line.ok {
  border-left-color: var(--upgrade);
  color: #8dffad;
}

.app-social {
  background: #fff8ea;
}

.social-title {
  background: #ffd6ef;
}

#postCard {
  margin: 46px 12px 10px;
  padding: 11px;
  border: 3px solid #0e0e14;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 5px 5px 0 rgba(30, 30, 36, 0.24);
}

#socialComments {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 850;
}

.comment {
  padding: 7px 9px;
  border: 2px solid #0e0e14;
  border-radius: 999px;
  background: #ffd6ef;
}

.app-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(186, 241, 166, 0.32), transparent 24%),
    linear-gradient(180deg, #fff8ea, #f2dfbc);
}

#panelContent {
  position: absolute;
  inset: 43px 10px 10px;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  padding: 0 3px 3px 0;
  scrollbar-width: thin;
}

#panelContent .card {
  margin-bottom: 7px;
  padding: 8px;
  border-width: 3px;
}

#panelContent .shop-card,
#panelContent .market-card {
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

#panelContent .shop-preview {
  width: 38px;
  border-width: 2px;
}

.panel-section-title {
  position: sticky;
  z-index: 1;
  top: 0;
  margin: 0 0 7px;
  padding: 7px 9px;
  border: 3px solid #0e0e14;
  border-radius: 8px;
  color: #1e1e24;
  background: var(--token);
  box-shadow: 3px 3px 0 rgba(30, 30, 36, 0.18);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

#panelContent .log-entry {
  border-width: 0 0 0 4px;
  border-left-color: var(--monitor);
  color: #fff8ea;
  background: rgba(17, 24, 33, 0.92);
}

.notification-offer {
  background: #e6ffdf;
}

.app-deploy {
  display: none;
  grid-template-rows: 32px minmax(0, 1fr) auto;
  gap: 10px;
  padding-bottom: 10px;
  color: #fff8ea;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 200, 87, 0.2), transparent 32%),
    #111821;
}

.app-deploy.active {
  display: grid;
}

.deploy-title {
  color: #1e1e24;
  background: var(--token);
}

#deploySteps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  min-height: 0;
  margin: 0 16px;
  overflow-y: auto;
}

.deploy-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 9px;
  border: 3px solid #0e0e14;
  border-radius: 9px;
  color: #1e1e24;
  background: #f7f0dd;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.24);
}

.deploy-step.warn {
  background: #ffd7d7;
}

.deploy-step i {
  width: 22px;
  aspect-ratio: 1;
  border: 3px solid #0e0e14;
  border-radius: 50%;
  background: var(--upgrade);
}

.deploy-step.warn i {
  background: var(--bug);
}

#deployResult {
  display: block;
  margin: 0 16px;
  padding: 10px;
  border: 3px solid #0e0e14;
  border-radius: 10px;
  color: #1e1e24;
  background: var(--token);
  text-align: center;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.28);
}

#notificationBanner {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: block;
  min-height: 0;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.94);
  box-shadow: 5px 5px 0 var(--shadow);
  text-align: left;
}

#notificationBanner span,
#notificationBanner small {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.62;
}

#notificationBanner strong {
  display: block;
  margin: 2px 0 3px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#actions {
  grid-template-columns: minmax(104px, 1.35fr) minmax(72px, 0.82fr) minmax(88px, 0.95fr);
}

#tabs {
  grid-template-columns: 1.25fr 1fr 0.82fr;
}

.shop-tab {
  font-size: 13px;
}

#app.has-cursor #cursorSprite {
  box-shadow: 0 0 16px var(--token);
}

#app.has-errorLens #codeFeed li.error {
  animation: errorPulse 1.1s ease-in-out infinite;
}

#app.has-aiPane #aiApp {
  border-color: var(--monitor);
  box-shadow:
    0 0 0 4px rgba(109, 227, 255, 0.22),
    7px 7px 0 rgba(0, 0, 0, 0.28);
}

#app.has-deployBadge #deployApp,
#app.has-deployBadge #deployResult {
  border-color: var(--upgrade);
}

@media (max-height: 760px) {
  #roomFrame.monitor-shell {
    padding: 14px 11px 82px;
  }

  #notificationBanner {
    bottom: 10px;
    padding: 8px 10px;
  }

  #notificationBanner strong {
    font-size: 14px;
  }
}

@media (max-width: 340px) {
  #roomFrame.monitor-shell {
    padding: 10px 9px 12px;
  }

  #monitorBezel {
    border-width: 4px;
    border-radius: 12px;
  }

  #monitorScreen {
    inset: 5px;
  }

  #desktopTopbar {
    top: 6px;
    left: 6px;
    right: 6px;
    height: 31px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px;
    padding: 0 6px;
    font-size: 10px;
  }

  #screenTitle {
    display: none;
  }

  .resource {
    padding: 2px 3px;
  }

  .resource strong {
    font-size: 10px;
  }

  .monitor-app {
    top: 42px;
    left: 8px;
    right: 8px;
    bottom: 9px;
    border-width: 3px;
  }

  .window-title {
    height: 27px;
    padding: 0 8px;
    font-size: 11px;
  }

  .code-editor {
    inset: 27px 0 0;
  }

  #codeFeed {
    padding: 8px 6px 10px 36px;
    font-size: 10px;
    line-height: 1.45;
  }

  #notificationBanner {
    display: none;
  }

  #actions {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 0.95fr);
  }
}

#notificationBanner {
  pointer-events: auto;
  cursor: pointer;
}

.code-burst {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 10px;
  padding: 3px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: var(--token);
  box-shadow: 3px 3px 0 rgba(30, 30, 36, 0.22);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  transform: translateY(6px) rotate(-4deg) scale(0.88);
}

.burst-b {
  top: 30px;
  left: 46px;
  background: var(--monitor);
}

#app.fx-code .code-burst,
#app.fx-ai .code-burst {
  animation: editorBurst 740ms ease-out both;
}

#app.fx-code .burst-b,
#app.fx-ai .burst-b {
  animation-delay: 80ms;
}

@keyframes editorBurst {
  0% {
    opacity: 0;
    transform: translateY(8px) rotate(-4deg) scale(0.86);
  }

  22%,
  68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) rotate(5deg) scale(1.05);
  }
}

/* v12 compact polish: readable HUD, tappable banner, non-overlapping app screens. */
.resource::before {
  flex: 0 0 auto;
  color: rgba(30, 30, 36, 0.68);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}

.resource-tokens::before {
  content: "ТК";
}

.resource-money::before {
  content: "$";
}

.resource-vibe::before {
  content: "В";
}

.resource-bugs::before {
  content: "Б";
}

#desktopTopbar {
  grid-template-columns: auto minmax(0, 1fr);
}

#screenTitle {
  display: none;
}

#aiApp.app-ai.active {
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr) auto;
  gap: 8px;
}

#aiMessages {
  position: static;
  min-height: 0;
  padding: 10px 10px 0;
  overflow-y: auto;
}

#aiGeneratedCode {
  position: static;
  min-height: 58px;
  max-height: 88px;
  margin: 0 10px 10px;
}

@media (max-width: 340px) {
  #roomFrame.monitor-shell {
    padding: 10px 9px 58px;
  }

  #notificationBanner {
    display: block;
    left: 9px;
    right: 9px;
    bottom: 7px;
    min-height: 39px;
    max-height: 48px;
    padding: 6px 8px;
    border-width: 2px;
    box-shadow: 3px 3px 0 var(--shadow);
  }

  #notificationBanner span {
    display: none;
  }

  #notificationBanner strong {
    margin: 0 0 2px;
    font-size: 12px;
  }

  #notificationBanner small {
    font-size: 9px;
  }

  #aiApp.app-ai.active {
    grid-template-rows: 27px minmax(0, 1fr) auto;
    gap: 6px;
  }

  #aiMessages {
    padding: 8px 8px 0;
  }

  .chat-bubble {
    padding: 6px 8px;
    border-width: 2px;
    font-size: 10px;
  }

  #aiGeneratedCode {
    min-height: 44px;
    max-height: 62px;
    margin: 0 8px 8px;
    padding: 7px;
    border-width: 2px;
    font-size: 9px;
  }

  #panelContent .shop-card,
  #panelContent .market-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #panelContent .shop-preview {
    display: none;
  }

  #panelContent .card {
    gap: 6px;
    padding: 7px;
  }

  #panelContent .card h3 {
    font-size: 12px;
  }

  #panelContent .card p,
  #panelContent .card .price {
    font-size: 10px;
  }

  #panelContent .card button {
    min-width: 62px;
    min-height: 36px;
    font-size: 10px;
  }
}

/* v15: strategic actions, contract choices, visible purchased themes. */
#actions {
  grid-template-columns: minmax(64px, 1fr) repeat(4, minmax(46px, 0.74fr));
}

#actions button:not(.primary-action) {
  font-size: 10px;
}

#actions button.active {
  background: var(--monitor);
  box-shadow:
    2px 2px 0 var(--shadow),
    inset 0 -5px 0 rgba(30, 30, 36, 0.14);
}

.app-panel {
  background:
    radial-gradient(circle at 88% 12%, var(--panel-glow), transparent 24%),
    linear-gradient(180deg, var(--panel), var(--paper-deep));
}

.notification-offer {
  background: var(--active-item-bg);
}

.contract-card,
.choice-card {
  align-items: stretch;
}

.contract-card h3,
.choice-card h3 {
  margin-bottom: 5px;
}

.choice-card {
  grid-template-columns: minmax(0, 1fr);
}

.choice-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}

.choice-actions button {
  min-width: 0;
}

#app.theme-neon {
  --paper: #fff1fb;
  --paper-deep: #e7c1ff;
  --panel: #fff7fd;
  --token: #ff6bd6;
  --monitor: #75f4ff;
  --upgrade: #85f08b;
  --shadow: rgba(49, 12, 70, 0.32);
  --active-item-bg: #ffe1f7;
  --panel-glow: rgba(255, 107, 214, 0.26);
}

#app.theme-green {
  --paper: #eef8e7;
  --paper-deep: #c7e7b4;
  --panel: #fbfff4;
  --token: #f2d460;
  --monitor: #8be8c1;
  --upgrade: #4fbd70;
  --shadow: rgba(14, 62, 39, 0.3);
  --active-item-bg: #e4f7dc;
  --panel-glow: rgba(139, 232, 193, 0.3);
}

#app.theme-neon #sceneLayer {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 107, 214, 0.3), transparent 28%),
    linear-gradient(180deg, #1f1429, #23172f 55%, #120d1c);
}

#app.theme-neon #roomFrame.monitor-shell {
  background:
    radial-gradient(circle at 50% 42%, rgba(117, 244, 255, 0.22), transparent 34%),
    #1f1429;
}

#app.theme-neon #monitorScreen {
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 107, 214, 0.28), transparent 26%),
    linear-gradient(135deg, #25163a, #101929 58%, #241032);
}

#app.theme-green #sceneLayer {
  background:
    radial-gradient(circle at 50% 16%, rgba(139, 232, 193, 0.28), transparent 28%),
    linear-gradient(180deg, #17231c, #1f2b22 55%, #101810);
}

#app.theme-green #roomFrame.monitor-shell {
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 212, 96, 0.16), transparent 34%),
    #17231c;
}

#app.theme-green #monitorScreen {
  background:
    radial-gradient(circle at 72% 22%, rgba(139, 232, 193, 0.24), transparent 26%),
    linear-gradient(135deg, #16251d, #102018 58%, #172414);
}

.app-social.active {
  display: grid;
  grid-template-rows: 32px auto minmax(0, 1fr);
}

.app-social.active #postCard {
  margin: 10px 12px;
}

.app-social.active #socialComments {
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 10px;
}

#socialComments:focus-visible {
  outline: 4px solid var(--monitor);
  outline-offset: 2px;
}

@media (max-width: 340px) {
  #actions {
    grid-template-columns: minmax(0, 0.9fr) repeat(4, minmax(0, 0.62fr));
    gap: 5px;
  }

  #actions button {
    min-height: 44px;
  }

  #actions button:not(.primary-action) {
    padding-inline: 3px;
    font-size: 8px;
  }

  .primary-action {
    font-size: 14px;
  }

  .contract-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .contract-card button {
    width: 100%;
  }

  .app-social.active {
    grid-template-rows: 27px auto minmax(0, 1fr);
  }

  .app-social.active #postCard {
    margin: 8px;
    padding: 9px;
  }

  .app-social.active #postCard p {
    font-size: 14px;
    line-height: 1.15;
  }
}

/* v16: animated screen transitions, resource flyouts, project progress map. */
#floatLayer {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.resource-float {
  position: absolute;
  left: 0;
  top: 0;
  min-width: max-content;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--shadow);
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  animation: resourceFly 920ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.resource-float-code {
  background: var(--monitor);
}

.resource-float-tokens {
  background: var(--token);
}

.resource-float-money,
.resource-float-fix {
  background: var(--upgrade);
}

.resource-float-bugs,
.resource-float-spend {
  background: #ff9f9f;
}

.resource-float-energy,
.resource-float-hype,
.resource-float-vibe {
  background: #ffd6ef;
}

.resource-pulse {
  animation: resourcePulse 430ms ease-out both;
}

.monitor-app.active.entering {
  animation: monitorAppIn 320ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.monitor-app.leaving {
  z-index: 1;
  display: block;
  pointer-events: none;
  animation: monitorAppOut 320ms ease-in both;
}

#aiApp.app-ai.leaving,
.app-social.leaving,
.app-deploy.leaving {
  display: grid;
}

#aiApp.app-ai.leaving {
  grid-template-rows: 32px minmax(0, 1fr) auto;
  gap: 8px;
}

.app-social.leaving {
  grid-template-rows: 32px auto minmax(0, 1fr);
}

#codeFeed {
  inset: 0 0 96px;
  padding-bottom: 8px;
}

#cursorSprite {
  bottom: 105px;
}

.project-map {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 78px;
  padding: 8px 9px;
  border: 3px solid #0e0e14;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 234, 0.94)),
    var(--panel);
  box-shadow: 4px 4px 0 rgba(30, 30, 36, 0.22);
}

.project-map::after {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: var(--bug-pressure-width);
  height: 5px;
  border-radius: 999px;
  content: "";
  background: rgba(228, 87, 87, var(--bug-pressure-alpha));
}

.project-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.project-map-head span,
.project-map-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-map-head strong {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 2px solid #0e0e14;
  border-radius: 999px;
  background: var(--token);
  box-shadow: 2px 2px 0 rgba(30, 30, 36, 0.18);
}

.project-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 4px;
}

.project-track::before,
.project-track::after {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10px;
  height: 4px;
  border-radius: 999px;
  content: "";
  background: rgba(30, 30, 36, 0.18);
}

.project-track::after {
  right: auto;
  width: var(--project-progress);
  background: linear-gradient(90deg, var(--monitor), var(--upgrade));
  transition: width 260ms ease-out;
}

.project-node {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  color: rgba(30, 30, 36, 0.56);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.project-node i {
  width: 21px;
  aspect-ratio: 1;
  border: 3px solid #0e0e14;
  border-radius: 50%;
  background: #f1dfbd;
  box-shadow: 2px 2px 0 rgba(30, 30, 36, 0.22);
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.project-node b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-node.done {
  color: var(--ink);
}

.project-node.done i {
  background: var(--upgrade);
}

.project-node.active {
  color: var(--ink);
}

.project-node.active i {
  background: var(--monitor);
  box-shadow:
    2px 2px 0 rgba(30, 30, 36, 0.22),
    0 0 0 4px rgba(109, 227, 255, 0.24);
  transform: scale(1.1);
  animation: mapNodeBeat 1.05s ease-in-out infinite;
}

.project-map[data-pressure="warm"] {
  border-color: #8f5c1f;
}

.project-map[data-pressure="hot"] {
  border-color: var(--bug);
  background:
    linear-gradient(180deg, rgba(255, 231, 231, 0.9), rgba(255, 248, 234, 0.94)),
    var(--panel);
}

@keyframes resourceFly {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) translate(-50%, -50%) scale(0.72) rotate(-6deg);
  }

  14% {
    opacity: 1;
    transform: translate(var(--from-x), var(--from-y)) translate(-50%, -68%) scale(1.04) rotate(3deg);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--to-x), var(--to-y)) translate(-50%, -50%) scale(0.78) rotate(0deg);
  }
}

@keyframes resourcePulse {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  36% {
    transform: translate(-1px, -1px) scale(1.06);
    box-shadow:
      0 0 0 4px rgba(109, 227, 255, 0.26),
      3px 3px 0 var(--shadow);
  }
}

@keyframes monitorAppIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

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

@keyframes monitorAppOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}

@keyframes mapNodeBeat {
  0%,
  100% {
    transform: scale(1.04);
  }

  50% {
    transform: scale(1.14);
  }
}

@media (max-width: 340px) {
  #codeFeed {
    inset: 0 0 82px;
    padding-bottom: 6px;
  }

  #cursorSprite {
    bottom: 88px;
  }

  .project-map {
    left: 7px;
    right: 7px;
    bottom: 7px;
    height: 68px;
    padding: 7px;
    border-width: 2px;
  }

  .project-map-head {
    margin-bottom: 6px;
    font-size: 9px;
  }

  .project-node {
    font-size: 8px;
  }

  .project-node i {
    width: 18px;
    border-width: 2px;
  }

  #aiApp.app-ai.leaving {
    grid-template-rows: 27px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .app-social.leaving {
    grid-template-rows: 27px auto minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-float,
  .monitor-app.active.entering,
  .monitor-app.leaving,
  .project-node.active i,
  .resource-pulse {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

/* v17: decision card, action badges, denser mode dashboards. */
#actions button {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 1px;
  padding: 4px 3px;
  line-height: 1;
}

.action-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-badge {
  display: block;
  min-width: 26px;
  max-width: 100%;
  padding: 2px 4px;
  overflow: hidden;
  border: 2px solid rgba(30, 30, 36, 0.82);
  border-radius: 999px;
  background: rgba(255, 248, 234, 0.72);
  font-size: 8px;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-badge[data-tone="code"] {
  background: var(--monitor);
}

.action-badge[data-tone="spend"],
.action-badge[data-tone="hype"] {
  background: #ffd6ef;
}

.action-badge[data-tone="fix"],
.action-badge[data-tone="money"] {
  background: var(--upgrade);
}

.action-badge[data-tone="warn"] {
  background: var(--token);
}

.action-badge[data-tone="muted"] {
  opacity: 0.72;
}

#codeFeed {
  inset: 0 0 166px;
}

#cursorSprite {
  bottom: 172px;
}

.next-action-card {
  position: absolute;
  z-index: 3;
  top: 82px;
  left: 42px;
  right: 10px;
  min-height: 66px;
  padding: 7px 8px;
  border: 3px solid #0e0e14;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 234, 0.96)),
    var(--panel);
  box-shadow: 4px 4px 0 rgba(30, 30, 36, 0.22);
}

.next-action-card span {
  display: block;
  color: rgba(30, 30, 36, 0.64);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.next-action-card strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-action-card p {
  margin: 4px 0 0;
  overflow: hidden;
  color: rgba(30, 30, 36, 0.76);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.next-action-meta,
.mode-stats,
.project-map-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.next-action-meta {
  margin-top: 6px;
}

.stat-pill {
  display: block;
  min-width: 0;
  padding: 4px 5px;
  overflow: hidden;
  border: 2px solid rgba(14, 14, 20, 0.84);
  border-radius: 7px;
  background: rgba(255, 248, 234, 0.9);
  box-shadow: 2px 2px 0 rgba(30, 30, 36, 0.14);
}

.stat-pill b,
.stat-pill strong {
  display: block;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-pill b {
  color: rgba(30, 30, 36, 0.58);
  font-size: 7px;
  font-weight: 950;
  text-transform: uppercase;
}

.stat-pill strong {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 1000;
}

.stat-pill.code {
  background: rgba(109, 227, 255, 0.72);
}

.stat-pill.money,
.stat-pill.ok,
.stat-pill.fix {
  background: rgba(84, 192, 106, 0.72);
}

.stat-pill.hype,
.stat-pill.spend {
  background: rgba(255, 214, 239, 0.9);
}

.stat-pill.bugs,
.stat-pill.warn {
  background: rgba(255, 200, 87, 0.8);
}

.stat-pill.danger {
  background: rgba(255, 159, 159, 0.92);
}

.project-map {
  height: 98px;
  padding: 7px 8px;
}

.project-map-head {
  margin-bottom: 5px;
}

.project-map-stats {
  margin-bottom: 7px;
}

.project-map .stat-pill {
  padding: 3px 4px;
}

.project-map .stat-pill b {
  font-size: 6px;
}

.project-map .stat-pill strong {
  font-size: 9px;
}

.project-track::before,
.project-track::after {
  top: 8px;
}

.project-node {
  gap: 3px;
}

.project-node i {
  width: 18px;
  border-width: 2px;
}

#aiApp.app-ai.active {
  display: grid;
  grid-template-rows: 32px auto minmax(0, 1fr) auto;
  gap: 7px;
}

#aiApp.app-ai.leaving {
  grid-template-rows: 32px auto minmax(0, 1fr) auto;
}

.mode-stats {
  margin: 0 10px;
}

#aiMessages {
  padding-top: 0;
}

#aiGeneratedCode {
  min-height: 50px;
  max-height: 74px;
}

.app-terminal.active {
  display: grid;
  grid-template-rows: 32px auto minmax(0, 1fr);
  gap: 8px;
}

.terminal-stats {
  margin-top: 10px;
}

#terminalFeed {
  position: static;
  min-height: 0;
  margin: 0 12px 12px;
  overflow-y: auto;
}

.app-social.active {
  grid-template-rows: 32px auto auto minmax(0, 1fr);
  gap: 8px;
}

.social-stats {
  margin-top: 10px;
}

.app-social.active #postCard {
  margin: 0 12px;
}

.app-social.active #socialComments {
  padding: 0 12px 10px;
}

.app-deploy.active {
  grid-template-rows: 32px auto minmax(0, 1fr) auto;
  gap: 8px;
}

.deploy-stats {
  margin-top: 10px;
}

#deploySteps {
  justify-content: flex-start;
  margin: 0 12px;
}

#deployResult {
  margin: 0 12px 10px;
}

@media (max-width: 340px) {
  #actions button:not(.primary-action) {
    font-size: 8px;
  }

  .action-badge {
    min-width: 22px;
    padding: 1px 3px;
    border-width: 1px;
    font-size: 7px;
  }

  #codeFeed {
    inset: 0 0 160px;
    padding-top: 8px;
  }

  #cursorSprite {
    bottom: 167px;
  }

  .next-action-card {
    top: 74px;
    left: 37px;
    right: 7px;
    height: 55px;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
    border-width: 2px;
  }

  .next-action-card strong {
    font-size: 10px;
  }

  .next-action-card p {
    display: none;
  }

  .next-action-meta {
    margin-top: 4px;
  }

  .project-map {
    height: 88px;
    padding: 6px;
  }

  .project-map-head {
    margin-bottom: 4px;
    font-size: 8px;
  }

  .project-map-stats {
    gap: 3px;
    margin-bottom: 5px;
  }

  .stat-pill {
    padding: 3px 4px;
    border-width: 1px;
  }

  .stat-pill b {
    font-size: 6px;
  }

  .stat-pill strong {
    font-size: 8px;
  }

  .project-node b {
    font-size: 7px;
  }

  #aiApp.app-ai.active,
  #aiApp.app-ai.leaving {
    grid-template-rows: 27px auto minmax(0, 1fr) auto;
    gap: 5px;
  }

  .mode-stats {
    gap: 4px;
    margin-inline: 8px;
  }

  #aiGeneratedCode {
    min-height: 42px;
    max-height: 56px;
  }

  .app-terminal.active {
    grid-template-rows: 27px auto minmax(0, 1fr);
    gap: 6px;
  }

  .terminal-stats,
  .social-stats,
  .deploy-stats {
    margin-top: 8px;
  }

  #terminalFeed,
  #deploySteps {
    margin-inline: 8px;
  }

  .app-social.active,
  .app-social.leaving {
    grid-template-rows: 27px auto auto minmax(0, 1fr);
    gap: 6px;
  }

  .app-social.active #postCard {
    margin-inline: 8px;
  }

  .app-deploy.active {
    grid-template-rows: 27px auto minmax(0, 1fr) auto;
    gap: 6px;
  }
}

/* v18: in-monitor feedback without jumping between workspace apps */
#monitorToasts {
  position: absolute;
  top: 92px;
  right: 10px;
  z-index: 7;
  display: grid;
  width: min(230px, calc(100% - 20px));
  gap: 6px;
  pointer-events: none;
}

.monitor-toast {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  padding: 7px 9px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 3px 3px 0 var(--shadow);
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.18;
  animation: monitorToastIn 220ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.monitor-toast[data-tone="code"] {
  background: #ddfff0;
}

.monitor-toast[data-tone="ai"] {
  background: #e5ddff;
}

.monitor-toast[data-tone="fix"] {
  background: #dff7ff;
}

.monitor-toast[data-tone="post"] {
  background: #ffe2f1;
}

.monitor-toast[data-tone="warn"] {
  background: #ffe1c4;
}

.monitor-toast.leaving {
  animation: monitorToastOut 190ms ease-in both;
}

.monitor-app.active.surface-pulse:not(.entering) {
  animation: surfacePulse 420ms ease-out both;
}

@keyframes monitorToastIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

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

@keyframes monitorToastOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
}

@keyframes surfacePulse {
  0%,
  100% {
    filter: none;
  }

  45% {
    filter: brightness(1.07) saturate(1.08);
  }
}

@media (max-width: 340px) {
  #monitorToasts {
    top: 76px;
    right: 8px;
    width: min(190px, calc(100% - 16px));
    gap: 4px;
  }

  .monitor-toast {
    padding: 6px 7px;
    border-width: 2px;
    font-size: 9px;
  }
}

/* v19: clearer lower control dock */
#controlLayer {
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
}

#progressPanel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 8px;
  margin-bottom: 7px;
}

#progressPanel .meter {
  min-height: 42px;
  padding: 6px 7px;
}

#actions {
  display: grid;
  grid-template-columns: minmax(92px, 1.08fr) repeat(2, minmax(0, 0.78fr));
  grid-template-rows: repeat(2, 42px);
  gap: 6px;
}

#actions button {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 5px 4px;
}

#codeButton.primary-action {
  grid-row: 1 / span 2;
  min-height: 90px;
  font-size: 18px;
}

#actions button[data-action="askAi"] {
  grid-column: 2;
  grid-row: 1;
}

#actions button[data-action="fixBugs"] {
  grid-column: 3;
  grid-row: 1;
}

#actions button[data-action="postHype"] {
  grid-column: 2;
  grid-row: 2;
}

#actions button[data-action="deploy"] {
  grid-column: 3;
  grid-row: 2;
}

#actions button:not(.primary-action) {
  font-size: 11px;
}

#codeButton .action-label {
  font-size: 18px;
}

#codeButton .action-badge {
  min-width: 34px;
  padding: 2px 6px;
  font-size: 9px;
}

#tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

#tabs button {
  min-height: 40px;
  padding-inline: 4px;
  font-size: 12px;
}

.shop-tab {
  font-size: 12px;
}

@media (max-height: 620px) {
  #controlLayer {
    padding-top: 7px;
  }

  #progressPanel {
    margin-bottom: 6px;
  }

  #progressPanel .meter {
    min-height: 39px;
    padding-block: 5px;
  }

  #actions {
    grid-template-rows: repeat(2, 39px);
    gap: 5px;
  }

  #codeButton.primary-action {
    min-height: 83px;
  }

  #tabs {
    margin-top: 6px;
    gap: 5px;
  }

  #tabs button {
    min-height: 37px;
  }
}

@media (max-width: 340px) {
  #controlLayer {
    padding-inline: 9px;
  }

  #actions {
    grid-template-columns: minmax(88px, 1.06fr) repeat(2, minmax(0, 0.78fr));
    grid-template-rows: repeat(2, 39px);
    gap: 5px;
  }

  #actions button:not(.primary-action) {
    padding-inline: 4px;
    font-size: 10px;
  }

  #codeButton.primary-action {
    min-height: 83px;
  }

  #codeButton .action-label {
    font-size: 17px;
  }

  #codeButton .action-badge {
    min-width: 32px;
    font-size: 8px;
  }

  #tabs button,
  .shop-tab {
    font-size: 11px;
  }
}

/* v20: release report, studio progression and chained client state. */
.release-report,
.studio-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  background: linear-gradient(180deg, #fff6df, #eaf9ff);
}

.release-head,
.studio-head {
  min-width: 0;
}

.release-head span,
.studio-head span {
  display: block;
  margin-bottom: 3px;
  color: rgba(30, 30, 36, 0.54);
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.release-head strong,
.studio-head strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-head em,
.studio-head em {
  display: block;
  margin-top: 3px;
  color: rgba(30, 30, 36, 0.64);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
}

.release-grade {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--upgrade);
  color: #1e1e24;
  font-size: 22px;
  font-weight: 1000;
  box-shadow: 3px 3px 0 var(--shadow);
}

.release-grade.grade-s,
.release-grade.grade-a {
  background: #6de3ff;
}

.release-grade.grade-d {
  background: #ff9f9f;
}

.release-stats,
.studio-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.release-notes {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.release-notes li {
  padding: 4px 6px;
  border: 2px solid rgba(30, 30, 36, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.14;
}

.release-mini-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #f7fbff, #fff7de);
}

.release-mini-card h3 {
  overflow: hidden;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-mini-card p {
  margin: 0;
  color: rgba(30, 30, 36, 0.68);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.14;
}

.release-mini-grade {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #ffd66d;
  color: var(--ink);
  font-size: 17px;
  font-weight: 1000;
  box-shadow: 2px 2px 0 var(--shadow);
}

.release-mini-grade.grade-s,
.release-mini-grade.grade-a {
  background: #6de3ff;
}

.release-mini-grade.grade-d {
  background: #ff9f9f;
}

.studio-card {
  background: linear-gradient(180deg, #efffe8, #fff4d0);
}

.studio-progress {
  grid-column: 1 / -1;
  height: 12px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(30, 30, 36, 0.12);
  box-shadow: inset 2px 2px 0 rgba(30, 30, 36, 0.12);
}

.studio-progress i {
  display: block;
  height: 100%;
  border-right: 2px solid rgba(30, 30, 36, 0.34);
  background: linear-gradient(90deg, #54c06a, #6de3ff);
  transition: width 220ms ease-out;
}

.studio-perk {
  grid-column: 1 / -1;
  margin: 0;
  padding: 5px 6px;
  border: 2px solid rgba(30, 30, 36, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
}

.monitor-toast[data-tone="deploy"] {
  background: #dfffea;
}

.next-contract-card {
  background: linear-gradient(180deg, #fff8dc, #e6fbff);
}

.next-contract-card button {
  background: #54c06a;
}

@media (max-width: 340px) {
  .release-report,
  .studio-card {
    gap: 6px;
  }

  .release-head strong,
  .studio-head strong {
    font-size: 12px;
  }

  .release-head em,
  .studio-head em {
    font-size: 9px;
  }

  .release-grade {
    width: 38px;
    border-width: 2px;
    font-size: 18px;
  }

  .release-stats,
  .studio-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .release-notes li,
  .studio-perk {
    padding: 4px 5px;
    font-size: 9px;
  }

  .release-mini-card {
    gap: 6px;
  }

  .release-mini-card h3 {
    font-size: 11px;
  }

  .release-mini-card p {
    font-size: 9px;
  }

  .release-mini-grade {
    width: 30px;
    font-size: 15px;
  }
}