body { background:#f5f8f7; }.header.board { height:0; border:0; z-index:20; }.text-header,.play-timer,.track,.footer.board { display:none; }.game-menu { top:20px; }.menu-button { background:white; color:#253044; border-radius:14px; }.game.board { height:auto; max-height:none; min-height:100dvh; border:0; padding:30px 24px 48px; box-sizing:border-box; }
.catalog-page { width:min(1120px,100%); text-align:left; color:#253044; }.catalog-brand { display:inline-block; margin:8px 60px 38px 0; font-size:16px; font-weight:700; color:#53657a; text-decoration:none; }.catalog-heading h1 { font-size:clamp(32px,4vw,48px); letter-spacing:-.035em; margin:0 0 12px; }.catalog-heading p { font-size:17px; line-height:1.5; color:#657484; margin:0; }.catalog-categories { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 36px; }.catalog-categories a { padding:12px 18px; background:white; border:1px solid #e1e8e5; border-radius:24px; color:#253044; text-decoration:none; font-weight:700; font-size:15px; }.catalog-categories a:hover { background:#d8f5e9; }.catalog-section { scroll-margin-top:24px; margin-bottom:36px; }.catalog-section h2 { font-size:24px; margin:0 0 18px; }.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.catalog-card { border-radius:22px; overflow:hidden; background:white; color:inherit; text-decoration:none; border:1px solid #e7ece9; transition:transform .2s,box-shadow .2s; }.catalog-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px #25304410; }.catalog-art { position:relative; aspect-ratio:1.6; overflow:hidden; background:#fff9ed; }.catalog-art img { display:block; width:100%; height:100%; object-fit:contain; }.catalog-lock { position:absolute; top:12px; right:12px; font-size:12px; font-weight:700; background:#ffffffeb; padding:7px 10px; border-radius:12px; }.catalog-card-copy { padding:20px; }.catalog-card h3 { margin:0 0 10px; font-size:19px; display:flex; justify-content:space-between; gap:8px; }.catalog-card h3 span { color:#25a783; }.catalog-card p { margin:0; color:#657484; font-size:15px; line-height:1.5; }.catalog-access { font-size:16px; color:#657484; }.catalog-access a { color:#087769; text-underline-offset:4px; }
@media(max-width:900px) { .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:520px) { .game.board { padding:24px 18px 36px; }.catalog-grid { grid-template-columns:1fr; gap:16px; }.catalog-brand { margin-bottom:30px; }.catalog-categories { gap:8px; }.catalog-categories a { padding:10px 13px; font-size:14px; }.catalog-art { aspect-ratio:1.8; } }
/* Match the home screen's paper cards and quiet hierarchy. */
body { background: #f4f1e9; }.catalog-page { color: #34483f; }.catalog-brand { color: #677569; }.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.catalog-heading h1 { margin: 0; }.catalog-progress-link { color: #37796b; background: #e3edd8; border: 1px solid #d6e2ca; border-radius: 14px; padding: 12px 15px; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }.catalog-categories a { border-radius: 15px; background: #fffdf7; border-color: #e6e3d8; box-shadow: 0 3px 0 #e4e1d7; }.catalog-card { background: #fffdf7; border-color: #fff; border-radius: 26px; box-shadow: 0 5px 0 #e5e2d8; }.catalog-card:hover { box-shadow: 0 8px 0 #e5e2d8; transform: translateY(-3px); }.catalog-card h3 { color: #34483f; }.catalog-card h3 span { color: #37796b; }.catalog-card p { color: #7b8278; font-size: 14px; }.catalog-section h2 { color: #677569; font-size: 18px; }.catalog-art { background: #f8f0de; }.catalog-card-copy { padding: 22px; }.catalog-lock { color: #7a6c4b; background: #fffdf7eb; font-size: 11px; }
@media(max-width:520px) { .catalog-heading { align-items: center; }.catalog-heading h1 { font-size: 32px; }.catalog-progress-link { font-size: 12px; padding: 10px 12px; }.catalog-categories { margin: 24px 0 30px; }.catalog-categories a { font-size: 12px; padding: 11px 12px; }.catalog-card { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: stretch; border-radius: 21px; }.catalog-art { aspect-ratio: auto; min-height: 146px; border-radius: 0; }.catalog-art img { height: 100%; min-height: 146px; }.catalog-card-copy { padding: 18px 14px; align-self: center; }.catalog-card h3 { font-size: 16px; margin-bottom: 8px; }.catalog-card p { font-size: 12px; line-height: 1.45; }.catalog-lock { top: auto; bottom: 6px; right: 4px; left: 4px; text-align: center; font-size: 9px; padding: 5px 3px; border-radius: 7px; }.catalog-grid { gap: 14px; } }
.catalog-entry { position: relative; min-width: 0; }.catalog-entry > .catalog-card { display: block; height: 100%; box-sizing: border-box; }.favorite-toggle { position: absolute; top: 10px; left: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; border: 1px solid #e3dfe8; background: #fffdf7eb; color: #8e88a0; box-shadow: 0 3px 0 #dcd9e1; cursor: pointer; }.favorite-toggle svg { stroke: currentColor; fill: transparent; stroke-width: 1.8; }.favorite-toggle[aria-pressed="true"] { color: #c96980; background: #ffedf0; border-color: #f2c4ce; }.favorite-toggle[aria-pressed="true"] svg { fill: currentColor; }.favorite-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 #dcd9e1; }.favorite-toggle:focus-visible { outline: 3px solid #675fa2; outline-offset: 3px; }
.catalog-personal { margin: 0 0 34px; }.catalog-personal[hidden] { display: none; }.catalog-personal h2 { font-size: 18px; color: #51556b; margin: 0 0 18px; }.catalog-personal h2 span { color: #a8a4b8; font-size: 14px; margin-left: 6px; }.favorites-empty { margin: 0; padding: 20px; border: 1px dashed #cfcbdc; border-radius: 20px; color: #858095; font-size: 14px; line-height: 1.5; }
@media(max-width:520px) { .catalog-entry > .catalog-card { display: grid; }.favorite-toggle { width: 32px; height: 32px; left: 6px; top: 6px; border-radius: 10px; }.favorite-toggle svg { width: 18px; height: 18px; } }
.catalog-heading h1,.catalog-card h3 { color:#343953; }.catalog-progress-link { color:#7965c5; background:#e7e0f3; border-color:#d8cdea; }.catalog-card h3 span { color:#9279c9; }.catalog-categories a:hover { background:#e7e0f3; }.catalog-brand { color:#67647e; }

.catalog-heading { flex-wrap:wrap; gap:18px; }.catalog-heading-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }.catalog-heading-actions a { box-sizing:border-box; text-align:center; }
@media(max-width:600px) { .catalog-heading { align-items:flex-start; flex-direction:column; }.catalog-heading-actions { width:100%; gap:10px; }.catalog-heading-actions a { flex:1; } }