/* Ders oynatici: tahta, ogretmen ekrani, basili kart */
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('fonts/Fredoka-600-5.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('fonts/Fredoka-600-4.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url('fonts/Fredoka-700-8.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url('fonts/Fredoka-700-7.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
button,.btn{font:inherit;cursor:pointer}

/* ---------- TAHTA ---------- */
body[data-mode=board]{background:#17301f;color:#f3f7f2;font-family:'Fredoka','Baloo 2',system-ui,sans-serif;overflow:hidden}
#board{height:100%;display:flex;flex-direction:column}
#board header{display:flex;align-items:center;gap:16px;padding:10px 20px;background:rgba(0,0,0,.18)}
#board header .t{font-size:clamp(16px,2vw,24px);font-weight:600;flex:1}
.dots{display:flex;gap:8px}.dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.25)}.dot.past{background:#7cc59c}.dot.on{background:#ffd75a;box-shadow:0 0 0 4px rgba(255,215,90,.3)}
.timer{font-size:clamp(22px,3vw,40px);font-weight:700;color:#ffd75a;min-width:90px;text-align:right;font-variant-numeric:tabular-nums}
#board main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 24px;min-height:0}
.lbl{font-size:clamp(18px,2.4vw,30px);color:#ffd75a;margin-bottom:8px;font-weight:600}
#board footer{display:flex;justify-content:center;gap:10px;padding:8px;opacity:.35;transition:opacity .2s}
#board footer:hover{opacity:1}
@media (hover:none){#board footer{opacity:.9}}
#board footer button.wait{background:#ffd75a;color:#1b2a1f;animation:kewait 1.4s ease-in-out infinite}
@keyframes kewait{0%,100%{box-shadow:0 0 0 0 rgba(255,215,90,.7)}50%{box-shadow:0 0 0 12px rgba(255,215,90,0)}}
#board footer button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:12px;padding:10px 24px;font-size:20px;min-width:64px;min-height:48px}
.fsbtn{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:10px;padding:6px 12px;font-size:18px}.fsbtn.big{font-size:16px;padding:8px 16px;margin-top:4px}
@media (max-width:640px){.active{flex-direction:column;gap:12px}.inst{max-width:92vw;text-align:center;font-size:clamp(24px,5vh,40px)}.opt{min-width:0;padding:10px 16px}}
.card{display:flex;flex-direction:column;align-items:center;gap:8px;max-height:100%}
.bigpic{width:min(46vh,46vw);aspect-ratio:1;background:#fff;border-radius:22px;display:grid;place-items:center;overflow:hidden;border:6px solid #6b4b2a}
.bigpic img{width:100%;height:100%;object-fit:cover}
.bigpic.emo{font-size:min(28vh,28vw);line-height:1}
.bigpic.phrase{background:#244a33;border-color:#ffd75a}.bigpic.phrase .mascwrap{height:88%}
.word{font-size:clamp(34px,7vh,86px);font-weight:700;line-height:1.05;text-align:center}
.sent{font-size:clamp(20px,3.6vh,40px);color:#dfeee3;text-align:center;max-width:90vw}
.cnt{font-size:16px;opacity:.6}
.word .alt{color:#ffd75a;font-size:.7em}
.mascwrap{height:min(40vh,380px);display:flex;justify-content:center;flex:none;max-width:100%}
.masc{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.start{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;justify-content:center;height:100%;padding:20px}
.start h1{font-size:clamp(30px,6vh,64px);margin:0}.start p{font-size:clamp(16px,2.4vh,24px);margin:0;opacity:.85}
.start .hint{font-size:14px;opacity:.5}
.go{background:#ffd75a;color:#1a2a20;border:0;border-radius:18px;padding:14px 40px;font-size:clamp(22px,4vh,36px);font-weight:700;margin-top:10px}
.says{display:flex;flex-direction:column;align-items:center;gap:6px}.says .mascwrap{height:min(28vh,260px)}
.sayres{font-size:clamp(18px,3.2vh,32px);min-height:1.4em;text-align:center;padding:4px 14px;border-radius:12px;max-width:92vw}.sayres.ok{background:rgba(124,197,156,.28)}.sayres.no{background:rgba(224,119,106,.32)}
.saytxt{font-size:clamp(26px,5vh,58px);font-weight:700;text-align:center}
.emo.big{font-size:min(18vh,160px);line-height:1;min-height:1em}
.quiz{display:flex;flex-direction:column;align-items:center;gap:10px}.quiz .bigpic{width:min(38vh,38vw)}
.teams{display:flex;gap:24px;font-size:clamp(20px,3vh,32px)}.teams span{padding:4px 14px;border-radius:12px}.teams .on{background:rgba(255,215,90,.25);outline:3px solid #ffd75a}
.opts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.opt{background:#fff;color:#17301f;border:0;border-radius:16px;padding:12px 26px;font-size:clamp(22px,4vh,44px);font-weight:700;min-width:180px}
.opt b{font-size:.6em;opacity:.45;margin-right:6px}.opt.ok{background:#7cc59c;color:#0e2415}.opt.bad{background:#e0776a;color:#fff;opacity:.7}
.active{display:flex;align-items:center;gap:30px;max-width:95vw}.active .mascwrap{height:min(40vh,380px)}
.inst{font-size:clamp(30px,6.5vh,76px);font-weight:700;line-height:1.15;max-width:60vw}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:min(92vw,110vh)}
.mini{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:clamp(18px,3vh,32px)}.mini .bigpic{width:min(22vh,22vw);border-width:4px}.mini .bigpic.emo{font-size:min(13vh,13vw)}

/* ---------- OGRETMEN ---------- */
body[data-mode=teacher]{background:#f3f5f1;color:#1c2320;font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif}
#teacher{display:grid;grid-template-columns:280px 1fr;height:100%}
#teacher aside{background:#e7eee8;overflow:auto;padding:12px;border-right:1px solid #d6ded7}
#teacher aside h2{font-size:17px;margin:4px 0 8px}#teacher aside h3{font-size:13px;margin:14px 0 4px;color:#2f6f4f;letter-spacing:.02em}
.li{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:6px 8px;color:inherit}
.li:hover{background:#fff}.li.cur{background:#2f6f4f;color:#fff}.li span{opacity:.6}.li small{float:right;opacity:.6}.li em{font-style:normal;color:#2f6f4f;font-size:12px}.li.cur em{color:#cfe9d8}
#teacher section{overflow:auto;padding:18px 24px 40px;max-width:980px}
.head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.head h1{font-size:24px;margin:2px 0 6px}.meta{font-size:13px;color:#5d675f}.target{font-size:15px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.pri,.acts .btn,.ctrl button,.score button,.steps button{border:1px solid #c9d3cb;background:#fff;border-radius:10px;padding:7px 14px;color:#1c2320;text-decoration:none}
.pri{background:#2f6f4f !important;color:#fff !important;border-color:#2f6f4f !important;font-weight:700}
.link{margin:14px 0 8px;padding:8px 12px;border-radius:10px;background:#fdf1e3;font-size:14px}.link.ok{background:#e1f2e6}.link.warn{background:#fde2dc;border:1px solid #f0b3a6}
.ctrl.off button{opacity:.45;cursor:not-allowed}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.answer{background:#fff8d6;border:1px solid #f0dc8a;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:16px}
.score{margin:8px 0;font-size:16px}.score button{padding:2px 10px}
.steps{padding-left:0;list-style:none}.steps li{background:#fff;border:1px solid #dde4dd;border-radius:12px;padding:10px 14px;margin:10px 0}
.steps li.now{border:2px solid #2f6f4f;box-shadow:0 0 0 4px #e1f2e6}.steps li.past{opacity:.6}
.sh{display:flex;gap:10px;align-items:center}.sh span{color:#5d675f;font-size:13px}.sh button{margin-left:auto;padding:2px 10px;font-size:13px}
.steps p{margin:6px 0 0}.steps table{margin-top:6px;border-collapse:collapse;font-size:14px}.steps td{padding:2px 12px 2px 0;border-bottom:1px solid #eef2ee}
.done{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.done span{color:#5d675f;font-size:14px}
@media (max-width:760px){#teacher{grid-template-columns:1fr;height:auto}#teacher aside{max-height:40vh}}

/* ---------- BASILI KART ---------- */
body[data-mode=card]{background:#fff;color:#111;font:14px/1.45 system-ui,'Segoe UI',sans-serif;padding:16px}
.bar{display:flex;gap:10px;margin-bottom:12px}
#card article{max-width:760px;margin:0 auto 24px;border:1px solid #ccc;border-radius:10px;padding:16px 20px;page-break-after:always}
#card h1{font-size:22px;margin:4px 0 8px}#card ol{padding-left:20px}#card li{margin:4px 0}
#card table{border-collapse:collapse;width:100%;margin:8px 0}#card th,#card td{border:1px solid #ccc;padding:4px 8px;text-align:left}
#card .small{font-size:12px;color:#555}
@media print{.bar{display:none}body[data-mode=card]{padding:0}#card article{border:0;padding:0}}

/* gunun sesi + donusumlu oyunlar */
.sound{display:flex;flex-direction:column;align-items:center;gap:10px}
.bigletter{font-size:clamp(70px,16vh,170px);font-weight:700;color:#ffd75a;line-height:1;letter-spacing:.05em}
.hl{color:#ffd75a}
.grid.small{max-width:min(80vw,90vh)}.grid.small .mini .bigpic{width:min(15vh,15vw)}
.mini.q{font-size:min(12vh,12vw);display:grid;place-items:center}
.bigpic.reveal img,.bigpic.reveal{filter:none}.bigpic.reveal>img,.bigpic.reveal>span{filter:blur(var(--blur));transition:filter .6s}
.bigpic.reveal{overflow:hidden}
.opt.picopt{padding:8px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.thumb{width:min(20vh,20vw);height:min(20vh,20vw);object-fit:cover;border-radius:12px;display:block}
.thumbemo{font-size:min(14vh,14vw);line-height:1.2}
.opt .cap{font-size:.6em;color:#17301f}
.rvemo{font-size:min(26vh,26vw);line-height:1;display:block}

.thumbs{font-size:clamp(20px,4vh,40px)!important}
.ws{page-break-before:always;margin-top:18px}
.ws h2{font-size:18px;margin:6px 0}
.bank{display:inline-block;border:1px solid #999;border-radius:6px;padding:2px 8px;margin:2px}
.wsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.wscell{border:1px solid #ccc;border-radius:8px;padding:8px;text-align:center}
.wscell img{width:100%;aspect-ratio:1;object-fit:contain}.wsemo{font-size:70px;display:block}
.wline{border-bottom:2px dashed #888;height:34px;margin:6px 4px 0}
table.chk th{font-size:11px;font-weight:600;vertical-align:bottom}table.chk td{height:22px}
.diffbox{background:#fff;border:1px solid #dde4dd;border-left:5px solid #d9822b;border-radius:10px;padding:8px 14px;margin:10px 0}.diffbox p{margin:4px 0}

.gtabs{display:flex;gap:6px;margin:0 0 8px}.gtab{flex:1;border:1px solid #2f6f4f;background:transparent;color:#2f6f4f;border-radius:8px;padding:6px 8px;font:inherit;font-weight:700;cursor:pointer}.gtab.on{background:#2f6f4f;color:#fff}

.story{max-width:1000px;margin:0 auto;text-align:left}.story h2{font-size:clamp(28px,4vw,48px);margin:0 0 12px;text-align:center}
.slines p{font-size:clamp(22px,3vw,40px);margin:6px 0;opacity:.55}.slines p.now{opacity:1;font-weight:700}
.tfq{font-size:clamp(26px,3.6vw,48px);font-weight:700;margin:10px auto 18px;max-width:1000px;text-align:center}
.xbox{background:#fff;border:1px solid #dde4dd;border-left:5px solid #2f6f4f;border-radius:10px;padding:8px 14px;margin:10px 0}.xbox .tr{color:#6a756d;font-size:.92em}.xbox ol,.xbox ul{margin:6px 0 6px 18px;padding:0}
table.rubric{border-collapse:collapse;width:100%;margin:8px 0;font-size:13px}table.rubric th,table.rubric td{border:1px solid #cfd8cf;padding:4px 6px;vertical-align:top;text-align:left}
.wlines{height:120px;background:repeating-linear-gradient(#fff 0 27px,#9aa 27px 28px);margin:8px 0}

.waitnote{background:#fff6d6;border:1px solid #e8c547;border-radius:10px;padding:8px 12px;margin:8px 0;font-weight:600}
.ctrl button.wait{animation:kewait 1.4s ease-in-out infinite}

.steps button:disabled{opacity:.45;cursor:not-allowed}