:root {
  --bg: #111312;
  --panel: #17191a;
  --panel-2: #101213;
  --border-dark: #2b221c;
  --border-mid: #8c6a4f;
  --border-light: #c69a73;
  --text: #e7e0d4;
  --muted: #b9ad9d;
  --orange: #ff9d00;
  --green: #6ec942;
  --green-dark: #255d22;
  --violet: #a66de0;
  --wood: #5a3721;
  --wood-dark: #2d2118;
  --wall: #726452;
  --wall-dark: #3c352e;
  --floor: #503722;
  --floor-line: #2e2118;
  --danger: #c95032;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(78, 72, 62, 0.22), transparent 34%),
    #0f1110;
  color: var(--text);
  font-family: "Courier New", "Lucida Console", monospace;
  letter-spacing: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
}

.game-shell {
  width: min(100vw, 430px);
  height: 100svh;
  margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
  background: #121414;
  box-shadow: 0 0 0 3px #0a0b0a, 0 0 38px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.tg-mini-app {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--border-mid);
  box-shadow:
    inset 0 0 0 2px var(--border-dark),
    inset 0 0 0 4px #0c0d0d,
    0 2px 0 #050505;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--border-light);
}

.panel::before {
  top: -2px;
  left: -2px;
}

.panel::after {
  right: -2px;
  bottom: -2px;
}

.top-hud {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 5px;
  flex: 0 0 auto;
}

.profile-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 7px;
  padding: 6px;
}

.portrait {
  position: relative;
  overflow: hidden;
  background: #3e3d38 url("./assets/sergey-reference.png") no-repeat;
  background-size: 502px auto;
  background-position: -15px -17px;
  border: 2px solid #0a0a0a;
  image-rendering: pixelated;
}

.portrait > * {
  display: none;
}

.portrait-face {
  position: absolute;
  left: 18px;
  top: 25px;
  width: 36px;
  height: 42px;
  background: #d99865;
  border: 3px solid #241711;
}

.portrait-hair {
  position: absolute;
  left: 11px;
  top: 8px;
  width: 49px;
  height: 34px;
  background: #17120f;
  box-shadow:
    -6px 9px 0 #17120f,
    7px -3px 0 #17120f,
    13px 10px 0 #17120f,
    2px 18px 0 #17120f;
}

.portrait-hoodie {
  position: absolute;
  left: 8px;
  bottom: -5px;
  width: 58px;
  height: 48px;
  background: #353334;
  border: 3px solid #161313;
}

.eye,
.brow,
.nose,
.beard {
  position: absolute;
  display: block;
  background: #1b1513;
}

.eye {
  top: 16px;
  width: 5px;
  height: 4px;
}

.eye-left {
  left: 8px;
}

.eye-right {
  right: 8px;
}

.brow {
  top: 11px;
  width: 10px;
  height: 3px;
}

.brow-left {
  left: 5px;
}

.brow-right {
  right: 5px;
}

.nose {
  left: 16px;
  top: 20px;
  width: 4px;
  height: 8px;
  background: #9d5f42;
}

.beard {
  left: 6px;
  bottom: 4px;
  width: 24px;
  height: 12px;
  background: #3a2118;
}

.profile-info h1,
.profile-info p,
.goal-card p,
.stat-card p,
.bottom-panel p,
.bottom-panel h2 {
  margin: 0;
}

.profile-info h1 {
  color: var(--orange);
  font-size: 16px;
  line-height: 1.1;
}

.profile-info p {
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  line-height: 1;
}

.money-line strong,
.stat-value strong {
  color: var(--green);
}

.followers-line strong {
  color: var(--text);
}

.cash-icon,
.person-icon,
.food-icon,
.smile-icon {
  display: inline-block;
  width: 18px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
}

.cash-icon {
  background: var(--green);
  border: 2px solid #142c13;
  box-shadow: inset 0 0 0 2px #9be35d;
}

