@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

/* === CONTAINER === */
.ak-cw-box {
  max-width: 820px;
  margin: 28px auto;
  font-family: 'Nunito', sans-serif;
}

.ak-cw-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(rgba(245,238,255,.95), rgba(255,241,250,.95)),
    url("http://atividadekids.com/wp-content/uploads/2026/06/Cruzadinha.jpg") center/cover no-repeat;
  border: 3px solid #e2d5ff;
  padding: 24px 16px 20px;
  box-shadow: 0 18px 48px rgba(80,40,180,.13);
}

.ak-cw-wrap::before {
  content:'';
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(168,85,247,.07) 0%, transparent 55%),
    radial-gradient(circle at 90% 80%, rgba(236,72,153,.07) 0%, transparent 55%);
}

/* === CABEÇALHO === */
.ak-cw-title {
  text-align:center;
  margin:0 0 4px;
  font-size:28px;
  font-weight:900;
  color:#3d1a8a;
  letter-spacing:-.5px;
  position:relative;
}
.ak-cw-sub {
  text-align:center;
  margin:0 0 18px;
  font-size:13px;
  font-weight:700;
  color:#7a5fbf;
  position:relative;
}

/* === LAYOUT: grade + dicas === */
.ak-cw-layout {
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:start;
  position:relative;
}

/* === GRADE === */
.ak-cw-grid-wrap {
  overflow:auto;
}
.ak-cw-grid {
  display:inline-grid;
  border:2px solid #d8ccff;
  border-radius:14px;
  overflow:hidden;
  background:#e8e0ff;
  gap:2px;
  padding:2px;
}
.ak-cw-row { display:contents; }

.ak-cw-cell {
  width:36px;
  height:36px;
  background:#f5f0ff;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
  color:#3d1a8a;
  box-sizing:border-box;
  position:relative;
  user-select:none;
}
.ak-cw-cell.empty {
  background:#3d1a8a;
  border-radius:4px;
}
.ak-cw-cell.active {
  background:#fff;
  border:2px solid #a855f7;
  cursor:pointer;
}
.ak-cw-cell.active:focus {
  outline:none;
  border-color:#ec4899;
  background:#fff0ff;
}
.ak-cw-cell.correct {
  background:#22d475;
  color:#fff;
  border-color:#22d475;
}
.ak-cw-cell.wrong {
  background:#ff5c8a;
  color:#fff;
  border-color:#ff5c8a;
}
.ak-cw-cell.highlight {
  background:#fffde7;
  border:2px solid #ffd700;
}
.ak-cw-num {
  position:absolute;
  top:1px;left:3px;
  font-size:8px;
  font-weight:900;
  color:#a855f7;
  line-height:1;
}

