/* Gabi skills lessons · same look as Revision: navy frame, light sheet, white cards, yellow main button */
:root{--ink:#0f2438;--ink2:#1b3a57;--y:#ffd43b;--yd:#d1a900;--sheet:#e9f1f8;--l:#c5d6e4;--m:#55708a;--blue:#1f6fb5;--ok:#1f8a5b;--okb:#e2f5ea;--no:#c8452f;--nob:#fdeae5;--near:#fff3c4}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:"Figtree","Segoe UI",Arial,sans-serif;background:var(--ink);color:var(--ink);display:flex;flex-direction:column;height:100vh;overflow:hidden;font-size:17px;line-height:1.4}
@supports(height:100svh){body{height:100svh}}
button,a,input,textarea{font:inherit;color:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h3{font-family:"Montserrat","Figtree",Arial,sans-serif}
/* bar: identical to Revision */
.bar{flex:none;display:flex;align-items:center;gap:12px;height:52px;padding:0 12px;background:var(--ink);color:#fff}
.bar button:focus-visible,.bar a:focus-visible{outline-color:var(--y)}
.home{flex:none;height:36px;padding:0 14px;border-radius:999px;background:var(--ink2);font-weight:700;font-size:15px;text-decoration:none;display:inline-flex;align-items:center}
.home:hover,.arrow:hover,.chip:hover{background:#264d72}
.now{flex:1 1 220px;min-width:0;line-height:1.15}
.now small{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--y);text-transform:uppercase}
.now b{display:block;font-family:"Montserrat","Figtree",Arial,sans-serif;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps{flex:none;display:flex;align-items:center;gap:5px}.steps i{width:10px;height:2px;background:#33536f;border-radius:2px}
.chip{width:34px;height:34px;border-radius:50%;border:0;background:var(--ink2);font-weight:700;font-size:15px;color:#dbe7f1;padding:0}
.chip.seen{background:#2c6a59;color:#fff}.chip.on{background:var(--y);color:var(--ink)}
.arrow{flex:none;height:36px;border:0;border-radius:999px;background:var(--ink2);color:#fff;font-weight:700;font-size:15px;padding:0 14px}
.arrow.next{background:var(--y);color:var(--ink)}.arrow.next:hover{background:#ffe066}
html.embed .home,html.embed .now small{display:none}
html.embed .bar{background:var(--sheet);color:var(--ink);margin:0 8px;border-radius:18px 18px 0 0;height:46px}
html.embed .sheet{border-radius:0 0 18px 18px;padding-top:4px}
html.embed .chip,html.embed .arrow{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--l)}html.embed .chip.seen{background:var(--okb)}html.embed .chip.on,html.embed .arrow.next{background:var(--y);box-shadow:none}html.embed .steps i{background:var(--l)}
html.embed .now b{font-size:17px}
/* sheet */
.sheet{flex:1;min-height:0;margin:0 8px 8px;background:var(--sheet);border-radius:18px;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow:hidden}
.sheet.two{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}.sheet.two.wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.side,.work{min-height:0;background:#fff;border:2px solid var(--l);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;overflow:auto}
.work{gap:8px}.hint{margin:0;font-weight:700;font-size:18px;line-height:1.3}.hint small{display:block;font-weight:500;color:var(--m);font-size:15px}
.act{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.sideT{font-size:15px;color:var(--m);margin-bottom:6px}
.muted{color:var(--m);font-size:15px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:3px 12px;font-size:14px;font-weight:700}
.lab{display:block;font-size:14.5px;color:var(--m);margin-bottom:6px;font-weight:700}
button.main{background:var(--y);border:2px solid var(--y);box-shadow:0 4px 0 var(--yd);border-radius:12px;padding:8px 20px;font-weight:700;font-size:17px;color:var(--ink)}
button.main:hover{background:#ffe066}button.main:disabled{opacity:.45;cursor:default}
button.ghost{background:#fff;border:2px solid var(--l);border-radius:12px;padding:7px 14px;font-weight:600;font-size:15.5px}button.ghost:disabled{opacity:.4;cursor:default}
input,textarea{border:2px solid var(--ink);border-radius:10px;padding:6px 10px;background:#fff;font-weight:600;min-width:0}
.fb{border-radius:12px;padding:8px 14px;font-size:16.5px;line-height:1.35}.fb b{display:block}.fb.ok{background:var(--okb);border:2px solid #9dd3b6}.fb.no{background:var(--nob);border:2px solid #f0b3a6}
.score{font-size:16px}
/* side */
.aud{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.aud span{font-weight:700;font-size:16px}.aud audio{width:100%;height:40px}.aud.inline{margin:0}
.text{font-size:17px;line-height:1.5;overflow:auto;flex:1;min-height:0}.text p{margin:0 0 8px}.text h4{margin:0 0 6px;font-size:17px}
.count{height:8px;border-radius:6px;background:#dbe6ef;overflow:hidden;margin:8px 0}.count u{display:block;height:100%;background:var(--blue);transition:width 1s linear}
.gone{margin:auto;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}.gone b{font-size:22px}
.card{font-size:17px;line-height:1.45}.card h4{margin:0 0 6px;font-size:18px}.card ul{margin:0 0 10px;padding-left:20px}.card p{margin:0 0 8px}.card .ph{display:inline-block;background:#eef4fa;border-radius:8px;padding:2px 8px;margin:2px 2px 2px 0;font-weight:600}
.gate{margin:auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}.gate b{font-size:22px;max-width:18em}
/* quiz */
.qhead{display:flex;justify-content:space-between;align-items:center}
.q{font-size:clamp(21px,2.2vw,27px);font-weight:700;line-height:1.25;margin:2px 0 4px}.q.small{font-size:20px}.q.muted{color:var(--m);font-weight:600}.sub{margin:0;color:var(--m);font-size:16px}
.opts{display:grid;gap:8px;grid-template-columns:1fr 1fr}.opts.n3{grid-template-columns:repeat(3,1fr)}.opts.n5,.opts.n6{grid-template-columns:repeat(3,1fr)}.opts.c1{grid-template-columns:1fr}.opts.c4{grid-template-columns:repeat(4,1fr)}
.opts button{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;font-weight:700;font-size:18px;text-align:center}
.opts button:hover:not(:disabled){background:#fff6cf}.opts button.ok{background:var(--okb);border-color:var(--ok)}.opts button.no{background:var(--nob);border-color:var(--no)}.opts button.dim{opacity:.7}
.end{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;flex:1;min-height:0}.end h3{font-size:26px;margin:8px 0 4px}.end p{margin:0 0 12px;color:var(--m)}
.review{min-height:0;display:flex;flex-direction:column}.review ol{margin:6px 0 0;padding:0 4px 0 0;list-style:none;overflow:auto;display:flex;flex-direction:column;gap:6px}
.review li{border:2px solid var(--l);border-radius:10px;padding:5px 10px;font-size:15.5px;line-height:1.3}.review li span{display:block}.review em{font-style:normal;font-weight:700;color:var(--ok)}.review small{color:var(--m);margin-left:8px}
.clean{align-self:center;color:var(--ok);font-weight:700}
/* gaps */
.gaps{margin:0;padding:0 0 0 24px;display:flex;flex-direction:column;gap:6px;font-size:17.5px;overflow:auto;min-height:0}.gaps.two{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.gaps.dense{font-size:16.5px;gap:4px}.gaps li{line-height:1.5}.gaps input{width:150px;margin:0 6px;padding:3px 9px;font-size:inherit}.gaps input.long{width:min(100%,460px);display:block;margin:3px 0 0}
.gaps li.ok input{background:var(--okb);border-color:var(--ok)}.gaps li.no input{background:var(--nob);border-color:var(--no)}.gaps li.near input{background:var(--near);border-color:#c9a400}
.gaps em{display:block;font-style:normal;color:var(--ok);font-weight:700;font-size:15.5px}
form[data-form]{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
/* pick */
.pick{display:flex;flex-wrap:wrap;gap:8px}.pick button{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px 14px;font-weight:700;font-size:17px;text-align:left}
.pick button.on{background:#fff6cf;box-shadow:0 0 0 2px var(--ink)}.pick button.ok{background:var(--okb);border-color:var(--ok)}.pick button.no{background:var(--nob);border-color:var(--no)}.pick button.missed{border-style:dashed;border-color:var(--ok)}
.pick small{display:block;font-weight:500;font-size:14.5px;color:var(--m)}
/* order */
.order{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0}.order>div{display:flex;flex-direction:column;gap:6px}
.order button{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:7px 12px;font-weight:700;font-size:16.5px;text-align:left}.order button:disabled{opacity:.3}
.order ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:6px}.order li{min-height:38px;border:2px dashed var(--l);border-radius:10px;padding:5px 10px;font-weight:700;font-size:16.5px}
.order li small{display:block;font-weight:600;color:var(--m);font-size:13.5px}.order li.ok{border:2px solid var(--ok);background:var(--okb)}.order li.no{border:2px solid var(--no);background:var(--nob)}.order li em{display:block;font-style:normal;color:var(--ok);font-size:15px}
/* talk */
.talk{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:14px;align-items:center}
.tcard{border:2px solid var(--ink);border-radius:16px;padding:12px 16px;background:#fffdf3;display:flex;flex-direction:column;gap:8px;min-height:150px}
.timer{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}.timer svg{width:92px;height:92px;transform:rotate(-90deg)}
.timer .tr{fill:none;stroke:#dbe6ef;stroke-width:8}.timer .tf{fill:none;stroke:var(--blue);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.timer b{position:absolute;top:29px;font-size:26px;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips .lab{width:100%;margin:0}.chips button{background:#fff;border:2px solid var(--l);border-radius:999px;padding:4px 12px;font-weight:600;font-size:15.5px}.chips button.on{background:var(--okb);border-color:var(--ok)}
.nav3{margin-top:auto;justify-content:space-between}
/* map */
.map{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center}.hub{width:110px;height:110px;border-radius:50%;background:var(--y);box-shadow:0 5px 0 var(--yd);display:grid;place-items:center;font-weight:800;font-size:22px;text-align:center}
.branches{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.branches label{border:2px solid var(--l);border-left:6px solid var(--blue);border-radius:10px;padding:5px 8px;display:flex;flex-direction:column;gap:4px}
.branches b{font-size:15px}.branches input{font-size:15.5px;padding:3px 8px;border-width:1.5px}
/* write */
.write{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;flex:1;min-height:0}.write textarea{resize:none;font-weight:500;font-size:17px;line-height:1.5;height:100%;min-height:180px}
.wside{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}.wside b.ok{color:var(--ok)}.wside ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:15px}
.wside li{padding-left:22px;position:relative;color:var(--m)}.wside li::before{content:"";position:absolute;left:2px;top:5px;width:12px;height:12px;border-radius:50%;border:2px solid var(--l)}.wside li.ok{color:var(--ink);font-weight:600}.wside li.ok::before{background:var(--ok);border-color:var(--ok)}
@media(max-width:1000px){.now small{display:none}.now b{font-size:16px}.chip{width:28px;height:28px;font-size:13px}.steps{gap:3px}.steps i{width:5px}}
@media(max-width:820px){body{height:auto;overflow:auto}.sheet,.sheet.two,.sheet.two.wide{grid-template-columns:1fr;overflow:visible}.steps i{display:none}.chip{width:24px;height:24px;font-size:12px}.home span{display:none}.bar{gap:6px;padding:0 6px}.end,.order,.write,.gaps.two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.total{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;align-items:center}.total ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.total li{display:flex;justify-content:space-between;gap:12px;border:2px solid var(--l);border-radius:10px;padding:6px 12px;font-size:17px}.total li.wait b{color:var(--m);font-weight:600}
.sum{text-align:center;display:flex;flex-direction:column;gap:8px}.sum b{font-family:"Montserrat","Figtree",Arial,sans-serif;font-size:54px;line-height:1}.sum span{color:var(--m)}

.tag{align-self:flex-start}
.gaps.dense{gap:3px}.gaps.dense li{line-height:1.3}.gaps.dense input.long{padding:2px 9px;margin-top:2px}
@media(max-height:620px){.work{padding:10px 14px;gap:6px}.hint{font-size:17px}.gaps.dense{font-size:16px}}
.branches label{min-width:0}.branches input{width:100%}
.text{font-size:15.5px;line-height:1.38}.text p{margin:0 0 5px}
.end{grid-template-rows:minmax(0,1fr)}.review{overflow:hidden}
.sheet.two.wide{grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr)}
.sheet.wide .text{column-count:2;column-gap:22px;font-size:16px;line-height:1.4}.sheet.wide .text p{break-inside:avoid}
.order.compact{grid-template-columns:1fr}.order.compact button{display:flex;gap:10px;align-items:center}.order.compact button:disabled{opacity:1}
.order.compact i{flex:none;width:28px;height:28px;border-radius:50%;background:#eef4fa;display:grid;place-items:center;font-style:normal;font-weight:800}
.order.compact button.picked i{background:var(--y)}.order.compact button.ok{background:var(--okb);border-color:var(--ok)}.order.compact button.no{background:var(--nob);border-color:var(--no)}.order.compact small{margin-left:auto;color:var(--ok);font-weight:700}
.review ol{flex:1;min-height:0}

/* ===== visual layer: stage colours, radio player, photos, mail, chat ===== */
.sheet{--acc:#2f7fd0;--accb:#eaf2fc;--accd:#1c5fa3}
.sheet[data-stage="0"]{--acc:#e8ad00;--accb:#fff7da;--accd:#a37900}
.sheet[data-stage="1"]{--acc:#2f7fd0;--accb:#eaf2fc;--accd:#1c5fa3}
.sheet[data-stage="2"]{--acc:#12a394;--accb:#e3f6f3;--accd:#0b7a6e}
.sheet[data-stage="3"]{--acc:#ef6a45;--accb:#fdeee8;--accd:#b9441f}
.sheet[data-stage="4"]{--acc:#7a5fd0;--accb:#f0ecfb;--accd:#553da6}
.sheet[data-stage="5"]{--acc:#e58f1e;--accb:#fdf1df;--accd:#a8640b}
.work{border-color:var(--l);border-top:6px solid var(--acc);padding-top:10px}
.side{background:var(--accb);border-color:transparent}
.sheet:not(.two) .work{max-width:1000px;width:100%;margin:0 auto}
.tag{background:var(--accd)}.lab{color:var(--accd)}.sideT{color:var(--accd);font-weight:700}
.timer .tf{stroke:var(--acc)}.count u{background:var(--acc)}
.q{padding:12px 16px;background:var(--accb);border-radius:14px;border-left:6px solid var(--acc)}.tcard .q,.bubble+.q{background:none;border:0;padding:0}
.tcard{background:var(--accb);border-color:var(--acc)}
.opts button{min-height:54px}
.gate b{color:var(--accd)}
/* player */
.pl{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;background:#fff;border:2px solid var(--l);border-radius:14px;padding:8px 10px;margin-bottom:8px}
.plb{position:relative;width:46px;height:46px;border-radius:50%;border:0;background:var(--y);box-shadow:0 4px 0 var(--yd);flex:none}
.plb::after{content:"";position:absolute;left:18px;top:13px;border-left:15px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent}
.pl.on .plb::after{left:14px;top:13px;width:5px;height:20px;border:0;border-left:6px solid var(--ink);border-right:6px solid var(--ink);box-sizing:content-box}
.plm{min-width:0}.plm span{display:block;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plm em{display:block;font-size:13.5px;color:var(--m)}
.plt{height:10px;border-radius:6px;background:#dbe6ef;overflow:hidden;cursor:pointer;margin-top:5px}.plt u{display:block;height:100%;width:0;background:var(--acc)}
.pltime{font-size:14px;font-variant-numeric:tabular-nums;color:var(--m);white-space:nowrap}
.plr{border:2px solid var(--l);background:#fff;border-radius:999px;padding:4px 10px;font-weight:700;font-size:14px}
.eq{display:none;gap:2px;align-items:flex-end;height:18px;grid-column:1/-1;justify-content:center}.eq s{width:4px;height:6px;background:var(--acc);border-radius:2px}
.pl.on .eq{display:flex}.pl.on .eq s{animation:eq .7s infinite alternate}.pl.on .eq s:nth-child(2){animation-delay:.15s}.pl.on .eq s:nth-child(3){animation-delay:.3s}.pl.on .eq s:nth-child(4){animation-delay:.1s}.pl.on .eq s:nth-child(5){animation-delay:.25s}
@keyframes eq{to{height:18px}}
.bubble.in{max-width:520px}.bubble.in .pl{border-radius:18px 18px 18px 4px;margin:0;border-color:var(--acc)}
.opts.chat{grid-template-columns:1fr;justify-items:end}.opts.chat button{border-radius:18px 18px 4px 18px;max-width:560px;width:100%;text-align:left;padding-left:18px}
/* radio look */
.side.look-radio{background:var(--ink);color:#fff}.side.look-radio .sideT{color:#9fd8ff}.side.look-radio .pl{background:#16324c;border-color:#2b4b68}.side.look-radio .plm span{color:#fff}.side.look-radio .plt{background:#2b4b68}.side.look-radio .pltime{color:#c5d6e4}.side.look-radio .plr{background:#16324c;border-color:#2b4b68;color:#fff}
.onair{align-self:flex-start;display:flex;align-items:center;gap:7px;border:2px solid #3b5a78;border-radius:999px;padding:2px 12px;font-weight:800;font-size:13px;letter-spacing:.06em;margin-bottom:8px;color:#9fb6c9}
.onair i{width:9px;height:9px;border-radius:50%;background:#5b7186}.side.live .onair{color:#fff;border-color:#ff5a47}.side.live .onair i{background:#ff5a47;box-shadow:0 0 0 4px rgba(255,90,71,.28)}
.people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:6px}.people div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.people img,.people .mono{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover}.people b{font-size:14px}
.mono{display:grid;place-items:center;background:#24476a;color:#fff;font-style:normal;font-weight:800;font-size:26px;font-family:"Montserrat","Figtree",Arial,sans-serif}
.people.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* photos */
.photo{margin:8px 0 0;flex:1;min-height:90px;position:relative;border-radius:14px;overflow:hidden}.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo.full{margin:0}.sheet.pic .side{padding:0;overflow:hidden;border:0}.sheet.pic .photo{border-radius:16px}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-weight:700;font-size:16px;background:linear-gradient(transparent,rgba(9,22,36,.82))}
.sheet.two.pic{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
/* mail */
.mailHead{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px 12px 0 0;padding:8px 12px;border-bottom:2px solid var(--l)}
.mailHead img,.mailHead .mono{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;font-size:20px}.mailHead b{display:block;font-size:16.5px}.mailHead span{display:block;font-size:14px;color:var(--m)}.mailHead em{margin-left:auto;font-size:13.5px;color:var(--m)}
.side.look-mail .text{background:#fff;border-radius:0 0 12px 12px;padding:10px 14px}.side.look-mail{background:var(--accb)}
.mailHead.compose{border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0}.mailHead.compose+.write textarea{border-radius:0 0 10px 10px}
/* cloze + free */
.cloze{margin:0;font-size:18px;line-height:2.05}.ig{display:inline-block;position:relative}.ig input{width:62px;text-align:center;padding:1px 4px;font-size:17px;border-width:2px}
.ig.ok input{background:var(--okb);border-color:var(--ok)}.ig.no input{background:var(--nob);border-color:var(--no)}.ig em{position:absolute;left:0;right:0;top:-15px;text-align:center;font-style:normal;font-size:12.5px;font-weight:800;color:var(--ok);line-height:1;white-space:nowrap}
.gaps.free{list-style:none;padding:0;gap:10px}.gaps.free li span{font-weight:700}.afterNote{margin:0;padding:10px 14px;border-radius:12px;background:var(--accb);font-weight:600}
@media(max-width:820px){.people{grid-template-columns:repeat(5,1fr)}.photo{min-height:160px}}
@media(prefers-reduced-motion:reduce){.pl.on .eq s{animation:none;height:12px}}

/* homework: send to teacher */
.send .wside{gap:8px}.send .todo{color:#b45309}.send .ok{color:#1d7a55}.codeBox{width:100%;border:1.5px dashed #9fb3c8;border-radius:10px;padding:8px 10px;font:600 12px ui-monospace,Consolas,monospace;color:#0a2b52;background:#f4f8fc}

/* explain: question first, then the rule; the matching words light up in the text */
.text mark{background:none;color:inherit;border-radius:4px;transition:background .2s}
.text mark.lit{background:var(--y);box-shadow:0 0 0 2px var(--y)}
.text .pn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;margin-right:6px;vertical-align:1px}
.fb.rule span{font-size:17.5px}.fb.rule em{display:block;margin-top:4px;font-style:normal;font-weight:700;color:var(--ink)}
.exEnd{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}.exEnd ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;overflow:auto;min-height:0}
.exEnd li{border:2px solid var(--l);border-radius:10px;padding:4px 10px;font-size:15.5px;line-height:1.3}.exEnd li b{margin-right:8px}
.card a.link{display:inline-block;margin-top:4px;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:7px 14px;font-weight:700;color:var(--ink);text-decoration:none}
.card .weak{background:#fff;border-radius:12px;padding:10px 14px;font-size:17px;line-height:1.45}
@media(max-height:620px){.sheet.wide .text{font-size:15.5px}}
.text mark.pn{display:inline-grid;color:#fff;background:var(--ink)}.text mark.pn.lit{background:var(--y);color:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.exEnd li{display:block;font-size:15.5px;padding:3px 10px;line-height:1.25}.exEnd li b{display:block;font-size:13px;color:var(--accd,var(--m));text-transform:uppercase;letter-spacing:.05em}.exEnd ol{display:grid;grid-template-columns:1fr 1fr;gap:5px}.exEnd li:last-child{grid-column:1/-1}
.pick.notes button{padding:6px 12px}
.fb span b,.fb em b{display:inline}
/* bomb game */
.bomb-start{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;margin:auto 0}
.bomb-start h3{font:800 30px/1.15 Montserrat,sans-serif;margin:8px 0}.bomb-start p{font-size:18px;color:var(--m);margin:0 0 14px}
.bomb-play{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:center;position:relative;flex:1;min-height:0}
.bomb-q{display:flex;flex-direction:column;gap:10px;min-width:0}
.bombsvg{width:100%;max-width:200px;display:block;overflow:visible}
.bombsvg text{font:800 40px Montserrat,sans-serif;fill:#ffd23f}
.bombsvg .spark{fill:#ff8a1f;filter:drop-shadow(0 0 6px #ffb347);animation:spark .25s infinite alternate}
@keyframes spark{to{r:4;fill:#ffd23f}}
.bomb-box.hot .bombsvg{animation:throb .5s infinite}.bomb-box.hot .bombsvg text{fill:#ff4d5e}
@keyframes throb{50%{transform:scale(1.07)}}
.bomb-play.ok .bombsvg text{fill:#3ddc97}.bomb-play.ok .bombsvg .spark,.bomb-play.ok #bfuse{display:none}
.bomb-play.boom .bombsvg{opacity:.18;filter:grayscale(1)}.bomb-play.boom .spark{display:none}
.bomb-play.boom .bomb-box,.bomb-play.boom .bomb-q{animation:bshake .55s}
@keyframes bshake{10%,50%,90%{transform:translate(-9px,4px)}30%,70%{transform:translate(9px,-4px)}100%{transform:none}}
.boomfx{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff6c2 0,#ffd23f 12%,#ff7a1a 26%,#e0262f 40%,rgba(224,38,47,0) 62%);animation:boomfx 1.1s forwards}
.boomfx b{font:900 74px/1 Montserrat,sans-serif;color:#fff;letter-spacing:.04em;text-shadow:0 4px 0 #b3121b,0 0 30px #ff7a1a;transform:rotate(-6deg)}
@keyframes boomfx{0%{opacity:1;transform:scale(.3)}35%{opacity:1;transform:scale(1.1)}75%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
.bomb-in{display:flex;gap:10px}.bomb-in input{flex:1;min-width:0;font-size:22px;padding:8px 14px;border:2px solid var(--l);border-radius:12px}
.bomb-in input.shake{animation:bshake .35s;border-color:#e0262f}
@media(max-width:820px){.bomb-play,.bomb-start{grid-template-columns:120px 1fr;gap:12px}}
/* several activities on one screen */
.work.multi,.work:has(.acts){gap:8px}
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:1;min-height:0}
.acts.c1{grid-template-columns:1fr}.acts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.acts.stack{grid-template-columns:1fr!important;grid-auto-rows:auto}
.act.panel{border:2px solid var(--l);border-radius:14px;padding:8px 12px 10px;min-height:0;overflow:hidden;background:#fff;gap:6px}
.act.panel .pbody{display:flex;flex-direction:column;gap:7px;flex:1;min-height:0}
.ptitle{display:flex;align-items:center;gap:8px;font:800 13px/1.2 Montserrat,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--accd)}
.ptitle i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;letter-spacing:0}
.act.panel .q{font-size:20px;margin:0}
.act.panel .opts button{font-size:16px;min-height:44px;padding:7px 10px}
.act.panel .gaps{font-size:16px}
.act.panel .tcard{min-height:0;padding:10px 14px}
.act.panel .talk{grid-template-columns:minmax(0,1fr) 96px;gap:10px}
.act.panel .timer svg{width:84px;height:84px}
.act.panel .end{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.act.panel .end h3{margin:2px 0}
.act.panel .chips button{font-size:14px;padding:5px 10px}
.act.panel .qhead{margin:0}
.picgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.picgrid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pic{display:flex;flex-direction:column;gap:4px;border:2px solid var(--l);border-radius:12px;padding:4px;background:#fff}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.pic input{width:100%;font-size:15px;padding:4px 7px;border:2px solid var(--l);border-radius:8px;min-width:0}
.pic.ok{border-color:#2f9e6a;background:#eefaf3}.pic.no{border-color:#e0262f;background:#fff1f2}
.pic em{font-style:normal;font-weight:800;color:#1f7a4f;font-size:14px;text-align:center}
.sheet:has(.look-case) .act.panel{border-color:#ffd23f}
/* hearts (floor is lava) */
.hearts{display:inline-flex;gap:3px;margin-right:10px;vertical-align:-1px}.hearts i{font-style:normal;color:#cfd8e0;font-size:18px}.hearts i.on{color:#e0262f}
.end.lava>div:first-child{background:linear-gradient(0deg,#ff7a1a22,transparent);border-radius:14px}
/* match */
.match{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.match>div{display:flex;flex-direction:column;gap:6px}
.match button,.sortpool button,.scol button{background:#fff;border:2px solid var(--l);border-radius:10px;padding:6px 10px;font-size:15.5px;font-weight:600;text-align:left;line-height:1.25}
.match button.on,.sortpool button.on{border-color:var(--acc);background:var(--accb);box-shadow:0 0 0 3px var(--accb)}
.match button.ok,.scol button.ok{border-color:#2f9e6a;background:#eefaf3;color:#1f6b46}
.match button.no,.scol button.no{border-color:#e0262f;background:#fff1f2;animation:bshake .35s}
/* sort */
.sortpool{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;padding:6px;border:2px dashed var(--l);border-radius:12px}
.scols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.scols.c2{grid-template-columns:1fr 1fr}
.scol{border:2px solid var(--acc);border-radius:12px;padding:6px;background:var(--accb);min-height:90px;cursor:pointer}
.scol>b{display:block;font:800 13px Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--accd);margin-bottom:5px}
.scol>div{display:flex;flex-wrap:wrap;gap:5px}
/* error hunter */
.hunt{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:7px;font-size:17px}
.hunt li{line-height:1.9}.hunt button{background:none;border:0;border-bottom:2px dotted #b9c7d3;padding:0 2px;margin:0 2px;font:inherit;cursor:pointer;border-radius:4px}
.hunt button:hover{background:var(--accb)}.hunt button.no{background:#ffe1e4;text-decoration:line-through;color:#b3121b}.hunt button.ok{background:#ffd9a8;color:#7a3c00;font-weight:800}
.hunt em{font-style:normal;color:#1f7a4f;font-weight:800;margin-left:6px}.hunt em small{color:var(--m);font-weight:600}
/* memory */
.memory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.memory.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mcard{aspect-ratio:4/3;border-radius:10px;border:2px solid var(--acc);background:linear-gradient(135deg,var(--acc),var(--accd));color:#fff;display:grid;place-items:center;padding:3px;overflow:hidden;font-weight:800;font-size:15px}
.mcard b{font:800 26px Montserrat,sans-serif;opacity:.85}
.mcard.up{background:#fff;color:var(--ink)}.mcard img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.mcard.ok{border-color:#2f9e6a;box-shadow:0 0 0 3px #bfe9d1}.mcard .d{font-size:13px;font-weight:600;line-height:1.2}
/* jeopardy */
.jboard{display:grid;gap:6px}.jboard>b{font:800 13px Montserrat,sans-serif;text-transform:uppercase;text-align:center;background:var(--ink);color:#ffd23f;border-radius:8px;padding:6px 4px}
.jboard button{background:#2155c4;color:#fff;border:0;border-radius:9px;font:800 22px Montserrat,sans-serif;padding:10px 0;box-shadow:inset 0 -4px 0 #163e93}
.jboard button.used{background:#e7edf3;color:#8aa0b2;box-shadow:none}
.jq{display:flex;flex-direction:column;gap:10px}
/* dropdowns in text */
.ig select{font:inherit;font-size:16px;padding:3px 6px;border:2px solid var(--l);border-radius:8px;background:#fff}
.ig.ok select{border-color:#2f9e6a;background:#eefaf3}.ig.no select{border-color:#e0262f;background:#fff1f2}
/* flashcards */
.fcard{all:unset;cursor:pointer;display:block;flex:1;min-height:0;perspective:1200px}
.fcard .fin{position:relative;display:block;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.fcard.flipped .fin{transform:rotateY(180deg)}
.fcard .ff,.fcard .fbk{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;border:2px solid var(--acc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;background:#fff;overflow:hidden}
.fcard .ff img{width:100%;flex:1;min-height:0;object-fit:cover;border-radius:10px}
.fcard .ff b{font:800 26px/1.1 Montserrat,sans-serif;color:var(--ink)}
.fcard .ff small{color:var(--m);font-size:12px}
.fcard .fbk{transform:rotateY(180deg);background:var(--accb);text-align:center;padding:16px}
.fcard .fbk b{font:800 26px/1.15 Montserrat,sans-serif;color:var(--accd)}
.fcard .fbk span{font-size:18px;line-height:1.35}
.fcard .fbk em{font-size:16px;color:var(--m)}
.act.panel .match button{padding:4px 9px;font-size:14.5px}.act.panel .match>div{gap:4px}
.act.panel .gaps{overflow:visible}
.act.panel .gaps.dense.two{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.act.panel .gaps.dense.two input.long{width:100%}
.act.panel .sortpool button,.act.panel .scol button{padding:4px 9px;font-size:14.5px}
.act.panel .scol{min-height:70px}
.act.panel{padding:6px 10px 8px}.act.panel .pbody{gap:5px}.acts{gap:10px}
.act.panel .tcard .q{font-size:19px}
.act.panel .sortpool,.act.panel .scols,.act.panel .picgrid,.act.panel .gaps,.act.panel .order,.act.panel .hunt,.act.panel .match,.act.panel .memory,.act.panel .row{flex-shrink:0}
.act.panel .cloze{line-height:1.85;font-size:16.5px;margin:0}
.act.panel .order.compact button{padding:6px 10px;min-height:0}
.act.panel .hunt{font-size:16px;gap:3px}.act.panel .hunt li{line-height:1.75}
.act.panel .order.compact button{font-size:15px;padding:5px 9px;gap:6px}.act.panel .order.compact>div{gap:5px}
.act.panel .review{overflow:auto}

/* flash memory: pictures show for a few seconds, then disappear */
.fl-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center;margin:auto 0}
.fl-start h3{font:800 28px/1.15 Montserrat,sans-serif;margin:8px 0}.fl-start p{font-size:18px;color:var(--m);margin:0 0 14px}
.fl-blur{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;filter:blur(7px) grayscale(.3);opacity:.7;border-radius:10px;overflow:hidden}
.fl-blur img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.fl-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.fl-left{font:800 30px Montserrat,sans-serif;color:#e0a100;min-width:34px}
.fl-bar{flex:1;height:10px;border-radius:6px;background:#e6ebf2;overflow:hidden}.fl-bar u{display:block;height:100%;background:#ffd23f;transition:width 1s linear}
.fl-score{font:800 20px Montserrat,sans-serif}
.fl-in{display:flex;gap:8px;flex:1;min-width:220px}.fl-in input{flex:1;font-size:18px;padding:8px 12px;border:2px solid #c9d3e0;border-radius:10px}
.fl-msg{margin:0 0 8px;font-weight:700;font-size:16px}.fl-msg.ok{color:#1d8a5a}.fl-msg.no{color:#c43c4c}
.fl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
.fl-t{position:relative;border-radius:10px;overflow:hidden;min-height:64px;border:2px solid transparent;padding:0;background:#1d2431}
.fl-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fl-t em{position:absolute;left:0;right:0;bottom:0;font:700 14px/1.2 Figtree,sans-serif;font-style:normal;color:#fff;padding:4px 6px;background:rgba(20,30,45,.82);text-align:center}
.fl-t.ok{border-color:#2fbf7f}.fl-t.ok em{background:rgba(29,138,90,.9)}.fl-t.miss{border-color:#e05565}.fl-t.miss em{background:rgba(196,60,76,.92)}
.fl-t.shut{cursor:pointer;background:#24304a;color:#8fa0bd;font:800 22px Montserrat,sans-serif}.fl-t.shut:hover{background:#2f3d5c}
.fl-in button{width:auto;flex:none;margin:0}.fl-top .ghost{flex:none}
.fl-t em{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:clip;letter-spacing:-.01em}
.cloze .wf{font:800 13px Montserrat,sans-serif;color:#9a6a00;letter-spacing:.04em;margin-right:3px}
.act.panel .cloze:has(.wf){line-height:1.95}.cloze:has(.wf) .ig input{width:116px}
.act.panel form.fl-in{display:flex;flex-direction:row;align-items:center;gap:8px}.act.panel form.fl-in button.main{width:auto;flex:none;margin:0;padding:8px 18px}
.act.panel form.fl-in input{height:40px}
.act.panel .cloze:has(.wf){line-height:1.5;font-size:16.5px}.act.panel .cloze:has(.wf) .ig input{width:112px;height:28px;font-size:16px;padding:0 6px;margin:2px 0}
.act.panel .cloze:has(.wf){line-height:1.4;font-size:16px}.act.panel .cloze:has(.wf) .ig input{height:26px;margin:1px 0}

/* ===== Full-screen tasks (15.10.2026): tasks use the whole screen, pictures and answers grow with it ===== */
.sheet:not(.two) .work{max-width:none}
.pbody>form{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.act.panel .picgrid{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}
.act.panel .pic{min-height:0}
.act.panel .pic img{flex:1;min-height:70px;height:auto;aspect-ratio:auto}
.act.panel .pic input{font-size:17px;padding:6px 9px}
.act.panel .memory{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}
.act.panel .opts{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(44px,1fr)}
.act.panel .opts button{font-size:18px}
.act.panel p.q{font-size:clamp(19px,1.6vw,24px)}
/* bigger text in tasks so they fill the screen (not shrunk) */
.act.panel .gaps,.act.panel .gaps.dense{font-size:clamp(18px,calc(.7vw + 1vh),22px);gap:clamp(6px,1.6vh,16px)}
.act.panel .gaps input{width:clamp(150px,13vw,240px);padding:5px 10px}
.act.panel .hunt{font-size:clamp(18px,calc(.7vw + 1vh),22px);gap:clamp(6px,1.8vh,18px)}
.act.panel .cloze,.act.panel .cloze:has(.wf){font-size:clamp(17.5px,calc(.65vw + .95vh),21px);line-height:1.9}
.act.panel .cloze .wf{font-size:14px}
.act.panel .cloze input,.act.panel .cloze select{font-size:inherit}
.act.panel .match button,.act.panel .sortpool button,.act.panel .scol button{font-size:clamp(16px,calc(.55vw + .85vh),20px);padding:7px 12px}
.act.panel .scols{flex:1 1 auto;min-height:120px}
.act.panel .order.compact button,.act.panel .order button{font-size:clamp(16px,calc(.55vw + .85vh),20px);padding:8px 12px}
.act.panel .chips button{font-size:16px;padding:6px 12px}
.act.panel .q{font-size:clamp(20px,calc(.8vw + 1vh),26px)}
.ptitle{font-size:14px}
.fl-blur{width:100%;max-width:none}
.fl-start{grid-template-columns:1fr;gap:14px;align-items:stretch;flex:1;min-height:0;margin:0}
.fl-start .fl-blur{grid-auto-rows:minmax(0,1fr);flex:1;min-height:180px;height:100%}
.fl-start .fl-blur img{width:100%;height:100%;object-fit:cover}
.side .letter,.side .card{font-size:clamp(16px,calc(.6vw + .9vh),20px)}
.side .card li{margin-bottom:4px}
.write textarea{font-size:clamp(17px,calc(.6vw + .9vh),20px)}
.write{grid-template-columns:minmax(0,1fr) 260px}
.write label,.write li{font-size:15.5px}
.act.panel .gaps input{width:clamp(120px,10vw,200px)}
.act.panel .gaps.dense{gap:clamp(4px,1vh,10px)}
/* small/short screens: everything must fit; if it still doesn't, the panel scrolls (never cut off) */
.act.panel .pbody{overflow-y:auto;overflow-x:hidden}
.act.panel .pbody>form{min-height:auto}
.act.panel .opts{grid-auto-rows:minmax(34px,1fr)}
@media(max-height:760px){
 .act.panel .gaps,.act.panel .gaps.dense,.act.panel .hunt{font-size:16.5px;gap:4px}
 .act.panel .gaps input{padding:3px 8px}
 .act.panel .q{font-size:19px}
 .act.panel .opts button{font-size:16.5px;padding:4px 8px}
 .act.panel .match button,.act.panel .sortpool button,.act.panel .scol button{font-size:15.5px;padding:5px 9px}
}
@media(max-height:620px){
 .act.panel .gaps,.act.panel .gaps.dense,.act.panel .hunt{font-size:15.5px;gap:2px}
 .act.panel .opts{grid-auto-rows:minmax(30px,1fr);gap:6px}
 .act.panel .q{font-size:17px}
}
@media(max-height:620px){.act.panel .opts{grid-auto-rows:minmax(26px,1fr);gap:5px}.act.panel .opts button{font-size:15.5px;padding:2px 8px}.act.panel p.q,.act.panel .q{padding:6px 10px}}
@media(max-height:760px){.act.panel .opts:not(.chat):has(>button:nth-child(9)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:760px){.act.panel .cloze,.act.panel .cloze:has(.wf){font-size:16px;line-height:1.55}.act.panel .order button,.act.panel .order.compact button{font-size:15px;padding:4px 10px}.act.panel .order li{min-height:30px;padding:3px 9px}}
@media(max-height:620px){.act.panel .cloze,.act.panel .cloze:has(.wf){font-size:15.5px;line-height:1.45}.act.panel .cloze input{padding:1px 6px}}

/* ===== Large print for Gabi (15.10.2026): Gabi sees small text badly — everything in tasks is big on any screen, nothing shrinks on short screens; if a task does not fit, the panel scrolls ===== */
.hint{font-size:clamp(21px,calc(.7vw + 1.1vh),25px)}.hint small{font-size:clamp(16px,calc(.45vw + .8vh),19px)}
.ptitle{font-size:clamp(16.5px,calc(.4vw + .7vh),18px);gap:10px}.ptitle i{width:26px;height:26px;font-size:14px}
.tag{font-size:clamp(17px,calc(.45vw + .85vh),20px);padding:4px 14px}
.score,.qhead b,.qhead span{font-size:clamp(19px,calc(.5vw + .8vh),21px)}
.lab,.act.panel .lab{font-size:clamp(17px,calc(.45vw + .75vh),19px)}
.muted,.sub{font-size:clamp(16px,calc(.45vw + .8vh),19px)}
.act.panel .q,.act.panel p.q{font-size:clamp(26px,calc(1.1vw + 1.5vh),36px);line-height:1.25;padding:12px 16px}
.act.panel .tcard .q{font-size:clamp(25px,calc(1vw + 1.4vh),34px);padding:0}
.act.panel .opts button,.opts button{font-size:clamp(24px,calc(.9vw + 1.3vh),30px);padding:10px 12px;min-height:60px}
.act.panel .opts{grid-auto-rows:minmax(60px,1fr);gap:10px}
.act.panel .chips button,.chips button{font-size:clamp(19px,calc(.6vw + 1vh),23px);padding:7px 14px}
.act.panel .gaps,.act.panel .gaps.dense,.act.panel .hunt{font-size:clamp(19px,calc(.75vw + 1.05vh),24px);gap:clamp(6px,1.4vh,14px)}
.act.panel .gaps input{padding:5px 10px}
.act.panel .cloze,.act.panel .cloze:has(.wf){font-size:clamp(19px,calc(.7vw + 1vh),23px);line-height:1.85}
.act.panel .cloze .wf{font-size:15px}
.act.panel .match button,.act.panel .sortpool button,.act.panel .scol button,.match button,.sortpool button,.scol button{font-size:clamp(17.5px,calc(.6vw + .95vh),22px);padding:8px 12px}
.scol>b{font-size:15px}
.act.panel .order.compact button,.act.panel .order button{font-size:clamp(17.5px,calc(.6vw + .95vh),22px);padding:8px 12px}
.act.panel .order li{min-height:40px;padding:6px 10px;font-size:clamp(17px,calc(.6vw + .9vh),21px)}
.pic input,.act.panel .pic input{font-size:18px;padding:7px 9px}.pic em{font-size:16px}
.mcard{font-size:18px}.mcard .d{font-size:16px}
.jboard>b{font-size:15px}.jboard button{font-size:26px}
.fcard .ff b,.fcard .fbk b{font-size:clamp(26px,calc(1vw + 1.4vh),34px)}.fcard .fbk span{font-size:clamp(18px,calc(.6vw + 1vh),23px)}.fcard .fbk em{font-size:18px}
.fb{font-size:clamp(17px,calc(.55vw + .9vh),21px)}
.review li,.exEnd li{font-size:17.5px}
.timer svg,.act.panel .timer svg{width:100px;height:100px}.timer b{top:30px;font-size:30px}
.act.panel .talk{grid-template-columns:minmax(0,1fr) 112px}
button.main{font-size:21px;padding:10px 24px}button.ghost{font-size:17.5px;padding:8px 16px}
.side .text,.sheet.wide .text,.side .letter,.side .card{font-size:clamp(17px,calc(.6vw + .95vh),21px);line-height:1.45}
.write textarea{font-size:clamp(18px,calc(.6vw + 1vh),22px)}.write label,.write li,.wside ul{font-size:17px}
.fl-t em{font-size:15px}.fl-msg{font-size:18px}.fl-in input,.bomb-in input{font-size:22px}
.sus q,.clues li,.say li,.side.look-case .clues li{font-size:16.5px}.side.look-case .case{font-size:16px}.sus small{font-size:14.5px}
.now b{font-size:20px}
@media(max-height:760px),(max-height:620px){
 .act.panel .q,.act.panel p.q{font-size:clamp(25px,calc(1.1vw + 1.5vh),34px);padding:10px 14px}
 .act.panel .opts button{font-size:clamp(23px,calc(.9vw + 1.3vh),28px);padding:6px 10px}
 .act.panel .opts{grid-auto-rows:minmax(52px,1fr);gap:8px}
 .act.panel .gaps,.act.panel .gaps.dense,.act.panel .hunt{font-size:20px;gap:6px}
 .act.panel .cloze,.act.panel .cloze:has(.wf){font-size:19px;line-height:1.7}
 .act.panel .match button,.act.panel .sortpool button,.act.panel .scol button,.act.panel .order button,.act.panel .order.compact button{font-size:17.5px;padding:6px 10px}
}

/* отправка по частям: панель в шапке и карточка закрытого задания */
.bar .hwpbar{color:#fff}.bar .hwpnote{color:#c9d9e8}.bar .hwpthis{color:#9be3bf}.bar .hwpok{color:#1e6b4a}
html.embed .bar .hwpbar{color:var(--ink)}html.embed .bar .hwpnote{color:var(--m)}
.sentcard{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--okb);border:2px solid #b9dcc9;border-radius:14px;padding:14px 16px;color:#1e6b4a;font-size:17px}
.sentcard b{font-size:18px}.sentcard span{color:#3d5f4e;font-weight:600}
