/* ==========================================================================
   ATTRACT MODE
   ========================================================================== */

.attract-screen {
  min-height: 0;
  padding: 22px 36px 20px;
  justify-content: flex-start;
}

.attract-scoreline {
  min-height: 20px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--wire);
  font-size: 11px;
  letter-spacing: 1.5px;
}
.attract-scoreline output { color: var(--moss); }

.attract-stage {
  position: relative;
  min-height: 338px;
  display: grid;
  place-items: center;
}

.attract-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.title-lockup { position: relative; }


.carvemino-mark {
  position: relative;
  display: inline-block;
  padding: 4px 7px 5px;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(34px, 7vw, 50px);
  line-height: 1.04;
  letter-spacing: 5px;
  text-shadow:
    3px 0 0 #3c4038,
    0 3px 0 #272a24,
    0 0 12px #9aa5922e;
  animation: logo-flicker 6s steps(1, end) infinite;
}

/* Two square "tool marks" make the wordmark itself look carved/repaired. */
.carvemino-mark::before,
.carvemino-mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
}
.carvemino-mark::before {
  left: 27%;
  top: 5px;
  background: var(--glass);
  box-shadow: 10px 0 0 var(--glass);
}
.carvemino-mark::after {
  right: 18%;
  bottom: 2px;
  background: var(--moss);
  box-shadow: 0 -10px 0 #5f665a;
}

.subtitle {
  margin: 17px 0 0;
  color: var(--wire);
  font-size: 11px;
  letter-spacing: 6px;
}

.attract-card-heading { margin-bottom: 24px; }
.attract-card-heading h2 {
  color: var(--ink);
  font-size: 21px;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #272a24;
}

.sculpt-demo {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.sculpt-demo-grid {
  width: 180px;
  aspect-ratio: 8 / 7;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  border: 1px solid var(--arrow);
  background: #080a07;
  box-shadow: inset 0 0 18px #000b;
}

.sculpt-demo-cell {
  border: 1px solid #1d201b;
  background: #0c0e0b;
}
.sculpt-demo-cell.is-piece {
  border-color: #32362f;
  background: var(--ink);
  box-shadow: inset -2px -2px 0 #74796e;
}
.sculpt-demo-cell.is-action {
  border-color: var(--moss);
  background: var(--moss);
  animation: demo-cell-pulse .28s steps(2, end) infinite alternate;
}
.sculpt-demo-cell.is-ghost {
  border-style: dashed;
  border-color: #596055;
  background: transparent;
}
.sculpt-demo-cell.is-floor {
  border-color: #404237;
  background: #34362d;
}

.sculpt-demo-readout {
  width: 170px;
  min-height: 126px;
  padding: 14px 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 2px solid var(--arrow);
  text-align: left;
}
.sculpt-demo-readout span {
  color: var(--wire);
  font-size: 11px;
  letter-spacing: 2px;
}
.sculpt-demo-readout span b { color: var(--moss); }
.sculpt-demo-readout strong {
  margin-top: 20px;
  color: var(--ink);
  font-size: 21px;
  letter-spacing: 4px;
}
.sculpt-demo-readout small {
  margin-top: 12px;
  color: var(--wire);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.attract-ranking {
  width: min(100%, 430px);
  margin: 0 auto;
  display: grid;
  border-top: 2px solid var(--arrow);
  border-bottom: 2px solid var(--arrow);
}
.attract-ranking div {
  min-height: 52px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
}
.attract-ranking div > * { min-width: 0; }
.attract-ranking span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attract-ranking div:last-child { border-bottom: 0; }
.attract-ranking b { color: var(--moss); }
.attract-ranking span { letter-spacing: 1px; }
.attract-ranking output { color: var(--ink); font-size: 14px; letter-spacing: 2px; }

.start-button {
  align-self: center;
  min-width: 230px;
  padding: 10px 18px 8px;
  border: 0;
  background: transparent;
  color: #73766c;
  cursor: pointer;
  text-align: center;
}
.start-button span {
  display: block;
  font-size: 16px;
  letter-spacing: 3px;
  text-shadow: 0 0 9px #9aa59245;
  animation: start-blink 1.05s steps(1, end) infinite;
}
.start-button [data-input-hint="touch"],
.start-button [data-input-hint="controller"] { display: none; }
.start-button:hover,
.start-button:focus { outline: 0; color: var(--moss); }
#menu-screen:focus-within .start-button:not(:focus) span { animation: none; }

.attract-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.attract-secondary { margin-top: 8px; }
.attract-secondary button {
  padding: 6px 5px;
  border: 0;
  background: transparent;
  color: var(--wire);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.attract-secondary button:hover,
.attract-secondary button:focus {
  outline: 0;
  color: var(--ink);
  background: #20241b;
  box-shadow: 0 0 0 2px var(--moss), inset 0 0 10px #9aa59224;
  text-shadow: 0 0 8px #9aa59266;
}
.attract-secondary kbd {
  padding: 3px 4px;
  border-bottom-width: 1px;
  font-size: 11px;
}
.attract-secondary > span { color: #62655c; font-size: 10px; }

.cabinet-credit {
  margin: auto 0 0;
  color: #64675e;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
}


/* Responsive / input-mode adjustments owned by this role. */

@media (max-width: 699px) {
  .attract-screen {
    padding-top: 18px;
    padding-inline: 16px;
  }
  .attract-stage { min-width: 0; }
  .attract-card-heading { margin-bottom: 16px; }
  .sculpt-demo { gap: 12px; }
  .sculpt-demo-grid {
    width: min(44%, 140px);
    padding: 5px;
    gap: 1px;
  }
  .sculpt-demo-readout {
    width: min(44%, 128px);
    min-height: 100px;
    padding: 8px 0 0 12px;
  }
  .sculpt-demo-readout span { font-size: 10px; letter-spacing: 1px; }
  .sculpt-demo-readout strong { margin-top: 12px; font-size: 18px; }
  .sculpt-demo-readout small { margin-top: 8px; font-size: 9px; }
  .attract-ranking div {
    min-height: 46px;
    padding-inline: 5px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 6px;
    font-size: 11px;
  }
  .attract-ranking output { font-size: 12px; letter-spacing: 1px; }
}

@media (hover: none) and (pointer: coarse) {
  .start-button [data-input-hint="keyboard"] { display: none; }
  .start-button [data-input-hint="touch"] { display: block; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 899px) {
  .attract-stage { min-height: 180px; }
  .attract-card-heading { margin-bottom: 8px; }
  .attract-ranking div { min-height: 36px; }
}