/*
Theme Name: OctordleHint Gaming
Author: WebGrowthHQ
Description: Colourful 100+ browser game portal for octordlehint.blog.
Version: 1.0
*/
:root{--bg:#070916;--card:#11162b;--card2:#171d39;--text:#f8f9ff;--muted:#aeb5d4;--cyan:#35e7ff;--pink:#ff3ea5;--purple:#8a5cff;--yellow:#ffd84d;--green:#55f08a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 10% 0%,#222052 0,transparent 30%),radial-gradient(circle at 90% 15%,#153c50 0,transparent 28%),var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif}a{text-decoration:none;color:inherit}.wrap{width:min(1200px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:#070916dd;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff12}.nav{height:74px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:23px;font-weight:950}.logo span{color:var(--cyan)}nav{display:flex;gap:20px;font-weight:800}nav a:hover{color:var(--cyan)}
.hero{padding:70px 0 35px;text-align:center}.badge{display:inline-block;padding:8px 14px;border:1px solid #35e7ff55;border-radius:999px;color:var(--cyan);font-weight:900}.hero h1{font-size:clamp(42px,7vw,78px);line-height:1;margin:18px 0;background:linear-gradient(90deg,#fff,var(--cyan),var(--pink),var(--yellow));background-clip:text;color:transparent}.hero p{max-width:700px;margin:auto;color:var(--muted);font-size:18px}.btn{display:inline-block;margin-top:22px;padding:13px 22px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--pink));font-weight:950;box-shadow:0 12px 35px #ff3ea522}
.section{padding:30px 0 55px}.tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}.tools input,.tools select{background:var(--card);color:#fff;border:1px solid #ffffff14;border-radius:12px;padding:12px 14px;outline:none}.tools input{flex:1;min-width:220px}.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.game{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid #ffffff10;border-radius:18px;overflow:hidden;transition:.25s}.game:hover{transform:translateY(-7px);border-color:#35e7ff66;box-shadow:0 20px 45px #0008}.thumb{height:125px;display:grid;place-items:center;font-size:55px;background:radial-gradient(circle,#ffffff1c,transparent 45%)}.body{padding:14px}.cat{font-size:10px;color:var(--cyan);font-weight:950;text-transform:uppercase;letter-spacing:1px}.body h3{font-size:17px;margin:6px 0}.play{display:block;text-align:center;padding:9px;border-radius:10px;background:linear-gradient(90deg,var(--purple),var(--pink));font-weight:900;font-size:13px;margin-top:12px}
.gamebox{margin:45px auto;max-width:900px;background:var(--card);padding:25px;border:1px solid #ffffff14;border-radius:24px;text-align:center}.stage{min-height:330px;background:#050713;border-radius:18px;display:grid;place-items:center;padding:20px}.bigbtn{border:0;border-radius:18px;padding:35px 55px;font-size:30px;font-weight:950;color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink));cursor:pointer;box-shadow:0 15px 45px #8a5cff33}.score{color:var(--yellow);font-weight:950;font-size:22px;margin:15px}
footer{border-top:1px solid #ffffff12;padding:28px 0;color:var(--muted);margin-top:30px}
@media(max-width:1000px){.game-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){nav{display:none}.game-grid{grid-template-columns:repeat(2,1fr)}.hero{padding-top:45px}}@media(max-width:430px){.game-grid{grid-template-columns:1fr}}