/* A slightly more theatrical court, with a very underqualified clerk. */
:root {
  --gold: #d2b984;
  --line: #d2b98438;
  --ivory: #f8efdf;
}
body {
  background: radial-gradient(ellipse at 85% 0, #58203955, transparent 55%),
    radial-gradient(ellipse at 10% 65%, #3c2d4c35, transparent 65%), #100d12;
}
.court-header { padding-bottom: 10px; }
.crest { background: radial-gradient(circle at 25% 20%, #593444, #231723); box-shadow: inset 0 0 0 4px #d2b9840b; }
.opening {
  border: 1px solid var(--line);
  padding: 35px 24px 32px;
  border-radius: 8px;
  position: relative;
  background: linear-gradient(140deg, #d2b98407, #6a30420a);
  box-shadow: 0 25px 80px #0003;
}
.opening::before, .opening::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--gold);
  border-style: solid;
  opacity: .6;
  pointer-events: none;
}
.opening::before { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
.opening::after { bottom: 9px; right: 9px; border-width: 0 1px 1px 0; }
.opening h1 { font-size: clamp(2.3rem, 8.7vw, 5rem); }
.opening .kicker { font-size: .58rem; letter-spacing: .16em; }
.opening .kicker::before { display: none; }
.opening .gold-line { margin-bottom: 24px; }
.wax-seal {
  width: 69px; height: 69px; display: grid; place-items: center;
  margin: 0 auto 25px; border: 1px solid #b57988;
  border-radius: 43% 48% 44% 48%; rotate: -7deg;
  background: radial-gradient(circle at 30% 20%, #9a5269, #5b253c 72%);
  color: #e6b9ad; font: italic 2.15rem Georgia, serif;
  box-shadow: inset 0 0 0 5px #b7798824, inset 0 0 0 7px #2e102729, 0 9px 24px #0005;
}
.document { border-radius: 7px; background: linear-gradient(135deg, #e9d7bc10, #e9d7bc04); }
.document-header { color: #d6be90; }
.document dt { color: #c3ab80; }
.document dd { color: #f1e6d5; }
.stamp { text-shadow: 0 0 12px #ba667819; border-radius: 2px; }
.docket-portrait {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 25px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.docket-portrait svg {
  flex: none; width: 74px; height: 90px; border: 1px solid #c6ab7255;
  background: repeating-linear-gradient(0deg, transparent 0 17px, #c6ab7218 17px 18px);
  border-radius: 3px; color: #a98a82;
}
.docket-portrait .field-label { display: block; margin-bottom: 8px; }
.docket-portrait p { font: italic 1rem/1.45 Georgia, serif; color: #c5b1b9; margin: 0; }
.stamp.corner { top: 202px; right: 20px; font-size: .7rem; }
.evidence { position: relative; background: linear-gradient(150deg, #c6ab7210, #c6ab7203); }
.evidence summary { min-height: 88px; padding-left: 29px; }
.evidence summary::before {
  content: ''; width: 5px; height: 25px; border: 1px solid #c6ab7270;
  border-radius: 5px; position: absolute; left: 11px; top: 29px; rotate: -9deg;
}
.evidence:not([open]) { box-shadow: 0 5px 16px #0002; }
.evidence[open] { border-color: #c6ab7270; }
.evidence.classified summary { color: #e8bdcb; }
.evidence.classified:not([open]) summary::after { content: 'REVELAR +'; }
.clerk-note {
  display: flex; align-items: flex-start; gap: 12px; margin: 25px 0 0;
  border-left: 2px solid #977264; padding: 13px 16px;
  background: #bda38507; border-radius: 0 5px 5px 0;
}
.clerk-note svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #ba9c79; }
.clerk-note span { display: block; font-size: .53rem; letter-spacing: .13em; color: #ad927a; margin-bottom: 4px; }
.clerk-note p { font: italic .95rem/1.5 Georgia, serif; color: #c6b6b4; margin: 0; }
.button { border-radius: 5px; box-shadow: inset 0 1px #fff2, 0 10px 30px #0003; }
.choices .button { position: relative; padding-right: 39px; }
.choices .button::after { content: ''; position: absolute; right: 19px; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 1px 0 0; translate: 0 -50%; rotate: 45deg; opacity: .6; }
.serious { padding: 10px 0; }
.serious h2 { color: #eadce3; }
.serious .kicker { color: #b99cad; }
@media (min-width: 720px) {
  .opening { padding: 42px 40px; }
  .stamp.corner { top: 222px; right: 35px; }
}
@media (max-width: 380px) { .stamp.corner { position: static; } }
@media (prefers-reduced-motion: no-preference) {
  .wax-seal { animation: sealAppear .8s var(--ease) both; }
  .evidence { transition: border-color .35s, box-shadow .35s; }
  @keyframes sealAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}