.trio-game { display: grid; justify-items: center; gap: 14px; width: min(100%, 36rem); margin-inline: auto; }
.trio-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; width: 100%; }
.trio-status { margin: 0; color: #d8cbea; font-size: .9rem; }
.trio-status[data-tone="success"] { color: #a9f9db; }
.trio-status[data-tone="warning"] { color: #ffd3a5; }
.trio-score { flex: none; border: 1px solid #634881; border-radius: 7px; padding: 5px 7px; color: #e6ceff; background: #2c2142; font-size: .78rem; font-weight: 800; }
.trio-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, 2vw, 12px); width: 100%; }
.trio-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2px, .8vw, 7px);
  aspect-ratio: 1.35;
  min-width: 0;
  min-height: 50px;
  padding: 5px;
  border: 1px solid #594973;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 60%, #382b54, #211b36);
  box-shadow: inset 0 2px 0 #ffffff0a;
  touch-action: manipulation;
}
.trio-card:hover { border-color: #b8a0e4; }
.trio-card[aria-pressed="true"] { border-color: #d4b3ff; background: #463062; box-shadow: inset 0 0 0 2px #b895e9; }
.trio-card[aria-pressed="true"]::after { position: absolute; inset: 3px 4px auto auto; color: #f4dcff; content: '✓'; font-size: 11px; line-height: 1; }
.trio-card.is-hint { border-color: #ffe59f; box-shadow: inset 0 0 0 1px #e7b865; }
.trio-mark { width: min(26%, 35px); aspect-ratio: 1; }
.trio-mark[data-shape="0"] { border-radius: 50%; }
.trio-mark[data-shape="1"] { clip-path: polygon(50% 1%, 99% 50%, 50% 99%, 1% 50%); }
.trio-mark[data-shape="2"] { clip-path: polygon(50% 3%, 97% 91%, 3% 91%); }
.trio-mark[data-color="0"] { background: #9af5cf; }
.trio-mark[data-color="1"] { background: repeating-linear-gradient(135deg, #feb5e7 0 3px, #a15896 3px 5px); }
.trio-mark[data-color="2"] { background: radial-gradient(#98611c 1px, transparent 1.25px) 0 0 / 4px 4px, #ffd084; }
.trio-actions { justify-content: center; }