:root{--bg: #fafafa;--surface: #ffffff;--surface-sunken: #f4f4f5;--border: #e4e4e7;--border-strong: #c9c9cd;--text: #18181b;--text-muted: #6b6b70;--text-faint: #9a9a9f;--text-on-dark: #fafafa;--ink-900: #18181b;--ink-700: #3f3f46;--ink-500: #6b6b70;--ink-300: #d4d4d8;--ink-100: #f1f1f3;--accent-green: #22a55b;--accent-green-bg: #e7f6ec;--accent-teal: #0e6e8c;--accent-purple: #7c3aed;--accent-red: #ef4444;--accent-black: #111827;--accent-grey: #e5e7eb;--accent-gold: #c9930b;--accent-gold-bg: #fbf1da;--signal: #c9930b;--signal-bg: #fbf1da;--radius: 14px;--radius-sm: 9px;--shadow-card: 0 1px 2px rgba(24, 24, 27, .05);--shadow-card-hover: 0 8px 20px rgba(24, 24, 27, .1), 0 2px 6px rgba(24, 24, 27, .06);--shadow-pop: 0 12px 32px rgba(24, 24, 27, .16);--ease: cubic-bezier(.2, .8, .2, 1);--dur-fast: .12s;--dur: .2s;--font-sans: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace}*{box-sizing:border-box}html,body,#root{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}button{font-family:inherit}::selection{background:var(--ink-900);color:var(--text-on-dark)}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.03)}to{transform:scale(1)}}.app-shell{width:100%;margin:0 auto;padding:24px 32px 64px}.app-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap}.app-title-group{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.app-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--ink-900)}.app-subtitle{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}.chip-count{font-family:var(--font-mono);font-size:12px;color:var(--text-on-dark);background:var(--ink-900);border-radius:999px;padding:4px 12px;font-weight:600;transition:transform var(--dur) var(--ease)}.chip-count.bump{animation:popIn .26s var(--ease)}.tab-row{display:flex;gap:24px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}.tab-btn{background:none;border:none;padding:10px 2px 12px;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--dur-fast) var(--ease)}.tab-btn:hover{color:var(--ink-900)}.tab-btn[aria-selected=true]{color:var(--ink-900);border-bottom-color:var(--ink-900)}.tab-btn:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}.view-switcher{display:inline-flex;gap:2px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:999px;padding:3px}.view-switch-btn{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.view-switch-btn:hover{color:var(--ink-900)}.view-switch-btn:active{transform:scale(.95)}.view-switch-btn[aria-pressed=true]{background:var(--ink-900);color:var(--text-on-dark);box-shadow:var(--shadow-card)}.view-switch-btn:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}.toolbar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:18px 20px;margin-bottom:20px}.panel h2,.panel h3{margin:0 0 12px;font-size:15px;font-weight:700}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.filter-group label.filter-label{display:block;font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;line-height:1.2;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.chip:hover{border-color:var(--ink-700);transform:translateY(-1px)}.chip:active{transform:translateY(0) scale(.97)}.chip:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}.chip[aria-pressed=true]{background:var(--ink-900);color:var(--text-on-dark);border-color:var(--ink-900)}.we-are-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.we-are-row input[type=range]{flex:1;min-width:120px;accent-color:var(--ink-900)}.we-are-value{font-family:var(--font-mono);font-weight:700;font-size:14px;background:var(--signal-bg);color:var(--ink-900);border-radius:var(--radius-sm);padding:4px 10px;min-width:64px;text-align:center;transition:transform var(--dur-fast) var(--ease)}.search-input,.sort-select{width:100%;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:14px;background:var(--surface);color:var(--text);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.search-input:focus-visible,.sort-select:focus-visible{outline:none;border-color:var(--ink-900);box-shadow:0 0 0 3px #18181b14}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px;flex-wrap:wrap}.results-count{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}.btn{border:1px solid transparent;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}.btn:active{transform:translateY(0) scale(.96)}.btn:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}.btn-primary{background:var(--accent-black);color:#fff}.btn-bw{background:#fff;color:var(--accent-black);border-color:var(--accent-black)}.btn-bw:hover{background:var(--accent-black);color:#fff}.btn-outline{background:var(--accent-teal);color:#fff}.btn-ghost{background:var(--surface-sunken);color:var(--text)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.btn-green{background:var(--accent-green);color:#fff}.btn-teal{background:var(--accent-teal);color:#fff}.btn-purple{background:var(--accent-purple);color:#fff}.btn-black{background:var(--accent-black);color:#fff}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.game-grid.compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);animation:fadeUp .26s var(--ease) both}.game-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px);border-color:var(--border-strong)}.game-thumb{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:var(--radius-sm);margin:-4px -4px 4px;display:block;background:var(--surface-sunken);transition:transform var(--dur) var(--ease)}.game-card:hover .game-thumb{transform:scale(1.015)}.game-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.game-title{font-size:15px;font-weight:700;margin:0;line-height:1.3}.game-year{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}.shop-chip{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;font-size:11px;padding:4px 10px;border-radius:8px;font-weight:600;white-space:nowrap}.shop-chip.shop-onglanh{background:#eef2ff;color:#4338ca}.shop-chip.shop-tabletop{background:#ecfdf5;color:#047857}.shop-chip.shop-pressplay{background:#fff7ed;color:#c2410c}.stat-row{display:flex;gap:14px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);flex-wrap:wrap}.stat-row strong{color:var(--text)}.weight-track{height:6px;border-radius:999px;background:var(--accent-grey);overflow:hidden}.weight-fill{height:100%;background:var(--accent-gold);transition:width var(--dur) var(--ease)}.tag-pills{display:flex;flex-wrap:wrap;gap:6px}.tag-pill{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;font-size:11px;padding:4px 10px;border-radius:8px;font-weight:600;transition:transform var(--dur-fast) var(--ease)}.tag-pill:hover{transform:translateY(-1px)}.tag-pill.party{background:var(--ink-900);color:var(--text-on-dark)}.tag-pill.strategy{background:var(--ink-700);color:var(--text-on-dark)}.tag-pill.coop{background:var(--ink-500);color:var(--text-on-dark)}.tag-pill.bluffing{background:var(--ink-300);color:var(--ink-900)}.tag-pill.other{background:var(--ink-100);color:var(--ink-900);border:1px solid var(--border-strong)}.needs-check-flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--accent-gold);font-weight:700}.needs-check-flag:before{content:"●"}.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.howto-block{border-top:1px solid var(--border);padding-top:10px;font-size:13px;color:var(--text);animation:fadeUp .18s var(--ease) both}.howto-block dt{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;color:var(--text-muted);margin-top:8px}.howto-block dd{margin:2px 0 0}.lang-toggle{display:flex;gap:6px;margin-bottom:8px}.lang-toggle button{font-size:11px;padding:3px 10px}.empty-state{text-align:center;padding:48px 16px;color:var(--text-muted);border:1px dashed var(--border-strong);border-radius:var(--radius)}.random-pick-panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px}.random-pick-panel .game-card{max-width:420px;width:100%}.random-pick-panel .game-card{animation:popIn .32s var(--ease) both}.footer-note{font-size:12px;color:var(--text-faint);text-align:center;margin-top:40px}.footer-note a{color:var(--ink-900)}.skeleton{background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-300) 37%,var(--ink-100) 63%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:var(--radius-sm)}.game-list{display:flex;flex-direction:column;gap:10px}.game-list-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);animation:fadeUp .22s var(--ease) both}.game-list-row:hover{box-shadow:var(--shadow-card-hover);transform:translate(2px)}.list-row-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface-sunken)}.list-row-title{font-weight:700;font-size:14px;flex:1 1 200px;min-width:0}.list-row-title small{display:block;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);font-weight:400}.list-row-stats{display:flex;gap:16px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);flex-shrink:0}.list-row-tags{display:flex;gap:4px;flex-shrink:0}.list-row-actions{display:flex;gap:6px;flex-shrink:0}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.game-table{width:100%;border-collapse:collapse;font-size:13px}.game-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface-sunken);position:sticky;top:0;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}.game-table th:hover{color:var(--ink-900)}.game-table th .sort-arrow{margin-left:4px;opacity:.6}.game-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}.game-table tr:last-child td{border-bottom:none}.game-table tbody tr{transition:background var(--dur-fast) var(--ease)}.game-table tbody tr:hover{background:var(--surface-sunken)}.game-table .cell-title{font-weight:700;white-space:normal;min-width:160px}.game-table .cell-tags{display:flex;gap:4px;flex-wrap:nowrap}.game-table .mono{font-family:var(--font-mono);color:var(--text-muted)}@media (max-width: 720px){.game-list-row,.list-row-stats{flex-wrap:wrap}}