:root {
  color: var(--arcade-text);
  background: var(--arcade-bg);
  font: 15px/1.55 var(--arcade-sans);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background-image: radial-gradient(ellipse at 50% 0, #39281780, transparent 700px);
}
h1, h2, h3, p, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--arcade-gold); }
button, input, select { font: inherit; color: inherit; }
button {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--arcade-border);
  border-radius: 2px;
  background: var(--arcade-raised);
  cursor: pointer;
}
button:not(:disabled):hover { border-color: var(--arcade-border-bright); background: #3b3022; }
button:disabled { opacity: .48; cursor: default; }
:focus-visible { outline: 2px solid var(--arcade-green); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip:focus { position: fixed; inset: 8px auto auto 12px; z-index: 5; padding: 10px; background: var(--arcade-panel); }
#tracker, #records, #how-it-works { scroll-margin-top: 18px; }

.page-heading {
  padding: 31px 0 21px;
  border-bottom: 1px solid var(--arcade-border);
  margin-bottom: 20px;
}
.page-heading h1 {
  font: 400 clamp(36px, 5.25vw, 72px)/1 var(--arcade-display);
  color: var(--arcade-gold);
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px #39291c;
}
.lede { margin-top: 9px; color: var(--arcade-muted); }
.tracker-access { display: inline-block; color: var(--arcade-green); font-size: .85em; white-space: nowrap; margin-inline-start: .45em; }

.workspace { display: grid; grid-template-columns: 1.08fr 1fr; gap: 17px; }
.entry-panel, .record-panel, .history {
  min-width: 0;
  border: 1px solid var(--arcade-border);
  background: var(--arcade-panel);
  box-shadow: var(--arcade-shadow);
}
.entry-panel { padding: 19px 21px 16px; }
.panel-heading, .history-heading, .score-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-heading h2, .history-heading h2, .score-header h2, .help-section h2, dialog h2 {
  font: 400 28px/1.07 var(--arcade-display);
  color: var(--arcade-gold);
  text-transform: uppercase;
}
.guide-link { display: inline-flex; align-items: center; min-height: 44px; gap: 4px; color: var(--arcade-green); font-size: 13px; font-weight: 550; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.entry-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 7px 0 12px; padding: 4px; border: 1px solid var(--arcade-border); background: var(--arcade-recess); }
.entry-mode label, .source-choice label { position: relative; cursor: pointer; }
.entry-mode input, .source-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.entry-mode span, .source-choice span {
  display: flex; justify-content: center; align-items: center;
  min-height: 44px; padding: 3px 5px; border: 1px solid transparent;
  color: var(--arcade-muted); font-size: 13px; font-weight: 570; text-align: center;
}
.entry-mode label:hover span, .source-choice label:hover span { border-color: var(--arcade-border-bright); color: var(--arcade-text); }
.entry-mode input:checked + span {
  background: #3a2c19; border-color: #79603a; color: var(--arcade-gold);
  box-shadow: inset 0 -2px #9b713e;
}
.entry-mode input:focus-visible + span, .source-choice input:focus-visible + span { outline: 2px solid var(--arcade-green); outline-offset: 1px; }
label, legend { font-size: 13px; font-weight: 570; }
label { display: block; }
input:not([type=radio], [type=checkbox], [type=file]), select {
  width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--arcade-border);
  border-radius: 2px; background: var(--arcade-recess);
}
input::placeholder { color: #af9e83; }
input[type=checkbox] { accent-color: var(--arcade-green); width: 18px; height: 18px; flex: 0 0 18px; }
.quantity-field {
  display: flex; gap: 10px; align-items: center;
  margin: 4px 0 9px; padding-right: 11px; border: 1px solid var(--arcade-border-bright); background: var(--arcade-recess);
  box-shadow: inset 0 3px #110f0c;
}
.quantity-field:focus-within { border-color: var(--arcade-green); box-shadow: 0 0 0 1px var(--arcade-green); }
.quantity-field input#entry-count {
  min-width: 0; padding: 4px 12px; border: 0; outline: 0; background: transparent;
  font: 500 26px/1.2 var(--arcade-mono); color: var(--arcade-text);
}
.quantity-field span { font-size: 12px; color: var(--arcade-muted); white-space: nowrap; }
.increment-row, .source-choice { display: flex; gap: 8px; }
.increment-row button, .source-choice label { flex: 1; }
.increment-row button {
  border-color: var(--arcade-border-bright);
  box-shadow: inset 0 1px #ffffff15, 0 3px #100e0b;
  font: 400 24px/1 var(--arcade-display);
}
.increment-row button[data-add="1"] {
  flex: 1.65;
  border-color: #ffdb87;
  background: var(--arcade-gold);
  color: #21170d;
  box-shadow: inset 0 2px #ffebac, 0 3px #745022;
  font-size: 29px;
}
.increment-row button[data-add="1"]:hover { background: var(--arcade-gold-hover); }
.increment-row button:active { translate: 0 2px; box-shadow: inset 0 1px #ffffff14; }
.source-choice { margin-top: 10px; }
.source-choice legend { margin-bottom: 3px; color: var(--arcade-muted); }
.source-choice span { border-color: var(--arcade-border); }
.source-choice input:checked + span { border-color: #707554; color: var(--arcade-green); background: #292e21; }
.entry-details { margin-top: 4px; }
.entry-details summary, .help-copy summary { min-height: 44px; padding: 11px 0; cursor: pointer; font-size: 13px; font-weight: 600; }
.entry-details summary span { color: var(--arcade-muted); font-weight: 400; margin-left: 5px; }
.entry-details label, dialog label:not(.checkbox) { margin-top: 8px; }
label > :is(input:not([type=checkbox]), select) { margin-top: 5px; }
.save-button {
  width: 100%; margin-top: 3px; min-height: 44px; border-color: #728063;
  background: #293526; color: var(--arcade-green); font: 500 14px/1 var(--arcade-mono);
}
.save-button:not(:disabled):hover { border-color: var(--arcade-green); background: #344631; }
.feedback, .storage-warning, .quest-hint { font-size: 13px; color: var(--arcade-muted); }
.feedback:not(:empty), .storage-warning { margin-top: 8px; }
.feedback[data-error=true], .storage-warning, .error { color: var(--arcade-error); }
.quest-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.quest-grid label { grid-column: span 2; }
.quest-grid label:nth-last-child(-n+2) { grid-column: span 3; }
.quest-hint { margin-bottom: 8px; }
#quest-delta { color: var(--arcade-green); font-weight: 600; }
#quest-delta:empty { display: none; }
.checkbox { display: flex; align-items: center; gap: 7px; min-height: 44px; }

.totals { display: flex; flex-direction: column; min-height: 100%; padding: 23px 22px 16px; }
.storage-state { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--arcade-muted); text-align: right; }
.storage-state[data-state="ready"]::before { background: var(--arcade-green); }
.storage-state::before { content: ''; flex: 0 0 6px; height: 6px; background: var(--arcade-muted); }
.storage-state[data-state="error"]::before { background: var(--arcade-error); }
.score-display {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .93fr); align-items: center; justify-items: center; gap: 6px;
  flex: 1; min-height: 206px; padding: 12px 10px 12px 3px; margin: 15px 0 13px;
  border: 1px solid var(--arcade-border);
  background-image: radial-gradient(ellipse at 32% 50%, #9a672732, transparent 75%), var(--arcade-grid);
  background-size: auto, 16px 16px, 16px 16px;
  background-color: var(--arcade-recess);
  box-shadow: inset 0 4px #0f0d0a;
}
.chest-art { display: block; width: min(246px, 100%); height: auto; image-rendering: pixelated; }
.total-primary { container-type: inline-size; width: 100%; min-width: 0; text-align: center; }
.total-primary strong {
  display: block; margin: 0 0 6px;
  color: var(--arcade-gold); font: 400 clamp(63px, 8vw, 116px)/.9 var(--arcade-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px #70471f, 0 0 22px #ffcb7130;
  overflow-wrap: anywhere;
}
.total-primary strong[data-size="small"] { font-size: min(92px, 54cqi); }
.total-primary strong[data-size="medium"] { font-size: min(74px, 34cqi); }
.total-primary strong[data-size="large"] { font: 500 clamp(16px, 15cqi, 46px)/1.05 var(--arcade-mono); }
.total-primary p, .legacy-note { color: var(--arcade-muted); font-size: 12px; }
.legacy-note { margin-bottom: 9px; }
.secondary-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.secondary-totals div { padding: 9px 13px 10px; border: 1px solid var(--arcade-border); background: var(--arcade-raised); }
.secondary-totals dt { color: var(--arcade-muted); font-size: 12px; }
.secondary-totals dd { font: 500 clamp(18px, 2vw, 25px)/1.2 var(--arcade-mono); margin-top: 3px; overflow-wrap: anywhere; }

.history { margin-top: 23px; padding: 13px 20px 14px; }
.history-actions, .backup-actions { display: flex; align-items: center; gap: 7px; }
.backup-actions button, .text-button { font-size: 13px; }
.text-button { background: transparent; border-color: transparent; color: var(--arcade-muted); }
.empty-records { margin-top: 8px; padding: 12px 0; border-block: 1px solid var(--arcade-border); }
.empty-records h3 { margin-bottom: 2px; font-size: 14px; }
.empty-records p, .history-note { font-size: 13px; color: var(--arcade-muted); }
.history-note { margin-top: 7px; }
.record-table { overflow: auto; margin-top: 8px; max-height: 390px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 8px 8px; border-bottom: 1px solid var(--arcade-border); font-size: 13px; }
th { color: var(--arcade-muted); font: 500 12px/1.2 var(--arcade-mono); background: var(--arcade-raised); position: sticky; top: 0; }
td:first-child { white-space: nowrap; }
th:nth-child(2), td:nth-child(2) { text-align: right; padding-right: 24px; }
.row-count { font-family: var(--arcade-mono); color: var(--arcade-gold); white-space: nowrap; }
.source-tag, .entry-note { display: block; overflow-wrap: anywhere; }
.entry-note { color: var(--arcade-muted); }
.edit-link { color: var(--arcade-green); border-color: transparent; background: transparent; }

.help-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; margin: 35px 0 14px; padding-top: 17px; border-top: 1px solid var(--arcade-border); }
.help-copy summary h3 { display: inline; font: inherit; }
.ledger-updated { color: var(--arcade-muted); font-size: 12px; padding-bottom: 18px; }
.help-copy details { border-bottom: 1px solid var(--arcade-border); }
.faq-sources { margin-top: 10px; }
.faq-sources a { color: var(--arcade-green); }
.help-copy p { margin-bottom: 12px; color: var(--arcade-muted); font-size: 14px; }
.help-intro p { max-width: 36ch; margin-top: 7px; font-size: 14px; color: var(--arcade-muted); }
.more-tools { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 15px; font-size: 13px; color: var(--arcade-green); }
.more-tools a { display: inline-flex; min-height: 44px; align-items: center; }
.guide-preview { margin-block: 25px; }
.guide-preview h2 { margin-bottom: 9px; font: 600 18px/1.3 var(--arcade-sans); }
.guide-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 8px; }
.guide-preview-grid a { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--arcade-border); background: var(--arcade-panel); font-size: 13px; }
.guide-preview-grid a span { color: var(--arcade-green); }
.guide-preview-grid a:hover { border-color: var(--arcade-border-bright); }
dialog {
  width: min(470px, calc(100% - 30px)); max-height: calc(100% - 30px); padding: 22px;
  border: 1px solid var(--arcade-border-bright); background: var(--arcade-panel); color: var(--arcade-text);
  box-shadow: var(--arcade-shadow);
}
dialog::backdrop { background: #0c0b08b8; }
dialog h2 { margin-bottom: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dialog-actions .save-button { margin-top: 0; width: auto; }
.remove-button { color: var(--arcade-error); background: transparent; border: 0; margin-top: 8px; padding-left: 0; font-size: 13px; }

@media (max-width: 900px) {
  .entry-panel, .totals { padding-inline: 15px; }
  .score-header h2 { font-size: 25px; }
}
@media (max-width: 720px) {
  .page-heading { padding: 14px 0 10px; margin-bottom: 10px; }
  .page-heading h1 { font-size: clamp(32px, 8.4vw, 50px); text-wrap: initial; }
  .lede { font-size: 13px; margin-top: 6px; max-width: 46ch; }
  .workspace, .help-section { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .record-panel { grid-row: 1; }
  .entry-panel, .totals { padding: 11px 12px; }
  .score-header h2, .panel-heading h2, .history-heading h2, .help-section h2 { font-size: 23px; }
  .storage-state { font-size: 11px; }
  .score-display { min-height: 96px; margin: 6px 0; padding: 0 12px 0 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .chest-art { width: min(139px, 100%); }
  .total-primary strong { font-size: 78px; margin-bottom: 3px; text-shadow: 0 3px #70471f; }
  .panel-heading .guide-link { margin-block: -4px; }
  .total-primary p { line-height: 1.2; }
  .secondary-totals div { display: flex; justify-content: space-between; align-items: center; gap: 5px; padding: 5px 8px; }
  .secondary-totals dd { margin-top: 0; font-size: 17px; }
  .entry-mode { margin: 3px 0 8px; padding: 3px; }
  .source-choice { margin-top: 8px; }
  .history { margin-top: 15px; padding-inline: 12px; }
  .history-heading { align-items: start; flex-direction: column; gap: 5px; }
  .history-actions { flex-wrap: wrap; gap: 4px; }
  th, td { font-size: 12px; padding-inline: 5px; }
  th:nth-child(2), td:nth-child(2) { padding-right: 7px; }
  .edit-link { padding-inline: 5px; }
}
@media (max-width: 380px) {
  .page-heading h1 { font-size: 27px; }
  .score-header h2, .panel-heading h2 { font-size: 19px; }
  .score-header h2 { font-size: 17px; white-space: nowrap; }
  .score-display { min-height: 82px; }
  .chest-art { width: min(116px, 100%); }
  .total-primary strong { font-size: 63px; }
  .totals, .entry-panel { padding-block: 9px; }
  .entry-mode span { min-height: 38px; }
  #direct-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: end; gap: 4px 8px; }
  #direct-fields > label, .source-choice { grid-column: 1 / -1; }
  .quantity-field { margin: 0; padding-right: 0; }
  .quantity-field span { display: none; }
  .increment-row { gap: 5px; }
  .increment-row button { min-width: 0; padding-inline: 4px; font-size: 20px; }
  .increment-row button[data-add="1"] { font-size: 24px; }
}
@media (max-width: 360px) {
  .quest-grid label:nth-child(-n+3) { grid-column: span 3; }
  .quest-grid label:first-child { grid-column: span 6; }
}

@media (max-width: 380px) and (max-height: 620px) {
  .page-heading { padding-block: 12px; }
  .page-heading .lede { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}