/* Typing Master Pro: course map, exercises, grid mode, results */
#st2 #n2 {
  position:sticky;
  bottom:12px;
  z-index:5;
}

@media(min-width:900px) {
  #app.play .wrap {
    margin:0;
    justify-self:stretch;
  }
}

#tmh {
  height:220px;
  width:auto;
}

.kb.restrict .k {
  opacity:.3;
}

.kb.restrict .k.al,.kb.restrict .k.next {
  opacity:1;
}

.tmph.tmlock {
  opacity:.55;
}

.tmsps {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}

.tmsp {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 4px;
  border-radius:12px;
}

.tmsp small {
  font-size:11px;
  opacity:.8;
}

.tmsp.lock {
  opacity:.4;
}

.tmsp.done {
  background:var(--mint);
  color:var(--ink);
}

.tmsp.prog {
  background:var(--peach);
  color:var(--ink);
}

.tmsp.avail {
  outline:1px solid var(--ok);
}

.tmex {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.tmt {
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  text-align:left;
}

.tmt td {
  padding:8px;
  border-top:1px solid var(--line);
}

#tx {
  display:none;
  flex:1;
  min-height:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  background:var(--bg);
  border-radius:14px;
  padding:12px;
}

#app.tmfocus #text {
  display:none;
}

#app.tmfocus #tx {
  display:flex;
}

.tmbig {
  font:700 clamp(60px,16vh,170px)/1.1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.06em;
  color:var(--mute);
}

.tmbig .c {
  color:var(--ok);
}

.tmbig .w {
  color:var(--bad);
  background:var(--badbg);
  border-radius:8px;
}

.tmbig .cur {
  color:var(--ink);
  border-bottom:6px solid var(--ok);
}

.tmnext {
  font:22px ui-monospace,Menlo,Consolas,monospace;
  color:var(--mute);
  white-space:pre;
}

.tmfoot {
  font-size:13px;
  color:var(--mute);
}

.tmgrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:820px;
  flex:1;
  min-height:0;
}

#tx {
  overflow:hidden;
}

.tmbig .cur {
  background:none;
  box-shadow:none;
}

.tmcell {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  border-radius:12px;
  border:1px solid var(--line);
  font:600 clamp(16px,3vh,30px) ui-monospace,Menlo,Consolas,monospace;
  color:var(--mute);
}

.tmcell.cur {
  border-color:var(--ok);
  color:var(--ink);
  box-shadow:0 0 0 2px var(--ok);
}

.tmcell.ok {
  background:var(--mint);
  color:var(--ink);
}

.tmcell.bad {
  background:var(--badbg);
  color:var(--bad);
}

#cres {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,8,20,.55);
  z-index:11;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow:auto;
}

#cres.show {
  display:flex;
}

#crb {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  max-width:620px;
  width:100%;
  max-height:92vh;
  overflow:auto;
}

.tmres {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:8px;
  margin-bottom:10px;
}

@media(max-width:600px) {
  .tmsps {
    grid-template-columns:repeat(3,1fr);
  }
}