:root {
  --grass: #1b9a57;
  --grass-dark: #0c5f36;
  --line: #ecfff5;
  --ink: #172017;
  --muted: #617067;
  --panel: #f6faf2;
  --panel-strong: #ffffff;
  --night: #111821;
  --gold: #ffd04c;
  --red: #e73e43;
  --blue: #2364d8;
  --cyan: #72d9ff;
  --shadow: 0 24px 70px rgba(2, 8, 10, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 208, 76, 0.18), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(114, 217, 255, 0.24), transparent 24%),
    linear-gradient(140deg, #111821 0%, #102e2d 48%, #0a1516 100%);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0;
}

.app-shell {
  min-height: 100vh;
}

.top-bar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 16px clamp(16px, 3vw, 34px);
}

.brand-button,
.top-actions,
.team-score,
.match-state,
.shootout-strip,
.power-control,
.match-actions {
  align-items: center;
  display: flex;
}

.brand-button {
  background: transparent;
  color: #fff;
  gap: 12px;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #ffe386, var(--gold) 55%, #d39a1a);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  color: #142018;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(255, 208, 76, 0.18);
  width: 52px;
}

.brand-button strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.brand-button small {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 12px;
  margin-top: 4px;
  text-transform: uppercase;
}

.top-actions {
  gap: 10px;
}

.solid-button,
.ghost-button,
.icon-button {
  border-radius: 8px;
  min-height: 44px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.solid-button,
.ghost-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}

.solid-button {
  background: linear-gradient(180deg, #ffe88a, var(--gold) 58%, #e7a821);
  box-shadow: 0 7px 0 #b98319;
  color: #1d2018;
  padding: 0 18px;
}

.ghost-button {
  background: linear-gradient(180deg, #fff, #e9efe8);
  color: #243024;
  padding: 0 18px;
}

.icon-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: inline-flex;
  font-size: 24px;
  justify-content: center;
  width: 48px;
}

.solid-button:hover,
.ghost-button:hover,
.icon-button:hover,
.game-tile:hover,
.team-button:hover,
.target-button:hover {
  transform: translateY(-2px);
}

.solid-button:disabled,
.target-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

main {
  padding: 0 clamp(16px, 3vw, 34px) 28px;
}

.hidden {
  display: none !important;
}

.home-view {
  align-items: start;
  display: grid;
  gap: clamp(22px, 3vw, 38px);
  grid-template-columns: minmax(280px, 0.72fr) minmax(640px, 1.28fr);
  margin: 0 auto;
  min-height: calc(100vh - 102px);
  max-width: 1480px;
  padding-top: 6px;
}

.home-hero {
  border: 4px solid rgba(255, 255, 255, 0.76);
  border-radius: 8px;
  box-shadow: var(--shadow);
  grid-column: 1 / -1;
  min-height: clamp(360px, 48vw, 620px);
  overflow: hidden;
  position: relative;
}

.home-hero::after {
  background:
    linear-gradient(90deg, rgba(9, 16, 28, 0.9) 0%, rgba(9, 16, 28, 0.62) 34%, rgba(9, 16, 28, 0.02) 70%),
    linear-gradient(180deg, rgba(9, 16, 28, 0.02), rgba(9, 16, 28, 0.4));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-hero img {
  display: block;
  filter: saturate(1.08) contrast(1.04);
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.home-hero-content {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: center;
  max-width: 560px;
  padding: clamp(24px, 6vw, 70px);
  position: relative;
  z-index: 1;
}

.home-hero-content h1 {
  font-size: clamp(54px, 8vw, 108px);
  line-height: 0.88;
  margin: 0;
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.home-hero-content p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.34;
  margin: 0;
}

.home-hero-content .solid-button {
  align-self: flex-start;
  min-height: 50px;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-hero-actions .solid-button,
.home-hero-actions .ghost-button {
  min-height: 50px;
}

.home-copy {
  align-self: center;
  color: #fff;
  max-width: 540px;
}

.eyebrow,
.section-title p {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.home-copy h2 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: 0.96;
  margin: 12px 0 18px;
  max-width: 720px;
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}

.lead {
  color: rgba(255, 255, 255, 0.76);
  font-size: 19px;
  line-height: 1.45;
  margin: 0;
  max-width: 560px;
}

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.home-stats span {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
}

.home-stats strong {
  color: #fff;
  font-size: 19px;
}

.site-nav-link {
  min-height: 44px;
}

.ad-slot {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 243, 235, 0.92));
  border: 2px dashed rgba(97, 112, 103, 0.5);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 92px;
  text-align: center;
}

.ad-slot span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.ad-slot small {
  font-size: 12px;
  font-weight: 800;
}

.home-view.hidden ~ .home-only {
  display: none;
}

.ad-slot-wide {
  margin: 26px auto;
  max-width: 970px;
  width: min(100%, 970px);
}

.arcade-ad,
.factory-ad {
  margin-bottom: 18px;
  margin-top: 0;
}

.site-info {
  color: #fff;
  display: grid;
  gap: 22px;
  margin: 0 auto 34px;
  max-width: 1180px;
}

.site-info h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  margin: 10px 0 12px;
}

.site-info p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 820px;
}

.info-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-grid article {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 18px;
}

.info-grid strong {
  color: #fff;
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.info-grid p {
  font-size: 14px;
}

.site-footer {
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1480px;
  padding: 16px clamp(16px, 3vw, 34px) 28px;
}

.site-footer span {
  font-weight: 900;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  text-decoration: none;
}

.legal-layout {
  margin: 0 auto;
  max-width: 940px;
  padding: 20px clamp(16px, 3vw, 34px) 34px;
}

.legal-card {
  background: rgba(246, 250, 242, 0.98);
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 42px);
}

.legal-card h1 {
  font-size: clamp(38px, 5vw, 66px);
  line-height: 0.96;
  margin: 10px 0 8px;
}

.legal-card h2 {
  font-size: 24px;
  margin: 28px 0 8px;
}

.legal-card p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.legal-updated {
  font-weight: 900;
}

.contact-box {
  background: #111821;
  border-radius: 8px;
  color: #fff;
  margin: 24px 0;
  padding: 18px;
}

.contact-box span {
  color: rgba(255, 255, 255, 0.62);
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.contact-box strong {
  color: var(--gold);
  display: block;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.05;
  margin: 8px 0;
  overflow-wrap: anywhere;
}

.contact-box p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.library-button {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.game-library {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.game-tile {
  align-self: center;
  background: linear-gradient(180deg, #fff, #eef5ea);
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--ink);
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto;
  min-height: 560px;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  text-decoration: none;
}

.game-library a,
.game-library button,
.game-tile,
.game-tile *,
.game-tile:hover,
.game-tile:focus,
.game-tile:visited {
  text-decoration: none;
}

.game-tile::after {
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.34) 50%, transparent 59%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-30%);
  transition: opacity 0.2s ease, transform 0.32s ease;
}

.game-tile:hover::after {
  opacity: 1;
  transform: translateX(18%);
}

.tile-art {
  background:
    linear-gradient(180deg, rgba(7, 12, 20, 0.78) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.2), transparent 46%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%) 0 0 / 74px 74px,
    linear-gradient(155deg, #21a764, #0d6d3f);
  display: block;
  min-height: 360px;
  overflow: hidden;
  position: relative;
}

.tile-image {
  background: #101820;
}

.tile-image img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  transform: scale(1.01);
  transition: transform 0.32s ease, filter 0.32s ease;
  width: 100%;
}

.game-tile:hover .tile-image img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.06);
}

