@charset "UTF-8";

:root {
  color-scheme: dark;
  --sc-void: #070808;
  --sc-wood-950: #100b09;
  --sc-wood-900: #1b100d;
  --sc-wood-800: #2c1913;
  --sc-wood-700: #44271b;
  --sc-brass-100: #ffe7a0;
  --sc-brass-300: #d8b45a;
  --sc-brass-500: #a9742d;
  --sc-brass-700: #684019;
  --sc-vellum-50: #fff8df;
  --sc-vellum-100: #f4e4bc;
  --sc-vellum-300: #d2ad70;
  --sc-ink: #25140d;
  --sc-forest-300: #5f9a73;
  --sc-forest-500: #286044;
  --sc-forest-700: #163e2d;
  --sc-forest-900: #0c251b;
  --sc-ruby-400: #c85a51;
  --sc-ruby-700: #7b2926;
  --sc-mana-400: #59a7d5;
  --sc-mana-700: #2c6689;
  --sc-text: #f8edcf;
  --sc-muted: #cbbd9c;
  --sc-focus: #ffe38a;
  --sc-shadow: 0 24px 70px rgba(0, 0, 0, .56);
  --sc-edge: linear-gradient(135deg, #5e3b1b, #e0bd64 32%, #70471c 65%, #d7ac4e);
  --sc-serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sc-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-radius: 18px;
  --sc-safe-top: env(safe-area-inset-top, 0px);
  --sc-safe-right: env(safe-area-inset-right, 0px);
  --sc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sc-safe-left: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--sc-void); }
body { min-width: 320px; min-height: 100%; margin: 0; background: var(--sc-void); color: var(--sc-text); font-family: var(--sc-ui); }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.sr-only,
.oak-login-v2__skip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.oak-login-v2__skip:focus {
  z-index: 1000;
  top: 14px;
  left: 14px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  padding: 12px 16px !important;
  background: var(--sc-vellum-50);
  color: var(--sc-ink);
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--sc-focus);
  outline-offset: 3px;
}

.sc-frame,
.oak-login-v2__book,
.oak-campaigns-v2__selected,
.oak-new-campaign-v2__book,
.oak-profiles-v2__book,
.oak-campaign-delete-v2__dialog,
.character-panel,
.narrative-panel,
.choices,
.composer {
  position: relative;
  border: 1px solid rgba(222, 185, 91, .72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 16%),
    radial-gradient(circle at 50% 0, rgba(94, 154, 115, .1), transparent 32%),
    linear-gradient(145deg, rgba(40, 23, 17, .97), rgba(12, 9, 8, .98));
  box-shadow: inset 0 0 0 1px rgba(78, 45, 21, .9), inset 0 0 34px rgba(0,0,0,.52), var(--sc-shadow);
}

.sc-frame::before,
.oak-login-v2__book::before,
.oak-campaigns-v2__selected::before,
.oak-new-campaign-v2__book::before,
.oak-profiles-v2__book::before,
.character-panel::before,
.narrative-panel::before,
.choices::before,
.composer::before {
  position: absolute;
  z-index: 2;
  inset: 7px;
  content: "";
  border: 1px solid rgba(216, 180, 90, .28);
  border-radius: inherit;
  pointer-events: none;
}

.sc-button,
.oak-login-v2__submit,
.oak-campaigns-v2__continue,
.oak-campaigns-v2__new,
.oak-new-campaign-v2__seal,
.oak-profiles-v2__create,
#send-button {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid var(--sc-brass-300);
  border-radius: 13px 4px 13px 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 40%),
    linear-gradient(135deg, var(--sc-forest-500), var(--sc-forest-900));
  color: var(--sc-vellum-50);
  box-shadow: inset 0 0 0 1px rgba(14, 37, 27, .8), 0 5px 0 #0a1d15, 0 14px 24px rgba(0,0,0,.34);
  font-weight: 800;
  letter-spacing: .05em;
  text-decoration: none;
  text-shadow: 0 1px 1px #07130e;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.sc-button:hover,
.oak-login-v2__submit:hover,
.oak-campaigns-v2__continue:hover,
.oak-campaigns-v2__new:hover,
.oak-new-campaign-v2__seal:hover,
.oak-profiles-v2__create:hover,
#send-button:hover { filter: brightness(1.12); transform: translateY(-1px); }

.sc-button:active,
.oak-login-v2__submit:active,
.oak-campaigns-v2__continue:active,
.oak-campaigns-v2__new:active,
.oak-new-campaign-v2__seal:active,
.oak-profiles-v2__create:active,
#send-button:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(14,37,27,.8), 0 2px 0 #0a1d15; }

.sc-button--secondary,
.oak-new-campaign-v2__cancel,
.oak-profiles-v2__cancel,
.oak-campaigns-v2__archive-link,
.oak-campaign-delete-v2__cancel {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(216,180,90,.52);
  border-radius: 10px 3px 10px 3px;
  background: linear-gradient(180deg, rgba(75,45,29,.95), rgba(29,17,13,.98));
  color: var(--sc-vellum-100);
  text-decoration: none;
}

.sc-button--danger,
.oak-campaign-delete-v2__confirm {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #d28a74;
  border-radius: 10px 3px 10px 3px;
  background: linear-gradient(#9e433b, #641f20);
  color: #fff3e2;
  font-weight: 800;
}

.sc-field,
.oak-login-v2__control,
.oak-new-campaign-v2__field input,
.oak-new-campaign-v2__field textarea,
.oak-profiles-v2__field input {
  min-height: 50px;
  border: 1px solid rgba(216,180,90,.5);
  border-radius: 10px 3px 10px 3px;
  background: linear-gradient(180deg, rgba(6,10,9,.82), rgba(19,13,11,.92));
  color: var(--sc-text);
  box-shadow: inset 0 2px 12px rgba(0,0,0,.38);
}

.oak-login-v2__control:focus-within,
.oak-new-campaign-v2__field input:focus,
.oak-new-campaign-v2__field textarea:focus,
.oak-profiles-v2__field input:focus {
  border-color: var(--sc-focus);
  box-shadow: 0 0 0 3px rgba(255,227,138,.15), inset 0 2px 12px rgba(0,0,0,.38);
}

.sc-kicker,
.oak-login-v2__eyebrow,
.oak-campaigns-v2__ribbon,
.oak-new-campaign-v2__eyebrow,
.oak-profiles-v2__eyebrow,
.oak-profiles-v2__page-kicker,
.oak-campaign-delete-v2__eyebrow {
  color: var(--sc-brass-100);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.sc-title,
.oak-login-v2__story h1,
.oak-login-v2__book h2,
.oak-campaigns-v2__selected h2,
.oak-new-campaign-v2 h1,
.oak-profiles-v2 h1,
.oak-profiles-v2 h2,
.oak-campaign-delete-v2 h2 {
  margin: 0;
  color: var(--sc-vellum-50);
  font-family: var(--sc-serif);
  font-weight: 700;
  line-height: .98;
  text-wrap: balance;
}

.sc-modal-layer,
.oak-index-v2__modal-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, var(--sc-safe-top)) max(16px, var(--sc-safe-right)) max(16px, var(--sc-safe-bottom)) max(16px, var(--sc-safe-left));
}

.oak-index-v2__veil {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 7, .82);
  backdrop-filter: blur(14px) saturate(.7);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}