
:root{--blue:#2563eb;--pink:#ec4899;--yellow:#f59e0b;--green:#22c55e;--purple:#7c3aed;--bg:#fff7ed;--ink:#1f2937}
*{box-sizing:border-box} body{margin:0;font-family:Arial, Helvetica, sans-serif;background:linear-gradient(135deg,#fff7ed,#eef2ff);color:var(--ink)}
a{text-decoration:none;color:inherit}.topbar{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb;z-index:2}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:12px}.brand{font-size:24px;font-weight:900;color:#1d4ed8}.brand span{color:#ec4899}.navlinks{display:flex;gap:10px;flex-wrap:wrap}.navlinks a,.smallbtn{background:#eff6ff;color:#1d4ed8;padding:9px 12px;border-radius:999px;font-weight:800;border:1px solid #bfdbfe}.hero{max-width:1180px;margin:28px auto 18px;padding:30px 18px;text-align:center}.hero-card{background:white;border-radius:30px;padding:28px;box-shadow:0 20px 50px rgba(59,130,246,.18);border:4px solid #fde68a}.hero h1{font-size:44px;margin:0 0 10px;color:#0f172a}.hero p{font-size:18px;max-width:780px;margin:0 auto;line-height:1.6}.rainbow{background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}.filters{max-width:1180px;margin:0 auto 18px;padding:0 18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.filter{border:0;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;background:#fff;border:2px solid #dbeafe;color:#1d4ed8}.filter.active{background:#2563eb;color:white}.grid{max-width:1180px;margin:auto;padding:10px 18px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.card{background:white;border-radius:24px;padding:18px;border:3px solid #e0e7ff;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:.2s;min-height:190px}.card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(15,23,42,.14)}.icon{font-size:42px}.badge{display:inline-block;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;margin:4px 4px 4px 0}.level-A1{background:#dcfce7;color:#166534}.level-A2{background:#dbeafe;color:#1e40af}.level-B1{background:#fef3c7;color:#92400e}.level-B2{background:#ffedd5;color:#9a3412}.level-C1{background:#fee2e2;color:#991b1b}.level-C2{background:#ede9fe;color:#5b21b6}.skill{background:#f3f4f6;color:#374151}.card h3{margin:8px 0 6px;font-size:20px}.card p{margin:0 0 14px;color:#4b5563}.play-btn,.primary{display:inline-block;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border:0;border-radius:16px;padding:11px 16px;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(37,99,235,.25)}
.container{max-width:980px;margin:24px auto;padding:0 18px}.gamebox{background:white;border-radius:32px;padding:24px;border:4px solid #bfdbfe;box-shadow:0 20px 50px rgba(37,99,235,.16)}.game-head{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.game-title{font-size:34px;margin:0}.instruction{font-size:20px;background:#fffbeb;border:2px dashed #f59e0b;border-radius:18px;padding:14px;margin:16px 0}.big-emoji{font-size:92px;text-align:center;margin:10px}.word{font-size:46px;font-weight:900;text-align:center;color:#1d4ed8;margin:12px}.sentence,.passage{font-size:21px;line-height:1.7;background:#f8fafc;border-radius:18px;padding:16px;margin:12px 0}.passage{border-left:8px solid #60a5fa}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}.option{background:#fff;border:3px solid #dbeafe;border-radius:22px;padding:18px;font-size:22px;font-weight:900;cursor:pointer;text-align:center;min-height:92px}.option:hover,.chip:hover{background:#eff6ff}.option.selected{border-color:#2563eb;background:#dbeafe}.option.correct{border-color:#22c55e;background:#dcfce7}.option.wrong{border-color:#ef4444;background:#fee2e2}.emojiopt{font-size:46px;display:block}.answer-input,textarea{width:100%;font-size:22px;padding:15px;border:3px solid #dbeafe;border-radius:18px;outline:none}textarea{min-height:150px}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.secondary{background:#f3f4f6;color:#111827;border:0;border-radius:16px;padding:11px 16px;font-size:16px;font-weight:900;cursor:pointer}.result{font-size:22px;font-weight:900;min-height:34px;margin-top:14px}.good{color:#16a34a}.bad{color:#dc2626}.chips,.answer-line{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;min-height:62px}.chip{padding:12px 16px;background:#eef2ff;border:2px solid #c7d2fe;border-radius:999px;font-size:20px;font-weight:900;cursor:pointer}.answer-line{border:3px dashed #c7d2fe;border-radius:18px;padding:12px}.memory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:18px}.mem-card{background:#fef3c7;border:3px solid #fbbf24;border-radius:18px;padding:18px;font-size:24px;font-weight:900;text-align:center;cursor:pointer;min-height:85px}.mem-card.open{background:#dbeafe;border-color:#2563eb}.mem-card.done{background:#dcfce7;border-color:#22c55e;opacity:.75}.footer{max-width:1180px;margin:0 auto 30px;padding:20px;text-align:center;color:#4b5563}.print-area{max-width:980px;margin:20px auto;background:white;border-radius:24px;padding:20px}.print-table{width:100%;border-collapse:collapse}.print-table th,.print-table td{border:1px solid #e5e7eb;padding:9px;text-align:left}.guide-section{background:white;border-radius:24px;margin:16px 0;padding:20px;border:2px solid #e5e7eb}@media(max-width:650px){.hero h1{font-size:32px}.game-title{font-size:26px}.word{font-size:34px}.option{font-size:18px}.big-emoji{font-size:70px}.nav{align-items:flex-start;flex-direction:column}}@media print{.topbar,.filters,.controls,.play-btn,.footer{display:none!important}body{background:white}.card,.gamebox,.print-area{box-shadow:none;border:1px solid #ccc}.grid{display:block}.card{break-inside:avoid;margin:10px 0}}
