/* ============================================================
   Elementor Word Search Game — Brand-Default Stylesheet
   Brand: MyWordleGame  |  Version: 2.0.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;1,9..144,700&family=Syne:wght@600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
    --mwg-ink:          #0d0f14;
    --mwg-ink-2:        #141720;
    --mwg-ink-3:        #1c2030;
    --mwg-border:       #252a38;
    --mwg-cream:        #f0ece3;
    --mwg-cream-2:      #b8b2a8;
    --mwg-cream-3:      #6e6860;
    --mwg-volt:         #d4f54a;
    --mwg-volt-dim:     #aecf2e;
    --mwg-sky:          #5ba8f0;
    --mwg-coral:        #f07060;
    --mwg-forest:       #2a5c3f;
    --mwg-forest-lite:  #a5f0bc;
    --mwg-ember:        #5c420e;
    --mwg-ember-lite:   #f0d070;
    --mwg-absent:       #2a2e3a;

    --cursor-color:      #d4f54a;
    --cursor-ring-color: rgba(212,245,74,0.45);
    --cursor-size:       12px;
    --cursor-ring-size:  38px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── CUSTOM CURSOR ── */
.custom-cursor-enabled,
.custom-cursor-enabled * { cursor: none !important; }

.ews-cursor {
    width: var(--cursor-size, 12px);
    height: var(--cursor-size, 12px);
    background: var(--cursor-color, #d4f54a);
    border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%);
    transition: width 0.18s var(--ease-spring), height 0.18s var(--ease-spring), background 0.2s, opacity 0.25s;
    mix-blend-mode: difference;
    will-change: left, top;
}
.ews-cursor-ring {
    width: var(--cursor-ring-size, 38px);
    height: var(--cursor-ring-size, 38px);
    border: 1.5px solid var(--cursor-ring-color, rgba(212,245,74,0.45));
    border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%);
    transition: width 0.28s var(--ease-out-expo), height 0.28s var(--ease-out-expo), opacity 0.28s;
    will-change: left, top;
}
.ews-cursor.expanded       { width: calc(var(--cursor-size, 12px) * 2.2); height: calc(var(--cursor-size, 12px) * 2.2); }
.ews-cursor-ring.expanded  { width: calc(var(--cursor-ring-size, 38px) * 1.65); height: calc(var(--cursor-ring-size, 38px) * 1.65); opacity: 0.45; }
.ews-cursor.clicking       { transform: translate(-50%,-50%) scale(0.65); }

@media (hover: none) and (pointer: coarse) {
    .custom-cursor-enabled, .custom-cursor-enabled * { cursor: auto !important; }
    .ews-cursor, .ews-cursor-ring { display: none !important; }
}

/* ── GAME WRAPPER ── */
.word-search-game-wrapper {
    font-family: 'Syne', sans-serif;
    background: var(--mwg-ink);
    color: var(--mwg-cream);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mwg-border);
    box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.word-search-game-wrapper::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.012) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.012) 1px,transparent 1px);
    background-size: 60px 60px;
    animation: gridPan 25s linear infinite;
    pointer-events: none; z-index: 0; border-radius: inherit;
}
@keyframes gridPan { from { background-position:0 0; } to { background-position:60px 60px; } }
.word-search-game-wrapper > * { position: relative; z-index: 1; }

/* ── GRID CONTAINER ── */
.word-search-grid-container {
    overflow-x: auto; margin-bottom: 20px; position: relative;
    scrollbar-width: thin; scrollbar-color: var(--mwg-border) transparent;
}
.word-search-grid-container::-webkit-scrollbar { height: 4px; }
.word-search-grid-container::-webkit-scrollbar-thumb { background: var(--mwg-border); border-radius: 4px; }

