:root{
  --bg:#f5f5f0;--surface:#fff;--border:#d0d0c8;
  --text:#1a1a1a;--muted:#666;--subtle:#999;
  --accent:#e53935;--accent2:#ffde00;
  --green:#22c55e;--green-bg:#dcfce7;--green-dark:#16a34a;
  --blue:#2563eb;--purple:#7c3aed;--orange:#f97316;--red:#dc2626;
  --cell-empty:#f0efe9;--cell-hover:#e8e7df;--cell-active:#fff8cc;
  --r:8px;--r-lg:14px;
  --sh:0 2px 8px rgba(0,0,0,.10);--sh-lg:0 12px 40px rgba(0,0,0,.22);
  --font:'Trebuchet MS',Verdana,'Segoe UI',Tahoma,Geneva,sans-serif;
  --nav:52px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.4;min-height:100vh;padding-top:var(--nav)}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none}
a{color:inherit;text-decoration:none}

/* NAV */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:900;background:var(--surface);border-bottom:2px solid var(--accent);display:flex;align-items:center;justify-content:space-between;padding:0 14px;box-shadow:0 2px 6px rgba(0,0,0,.07)}
.navbar-logo{height:30px;width:auto}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-icon-btn{background:none;padding:5px;display:flex;align-items:center;opacity:.7;transition:opacity .2s;border:none;cursor:pointer}
.nav-icon-btn:hover{opacity:1}
.nav-icon-btn svg{width:26px;height:26px;fill:var(--text)}

/* LAYOUT */
.app{max-width:540px;margin:0 auto;padding:10px 10px 80px}

/* GRID */
.grid-container{position:relative;width:100%;margin-top:6px}
.grid{
  display:grid;
  grid-template-columns:72px repeat(3,1fr);
  grid-template-rows:72px repeat(3,1fr);
  gap:2px;background:var(--border);
  border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1/1;max-width:480px;margin:0 auto
}
.header,.row-header{
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.75rem;text-align:center;padding:3px;line-height:1.2
}
.header:first-child{background:var(--bg)}