.person-icon {
  width: 16px;
  height: 16px;
  background: var(--violet);
  clip-path: polygon(35% 0, 65% 0, 80% 20%, 80% 45%, 100% 60%, 100% 100%, 0 100%, 0 60%, 20% 45%, 20% 20%);
}

.food-icon {
  width: 18px;
  height: 18px;
  background: #f0a02c;
  border: 2px solid #5b3215;
  clip-path: polygon(16% 28%, 35% 8%, 68% 8%, 88% 30%, 88% 68%, 68% 88%, 32% 88%, 12% 68%);
}

.smile-icon {
  width: 19px;
  height: 19px;
  background: #f3a51f;
  border: 2px solid #5f3510;
}

.goal-card {
  min-height: 82px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding: 8px 10px;
}

.goal-card p {
  font-size: 11px;
  line-height: 1.2;
}

.goal-mini {
  padding-top: 6px;
  border-top: 1px solid #3a2d24;
  text-align: center;
}

.goal-mini strong {
  display: block;
  color: var(--orange);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.goal-mini span {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.goal-progress-top {
  height: 9px;
  margin-top: 5px;
}

.panel-title {
  color: var(--orange);
  font-weight: 700;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 0;
  flex: 0 0 auto;
}

.stat-card {
  min-height: 52px;
  padding: 7px 5px 5px;
}

.stat-title {
  text-align: center;
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
}

.stat-value {
  margin-top: 8px !important;
  font-size: 13px;
  white-space: nowrap;
}

.meter-row,
.mood-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.bolt {
  display: inline-block;
  width: 15px;
  height: 20px;
  background: #ffb22b;
  clip-path: polygon(55% 0, 18% 52%, 45% 52%, 30% 100%, 83% 38%, 55% 38%);
  box-shadow: 0 0 0 2px #5d3410;
}

.meter {
  --value: 100;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.meter.small {
  grid-template-columns: repeat(5, 1fr);
}

.meter.mood {
  grid-template-columns: repeat(7, 1fr);
  margin-top: 7px;
}

.meter span {
  height: 10px;
  background: #2b291f;
  border: 1px solid #070807;
}

.meter span.on {
  background: var(--green);
  box-shadow: inset 0 0 0 1px #93ed5c;
}

.meter.mood span.on {
  background: #f0a11d;
  box-shadow: inset 0 0 0 1px #ffd15b;
}

.percent {
  margin-top: 3px !important;
  text-align: center;
  color: var(--green);
  font-size: 10px;
}

.mood-row strong {
  font-size: 13px;
}

.room-wrap {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-top: 0;
  padding: 3px;
  background: #0a0b0b;
}

.room {
  position: relative;
  width: 100%;
  max-width: min(100%, 58svh);
  height: 100%;
  aspect-ratio: 826 / 1202;
  overflow: hidden;
  background: var(--wall-dark);
  border: 5px solid #696258;
  cursor: none;
  box-shadow:
    inset 0 0 0 3px #1d1815,
    0 0 0 2px #080909;
  image-rendering: pixelated;
}

.room * {
  cursor: none;
}

.room-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  image-rendering: pixelated;
}

.room > .wall,
.room > .floor,
.room > .window,
.room > .plant,
.room > .radiator,
.room > .cabinet,
.room > .boxes,
.room > .fridge,
.room > .bottle,
.room > .water,
.room > .bucket,
.room > .mattress,
.room > .table,
.room > .stool,
.room > .bottom-shelf,
.room > .door,
.room > .trash,
.room > .sergey {
  display: none;
}

.hotspot {
  position: absolute;
  z-index: 30;
  padding: 0;
  border: 0;
  background: transparent;
}

.hotspot:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.hotspot-bed {
  left: 12%;
  top: 34%;
  width: 24%;
  height: 24%;
}

.hotspot-chair {
  left: 63%;
  top: 38%;
  width: 17%;
  height: 20%;
}

.hotspot-center {
  left: 41%;
  top: 38%;
  width: 22%;
  height: 24%;
}

.thought-bubble {
  --bubble-x: 50%;
  --bubble-y: 47%;
  position: absolute;
  left: var(--bubble-x);
  top: var(--bubble-y);
  z-index: 28;
  max-width: 48%;
  min-width: 112px;
  padding: 7px 9px;
  color: var(--text);
  background: rgba(18, 20, 20, 0.94);
  border: 2px solid var(--border-mid);
  box-shadow:
    inset 0 0 0 2px #0a0b0a,
    0 3px 0 rgba(0, 0, 0, 0.45);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%) scale(0.96);
  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out,
    left 1180ms cubic-bezier(0.22, 0.78, 0.22, 1),
    top 1180ms cubic-bezier(0.22, 0.78, 0.22, 1);
}

.thought-bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.thought-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 10px;
  height: 10px;
  background: rgba(18, 20, 20, 0.94);
  border-right: 2px solid var(--border-mid);
  border-bottom: 2px solid var(--border-mid);
  transform: translateX(-50%) rotate(45deg);
}

