*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--purple: #4e297f;--gold: #eeb336;--blue: #1bb0d5;--green: #acc642;--dark-bg: #1e1035;--dark-purple: #2a1a48;--grey: #3a3a3a;--tile-border: #4e297f55;--tile-active: #8a7aaa;--text: #e0e0e0;--text-dim: #8a7aaa;--key-bg: #2a1a48;--key-text: #e0e0e0}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--dark-bg);color:var(--text);display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--dark-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease}#splash.hidden{opacity:0;pointer-events:none}#splash-logo{width:120px;height:120px;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(238,179,54,.3));margin-bottom:24px}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.05)}}#splash h1{font-family:Nunito,sans-serif;font-size:2.4em;font-weight:900;letter-spacing:-1px;background:linear-gradient(135deg,#eeb336,#1bb0d5,#acc642,#4e297f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.splash-brand{height:28px;width:auto;opacity:.5;margin-bottom:24px}.splash-tagline{color:#98b;font-size:.9em;margin-bottom:40px;line-height:1.5}#play-btn{background:linear-gradient(135deg,#eeb336,#e5a020);color:#1e1035;border:none;border-radius:9999px;padding:16px 48px;font-size:18px;font-weight:900;letter-spacing:2px;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #eeb3364d;animation:playPulse 2s ease-in-out infinite;min-width:200px;min-height:48px}#play-btn:hover{transform:scale(1.05);box-shadow:0 6px 30px #eeb33680}@keyframes playPulse{0%,to{box-shadow:0 4px 20px #eeb3364d}50%{box-shadow:0 4px 30px #eeb33680}}#header{width:100%;max-width:500px;display:none;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid #4e297f55;flex-shrink:0}#header .left,#header .right{display:flex;gap:8px;align-items:center;width:80px}#header .right{justify-content:flex-end}#header h1{font-family:Nunito,sans-serif;font-size:28px;font-weight:900;letter-spacing:-.5px;text-align:center;flex:1;background:linear-gradient(135deg,#4e297f,#eeb336,#1bb0d5,#acc642);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}#header h1 .header-logo{width:28px;height:28px}.icon-btn{background:none;border:none;color:var(--text);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:20px;min-width:48px;min-height:48px}.icon-btn:hover{background:#ffffff14}#game{display:none;flex-direction:column;align-items:center;flex:1;width:100%;max-width:500px;overflow:hidden}#board-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:8px;min-height:0}#board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;width:min(350px,calc(100vw - 40px));aspect-ratio:5/6;max-height:min(420px,calc(100vh - 320px))}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.tile{display:flex;align-items:center;justify-content:center;font-size:clamp(20px,5vw,32px);font-weight:700;text-transform:uppercase;border:2px solid var(--tile-border);border-radius:4px;aspect-ratio:1;transition:border-color .1s;position:relative}.tile.active{border-color:var(--tile-active)}.tile.filled{border-color:var(--text-dim);animation:pop .1s ease}@keyframes pop{50%{transform:scale(1.1)}}.tile.flip{animation:flip .5s ease forwards}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.tile.correct{background:var(--green);border-color:var(--green);color:#fff}.tile.present{background:var(--gold);border-color:var(--gold);color:#fff}.tile.absent{background:var(--grey);border-color:var(--grey);color:#fff}.tile.bounce{animation:bounce .5s ease}@keyframes bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-20px)}60%{transform:translateY(-8px)}}.row.shake{animation:shake .4s ease}@keyframes shake{10%,90%{transform:translate(-4px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}#keyboard{width:100%;max-width:500px;padding:4px 4px 8px;flex-shrink:0}.kb-row{display:flex;justify-content:center;gap:5px;margin-bottom:5px}.key{background:var(--key-bg);color:var(--key-text);border:none;border-radius:6px;font-size:clamp(13px,3.5vw,16px);font-weight:700;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;height:58px;min-width:30px;flex:1;max-width:48px;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.key.wide{flex:1.5;max-width:72px;font-size:clamp(11px,2.8vw,14px)}.key.correct{background:var(--green);color:#fff}.key.present{background:var(--gold);color:#fff}.key.absent{background:var(--grey);color:#888}.key:active{opacity:.7;transform:scale(.95)}#toasts{position:fixed;top:60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:500}.toast{background:#f0f0f0;color:#1a1a2e;padding:12px 20px;border-radius:6px;font-weight:600;font-size:14px;animation:fadeInOut 2s ease forwards;pointer-events:none;white-space:nowrap}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}15%,75%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--dark-purple);border:1px solid var(--tile-border);border-radius:12px;padding:24px;width:min(90vw,420px);max-height:85vh;overflow-y:auto;color:var(--text);position:relative}.modal h2{font-size:20px;text-align:center;margin-bottom:16px;letter-spacing:2px}.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-dim);font-size:24px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.help-example{display:flex;gap:4px;margin:8px 0}.help-tile{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;border-radius:4px;border:2px solid var(--tile-border);text-transform:uppercase}.help-tile.correct{background:var(--green);border-color:var(--green);color:#fff}.help-tile.present{background:var(--gold);border-color:var(--gold);color:#fff}.help-tile.absent{background:var(--grey);border-color:var(--grey);color:#fff}.help-text{font-size:14px;color:var(--text-dim);margin-bottom:12px;line-height:1.5}.stat-row{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.stat-box{text-align:center;flex:1}.stat-box .num{font-size:32px;font-weight:700}.stat-box .label{font-size:11px;color:var(--text-dim);text-transform:uppercase}.dist-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.guess-num{width:14px;font-size:13px;text-align:right;color:var(--text-dim)}.dist-bar{background:var(--grey);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:2px;min-width:24px;text-align:right}.dist-bar.highlight{background:var(--green)}#countdown{text-align:center;margin-top:16px;font-size:14px;color:var(--text-dim)}#timer{font-weight:700;font-size:28px;display:block;margin-top:4px;color:var(--text)}#share-section{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--tile-border)}.share-cta{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);text-align:center;margin-bottom:12px}#share-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.share-icon{width:44px;height:44px;border-radius:50%;background:var(--tile-border);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.share-icon:hover{background:var(--green);color:#fff;transform:scale(1.1)}#share-whatsapp:hover{background:#25d366}#share-x:hover{background:#000}#share-facebook:hover{background:#1877f2}#share-threads:hover{background:#000}#share-linkedin:hover{background:#0a66c2}.modal-branding{display:none;text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--tile-border)}.modal-brand-logo{height:20px;width:auto;opacity:.6;transition:opacity .2s}.modal-brand-logo:hover{opacity:1}.modal-brand-text{font-size:11px;color:var(--text-dim);margin-top:4px;letter-spacing:.5px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--tile-border)}.setting-label{font-weight:600}.setting-desc{font-size:12px;color:var(--text-dim);margin-top:2px}.toggle{width:44px;height:24px;border-radius:12px;border:none;background:var(--grey);cursor:pointer;position:relative;transition:background .2s}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}.toggle.on{background:var(--green)}.toggle.on:after{transform:translate(20px)}#footer{text-align:center;padding:16px 0 24px;opacity:.5}.footer-logo{height:24px;width:auto}