/* CELLS */
.box{
  position:relative;background:var(--cell-empty);cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:background .15s,transform .1s,box-shadow .15s;font-size:.9rem;font-weight:700
}
.box:hover{background:var(--cell-hover);transform:scale(1.03);z-index:2}
.box.jss_active{background:var(--cell-active);box-shadow:0 0 0 3px var(--accent2) inset}
.box[data-active="1"]{cursor:default}
.box[data-active="1"]:hover{transform:none;box-shadow:none}
.player-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.player-image-container{position:absolute;inset:0}
.player-name-container{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.58);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:3px 3px;z-index:10
}
.player-name{color:#fff;font-size:.6rem;font-weight:700;text-align:center;line-height:1.2;white-space:normal;word-break:break-word}

/* WIN GLOW */
.grid.win-glow{background:var(--green)!important;border:3px solid var(--green)!important;border-radius:var(--r-lg)!important;box-shadow:0 0 32px rgba(34,197,94,.5)!important;transition:all .6s}

/* STATS GRID */
.stats-grid{
  display:grid;
  grid-template-columns:56px repeat(3,1fr);
  grid-template-rows:56px repeat(3,1fr);
  gap:2px;background:var(--border);
  border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1/1;max-width:340px;margin:0 auto
}
.stats-grid .header,.stats-grid .row-header{font-size:.6rem}
.stats-grid .player-name{font-size:.5rem}
.stats-grid .box{font-size:.7rem;cursor:default}
.stats-grid .box:hover{transform:none}
.stat-pct{position:absolute;top:0;right:0;background:rgba(0,0,0,.78);color:#fff;font-size:.58rem;padding:2px 5px;border-bottom-left-radius:6px;z-index:12;line-height:1.4}

/* TYPE BADGES */
.type-icon{display:inline-block;min-width:54px;padding:0 3px;border-radius:4px;color:#fff;font-size:.57rem;font-weight:700;line-height:1.5rem;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.55);text-transform:uppercase;letter-spacing:.3px}
.gen-icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#1a1a1a;color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.3px}
.gen-icon2{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;color:var(--accent);font-size:.65rem;font-weight:800;text-align:center}
.mega-icon{display:inline-block;min-width:54px;padding:0 3px;border-radius:4px;background:#af4f00;border:2px solid gold;color:#fff;font-size:.6rem;font-weight:700;line-height:1.5rem;text-align:center;text-transform:uppercase}
.type-normal{background:#aa9}.type-fire{background:#f42}.type-water{background:#39f}
.type-electric{background:#fc3}.type-grass{background:#7c5}.type-ice{background:#6cf}
.type-fighting{background:#b54}.type-poison{background:#a59}.type-ground{background:#db5}
.type-flying{background:#89f}.type-psychic{background:#f59}.type-bug{background:#ab2}
.type-rock{background:#ba6}.type-ghost{background:#66b}.type-dragon{background:#76e}
.type-dark{background:#754}.type-steel{background:#aab}.type-fairy{background:#e9e}
.type-curse{background:#698}

/* BUTTONS */
.action-buttons-wrapper{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:9px}
.action-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:var(--r);font-size:.82rem;font-weight:700;color:#fff;box-shadow:var(--sh);transition:all .2s;border:none;cursor:pointer}
.action-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.action-btn:active{transform:translateY(1px)}
.hints-btn{background:var(--purple)}
.stats-btn{background:var(--blue)}
.inlineClass{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:9px}
.ctrl-btn{background:var(--surface);border:1.5px solid var(--border);color:var(--text);padding:7px 13px;border-radius:var(--r);font-size:.8rem;font-weight:600;transition:all .15s;cursor:pointer}
.ctrl-btn:hover{background:var(--bg);border-color:var(--accent)}

/* GUESSES COUNTER */
.remaining-guesses{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:100;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);padding:7px 10px;text-align:center;box-shadow:var(--sh);min-width:56px}
.remaining-guesses .lbl{font-size:.55rem;color:var(--muted);display:block;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
#myCount{font-size:1.75rem;font-weight:900;color:var(--text);display:block;line-height:1}
#myCount.low{color:var(--red)}
#myCount.verylow{color:var(--red);animation:pulse .8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* SEARCH POPUP */
#presentation{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);z-index:9000;align-items:center;justify-content:center}
#presentation.open{display:flex}
.popup-content{background:linear-gradient(160deg,#1a1a2e,#16213e);border:1.5px solid rgba(255,222,0,.35);border-radius:var(--r-lg);width:min(92vw,400px);max-height:78vh;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.65);display:flex;flex-direction:column}
.search-input{background:rgba(255,255,255,.07);border:none;border-bottom:2px solid rgba(255,222,0,.4);color:#fff;font-size:.92rem;font-weight:600;padding:12px 15px 12px 40px;width:100%;outline:none;font-family:var(--font);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='rgba(255,222,0,.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center}
.search-input::placeholder{color:rgba(255,255,255,.38)}
.results{overflow-y:auto;max-height:calc(78vh - 52px);scrollbar-width:thin;scrollbar-color:rgba(255,222,0,.3) transparent}
.results::-webkit-scrollbar{width:4px}
.results::-webkit-scrollbar-thumb{background:rgba(255,222,0,.3);border-radius:3px}
.result-item{display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);color:#e8e8e8;font-size:.84rem;font-weight:600;transition:background .12s,transform .1s;user-select:none}
.result-item:hover:not(.used):not(.wrong-mark){background:rgba(255,222,0,.12);color:var(--accent2);transform:translateX(3px)}
.result-item.used{opacity:.4;cursor:not-allowed;text-decoration:line-through;color:#777}
.result-item.wrong-mark{color:#ff5252!important;background:rgba(255,82,82,.08)!important}
.result-item.wrong-mark::after{content:" ✗";font-weight:800;color:#ff5252}
.suggest-thumb{width:34px;height:34px;object-fit:contain;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}

/* RESULT MODAL */
#myResult{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:9500;align-items:center;justify-content:center}
#myResult.open{display:flex}
#myInner_Result{background:var(--surface);border-radius:var(--r-lg);padding:18px 16px;width:min(96vw,520px);max-height:92vh;overflow-y:auto;position:relative;box-shadow:var(--sh-lg);text-align:center}
#myInner_Result h2{font-size:1.2rem;margin-bottom:6px}
.modal-close{position:absolute;top:8px;right:8px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:.75rem;font-weight:700;padding:4px 9px;border-radius:var(--r);cursor:pointer;z-index:20}
.modal-close:hover{background:var(--border)}

/* share */
.share-section{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:10px}
.share-btn{background:var(--green);border:none;border-radius:18px;color:#fff;font-size:.82rem;font-weight:700;padding:8px 20px;cursor:pointer;transition:all .22s}
.share-btn:hover{background:var(--green-dark)}
.share-btn:active{transform:translateY(1px)}
.social-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.soc-btn{display:inline-flex;align-items:center;gap:5px;border:none;border-radius:18px;padding:7px 15px;font-size:.78rem;font-weight:700;color:#fff;cursor:pointer;transition:all .18s}
.soc-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.soc-twitter{background:#000}
.soc-whatsapp{background:#25d366}
.soc-copy{background:#6366f1}

/* HOW TO PLAY */
#howToPlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:9600;align-items:center;justify-content:center}
#howToPlay.open{display:flex}
#innerHowToPlay{background:var(--surface);border-radius:var(--r-lg);padding:22px 18px;width:min(92vw,400px);max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--sh-lg)}
#innerHowToPlay h2{font-size:1.15rem;margin-bottom:9px;color:var(--accent)}
#innerHowToPlay p{font-size:.87rem;color:var(--muted);margin-bottom:9px;line-height:1.65}
#innerHowToPlay ol{padding-left:17px}
#innerHowToPlay li{font-size:.85rem;margin-bottom:5px;line-height:1.5;color:var(--muted)}
#innerHowToPlay strong{color:var(--text)}
.htp-ok{background:var(--accent);color:#fff;border:none;border-radius:var(--r);padding:8px 22px;font-weight:700;margin-top:14px;cursor:pointer;transition:background .2s}
.htp-ok:hover{background:#c62828}

/* HINTS PANEL (no-ad, free 3 reveals) */
#hintsPanel{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:9600;align-items:center;justify-content:center}
#hintsPanel.open{display:flex}
#hintsPanelInner{background:var(--surface);border-radius:var(--r-lg);padding:20px 16px;width:min(92vw,460px);max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--sh-lg)}
#hintsPanelInner h2{font-size:1.1rem;margin-bottom:4px;color:var(--purple)}
.hints-sub{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.hint-counter{display:inline-block;background:var(--purple);color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:10px;margin-bottom:10px}
.hint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hint-cell{
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);
  padding:8px 5px;text-align:center;cursor:pointer;position:relative;
  transition:all .2s;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center
}
.hint-cell:hover:not(.revealed):not(.no-hints){background:var(--cell-hover);border-color:var(--purple)}
.hint-cell.revealed{background:var(--green-bg);border-color:var(--green);cursor:default}
.hint-cell.no-hints{opacity:.5;cursor:not-allowed}
.hint-cell-label{font-size:.62rem;font-weight:700;color:var(--muted);margin-bottom:4px;line-height:1.2}
.hint-cell-icon{font-size:1.5rem;margin-bottom:3px}
.hint-cell-names{font-size:.6rem;color:var(--text);font-weight:600;line-height:1.4}
.hint-reveal-txt{font-size:.65rem;color:var(--purple);font-weight:700}
.hint-used-note{text-align:center;font-size:.78rem;color:var(--muted);margin-top:10px}

/* STATS MODAL */
.custom-modal-overlay{display:none;position:fixed;inset:0;background:rgba(17,24,39,.85);backdrop-filter:blur(4px);z-index:9700;align-items:center;justify-content:center}
.custom-modal-overlay.open{display:flex}
.custom-modal-content{background:#fff;border-radius:var(--r-lg);width:min(92vw,520px);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden}
.modal-header{color:#fff;padding:13px 18px;display:flex;justify-content:space-between;align-items:center}
.modal-header-stats{background:var(--blue)}.modal-header-hints{background:var(--purple)}
.modal-header h2{margin:0;font-size:1.05rem;font-weight:700;color:#fff}
.modal-x{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:1.1rem;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.modal-x:hover{background:rgba(255,255,255,.38)}
.modal-body{padding:18px;overflow-y:auto;background:#fafafa}
.stat-row{display:flex;gap:9px;justify-content:space-between;flex-wrap:nowrap;margin-bottom:14px}
.stat-box{background:#fff;border-radius:9px;padding:11px 7px;text-align:center;flex:1;border:1px solid #eaeaea;box-shadow:0 2px 5px rgba(0,0,0,.04)}
.stat-box span{display:block;font-size:.6rem;color:#888;font-weight:700;text-transform:uppercase}
.stat-box strong{display:block;font-size:1.5rem;color:#2c3e50;margin-top:5px;line-height:1}
.progress-bar-wrap{width:100%;background:#e9ecef;border-radius:7px;margin-top:9px;height:6px;overflow:hidden}
.progress-bar{height:100%;background:var(--green);width:0;transition:width .8s}

/* TOAST */
#wrongToast{position:fixed;bottom:-110px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#b71c1c,#e53935);color:#fff;border-radius:16px;padding:11px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 28px rgba(183,28,28,.5);z-index:999999;max-width:min(88vw,340px);transition:bottom .42s cubic-bezier(.34,1.56,.64,1);pointer-events:none;font-family:var(--font)}
#wrongToast.show{bottom:22px}
.toast-icon{font-size:26px;flex-shrink:0}
.toast-body strong{display:block;font-size:.82rem;font-weight:800;margin-bottom:2px}
.toast-body span{font-size:.75rem;opacity:.9;line-height:1.4;display:block}
#toastName{font-style:italic}

/* CHOICE SQUARES */
.my_choice{display:inline-block;width:17px;height:17px;border:1px solid #ddd;border-radius:3px;background:#f2f2f2;margin:2px}
.my_choice.correct{background:var(--green)}

/* SCORE CHART */
.score-chart-wrap{height:160px;width:100%;position:relative;display:flex;align-items:flex-end;gap:2px;padding:0 4px;margin:6px 0 18px}
.score-bar-col{flex:1;position:relative;height:160px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.score-bar{background:var(--green);width:70%;border-radius:3px 3px 0 0;min-height:2px;transition:height .6s}
.score-label{font-size:.55rem;color:var(--muted);margin-top:2px}
.score-val{font-size:.55rem;color:var(--text);font-weight:700;position:absolute;top:0;left:50%;transform:translateX(-50%)}

/* SEO CONTENT */
.seo-section{max-width:540px;margin:20px auto 0;padding:0 10px}
.seo-section h2{font-size:1rem;font-weight:700;margin-bottom:7px;color:var(--text)}
.seo-section p{font-size:.85rem;color:var(--muted);margin-bottom:9px;line-height:1.65}
.seo-section ol{padding-left:17px}
.seo-section li{font-size:.84rem;color:var(--muted);margin-bottom:4px;line-height:1.5}
.faq-item{margin-bottom:11px}
.faq-item h3{font-size:.87rem;font-weight:700;color:var(--text);margin-bottom:3px}
.faq-item p{font-size:.83rem;color:var(--muted);line-height:1.55}

/* ANIMATIONS */
@keyframes cellPop{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0)}25%{transform:scale(1.15);box-shadow:0 0 0 10px rgba(34,197,94,.45)}55%{transform:scale(.96)}80%{transform:scale(1.03)}100%{transform:scale(1);box-shadow:none}}
.cell-correct-pop{animation:cellPop .65s cubic-bezier(.36,.07,.19,.97) forwards;z-index:10}
@keyframes wrongShake{0%,100%{transform:translateX(0)}18%{transform:translateX(-8px)}38%{transform:translateX(7px)}58%{transform:translateX(-5px)}78%{transform:translateX(3px)}}
.wrong-shake{animation:wrongShake .5s ease forwards}
@keyframes panelFlash{0%,100%{border-color:rgba(255,222,0,.35)}40%{border-color:rgba(229,57,53,.8);box-shadow:0 0 0 2px rgba(229,57,53,.4)}}
.panel-flash{animation:panelFlash .45s ease forwards}
.poke-particle{position:fixed;pointer-events:none;font-size:19px;z-index:99999;transform:translate(0,0) scale(1);opacity:1;user-select:none;transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .65s ease}

/* FOOTER */
footer{text-align:center;padding:18px 14px 26px;color:var(--muted);font-size:.73rem;line-height:1.6;border-top:1px solid var(--border);margin-top:20px}
footer a{color:var(--blue);text-decoration:underline}

/* RESPONSIVE */
@media(max-width:540px){
  .grid{grid-template-columns:58px repeat(3,1fr);grid-template-rows:58px repeat(3,1fr)}
  .stats-grid{grid-template-columns:48px repeat(3,1fr);grid-template-rows:48px repeat(3,1fr)}
  .header,.row-header{font-size:.62rem}
  .gen-icon,.gen-icon2{width:46px;height:46px;font-size:.62rem}
  .type-icon,.mega-icon{min-width:46px;font-size:.53rem;line-height:1.4rem}
  .remaining-guesses{position:fixed;bottom:0;right:0;left:0;top:auto;transform:none;border-radius:0;border-top:2px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 14px;width:100%;border-radius:0}
  .remaining-guesses .lbl{font-size:.6rem;display:inline}
  #myCount{font-size:1.3rem}
  .action-btn{padding:7px 11px;font-size:.76rem}
  #myInner_Result{padding:13px 11px}
  .hint-grid{grid-template-columns:repeat(3,1fr)}
  .stat-row{flex-wrap:wrap}
  .stat-box{min-width:40%}
  #wrongToast{left:8px;right:8px;transform:none;max-width:none}
  #wrongToast.show{bottom:12px}
}
@media(min-width:541px){.remaining-guesses{right:10px}}