/* The Typing Club's keyboard and hands (js/arcade/keyboard.js). Every class starts with .tk- */
.tk { --kw: min(7.6vw, 52px); --fl-lp: #F49AC1; --fl-lr: #FFB863; --fl-lm: #7ED69B; --fl-li: #6EC3F3; --fl-ri: #6EC3F3; --fl-rm: #7ED69B; --fl-rr: #FFB863; --fl-rp: #F49AC1; --fl-th: #C6B3F0;
  display: grid; gap: 10px; justify-items: center; width: 100%; user-select: none; -webkit-user-select: none; }
.tk-compact { --kw: min(7.6vw, 44px); }
.tk-kb { display: grid; gap: 4px; justify-items: start; max-width: 100%; box-sizing: border-box; padding: 8px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-soft), inset 0 0 0 2px var(--line); }
.tk-row { display: flex; gap: 3px; }
@media (min-width: 600px) { .tk-row { gap: 5px; } .tk-kb { padding: 12px; gap: 6px; } }
.tk-r1 { margin-left: calc(var(--kw) * 0.35); }
.tk-r2 { margin-left: calc(var(--kw) * 0.8); }
.tk-r3 { justify-self: center; }
.tk-key { --c: #ddd; position: relative; width: var(--kw); height: calc(var(--kw) * 1.05); padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: color-mix(in srgb, var(--c) 28%, #fff); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c) 70%, #fff), 0 1px 2px rgba(46, 42, 71, 0.15);
  font: 800 calc(var(--kw) * 0.42)/1 var(--font-ui); color: var(--ink); transition: transform 0.08s; touch-action: manipulation; }
.tk-space { width: calc(var(--kw) * 5.4); font-size: calc(var(--kw) * 0.3); color: var(--muted); }
.tk-rest { opacity: 0.45; cursor: default; }
.tk-bump::after { content: ''; position: absolute; left: 32%; right: 32%; bottom: 18%; height: 3px; border-radius: 3px; background: rgba(46, 42, 71, 0.45); }
.tk-key:active { transform: translateY(2px); }
.tk-key.tk-on { background: var(--c); color: #fff; text-shadow: 0 1px 2px rgba(46, 42, 71, 0.35); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 0 18px var(--c); transform: scale(1.12); z-index: 1; animation: tk-glow 1.1s ease-in-out infinite; }
.tk-key.tk-good { background: var(--green); color: #fff; }
.tk-key.tk-bad { background: var(--danger); color: #fff; animation: tk-shake 0.35s; }
.tk-f-lp { --c: var(--fl-lp); } .tk-f-lr { --c: var(--fl-lr); } .tk-f-lm { --c: var(--fl-lm); } .tk-f-li { --c: var(--fl-li); }
.tk-f-ri { --c: var(--fl-ri); } .tk-f-rm { --c: var(--fl-rm); } .tk-f-rr { --c: var(--fl-rr); } .tk-f-rp { --c: var(--fl-rp); } .tk-f-th { --c: var(--fl-th); }

/* two hands, each finger in its own colour; the one to use lights up */
.tk-hands { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; }
.tk-hand { position: relative; display: flex; align-items: flex-end; gap: 3px; padding-bottom: 26px; }
.tk-fg { display: block; width: 15px; border-radius: 9px 9px 5px 5px; background: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: inset 0 0 0 2px var(--c); transition: transform 0.15s; }
.tk-hand-l .tk-fg:nth-child(1), .tk-hand-r .tk-fg:nth-child(5) { height: 30px; }
.tk-hand-l .tk-fg:nth-child(2), .tk-hand-r .tk-fg:nth-child(4) { height: 40px; }
.tk-hand-l .tk-fg:nth-child(3), .tk-hand-r .tk-fg:nth-child(3) { height: 46px; }
.tk-hand-l .tk-fg:nth-child(4), .tk-hand-r .tk-fg:nth-child(2) { height: 41px; }
.tk-hand-l .tk-f-th { height: 24px; transform: rotate(38deg) translate(-3px, 12px); }
.tk-hand-r .tk-f-th { height: 24px; transform: rotate(-38deg) translate(3px, 12px); }
.tk-palm { position: absolute; left: 0; right: 14px; bottom: 0; height: 30px; border-radius: 10px 10px 16px 16px; background: #FCE3D2; box-shadow: inset 0 0 0 2px #F2C9AE; }
.tk-hand-r .tk-palm { left: 14px; right: 0; }
.tk-fg.tk-on { background: var(--c); transform: translateY(-6px); box-shadow: 0 0 0 2px #fff, 0 0 12px var(--c); }
.tk-hand-l .tk-f-th.tk-on { transform: rotate(38deg) translate(-3px, 6px); }
.tk-hand-r .tk-f-th.tk-on { transform: rotate(-38deg) translate(3px, 6px); }
.tk-finger { margin: 0 0 30px; min-width: 120px; max-width: 150px; text-align: center; font: 800 15px/1.2 var(--font-ui); color: var(--grape-d); }

@keyframes tk-glow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 0 4px var(--c); } }
@keyframes tk-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .tk-key.tk-on { animation: none; } .tk-key.tk-bad { animation: none; } }

/* The Typing Club menu (game.js renderTypingMenu) */
.typing-tip { display: flex; gap: 12px; align-items: center; max-width: 640px; margin: 0 auto 14px; padding: 12px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.typing-tip .big { font-size: 34px; line-height: 1; }
.typing-tip p { margin: 0; font-weight: 700; }
.typing-step { display: block; font: 800 13px/1 var(--font-ui); letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.8; margin-bottom: 2px; }