:root { color-scheme: light; --ink: #36372a; --forest: #263f32; --paper: #f7f0db; --line: #b9a779; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; padding: 28px 20px; color: var(--ink); font: 15px/1.6 Georgia, 'Times New Roman', serif; background-color: #263c2c; background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, #ffffff03 7px, #ffffff03 8px); }
a { color: #345e48; text-underline-offset: 3px; }
a:hover { color: #8b4c26; }
a:focus-visible { outline: 3px solid #b86028; outline-offset: 4px; }
.page { width: min(850px, 100%); margin: 0 auto; border: 1px solid #ba9c59; padding: 7px; background: #dacb9e; box-shadow: 0 8px 28px #101c1a80, inset 0 0 0 2px #435542; }
.topline { display: flex; justify-content: space-between; gap: 12px; padding: 3px 7px 7px; color: #3d4937; font: 10px/1.5 Verdana, Arial, sans-serif; letter-spacing: 1px; }
.masthead { position: relative; display: flex; justify-content: center; align-items: center; gap: 34px; padding: 24px 18px 19px; color: #f2d78d; text-align: center; background: #294536; border: 1px solid #1b2e22; box-shadow: inset 0 0 0 3px #40543b, inset 0 0 0 4px #9b8c58; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; font-weight: normal; letter-spacing: -1.5px; text-shadow: 2px 2px #152c20; }
.masthead p { margin: 7px 0 0; font-size: 16px; font-style: italic; letter-spacing: 3px; color: #e3d5ab; }
.jewel-mark { display: grid; grid-template-columns: 18px 18px; gap: 4px; transform: rotate(45deg); }
.jewel-mark i { width: 18px; height: 18px; background: #d5a043; border: 1px solid #f0ce81; box-shadow: inset -3px -3px #9e6a2d, inset 2px 2px #f4d78c; }
.jewel-mark i:nth-child(2), .jewel-mark i:nth-child(3) { background: #789970; border-color: #b3c997; box-shadow: inset -3px -3px #44654e, inset 2px 2px #b3c997; }
nav { display: flex; justify-content: center; gap: 22px; padding: 8px 12px; border: 1px solid #a78b4e; border-top: 0; background: #e8d7a6; font: 11px/1.5 Verdana, Arial, sans-serif; }
nav a { color: #43503a; } nav span { color: #92703e; }
main { padding: 0 24px 22px; border: 1px solid #b5a371; border-top: 0; background: var(--paper); }
.welcome-line { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 17px 0; border-bottom: 1px dotted var(--line); font-size: 14px; font-style: italic; color: #736047; text-align: center; }
.tiny-jewel { width: 7px; height: 7px; flex: 0 0 7px; transform: rotate(45deg); background: #aa6b35; }
.main-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 25px; align-items: start; padding-top: 23px; }
.game-box { padding: 4px; border: 1px solid #8f7844; background: #e2d3aa; box-shadow: 2px 2px 0 #d5c9a6; }
.box-heading { display: flex; justify-content: space-between; padding: 3px 6px 6px; font: 9px/1.6 Verdana, Arial, sans-serif; letter-spacing: 1px; color: #65553b; }
.preview { aspect-ratio: 4/3; overflow: hidden; border: 1px solid #786b46; background: #243e30; }
.preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-tray { padding: 2px 8px 9px; text-align: center; }
.play-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; width: 100%; padding: 9px 12px; text-decoration: none; color: #fff1be; font: bold 17px/1.4 Georgia, serif; background: linear-gradient(#476447, #294733); border: 1px solid #253b28; border-top-color: #6f8056; box-shadow: inset 1px 1px #7c905e, inset -1px -1px #173222, 0 2px 0 #b19a5f; text-shadow: 1px 1px #263a28; }
.play-button:hover { background: #4d6a47; color: #fff4cc; }
.play-button:active { transform: translateY(1px); }
.play-button span { font: 13px Arial, sans-serif; }
.play-button[aria-disabled=true] { color: #f5edda; background: #6e7060; border-color: #555b4b; box-shadow: inset 1px 1px #989d85; cursor: default; text-shadow: none; }
.play-note { margin: 9px 0 4px; font: 10px/1.65 Verdana, Arial, sans-serif; color: #62573f; }
.letter { padding-top: 0; }
.eyebrow { margin: 0 0 10px; font: 9px/1.5 Verdana, Arial, sans-serif; letter-spacing: 1.5px; color: #8c7047; }
.letter h2 { margin: 0 0 15px; font-size: 25px; line-height: 1.15; color: #344b35; font-weight: normal; }
.letter p:not(.eyebrow) { margin: 0 0 12px; font-size: 14px; line-height: 1.65; }
.letter .signature { font-style: italic; color: #746046; }.signature span { padding-left: 17px; }
.field-notes { margin-top: 24px; padding-top: 15px; border-top: 1px dotted var(--line); }
.field-notes h2 { margin: 0 0 9px; color: #566047; font-size: 17px; font-weight: normal; font-style: italic; }
.notes-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.notes-columns p { margin: 0; font-size: 12px; line-height: 1.7; color: #6a614f; }
.notes-columns strong { color: #4c5540; }
.desktop-note { margin: 16px 0 0; padding: 8px 12px; border: 1px solid #d8c9a3; background: #eee5cc; text-align: center; font: 10px/1.7 Verdana, Arial, sans-serif; color: #665a42; }
footer { padding: 16px 12px 8px; text-align: center; color: #5d5943; }
footer p { margin: 5px 0; font: 10px/1.6 Verdana, Arial, sans-serif; }
.badges { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.badges span { display: flex; flex-direction: column; justify-content: center; width: 88px; height: 31px; color: #f0dfb1; border: 1px solid #6d6e43; background: #46573e; box-shadow: inset 1px 1px #93a078, inset -1px -1px #293c2a; font: 8px/1.3 Verdana, Arial, sans-serif; letter-spacing: .7px; }
.badges span:nth-child(2) { background: #775936; border-color: #69512e; box-shadow: inset 1px 1px #bc9c67, inset -1px -1px #4d3926; }
.badges b { font-size: 9px; }
.footer-dot { margin: 0 4px; }
@media (max-width: 680px) { body { padding: 12px; } .topline { font-size: 8px; letter-spacing: .5px; }.topline span:last-child { display: none; }.masthead { gap: 16px; padding: 24px 8px 20px; }.jewel-mark { grid-template-columns: 12px 12px; gap: 3px; }.jewel-mark i { width: 12px; height: 12px; }.masthead p { font-size: 13px; letter-spacing: 2px; }main { padding: 0 17px 17px; }.main-columns { grid-template-columns: 1fr; gap: 25px; }.letter h2 br { display: none; }.notes-columns { grid-template-columns: 1fr; gap: 10px; }nav { gap: 12px; font-size: 10px; }.welcome-line { font-size: 13px; }.game-box { max-width: 430px; width: 100%; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }