/* pages/trainer/skin-drill.css — the drill card as the game screen
   (wireframe 1h, decision 0015). Combo pill, tanuki reaction panel, and
   the chunky card/grade treatment. Colours are --play-* tokens only. */

.dr-main{display:flex;gap:16px;align-items:flex-start}
.dr-stagecol{flex:1;min-width:0}
.dr-side{width:88px;flex:none;display:flex;flex-direction:column;align-items:center;padding-top:26px}
.dr-tanu{width:76px;height:76px;color:var(--play-ink)}
.dr-tanu.is-happy,.dr-tanu.is-cheer{background:var(--play-accent-soft)}
.dr-tanu.is-sad{background:var(--play-lock)}

.shellui .dr-combo{border:2px solid var(--play-ink);background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}

.shellui .fc{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);color:var(--play-ink);box-shadow:6px 6px 0 var(--play-edge)}
.shellui .fc.right{border-color:var(--play-ink);background:var(--good-tint)}
.shellui .fc.wrong{border-color:var(--play-ink);background:var(--bad-tint)}
.shellui .fc input{border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);color:var(--play-ink)}
.shellui .fc input:focus{border-color:var(--play-link)}

.shellui .gradebar button{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-card);color:var(--play-ink);box-shadow:0 4px 0 var(--play-edge);font-family:var(--play-display)}
.shellui .gradebar button:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.shellui .gradebar button:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.shellui .gr2{background:var(--play-accent);color:var(--play-accent-ink)}
.shellui .gr2 .ivl,.shellui .gr2 kbd{color:var(--play-accent-ink)}

@media (max-width:700px){
  .dr-side{display:none}
}
@media (prefers-reduced-motion: reduce){
  .shellui .gradebar button{transition:none}
}

/* ---- 21c: the answering rules, on the card ------------------------------
   The frame draws this as a 330px right-hand column. It ships below the card
   instead: .dr-side is display:none under 700px, so a rules panel inside it
   would be unreachable on a phone — and these are the rules you most need on
   the device where the keyboard is hardest to find. Dismissible, and the
   choice is remembered. */
.dr-rules{
  margin-top:14px;border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-card);padding:12px 14px;
}
.dr-rules-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dr-rules-hd b{font-family:var(--play-display);font-weight:400;font-size:.95rem;color:var(--play-ink)}
.dr-rules-hd.is-second{margin-top:10px;border-top:2px dashed var(--play-track);padding-top:10px}
.dr-ruleshide{
  margin-left:auto;border:2px solid var(--play-ink);border-radius:999px;
  background:var(--play-card);color:var(--play-mute);cursor:pointer;
  font-family:var(--play-display);font-size:.7rem;padding:1px 12px;
}
.dr-ruleshide:hover{color:var(--play-ink)}
.dr-ruleshide:focus-visible,.dr-ruleshow:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.dr-ruleshow{
  display:inline-block;margin-top:14px;border:2px solid var(--play-ink);
  border-radius:999px;background:var(--play-card);color:var(--play-ink);
  cursor:pointer;font-family:var(--play-display);font-size:.8rem;padding:3px 14px;
}
.dr-ruleshow:hover{background:var(--play-paper)}
.dr-keyrow{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:.85rem;color:var(--play-mute)}
.dr-keys{display:flex;gap:3px;flex:none}
.dr-keys kbd{
  border:2px solid var(--play-ink);border-radius:6px;background:var(--play-card);
  box-shadow:0 3px 0 var(--play-edge);padding:1px 9px;font-family:var(--play-display);
  font-size:.75rem;color:var(--play-ink);
}
.dr-pairs{display:flex;gap:5px;flex-wrap:wrap}
.dr-pair{font-size:.82rem;white-space:nowrap}
.dr-rules-note{
  font-size:.82rem;color:var(--play-mute);line-height:1.5;margin:8px 0 0;
}
.dr-rules-note.is-dev{border-top:2px dashed var(--play-track);padding-top:8px}
.dr-rules-note b{color:var(--play-ink)}