:root {
  --ui-cream: #fff9ee;
  --ui-garden: #79ad70;
  --ui-forest: #315d48;
  --ui-aqua: #58b6ae;
  --ui-honey: #f3bf55;
  --ui-peach: #f2a078;
  --ui-sage-pale: #e5f1d9;
  --ui-card-shadow: 0 10px 24px rgba(70, 82, 52, .12);
  --ui-radius-card: 24px;
}

.kit-button {
  --kit-image: url("buttons/button_secondary_default.png");
  min-width: 44px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(214, 190, 127, .42);
  border-radius: 18px;
  color: var(--ui-forest);
  background: rgba(255, 253, 248, .96);
  text-shadow: none;
  box-shadow: 0 3px 0 rgba(84, 115, 76, .12), 0 5px 14px rgba(89, 79, 48, .06);
  font: 600 15px/1.2 var(--font-zh, system-ui, sans-serif);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease, filter 100ms ease;
}
.kit-button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.97);
}
.kit-primary { --kit-image: url("buttons/button_primary_default.png"); color: #fffdf3; }
.kit-secondary { --kit-image: url("buttons/button_secondary_default.png"); }
.kit-primary:active:not(:disabled) { --kit-image: url("buttons/button_primary_pressed.png"); }
.kit-secondary:active:not(:disabled) { --kit-image: url("buttons/button_secondary_pressed.png"); }
.kit-primary:disabled { --kit-image: url("buttons/button_primary_disabled.png"); }
.kit-primary:not(.kit-watercolor) { border-color: #6d9a68; background: #75a16e; }
.kit-primary:active:not(:disabled):not(.kit-watercolor) { background: #628d60; }
.kit-secondary:active:not(:disabled):not(.kit-watercolor) { background: #f3efdf; }
.kit-primary:disabled:not(.kit-watercolor) { color: #e9eee2; background: #a6b99c; cursor: not-allowed; }
.kit-button:disabled { opacity: .82; }
.kit-button.kit-watercolor {
  border: 0;
  border-radius: 0;
  aspect-ratio: 4 / 1;
  min-height: 0;
  height: auto;
  padding: 10px 12%;
  background-color: transparent;
  background-image: var(--kit-image);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
}
.kit-primary.kit-watercolor:disabled { color: #e9eee2; }
.kit-button .kit-icon { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.kit-button-primary-large { min-height: 58px; padding-inline: 24px; font-size: 17px; }

.kit-icon-round {
  width: 48px;
  height: 48px;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: url("buttons/button_icon_round.png") center / contain no-repeat;
  display: inline-grid;
  place-items: center;
}
.kit-icon-round img { width: 25px; height: 25px; object-fit: contain; }
.kit-info-label {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 211, 181, .55);
  border-radius: 999px;
  background: #edf3e7;
  color: var(--ui-forest);
  font: 600 13px/1.2 var(--font-zh, system-ui, sans-serif);
}
.kit-question-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(214, 190, 127, .38) !important;
  border-radius: var(--ui-radius-card) !important;
  background: linear-gradient(145deg, rgba(255, 253, 247, .98), rgba(255, 249, 237, .96)) !important;
  box-shadow: var(--ui-card-shadow), inset 0 0 0 5px rgba(255, 255, 255, .64) !important;
}
.question-corner { position: absolute; z-index: 0; pointer-events: none; object-fit: contain; }
.kit-question-panel > :not(.question-corner) { position: relative; z-index: 1; }
.question-corner-top-left { width: 92px; height: 92px; top: 0; left: 0; object-position: top left; -webkit-mask-image: linear-gradient(to right, #000 0 68%, transparent 100%), linear-gradient(to bottom, #000 0 68%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 0 68%, transparent 100%), linear-gradient(to bottom, #000 0 68%, transparent 100%); mask-composite: intersect; }
.question-corner-bottom-right { width: 104px; height: 104px; right: 0; bottom: 0; object-position: bottom right; -webkit-mask-image: linear-gradient(to left, #000 0 68%, transparent 100%), linear-gradient(to top, #000 0 68%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 0 68%, transparent 100%), linear-gradient(to top, #000 0 68%, transparent 100%); mask-composite: intersect; }
.kit-stats-panel {
  border: 1px solid rgba(214, 190, 127, .42) !important;
  border-radius: var(--ui-radius-card) !important;
  background: rgba(255, 249, 238, .96) !important;
  box-shadow: var(--ui-card-shadow) !important;
}
.kit-status-panel {
  border: 1px solid rgba(214, 190, 127, .42) !important;
  border-radius: 20px !important;
  background: rgba(255, 249, 238, .96) !important;
}
.kit-title-plaque {
  aspect-ratio: 2.5 / 1;
  padding: 12px 24px;
  background: url("panels/plaque_title.png") center / 100% 100% no-repeat;
}
.kit-panel-soft {
  border: 1px solid rgba(214, 190, 127, .42);
  border-radius: var(--ui-radius-card);
  background: rgba(255, 249, 238, .94);
  box-shadow: var(--ui-card-shadow);
}

@media (max-width: 380px) {
  .kit-button { padding-inline: 12px; font-size: 14px; }
  .kit-stats-panel { border-width: 1px !important; }
  .question-corner-top-left { width: 76px; height: 76px; }
  .question-corner-bottom-right { width: 86px; height: 86px; }
}