/* ── GRID TABLE ── */
.word-search-grid {
    border-collapse: collapse; margin: 0 auto;
    background: var(--mwg-ink-2);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--mwg-border), 0 16px 48px rgba(0,0,0,0.35);
    animation: gridAppear 0.6s var(--ease-out-expo) both;
}
@keyframes gridAppear {
    from { opacity:0; transform:scale(0.96) translateY(12px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}

.word-search-grid td {
    width: 40px; height: 40px;
    text-align: center; vertical-align: middle;
    border: 1px solid var(--mwg-border);
    font-family: 'Fraunces', serif;
    font-size: 18px; font-weight: 700;
    color: var(--mwg-cream);
    cursor: none; user-select: none;
    transition: background-color 0.15s, color 0.15s, transform 0.12s var(--ease-spring), box-shadow 0.15s;
    background-color: var(--mwg-ink-2);
    position: relative;
}
.word-search-grid td:hover:not(.found) {
    background-color: var(--mwg-ink-3);
    color: var(--mwg-volt);
    transform: scale(1.08); z-index: 2;
    box-shadow: 0 0 12px rgba(212,245,74,0.15);
}
.word-search-grid td.selected-start {
    background-color: var(--mwg-volt) !important;
    color: var(--mwg-ink) !important;
    transform: scale(1.12); z-index: 3;
    box-shadow: 0 0 20px rgba(212,245,74,0.4);
    animation: pulseDot 0.4s var(--ease-spring);
}
@keyframes pulseDot { 0% { transform:scale(1.3); } 60% { transform:scale(1.05); } 100% { transform:scale(1.12); } }

.word-search-grid td.selected-path {
    background-color: rgba(212,245,74,0.18) !important;
    color: var(--mwg-volt) !important;
    box-shadow: inset 0 0 0 1px rgba(212,245,74,0.3);
}
.word-search-grid td.found {
    background-color: var(--mwg-forest) !important;
    color: var(--mwg-forest-lite) !important;
    cursor: default;
    animation: cellFound 0.45s var(--ease-spring) both;
}
@keyframes cellFound { 0% { transform:scale(1.25) rotate(3deg); opacity:0.4; } 60% { transform:scale(0.95); } 100% { transform:scale(1); opacity:1; } }

/* ── WORD LIST ── */
.word-list { margin-top: 8px; }
.word-list ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }

.word-list li {
    background: var(--mwg-ink-3);
    border: 1px solid var(--mwg-border);
    color: var(--mwg-cream);
    padding: 8px 16px; border-radius: 999px;
    cursor: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    animation: wordChipIn 0.5s var(--ease-spring) both;
}
@keyframes wordChipIn { from { opacity:0; transform:translateY(10px) scale(0.9); } to { opacity:1; transform:translateY(0) scale(1); } }

.word-list li:hover:not(.found) {
    background: var(--mwg-ink-2); border-color: var(--mwg-volt); color: var(--mwg-volt);
    transform: translateY(-2px); box-shadow: 0 4px 16px rgba(212,245,74,0.12);
}
.word-list li.found {
    background: var(--mwg-forest); border-color: var(--mwg-forest);
    color: var(--mwg-forest-lite); text-decoration: line-through;
    cursor: default;
    animation: chipFound 0.5s var(--ease-spring) both;
}
@keyframes chipFound { 0% { transform:scale(1.15); } 60% { transform:scale(0.95); } 100% { transform:scale(1); } }

.word-list li.active-word {
    background: rgba(212,245,74,0.12); border-color: var(--mwg-volt); color: var(--mwg-volt);
    box-shadow: 0 0 0 2px rgba(212,245,74,0.25);
}

/* ── MEDIA DISPLAY ── */
.word-media-display {
    text-align: center;
    background: var(--mwg-ink-2);
    border: 1px solid var(--mwg-border);
    border-radius: 16px; padding: 28px 24px;
    transition: all 0.35s var(--ease-out-expo);
    position: relative; overflow: hidden;
}
.word-media-display::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--mwg-volt), transparent);
    opacity: 0; transition: opacity 0.4s;
}
.word-media-display.has-content::before { opacity: 1; }

.word-media-display img {
    max-width: 100%; border-radius: 10px; margin-bottom: 18px;
    max-height: 200px; object-fit: contain;
    border: 1px solid var(--mwg-border);
    animation: imgReveal 0.4s var(--ease-out-expo) both;
}
@keyframes imgReveal { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }

.word-media-display .no-image {
    width: 80px; height: 80px;
    background: var(--mwg-ink-3);
    border: 1px dashed var(--mwg-border); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 18px; color: var(--mwg-cream-3);
}
.word-media-display h4 {
    font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700;
    color: var(--mwg-cream); margin: 0 0 10px;
    animation: titleSlideUp 0.35s var(--ease-out-expo) both;
}
@keyframes titleSlideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.word-media-display p { font-size: 0.9rem; color: var(--mwg-cream-2); line-height: 1.7; }

