/* Shared briefcases for classroom and sample play. */
.offer-case {
  --case-face: linear-gradient(145deg, #515963 0%, #252b34 27%, #0a0e15 68%, #242b35 100%);
  --case-seam: #05080e;
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding: 23px 6px 16px;
  border: 3px solid #c2cad4;
  border-top-color: #eef2f6;
  border-right-color: #8894a2;
  border-bottom: 5px solid #798695;
  border-radius: 10px;
  /* Corner rivets, two chrome latches, a lid seam, and a textured black shell. */
  --case-hardware:
    radial-gradient(circle, #f4f7fa 1px, #687786 1.7px, transparent 2px) left 4px top 4px / 5px 5px no-repeat,
    radial-gradient(circle, #f4f7fa 1px, #687786 1.7px, transparent 2px) right 4px top 4px / 5px 5px no-repeat,
    radial-gradient(circle, #f4f7fa 1px, #687786 1.7px, transparent 2px) left 4px bottom 4px / 5px 5px no-repeat,
    radial-gradient(circle, #f4f7fa 1px, #687786 1.7px, transparent 2px) right 4px bottom 4px / 5px 5px no-repeat,
    linear-gradient(90deg, #7e8a98, #f5f7fa 42%, #919caa 70%, #dce3ec) left 17% top 7px / 9px 14px no-repeat,
    linear-gradient(90deg, #7e8a98, #f5f7fa 42%, #919caa 70%, #dce3ec) right 17% top 7px / 9px 14px no-repeat,
    linear-gradient(var(--case-seam), var(--case-seam)) left 0 top 17px / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px);
  background: var(--case-hardware), var(--case-face);
  color: #f5f7fa;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 2px #000b;
  box-shadow: inset 0 0 0 1px #ffffff40, inset 0 -5px 9px #0008, 0 4px 0 #293443, 0 8px 12px #00111d55;
  transition: transform .15s, filter .15s;
}
.offer-case::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 12px;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid #aab5c3;
  border-top-color: #e8edf3;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #101924;
  box-shadow: inset 0 2px 2px #000b, 0 -1px 0 #ffffff60;
}
button.offer-case:hover:not(:disabled) {
  background: var(--case-hardware), var(--case-face);
  color: #f5f7fa;
  transform: translateY(-3px);
  filter: brightness(1.18);
}
button.offer-case:focus-visible {
  outline: 3px solid #ff8a38;
  outline-offset: 4px;
}
.offer-case:disabled { opacity: 1; }
.offer-case.is-own {
  outline: 3px solid #ff8a38;
  outline-offset: 2px;
}
.offer-case.is-own::after {
  content: 'YOURS';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 1.5px;
  color: #ffcb9c;
}
.offer-case.is-open {
  --case-face: radial-gradient(ellipse at 50% 20%, #d13c4c 0%, #a2182b 48%, #640e1b 100%);
  --case-seam: #590914;
  color: #fff;
  font-size: clamp(18px, 3vw, 28px);
  text-shadow: 0 1px 2px #490810;
  box-shadow: inset 0 0 0 1px #ffd0d04d, inset 0 5px 12px #42000b99, 0 4px 0 #293443, 0 8px 12px #00111d55;
}
@media (max-width: 600px) {
  .offer-case {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    padding: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  .offer-case.is-open { font-size: clamp(16px, 4vw, 23px); }
}
.offer-case .offer-points-label { display: block; font-size: 9px; line-height: 1.5; letter-spacing: 1.8px; font-weight: 700; }
.offer-rules { width: min(480px, calc(100% - 40px)); box-sizing: border-box; padding: 28px; border: 2px solid #b9c3cf; border-radius: 16px; background: #151b26; color: #fff; box-shadow: 0 20px 80px #0009; }
.offer-rules::backdrop { background: #020710cc; }
.offer-rules h2 { margin: 0 0 18px; color: #fff; font-size: 28px; }
.offer-rules p { color: #e2e7ee; line-height: 1.6; }
.offer-rules button { border: 1px solid #ee7784; border-radius: 8px; padding: 12px 18px; background: #a2182b; color: #fff; font-weight: 700; cursor: pointer; }
.offer-average-dialog { text-align: center; }
.offer-average-points { display: block; font-size: clamp(28px, 7vw, 42px); line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .offer-case { transition: none; }
  button.offer-case:hover:not(:disabled) { transform: none; }
}