/* === DICAS === */
.ak-cw-clues {
  min-width:160px;
  max-width:200px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ak-cw-clue-section {
  background:rgba(255,255,255,.9);
  border:2px solid #e2d5ff;
  border-radius:16px;
  padding:10px 12px;
}
.ak-cw-clue-title {
  font-size:11px;
  font-weight:900;
  color:#a855f7;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.ak-cw-clue-item {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s;
  margin-bottom:2px;
}
.ak-cw-clue-item:hover { background:#f0e9ff; }
.ak-cw-clue-item.done .ak-cw-clue-icon { opacity:.45; }
.ak-cw-clue-item.done .ak-cw-clue-label {
  text-decoration:line-through;
  opacity:.5;
}
.ak-cw-clue-num {
  min-width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,#a855f7,#ec4899);
  color:#fff;
  font-size:10px;
  font-weight:900;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ak-cw-clue-icon { font-size:22px;line-height:1; }
.ak-cw-clue-label {
  font-size:11px;
  font-weight:700;
  color:#3d1a8a;
  word-break:break-word;
}

/* === MENSAGEM === */
.ak-cw-msg-wrap { text-align:center;margin-top:14px;position:relative; }
.ak-cw-msg {
  display:inline-block;
  background:rgba(20,10,50,.80);
  border-radius:999px;
  padding:8px 20px;
  color:#c4f5d8;
  font-size:13px;
  font-weight:900;
}

/* === OVERLAY === */
#akCwOverlay {
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center;border-radius:28px;
  background:
    linear-gradient(160deg,rgba(61,26,138,.90),rgba(180,60,160,.84)),
    url("http://atividadekids.com/wp-content/uploads/2026/06/Cruzadinha.jpg") center/cover no-repeat;
}
#akCwOverlay.ak-hide { display:none; }
#akCwOverlay h1 { color:#fff;font-size:30px;font-weight:900;margin:0 0 10px;text-shadow:0 3px 14px rgba(0,0,0,.4); }
#akCwOverlay p  { color:#f0d9ff;font-size:14px;font-weight:700;max-width:320px;line-height:1.5;margin:0 0 22px; }
.ak-cw-start-btn {
  border:none;border-radius:999px;
  padding:13px 30px;
  font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;
  cursor:pointer;transition:transform .15s;
}
.ak-cw-start-btn:active { transform:scale(.96); }
.ak-cw-start-btn.pink {
  background:linear-gradient(135deg,#ff5c8a,#ff8a3d);color:#fff;
  box-shadow:0 10px 28px rgba(255,92,138,.38);
}
.ak-cw-start-btn.green {
  background:linear-gradient(135deg,#22d475,#0fa850);color:#fff;
  box-shadow:0 10px 28px rgba(34,212,117,.38);
}

/* === TECLADO VIRTUAL (mobile) === */
.ak-cw-keyboard {
  display:none;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin-top:12px;
  position:relative;
}
.ak-cw-keyboard.visible { display:flex; }
.ak-cw-key {
  border:none;
  width:36px;height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#7c5cff,#b07cff);
  color:#fff;
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(124,92,255,.25);
  transition:transform .1s;
}
.ak-cw-key:active { transform:scale(.9); }

/* === RESPONSIVO === */
@media (max-width:640px) {
  .ak-cw-layout {
    grid-template-columns:1fr;
  }
  .ak-cw-clues {
    max-width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
  }
  .ak-cw-clue-section { flex:1;min-width:140px; }
  .ak-cw-cell { width:30px;height:30px;font-size:14px; }
  .ak-cw-keyboard { display:flex; }
  .ak-cw-title { font-size:22px; }
}@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

/* === CONTAINER === */
.ak-cw-box {
  max-width: 820px;
  margin: 28px auto;
  font-family: 'Nunito', sans-serif;
}

.ak-cw-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(rgba(245,238,255,.95), rgba(255,241,250,.95)),
    url("http://atividadekids.com/wp-content/uploads/2026/06/Cruzadinha.jpg") center/cover no-repeat;
  border: 3px solid #e2d5ff;
  padding: 24px 16px 20px;
  box-shadow: 0 18px 48px rgba(80,40,180,.13);
}

.ak-cw-wrap::before {
  content:'';
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(168,85,247,.07) 0%, transparent 55%),
    radial-gradient(circle at 90% 80%, rgba(236,72,153,.07) 0%, transparent 55%);
}

/* === CABEÇALHO === */
.ak-cw-title {
  text-align:center;
  margin:0 0 4px;
  font-size:28px;
  font-weight:900;
  color:#3d1a8a;
  letter-spacing:-.5px;
  position:relative;
}
.ak-cw-sub {
  text-align:center;
  margin:0 0 18px;
  font-size:13px;
  font-weight:700;
  color:#7a5fbf;
  position:relative;
}

/* === LAYOUT: grade + dicas === */
.ak-cw-layout {
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:start;
  position:relative;
}

/* === GRADE === */
.ak-cw-grid-wrap {
  overflow:auto;
}
.ak-cw-grid {
  display:inline-grid;
  border:2px solid #d8ccff;
  border-radius:14px;
  overflow:hidden;
  background:#e8e0ff;
  gap:2px;
  padding:2px;
}
.ak-cw-row { display:contents; }

.ak-cw-cell {
  width:36px;
  height:36px;
  background:#f5f0ff;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
  color:#3d1a8a;
  box-sizing:border-box;
  position:relative;
  user-select:none;
}
.ak-cw-cell.empty {
  background:#3d1a8a;
  border-radius:4px;
}
.ak-cw-cell.active {
  background:#fff;
  border:2px solid #a855f7;
  cursor:pointer;
}
.ak-cw-cell.active:focus {
  outline:none;
  border-color:#ec4899;
  background:#fff0ff;
}
.ak-cw-cell.correct {
  background:#22d475;
  color:#fff;
  border-color:#22d475;
}
.ak-cw-cell.wrong {
  background:#ff5c8a;
  color:#fff;
  border-color:#ff5c8a;
}
.ak-cw-cell.highlight {
  background:#fffde7;
  border:2px solid #ffd700;
}
.ak-cw-num {
  position:absolute;
  top:1px;left:3px;
  font-size:8px;
  font-weight:900;
  color:#a855f7;
  line-height:1;
}

/* === DICAS === */
.ak-cw-clues {
  min-width:160px;
  max-width:200px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ak-cw-clue-section {
  background:rgba(255,255,255,.9);
  border:2px solid #e2d5ff;
  border-radius:16px;
  padding:10px 12px;
}
.ak-cw-clue-title {
  font-size:11px;
  font-weight:900;
  color:#a855f7;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.ak-cw-clue-item {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s;
  margin-bottom:2px;
}
.ak-cw-clue-item:hover { background:#f0e9ff; }
.ak-cw-clue-item.done .ak-cw-clue-icon { opacity:.45; }
.ak-cw-clue-item.done .ak-cw-clue-label {
  text-decoration:line-through;
  opacity:.5;
}
.ak-cw-clue-num {
  min-width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,#a855f7,#ec4899);
  color:#fff;
  font-size:10px;
  font-weight:900;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ak-cw-clue-icon { font-size:22px;line-height:1; }
.ak-cw-clue-label {
  font-size:11px;
  font-weight:700;
  color:#3d1a8a;
  word-break:break-word;
}

/* === MENSAGEM === */
.ak-cw-msg-wrap { text-align:center;margin-top:14px;position:relative; }
.ak-cw-msg {
  display:inline-block;
  background:rgba(20,10,50,.80);
  border-radius:999px;
  padding:8px 20px;
  color:#c4f5d8;
  font-size:13px;
  font-weight:900;
}

/* === OVERLAY === */
#akCwOverlay {
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center;border-radius:28px;
  background:
    linear-gradient(160deg,rgba(61,26,138,.90),rgba(180,60,160,.84)),
    url("http://atividadekids.com/wp-content/uploads/2026/06/Cruzadinha.jpg") center/cover no-repeat;
}
#akCwOverlay.ak-hide { display:none; }
#akCwOverlay h1 { color:#fff;font-size:30px;font-weight:900;margin:0 0 10px;text-shadow:0 3px 14px rgba(0,0,0,.4); }
#akCwOverlay p  { color:#f0d9ff;font-size:14px;font-weight:700;max-width:320px;line-height:1.5;margin:0 0 22px; }
.ak-cw-start-btn {
  border:none;border-radius:999px;
  padding:13px 30px;
  font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;
  cursor:pointer;transition:transform .15s;
}
.ak-cw-start-btn:active { transform:scale(.96); }
.ak-cw-start-btn.pink {
  background:linear-gradient(135deg,#ff5c8a,#ff8a3d);color:#fff;
  box-shadow:0 10px 28px rgba(255,92,138,.38);
}
.ak-cw-start-btn.green {
  background:linear-gradient(135deg,#22d475,#0fa850);color:#fff;
  box-shadow:0 10px 28px rgba(34,212,117,.38);
}

/* === TECLADO VIRTUAL (mobile) === */
.ak-cw-keyboard {
  display:none;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin-top:12px;
  position:relative;
}
.ak-cw-keyboard.visible { display:flex; }
.ak-cw-key {
  border:none;
  width:36px;height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#7c5cff,#b07cff);
  color:#fff;
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(124,92,255,.25);
  transition:transform .1s;
}
.ak-cw-key:active { transform:scale(.9); }

/* === RESPONSIVO === */
@media (max-width:640px) {
  .ak-cw-layout {
    grid-template-columns:1fr;
  }
  .ak-cw-clues {
    max-width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
  }
  .ak-cw-clue-section { flex:1;min-width:140px; }
  .ak-cw-cell { width:30px;height:30px;font-size:14px; }
  .ak-cw-keyboard { display:flex; }
  .ak-cw-title { font-size:22px; }
}