.hanzi-visual-game{display:flex;flex-direction:column;min-height:calc(100vh - var(--header-height, 64px));padding:var(--spacing-md);background:var(--color-background)}.topic-selector{max-width:800px;margin:0 auto;padding:var(--spacing-xl)}.topic-selector h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--spacing-sm);color:var(--color-text)}.topic-selector .subtitle{text-align:center;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.topics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.topic-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all var(--transition-fast);text-align:center}.topic-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.topic-card .emoji-preview{font-size:2.5rem;margin-bottom:var(--spacing-sm)}.topic-card .topic-name-zh{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-xs)}.topic-card .topic-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-text-tertiary);margin-bottom:var(--spacing-sm)}.topic-card .topic-meta{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.topic-card .difficulty{color:var(--color-warning);font-size:var(--font-size-sm)}.topic-card .item-count{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.categories-container{display:flex;flex-direction:column;gap:var(--spacing-xl)}.category-section{margin-bottom:var(--spacing-md)}.category-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.category-header .category-emoji{font-size:var(--font-size-xl)}.category-header .category-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text)}.category-header .category-name-zh{font-size:var(--font-size-base);color:var(--color-text-tertiary)}.endless-mode-btn{display:block;width:100%;max-width:400px;margin:0 auto var(--spacing-xl);padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(135deg,var(--color-primary),var(--color-info));color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.endless-mode-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.game-hud{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.current-hanzi{font-size:clamp(4rem,15vw,8rem);font-weight:var(--font-weight-bold);color:var(--color-text);line-height:1;margin-bottom:var(--spacing-sm);font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif}.audio-row{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:var(--spacing-md);width:100%}.current-pinyin{font-size:var(--font-size-sm);color:var(--color-text-tertiary);letter-spacing:.05em;margin-left:var(--spacing-sm);position:absolute;left:50%;margin-left:36px}.game-stats{display:flex;gap:var(--spacing-xl);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.game-stats .stat{display:flex;align-items:center;gap:var(--spacing-xs)}.game-stats .stat-value{font-weight:var(--font-weight-bold);color:var(--color-text)}.audio-btn{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);width:48px;height:48px;font-size:var(--font-size-xl);cursor:pointer;transition:all var(--transition-fast)}.audio-btn:hover{background:var(--color-primary-hover);transform:scale(1.1)}.audio-btn:disabled{opacity:.5;cursor:not-allowed}.visual-area{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.emoji-grid{display:grid;gap:var(--spacing-md);max-width:600px;width:100%}.emoji-grid.cols-2{grid-template-columns:repeat(2,1fr)}.emoji-grid.cols-3{grid-template-columns:repeat(3,1fr)}.emoji-grid.cols-4{grid-template-columns:repeat(4,1fr)}.clickable-region{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-height:120px}.clickable-region:hover{border-color:var(--color-primary);transform:scale(1.02);box-shadow:var(--shadow-md)}.clickable-region.correct{border-color:var(--color-success);background:#27ae601a;animation:correctPulse .5s ease}.clickable-region.incorrect{border-color:var(--color-error);background:#e74c3c1a;animation:shake .5s ease}.clickable-region.completed{border-color:var(--color-success);background:#27ae6026;opacity:.7;cursor:default}.clickable-region.completed:hover{transform:none;box-shadow:none}.clickable-region .emoji{font-size:3rem;margin-bottom:var(--spacing-xs)}.clickable-region .label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.clickable-region .meaning{position:absolute;bottom:4px;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap}.clickable-region{position:relative}.direction-diagram{display:grid;grid-template-areas:".    top    ." "left center right" ".    bottom .";grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:var(--spacing-md);max-width:400px;width:100%;aspect-ratio:1}.direction-diagram .pos-top{grid-area:top}.direction-diagram .pos-bottom{grid-area:bottom}.direction-diagram .pos-left{grid-area:left}.direction-diagram .pos-right{grid-area:right}.direction-diagram .pos-center{grid-area:center;background:var(--color-border-light);border:2px dashed var(--color-border);cursor:default}.direction-diagram .pos-center:hover{transform:none;box-shadow:none}.family-tree{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);max-width:500px;width:100%;position:relative;padding:var(--spacing-md) 0}.family-tree .tree-level{display:flex;justify-content:center;gap:var(--spacing-md);position:relative;width:100%;z-index:1}.family-tree .tree-level-label{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.family-tree .family-member{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-width:80px}.family-tree .family-member:hover{border-color:var(--color-primary);transform:scale(1.05)}.family-tree .family-member.correct{border-color:var(--color-success);background:#27ae601a}.family-tree .family-member.incorrect{border-color:var(--color-error);background:#e74c3c1a}.family-tree .family-member.completed{border-color:var(--color-success);background:#27ae6026;opacity:.7;cursor:default}.family-tree .family-member.completed:hover{transform:none}.family-tree .family-member.self{border-color:var(--color-primary);background:#6366f11a;box-shadow:0 0 0 3px #6366f133}.family-tree .family-member.self:hover{border-color:var(--color-primary-hover);box-shadow:0 0 0 4px #6366f14d}.family-tree .family-member.self.completed{border-color:var(--color-success);background:#27ae6026;box-shadow:0 0 0 3px #27ae6033}.family-tree .self-level{margin:var(--spacing-md) 0}.family-tree .family-member .icon{font-size:2rem;margin-bottom:var(--spacing-xs)}.family-tree .family-member .meaning{position:absolute;bottom:4px;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap}.family-tree .family-member .relation{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.family-tree .tree-connectors{position:absolute;top:0;left:50%;transform:translate(-50%);width:90%;height:100%;pointer-events:none;z-index:0}.family-tree .tree-connectors line{stroke:var(--color-border);stroke-width:1.5;vector-effect:non-scaling-stroke}.feedback-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--spacing-xl) var(--spacing-2xl);border-radius:var(--radius-xl);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);z-index:var(--z-modal);animation:fadeInOut 1s ease forwards}.feedback-overlay.correct{background:var(--color-success);color:#fff}.feedback-overlay.incorrect{background:var(--color-error);color:#fff}.completion-screen{max-width:500px;margin:0 auto;padding:var(--spacing-2xl);text-align:center}.completion-screen h2{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-md);color:var(--color-text)}.completion-screen .score-summary{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.completion-screen .final-score{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-bottom:var(--spacing-md)}.completion-screen .stats-row{display:flex;justify-content:center;gap:var(--spacing-xl);color:var(--color-text-secondary)}.completion-screen .action-btns{display:flex;gap:var(--spacing-md);justify-content:center}.completion-screen .btn{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.completion-screen .btn-primary{background:var(--color-primary);color:#fff;border:none}.completion-screen .btn-primary:hover{background:var(--color-primary-hover)}.completion-screen .btn-secondary{background:transparent;color:var(--color-text);border:2px solid var(--color-border)}.completion-screen .btn-secondary:hover{border-color:var(--color-text)}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}@media(max-width:768px){.hanzi-visual-game{padding:var(--spacing-sm)}.topic-selector{padding:var(--spacing-md)}.topics-grid{grid-template-columns:repeat(2,1fr)}.topic-card{padding:var(--spacing-md)}.topic-card .emoji-preview{font-size:2rem}.emoji-grid{gap:var(--spacing-sm)}.clickable-region{padding:var(--spacing-md);min-height:100px}.clickable-region .emoji{font-size:2.5rem}.direction-diagram{max-width:300px}.family-tree .family-member{padding:var(--spacing-sm);min-width:60px}.family-tree .family-member .icon{font-size:1.5rem}}