.scene-item {
  position: absolute;
  display: none;
  z-index: 12;
  image-rendering: pixelated;
  pointer-events: none;
}

.scene-bed {
  left: 13.5%;
  top: 36.5%;
  width: 19.5%;
  height: auto;
  z-index: 9;
}

.scene-chair {
  left: 65.8%;
  top: 38%;
  width: 8.2%;
  height: auto;
}

.actor,
.actor * {
  image-rendering: pixelated;
}

.actor {
  --actor-x: 50%;
  --actor-y: 60%;
  position: absolute;
  left: var(--actor-x);
  top: var(--actor-y);
  width: 9.5%;
  height: 16%;
  z-index: 20;
  background: url("./assets/generated/characters/sergey/idle_front_clean.png") center bottom / contain no-repeat;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  will-change: left, top;
  transition:
    left 1180ms cubic-bezier(0.22, 0.78, 0.22, 1),
    top 1180ms cubic-bezier(0.22, 0.78, 0.22, 1),
    transform 260ms ease-out;
}

.actor > * {
  display: none;
}

.actor.is-walking {
  background-image: url("./assets/generated/characters/sergey/walk_front_sheet.png");
  background-size: 400% 100%;
  animation: walk-sheet 760ms steps(4, end) infinite;
}

.actor.is-waving {
  width: 9.5%;
  height: 16%;
  background-image: url("./assets/generated/characters/sergey/wave_sheet.png");
  background-size: 400% 100%;
  animation:
    actor-bob 420ms steps(2, end) infinite,
    wave-sheet 920ms steps(4, end) infinite;
}

.actor.is-waving::after {
  content: none;
}

.actor.is-waving::before {
  content: none;
}

.actor.is-walking .leg-a {
  animation: walk-left 360ms steps(2, end) infinite;
}

.actor.is-walking .leg-b {
  animation: walk-right 360ms steps(2, end) infinite;
}

.actor.is-walking .arm-a {
  animation: walk-right 360ms steps(2, end) infinite;
}

.actor.is-walking .arm-b {
  animation: walk-left 360ms steps(2, end) infinite;
}

.actor.is-sitting {
  width: 8.5%;
  height: 12.5%;
  background-image: url("./assets/generated/characters/sergey/sit_front.png");
  transform: translate(-50%, -100%);
}

.actor.is-lying {
  width: 11%;
  height: 18%;
  background-image: url("./assets/generated/characters/sergey/lie_bed_vertical.png");
  transform: translate(-50%, -50%);
}

@keyframes actor-bob {
  0% { margin-top: 0; }
  50% { margin-top: -3px; }
  100% { margin-top: 0; }
}

