/* ============================================================================
 *  С МИСЪЛ — стилове за игрите
 *  Зареждат се СЛЕД edu-app.css.
 * ========================================================================= */

.g-wrap { max-width: 880px; margin: 0 auto; padding: 26px 18px 80px; }
.g-wrap--wide { max-width: 1000px; }

/* ---- header bar ---- */
.g-top {
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; margin-bottom:20px; flex-wrap:wrap;
}
.g-top h1 { font-size:20px; margin:0; letter-spacing:-.01em; }
.g-top .meta { font-size:13px; color:var(--edu-muted); margin-top:2px; }

.g-score { display:flex; gap:20px; }
.g-score span { font-size:17px; font-weight:700; text-align:center; }
.g-score small {
  display:block; font-size:10.5px; font-weight:600; color:var(--edu-muted);
  text-transform:uppercase; letter-spacing:.06em; margin-top:1px;
}

/* ---- hub cards ---- */
.g-grid { display:grid; gap:13px; }
@media(min-width:620px){ .g-grid { grid-template-columns:1fr 1fr; } }

.g-card {
  display:block; text-decoration:none; color:inherit;
  background:var(--edu-surface); border:1.5px solid var(--edu-line);
  border-radius:14px; padding:19px 21px; transition:.15s;
}
.g-card:hover { border-color:var(--edu-brand); transform:translateY(-2px);
                box-shadow:0 8px 22px rgba(20,25,50,.08); }
.g-card--off { opacity:.5; pointer-events:none; }
.g-card__ico  { font-size:26px; margin-bottom:9px; }
.g-card__name { font-size:16.5px; font-weight:700; margin-bottom:3px; }
.g-card__desc { font-size:13.5px; color:var(--edu-muted); line-height:1.5; }
.g-card__foot { margin-top:11px; font-size:12.5px; color:var(--edu-muted); }
.g-card__foot b { color:var(--edu-brand); }

/* ---- generic play surface ---- */
.g-stage {
  background:var(--edu-surface); border:1px solid var(--edu-line);
  border-radius:15px; padding:24px; box-shadow:var(--edu-shadow);
}
.g-prompt { font-size:19px; line-height:1.5; font-weight:600; margin:0 0 20px; }
.g-sub    { font-size:13.5px; color:var(--edu-muted); margin:0 0 16px; }

