:root{--color-paper: #f4ebd9;--color-paper-light: #faf5ea;--color-paper-dark: #e9dcc2;--color-tile: #e8d3a9;--color-tile-edge: #d4b984;--color-wood: #c89b5e;--color-wood-dark: #8a6236;--color-ink: #2b2b2b;--color-ink-muted: #5a5145;--color-red: #b23a2e;--color-red-dark: #8e2c22;--color-green: #2f5d50;--color-green-dark: #22463c;--color-absent: #6b6255;--color-bg: var(--color-paper);--color-surface: var(--color-paper-light);--color-text: var(--color-ink);--color-text-muted: var(--color-ink-muted);--color-text-inverse: var(--color-paper-light);--color-accent: var(--color-red);--color-success: var(--color-green);--color-border: rgba(43, 43, 43, .18);--color-focus: var(--color-red);--color-overlay: rgba(43, 32, 20, .55);--tile-default-bg: var(--color-tile);--tile-default-fg: var(--color-ink);--tile-selected-bg: var(--color-wood);--tile-selected-fg: var(--color-ink);--tile-correct-bg: var(--color-green);--tile-correct-fg: var(--color-paper-light);--tile-present-bg: var(--color-red);--tile-present-fg: var(--color-paper-light);--tile-absent-bg: var(--color-absent);--tile-absent-fg: var(--color-paper-light);--font-heading: "Fraunces", Georgia, "Times New Roman", serif;--font-ui: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-accent: "Special Elite", "Courier New", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.75rem;--leading-tight: 1.15;--leading-normal: 1.5;--weight-regular: 400;--weight-medium: 500;--weight-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--radius-pill: 999px;--shadow-paper: 0 1px 2px rgba(60, 40, 15, .08), 0 4px 12px rgba(60, 40, 15, .08);--shadow-raised: 0 2px 4px rgba(60, 40, 15, .12), 0 10px 24px rgba(60, 40, 15, .14);--shadow-tile: inset 0 -3px 0 rgba(90, 60, 25, .28), inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 3px rgba(60, 40, 15, .25);--shadow-tile-pressed: inset 0 -1px 0 rgba(90, 60, 25, .3), 0 1px 1px rgba(60, 40, 15, .2);--shadow-focus: 0 0 0 3px var(--color-paper-light), 0 0 0 5px var(--color-focus);--duration-fast: .12s;--duration-base: .2s;--duration-slow: .4s;--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--texture-wood: repeating-linear-gradient( 92deg, rgba(120, 80, 30, .06) 0 2px, transparent 2px 7px, rgba(120, 80, 30, .04) 7px 9px, transparent 9px 15px )}@media (prefers-reduced-motion: reduce){:root{--duration-fast: 0ms;--duration-base: 0ms;--duration-slow: 0ms}}*,*:before,*:after{box-sizing:border-box}html{font-size:100%}body{margin:0;min-height:100vh;font-family:var(--font-ui);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-bg);background-image:var(--texture-paper),radial-gradient(ellipse at center,transparent 55%,rgba(120,85,40,.12) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--font-heading);line-height:var(--leading-tight);font-weight:var(--weight-bold);margin:0 0 var(--space-3);text-shadow:0 0 .5px rgba(43,43,43,.4)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}p{margin:0 0 var(--space-4)}a{color:var(--color-accent);text-underline-offset:.18em}a:hover{color:var(--color-red-dark)}code,.accent{font-family:var(--font-accent)}:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}::selection{background:var(--color-wood);color:var(--color-ink)}.app{max-width:1040px;margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-8)}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:var(--weight-medium);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;box-shadow:var(--shadow-tile);transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background-color var(--duration-base)}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px);box-shadow:var(--shadow-tile-pressed)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}.btn--md{padding:var(--space-2) var(--space-4);font-size:var(--text-md)}.btn--lg{padding:var(--space-3) var(--space-5);font-size:var(--text-lg)}.btn--primary{background:var(--color-green);color:var(--color-text-inverse)}.btn--primary:hover{background:var(--color-green-dark);color:var(--color-text-inverse)}.btn--danger{background:var(--color-red);color:var(--color-text-inverse)}.btn--danger:hover{background:var(--color-red-dark);color:var(--color-text-inverse)}.btn--secondary{background:var(--color-tile);background-image:var(--texture-wood);color:var(--color-ink);border-color:var(--color-tile-edge)}.btn--ghost{background:transparent;color:var(--color-ink);box-shadow:none;border-color:var(--color-border)}.btn--ghost:hover{background:var(--color-paper-dark)}.tiles{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tile{position:relative;display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);font-family:var(--font-heading);font-weight:var(--weight-bold);background-color:var(--tile-default-bg);background-image:var(--texture-wood);color:var(--tile-default-fg);box-shadow:var(--shadow-tile);-webkit-user-select:none;user-select:none;transition:transform var(--duration-base) var(--ease-bounce),background-color var(--duration-slow) var(--ease-out),color var(--duration-slow),box-shadow var(--duration-fast)}button.tile{cursor:pointer}button.tile:hover{transform:translateY(-2px) rotate(-1deg)}button.tile:active{transform:translateY(1px);box-shadow:var(--shadow-tile-pressed)}.tile--sm{width:2rem;height:2rem;font-size:var(--text-md)}.tile--md{width:3rem;height:3rem;font-size:var(--text-xl)}.tile--lg{width:4rem;height:4rem;font-size:var(--text-2xl)}.tile__value{position:absolute;right:.2em;bottom:.1em;font-family:var(--font-ui);font-size:.4em;font-weight:var(--weight-medium)}.tile--selected{background-color:var(--tile-selected-bg);color:var(--tile-selected-fg);transform:translateY(-3px);box-shadow:var(--shadow-tile),0 6px 10px #3c280f40}.tile--correct{background-color:var(--tile-correct-bg);color:var(--tile-correct-fg)}.tile--present{background-color:var(--tile-present-bg);color:var(--tile-present-fg)}.tile--absent{background-color:var(--tile-absent-bg);color:var(--tile-absent-fg)}.tile--correct:after,.tile--present:after{content:"";position:absolute;top:.25em;left:.25em;width:.35em;height:.35em;border-radius:50%;background:currentColor;opacity:.8}.tile--present:after{background:transparent;border:2px solid currentColor}.tile--absent .tile__letter{opacity:.85}.board{display:inline-grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-lg);background-color:var(--color-wood);background-image:var(--texture-wood);box-shadow:inset 0 2px 6px #3c230a59,var(--shadow-raised);border:3px solid var(--color-wood-dark)}.panel,.game-card{background-color:var(--color-surface);background-image:var(--texture-paper);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-paper)}.panel--wood{background-color:var(--color-tile);background-image:var(--texture-wood);border-color:var(--color-tile-edge)}.panel__title{font-size:var(--text-lg)}.game-card{display:flex;flex-direction:column;align-items:flex-start;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base)}.game-card:nth-child(odd){transform:rotate(-.4deg)}.game-card:nth-child(2n){transform:rotate(.4deg)}.game-card:hover{transform:translateY(-3px) rotate(0);box-shadow:var(--shadow-raised)}.game-card__desc{color:var(--color-text-muted);flex:1}.stamp{display:inline-block;font-family:var(--font-accent);font-size:var(--text-sm);color:var(--color-red);border:2px solid currentColor;border-radius:var(--radius-sm);padding:0 var(--space-2);transform:rotate(-3deg);text-transform:uppercase;letter-spacing:.05em}.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-6);border-bottom:2px solid var(--color-ink);box-shadow:0 4px 0 -2px var(--color-paper),0 5px 0 -2px var(--color-ink)}.site-header__title{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-ink);text-decoration:none}.site-header__tagline{font-family:var(--font-accent);color:var(--color-text-muted);margin:0}.site-header__nav{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0}.site-header__nav a{color:var(--color-ink);font-weight:var(--weight-medium)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--space-4);background:var(--color-overlay);z-index:100;animation:fade-in var(--duration-base) var(--ease-out)}.modal{width:min(480px,100%);background-color:var(--color-surface);background-image:var(--texture-paper);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-raised);animation:pop-in var(--duration-slow) var(--ease-bounce)}.modal__footer{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}.score{display:inline-grid;grid-template-columns:auto auto;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:2px dashed var(--color-ink-muted);border-radius:var(--radius-md)}.score__label{grid-column:1 / -1;font-family:var(--font-accent);font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.score__value{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}.score__delta{font-weight:var(--weight-bold)}.score__delta--up{color:var(--color-green)}.score__delta--down{color:var(--color-red)}.score__best{grid-column:1 / -1;font-size:var(--text-sm);color:var(--color-text-muted)}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.94) translateY(8px)}}.swatch{width:100%;height:3.5rem;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-4);font-size:var(--text-sm)}
