/* Conecta a Comunidade — estilos. Cor da área: #16a085. Cores da fibra: azul/ciano. */
body.cc-body { background: linear-gradient(#bfe9ff 0, #e3f6ff 30%, #d6f0d2 70%, #b9e3b5 100%) fixed; min-height: 100vh; }
.cc { max-width: 560px; margin: 0 auto; padding: 10px max(12px, env(safe-area-inset-right)) 28px max(12px, env(safe-area-inset-left)); }
.cc h1, .cc h2 { overflow-wrap: anywhere; }

/* ----- tela inicial ----- */
.cc-start { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cc-start__img { width: 110px; height: auto; max-height: 150px; object-fit: contain; }
.cc-lead { font-size: 18px; font-weight: 700; margin: 0 0 4px; max-width: 34ch; }
.cc-steps { margin: 4px 0 12px; padding-left: 22px; text-align: left; font-size: 17px; font-weight: 700; display: grid; gap: 6px; }
.cc-steps--left { font-size: 16px; font-weight: 600; }
.cc-start__btns, .cc-dlg__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ----- seletor de nível e HUD ----- */
.cc-chips { display: flex; gap: 6px; justify-content: center; }
.chip { position: relative; width: 48px; height: 48px; padding: 0; border: 3px solid var(--navy); border-radius: 12px; background: #fff; color: var(--navy); font-weight: 900; font-size: 18px; box-shadow: 0 3px 0 var(--navy); }
.chip.done { background: #e1f7f1; }
.chip.on { background: #16a085; color: #fff; }
.chip.lock { opacity: .45; cursor: not-allowed; box-shadow: none; }
.chip__st { position: absolute; left: 0; right: 0; bottom: -2px; font-size: 9px; line-height: 1; color: #f5b400; letter-spacing: -1px; text-shadow: 0 1px 0 #0b2b58; }
.chip.on .chip__st { color: #ffe066; }
.cc-hud { display: flex; justify-content: space-between; gap: 6px; margin: 10px 2px 8px; font-weight: 800; font-size: 15px; color: var(--navy); }
.cc-hud b { font-variant-numeric: tabular-nums; background: #fff; border: 2px solid var(--navy); border-radius: 8px; padding: 1px 7px; margin-left: 2px; }

/* ----- tabuleiro ----- */
.cc-boardwrap { display: flex; justify-content: center; }
.cc-board {
  --n: 3;
  --cell: min(calc((100vw - 56px) / var(--n)), calc((100dvh - 330px) / var(--n)), 92px);
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; background: #8fd19a; border: 4px solid var(--navy); border-radius: 18px; box-shadow: 0 5px 0 #061f3e;
}
@supports not (height: 100dvh) { .cc-board { --cell: min(calc((100vw - 56px) / var(--n)), calc((100vh - 330px) / var(--n)), 92px); } }
@media (max-height: 560px) { .cc-board { --cell: min(calc((100vw - 56px) / var(--n)), 64px); } }

.cell { position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; overflow: visible; border-radius: 6px; }
.cell > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.cell::before { content: ''; position: absolute; inset: 1px; border-radius: 6px; z-index: 0; }
.tile-a::before { background: #b9e8c0; } .tile-b::before { background: #a9dfb2; }
.tile-via::before { background: #e8f4f1; box-shadow: inset 0 0 0 2px #c3dcd6; }
.cell--vazio .deco { opacity: .95; }
.pipe { transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 50%; z-index: 1; }
button.cell { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button.cell:hover::before { background: #fff; }
button.cell:active .pipe { filter: brightness(1.15); }
button.cell:focus-visible { outline: 4px solid #ffb703; outline-offset: -2px; z-index: 3; border-radius: 8px; }
.cell svg { position: absolute; }
.cell .pipe, .cell .icon { z-index: 1; } .cell .icon { z-index: 2; }

/* fibra: duto escuro + núcleo de luz */
.pipe .duct, .pipe .duct-dot { stroke: #17345f; fill: none; stroke-width: 28; }
.pipe .duct-dot { fill: #17345f; stroke: none; }
.pipe .core { stroke: #7f9cc4; fill: none; stroke-width: 12; stroke-linecap: butt; transition: stroke .25s; }
.pipe .core-dot { fill: #7f9cc4; transition: fill .25s; }
.cell.lit .pipe .core { stroke: #c6fbff; transition-delay: calc(var(--d, 0) * 70ms); }
.cell.lit .pipe .core-dot { fill: #c6fbff; transition-delay: calc(var(--d, 0) * 70ms); }
.cell.lit .pipe { filter: drop-shadow(0 0 4px #29d3f0); }
.cell.lit::before { background: #d9f7ff; transition: background .3s; transition-delay: calc(var(--d, 0) * 70ms); }

/* casas */
.icon-casa .janela { fill: #52627e; transition: fill .3s; }
.cell.lit .icon-casa .janela { fill: #ffe45c; transition-delay: calc(var(--d, 0) * 70ms); }
.cell.lit .icon-casa { filter: drop-shadow(0 0 6px #ffe45c); }
.cell--casa:not(.lit) .icon-casa { filter: saturate(.7); }

/* central */
.icon-central .halo { animation: ccPulse 2.2s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes ccPulse { 0%, 100% { transform: scale(.92); opacity: .25; } 50% { transform: scale(1.12); opacity: .5; } }

/* dica */
.cell.hint::before { background: #fff3b0; animation: ccHint .7s ease-in-out infinite alternate; }
.cell.hint { outline: 4px solid #ffb703; outline-offset: -2px; z-index: 2; }
@keyframes ccHint { from { transform: scale(1); } to { transform: scale(1.1); } }

/* ----- guia, ações ----- */
.cc-guide { margin: 12px 0 8px; align-items: center; }
.cc-guide .m-guide__img { width: 56px; height: 56px; }
.cc-guide .m-guide__bubble { margin: 0; flex: 1; font-size: 15px; }
.cc-guide .m-guide__bubble::before { bottom: auto; top: 50%; margin-top: -8px; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ----- diálogos ----- */
.cc-dlg { width: min(92vw, 460px); max-height: 92vh; padding: 0; border: 4px solid var(--navy); border-radius: 22px; background: var(--paper); color: var(--navy); box-shadow: 0 8px 0 #061f3e; overflow: auto; }
.cc-dlg::backdrop { background: rgba(8, 36, 69, .6); }
.cc-dlg__in { padding: 18px 20px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cc-dlg__in h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.cc-dlg__in p { margin: 0; font-size: 17px; font-weight: 700; }
.cc-dlg__img { width: 72px; height: auto; max-height: 96px; object-fit: contain; }
.cc-note { font-size: 15px !important; font-weight: 600 !important; color: var(--ink-soft); }
.cc-badge { background: #e1f7f1; border: 3px solid #16a085; border-radius: 12px; padding: 8px 12px; color: #0b5d4d; }
.cc-stars span { font-size: 40px; line-height: 1; }
.cc-stars .on { color: #f5b400; text-shadow: 0 2px 0 #b07d00; }
.cc-stars .off { color: #9aa9b8; opacity: .55; }

/* ----- telas estreitas / pouco movimento ----- */
@media (max-width: 400px) {
  .cc-hud { font-size: 13px; }
  .cc-start__img { width: 90px; }
  .cc-lead, .cc-steps { font-size: 16px; }
  .chip { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe, .pipe .core, .pipe .core-dot, .icon-casa .janela, .cell::before { transition: none !important; }
  .cell.lit .pipe .core, .cell.lit .pipe .core-dot, .cell.lit .icon-casa .janela, .cell.lit::before { transition-delay: 0s !important; }
  .icon-central .halo, .cell.hint::before { animation: none !important; }
}
.cc-rm .pipe, .cc-rm .pipe .core, .cc-rm .pipe .core-dot, .cc-rm .icon-casa .janela, .cc-rm .cell::before { transition: none !important; }
.cc-rm .icon-central .halo, .cc-rm .cell.hint::before { animation: none !important; }