/* Kvantis Academy Active Recall Lab — calm practice, not a competence signal. */
:root{
  --motion-instant:90ms;
  --motion-fast:160ms;
  --motion-normal:280ms;
  --motion-deliberate:520ms;
  --ease-productive:cubic-bezier(.2,.75,.25,1);
  --ease-flip:cubic-bezier(.2,.7,.2,1);
}

.practice-invite{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  margin:0 0 28px;
  padding:24px 26px;
  border:1px solid #D9E7E0;
  border-radius:20px;
  background:linear-gradient(135deg,#EDF7F2 0%,#F8FAF8 62%,#FFF8E7 100%);
  box-shadow:0 5px 18px rgba(33,48,68,.04);
}
.practice-kicker,.game-kicker{
  font:700 11px/1.3 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2E7D5A;
}
.practice-invite h2{
  margin:6px 0 7px;
  font:700 24px/1.15 var(--sans);
  letter-spacing:-.025em;
}
.practice-invite p{max-width:690px;color:#60716D;font-size:14px}
.practice-invite-status{min-width:150px;text-align:right}
.practice-invite-status>b{display:block;font:800 30px/1 var(--sans)}
.practice-invite-status>span{display:block;margin:4px 0 12px;color:#5F6F69;font-size:12px}

.game-shell{margin:30px 0 70px}
.game-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.game-back{
  appearance:none;
  border:0;
  background:transparent;
  color:#60716D;
  font:700 13px var(--sans);
  cursor:pointer;
  padding:8px 0;
}
.game-back:hover{color:#213044}
.game-back:focus,.mode-card:focus,.rating:focus,.match-tile:focus,.drill-option:focus{
  outline:3px solid rgba(210,161,42,.34);
  outline-offset:3px;
}
.game-title{
  margin:7px 0 10px;
  font:800 clamp(30px,5vw,49px)/1.02 var(--sans);
  letter-spacing:-.05em;
}
.game-lede{max-width:720px;color:#657570;font-size:16px}
.truth-strip{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0 26px}
.truth-chip{
  border-radius:999px;
  background:#EEF3F0;
  color:#53655E;
  padding:6px 10px;
  font:700 10px/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:22px 0 30px;
}
.mode-card{
  appearance:none;
  display:flex;
  min-height:245px;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  border:1px solid transparent;
  border-radius:20px;
  background:#fff;
  color:#213044;
  padding:22px;
  box-shadow:0 5px 18px rgba(33,48,68,.06);
  cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-productive),box-shadow var(--motion-fast) var(--ease-productive),border-color var(--motion-fast) linear;
}
.mode-card:hover{
  transform:translateY(-3px);
  border-color:#DDE6E0;
  box-shadow:0 11px 28px rgba(33,48,68,.1);
}
.mode-mark{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin-bottom:26px;
  border-radius:999px;
  padding:6px 10px;
  font:800 10px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mode-mark.recall{background:#FFF2C9;color:#725815}
.mode-mark.connect{background:#DDECF7;color:#36506C}
.mode-mark.decide{background:#DDEFE5;color:#2B7353}
.mode-card h2{margin-bottom:7px;font:750 19px/1.2 var(--sans);letter-spacing:-.02em}
.mode-card p{color:#5F6F69;font-size:14px}
.mode-meta{
  display:block;
  margin-top:auto;
  padding-top:20px;
  color:#5F6F69;
  font:700 10px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.practice-ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.ledger-cell{padding:14px;border:1px solid #E0E7E2;border-radius:14px;background:#FAFBFA}
.ledger-cell b{display:block;font:800 21px var(--sans)}
.ledger-cell span{font-size:11px;color:#5F6F69}
.game-note{margin-top:18px;padding:14px 16px;border-radius:13px;background:#FFF8E7;color:#675A34;font-size:13px}

.deck-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0}
.deck-progress{font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5F6F69}
.meter{height:5px;flex:1;max-width:280px;background:#E5EBE7;border-radius:8px;overflow:hidden}
.meter>i{display:block;height:100%;background:#2E7D5A;border-radius:8px;transition:width var(--motion-normal) var(--ease-productive)}

.card-stage{
  position:relative;
  max-width:800px;
  margin:28px auto;
  perspective:1400px;
}
.card-stage:before,.card-stage:after{
  content:"";
  position:absolute;
  inset:10px 18px -10px;
  border:1px solid #DCE5DF;
  border-radius:24px;
  background:#F5F8F6;
  z-index:-1;
  transition:transform var(--motion-normal) var(--ease-productive);
}
.card-stage:after{inset:20px 36px -20px;background:#EEF3F0;z-index:-2}
.card-stage:hover:before{transform:translateY(2px)}
.card-stage:hover:after{transform:translateY(4px)}
.study-card{
  appearance:none;
  position:relative;
  width:100%;
  min-height:390px;
  border:0;
  border-radius:24px;
  background:transparent;
  color:#213044;
  padding:0;
  cursor:pointer;
  text-align:center;
}
.study-card:focus{outline:0}
.study-card:focus .card-panel{
  box-shadow:0 0 0 4px rgba(210,161,42,.34),0 15px 40px rgba(33,48,68,.09);
}
.card-flip{
  position:relative;
  display:block;
  width:100%;
  min-height:390px;
  transform-style:preserve-3d;
  transition:transform var(--motion-deliberate) var(--ease-flip);
}
.study-card.is-answer .card-flip{transform:rotateY(180deg)}
.card-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #DDE7E0;
  border-radius:24px;
  padding:42px clamp(26px,7vw,66px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 15px 40px rgba(33,48,68,.09);
}
.card-front{background:#fff;color:#213044}
.card-back{transform:rotateY(180deg);background:#112840;color:#F8FAF8;border-color:#112840}
.card-back .card-face{font-size:clamp(20px,3.2vw,30px)}
.card-topic{
  margin-bottom:24px;
  color:#2E7D5A;
  font:700 10px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card-back .card-topic{color:#E4BE59}
.card-face{max-width:660px;font:600 clamp(23px,4vw,34px)/1.3 var(--serif)}
.card-hint{margin-top:26px;color:#5F6F69;font-size:12px}
.card-back .card-hint{color:#ADBBC7}
.card-source{margin-top:22px;color:#8BA29A;font:600 10px/1.4 var(--mono)}

.rating-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:800px;margin:34px auto 0}
.rating-row[hidden]{display:none}
.rating-row:not([hidden]){animation:rating-in var(--motion-fast) var(--ease-productive) both}
.rating{
  border:1px solid #DCE5DF;
  border-radius:13px;
  background:#fff;
  color:#213044;
  padding:11px 8px;
  font:700 13px var(--sans);
  cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-productive),border-color var(--motion-fast) linear,background var(--motion-fast) linear;
}
.rating:hover{transform:translateY(-2px);border-color:#D2A12A;background:#FFFDF7}
.rating small{display:block;margin-top:3px;color:#5F6F69;font:600 10px var(--mono)}
@keyframes rating-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

.match-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:23px 0}
.match-column{display:grid;gap:10px;align-content:start}
.match-tile{
  appearance:none;
  min-height:64px;
  border:1px solid #DDE6E0;
  border-radius:15px;
  background:#fff;
  color:#213044;
  padding:15px 17px;
  text-align:left;
  font:650 14px/1.4 var(--sans);
  cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-productive),border-color var(--motion-fast) linear,background var(--motion-fast) linear;
}
.match-tile:hover,.match-tile.selected{transform:translateY(-1px);border-color:#D2A12A;background:#FFF9E9}
.match-tile.matched{transform:none;border-color:#AAD2B8;background:#E9F5ED;color:#2E6C48;cursor:default}
.match-status{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0;color:#66756F;font-size:13px}
.match-clock{font:800 20px var(--mono);color:#213044}
.match-complete{padding:26px;border-radius:18px;background:#EAF5EF;text-align:center}
.match-complete h2{font:750 25px var(--sans);margin-bottom:7px}

.drill-wrap{max-width:800px;margin:24px auto}
.drill-scenario{border-left:4px solid #D2A12A;padding:7px 0 7px 18px;color:#6B624A;font:600 14px/1.5 var(--sans);margin-bottom:18px}
.drill-question{font:650 clamp(21px,3vw,28px)/1.3 var(--serif);margin:14px 0 20px}
.drill-options{display:grid;gap:10px}
.drill-option{
  appearance:none;
  border:1px solid #DDE6E0;
  border-radius:15px;
  background:#fff;
  color:#213044;
  padding:15px 17px;
  text-align:left;
  font:600 14px/1.45 var(--sans);
  cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-productive),border-color var(--motion-fast) linear,background var(--motion-fast) linear;
}
.drill-option:hover:not(:disabled){transform:translateY(-1px);border-color:#D2A12A;background:#FFFDF7}
.drill-option.correct{background:#E9F5ED;border-color:#80BB97}
.drill-option.wrong{background:#FBEDE9;border-color:#D99B8A}
.drill-feedback{margin-top:16px;padding:15px 17px;border-radius:14px;background:#EEF5FB;color:#405666;font-size:14px}
.game-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:760px){
  .practice-invite{grid-template-columns:1fr;gap:15px}
  .practice-invite-status{text-align:left}
  .practice-invite-status>b,.practice-invite-status>span{display:inline;margin-right:5px}
  .practice-invite-status .btn{display:block;margin-top:12px}
  .mode-grid{grid-template-columns:1fr}
  .mode-card{min-height:0}
  .practice-ledger{grid-template-columns:repeat(2,1fr)}
  .study-card,.card-flip{min-height:420px}
  .card-panel{padding:34px 24px}
  .match-board{grid-template-columns:1fr}
  .rating-row{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .mode-card,.meter>i,.card-stage:before,.card-stage:after,.rating,.match-tile,.drill-option{transition:none}
  .rating-row:not([hidden]){animation:none}
  .card-flip{transition:none;transform:none!important}
  .card-back{display:none;transform:none}
  .study-card.is-answer .card-front{display:none}
  .study-card.is-answer .card-back{display:flex}
}