/* Termo do Direito (Termo, Dueto, Quarteto). Classes com prefixo tm-. */
:root{
  --tm-ok:var(--ok); --tm-ok-ink:#fff;
  --tm-pr:var(--amber); --tm-pr-ink:#1d120b;
  --tm-ab:var(--soft); --tm-ab-ink:var(--ink2);
  --tm-key:var(--soft); --tm-key-ab:#cbc0b5;
  --tm-gap:5px;
}
:root[data-theme="dark"]{
  --tm-ok-ink:#0d2314;
  --tm-key-ab:#4b3a2e;
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{--tm-ab:color-mix(in srgb,var(--soft) 80%,var(--ink2) 20%)}
}

.tm-wrap{max-width:520px;margin:0 auto}
.tm-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.tm-title{margin:0;display:flex;align-items:center;gap:10px}
.tm-badge{font:700 .72rem/1 var(--sans);letter-spacing:.02em;background:var(--amber);color:var(--deeper);padding:5px 10px;border-radius:var(--pill);text-transform:none}
.tm-count{font-size:.86rem;font-weight:700;color:var(--ink2);text-align:right}

.tm-help{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px}
.tm-help summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:700;font-size:.92rem}
.tm-help summary::-webkit-details-marker{display:none}
.tm-help summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--ink2)}
.tm-help[open] summary::after{content:"\2212"}
.tm-help-b{padding:0 18px 12px;font-size:.9rem;color:var(--ink2)}
.tm-help-b p{margin:.35em 0}
.tm-leg{display:flex;align-items:center;gap:10px}

