:root{--wb-bg-primary: #0f1419;--wb-bg-secondary: #1a202c;--wb-bg-tertiary: #2d3748;--wb-text-primary: #ffffff;--wb-text-secondary: #a0aec0;--wb-text-muted: #718096;--wb-accent-blue: #4299e1;--wb-accent-green: #48bb78;--wb-accent-purple: #805ad5;--wb-accent-orange: #ed8936;--wb-accent-red: #f56565;--wb-spacing-xs: 4px;--wb-spacing-sm: 8px;--wb-spacing-md: 16px;--wb-spacing-lg: 24px;--wb-spacing-xl: 32px;--wb-min-tap-target: 44px;--wb-cell-size-mobile: 44px;--wb-cell-size-tablet: 52px;--wb-cell-size-desktop: 56px;--wb-tile-size-mobile: 48px;--wb-tile-size-tablet: 52px;--wb-tile-size-desktop: 56px;--wb-radius-sm: 6px;--wb-radius-md: 10px;--wb-radius-lg: 12px;--wb-transition-fast: .15s ease;--wb-transition-normal: .2s ease;--wb-grid-gap: 4px;--wb-grid-padding: 12px}.wb-app{font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.wb-app button,.wb-app [role=button],.wb-app [role=gridcell][tabindex="0"],.wb-app [role=switch]{min-width:var(--wb-min-tap-target);min-height:var(--wb-min-tap-target)}.wb-game-screen{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:var(--wb-spacing-sm);gap:var(--wb-spacing-sm);box-sizing:border-box;background-color:var(--wb-bg-primary)}.wb-game-top{flex-shrink:0}.wb-game-area{display:flex;flex-direction:column;flex:1;gap:var(--wb-spacing-md);align-items:center;justify-content:center;overflow:hidden}.wb-grid-container{display:flex;justify-content:center;align-items:center;flex:1;width:100%;max-height:50vh}.wb-tray-container{width:100%;max-width:100%;flex-shrink:0}.wb-grid{display:grid;gap:var(--wb-grid-gap);padding:var(--wb-grid-padding);background-color:var(--wb-bg-secondary);border-radius:var(--wb-radius-lg);box-shadow:0 4px 20px #0000004d;max-width:100%;width:fit-content}.wb-grid-wrapper{display:flex;justify-content:center;align-items:center;padding:var(--wb-spacing-sm);width:100%;box-sizing:border-box}.wb-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,3.5vw,24px);font-weight:700;border-radius:var(--wb-radius-sm);transition:transform var(--wb-transition-fast),box-shadow var(--wb-transition-fast),background-color var(--wb-transition-fast);cursor:default;-webkit-user-select:none;user-select:none;min-width:var(--wb-cell-size-mobile);min-height:var(--wb-cell-size-mobile);box-sizing:border-box}.wb-cell--fixed{background-color:#4a5568;color:var(--wb-text-primary);box-shadow:inset 0 2px 4px #0003}.wb-cell--blank{background-color:#e2e8f0;color:var(--wb-text-muted);border:2px dashed #cbd5e0;cursor:pointer}.wb-cell--cleared,.wb-cell--empty{background-color:transparent;color:transparent;border:none}.wb-cell--empty{pointer-events:none}.wb-cell--highlighted{background-color:var(--wb-accent-green);border-color:#48bb78;box-shadow:0 0 12px #48bb7880;transform:scale(1.05)}.wb-cell--invalid{background-color:var(--wb-accent-red);border-color:#f56565;box-shadow:0 0 12px #f5656580;animation:cellShake .3s ease-in-out}.wb-tray{display:flex;flex-direction:column;align-items:center;gap:var(--wb-spacing-md);padding:var(--wb-spacing-md);background-color:var(--wb-bg-tertiary);border-radius:var(--wb-radius-lg);box-shadow:0 4px 12px #0003}.wb-tray__tiles{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--wb-spacing-sm);min-height:64px}.wb-tray__label{font-size:12px;font-weight:600;color:var(--wb-text-secondary);text-transform:uppercase;letter-spacing:.5px}.wb-tile{width:var(--wb-tile-size-mobile);height:var(--wb-tile-size-mobile);display:flex;align-items:center;justify-content:center;font-size:clamp(18px,4vw,24px);font-weight:700;background-color:var(--wb-accent-blue);color:var(--wb-text-primary);border-radius:var(--wb-radius-md);box-shadow:0 4px 8px #0003,inset 0 2px #fff3;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform var(--wb-transition-fast),box-shadow var(--wb-transition-fast),background-color var(--wb-transition-fast);min-width:var(--wb-min-tap-target);min-height:var(--wb-min-tap-target)}.wb-tile--selected{background-color:#2b6cb0;transform:scale(1.1);box-shadow:0 6px 16px #4299e180,inset 0 2px #fff3}.wb-tile--dragging{cursor:grabbing;transform:scale(1.15);box-shadow:0 8px 24px #0000004d;opacity:.9;z-index:1000}.wb-tile--shaking{animation:tileShake .4s ease-in-out}.wb-tile--forced{background-color:var(--wb-accent-green);box-shadow:0 4px 8px #48bb784d,inset 0 2px #fff3}.wb-shuffle-btn{display:flex;align-items:center;justify-content:center;gap:var(--wb-spacing-sm);padding:12px 20px;font-size:14px;font-weight:600;background-color:var(--wb-accent-purple);color:var(--wb-text-primary);border:none;border-radius:var(--wb-radius-md);cursor:pointer;transition:background-color var(--wb-transition-fast),transform var(--wb-transition-fast);min-width:var(--wb-min-tap-target);min-height:var(--wb-min-tap-target)}.wb-shuffle-btn:hover:not(:disabled){background-color:#6b46c1;transform:scale(1.05)}.wb-shuffle-btn:disabled{background-color:#4a5568;cursor:not-allowed;opacity:.6}.wb-shuffle-btn__count{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:14px;font-weight:700;background-color:#fff3;border-radius:50%}.wb-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--wb-spacing-sm) var(--wb-spacing-md);background-color:var(--wb-bg-secondary);border-radius:var(--wb-radius-lg);box-shadow:0 2px 8px #0003;gap:var(--wb-spacing-sm);flex-wrap:wrap}.wb-topbar__section{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.wb-topbar__label{font-size:9px;font-weight:600;color:var(--wb-text-muted);text-transform:uppercase;letter-spacing:.5px}.wb-topbar__value{font-size:16px;font-weight:700;color:var(--wb-text-primary)}.wb-topbar__value--level{color:var(--wb-accent-blue)}.wb-topbar__value--score{color:var(--wb-accent-green)}.wb-topbar__value--combo{transition:color var(--wb-transition-normal),transform var(--wb-transition-normal)}.wb-topbar__back-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:16px;background-color:transparent;color:var(--wb-text-secondary);border:2px solid #4a5568;border-radius:var(--wb-radius-md);cursor:pointer;transition:background-color var(--wb-transition-fast),border-color var(--wb-transition-fast);min-width:var(--wb-min-tap-target);min-height:var(--wb-min-tap-target)}.wb-topbar__back-btn:hover{background-color:var(--wb-bg-tertiary);border-color:var(--wb-text-muted)}.wb-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--wb-spacing-md);background-color:var(--wb-bg-primary);background-image:radial-gradient(circle at 50% 30%,#1a2332 0%,var(--wb-bg-primary) 70%)}.wb-screen__content{display:flex;flex-direction:column;align-items:center;gap:var(--wb-spacing-lg);max-width:400px;width:100%}.wb-btn{display:flex;align-items:center;justify-content:center;gap:var(--wb-spacing-sm);padding:14px 24px;font-size:16px;font-weight:600;border:none;border-radius:var(--wb-radius-md);cursor:pointer;transition:background-color var(--wb-transition-fast),transform var(--wb-transition-fast),box-shadow var(--wb-transition-fast);min-width:var(--wb-min-tap-target);min-height:var(--wb-min-tap-target);width:100%}.wb-btn--primary{padding:16px 28px;font-size:18px;font-weight:700;background-color:var(--wb-accent-green);color:var(--wb-text-primary);box-shadow:0 4px 16px #48bb784d;min-height:56px}.wb-btn--primary:hover{background-color:#38a169;transform:scale(1.02);box-shadow:0 6px 20px #48bb7866}.wb-btn--secondary{background-color:var(--wb-accent-blue);color:var(--wb-text-primary)}.wb-btn--secondary:hover{background-color:#3182ce;transform:scale(1.02)}.wb-btn--outline{background-color:transparent;color:var(--wb-text-secondary);border:2px solid #4a5568}.wb-btn--outline:hover{background-color:var(--wb-bg-tertiary);border-color:var(--wb-text-muted);color:var(--wb-text-primary)}@keyframes cellShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes tileShake{0%,to{transform:translate(0) scale(1.1)}10%{transform:translate(-8px) rotate(-5deg) scale(1.1)}20%{transform:translate(8px) rotate(5deg) scale(1.1)}30%{transform:translate(-8px) rotate(-5deg) scale(1.1)}40%{transform:translate(8px) rotate(5deg) scale(1.1)}50%{transform:translate(-4px) rotate(-2deg) scale(1.1)}60%{transform:translate(4px) rotate(2deg) scale(1.1)}70%{transform:translate(-2px) rotate(-1deg) scale(1.1)}80%{transform:translate(2px) rotate(1deg) scale(1.1)}90%{transform:translate(0) scale(1.1)}}@keyframes comboPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@media(prefers-reduced-motion:reduce){.wb-cell,.wb-tile,.wb-btn,.wb-shuffle-btn,.wb-topbar__value--combo{transition:none}.wb-cell--highlighted,.wb-tile--selected,.wb-tile--dragging{transform:none}.wb-cell--invalid,.wb-tile--shaking{animation:none}}@media screen and (min-width:600px){:root{--wb-cell-size-mobile: var(--wb-cell-size-tablet);--wb-tile-size-mobile: var(--wb-tile-size-tablet)}.wb-game-screen{padding:var(--wb-spacing-md);gap:var(--wb-spacing-md)}.wb-grid-container{max-height:60vh}.wb-tray-container{max-width:450px}.wb-cell{font-size:clamp(16px,3vw,24px)}.wb-tile{width:var(--wb-tile-size-tablet);height:var(--wb-tile-size-tablet);font-size:22px}.wb-topbar{padding:var(--wb-spacing-md);gap:var(--wb-spacing-md)}.wb-topbar__label{font-size:10px}.wb-topbar__value{font-size:20px}.wb-shuffle-btn{padding:12px 24px;font-size:16px}}@media screen and (min-width:900px){:root{--wb-cell-size-mobile: var(--wb-cell-size-desktop);--wb-tile-size-mobile: var(--wb-tile-size-desktop)}.wb-game-screen{flex-direction:row;padding:var(--wb-spacing-lg);gap:var(--wb-spacing-lg)}.wb-game-top{position:absolute;top:var(--wb-spacing-lg);left:var(--wb-spacing-lg);right:var(--wb-spacing-lg)}.wb-game-area{flex-direction:row;justify-content:center;align-items:center;padding-top:80px}.wb-grid-container{flex:0 0 auto;max-height:none}.wb-tray-container{flex:0 0 auto;max-width:200px}.wb-tray{flex-direction:column;min-height:400px}.wb-tray__tiles{flex-direction:column;flex-wrap:nowrap}.wb-cell{font-size:24px}.wb-tile{width:var(--wb-tile-size-desktop);height:var(--wb-tile-size-desktop);font-size:24px}}@media screen and (min-width:1200px){.wb-game-screen{padding:var(--wb-spacing-xl)}.wb-tray-container{max-width:240px}.wb-tray{padding:var(--wb-spacing-lg);gap:var(--wb-spacing-lg)}}@media screen and (max-height:500px)and (orientation:landscape){.wb-game-screen{flex-direction:row;padding:var(--wb-spacing-sm);gap:var(--wb-spacing-sm)}.wb-game-top{position:absolute;top:var(--wb-spacing-sm);left:var(--wb-spacing-sm);right:var(--wb-spacing-sm);z-index:10}.wb-game-area{flex-direction:row;padding-top:50px}.wb-grid-container{max-height:calc(100vh - 70px)}.wb-tray-container{max-width:180px}.wb-tray{padding:var(--wb-spacing-sm);gap:var(--wb-spacing-sm)}.wb-tray__tiles{flex-direction:column;flex-wrap:nowrap;gap:var(--wb-spacing-xs)}.wb-tile{width:40px;height:40px;font-size:18px}.wb-topbar{padding:var(--wb-spacing-xs) var(--wb-spacing-sm)}.wb-topbar__label{font-size:8px}.wb-topbar__value{font-size:14px}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.wb-grid,.wb-tray,.wb-topbar{box-shadow:0 2px 10px #00000040}}@supports (padding: max(0px)){.wb-game-screen{padding-left:max(var(--wb-spacing-sm),env(safe-area-inset-left));padding-right:max(var(--wb-spacing-sm),env(safe-area-inset-right));padding-bottom:max(var(--wb-spacing-sm),env(safe-area-inset-bottom))}.wb-screen{padding-left:max(var(--wb-spacing-md),env(safe-area-inset-left));padding-right:max(var(--wb-spacing-md),env(safe-area-inset-right));padding-bottom:max(var(--wb-spacing-md),env(safe-area-inset-bottom))}}.wb-cell:focus-visible,.wb-tile:focus-visible,.wb-btn:focus-visible,.wb-shuffle-btn:focus-visible,.wb-topbar__back-btn:focus-visible{outline:3px solid var(--wb-accent-blue);outline-offset:2px}.wb-cell--focused{outline:3px solid var(--wb-accent-blue);outline-offset:2px;box-shadow:0 0 12px #4299e180}.wb-tile--focused{outline:3px solid #f6e05e;outline-offset:2px;box-shadow:0 0 12px #f6e05e80,0 4px 8px #0003}.wb-skip-link{position:absolute;top:-40px;left:0;background:var(--wb-accent-blue);color:var(--wb-text-primary);padding:8px 16px;z-index:100;text-decoration:none;font-weight:600;border-radius:0 0 var(--wb-radius-sm) 0;transition:top .2s ease}.wb-skip-link:focus{top:0}@media print{.wb-app{display:none}}