@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900;1000&display=swap');
:root{font-family:Nunito,'Segoe UI',sans-serif;color:#18214d;background:#eef6ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 9% 14%,#ffe76d 0 6%,transparent 6.2%),radial-gradient(circle at 93% 80%,#ff83ae 0 8%,transparent 8.2%),linear-gradient(145deg,#6ee3d0,#70a9ff 58%,#8c6de8)}button{font:inherit}.pattern-app{min-height:calc(100dvh - 66px);padding:18px clamp(14px,4vw,48px) 32px}.game-header{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#fff;background:#18245e;border:2px solid #ffffff70;border-radius:18px;padding:13px 18px;box-shadow:0 6px #14205535}.game-header>div:first-child{display:flex;flex-direction:column}.eyebrow{font-size:.62rem;letter-spacing:1.8px;color:#73ead4;font-weight:1000}.game-header strong{font-size:1.05rem}.header-score{display:flex;align-items:center;gap:8px}.header-score span{background:#ffffff18;border:1px solid #ffffff45;border-radius:99px;padding:7px 11px;font-size:.76rem;font-weight:900}.start-screen{width:min(1080px,100%);margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;align-items:center}.hero-kicker{font-size:.68rem;letter-spacing:2px;color:#174f83;font-weight:1000}.hero-copy h1{margin:10px 0 15px;font-size:clamp(2.7rem,6vw,5rem);line-height:.93;letter-spacing:-3px}.hero-copy h1 em{color:#613fd0;font-style:normal}.hero-copy p{max-width:550px;color:#3b4e73;font-weight:700;line-height:1.55}.hero-pattern{min-height:245px;display:flex;align-items:center;justify-content:center;gap:13px;background:#ffffffbf;border:4px solid #fff;border-radius:32px;box-shadow:0 10px #23326728}.hero-pattern span,.hero-pattern b{display:grid;place-items:center;width:74px;height:74px;background:#fff;border-radius:22px;font-size:2.7rem;box-shadow:0 7px #cfd1ef}.hero-pattern b{color:#fff;background:#18245e}.level-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;margin-top:5px}.level-heading span{font-size:1.3rem;font-weight:1000}.level-heading small{font-weight:900;color:#415175}.level-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.level-card{text-align:left;border:3px solid #fff;border-radius:21px;min-height:150px;padding:18px;color:#18214d;cursor:pointer;box-shadow:0 7px #3033662d;transition:.18s transform,.18s box-shadow}.level-card:hover{transform:translateY(-5px);box-shadow:0 12px #3033662d}.level-card>span{display:block;font-size:1.45rem;font-weight:1000}.level-card strong,.level-card small{display:block}.level-card strong{font-size:1.35rem;margin:19px 0 4px}.level-card small{font-weight:800;line-height:1.25}.easy{background:#bff3dc}.medium{background:#ffe28a}.hard{background:#ffb4c7}.code{background:#c8baff}.game-screen{width:min(980px,100%);margin:18px auto 0}.play-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;margin-bottom:10px}.change-level{justify-self:start;color:#fff;border:1px solid #ffffff80;background:#18245eaf;border-radius:99px;padding:7px 12px;cursor:pointer;font-weight:900}.play-top>div:nth-child(2){display:flex;align-items:center;gap:9px}.play-top>div:nth-child(2) span{background:#ffffff30;border-radius:99px;padding:4px 9px;font-size:.75rem;font-weight:900}.mistakes{justify-self:end;display:flex;gap:4px;color:#ff466f;font-size:1.45rem}.mistakes .lost{color:#ffffff50}.progress{height:9px;background:#ffffff75;border-radius:99px;overflow:hidden}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff4f8b,#ffd44d,#45d99f);transition:.3s}.challenge-card{position:relative;text-align:center;margin-top:12px;padding:clamp(18px,3vw,35px);background:#fffffff1;border:4px solid #fff;border-radius:30px;box-shadow:0 10px #26366b38}.instruction{margin:0 0 22px;color:#5d5388;font-size:.78rem;font-weight:1000;letter-spacing:1px}.pattern-row{display:flex;align-items:center;justify-content:center;gap:10px;min-height:92px;flex-wrap:wrap}.pattern-token{display:grid;place-items:center;min-width:66px;height:66px;padding:0 10px;background:#fff;border:2px solid #e3def6;border-radius:17px;font-size:2rem;font-weight:1000;box-shadow:0 5px #d7d0ee}.pattern-token.text{font-size:1.25rem}.pattern-token.missing{color:#fff;background:#18245e;border-color:#18245e}.drop-zone{display:flex;align-items:center;justify-content:center;gap:11px;width:min(390px,100%);min-height:62px;margin:26px auto 18px;border:3px dashed #8b77d2;border-radius:17px;background:#f4f0ff;color:#7059bd;transition:.15s}.drop-zone>span{font-size:1.7rem;font-weight:1000}.drop-zone small{font-weight:900}.drop-zone.dragover{background:#e2d9ff;transform:scale(1.03)}.drop-zone.filled{border-style:solid;background:#dff7e9;color:#126b49}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(720px,100%);margin:auto}.choice{min-height:74px;padding:10px;border:3px solid #ded8f1;border-radius:17px;background:#fff;color:#18214d;cursor:grab;font-size:1.65rem;font-weight:1000;box-shadow:0 5px #c3bcdf;transition:.15s}.choice:hover{transform:translateY(-3px);border-color:#7658df}.choice.command{font-size:.82rem;line-height:1.35}.choice:disabled{cursor:default}.choice.correct{background:#c7f1d9;border-color:#24ae6b}.choice.wrong{background:#ffd3de;border-color:#e83e69}.feedback{min-height:42px;margin:17px auto 0;padding:10px;border-radius:13px;background:#fff3b5;font-weight:900}.feedback.good{background:#c7f1d9;color:#126b49}.feedback.bad{background:#ffd3de;color:#8a1735}.next{margin-top:13px;border:0;border-radius:13px;padding:11px 20px;background:#18245e;color:#fff;font-weight:1000;cursor:pointer}.result-screen{text-align:center;width:min(650px,100%);margin:45px auto;padding:40px 25px;background:#fffffff2;border:4px solid #fff;border-radius:31px;box-shadow:0 10px #26366b38}.result-icon{font-size:4.5rem}.result-screen>span{color:#654aca;font-size:.68rem;letter-spacing:2px;font-weight:1000}.result-screen h1{margin:8px 0;font-size:3.2rem}.result-screen p{color:#52617a;font-weight:800}.badge{width:230px;margin:22px auto;padding:15px;background:linear-gradient(145deg,#fff0a4,#ffca42);border:3px solid #fff;border-radius:20px;box-shadow:0 6px #d69d2e}.badge span,.badge strong,.badge small{display:block}.badge span{font-size:2rem}.badge strong{font-size:1rem}.badge small{font-weight:800}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}.result-actions button{border:0;border-radius:13px;padding:11px 16px;background:#18245e;color:#fff;font-weight:1000;cursor:pointer}.result-actions button:last-child{background:#7358dc}@media(max-width:760px){.pattern-app{padding:10px}.game-header{padding:10px 12px}.header-score span:last-child{display:none}.start-screen{grid-template-columns:1fr;margin-top:18px;gap:15px}.hero-copy h1{font-size:3rem}.hero-pattern{min-height:130px;gap:7px}.hero-pattern span,.hero-pattern b{width:49px;height:49px;border-radius:13px;font-size:1.7rem}.level-heading,.level-grid{grid-column:1}.level-grid{grid-template-columns:1fr 1fr}.level-card{min-height:118px;padding:13px}.level-card strong{margin-top:10px}.challenge-card{border-radius:21px}.pattern-row{gap:6px}.pattern-token{min-width:48px;height:51px;border-radius:12px;font-size:1.45rem;padding:0 6px}.pattern-token.text{font-size:.9rem}.choices{gap:7px}.choice{font-size:1.2rem;min-height:62px}.choice.command{font-size:.67rem;padding:6px}.drop-zone{margin-top:18px}.play-top{grid-template-columns:auto 1fr auto}.play-top>div:nth-child(2){justify-self:center}.result-screen{margin-top:20px}}@media(max-width:390px){.eyebrow{display:none}.game-header strong{font-size:.85rem}.hero-copy h1{font-size:2.55rem}.level-card small{font-size:.7rem}.level-card>span{font-size:1.1rem}.level-card strong{font-size:1.05rem}.change-level{font-size:.72rem;padding:6px 8px}.play-top>div:nth-child(2) strong{font-size:.8rem}.mistakes{font-size:1.15rem}.pattern-token{min-width:41px;height:46px;font-size:1.2rem}.instruction{margin-bottom:13px}.drop-zone small{font-size:.7rem}}
/* v85: Center the three difficulty choices as one balanced row. */
#start-screen .level-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:min(860px,100%);margin-inline:auto}
@media(max-width:760px){#start-screen .level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#start-screen .level-card{min-height:112px;padding:11px 7px;text-align:center}#start-screen .level-card strong{font-size:1rem}#start-screen .level-card small{font-size:.66rem}}