/* public/styles.css */
:root {
  --desk-dark: #241708;
  --desk-mid: #453016;
  --paper: #f3e7cc;
  --paper-side: #efe2c1;
  --paper-raised: #f8eed6;
  --paper-pressed: #ece0be;
  --line: #c9b183;
  --edge: #d3bd8e;
  --ink: #2b2115;
  --ink-soft: #6c5a3c;
  --ink-faint: #a48f63;
  --annotation: #8c6f42;
  --wax: #7e2a1e;
  --gold: #9a7328;
  --success: #4a6b2f;
  --failure: #8c3226;
  --on-desk: #f0dfb6;
  --on-desk-soft: #c2a878;
  --display-font: "IM Fell English", serif;
  --display-font-sc: "IM Fell English SC", serif;
  --body-font: "EB Garamond", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html, body {
  color: var(--on-desk);
  font-family: var(--body-font);
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5;
}

body {
  background: radial-gradient(900px 480px at 50% -120px, #ffb24a29, transparent 70%), repeating-linear-gradient(88deg, #0000000d 0 3px, transparent 3px 11px), radial-gradient(1400px 900px at 50% 28%, var(--desk-mid), var(--desk-dark) 78%);
  background-attachment: fixed;
  min-height: 100vh;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

h1, h2, h3, h4, h5 {
  letter-spacing: .02em;
  font-family: var(--display-font);
  color: var(--ink);
  margin: 0 0 .5rem;
}

.small-caps {
  font-family: var(--display-font-sc);
  letter-spacing: .12em;
  text-transform: lowercase;
  font-variant: small-caps;
  color: var(--annotation);
}

textarea, input[type="text"] {
  font-family: var(--body-font);
}

.paper {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--edge);
  box-shadow: 0 20px 44px #0000008c, inset 0 0 70px #a3834d2e;
}

.paper--side {
  background: var(--paper-side);
}

.paper:nth-child(odd) {
  transform: rotate(.3deg);
}

.paper:nth-child(2n) {
  transform: rotate(-.3deg);
}

.btn {
  font-family: var(--display-font);
  color: var(--on-desk-soft);
  cursor: pointer;
  background: none;
  border: 1px solid #8f7649;
  padding: .5rem 1.2rem;
  font-size: 1rem;
}

.paper .btn:not(:-webkit-any(.btn--primary, .btn--skill)), .paper--side .btn:not(:-webkit-any(.btn--primary, .btn--skill)) {
  color: var(--ink-soft);
  border-color: var(--line);
}

.paper .btn:not(:-moz-any(.btn--primary, .btn--skill)), .paper--side .btn:not(:-moz-any(.btn--primary, .btn--skill)) {
  color: var(--ink-soft);
  border-color: var(--line);
}

.paper .btn:not(:is(.btn--primary, .btn--skill)), .paper--side .btn:not(:is(.btn--primary, .btn--skill)) {
  color: var(--ink-soft);
  border-color: var(--line);
}

.btn:hover {
  background: #ffffff0f;
}

.btn--primary {
  background: linear-gradient(#ffffff1f, #00000026), var(--wax);
  color: var(--paper);
  border-color: var(--wax);
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--skill {
  border: 1px dashed var(--gold);
  color: var(--gold);
  background: none;
}

.btn:disabled {
  cursor: default;
  opacity: .6;
}

button:focus-visible {
  outline: 2px solid var(--wax);
  outline-offset: 2px;
}

.dice-row {
  display: inline-flex;
  vertical-align: middle;
  gap: .3rem;
}

.die {
  display: inline-flex;
  font-family: var(--display-font);
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: 5px;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

.die--success {
  background: var(--success);
  color: #f3e7cc;
}

.success {
  color: var(--success);
  font-weight: 600;
}

.failure {
  color: var(--failure);
  font-weight: 600;
}

.screen {
  padding: 1rem 0;
}

.desk-title {
  text-align: center;
  margin: 1rem 0 2.5rem;
}

.desk-title h1 {
  font-family: var(--display-font-sc);
  color: var(--on-desk);
  text-shadow: 0 2px 18px #ffb24a59;
  margin: 0 0 .5rem;
  font-size: 3rem;
}

.desk-title__subtitle {
  color: var(--on-desk-soft);
  margin: 0 0 .3rem;
  font-style: italic;
}

.desk-title__helper {
  color: var(--on-desk-soft);
  font-size: .95rem;
  font-style: italic;
}

.step {
  margin: 2rem 0;
  padding: 1.5rem;
}

.step h2 {
  font-family: var(--display-font-sc);
  letter-spacing: .1em;
}

.step__prompt {
  color: var(--ink-soft);
  margin: 0 0 1rem;
  font-style: italic;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: var(--body-font);
  text-align: left;
  cursor: pointer;
  padding: 1rem;
  transition: transform .1s, box-shadow .1s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #00000040;
}

.card--selected {
  border: 2px solid var(--wax);
  background: var(--paper-pressed);
}

.card h3, .card h4 {
  font-family: var(--display-font);
  margin: 0 0 .5rem;
}

.attrs-pips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  gap: .4rem 1rem;
  margin: .75rem 0 0;
  padding: 0;
}

.attrs-pips li {
  font-size: .85rem;
}

.attrs-pips .small-caps {
  display: block;
  font-size: .8rem;
}

.pips {
  letter-spacing: .15em;
  color: var(--edge);
}

.pip--filled {
  color: var(--wax);
}

.scenario-group {
  margin: 1rem 0 1.5rem;
}

.scenario-group + .scenario-group {
  border-top: 1px dashed var(--line);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.scenario-group__heading {
  font-family: var(--display-font);
  color: var(--ink-soft);
  margin: 0 0 .75rem;
  font-size: 1.25rem;
}

.rule--narrative {
  color: var(--ink-soft);
  font-style: italic;
}

.rule__badge {
  display: inline-block;
  font-family: var(--display-font-sc);
  letter-spacing: .05em;
  background: var(--paper-pressed);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-right: .25rem;
  padding: .05rem .4rem;
  font-size: .75rem;
  font-style: normal;
}

.scenario-detail {
  background: var(--paper-pressed);
  margin-top: 1rem;
  padding: 1rem;
}

.scenario-detail h4 {
  font-family: var(--display-font-sc);
  margin: 1rem 0 .5rem;
}

.begin-row {
  text-align: center;
  margin: 2rem 0;
}

.desk-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.desk-header__title {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}

.desk-header__title strong {
  font-family: var(--display-font-sc);
  color: var(--on-desk);
  font-size: 1.4rem;
}

.desk-header__scenario {
  color: var(--on-desk-soft);
  font-style: italic;
}

.medallions {
  display: flex;
  gap: .5rem;
}

.medallion {
  display: flex;
  font-family: var(--display-font);
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 30px;
  height: 30px;
  font-size: .9rem;
}

.medallion--done {
  background: var(--wax);
  color: var(--paper);
}

.medallion--current {
  border: 1px solid var(--on-desk-soft);
  color: var(--on-desk-soft);
}

.medallion--future {
  color: var(--on-desk-soft);
  opacity: .4;
}

.play-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:  flex-start;
  gap: 26px;
}

.ink-pot-card {
  flex: 200px;
  max-width: 250px;
  padding: 1.25rem;
}

.ink-pot-card h3 {
  font-family: var(--display-font-sc);
}

.inkpot-hint {
  color: var(--ink-soft);
  margin: 0 0 .75rem;
  font-size: .85rem;
  font-style: italic;
}

.inkpot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inkpot-item {
  display: block;
  text-align: left;
  border: none;
  border-bottom: 1px dotted var(--line);
  font-family: var(--body-font);
  color: var(--ink);
  cursor: default;
  background: none;
  width: 100%;
  padding: .5rem 0;
  font-size: 1rem;
}

.inkpot-item:not(:disabled) {
  color: var(--wax);
  cursor: pointer;
  font-weight: 600;
}

.inkpot-item:not(:disabled):hover {
  background: #00000008;
}

.inkpot-item .small-caps {
  text-decoration: none;
  margin-left: .4rem;
  font-size: .75rem;
}

.inkpot-item--chosen {
  color: var(--ink);
}

.inkpot-item--used {
  color: var(--ink-faint);
  text-decoration: line-through;
}

.letter {
  flex: 3 500px;
  max-width: 700px;
  padding: 2.5rem;
}

.letterhead {
  text-align: center;
  margin-bottom: 1.5rem;
}

.letterhead__title {
  font-family: var(--display-font-sc);
  color: var(--annotation);
  letter-spacing: .14em;
}

.letterhead__date {
  text-align: right;
  color: var(--ink-soft);
  margin: .5rem 0 0;
  font-size: .95rem;
  font-style: italic;
}

.letter-paragraph {
  text-indent: 1.6em;
  margin: 0 0 1rem;
  font-size: 18.5px;
  font-style: italic;
  line-height: 1.7;
}

.letter-placeholder {
  color: var(--ink-faint);
  text-indent: 1.6em;
  font-style: italic;
}

.letter-draft {
  margin-top: .5rem;
}

.word-chip {
  display: inline-block;
  border: 1px solid var(--wax);
  color: var(--wax);
  margin-bottom: .75rem;
  padding: .25rem .75rem;
  font-style: italic;
}

.paragraph-area {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.7em - 1px), var(--line) 1.7em);
  color: var(--ink);
  resize: vertical;
  border: none;
  width: 100%;
  min-height: 8rem;
  padding: .75rem 0;
  font-size: 18.5px;
  font-style: italic;
  line-height: 1.7;
}

.paragraph-area:focus {
  outline: none;
}

.word-indicator {
  color: var(--ink-soft);
  margin: .25rem 0 1rem;
  font-size: .85rem;
}

.marginalia {
  display: flex;
  flex-direction: column;
  flex: 245px;
  gap: 1rem;
  max-width: 310px;
}

.marginalia-card {
  padding: 1.25rem;
}

.marginalia-card h4, .marginalia-card h5 {
  font-family: var(--display-font-sc);
}

.stepper {
  display: flex;
  font-size: .72rem;
  font-family: var(--display-font-sc);
  letter-spacing: .05em;
  justify-content: space-between;
  gap: .35rem;
  margin: .75rem 0 1rem;
}

.stepper__step {
  color: var(--ink-faint);
  text-align: center;
  flex: 1;
}

.stepper__step--done {
  color: var(--annotation);
}

.stepper__step--active {
  color: var(--wax);
  text-decoration: underline;
}

.step-instruction {
  color: var(--ink-soft);
  margin: .5rem 0;
  font-size: .95rem;
}

.roll-info, .roll-verdict {
  margin: .5rem 0;
  font-size: .95rem;
}

.flourish-input {
  background: var(--paper);
  border: 1px solid var(--line);
  width: 100%;
  margin: .5rem 0;
  padding: .5rem;
  font-size: 1rem;
  font-style: italic;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.done-summary p {
  margin: .4rem 0;
}

.done-points {
  font-family: var(--display-font);
  font-size: 1.1rem;
}

.char-line {
  margin: 0 0 .75rem;
}

.running-score {
  margin: .75rem 0;
}

.running-score strong {
  font-family: var(--display-font);
  color: var(--wax);
  font-size: 1.6rem;
}

.recall-toggle {
  color: var(--annotation);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: .9rem;
  font-style: italic;
}

.recall-panel {
  margin-top: .75rem;
  font-size: .9rem;
}

.recall-panel p {
  margin: .5rem 0;
}

.score-banner {
  text-align: center;
  margin: 1rem 0 2.5rem;
}

.score-seal {
  background: radial-gradient(circle at 35% 30%, #a5442f, var(--wax) 65%);
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 20px #00000073;
}

.score-seal strong {
  font-family: var(--display-font);
  color: var(--paper);
  font-size: 2rem;
}

.score-tier {
  font-family: var(--display-font-sc);
  color: var(--on-desk);
  margin: 0;
  font-size: 1.6rem;
}

.consequence {
  color: var(--on-desk-soft);
  max-width: 50rem;
  margin: 1rem auto;
  font-style: italic;
}

.finished-letter {
  max-width: 50rem;
  margin: 2rem auto;
  padding: 2.5rem;
}

.signature-row {
  display: flex;
  color: var(--ink-soft);
  justify-content: flex-end;
  align-items:  center;
  gap: .6rem;
  margin-top: 1.5rem;
  font-style: italic;
}

.seal-dot {
  background: radial-gradient(circle at 35% 30%, #a5442f, var(--wax) 65%);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.breakdown {
  max-width: 50rem;
  margin: 1.5rem auto;
  padding: 1.5rem;
}

.breakdown h4 {
  font-family: var(--display-font-sc);
}

.breakdown-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
}

.breakdown-table th, .breakdown-table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: .4rem;
}

.breakdown-table th {
  font-family: var(--display-font-sc);
  color: var(--annotation);
  font-weight: normal;
}

.actions--score {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

@keyframes shake {
  0% {
    transform: translate(0)rotate(0);
  }

  25% {
    transform: translate(-2px, 1px)rotate(-1deg);
  }

  50% {
    transform: translate(2px, -1px)rotate(1deg);
  }

  75% {
    transform: translate(-1px, 2px)rotate(-1deg);
  }

  100% {
    transform: translate(0)rotate(0);
  }
}

.shake {
  animation: shake .25s ease;
}