@keyframes walk-sheet {
  0%,
  24.99% {
    background-position: 0 100%;
  }

  25%,
  49.99% {
    background-position: 33.333% 100%;
  }

  50%,
  74.99% {
    background-position: 66.666% 100%;
  }

  75%,
  99.99% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0 100%;
  }
}

@keyframes wave-sheet {
  0%,
  24.99% {
    background-position: 0 100%;
  }

  25%,
  49.99% {
    background-position: 33.333% 100%;
  }

  50%,
  74.99% {
    background-position: 66.666% 100%;
  }

  75%,
  99.99% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0 100%;
  }
}

@keyframes walk-left {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes walk-right {
  0% { transform: translateY(-4px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

@keyframes wave-arm {
  0% { transform: rotate(-38deg); }
  50% { transform: rotate(-72deg); }
  100% { transform: rotate(-38deg); }
}

@keyframes wave-hand {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-7px, -8px); }
  100% { transform: translate(0, 0); }
}

.wall,
.floor,
.window,
.plant,
.radiator,
.cabinet,
.boxes,
.fridge,
.bottle,
.water,
.bucket,
.mattress,
.table,
.stool,
.bottom-shelf,
.door,
.trash,
.sergey {
  position: absolute;
}

.back-wall {
  left: 4%;
  top: 2%;
  width: 92%;
  height: 30%;
  background: var(--wall);
  border-bottom: 4px solid #45382e;
}

.left-wall,
.right-wall {
  top: 2%;
  width: 4%;
  height: 80%;
  background: #807164;
}

.left-wall {
  left: 0;
}

.right-wall {
  right: 0;
}

.floor {
  left: 4%;
  top: 31%;
  width: 92%;
  height: 52%;
  background: var(--floor);
}

.plank {
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--floor-line);
  position: absolute;
}

.p1 { top: 16%; }
.p2 { top: 32%; }
.p3 { top: 48%; }
.p4 { top: 64%; }
.p5 { top: 80%; }

.floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(34, 24, 18, 0.7) 42px 44px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(30, 21, 16, 0.55) 18px 20px);
}

.stain,
.crack,
.floor-dirt {
  position: absolute;
  background: #2d251f;
}

.stain-a {
  left: 16%;
  top: 14%;
  width: 38px;
  height: 20px;
}

.stain-b {
  right: 11%;
  top: 10%;
  width: 26px;
  height: 36px;
}

.crack-a {
  left: 28%;
  top: 6%;
  width: 48px;
  height: 3px;
  box-shadow: 18px 7px 0 #2d251f, 38px 2px 0 #2d251f;
}

.crack-b {
  right: 18%;
  top: 23%;
  width: 42px;
  height: 3px;
  box-shadow: -12px 9px 0 #2d251f;
}

.d1 {
  left: 14%;
  top: 74%;
  width: 46px;
  height: 14px;
}

.d2 {
  right: 23%;
  top: 16%;
  width: 31px;
  height: 18px;
}

.d3 {
  left: 51%;
  top: 52%;
  width: 21px;
  height: 9px;
}

.window {
  left: 38%;
  top: 6%;
  width: 30%;
  height: 16%;
  background: #c4c1b8;
  border: 4px solid #2b2a29;
  box-shadow: 0 12px 0 #d8d2c5;
}

.window span {
  position: absolute;
  top: 8%;
  width: 42%;
  height: 74%;
  background: #7392a1;
  border: 3px solid #2c3334;
}

.window span:first-child { left: 6%; }
.window span:last-child { right: 6%; }

.plant {
  left: 45%;
  top: 20%;
  width: 16px;
  height: 18px;
  background: #6b3d20;
  border: 2px solid #251915;
}

.plant::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -14px;
  width: 10px;
  height: 16px;
  background: #447d36;
  box-shadow: -6px 5px 0 #2f622c, 7px 4px 0 #315f2d;
}

