* {
  box-sizing: border-box;
}


:root {

  --black: #0c0705;

  --brown-0: #140b08;
  --brown-1: #20110c;
  --brown-2: #321a11;
  --brown-3: #4b2a1b;

  --burgundy: #68161d;

  --gold: #caa65a;
  --gold-light: #ead08b;
  --gold-dark: #7b6031;

  --cream: #f3e7c9;
  --paper: #eadbb9;
  --muted: #bda986;

  --line: rgba(205, 167, 83, 0.26);

}


html {

  scroll-behavior: smooth;

  background: var(--black);

}


body {

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  color: var(--cream);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  background:

    radial-gradient(
      circle at 50% -10%,
      rgba(126, 76, 42, 0.22),
      transparent 34rem
    ),

    linear-gradient(
      180deg,
      #170d09 0%,
      #0b0705 100%
    );

}


button,
a {

  font: inherit;

}


button {

  -webkit-tap-highlight-color: transparent;

}


img {

  display: block;

  max-width: 100%;

}


.hidden {

  display: none !important;

}



/* =========================================================
   BACKGROUND
   ========================================================= */

.ambient {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  background:

    linear-gradient(
      90deg,

      transparent 0 7%,

      rgba(174, 120, 68, 0.035) 7% 8%,

      transparent 8% 92%,

      rgba(174, 120, 68, 0.035) 92% 93%,

      transparent 93%
    ),

    repeating-linear-gradient(
      0deg,

      rgba(255, 255, 255, 0.012) 0 1px,

      transparent 1px 4px
    );

}


.screen {

  position: relative;

  z-index: 1;

  min-height: 100vh;
  min-height: 100svh;

}



/* =========================================================
   OPENING REMARK
   ========================================================= */

.intro-screen {

  display: grid;

  place-items: center;

  padding:
    22px
    14px
    42px;

}


.note-panel {

  position: relative;

  width:
    min(
      760px,
      100%
    );

  padding:
    clamp(
      24px,
      5vw,
      48px
    );

  border:
    1px solid
    rgba(217, 178, 91, 0.34);

  background:

    linear-gradient(
      180deg,
      rgba(59, 31, 19, 0.98),
      rgba(24, 13, 9, 0.99)
    );

  box-shadow:

    0 28px 75px
    rgba(0, 0, 0, 0.54),

    inset
    0 0 70px
    rgba(212, 169, 81, 0.035);

}


.note-panel::before,
.note-panel::after {

  content: "";

  position: absolute;

  left: 18px;
  right: 18px;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--gold-dark),
      transparent
    );

}


.note-panel::before {

  top: 13px;

}


.note-panel::after {

  bottom: 13px;

}



/* =========================================================
   NOTE SEAL
   ========================================================= */

.note-seal {

  width: 68px;
  height: 68px;

  border-radius: 50%;

  margin:
    0
    auto
    20px;

  display: grid;

  place-items: center;

  border:
    2px solid
    var(--gold);

  outline:
    1px dashed
    rgba(234, 208, 139, 0.5);

  outline-offset: -8px;

  color: var(--gold-light);

  font-size: 28px;

  box-shadow:

    0
    0
    0
    7px
    rgba(202, 166, 90, 0.06);

}



/* =========================================================
   NOTE HEADINGS
   ========================================================= */

.note-kicker,
.note-section-label,
.modal-kicker {

  margin:
    0
    0
    12px;

  text-align: center;

  color: var(--gold);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.17em;

  line-height: 1.55;

  text-transform: uppercase;

}


.note-panel h1 {

  margin:
    0
    0
    30px;

  text-align: center;

  font-size:
    clamp(
      2rem,
      7vw,
      3.7rem
    );

  line-height: 1.03;

  font-weight: 600;

  color: #f5e8c8;

  text-shadow:

    0
    5px
    18px
    rgba(0, 0, 0, 0.5);

}



/* =========================================================
   NOTE CONTENT
   ========================================================= */

.note-copy {

  font-size:
    clamp(
      1.02rem,
      3.3vw,
      1.24rem
    );

  line-height: 1.62;

  color: #eddfbf;

}


