/* R241 — Dilemas e Desafios + aviso flutuante de abertura. Prefixo dd-. Azul-escuro #0F2B60 e dourado #C9A227. Mobile-first (celular → tablet → computador). */
.dd-host{display:block}
.dd{--dd-navy:#0F2B60;--dd-navy2:#0A1F47;--dd-gold:#C9A227;--dd-gold2:#F4C168;--dd-line:rgba(15,43,96,.14);--dd-bg:#fff;--dd-soft:rgba(15,43,96,.05);--dd-ink:#0b1730;--dd-mut:rgba(11,23,48,.66);
  margin:10px 16px 16px;display:grid;gap:12px;box-sizing:border-box;color:var(--dd-ink)}
.dd *{box-sizing:border-box}
.dd-ic{width:20px;height:20px;flex:none;vertical-align:-4px}
.dd-ic--gold{color:var(--dd-gold)}.dd-ic--muted{color:var(--dd-mut)}

/* cabeçalho */
.dd-hero{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:16px;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--dd-navy2),var(--dd-navy) 70%);border:1px solid rgba(201,162,39,.55);box-shadow:0 8px 22px rgba(10,31,71,.28)}
.dd-hero__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--dd-gold2);background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5)}
.dd-hero__ic .dd-ic{width:26px;height:26px}
.dd-hero__t h2{margin:0;font-size:20px;line-height:1.2;letter-spacing:.01em}
.dd-hero__t p{margin:3px 0 0;font-size:14px;line-height:1.35;color:rgba(255,255,255,.82)}
.dd-pill{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--dd-gold2);background:rgba(255,255,255,.08);border:1px solid rgba(201,162,39,.4)}
.dd-pill .dd-ic{width:16px;height:16px}

