/* Óraeleji feladat a táblára (/tanaroknak/, 2026-10-20): kártya az oldalon + teljes képernyős, világos kivetítés. Viselkedés: tabla.js */
.tb-body{max-width:860px;margin:0 auto}
.tb-topics,.tb-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tb-levels{margin-top:10px}
.tb-topics button,.tb-levels button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg-2);font:inherit;font-size:13.5px;cursor:pointer}
.tb-levels button{min-height:44px;font-size:13.5px}
.tb-topics button[aria-pressed="true"],.tb-levels button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.tb-board{margin-top:22px;min-height:220px}
.tb-card{padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.tb-chips{display:flex;gap:6px;flex-wrap:wrap}
.tb-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);border-radius:999px;padding:2px 9px}
.tb-chips span+span{color:var(--muted);border-color:var(--line)}
.tb-card h3{margin:12px 0 8px;font:700 clamp(19px,2.4vw,24px)/1.2 var(--display)}
.tb-card p{margin:0 0 10px;color:var(--fg-2);font-size:clamp(15px,1.8vw,17px);line-height:1.5}
.tb-card .tb-fig{display:block;width:100%;max-width:440px;height:auto;margin:8px auto 4px;background:#0c121b;border:1px solid var(--line);border-radius:12px}
.tb-card .tb-count{margin:8px 0 0;font:500 12px/1 var(--mono);color:var(--muted);text-align:right}
.tb-load{padding:40px 0;text-align:center;color:var(--muted)}
.tb-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.tb-more{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:16px;font-size:14.5px;text-align:center}
@media (max-width:560px){.tb-actions .btn{flex:1 1 100%}.tb-topics{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.tb-topics button{flex:0 0 auto}}

/* kivetítés: világos háttér (projektoron a sötét rosszul látszik), nagy betű */
.tb-noscroll{overflow:hidden}
.tb-proj{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#fbfaf6;color:#141821;font-family:var(--body);outline:none}
.tb-proj[hidden]{display:none}
.tb-p-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,3vw,40px);font:600 clamp(13px,1.3vw,17px)/1.2 var(--mono);color:#5b6475;letter-spacing:.03em}
.tb-p-tools{display:flex;align-items:center;gap:10px}
.tb-p-tools button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #d6d3c8;background:#fff;color:#2a303c;font:inherit;cursor:pointer}
.tb-p-clock{font:700 clamp(20px,2.4vw,32px)/1 var(--mono);color:#141821;min-width:4ch;text-align:right}
.tb-p-clock.out{color:#b4401c;font-size:clamp(15px,1.6vw,22px)}
.tb-p-main{flex:1;display:flex;gap:clamp(20px,3vw,56px);align-items:flex-start;justify-content:center;padding:clamp(8px,2vh,28px) clamp(16px,4vw,72px);overflow:auto}
.tb-p-task{flex:1 1 auto;max-width:1100px}
.tb-p-task.side{flex:1 1 52%}
.tb-p-task h2{margin:0 0 .5em;font:700 clamp(28px,3.6vw,56px)/1.12 var(--display);letter-spacing:-.01em}
.tb-p-task p{margin:0;font-size:clamp(22px,2.6vw,40px);line-height:1.35}
.tb-p-task .tb-fig{display:block;width:100%;max-width:min(760px,100%);max-height:44vh;height:auto;margin:clamp(12px,2vh,28px) auto 0}
.tb-p-task.side p{font-size:clamp(19px,2vw,30px)}
.tb-p-task.side h2{font-size:clamp(24px,2.6vw,40px)}
.tb-p-task.side .tb-fig{max-height:34vh}
.tb-p-sol:empty{display:none}
.tb-p-sol{flex:1 1 44%;max-width:760px}
.tb-p-ans{margin:0 0 .6em;padding:.45em .7em;border-radius:14px;background:#e9f6ef;border:2px solid #13724c;font-size:clamp(24px,2.8vw,44px);line-height:1.2}
.tb-p-ans b{color:#13724c}
.tb-p-steps{display:flex;flex-direction:column;gap:.5em}
.tb-p-idea{margin:0;color:#5b6475;font-style:italic;font-size:clamp(17px,1.7vw,26px);line-height:1.35}
.tb-p-step{margin:0;padding:.35em .6em;border-left:5px solid #f5b32b;background:#fff;border-radius:6px;font-size:clamp(19px,2vw,32px);line-height:1.35}
.tb-p-step.new{animation:tb-in .35s ease-out}
@keyframes tb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tb-p-step.new{animation:none}}
.tb-p-bar{display:flex;gap:12px;justify-content:center;align-items:center;padding:12px clamp(16px,3vw,40px) 4px}
.tb-p-bar button{min-height:52px;padding:0 22px;border-radius:999px;border:1px solid #d6d3c8;background:#fff;color:#2a303c;font:600 clamp(15px,1.4vw,19px)/1 inherit;font-family:inherit;cursor:pointer}
.tb-p-bar .tb-p-go{min-width:min(320px,60vw);background:#f5b32b;border-color:#e2a21c;color:#1c1405;font-weight:700}
.tb-p-bar button:disabled{opacity:.4;cursor:default}
.tb-p-bar button:focus-visible,.tb-p-tools button:focus-visible{outline:3px solid #1f5fa8;outline-offset:2px}
.tb-p-keys{margin:0;padding:6px 0 12px;text-align:center;font:500 12.5px/1.3 var(--mono);color:#8a90a0}
@media (max-width:900px){.tb-p-main{flex-direction:column;align-items:stretch}.tb-p-task.side,.tb-p-sol{flex:none;max-width:none}}
@media (max-width:560px){.tb-p-keys{display:none}.tb-p-bar{flex-wrap:wrap}.tb-p-bar .tb-p-go{order:-1;flex:1 1 100%}.tb-p-bar .tb-p-back,.tb-p-bar .tb-p-skip{flex:1 1 40%}.tb-p-top{flex-wrap:wrap}}