.radiator {
  left: 44%;
  top: 25%;
  width: 18%;
  height: 7%;
  background: repeating-linear-gradient(90deg, #b7a88f 0 7px, #5d5143 7px 10px);
  border: 3px solid #403429;
}

.cabinet {
  left: 8%;
  top: 13%;
  width: 24%;
  height: 25%;
  background: #5b351f;
  border: 4px solid #211712;
}

.cabinet span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  background: #211712;
}

.boxes {
  left: 11%;
  top: 7%;
  width: 13%;
  height: 8%;
  background: #8b5429;
  box-shadow: 29px 8px 0 #343f3e, 4px 19px 0 #6f431f;
  border: 2px solid #20140f;
}

.fridge {
  right: 11%;
  top: 16%;
  width: 18%;
  height: 23%;
  background: #b6b4aa;
  border: 4px solid #312f2f;
}

.fridge span {
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  height: 4px;
  background: #353535;
}

.fridge i {
  position: absolute;
  left: 10%;
  top: 18%;
  width: 5px;
  height: 22px;
  background: #353535;
}

.bottle {
  right: 12%;
  top: 10%;
  width: 18px;
  height: 44px;
  background: #1e2a32;
  border: 3px solid #111;
}

.water {
  right: 24%;
  top: 34%;
  width: 25px;
  height: 44px;
  background: #2d7188;
  border: 3px solid #172f36;
}

.bucket {
  left: 32%;
  top: 29%;
  width: 22px;
  height: 28px;
  background: #8b8172;
  border: 3px solid #29241f;
}

.mattress {
  left: 8%;
  top: 43%;
  width: 28%;
  height: 27%;
  background: #b8b1a0;
  border: 4px solid #3b342c;
  box-shadow: inset -8px -9px 0 rgba(76, 62, 50, 0.45);
}

.mattress span {
  position: absolute;
  left: 18%;
  top: 10%;
  width: 51%;
  height: 18%;
  background: #285064;
  border: 3px solid #17262c;
}

.table {
  right: 12%;
  top: 43%;
  width: 21%;
  height: 17%;
  background: #6b3b23;
  border: 4px solid #241712;
}

.table span {
  position: absolute;
  right: 9%;
  top: 9%;
  width: 27px;
  height: 22px;
  background: #8c8474;
  border: 3px solid #2b2823;
}

.stool {
  right: 17%;
  top: 58%;
  width: 9%;
  height: 9%;
  background: #6c3c22;
  border: 3px solid #21140f;
}

.bottom-shelf {
  right: 8%;
  top: 70%;
  width: 20%;
  height: 12%;
  background: #5c321f;
  border: 4px solid #20140f;
}

.door {
  left: 39%;
  bottom: 0;
  width: 20%;
  height: 14%;
  background: #56301f;
  border: 4px solid #211410;
}

.door::after {
  content: "";
  position: absolute;
  left: 62%;
  top: 48%;
  width: 5px;
  height: 5px;
  background: #b8a076;
}

.trash {
  right: 7%;
  bottom: 2%;
  width: 32px;
  height: 29px;
  background: #15212b;
  border: 3px solid #0a0d10;
  box-shadow: 20px 13px 0 #3b2b20;
}

.sergey {
  left: 48%;
  top: 43%;
  width: 58px;
  height: 116px;
  transform: translateX(-50%);
  z-index: 12;
}

.hair {
  left: 11px;
  top: 0;
  width: 36px;
  height: 26px;
  background: #15100e;
  position: absolute;
  box-shadow: -5px 8px 0 #15100e, 7px 5px 0 #15100e, 13px 12px 0 #15100e;
}

.head {
  left: 14px;
  top: 20px;
  width: 31px;
  height: 33px;
  background: #d09262;
  border: 3px solid #21140f;
  position: absolute;
}

.s-eye,
.s-nose,
.s-mouth,
.s-beard {
  position: absolute;
  display: block;
}