.note-copy p {

  margin:
    0
    0
    18px;

}


.note-copy strong {

  color: #f3ddb0;

}


.note-copy em {

  color: #f3e6c9;

}


.note-copy blockquote {

  margin:
    23px
    auto;

  padding:
    18px
    20px;

  max-width: 590px;

  border-left:
    3px solid
    var(--gold-dark);

  background:
    rgba(
      234,
      208,
      139,
      0.05
    );

  font-size: 1.08em;

  line-height: 1.5;

  color: #f5e9ce;

}


.note-copy ol {

  margin:
    4px
    0
    22px;

  padding-left: 27px;

}


.note-copy li {

  margin:
    7px
    0;

}


.note-rule {

  height: 1px;

  margin:
    30px
    0;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--line),
      transparent
    );

}


.note-section-label {

  text-align: left;

  margin-top: 4px;

  font-size: 0.75rem;

}



/* =========================================================
   OPENING BUTTONS
   ========================================================= */

.note-action,
.enter-court,
.modal-button {

  width: 100%;

  border:
    1px solid
    rgba(222, 185, 99, 0.52);

  border-radius: 3px;

  cursor: pointer;

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #f7e8c7;

  background:

    linear-gradient(
      180deg,
      #57301f,
      #351c13
    );

  box-shadow:

    0
    6px
    0
    #150a07,

    0
    13px
    25px
    rgba(0, 0, 0, 0.3);

  transition:

    transform 0.16s ease,

    border-color 0.16s ease,

    background 0.16s ease,

    box-shadow 0.16s ease;

}


.note-action {

  padding:
    14px
    16px;

  margin:
    8px
    0
    2px;

  font:
    700
    0.78rem / 1.35
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.055em;

}


.enter-court {

  margin-top: 12px;

  padding:
    18px;

  font:
    800
    0.83rem / 1.3
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.11em;

  background:

    linear-gradient(
      180deg,
      #701820,
      #450e13
    );

  border-color:
    rgba(
      240,
      205,
      123,
      0.64
    );

}


.note-action:hover,
.enter-court:hover,
.modal-button:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(
      239,
      207,
      133,
      0.9
    );

}


.note-action:active,
.enter-court:active,
.modal-button:active {

  transform:
    translateY(4px);

  box-shadow:

    0
    2px
    0
    #150a07,

    0
    6px
    13px
    rgba(0, 0, 0, 0.24);

}



/* =========================================================
   COURTROOM
   ========================================================= */

.trial-screen {

  padding:
    18px
    10px
    60px;

}


.courtroom {

  width:
    min(
      900px,
      100%
    );

  margin:
    0
    auto;

  border:
    1px solid
    rgba(211, 176, 97, 0.3);

  border-radius: 4px;

  background:

    linear-gradient(
      180deg,
      rgba(54, 29, 19, 0.98),
      rgba(22, 12, 9, 0.99)
    );

  box-shadow:

    0
    25px
    70px
    rgba(0, 0, 0, 0.58);

  overflow: hidden;

}



/* =========================================================
   COURT HEADER
   ========================================================= */

.court-header {

  position: relative;

  padding:
    44px
    25px
    34px;

  text-align: center;

  border-bottom:
    1px solid
    rgba(202, 169, 95, 0.26);

  background:

    linear-gradient(
      180deg,
      rgba(51, 27, 18, 0.98),
      rgba(27, 15, 10, 0.99)
    );

}


.court-header::before {

  content: "";

  position: absolute;

  top: 13px;

  left: 18px;
  right: 18px;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--gold-dark),
      transparent
    );

}



/* =========================================================
   COURT SEAL
   ========================================================= */

.court-seal {

  display: flex;

  justify-content: center;

  margin-bottom: 20px;

}


.court-seal span {

  width: 76px;
  height: 76px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  border:
    2px solid
    var(--gold);

  outline:
    1px dashed
    rgba(228, 198, 126, 0.5);

  outline-offset: -9px;

  color: var(--gold-light);

  font-size: 31px;

  box-shadow:

    0
    0
    0
    7px
    rgba(199, 167, 92, 0.06),

    inset
    0
    0
    17px
    rgba(199, 167, 92, 0.1);

}



