.hand-builder{max-width:800px;margin:0 auto}.hand-builder-header{text-align:center;margin-bottom:var(--spacing-sm)}.hand-builder-header h2{margin-bottom:var(--spacing-xs)}.hand-builder-header p{color:var(--color-text-light)}.hand-zone{background:var(--surface-elevated);border:2px dashed var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.hand-slots{margin-bottom:var(--spacing-sm);flex-wrap:wrap;justify-content:center;gap:4px;min-height:60px;display:flex}.hand-tile{border:2px solid var(--color-border);background:var(--surface-elevated);width:44px;height:54px;transition:all var(--transition);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:2rem;display:flex}.hand-tile:hover:not(.empty){border-color:#ef4444;transform:translateY(-2px)}.hand-tile.empty{background:var(--color-bg-alt);cursor:default;border-style:dashed}.hand-actions{justify-content:center;align-items:center;gap:var(--spacing-sm);display:flex}.hand-count{color:var(--color-text-light);font-weight:600}.btn-sm{padding:.4rem .8rem;font-size:.85rem}.hand-result{text-align:center;padding:var(--spacing-sm);border-radius:var(--border-radius);margin-top:var(--spacing-sm)}.hand-result.valid{color:#065f46;background:#d1fae5;border:2px solid #10b981}.hand-result.invalid{color:#991b1b;background:#fee2e2;border:2px solid #ef4444}[data-theme=dark] .hand-result.valid{color:#86efac;background:#052e16}[data-theme=dark] .hand-result.invalid{color:#fca5a5;background:#450a0a}.tile-info-btn{background:var(--color-bg-alt);border:1px solid var(--color-border);cursor:pointer;opacity:0;width:26px;height:26px;transition:opacity var(--transition), background var(--transition);color:var(--color-text-light);border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:6px;right:6px}.tile-card{position:relative}.tile-card:hover .tile-info-btn{opacity:1}.tile-info-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.tile-card.tile-added{animation:.4s tile-add-flash}@keyframes tile-add-flash{0%{box-shadow:0 0 #10b98180}50%{transform:scale(.95);box-shadow:0 0 0 6px #10b9814d}to{box-shadow:0 0 #10b98100}}.tile-controls{background:var(--color-bg-alt);padding:var(--spacing-md);border-radius:var(--border-radius);margin-bottom:var(--spacing-md)}.search-box{margin-bottom:var(--spacing-sm)}.search-box input{border:2px solid var(--color-border);border-radius:var(--border-radius);width:100%;font-size:1rem;font-family:var(--font-primary);transition:border-color var(--transition);padding:.75rem 1rem}.search-box input:focus{border-color:var(--color-primary);outline:none}.filter-buttons{gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.filter-btn{border:2px solid var(--color-border);background:var(--surface-elevated);color:var(--color-text);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition);font-size:.9rem;font-weight:600;font-family:var(--font-primary);min-height:44px;padding:.6rem 1.1rem}.filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.tile-count{text-align:center;margin:var(--spacing-sm) 0;color:var(--color-text-light);font-weight:600}.tiles-interactive-grid{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.tile-card{background:var(--surface-elevated);border:2px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-sm);text-align:center;cursor:pointer;transition:all var(--transition)}.tile-card:hover{box-shadow:0 6px 20px var(--color-shadow);border-color:var(--color-primary);transform:translateY(-4px)}.tile-visual{margin-bottom:var(--spacing-xs);justify-content:center;align-items:center;min-height:80px;font-size:4rem;display:flex}.tile-name{color:var(--color-heading);margin-bottom:.25rem;font-weight:600}.tile-category{color:var(--color-text-light);text-transform:capitalize;font-size:.85rem}.tile-modal{z-index:2000;padding:var(--spacing-md);background:#000000b3;animation:.3s fadeIn;display:none;position:fixed;inset:0;overflow-y:auto}.tile-modal.active{justify-content:center;align-items:center;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tile-modal-content{background:var(--surface-elevated);border-radius:var(--border-radius);border:1px solid var(--color-border);width:100%;max-width:800px;animation:.3s slideUp;position:relative;box-shadow:0 20px 60px #00000026}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.tile-modal-close{cursor:pointer;color:var(--color-text-light);width:40px;height:40px;transition:all var(--transition);z-index:1;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:2rem;line-height:1;display:flex;position:absolute;top:1rem;right:1rem}.tile-modal-close:hover{background:var(--color-bg-alt);color:var(--color-text)}.tile-modal-body{gap:var(--spacing-lg);padding:var(--spacing-lg);grid-template-columns:1fr 2fr;display:grid}.tile-modal-visual{background:var(--color-bg-alt);border-radius:var(--border-radius);padding:var(--spacing-md);justify-content:center;align-items:center;display:flex}.tile-display-large{font-size:8rem;line-height:1}.tile-modal-info h2{margin-bottom:var(--spacing-sm);color:var(--color-heading)}.tile-detail-grid{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:var(--color-bg-alt);border-radius:var(--border-radius);display:grid}.tile-detail-item{padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border);justify-content:space-between;display:flex}.tile-detail-item:last-child{border-bottom:none;padding-bottom:0}.tile-detail-item strong{color:var(--color-text-light);font-size:.9rem}.tile-detail-item span{color:var(--color-text);font-weight:600}.tile-description{padding:var(--spacing-md);background:var(--surface-elevated);border:2px solid var(--color-border);border-radius:var(--border-radius);margin-bottom:var(--spacing-sm)}.tile-description p{margin:0;line-height:1.6}.tile-usage{padding:var(--spacing-md);background:var(--color-accent-bg);border-radius:var(--border-radius)}.tile-usage h4{margin-top:0;margin-bottom:var(--spacing-xs);color:var(--color-heading)}.tile-usage ul{margin:0;padding-left:1.5rem}.tile-usage li{margin-bottom:.25rem}.legend-grid{gap:var(--spacing-md);margin:var(--spacing-md) 0;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.legend-card{background:var(--surface-elevated);padding:var(--spacing-md);border-radius:var(--border-radius);border:2px solid var(--color-border)}.legend-card h3{color:var(--color-heading);margin-bottom:var(--spacing-sm)}.legend-card ul{margin:var(--spacing-sm) 0 0 0;padding-left:1.5rem}.legend-card li{margin-bottom:var(--spacing-xs)}.terminology-box{background:var(--color-accent-bg);padding:var(--spacing-md);border-radius:var(--border-radius);margin-top:var(--spacing-md)}.terminology-box h3{color:var(--color-heading);margin-top:0}.terminology-grid{gap:var(--spacing-sm);margin-top:var(--spacing-sm);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.terminology-grid div{padding:var(--spacing-sm);background:var(--surface-elevated);border-radius:4px}.resource-download-card{background:var(--surface-elevated);border:2px solid var(--color-border);border-radius:var(--border-radius);padding:var(--spacing-md);transition:all var(--transition)}.resource-download-card:hover{box-shadow:0 6px 20px var(--color-shadow);border-color:var(--color-primary);transform:translateY(-4px)}.resource-icon{width:60px;height:60px;margin-bottom:var(--spacing-sm);color:var(--color-primary)}.resource-icon svg{width:100%;height:100%}.resource-download-card h3{margin-bottom:var(--spacing-xs);color:var(--color-heading)}.resource-meta{color:var(--color-text-lighter);margin-bottom:var(--spacing-sm);font-size:.85rem}.resource-features{margin:var(--spacing-sm) 0;padding:0;list-style:none}.resource-features li{color:var(--color-text);margin-bottom:.25rem;padding-left:1.5rem;position:relative}.resource-features li:before{content:"✓";color:var(--color-primary);font-weight:700;position:absolute;left:0}.download-btn{justify-content:center;align-items:center;gap:.5rem;width:100%;display:flex}.download-btn svg{width:20px;height:20px}.glossary-content{gap:var(--spacing-lg);display:grid}.glossary-section{text-align:center;padding:var(--spacing-md);background:var(--surface-elevated);border-radius:var(--border-radius);border:2px solid var(--color-border)}.glossary-preview{background:var(--surface-elevated);padding:var(--spacing-md);border-radius:var(--border-radius);border:2px solid var(--color-border)}.glossary-preview h4{margin-top:0;margin-bottom:var(--spacing-sm);color:var(--color-heading)}.terms-grid{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));display:grid}.term-item{padding:var(--spacing-sm);background:var(--color-bg-alt);border-radius:4px}.term-item strong{color:var(--color-heading);margin-bottom:.25rem;display:block}.term-item p{color:var(--color-text-light);margin:0;font-size:.9rem}.video-placeholder{background:var(--surface-elevated);padding:var(--spacing-lg);border-radius:var(--border-radius);border:2px dashed var(--color-border);text-align:center}.video-placeholder ul{text-align:left;margin:var(--spacing-sm) 0;display:inline-block}.tools-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.tool-card{background:var(--surface-elevated);padding:var(--spacing-md);border-radius:var(--border-radius);border:2px solid var(--color-border);text-align:center}.tool-card h3{color:var(--color-heading);margin-bottom:var(--spacing-sm)}.tool-card p{color:var(--color-text-light);margin-bottom:var(--spacing-md)}@media (width<=768px){.tiles-interactive-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.tile-visual{min-height:60px;font-size:3rem}.tile-modal-body{grid-template-columns:1fr}.tile-display-large{font-size:6rem}.filter-buttons{gap:.5rem}.filter-btn{flex:calc(50% - .25rem);min-width:0}}@media (width<=480px){.tile-display-large{font-size:5rem}.tile-modal-body{padding:var(--spacing-sm)}}