body {
  background: #252b27;
}

.art-preview-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 3px 12px 3px 0;
}

.art-preview-label {
  margin-right: 7px;
  font-weight: 600;
}

.art-preview-controls button,
.art-preview-controls select {
  position: static;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #bbc2b8;
  border-radius: 5px;
  background: #fff;
  color: #263b2e;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.art-preview-controls button[aria-pressed="true"] {
  border-color: #3b5844;
  background: #3b5844;
  color: #fff;
}

.art-preview-controls button:focus-visible {
  outline: 2px solid #ad692d;
  outline-offset: 2px;
}

.art-preview-note {
  flex: 1 0 calc(100% + 20px);
  order: 10;
  margin: 3px -10px -1px;
  padding: 6px 12px;
  color: #e1e6dd;
  background: #252b27;
  font: 12px/1.4 system-ui, sans-serif;
  text-align: center;
}

.card-image[data-artwork="ai"] {
  image-rendering: auto;
}

.cinema-flight, .cinema-landscape, .cinema-fuselage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cinema-flight { overflow: hidden; }
.cinema-flight[hidden] { display: none; }
.cinema-landscape { background-repeat: repeat-x; }
.cinema-rotor { position: absolute; pointer-events: none; transform-origin: center; }
.cinema-fuselage, .cinema-rotor { image-rendering: auto; }

/* The light-off state uses the exact lit painting, with brightness alone reduced. */
html[data-art="ai"] #cardStage[data-stack="spez"][data-card="2"] .card-image[data-artwork="ai"] {
  filter: brightness(.18);
}

/* The vendor's replies use the same painting as the preceding view. Only
   the message changes, so the ice-cream menu and counter never jump. */
html[data-art="ai"] #cardStage[data-stack="spiel"][data-card="4"] { --vendor-message: "KEIN GELD / KEIN GELD"; }
html[data-art="ai"] #cardStage[data-stack="spiel"][data-card="9"] { --vendor-message: "NICHT GENUG GELD"; }
html[data-art="ai"] #cardStage[data-stack="spiel"][data-card="10"] { --vendor-message: "FÜR WAS BRAUCHST DU DAS?"; }
html[data-art="ai"] #cardStage[data-stack="spiel"]:is([data-card="4"], [data-card="9"], [data-card="10"]) #cardContent::after {
  content: var(--vendor-message);
  position: absolute;
  left: 30px;
  right: 30px;
  top: 403px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b2719;
  font: 700 22px/1.1 Georgia, "Times New Roman", serif;
  text-align: center;
  pointer-events: none;
}

/* Artwork and all live HyperCard controls share the painted palette. The
   controls remain real parts, so text entry, hilites and scripts still work. */
html[data-art="ai"] .card-stage {
  background: #e5c799;
  color: #3f2c20;
  image-rendering: auto;
}

html[data-art="ai"] .part {
  color: #432e20;
}

html[data-art="ai"] button.part[aria-disabled="true"] {
  color: #92785d;
}

html[data-art="ai"] .part-icon {
  width: calc(32px * var(--part-display-scale, 1));
  height: calc(32px * var(--part-display-scale, 1));
  image-rendering: auto;
  filter: contrast(.72) sepia(1) saturate(2) brightness(.85);
  mix-blend-mode: multiply;
}

html[data-art="ai"] .part-icon-fallback {
  color: #85502f;
  font-size: calc(22px * var(--part-display-scale, 1));
}

html[data-art="ai"] .button-style-1,
html[data-art="ai"] .button-style-2,
html[data-art="ai"] .button-style-3,
html[data-art="ai"] .button-style-4,
html[data-art="ai"] .button-style-8,
html[data-art="ai"] .button-style-9,
html[data-art="ai"] .button-style-10,
html[data-art="ai"] .button-style-11 {
  border-color: #815736;
  background: #f2d9ae;
}

html[data-art="ai"] .button-style-4 {
  box-shadow: 3px 3px 0 #805a38;
}

html[data-art="ai"] .button-style-8,
html[data-art="ai"] .button-style-9 {
  box-shadow: inset -1px -1px 0 #bb9468, inset 1px 1px 0 #ffedcc;
}

html[data-art="ai"] .button-style-5::before,
html[data-art="ai"] .button-style-6::before {
  border-color: #815736;
  background: #f2d9ae;
}

html[data-art="ai"] .part.hilite:not(.button-style-0),
html[data-art="ai"] .part:active:not(.button-style-0) {
  color: #fff0d2;
  background: #6e8050;
  box-shadow: none;
}

html[data-art="ai"] .button-style-5.hilite::before,
html[data-art="ai"] .button-style-6.hilite::before {
  background: #6e8050;
  box-shadow: inset 0 0 0 2px #f2d9ae;
}

html[data-art="ai"] .field-style-1,
html[data-art="ai"] .field-style-2,
html[data-art="ai"] .field-style-4 {
  border-color: #9e774f;
  background: #f4dfba;
}

html[data-art="ai"] .part.field[contenteditable="true"]:focus {
  outline-color: #805a38;
}

html[data-art="ai"] .parts-layer.show-hotspots .button-style-0 {
  outline-color: #9f551e;
  background: rgb(243 209 129 / 25%);
}

html[data-art="ai"] .dialog-panel,
html[data-art="ai"] .dialog-input,
html[data-art="ai"] .dialog-choice,
html[data-art="ai"] #restartButton,
html[data-art="ai"] .quit-panel {
  border-color: #805a38;
  background: #f4dfba;
  color: #432e20;
}

html[data-art="ai"] .dialog-panel {
  box-shadow: 3px 3px 0 rgb(80 51 28 / 45%);
}

html[data-art="ai"] .hypercard-dialog {
  background: rgb(237 211 166 / 35%);
}

html[data-art="ai"] .stack-menu,
html[data-art="ai"] .stack-menu button,
html[data-art="ai"] .stack-menu select,
html[data-art="ai"] .game-menu-actions {
  border-color: #937346;
  background: #eee1c9;
  color: #364a34;
}

html[data-art="ai"] .stack-menu details[open] summary,
html[data-art="ai"] .stack-menu button[aria-pressed="true"],
html[data-art="ai"] .art-preview-controls button[aria-pressed="true"] {
  background: #456244;
  color: #fff0d2;
}

/* The painted Level 13 introduction already contains its complete title. */
.card-image[data-artwork="ai"] + .parts-layer.level-bitmap-title::before,
.card-image[data-artwork="ai"] + .parts-layer.level-bitmap-title::after {
  display: none;
}

/* The original placeholder icon must not cover the painted ??8?? clue. */
#cardStage[data-stack="h4-5"][data-card="117"] .card-image[data-artwork="ai"] + .parts-layer [data-scope="card"][data-part-id="4"] {
  background: transparent;
  border-color: transparent;
}

#cardStage[data-stack="h4-5"][data-card="117"] .card-image[data-artwork="ai"] + .parts-layer [data-scope="card"][data-part-id="4"] > * {
  visibility: hidden;
}

@media (max-width: 600px) {
  .art-preview-controls {
    width: 100%;
    justify-content: center;
    padding-right: 0;
  }

  .art-preview-label {
    font-size: 12px;
  }

  .stack-menu {
    justify-content: center;
  }
}