.penalty-tile {
  background:
    linear-gradient(180deg, #fffdf2 0%, #edf8ff 48%, #e7f4e8 100%);
  border-color: rgba(255, 239, 163, 0.95);
  box-shadow: 0 28px 76px rgba(2, 8, 10, 0.48), 0 0 0 1px rgba(255, 208, 76, 0.35);
}

.penalty-tile .tile-image {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 18%),
    linear-gradient(180deg, #0c2a75, #127344);
}

.penalty-tile .tile-image::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(0deg, rgba(12, 96, 40, 0.12), transparent 36%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.penalty-tile .tile-image::after {
  background: linear-gradient(180deg, transparent 42%, rgba(2, 8, 10, 0.34));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.penalty-tile .tile-image img {
  object-position: center center;
  transform: scale(1.015);
}

.penalty-tile:hover .tile-image img {
  filter: saturate(1.16) contrast(1.06);
  transform: scale(1.075);
}

.penalty-feature-badge {
  align-items: center;
  background: linear-gradient(180deg, #ffe88a, var(--gold) 58%, #e7a821);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(13, 33, 26, 0.28);
  color: #182017;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  left: 14px;
  letter-spacing: 0;
  min-height: 32px;
  padding: 0 12px;
  position: absolute;
  text-transform: uppercase;
  top: 14px;
  z-index: 2;
}

.penalty-tile .tile-content {
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 208, 76, 0.18), transparent 28%),
    linear-gradient(180deg, #ffffff, #eff8f1);
}

.penalty-tile .tile-kicker {
  color: #0c7c48;
}

.penalty-tile .tile-action {
  background: linear-gradient(180deg, #1f8fff, #2364d8);
  color: #fff;
}

.honda-tile .tile-kicker {
  color: #0c7c48;
}

.honda-tile .tile-action {
  background: linear-gradient(180deg, #ffe88a, #d99616);
  color: #172017;
}

.factory-art {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(145deg, #6fe16b 0%, #48bb67 42%, #22643f 100%);
}

.factory-yard,
.factory-road,
.factory-shell,
.factory-wall,
.factory-floor,
.factory-rack,
.factory-line,
.factory-machine,
.factory-robot,
.factory-truck {
  position: absolute;
}

.factory-yard {
  background:
    linear-gradient(90deg, rgba(9, 64, 45, 0.42) 2px, transparent 2px) 0 0 / 34px 34px,
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(135deg, rgba(217, 255, 134, 0.42), transparent 54%);
  inset: 0;
}

.factory-road {
  background:
    linear-gradient(90deg, transparent 0 45%, #fff 45% 47%, transparent 47% 100%) 0 50% / 70px 10px repeat-x,
    linear-gradient(180deg, #262526, #111417);
  border-bottom: 5px solid #fff;
  border-top: 5px solid #fff;
  bottom: 18px;
  height: 78px;
  left: -8%;
  transform: rotate(-7deg);
  width: 116%;
}

.factory-shell {
  background: linear-gradient(135deg, #f7c459, #f19f32);
  border: 5px solid #fff4ca;
  box-shadow: 0 28px 38px rgba(11, 27, 24, 0.28);
  height: 235px;
  left: 10%;
  top: 92px;
  transform: skewY(-13deg);
  width: 79%;
}

.factory-shell::before {
  background: #b45318;
  bottom: -5px;
  content: "";
  position: absolute;
  right: -34px;
  top: 28px;
  transform: skewY(38deg);
  width: 34px;
}

.factory-wall.back {
  background:
    linear-gradient(90deg, #d96917 0 12px, transparent 12px 22px) 0 34px / 44px 24px repeat-x,
    linear-gradient(180deg, #f8cf67, #e4a341);
  height: 70px;
  left: 14%;
  top: 72px;
  transform: skewY(-13deg);
  width: 70%;
}

.factory-wall.side {
  background:
    linear-gradient(90deg, #111 0 18px, #31b8ff 18px 40px, #111 40px 44px) 12px 78px / 56px 34px repeat-x,
    linear-gradient(180deg, #f06a14, #c74f10);
  height: 156px;
  left: 12%;
  top: 190px;
  transform: skewY(-13deg);
  width: 74%;
}

.factory-floor {
  background:
    linear-gradient(90deg, rgba(86, 74, 81, 0.17) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(86, 74, 81, 0.14) 1px, transparent 1px) 0 0 / 28px 28px,
    #c8b5c0;
  border: 4px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 4px rgba(141, 107, 121, 0.16);
  height: 190px;
  left: 18%;
  top: 134px;
  transform: skewY(-13deg);
  width: 58%;
}

.factory-rack {
  background:
    linear-gradient(90deg, #a95420 0 12px, transparent 12px 20px) 0 0 / 44px 100% repeat-x,
    linear-gradient(180deg, #fff 0 28%, #d67726 28% 31%, #fff 31% 60%, #d67726 60% 64%, #fff 64%);
  border: 3px solid #332113;
  box-shadow: 10px 14px 18px rgba(0, 0, 0, 0.22);
  height: 88px;
  transform: skewY(-13deg);
  width: 118px;
}

.factory-rack.rack-a {
  left: 23%;
  top: 150px;
}

.factory-rack.rack-b {
  left: 61%;
  top: 185px;
}

.factory-line {
  background:
    linear-gradient(90deg, #fff 0 7px, transparent 7px 20px) 0 50% / 34px 6px repeat-x,
    linear-gradient(180deg, #1f99b8, #0d5a75);
  border: 4px solid #f4d14e;
  border-radius: 8px;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.22);
  height: 52px;
  left: 32%;
  top: 249px;
  transform: skewY(-13deg);
  width: 230px;
}

.factory-machine {
  background:
    linear-gradient(90deg, #e73e43 0 32%, transparent 32% 42%, #e73e43 42% 74%, transparent 74%),
    linear-gradient(180deg, #ffd04c, #c6881b);
  border: 4px solid #4a3017;
  border-radius: 8px;
  box-shadow: 10px 14px 18px rgba(0, 0, 0, 0.24);
  height: 74px;
  left: 45%;
  top: 185px;
  transform: skewY(-13deg);
  width: 124px;
}

.factory-robot {
  background:
    radial-gradient(circle at 32% 35%, #172017 0 6px, transparent 7px),
    radial-gradient(circle at 68% 35%, #172017 0 6px, transparent 7px),
    linear-gradient(180deg, #7ce5eb, #48acb5);
  border: 5px solid #243034;
  border-radius: 8px;
  box-shadow: 8px 14px 17px rgba(0, 0, 0, 0.25);
  height: 78px;
  right: 19%;
  top: 104px;
  width: 78px;
}

.factory-robot::before,
.factory-robot::after {
  background: #243034;
  content: "";
  height: 28px;
  position: absolute;
  top: 16px;
  width: 8px;
}

.factory-robot::before {
  left: -12px;
}

.factory-robot::after {
  right: -12px;
}

.factory-truck {
  background:
    radial-gradient(circle, #111 0 10px, #fff 11px 15px, transparent 16px) 25px 54px / 76px 24px repeat-x,
    linear-gradient(90deg, #fff 0 56%, #e73e43 56% 100%);
  border: 4px solid #111821;
  border-radius: 5px;
  bottom: 53px;
  box-shadow: 12px 18px 20px rgba(0, 0, 0, 0.28);
  height: 70px;
  left: 57%;
  transform: rotate(-7deg);
  width: 170px;
}

.tile-crowd {
  background:
    radial-gradient(circle, #ffdf6e 0 3px, transparent 4px) 0 0 / 31px 22px,
    radial-gradient(circle, #ff6b70 0 3px, transparent 4px) 13px 7px / 34px 22px,
    radial-gradient(circle, #72d9ff 0 3px, transparent 4px) 6px 12px / 29px 22px;
  height: 86px;
  left: 0;
  opacity: 0.82;
  position: absolute;
  right: 0;
  top: 0;
}

.tile-light {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.46), transparent 58%);
  height: 300px;
  position: absolute;
  top: 18px;
  width: 170px;
}

.tile-light.left {
  left: 16px;
  transform: skewX(-16deg);
}

.tile-light.right {
  right: 16px;
  transform: scaleX(-1) skewX(-16deg);
}

.tile-goal {
  border: 8px solid #fff;
  border-bottom: 0;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24), inset 0 0 0 2px rgba(17, 24, 33, 0.18);
  height: 155px;
  left: 50%;
  position: absolute;
  top: 62px;
  transform: translateX(-50%);
  width: 62%;
}

.tile-goal::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px) 0 0 / 100% 22px;
  content: "";
  inset: 0;
  position: absolute;
}

.tile-keeper,
.tile-player {
  background: #ffcf9e;
  border-radius: 50%;
  box-shadow: 0 16px 20px rgba(0, 0, 0, 0.22);
  height: 42px;
  position: absolute;
  width: 42px;
}

.tile-keeper {
  left: 50%;
  top: 176px;
  transform: translateX(-50%);
}

.tile-player {
  bottom: 72px;
  left: 28%;
}

.tile-keeper::after,
.tile-player::after {
  background: var(--red);
  border-radius: 14px 14px 8px 8px;
  content: "";
  height: 62px;
  left: 5px;
  position: absolute;
  top: 36px;
  width: 32px;
}

.tile-player::after {
  background: #2364d8;
}

.tile-ball {
  background:
    radial-gradient(circle at 48% 48%, #fff 0 32%, transparent 33%),
    conic-gradient(#111 0 20%, #fff 20% 39%, #111 39% 57%, #fff 57% 79%, #111 79%);
  border: 2px solid #111;
  border-radius: 50%;
  bottom: 86px;
  box-shadow: 0 16px 22px rgba(0, 0, 0, 0.28);
  height: 46px;
  position: absolute;
  right: 34%;
  width: 46px;
}

.mines-art {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 38%),
    linear-gradient(180deg, #29313a, #151a20);
}

.mines-grid-preview {
  background: #0e1318;
  border: 6px solid #f2f6f0;
  box-shadow: 0 28px 44px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(5, 1fr);
  height: min(76%, 280px);
  left: 50%;
  padding: 12px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: min(78%, 300px);
}

.mines-grid-preview span {
  align-items: center;
  background: linear-gradient(145deg, #93a7aa, #51646a);
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  box-shadow: inset 0 -5px 0 rgba(12, 18, 22, 0.24);
  color: #fff;
  display: flex;
  font-size: 22px;
  font-weight: 900;
  justify-content: center;
}

.mines-grid-preview .open {
  background: linear-gradient(180deg, #e8eee7, #cdd8cf);
  box-shadow: inset 0 0 0 2px rgba(74, 91, 80, 0.18);
}

.mines-grid-preview .n1 {
  color: #2364d8;
}

.mines-grid-preview .n2 {
  color: #15824d;
}

.mines-grid-preview .n3 {
  color: #e73e43;
}

.mines-grid-preview .flag {
  background: linear-gradient(180deg, #ffe88a, var(--gold));
  color: #172017;
}

.mines-grid-preview .mine-dot {
  background:
    radial-gradient(circle at 50% 50%, #111820 0 28%, transparent 30%),
    radial-gradient(circle at 50% 50%, #ffd04c 0 50%, transparent 52%),
    linear-gradient(180deg, #f2f6f0, #cbd4cc);
}

.mine-radar,
.mine-spark {
  border-radius: 50%;
  position: absolute;
}

.mine-radar {
  border: 4px solid rgba(255, 208, 76, 0.46);
  height: 340px;
  left: 50%;
  opacity: 0.72;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
}

.mine-spark {
  background: #ffd04c;
  box-shadow: 0 0 28px rgba(255, 208, 76, 0.65);
  height: 16px;
  width: 16px;
}

.mine-spark.a {
  right: 18%;
  top: 18%;
}

.mine-spark.b {
  bottom: 18%;
  left: 16%;
}

.tile-content {
  display: block;
  padding: 20px;
}

.tile-kicker {
  color: var(--red);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.tile-content strong {
  display: block;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.02;
}

.tile-content small {
  color: var(--muted);
  display: block;
  font-size: 15px;
  line-height: 1.4;
  margin-top: 6px;
}

.tile-action {
  align-items: center;
  background: linear-gradient(180deg, #ffe88a, var(--gold));
  border-radius: 8px;
  color: #1d2018;
  display: inline-flex;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  margin-top: 16px;
  min-height: 38px;
  padding: 0 14px;
}

.factory-tile .tile-action {
  background: linear-gradient(180deg, #223041, #111821);
  color: #fff;
}

.adivino-tile .tile-action {
  background: linear-gradient(180deg, #fff1a4, #f8c95a 58%, #b77d1b);
  color: #1a1208;
}

.snake-art,
.memory-art,
.meteoro-art,
.forest-art {
  background: #101820;
}

.snake-art {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 208, 76, 0.22), transparent 24%),
    linear-gradient(90deg, rgba(114, 217, 255, 0.12) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(114, 217, 255, 0.12) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(145deg, #10202a, #111821);
}

.snake-grid-art,
.snake-body-art,
.snake-head-art,
.snake-food-art,
.memory-orbit,
.memory-card-art,
.meteor-lane-art,
.meteor-starfield-art,
.meteor-rock-art,
.meteor-ship-art,
.meteor-boost-art {
  position: absolute;
}

.snake-grid-art {
  border: 3px solid rgba(114, 217, 255, 0.3);
  border-radius: 8px;
  inset: 38px;
}

.snake-body-art,
.snake-head-art {
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(66, 214, 111, 0.5);
  height: 42px;
  width: 42px;
}

.snake-body-art {
  background: linear-gradient(180deg, #49df73, #1d9f55);
}

.snake-head-art {
  background:
    radial-gradient(circle at 35% 38%, #101820 0 4px, transparent 5px),
    radial-gradient(circle at 65% 38%, #101820 0 4px, transparent 5px),
    linear-gradient(180deg, #74f093, #2ab95d);
  left: 58%;
  top: 42%;
}

.snake-body-art.s1 { left: 48%; top: 42%; }
.snake-body-art.s2 { left: 38%; top: 42%; }
.snake-body-art.s3 { left: 38%; top: 54%; }
.snake-body-art.s4 { left: 28%; top: 54%; }

.snake-food-art {
  background: #ffd04c;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 208, 76, 0.72);
  height: 34px;
  right: 22%;
  top: 25%;
  width: 34px;
}

.memory-art {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 208, 76, 0.28), transparent 20%),
    radial-gradient(circle at 74% 62%, rgba(66, 214, 111, 0.18), transparent 26%),
    linear-gradient(150deg, #3b276f, #111821 72%);
}

.memory-orbit {
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  height: 310px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  width: 310px;
}

.memory-card-art {
  align-items: center;
  background: linear-gradient(180deg, #fff, #e7efe8);
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28);
  color: #172017;
  display: flex;
  font-size: 28px;
  font-weight: 900;
  height: 82px;
  justify-content: center;
  width: 66px;
}

.memory-card-art.c1 { left: 18%; top: 18%; transform: rotate(-12deg); }
.memory-card-art.c2 { right: 24%; top: 15%; transform: rotate(10deg); }
.memory-card-art.c3 { left: 34%; top: 45%; transform: rotate(8deg); }
.memory-card-art.c4 { right: 16%; top: 48%; transform: rotate(-8deg); }
.memory-card-art.c5 { left: 20%; bottom: 16%; transform: rotate(14deg); }
.memory-card-art.c6 { right: 34%; bottom: 14%; transform: rotate(-14deg); }

.meteoro-art {
  background:
    radial-gradient(circle at 16% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 64% 20%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 46%, #fff 0 2px, transparent 3px),
    linear-gradient(180deg, #091221, #102b2b);
}

.meteor-lane-art {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border-left: 4px dashed rgba(255, 208, 76, 0.6);
  border-right: 4px dashed rgba(255, 208, 76, 0.6);
  bottom: 0;
  left: 24%;
  top: 0;
  width: 52%;
}

.meteor-starfield-art {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2px, transparent 3px) 0 0 / 48px 62px,
    radial-gradient(circle, rgba(114, 217, 255, 0.8) 0 2px, transparent 3px) 18px 24px / 66px 54px;
  inset: 0;
  opacity: 0.62;
}

.meteor-rock-art {
  background: linear-gradient(135deg, #8c7475, #44383d);
  border-radius: 46% 54% 42% 58%;
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.28);
  height: 58px;
  width: 66px;
}

.meteor-rock-art.r1 { left: 20%; top: 18%; transform: rotate(18deg); }
.meteor-rock-art.r2 { right: 18%; top: 34%; transform: rotate(-22deg); }
.meteor-rock-art.r3 { left: 32%; bottom: 22%; transform: rotate(8deg); }

.meteor-ship-art {
  border-bottom: 82px solid #72d9ff;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  bottom: 58px;
  filter: drop-shadow(0 0 20px rgba(114, 217, 255, 0.58));
  left: 50%;
  transform: translateX(-50%);
}

.meteor-boost-art {
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 72px solid #ffd04c;
  bottom: 8px;
  filter: drop-shadow(0 0 22px rgba(255, 208, 76, 0.72));
  left: 50%;
  transform: translateX(-50%);
}

.snake-tile .tile-action {
  background: linear-gradient(180deg, #62ee82, #23b759);
}

.memory-tile .tile-action {
  background: linear-gradient(180deg, #93b7ff, #3d7eff);
  color: #fff;
}

.meteoro-tile .tile-action {
  background: linear-gradient(180deg, #ff9587, #ff6b5b);
  color: #fff;
}

.rocket-tile .tile-action {
  background: linear-gradient(180deg, #72d9ff, #2d79ff);
  color: #fff;
}

.bomber-tile .tile-action {
  background: linear-gradient(180deg, #ffe88a, #ff8f37);
  color: #172017;
}

.forest-tile .tile-action {
  background: linear-gradient(180deg, #7cf29c, #24b85b);
  color: #102017;
}

.breakout-tile .tile-action {
  background: linear-gradient(180deg, #ffd04c, #e7a821);
}

.flappy-tile .tile-action {
  background: linear-gradient(180deg, #72d9ff, #2d79ff);
  color: #fff;
}

.runner-tile .tile-action {
  background: linear-gradient(180deg, #ff9587, #ff4d4d);
  color: #fff;
}

.stickmanhook-tile .tile-action {
  background: linear-gradient(180deg, #72e3ff, #19a0d7);
  color: #07151c;
}

.simon-tile .tile-action {
  background: linear-gradient(180deg, #93b7ff, #704cff);
  color: #fff;
}

.puzzle2048-tile .tile-action {
  background: linear-gradient(180deg, #7cf29c, #24b85b);
}

.factory-page {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1440px;
}

.factory-intro {
  color: #fff;
  display: grid;
  gap: 8px;
  max-width: 820px;
}

.factory-intro h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.96;
  margin: 0;
  text-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
}

.factory-game-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(560px, 1fr) minmax(290px, 340px);
}

.factory-scene-panel,
.factory-control-panel {
  background: rgba(246, 250, 242, 0.98);
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.factory-arena {
  min-height: 620px;
}

.factory-worker {
  background:
    radial-gradient(circle at 50% 18%, #ffcf9e 0 13px, transparent 14px),
    linear-gradient(90deg, transparent 0 22px, #2364d8 22px 54px, transparent 54px),
    linear-gradient(180deg, transparent 0 36px, #f06a14 36px 82px, transparent 82px);
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.24));
  height: 86px;
  position: absolute;
  width: 78px;
}

.factory-worker::before {
  background: #ffd04c;
  border-radius: 14px 14px 4px 4px;
  content: "";
  height: 18px;
  left: 23px;
  position: absolute;
  top: 2px;
  width: 32px;
}

.factory-worker.worker-a {
  left: 31%;
  top: 302px;
}

.factory-worker.worker-b {
  left: 53%;
  top: 308px;
}

.factory-label {
  background: rgba(17, 24, 33, 0.86);
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 8px;
  position: absolute;
  text-transform: uppercase;
}

.factory-label::after {
  background: var(--gold);
  bottom: -18px;
  content: "";
  height: 18px;
  left: 50%;
  position: absolute;
  width: 3px;
}

.factory-label.label-rec {
  left: 18%;
  top: 124px;
}

.factory-label.label-prod {
  left: 43%;
  top: 148px;
}

.factory-label.label-out {
  left: 67%;
  top: 244px;
}

.factory-control-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.factory-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.factory-stats div,
.factory-meter {
  background: linear-gradient(180deg, #fff, #f2f7ee);
  border: 2px solid #d7e3d6;
  border-radius: 8px;
  box-shadow: inset 0 -10px 18px rgba(10, 42, 24, 0.04);
  min-height: 74px;
  padding: 12px;
}

.factory-stats span,
.factory-meter span {
  color: var(--blue);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-stats strong {
  display: block;
  font-size: 24px;
  margin-top: 6px;
}

.factory-meter {
  display: grid;
  gap: 8px;
}

.factory-meter b {
  font-size: 18px;
}

.factory-meter i {
  background: linear-gradient(90deg, #39d66f, #72d9ff);
  border-radius: 999px;
  display: block;
  height: 10px;
  max-width: 100%;
  transition: width 0.18s ease;
}

.factory-actions {
  display: grid;
  gap: 10px;
}

.game-view {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(250px, 280px) minmax(460px, 1fr) minmax(270px, 300px);
  margin: 0 auto;
  max-width: 1600px;
  min-height: calc(100vh - 108px);
}

.side-panel,
.stadium-panel,
.control-panel {
  background: rgba(246, 250, 242, 0.98);
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.side-panel,
.control-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 15px;
}

.section-title h2 {
  color: var(--ink);
  font-size: 26px;
  line-height: 1.05;
  margin: 4px 0 0;
}

.rival-title {
  margin-top: 4px;
}

.team-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-button {
  background: linear-gradient(180deg, #fff, #f2f7ee);
  border: 2px solid #d7e3d6;
  border-radius: 8px;
  box-shadow: inset 0 -10px 18px rgba(10, 42, 24, 0.04);
  min-height: 62px;
  overflow: hidden;
  padding: 9px;
  position: relative;
  text-align: left;
}

.team-button::before {
  background: linear-gradient(90deg, var(--team-a), var(--team-b));
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.team-button.selected {
  border-color: var(--gold);
  box-shadow: 0 12px 24px rgba(255, 208, 76, 0.18), inset 0 0 0 2px var(--gold);
}

.team-button strong,
.team-button span {
  display: block;
}

.team-button strong {
  font-size: 16px;
  margin-top: 8px;
}

.team-button span {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.wide {
  width: 100%;
}

.stadium-panel {
  background: #071115;
  display: grid;
  grid-template-rows: auto auto minmax(340px, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.stadium-ribbon {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 208, 76, 0.18), transparent 20% 80%, rgba(255, 208, 76, 0.18)),
    #0c1218;
  color: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  min-height: 40px;
  padding: 9px 14px;
}

.stadium-ribbon span {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 10px, transparent 10px 20px);
  border-radius: 999px;
  height: 8px;
}

.stadium-ribbon b {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scoreboard {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 208, 76, 0.08), transparent 28% 72%, rgba(114, 217, 255, 0.08)),
    #10151c;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: 10px;
  padding: 12px;
}

.team-score {
  background: linear-gradient(90deg, var(--team-a), var(--team-b));
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  justify-content: space-between;
  min-height: 58px;
  padding: 8px 12px;
}

.team-score.opponent {
  background: linear-gradient(90deg, var(--opp-a), var(--opp-b));
}

.team-score span {
  font-size: 24px;
  font-weight: 900;
}

.team-score strong {
  font-size: 38px;
  line-height: 1;
}

.match-state {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  flex-direction: column;
  gap: 2px;
  min-height: 58px;
  justify-content: center;
  text-align: center;
}

.match-state small {
  color: rgba(255, 255, 255, 0.64);
  font-weight: 900;
  text-transform: uppercase;
}

.match-state b {
  color: var(--gold);
  font-size: 19px;
}

#gameCanvas {
  background: #0f6d3f;
  display: block;
  height: 100%;
  min-height: 430px;
  touch-action: none;
  width: 100%;
}

.shootout-strip {
  background: linear-gradient(180deg, #f8fbf5, #e9f0e8);
  border-top: 1px solid #dce7dd;
  gap: 14px;
  justify-content: space-between;
  padding: 12px;
}

.shootout-strip > div {
  min-width: 0;
  width: 50%;
}

.shootout-strip span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.kick-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kick-dot {
  background: #d9e1d8;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  height: 18px;
  width: 18px;
}

.kick-dot.goal {
  background: #25b85f;
}

.kick-dot.miss {
  background: var(--red);
}

.target-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.target-button {
  align-content: center;
  background: linear-gradient(180deg, #fff, #eef4ea);
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  color: #1d261f;
  display: grid;
  font-size: 22px;
  gap: 3px;
  height: 64px;
  justify-items: center;
  line-height: 1;
  box-shadow: inset 0 -10px 16px rgba(22, 132, 71, 0.05);
}

.target-button span {
  font-size: 23px;
}

.target-button small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.target-button.active {
  background: linear-gradient(180deg, #ffed98, var(--gold));
  border-color: #c48b18;
  box-shadow: 0 12px 24px rgba(255, 208, 76, 0.24), inset 0 -8px 14px rgba(184, 131, 25, 0.16);
}

.target-button.active small {
  color: #3d2a00;
}

.aim-status {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(242, 247, 239, 0.95)),
    radial-gradient(circle at 90% 20%, rgba(35, 100, 216, 0.18), transparent 32%);
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
}

.aim-status span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.aim-status strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

.keyboard-hint {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 208, 76, 0.1), transparent),
    rgba(16, 21, 28, 0.94);
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 10px;
}

.keyboard-hint span {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
  text-transform: uppercase;
}

.keyboard-hint kbd {
  background: linear-gradient(180deg, #fff, #dfe8e1);
  border-radius: 6px;
  color: #111820;
  font-size: 12px;
  min-width: 28px;
  padding: 5px 7px;
  text-align: center;
}

.power-control {
  background: linear-gradient(180deg, #fff, #f2f7ef);
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  gap: 10px;
  padding: 12px;
}

.power-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.power-control input {
  accent-color: var(--red);
  min-width: 0;
  width: 100%;
}

.power-control b {
  min-width: 30px;
  text-align: right;
}

.message-card {
  background:
    linear-gradient(180deg, #fff, #f5f8f2);
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  min-height: 116px;
  padding: 14px;
}

.message-card strong {
  display: block;
  font-size: 20px;
}

.message-card p {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
  margin: 8px 0 0;
}

.match-actions {
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.mines-view {
  --mines-board-max: min(100%, max(360px, calc(100dvh - 292px)), 690px);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  height: calc(100vh - 96px);
  height: calc(100dvh - 96px);
  margin: 0 auto;
  max-width: 1320px;
  min-height: 0;
}

.mines-panel,
.mines-board-panel {
  background: rgba(246, 250, 242, 0.98);
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.mines-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}

.mines-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mines-controls label {
  background: linear-gradient(180deg, #fff, #f2f7ef);
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.mines-controls span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.mines-controls input {
  background: #fff;
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  min-height: 40px;
  padding: 0 10px;
  width: 100%;
}

.mines-controls input::-webkit-inner-spin-button,
.mines-controls input::-webkit-outer-spin-button {
  opacity: 0.35;
}

.mines-presets {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.mines-preset {
  min-height: 40px;
  padding: 0 8px;
}

.mines-sound-button[aria-pressed="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 246, 237, 0.96)),
    linear-gradient(90deg, rgba(37, 184, 95, 0.14), transparent);
}

.mines-sound-button[aria-pressed="false"] {
  color: var(--muted);
}

.mines-help {
  background:
    linear-gradient(90deg, rgba(255, 208, 76, 0.1), transparent),
    rgba(16, 21, 28, 0.94);
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 10px;
}

.mines-help span {
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  gap: 8px;
  text-transform: uppercase;
}

.mines-help kbd {
  background: linear-gradient(180deg, #fff, #dfe8e1);
  border-radius: 6px;
  color: #111820;
  font-size: 12px;
  min-width: 58px;
  padding: 5px 7px;
  text-align: center;
}

.mines-board-panel {
  display: grid;
  gap: 14px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
}

.mines-topline {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.mines-topline > div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    #10151c;
  border-radius: 8px;
  color: #fff;
  min-width: 0;
  padding: 10px 12px;
}

.mines-topline span {
  color: rgba(255, 255, 255, 0.66);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mines-topline strong {
  color: var(--gold);
  display: block;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1;
  margin-top: 5px;
}

.mines-topline b {
  font: inherit;
}

.mines-board {
  align-self: center;
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
    #12191f;
  border: 8px solid #10151c;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 22px 44px rgba(8, 14, 18, 0.26);
  display: grid;
  gap: clamp(2px, 0.35rem, 6px);
  grid-template-columns: repeat(var(--mines-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mines-size), minmax(0, 1fr));
  justify-self: center;
  max-width: 720px;
  padding: clamp(6px, 1rem, 14px);
  width: var(--mines-board-max);
}

.mines-cell {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(145deg, #91a5a8, #52666b);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 5px;
  box-shadow: inset 0 -5px 0 rgba(12, 18, 22, 0.22);
  color: #fff;
  display: flex;
  font-size: clamp(12px, 1.35vw, 18px);
  justify-content: center;
  line-height: 1;
  min-height: 0;
  min-width: 0;
  padding: 0;
  touch-action: manipulation;
}

.mines-cell:hover {
  transform: translateY(-1px);
}

.mines-cell.revealed {
  background: linear-gradient(180deg, #edf2ec, #cbd6ce);
  box-shadow: inset 0 0 0 2px rgba(74, 91, 80, 0.15);
  color: #243024;
  cursor: default;
  font-size: clamp(12px, 1.25vw, 18px);
}

.mines-cell.flagged {
  background: linear-gradient(180deg, #ffed98, var(--gold));
  color: #172017;
}

.mines-cell.bomb-found {
  background: linear-gradient(180deg, #2a333d, #111820);
  color: #ffd04c;
  font-size: clamp(13px, 1.45vw, 20px);
}

.mines-cell.exploded {
  background: linear-gradient(180deg, #ff6b70, #e73e43);
  color: #fff;
  font-size: clamp(14px, 1.55vw, 22px);
}

.mines-cell[data-count="1"] {
  color: #2364d8;
}

.mines-cell[data-count="2"] {
  color: #15824d;
}

.mines-cell[data-count="3"] {
  color: #e73e43;
}

.mines-cell[data-count="4"],
.mines-cell[data-count="5"],
.mines-cell[data-count="6"],
.mines-cell[data-count="7"],
.mines-cell[data-count="8"] {
  color: #7c3fb0;
}

.mines-result {
  background: linear-gradient(180deg, #fff, #f5f8f2);
  border: 2px solid #d6e3d6;
  border-radius: 8px;
  min-height: 70px;
  padding: 12px 14px;
}

.mines-result strong {
  display: block;
  font-size: 21px;
}

.mines-result p {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
  margin: 7px 0 0;
}

.mines-result.won {
  border-color: rgba(37, 184, 95, 0.55);
}

.mines-result.won strong {
  color: #168345;
}

.mines-result.lost {
  border-color: rgba(231, 62, 67, 0.55);
}

.mines-result.lost strong {
  color: var(--red);
}

@media (min-width: 1041px) {
  body.penalty-screen {
    overflow: hidden;
  }

  .penalty-screen .top-bar {
    padding: 10px clamp(12px, 1.8vw, 24px);
  }

  .penalty-screen .brand-mark {
    height: 42px;
    width: 46px;
  }

  .penalty-screen .brand-button strong {
    font-size: 20px;
  }

  .penalty-screen .brand-button small {
    font-size: 11px;
  }

  .penalty-screen .top-actions {
    gap: 8px;
  }

  main {
    padding: 0 clamp(10px, 1.9vw, 28px) 18px;
  }

  .penalty-screen main {
    height: calc(100dvh - 68px);
    padding: 0 clamp(8px, 1.4vw, 20px) 10px;
  }

  .game-view {
    gap: 12px;
    grid-template-columns: minmax(176px, 204px) minmax(760px, 1fr) minmax(176px, 204px);
    height: calc(100dvh - 78px);
    min-height: 0;
  }

  .side-panel,
  .control-panel {
    gap: 7px;
    max-height: 100%;
    overflow: auto;
    padding: 9px;
    scrollbar-color: rgba(23, 32, 23, 0.28) transparent;
    scrollbar-width: thin;
  }

  .section-title h2 {
    font-size: 18px;
  }

  .section-title p,
  .aim-status span,
  .power-control span {
    font-size: 10px;
  }

  .team-grid {
    gap: 4px;
  }

  .team-button {
    border-width: 1px;
    min-height: 35px;
    padding: 5px 6px;
  }

  .team-button::before {
    height: 5px;
  }

  .team-button strong {
    font-size: 10.5px;
    line-height: 1.05;
    margin-top: 4px;
  }

  .team-button span {
    font-size: 8px;
    margin-top: 1px;
  }

  .solid-button,
  .ghost-button,
  .icon-button {
    min-height: 36px;
  }

  .stadium-panel {
    grid-template-rows: 28px 58px minmax(0, 1fr) 42px;
  }

  .stadium-ribbon {
    min-height: 28px;
    padding: 5px 10px;
  }

  .scoreboard {
    gap: 8px;
    grid-template-columns: 1fr 124px 1fr;
    padding: 7px;
  }

  .team-score,
  .match-state {
    min-height: 44px;
  }

  .team-score span {
    font-size: 18px;
  }

  .team-score strong {
    font-size: 28px;
  }

  .match-state b {
    font-size: 15px;
  }

  #gameCanvas {
    min-height: 0;
  }

  .shootout-strip {
    padding: 8px 10px;
  }

  .target-grid {
    gap: 6px;
  }

  .target-button {
    height: 44px;
    padding: 5px;
  }

  .target-button span {
    font-size: 19px;
  }

  .target-button small {
    font-size: 8px;
  }

  .keyboard-hint {
    gap: 6px;
    padding: 7px;
  }

  .keyboard-hint span {
    font-size: 10px;
  }

  .keyboard-hint kbd {
    font-size: 10px;
    min-width: 24px;
    padding: 4px 6px;
  }

  .power-control,
  .message-card {
    padding: 7px;
  }

  .message-card strong {
    font-size: 14px;
  }

  .message-card p {
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (min-width: 1320px) {
  .game-view {
    grid-template-columns: 190px minmax(900px, 1fr) 190px;
  }
}

@media (max-width: 1040px) {
  body {
    overflow: auto;
  }

  .home-view,
  .factory-game-layout,
  .game-view,
  .mines-view {
    grid-template-columns: 1fr;
  }

  .mines-view {
    --mines-board-max: min(100%, max(340px, calc(100dvh - 246px)), 690px);
    height: auto;
    min-height: calc(100vh - 108px);
  }

  .home-view {
    min-height: auto;
  }

  .home-hero {
    min-height: 520px;
  }

  .home-hero img {
    object-position: 58% center;
  }

  .game-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .game-tile {
    min-height: 440px;
  }

  .factory-arena {
    min-height: 520px;
  }

  .side-panel,
  .control-panel {
    order: 2;
  }

  .stadium-panel {
    order: 1;
  }

  .mines-board-panel {
    order: 1;
  }

  .mines-panel {
    order: 2;
  }
}

@media (max-width: 620px) {
  .top-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .top-actions > * {
    flex: 1 1 auto;
  }

  .library-button {
    justify-content: center;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-card h1 {
    font-size: 42px;
  }

  .game-library {
    grid-template-columns: 1fr;
  }

  .game-tile {
    min-height: 480px;
  }

  .tile-art {
    min-height: 310px;
  }

  .factory-arena {
    min-height: 430px;
  }

  .factory-stats {
    grid-template-columns: 1fr;
  }

  .scoreboard {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    min-height: 560px;
  }

  .home-hero::after {
    background:
      linear-gradient(180deg, rgba(9, 16, 28, 0.78) 0%, rgba(9, 16, 28, 0.26) 45%, rgba(9, 16, 28, 0.9) 100%);
  }

  .home-hero img {
    object-position: 62% center;
  }

  .home-hero-content {
    justify-content: flex-end;
    padding: 24px;
  }

  .home-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-hero-actions .solid-button,
  .home-hero-actions .ghost-button {
    width: 100%;
  }

  .home-hero-content h1 {
    font-size: 48px;
  }

  .home-copy h2 {
    font-size: 42px;
  }

  .home-stats {
    align-items: stretch;
    flex-direction: column;
  }

  .mines-topline {
    grid-template-columns: 1fr;
  }

  .mines-view {
    --mines-board-max: min(100%, 92vw, max(260px, calc(100dvh - 330px)));
  }

  .mines-presets {
    grid-template-columns: 1fr;
  }

  .mines-controls {
    grid-template-columns: 1fr;
  }

  .mines-board-panel {
    padding: 10px;
  }

  .mines-board {
    border-width: 5px;
    gap: 2px;
    padding: 6px;
  }

  .mines-cell,
  .mines-cell.revealed {
    border-radius: 3px;
    font-size: 13px;
  }
}

.factory-pro-app {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 208, 76, 0.2), transparent 22%),
    linear-gradient(140deg, #101722 0%, #17222f 52%, #0b1117 100%);
}

.factory-topbar {
  align-items: center;
  background: linear-gradient(180deg, #2358ff, #1544e7);
  border-bottom: 5px solid #24d7ff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  color: #fff;
  display: flex;
  justify-content: space-between;
  min-height: 88px;
  padding: 14px clamp(14px, 2vw, 24px);
}

.factory-brand,
.factory-wallet,
.factory-wallet span,
.factory-plus {
  align-items: center;
  display: flex;
}

.factory-brand {
  color: #fff;
  gap: 12px;
  text-decoration: none;
}

.factory-logo {
  align-items: center;
  background: #fff45b;
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 8px 0 rgba(6, 22, 105, 0.34);
  color: #ef3d45;
  display: flex;
  font-size: 28px;
  font-weight: 900;
  height: 56px;
  justify-content: center;
  width: 72px;
}

.factory-brand small {
  color: rgba(255, 255, 255, 0.78);
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-brand strong {
  display: block;
  font-size: 25px;
  line-height: 1;
}

.factory-wallet {
  gap: 10px;
}

.factory-wallet span,
.factory-plus {
  background: rgba(20, 55, 210, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
}

.factory-wallet b {
  align-items: center;
  background: #ffd04c;
  border-radius: 50%;
  color: #9f3b14;
  display: inline-flex;
  font-size: 22px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.factory-wallet span:first-child b {
  background: #77f05d;
  color: #126b24;
}

.factory-wallet span:nth-child(3) b {
  background: linear-gradient(145deg, #ff8eea, #b34aff);
  color: #fff;
}

.factory-wallet strong {
  color: #fff;
  font-size: 24px;
  white-space: nowrap;
}

.factory-plus {
  background: linear-gradient(180deg, #6ee23b, #38b822);
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  width: 58px;
}

.factory-sim {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(250px, 280px) minmax(560px, 1fr) minmax(290px, 320px);
  min-height: calc(100vh - 88px);
  padding: 18px clamp(12px, 1.4vw, 18px);
}

.factory-left-panel,
.factory-right-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.factory-boss-card,
.factory-tutorial-card,
.factory-kpi-grid > div,
.factory-flow-list,
.factory-health,
.factory-advisor,
.factory-product-card,
.factory-upgrade-panel,
.factory-map-panel {
  background: rgba(250, 252, 247, 0.96);
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.factory-boss-card {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 74px;
  overflow: hidden;
  padding: 10px;
}

.boss-portrait {
  background:
    radial-gradient(circle at 50% 22%, #ffd2a4 0 18px, transparent 19px),
    linear-gradient(180deg, transparent 0 38px, #1f66e5 38px 72px),
    linear-gradient(135deg, #ffd04c, #f59b22);
  border: 3px solid #71d9ff;
  border-radius: 10px;
  height: 54px;
  width: 70px;
}

.factory-boss-card small,
.factory-advisor small,
.factory-product-card small {
  color: var(--blue);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-boss-card strong {
  display: block;
  font-size: 25px;
  line-height: 1;
}

.factory-tutorial-card {
  background: linear-gradient(180deg, #67e83d, #47cf26);
  color: #fff;
  padding: 15px;
}

.factory-tutorial-card strong {
  display: block;
  font-size: 30px;
}

.factory-tutorial-card h2 {
  font-size: 28px;
  line-height: 1;
  margin: 10px 0 8px;
}

.factory-tutorial-card p {
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
}

.factory-kpi-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.factory-kpi-grid > div {
  min-height: 78px;
  padding: 10px;
}

.factory-kpi-grid span {
  color: #104bff;
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-kpi-grid strong {
  display: block;
  font-size: 22px;
  margin-top: 8px;
}

.factory-flow-list,
.factory-health,
.factory-product-card,
.factory-upgrade-panel {
  padding: 13px;
}

.factory-flow-list h3,
.factory-health h3 {
  color: #104bff;
  font-size: 13px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.factory-flow-list ol {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.factory-flow-list li {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  gap: 9px;
}

.factory-flow-list li span {
  align-items: center;
  background: #2f85f3;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.factory-health,
.factory-product-card {
  display: grid;
  gap: 10px;
}

.factory-health label,
.factory-product-card label {
  display: grid;
  gap: 5px;
}

.factory-health label span,
.factory-product-card label span {
  color: #231a20;
  font-size: 12px;
  font-weight: 900;
}

.factory-health b,
.factory-product-card b {
  color: #104bff;
  font-size: 11px;
  justify-self: end;
  margin-top: -19px;
}

.factory-health i,
.factory-product-card i {
  background: #dfe7ef;
  border-radius: 999px;
  display: block;
  height: 10px;
  overflow: hidden;
}

.factory-health em,
.factory-product-card em {
  background: linear-gradient(90deg, #ffd94e, #44e273);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.2s ease;
}

#factoryHeatBar {
  background: linear-gradient(90deg, #44e273, #ffd94e 58%, #ef3d45);
}

#factoryStressBar {
  background: linear-gradient(90deg, #44e273, #ffb23f 62%, #ef3d45);
}

.factory-map-panel {
  min-height: 0;
  overflow: hidden;
}

.factory-map {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(135deg, #7ce579 0%, #4abd67 38%, #2e864d 100%);
  height: 100%;
  min-height: 680px;
  overflow: hidden;
  position: relative;
}

.factory-map::before {
  background:
    linear-gradient(90deg, rgba(131, 102, 118, 0.16) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(131, 102, 118, 0.16) 1px, transparent 1px) 0 0 / 34px 34px,
    #c8b4bf;
  border: 6px solid #fff4d2;
  bottom: 110px;
  content: "";
  left: 5%;
  position: absolute;
  right: 5%;
  top: 118px;
  transform: skewY(-10deg);
}

.factory-map::after {
  background:
    linear-gradient(90deg, #d45a12 0 18px, transparent 18px 36px) 40px 42px / 74px 26px repeat-x,
    linear-gradient(180deg, #f6cd61, #e4a143);
  border-bottom: 12px solid #cf5e13;
  border-top: 8px solid #fff4d2;
  content: "";
  height: 96px;
  left: 4%;
  position: absolute;
  right: 4%;
  top: 80px;
  transform: skewY(-10deg);
}

.factory-back-land {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  left: 7%;
  position: absolute;
  right: 7%;
  top: 18px;
  z-index: 1;
}

.factory-lot {
  background: rgba(165, 245, 115, 0.42);
  border: 2px dashed rgba(28, 95, 45, 0.65);
  border-radius: 7px;
  color: rgba(9, 60, 30, 0.7);
  font-size: 10px;
  font-weight: 900;
  min-height: 42px;
  padding: 9px 6px;
  text-align: center;
  text-transform: uppercase;
}

.factory-lot.bought {
  background: rgba(248, 205, 97, 0.92);
  border-style: solid;
  color: #7b3b06;
}

.factory-front-road {
  background:
    linear-gradient(90deg, transparent 0 44%, #fff 44% 47%, transparent 47% 100%) 0 50% / 74px 8px repeat-x,
    linear-gradient(180deg, #272326, #111318);
  border-bottom: 6px solid #fff;
  border-top: 6px solid #fff;
  bottom: 0;
  height: 100px;
  left: -4%;
  position: absolute;
  right: -4%;
  transform: rotate(-2deg);
  z-index: 3;
}

.truck {
  align-items: center;
  background: linear-gradient(90deg, #fff 0 58%, #ef3d45 58%);
  border: 3px solid #111821;
  border-radius: 6px;
  bottom: 20px;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.32);
  color: #111821;
  display: flex;
  font-size: 11px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  position: absolute;
  width: 100px;
}

.truck.in {
  left: 11%;
}

.truck.out {
  right: 12%;
}

.factory-zone,
.factory-node,
.factory-line-slot,
.flow-chip {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.factory-zone {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 246, 236, 0.94));
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 9px;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 9px;
  position: absolute;
  text-align: left;
  transform: skewY(-10deg);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  width: 130px;
  z-index: 5;
}

.factory-zone:hover,
.factory-zone.selected,
.factory-node:hover,
.factory-line-slot:hover,
.flow-chip:hover {
  transform: translateY(-2px) skewY(-10deg);
}

.factory-zone.selected,
.flow-chip.low {
  border: 3px solid #ffd04c;
  box-shadow: 0 0 0 4px rgba(255, 208, 76, 0.34), 0 18px 24px rgba(0, 0, 0, 0.25);
}

.factory-zone.bottleneck::after {
  align-items: center;
  background: #ef3d45;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  content: "!";
  display: flex;
  font-size: 18px;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: -12px;
  top: -12px;
  width: 28px;
}

.factory-zone b {
  align-items: center;
  background: #35d857;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  justify-content: center;
  min-height: 28px;
  width: 48px;
}

.factory-zone span {
  color: #172017;
  font-size: 12px;
  font-weight: 900;
}

.zone-receiving { left: 10%; top: 205px; }
.zone-asrs { left: 28%; top: 178px; }
.zone-production { left: 43%; top: 245px; width: 148px; }
.zone-racks { left: 18%; top: 374px; }
.zone-dispatch { right: 8%; top: 340px; }
.zone-energy { right: 8%; bottom: 146px; }
.zone-parking { left: 13%; bottom: 137px; }
.zone-workers { left: 38%; bottom: 170px; }
.zone-bosses { right: 25%; bottom: 195px; }

.zone-asrs b { background: #ef3d45; }
.zone-production b { background: #ff7a35; }
.zone-racks b { background: #994f24; }
.zone-dispatch b { background: #ef3d45; }
.zone-energy b { background: #44d65b; }
.zone-parking b { background: #2f85f3; }
.zone-workers b { background: #2364d8; }
.zone-bosses b { background: #111821; }

.factory-node {
  background: #111821;
  border: 3px solid #ffd04c;
  border-radius: 7px;
  color: #ffd04c;
  font-size: 10px;
  font-weight: 900;
  min-height: 34px;
  padding: 6px 8px;
  position: absolute;
  text-transform: uppercase;
  transform: skewY(-10deg);
  z-index: 7;
}

.factory-node.selected,
.factory-node.bottleneck {
  background: #ffd04c;
  color: #111821;
}

.gate-in { left: 5%; top: 320px; }
.gate-out { right: 4%; top: 438px; }

.factory-lines-grid {
  bottom: 138px;
  display: block;
  left: 7%;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  right: 7%;
  top: 158px;
  transform: none;
  z-index: 6;
}

.factory-lines-grid::before {
  content: none;
}

.factory-line-slot {
  background: linear-gradient(180deg, #ffd04c, #ef7b22);
  border: 3px solid #4a3115;
  border-radius: 8px;
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.25);
  color: #111821;
  display: grid;
  font-weight: 900;
  gap: 4px;
  min-height: 58px;
  padding: 7px;
  text-align: left;
}

.factory-line-slot span {
  font-size: 11px;
}

.factory-line-slot b {
  font-size: 18px;
}

.factory-line-slot i {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  display: block;
  height: 6px;
  overflow: hidden;
}

.factory-line-slot em {
  background: #ef3d45;
  display: block;
  height: 100%;
}

.factory-line-slot.factory-machine-unit {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.46) 0 7px, transparent 7px 14px) 0 48px / 30px 7px repeat-x,
    linear-gradient(180deg, #f8c64f 0 44%, #f08a24 44% 100%);
  border-color: #24303a;
  box-shadow: 6px 8px 0 rgba(45, 29, 23, 0.24), inset 0 0 0 2px rgba(255, 255, 255, 0.34);
  height: 76px;
  left: var(--machine-left);
  min-height: 76px;
  overflow: hidden;
  padding: 6px;
  pointer-events: auto;
  position: absolute;
  top: var(--machine-top);
  transform: translate(-50%, -50%) skewY(-10deg) scale(var(--machine-scale, 1));
  transform-origin: center;
  width: 82px;
  z-index: var(--machine-z);
}

.factory-line-slot.factory-machine-unit:hover {
  transform: translate(-50%, -54%) skewY(-10deg) scale(calc(var(--machine-scale, 1) * 1.04));
}

.factory-line-slot.factory-machine-unit::before {
  background: linear-gradient(180deg, #2d3a45, #151b21);
  border: 2px solid #0d1116;
  border-radius: 5px;
  bottom: 19px;
  content: "";
  position: absolute;
  right: 6px;
  top: 28px;
  width: 18px;
}

.factory-line-slot.factory-machine-unit::after {
  background: #43e45c;
  border: 2px solid #fff8c6;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(67, 228, 92, 0.18);
  content: "";
  height: 8px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 8px;
}

.factory-machine-unit.warm::after {
  background: #ffd04c;
  box-shadow: 0 0 0 4px rgba(255, 208, 76, 0.22);
}

.factory-machine-unit.hot::after,
.factory-machine-unit.offline::after {
  background: #ef3d45;
  box-shadow: 0 0 0 4px rgba(239, 61, 69, 0.22);
}

.factory-machine-unit.offline {
  filter: saturate(0.55) brightness(0.78);
}

.factory-machine-unit .machine-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.factory-machine-unit .machine-header b {
  background: #111821;
  border-radius: 5px;
  color: #fff;
  font-size: 9px;
  min-height: 20px;
  padding: 4px 5px;
  width: auto;
}

.factory-machine-unit .machine-header small {
  background: #fff5c8;
  border: 2px solid #111821;
  border-radius: 999px;
  color: #111821;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 5px;
}

.factory-machine-unit .machine-body {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, 1fr);
  margin: 5px 23px 4px 0;
  position: relative;
  z-index: 1;
}

.factory-machine-unit .machine-body i {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 45%),
    linear-gradient(180deg, #46c8d8, #146f83);
  border: 2px solid #20303a;
  border-radius: 4px;
  display: block;
  height: 18px;
}

.factory-machine-unit .machine-body i:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 45%),
    linear-gradient(180deg, #ffef6f, #d5781a);
}

.factory-machine-unit .machine-name,
.factory-machine-unit .machine-role {
  display: block;
  line-height: 1.05;
  position: relative;
  z-index: 1;
}

.factory-machine-unit .machine-name {
  color: #111821;
  font-size: 8px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-machine-unit .machine-role {
  color: #4a2c16;
  font-size: 8px;
  font-weight: 900;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-machine-unit .machine-progress {
  background: rgba(17, 24, 33, 0.28);
  border-radius: 999px;
  display: block;
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.factory-machine-unit .machine-progress em {
  background: linear-gradient(90deg, #43e45c, #ffd04c);
  display: block;
  height: 100%;
}

.factory-flow-cards {
  background: rgba(10, 19, 26, 0.86);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  bottom: 18px;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  left: 35%;
  padding: 10px;
  position: absolute;
  right: 3%;
  z-index: 8;
}

.flow-chip {
  background: rgba(255, 255, 255, 0.13);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 7px;
}

.flow-chip b {
  align-items: center;
  background: #48d75f;
  border-radius: 7px;
  display: inline-flex;
  font-size: 11px;
  justify-content: center;
  min-height: 24px;
}

.flow-chip span {
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
}

.flow-chip i {
  background: rgba(255, 255, 255, 0.23);
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
}

.flow-chip em {
  background: #55ec61;
  display: block;
  height: 100%;
}

.flow-chip.low b,
.flow-chip.low em {
  background: #ffd04c;
  color: #111821;
}

.factory-selected-card {
  background: rgba(255, 255, 255, 0.88);
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 12px;
  bottom: 108px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 6px 10px;
  grid-template-columns: 52px 1fr auto;
  left: 3%;
  max-width: 360px;
  padding: 12px;
  position: absolute;
  z-index: 9;
}

.factory-selected-card > span {
  align-items: center;
  align-self: start;
  background: #ff7a35;
  border-radius: 9px;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  height: 48px;
  justify-content: center;
}

.factory-selected-card small {
  color: #6a6069;
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-selected-card strong {
  display: block;
  font-size: 16px;
}

.factory-selected-card > b {
  align-self: center;
  font-size: 25px;
}

.factory-selected-card p {
  color: #695f68;
  font-size: 12px;
  font-weight: 900;
  grid-column: 1 / -1;
  line-height: 1.3;
  margin: 0;
}

.factory-map.blackout::before,
.factory-map.blackout::after,
.factory-map.blackout .factory-zone,
.factory-map.blackout .factory-line-slot {
  filter: brightness(0.62);
}

.factory-advisor {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 14px;
}

.advisor-robot {
  background:
    radial-gradient(circle at 32% 38%, #172017 0 5px, transparent 6px),
    radial-gradient(circle at 68% 38%, #172017 0 5px, transparent 6px),
    linear-gradient(180deg, #76dce7, #42a9b5);
  border: 5px solid #2b5960;
  border-radius: 13px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.12);
  height: 62px;
  min-width: 62px;
}

.factory-advisor h2 {
  color: #251b21;
  font-size: 23px;
  line-height: 1;
  margin: 3px 0 8px;
}

.factory-advisor p {
  color: #6f616a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0;
}

.factory-actions-main {
  display: grid;
  gap: 10px;
}

.factory-action {
  align-items: center;
  border-radius: 8px;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  font-size: 18px;
  justify-content: center;
  min-height: 64px;
  padding: 0 12px;
}

.factory-action span {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  margin-left: 10px;
  padding: 5px 9px;
}

.factory-action.green { background: linear-gradient(180deg, #6fe23e, #39ba23); }
.factory-action.blue { background: linear-gradient(180deg, #3491ff, #1265e5); }
.factory-action.red { background: linear-gradient(180deg, #ff6b5b, #e43f31); }

.factory-action:disabled,
.factory-upgrade-panel button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.58;
}

.factory-product-card {
  background: rgba(255, 255, 255, 0.96);
}

.product-icon {
  background:
    radial-gradient(circle at 72% 36%, #71d9ff 0 6px, transparent 7px),
    linear-gradient(180deg, #f7f7f7 0 18%, #1a1c20 18% 100%);
  border: 4px solid #171b20;
  border-radius: 9px;
  float: left;
  height: 52px;
  margin-right: 10px;
  width: 62px;
}

.factory-product-card h3 {
  font-size: 24px;
  line-height: 1;
  margin: 2px 0 12px;
}

.factory-upgrade-panel {
  display: grid;
  gap: 12px;
}

.factory-upgrade-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.factory-upgrade-stats div {
  background: #172536;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  min-height: 64px;
  padding: 8px;
}

.factory-upgrade-stats span {
  color: rgba(255, 255, 255, 0.68);
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-upgrade-stats strong {
  color: #6af05e;
  display: block;
  font-size: 16px;
  margin-top: 7px;
}

@media (max-width: 1180px) {
  .factory-sim {
    grid-template-columns: 1fr;
  }

  .factory-left-panel,
  .factory-right-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-map {
    min-height: 650px;
  }
}

@media (max-width: 720px) {
  .factory-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .factory-wallet {
    flex-wrap: wrap;
  }

  .factory-wallet span {
    flex: 1 1 132px;
  }

  .factory-sim {
    padding: 12px;
  }

  .factory-left-panel,
  .factory-right-panel {
    grid-template-columns: 1fr;
  }

  .factory-map {
    min-height: 760px;
  }

  .factory-zone {
    width: 118px;
  }

  .zone-receiving { left: 6%; top: 210px; }
  .zone-asrs { left: 41%; top: 184px; }
  .zone-production { left: 24%; top: 310px; }
  .zone-racks { left: 7%; top: 430px; }
  .zone-dispatch { right: 5%; top: 420px; }
  .zone-energy { right: 5%; bottom: 155px; }
  .zone-workers { left: 34%; bottom: 210px; }
  .zone-bosses { right: 5%; bottom: 260px; }
  .zone-parking { left: 6%; bottom: 160px; }

  .factory-lines-grid {
    left: 22%;
    top: 520px;
  }

  .factory-selected-card {
    bottom: 270px;
    left: 4%;
    right: 4%;
  }

  .factory-flow-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    left: 4%;
    right: 4%;
  }
}