/* The classic trainer in the game's 8-bit look (Dafa, 10 Nov 2026): catcher.css gives the palette, fonts, buttons and header; this file only lays out the trainer. The staff sits on a cream sheet, dark ink on paper, so notation reads the way it does in a book. */
.trainer{--paper:#efe6c8;--paper-edge:#c9bd98;--ink:#26211a;--staff:#8c8268}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.trainer .brand small{font:12px 'Galmuri11',sans-serif;color:var(--orange);margin-inline-start:6px}
.trainer nav .nav{border:0;background:none;color:var(--muted)}.trainer nav .nav.active{color:var(--lime)}
.lang select{min-height:44px;background:var(--well);color:var(--text);border:1px solid var(--line);font:inherit;padding:0 8px}
.trainer .intro{align-items:flex-end}.lead{color:var(--muted);margin:12px 0 0;line-height:1.6}
.round-label{display:flex;flex-direction:column;align-items:flex-end;gap:6px;border:1px solid var(--line);padding:14px 16px;background:var(--well)}
.round-label b{font:16px 'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;color:var(--lime)}.round-label small{color:var(--muted)}
.workspace{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;margin-top:8px}
.section-label{color:var(--lime);letter-spacing:1px;margin:0 0 10px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:24px}
.seg button,.level{flex-direction:column;align-items:flex-start;gap:8px;background:var(--well);border:1px solid var(--line);color:var(--text-soft);text-align:start;padding:12px}
.seg button small,.level small{display:block;color:var(--muted)}
.seg button.selected,.level.selected{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);box-shadow:3px 3px 0 var(--lime-shadow)}.seg button.selected small,.level.selected small{color:var(--lime-ink)}
#levels{display:flex;flex-direction:column;gap:6px}.level{flex-direction:row;align-items:center;gap:12px;width:100%}
.bars{display:flex;align-items:flex-end;gap:2px;height:16px;width:22px}.bars i{display:block;width:6px;background:currentColor}.bars i:nth-child(1){height:6px}.bars i:nth-child(2){height:11px}.bars i:nth-child(3){height:16px}
button:disabled{opacity:.45;cursor:default}
.tip{margin-top:24px;border-inline-start:3px solid var(--orange);padding:4px 12px;color:var(--muted);line-height:1.6}.tip strong{color:var(--text);font-weight:700}
.game{background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 12px 50px var(--shadow);padding:18px}
.game-top{display:flex;justify-content:space-between;color:var(--muted);letter-spacing:1px}.live b{font:16px 'Press Start 2P',monospace;color:var(--orange)}
.scoreline{display:flex;gap:36px;margin:14px 0}.scoreline small{display:block;color:var(--muted);margin-bottom:6px}.scoreline b{font:24px 'Press Start 2P',monospace;color:var(--lime)}
.paper{background:var(--paper);color:var(--ink);border:3px solid #1b140f;box-shadow:inset 0 -4px 0 var(--paper-edge);padding:14px 16px;text-align:center}
#prompt{font-weight:700}#notation svg{display:block;width:100%;max-width:420px;margin:6px auto}#feedback{color:#5a4e38;min-height:1.4em}
#answers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
#answers button{justify-content:flex-start;gap:10px;background:var(--well);border:1px solid var(--line);color:var(--text);padding:14px 12px;text-align:start}
#answers button small{color:var(--lime);font:12px 'Press Start 2P',monospace}
#answers button.good{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}#answers button.good small{color:var(--lime-ink)}
#answers button.bad{border-color:var(--orange);color:var(--orange)}
.primary{margin-top:14px;background:var(--lime);color:var(--lime-ink);border:0;padding:16px 28px;box-shadow:4px 4px 0 var(--lime-shadow);font-weight:700}.primary:hover{background:var(--lime-hover)}
.game-foot{margin-top:12px;color:var(--muted)}
.bottom{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:28px 0;padding:16px 18px;border:1px solid var(--line);background:var(--well)}.bottom span{color:var(--lime);letter-spacing:1px}.bottom p{flex:1;color:var(--muted);margin:0;min-width:200px}
#viewStats,#reset{background:none;border:1px solid var(--line);color:var(--lime)}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:20px 0}.summary div{background:var(--paper);color:var(--ink);border:3px solid #1b140f;box-shadow:inset 0 -4px 0 var(--paper-edge);padding:12px}.summary b{display:block;font:24px 'Press Start 2P',monospace;margin-bottom:8px}.summary span{color:#5a4e38}
.stat-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.stat-controls select{min-height:44px;background:var(--well);color:var(--text);border:1px solid var(--line);font:inherit;padding:0 8px}
#insight{color:var(--text-soft);margin-bottom:12px;line-height:1.6}
.statrow{display:grid;grid-template-columns:minmax(120px,1.4fr) 2fr 56px minmax(90px,1fr);gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.track{height:10px;background:var(--track)}.track div{height:100%;background:var(--lime)}.statrow small{color:var(--muted)}
.empty{color:var(--muted);padding:24px 0;line-height:1.6}.privacy{color:var(--muted);line-height:1.6}
@media(max-width:760px){.workspace{grid-template-columns:1fr}.trainer .intro{flex-direction:column;align-items:flex-start}.round-label{align-items:flex-start}.statrow{grid-template-columns:1fr 56px}.statrow .track{grid-column:1/-1;grid-row:2}.statrow small{grid-column:1/-1}}
.level{justify-content:flex-start}.round-label{flex:none;max-width:100%}.round-label small{white-space:normal;text-align:end}