/* =========================================================
   COURT TITLE
   ========================================================= */

.court-small-title {

  margin:
    0
    0
    11px;

  color: var(--gold-light);

  font:
    700
    0.67rem / 1.6
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.19em;

  text-transform: uppercase;

  opacity: 0.8;

}


.court-header h2 {

  margin: 0;

  color: #f4e7c7;

  font-size:
    clamp(
      1.8rem,
      7vw,
      3.35rem
    );

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: 0.05em;

  text-shadow:
    0
    3px
    12px
    rgba(0, 0, 0, 0.65);

}


.court-header h2 span {

  display: block;

  margin-top: 10px;

  color: var(--gold-light);

  font-size: 0.52em;

  letter-spacing: 0.13em;

  line-height: 1.35;

}


.court-meta {

  margin-top: 25px;

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

  color:
    rgba(
      242,
      229,
      199,
      0.58
    );

  font:
    700
    0.63rem / 1.2
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.15em;

}


.status {

  color: #d48383;

}



/* =========================================================
   COURT TRANSCRIPT
   ========================================================= */

.transcript {

  min-height: 300px;

  padding:
    42px
    clamp(
      19px,
      5vw,
      46px
    )
    22px;

  background:

    radial-gradient(
      circle at top,
      rgba(184, 139, 77, 0.05),
      transparent 44%
    ),

    rgba(
      12,
      7,
      5,
      0.4
    );

  transition:

    opacity 0.28s ease,

    transform 0.28s ease;

}


.transcript.changing {

  opacity: 0;

  transform:
    translateY(5px);

}



/* =========================================================
   COURT SENTENCES
   ========================================================= */

.court-entry {

  width:
    min(
      690px,
      100%
    );

  margin:
    0
    auto
    25px;

  opacity: 0;

  transform:
    translateY(8px);

  animation:

    courtFade
    0.52s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    forwards;

}


@keyframes courtFade {

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.speaker {

  display: block;

  margin-bottom: 8px;

  color: var(--gold);

  font:
    800
    0.67rem / 1.2
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}


.court-text {

  margin: 0;

  color:
    rgba(
      246,
      235,
      211,
      0.96
    );

  font-size:
    clamp(
      1.05rem,
      3.7vw,
      1.25rem
    );

  line-height: 1.67;

}


.court-text strong {

  color: var(--gold-light);

  font-weight: 600;

}



/* EVIDENCE */

.court-entry.evidence {

  padding:
    15px
    17px;

  border-left:
    3px solid
    var(--burgundy);

  background:

    linear-gradient(
      90deg,
      rgba(102, 22, 29, 0.16),
      transparent
    );

}



/* QUOTES */

.court-entry.quote {

  padding:
    18px
    19px;

  border:
    1px solid
    rgba(199, 168, 94, 0.18);

  background:
    rgba(
      235,
      218,
      181,
      0.04
    );

}


.court-entry.quote .court-text {

  font-style: italic;

  color: #f5e9ce;

}



/* BIG SECTION TITLES */

.court-entry.big-title {

  text-align: center;

  margin-top: 10px;

  margin-bottom: 30px;

}


.court-entry.big-title .speaker,
.court-entry.verdict .speaker,
.court-entry.pause .speaker,
.court-entry.case-closed .speaker {

  display: none;

}


.court-entry.big-title .court-text {

  color: var(--gold-light);

  font-size:
    clamp(
      1.42rem,
      6vw,
      2.5rem
    );

  line-height: 1.2;

  letter-spacing: 0.065em;

  text-transform: uppercase;

}



/* VERDICT */

.court-entry.verdict {

  text-align: center;

  padding:
    26px
    18px;

  border:
    2px solid
    rgba(209, 174, 94, 0.45);

  background:

    radial-gradient(
      circle,
      rgba(115, 20, 25, 0.25),
      rgba(55, 9, 13, 0.08)
    );

}


.court-entry.verdict .court-text {

  color: #f3dda5;

  font-size:
    clamp(
      2rem,
      10vw,
      4.2rem
    );

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.07em;

}



/* EMOJI */

.court-entry.emoji {

  text-align: center;

}


.court-entry.emoji .court-text {

  font-size: 3rem;

  line-height: 1;

}



/* CLARENCE */

.court-entry.clarence {

  text-align: center;

  margin:
    32px
    auto
    36px;

  animation-duration: 1.05s;

}


.court-entry.clarence .speaker {

  text-align: center;

  color: var(--gold-light);

}


.court-entry.clarence .court-text {

  font-size: 1.65rem;

  font-style: italic;

  letter-spacing: 0.2em;

  color: #f5e8c8;

}



/* DRAMATIC PAUSE */

.court-entry.pause {

  text-align: center;

}


.court-entry.pause .court-text {

  color:
    rgba(
      227,
      206,
      164,
      0.42
    );

  letter-spacing: 0.42em;

}



/* CASE CLOSED */

.court-entry.case-closed {

  text-align: center;

  padding:
    28px
    15px;

  border-top:
    1px solid
    rgba(201, 166, 88, 0.3);

  border-bottom:
    1px solid
    rgba(201, 166, 88, 0.3);

}


.court-entry.case-closed .court-text {

  color: var(--gold-light);

  font-size:
    clamp(
      1.9rem,
      8vw,
      3.4rem
    );

  letter-spacing: 0.07em;

}



/* =========================================================
   WAITING DOTS
   ========================================================= */

.court-waiting {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 7px;

  min-height: 28px;

  margin:
    0
    auto
    10px;

}


.court-waiting span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--gold-dark);

  animation:
    waitingDot
    1.15s
    infinite
    ease-in-out;

}