/* ---- answer buttons (quiz) ---- */
.g-answers { display:grid; gap:10px; }
@media(min-width:560px){ .g-answers { grid-template-columns:1fr 1fr; } }
.g-ans {
  text-align:left; padding:15px 17px; font:inherit; font-size:15px; line-height:1.45;
  border:1.5px solid var(--edu-line); border-radius:12px; cursor:pointer;
  background:var(--edu-surface); color:var(--edu-ink); transition:.13s;
}
.g-ans:hover:not(:disabled) { border-color:var(--edu-brand); background:var(--edu-brand-dim); }
.g-ans:disabled { cursor:default; }
.g-ans.right { border-color:#4caf7d; background:#eaf7ef; color:#14683f; font-weight:600; }
.g-ans.wrong { border-color:var(--edu-err); background:var(--edu-err-bg); color:var(--edu-err); }
.g-ans.dim   { opacity:.45; }

/* ---- timer ---- */
.g-bar { height:6px; background:var(--edu-line); border-radius:99px; overflow:hidden; margin-bottom:18px; }
.g-bar i { display:block; height:100%; background:var(--edu-brand); transition:width .25s linear; }
.g-bar.low i { background:#e0a33a; }
.g-bar.out i { background:var(--edu-err); }

/* ---- feedback ---- */
.g-feed { margin-top:16px; padding:14px 17px; border-radius:11px; font-size:14.5px; line-height:1.55; }
.g-feed--ok  { background:#eaf7ef; color:#14683f; }
.g-feed--no  { background:var(--edu-err-bg); color:var(--edu-err); }
.g-feed b { display:block; margin-bottom:3px; }

/* ---- wheel ---- */
.wheel-wrap { text-align:center; padding:6px 0 4px; }
.wheel-outer { position:relative; width:270px; height:270px; margin:0 auto 18px; }
.wheel-svg { transition:transform 3.6s cubic-bezier(.17,.67,.15,1); }
.wheel-pin {
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  font-size:26px; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

/* ---- ordering ---- */
.ord-list { display:flex; flex-direction:column; gap:9px; }
.ord-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1.5px solid var(--edu-line); border-radius:11px; background:var(--edu-surface);
  cursor:grab; font-size:15px; line-height:1.45; user-select:none;
}
.ord-item:active { cursor:grabbing; }
.ord-item.drag  { opacity:.4; }
.ord-item.over  { border-color:var(--edu-brand); background:var(--edu-brand-dim); }
.ord-item.right { border-color:#4caf7d; background:#eaf7ef; }
.ord-item.wrong { border-color:var(--edu-err); background:var(--edu-err-bg); }
.ord-num {
  flex:none; width:27px; height:27px; border-radius:50%; background:var(--edu-bg);
  display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--edu-muted);
}
.ord-grip { flex:none; color:var(--edu-line); font-size:17px; }

/* ---- flashcards ---- */
.card-face {
  min-height:190px; display:grid; place-items:center; text-align:center;
  padding:28px 22px; border:1.5px solid var(--edu-line); border-radius:14px;
  background:var(--edu-surface); font-size:20px; line-height:1.45; font-weight:600;
}
.card-face.back { background:var(--edu-bg); font-size:17px; font-weight:500; }
.card-grade { display:grid; gap:9px; margin-top:15px; }
@media(min-width:520px){ .card-grade { grid-template-columns:1fr 1fr; } }
.card-grade button {
  padding:13px; border-radius:11px; font:inherit; font-size:14.5px; font-weight:600;
  border:1.5px solid var(--edu-line); background:var(--edu-surface); cursor:pointer;
}
.card-grade .no  { border-color:#e79a94; color:var(--edu-err); }
.card-grade .yes { border-color:#7fc79b; color:var(--edu-ok); }
.card-grade button:hover { filter:brightness(.97); }

/* ---- matching ---- */
.m-board { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; }
@media(max-width:600px){ .m-board { gap:7px; } }
.m-board h2 {
  font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--edu-muted); margin:0 0 2px; font-weight:700; align-self:end;
}
.m-tile {
  height:100%; text-align:left; width:100%; cursor:pointer; font:inherit; font-size:14px;
  padding:13px 14px; border:1.5px solid var(--edu-line); border-radius:11px;
  background:var(--edu-surface); color:var(--edu-ink); transition:.14s; line-height:1.45;
}
.m-tile:hover:not(:disabled){ border-color:var(--edu-brand); }
.m-tile.sel  { border-color:var(--edu-brand); background:var(--edu-brand-dim); }
.m-tile.done { border-color:#bfe3cb; background:#eef8f1; color:#2c6b45; opacity:.72; cursor:default; }
.m-tile.bad  { border-color:var(--edu-err); background:var(--edu-err-bg); animation:g-shake .35s; }
@keyframes g-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ---- finish screen ---- */
.g-done { text-align:center; padding:34px 20px; }
.g-done .big { font-size:46px; margin-bottom:6px; }
.g-done h2 { margin:0 0 6px; font-size:22px; }
.g-done p  { color:var(--edu-muted); margin:0 0 20px; font-size:15px; }
.g-done .btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- misc ---- */
.g-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.g-actions .edu-btn { width:auto; }
.g-pill {
  display:inline-block; padding:3px 10px; border-radius:99px;
  font-size:12px; font-weight:700; background:var(--edu-brand-dim); color:var(--edu-brand);
}
.g-hidden { display:none !important; }