/* Từ điển hình ảnh dạng game – resources/views/theme/dictionary/index.blade.php */
.vg{--red:#c8102e;--pill:#e31e36;--deep:#8f1d22;--sun:#ffc93c;--ink:#231f20;--ok:#22b573;--bad:#ff4d5e;
    font-family:inherit;color:var(--ink);position:relative;overflow:hidden}
.vg-sky{min-height:640px;background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.55) 0 60px,transparent 61px),
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.45) 0 80px,transparent 81px),
    linear-gradient(180deg,#bfe8ff 0%,#e8f7ff 55%,#fff5d6 100%)}
.vg-screen{display:none;max-width:960px;margin:0 auto}
.vg-screen.is-active{display:block;animation:vg-in .35s ease}
@keyframes vg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Cấp độ, chủ đề, tìm từ */
.vg-nav{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.vg-levels{display:flex;gap:8px;background:#fff;padding:5px;border-radius:99px;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.vg-levels a{padding:8px 22px;border-radius:99px;font-weight:800;color:var(--red);text-decoration:none}
.vg-levels a.is-active{background:var(--pill);color:#fff;box-shadow:0 3px 0 var(--deep)}
.vg-search{position:relative;flex:0 1 300px}
.vg-search input{width:100%;border:3px solid #fff;border-radius:99px;padding:9px 18px;font-weight:700;outline:none;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.vg-search input:focus{border-color:var(--sun)}
.vg-search-results{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);padding:6px;max-height:320px;overflow:auto}
.vg-search-results a{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;color:var(--ink);text-decoration:none}
.vg-search-results a:hover{background:#fff5d6}
.vg-search-results small{color:#888}
.vg-search-results p{margin:0;padding:8px 12px;color:#888}
.vg-topics{max-width:960px;margin:14px auto 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vg-topics a{background:rgba(255,255,255,.85);border-radius:99px;padding:6px 14px;font-weight:700;font-size:.92rem;color:#333;text-decoration:none;border:2px solid transparent}
.vg-topics a:hover{border-color:var(--sun)}
.vg-topics a small{color:#999;font-weight:700;margin-left:2px}
.vg-topics a.is-active{background:var(--sun);color:var(--deep);box-shadow:0 3px 0 #e0a800}
.vg-topics a.is-active small{color:var(--deep)}
.vg-topics a.is-empty{opacity:.5}
.vg-empty{max-width:640px;margin:0 auto}
.vg-empty .vg-mode-ico{font-size:3rem}

/* Danh sách từ */
.vg-words{padding-top:40px;padding-bottom:40px}
.vg-words-title{text-align:center;font-weight:900;color:var(--red, #c8102e);margin-bottom:24px}
.vg-word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.vg-word{background:#fff;border:2px solid #f0f0f0;border-radius:20px;padding:12px;text-align:center;scroll-margin-top:110px}
.vg-word.is-target{border-color:#ffc93c;box-shadow:0 0 0 4px rgba(255,201,60,.4)}
.vg-word img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.vg-word h3{font-size:1.2rem;font-weight:900;margin:8px 0 2px;color:#231f20}
.vg-word-ipa{margin:0;color:#666;display:flex;align-items:center;justify-content:center;gap:6px}
.vg-say{border:0;background:#e31e36;color:#fff;width:32px;height:32px;border-radius:50%;font-size:.9rem;box-shadow:0 3px 0 #8f1d22}
.vg-say:active{transform:translateY(2px);box-shadow:0 1px 0 #8f1d22}
.vg-word-desc{font-size:.85rem;color:#666;margin:8px 0 0}

/* Màn chọn */
.vg-badge{display:inline-block;background:var(--sun);color:var(--deep);font-weight:800;padding:4px 16px;border-radius:99px;
    letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;box-shadow:0 3px 0 #e0a800}
.vg-title{font-weight:900;font-size:clamp(2rem,6vw,3.2rem);color:var(--red);margin:.4rem 0 .2rem;text-shadow:0 3px 0 #fff}
.vg-title span{color:var(--ink)}
.vg-sub{color:#4a4a4a;margin:0}
.vg-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.vg-mode{--c:#2e9bff;position:relative;border:0;border-radius:24px;background:#fff;padding:22px 18px 18px;text-align:left;
    display:flex;flex-direction:column;gap:4px;box-shadow:0 6px 0 var(--c),0 12px 24px rgba(0,0,0,.08);
    transition:transform .15s,box-shadow .15s;cursor:pointer;border-top:6px solid var(--c)}
.vg-mode:hover{transform:translateY(-3px)}
.vg-mode:active{transform:translateY(4px);box-shadow:0 2px 0 var(--c)}
.vg-mode-ico{font-size:2.4rem;line-height:1}
.vg-mode b{font-size:1.2rem;color:var(--c);filter:brightness(.8)}
.vg-mode small{color:#666}
.vg-stars{position:absolute;top:14px;right:16px;font-size:1.1rem;letter-spacing:2px}
.vg-link{color:var(--red);font-weight:700;text-decoration:none}
.vg-link:hover{text-decoration:underline}

/* HUD */
.vg-hud{display:flex;align-items:center;gap:12px;background:#fff;border-radius:99px;padding:8px 12px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.vg-btn-icon{border:0;background:#f1f1f1;width:38px;height:38px;border-radius:50%;font-weight:700;flex:none}
.vg-progress{flex:1;height:14px;background:#eee;border-radius:99px;overflow:hidden}
.vg-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb703,#22b573);border-radius:99px;transition:width .4s}
.vg-lives{font-size:1.15rem;white-space:nowrap}
.vg-lives .lost{filter:grayscale(1);opacity:.35}
.vg-timer{font-weight:900;color:var(--red);min-width:42px;text-align:center;font-size:1.2rem}
.vg-timer.warn{animation:vg-pulse .5s infinite alternate}
.vg-score{font-weight:900;font-size:1.15rem;white-space:nowrap}
.vg-combo{height:30px;text-align:center;font-weight:900;color:#ff7a00;font-size:1.15rem;margin:6px 0}
.vg-combo.pop{animation:vg-pop .4s}

/* Thẻ câu hỏi */
.vg-card{background:#fff;border-radius:28px;padding:24px;box-shadow:0 8px 0 rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.08)}
.vg-q{text-align:center;font-weight:800;font-size:1.15rem;margin:0 0 14px;color:#555}
.vg-prompt{display:flex;justify-content:center;align-items:center;gap:16px;min-height:60px}
.vg-prompt img{max-height:230px;max-width:100%;border-radius:18px;object-fit:contain}
.vg-play{border:0;width:110px;height:110px;border-radius:50%;background:var(--pill);color:#fff;font-size:3rem;
    box-shadow:0 6px 0 var(--deep);transition:transform .1s}
.vg-play:active{transform:translateY(4px);box-shadow:0 2px 0 var(--deep)}
.vg-play.small{width:56px;height:56px;font-size:1.5rem;box-shadow:0 4px 0 var(--deep)}
.vg-play.playing{animation:vg-pulse .6s infinite alternate}
.vg-options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.vg-opt{border:3px solid #e6e6e6;background:#fff;border-radius:20px;padding:12px;font-weight:800;font-size:1.25rem;
    box-shadow:0 5px 0 #e6e6e6;transition:transform .1s,border-color .15s;min-height:64px;color:var(--ink)}
.vg-opt:hover{border-color:#9fd3ff}
.vg-opt:active{transform:translateY(3px);box-shadow:0 2px 0 #e6e6e6}
.vg-opt img{width:100%;aspect-ratio:1;object-fit:contain;display:block}
.vg-opt.ok{border-color:var(--ok);box-shadow:0 5px 0 var(--ok);background:#eafff4;animation:vg-pop .35s}
.vg-opt.bad{border-color:var(--bad);box-shadow:0 5px 0 var(--bad);background:#fff0f1;animation:vg-shake .35s}
.vg-options.locked .vg-opt{pointer-events:none}
.vg-options.locked .vg-opt:not(.ok):not(.bad){opacity:.5}

/* Đánh vần */
.vg-answer{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.vg-answer:empty{display:none}
.vg-slot{width:46px;height:54px;border-bottom:4px solid #ccc;font-size:1.8rem;font-weight:900;text-align:center;line-height:50px;text-transform:uppercase;cursor:pointer}
.vg-slot.filled{border-color:#2e9bff;color:#2e9bff}
.vg-answer.ok .vg-slot{border-color:var(--ok);color:var(--ok)}
.vg-answer.bad{animation:vg-shake .35s}
.vg-answer.bad .vg-slot{border-color:var(--bad);color:var(--bad)}
.vg-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;grid-column:1/-1}
.vg-tile{width:54px;height:58px;border:0;border-radius:14px;background:var(--sun);font-size:1.6rem;font-weight:900;color:var(--deep);
    text-transform:uppercase;box-shadow:0 5px 0 #e0a800}
.vg-tile:active{transform:translateY(3px);box-shadow:0 2px 0 #e0a800}
.vg-tile.used{visibility:hidden}

/* Kết quả */
.vg-result-stars{font-size:3.4rem;letter-spacing:8px}
.vg-result-stars span{display:inline-block;animation:vg-pop .5s backwards}
.vg-result-stars span:nth-child(2){animation-delay:.2s}
.vg-result-stars span:nth-child(3){animation-delay:.4s}
.vg-result-stars .off{filter:grayscale(1);opacity:.3}
.vg-result-title{font-weight:900;color:var(--red);margin:.5rem 0 .2rem}
.vg-result-score{font-size:1.15rem;color:#555}
.vg-review{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.vg-review:not(:empty)::before{content:"Ôn lại các từ còn sai:";width:100%;font-weight:700;color:#555}
.vg-chip{border:0;display:flex;align-items:center;gap:8px;background:#fff0f1;border-radius:99px;padding:4px 14px 4px 4px;font-weight:800}
.vg-chip img{width:40px;height:40px;object-fit:contain;border-radius:50%;background:#fff}
.vg-btn{border:0;border-radius:99px;padding:12px 32px;font-weight:900;font-size:1.1rem;background:var(--pill);color:#fff;box-shadow:0 5px 0 var(--deep)}
.vg-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--deep)}
.vg-btn-ghost{background:#fff;color:var(--red);box-shadow:0 5px 0 #e6e6e6;border:2px solid #eee}

/* Bee Quest */
.vg-mode-wide{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;
    background:linear-gradient(90deg,#fff 0%,#fff8e0 100%)}
.vg-mode-wide small{flex-basis:100%;padding-left:calc(2.4rem + 14px);margin-top:-6px}
.vg-bee-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px}
.vg-bee-word{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900;color:var(--deep);background:#fff;border-radius:16px;
    padding:4px 22px;min-width:160px;text-align:center;box-shadow:0 4px 0 #ffd76a}
.vg-bee-word:empty::before{content:"…";color:#bbb}
.vg-bee-stage{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.1);
    touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;background:#8fd3ff}
.vg-bee-stage canvas{display:block;width:100%;height:auto;aspect-ratio:8/5}
.vg-bee-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;padding:20px;text-align:center;background:rgba(255,255,255,.55);backdrop-filter:blur(2px)}
.vg-bee-overlay[hidden]{display:none}
.vg-bee-overlay b{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;color:var(--red);text-shadow:0 3px 0 #fff}
.vg-bee-overlay p{max-width:440px;font-weight:700;color:#333;margin:0 0 8px}

.vg-diff{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.vg-diff button{border:3px solid #fff;background:#fff;border-radius:18px;padding:10px 14px;width:150px;display:flex;flex-direction:column;
    align-items:center;gap:2px;box-shadow:0 5px 0 rgba(0,0,0,.12);transition:transform .1s}
.vg-diff button:hover{transform:translateY(-2px)}
.vg-diff button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.vg-diff button.is-active{border-color:var(--sun);box-shadow:0 5px 0 #e0a800}
.vg-diff span{font-size:1.8rem;line-height:1}
.vg-diff b{font-size:1.25rem;font-weight:900;color:var(--red);text-shadow:none}
.vg-diff small{font-size:.78rem;color:#666;line-height:1.25}
.vg-diff i{font-style:normal;font-size:.85rem;min-height:1.2em}

/* Pháo giấy */
.vg-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vg-confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:vg-fall linear forwards}
@keyframes vg-fall{to{transform:translateY(900px) rotate(720deg);opacity:.2}}
@keyframes vg-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes vg-shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes vg-pulse{to{transform:scale(1.08)}}

@media (min-width:768px){
    .vg-modes{grid-template-columns:repeat(4,1fr)}
    .vg-options.cols-4{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:575px){
    .vg-bee-overlay{padding:10px;gap:4px}
    .vg-bee-overlay p{display:none}
    .vg-diff{gap:6px}
    .vg-diff button{width:31%;padding:6px 4px;border-radius:14px}
    .vg-diff span{font-size:1.3rem}
    .vg-diff b{font-size:1rem}
    .vg-diff small{display:none}
    .vg-nav{justify-content:center}
    .vg-search{flex-basis:100%}
    .vg-topics{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
    .vg-topics a{white-space:nowrap}
    .vg-word-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .vg-card{padding:16px;border-radius:22px}
    .vg-modes{gap:12px}
    .vg-mode{padding:16px 12px 14px}
    .vg-mode b{font-size:1rem}
    .vg-mode small{font-size:.8rem}
    .vg-hud{gap:8px;padding:6px 8px}
    .vg-lives{font-size:.95rem}
    .vg-opt{font-size:1.05rem}
    .vg-slot{width:34px;height:46px;font-size:1.4rem;line-height:44px}
    .vg-tile{width:44px;height:50px;font-size:1.3rem}
    .vg-prompt img{max-height:180px}
}
@media (prefers-reduced-motion:reduce){.vg *{animation:none!important;transition:none!important}}