.ws-wrap {
            width: 100%;
            color: #3b2f24;
            margin: 0 auto;
        }

        .ws-wrap * {
            box-sizing: border-box;
        }

        .ws-page {
            background: linear-gradient(135deg, #fff8f0 0%, #fdf3e7 50%, #fff4eb 100%);
            border-radius: 28px;
            padding: 32px 24px 24px;
            border: 1px solid rgba(255, 255, 255, .8);
        }

        .sq-wrap {
            text-align: center;
        }

        .ws-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .ws-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            color: #c4732a;
            background: #fff3e0;
            border: 1px solid rgba(229, 149, 68, .25);
            border-radius: 999px;
            padding: 4px 12px;
            margin-bottom: 12px;
        }

        .ws-badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #e59544;
        }

        .ws-h1 {
            font-size: 39px;
            font-weight: 800;
            color: #1a1209;
            margin-bottom: 6px;
        }

        .ws-h1 span {
            color: #e59544;
        }

        .ws-sub {
            font-size: 14px;
            color: #7c6a52;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .ws-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, .82);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, .95);
            border-radius: 16px;
            padding: 10px 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 4px rgba(229, 149, 68, .06), 0 8px 24px rgba(229, 149, 68, .08);
        }

        .ws-topbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ws-puzzle-badge {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            color: #e59544;
            background: #fff3e0;
            border: 1.5px solid rgba(229, 149, 68, .3);
            border-radius: 999px;
            padding: 3px 10px;
        }

        .ws-theme {
            font-size: 13px;
            font-weight: 700;
            color: #3b2416;
        }

        .ws-puzzle-count {
            font-size: 12px;
            color: #a08060;
        }

        /* TIMER */
        .ws-timer {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 800;
            color: #c4732a;
            background: #fff3e0;
            border: 1.5px solid rgba(229, 149, 68, .25);
            border-radius: 999px;
            padding: 5px 14px;
            transition: background .4s ease, border-color .4s ease, color .4s ease;
        }

        .ws-timer svg {
            width: 14px;
            height: 14px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .ws-timer.ws-urgent {
            background: #fff0f0;
            border-color: rgba(220, 38, 38, .4);
            color: #dc2626;
            animation: ws-pulse .9s ease-in-out infinite;
        }

        @keyframes ws-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(220, 38, 38, .0);
            }

            50% {
                box-shadow: 0 0 0 5px rgba(220, 38, 38, .18);
            }
        }

        .ws-grid-container.ws-urgent {
            border-radius: 26px;
            outline: 3px solid #dc2626;
            outline-offset: 4px;
            animation: ws-border-pulse .9s ease-in-out infinite;
        }

        @keyframes ws-border-pulse {

            0%,
            100% {
                outline-color: rgba(220, 38, 38, .45);
            }

            50% {
                outline-color: rgba(220, 38, 38, 1);
            }
        }

        .ws-layout {
            display: grid;
            grid-template-columns: 1fr 60px 260px;
            gap: 16px;
            align-items: center;
        }

        .ws-game-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            overflow: hidden;
        }

        .ws-grid-container {
            width: 100%;
            display: flex;
            justify-content: center;
            overflow: hidden;
        }

        .ws-grid {
            display: inline-grid;
            gap: 5px;
            padding: 14px;
            border-radius: 22px;
            background: rgba(255, 255, 255, .78);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 2px 4px rgba(229, 149, 68, .07), 0 12px 40px rgba(229, 149, 68, .12), inset 0 1px 0 rgba(255, 255, 255, 1);
            touch-action: none;
            width: 100%;
            overflow: auto;
        }

        .ws-cell {
            width: clamp(22px, calc(86vw / var(--ws-cols)), 40px);
            height: clamp(22px, calc(86vw / var(--ws-cols)), 40px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(10px, calc(43vw / var(--ws-cols)), 15px);
            font-weight: 700;
            cursor: pointer;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(229, 149, 68, .15);
            border-radius: 10px;
            color: #4a3728;
            transition: transform .12s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
            box-shadow: 0 1px 2px rgba(229, 149, 68, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        .ws-cell:hover {
            background: #fff8f0;
            border-color: #e59544;
            transform: scale(1.07);
            box-shadow: 0 4px 12px rgba(229, 149, 68, .22);
        }

        .ws-cell.selecting {
            background: linear-gradient(135deg, #fde68a, #fbbf24) !important;
            border-color: #f59e0b !important;
            color: #78350f !important;
            transform: scale(1.08);
            box-shadow: 0 4px 14px rgba(251, 191, 36, .38) !important;
        }

        .ws-cell.found {
            background: linear-gradient(135deg, #e59544, #c4732a) !important;
            border-color: transparent !important;
            color: #fff !important;
            box-shadow: 0 3px 10px rgba(229, 149, 68, .45) !important;
            transform: scale(1.02);
        }

        .ws-cell.found-alt1 {
            background: linear-gradient(135deg, #3db88a, #1e9e6e) !important;
            border-color: transparent !important;
            color: #fff !important;
            box-shadow: 0 3px 10px rgba(61, 184, 138, .40) !important;
            transform: scale(1.02);
        }

        .ws-cell.found-alt2 {
            background: linear-gradient(135deg, #e57244, #c44e2a) !important;
            border-color: transparent !important;
            color: #fff !important;
            box-shadow: 0 3px 10px rgba(229, 114, 68, .40) !important;
            transform: scale(1.02);
        }

        /* CONTROLS */
        .ws-controls {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            justify-content: center;
        }

        .ws-btn {
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(255, 255, 255, .82);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(229, 149, 68, .22);
            cursor: pointer;
            transition: all .18s ease;
            color: #c4732a;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(229, 149, 68, .08), 0 8px 24px rgba(229, 149, 68, .11), inset 0 1px 0 rgba(255, 255, 255, 1);
            font-family: inherit;
            font-size: inherit;
            outline: none;
            padding: 0;
            appearance: none;
            -webkit-appearance: none;
            background-clip: padding-box;
            -webkit-tap-highlight-color: transparent;
        }

        .ws-btn:hover {
            background: #fff8f0;
            color: #e59544;
            border-color: #e59544;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(229, 149, 68, .15), 0 16px 32px rgba(229, 149, 68, .16), inset 0 1px 0 rgba(255, 255, 255, 1);
        }

        .ws-btn:active {
            transform: translateY(0);
        }

        .ws-btn svg {
            width: 19px;
            height: 19px;
            display: block;
            stroke: #c4732a;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
        }

        .ws-btn:hover svg {
            stroke: #e59544;
        }

        .ws-btn:disabled {
            opacity: .35;
            cursor: not-allowed;
            transform: none;
        }

        .ws-panel {
            border-radius: 22px;
            overflow: hidden;
            background: rgba(255, 255, 255, .78);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, .95);
            box-shadow: 0 2px 4px rgba(229, 149, 68, .07), 0 12px 40px rgba(229, 149, 68, .12), inset 0 1px 0 rgba(255, 255, 255, 1);
        }

        .ws-panel-header {
            padding: 14px 16px;
            border-bottom: 1px solid rgba(229, 149, 68, .12);
            font-weight: 800;
            font-size: 13px;
            letter-spacing: .08em;
            color: #7c5a3a;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 248, 240, .6);
        }

        .ws-panel-badge {
            background: linear-gradient(135deg, #e59544, #c4732a);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 999px;
            letter-spacing: .04em;
            box-shadow: 0 2px 8px rgba(229, 149, 68, .35);
        }

        .ws-word-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 14px;
            max-height: 480px;
            overflow-y: auto;
        }

        .ws-word-list::-webkit-scrollbar {
            width: 4px;
        }

        .ws-word-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .ws-word-list::-webkit-scrollbar-thumb {
            background: rgba(229, 149, 68, .2);
            border-radius: 99px;
        }

        .ws-word-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            background: linear-gradient(135deg, #fff8f0, #fdefd8);
            color: #c4732a;
            align-self: flex-start;
            border: 1px solid rgba(229, 149, 68, .22);
            box-shadow: 0 1px 3px rgba(229, 149, 68, .10);
            transition: all .2s ease;
            letter-spacing: .04em;
        }

        .ws-word-item.ws-found {
            color: #a3a3a3;
            text-decoration: line-through;
            background: linear-gradient(135deg, #f0fdf4, #dcfce7);
            border-color: rgba(61, 184, 138, .20);
            box-shadow: none;
        }

        .ws-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e59544, #c4732a);
            flex-shrink: 0;
            box-shadow: 0 1px 3px rgba(229, 149, 68, .35);
        }

        .ws-word-item.ws-found .ws-dot {
            background: linear-gradient(135deg, #3db88a, #1e9e6e);
            box-shadow: 0 1px 3px rgba(61, 184, 138, .30);
        }

        /* ONLY RESPONSIVENESS FIXES */
        @media(max-width: 900px) {
            .ws-layout {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .ws-page {
                padding: 20px 16px;
            }

            .ws-controls {
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;
            }

            .ws-word-list {
                flex-direction: row;
                flex-wrap: wrap;
                max-height: 200px;
                align-items: flex-start;
            }

            .ws-word-item {
                align-self: auto;
            }
        }

        @media(max-width: 550px) {
            .ws-page {
                padding: 16px 12px;
            }

            .ws-h1 {
                font-size: 28px;
            }

            .ws-topbar {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            .ws-topbar-left {
                justify-content: space-between;
            }

            .ws-timer {
                align-self: center;
                width: fit-content;
            }

            .ws-grid {
                gap: 3px;
                padding: 8px;
            }

            .ws-panel-header {
                padding: 10px 12px;
            }

            .ws-word-list {
                padding: 10px;
                gap: 6px;
            }

            .ws-word-item {
                padding: 5px 10px;
                font-size: 11px;
            }

            .ws-btn {
                width: 42px;
                height: 42px;
            }

            .ws-btn svg {
                width: 17px;
                height: 17px;
            }
        }

        @media(max-width: 400px) {
            .ws-cell {
                border-radius: 7px;
            }

            .ws-grid {
                gap: 2px;
                padding: 6px;
            }
        }

        /* Keep desktop layout intact */
        @media(min-width: 901px) {
            .ws-layout {
                grid-template-columns: 1fr 60px 260px;
            }

            .ws-controls {
                flex-direction: column;
            }

            .ws-word-list {
                flex-direction: column;
                max-height: 480px;
            }

            .ws-word-item {
                align-self: flex-start;
            }
        }

        /* ── Celebration overlay ── */
        .ws-celebrate-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(0, 0, 0, .45);
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 0;
        }

        .ws-celebrate-overlay.ws-active {
            display: flex;
        }

        .ws-celebrate-box {
            background: linear-gradient(135deg, #fff8f0 0%, #fdf3e7 100%);
            border-radius: 28px;
            padding: 32px 40px 28px;
            border: 1px solid rgba(255, 255, 255, .9);
            box-shadow: 0 8px 40px rgba(229, 149, 68, .35);
            text-align: center;
            max-width: 340px;
            width: 90%;
            position: relative;
            overflow: hidden;
        }

        .ws-celebrate-lottie {
            width: 220px;
            height: 220px;
            margin: 0 auto -16px;
        }

        .ws-celebrate-title {
            font-size: 26px;
            font-weight: 800;
            color: #1a1209;
            margin-bottom: 6px;
        }

        .ws-celebrate-title span {
            color: #e59544;
        }

        .ws-celebrate-sub {
            font-size: 13px;
            color: #7c6a52;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .ws-celebrate-btns {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .ws-celebrate-btn {
            padding: 10px 22px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all .18s ease;
            letter-spacing: .04em;
        }

        .ws-celebrate-btn-primary {
            background: linear-gradient(135deg, #e59544, #c4732a);
            color: #fff;
            box-shadow: 0 3px 12px rgba(229, 149, 68, .4);
        }

        .ws-celebrate-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(229, 149, 68, .5);
        }

        .ws-celebrate-btn-secondary {
            background: rgba(255, 255, 255, .82);
            color: #c4732a;
            border: 1.5px solid rgba(229, 149, 68, .3);
        }

        .ws-celebrate-btn-secondary:hover {
            background: #fff8f0;
            border-color: #e59544;
        }

        #ws-celebrate-close:hover {
            color: #e59544;
        }

        /* View all btn  */
        .ws-sidebar-wrap {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .ws-view-all-wrap {
            text-align: center;
        }

        .ws-view-all-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: 999px;
            background: #fff3e0;
            color: #c4732a;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            border: 1.5px solid rgba(229, 149, 68, .35);
            transition: all .18s ease;
        }

        .ws-view-all-btn:hover {
            background: #ffe0b2;
            border-color: #e59544;
            color: #c4732a !important;
        }