.court-waiting span:nth-child(2) {

  animation-delay: 0.16s;

}


.court-waiting span:nth-child(3) {

  animation-delay: 0.32s;

}


@keyframes waitingDot {

  0%,
  70%,
  100% {

    opacity: 0.2;

    transform:
      translateY(0);

  }


  35% {

    opacity: 0.9;

    transform:
      translateY(-4px);

  }

}



/* =========================================================
   COURT RESPONSE BUTTONS
   ========================================================= */

.choices {

  width:
    min(
      720px,
      calc(100% - 32px)
    );

  margin:
    10px
    auto
    44px;

  display: grid;

  grid-template-columns:

    repeat(
      auto-fit,
      minmax(
        190px,
        1fr
      )
    );

  gap: 12px;

}


.choice-button {

  position: relative;

  min-height: 56px;

  padding:
    14px
    17px;

  border:
    1px solid
    rgba(209, 175, 98, 0.46);

  border-radius: 3px;

  background:

    linear-gradient(
      180deg,
      #55311f,
      #382015
    );

  color: #f4e7c7;

  font:
    800
    0.73rem / 1.35
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.055em;

  cursor: pointer;

  box-shadow:

    0
    6px
    0
    #1b0d08,

    0
    12px
    22px
    rgba(0, 0, 0, 0.28);

  transition:

    transform 0.16s ease,

    border-color 0.16s ease,

    background 0.16s ease,

    box-shadow 0.16s ease;

  animation:
    buttonIn
    0.48s
    ease
    backwards;

}


.choice-button:nth-child(2) {

  animation-delay: 0.07s;

}


.choice-button:nth-child(3) {

  animation-delay: 0.14s;

}


.choice-button:nth-child(4) {

  animation-delay: 0.21s;

}


@keyframes buttonIn {

  from {

    opacity: 0;

    transform:
      translateY(8px);

  }


  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.choice-button:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(
      230,
      201,
      134,
      0.82
    );

  background:

    linear-gradient(
      180deg,
      #673a25,
      #422419
    );

}


.choice-button:active {

  transform:
    translateY(4px);

  box-shadow:

    0
    2px
    0
    #1b0d08,

    0
    5px
    12px
    rgba(0, 0, 0, 0.25);

}


.choice-button:disabled {

  opacity: 0.46;

  cursor: default;

}


.choice-button.restart {

  background:

    linear-gradient(
      180deg,
      #67161e,
      #3f0d12
    );

}