.s-eye {
  top: 12px;
  width: 4px;
  height: 4px;
  background: #19110e;
}

.s-eye.left { left: 6px; }
.s-eye.right { right: 6px; }

.s-nose {
  left: 12px;
  top: 15px;
  width: 4px;
  height: 7px;
  background: #9f5f3e;
}

.s-mouth {
  left: 9px;
  top: 24px;
  width: 12px;
  height: 3px;
  background: #2b1510;
}

.s-beard {
  left: 5px;
  bottom: 2px;
  width: 18px;
  height: 8px;
  background: #352018;
}

.body {
  left: 8px;
  top: 50px;
  width: 43px;
  height: 42px;
  background: #3b393a;
  border: 3px solid #171414;
  position: absolute;
}

.lace {
  top: 8px;
  width: 3px;
  height: 18px;
  background: #d7d4cf;
  position: absolute;
}

.lace.left { left: 15px; }
.lace.right { right: 15px; }

.arm {
  top: 57px;
  width: 10px;
  height: 32px;
  background: #2e2c2d;
  border: 3px solid #171414;
}

.arm-left { left: 1px; }
.arm-right { right: 1px; }

.leg {
  top: 88px;
  width: 13px;
  height: 24px;
  background: #171b1f;
  border: 2px solid #0b0d0f;
}

.leg-left { left: 15px; }
.leg-right { right: 15px; }

.shoe {
  bottom: 0;
  width: 18px;
  height: 7px;
  background: #d7d7d4;
  border: 2px solid #111;
}

.shoe-left { left: 10px; }
.shoe-right { right: 10px; }

.bottom-panel {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 8px;
}

.current-goal {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.current-goal h2 {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
}

.current-goal strong {
  color: var(--green);
  font-size: 12px;
  white-space: nowrap;
}

.live-pill {
  align-self: start;
  padding: 3px 7px;
  color: #10120d !important;
  background: var(--green);
  border: 2px solid #1b4119;
  box-shadow: inset 0 0 0 1px #9be35d;
  font-size: 10px !important;
}

.goal-progress {
  height: 12px;
  margin-top: 7px;
  background: #26231c;
  border: 2px solid #0b0b0a;
}

.bottom-panel > .goal-progress {
  display: none;
}

.dev-controls .bottom-panel > .goal-progress {
  display: block;
}

.goal-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--green);
  box-shadow: inset 0 0 0 2px #9be35d;
  transition: width 160ms steps(5, end);
}

.actions {
  display: none;
  grid-template-columns: 1.2fr 1.1fr 0.7fr;
  gap: 5px;
  margin-top: 7px;
}

.dev-controls .actions {
  display: grid;
}

.actions button {
  min-height: 34px;
  color: #140d08;
  background: var(--orange);
  border: 2px solid #5d3410;
  box-shadow: inset 0 0 0 2px #ffc160, 0 3px 0 #2b1708;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.actions button:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 2px #ffc160, 0 1px 0 #2b1708;
}

.actor-actions {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 6px;
}

.dev-controls .actor-actions {
  display: grid;
}

.actor-actions button {
  min-height: 28px;
  color: var(--text);
  background: #23201b;
  border: 2px solid var(--border-mid);
  box-shadow: inset 0 0 0 2px #0d0d0c;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.actor-actions button:active {
  transform: translateY(1px);
}

.event-feed {
  display: none;
  max-height: 46px;
  overflow: hidden;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.dev-controls .event-feed {
  display: block;
}

.event-feed li {
  padding-top: 5px;
  border-top: 1px solid #332b24;
}

@media (max-width: 390px) {
  .game-shell {
    padding-inline: 5px;
  }

  .goal-card {
    min-height: 82px;
    padding: 11px 9px;
  }

  .stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .stat-card {
    min-height: 50px;
  }

  .actions {
    grid-template-columns: 1.2fr 1.1fr 0.7fr;
  }

  .actor-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}