.shelfcode-game {
  --sc-paper: #f4e7c6;
  --sc-ink: #293f43;
  --sc-teal: #3c645f;
  --sc-gold: #efc77d;
  --sc-wood: #ba9360;
  color: var(--sc-ink);
  font-family: Georgia, "Times New Roman", serif;
}
.sc-shell { position: relative; width: min(100%, 1120px); margin: 0 auto; padding: 12px 16px 10px; border: 3px solid var(--sc-wood); background: var(--sc-paper); box-shadow: inset 0 0 0 2px #fff5dc, 0 4px 0 #806244; }
.sc-heading, .sc-toolbar, .sc-actions, .sc-tiers, .sc-readouts, .sc-entry-actions { display: flex; align-items: center; gap: 10px; }
.sc-heading, .sc-toolbar { justify-content: space-between; }
.sc-heading h2 { margin: 2px 0 0; color: var(--sc-ink); font: 700 clamp(1.35rem, 2.5vw, 1.8rem)/1.1 Georgia, serif; }
.sc-kicker { margin: 0; color: var(--sc-teal); font: 700 .7rem/1.2 system-ui, sans-serif; letter-spacing: .12em; }
.sc-memory { margin: 0; color: #6e5c3d; font: .78rem/1.35 system-ui, sans-serif; text-align: right; }
.sc-instructions { max-width: 800px; margin: 8px auto; color: #425b58; font: .9rem/1.4 system-ui, sans-serif; text-align: center; }
.sc-toolbar { flex-wrap: wrap; margin-top: 8px; padding: 7px 8px; border-block: 2px dashed #c6ad7d; color: #395854; font: .85rem/1.3 system-ui, sans-serif; }
.sc-tiers { flex-wrap: wrap; }
.sc-tiers button, .sc-actions button, .sc-entry-actions button, .sc-confirm button { min-height: 42px; padding: 7px 11px; border: 2px solid var(--sc-teal); border-radius: 3px; background: #fff3d5; color: var(--sc-ink); font: 700 .84rem/1.2 system-ui, sans-serif; cursor: pointer; }
.sc-tiers button[aria-pressed="true"] { background: #d7e1c9; box-shadow: inset 0 0 0 2px #6a8a67; }
.sc-tiers button:hover:not(:disabled), .sc-actions button:hover:not(:disabled), .sc-entry-actions button:hover:not(:disabled), .sc-confirm button:hover, .sc-tiers button:focus-visible, .sc-actions button:focus-visible, .sc-entry-actions button:focus-visible, .sc-confirm button:focus-visible, .sc-palette-button:focus-visible, .sc-slot:focus-visible { outline: 3px solid #bf7a38; outline-offset: 2px; background-color: #f7dda5; }
.sc-tiers button:disabled, .sc-actions button:disabled, .sc-entry-actions button:disabled, .sc-palette-button:disabled, .sc-slot:disabled { cursor: default; opacity: .6; }
.sc-readouts { flex-wrap: wrap; }
.sc-rewards { min-height: 1.3em; margin: 6px 0 0; color: #68522f; text-align: center; font: 700 .8rem/1.3 system-ui, sans-serif; }
.sc-entry { margin: 10px auto 12px; padding: 10px; border: 2px solid #c6ad7d; border-radius: 5px; background: #f8edcf; text-align: center; }
.sc-entry h3, .sc-history-heading h3, .sc-example h3 { margin: 0; color: var(--sc-teal); font: 700 .95rem/1.3 system-ui, sans-serif; }
.sc-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 9px 0 5px; }
.sc-slot { display: grid; place-items: center; width: clamp(58px, 9vw, 78px); aspect-ratio: 1; padding: 5px; border: 3px solid #806244; border-radius: 8px; background: #fff4d7; box-shadow: inset 0 0 0 2px #fffaf0, 0 3px 0 #806244; cursor: pointer; }
.sc-slot.is-active { outline: 3px solid #b66e20; outline-offset: 3px; }
.sc-slot.is-empty { background: #e6d7b7; }
.sc-slot-placeholder { color: #6e5c3d; font: 700 1.8rem/1 system-ui, sans-serif; }
.sc-symbol { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 100%; min-width: 29px; min-height: 29px; border: 2px solid #293f43; border-radius: 5px; background: color-mix(in srgb, var(--sc-color) 25%, white); color: #263638; font: 700 .77rem/1 system-ui, sans-serif; }
.sc-symbol > span { color: var(--sc-color); font: 700 clamp(1.15rem, 2vw, 1.55rem)/1 system-ui, sans-serif; text-shadow: 0 1px 0 white; }
.sc-symbol b { font-size: .68rem; }
.sc-entry-help { margin: 3px 0 8px; color: #526660; font: .8rem/1.35 system-ui, sans-serif; }
.sc-palette { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.sc-palette-button { width: 52px; height: 52px; padding: 3px; border: 2px solid #3c645f; border-radius: 6px; background: #fff7e3; cursor: pointer; }
.sc-palette-button .sc-symbol { border: 0; background: transparent; }
.sc-palette-button.is-selected { outline: 3px solid #b66e20; outline-offset: 2px; background: #f7dda5; }
.sc-entry-actions { justify-content: center; flex-wrap: wrap; margin-top: 9px; }
.sc-history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 2px 4px; }
.sc-history-heading p { margin: 0; color: #526660; font: .78rem/1.3 system-ui, sans-serif; }
.sc-history { display: grid; gap: 5px; max-height: 230px; overflow: auto; margin: 0; padding: 0 4px 0 29px; }
.sc-history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 4px 8px; border-bottom: 1px dashed #c6ad7d; background: #fff9e8; font: .78rem/1.3 system-ui, sans-serif; }
.sc-guess, .sc-history-code { display: flex; align-items: center; gap: 5px; }
.sc-row-number { min-width: 57px; color: #526660; font-weight: 700; }
.sc-history-code .sc-symbol { width: 30px; height: 32px; min-width: 30px; min-height: 30px; border-width: 1px; }
.sc-history-code .sc-symbol > span { font-size: 1rem; }
.sc-history-code .sc-symbol b { font-size: .58rem; }
.sc-history-row p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; color: #293f43; text-align: right; }
.sc-history-empty { color: #536861; font: .82rem/1.4 system-ui, sans-serif; }
.sc-reveal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 8px; border: 2px solid #b66e20; background: #ffe6a7; color: #493a1f; font: 700 .9rem/1.3 system-ui, sans-serif; }
.sc-reveal .sc-symbol { width: 40px; height: 42px; }
.sc-example { margin: 9px 2px 4px; padding: 8px 10px; border-left: 4px solid #3c645f; background: #e7ead8; }
.sc-example p { margin: 4px 0 0; color: #405652; font: .78rem/1.4 system-ui, sans-serif; }
.sc-example p span { font-weight: 700; white-space: nowrap; }
.sc-status { min-height: 1.45em; margin: 5px 0 0; color: #395854; text-align: center; font: 700 .94rem/1.4 system-ui, sans-serif; }
.sc-status.is-won { color: #2e6a4c; }
.sc-status.is-lost { color: #854332; }
.sc-status.is-paused { color: #6e5c3d; }
.sc-help { margin: 5px auto 0; color: #526660; text-align: center; font: .78rem/1.4 system-ui, sans-serif; }
.sc-confirm { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 16px; background: #293f4377; }
.sc-confirm > div { width: min(100%, 390px); padding: 18px; border: 3px solid var(--sc-wood); border-radius: 5px; background: var(--sc-paper); box-shadow: 0 8px 24px #18262666; text-align: center; }
.sc-confirm h3 { margin: 0; font-size: 1.15rem; }
.sc-confirm p { color: #293f43; font: .9rem/1.4 system-ui, sans-serif; }
.sc-confirm > div > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
@media (max-width: 760px) {
  .sc-shell { padding: 9px 11px; }
  .sc-heading, .sc-toolbar { align-items: flex-start; flex-direction: column; }
  .sc-memory { text-align: left; }
  .sc-readouts { justify-content: space-between; width: 100%; }
  .sc-actions { flex-wrap: wrap; }
}
@media (max-width: 500px) {
  .sc-tiers { display: grid; width: 100%; grid-template-columns: 1fr; }
  .sc-history-row { align-items: flex-start; flex-direction: column; }
  .sc-history-row p { align-items: flex-start; text-align: left; }
  .sc-history { max-height: 190px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .sc-shell { padding-block: 5px 4px; }
  .sc-heading { display: none; }
  .sc-instructions { margin: 4px auto; font-size: .82rem; }
  .sc-toolbar { margin-top: 3px; padding-block: 4px; }
  .sc-entry { margin-block: 5px; padding: 6px; }
  .sc-history { max-height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .shelfcode-game *, .shelfcode-game *::before, .shelfcode-game *::after { scroll-behavior: auto; transition: none; animation: none; } }