:root{--color-bg: #0f1115;--color-surface: #161a21;--color-surface-elevated: #1c2129;--color-border: #2a3140;--color-border-emphasis: #3d4758;--color-text-primary: #e6e9ef;--color-text-secondary: #9ca3b4;--color-text-muted: #6b7280;--color-accent: #6366f1;--color-accent-hover: #818cf8;--color-success: #22c55e;--color-success-muted: rgba(34, 197, 94, .15);--color-success-border: rgba(34, 197, 94, .45);--color-warning: #eab308;--color-error: #ef4444;--color-info: #3b82f6;--font-sans: "DM Sans", system-ui, -apple-system, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--tracking-tight: -.02em;--ease-default: cubic-bezier(.4, 0, .2, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .3s;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-surface: 0 1px 3px rgba(0, 0, 0, .3);--shadow-elevated: 0 4px 12px rgba(0, 0, 0, .4);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg)}body{margin:0;min-height:100vh}#root{min-height:100vh}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}main{min-height:100vh;padding:var(--space-6) var(--space-4);max-width:48rem;margin:0 auto;color:var(--color-text-primary);background-color:var(--color-bg)}main h1{font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4)}main p{font-size:var(--text-base);color:var(--color-text-secondary);margin:0}.setup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);padding:var(--space-8)}.setup-subtitle{margin:calc(-1 * var(--space-2)) 0 0!important}.setup-control{display:flex;align-items:center;gap:var(--space-3)}.setup-control label{font-size:var(--text-sm);color:var(--color-text-secondary)}.setup-control select,.setup-select{padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;font-size:var(--text-base);color:var(--color-text-primary);cursor:pointer;min-width:10rem;transition:border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default)}.setup-control select:hover,.setup-select:hover{border-color:var(--color-border-emphasis)}.setup-control select:focus,.setup-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #6366f140}.setup-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.setup-start{padding:var(--space-2) var(--space-5);background:var(--color-accent);border:none;border-radius:var(--radius-md);font:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:#fff;cursor:pointer;transition:background var(--duration-fast) var(--ease-default)}.setup-start:hover{background:var(--color-accent-hover)}.setup-reset{padding:var(--space-2) var(--space-5);background:transparent;border:1px solid var(--color-border-emphasis);border-radius:var(--radius-md);font:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}.setup-reset:hover{border-color:var(--color-error);color:var(--color-error)}.setup-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#0009;padding:var(--space-4)}.setup-modal-content{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:var(--space-6);max-width:360px;text-align:center}.setup-modal-title{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:var(--tracking-tight)}.setup-modal-message{margin:0 0 var(--space-5);font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-normal)}.setup-modal-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.setup-modal-button{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}.setup-modal-button-cancel{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary)}.setup-modal-button-cancel:hover{border-color:var(--color-border-emphasis)}.setup-modal-button-confirm{background:var(--color-error);color:#fff}.setup-modal-button-confirm:hover{background:#dc2626}.help-widget{position:fixed;bottom:var(--space-4);right:var(--space-4);z-index:1500;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:0}.help-button{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--color-accent);border:none;color:#fff;font-size:var(--text-lg);font-weight:var(--weight-semibold);cursor:pointer;box-shadow:var(--shadow-surface);transition:background var(--duration-fast) var(--ease-default)}.help-button:hover{background:var(--color-accent-hover)}.help-menu{margin-bottom:var(--space-2);padding:var(--space-1);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);min-width:180px;display:flex;flex-direction:column;gap:0}.help-menu-item{padding:var(--space-2) var(--space-3);text-align:left;font:inherit;font-size:var(--text-sm);color:var(--color-text-primary);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast) var(--ease-default)}.help-menu-item:hover{background:var(--color-surface)}.help-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#0009;padding:var(--space-4)}.help-modal-content{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:var(--space-6);max-width:420px;text-align:left}.help-modal-title{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:var(--tracking-tight)}.help-modal-body{margin:0 0 var(--space-5);font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-normal)}.help-modal-close{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default)}.help-modal-close:hover{background:var(--color-accent-hover)}.game{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:var(--color-bg);overflow:hidden}.game-board{flex:1;position:relative;min-height:0}.game-shelf-row{position:relative;flex-shrink:0;display:flex;flex-direction:row;align-items:center;background:var(--color-surface);border-bottom:1px solid var(--color-border);min-height:88px;max-height:88px}.game-shelf-row-spacer{flex:1;min-width:0}.game-bottom-shelf{flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;background:var(--color-surface);border-top:1px solid var(--color-border);min-height:88px;max-height:88px}.game-progress{position:relative;flex-shrink:0;width:100%;height:8px;display:flex;align-items:stretch;justify-content:flex-start;overflow:hidden}.game-progress-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0;transition:width var(--duration-normal) var(--ease-default);z-index:0}.game-bottom-shelf .shelf{flex:1;display:flex;flex-direction:row;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-3) var(--space-2);overflow-x:auto;min-height:0;align-items:center}.game-action{flex-shrink:0;margin:var(--space-3) var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-accent);border:none;border-radius:var(--radius-md);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);color:#fff;cursor:pointer;transition:background var(--duration-fast) var(--ease-default)}.game-action:hover:not(:disabled){background:var(--color-accent-hover)}.game-action:disabled{opacity:.5;cursor:not-allowed}.shelf-item{flex-shrink:0}.game-deck-zone{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;padding:0 var(--space-4);min-width:120px;min-height:56px}.game-search-zone{display:flex;align-items:center;flex-shrink:0;padding:0 var(--space-2)}.game-search-input-wrap{position:relative;display:inline-block}.game-search-input{padding:var(--space-2) var(--space-3);padding-right:2rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;font-size:var(--text-sm);color:var(--color-text-primary);min-width:140px}.game-search-input::placeholder{color:var(--color-text-muted)}.game-search-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #6366f140}.game-search-clear{position:absolute;top:50%;right:var(--space-1);transform:translateY(-50%);padding:var(--space-1);background:transparent;border:none;border-radius:var(--radius-sm);font:inherit;font-size:var(--text-lg);line-height:1;color:var(--color-text-secondary);cursor:pointer;transition:color var(--duration-fast) var(--ease-default)}.game-search-clear:hover{color:var(--color-text-primary)}.game-search-results{position:relative;flex-shrink:0;min-height:56px;padding:0 var(--space-2);max-width:400px;overflow:visible}.game-deck-count{position:absolute;top:8px;left:16px;min-width:1.5rem;height:1.5rem;padding:0 .375rem;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:#fff;font-size:var(--text-xs);font-weight:var(--weight-medium);border-radius:9999px;z-index:100;pointer-events:none;box-shadow:0 1px 3px #0000004d}.deck{position:relative;width:100px;height:56px;min-height:56px;border-radius:var(--radius-md);transition:box-shadow var(--duration-fast) var(--ease-default)}.deck-drop-target{box-shadow:0 0 0 2px var(--color-accent)}.deck-placeholder{position:absolute;left:0;top:0;width:100px;height:56px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--color-border-emphasis);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);pointer-events:none;transition:border-color var(--duration-fast) var(--ease-default)}.deck-card{position:absolute;left:0;top:0;width:100px;height:56px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-surface);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary);cursor:grab;transition:box-shadow var(--duration-fast) var(--ease-default)}.deck-card:active{cursor:grabbing}.deck-card-top{z-index:1;cursor:grab}.deck-card-top:hover{box-shadow:var(--shadow-elevated)}.deck-card-selected{border:2px solid var(--color-accent);box-shadow:0 0 0 4px #6366f180;background:#6366f126}.deck-card-incorrect{border-color:var(--color-error);box-shadow:0 0 0 4px #ef444480}.element-card{position:absolute;width:100px;height:56px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-surface);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary);cursor:grab;transition:left .35s ease-out,top .35s ease-out,box-shadow var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default)}.element-card:active{cursor:grabbing}.element-card-selected{border:2px solid var(--color-accent);box-shadow:0 0 0 4px #6366f180;outline:2px solid var(--color-accent);outline-offset:2px}.element-card-dragging{pointer-events:none;z-index:1000;box-shadow:var(--shadow-elevated);transition:none}.element-card-incorrect{border-color:var(--color-error);box-shadow:0 0 0 4px #ef444480;animation:incorrect-shake .5s ease-in-out}.element-card-search-highlight,.element-card-drop-target{border-color:var(--color-accent);box-shadow:0 0 0 3px #6366f166}.category-bubble{position:absolute;z-index:10;min-width:140px;max-width:180px;max-height:80px;padding:var(--space-3) var(--space-4);background:var(--color-surface-elevated);border:2px solid var(--color-border-emphasis);border-radius:20px;box-shadow:var(--shadow-surface);cursor:grab;transition:box-shadow var(--duration-fast) var(--ease-default);overflow:hidden}.category-bubble-progress-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0;z-index:0;pointer-events:none;transition:width var(--duration-normal) var(--ease-default)}.category-bubble-content{position:relative;z-index:1}.category-bubble:active{cursor:grabbing}.category-bubble-dragging{pointer-events:none;z-index:1000;box-shadow:var(--shadow-elevated)}.category-bubble-selected{box-shadow:0 0 0 3px var(--color-accent)}.category-bubble-incorrect{border-color:var(--color-error);box-shadow:0 0 0 4px #ef444480;animation:incorrect-shake .5s ease-in-out}.category-bubble-search-highlight,.category-bubble-drop-target{border-color:var(--color-accent);box-shadow:0 0 0 3px #6366f166}@keyframes incorrect-shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(6px)}45%{transform:translate(-4px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}.category-bubble-name-wrap{display:inline-block;position:relative;margin-bottom:var(--space-1);min-width:2ch}.category-bubble-name-sizer{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;font:inherit;font-size:var(--text-sm);font-style:inherit;padding:var(--space-1) 0;pointer-events:none}.category-bubble-name{display:block;min-width:2ch;margin:0;padding:var(--space-1) 0;background:transparent;border:none;font:inherit;font-size:var(--text-sm);font-style:normal;color:var(--color-text-primary);outline:none}.category-bubble-name::placeholder{color:var(--color-text-muted);font-style:italic}.category-bubble-preview{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-1);font-size:var(--text-xs);color:var(--color-text-secondary)}.category-bubble-preview-item{padding:2px 6px;background:var(--color-surface);border-radius:var(--radius-sm)}.category-bubble-preview-ellipsis{padding:2px 4px;font-size:var(--text-xs);color:var(--color-text-muted)}.category-bubble-tooltip{position:fixed;z-index:1000;padding:var(--space-2);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);pointer-events:none}.category-bubble-tooltip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-1);font-size:var(--text-xs);color:var(--color-text-primary)}.category-bubble-tooltip-item{padding:var(--space-1) var(--space-2);background:var(--color-surface);border-radius:var(--radius-sm)}.completed-category{position:relative;display:inline-flex;flex-shrink:0;min-width:0;max-width:200px;padding:var(--space-2) var(--space-3);background:var(--color-success-muted);border:1px solid var(--color-success-border);border-radius:0;box-shadow:var(--shadow-surface);overflow:visible;cursor:default}.completed-category-tooltip{position:fixed;z-index:1000;padding:var(--space-2);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);pointer-events:none}.completed-category-tooltip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-1);font-size:var(--text-xs);color:var(--color-text-primary)}.completed-category-tooltip-item{padding:var(--space-1) var(--space-2);background:var(--color-surface);border-radius:var(--radius-sm)}.completed-category-name{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#0009;padding:var(--space-4)}.game-modal-content{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:var(--space-6);max-width:360px;text-align:center}.game-modal-congratulations .game-modal-title{margin:0 0 var(--space-3);font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:var(--tracking-tight)}.game-modal-congratulations .game-modal-message{margin:0 0 var(--space-5);font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-normal)}.game-modal-button{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default)}.game-modal-button:hover{background:var(--color-accent-hover)}.game-stats-fixed{position:fixed;bottom:var(--space-4);right:calc(var(--space-4) + 40px + var(--space-2));z-index:1400;height:40px;display:flex;align-items:center;justify-content:center;padding:0 var(--space-4);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-surface);transition:background var(--duration-fast) var(--ease-default)}.game-stats-fixed:hover{background:var(--color-accent-hover)}.game-modal-stats .game-modal-title{margin:0 0 var(--space-4);font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:var(--tracking-tight)}.game-stats-list{margin:0 0 var(--space-5);padding:0;text-align:left}.game-stats-list dt{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary)}.game-stats-list dt:first-of-type{margin-top:0}.game-stats-list dd{margin:var(--space-1) 0 0;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--color-text-primary)}