/* =========================================================
   MODALS
   ========================================================= */

.modal {

  position: fixed;

  inset: 0;

  z-index: 80;

  display: grid;

  place-items: center;

  padding: 18px;

  background:
    rgba(
      5,
      3,
      2,
      0.78
    );

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

}


.modal-card {

  position: relative;

  width:
    min(
      570px,
      100%
    );

  max-height: 88vh;
  max-height: 88svh;

  overflow: auto;

  padding:
    32px
    24px
    26px;

  border:
    1px solid
    rgba(215, 176, 89, 0.42);

  background:

    linear-gradient(
      180deg,
      #3b2016,
      #1a0e0a
    );

  box-shadow:
    0
    25px
    65px
    rgba(0, 0, 0, 0.65);

}


.modal-card h2 {

  margin:
    0
    0
    18px;

  text-align: center;

  color: #f5e6c4;

  font-size:
    clamp(
      1.8rem,
      7vw,
      2.8rem
    );

}


.modal-card p {

  font-size: 1.04rem;

  line-height: 1.58;

  color: #eadcbc;

  margin:
    0
    0
    16px;

}


.modal-close {

  position: absolute;

  right: 10px;

  top: 8px;

  width: 40px;
  height: 40px;

  border: 0;

  background: transparent;

  color: #e3c887;

  font-size: 2rem;

  line-height: 1;

  cursor: pointer;

}



/* =========================================================
   QR
   ========================================================= */

.qr-frame {

  width:
    min(
      330px,
      100%
    );

  margin:
    22px
    auto;

  padding: 12px;

  border:
    1px solid
    rgba(218, 181, 92, 0.3);

  background: #efe6d2;

}


.qr-frame img {

  width: 100%;

  height: auto;

}


.qr-fallback {

  padding:
    54px
    15px;

  color: #3a271a;

  text-align: center;

  font:
    700
    0.82rem / 1.6
    Arial,
    Helvetica,
    sans-serif;

}



/* =========================================================
   MODAL BUTTONS
   ========================================================= */

.modal-button {

  min-height: 52px;

  padding:
    13px
    16px;

  margin-top: 10px;

  font:
    800
    0.72rem / 1.4
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing: 0.055em;

}


.modal-button.secondary {

  background:

    linear-gradient(
      180deg,
      #423024,
      #2a1a12
    );

  opacity: 0.9;

}


.email-button {

  word-break: break-word;

}



/* =========================================================
   TRANSITION CURTAIN
   ========================================================= */

.transition-curtain {

  position: fixed;

  inset: 0;

  z-index: 70;

  pointer-events: none;

  background: #090503;

  opacity: 0;

  transition:
    opacity
    0.28s
    ease;

}


.transition-curtain.active {

  opacity: 0.55;

}


body.modal-open {

  overflow: hidden;

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .intro-screen {

    padding:
      8px
      7px
      28px;

  }


  .note-panel {

    padding:
      29px
      18px
      34px;

  }


  .note-panel h1 {

    text-align: left;

  }


  .note-kicker {

    text-align: left;

  }


  .trial-screen {

    padding:
      7px
      7px
      35px;

  }


  .court-header {

    padding:
      38px
      17px
      29px;

  }


  .court-seal span {

    width: 66px;
    height: 66px;

    font-size: 27px;

  }


  .transcript {

    padding:
      36px
      17px
      20px;

    min-height: 280px;

  }


  .choices {

    grid-template-columns: 1fr;

    width:
      calc(
        100% - 28px
      );

  }


  .modal {

    padding: 8px;

  }


  .modal-card {

    padding:
      31px
      18px
      24px;

  }

}



@media (max-width: 370px) {

  .court-header h2 {

    font-size: 1.55rem;

  }


  .note-panel h1 {

    font-size: 1.9rem;

  }


  .court-meta {

    gap: 12px;

  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  * {

    scroll-behavior:
      auto !important;

  }


  .court-entry,
  .choice-button {

    animation-duration:
      0.01ms !important;

  }


  .transition-curtain,
  .transcript {

    transition-duration:
      0.01ms !important;

  }

}