/* ── MESSAGES ── */
.ews-message {
    text-align: center; padding: 12px 20px; border-radius: 10px;
    margin-top: 16px;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    display: none; border: 1px solid transparent;
    animation: msgPop 0.35s var(--ease-spring) both;
}
@keyframes msgPop { from { opacity:0; transform:translateY(-10px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }

.ews-message.correct  { background:rgba(42,92,63,0.35); border-color:var(--mwg-forest); color:var(--mwg-forest-lite); }
.ews-message.wrong    { background:rgba(240,112,96,0.15); border-color:rgba(240,112,96,0.4); color:var(--mwg-coral); }
.ews-message.complete { background:rgba(212,245,74,0.1); border-color:rgba(212,245,74,0.4); color:var(--mwg-volt); font-size:0.88rem; animation: completeGlow 0.6s var(--ease-spring) both; }
@keyframes completeGlow { 0% { transform:scale(1.06); box-shadow:0 0 0 0 rgba(212,245,74,0.4); } 60% { box-shadow:0 0 30px 8px rgba(212,245,74,0.08); } 100% { transform:scale(1); box-shadow:0 0 0 0 transparent; } }

/* ── PROGRESS BAR ── */
.ews-progress-wrap { height: 3px; background: var(--mwg-border); border-radius:999px; margin-bottom:20px; overflow:hidden; }
.ews-progress-bar  { height:100%; background:linear-gradient(90deg,var(--mwg-volt),var(--mwg-sky)); border-radius:999px; transition:width 0.6s var(--ease-out-expo); width:0%; }

/* ── SCORE ── */
.ews-score {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px; padding:12px 18px;
    background:var(--mwg-ink-3); border:1px solid var(--mwg-border); border-radius:12px;
}
.ews-score-label { font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--mwg-cream-3); }
.ews-score-value { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; color:var(--mwg-volt); line-height:1; }
.ews-score-value.bump { animation:scoreBump 0.4s var(--ease-spring); }
@keyframes scoreBump { 0% { transform:scale(1.45); } 100% { transform:scale(1); } }

/* ── WIN OVERLAY ── */
.ews-win-overlay {
    position:absolute; inset:0;
    background:rgba(13,15,20,0.93); backdrop-filter:blur(10px);
    z-index:50; display:none;
    align-items:center; justify-content:center;
    border-radius:inherit;
}
.ews-win-overlay.show { display:flex; animation:overlayIn 0.4s var(--ease-out-expo) both; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }

.ews-win-box { text-align:center; padding:48px 40px; animation:winBoxIn 0.5s 0.1s var(--ease-spring) both; }
@keyframes winBoxIn { from { transform:scale(0.85) translateY(20px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }

.ews-win-emoji { font-size:4rem; display:block; margin-bottom:16px; animation:emojiSpin 0.6s 0.2s var(--ease-spring) both; }
@keyframes emojiSpin { from { transform:scale(0) rotate(-180deg); } to { transform:scale(1) rotate(0); } }

.ews-win-title { font-family:'Fraunces',serif; font-size:2.5rem; font-weight:700; color:var(--mwg-volt); margin-bottom:10px; }
.ews-win-sub   { font-family:'DM Mono',monospace; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--mwg-cream-2); margin-bottom:28px; }
.ews-win-btn   {
    background:var(--mwg-volt); color:var(--mwg-ink);
    border:none; padding:13px 28px; border-radius:999px;
    font-family:'Syne',sans-serif; font-size:0.82rem; font-weight:800;
    letter-spacing:0.1em; text-transform:uppercase;
    cursor:none; transition:background 0.2s, transform 0.15s var(--ease-spring);
}
.ews-win-btn:hover { background:var(--mwg-volt-dim); transform:translateY(-3px); }

/* ── CONFETTI ── */
.ews-confetti-piece {
    position:absolute; width:8px; height:8px; border-radius:2px;
    pointer-events:none; z-index:60;
    animation:confettiFall linear forwards;
}
@keyframes confettiFall { 0% { transform:translateY(-20px) rotate(0deg); opacity:1; } 100% { transform:translateY(500px) rotate(720deg); opacity:0; } }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .word-search-game-wrapper { padding:20px 16px; border-radius:14px; }
    .word-search-grid td { width:30px; height:30px; font-size:13px; }
    .word-list li { font-size:0.7rem; padding:6px 12px; }
    .word-media-display h4 { font-size:1.2rem; }
    .ews-win-title { font-size:1.8rem; }
}
@media (max-width:480px) {
    .word-search-grid td { width:26px; height:26px; font-size:11px; }
}