:root{font-family:"Tajawal","Segoe UI",sans-serif;color:#17231d;background:#f4f1e8;color-scheme:light}
*{box-sizing:border-box}body{margin:0}main{width:min(780px,100%);margin:auto;padding:18px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}header div{display:flex;align-items:center;gap:10px}header span{font-size:2rem}h1,h2,h3,p{margin-top:0}a{color:#17583d}
.card{background:#fff;border:1px solid #d7ddcf;border-radius:22px;padding:20px;margin:14px 0;box-shadow:0 8px 28px #20382912}
.hero{text-align:center;background:linear-gradient(145deg,#f9fff7,#fff8e9)}.secret{border:2px dashed #247650;text-align:center}.secret-word{font-size:clamp(2rem,10vw,4rem);display:block;margin:18px}
button,.button{border:0;border-radius:13px;padding:12px 18px;background:#176946;color:#fff;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#e8efe9;color:#174d37}.danger{background:#a42f35}
label{display:grid;gap:7px;margin:12px 0;font-weight:700}input,select{width:100%;font:inherit;padding:12px;border:1px solid #aebbad;border-radius:12px;background:#fff}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px;margin:14px 0}.choice-grid label{display:flex;align-items:center;gap:8px;margin:0;padding:12px;border:1px solid #d9dfd6;border-radius:12px}.choice-grid input{width:auto}
.select-row{display:flex;align-items:center;justify-content:space-between}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{padding:8px 12px;border-radius:999px;background:#edf4ed}
.list{display:grid;gap:8px}.list article{padding:12px;border-radius:13px;background:#f5f7f2}.progress{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.progress span{width:10px;height:10px;border-radius:50%;background:#ccd4cb}.progress .active{background:#176946;outline:4px solid #d8ebdf}
.timer{width:100px;aspect-ratio:1;border:7px solid #df8e24;border-radius:50%;display:grid;place-content:center;margin:14px auto}.timer strong{font-size:2.2rem;line-height:1}.timer span{font-size:.8rem}
aside{background:#fff3d7;border-radius:12px;padding:12px;margin:12px 0}.error{color:#9e252c;font-weight:800}.results{border-color:#d8a741}
@media(max-width:500px){main{padding:10px}.card{padding:16px;border-radius:17px}.choice-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:no-preference){.timer{transition:border-color .2s}.hero{transition:background .25s}}