/* LitFlug Gem Vault: original art, responsive matching board, reduced-motion support. */
.gem-intro,.gem-game,.gem-finale{color:#eefcf8;background:#081b35;border:3px solid #277284;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px #062d5170}
.gem-intro-image{height:clamp(190px,35vw,390px);overflow:hidden;position:relative}
.gem-intro-image:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#081b35)}
.gem-intro-image img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
.gem-intro-copy{padding:0 clamp(24px,5vw,60px) 50px;margin-top:-55px;position:relative;z-index:1}
.gem-intro h1,.gem-finale h1{color:#fff;font-size:clamp(42px,6vw,76px);line-height:1.03;margin:12px 0 20px;text-shadow:0 8px 24px #00152e}
.gem-intro p:not(.game-kicker){max-width:820px;font-size:clamp(18px,2vw,23px);line-height:1.5;color:#dcf4ee}
.gem-intro .game-kicker,.gem-finale .game-kicker,.gem-modal .game-kicker{color:#b1f0e4}
.gem-pills,.gem-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:25px}
.gem-pills span{padding:8px 14px;border:1px solid #86d8d088;border-radius:100px;background:#9ff1dc1b;color:#d7f8f0;font-weight:700}
.gem-actions .quiet-button{background:transparent;color:#e9fff7;border-color:#9be8de}
.gem-header{position:relative;min-height:190px;display:flex;align-items:end;overflow:hidden;background:#0b3050}
.gem-header-art{position:absolute;inset:0;background:linear-gradient(90deg,#081b35eb,#081b354d),url('/assets/games/file-vault/vault-hero.webp') center 49%/cover}
.gem-header-content{position:relative;z-index:1;padding:27px clamp(18px,4vw,40px)}
.gem-header h1{font-size:clamp(32px,4vw,52px);margin:6px 0;color:#fff;line-height:1}
.gem-header h1 small{font-size:.44em;color:#a1e9dc}
.gem-header p{margin:5px 0;color:#e5f5f1;font-size:18px}
.gem-header .game-kicker{color:#a6f4e8}
.gem-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 130px 130px;gap:12px;padding:18px clamp(14px,3vw,30px);background:#0d2b48}
.gem-target,.gem-stat{display:flex;align-items:center;gap:12px;min-height:90px;padding:10px 14px;border:1px solid #65a6ae66;border-radius:16px;background:linear-gradient(135deg,#1b4964,#0b2743);box-shadow:inset 0 1px #fff2}
.gem-target{border-color:var(--target)}
.gem-target img{width:65px;height:65px;object-fit:contain;filter:drop-shadow(0 0 12px var(--target))}
.gem-target div{display:flex;flex-direction:column;min-width:0}
.gem-target span,.gem-stat span{font-size:11px;letter-spacing:.13em;color:#b6e6de;font-weight:800}
.gem-target strong{font-size:20px;color:#fff}
.gem-target small{font-size:12px;color:#cae8e5}
.gem-target b{margin-left:auto;white-space:nowrap;color:#ffe8a4;font-size:21px}
.gem-stat{flex-direction:column;justify-content:center;gap:2px;text-align:center}
.gem-stat strong{font-size:29px;color:#ffe4a7}
.gem-play-area{display:grid;grid-template-columns:minmax(0,590px) minmax(210px,1fr);gap:22px;align-items:start;padding:26px clamp(12px,3vw,30px);background:radial-gradient(circle at 44% 15%,#1b5872,#071d37 62%)}
.gem-board-frame{position:relative;padding:10px;border:2px solid #69d9d4;border-radius:22px;background:linear-gradient(145deg,#205771,#08213a);box-shadow:inset 0 0 22px #00101d,0 0 25px #75dad465,0 18px 36px #001323bb}
.gem-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;aspect-ratio:1;padding:5px;border:2px solid #235570;border-radius:15px;background:radial-gradient(#204d67,#08243e);box-shadow:inset 0 0 35px #001322}
.gem-cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:2px;border:1px solid #88cfcc23;border-radius:10px;background:linear-gradient(145deg,#2b65804d,#071c31b0);cursor:pointer;touch-action:none;user-select:none;transition:transform .16s,background .16s,box-shadow .16s}
.gem-cell:hover,.gem-cell:focus-visible{transform:scale(1.09);z-index:2;background:#35788f;outline:2px solid #fff4ad;outline-offset:-2px}
.gem-cell.selected{z-index:3;background:#478b96;box-shadow:0 0 0 3px #fff4b3,0 0 25px #fff4a5}
.gem-cell img{display:block;width:95%;height:95%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 6px #00162e);animation:gem-breathe 3s ease-in-out infinite}
.gem-cell:nth-child(4n) img{animation-delay:-1s}.gem-cell:nth-child(5n) img{animation-delay:-2s}
.gem-cell span{position:absolute;bottom:1px;right:3px;padding:1px 3px;border-radius:4px;background:#071b36dc;color:#fff6d7;font-size:clamp(7px,.8vw,10px);font-weight:900;letter-spacing:.02em;pointer-events:none}
.gem-cell.matched img,.gem-cell.bursting img{animation:gem-pop .35s ease-in forwards;filter:drop-shadow(0 0 18px #fff)}
.gem-cell.falling img{animation:gem-drop .32s ease-out both}
.gem-cell.invalid{animation:gem-shake .35s}.gem-cell.hint{animation:gem-hint .8s ease-in-out infinite}
.gem-cell.swapping img{transform:scale(1.13)}
.gem-fx{position:absolute;inset:10px;pointer-events:none;overflow:hidden}
.gem-spark{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 14px currentColor;animation:spark-fly .7s ease-out forwards}
.gem-cascade{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:clamp(26px,5vw,45px);color:#fff0a2;text-shadow:0 0 20px #ffc04e,0 3px 0 #6c3d1b;animation:cascade-word .7s ease-out forwards}
.gem-side{display:flex;flex-direction:column;gap:15px}
.gem-energy,.gem-tip{border:1px solid #78c4c089;border-radius:18px;padding:18px;background:linear-gradient(145deg,#1c5069,#0a2a46);box-shadow:inset 0 1px #fff2}
.gem-energy-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;letter-spacing:.08em;color:#baf2e9}
.gem-energy-head strong{color:#ffe19a}
.gem-energy-track{height:16px;margin:14px 0;border:1px solid #69b1b6;border-radius:20px;background:#071e36;overflow:hidden;box-shadow:inset 0 3px 6px #0008}
.gem-energy-track i{display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#64dccb,#ffe08a,#ffad62);box-shadow:0 0 16px #ffdc8a;transition:width .3s}
#gem-burst{width:100%;min-height:48px;border:2px solid #ffdf86;border-radius:12px;background:linear-gradient(#ffe79a,#f6a95d);color:#163650;font:800 15px S20Text,sans-serif;cursor:pointer;box-shadow:0 6px 0 #8a5137,0 0 24px #ffcb80}
#gem-burst:disabled{filter:grayscale(.7);opacity:.5;cursor:not-allowed;box-shadow:none}
.gem-energy p,.gem-tip p{color:#d8eeea;font-size:14px;line-height:1.45;margin:12px 0 0}
.gem-tip span{font-size:12px;letter-spacing:.13em;color:#ffe1a4;font-weight:800}
.gem-controls{display:grid;gap:8px}
.gem-controls button,.gem-footer button{min-height:43px;border:1px solid #79cfc9;border-radius:10px;background:#164b63;color:#ecfff8;font:700 14px S20Text,sans-serif;cursor:pointer}
.gem-controls button:hover,.gem-footer button:hover{background:#24768a}
.gem-message{min-height:52px;margin:0;padding:10px 18px;text-align:center;color:#bff4e9;font-size:18px;font-weight:700;background:#0a2943}
.gem-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 25px 22px;background:#081d35}
.gem-footer button{padding:7px 14px}.gem-footer a{color:#c4f5e8}
.gem-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#031525df;backdrop-filter:blur(9px);animation:overlay-in .4s ease-out}
.gem-game{position:relative}
.gem-modal{position:relative;width:min(100%,480px);padding:28px;text-align:center;border:2px solid #ffde98;border-radius:25px;background:radial-gradient(circle at 50% 0,#27798a,#0b2949 75%);box-shadow:0 0 75px #ffcf8170,0 20px 60px #001225}
.gem-modal-stars{font-size:33px;color:#ffe4a1;letter-spacing:20px;animation:stars-spin 2s ease-in-out infinite}
.gem-modal img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 22px #fff3a4);animation:gem-breathe 2s ease-in-out infinite}
.gem-modal h2{color:#fff;font-size:clamp(28px,4vw,42px);margin:8px 0}
.gem-modal p:not(.game-kicker){font-size:18px;line-height:1.4}
.gem-modal-tip{padding:12px;border:1px solid #9cddd4;border-radius:12px;background:#c6f5dd15;color:#e7fff6;font-size:15px}
.gem-modal-score{display:block;margin:17px;color:#ffe4a1;font-size:20px}
.gem-modal .game-button{min-width:220px}
.gem-finale{text-align:center;padding:clamp(50px,8vw,100px) 25px;background:radial-gradient(circle at 50% 0,#2a7688,#081c36 65%)}
.gem-finale>div:first-child{font-size:100px;color:#ffe5a0;animation:gem-breathe 2s infinite}
.gem-finale p:not(.game-kicker){font-size:21px;max-width:660px;margin:15px auto}
.gem-finale strong{display:block;font-size:35px;color:#ffe4a0}
.gem-finale .gem-actions{justify-content:center}
@keyframes gem-breathe{50%{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 5px 13px #88e8f788)}}
@keyframes gem-pop{to{transform:scale(1.7) rotate(18deg);opacity:0}}
@keyframes gem-drop{from{transform:translateY(-25px) scale(.7);opacity:.1}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes gem-shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@keyframes gem-hint{50%{box-shadow:0 0 0 4px #ffe8a4,0 0 26px #ffe8a4;transform:scale(1.08)}}
@keyframes spark-fly{to{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}}
@keyframes cascade-word{to{transform:translate(-50%,-100%);opacity:0}}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes stars-spin{50%{transform:scale(1.15) rotate(4deg)}}
@media(max-width:830px){.gem-play-area{grid-template-columns:1fr}.gem-side{display:grid;grid-template-columns:1fr 1fr}.gem-controls{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.gem-dashboard{grid-template-columns:minmax(0,1fr) 105px 105px}}
@media(max-width:600px){.gem-intro-copy{margin-top:-35px;padding:0 20px 32px}.gem-intro-image{height:220px}.gem-dashboard{grid-template-columns:minmax(0,1fr) 78px 78px;gap:5px;padding:9px}.gem-target,.gem-stat{min-height:73px;padding:5px;gap:3px;border-radius:10px}.gem-target img{width:36px;height:36px}.gem-target strong{font-size:13px}.gem-target span,.gem-stat span{font-size:8px}.gem-target small{font-size:8px}.gem-target b{font-size:12px}.gem-stat strong{font-size:20px}.gem-play-area{gap:14px;padding:11px}.gem-board-frame{padding:5px;border-radius:13px}.gem-board{gap:2px;padding:2px;border-radius:8px}.gem-cell{border-radius:5px;padding:0}.gem-cell span{font-size:7px;right:1px;bottom:0}.gem-side{grid-template-columns:1fr}.gem-controls{grid-column:auto;grid-template-columns:repeat(2,1fr)}.gem-controls button:last-child{grid-column:1/-1}.gem-energy,.gem-tip{padding:13px}.gem-message{font-size:15px}.gem-modal{padding:18px}.gem-modal p:not(.game-kicker){font-size:16px}}
@media(prefers-reduced-motion:reduce){.gem-cell,.gem-cell img,.gem-spark,.gem-cascade,.gem-modal-stars,.gem-modal img,.gem-finale>div:first-child{animation:none!important;transition:none!important}}

.gem-story{color:#ffe5a1;font-weight:800}
/* Course route: practical decisions grant a real advantage on the matching board. */
.gem-route-overlay{position:absolute;inset:0;z-index:21;display:grid;place-items:start center;padding:clamp(20px,5vw,45px) 16px;background:#04162be9;backdrop-filter:blur(7px);overflow:auto;animation:overlay-in .3s ease-out}
.gem-route-modal{width:min(100%,850px);margin:auto;padding:clamp(20px,4vw,38px);border:2px solid #78e3d5;border-radius:25px;background:radial-gradient(circle at 50% 0,#215c75,#0b2948 65%);box-shadow:0 0 50px #4dd8ce52,0 25px 65px #001529}
.gem-route-modal .game-kicker{color:#a9f4e8}
.gem-route-modal h2{margin:8px 0 18px;color:#fff;font-size:clamp(28px,4vw,42px)}
.gem-route-scenario{max-width:700px;margin:0 0 25px;color:#f2fff9;font-size:clamp(18px,2.1vw,23px);font-weight:700;line-height:1.45}
.gem-route-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gem-route-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:190px;padding:12px;border:2px solid #6eb3ba;border-radius:17px;background:linear-gradient(145deg,#1d526c,#0a263f);color:#f5fff9;font:800 16px S20Text,sans-serif;text-align:center;cursor:pointer;box-shadow:inset 0 1px #fff3,0 8px 15px #001a31;transition:transform .2s,box-shadow .2s,border-color .2s}
.gem-route-option:hover,.gem-route-option:focus-visible{transform:translateY(-6px);border-color:#ffe5a0;box-shadow:0 0 25px #ffe2a178}
.gem-route-option img{width:105px;height:105px;object-fit:cover;border-radius:12px;mix-blend-mode:screen}
.gem-route-option.correct{border-color:#9cffce;background:#1a765c;box-shadow:0 0 30px #84ffc0a3}
.gem-route-option.missed{border-color:#efaf95;opacity:.55}
.gem-route-option:disabled{cursor:default}
.gem-route-reward{margin:22px 0 0;color:#ffe5a0;font-size:16px;font-weight:800}
.gem-route-result{margin-top:22px;padding:16px;border:1px solid #92e6d2;border-radius:15px;background:#8aeac923;animation:overlay-in .3s ease-out}
.gem-route-result.learn{border-color:#f4b88e;background:#f5b88e21}
.gem-route-result strong{display:block;color:#fff1b7;font-size:19px}
.gem-route-result p{margin:9px 0 15px;color:#ebfff8;font-size:16px;line-height:1.4}
.gem-route-result .game-button{min-width:170px}
@media(max-width:600px){.gem-route-overlay{padding:10px}.gem-route-modal{padding:17px;border-radius:17px}.gem-route-scenario{margin-bottom:14px}.gem-route-options{grid-template-columns:1fr;gap:8px}.gem-route-option{flex-direction:row;min-height:78px;justify-content:flex-start;text-align:left;padding:7px 12px;font-size:14px}.gem-route-option img{width:62px;height:62px;flex:0 0 62px}.gem-route-reward{margin-top:14px;font-size:14px}.gem-route-result{margin-top:14px;padding:12px}.gem-route-result strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.gem-route-option,.gem-route-overlay,.gem-route-result{animation:none!important;transition:none!important}}

.gem-route-symbol{display:grid;place-items:center;width:105px;height:105px;border:2px solid #c7eeec;border-radius:19px;background:radial-gradient(circle,#317e8f,#0b3553);color:#ffe3a1;font-size:40px;font-weight:900;box-shadow:inset 0 0 18px #97f6e855,0 0 18px #5ed6d366}
@media(max-width:600px){.gem-route-symbol{width:62px;height:62px;flex:0 0 62px;font-size:26px}}