/* meu progresso */
.dd-me{display:grid;gap:8px;padding:14px;border-radius:18px;background:var(--dd-bg);border:1px solid var(--dd-line)}
.dd-me[hidden]{display:none}
.dd-me__login{margin:0;font-size:14px;color:var(--dd-mut)}
.dd-me__top{display:flex;align-items:center;gap:12px}
.dd-me__badge{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--dd-navy);background:linear-gradient(135deg,var(--dd-gold2),var(--dd-gold))}
.dd-me__txt{display:grid;gap:2px;min-width:0}.dd-me__txt strong{font-size:16px}.dd-me__txt span{font-size:13px;color:var(--dd-mut)}
.dd-me__bar{height:8px;border-radius:99px;background:var(--dd-soft);overflow:hidden}.dd-me__bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--dd-navy),var(--dd-gold))}
.dd-me__next{font-size:13px;color:var(--dd-mut)}
.dd-me__stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600}
.dd-claim{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:14px;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.55);font-size:14px}
.dd-claim span{flex:1 1 200px}
.dd-btn{min-height:44px;padding:0 18px;border-radius:12px;border:0;font:inherit;font-weight:700;color:#2a1d00;background:linear-gradient(135deg,var(--dd-gold2),var(--dd-gold));cursor:pointer}
.dd-btn:disabled{opacity:.6}

/* abas e filtros */
.dd-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:14px;background:var(--dd-soft)}
.dd-tab{min-height:44px;border:0;border-radius:11px;font:inherit;font-weight:700;font-size:15px;color:inherit;background:transparent;cursor:pointer}
.dd-tab.is-on{color:#fff;background:var(--dd-navy);box-shadow:inset 0 -2px 0 var(--dd-gold)}
.dd-body{display:grid;gap:12px;min-width:0}
.dd-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.dd-chip{flex:none;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--dd-line);background:var(--dd-bg);color:inherit;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.dd-chip.is-on{color:#fff;background:var(--dd-navy);border-color:var(--dd-gold)}
.dd-note{margin:0;padding:10px 12px;border-radius:12px;font-size:14px;background:var(--dd-soft);border:1px solid var(--dd-line)}
.dd-note--gold{background:rgba(201,162,39,.12);border-color:rgba(201,162,39,.45)}
.dd-empty{margin:0;padding:18px;text-align:center;font-size:15px;color:var(--dd-mut)}

/* categoria > subcategoria > itens */
.dd-cat{display:grid;gap:10px;padding:14px;border-radius:18px;background:var(--dd-bg);border:1px solid var(--dd-line);box-shadow:0 2px 10px rgba(15,43,96,.06)}
.dd-cat__head{display:flex;align-items:center;gap:10px}
.dd-cat__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--dd-navy);border:1px solid var(--dd-gold)}
.dd-cat__head h3{margin:0;flex:1;min-width:0;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.dd-cat__n{font-size:12px;color:var(--dd-mut);white-space:nowrap}
.dd-sub{display:grid;gap:10px;padding-top:10px;border-top:1px solid var(--dd-line)}
.dd-sub__t{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dd-gold)}
.dd-item{display:grid;gap:10px;padding:12px;border-radius:16px;background:var(--dd-soft);border:1px solid var(--dd-line)}
.dd-item__meta{display:flex;flex-wrap:wrap;gap:6px}
.dd-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--dd-bg);border:1px solid var(--dd-line)}
.dd-tag .dd-ic{width:14px;height:14px}
.dd-tag--kind{color:#fff;background:var(--dd-navy);border-color:var(--dd-navy)}
.dd-tag--pts{color:#5b4300;background:rgba(201,162,39,.2);border-color:rgba(201,162,39,.6)}
.dd-q{margin:0;font-size:16px;line-height:1.4;font-weight:600;overflow-wrap:anywhere}
.dd-opts{display:grid;gap:8px}
.dd-opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 14px;border-radius:14px;border:1.5px solid rgba(15,43,96,.28);background:var(--dd-bg);color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .15s,transform .1s}
.dd-opt:hover:not(:disabled){border-color:var(--dd-gold)}.dd-opt:active:not(:disabled){transform:scale(.99)}
.dd-opt:focus-visible{outline:3px solid var(--dd-gold);outline-offset:2px}
.dd-opt__key{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;color:var(--dd-gold2);background:var(--dd-navy)}
.dd-opt__txt{position:relative;z-index:1;flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.dd-opt__pct{position:relative;z-index:1;font-weight:800;font-size:16px}
.dd-opt__ck{position:relative;z-index:1;width:18px;height:18px;color:var(--dd-gold)}
.dd-opt__bar{position:absolute;left:0;top:0;bottom:0;background:rgba(15,43,96,.12);transition:width .5s ease}
.dd-opt.is-mine{border-color:var(--dd-gold)}.dd-opt.is-mine .dd-opt__bar{background:rgba(201,162,39,.3)}
.dd-opt:disabled{cursor:default;opacity:1}
.dd-item__foot{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.dd-item__hint{color:var(--dd-mut);padding-top:1px}
.dd-item__cmp{display:grid;gap:2px}.dd-item__cmp span{color:var(--dd-mut)}

/* ranking */
.dd-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;background:var(--dd-soft)}
.dd-seg__b{min-height:40px;border:0;border-radius:9px;font:inherit;font-size:14px;font-weight:700;color:inherit;background:transparent;cursor:pointer}
.dd-seg__b.is-on{background:var(--dd-bg);box-shadow:0 1px 4px rgba(15,43,96,.2);color:var(--dd-navy)}
.dd-rank{display:grid;gap:8px}
.dd-rank__row{display:grid;grid-template-columns:34px 38px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--dd-bg);border:1px solid var(--dd-line)}
.dd-rank__row.is-me{border-color:var(--dd-gold);background:rgba(201,162,39,.1)}
.dd-rank__pos{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--dd-soft)}
.is-top1 .dd-rank__pos{color:#2a1d00;background:linear-gradient(135deg,var(--dd-gold2),var(--dd-gold))}
.is-top2 .dd-rank__pos{color:#1f2937;background:linear-gradient(135deg,#e5e7eb,#9ca3af)}
.is-top3 .dd-rank__pos{color:#3b1d06;background:linear-gradient(135deg,#f0c9a0,#b0743a)}
.dd-rank__av{width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--dd-navy)}
.dd-rank__av img{width:100%;height:100%;object-fit:cover}
.dd-rank__nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600}
.dd-rank__pt{text-align:right;font-size:15px}.dd-rank__pt small{color:var(--dd-mut)}

.dd-how{padding:10px 14px;border-radius:14px;border:1px solid var(--dd-line);background:var(--dd-bg);font-size:14px}
.dd-how summary{min-height:40px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.dd-how ul{margin:4px 0 6px;padding-left:18px;display:grid;gap:6px;line-height:1.4}

.dd-toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:3600;padding:12px 14px;border-radius:14px;color:#fff;font-size:15px;text-align:center;background:var(--dd-navy,#0F2B60);border:1px solid #C9A227;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.dd-toast.is-bad{background:#991B1B;border-color:#FCA5A5}

/* aviso flutuante de abertura (só na rede social) */
.dd-open{position:fixed;z-index:3400;left:12px;right:12px;top:calc(66px + env(safe-area-inset-top,0px));max-width:460px;margin:0 auto;display:grid;gap:10px;padding:14px 14px 14px 16px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#0A1F47,#0F2B60 75%);border:1.5px solid #C9A227;box-shadow:0 12px 32px rgba(0,0,0,.35);opacity:0;transform:translateY(-14px);transition:opacity .3s ease,transform .3s ease}
.dd-open.is-in{opacity:1;transform:none}
.dd-open__t{margin:0;padding-right:40px;font-size:16px;font-weight:800;letter-spacing:.04em;color:#F4C168;line-height:1.25}
.dd-open__s{margin:0;padding-right:40px;font-size:15px;color:rgba(255,255,255,.92)}
.dd-open__x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#fff;cursor:pointer}
.dd-open__x .dd-ic{width:20px;height:20px}
.dd-open__go{min-height:46px;padding:0 18px;border:0;border-radius:12px;font:inherit;font-weight:800;color:#2a1d00;background:linear-gradient(135deg,#F4C168,#C9A227);cursor:pointer}
.dd-open__go:focus-visible,.dd-open__x:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (min-width:768px){
  .dd{max-width:860px;margin-left:auto;margin-right:auto;gap:14px}
  .dd-hero{grid-template-columns:auto 1fr auto;padding:20px}
  .dd-pill{grid-column:auto;margin-top:0}
  .dd-opts{grid-template-columns:1fr 1fr}
  .dd-rank__row{grid-template-columns:40px 42px 1fr auto}
  .dd-open{left:auto;right:24px;margin:0;width:420px}
}
@media (prefers-reduced-motion:reduce){.dd-opt,.dd-opt__bar,.dd-open{transition:none}}

/* tema escuro */

/* ===== Administração (admin-dilemas.html) — R241 ===== */
.dda{display:grid;gap:14px;padding:12px 0 90px}
.dda-card{background:#fff;border:1px solid var(--dd-line,#d9deea);border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0}
.dda-card h3,.dda-h{margin:0;font-size:17px;color:var(--dd-navy,#0F2B60)}
.dda-h{font-size:15px;margin-top:10px}
.dda-sm{margin:0;font-size:13px;color:#4b5565;line-height:1.4}
.dda-stats{display:flex;flex-wrap:wrap;gap:6px}
.dda-chip{padding:4px 10px;border-radius:999px;font-size:13px;background:#f3f5fa;border:1px solid var(--dd-line,#d9deea)}
.dda-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.dda-f{display:grid;gap:4px;font-size:13px;font-weight:600;color:#26324a;min-width:0}
.dda-f input,.dda-f select,.dda-f textarea,.dda-card input[type=search]{width:100%;box-sizing:border-box;min-height:44px;padding:8px 10px;border:1px solid #b9c1d3;border-radius:10px;font:inherit;font-size:16px;font-weight:400;background:#fff;color:#111}
.dda-f textarea{min-height:64px;resize:vertical}
.dda-ck{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}
.dda-ck input{width:20px;height:20px}
.dda-row{display:flex;flex-wrap:wrap;gap:8px}
.dda-b{min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--dd-navy,#0F2B60);background:#fff;color:var(--dd-navy,#0F2B60);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.dda-b--p{background:var(--dd-navy,#0F2B60);color:#fff;border-color:#C9A227}
.dda-b--d{border-color:#991B1B;color:#991B1B}
.dda-b[data-armed="1"]{background:#991B1B;color:#fff}
.dda-b:disabled{opacity:.55}
.dda-form{display:grid;gap:10px;padding:10px 0}
.dda-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.dda-cat,.dda-new{border:1px solid var(--dd-line,#d9deea);border-radius:14px;background:#fff;padding:0 12px;margin-bottom:8px}
.dda-cat>summary,.dda-new>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--dd-navy,#0F2B60)}
.dda-new{background:#f8f9fc}
.dda-cat.is-off,.dda-sub.is-off,.dda-item.is-off{opacity:.6}
.dda-sub,.dda-item{border-top:1px solid var(--dd-line,#d9deea);padding:10px 0;display:grid;gap:8px;min-width:0}
.dda-sub__h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.dda-item__t{display:flex;flex-wrap:wrap;gap:6px}
.dda-q{margin:0;font-size:15px;overflow-wrap:anywhere}
@media (min-width:900px){.dda{max-width:1000px;margin:0 auto}}
/* R244 — padrão oficial MassaCoin na área de Dilemas: fundo claro, blocos com sombra suave, azul-marinho nos textos, dourado só em botões e destaques; igual no modo escuro do aparelho (só cores) */
.dd{--dd-bg:#FFFFFF;--dd-soft:rgba(15,43,96,.05);--dd-line:rgba(15,43,96,.14);--dd-ink:#0F2B60;--dd-mut:rgba(15,43,96,.72)}
.dd-hero{color:var(--dd-navy);background:#FFFFFF;border:1px solid rgba(201,162,39,.55);box-shadow:0 4px 16px rgba(15,43,96,.10)}
.dd-hero__ic{color:var(--dd-navy);background:rgba(201,162,39,.16)}
.dd-hero__t h2{color:var(--dd-navy)}
.dd-hero__t p{color:var(--dd-mut)}
.dd-pill{color:var(--dd-navy);background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.5)}
.dd-me,.dd-cat,.dd-how,.dd-rank__row{box-shadow:0 4px 16px rgba(15,43,96,.08)}


/* R251 — cores IGUAIS às da tela de referência "Desafío de Duelo": títulos #1A2F66, botões azuis (#1E6DB0 / #1C347C), selo amarelo #FCD605,
   faixa clara #E9F2F9, fundo branco. Só troca as variáveis e os poucos pontos dourados; layout e funções não mudam. */
.dd{--dd-navy:#1A2F66;--dd-navy2:#1C347C;--dd-gold:#1E6DB0;--dd-gold2:#FCD605;--dd-line:rgba(26,47,102,.14);--dd-soft:rgba(26,47,102,.05);--dd-ink:#1A2F66;--dd-mut:rgba(26,47,102,.7)}
.dd-btn,.dd-open__go{color:#fff;background:linear-gradient(180deg,#1E6DB0,#1C5C9A);box-shadow:0 6px 16px rgba(30,109,176,.28)}
.dd-me__badge,.is-top1 .dd-rank__pos{color:#1A2F66;background:#FCD605}
.dd-tag--pts{color:#1A2F66;background:#FCD605}
.dd-note--gold{background:#E9F2F9;border-color:rgba(30,109,176,.3)}
.dd-hero__ic,.dd-pill{background:#E9F2F9;border-color:rgba(30,109,176,.35);color:#1A2F66}
/* aviso flutuante "A quem vai desafiar hoje?": cartão branco com título azul, como os cartões da tela de referência */
.dd-open{color:#1A2F66;background:#fff;border:1px solid rgba(30,109,176,.35);box-shadow:0 12px 32px rgba(26,47,102,.28)}
.dd-open__t{color:#1A2F66}.dd-open__s{color:#3b4a76}.dd-open__x{color:#1A2F66}
.dd-open__go{color:#fff;background:linear-gradient(180deg,#1E6DB0,#1C5C9A)}
.dd-open__go:focus-visible,.dd-open__x:focus-visible{outline-color:#1E6DB0}
/* R264 — «Ver mais» e «Voltar ao início da lista» (lista paginada: 8 + 5 por vez); sem cor nova */
.dd-more,.dl-more{display:block;width:100%;min-height:48px;margin:12px 0 4px}
.dd-up,.dl-up{display:block;margin:8px auto 16px;min-height:44px;padding:0 16px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.dl-list{display:block}
