/* Cartas "E se...?", Cores Trapaceiras e Ache o Tico Diferente (public/jogos-materiais.js). */

/* Cartas "E se...?": verso amarelo com o Tico espiando, frente creme como no material impresso. */
.tm-mesa{display:flex;justify-content:center;margin:6px 0 14px}
.tm-carta{width:min(260px,72vw);aspect-ratio:5/7;border:0;padding:0;border-radius:22px;box-shadow:var(--sombra);overflow:hidden;cursor:pointer;background:none;font:inherit;color:inherit}
.tm-carta.aberta{cursor:default;animation:tm-virar .45s ease-out}
.tm-carta.aberta{width:min(230px,62vw)}
@keyframes tm-virar{from{transform:rotateY(90deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.tm-carta.aberta{animation:none}}
.tm-verso{position:relative;height:100%;background:radial-gradient(circle at 80% 14%,#FFF4B8 0 9%,transparent 10%),#F3D46B;display:flex;flex-direction:column;align-items:center;padding-top:18%}
.tm-verso small{color:#2F5B9A;font-weight:600;font-size:.82rem;text-align:center;line-height:1.3;margin-top:4px}
.tm-verso .tm-espia{position:absolute;left:50%;bottom:-6%;width:86%;transform:translateX(-50%);pointer-events:none}
.tm-logo{font-family:var(--fonte);font-weight:800;color:#2F5B9A;font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.tm-logo b{font-size:.7em;font-weight:800}
.tm-logo i{font-style:normal;color:#D9483B;font-size:1.15em;margin-left:2px}
.tm-logo.peq{font-size:1.7rem}
.tm-frente{height:100%;background:#FBF3E2;border:2px solid #EADBC0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:16px 14px;text-align:center}
.tm-frente .learning-art{width:96px;height:96px;object-fit:contain}
.tm-carta.compacta{width:min(440px,100%);aspect-ratio:auto;cursor:default}
.tm-carta.compacta .tm-frente{flex-direction:row;align-items:center;text-align:left;padding:10px 14px;gap:12px}
.tm-carta.compacta .tm-logo{display:none}
.tm-carta.compacta .learning-art{width:64px;height:64px;flex:none}
.tm-carta.compacta .tm-frente p{margin:0;font-size:1rem}
.tm-mesa+.scene-caption:not(.center){display:none}
.tm-palavra.mini{font-size:1em;letter-spacing:.02em}
.tm-frente p{margin:auto 0;color:#4B3A2A;font-size:1.05rem;font-weight:500;line-height:1.4}
.tm-propria{max-width:460px;margin:0 auto;display:grid;gap:10px}
.tm-propria .acoes{display:flex;gap:10px;flex-wrap:wrap}
.tm-ideia-card{max-width:420px;margin:0 auto 12px;background:var(--card);border-radius:18px;box-shadow:var(--sombra);padding:14px 16px;text-align:center}
.tm-ideia-card small{color:var(--ink2)}
.tm-ideia-card p{margin:4px 0 0;font-weight:700;font-size:1.1rem}
.tm-separar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Cores Trapaceiras: a palavra fica sempre num quadro claro, para a tinta ser lida igual no tema escuro. */
.tm-regra{display:flex;align-items:center;gap:10px;max-width:520px;margin:4px auto 10px;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:8px 14px}
.tm-regra p{margin:0;font-weight:600}
.tm-regra-tico{width:52px;height:52px;object-fit:contain;flex:none}
.tm-quadro{max-width:420px;margin:0 auto;background:#fff;border:3px solid #2F3E6B;border-radius:22px;min-height:130px;display:flex;align-items:center;justify-content:center;padding:18px}
.tm-quadro.moldura{border:8px double #D9A42B;box-shadow:0 0 0 4px #FFF1C7 inset}
.tm-palavra{font-family:var(--fonte);font-weight:800;letter-spacing:.03em;font-size:clamp(2rem,9vw,3.2rem);line-height:1}
.tm-retorno{min-height:1.6em;text-align:center;font-weight:600;margin:10px 0 6px}
.tm-retorno .ok{color:var(--verde)}
.tm-retorno .tente{color:var(--ink2)}
.tm-cores{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px;max-width:calc(var(--n,5)*104px);margin:0 auto}
.tm-cor{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:10px 4px 8px;display:grid;justify-items:center;gap:6px;font:inherit;color:var(--ink);cursor:pointer;min-height:76px}
.tm-cor i{width:38px;height:38px;border-radius:50%;display:block;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.tm-cor span{font-size:.8rem;font-weight:600}
.tm-cor:active{transform:scale(.96)}
.tm-placar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.tm-placar span{border:2px solid var(--line);border-radius:14px;padding:6px 12px;font-size:.88rem;background:var(--card)}
.tm-placar span.atual{border-color:var(--roxo)}
.tm-folha{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px 6px;max-width:620px;margin:0 auto;background:#fff;border:3px solid #2F3E6B;border-radius:22px;padding:12px}
.tm-folha>span{text-align:center;padding:8px 2px;border-radius:12px;border:2px solid transparent}
.tm-folha .tm-palavra{font-size:clamp(.72rem,3.3vw,1.15rem)}
.tm-folha>span.feita{opacity:.28}
.tm-folha>span.agora{border-color:#2F3E6B;background:#F4F1FA}

/* Ache o Tico Diferente: grade de rostos; o diferente é espelhado (ou, no desafio, inclinado ou menor). */
.tm-ticos{display:grid;grid-template-columns:repeat(var(--lado),minmax(0,1fr));gap:clamp(2px,1vw,8px);max-width:min(560px,100%,calc(var(--lado) * 88px),66vh);margin:0 auto;background:var(--card);border:3px solid #2F3E6B;border-radius:22px;padding:clamp(6px,2vw,14px)}
.tm-tico{border:3px solid transparent;background:none;border-radius:14px;padding:2px;cursor:pointer;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.tm-tico img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.tm-tico.esp img{transform:scaleX(-1)}
.tm-tico.incl img{transform:rotate(18deg)}
.tm-tico.esp.incl img{transform:scaleX(-1) rotate(18deg)}
.tm-tico.menor img{transform:scale(.78)}
.tm-tico.esp.menor img{transform:scaleX(-1) scale(.78)}
.tm-tico.tentou{opacity:.45}
.tm-tico.linha-dica{background:#FFF4CC}
.tm-tico.achou{border-color:var(--verde);background:var(--ok-bg)}
.tm-dica-tico{max-width:560px;margin:12px auto 0;background:#FDF0DA;color:#4B3A2A;border-radius:14px;padding:8px 14px;font-size:.92rem}
.tm-dica-tico b{color:#B5532E}

/* Capas dos cartões no início (as outras capas ficam em visual.css). */
.tk-carta-ese{position:relative;z-index:1;width:30%;aspect-ratio:5/7;margin-right:30%;border-radius:12px;background:#F3D46B;box-shadow:0 8px 16px -10px rgba(75,58,42,.45);transform:rotate(-6deg);display:grid;place-items:center}
.tk-carta-ese b{font-weight:800;color:#2F5B9A;font-size:clamp(.9rem,3.4vw,1.25rem);line-height:1}
.tk-carta-ese i{font-style:normal;color:#D9483B}
.tk-stroop{position:relative;z-index:1;display:grid;gap:2px;margin-right:34%;background:#fff;border-radius:14px;padding:8px 14px;box-shadow:0 8px 16px -10px rgba(75,58,42,.45)}
.tk-stroop span{font-weight:800;letter-spacing:.03em;font-size:clamp(.8rem,3vw,1.05rem);line-height:1.2}
.tk-ticos{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:48%;margin-right:22%;background:var(--card);border-radius:14px;padding:6px}
.tk-capa .tk-ticos img.tk-t{position:static;width:100%;height:auto;filter:none}
.tk-ticos span.esp img{transform:scaleX(-1)}
.tm-verso .tm-espia{width:auto;max-width:70%;height:46%;bottom:0;object-fit:contain;object-position:bottom}