/* isolation.css — 孤立游戏专用样式 */

.dice-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.dice {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s;
}

.dice .dot {
  width: 16px;
  height: 16px;
  background: #37474f;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
}

/* Face 1 */
.face-1 .dot:nth-child(1) { grid-area: 2 / 2; }

/* Face 2 */
.face-2 .dot:nth-child(1) { grid-area: 1 / 1; }
.face-2 .dot:nth-child(2) { grid-area: 3 / 3; }

/* Face 3 */
.face-3 .dot:nth-child(1) { grid-area: 1 / 1; }
.face-3 .dot:nth-child(2) { grid-area: 2 / 2; }
.face-3 .dot:nth-child(3) { grid-area: 3 / 3; }

/* Face 4 */
.face-4 .dot:nth-child(1) { grid-area: 1 / 1; }
.face-4 .dot:nth-child(2) { grid-area: 1 / 3; }
.face-4 .dot:nth-child(3) { grid-area: 3 / 1; }
.face-4 .dot:nth-child(4) { grid-area: 3 / 3; }

/* Face 5 */
.face-5 .dot:nth-child(1) { grid-area: 1 / 1; }
.face-5 .dot:nth-child(2) { grid-area: 1 / 3; }
.face-5 .dot:nth-child(3) { grid-area: 2 / 2; }
.face-5 .dot:nth-child(4) { grid-area: 3 / 1; }
.face-5 .dot:nth-child(5) { grid-area: 3 / 3; }

/* Face 6 */
.face-6 .dot:nth-child(1) { grid-area: 1 / 1; }
.face-6 .dot:nth-child(2) { grid-area: 1 / 3; }
.face-6 .dot:nth-child(3) { grid-area: 2 / 1; }
.face-6 .dot:nth-child(4) { grid-area: 2 / 3; }
.face-6 .dot:nth-child(5) { grid-area: 3 / 1; }
.face-6 .dot:nth-child(6) { grid-area: 3 / 3; }

@keyframes diceRoll {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(0.95); }
  50%  { transform: rotate(180deg) scale(1.05); }
  75%  { transform: rotate(270deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}
.dice.spin {
  animation: diceRoll 0.12s linear infinite;
}

/* 孤立状态 */
.char-card.isolated {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.char-card.sad .char-svg {
  animation: bounce 1.2s ease-in-out infinite;
}

.sad .c-mouth {
  border-top: 3px solid #a34c4c;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  top: 119px;
}

.controls {
  text-align: center;
  margin-top: 12px;
}

.roll-btn {
  background: #37474f;
  color: #fff;
  border: none;
  padding: 12px 36px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}
.roll-btn:hover:not(:disabled) {
  background: #263238;
}
.roll-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.roll-btn:disabled {
  background: #90a4ae;
  cursor: not-allowed;
}

/* 结果覆盖：黄色 */
.result {
  background: #fff3cd;
  color: #37474f;
}
.result .big {
  color: #c0392b;
}

/* === Mobile：3 卡竖排，紧凑 ===
 * ogc.css 已经把 stage 改成 column，但 130×170 svg × 3 占太多高度
 * 这里再压一档到 110×140，比例 ≈ 0.85
 */
@media (max-width: 700px) {
  .stage {
    gap: 10px;
    padding: 8px 0 16px;
    min-height: auto;
  }
  .char-card .name {
    font-size: 14px;
  }
  .char-card .role {
    font-size: 10px;
  }
  .char-svg {
    width: 110px;
    height: 140px;
  }
  .ch .c-face { top: 30px; width: 58px; height: 64px; }
  .ch .c-eye { top: 58px; width: 5px; height: 5px; }
  .ch .c-mouth { top: 76px; width: 15px; height: 7px; }
  .ch .c-body { top: 96px; width: 70px; height: 50px; }
  .ch.eamin .c-hair { top: 24px; width: 64px; height: 22px; }
  .ch.j .c-hair { top: 16px; width: 82px; height: 92px; }
  .ch.j .c-hair::before,
  .ch.j .c-hair::after { width: 15px; height: 52px; bottom: -32px; }
  .ch.andy .c-hair { top: 24px; width: 66px; height: 50px; }
  .ch.andy .c-hair::before,
  .ch.andy .c-hair::after { width: 15px; height: 26px; bottom: -8px; }
}