.tc-challenge, .tc-challenge * { box-sizing: border-box; }
.tc-challenge [hidden] { display: none !important; }
.tc-challenge {
  --tc-ink: #fff0cf;
  --tc-muted: #d6e2f1;
  --tc-gold: #e9cca0;
  --tc-line: #91a5c0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  color: var(--tc-ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.tc-instruction { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.tc-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tc-card { min-width: 0; padding: 12px; border: 1px solid #849bbd; border-radius: 4px; background: #243955; }
.tc-label { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.tc-help { margin: 8px 0; color: var(--tc-muted); font-size: 13px; overflow-wrap: anywhere; }
.tc-button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #bea883;
  border-radius: 4px;
  background: #3b567c;
  color: var(--tc-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tc-button:hover { background: #4e6b96; }
.tc-button:active { transform: translateY(1px); }
.tc-primary, .tc-button[aria-pressed="true"] { border-color: #fff1ce; background: #e9cca0; color: #213751; font-weight: 650; }
.tc-primary:hover, .tc-button[aria-pressed="true"]:hover { background: #f7ddb1; }
.tc-button:disabled { opacity: .5; cursor: default; transform: none; }
.tc-challenge :focus-visible { outline: 3px solid #fff0bb; outline-offset: 3px; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-actions .tc-button { flex: 1; }
.tc-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-preview-actions .tc-button { flex: 1; }
.tc-feedback { margin: 0; padding: 10px 12px; min-height: 44px; border-left: 3px solid #adc6e4; background: #233b58; color: #e7eff9; overflow-wrap: anywhere; }
.tc-feedback[data-kind="error"] { border-left-color: #f5b0a2; color: #ffe0d6; }
.tc-feedback[data-kind="success"] { border-left-color: #b8dfba; color: #d7f5d7; }
.tc-rhythm-target { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-beat { display: flex; flex: 1 1 42px; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px; min-width: 38px; border: 1px solid #7891b0; border-radius: 3px; background: #304b6d; }
.tc-beat-order { font-size: 11px; color: #d3deed; }
.tc-beat-symbol { font-size: 27px; height: 32px; line-height: 32px; }
.tc-beat-label { font-size: 12px; }
.tc-beat-active { background: #efd4a8; color: #243955; border-color: #fff0bb; box-shadow: 0 0 0 2px #fff0bb66; }
.tc-beat-active .tc-beat-order { color: #355170; }
.tc-rhythm-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tc-slot { min-width: 0; margin: 0; padding: 8px; border: 1px solid #849bbd; border-radius: 4px; }
.tc-slot-label { padding: 0 4px; color: #f9e6c4; font-size: 13px; }
.tc-rhythm-choices { display: flex; gap: 5px; }
.tc-choice { flex: 1; padding: 8px 4px; font-size: 13px; }
.tc-incorrect { border-color: #f5a995 !important; box-shadow: inset 0 0 0 1px #f5a995; }
.tc-bead-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tc-target-panel { padding: 10px; }
.tc-current-panel { min-width: 0; padding: 10px 0; }
.tc-pixel-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; border: 2px solid #d5b987; background: #102943; }
.tc-pixel { display: block; min-width: 0; min-height: 0; aspect-ratio: 1; }
.tc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tc-tile { position: relative; min-width: 44px; min-height: 44px; margin: 0; padding: 2px; border: 2px solid #96aecb; border-radius: 2px; background: #1f354f; color: #fff0cf; cursor: pointer; touch-action: manipulation; }
.tc-tile[aria-pressed="true"] { border-color: #ffe5ac; box-shadow: 0 0 0 2px #ffe5ac; }
.tc-tile:hover { border-color: #f6deb6; }
.tc-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); aspect-ratio: 1; }
.tc-tile-number { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 20px; height: 20px; background: #15334feb; border: 1px solid #fff0cf80; color: #fff2d8; font-size: 12px; line-height: 1; }
.tc-pattern-details { min-width: 0; color: var(--tc-muted); font-size: 13px; }
.tc-pattern-summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.tc-pattern-text { margin: 0; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 ui-monospace, "SFMono-Regular", monospace; background: #233b58; }
.tc-route-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; width: min(100%, 300px); margin: 0 auto; }
.tc-route-cell { display: grid; position: relative; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid #92aac5; border-radius: 3px; background: #37567c; color: #fff0cf; font-size: 23px; font-weight: 650; }
.tc-route-cell[data-kind="blocker"] { background: repeating-linear-gradient(135deg, #33465e 0, #33465e 7px, #735f42 7px, #735f42 14px); color: #ffe5b4; }
.tc-route-cell[data-kind="flag"] { color: #ffda8f; }
.tc-route-cell[data-kind="goal"] { border-color: #b7ddbc; }
.tc-route-visited { background: #6b7d68; border-color: #e9cca0; }
.tc-route-collected { color: #fff0cf !important; }
.tc-route-current { background: #f0d5a6; border: 3px solid #fff1cb; color: #263c59; box-shadow: 0 0 0 2px #e9cca040; }
.tc-route-current::after { position: absolute; right: 3px; bottom: 1px; content: "你"; font-size: 10px; }
.tc-route-position { margin: 10px 0 0; text-align: center; color: #f5e1bf; font-size: 13px; }
.tc-directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: min(100%, 300px); margin: 0 auto; }
.tc-directions [data-direction="up"] { grid-column: 2; }
.tc-directions [data-direction="left"] { grid-column: 1; grid-row: 2; }
.tc-directions [data-direction="down"] { grid-column: 2; grid-row: 2; }
.tc-directions [data-direction="right"] { grid-column: 3; grid-row: 2; }
@media (max-width: 440px) {
  .tc-rhythm-slots { grid-template-columns: 1fr; gap: 7px; }
  .tc-card { padding: 10px; }
  .tc-bead-boards { gap: 8px; }
  .tc-target-panel { padding: 8px; }
  .tc-beat { flex-basis: 30px; min-width: 29px; }
  .tc-button { padding-left: 8px; padding-right: 8px; }
  .tc-route-board { gap: 6px; }
}
@media (max-height: 520px) {
  .tc-challenge, .tc-content { gap: 8px; }
  .tc-beat-symbol { height: 24px; line-height: 24px; font-size: 22px; }
  .tc-route-board { max-width: 216px; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-button:active { transform: none; }
}