/* ===== Base ===== */
.mnm-tt.wrap{
  --bg:#0f1020; --panel:#171b33; --ink:#eaf0ff; --muted:#aeb7df;
  --brand:#972141; --accent:#7b61ff; --ok:#00d18f; --warn:#ffd54f;
  --r:14px; --g:16px;
  color:var(--ink); background:linear-gradient(180deg,#0f1020,#0a0c1a);
  border-radius:12px; padding:16px; box-shadow:0 24px 48px rgba(0,0,0,.35);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* Top bar */
.tt-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{background:var(--brand);padding:8px 10px;border-radius:10px;font-weight:800}
.brand .titles h1{font-size:18px;margin:0}
.brand .titles .sub{margin:2px 0 0;color:var(--muted);font-size:12px}
.activity{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.activity li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  padding:8px 10px;border-radius:10px;text-align:center;min-width:64px}
.activity li span{display:block;font-size:11px;color:var(--muted)}
.activity li strong{font-size:16px}

/* Screens */
#tt-screens{position:relative}
.screen{display:none;background:var(--panel);border-radius:12px;padding:16px}
.screen.active{display:block}
.screen h2{margin:0 0 10px}
.muted{color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.field input{background:#0f1228;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:12px 14px;color:var(--ink);font-size:16px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:1px solid rgba(255,255,255,.12);background:#1b2040;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#7b61ff,#5a3df2)}
.btn.ghost{background:transparent}
.btn.next{margin-top:12px}

/* Chips & tables */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid rgba(255,255,255,.14);background:#1a1f3c;color:#e8ebff;padding:10px 12px;border-radius:12px;font-weight:700}
.chip.selected{outline:2px solid #8f7bff}
.grid-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:8px 0 6px}
.tbl{background:#212652;border:1px solid rgba(255,255,255,.14);padding:10px 0;border-radius:12px;color:#e9ecff;font-weight:800}
.toggles{display:flex;gap:16px;margin:8px 0 14px}
.switch{display:flex;gap:8px;align-items:center;color:#dfe4ff}
.switch input{width:18px;height:18px}

/* Play area */
.play-area{display:flex;flex-direction:column;gap:12px;min-height:38vh;justify-content:center}
.question{font-size:32px;font-weight:800;text-align:center;letter-spacing:.02em}
.answer{background:#0f1228;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;
  font-size:18px;text-align:center;color:#fff}

/* Keypad: fixed bottom on touch (mobile/tablet) */
.keypad{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:rgba(15,16,32,.9); backdrop-filter:blur(6px);
  padding:10px 12px; border-top:1px solid rgba(255,255,255,.08);
}
.keypad button{
  padding:14px 0; font-size:18px; font-weight:800; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:#1a1f3c; color:#fff;
}

/* Hide keypad on larger screens / fine pointer devices */
@media (min-width: 1024px){
  .keypad{display:none}
  .play-area{min-height:50vh}
}

/* ===== Strong visual feedback ===== */
.play-area.ok .question { animation: okGlow 500ms ease-out; }
.play-area.bad .question { animation: badShake 420ms ease-out; }
.answer.ok  { outline:2px solid #14e6a4; box-shadow:0 0 0 4px rgba(20,230,164,.15); }
.answer.bad { outline:2px solid #ff5b6e; box-shadow:0 0 0 4px rgba(255,91,110,.15); }

@keyframes okGlow {
  0% { text-shadow:0 0 0 rgba(20,230,164,0); transform:scale(1);}
  60%{ text-shadow:0 0 18px rgba(20,230,164,.8); transform:scale(1.04);}
  100%{ text-shadow:0 0 0 rgba(20,230,164,0); transform:scale(1);}
}
@keyframes badShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
/* --- Visual feedback (specific selectors) --- */
.mnm-tt .play-area.ok .question { animation: okGlow 800ms ease-out; }
.mnm-tt .play-area.bad .question { animation: badShake 600ms ease-out; }

.mnm-tt .answer.ok{
  border-color:#14e6a4 !important;
  outline:2px solid #14e6a4;
  box-shadow:0 0 0 4px rgba(20,230,164,.18);
  background:rgba(20,230,164,.08);
}
.mnm-tt .answer.bad{
  border-color:#ff5b6e !important;
  outline:2px solid #ff5b6e;
  box-shadow:0 0 0 4px rgba(255,91,110,.18);
  background:rgba(255,91,110,.08);
}

/* Bigger question effects */
@keyframes okGlow {
  0% { text-shadow:0 0 0 rgba(20,230,164,0); transform:scale(1); }
  40%{ text-shadow:0 0 24px rgba(20,230,164,.9); transform:scale(1.06); }
  100%{ text-shadow:0 0 0 rgba(20,230,164,0); transform:scale(1); }
}
@keyframes badShake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Status line */
.mnm-tt .tt-status{
  min-height: 22px;
  margin-top: 8px;
  font-weight: 700;
  letter-spacing:.2px;
}
.mnm-tt .tt-status.ok{ color:#14e6a4; }
.mnm-tt .tt-status.bad{ color:#ff5b6e; }


.mnm-tt .answer[readonly] {
  caret-color: transparent; /* hide blinking caret */
}


/* Coin pop: rise higher since it's near the input now */
.mnm-tt .coin-pop{
  position:absolute; z-index:80; font-weight:800;
  background:#10152f; color:#ffd76a; border:1px solid rgba(255,215,106,.45);
  border-radius:999px; padding:6px 10px; box-shadow:0 8px 20px rgba(0,0,0,.35);
  animation: coinUp .9s ease-out forwards;
}
@keyframes coinUp{
  from{ transform:translateY(0); opacity:1 }
  to{ transform:translateY(-56px); opacity:0 }
}

/* Toasts to TOP-RIGHT with safe-area insets */
.tt-toasts{
  position:fixed;
  right: max(14px, env(safe-area-inset-right));
  top:  max(14px, env(safe-area-inset-top));
  display:flex; flex-direction:column; gap:8px; z-index:90;
}


.mnm-tt .answer.coinpulse { animation: coinPulse .35s ease-out; }
@keyframes coinPulse { 
  0%{ transform:scale(1) } 
  50%{ transform:scale(1.02) } 
  100%{ transform:scale(1) } 
}



/* Time chips layout tweak */
#chips-time { display:flex; gap:8px; flex-wrap:wrap; }
#chips-time .chip.selected { outline:2px solid rgba(255,255,255,.2); }