.tm-msg{min-height:30px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;font-weight:700;font-size:.92rem;text-align:center}
.tm-msg.on{animation:tm-msg .2s ease-out}
.tm-msg.on{background:var(--deep);color:var(--on-deep);border-radius:var(--pill);padding:4px 16px;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
:root[data-theme="dark"] .tm-msg.on{background:var(--amber);color:var(--deeper)}

/* quadros */
.tm-boards{display:grid;justify-content:center;gap:12px;margin-bottom:12px}
.tm-wrap[data-mode="termo"]{--cell:clamp(40px,calc((100vw - 32px - 24px)/5),54px);--cg:6px}
.tm-wrap[data-mode="dueto"]{--cell:clamp(24px,calc((100vw - 82px)/10.4),34px);--cg:3px}
.tm-wrap[data-mode="quarteto"]{--cell:clamp(20px,calc((100vw - 74px)/10.4),26px);--cg:2px}
@media (min-width:700px){
  .tm-wrap[data-mode="termo"]{--cell:56px}
  .tm-wrap[data-mode="dueto"]{--cell:40px}
  .tm-wrap[data-mode="quarteto"]{--cell:30px}
  .tm-wrap{max-width:640px}
}
.tm-wrap[data-mode="dueto"] .tm-boards,.tm-wrap[data-mode="quarteto"] .tm-boards{grid-template-columns:repeat(2,max-content);column-gap:calc(var(--cell)*.4);row-gap:10px}
.tm-wrap[data-mode="quarteto"] .tm-boards{row-gap:8px}

.tm-bwrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.tm-board{display:grid;gap:var(--cg);padding:calc(var(--cg) + 2px);border:2px solid transparent;border-radius:calc(var(--cell)*.3 + 4px);transition:border-color .3s,background .3s}
.tm-board.is-done{border-color:var(--ok);background:var(--okbg)}
.tm-row{display:grid;grid-template-columns:repeat(5,var(--cell));gap:var(--cg)}
.tm-row.is-dim{opacity:.4}
.tm-wrap[data-mode="termo"] .tm-board{padding:0;border-color:transparent;background:none}

.tm-c{width:var(--cell);height:var(--cell);display:grid;place-items:center;border:2px solid var(--line);border-radius:calc(var(--cell)*.14);background:var(--surface);color:var(--ink);font:800 calc(var(--cell)*.52)/1 var(--head);text-transform:uppercase;user-select:none;box-sizing:border-box}
.tm-row.is-cur .tm-c:not(.is-f){border-color:color-mix(in srgb,var(--ink2) 45%,var(--line))}
.tm-c.is-f{border-color:var(--ink2)}
.tm-c[data-s="c"]{background:var(--tm-ok);border:calc(var(--cell)*.11 + 1px) solid var(--tm-ok);box-shadow:inset 0 0 0 2px var(--tm-ok-ink);color:var(--tm-ok-ink)}
.tm-c[data-s="p"]{background:var(--tm-pr);border-color:var(--tm-pr);border-radius:50%;color:var(--tm-pr-ink)}
.tm-c[data-s="a"]{background:var(--tm-ab);border-color:var(--tm-ab);color:var(--tm-ab-ink)}
.tm-c.tm-mini{--cell:30px;flex:0 0 auto;font-size:.95rem}
.tm-cap{font:700 .74rem/1.2 var(--sans);letter-spacing:.06em;color:var(--ink);min-height:0}
.tm-cap.ok{color:var(--ok)}
.tm-wrap[data-mode="termo"] .tm-cap{font-size:.9rem;margin-top:2px}

/* animacoes (transform e opacity) */
.tm-c.tm-pop{animation:tm-pop .13s ease-out}
.tm-c.tm-flip{animation:tm-flip .3s ease-in-out both;animation-delay:var(--d,0ms)}
.tm-row.tm-shake{animation:tm-shake .4s ease-in-out}
@keyframes tm-pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes tm-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes tm-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes tm-msg{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* teclado */
.tm-kb{display:flex;flex-direction:column;gap:6px;max-width:500px;margin:0 auto}
.tm-kb[hidden]{display:none}
.tm-krow{display:flex;gap:4px;justify-content:center}
.tm-key{flex:1 1 0;min-width:0;height:46px;padding:0;border:0;border-radius:10px;background:var(--tm-key);color:var(--ink);font:800 .95rem/1 var(--sans);display:grid;place-items:center;position:relative;overflow:hidden;touch-action:manipulation;transition:transform .08s}
.tm-key:active{transform:scale(.94)}
.tm-key:focus-visible{outline:3px solid var(--amber);outline-offset:1px}
.tm-key.tm-wide{flex:1.55 1 0;font-size:.7rem;letter-spacing:.02em}
.tm-key .ic{width:22px;height:22px}
.tm-kl{position:relative;z-index:1}
.tm-key[data-n="1"][data-s="c"]{background:var(--tm-ok);color:var(--tm-ok-ink)}
.tm-key[data-n="1"][data-s="p"]{background:var(--tm-pr);color:var(--tm-pr-ink)}
.tm-key[data-n="1"][data-s="a"]{background:var(--tm-key-ab);color:var(--tm-ab-ink);opacity:.8}
/* dueto: duas metades. quarteto: quatro quadrantes. */
.tm-key[data-n="2"][data-s="x"]{background:linear-gradient(90deg,var(--k0) 50%,var(--k1) 50%)}
.tm-key[data-n="4"][data-s="x"]{background:
  linear-gradient(var(--k0),var(--k0)) 0 0/50% 50% no-repeat,
  linear-gradient(var(--k1),var(--k1)) 100% 0/50% 50% no-repeat,
  linear-gradient(var(--k2),var(--k2)) 0 100%/50% 50% no-repeat,
  linear-gradient(var(--k3),var(--k3)) 100% 100%/50% 50% no-repeat}
.tm-key:not([data-n="1"])[data-s="x"] .tm-kl{background:var(--surface);color:var(--ink);min-width:22px;padding:3px 0;border-radius:7px;text-align:center}

/* resultado */
.tm-result{margin-top:4px}
.tm-card{margin-bottom:0}
.tm-rt{font-size:1.5rem;margin-bottom:4px}
.tm-card.won .tm-rt{color:var(--ok)}
.tm-sum{margin:0 0 12px;color:var(--ink2);font-weight:600}
.tm-answers{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.tm-ans{border:1.5px solid var(--line);border-radius:var(--ri);padding:10px 14px;background:var(--surface)}
.tm-ans.ok{border-color:var(--ok);background:var(--okbg)}
.tm-ans.no{background:var(--badbg)}
.tm-ans.no .tm-as{color:var(--bad)}
.tm-ans.ok .tm-as{color:var(--ok)}
.tm-aw{display:flex;align-items:center;justify-content:space-between;gap:10px;font:800 1.1rem/1.2 var(--head);letter-spacing:.04em}
.tm-as{font:700 .72rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.tm-ad{font-size:.92rem;color:var(--ink2);margin-top:3px}
.tm-acts{display:grid;gap:8px;margin-top:12px}
.tm-acts .btn{width:100%}
#termo-extra:empty{display:none}
#termo-extra{margin-top:4px}

@media (prefers-reduced-motion:reduce){
  .tm-c.tm-pop,.tm-c.tm-flip,.tm-row.tm-shake,.tm-msg.on{animation:none}
}