.herdle-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - var(--header-height) - 180px);padding:var(--spacing-md) 0;width:100%}.herdle-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-lg);width:100%;max-width:500px;box-shadow:var(--shadow-lg),var(--green-glow-shadow);display:flex;flex-direction:column;gap:var(--spacing-lg);position:relative}.game-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:var(--spacing-md)}.game-title-group{text-align:center}.game-title{font-family:var(--font-headline);font-size:2.25rem;font-weight:900;letter-spacing:-1px;margin:0;line-height:1.1;text-transform:uppercase}.game-title .accent-green{color:var(--usf-green-light)}body.light-theme .game-title .accent-green{color:var(--usf-green)}.game-subtitle{font-family:var(--font-headline);font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--usf-gold);letter-spacing:1.5px;margin:var(--spacing-xs) 0 0 0}.icon-btn{background:var(--bg-surface-elevated);border:1px solid var(--border);color:var(--text-secondary);width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.icon-btn:hover{color:var(--text-primary);border-color:var(--border-focus);background-color:var(--usf-green-glow);transform:translateY(-2px)}.toast-container{position:fixed;top:90px;left:50%;transform:translate(-50%);z-index:3000;display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none;width:90%;max-width:320px}.toast{background:#0f1814f2;border:1px solid var(--usf-gold-dark);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-family:var(--font-headline);font-weight:700;font-size:.85rem;text-align:center;box-shadow:var(--shadow-lg);animation:toastFadeIn .2s ease-out forwards;text-transform:uppercase;letter-spacing:.5px}body.light-theme .toast{background:#fffffff2;border-color:var(--usf-green)}.board-container{display:flex;justify-content:center;align-items:center;flex-grow:1}.board{display:grid;grid-template-rows:repeat(6,1fr);gap:var(--spacing-sm);width:100%;max-width:330px;aspect-ratio:5 / 6}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-sm)}.tile{width:100%;aspect-ratio:1;border:2px solid var(--border);border-radius:var(--radius-sm);display:inline-flex;justify-content:center;align-items:center;font-family:var(--font-headline);font-size:1.85rem;font-weight:800;text-transform:uppercase;color:var(--text-primary);user-select:none;background-color:transparent;box-sizing:border-box}.tile[data-state=tbd]{border-color:var(--text-secondary);animation:popIn .1s ease-in-out}.tile[data-state=correct]{background-color:var(--usf-green);border-color:var(--usf-green);color:#fff}.tile[data-state=present]{background-color:var(--usf-gold);border-color:var(--usf-gold);color:var(--bg-base)}.tile[data-state=absent]{background-color:#27272a;border-color:#27272a;color:var(--text-secondary)}body.light-theme .tile[data-state=absent]{background-color:#cbd5e1;border-color:#cbd5e1;color:#475569}.keyboard{display:flex;flex-direction:column;gap:var(--spacing-sm);user-select:none}.keyboard-row{display:flex;justify-content:center;gap:var(--spacing-xs);width:100%}.key{font-family:var(--font-headline);font-weight:700;font-size:.95rem;text-transform:uppercase;background-color:var(--bg-surface-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;flex:1;height:52px;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,transform var(--transition-fast) ease}.key:hover{background-color:var(--border);transform:translateY(-1px)}.key-wide{flex:1.5;font-size:.75rem}.key-spacer{flex:.5}.key[data-state=correct]{background-color:var(--usf-green)!important;color:#fff!important;border-color:var(--usf-green)}.key[data-state=present]{background-color:var(--usf-gold)!important;color:var(--bg-base)!important;border-color:var(--usf-gold)}.key[data-state=absent]{background-color:#27272a!important;color:var(--text-muted)!important;border-color:#27272a;opacity:.6}body.light-theme .key[data-state=absent]{background-color:#e2e8f0!important;color:#94a3b8!important;border-color:#e2e8f0}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#060c09bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .25s ease-out}.modal-content{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:90%;max-width:440px;box-shadow:var(--shadow-lg),var(--gold-glow-shadow);position:relative;max-height:90vh;overflow-y:auto;animation:scaleUp .25s cubic-bezier(.34,1.56,.64,1)}.modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);color:var(--text-secondary);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.modal-close:hover{color:var(--text-primary);background-color:var(--bg-surface-elevated)}.modal-title{font-family:var(--font-headline);font-size:1.75rem;font-weight:800;text-transform:uppercase;color:var(--text-primary);margin-top:0;margin-bottom:var(--spacing-sm);border-bottom:2px dashed var(--border);padding-bottom:var(--spacing-sm)}.modal-desc{font-size:.95rem;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.help-list{padding-left:var(--spacing-md);margin-bottom:var(--spacing-lg)}.help-list li{list-style-type:square;font-size:.9rem;margin-bottom:var(--spacing-xs);color:var(--text-secondary)}.help-examples{margin-top:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);border-top:1px solid var(--border);padding-top:var(--spacing-md)}.help-examples h3{font-family:var(--font-headline);font-size:1rem;font-weight:800;text-transform:uppercase;color:var(--usf-gold);margin:0}.example-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.example-row{display:flex;gap:var(--spacing-xs)}.example-row .tile{width:36px;height:36px;font-size:1.25rem}.example-group p{font-size:.85rem;color:var(--text-secondary);margin:0}.help-footer{margin-top:var(--spacing-xl);font-family:var(--font-headline);font-size:.85rem;font-weight:700;text-transform:uppercase;color:var(--usf-green-light);text-align:center}body.light-theme .help-footer{color:var(--usf-green)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);text-align:center}.stat-box{display:flex;flex-direction:column;background:var(--bg-surface-elevated);border:1px solid var(--border);padding:var(--spacing-sm) var(--spacing-xs);border-radius:var(--radius-md)}.stat-val{font-family:var(--font-headline);font-size:1.75rem;font-weight:900;color:var(--usf-gold-bright)}body.light-theme .stat-val{color:var(--usf-green)}.stat-lbl{font-size:.65rem;text-transform:uppercase;color:var(--text-secondary);font-weight:600;letter-spacing:.5px}.distribution-title{font-family:var(--font-headline);font-size:1.1rem;font-weight:800;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--spacing-md)}.dist-chart{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-xl)}.dist-row{display:flex;align-items:center;gap:var(--spacing-sm)}.dist-label{font-family:var(--font-headline);font-size:.85rem;font-weight:700;width:12px}.dist-bar-wrapper{flex-grow:1;background:var(--bg-surface-elevated);border-radius:var(--radius-sm);overflow:hidden}.dist-bar{background-color:var(--text-muted);color:#fff;font-family:var(--font-headline);font-size:.75rem;font-weight:700;padding:2px var(--spacing-sm);text-align:right;min-width:20px;border-radius:var(--radius-sm);box-sizing:border-box}.dist-bar.highlight{background-color:var(--usf-green-light)!important}body.light-theme .dist-bar.highlight{background-color:var(--usf-green)!important}.stats-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:var(--spacing-lg);margin-top:var(--spacing-lg)}.next-word-group{display:flex;flex-direction:column}.next-word-group h4{font-family:var(--font-headline);font-size:.75rem;font-weight:700;color:var(--text-secondary);letter-spacing:1px;margin:0}.next-word-group .countdown-timer{font-family:var(--font-headline);font-size:1.5rem;font-weight:900;color:var(--text-primary)}.share-group{display:flex}.share-group .cta-button{padding:12px 24px}@keyframes popIn{0%{transform:scale(.8);opacity:0}40%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes toastFadeIn{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.tile.flip{animation:flipIn .5s ease-in-out forwards}@keyframes flipIn{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}55%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.board-row.shake{animation:shake .5s ease-in-out}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.tile.bounce{animation:bounce .5s ease-in-out}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}@media (max-width: 540px){.herdle-card{padding:var(--spacing-md);gap:var(--spacing-md);border:none;box-shadow:none;background:transparent}.tile{font-size:1.5rem}.key{height:48px;font-size:.85rem}}@media (max-width: 480px){.modal-content{padding:var(--spacing-md);width:95%}.modal-title{font-size:1.4rem;margin-bottom:var(--spacing-xs)}.modal-desc{font-size:.85rem;margin-bottom:var(--spacing-md)}.help-list{margin-bottom:var(--spacing-md);padding-left:var(--spacing-md)}.help-list li{font-size:.8rem}.help-examples{margin-top:var(--spacing-md);padding-top:var(--spacing-md);gap:var(--spacing-sm)}.help-examples h3{font-size:.9rem}.example-row .tile{width:32px;height:32px;font-size:1.1rem}.example-group p{font-size:.8rem}.help-footer{margin-top:var(--spacing-lg)}.stats-grid{gap:6px;margin-bottom:var(--spacing-lg)}.stat-val{font-size:1.4rem}.stat-lbl{font-size:.55rem;letter-spacing:0}.dist-bar{font-size:.7rem;padding:2px var(--spacing-xs)}.next-word-group .countdown-timer{font-size:1.25rem}.share-group .cta-button{padding:10px 16px;font-size:.8rem}}@media (max-width: 380px){.key-wide{font-size:.65rem;letter-spacing:-.5px}}@media (max-width: 360px){.key{height:40px;font-size:.75rem}}@media (max-height: 780px){.herdle-container{padding:var(--spacing-xs) 0;min-height:calc(100vh - var(--header-height) - 100px)}.herdle-card{gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md)}.board{max-width:290px}.key{height:42px}.modal-content{padding:var(--spacing-md)}}@media (max-height: 680px){.board{max-width:250px}.key{height:36px;font-size:.75rem}.game-title{font-size:1.75rem}.game-subtitle{font-size:.65rem;margin-top:2px}.modal-content{padding:var(--spacing-sm) var(--spacing-md)}.help-list{margin-bottom:var(--spacing-xs)}.help-examples{margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);gap:var(--spacing-xs)}.example-row .tile{width:28px;height:28px;font-size:1rem}.stats-grid{margin-bottom:var(--spacing-md)}}